/* ==========================================================================
   Fatathe – Aussehen
   Farben und Schriften stehen in theme.json. Diese Datei ist die Gestaltungsschicht:
   Wer ein neues Aussehen will, tauscht Werte und Bilder – Struktur und Inhalte bleiben.
   ========================================================================== */

:root {
	--ft-nacht: var(--wp--preset--color--nacht, #0a1228);
	--ft-tief: var(--wp--preset--color--tiefblau, #14224f);
	--ft-gold: var(--wp--preset--color--gold, #e2bf6a);
	--ft-goldhell: var(--wp--preset--color--goldhell, #e9cf8f);
	--ft-creme: var(--wp--preset--color--creme, #f3e9cf);
	--ft-tinte: var(--wp--preset--color--tinte, #17234a);
	--ft-golddunkel: #8a6a2e;
	--ft-anzeige: var(--wp--preset--font-family--anzeige, 'Cormorant Infant', Georgia, serif);
	--ft-text: var(--wp--preset--font-family--text, 'Vollkorn', Georgia, serif);
	--ft-ease: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { position: relative; margin: 0; overflow-x: clip; background: var(--ft-nacht); }
.wp-site-blocks > *, .ft-haupt > * { margin-block: 0 !important; }
.wp-site-blocks { padding: 0 !important; }
.ft-haupt { display: block; }
a { text-underline-offset: .18em; }

/* ---- Eingangswelt: Bildflaeche mit Marke und Menue, Begruessung --------------------- */
/* Die Flaeche hat das Seitenverhaeltnis des Bildes (quer 3:2, hoch 2:3) und ueberdeckt den Abschnitt wie
   object-fit: cover. Marke, Menuepunkte und Begruessung sitzen in Prozent der Flaeche (--x, --y), damit sie
   auf denselben Bildstellen bleiben, egal wie der Bildschirm zuschneidet. Die Werte unten sitzen auf den Stellen
   der Bilder eingang-quer.webp und eingang-hoch.webp (vermessen am Pixel, Aufgabe 8): "Buecher" auf der haengenden
   Tafel am Laternenbaum, "Blog" auf dem unteren Brett des Wegweisers (Stefan, 28.10.2026, vorher "Ueber Fatathe": gleiche Lage, Neigung und Breite, die Schrift darf wachsen), "Ueber den Autor" auf dem oberen Brett
   (Messung Nele, Aufgabe 10; zweizeilig, die Naegel links bleiben frei), die Marke im freien Himmel (nicht auf
   dem Mond), die Begruessung im dunklen Tal zwischen Tafel und Katze. Wird das Bild getauscht, sind diese Werte neu zu messen. */
.ft-welt {
	position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; container-type: size;
	background: linear-gradient(180deg, #07102a 0%, var(--ft-tief) 70%, #1d2f66 100%);
}
.ft-welt__flaeche {
	--w: max(100cqw, 150cqh); --wh: calc(var(--w) * .6667); --clip: max(0px, calc((var(--wh) - 100cqh) / 2));
	position: absolute; isolation: isolate; left: 50%; top: 50%; translate: -50% -50%; width: var(--w); aspect-ratio: 3 / 2;
}
.ft-welt__flaeche > .ft-szene { background: linear-gradient(180deg, #07102a 0%, var(--ft-tief) 70%, #1d2f66 100%); }
.ft-welt__bild, .ft-welt__bild img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ft-welt__nav { position: absolute; inset: 0; pointer-events: none; }

.ft-welt__marke, .ft-welt__anker, .ft-welt__gruss { position: absolute; z-index: 2; left: var(--x); top: var(--y); translate: -50% -50%; }
.ft-welt__marke { --x: 60%; --y: 11.5%; }
.ft-welt__gruss { --x: 50%; --y: 47.5%; }
.ft-welt__anker--buecher { --x: 28.8%; --y: 36.4%; --bw: .222; --bh: .08; --fk: .25; --rot: 6deg; --ls: .03em; --wash: .16; }
.ft-welt__anker--blog { --x: 86%; --y: 58.8%; --bw: .12; --bh: .05; --fk: .26; --rechts: calc(var(--w) * var(--bw) * .35); --rot: 6.2deg; --ls: .05em; --wash: .28; }
/* Oberes Brett: kurz (0,098 der Breite) - einzeilig waere "Ueber den Autor" sehr klein.
   Deshalb zweizeilig (--bw * --fk = .0169 der Breite); --nagel haelt
   das linke Fuenftel mit den Naegeln frei, so bricht die Zeile nach "den". */
.ft-welt__anker--autor { --x: 91.4%; --y: 49.8%; --bw: .098; --bh: .044; --fk: .172; --nagel: .19; --rot: -11deg; --ls: .05em; --wash: .28; }
/* Hochformat: Auf hohen Handys (375 x 812) wuerde "cover" nur 69 % der Bildbreite zeigen, die Schrift auf Tafel (ab 19 %) und
   oberem Wegweiserbrett (bis 93 %) wuerde angeschnitten. Deshalb ist die Flaeche dort schmaler als "cover": Sie zeigt
   rund 78,1 % der Bildbreite (--w = hoechstens 128 % der Breite) und sitzt unten; oben bleibt Raum, den ein Verlauf in der
   Himmelsfarbe der Bildoberkante fuellt (::before), das Bild blendet dort weich ein. Der Ausschnitt liegt bei 56,1 % der
   Bildbreite (--ft-fenster, Mitte der Schriftzuege von 18,3 bis 93,9 %: je rund 6 px Rand bei 375 px). Auf breiteren Bildschirmen bleibt es bei "cover" (auf kurzen Handys wie 375 x 667 darf das Bild bis 8 % ueber "cover" wachsen,
   oben und unten fehlen dann je 4 %); clamp() hebt die
   Verschiebung dort auf. Die Schrift wird so nur auf den hohen Handys kleiner (um 11 % gegen "cover"), nicht auf Tablets. */
@media (orientation: portrait) {
	.ft-welt__flaeche {
		--w: max(100cqw, min(72cqh, 128cqw)); --wh: calc(var(--w) * 1.5); --clip: max(0px, calc((var(--wh) - 100cqh) / 2)); --ft-fenster: .561;
		width: var(--w); aspect-ratio: 2 / 3; left: clamp(calc(100cqw - var(--w)), calc(50cqw - var(--ft-fenster) * var(--w)), 0px);
		top: max(calc(100cqh - var(--wh)), calc((100cqh - var(--wh)) / 2)); translate: none;
	}
	.ft-welt__flaeche::before {
		content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: -100cqh; height: calc(100cqh + 7%);
		background: linear-gradient(180deg, #050c2a 0, #0a2050 100cqh, #0a2050 100%);
	}
	.ft-welt__bild { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%); mask-image: linear-gradient(180deg, transparent 0, #000 6%); }
	.ft-welt .ft-welt__bild { -webkit-mask-image: var(--ft-naht), linear-gradient(180deg, transparent 0, #000 6%); -webkit-mask-composite: source-in; mask-image: var(--ft-naht), linear-gradient(180deg, transparent 0, #000 6%); mask-composite: intersect; }
	.ft-welt__marke { --x: 68%; --y: 17%; }
	.ft-welt__gruss { --x: 54%; --y: 40%; }
	.ft-welt__anker--buecher { --x: 30.9%; --y: 30.2%; --bw: .30; --bh: .116; --fk: .27; --rot: 7deg; --ls: .03em; --wash: .26; }
	.ft-welt__anker--blog { --x: 79.6%; --y: 55.85%; --bw: .15; --bh: .07; --fk: .27; --rechts: 0px; --rot: 3deg; --ls: .03em; --wash: .4; }
	.ft-welt__anker--autor { --x: 87.1%; --y: 50.4%; --bw: .149; --bh: .072; --fk: .15; --nagel: .285; --rot: 5deg; --ls: .03em; --wash: .4; }
}

/* Naht zum Regal (siehe "Regal der Startseite"; eine Maske ist keine Bewegung und gilt auch bei "weniger Bewegung"): Das Eingangsbild blendet in seinen unteren 20 % aus (weiche
   Kurve) und gibt so den warmen Grund des Regals frei, das hier schon beginnt; gleich darunter liegt die Regalkrone. Die Zone
   endet an der Unterkante des sichtbaren Abschnitts (--clip: ein bei "cover" unten abgeschnittener Rest zaehlt nicht mit).
   Marke und Menue bleiben davon unberuehrt (weit darueber). Der Grundverlauf der Welt entfaellt bewusst (background: none), sonst deckte er den warmen Grund darunter, und die Maske zeigte keine weiche Naht; das gilt auch ohne Bewegung. */
.ft-welt { z-index: 2; background: none; }
.ft-welt__flaeche {
	--ft-naht: linear-gradient(180deg, #000 calc(80% - var(--clip)), rgba(0, 0, 0, .844) calc(85% - var(--clip)), rgba(0, 0, 0, .5) calc(90% - var(--clip)), rgba(0, 0, 0, .156) calc(95% - var(--clip)), transparent calc(100% - var(--clip)));
}
.ft-welt__bild, .ft-welt__flaeche > .ft-szene { -webkit-mask-image: var(--ft-naht); mask-image: var(--ft-naht); }

/* Marke und Menuetafeln: gleiches Aussehen in der Eingangswelt und im Bildstreifen der Unterseiten */
.ft-welt__marke, .ft-streifen__marke {
	padding: .3em 0 .3em .5em; white-space: nowrap;
	font-family: var(--ft-anzeige); font-weight: 700; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: .5em; text-decoration: none;
	color: var(--ft-gold); text-shadow: 0 0 26px rgba(226, 191, 106, .45), 0 2px 10px rgba(7, 16, 42, .9);
}
.ft-welt__marke:hover, .ft-welt__marke:focus-visible, .ft-streifen__marke:hover, .ft-streifen__marke:focus-visible { color: var(--ft-goldhell); text-shadow: 0 0 34px rgba(233, 207, 143, .75), 0 2px 10px rgba(7, 16, 42, .9); }
/* Menuepunkte im Bildstreifen: reine Schrift im Stil der Marke (Stefan, 28.10.2026: "die Umrandung weglassen"),
   Versalien mit Sperrung im Goldton, dunkler Schein fuer die Lesbarkeit auf dem Bild; beim Ueberfahren und beim Fokus
   eine feine Unterstreichung, beim Fokus dazu der Ring (Regel darunter). Kontrast gegen das Bild: Bericht Aufgabe 13. */
.ft-streifen__anker {
	pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 0 0 .16em; white-space: nowrap;
	background: none; border: 0; border-radius: 2px; box-shadow: none;
	font-family: var(--ft-anzeige); font-weight: 700; font-size: clamp(15px, 1.25vw, 19px); letter-spacing: .16em; text-transform: uppercase;
	text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: .35em;
	color: var(--ft-gold); text-shadow: 0 0 3px rgba(7, 16, 42, .95), 0 1px 10px rgba(7, 16, 42, .9), 0 0 22px rgba(7, 16, 42, .8);
}
.ft-streifen__anker:hover, .ft-streifen__anker:focus-visible { color: var(--ft-goldhell); text-decoration-line: underline; }
.ft-welt__marke:focus-visible, .ft-welt__anker:focus-visible, .ft-hinweis:focus-visible,
.ft-streifen__marke:focus-visible, .ft-streifen__anker:focus-visible { outline: 2px solid var(--ft-goldhell); outline-offset: 4px; }

/* Menuepunkte der Eingangswelt: kein Knopf, sondern Brandschrift auf dem Holz der Tafel und des Wegweisers.
   Alles Gemeinsame steht in dieser einen Klasse (Holzwirkung, Hover, Fokus); ein weiterer Anker braucht nur eigene
   Werte: --x/--y (Mitte des Bretts in Prozent der Flaeche), --bw (nutzbare Brettlaenge als Anteil der Flaechenbreite --w),
   --rot (Neigung), --fk (Schriftgroesse als Anteil der Brettlaenge; richtet sich nach der Textlaenge: 8 Zeichen ~ .24,
   12 Zeichen ~ .14) sowie optional --bh (Brettdicke), --ls (Sperrung), --wash (Aufheller auf dunklem Holz) und --nagel (Anteil der
   Brettlaenge links, der frei bleibt, etwa fuer Naegel; die Schrift rueckt in den Rest) und --rechts (Abstand rechts, schiebt die Schrift nach links, etwa vor Naegel am rechten Brettende). Die Klickflaeche ist das
   Brett (Breite --bw, Hoehe --bh, sonst 36 % der Breite), die Schrift waechst mit der Flaeche und kann so nirgends ueber den Brettrand laufen.
   Schrift: dunkles Braun mit leichtem Durchscheinen der Maserung und weichem Brandsaum; beim Ueberfahren oder
   Fokussieren glimmt sie wie Laternenlicht auf (nur mit ft-motion weich ueberblendet). */
.ft-welt__anker {
	pointer-events: auto; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 var(--rechts, 0px) 0 calc(var(--ls, .1em) + var(--w) * var(--bw) * var(--nagel, 0));
	width: calc(var(--w) * var(--bw)); height: calc(var(--w) * var(--bh, var(--bw) * .36)); rotate: var(--rot, 0deg);
	font-family: var(--ft-anzeige); font-weight: 700; font-size: calc(var(--w) * var(--bw) * var(--fk, .2)); line-height: 1.02; letter-spacing: var(--ls, .1em);
	text-align: center; text-decoration: none; white-space: normal; overflow-wrap: normal;
	color: rgba(24, 10, 3, .95); text-shadow: 0 0 1px rgba(20, 8, 2, .7), 0 0 6px rgba(50, 22, 6, .3);
	/* --wash: ein Hauch Laternenlicht auf dunklerem Holz (Wegweiser), damit die Schrift Kontrast behaelt; ohne Kante */
	background: radial-gradient(closest-side, rgba(255, 222, 168, var(--wash, 0)) 55%, rgba(255, 222, 168, 0)); border: 0; border-radius: 4px; box-shadow: none;
}
@property --wash { syntax: '<number>'; inherits: false; initial-value: 0; }
.ft-welt__anker:hover, .ft-welt__anker:focus-visible { --wash: .42; color: rgba(12, 4, 1, .98); text-shadow: 0 0 1px rgba(12, 4, 1, .8), 0 0 8px rgba(255, 238, 196, .85), 0 0 20px rgba(255, 205, 120, .6); }
.ft-motion .ft-welt__anker { transition: color .3s, text-shadow .3s, --wash .3s; }
.ft-welt__anker:focus-visible { outline: 3px solid var(--ft-creme); outline-offset: 3px; box-shadow: 0 0 0 8px rgba(7, 16, 42, .8); }

.ft-welt__gruss { width: min(92cqw, 960px); text-align: center; pointer-events: none; }
.ft-welt__zeile { margin: 0; font-family: var(--ft-anzeige); font-style: italic; font-weight: 500; font-size: clamp(21px, 2.6vw, 32px); color: var(--ft-creme); text-shadow: 0 0 3px rgba(7, 16, 42, .85), 0 2px 14px rgba(7, 16, 42, .95), 0 0 30px rgba(7, 16, 42, .7); }
.ft-welt__titel { margin: 4px 0 0; font-family: var(--ft-anzeige); font-weight: 600; font-size: clamp(40px, 7.4vw, 104px); line-height: 1; letter-spacing: .04em; color: var(--ft-goldhell); text-shadow: 0 0 4px rgba(7, 16, 42, .75), 0 2px 18px rgba(7, 16, 42, .9), 0 4px 40px rgba(7, 16, 42, .85); overflow-wrap: break-word; hyphens: auto; }

/* Ersatz ohne Bilddatei: Sterne, Mond, warmer Schein, Huegelkante und Gluehwuermchen */
.ft-szene { position: absolute; inset: 0; overflow: hidden; }
.ft-szene::before {
	content: ''; position: absolute; left: 79%; top: 15%; width: 5.5%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
	background: radial-gradient(circle at 38% 36%, #fffbe9, #f4e4b4 58%, #dcc488);
	box-shadow: 0 0 40px 10px rgba(244, 228, 180, .28), 0 0 140px 50px rgba(244, 228, 180, .12);
}
.ft-szene::after {
	content: ''; position: absolute; inset: 0;
	background:
		radial-gradient(ellipse 26% 11% at 6% 100%, #050b1a 97%, transparent 100%),
		radial-gradient(ellipse 34% 9% at 36% 102%, #050b1a 97%, transparent 100%),
		radial-gradient(ellipse 30% 12% at 68% 101%, #050b1a 97%, transparent 100%),
		radial-gradient(ellipse 24% 10% at 97% 100%, #050b1a 97%, transparent 100%),
		linear-gradient(180deg, rgba(7, 16, 42, .55), rgba(10, 18, 40, .15) 45%, rgba(10, 18, 40, .7));
}
.ft-szene__sterne::before {
	content: ''; position: absolute; inset: 0; opacity: .75;
	background:
		radial-gradient(1px 1px at 20px 30px, #fff, transparent) 0 0 / 170px 150px,
		radial-gradient(1px 1px at 90px 110px, #f3e9cf, transparent) 0 0 / 230px 190px,
		radial-gradient(1.5px 1.5px at 150px 60px, #fff, transparent) 0 0 / 310px 260px,
		radial-gradient(1px 1px at 60px 200px, #e9cf8f, transparent) 0 0 / 270px 330px;
	-webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 85%); mask-image: linear-gradient(180deg, #000 30%, transparent 85%);
}
.ft-szene__sterne {
	position: absolute; inset: 0;
	background:
		radial-gradient(2px 2px at 8% 14%, #fff, transparent), radial-gradient(1.5px 1.5px at 22% 36%, #f3e9cf, transparent),
		radial-gradient(2px 2px at 35% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 66% 12%, #fff, transparent),
		radial-gradient(2px 2px at 81% 30%, #f3e9cf, transparent), radial-gradient(1.5px 1.5px at 93% 10%, #fff, transparent),
		radial-gradient(2px 2px at 12% 62%, #e9cf8f, transparent), radial-gradient(2px 2px at 88% 66%, #e9cf8f, transparent),
		radial-gradient(1.5px 1.5px at 52% 70%, #e9cf8f, transparent), radial-gradient(1.5px 1.5px at 46% 26%, #fff, transparent);
}
.ft-szene__schein { position: absolute; inset: 0; background: radial-gradient(ellipse 620px 520px at 50% 52%, rgba(233, 207, 143, .30), transparent 70%); }
.ft-fliege { position: absolute; z-index: 1; width: 6px; height: 6px; border-radius: 50%; background: #f5dd9a; box-shadow: 0 0 14px 5px rgba(245, 221, 154, .7); opacity: .7; }
/* Funkeln, Atmen und Treiben nur mit Bewegung (ft-motion); ohne sie steht die Szene still und bleibt vollstaendig */
.ft-motion .ft-szene__sterne { animation: ft-funkeln 5s ease-in-out infinite; }
.ft-motion .ft-szene__schein { animation: ft-atmen 6s ease-in-out infinite; }
.ft-motion .ft-fliege { opacity: 0; animation: ft-treiben 9s ease-in-out infinite; }
@keyframes ft-funkeln { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes ft-atmen { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes ft-treiben { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 50% { transform: translate(28px, -46px); opacity: .5; } 85% { opacity: .9; } 100% { transform: translate(-14px, -96px); opacity: 0; } }

/* ---- Laternenlicht: flackernde Scheine und Gluehwuermchen ueber der Eingangswelt (Aufgabe 15) ------
   Vier Laternen im Bild (vermessen am Pixel, Flammenmitte als Prozent der Bildflaeche, je Ausrichtung): hoch links am
   Baum, die haengende am Ast ueber der Tafel, die rechts neben der Tafel (Seil) und die Laterne am Wegweiser. --g ist der
   Durchmesser des Scheins als Anteil der Flaechenbreite --w. Wird das Bild getauscht, sind diese Werte neu zu messen.
   Der Block liegt unter Marke, Schildern und Begruessung (z-index 2), ist nicht klickbar und gilt nur mit Bewegung: ohne
   ft-motion fehlt er ganz (kein Zusatzschein, keine Punkte). Animiert wird nur transform und opacity. */
.ft-licht { display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.ft-motion .ft-licht { display: block; }
.ft-laterne { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.ft-laterne--frei { --x: 0%; --y: 0%; }
.ft-laterne--1 { --x: 8.9%; --y: 9.5%; --g: .105; --f: 3.7s; --v: -1.2s; }
.ft-laterne--2 { --x: 28.3%; --y: 15.5%; --g: .09; --f: 4.6s; --v: -3.1s; }
.ft-laterne--3 { --x: 43%; --y: 31.7%; --g: .095; --f: 3.1s; --v: -0.6s; }
.ft-laterne--4 { --x: 84.6%; --y: 72%; --g: .115; --f: 5.3s; --v: -2.4s; }
.ft-laterne__schein {
	position: absolute; left: 0; top: 0; width: calc(var(--w) * var(--g)); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 214, 128, .5) 0, rgba(255, 178, 76, .26) 34%, rgba(255, 150, 50, .09) 62%, rgba(255, 150, 50, 0) 100%);
}
.ft-motion .ft-laterne__schein { animation: ft-flackern var(--f) ease-in-out var(--v) infinite; }
.ft-fliege--welt {
	left: 0; top: 0; z-index: auto; width: 5px; height: 5px; margin: calc(var(--w) * var(--qy)) 0 0 calc(var(--w) * var(--qx));
	box-shadow: 0 0 11px 4px rgba(245, 221, 154, .62);
}
.ft-motion .ft-fliege--welt { opacity: 0; animation: ft-schweben var(--d) ease-in-out var(--v) infinite, ft-leuchten var(--l) ease-in-out var(--v) infinite; }
@keyframes ft-flackern {
	0% { opacity: .88; transform: scale(1); } 9% { opacity: .98; transform: scale(1.03); } 17% { opacity: .8; transform: scale(.98); } 26% { opacity: .93; transform: scale(1.01); }
	34% { opacity: 1; transform: scale(1.04); } 45% { opacity: .78; transform: scale(.97); } 55% { opacity: .9; transform: scale(1); } 63% { opacity: .84; transform: scale(.98); }
	74% { opacity: .99; transform: scale(1.03); } 83% { opacity: .8; transform: scale(.97); } 92% { opacity: .95; transform: scale(1.02); } 100% { opacity: .88; transform: scale(1); }
}
@keyframes ft-schweben {
	0% { transform: translate(0, 0); } 22% { transform: translate(calc(var(--w) * var(--ax)), calc(var(--w) * var(--ay) * -.7)); } 47% { transform: translate(calc(var(--w) * var(--ax) * .3), calc(var(--w) * var(--ay))); }
	71% { transform: translate(calc(var(--w) * var(--ax) * -.9), calc(var(--w) * var(--ay) * .2)); } 100% { transform: translate(0, 0); }
}
@keyframes ft-leuchten { 0% { opacity: 0; } 18% { opacity: .95; } 42% { opacity: .35; } 64% { opacity: 1; } 86% { opacity: .25; } 100% { opacity: 0; } }
@media (orientation: portrait) {
	.ft-laterne--1 { --x: 17.4%; --y: 10.3%; --g: .2; }
	.ft-laterne--2 { --x: 25.7%; --y: 18.8%; --g: .14; }
	.ft-laterne--3 { --x: 11.1%; --y: 28.3%; --g: .1; }
	.ft-laterne--4 { --x: 91.7%; --y: 62.4%; --g: .165; }
	.ft-fliege--welt { margin: calc(var(--w) * var(--hy)) 0 0 calc(var(--w) * var(--hx)); }
}

/* Hinweis "Zu den Büchern": unten in der Eingangswelt unter Katze und Buch (dort ist das Bild schon abgedunkelt), mit
   Abstand zur Unterkante, damit er zur Welt gehoert und nicht auf der Naht zum Regal schwebt (Stefan, 28.10.2026). */
.ft-hinweis {
	position: absolute; left: 0; right: 0; bottom: clamp(30px, 4.5svh, 44px); z-index: 4; width: max-content; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px;
	font-family: var(--ft-anzeige); font-size: 18px; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; text-align: center; color: var(--ft-goldhell);
	text-shadow: 0 0 3px rgba(7, 16, 42, .9), 0 0 10px rgba(7, 16, 42, .95), 0 2px 16px rgba(7, 16, 42, .9);
}
.ft-hinweis span { padding: .6em 2em; background: radial-gradient(closest-side, rgba(7, 16, 42, .88) 45%, rgba(7, 16, 42, 0)); } /* dunkler Grund hinter der Schrift: darunter liegen helle Blumen und Steine */
.ft-hinweis:hover { color: #fff; }
.ft-hinweis i { width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.ft-motion .ft-hinweis i { animation: ft-nicken 1.8s ease-in-out infinite; }
@keyframes ft-nicken { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(7px) rotate(45deg); } }

/* Cover und Ersatzflaeche (auch Regal und Buchseite) */
.ft-coverbild { display: block; width: 100%; height: 100%; object-fit: cover; }
.ft-coverbild--leer { display: grid; place-items: center; box-sizing: border-box; padding: 12%; text-align: center; background: linear-gradient(160deg, #1a2a5c, #0d1730); border: 8px solid #0d1730; outline: 1.5px solid var(--ft-gold); outline-offset: -14px; color: var(--ft-creme); font-family: var(--ft-anzeige); font-weight: 700; font-size: clamp(18px, 2.6vw, 28px); line-height: 1.15; }

/* Stempel fuer noch nicht freigegebene Texte und Cover */
.ft-entwurf {
	align-self: flex-start; display: inline-block; margin-top: 4cqi; padding: .25em .7em; border: 2px solid currentColor; border-radius: 3px; rotate: -3deg;
	font-family: var(--ft-text); font-weight: 700; font-size: clamp(11px, 2.9cqi, 14px); line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; color: #9b2d20;
}

/* Band "Erscheint bald" fuer Buecher, die noch nicht erschienen sind: ein goldenes Lesebaendchen mit Schwalbenschwanz
   und gestepptem Saum, waagrecht am unteren Rand des Covers - bewusst anders als der rote, schraege Stempel "Entwurf"
   oben rechts. Auf der Karte beginnt es an der Kante, auf der Buchseite ragt es ein Stueck ueber das Cover hinaus. */
.ft-bald {
	position: absolute; z-index: 1; left: 0; bottom: 9%; box-sizing: border-box; padding: .5em 1.7em .5em .9em; white-space: nowrap;
	font-family: var(--ft-anzeige); font-weight: 700; font-size: clamp(14px, 1.5vw, 20px); line-height: 1.1; letter-spacing: .08em; color: var(--ft-tinte);
	background: linear-gradient(180deg, var(--ft-goldhell), var(--ft-gold) 55%, #c9a24f);
	clip-path: polygon(0 0, 100% 0, calc(100% - .9em) 50%, 100% 100%, 0 100%);
}
.ft-bald::before { content: ''; position: absolute; inset: .22em 1.1em .22em 0; border-block: 1px dashed rgba(23, 35, 74, .45); pointer-events: none; }

/* Rueckwand aus Holz fuer Startseite und "Weitere Märchen" (Stefan, 28.10.2026): Holztextur von Nele (--ft-holz-rueckwand,
   sonst ein tiefbrauner Verlauf), an den Seiten eine leichte Vignette, damit der Blick in die Mitte zu den Buechern geht.
   Auf den Abschnitten selbst definiert, nicht in :root: nur dort ist --ft-holz-rueckwand gesetzt (Inline-Stil). */
.ft-raster, .ft-regal {
	--ft-wand:
		linear-gradient(90deg, rgba(8, 5, 2, .62), rgba(8, 5, 2, 0) 22%, rgba(8, 5, 2, 0) 78%, rgba(8, 5, 2, .62)),
		var(--ft-holz-rueckwand, none) 0 0 / 512px 512px repeat,
		linear-gradient(180deg, #2b1a0d, #140c06 60%);
	--ft-holz: var(--ft-holz-brett, none) 0 0 / auto 100% repeat-x, linear-gradient(180deg, #b47d46 0%, #8c5b2f 22%, #6b4220 70%, #4a2c14 100%);
}

/* ---- Regal der Startseite (#buecher): warmer Grund, Regalkrone, Rueckwand, Karten ------------------------------------ */
/* Uebergang vom Bild zum Regal (Stefan: "ein schoener Uebergang"; seit "A: Wald weg" ohne Waldband dazwischen):
     1. unter der Naht liegt der warme Grundton der Rueckwand (#140c06, .ft-raster__grund): das Eingangsbild blendet mit
        seiner Maske weich hinein, es dunkelt warm ab statt in ein zweites Bild zu laufen;
     2. knapp unter der Unterkante der Welt (--uebergang) liegt die Regalkrone: ein breites Brett aus holz-brett.webp,
        darunter eine weiche Schattenkante, dann die Ueberschrift "Die neuesten Märchen" vor der Rueckwand;
     3. ein warmer, sehr weicher Lichtschein faellt von oben auf die Krone, wie Laternenlicht aus der Welt (statisch).
   Mit Bewegung beginnt der Abschnitt um die Naht (--naht) frueher, siehe unten. Alles scrollt mit, nichts haftet;
   overflow: clip haelt Licht und Brettueberstand im Abschnitt (die Fusszeile bleibt frei). */
.ft-raster {
	--naht: 0px; --naht-p: 0px;
	--uebergang: clamp(28px, 5svh, 56px); --krone: clamp(30px, 3.2vw, 46px); --ft-raster-oben: clamp(28px, 3.6vw, 52px);
	position: relative; overflow: hidden; overflow: clip; container-type: inline-size;
	padding: calc(var(--naht-p) + var(--uebergang) + var(--krone) + var(--ft-raster-oben)) 0 clamp(72px, 10vw, 130px); /* seitlich kein Rand: 100cqw ist so die ganze Breite wie in der Welt */
	background: var(--ft-wand); background-color: #140c06;
}
.ft-raster__grund { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--naht) + var(--uebergang) + 2px); pointer-events: none; background: #140c06; }
.ft-raster__krone {
	position: absolute; left: 0; right: 0; top: calc(var(--naht) + var(--uebergang)); height: var(--krone); pointer-events: none;
	background: var(--ft-holz);
	box-shadow: inset 0 2px 0 rgba(255, 226, 170, .38), inset 0 -4px 0 rgba(0, 0, 0, .42), 0 5px 0 rgba(12, 7, 3, .55);
}
.ft-raster__krone::before { /* Lichtschein von oben auf die Krone */
	content: ''; position: absolute; left: 50%; bottom: 30%; width: min(1180px, 120%); height: clamp(150px, 26svh, 280px); translate: -50% 0;
	background: radial-gradient(ellipse 50% 62% at 50% 100%, rgba(255, 196, 120, .3), rgba(255, 170, 90, .1) 46%, rgba(255, 170, 90, 0) 74%);
}
.ft-raster__krone::after { /* Schattenkante: das Regal beginnt unter der Krone */
	content: ''; position: absolute; left: 0; right: 0; top: calc(100% + 5px); height: clamp(110px, 14svh, 170px);
	background: linear-gradient(180deg, rgba(10, 6, 3, .9), rgba(10, 6, 3, .5) 42%, rgba(10, 6, 3, 0));
}
.ft-raster__innen { position: relative; z-index: 1; box-sizing: content-box; max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
/* Naht zur Eingangswelt (nur mit Bewegung): Das Regal beginnt um 20 % der Bildhoehe VOR der Unterkante der Welt. In diesem
   Streifen liegt der warme Grund unter dem ausblendenden Eingangsbild (.ft-welt liegt darueber).
   --naht-p in Prozent der Seitenbreite (fuer Rand und Innenabstand des Abschnitts), --naht in cqw fuer die Ebenen darin:
   Querformat 20 % von 2/3 der Breite, mindestens 20 svh; Hochformat 30 % der Breite, auf hohen Handys hoechstens 128 %.
   Der Sprung "#buecher" landet am Ende der Naht: Krone und Ueberschrift stehen dann oben im Bild. */
.ft-haupt > .ft-raster {
	--naht: calc(.1333 * max(100cqw, 150svh)); --naht-p: calc(.1333 * max(100%, 150svh));
	margin-top: calc(-1 * var(--naht-p)) !important; scroll-margin-top: calc(-.1333 * max(100vw, 150svh));
}
@media (orientation: portrait) {
	.ft-haupt > .ft-raster {
		--naht: calc(.3 * max(100cqw, min(72svh, 128cqw))); --naht-p: calc(.3 * max(100%, min(72svh, 128%)));
		scroll-margin-top: calc(-.3 * max(100vw, min(72svh, 128vw)));
	}
}
.ft-raster__kopf, .ft-regal__kopf { text-align: center; }
.ft-raster__titel, .ft-regal__titel {
	margin: 0; font-family: var(--ft-anzeige); font-weight: 600; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.1; letter-spacing: .02em; color: var(--ft-goldhell);
	text-shadow: 0 0 4px rgba(10, 6, 3, .85), 0 2px 18px rgba(10, 6, 3, .95), 0 0 40px rgba(10, 6, 3, .8); overflow-wrap: break-word; hyphens: auto;
}
.ft-regal__titel { font-size: clamp(40px, 6vw, 70px); color: var(--ft-creme); }
/* Ziertrenner wie in den Entwuerfen: feine Linie, in der Mitte ein vierzackiger Stern (Inline-SVG in fatathe_zier()) */
.ft-zier { display: flex; align-items: center; justify-content: center; gap: 14px; width: min(360px, 72%); margin: 16px auto 0; color: var(--ft-gold); }
.ft-zier__linie { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(226, 191, 106, 0), currentColor); }
.ft-zier__linie:last-child { background: linear-gradient(270deg, rgba(226, 191, 106, 0), currentColor); }
.ft-zier__stern { flex: none; filter: drop-shadow(0 0 6px rgba(233, 207, 143, .55)); }
/* Knopf "Alle Bücher ansehen" unter den drei neuesten Buechern der Startseite (zur Uebersicht /buecher/) */
.ft-raster__alle, .ft-blog__alle { margin: clamp(40px, 5.5vw, 64px) 0 0; text-align: center; }
.ft-raster__knopf {
	display: inline-flex; align-items: center; gap: .5em; min-height: 52px; padding: 0 30px;
	border: 1.5px solid var(--ft-gold); border-radius: 2px; background: rgba(16, 10, 5, .82); box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
	font-family: var(--ft-anzeige); font-weight: 700; font-size: clamp(19px, 1.6vw, 22px); letter-spacing: .04em; text-decoration: none; color: var(--ft-goldhell);
}
.ft-raster__knopf::after { content: '\2192'; }
.ft-raster__knopf:hover, .ft-raster__knopf:focus-visible { background: var(--ft-gold); color: #140c06; }
.ft-raster__knopf:focus-visible { outline: 3px solid var(--ft-goldhell); outline-offset: 3px; }
/* "Aus dem Blog": der Block liegt ueber die ganze Breite des Regals. Die Holzrueckwand laeuft oben in einer weichen S-Kurve in ein
   ruhiges Nachtblau aus (keine Kante), unten trifft es genau den Ton der Fusszeile. Ohne Beitraege fehlt der Block ganz. */
.ft-raster--blog { padding-bottom: 0; }
.ft-blog {
	margin-top: clamp(48px, 7vw, 96px); padding: clamp(110px, 12vw, 170px) 0 clamp(72px, 10vw, 130px);
	background: linear-gradient(180deg, rgba(10, 18, 40, 0) 0, rgba(10, 18, 40, .1) 7%, rgba(10, 18, 40, .35) 14%, rgba(10, 18, 40, .65) 21%, rgba(10, 18, 40, .9) 28%, var(--ft-nacht) 34%, var(--ft-nacht));
}

/* Blogkarten (Startseite und Uebersicht /blog/): wie die Buchkarten ein dunkles Schild mit feiner Goldkante, oben das Bild
   (ohne Bild ein ruhiger Kartenkopf mit Stern), darunter Datum und Kategorie, Titel, Auszug, "Weiterlesen". Ein Link je Karte:
   auf dem Titel, seine Klickflaeche ist die ganze Karte. Eine Spalte, ab 1024 px zwei; der neueste Beitrag (--gross) geht
   ueber die volle Breite, ab 760 px mit dem Bild links. Auf der Startseite (--start) drei Spalten ab 1024 px. */
.ft-bkarten { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 36px); margin: clamp(32px, 4.5vw, 56px) auto 0; padding: 0; max-width: 1120px; }
.ft-bkarte { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 6px; background: #101b44; color: var(--ft-creme); box-shadow: 0 0 0 1px rgba(226, 191, 106, .38), 0 18px 34px rgba(0, 0, 0, .4); }
.ft-bkarte__bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(160deg, #1a2a5c, #0d1730); }
.ft-bkarte__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ft-bkarte__bild--leer { display: grid; place-items: center; color: var(--ft-gold); background: radial-gradient(ellipse 70% 80% at 50% 45%, rgba(233, 207, 143, .16), transparent 70%), linear-gradient(160deg, #1a2a5c, #0d1730); }
.ft-bkarte__bild--leer svg { filter: drop-shadow(0 0 8px rgba(233, 207, 143, .6)); }
.ft-bkarte__text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px clamp(18px, 2vw, 26px) 22px; }
.ft-bkarte__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0; font-size: 16px; line-height: 1.4; color: var(--ft-gold); }
.ft-bkarte__kat { font-family: var(--ft-anzeige); font-weight: 700; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; }
.ft-bkarte__titel { margin: 0; font-family: var(--ft-anzeige); font-weight: 700; font-size: clamp(25px, 2.3vw, 32px); line-height: 1.12; color: var(--ft-goldhell); overflow-wrap: break-word; hyphens: auto; }
.ft-bkarte__link { color: inherit; text-decoration: none; }
.ft-bkarte__link::after { content: ''; position: absolute; z-index: 3; inset: 0; border-radius: 6px; }
.ft-bkarte__link:focus-visible { outline: none; }
.ft-bkarte__link:focus-visible::after { outline: 3px solid var(--ft-goldhell); outline-offset: -3px; }
.ft-bkarte:hover .ft-bkarte__titel { color: #fff; }
.ft-bkarte__auszug { margin: 0; font-size: 17px; line-height: 1.55; color: #ebe2ca; hyphens: auto; }
.ft-bkarte__mehr { display: inline-flex; align-items: center; gap: .45em; min-height: 40px; margin-top: auto; padding: 0 1.1em; border: 1.5px solid var(--ft-gold); border-radius: 2px; font-size: 16px; color: var(--ft-creme); }
.ft-bkarte__mehr::after { content: '\2192'; }
.ft-bkarte__auszug + .ft-bkarte__mehr { margin-top: 8px; }
.ft-bkarte:hover .ft-bkarte__mehr, .ft-bkarte:focus-within .ft-bkarte__mehr { background: var(--ft-gold); color: #140c06; }
.ft-motion .ft-bkarte__mehr { transition: background .25s, color .25s; }
.ft-motion .ft-bkarte__img { transition: transform .5s var(--ft-ease); }
.ft-motion .ft-bkarte:hover .ft-bkarte__img { transform: scale(1.04); }
@media (min-width: 760px) {
	.ft-bkarte--gross { flex-direction: row; }
	.ft-bkarte--gross .ft-bkarte__bild { flex: 0 0 55%; aspect-ratio: auto; min-height: 320px; }
	.ft-bkarte--gross .ft-bkarte__text { justify-content: center; padding: clamp(24px, 3vw, 44px); gap: 12px; }
	.ft-bkarte--gross .ft-bkarte__titel { font-size: clamp(32px, 3.4vw, 46px); }
	.ft-bkarte--gross .ft-bkarte__auszug { font-size: 19px; }
	.ft-bkarte--gross .ft-bkarte__mehr { margin-top: 12px; }
}
@media (min-width: 1024px) {
	.ft-bkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ft-bkarte--gross { grid-column: 1 / -1; }
	.ft-bkarten--start { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) { .ft-bkarten--start { max-width: 640px; } }

/* ---- Blog-Uebersicht (templates/home.html): Nachtblau unter dem Kopfbild, Titel wie ein Regalschild ---- */
.ft-haupt--blog { background: var(--ft-nacht); }
.ft-blogseite { padding: clamp(20px, 3vw, 40px) clamp(16px, 4vw, 40px) clamp(64px, 9vw, 120px); }
.ft-blogseite__innen { max-width: 1120px; margin: 0 auto; }
.ft-blogseite__kopf { text-align: center; }
.ft-blogseite__titel { margin: 0; font-family: var(--ft-anzeige); font-weight: 600; font-size: clamp(44px, 6.4vw, 80px); line-height: 1.05; letter-spacing: .02em; color: var(--ft-goldhell); text-shadow: 0 2px 18px rgba(10, 18, 40, .9); overflow-wrap: break-word; hyphens: auto; }
.ft-blogseite__zeile { margin: 16px 0 0; font-family: var(--ft-anzeige); font-style: italic; font-size: clamp(21px, 2.2vw, 28px); color: var(--ft-creme); }
.ft-blogseite__leer { margin: clamp(36px, 5vw, 64px) 0 0; text-align: center; font-family: var(--ft-anzeige); font-style: italic; font-size: clamp(21px, 2.2vw, 26px); color: var(--ft-creme); }
.ft-blogseite__blaettern { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: clamp(32px, 4vw, 52px); font-family: var(--ft-anzeige); font-size: 21px; font-weight: 600; letter-spacing: .04em; }
.ft-blogseite__neuer::before { content: '\2190\00a0'; }
.ft-blogseite__aelter { margin-left: auto; }
.ft-blogseite__aelter::after { content: '\00a0\2192'; }
.ft-blogseite__blaettern a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ft-goldhell); text-underline-offset: .25em; }
.ft-blogseite__blaettern a:hover, .ft-blogseite__blaettern a:focus-visible { color: #fff; }
.ft-blogseite__blaettern a:focus-visible { outline: 2px solid var(--ft-goldhell); outline-offset: 4px; }

/* ---- Einzelbeitrag (templates/single.html): Blatt Papier wie die Seiten, Bilder und Galerien im ruhigen Raster ---- */
.ft-beitrag__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin: -8px 0 28px; font-size: 18px; color: #4a4f6a; }
.ft-beitrag__kat { font-family: var(--ft-anzeige); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ft-golddunkel); }
.ft-beitrag__inhalt > :first-child { margin-top: 0; }
.ft-beitrag__inhalt p, .ft-beitrag__inhalt li { hyphens: auto; }
.ft-beitrag__inhalt img { max-width: 100%; height: auto; border-radius: 6px; }
.ft-beitrag__inhalt .wp-block-image, .ft-beitrag__inhalt .wp-block-gallery { margin: 1.6em 0; }
.ft-beitrag__inhalt .wp-block-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ft-beitrag__inhalt .wp-block-gallery.has-nested-images figure.wp-block-image:not(#einzelbild) { width: auto; flex: none; margin: 0; } /* gegen die Breiten der Kernstile */
.ft-beitrag__inhalt .wp-block-gallery .wp-block-image img { display: block; }
.ft-beitrag__inhalt .wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; border-radius: 8px; }
@media (min-width: 640px) { .ft-beitrag__inhalt .wp-block-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ft-beitrag__inhalt .wp-block-gallery.columns-3, .ft-beitrag__inhalt .wp-block-gallery.columns-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ft-beitrag__inhalt figcaption { margin-top: 6px; font-size: 16px; font-style: italic; color: #4a4f6a; }
.ft-beitrag__inhalt iframe, .ft-beitrag__inhalt video { max-width: 100%; }
.ft-beitrag__zurueck { margin: 2.4em 0 0; font-family: var(--ft-anzeige); font-size: 21px; font-weight: 600; }
.ft-beitrag__zurueck a { display: inline-flex; align-items: center; min-height: 44px; }
.ft-beitrag__zurueck a::before { content: '\2190\00a0'; }
.ft-beitrag__zurueck a:focus-visible { outline: 2px solid var(--ft-tinte); outline-offset: 4px; }

/* Karten: 3 Spalten ab 1024 px, 2 ab 640 px, darunter 1. Jedes Buch steht als plastisches Cover (Buchruecken links,
   Seitenschnitt rechts, Schatten, leichte Perspektive) auf einem Brett aus Holz (--ft-holz-brett von Nele, sonst ein
   Verlauf in Holzbraun). Die Brettstuecke der Karten reichen je um den halben Spalt nach aussen und schliessen so zu
   einem Brett je Reihe zusammen; an den Reihenenden stehen sie --ueber vor, in einer unvollstaendigen letzten Reihe
   reicht das letzte Stueck bis an den rechten Rand (Spaltenbreite aus 100cqw der Liste). Darunter Titel, Buehnenzeile,
   Kurzzeile und "Zum Buch" in Creme auf einem warm dunklen Schild (mindestens 4,5:1 auf jedem Grund). */
.ft-karten {
	--spalt: clamp(28px, 4vw, 48px); --brett: clamp(18px, 1.8vw, 24px); --ueber: 14px;
	list-style: none; margin: clamp(36px, 5vw, 64px) auto 0; padding: 0; max-width: 1120px; container-type: inline-size;
	display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(44px, 5vw, 64px) var(--spalt); align-items: start;
}
.ft-karte { position: relative; display: flex; flex-direction: column; min-width: 0; text-align: center; color: var(--ft-creme); }
.ft-karte__fach { position: relative; display: flex; justify-content: center; align-items: flex-end; padding: 0 0 var(--brett); }
.ft-karte__buch { position: relative; z-index: 1; width: min(64%, 236px); margin-bottom: -3px; }
.ft-motion .ft-karte__buch { transition: transform .35s var(--ft-ease); }
.ft-motion .ft-karte:hover .ft-karte__buch, .ft-motion .ft-karte:focus-within .ft-karte__buch { transform: translateY(-8px); }
.ft-karte__buch::after { /* Seitenschnitt rechts hinter dem Deckel */
	content: ''; position: absolute; z-index: -1; top: 2.5%; bottom: 1%; right: -4%; width: 7%; border-radius: 0 3px 3px 0;
	background: repeating-linear-gradient(180deg, #f1e7cd 0 2px, #d6c6a0 2px 3px); box-shadow: 4px 6px 12px rgba(0, 0, 0, .45);
}
.ft-karte__deckel {
	position: relative; aspect-ratio: 2 / 3; overflow: hidden; container-type: inline-size; border-radius: 2px 5px 5px 2px; background: var(--ft-grund);
	transform: perspective(1100px) rotateY(-8deg); transform-origin: 0 50%;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 10px 14px 24px rgba(0, 0, 0, .55), 2px 3px 6px rgba(0, 0, 0, .4);
}
.ft-karte__deckel::before { /* Buchruecken */
	content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 8%; pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(255, 255, 255, .16) 45%, rgba(0, 0, 0, .3) 75%, rgba(0, 0, 0, 0));
}
.ft-karte__deckel::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(105deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 42%); }
.ft-karte__deckel .ft-coverbild--leer {
	border: 0; padding: 14%; outline: 1.5px solid var(--ft-farbe); outline-offset: -7cqi; color: var(--ft-farbe); font-size: clamp(18px, 10cqi, 30px); overflow-wrap: break-word; hyphens: auto;
	background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(255, 255, 255, .07), transparent 70%), var(--ft-grund);
}
.ft-karte__deckel .ft-entwurf { position: absolute; top: 6%; right: 6%; z-index: 2; margin: 0; font-size: clamp(10px, 6cqi, 13px); background: rgba(243, 233, 207, .94); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.ft-karte__deckel .ft-bald { z-index: 2; bottom: 8%; font-size: clamp(11px, 7cqi, 16px); }
.ft-karte__brett {
	position: absolute; bottom: 0; left: calc(-1 * var(--ueber)); right: calc(-1 * var(--ueber)); height: var(--brett); border-radius: 2px;
	background: var(--ft-holz);
	box-shadow: inset 0 2px 0 rgba(255, 226, 170, .3), inset 0 -3px 0 rgba(0, 0, 0, .35), 0 16px 24px rgba(0, 0, 0, .55);
}
.ft-karte__text { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 18px 0 0; padding: 16px clamp(14px, 1.6vw, 20px) 18px; border-radius: 4px; background: rgba(16, 10, 5, .8); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ft-farbe) 30%, transparent); }
.ft-karte__titel { margin: 0; font-family: var(--ft-anzeige); font-weight: 700; font-size: clamp(21px, 2vw, 25px); line-height: 1.15; color: var(--ft-goldhell); overflow-wrap: break-word; hyphens: auto; }
.ft-karte__titel::after { content: ''; display: block; width: 46px; height: 2px; margin: 10px auto 0; background: var(--ft-farbe); } /* Buchfarbe als feiner Akzent */
.ft-karte__link { color: inherit; text-decoration: none; }
.ft-karte__link::after { content: ''; position: absolute; z-index: 3; inset: 0; border-radius: 6px; } /* die ganze Karte ist die Klickflaeche */
.ft-karte__link:focus-visible { outline: none; }
.ft-karte__link:focus-visible::after { outline: 3px solid var(--ft-goldhell); outline-offset: 6px; }
.ft-karte:hover .ft-karte__titel { color: #fff; }
.ft-karte__buehne { margin: 0; font-family: var(--ft-anzeige); font-style: italic; font-weight: 600; font-size: 17px; letter-spacing: .03em; color: #dcd2b8; }
.ft-karte__kurz { margin: 0; font-size: 16px; line-height: 1.5; color: #ebe2ca; hyphens: auto; }
.ft-karte__knopf { display: inline-flex; align-items: center; gap: .45em; min-height: 40px; margin-top: 6px; padding: 0 1.1em; border: 1.5px solid var(--ft-farbe); border-radius: 2px; font-size: 16px; color: var(--ft-creme); }
.ft-karte__knopf::after { content: '\2192'; }
.ft-karte:hover .ft-karte__knopf, .ft-karte:focus-within .ft-karte__knopf { background: var(--ft-farbe); color: var(--ft-grund); }
/* Brettenden je Spaltenzahl (eine Spalte: jedes Brett steht an beiden Enden vor): erstes Buch einer Reihe steht links
   vor, letztes rechts; die letzte, unvollstaendige Reihe bekommt das Brett bis an den rechten Rand. */
@media (min-width: 640px) {
	.ft-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ft-karte .ft-karte__brett { left: calc(var(--spalt) / -2); right: calc(var(--spalt) / -2); }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
	.ft-karte:nth-child(2n + 1) .ft-karte__brett { left: calc(-1 * var(--ueber)); }
	.ft-karte:nth-child(2n) .ft-karte__brett { right: calc(-1 * var(--ueber)); }
	.ft-karte:nth-child(2n + 1):last-child .ft-karte__brett { right: calc(-1 * ((100cqw - var(--spalt)) / 2 + var(--spalt)) - var(--ueber)); }
}
@media (min-width: 1024px) {
	.ft-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ft-karte:nth-child(3n + 1) .ft-karte__brett { left: calc(-1 * var(--ueber)); }
	.ft-karte:nth-child(3n) .ft-karte__brett { right: calc(-1 * var(--ueber)); }
	.ft-karte:nth-child(3n + 1):last-child .ft-karte__brett { right: calc(-2 * ((100cqw - 2 * var(--spalt)) / 3 + var(--spalt)) - var(--ueber)); }
	.ft-karte:nth-child(3n + 2):last-child .ft-karte__brett { right: calc(-1 * ((100cqw - 2 * var(--spalt)) / 3 + var(--spalt)) - var(--ueber)); }
}

/* ---- Bildstreifen der Unterseiten: Bild, darueber Marke und Hauptmenue ------------- */
/* Kein Balken und nichts, was haftet: Der Streifen steht im Fluss der Seite und scrollt mit ihr weg.
   Das Bild deckt die Flaeche (cover). Ohne Bilddatei steht die gezeichnete Ersatzszene der Startseite, auf
   Buchseiten vor der Grundfarbe des Buchs. Oben ein Schatten fuer die Lesbarkeit der Links, unten laeuft das Bild ueber 42 %
   der Hoehe weich in genau den Ton der Seite darunter aus (--ft-unten; Stefan, 28.10.2026: "soll langsam in den einfarbigen
   Bereich uebergehen"). Hoehe 40svh, auf Buchseiten 42svh (Ueberschrift bei 1440 x 900 noch im ersten Bildschirm). */
.ft-streifen {
	--ft-unten: var(--ft-nacht);
	position: relative; isolation: isolate; overflow: hidden; height: 40vh; height: 40svh; min-height: 260px;
	background: linear-gradient(180deg, #07102a 0%, var(--ft-tief) 70%, #1d2f66 100%);
}
.ft-streifen--blog { height: 42vh; height: 42svh; min-height: 300px; } /* Kopfbild des Blogs (Beitragsbild der Seite Blog bzw. des Beitrags) */
.ft-streifen--buch { --ft-unten: var(--ft-grund); height: 42vh; height: 42svh; min-height: 300px; background: var(--ft-grund); }
.ft-streifen__bild, .ft-streifen__bild img { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* Anschlussbild des Waldes auf den Unterseiten ohne eigenes Bild: Ausschnitt mit dem ganzen Haeuschen (Fenster, Laternen,
   Tuer) im dunklen Wald, nicht der helle Weg mit Steinen und Blumen. Breite Streifen zeigen nur gut ein Drittel der
   Bildhoehe, darum liegt der Ausschnitt dort tiefer (Fenster und Laternen im freien Band zwischen Menue und Auslauf);
   im Hochformat zeigt wald-quer fast die ganze Hoehe, auf hohen Handys steht wald-hoch (Quelle: inc/blocks.php). */
picture.ft-streifen__bild img { z-index: auto; object-position: 50% 36%; }
@media (orientation: portrait) { picture.ft-streifen__bild img { object-position: 50% 20%; } }
@media (max-aspect-ratio: 3/5) { picture.ft-streifen__bild img { object-position: 50% 55%; } }
.ft-streifen .ft-szene { z-index: -1; }
.ft-streifen .ft-szene::before { left: 82%; top: 62%; width: clamp(34px, 3.4vw, 54px); } /* Mond unter dem Menue, nicht dahinter */
.ft-streifen::before, .ft-streifen::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; }
.ft-streifen::before { top: 0; height: min(220px, 80%); background: linear-gradient(180deg, rgba(7, 16, 42, .95), rgba(7, 16, 42, .84) 45%, rgba(7, 16, 42, 0)); } /* traegt die Lesbarkeit des Menues als reine Schrift */
/* Buchseiten: die Kopfbilder sind oft hell. Der Schein haengt dort am Menue selbst und bleibt bis zu dessen Unterkante
   dicht, ob es in einer, zwei oder drei Zeilen steht; darunter laeuft er ueber --ft-auslauf aus (Messung Aufgabe 13). */
.ft-streifen--buch::before { content: none; }
.ft-streifen--buch .ft-streifen__menue::before {
	--ft-auslauf: 120px;
	content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: calc(-1 * var(--ft-auslauf)); pointer-events: none;
	background: linear-gradient(180deg, color-mix(in srgb, var(--ft-grund) 95%, transparent), color-mix(in srgb, var(--ft-grund) 90%, transparent) calc(100% - var(--ft-auslauf)), transparent);
}
/* Auslauf in Stufen einer weichen S-Kurve (3t^2 - 2t^3): ohne Knick oben und unten, also keine sichtbare Unterkante */
.ft-streifen::after { bottom: 0; height: 42%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ft-unten) 10.4%, transparent) 20%, color-mix(in srgb, var(--ft-unten) 35.2%, transparent) 40%, color-mix(in srgb, var(--ft-unten) 64.8%, transparent) 60%, color-mix(in srgb, var(--ft-unten) 89.6%, transparent) 80%, var(--ft-unten)); }
/* Uebersicht /buecher/: darunter beginnt das Regal mit seiner Krone vor der Rueckwand, der Streifen laeuft in deren Grundton aus */
.post-type-archive-buch .ft-streifen { --ft-unten: #140c06; }
.ft-streifen__menue {
	position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px;
	padding: clamp(14px, 2.2vw, 26px) clamp(16px, 4vw, 48px);
}
.ft-streifen__marke { font-size: clamp(22px, 2vw, 30px); }
.ft-streifen__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(18px, 2.4vw, 34px); }

/* ---- Buchseite: in den Farben des Buchs --------------------------------------------- */
/* --ft-farbe (hell) und --ft-grund (dunkel) kommen je Buch aus fatathe_buch_daten(); Text in Creme auf der
   Grundfarbe, Titel und Knoepfe in der Akzentfarbe (beide Paare in Aufgabe 4 auf Kontrast geprueft).
   Das Cover liegt halb auf dem Kopfbild. */
.ft-buchseite {
	position: relative; z-index: 2; color: var(--ft-creme); padding: 0 clamp(20px, 5vw, 48px) clamp(64px, 9vw, 120px);
	background: var(--ft-grund);
	background: linear-gradient(180deg, var(--ft-grund), transparent 200px), radial-gradient(ellipse 70% 60% at 22% 0%, color-mix(in srgb, var(--ft-farbe) 13%, transparent), transparent 72%), var(--ft-grund);
} /* oben genau der Grundton, in den der Streifen auslaeuft (keine Kante); der Goldschein setzt erst darunter ein */
.ft-buchseite__innen { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(220px, 380px) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.ft-buchseite__cover { position: relative; margin-top: calc(-1 * clamp(110px, 15vw, 230px)); perspective: 1300px; }
.ft-buchseite__cover .ft-coverbild {
	height: auto; aspect-ratio: 2 / 3; border-radius: 3px 8px 8px 3px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .16);
}
.ft-buchseite__cover .ft-coverbild--leer {
	border: 0; outline: 1.5px solid var(--ft-farbe); outline-offset: -16px; color: var(--ft-farbe); overflow-wrap: break-word; hyphens: auto;
	background: var(--ft-grund); background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(255, 255, 255, .09), transparent 70%), color-mix(in srgb, var(--ft-grund) 88%, #fff);
}
.ft-buchseite__cover .ft-entwurf { position: absolute; top: 5%; right: 5%; z-index: 1; margin: 0; }
.ft-buchseite__text { padding-top: clamp(28px, 4.5vw, 64px); min-width: 0; }
.ft-buchseite__titel { margin: 0; font-family: var(--ft-anzeige); font-weight: 700; font-size: clamp(36px, 5.2vw, 68px); line-height: 1.05; color: var(--ft-farbe); overflow-wrap: break-word; hyphens: auto; }
.ft-buchseite__titel::after { content: ''; display: block; width: 72px; height: 2px; margin-top: 18px; background: currentColor; opacity: .75; }
.ft-buchseite__untertitel { margin: 16px 0 24px; font-family: var(--ft-anzeige); font-style: italic; font-size: clamp(20px, 2.2vw, 26px); color: var(--ft-creme); color: color-mix(in srgb, var(--ft-creme) 72%, var(--ft-farbe)); }
.ft-buchseite__buehne { max-width: 40em; margin: -8px 0 24px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--ft-creme); color: color-mix(in srgb, var(--ft-creme) 86%, var(--ft-farbe)); }
.ft-buchseite__buehne a { display: inline-block; white-space: nowrap; color: var(--ft-farbe); text-decoration-thickness: 1px; } /* bricht als Ganzes um */
.ft-buchseite__buehne a:hover { color: var(--ft-creme); }
.ft-buchseite__buehne a:focus-visible { outline: 2px solid var(--ft-creme); outline-offset: 3px; }
.ft-buchseite__cover .ft-bald { left: -12px; bottom: 8%; }
.ft-buchseite__bald { margin: 34px 0 0; font-family: var(--ft-anzeige); font-style: italic; font-size: clamp(20px, 1.8vw, 24px); color: var(--ft-farbe); }
.ft-buchseite__stempel { margin: 0 0 16px; line-height: 1; }
.ft-buchseite .ft-entwurf { margin: 0; font-size: 13px; background: rgba(243, 233, 207, .94); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.ft-buchseite__kurz { max-width: 40em; margin: 0; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.62; hyphens: auto; }
.ft-buchseite__kurz--folgt { font-style: italic; opacity: .82; }
.ft-buchseite__klappentext { max-width: 40em; margin-top: 1.1em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.7; hyphens: auto; }
.ft-buchseite__klappentext > :first-child { margin-top: 0; }
.ft-buchseite__klappentext a { color: var(--ft-farbe); }
.ft-buchseite__links { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 34px 0 0; }
.ft-buchseite .ft-knopf { border-color: var(--ft-farbe); color: var(--ft-farbe); }
.ft-buchseite .ft-knopf:hover, .ft-buchseite .ft-knopf:focus-visible { background: var(--ft-farbe); color: var(--ft-grund); }
.ft-buchseite .ft-knopf--haupt { background: var(--ft-farbe); color: var(--ft-grund); box-shadow: 0 10px 28px rgba(0, 0, 0, .38); }
.ft-buchseite .ft-knopf--haupt:hover, .ft-buchseite .ft-knopf--haupt:focus-visible { background: var(--ft-creme); color: var(--ft-grund); }
.ft-buchseite .ft-knopf:focus-visible { outline: 2px solid var(--ft-creme); outline-offset: 3px; }
.ft-buchseite .ft-knopf--leer { opacity: 1; font-style: italic; color: var(--ft-creme); border-color: var(--ft-farbe); border-color: color-mix(in srgb, var(--ft-farbe) 65%, transparent); }
.ft-knopf { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; border: 1.5px solid var(--ft-tinte); border-radius: 2px; font-family: var(--ft-text); font-size: 18px; color: var(--ft-tinte); text-decoration: none; }
.ft-knopf:hover, .ft-knopf:focus-visible { background: var(--ft-tinte); color: var(--ft-creme); transform: translateY(-2px); }
.ft-knopf--haupt { background: var(--ft-tinte); color: var(--ft-creme); box-shadow: 0 8px 22px rgba(23, 35, 74, .3); }
.ft-knopf--haupt:hover, .ft-knopf--haupt:focus-visible { background: #24367a; box-shadow: 0 12px 28px rgba(23, 35, 74, .38); }
.ft-knopf--leer { border-style: dashed; opacity: .6; pointer-events: none; }

/* ---- Regal "Weitere Märchen" am Fuss der Buchseiten ----------------------------------------------------------------- */
/* Hoechstens drei andere Buecher auf einem Brett, vor derselben Rueckwand wie die Startseite; oben die Regalkrone mit
   Schattenkante, die zugleich die Kante zur Buchseite in ihren Farben deckt. Darunter "Alle Märchen ansehen" (/buecher/).
   Creme erreicht auf der Rueckwand im Mittel 8,6:1 (Messung Nele). */
.ft-regal {
	--krone: clamp(26px, 2.6vw, 38px);
	position: relative; overflow: hidden; overflow: clip;
	padding: calc(var(--krone) + clamp(40px, 6vw, 80px)) clamp(16px, 4vw, 40px) clamp(64px, 9vw, 110px);
	background: var(--ft-wand); background-color: #140c06;
}
.ft-regal::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--krone); background: var(--ft-holz); box-shadow: inset 0 2px 0 rgba(255, 226, 170, .38), inset 0 -4px 0 rgba(0, 0, 0, .42), 0 5px 0 rgba(12, 7, 3, .55); }
.ft-regal::after { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--krone) + 5px); height: clamp(90px, 12vw, 150px); pointer-events: none; background: linear-gradient(180deg, rgba(10, 6, 3, .9), rgba(10, 6, 3, .5) 42%, rgba(10, 6, 3, 0)); }
.ft-regal__innen { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; }
.ft-regal__leer { margin: clamp(36px, 5vw, 64px) 0 0; text-align: center; font-family: var(--ft-anzeige); font-style: italic; font-size: clamp(20px, 2vw, 24px); color: var(--ft-creme); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.ft-regal__kopf p { margin: 14px 0 0; font-size: 19px; font-style: italic; color: var(--ft-creme); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.ft-regal__alle { margin: clamp(36px, 5vw, 56px) 0 0; text-align: center; font-family: var(--ft-anzeige); font-size: 21px; font-weight: 600; letter-spacing: .04em; }
.ft-regal__alle a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; color: var(--ft-goldhell); text-underline-offset: .25em; }
.ft-regal__alle a::after { content: '\2192'; }
.ft-regal__alle a:hover, .ft-regal__alle a:focus-visible { color: #fff; }
.ft-regal__alle a:focus-visible { outline: 2px solid var(--ft-goldhell); outline-offset: 4px; }

/* ---- Autorenseite (templates/page-autor.html): im Raster der Buchseite, Foto statt Cover ---------------------- */
/* Farben wie ein Buch ohne eigene: Gold, Grund in Nachtblau wie das Ende des Bildstreifens darueber (keine Kante).
   Der Streifen der Seiten ist niedriger als bei Buechern, das Foto liegt deshalb nur wenig darauf. */
.ft-autorseite { --ft-farbe: var(--ft-gold); --ft-grund: var(--ft-nacht); }
.ft-autorseite .ft-buchseite__cover { margin-top: calc(-1 * clamp(56px, 7vw, 110px)); }
.ft-autorseite__foto { display: block; width: 100%; height: auto; aspect-ratio: 832 / 1216; object-fit: cover; border-radius: 4px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(226, 191, 106, .35); }
.ft-autorseite--ohne-bild .ft-buchseite__innen { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.ft-autorseite .ft-buchseite__klappentext { margin-top: 1.2em; }

/* ---- Normale Seiten (Impressum, Datenschutz, 404) -------------------------- */
/* Ein Blatt Papier, das oben ein Stueck auf dem Bildstreifen liegt (top statt margin: .ft-haupt setzt die
   Aussenabstaende seiner Kinder auf 0). Mindesthoehe, damit die Fusszeile auch bei kurzem Text unten steht. */
.ft-seite { --ft-auflage: clamp(28px, 5vw, 64px); min-height: 72vh; padding: 0 16px clamp(24px, 4vw, 48px); background: var(--ft-nacht); }
.ft-seite__papier {
	position: relative; top: calc(-1 * var(--ft-auflage)); z-index: 1; box-sizing: border-box; max-width: 820px; margin: 0 auto;
	padding: clamp(30px, 5vw, 60px) clamp(20px, 5vw, 64px) clamp(36px, 5vw, 64px); border-radius: 4px;
	background: linear-gradient(180deg, #f8f0db, var(--ft-creme) 60%, #eee1bf); color: var(--ft-tinte);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(226, 191, 106, .35);
}
.ft-seite__titel { font-family: var(--ft-anzeige); font-weight: 700; font-size: clamp(36px, 5vw, 58px); line-height: 1.08; color: var(--ft-tinte); margin: 0 0 28px; overflow-wrap: break-word; hyphens: auto; }
.ft-seite__titel::after { content: ''; display: block; width: 72px; height: 2px; margin-top: 16px; background: var(--ft-golddunkel); }
.ft-seite h2, .ft-seite h3 { font-family: var(--ft-anzeige); color: var(--ft-tinte); margin: 2em 0 .5em; }
.ft-seite p, .ft-seite li { color: #2c3560; }
.ft-seite a { color: var(--ft-golddunkel); }

/* ---- Fuss ----------------------------------------------------------------- */
.ft-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 18px clamp(18px, 4vw, 48px); background: var(--ft-nacht); border-top: 1px solid #2c3e73; font-size: 16px; color: #b9b6a6; }
.ft-fuss__copy { margin: 0; }
.ft-fuss__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; }
.ft-fuss a { color: #b9b6a6; text-decoration: none; }
.ft-fuss a:hover, .ft-fuss a:focus-visible { color: #fff; }
.ft-fuss__login { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

/* ---- Einblenden beim Scrollen (nur wenn JavaScript und Bewegung erlaubt sind) --- */
.ft-motion.ft-ready [data-ft-reveal] { opacity: 0; transform: translateY(44px); transition: opacity .9s ease, transform .9s var(--ft-ease); }
.ft-motion.ft-ready [data-ft-reveal="cover"] { transform: translateY(64px) rotateY(-26deg) scale(.86); transform-origin: left center; transition-duration: 1.3s; }
.ft-motion.ft-ready [data-ft-reveal].is-in { opacity: 1; transform: none; }
.ft-motion.ft-ready .ft-buchseite__text > [data-ft-reveal]:nth-child(2) { transition-delay: .08s; }
.ft-motion.ft-ready .ft-buchseite__text > [data-ft-reveal]:nth-child(3) { transition-delay: .16s; }
.ft-motion.ft-ready .ft-buchseite__text > [data-ft-reveal]:nth-child(4) { transition-delay: .24s; }
.ft-motion.ft-ready .ft-buchseite__text > [data-ft-reveal]:nth-child(5) { transition-delay: .32s; }

/* Farbuebergaenge der Knoepfe, Menuepunkte und Marken nur mit Bewegung (ft-motion); ohne sie wechseln die Farben sofort */
.ft-motion .ft-welt__marke, .ft-motion .ft-streifen__marke, .ft-motion .ft-streifen__anker { transition: color .25s, text-shadow .25s; }
.ft-motion .ft-hinweis { transition: color .25s; }
.ft-motion .ft-raster__knopf, .ft-motion .ft-karte__knopf { transition: background .25s, color .25s; }
.ft-motion .ft-knopf { transition: background .25s, color .25s, transform .25s, box-shadow .25s; }

/* ft-motion fehlt schon beim Laden, wenn "weniger Bewegung" eingestellt ist; das hier greift, wenn die
   Einstellung erst bei offener Seite wechselt */
@media (prefers-reduced-motion: reduce) {
	.ft-motion .ft-szene__sterne, .ft-motion .ft-szene__schein, .ft-motion .ft-hinweis i { animation: none; }
	.ft-motion .ft-fliege { animation: none; opacity: .7; }
	.ft-motion .ft-licht { display: none; }
}

/* ---- Schmale Bildschirme -------------------------------------------------- */
@media (max-width: 760px) {
	.ft-fliege--mehr { display: none; } /* Handy: etwa 10 Gluehwuermchen statt 21 */
	.ft-buchseite__innen { grid-template-columns: 1fr; gap: 0; }
	.ft-buchseite__cover { width: min(54vw, 240px); margin: calc(-1 * clamp(100px, 30vw, 160px)) auto 0; } /* Titel bleibt auf dem Handy im ersten Bild */
	.ft-autorseite .ft-buchseite__cover { margin-top: -40px; } /* unter dem Menue des niedrigen Streifens */
	.ft-hinweis { font-size: 15px; letter-spacing: .18em; }
}
/* Marke und Menue untereinander, wenn sie nicht mehr nebeneinander passen */
@media (max-width: 560px) {
	.ft-streifen__menue { flex-direction: column; justify-content: flex-start; gap: 6px; padding-top: 12px; }
}

/* ---- Lichtpunkt als Mauszeiger mit Glitzerschweif (Aufgabe 15, Stefan 28.10.2026) ----------------
   Nur fuer Geraete mit Maus: ein leuchtender Lichtpunkt (img/cursor/licht.svg, 32 x 32, Hotspot in der Mitte), ueber
   Klickbarem heller und groesser (licht-hell.svg). Eingabefelder und Fliesstext der Textseiten behalten den Textzeiger.
   Touch-Geraete bleiben unveraendert. Der Schweif (assets/js/theme.js, "Lichtpunkt-Zeiger") entsteht nur mit ft-motion;
   die Funken sind ein fester Pool von 24 Elementen, nicht klickbar und ohne Inhalt; die Ebene liegt absolut im Body (nicht fixiert) und klippt. Bei erzwungenen
   Farben und hohem Kontrast gilt der Systemzeiger. */
@media (hover: hover) and (pointer: fine) {
	html, body { cursor: url("../img/cursor/licht.svg") 16 16, auto; }
	.ft-seite__papier :is(p, li, blockquote, figcaption, dd, dt, td, th), .ft-buchseite__text :is(p, li, blockquote) { cursor: text; }
	a[href], a[href] *, button, button *, summary, [role="button"], label[for], select, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"] { cursor: url("../img/cursor/licht-hell.svg") 16 16, pointer; }
	input:not([type]), input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], textarea, [contenteditable="true"] { cursor: text; }
}
.ft-funken { position: absolute; inset: 0; overflow: clip; z-index: 9000; pointer-events: none; } /* haengt am Body (position: relative) */
.ft-funke {
	position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0;
	background: radial-gradient(circle, #fffbe6 0, #f8dc84 40%, rgba(246, 215, 126, 0) 74%);
}
.ft-funke--stern { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 0; background: #fff1b8; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
@media (forced-colors: active), (prefers-contrast: more) {
	html, body { cursor: auto; }
	a[href], a[href] *, button, button *, summary, [role="button"], label[for], select, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"] { cursor: pointer; }
}