/*
Theme Name: Musel & Sauer Zeidung
Theme URI: https://presss.lu/
Author: Addedsense
Author URI: https://www.addedsense.lu/
Description: Custom theme for Musel- & Sauerzeidung (PRESSS SÀRL). Design: creative corner.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: as
*/

/* =========================================================================
   1. FONT-FACE (self-hosted, OFL)
   ========================================================================= */

@font-face {
	font-family: "Zilla Slab";
	src: url("assets/fonts/ZillaSlab-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Zilla Slab";
	src: url("assets/fonts/ZillaSlab-Italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Zilla Slab";
	src: url("assets/fonts/ZillaSlab-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Zilla Slab";
	src: url("assets/fonts/ZillaSlab-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Zilla Slab";
	src: url("assets/fonts/ZillaSlab-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Zilla Slab";
	src: url("assets/fonts/ZillaSlab-BoldItalic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("assets/fonts/Poppins-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("assets/fonts/Poppins-Italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("assets/fonts/Poppins-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("assets/fonts/Poppins-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* =========================================================================
   2. TOKENS
   ========================================================================= */

:root {
	/* Colors */
	--as-color-text: #070504;
	--as-color-heading: #070504;
	--as-color-bg: #ffffff;
	--as-color-accent: #8A7340;
	--as-color-newsletter: #8A7340;
	--as-color-footer: #585757;
	--as-color-white: #ffffff;
	--as-color-line: #d6d3cf;
	--as-color-muted: #6b6663;
	--as-color-surface: #f4f2ee;
	--as-color-overlay: rgba(7, 5, 4, 0.5);
	--as-color-shadow: rgba(7, 5, 4, 0.14);
	--as-color-lightbox: rgba(7, 5, 4, 0.85);
	--as-color-hero-shade: rgba(7, 5, 4, 0.45);
	--as-color-footer-line: rgba(255, 255, 255, 0.55);
	--as-color-accent-glow: rgba(138, 115, 64, 0.22);

	/* Fonts */
	--as-font-heading: "Zilla Slab", Georgia, "Times New Roman", serif;
	--as-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	/* Weights */
	--as-weight-regular: 400;
	--as-weight-medium: 500;
	--as-weight-semibold: 600;
	--as-weight-bold: 700;

	/* Type scale */
	--as-text-xs: 0.75rem;
	--as-text-sm: 0.8125rem;
	--as-text-base: 0.9375rem;
	--as-text-md: 1.0625rem;
	--as-text-lg: 1.25rem;
	--as-text-xl: 1.375rem;
	--as-text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	--as-text-hero: clamp(1.05rem, 0.55rem + 2.2vw, 2rem);

	--as-leading-tight: 1.25;
	--as-leading-base: 1.65;
	--as-tracking-wide: 0.12em;
	--as-tracking-wider: 0.2em;

	/* Spacing */
	--as-space-2xs: 0.25rem;
	--as-space-xs: 0.5rem;
	--as-space-sm: 0.75rem;
	--as-space-md: 1rem;
	--as-space-lg: 1.5rem;
	--as-space-xl: 2rem;
	--as-space-2xl: 3rem;
	--as-space-3xl: 4rem;
	--as-space-gutter: 1rem;

	/* Layout */
	--as-container: 1400px;
	--as-sidebar: 360px;
	--as-radius: 0;
	--as-border-width: 1px;
	--as-btn-height: 3.5rem;
	--as-nav-height: 3.25rem;
	--as-sidebtn-size: 3rem;
	--as-sidebtn-icon: 1.375rem;
	/* Distance from the top of the window; same on every screen size */
	--as-sidebtns-top: 11rem;
	--as-logo-width: 300px;
	--as-logo-footer-width: 13.5rem;

	/* Stacking order (above page content) */
	--as-z-nav: 800;
	--as-z-sidebtns: 900;
	--as-z-skiplink: 1000;
	--as-z-lightbox: 1100;

	/* Gallery: base row height and spacing */
	--as-gallery-row: 9rem;
	--as-gallery-gap: 0.5rem;
	--as-embed-height: 70vh;
	/* Covers per row in the Zeitungsarchiv */
	--as-issues-cols: 2;
	/* Mediadaten boxes per row */
	--as-media-cols: 1;
	--as-media-banner-ratio: 700 / 230;
	--as-person-ratio: 1 / 1;
	--as-text-contact: clamp(0.75rem, 0.5rem + 0.45vw, 0.9375rem);
	--as-text-subline: 1rem;
	--as-person-icon: clamp(1.125rem, 0.95rem + 0.35vw, 1.5rem);
	--as-lightbox-btn: 3rem;
	--as-lightbox-close: 3.75rem;
	/* Reader overlay (Zeitungsarchiv) */
	--as-book-close-icon: 3rem;
	--as-book-close-size: 4.25rem;
	--as-book-close-top: 1.25rem;

	/* Timeline (Historie page) */
	--as-timeline-max: 72rem;
	--as-timeline-media: 9.1rem;
	--as-timeline-disc: 3.75rem;
	/* Distance of a year disc from the middle line (wide layout).
	   0 = the discs sit on a straight line; a few rem make it a gentle zigzag. */
	--as-timeline-amp: 0rem;
	/* Little squares along the line: side length and distance between two */
	--as-timeline-bead: 0.5rem;
	--as-timeline-bead-gap: 1.25rem;

	/* Effects */
	--as-shadow: 0 2px 12px var(--as-color-shadow);
	--as-transition: 0.2s ease;
}

/* =========================================================================
   3. BASE / RESET / TYPOGRAPHY
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--as-color-bg);
	color: var(--as-color-text);
	font-family: var(--as-font-body);
	font-size: var(--as-text-base);
	font-weight: var(--as-weight-regular);
	line-height: var(--as-leading-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: var(--as-color-heading);
	line-height: var(--as-leading-tight);
}

h1,
h2 {
	font-family: var(--as-font-heading);
	font-weight: var(--as-weight-regular);
}

h3,
h4,
h5,
h6 {
	font-family: var(--as-font-body);
	font-weight: var(--as-weight-bold);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--as-color-accent);
	outline-offset: 2px;
}

.screen-reader-text,
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.as-skip-link:focus {
	position: fixed !important;
	top: var(--as-space-xs);
	left: var(--as-space-xs);
	z-index: var(--as-z-skiplink);
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--as-space-sm) var(--as-space-md);
	clip: auto;
	background: var(--as-color-bg);
	color: var(--as-color-text);
	box-shadow: var(--as-shadow);
}

.as-container {
	width: 100%;
	max-width: calc(var(--as-container) + 2 * var(--as-space-gutter));
	margin-inline: auto;
	padding-inline: var(--as-space-gutter);
}

.as-icon {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.as-empty {
	color: var(--as-color-muted);
	text-align: center;
}

/* Rich content (posts, pages) */
.as-content > :first-child {
	margin-top: 0;
}

.as-content p,
.as-content ul,
.as-content ol,
.as-content blockquote,
.as-content figure,
.as-content table {
	margin: 0 0 var(--as-space-md);
}

.as-content h2,
.as-content h3,
.as-content h4 {
	margin: var(--as-space-xl) 0 var(--as-space-sm);
}

.as-content h2 {
	font-size: var(--as-text-xl);
}

.as-content h3 {
	font-size: var(--as-text-lg);
}

.as-content h4 {
	font-size: var(--as-text-md);
	font-weight: var(--as-weight-medium);
}

.as-content a {
	text-decoration-color: var(--as-color-accent);
	text-underline-offset: 0.2em;
}

.as-content a:hover {
	color: var(--as-color-newsletter);
}

.as-content ul,
.as-content ol {
	padding-left: var(--as-space-lg);
}

.as-content blockquote {
	padding-left: var(--as-space-lg);
	border-left: 3px solid var(--as-color-accent);
	font-family: var(--as-font-heading);
	font-size: var(--as-text-lg);
	font-style: italic;
}

.as-content img {
	display: block;
}

.as-content figcaption {
	margin-top: var(--as-space-xs);
	color: var(--as-color-muted);
	font-size: var(--as-text-xs);
}

.as-content strong,
.as-content b {
	font-weight: var(--as-weight-bold);
}

/* =========================================================================
   4. SHARED COMPONENTS
   ========================================================================= */

/* Buttons (the WPForms submit button uses the same look) */
.as-btn,
.as-contact__form .wpforms-submit,
.as-contact__form .wpforms-container .wpforms-form button[type="submit"],
.as-contact__form .wpforms-container-full .wpforms-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--as-btn-height);
	padding: var(--as-space-sm) var(--as-space-lg);
	border: var(--as-border-width) solid currentColor;
	border-radius: var(--as-radius);
	background: transparent;
	font-family: var(--as-font-body);
	font-size: var(--as-text-xs);
	font-weight: var(--as-weight-medium);
	letter-spacing: var(--as-tracking-wide);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--as-transition), color var(--as-transition), border-color var(--as-transition);
}

.as-btn--outline,
.as-contact__form .wpforms-submit,
.as-contact__form .wpforms-container .wpforms-form button[type="submit"],
.as-contact__form .wpforms-container-full .wpforms-form button[type="submit"] {
	background: transparent;
	color: var(--as-color-text);
}

.as-btn--outline:hover,
.as-contact__form .wpforms-submit:hover,
.as-contact__form .wpforms-container .wpforms-form button[type="submit"]:hover,
.as-contact__form .wpforms-container-full .wpforms-form button[type="submit"]:hover {
	background: var(--as-color-text);
	border-color: var(--as-color-text);
	color: var(--as-color-white);
}

.as-btn--light {
	color: var(--as-color-white);
}

.as-btn--light:hover {
	background: var(--as-color-white);
	border-color: var(--as-color-white);
	color: var(--as-color-text);
}

/* Inside page content, ".as-content a:hover" (gold) is stronger than the
   rules above and made the text unreadable on the dark hover background */
.as-content .as-btn--outline:hover {
	color: var(--as-color-white);
}

.as-content .as-btn--light:hover {
	color: var(--as-color-text);
}

.as-btn:disabled {
	cursor: progress;
	opacity: 0.6;
}

/* Row of buttons pasted into page content (e.g. under the image on
   "Nächste Ausgabe"); wraps to one per line on narrow phones */
.as-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--as-space-md);
	margin: var(--as-space-xl) 0;
}

.as-actions .as-btn {
	min-width: 14rem;
}

/* Right-pointing chevron (links, footer menu, archive tile) */
.as-link-more::before,
.as-footer__menu a::before,
.as-widget__archive-label::before {
	content: "";
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	margin-right: 0.6em;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	flex-shrink: 0;
}

/* "Mehr dazu" */
.as-link-more {
	display: inline-flex;
	align-items: center;
	margin-top: var(--as-space-sm);
	color: var(--as-color-accent);
	font-size: var(--as-text-xs);
	font-weight: var(--as-weight-medium);
	letter-spacing: var(--as-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--as-transition);
}

.as-link-more:hover {
	color: var(--as-color-newsletter);
}

/* Section title with lines on both sides ("Aktuelles") */
.as-section-title {
	display: flex;
	align-items: center;
	gap: var(--as-space-lg);
	margin: 0 0 var(--as-space-xl);
	font-family: var(--as-font-body);
	font-size: var(--as-text-xs);
	font-weight: var(--as-weight-medium);
	letter-spacing: var(--as-tracking-wider);
	text-transform: uppercase;
}

.as-section-title::before,
.as-section-title::after {
	content: "";
	flex: 1;
	height: var(--as-border-width);
	background: var(--as-color-line);
}

/* Label with short gold lines on both sides (category on the cards) */
.as-card__cat {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--as-space-sm);
	color: var(--as-color-accent);
	font-style: italic;
}

.as-card__cat::before,
.as-card__cat::after {
	content: "";
	width: 2.5rem;
	height: var(--as-border-width);
	background: var(--as-color-accent);
	flex-shrink: 0;
}

/* Newsletter form (sidebar + footer) */
.as-newsletter {
	display: grid;
	gap: var(--as-space-md);
	justify-items: start;
}

.as-newsletter__input {
	width: 100%;
	height: 2.75rem;
	padding: 0 var(--as-space-md);
	border: 0;
	border-radius: var(--as-radius);
	background: var(--as-color-white);
	color: var(--as-color-text);
	font-size: var(--as-text-sm);
	text-align: center;
}

.as-newsletter__input::placeholder {
	color: var(--as-color-text);
	font-style: italic;
	opacity: 1;
}

.as-newsletter__msg {
	margin: 0;
	font-size: var(--as-text-sm);
}

.as-newsletter__msg:empty {
	display: none;
}

/* Pagination */
.as-pagination {
	margin-top: var(--as-space-2xl);
}

.as-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--as-space-xs);
}

.as-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 var(--as-space-xs);
	border: var(--as-border-width) solid var(--as-color-line);
	font-size: var(--as-text-sm);
	text-decoration: none;
}

