/* Grundausstattung: Reset, Typografie, Raster, wiederkehrende Bausteine und die
   globalen Elemente Kopfzeile, mobiles Menü, Sticky CTA, Footer, Seitenkopf,
   404 sowie die Bewegungs-Haken (Reveal, Parallax, Hero-Zoom, Laufband).
   Modulspezifisches CSS liegt in assets/css/modules/.

   Werte kommen aus tokens.css. Hier steht kein Hex-Wert, keine Millisekunde
   und keine cubic-bezier-Kurve; Längen, die nur an einer Stelle vorkommen,
   stehen dort, wo sie wirken.

   Breakpoints: 560, 700 (Hero-Video, Sticker), 900 (Burger ↔ Links), 1100. */

/* ==========================================================================
   1. Reset und Grundlagen
   ========================================================================== */

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

/* `hidden` muss immer gewinnen. Eine Klassenregel wie `display: flex` an
   derselben Komponente hätte sonst Vorrang vor dem Browser-Standard und
   blendete das geschlossene Menü oder leere Meldungen ein. Einzige Stelle mit
   !important außer Druck und Screenreader-Text. */
[hidden] { display: none !important; }

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

/* Weiches Springen zu Sprungmarken nur, wenn Bewegung erwünscht ist. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--fs-text);
	font-weight: var(--fw-normal);
	line-height: var(--lh-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/* Keine automatische Silbentrennung: Umbrüche setzt die Redaktion (weiches
	   Trennzeichen) oder fk26_typo() (geschützte Verbindungen). */
	-webkit-hyphens: manual;
	hyphens: manual;
	/* Kurze Seiten (Impressum, Leerzustände): der Footer steht unten statt
	   mitten im Fenster, darunter kein leerer Streifen. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
	/* `clip` statt `hidden`: verhindert waagerechtes Scrollen durch Laufband und
	   Parallax, ohne einen Scroll-Container zu bilden — sonst hielte
	   `position: sticky` in Modulen nicht mehr. */
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-h); }
p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Überschriften und kurze Zeilen umbrechen ausgewogen (keine Einzelwort-
   Zeile); Fließtext „pretty" (keine Hurenkinder, ruhiger rechter Rand). Lange
   deutsche Komposita dürfen in Überschriften notfalls brechen, statt aus dem
   Rand zu laufen. `balance` wirkt nur bis sechs Zeilen — für Kurztexte. */
h1, h2 { text-wrap: balance; overflow-wrap: break-word; }
h3, h4, summary, figcaption { text-wrap: balance; }
p, li, dd, blockquote, label { text-wrap: pretty; }

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-schnell) var(--ease-aus), border-color var(--dur-schnell) var(--ease-aus);
}

a:hover { color: var(--gold); }

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

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
input, textarea { border-radius: var(--radius); }

hr { border: 0; border-top: 1px solid var(--linie-12); margin: 0; }

::selection { background: var(--ink); color: var(--bg); }

/* Sprungmarken landen unterhalb der festen Kopfzeile, mit Luft (Design: 88 px). */
[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }

/* ==========================================================================
   2. Typografie
   ========================================================================== */

/* Kicker: die kleine Versalzeile über jeder Überschrift. Im Markup immer ein
   <p class="fk-kicker"> — sie gliedert optisch, nicht in der Dokumentstruktur. */
.fk-kicker {
	margin: 0;
	font-size: var(--fs-label);
	font-weight: var(--fw-label);
	letter-spacing: var(--ls-label);
	line-height: var(--lh-text);
	text-transform: uppercase;
	color: var(--text-55);
	/* Bricht ein Kicker um (mobil), dann in zwei gleich lange Zeilen. */
	text-wrap: balance;
}

.fk-kicker--gold { color: var(--gold); }
.fk-kicker--invers { color: var(--invers-70); }
/* Gold auf Dunkel ist immer das helle Gold; das dunkle verschwände im Grund. */
.fk-kicker--invers.fk-kicker--gold { color: var(--gold-hell); }

.fk-h1 {
	margin: 0;
	font-size: var(--fs-h1);
	font-weight: var(--fw-h);
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-h1);
}

/* Landingpages setzen die H1 eine Spur kleiner (längere Keyword-Zeilen). */
.fk-h1--landing { font-size: var(--fs-h1-landing); }

.fk-h2 {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: var(--fw-h);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
}

.fk-h2--gross {
	font-size: var(--fs-h2-gross);
	line-height: var(--lh-h2-gross);
}

.fk-h3 {
	margin: 0;
	font-size: var(--fs-h3);
	font-weight: var(--fw-h3);
}

.fk-h3--gross { font-size: var(--fs-h3-gross); }

/* Abstände Kicker → Überschrift, wie im Design. Als Nachbarregel, damit
   Module sie nicht wiederholen müssen. */
.fk-kicker + .fk-h1 { margin-top: clamp(18px, 3vh, 28px); }
.fk-kicker + .fk-h2 { margin-top: var(--abstand-kicker); }
.fk-kicker + .fk-h2--gross { margin-top: var(--abstand-kicker-gross); }

/* Goldener Schlusspunkt (fk26_headline()). Bleibt auch auf hellem Grund das
   helle Gold — so steht er im Design, als Markenzeichen und nicht als Akzent. */