.as-pagination .page-numbers.current,
.as-pagination a.page-numbers:hover {
	background: var(--as-color-text);
	border-color: var(--as-color-text);
	color: var(--as-color-white);
}

/* =========================================================================
   5. SECTIONS
   ========================================================================= */

/* === SECTION: HEADER === */

.as-header__inner {
	display: flex;
	justify-content: center;
	padding-block: var(--as-space-xl);
}

.as-header__logo {
	display: block;
	width: var(--as-logo-width);
	max-width: 70vw;
}

.as-header__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* === SECTION: NAVIGATION (mobile first, desktop in Responsive) === */

.as-nav {
	position: sticky;
	top: 0;
	z-index: var(--as-z-nav);
	background: var(--as-color-bg);
	border-top: var(--as-border-width) solid var(--as-color-line);
	border-bottom: var(--as-border-width) solid var(--as-color-line);
}

.admin-bar .as-nav {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.as-nav__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--as-nav-height);
}

.as-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--as-space-xs);
	min-height: 2.75rem;
	padding: 0 var(--as-space-md);
	border: 0;
	background: transparent;
	font-size: var(--as-text-xs);
	font-weight: var(--as-weight-medium);
	letter-spacing: var(--as-tracking-wider);
	text-transform: uppercase;
	cursor: pointer;
}

.as-nav__toggle .as-icon--close,
.as-nav.is-open .as-nav__toggle .as-icon--menu {
	display: none;
}

.as-nav.is-open .as-nav__toggle .as-icon--close {
	display: block;
}

.as-nav__panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc(100vh - var(--as-nav-height) - var(--wp-admin--admin-bar--height, 0px));
	max-height: calc(100dvh - var(--as-nav-height) - var(--wp-admin--admin-bar--height, 0px));
	overflow-y: auto;
	background: var(--as-color-bg);
	border-bottom: var(--as-border-width) solid var(--as-color-line);
	box-shadow: var(--as-shadow);
}

.as-nav.is-open .as-nav__panel {
	display: block;
}

.as-nav__menu,
.as-nav__menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-nav__menu li {
	position: relative;
	border-top: var(--as-border-width) solid var(--as-color-line);
}

.as-nav__menu > li:first-child {
	border-top: 0;
}

.as-nav__menu a {
	display: flex;
	align-items: center;
	min-height: 3rem;
	padding: var(--as-space-xs) var(--as-space-gutter);
	padding-right: calc(var(--as-sidebtn-size) + var(--as-space-md));
	font-size: var(--as-text-sm);
	font-weight: var(--as-weight-medium);
	letter-spacing: var(--as-tracking-wider);
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--as-transition);
}

.as-nav__menu a:hover,
.as-nav__menu .current-menu-item > a,
.as-nav__menu .current-menu-ancestor > a,
.as-nav__menu .current_page_item > a,
.as-nav__menu .current_page_ancestor > a {
	color: var(--as-color-accent);
}

.as-nav__sub-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.as-nav__sub-toggle .as-icon {
	transition: transform var(--as-transition);
}

.is-sub-open > .as-nav__sub-toggle .as-icon {
	transform: rotate(180deg);
}

.as-nav__menu .sub-menu,
.as-nav__menu .children {
	display: none;
	background: var(--as-color-surface);
}

.as-nav__menu .is-sub-open > .sub-menu,
.as-nav__menu .is-sub-open > .children {
	display: block;
}

.as-nav__menu .sub-menu a,
.as-nav__menu .children a {
	padding-left: calc(var(--as-space-gutter) + var(--as-space-md));
	letter-spacing: var(--as-tracking-wide);
}

.as-nav-locked {
	overflow: hidden;
}

/* === SECTION: SIDE BUTTONS === */

.as-sidebtns {
	position: fixed;
	top: var(--as-sidebtns-top);
	right: 0;
	z-index: var(--as-z-sidebtns);
	margin: 0;
	padding: var(--as-space-xs) 0;
	list-style: none;
	background: var(--as-color-bg);
	box-shadow: var(--as-shadow);
}

.admin-bar .as-sidebtns {
	top: calc(var(--as-sidebtns-top) + var(--wp-admin--admin-bar--height, 0px));
}

/* Do not float over the open mobile menu */
.as-nav-locked .as-sidebtns {
	display: none;
}

.as-sidebtns:empty {
	display: none;
}

.as-sidebtns__link {
	display: grid;
	place-items: center;
	width: var(--as-sidebtn-size);
	height: var(--as-sidebtn-size);
	color: var(--as-color-text);
	transition: color var(--as-transition);
}

.as-sidebtns__link:hover {
	color: var(--as-color-accent);
}

.as-sidebtns .as-icon {
	width: var(--as-sidebtn-icon);
	height: var(--as-sidebtn-icon);
}

/* === SECTION: HERO === */

.as-hero {
	margin-top: var(--as-space-xl);
}

.as-hero__frame {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--as-color-surface);
}

.as-hero__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Text on the image: a soft shade keeps it readable on light photos */
.as-hero__frame--text::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--as-color-hero-shade), transparent 65%);
}

.as-hero__content {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	max-width: 42rem;
	padding: clamp(0.75rem, 2.4vw, 2rem);
	color: var(--as-color-white);
}

.as-hero__kicker {
	margin: 0 0 var(--as-space-xs);
	font-size: var(--as-text-sm);
	font-style: italic;
	letter-spacing: var(--as-tracking-wide);
}

.as-hero__title {
	margin: 0;
	font-family: var(--as-font-heading);
	font-size: var(--as-text-hero);
	font-weight: var(--as-weight-regular);
	letter-spacing: var(--as-tracking-wider);
	line-height: var(--as-leading-tight);
	text-transform: uppercase;
}

.as-hero__btn {
	margin-top: var(--as-space-lg);
}

/* === SECTION: LAYOUT (content + sidebar) === */

.as-layout {
	display: grid;
	gap: var(--as-space-2xl);
	padding-block: var(--as-space-2xl) var(--as-space-3xl);
}

.as-layout__main {
	min-width: 0;
}

.as-home__content {
	margin-bottom: var(--as-space-2xl);
}

/* === SECTION: AKTUELLES (cards grid) === */

.as-cards {
	display: grid;
	gap: var(--as-space-3xl) var(--as-space-xl);
}

.as-card {
	display: flex;
	flex-direction: column;
}

.as-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--as-color-surface);
}

.as-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.as-card:hover .as-card__media img {
	transform: scale(1.03);
}

.as-card__title {
	margin-top: var(--as-space-lg);
	font-size: var(--as-text-xl);
	letter-spacing: var(--as-tracking-wide);
	text-align: center;
	text-transform: uppercase;
}

.as-card__title a {
	text-decoration: none;
	transition: color var(--as-transition);
}

.as-card__title a:hover {
	color: var(--as-color-newsletter);
}

.as-card__cat {
	margin: var(--as-space-2xs) 0 0;
	font-size: var(--as-text-sm);
}

.as-card__cat a {
	text-decoration: none;
}

/* Subline (ACF field of the post) under the category: black, bold italic,
   no lines (the single post has its own gold version) */
.as-card__subline {
	margin: var(--as-space-md) 0 0;
	font-size: var(--as-text-subline);
	font-style: italic;
	font-weight: var(--as-weight-bold);
	line-height: var(--as-leading-tight);
	text-align: center;
}

.as-card__subline + .as-card__excerpt {
	margin-top: var(--as-space-md);
}

.as-card__excerpt {
	margin-top: var(--as-space-lg);
	font-size: var(--as-text-base);
	line-height: 1.6;
}

.as-card__excerpt p {
	margin: 0;
}

.as-loadmore {
	display: flex;
	justify-content: center;
	margin-top: var(--as-space-3xl);
}

/* === SECTION: ARCHIVE === */

.as-archive__header {
	margin-bottom: var(--as-space-xl);
}

/* When an overview page uses the big page title (e.g. Zeitungsarchiv) */
.as-archive__header .as-page__title {
	margin-bottom: var(--as-space-md);
	text-align: center;
}

.as-archive__header .as-section-title {
	margin-bottom: var(--as-space-md);
}

.as-archive__desc {
	max-width: 42rem;
	margin: 0 auto;
	font-size: var(--as-text-base);
	text-align: center;
}

/* Category filter row (article archives) */
.as-filter {
	margin-top: var(--as-space-lg);
}

.as-filter__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--as-space-xs) var(--as-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-filter__link {
	display: inline-block;
	padding: var(--as-space-2xs) 0;
	border-bottom: var(--as-border-width) solid transparent;
	font-size: var(--as-text-base);
	font-weight: var(--as-weight-medium);
	letter-spacing: var(--as-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--as-transition), border-color var(--as-transition);
}

.as-filter__link:hover {
	border-bottom-color: var(--as-color-accent);
}

.as-filter__link.is-current {
	border-bottom-color: var(--as-color-accent);
	color: var(--as-color-accent);
}

/* More posts from the same category (below an article) */
.as-related {
	margin-top: var(--as-space-3xl);
	padding-top: var(--as-space-xl);
	border-top: var(--as-border-width) solid var(--as-color-line);
}

.as-related .as-cards {
	gap: var(--as-space-xl);
}

.as-related .as-card__title {
	font-size: var(--as-text-lg);
}

/* === SECTION: SIDEBAR === */

.as-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-lg);
}

.as-widget {
	padding: var(--as-space-lg);
	border: var(--as-border-width) solid var(--as-color-line);
}

.as-widget__title {
	margin: 0 0 var(--as-space-md);
	font-family: var(--as-font-body);
	font-size: var(--as-text-xs);
	font-weight: var(--as-weight-medium);
	letter-spacing: var(--as-tracking-wider);
	text-align: center;
	text-transform: uppercase;
}