.fk-punkt { color: var(--gold-hell); }

.fk-text {
	font-size: var(--fs-text);
	line-height: var(--lh-text);
	color: var(--text-78);
}

.fk-text > * + * { margin-top: var(--abstand-absatz); }
.fk-text > h3 { margin-top: 34px; font-size: var(--fs-h3-gross); font-weight: var(--fw-h3); color: var(--ink); }
.fk-text > h3 + * { margin-top: 12px; }
.fk-text strong { font-weight: var(--fw-label); color: var(--ink); }

/* Links im Fließtext: Gold unterstrichen, wie „Mehr dazu" in den Karten. */
.fk-text a:not([class]) { border-bottom: 1px solid var(--gold); }

.fk-text--karte {
	font-size: var(--fs-karte);
	color: var(--text-72);
}

/* Zitat: groß und zentriert (Modul Zitat) oder klein und kursiv (Stimmen). */
.fk-zitat { margin: 0; }

.fk-zitat blockquote {
	margin: 0;
	font-size: var(--fs-zitat);
	font-weight: var(--fw-normal);
	line-height: var(--lh-zitat);
	letter-spacing: var(--ls-zitat);
}

.fk-zitat__quelle {
	margin-top: 16px;
	font-size: var(--fs-label-mini);
	font-weight: var(--fw-label);
	letter-spacing: var(--ls-label-mini);
	text-transform: uppercase;
	color: var(--text-50);
}

.fk-zitat--klein blockquote {
	font-size: var(--fs-zitat-klein);
	font-weight: var(--fw-leicht);
	font-style: italic;
	line-height: var(--lh-zitat-klein);
	letter-spacing: normal;
}

.fk-zitat--klein .fk-zitat__quelle {
	margin-top: 13px;
	font-size: var(--fs-label-klein);
	letter-spacing: var(--ls-label-klein);
}

/* Hängende Anführungszeichen: In links bündigen Zitaten steht „ bzw. “ im
   Rand, die Buchstaben auf derselben Kante wie Kicker, Quelle und Fließtext.
   Zentrierte Zitate (Modul Zitat) bleiben, wie sie sind. */
.fk-zitat--klein blockquote p,
.modul-dunkel__hauptzitat blockquote p,
.modul-anfrage__zitat blockquote p { text-indent: var(--haengend-de); }

:lang(en) .fk-zitat--klein blockquote p,
:lang(en) .modul-dunkel__hauptzitat blockquote p,
:lang(en) .modul-anfrage__zitat blockquote p { text-indent: var(--haengend-en); }

/* Liste von Zitaten (fk26_modul_zitate()); Module setzen das Raster. */
.fk-zitate {
	display: grid;
	gap: 22px;
}

/* ==========================================================================
   3. Raster
   ========================================================================== */

/* Der Container misst die Inhaltsbreite ohne Seitenrand: 1140 px Text, dazu
   links und rechts --pad-x. So stehen Kopfzeile, Module und Footer auf
   derselben Kante wie im Prototyp. */
.container {
	width: 100%;
	max-width: calc(var(--container) + var(--pad-x) * 2);
	margin-inline: auto;
	padding-inline: var(--pad-x);
}

.container--schmal { max-width: calc(var(--container-schmal) + var(--pad-x) * 2); }

.fk-sektion { padding-block: var(--sektion-y); }

/*
 * Trennlinie über einem Abschnitt (ACF `linie_oben`): 1 px, danach der
 * Kopfabstand. Sitzt sie am `.container`, zeichnet ein Pseudo-Element sie nur
 * über der Inhaltsbreite — eine Linie bis in den Seitenrand gibt es im Design
 * nicht.
 */
.fk-linie-oben {
	border-top: 1px solid var(--linie-12);
	padding-top: var(--kopf-abstand);
}

.container.fk-linie-oben {
	position: relative;
	border-top: 0;
}

.container.fk-linie-oben::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--pad-x);
	right: var(--pad-x);
	border-top: 1px solid var(--linie-12);
}

/* Oberkante einer Karte oder eines Ablaufschritts. */
.fk-linie-karte {
	border-top: 1px solid var(--linie-35);
	padding-top: 18px;
}

/* ==========================================================================
   4. Buttons und Links
   ========================================================================== */

.fk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* Rechts um die Sperrung des letzten Buchstabens kürzer: Die Beschriftung
	   steht optisch mittig, nicht eine Sperrung nach links versetzt. */
	padding: 16px calc(32px - var(--ls-button)) 16px 32px;
	border: 0;
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--bg);
	font-size: var(--fs-button);
	font-weight: var(--fw-h3);
	letter-spacing: var(--ls-button);
	line-height: var(--lh-text);
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition:
		background-color var(--dur-ui) var(--ease-aus),
		color var(--dur-ui) var(--ease-aus),
		transform var(--dur-ui) var(--ease-aus);
}

.fk-btn:hover {
	background: var(--gold);
	color: var(--bg);
	transform: translateY(-2px);
}

.fk-btn:active { transform: none; }

/* Heller Button auf dunklem Grund (Hero, 404): hebt sich nicht, wird gold. */
.fk-btn--hell {
	background: var(--bg);
	color: var(--ink);
}