.as-widget__media {
	margin-bottom: var(--as-space-sm);
}

.as-widget__media img {
	display: block;
	width: 100%;
	height: auto;
}

.as-widget__text {
	margin: 0 0 var(--as-space-sm);
	font-size: var(--as-text-base);
	line-height: 1.55;
}

.as-widget--newsletter {
	padding: var(--as-space-lg) var(--as-space-lg) var(--as-space-xl);
	border-color: var(--as-color-newsletter);
	background: var(--as-color-newsletter);
	color: var(--as-color-white);
}

.as-widget--newsletter .as-widget__title {
	color: var(--as-color-white);
}

.as-widget--newsletter .as-widget__text {
	margin-bottom: var(--as-space-lg);
}

.as-widget__action {
	margin: 0;
	text-align: center;
}

.as-widget--ad {
	padding: 0;
	border: 0;
}

.as-widget__ad-label,
.as-post-banner__label {
	display: block;
	margin-bottom: var(--as-space-2xs);
	color: var(--as-color-muted);
	font-size: var(--as-text-xs);
	letter-spacing: var(--as-tracking-wide);
	text-align: right;
	text-transform: uppercase;
}

.as-widget--ad img,
.as-post-banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* Customer banner under the text of a post, as wide as the post */
.as-post-banner {
	margin: var(--as-space-xl) 0 0;
}

.as-widget--archive {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 9rem;
	overflow: hidden;
	border: 0;
	background: var(--as-color-footer);
	color: var(--as-color-white);
	text-decoration: none;
}

.as-widget__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.as-widget--archive::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--as-color-overlay);
}

.as-widget--archive:hover .as-widget__bg {
	transform: scale(1.04);
}

.as-widget__archive-label {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	font-size: var(--as-text-sm);
	font-weight: var(--as-weight-medium);
	letter-spacing: var(--as-tracking-wider);
	text-transform: uppercase;
}

/* === SECTION: SINGLE POST === */

.as-article__header {
	margin-bottom: var(--as-space-xl);
	text-align: center;
}

.as-article__cat {
	margin: 0 0 var(--as-space-sm);
	font-size: var(--as-text-xs);
	font-weight: var(--as-weight-medium);
	letter-spacing: var(--as-tracking-wider);
	text-transform: uppercase;
}

.as-article__cat a {
	color: var(--as-color-accent);
	text-decoration: none;
}

.as-article__title,
.as-page__title {
	font-size: var(--as-text-2xl);
	letter-spacing: var(--as-tracking-wide);
	text-transform: uppercase;
}

/* Same look as the subline on the cards: black, bold italic, no lines */
.as-article__subline {
	margin: var(--as-space-xs) 0 0;
	font-size: var(--as-text-subline);
	font-style: italic;
	font-weight: var(--as-weight-bold);
	text-align: center;
}

.as-article__date {
	margin: var(--as-space-sm) 0 0;
	color: var(--as-color-muted);
	font-size: var(--as-text-xs);
}

.as-article__media {
	margin: 0 0 var(--as-space-xl);
}

.as-article__media img {
	display: block;
	width: 100%;
	height: auto;
}

.as-article__nav {
	display: grid;
	gap: var(--as-space-md);
	justify-items: center;
	margin-top: var(--as-space-2xl);
	padding-top: var(--as-space-lg);
	border-top: var(--as-border-width) solid var(--as-color-line);
	font-size: var(--as-text-sm);
	text-align: center;
}

.as-article__nav-back {
	order: -1;
}

.as-article__nav a {
	text-decoration: none;
}

.as-article__nav a:hover {
	color: var(--as-color-newsletter);
}

.as-article__nav-back .as-btn:hover {
	color: var(--as-color-white);
}

/* === SECTION: GALLERY === */

.as-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-gallery-gap);
	margin: 0 0 var(--as-space-lg);
}

/* Absorbs the free space, so the last row keeps its natural size */
.as-gallery::after {
	content: "";
	flex-grow: 999999;
}

/* Up to four images: two per row (one per row on a phone), filling the width.
   A lone image in the last row grows to the full width. */
.as-gallery--few::after {
	content: none;
}

.as-gallery--few .as-gallery__item,
.as-gallery--single .as-gallery__item {
	flex-basis: 100%;
}

.as-gallery__item {
	position: relative;
	display: block;
	flex-grow: calc(var(--as-ar) * 100);
	flex-basis: calc(var(--as-ar) * var(--as-gallery-row));
	overflow: hidden;
	background: var(--as-color-surface);
}

/* Rows balanced by theme.js: every row fills the width, the last one too.
   --as-gallery-h is the row height it computed; the basis is 1px short per
   unit of ratio and flex-grow gives it back, so rounding never breaks a row. */
.as-gallery.is-justified::after {
	content: none;
}

.as-gallery.is-justified .as-gallery__item {
	flex-basis: calc(var(--as-ar) * (var(--as-gallery-h) - 1px));
}

/* Keeps the image proportions while the row is being justified */
.as-gallery__item::before {
	content: "";
	display: block;
	padding-bottom: calc(100% / var(--as-ar));
}

.as-gallery__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease, opacity var(--as-transition);
}

.as-gallery__item:hover .as-gallery__img {
	transform: scale(1.04);
}

/* Viewer */
.as-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--as-z-lightbox);
	display: none;
	background: var(--as-color-lightbox);
}

.as-lightbox.is-open {
	display: block;
}

/* Flex, not grid: a grid row grows with the image, so max-height: 100%
   had nothing to resolve against and tall photos overflowed short windows. */
.as-lightbox__stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--as-space-3xl) var(--as-space-md);
}

.as-lightbox__img {
	display: block;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.as-lightbox__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: var(--as-lightbox-btn);
	height: var(--as-lightbox-btn);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--as-color-white);
	cursor: pointer;
	transition: opacity var(--as-transition);
}

.as-lightbox__btn:hover {
	opacity: 0.6;
}

.as-lightbox__btn .as-icon {
	width: 1.75rem;
	height: 1.75rem;
}

.as-lightbox__close {
	top: var(--as-space-xs);
	right: var(--as-space-xs);
	width: var(--as-lightbox-close);
	height: var(--as-lightbox-close);
}

.as-lightbox__close .as-icon {
	width: 2.5rem;
	height: 2.5rem;
	stroke-width: 1.25;
}

.as-lightbox__prev {
	top: 50%;
	left: var(--as-space-xs);
	transform: translateY(-50%);
}

.as-lightbox__next {
	top: 50%;
	right: var(--as-space-xs);
	transform: translateY(-50%);
}

.as-lightbox__count {
	position: absolute;
	bottom: var(--as-space-md);
	left: 0;
	right: 0;
	color: var(--as-color-white);
	font-size: var(--as-text-xs);
	letter-spacing: var(--as-tracking-wide);
	text-align: center;
}

.as-lightbox-locked {
	overflow: hidden;
}

/* Reader overlay: the FlipHTML5 issue fills the window */
.as-lightbox--book .as-lightbox__stage {
	top: var(--as-space-2xl);
	padding: 0;
}

/* Bigger close cross, sitting lower than in the photo viewer */
.as-lightbox--book .as-lightbox__close {
	top: var(--as-book-close-top);
	right: var(--as-space-xs);
	width: var(--as-book-close-size);
	height: var(--as-book-close-size);
	/* The reader below is light, so the cross needs its own backdrop */
	border-radius: 50%;
	background: var(--as-color-lightbox);
}

.as-lightbox--book .as-lightbox__close .as-icon {
	width: var(--as-book-close-icon);
	height: var(--as-book-close-icon);
	stroke-width: 1;
}