.fk-btn--hell:hover {
	background: var(--gold-hell);
	color: var(--ink);
	transform: none;
}

.fk-btn[disabled],
.fk-btn[aria-disabled="true"] { opacity: 0.55; cursor: progress; transform: none; }

/* Versal-Link mit Goldunterstrich („Alle Destinationen", „Mehr dazu" als
   Abschluss eines Abschnitts). */
.fk-link {
	/* Der Unterstrich ist ein Hintergrund statt einer Rahmenlinie: So endet er
	   am letzten Buchstaben und nicht eine Sperrung dahinter (siehe unten). */
	--fk-link-linie: var(--gold);
	--fk-link-laenge: 100%;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 4px;
	background: linear-gradient(var(--fk-link-linie), var(--fk-link-linie)) left bottom / var(--fk-link-laenge) 1px no-repeat;
	font-size: var(--fs-button);
	font-weight: var(--fw-h3);
	letter-spacing: var(--ls-button);
	line-height: var(--lh-text);
	text-transform: uppercase;
}

.fk-link:hover { color: var(--gold); }

/* Ohne Pfeil am Ende steht hinter dem letzten Buchstaben noch seine Sperrung;
   der Unterstrich hört davor auf. */
.fk-link:not(:has(.fk-icon)) { --fk-link-laenge: calc(100% - var(--ls-button)); }

/* ==========================================================================
   5. Bilder, Icons, Logo
   ========================================================================== */

.fk-bild { display: block; max-width: 100%; height: auto; }

/* Ausschnitt bei object-fit: cover (ACF `bild_fokus`). Hochzeitsfotos tragen
   die Gesichter oben; „oben" ist deshalb nicht 0 %, sondern ein Fünftel. */
.fk-fokus--oben { object-position: center 20%; }
.fk-fokus--mitte { object-position: center 45%; }
.fk-fokus--unten { object-position: center 80%; }

/* S/W-Look. `--hover` wird farbig, wenn der Zeiger auf dem Bild oder auf dem
   umschließenden Link liegt — und bei Tastaturfokus, damit Tastatur und Maus
   dasselbe sehen. */
.fk-bw { filter: var(--bw); }
.fk-bw--video { filter: var(--bw-video); }
.fk-bw--nacht { filter: var(--bw-nacht); }

.fk-bw--hover { transition: filter var(--dur-bild) var(--ease-aus); }

.fk-bw--hover:hover,
a:hover .fk-bw--hover,
a:focus-visible .fk-bw--hover { filter: none; }

/* Touch-Geräte kennen kein Hover; dort bleiben Kacheln beim Antippen nicht
   farbig hängen. */
@media (hover: none) {
	.fk-bw--hover:hover,
	a:hover .fk-bw--hover { filter: var(--bw); }
}

.fk-icon {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

/*
 * Pfeile: überall dasselbe SVG (fk26_icon), nie die Textglyphe — → und ↗
 * fehlen in Hanken Grotesk und kämen je System aus einer anderen Schrift.
 * 1,1 em groß, auf die Mitte der Versalhöhe gesetzt; in Flex-Zeilen mittig.
 */
.fk-icon--pfeil-rechts,
.fk-icon--pfeil-schraeg {
	width: 1.1em;
	height: 1.1em;
	vertical-align: -0.17em;
}

/* Das Logo ist Inline-SVG mit currentColor; Höhe setzt der Einsatzort. */
.fk-logo {
	display: block;
	width: auto;
	height: 100%;
	aspect-ratio: 1586 / 494;
	fill: currentColor;
}

/* ==========================================================================
   6. Fokus, Skip-Link, Screenreader
   ========================================================================== */

:focus { outline: none; }

/* Sichtbarer Fokus überall, 2 px Gold mit 3 px Abstand. Auf dunklem Grund das
   helle Gold (Abschnitt 16). */
:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.fk-skip {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: var(--z-skip);
	padding: 12px 20px;
	background: var(--ink);
	color: var(--bg);
	font-size: var(--fs-button);
	font-weight: var(--fw-h3);
	letter-spacing: var(--ls-button);
	text-transform: uppercase;
	transform: translateY(calc(-100% - 24px));
}

.fk-skip:focus,
.fk-skip:focus-visible {
	transform: none;
	color: var(--bg);
}

/* ==========================================================================
   7. Kopfzeile
   ========================================================================== */

/*
 * Ohne JavaScript steht die Kopfzeile absolut oben und scrollt mit: Sie bliebe
 * sonst transparent mit weißen Links über hellem Inhalt stehen, weil niemand
 * auf `is-solid` umschaltet. Mit JavaScript ist sie fest wie im Design.
 */
.fk-nav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-nav);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: var(--nav-h);
	padding-inline: var(--pad-x);
	color: var(--invers-85);
	background: var(--nav-dunkel);
	border-bottom: 1px solid transparent;
	transition:
		background-color var(--dur-nav) var(--ease-aus),
		border-color var(--dur-nav) var(--ease-aus),
		color var(--dur-nav) var(--ease-aus);
}

.js .fk-nav { position: fixed; }