.as-lightbox__frame {
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--as-color-bg);
}

.as-lightbox__title {
	position: absolute;
	top: 0;
	left: 0;
	right: var(--as-lightbox-close);
	z-index: 1;
	margin: 0;
	padding: var(--as-space-md) var(--as-space-lg);
	color: var(--as-color-white);
	font-size: var(--as-text-xs);
	letter-spacing: var(--as-tracking-wide);
	text-transform: uppercase;
}

/* === SECTION: PAGE === */

.as-page {
	padding-block: var(--as-space-2xl) var(--as-space-3xl);
}

.as-page__header {
	margin-bottom: var(--as-space-xl);
	text-align: center;
}

/* === SECTION: CONTACT === */

.as-contact {
	display: grid;
	gap: var(--as-space-2xl);
}

.as-contact__company {
	display: block;
	margin-bottom: var(--as-space-2xs);
	font-weight: var(--as-weight-medium);
	letter-spacing: var(--as-tracking-wide);
	text-transform: uppercase;
}

.as-contact__address {
	margin: 0 0 var(--as-space-lg);
	font-style: normal;
	line-height: 1.7;
}

.as-contact__muted {
	display: block;
	margin-top: var(--as-space-2xs);
	color: var(--as-color-muted);
	font-size: var(--as-text-sm);
}

.as-contact__list {
	margin: 0 0 var(--as-space-xl);
	padding: 0;
	list-style: none;
}

.as-contact__list li {
	display: flex;
	align-items: center;
	gap: var(--as-space-sm);
	padding: var(--as-space-2xs) 0;
}

.as-contact__list .as-icon {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--as-color-accent);
}

.as-contact__list a {
	text-decoration: none;
	transition: color var(--as-transition);
}

.as-contact__list a:hover {
	color: var(--as-color-accent);
}

.as-contact__tag {
	color: var(--as-color-muted);
	font-size: var(--as-text-xs);
	letter-spacing: var(--as-tracking-wide);
	text-transform: uppercase;
}

/* WPForms, matched to the theme.
   The variables cover the newer "modern markup" of the plugin. */
.as-contact__form .wpforms-container {
	--wpforms-field-border-radius: var(--as-radius);
	--wpforms-field-border-color: var(--as-color-line);
	--wpforms-field-text-color: var(--as-color-text);
	--wpforms-label-color: var(--as-color-text);
	--wpforms-label-sublabel-color: var(--as-color-muted);
	--wpforms-button-border-radius: var(--as-radius);
	/* Also colors the checked radio dot / checkbox tick, so it must not be
	   transparent. The submit button keeps its own outline look (see .as-btn). */
	--wpforms-button-background-color: var(--as-color-accent);
	--wpforms-button-text-color: var(--as-color-text);
}

/* ...but the submit button itself keeps the transparent outline look */
.as-contact__form .wpforms-container .wpforms-form button[type="submit"] {
	--wpforms-button-background-color: transparent;
}

/* Radio and checkbox outlines a bit stronger than the light field line */
.as-contact__form .wpforms-container .wpforms-form :is(input[type="radio"], input[type="checkbox"]) {
	--wpforms-field-border-color: var(--as-color-muted);
}

.as-contact__form .wpforms-field-label {
	font-family: var(--as-font-body);
	font-size: var(--as-text-xs);
	font-weight: var(--as-weight-medium);
	letter-spacing: var(--as-tracking-wide);
	text-transform: uppercase;
}

.as-contact__form .wpforms-field-sublabel,
.as-contact__form .wpforms-field-description {
	color: var(--as-color-muted);
	font-size: var(--as-text-xs);
}

.as-contact__form .wpforms-container .wpforms-form :is(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="date"],
	select,
	textarea
) {
	width: 100%;
	max-width: 100%;
	padding: var(--as-space-sm) var(--as-space-md);
	border: var(--as-border-width) solid var(--as-color-line);
	border-radius: var(--as-radius);
	background: var(--as-color-bg);
	font-family: var(--as-font-body);
	font-size: var(--as-text-sm);
	transition: border-color var(--as-transition);
}

.as-contact__form .wpforms-container .wpforms-form :is(input, select, textarea):focus {
	border-color: var(--as-color-accent);
	outline: none;
}

.as-contact__form .wpforms-container .wpforms-form textarea {
	min-height: 10rem;
	resize: vertical;
}

/* The submit button borrows the shared button styles (see .as-btn above) */

/* Thank-you message after sending: light box with a gold line instead of the
   plugin's green one. !important on purpose: the message is swapped in by
   WPForms after the AJAX submit and the plugin's own styling kept winning
   over plain selectors, so this is the one place the theme forces it. */
div.wpforms-confirmation-container-full {
	margin: 0 0 var(--as-space-xl) !important;
	padding: var(--as-space-lg) var(--as-space-xl) !important;
	border: 0 !important;
	border-left: 3px solid var(--as-color-accent) !important;
	background: var(--as-color-surface) !important;
	color: var(--as-color-text) !important;
	font-size: var(--as-text-md) !important;
	line-height: var(--as-leading-base) !important;
}

div.wpforms-confirmation-container-full p {
	margin: 0 !important;
	color: inherit !important;
}

div.wpforms-confirmation-container-full p + p {
	margin-top: var(--as-space-sm) !important;
}

/* === SECTION: UPCOMING ISSUE (Nächste Ausgabe, ACF fields on the page) === */

.as-upcoming__intro {
	margin: 0 0 var(--as-space-lg);
	font-family: var(--as-font-heading);
	font-size: var(--as-text-2xl);
	line-height: var(--as-leading-tight);
}

.as-upcoming__themes {
	margin: 0 0 var(--as-space-2xl);
	padding: 0;
	list-style: none;
	border-top: var(--as-border-width) solid var(--as-color-line);
}

.as-upcoming__theme {
	display: flex;
	align-items: flex-start;
	gap: var(--as-space-sm);
	padding: var(--as-space-sm) 0;
	border-bottom: var(--as-border-width) solid var(--as-color-line);
	font-family: var(--as-font-heading);
	font-size: var(--as-text-xl);
	line-height: var(--as-leading-tight);
}

/* Small gold square as bullet (an arrow would look like a link) */
.as-upcoming__theme::before {
	content: "";
	flex-shrink: 0;
	width: 0.35em;
	height: 0.35em;
	margin-top: 0.45em;
	background: var(--as-color-accent);
}

.as-upcoming__dates {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--as-space-md);
	margin: 0 0 var(--as-space-xl);
}

/* The box itself is .as-widget (border and padding); a light background
   and a gold line on top make the two dates stand out softly */
.as-upcoming__date {
	border-top: 3px solid var(--as-color-accent);
	background: var(--as-color-surface);
	text-align: center;
}

.as-upcoming__label {
	color: var(--as-color-muted);
	font-size: var(--as-text-xs);
	letter-spacing: var(--as-tracking-wide);
	text-transform: uppercase;
}

.as-upcoming__value {
	margin: var(--as-space-xs) 0 0;
	color: var(--as-color-accent);
	font-family: var(--as-font-heading);
	font-size: var(--as-text-2xl);
	line-height: var(--as-leading-tight);
}

/* === SECTION: TIMELINE (Historie page, HTML block in the editor) === */

/* Narrow: a column of cards, a straight line through the year discs.
   Wide (container query at the end of this section, so it also works next
   to a sidebar): cards alternate left and right, and theme.js draws a line
   of beads that winds between the discs and fills up while scrolling. */