/* Angemeldete sehen die Admin-Leiste; die Kopfzeile rückt darunter. Unter
   601 px lässt WordPress die Leiste mitscrollen — dann läge sie über der
   Kopfzeile und verdeckte den Schließen-Knopf des Menüs. Sie bleibt deshalb
   auch dort stehen (600 px ist die Grenze von WordPress, nicht des Themes). */
.admin-bar .fk-nav { top: var(--wp-admin--admin-bar--height, 32px); }

@media (max-width: 600px) {
	html #wpadminbar { position: fixed; }
}

.fk-nav.is-solid {
	background: var(--nav-hell);
	border-bottom-color: var(--linie-10);
	color: var(--text-65);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.fk-nav__marke {
	display: block;
	flex: none;
	height: var(--logo-h);
	color: var(--bg);
	transition: color var(--dur-nav) var(--ease-aus);
}

.fk-nav__marke:hover { color: var(--bg); }
.fk-nav.is-solid .fk-nav__marke,
.fk-nav.is-solid .fk-nav__marke:hover { color: var(--ink); }

.fk-nav__rechts {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(14px, 2.2vw, 32px);
	min-width: 0;
}

.fk-nav__liste {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.2vw, 32px);
}

.fk-nav__link {
	display: block;
	font-size: var(--fs-label);
	font-weight: var(--fw-label);
	letter-spacing: var(--ls-nav);
	text-transform: uppercase;
	white-space: nowrap;
	color: inherit;
}

.fk-nav__link:hover { color: var(--gold); }

/* Burger: ein Knopf, zwei Icons; welches sichtbar ist, sagt aria-expanded. */
.fk-nav__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	color: inherit;
	font-size: 24px;
}

.fk-nav__burger-icon { display: inline-flex; }
.fk-nav__burger-icon--zu,
.fk-nav__burger[aria-expanded="true"] .fk-nav__burger-icon--auf { display: none; }
.fk-nav__burger[aria-expanded="true"] .fk-nav__burger-icon--zu { display: inline-flex; }

/*
 * Lesefortschritt: 2 px Gold an der Unterkante. Bevorzugt reines CSS über die
 * Scroll-Zeitleiste der Seite; wo es die nicht gibt, schreibt site.js den
 * Anteil als --progress (0–1).
 */
.fk-nav__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--gold);
	transform: scaleX(var(--progress, 0));
	transform-origin: left center;
	pointer-events: none;
}