.as-timeline {
	container-type: inline-size;
	max-width: var(--as-timeline-max);
	margin: var(--as-space-xl) auto 0;
}

.as-timeline .as-timeline__title {
	margin: 0 0 var(--as-space-xl);
	text-align: center;
}

.as-timeline__track {
	position: relative;
}

.as-timeline .as-timeline__list {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-timeline__list::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--as-timeline-disc) / 2);
	width: var(--as-border-width);
	background: var(--as-color-line);
}

.as-timeline__item {
	position: relative;
	min-height: calc(var(--as-timeline-disc) + var(--as-space-sm));
	margin: 0 0 var(--as-space-xl);
	padding-left: calc(var(--as-timeline-disc) + var(--as-space-md));
}

.as-timeline__item:last-child {
	margin-bottom: 0;
}

/* The year, in a disc sitting on the line */
.as-timeline__disc {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--as-timeline-disc);
	height: var(--as-timeline-disc);
	border: var(--as-space-2xs) solid var(--as-color-bg);
	border-radius: 50%;
	background: var(--as-color-accent);
	color: var(--as-color-white);
	font-family: var(--as-font-heading);
	font-size: var(--as-text-md);
	font-weight: var(--as-weight-semibold);
	line-height: 1;
	box-shadow: var(--as-shadow);
	transition: box-shadow 0.4s ease;
}

.as-timeline__item:nth-child(even) .as-timeline__disc {
	background: var(--as-color-text);
}

/* Ring around the disc once its entry has appeared */
.as-timeline__item.is-in .as-timeline__disc {
	box-shadow: var(--as-shadow), 0 0 0 var(--as-space-xs) var(--as-color-accent-glow);
}

/* The box itself is .as-widget (border and padding) */
.as-timeline__card {
	transition: border-color var(--as-transition), box-shadow var(--as-transition);
}

.as-timeline__card:hover {
	border-color: var(--as-color-accent);
	box-shadow: var(--as-shadow);
}

/* Contains the floated photo */
.as-timeline__card::after {
	content: "";
	display: block;
	clear: both;
}

.as-timeline__media {
	width: min(100%, var(--as-timeline-media));
	margin: 0 0 var(--as-space-sm);
}

.as-timeline__media img {
	width: 100%;
	height: auto;
	box-shadow: var(--as-shadow);
}

.as-timeline .as-timeline__heading {
	margin: 0 0 var(--as-space-xs);
	font-family: var(--as-font-heading);
	font-size: var(--as-text-xl);
	font-weight: var(--as-weight-medium);
}

.as-timeline__body > :last-child {
	margin-bottom: 0;
}

/* Line of beads, drawn by theme.js (wide layout only) */
.as-timeline__svg {
	display: none;
}

.as-timeline__bead {
	fill: var(--as-color-line);
	transition: fill 0.25s ease;
}

.as-timeline__bead.on {
	fill: var(--as-color-accent);
}

/* The bead that travels with the scroll position */
.as-timeline__runner {
	fill: var(--as-color-accent);
	filter: drop-shadow(0 0 0.4rem var(--as-color-accent));
}

/* Entries appear while scrolling (theme.js adds --js and is-in) */
@media (prefers-reduced-motion: no-preference) {
	.as-timeline--js .as-timeline__item {
		opacity: 0;
		transform: translateY(var(--as-space-lg));
		transition: opacity 0.6s ease, transform 0.6s ease;
	}

	.as-timeline--js .as-timeline__item.is-in {
		opacity: 1;
		transform: none;
	}

	.as-timeline--js .as-timeline__disc {
		transform: scale(0.6);
		transition: transform 0.4s ease 0.15s, box-shadow 0.4s ease;
	}

	.as-timeline--js .as-timeline__item.is-in .as-timeline__disc {
		transform: scale(1);
	}
}

/* Room for the photo next to the text */
@container (min-width: 30rem) {
	.as-timeline__media {
		float: left;
		width: var(--as-timeline-media);
		margin: 0 var(--as-space-md) var(--as-space-xs) 0;
	}
}

/* Wide: the cards alternate left and right of the middle line. A disc sits
   --as-timeline-amp away from that line (0 = on it), left for odd entries
   and right for even ones, the card beside it. */
@container (min-width: 64rem) {
	.as-timeline__track {
		--as-timeline-disc: 4.5rem;
	}

	.as-timeline__list::before {
		content: none;
	}

	.as-timeline__svg {
		position: absolute;
		inset: 0;
		z-index: 0;
		display: block;
		overflow: visible;
		pointer-events: none;
	}

	.as-timeline__disc {
		font-size: var(--as-text-lg);
	}

	.as-timeline__item {
		width: 50%;
	}

	.as-timeline__item:nth-child(odd) {
		padding: 0 calc(var(--as-timeline-amp) + var(--as-timeline-disc) / 2 + var(--as-space-md)) 0 0;
	}

	.as-timeline__item:nth-child(even) {
		margin-left: 50%;
		padding: 0 0 0 calc(var(--as-timeline-amp) + var(--as-timeline-disc) / 2 + var(--as-space-md));
	}

	.as-timeline__item:nth-child(odd) .as-timeline__disc {
		right: calc(var(--as-timeline-amp) - var(--as-timeline-disc) / 2);
		left: auto;
	}

	.as-timeline__item:nth-child(even) .as-timeline__disc {
		left: calc(var(--as-timeline-amp) - var(--as-timeline-disc) / 2);
	}

	/* Entries slide in from their own side */
	@media (prefers-reduced-motion: no-preference) {
		.as-timeline--js .as-timeline__item:nth-child(odd) {
			transform: translateX(calc(-1 * var(--as-space-lg)));
		}

		.as-timeline--js .as-timeline__item:nth-child(even) {
			transform: translateX(var(--as-space-lg));
		}

		.as-timeline--js .as-timeline__item.is-in:nth-child(n) {
			transform: none;
		}
	}
}

/* === SECTION: ABOUT (Über uns: split layout and team) === */

/* Text beside an image (e.g. Verteilungsgebiet with the map) */
.as-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--as-space-xl);
	margin: var(--as-space-lg) 0 var(--as-space-xl);
}

.as-split__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Images that open in the viewer */
[data-as-lightbox] {
	display: block;
	cursor: zoom-in;
}

.as-split__text > :last-child {
	margin-bottom: 0;
}

/* Team: one card per person, photo on top */
/* Inside .as-content a ul is indented; these lists are layout, not text */
.as-content .as-team,
.as-content .as-person__contact,
.as-content .as-media__list,
.as-content .as-issues {
	padding-left: 0;
}

.as-team {
	display: grid;
	/* minmax(0, ...) so wide photos cannot blow up the column */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--as-space-xl);
	margin: var(--as-space-lg) 0 var(--as-space-xl);
	padding: 0;
	list-style: none;
}