@keyframes fk-fortschritt {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@supports (animation-timeline: scroll()) {
	.fk-nav__progress {
		animation: fk-fortschritt linear both;
		animation-timeline: scroll(root);
	}
}

/* Menü offen: die Kopfzeile liegt über dem dunklen Overlay und wird selbst
   dunkel-transparent — nur Logo und Schließen-Knopf bleiben. */
.fk-nav.is-menue-offen {
	background: transparent;
	border-bottom-color: transparent;
	color: var(--invers-85);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.fk-nav.is-menue-offen .fk-nav__marke { color: var(--bg); }
.fk-nav.is-menue-offen .fk-nav__progress { opacity: 0; }

/* Seiten ohne Hero beginnen unter der soliden Kopfzeile. Die 404-Seite
   (fk-dunkel) setzt ihren Abstand selbst. */
body:not(.fk-hat-hero):not(.fk-dunkel) .fk-main { padding-top: var(--nav-h); }

/* Ab 900 px: Links und Sprache in der Zeile, kein Burger. */
@media (max-width: 899px) {
	.fk-nav__marke { height: var(--logo-h-mobil); }

	.js .fk-nav__menue,
	.js .fk-nav__sprache { display: none; }

	.js .fk-nav__burger { display: inline-flex; }

	/* Ohne JavaScript gibt es kein Menü; die Links stehen dann umbrochen in
	   der Kopfzeile, die dafür in die Höhe wachsen darf. */
	html:not(.js) .fk-nav {
		flex-wrap: wrap;
		height: auto;
		min-height: var(--nav-h);
		padding-block: 20px;
	}

	html:not(.js) .fk-nav__rechts,
	html:not(.js) .fk-nav__liste { flex-wrap: wrap; justify-content: flex-start; }

	/* Die gewachsene Kopfzeile schiebt auf Seiten ohne Hero den Inhalt nach
	   unten, statt mit fester Höhe über ihm zu liegen. */
	html:not(.js) body:not(.fk-hat-hero):not(.fk-dunkel) .fk-nav { position: relative; top: 0; }
	html:not(.js) body:not(.fk-hat-hero):not(.fk-dunkel) .fk-main { padding-top: 0; }
}

/* ==========================================================================
   8. Sprachumschalter DE · EN
   ========================================================================== */

.fk-sprache {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	/* Steht rechts bündig: Die Sperrung hinter „EN" rückte die Kante sonst
	   vom Seitenrand ab. */
	margin-right: calc(-1 * var(--ls-sprache));
	font-size: var(--fs-label);
	font-weight: var(--fw-label);
	letter-spacing: var(--ls-sprache);
	line-height: var(--lh-text);
}

.fk-sprache__link {
	border-bottom: 1px solid transparent;
	color: var(--invers-55);
}

.fk-sprache__link.is-aktiv {
	border-bottom-color: var(--gold);
	color: var(--invers-95);
}

.fk-sprache__link:hover { color: var(--gold); }
.fk-sprache__trenner { color: var(--invers-40); }

.fk-nav.is-solid .fk-sprache__link { color: var(--text-45); }
.fk-nav.is-solid .fk-sprache__link.is-aktiv { color: var(--ink); }
.fk-nav.is-solid .fk-sprache__link:hover { color: var(--gold); }
.fk-nav.is-solid .fk-sprache__trenner { color: var(--text-45); }

/* ==========================================================================
   9. Mobiles Menü
   ========================================================================== */

/* `hidden` schaltet die Sichtbarkeit, `.is-offen` die Überblendung: site.js
   nimmt erst das Attribut weg und setzt die Klasse einen Frame später. */
.fk-menue {
	position: fixed;
	inset: 0;
	z-index: var(--z-menue);
	display: flex;
	background: var(--dunkel);
	color: var(--hell);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	transition: opacity var(--dur-nav) var(--ease-aus);
}

.fk-menue.is-offen { opacity: 1; }

.fk-menue__innen {
	display: flex;
	flex-direction: column;
	gap: 48px;
	width: 100%;
	min-height: 100%;
	padding: calc(var(--nav-h) + 32px) var(--pad-x) 40px;
}

.admin-bar .fk-menue__innen { padding-top: calc(var(--nav-h) + var(--wp-admin--admin-bar--height, 0px) + 32px); }

.fk-menue__liste {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Einträge in H2-Größe; sie gleiten beim Öffnen leicht nach oben. */
.fk-menue__link {
	display: inline-block;
	padding-block: 4px;
	font-size: var(--fs-h2);
	font-weight: var(--fw-h);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
	color: var(--hell);
	transform: translateY(var(--reveal-shift));
	transition:
		color var(--dur-schnell) var(--ease-aus),
		transform var(--dur-reveal) var(--ease-aus);
}

.fk-menue.is-offen .fk-menue__link { transform: none; }
.fk-menue__link:hover { color: var(--gold-hell); }

.fk-menue__fuss {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-top: auto;
	padding-top: 24px;
	border-top: 1px solid var(--linie-invers-20);
}

.fk-menue__sprache { font-size: var(--fs-button); }

.fk-menue__kontakt {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: var(--fs-text);
}

.fk-menue__kontakt-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--hell-85);
	/* Lange E-Mail-Adressen dürfen auf schmalen Geräten brechen. */
	overflow-wrap: anywhere;
}

.fk-menue__kontakt-link:hover { color: var(--gold-hell); }

/* Auf breiten Fenstern gibt es kein Menü; schließt site.js es beim Drehen
   nicht rechtzeitig, bleibt es trotzdem weg. */
@media (min-width: 900px) {
	.fk-menue { display: none; }
}

/* Gesperrter Seiten-Scroll, solange das Menü offen ist. Am <html> und am
   <body>, weil iOS Safari nur eines von beiden beachtet. */
html.fk-menue-offen,
html.fk-menue-offen body { overflow: hidden; }

/* ==========================================================================
   10. Sticky CTA
   ========================================================================== */

.fk-sticker {
	position: fixed;
	right: var(--sticker-abstand);
	bottom: var(--sticker-abstand);
	z-index: var(--z-sticker);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sticker);
	height: var(--sticker);
	border-radius: var(--radius-rund);
	background: var(--ink);
	color: var(--bg);
	box-shadow: var(--schatten-sticker);
	visibility: visible;
	transition:
		transform var(--dur-nav) var(--ease-aus),
		background-color var(--dur-nav) var(--ease-aus),
		opacity var(--dur-nav) var(--ease-aus),
		visibility 0s linear 0s;
}

.fk-sticker:hover {
	transform: scale(1.06);
	background: var(--gold);
	color: var(--bg);
}

/* Fokusring dem Kreis nachgeführt; ein eckiger Rahmen um einen runden Knopf
   läse sich wie ein Fehler. */
.fk-sticker:focus-visible { outline-offset: 4px; border-radius: var(--radius-rund); }

/*
 * Ausgeblendet über dem Formular und bei offenem Menü. `visibility` folgt der
 * Deckkraft mit Verzug: Erst wenn er unsichtbar ist, verlässt er auch die
 * Tab-Reihenfolge — und kommt beim Einblenden sofort zurück.
 */
.fk-sticker.is-versteckt {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition:
		transform var(--dur-nav) var(--ease-aus),
		background-color var(--dur-nav) var(--ease-aus),
		opacity var(--dur-nav) var(--ease-aus),
		visibility 0s linear var(--dur-nav);
}

@keyframes fk-drehen {
	to { transform: rotate(360deg); }
}

.fk-sticker__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	animation: fk-drehen var(--dur-sticker) linear infinite;
}

.fk-sticker:hover .fk-sticker__ring { animation-duration: var(--dur-sticker-hover); }

/* Größen im Koordinatensystem des SVG (viewBox 100): bei 112 px sind 8.6
   Einheiten rund 9,6 px. */
.fk-sticker__text {
	font-family: var(--sans);
	font-size: 8.6px;
	font-weight: var(--fw-h3);
	letter-spacing: 0.2em;
	fill: currentColor;
}

.fk-sticker__pfeil {
	position: relative;
	display: flex;
	font-size: 22px;
	line-height: 1;
}

.fk-sticker__pfeil .fk-icon { width: 1em; height: 1em; }

/*
 * Mobil 84 px. Mitskaliert schrumpfte der Ringtext auf gut 7 px; größer
 * gesetzt steht er bei gut 9 px. Die Sperrung hier ist nur der Ausgangswert:
 * `textLength` am <textPath> (sticker.php) verteilt den Text exakt auf den
 * Umfang, in jeder Sprache und Größe — die Fuge am Ende ist so breit wie die
 * übrigen Abstände. Für 9,5 px reicht der Umfang nicht.
 */
@media (max-width: 699px) {
	.fk-sticker {
		width: var(--sticker-mobil);
		height: var(--sticker-mobil);
	}

	.fk-sticker__text {
		font-size: 10.8px;
		letter-spacing: 0.06em;
	}

	.fk-sticker__pfeil { font-size: 19px; }
}

/* Auf dunklem Seitengrund (404) kehrt er sich um, sonst verschwände er. */
.fk-dunkel .fk-sticker { background: var(--bg); color: var(--ink); }
.fk-dunkel .fk-sticker:hover { background: var(--gold-hell); color: var(--ink); }

/* ==========================================================================
   11. Bewertung
   ========================================================================== */

.fk-bewertung {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3em;
	font-size: var(--fs-meta);
	line-height: var(--lh-text);
	color: var(--text-60);
}

.fk-bewertung__stern { color: var(--gold); }
.fk-bewertung:hover { color: var(--gold); }

.fk-bewertung--invers { color: var(--invers-70); }
.fk-bewertung--invers .fk-bewertung__stern { color: var(--gold-hell); }
.fk-bewertung--invers:hover { color: var(--gold-hell); }

/* Pille mit Rahmen, in den dunklen Sektionen („… lesen"). */
.fk-bewertung--lesen {
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--gold);
	border-radius: var(--radius-rund);
	font-size: var(--fs-klein);
	color: var(--ink);
}

.fk-bewertung--lesen.fk-bewertung--invers {
	border-color: var(--gold-hell-50);
	color: var(--hell);
}

.fk-bewertung--lesen.fk-bewertung--invers:hover { color: var(--gold-hell); }

/* ==========================================================================
   12. Footer
   ========================================================================== */

.fk-footer {
	background: var(--bg);
	color: var(--ink);
	border-top: 1px solid var(--linie-10);
	padding: clamp(32px, 4.5vw, 52px) var(--pad-x) 28px;
}

.fk-footer__innen {
	max-width: var(--container);
	margin-inline: auto;
}

.fk-footer__oben {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 28px;
	flex-wrap: wrap;
}

.fk-footer__logo {
	height: 36px;
	color: var(--ink);
}

.fk-footer__standort {
	margin-top: 10px;
	max-width: 44ch;
	font-size: var(--fs-klein);
	color: var(--text-55);
}

.fk-footer__spalten {
	display: flex;
	gap: clamp(24px, 4vw, 64px);
	flex-wrap: wrap;
}

.fk-footer__spalte {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--fs-footer);
}

.fk-footer__titel {
	margin: 0;
	font-size: var(--fs-label-klein);
	font-weight: var(--fw-h3);
	letter-spacing: var(--ls-label-klein);
	line-height: var(--lh-text);
	text-transform: uppercase;
	color: var(--text-45);
}

.fk-footer__titel-link:hover { color: var(--gold); }

.fk-footer__liste {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fk-footer__link { color: var(--text-65); }
.fk-footer__link:hover,
.fk-footer__link.is-aktiv { color: var(--gold); }

.fk-footer__unten {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: clamp(26px, 4vw, 40px);
	padding-top: 16px;
	border-top: 1px solid var(--linie-08);
	font-size: var(--fs-button);
	color: var(--text-45);
}

.fk-footer__credit { border-bottom: 1px solid var(--linie-20); }

/* Mobil: Spalten gestapelt. Nebeneinander umbrochen nach Inhaltsbreite
   standen zwei Köpfe in einer Zeile und der dritte darunter — und ein Kopf
   wie „Destination Weddings" bräche in einer halben Spalte in zwei Zeilen. */
@media (max-width: 559px) {
	.fk-footer__spalten {
		flex-direction: column;
		gap: 28px;
		width: 100%;
	}
}
.fk-footer__credit:hover { color: var(--gold); }


/* ==========================================================================
   13. Seitenkopf, Inhalt, Leerzustand, Listen, Suche
   ========================================================================== */

/* Schlichter Kopf für Seiten ohne Hero (Impressum, Datenschutz, Archive). */
.fk-seitenkopf { padding-top: clamp(56px, 8vw, 110px); }

.fk-seitenkopf__titel {
	font-size: var(--fs-h2-gross);
	line-height: var(--lh-h2-gross);
	letter-spacing: var(--ls-h2);
	max-width: 20ch;
	hyphens: auto;
}

.fk-seitenkopf__text {
	max-width: var(--mass-text);
	margin-top: 22px;
}

.fk-seitenkopf + .fk-sektion { padding-top: var(--kopf-abstand); }

/* Redaktioneller Fließtext aus dem Editor (page.php, Text-Modul). */
.fk-inhalt {
	color: var(--text-78);
	overflow-wrap: break-word;
}

.fk-inhalt > * + * { margin-top: 16px; }

.fk-inhalt h2,
.fk-inhalt h3,
.fk-inhalt h4 { color: var(--ink); text-wrap: balance; }

.fk-inhalt h2 {
	margin-top: 56px;
	font-size: var(--fs-h3-gross);
	font-weight: var(--fw-h3);
	line-height: 1.35;
	letter-spacing: normal;
}

.fk-inhalt h3,
.fk-inhalt h4 {
	margin-top: 36px;
	font-size: var(--fs-text);
	font-weight: var(--fw-h3);
}

.fk-inhalt h2 + *,
.fk-inhalt h3 + *,
.fk-inhalt h4 + * { margin-top: 10px; }

.fk-inhalt > :first-child { margin-top: 0; }

.fk-inhalt ul,
.fk-inhalt ol { padding-left: 1.2em; }

.fk-inhalt ul { list-style: disc; }
.fk-inhalt ol { list-style: decimal; }
.fk-inhalt li + li { margin-top: 6px; }
.fk-inhalt li::marker { color: var(--gold); }

.fk-inhalt a { border-bottom: 1px solid var(--linie-30); }
.fk-inhalt a:hover { border-bottom-color: var(--gold); }

.fk-inhalt strong { font-weight: var(--fw-h3); color: var(--ink); }

.fk-inhalt blockquote {
	padding-left: 20px;
	border-left: 1px solid var(--gold);
	font-style: italic;
}

.fk-inhalt img { height: auto; }

.fk-inhalt table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-klein);
}