.as-person {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* The box defines the size, the photo only fills it. That way every card
   is identical, whatever the original image dimensions are. */
.as-person__media {
	display: block;
	width: 100%;
	aspect-ratio: var(--as-person-ratio);
	overflow: hidden;
	background: var(--as-color-surface);
}

.as-person__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.as-person:hover .as-person__media img {
	transform: scale(1.03);
}

.as-person__body {
	padding-top: var(--as-space-md);
}

.as-person__name {
	margin: 0;
	font-size: var(--as-text-xl);
	letter-spacing: var(--as-tracking-wide);
	text-transform: uppercase;
}

.as-person__role {
	margin: var(--as-space-2xs) 0 var(--as-space-sm);
	color: var(--as-color-muted);
	font-size: var(--as-text-sm);
}

.as-person__contact {
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-person__contact li + li {
	margin-top: var(--as-space-2xs);
}

.as-person__contact a {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--as-space-xs);
	max-width: 100%;
	/* scales down a little on narrow columns so long e-mail addresses
	   stay on one line without breaking */
	font-size: var(--as-text-contact);
	text-decoration: none;
	transition: color var(--as-transition);
}

.as-person__contact a:hover {
	color: var(--as-color-accent);
}

.as-person__contact .as-icon {
	width: var(--as-person-icon);
	height: var(--as-person-icon);
	color: var(--as-color-accent);
}

/* === SECTION: MEDIA (Mediadaten: PDF downloads per format) === */

.as-media {
	display: grid;
	grid-template-columns: repeat(var(--as-media-cols), minmax(0, 1fr));
	gap: var(--as-space-lg);
	margin-top: var(--as-space-xl);
}

.as-media__box {
	display: flex;
	flex-direction: column;
}

/* Banner bleeds to the edges of the box */
.as-media__banner {
	margin: calc(-1 * var(--as-space-lg)) calc(-1 * var(--as-space-lg)) var(--as-space-lg);
	overflow: hidden;
	background: var(--as-color-surface);
	aspect-ratio: var(--as-media-banner-ratio);
}

.as-media__banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.as-media__title {
	margin-top: 0;
	text-align: left;
}

.as-media__text {
	margin: var(--as-space-sm) 0 0;
	font-size: var(--as-text-base);
	line-height: 1.6;
}

.as-media__lang {
	margin: var(--as-space-lg) 0 var(--as-space-2xs);
	color: var(--as-color-muted);
	font-size: var(--as-text-xs);
	letter-spacing: var(--as-tracking-wider);
	text-transform: uppercase;
}

.as-media__list {
	display: grid;
	gap: var(--as-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One file = one tile; the whole tile turns gold on hover */
.as-media__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--as-space-xs) var(--as-space-md);
	padding: var(--as-space-sm) var(--as-space-md);
	border: var(--as-border-width) solid var(--as-color-line);
	text-decoration: none;
	transition: background-color var(--as-transition), border-color var(--as-transition), color var(--as-transition);
}

.as-media__row:hover,
.as-media__row:focus-visible {
	background: var(--as-color-accent);
	border-color: var(--as-color-accent);
	color: var(--as-color-white);
}

.as-media__row:hover .as-media__meta,
.as-media__row:focus-visible .as-media__meta,
.as-media__row:hover .as-media__icon,
.as-media__row:focus-visible .as-media__icon {
	color: var(--as-color-white);
}

.as-media__icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--as-color-accent);
	transition: color var(--as-transition);
}

.as-media__name {
	flex: 1 1 60%;
	min-width: 0;
	font-size: var(--as-text-base);
}

.as-media__meta {
	margin-left: auto;
	color: var(--as-color-muted);
	font-size: var(--as-text-xs);
	letter-spacing: var(--as-tracking-wide);
	white-space: nowrap;
}

/* === SECTION: ISSUES (Zeitungsarchiv, covers link to FlipHTML5) === */

.as-issues {
	display: grid;
	grid-template-columns: repeat(var(--as-issues-cols), minmax(0, 1fr));
	gap: var(--as-space-xl) var(--as-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-issue__link {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-sm);
	text-decoration: none;
}

.as-issue__cover {
	display: block;
	aspect-ratio: 339 / 480;
	overflow: hidden;
	background: var(--as-color-surface);
	box-shadow: var(--as-shadow);
}

.as-issue__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.as-issue__link:hover .as-issue__cover img {
	transform: scale(1.04);
}

.as-issue__label {
	font-size: var(--as-text-xs);
	letter-spacing: var(--as-tracking-wide);
	text-align: center;
	text-transform: uppercase;
	transition: color var(--as-transition);
}

.as-issue__link:hover .as-issue__label {
	color: var(--as-color-accent);
}

/* Second filter row (years) sits closer to the first */
.as-filter--years {
	margin-top: var(--as-space-sm);
}

.as-filter--years .as-filter__link {
	font-size: var(--as-text-base);
}

/* === SECTION: EMBED (external iframes, e.g. the FlipHTML5 archive) === */

.as-embed {
	position: relative;
	width: 100%;
	height: var(--as-embed-height);
	margin: 0 0 var(--as-space-lg);
	background: var(--as-color-surface);
}

.as-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* === SECTION: BLOCKS (block editor content inside .as-content) === */

/* Wide and full stay inside the content column, never bleeding out */
.as-content .alignwide,
.as-content .alignfull {
	width: 100%;
	max-width: 100%;
}

.as-content .aligncenter {
	margin-inline: auto;
}

/* Images and figures */
.as-content .wp-block-image {
	margin: 0 0 var(--as-space-md);
}

.as-content .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.as-content .wp-block-image.alignleft img,
.as-content .wp-block-image.alignright img,
.as-content .wp-block-image.aligncenter img {
	width: auto;
	max-width: 100%;
}

/* Columns */
.as-content .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-space-xl);
	margin: 0 0 var(--as-space-lg);
}

.as-content .wp-block-column {
	flex: 1 1 14rem;
	min-width: 0;
}

/* Group and Cover */
.as-content .wp-block-group {
	margin: 0 0 var(--as-space-lg);
}

.as-content .wp-block-cover {
	margin: 0 0 var(--as-space-lg);
	padding: var(--as-space-2xl);
	color: var(--as-color-white);
}

.as-content .wp-block-cover .wp-block-cover__inner-container :is(h1, h2, h3, h4, p) {
	color: var(--as-color-white);
}

/* Media & Text */
.as-content .wp-block-media-text {
	margin: 0 0 var(--as-space-lg);
}

/* Buttons: same look as .as-btn--outline */
.as-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-space-md);
	margin: 0 0 var(--as-space-lg);
}

.as-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--as-btn-height);
	padding: var(--as-space-sm) var(--as-space-lg);
	border: var(--as-border-width) solid currentColor;
	border-radius: var(--as-radius);
	background: transparent;
	color: var(--as-color-text);
	font-family: var(--as-font-body);
	font-size: var(--as-text-xs);
	font-weight: var(--as-weight-medium);
	letter-spacing: var(--as-tracking-wide);
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--as-transition), color var(--as-transition);
}

.as-content .wp-block-button__link:hover {
	background: var(--as-color-text);
	border-color: var(--as-color-text);
	color: var(--as-color-white);
}

/* Table */
.as-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--as-text-sm);
}

.as-content .wp-block-table :is(th, td) {
	padding: var(--as-space-xs) var(--as-space-sm);
	border: var(--as-border-width) solid var(--as-color-line);
	text-align: left;
}

.as-content .wp-block-table th {
	font-weight: var(--as-weight-medium);
}

/* Separator and quotes */
.as-content .wp-block-separator {
	max-width: 6rem;
	margin: var(--as-space-xl) 0;
	border: 0;
	border-top: var(--as-border-width) solid var(--as-color-accent);
}

.as-content .wp-block-separator.is-style-wide {
	max-width: 100%;
}

.as-content .wp-block-quote {
	padding-left: var(--as-space-lg);
	border-left: 3px solid var(--as-color-accent);
	font-family: var(--as-font-heading);
	font-size: var(--as-text-lg);
	font-style: italic;
}

.as-content .wp-block-quote cite {
	display: block;
	margin-top: var(--as-space-xs);
	color: var(--as-color-muted);
	font-family: var(--as-font-body);
	font-size: var(--as-text-xs);
	font-style: normal;
}

/* Embeds */
.as-content .wp-block-embed {
	margin: 0 0 var(--as-space-lg);
}