.fk-inhalt th,
.fk-inhalt td {
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var(--linie-14);
	text-align: left;
	vertical-align: top;
}

.fk-seiten-links {
	display: flex;
	gap: 14px;
	margin-top: 40px;
	font-size: var(--fs-klein);
}

/* Leerzustand: ein Satz, was fehlt, und ein Weg weiter. */
.fk-leer {
	padding: 40px 0;
	border-top: 1px solid var(--linie-12);
}

.fk-leer__text { margin-top: 10px; max-width: var(--mass-text); }
.fk-leer__aktion { margin-top: 26px; }

/* Einfache Beitragsliste (index.php). */
.fk-liste {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.fk-liste__eintrag.fk-linie-oben {
	padding-top: 18px;
	border-top-color: var(--linie-14);
}

.fk-liste__eintrag .fk-text--karte { margin-top: 8px; }

/* Seitenzahlen (the_posts_pagination). */
.fk-sektion .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 48px;
	font-size: var(--fs-klein);
}

.fk-sektion .page-numbers.current { color: var(--gold); border-bottom: 1px solid var(--gold); }

/* Suchformular (searchform.php): Feld nur mit Unterlinie, wie das Formular. */
.fk-suche {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px 24px;
}

.fk-suche__feld {
	flex: 1 1 220px;
	min-width: 0;
	padding: 8px 0;
	border: 0;
	border-bottom: 1px solid var(--linie-30);
	background: transparent;
	font-size: var(--fs-text);
	transition: border-color var(--dur-schnell) var(--ease-aus);
}

.fk-suche__feld:focus { border-bottom-color: var(--gold); }
.fk-suche__feld:focus-visible { outline: none; }

/* ==========================================================================
   14. Fehlerseite 404
   ========================================================================== */

body.fk-dunkel { background: var(--dunkel); }

.fk-404 {
	background: var(--dunkel);
	color: var(--hell);
}

/* Aufbau wie ein Hero: volle Höhe, Inhalt unten. */
.fk-404__sektion {
	display: flex;
	align-items: flex-end;
	min-height: 100svh;
	padding-top: calc(var(--nav-h) + clamp(60px, 12vh, 140px));
	padding-bottom: clamp(90px, 12vh, 130px);
}

.fk-404__titel {
	max-width: 14ch;
	margin-top: clamp(18px, 3vh, 28px);
}

.fk-404__text {
	max-width: var(--mass-lead);
	margin-top: 26px;
	font-size: var(--fs-hero-text);
	color: var(--invers-85);
}

.fk-404__aktionen {
	display: flex;
	align-items: center;
	gap: 22px 28px;
	flex-wrap: wrap;
	margin-top: clamp(22px, 3.5vh, 34px);
}

/* ==========================================================================
   15. Dunkle Flächen
   ========================================================================== */

/*
 * `.fk-invers` an einer dunklen Sektion (Die Nacht, Stimmen) stellt Text,
 * Links, Kicker und Fokus auf den dunklen Grund um. Die 404-Seite (body
 * `fk-dunkel`) bekommt dasselbe. Module müssen so keine Farben wiederholen.
 */
.fk-invers,
.fk-404 { color: var(--hell); }

.fk-invers .fk-kicker,
.fk-404 .fk-kicker { color: var(--invers-70); }

.fk-invers .fk-kicker--gold,
.fk-404 .fk-kicker--gold { color: var(--gold-hell); }

.fk-invers .fk-text {
	font-size: var(--fs-text-dunkel);
	line-height: var(--lh-text-dunkel);
	color: var(--hell-85);
}

.fk-invers .fk-text strong { color: var(--hell); }
.fk-invers .fk-zitat__quelle { color: var(--hell-55); }