/* === SECTION: FOOTER === */

.as-footer {
	padding-block: var(--as-space-3xl) var(--as-space-xl);
	background: var(--as-color-footer);
	color: var(--as-color-white);
	font-size: var(--as-text-sm);
}

.as-footer a {
	text-decoration: none;
	transition: color var(--as-transition);
}

.as-footer a:hover {
	color: var(--as-color-accent);
}

.as-footer__grid {
	display: grid;
	gap: var(--as-space-2xl);
}

.as-footer__logo {
	display: block;
	width: var(--as-logo-footer-width);
	max-width: 100%;
}

.as-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.as-footer__logo-img--invert {
	filter: brightness(0) invert(1);
}

.as-footer__company {
	margin: var(--as-space-lg) 0 var(--as-space-sm);
	font-weight: var(--as-weight-medium);
	letter-spacing: var(--as-tracking-wide);
	text-transform: uppercase;
}

.as-footer__address {
	margin: 0 0 var(--as-space-sm);
}

.as-footer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-space-2xs) var(--as-space-lg);
	margin: 0 0 var(--as-space-sm);
	padding: 0;
	list-style: none;
}

.as-footer__contact a {
	display: inline-flex;
	align-items: center;
	gap: var(--as-space-xs);
}

.as-footer__contact .as-icon {
	width: 1rem;
	height: 1rem;
}

.as-footer__website {
	margin: 0;
	font-weight: var(--as-weight-medium);
}

.as-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-footer__menu li + li {
	margin-top: var(--as-space-2xs);
}

/* Add the CSS class "as-gap" to a menu item (WP admin) to start a new group */
.as-footer__menu li.as-gap {
	margin-top: var(--as-space-md);
}

.as-footer__menu a {
	display: inline-flex;
	align-items: center;
	letter-spacing: var(--as-tracking-wide);
	text-transform: uppercase;
}

.as-footer__newsletter-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--as-space-md);
	margin-bottom: var(--as-space-md);
}

.as-footer__newsletter-action {
	margin: 0;
}

.as-footer__heading {
	margin: 0;
	letter-spacing: var(--as-tracking-wide);
	text-transform: uppercase;
}

.as-footer__social {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
}

.as-footer__social .as-icon {
	width: 2.5rem;
	height: 2.5rem;
}

.as-footer__bottom {
	margin-top: var(--as-space-3xl);
	padding-top: var(--as-space-md);
	border-top: var(--as-border-width) solid var(--as-color-footer-line);
}

.as-footer__credit {
	margin: 0;
	font-size: var(--as-text-xs);
	font-style: italic;
}

.as-footer__credit a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* =========================================================================
   6. RESPONSIVE
   ========================================================================= */

@media (min-width: 640px) {
	:root {
		--as-space-gutter: 1.5rem;
	}

	.as-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.as-gallery--few .as-gallery__item {
		flex-basis: calc(50% - var(--as-gallery-gap));
	}

	:root {
		--as-issues-cols: 4;
	}

	.as-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: var(--as-space-2xl);
	}

	.as-upcoming__dates {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.as-team {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--as-space-2xl) var(--as-space-xl);
	}

	.as-article__nav {
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--as-space-lg);
		text-align: left;
	}

	.as-article__nav-back {
		order: 0;
	}

	.as-article__nav-prev {
		justify-self: start;
	}

	.as-article__nav-next {
		justify-self: end;
		text-align: right;
	}

	.as-contact {
		grid-template-columns: 1fr 1.15fr;
		gap: var(--as-space-3xl);
		align-items: start;
	}

	.as-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.as-content .alignleft {
		float: left;
		margin: 0 var(--as-space-lg) var(--as-space-md) 0;
	}

	.as-content .alignright {
		float: right;
		margin: 0 0 var(--as-space-md) var(--as-space-lg);
	}
}

@media (min-width: 1024px) {
	:root {
		--as-space-gutter: 2rem;
		--as-sidebtn-size: 2.75rem;
		--as-gallery-row: 13rem;
		--as-issues-cols: 6;
	}

	.as-header__inner {
		padding-block: var(--as-space-2xl) var(--as-space-xl);
	}

	/* Desktop navigation: horizontal, dropdowns on hover / keyboard focus */
	.as-nav__toggle,
	.as-nav__sub-toggle {
		display: none;
	}

	.as-nav__panel {
		display: block;
		position: static;
		max-height: none;
		overflow: visible;
		border: 0;
		box-shadow: none;
		background: transparent;
	}

	.as-nav__menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		column-gap: var(--as-space-xl);
	}

	.as-nav__menu li {
		border-top: 0;
	}

	.as-nav__menu > li > a {
		display: flex;
		align-items: center;
		min-height: var(--as-nav-height);
		padding: 0 var(--as-space-2xs);
		font-size: var(--as-text-sm);
	}

	.as-nav__menu > .menu-item-has-children > a::before,
	.as-nav__menu > .page_item_has_children > a::before {
		content: "";
		width: 0.4em;
		height: 0.4em;
		margin: 0 0.55em 0.25em 0;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
	}

	.as-nav__menu .sub-menu,
	.as-nav__menu .children {
		display: block;
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 10;
		min-width: 15rem;
		padding: var(--as-space-xs) 0;
		background: var(--as-color-bg);
		border: var(--as-border-width) solid var(--as-color-line);
		box-shadow: var(--as-shadow);
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 6px);
		transition: opacity var(--as-transition), transform var(--as-transition), visibility var(--as-transition);
	}

	.as-nav__menu li:hover > .sub-menu,
	.as-nav__menu li:focus-within > .sub-menu,
	.as-nav__menu li:hover > .children,
	.as-nav__menu li:focus-within > .children {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}

	.as-nav__menu .sub-menu .sub-menu,
	.as-nav__menu .children .children {
		top: calc(-1 * var(--as-space-xs));
		left: 100%;
		transform: translate(6px, 0);
	}

	.as-nav__menu .sub-menu li:hover > .sub-menu,
	.as-nav__menu .sub-menu li:focus-within > .sub-menu,
	.as-nav__menu .children li:hover > .children,
	.as-nav__menu .children li:focus-within > .children {
		transform: translate(0, 0);
	}

	.as-nav__menu .sub-menu a,
	.as-nav__menu .children a {
		min-height: 0;
		padding: var(--as-space-xs) var(--as-space-lg);
		font-size: var(--as-text-xs);
		letter-spacing: var(--as-tracking-wide);
	}

	.as-nav-locked {
		overflow: visible;
	}

	.as-layout {
		grid-template-columns: minmax(0, 1fr) var(--as-sidebar);
		gap: var(--as-space-3xl);
		padding-top: var(--as-space-2xl);
	}

	.as-footer__grid {
		grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
	}

	.as-cards--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Mediadaten: two boxes only when the column is really wide enough */
@media (min-width: 1200px) {
	:root {
		--as-media-cols: 2;
	}
}

@media (max-width: 600px) {
	.admin-bar .as-nav {
		top: 0;
	}
}

/* Reader overlay: a smaller cross on phones */
@media (max-width: 639px) {
	:root {
		--as-book-close-icon: 3rem;
		--as-book-close-size: 3.75rem;
		--as-book-close-top: var(--as-space-xs);
	}
}

/* The hero text stays on the image, only smaller */
@media (max-width: 639px) {
	.as-hero__kicker {
		margin-bottom: var(--as-space-2xs);
		font-size: var(--as-text-xs);
	}

	.as-hero__btn {
		min-height: 2.25rem;
		margin-top: var(--as-space-sm);
		padding: var(--as-space-xs) var(--as-space-md);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}