.fk-invers a:hover,
.fk-404 a:hover { color: var(--gold-hell); }

.fk-invers .fk-link,
.fk-404 .fk-link { --fk-link-linie: var(--gold-hell); }

.fk-invers .fk-text a:not([class]) { border-bottom-color: var(--gold-hell); }

.fk-invers :focus-visible,
.fk-404 :focus-visible,
.fk-nav:not(.is-solid) :focus-visible,
.fk-menue :focus-visible { outline-color: var(--gold-hell); }

/* ==========================================================================
   16. Bewegung: Reveal, Parallax, Hero-Zoom, Laufband
   ========================================================================== */

/* Einblenden von unten; auch für den gestaffelten Einstieg im Hero nutzbar:
   `animation: fk-einblenden var(--dur-hero) var(--ease-aus) both`. */
@keyframes fk-einblenden {
	from { opacity: 0; transform: translateY(var(--reveal-shift)); }
	to { opacity: 1; transform: none; }
}

/*
 * Scroll-Reveal `[data-rv]`.
 *
 * Wo der Browser View-Timelines kennt, macht das CSS allein — an die
 * Scrollposition gebunden, ohne Skript. Sonst übernimmt site.js: Mit
 * JavaScript (`.js`) startet das Element unsichtbar und bekommt beim ersten
 * Sichtwerden `.is-sichtbar`; `data-rvd` (Millisekunden) wird dort zu --rvd.
 * Ohne JavaScript greift keine der beiden Regeln, alles steht da.
 */
@media (prefers-reduced-motion: no-preference) {

	@supports (animation-timeline: view()) {
		[data-rv] {
			animation: fk-einblenden var(--dur-reveal) var(--ease-aus) both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
	}

	@supports not (animation-timeline: view()) {
		.js [data-rv] {
			opacity: 0;
			transform: translateY(var(--reveal-shift));
			transition:
				opacity var(--dur-reveal) var(--ease-aus) var(--rvd, 0s),
				transform var(--dur-reveal) var(--ease-aus) var(--rvd, 0s);
		}

		.js [data-rv].is-sichtbar {
			opacity: 1;
			transform: none;
		}
	}
}

/*
 * Parallax `[data-parallax]` (Nachtbild): wandert über den Sichtbereich von
 * −--parallax nach +--parallax und ist dafür um --parallax-zoom vergrößert.
 * Rückfall: site.js schreibt den Fortschritt als --parallax-fortschritt
 * (−1 … 1). Das Element darf keine eigene transform tragen.
 */
[data-parallax] {
	transform: translateY(calc(var(--parallax) * var(--parallax-fortschritt, 0))) scale(var(--parallax-zoom));
	will-change: transform;
}

@keyframes fk-parallax {
	from { transform: translateY(calc(var(--parallax) * -1)) scale(var(--parallax-zoom)); }
	to { transform: translateY(var(--parallax)) scale(var(--parallax-zoom)); }
}

/*
 * Hero-Zoom `[data-hero-zoom]` (Bild-Hero): 1 → --hero-zoom, während der Hero
 * aus dem Bild scrollt. Rückfall: --hero-zoom-fortschritt (0 … 1) aus site.js.
 */
[data-hero-zoom] {
	transform: scale(calc(1 + (var(--hero-zoom) - 1) * var(--hero-zoom-fortschritt, 0)));
	transform-origin: center center;
}

@keyframes fk-hero-zoom {
	from { transform: scale(1); }
	to { transform: scale(var(--hero-zoom)); }
}

@media (prefers-reduced-motion: no-preference) {

	@supports (animation-timeline: view()) {
		[data-parallax] {
			animation: fk-parallax linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}

		[data-hero-zoom] {
			animation: fk-hero-zoom linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 100%;
		}
	}
}

/*
 * Laufband `[data-marquee]`: site.js verdoppelt den Inhalt der Spur
 * (`[data-marquee-spur]`, sonst das erste Kind) und setzt `.is-dupliziert`;
 * erst dann läuft sie, um genau die Hälfte versetzt, nahtlos. Hover und
 * Tastaturfokus halten sie an (`.is-pausiert`). Bei reduzierter Bewegung wird
 * nicht verdoppelt und nichts bewegt — das Modul zeigt die Einträge dann als
 * umbrechende Liste.
 */
@keyframes fk-laufband {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

[data-marquee].is-dupliziert [data-marquee-spur] {
	display: flex;
	width: max-content;
	animation: fk-laufband var(--dur-marquee) linear infinite;
}

[data-marquee].is-pausiert [data-marquee-spur] { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	[data-marquee-spur],
	.fk-sticker__ring { animation: none; }
}

/* ==========================================================================
   17. Druck
   ========================================================================== */

@media print {
	.fk-nav,
	.fk-menue,
	.fk-sticker,
	.fk-skip { display: none !important; }

	body { background: var(--weiss); color: var(--ink); font-size: 11pt; }
	body:not(.fk-hat-hero):not(.fk-dunkel) .fk-main { padding-top: 0; }

	[data-rv] { opacity: 1 !important; transform: none !important; animation: none !important; }

	.fk-inhalt a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		color: var(--text-55);
	}
}