/* Lost Heimatland: Landing Page Styles
   Bildsprache seit 02.08.2026 aus dem Claude-Design-Entwurf
   (docs/specs/landing/entwurf_full.jpeg): abwechselnde helle und dunkle
   Baender statt einer durchgehend dunklen Seite, eckige Buttons statt Pillen,
   Oswald in Versalien als Ordnungsschicht.

   Die Farbwerte des Entwurfs sind uebernommen, aber an vier Stellen
   nachjustiert, weil sie als Kleintext unter WCAG AA lagen (gemessen 02.08.):
     Buttonschrift #16130F auf #A85F2E .......... 3,83  -> jetzt weisse Schrift, 4,84
     Akzent #A85F2E als Kleintext auf Creme ..... 4,22  -> #8F4E24, 5,58
     Akzent #A85F2E als Kleintext auf Dunkel .... 3,83  -> #C98A54, 6,39
     Footer #6E6353 auf #0F0D0A ................. 3,30  -> #8F8371, 5,22
     Bildunterschrift #7E7364 auf #16130F ....... 3,99  -> #948877, 5,33
   #A85F2E bleibt als Flaeche und fuer Grosstext, wo 3:1 genuegt.

   Fuenfte Korrektur am 23.08.2026, gefunden mit ~/.claude/tools/kontrast.mjs,
   das den Grund am fertigen Bild misst statt im Stylesheet:
     Hero-Augenbraue #C98A54 auf dem Motiv ...... 2,01  -> #F3DFC6, 6,26
   Dazu .hero-content::before als Grund unter dem Heldentext. Ohne den Grund
   erreicht dort KEIN Ton der Palette 4,5:1, das Motiv ist an der Stelle zu
   hell. Gegengeprueft mit Glyphenmaske gegen den schlechtesten von 32 Frames
   beider Hero-Clips, auf 390x844 und auf 1440x900.

   Keine externen Font- oder CDN-Referenzen; Schriften liegen selbst gehostet. */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/oswald-variable-latin.woff2') format('woff2');
}
/* LH Serif ist ein Latin-Subset von Lora. Die SIL OFL erlaubt das Subsetten,
   verbietet aber in Bedingung 3, eine veraenderte Fassung weiter unter dem
   Reserved Font Name zu fuehren, und "Lora" ist einer. Die OFL-FAQ 2.6 zaehlt
   Subsetting ausdruecklich als Modifikation, 2.8 laesst den Namen nur bei
   gleichem vollem Zeichenvorrat zu. Deshalb umbenannt, Herkunft und Copyright
   stehen unveraendert in der Datei und in fonts/NOTICE-LH-Serif.txt. */
@font-face {
  font-family: 'LH Serif';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/lora-variable-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'LH Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lora-italic-400-latin.woff2') format('woff2');
}

:root {
  /* Flaechen */
  --bg:            #16130F;  /* Grundton dunkel */
  --bg-panel:      #1D1913;  /* dunkles Band mit Absetzung */
  --bg-deep:       #0F0D0A;  /* Hero-Sockel und Footer */
  --bg-tile:       #241F19;  /* Kachelgrund, bevor das Bild da ist */
  --cream:         #F4EFE6;  /* helles Band */
  --cream-2:       #EDE5D8;  /* zweites helles Band */
  --cream-3:       #E4DACA;  /* Hover-Flaeche auf hellem Band */

  /* Linien */
  --border:        #2C2620;
  --border-soft:   #221E18;
  --border-lt:     #C9BDA9;
  --border-lt-soft:#D9CFBE;

  /* Schrift auf Dunkel */
  --text:          #E8DFD1;
  --text-warm:     #F7F3EA;
  --text-muted:    #DCD2C2;
  --text-dim:      #9A8F7F;
  --text-cap:      #948877;  /* Bildunterschriften, AA-korrigiert */
  --text-legal:    #8F8371;  /* Footer-Kleintext, AA-korrigiert */

  /* Schrift auf Creme */
  --ink:           #16130F;
  --ink-body:      #2E2820;
  --ink-muted:     #5C544A;
  --ink-dim:       #6B6257;

  /* Akzent */
  --terracotta:      #A85F2E;  /* nur Flaeche und Grosstext */
  --terracotta-lt:   #C98A54;  /* Akzent-Kleintext auf Dunkel */
  --terracotta-ink:  #8F4E24;  /* Akzent-Kleintext auf Creme */
  --on-terracotta:   #FFFFFF;  /* Schrift auf Terracotta-Flaeche */

  --radius-tile: 2px;
  --radius-sm: 2px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --font-head: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'LH Serif', Georgia, serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --tile-gap: clamp(6px, 1.4vw, 16px);
  --shadow-card: 0 20px 40px -24px rgba(10,7,4,0.7);
  --shadow-cover: 0 30px 60px rgba(22,19,15,0.28);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: var(--terracotta-lt); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--terracotta-lt); outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Der Sprunglink war auch im Fokus unsichtbar: wer mit der Tastatur
   navigiert, sah den ersten Halt nicht und tabbte ins Leere. */
a.visually-hidden:focus, a.visually-hidden:focus-visible {
  position: fixed; top: var(--sp-3); left: var(--sp-3); z-index: 300;
  width: auto; height: auto; margin: 0; padding: 12px 20px;
  overflow: visible; clip: auto; clip-path: none;
  background: var(--terracotta); color: var(--on-terracotta);
  font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; box-shadow: var(--shadow-card);
  outline: 2px solid var(--terracotta-lt); outline-offset: 2px;
}

h1, h2, h3, .eyebrow, .btn, .kicker { font-family: var(--font-head); }

/* ===================== BAENDER =====================
   Jede Sektion ist ein durchgehendes Farbband ueber die volle Breite, der
   Inhalt sitzt in einem 1240px-Container. Die Bandfarbe bestimmt, welcher
   Schriftsatz gilt: .band-cream schaltet die gesamte Sektion auf die
   Ink-Toene um, damit einzelne Elemente das nicht jedes Mal selbst tun. */
.band { padding-block: clamp(64px, 9vw, 104px); }
.band-dark   { background: var(--bg); }
.band-panel  { background: var(--bg-panel); border-top: 1px solid var(--border); }
.band-deep   { background: var(--bg-deep); border-top: 1px solid var(--border); }
.band-cream  { background: var(--cream);   color: var(--ink); }
.band-cream-2{ background: var(--cream-2); color: var(--ink); border-top: 1px solid var(--border-lt-soft); }

.band-cream h1, .band-cream h2, .band-cream h3,
.band-cream-2 h1, .band-cream-2 h2, .band-cream-2 h3 { color: var(--ink); }
.band-cream p, .band-cream li, .band-cream td,
.band-cream-2 p, .band-cream-2 li, .band-cream-2 td { color: var(--ink-body); }
.band-cream .eyebrow, .band-cream-2 .eyebrow { color: var(--terracotta-ink); }
.band-cream a, .band-cream-2 a { color: var(--terracotta-ink); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

.eyebrow {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--terracotta-lt); margin: 0 0 var(--sp-3);
}

/* ===================== BUTTONS =====================
   Eckig, Oswald, gesperrt. Genau zwei Sorten: gefuellt (Terracotta auf
   Dunkel, Tinte auf Creme) und Linie. Terracotta bleibt dem Kaufweg
   vorbehalten, damit pro Bildschirm ein warmer Punkt fuehrt. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 16px 32px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--terracotta); color: var(--on-terracotta);
  text-decoration: none; line-height: 1; cursor: pointer;
  transition: background 200ms var(--ease-out-expo), color 200ms, border-color 200ms;
}
.btn:hover { background: var(--terracotta-lt); color: var(--ink); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Linie auf dunklem Grund */
.btn.ghost { background: transparent; color: var(--text-muted); border-color: #4A423A; }
.btn.ghost:hover { background: transparent; color: var(--text-warm); border-color: var(--text-warm); }

/* Gefuellt auf hellem Grund */
.band-cream .btn.ink, .band-cream-2 .btn.ink { background: var(--ink); color: var(--cream); }
.band-cream .btn.ink:hover, .band-cream-2 .btn.ink:hover { background: var(--terracotta); color: var(--on-terracotta); }
/* Linie auf hellem Grund */
.band-cream .btn.ghost, .band-cream-2 .btn.ghost { color: var(--ink); border-color: var(--ink); background: transparent; }
.band-cream .btn.ghost:hover, .band-cream-2 .btn.ghost:hover { background: var(--ink); color: var(--cream); }

/* ===================== TOPBAR ===================== */
/* Basis- und No-JS-Zustand: dauerhaft sichtbare Leiste. Eine Einblendung per
   Scroll, die ohne JS nie ausloest, wuerde den Kauf-Button ganz verstecken. */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 60px; display: flex; align-items: center; gap: var(--sp-6);
  padding-inline: var(--gutter);
  background: rgba(22,19,15,0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.js .topbar { transform: translateY(-100%); transition: transform 300ms var(--ease-out-expo); }
.js .topbar.is-visible { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .js .topbar { transition: none; } }

.topbar-brand {
  font-family: var(--font-head); font-size: 1rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-warm); text-decoration: none; flex-shrink: 0;
}
.topbar-links { display: none; gap: var(--sp-6); }
.topbar-links a {
  font-family: var(--font-head); font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-dim); text-decoration: none;
}
.topbar-links a:hover, .topbar-links a.is-active { color: var(--text-warm); }
.topbar-buy { margin-left: auto; padding: 11px 22px; font-size: 0.72rem; flex-shrink: 0; }
@media (min-width: 900px) { .topbar-links { display: flex; flex: 1; } }
@media (max-width: 899.98px) { .topbar { height: 54px; } }

/* Ankerziele frei vom fixierten Kopf halten. */
#buch, #leseprobe, #mosaic, #about, #stimmen, #kaufwege, #author, #faq {
  scroll-margin-top: 70px;
}

/* ===================== HERO ===================== */
/* Hoehe 02.08.2026 korrigiert. Vorher stand hier die 100vh des Bestands,
   waehrend der Entwurf 760px vorsieht. Der Unterschied ist nicht kosmetisch:
   bei 100vh fuellt der Hero den kompletten ersten Bildschirm, und der Hero ist
   ausgerechnet das Element, das sich zwischen alt und neu am wenigsten
   unterscheidet. Das erste helle Band, also das Erkennungszeichen des neuen
   Designs, lag damit komplett unter der Falz: wer nicht scrollte, sah die alte
   Seite. Jetzt gedeckelt, sodass das Creme-Band immer angeschnitten ist und
   sofort zeigt, dass es weitergeht. */
.hero {
  position: relative;
  height: clamp(520px, 78svh, 760px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--bg-deep);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 1.2s var(--ease-out-expo);
}
.hero-video.is-active { opacity: 0.78; }
.hero-static-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.78; display: none;
}
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  /* Oben nur so viel Abdunklung, wie die Topbar zum Lesen braucht, in der
     Mitte fast nichts, unten dicht genug fuer die Schrift. Vorher war die
     Mitte bei 0.24 und das Motiv verschwand im Braun. */
  background: linear-gradient(180deg,
    rgba(15,13,10,0.55) 0%, rgba(15,13,10,0.10) 34%, rgba(22,19,15,0.96) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none !important; }
  .hero-static-poster { display: block; }
}

.hero-content {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--gutter) clamp(56px, 8vw, 84px);
  display: flex; flex-direction: column; gap: var(--sp-5);
  animation: hero-rise 600ms var(--ease-out-expo) both;
}
@media (prefers-reduced-motion: reduce) { .hero-content { animation: none; } }
/* Zweiter Grund, nur fuer den Heldentext. .hero-scrim hellt bei 34 Prozent mit
   Absicht auf, damit das Motiv nicht im Braun verschwindet, und genau dort
   beginnt der Textstapel. Dieser Verlauf haengt am Text statt am Bild und
   traegt deshalb auf jeder Fenstergroesse gleich weit. 100vw statt 100%, weil
   .hero-content ab --wrap schmaler ist als das Fenster; .hero kappt den
   Ueberstand mit overflow: hidden. */
.hero-content::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; transform: translateX(-50%); width: 100vw;
  top: -64px; bottom: 0;
  background: linear-gradient(180deg,
    rgba(15,13,10,0) 0, rgba(15,13,10,0.36) 64px, rgba(15,13,10,0.44) 100%);
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow {
  margin: 0; font-size: 0.72rem; letter-spacing: 0.28em;
  /* Gemessen 23.08.2026 (kontrast.mjs plus Frame-Durchlauf beider Hero-Clips):
     --terracotta-lt stand hier bei 2,01:1 gegen den schlechtesten Frame. Die
     Augenbraue sitzt auf 32 Prozent der Heldenhoehe, also genau auf der
     duennsten Stelle von .hero-scrim. Kein Ton der Palette kommt dort ohne
     Abdunklung auf 4,5:1, deshalb der helle Tonwert und der Grund darunter. */
  color: #F3DFC6;
}
.hero-title {
  margin: 0; font-weight: 500; color: #F7F3EA;
  font-size: clamp(2.8rem, 11vw, 6rem); line-height: 0.98; letter-spacing: -0.01em;
}
.hero-tagline {
  margin: 0; font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.6vw, 1.5rem); line-height: 1.5;
  color: var(--text-muted); max-width: 34ch; text-wrap: pretty;
}
/* Zwei Saetze, zwei Zeilen: der erste erklaert, der zweite ist die Pointe.
   Ab 600px erzwungener Umbruch, darunter laeuft der Satz normal um, sonst
   entstehen auf schmalen Displays vier statt zwei Zeilen. */
.hero-tagline .tagline-a, .hero-tagline .tagline-b { display: inline; }
.hero-tagline .tagline-b { color: var(--text-warm); }
@media (min-width: 600px) {
  .hero-tagline .tagline-a, .hero-tagline .tagline-b { display: block; }
  .hero-tagline .tagline-b { margin-top: 0.15em; }
}
.hero-cta-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; margin-top: var(--sp-1); }
.hero-note { margin: 0; font-size: 0.8rem; color: var(--text-dim); }

/* ===================== STICKY CTA ===================== */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: center; padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(to top, rgba(15,13,10,0.97) 60%, rgba(15,13,10,0));
  transform: translateY(120%);
  transition: transform 400ms var(--ease-out-expo);
  pointer-events: none;
}
.sticky-cta.is-visible { transform: translateY(0); pointer-events: auto; }
.sticky-cta .btn { box-shadow: var(--shadow-card); }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }
/* Ab 900px traegt die Topbar den Kauf-Button dauerhaft sichtbar, die untere
   Leiste ist dort redundant und wird ganz weggelassen. */
@media (min-width: 900px) { .sticky-cta { display: none; } }
.no-js .sticky-cta {
  position: static; transform: none; pointer-events: auto;
  background: var(--bg-panel); border-top: 1px solid var(--border); padding: var(--sp-4) var(--sp-5);
}

/* ===================== SEKTIONSKOPF ===================== */
.section-head { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.section-head h2 {
  margin: 0; font-weight: 500; color: var(--text-warm);
  font-size: clamp(1.9rem, 4.4vw, 2.75rem); line-height: 1.1; text-wrap: balance;
}
.section-head .lede { margin: 0; font-size: 1.05rem; color: var(--text-dim); max-width: 56ch; line-height: 1.6; }
.band-cream .section-head .lede, .band-cream-2 .section-head .lede { color: var(--ink-muted); }

/* ===================== DAS BUCH (Creme) ===================== */
.buch-grid {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.buch-cover { display: block; box-shadow: var(--shadow-cover); aspect-ratio: 1316 / 2000; overflow: hidden; }
.buch-cover img { width: 100%; height: 100%; object-fit: cover; }
.buch-copy { display: flex; flex-direction: column; gap: var(--sp-6); }
.buch-copy h2 {
  margin: 0; font-weight: 500; font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08; max-width: 20ch; text-wrap: balance;
}
/* Nur direkte, klassenlose Absaetze. Als ".buch-copy p" geschrieben (0,2,0)
   schlaegt die Regel .eyebrow und .fineprint (je 0,1,0) und setzt Kicker und
   Kleintext auf Fliesstextgroesse. Dieselbe Falle gilt fuer jeden Container
   weiter unten, der seine Absaetze typisiert. */
.buch-copy > p:not([class]) { margin: 0; font-size: 1.1rem; line-height: 1.68; max-width: 58ch; text-wrap: pretty; }

/* Zwei Ausgaben: die Formatwahl passiert genau hier und sonst nirgends.
   Zwei Karten mit Haarlinie, gleiche Typografie wie die Eckdaten. */
.formate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.format { border: 1px solid var(--border-lt); padding: var(--sp-6) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.format-head { margin: 0; font-family: var(--font-head); font-size: 1.25rem; font-weight: 500; color: var(--ink); }
.format-note { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-muted); }
.format .btn { margin-top: auto; width: 100%; }
@media (max-width: 599.98px) { .formate { grid-template-columns: 1fr; } }

.eckdaten-heading {
  font-family: var(--font-head); font-size: 0.78rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-dim); margin: 0;
}
.eckdaten-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.eckdaten { border-collapse: collapse; width: 100%; font-size: 0.95rem; margin: 0; }
.eckdaten th, .eckdaten td { text-align: left; padding: var(--sp-3) var(--sp-5) var(--sp-3) 0; vertical-align: top; }
.eckdaten thead th {
  font-family: var(--font-head); font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--terracotta-ink);
  border-bottom: 1px solid var(--border-lt); padding-bottom: var(--sp-2);
}
.eckdaten tbody th { color: var(--ink-dim); font-weight: 600; white-space: nowrap; }
.eckdaten tbody td { color: var(--ink-body); }
.eckdaten tbody tr + tr th, .eckdaten tbody tr + tr td { border-top: 1px solid var(--border-lt-soft); }
/* Zwei Klassen tief, weil .buch-copy p (0,2,0) sonst die Schriftgroesse
   gewinnt und der Kleintext genauso gross steht wie der Fliesstext. */
.fineprint, .buch-copy p.fineprint, .band-cream p.fineprint, .band-cream-2 p.fineprint {
  margin: 0; font-size: 0.85rem; line-height: 1.6; color: var(--ink-dim);
}

@media (max-width: 899.98px) {
  .buch-grid { grid-template-columns: 1fr; }
  .buch-cover { max-width: 280px; margin-inline: auto; }
}

/* ===================== LESEPROBE (Creme 2) ===================== */
.leseprobe-grid {
  display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 70px); align-items: start;
}
.leseprobe-aside { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: 100px; }
.leseprobe-aside h2 { margin: 0; font-weight: 500; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.1; }
.leseprobe-aside > p:not([class]) { margin: 0; font-size: 1.05rem; color: var(--ink-muted); }
.leseprobe-text-wrap { position: relative; }
.leseprobe-text { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 62ch; }
.leseprobe-text p { margin: 0; font-size: 1.1rem; line-height: 1.75; color: var(--ink-body); }
.leseprobe-text .initial {
  font-family: var(--font-head); font-size: 3.6rem; line-height: 0.8;
  float: left; margin: 6px 14px 0 0; color: var(--terracotta);
}
.leseprobe-text .aside-line { font-style: italic; color: var(--ink-muted); }
/* Weicher Auslauf ueber die letzten Zeilen: signalisiert "da kommt noch was",
   ohne den Text darunter je ganz zu loeschen (Alpha bleibt unter 1). */
.leseprobe-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3.6rem; pointer-events: none;
  background: linear-gradient(to bottom, rgba(237,229,216,0) 0%, rgba(237,229,216,0.94) 100%);
}
.leseprobe-cta { margin-top: var(--sp-6); }
@media (max-width: 899.98px) {
  .leseprobe-grid { grid-template-columns: 1fr; }
  .leseprobe-aside { position: static; }
}

/* ===================== GALERIE: DIE REISE =====================
   Strukturregel, teuer gelernt am 26.07.: aspect-ratio NIE auf dem Grid- oder
   Flex-Item selbst, immer auf einem inneren .frame. Auf einem Item in einer
   auto-hohen Zeile faellt es sonst auf die Zeilenhoehe zusammen (gemessen:
   90px statt 169px Kachelbreite, mit toten Flaechen drumherum). */
#mosaic .section-head h2 { color: var(--text-warm); }
.journey-intro { max-width: 56ch; margin: 0; color: var(--text-dim); }

.chapter { padding-top: var(--sp-8); }
.chapter:first-of-type { padding-top: var(--sp-2); }

/* Kapitelkopf: Nummer in Oswald mit durchlaufender Haarlinie, darunter der
   Ortsname gross. Signature-Element der Galerie, es gliedert das Scrollen. */
.chapter-head { margin-bottom: var(--sp-5); }
.chapter-no {
  display: flex; align-items: center; gap: var(--sp-4);
  font-family: var(--font-head); text-transform: uppercase; font-weight: 500;
  font-size: 0.72rem; letter-spacing: 0.24em; color: var(--terracotta-lt);
  margin: 0 0 var(--sp-3);
}
.chapter-no::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }
.chapter-title {
  font-family: var(--font-head); font-weight: 500;
  font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.05;
  margin: 0; color: var(--text-warm);
}
.chapter-line { margin: var(--sp-3) 0 0; max-width: 46ch; font-family: var(--font-body); color: var(--text-muted); font-size: 1.02rem; }

/* Druck-Aesthetik, keine App-Karten: winziger Radius, kein Umgebungsschatten.
   Schatten bleibt funktionalen Elementen vorbehalten (Lightbox, Sticky-CTA).
   margin:0 ist Pflicht, nicht Kosmetik: <figure> bringt vom User-Agent
   margin:1em 40px mit und frisst im Streifen 80px pro Karte. */
.tile { position: relative; display: block; margin: 0; }
.tile.is-clickable { cursor: zoom-in; }
.tile.is-clickable:focus-visible { outline: 2px solid var(--terracotta-lt); outline-offset: 4px; }

.frame {
  position: relative; aspect-ratio: var(--ar, 3 / 4);
  border-radius: var(--radius-tile); overflow: hidden;
  background: var(--bg-tile); border: 1px solid var(--border);
}
.frame img, .frame video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Ankerbild: der grosse Moment pro Kapitel. Mobil randlos ueber die volle
   Breite (negative margin gegen das Gutter, kein 100vw, damit auf dem Desktop
   keine Scrollbar-Ueberbreite entsteht). */
.tile.anchor { margin: 0; }
@media (max-width: 899.98px) {
  .tile.anchor { margin-inline: calc(-1 * var(--gutter)); }
  .tile.anchor .frame { border-radius: 0; border-left: 0; border-right: 0; }
}
/* Desktop: linksbuendig auf derselben Achse wie Kapitelnummer, Titel, Zitat
   und Streifen. Breite pro Seitenverhaeltnis gedeckelt, sonst wird ein
   9:16-Motiv auf 1240px absurd hoch. */
@media (min-width: 900px) {
  .tile.anchor { margin-inline: 0; }
  .tile.anchor.a-portrait { max-width: 620px; }
  .tile.anchor.a-tall     { max-width: 440px; }
  .tile.anchor.a-wide     { max-width: 1000px; }
}

.chapter-quote {
  max-width: 44ch; margin: var(--sp-5) 0 0; font-family: var(--font-body);
  font-size: clamp(1.12rem, 3.4vw, 1.45rem); line-height: 1.5; color: var(--text-warm);
}
.quote-caption-label {
  display: block; font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.68rem; color: var(--text-dim); margin-bottom: var(--sp-2);
}

/* Filmstreifen: mobil ein horizontaler Snap-Streifen, damit jede Karte gross
   genug bleibt. Ab 900px klappt derselbe Markup-Block in ein Raster auf. */
.strip-label {
  margin: var(--sp-7) 0 var(--sp-3); font-family: var(--font-head);
  text-transform: uppercase; font-weight: 500;
  font-size: 0.9rem; letter-spacing: 0.18em; color: var(--text-warm);
}
.strip-wrap { margin-block: var(--sp-6) var(--sp-7); }
.strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 74%;
  gap: var(--sp-3);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  padding-bottom: var(--sp-2);
  overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.strip::-webkit-scrollbar { display: none; }
.strip:focus-visible { outline: 2px solid var(--terracotta-lt); outline-offset: 4px; }
.strip > .card { scroll-snap-align: start; }
/* Kampagnen-Slides tragen ihren Text eingebrannt im 4:5-Bild: eigenes
   Verhaeltnis, kein Crop, keine zusaetzliche Bildunterschrift. */
.strip.is-slides { grid-auto-columns: 78%; }

.card-cap {
  margin-top: var(--sp-2); font-family: var(--font-head);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1.4; color: var(--text-cap);
}

/* Scroll-Fortschritt statt Punkte: eine Haarlinie, deren Daumen Breite und
   Position aus dem echten Scrollverhaeltnis bekommt (main.js). */
.strip-rail { height: 2px; margin-top: var(--sp-3); background: var(--border); border-radius: 2px; overflow: hidden; }
.strip-rail-thumb { display: block; height: 100%; width: 30%; background: var(--text-dim); border-radius: 2px; transition: transform 120ms linear; }

@media (min-width: 900px) {
  .strip {
    grid-auto-flow: row;
    /* auto-fit statt auto-fill: auto-fill legt immer so viele Spuren an, wie
       hineinpassen, leere Spuren bleiben als Loch stehen. auto-fit klappt sie
       zusammen, jede Kachelzahl wirkt gewollt. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-columns: auto; gap: var(--tile-gap);
    overflow: visible; scroll-snap-type: none;
    margin-inline: 0; padding-inline: 0; padding-bottom: 0;
    /* end statt start: die Querformate sind flacher als die Hochformate
       daneben. Oben ausgerichtet hingen sie in der Luft, ihre Bildunterschrift
       schwebte auf halber Hoehe. Unten angedockt liegen alle auf einer Linie. */
    align-items: end;
  }
  /* Eine Slide-Serie ist eine Reihenfolge, kein Raster: im Raster liest man
     sie zeilenweise, die Dramaturgie ist weg, und jede ungerade Anzahl erzeugt
     eine Waisenzeile. Sie bleibt deshalb auch auf dem Desktop ein Streifen.
     300px, weil der eingebrannte Text darunter unleserlich wird. */
  .strip.is-slides {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 300px;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-2); overscroll-behavior-x: contain; scrollbar-width: none;
  }
  /* Ein Querformat neben Hochformaten ist halb so hoch und reisst ein Loch in
     die Reihe. Ein Streifen mit .has-band steht deshalb in drei festen Spalten
     und die .is-band-Kachel laeuft als breites Band ueber die volle Reihe. */
  .strip.has-band { grid-template-columns: repeat(3, 1fr); }
  /* Zwei Hochformate statt drei: bei festen drei Spalten bliebe die dritte
     Spur leer und die Reihe haette ein sichtbares Loch neben dem Band. */
  .strip.has-band.is-two { grid-template-columns: repeat(2, 1fr); }
  .strip .card.is-band { grid-column: 1 / -1; }
  .strip-rail { display: none; }
  .strip-wrap:has(.strip.is-slides) .strip-rail { display: block; }
}

/* Scroll-in: ruhig by design (28px Weg, kein Scale, kein Bounce). */
@supports (animation-timeline: view()) {
  .tile.anim-ready {
    animation: tile-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}
@keyframes tile-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tile.io-ready { opacity: 0; transform: translateY(28px); transition: opacity 650ms var(--ease-out-expo), transform 650ms var(--ease-out-expo); }
.tile.io-ready.io-in { opacity: 1; transform: translateY(0); }
/* Karten im horizontalen Streifen sind ausgenommen: view() bezieht sich auf
   den naechsten Scrollport, das waere hier der Streifen selbst, und die Karten
   blieben unsichtbar. */
.strip .tile.anim-ready { animation: none; opacity: 1; transform: none; }
.strip .tile.io-ready { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .tile.anim-ready { animation: none; opacity: 1; transform: none; }
  .tile.io-ready { opacity: 1; transform: none; transition: none; }
  .strip { scroll-behavior: auto; }
  .strip-rail-thumb { transition: none; }
}

/* Diptychon in Kapitel 02 */
.diptychon { display: flex; gap: var(--sp-5); align-items: stretch; max-width: 820px; margin: var(--sp-7) 0 var(--sp-2); }
.diptychon-side { flex: 1 1 0; min-width: 0; }
.diptychon-divider { width: 1px; background: var(--border); flex-shrink: 0; }
.diptychon-video {
  /* height:auto ist Pflicht: das height-Attribut im Markup ist ein
     Presentational Hint und schlaegt sonst aspect-ratio, das Video wird
     dann vertikal verzerrt. */
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: var(--radius-tile); background: var(--bg-tile); border: 1px solid var(--border);
}
.diptychon-place {
  margin: var(--sp-2) 0 0; text-align: center; font-family: var(--font-head);
  text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--text-dim);
}
@media (max-width: 899.98px) {
  .diptychon { flex-direction: column; }
  .diptychon-divider { width: 100%; height: 1px; }
}

.motive-note { margin: var(--sp-8) 0 0; font-size: 0.82rem; line-height: 1.6; color: var(--text-dim); max-width: 80ch; }

/* ===================== DIE STIMME IM BUCH ===================== */
.stimme-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.stimme-copy { display: flex; flex-direction: column; gap: var(--sp-6); }
.stimme-copy h2 {
  margin: 0; font-weight: 400; color: var(--text-warm);
  font-size: clamp(1.9rem, 4.6vw, 3.25rem); line-height: 1.1; max-width: 18ch; text-wrap: balance;
}
.stimme-quote {
  margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.32rem); line-height: 1.62;
  font-style: italic; color: var(--text-muted); max-width: 52ch;
  border-left: 2px solid var(--terracotta); padding-left: var(--sp-6); text-wrap: pretty;
}
.stimme-who {
  margin: 0; font-family: var(--font-head); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-dim);
}
.stimme-copy p.stimme-lede { margin: 0; font-size: 1.08rem; line-height: 1.65; color: var(--text-dim); max-width: 48ch; }
.stimme-cta { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
.stimme-media { display: block; width: 100%; background: var(--bg-tile); border: 1px solid var(--border); }
/* height:auto ist Pflicht, nicht Kosmetik: das height-Attribut im Markup ist
   ein Presentational Hint. Ohne diese Regel bleibt die Hoehe bei 1078px
   stehen, waehrend max-width die Breite auf die Spalte zieht, und das Motiv
   steht 498x1078 statt 498x336 im Bild (gemessen 02.08.). Dieselbe Falle wie
   beim .diptychon-video weiter oben. */
.stimme-media img { display: block; width: 100%; height: auto; }
@media (max-width: 899.98px) { .stimme-grid { grid-template-columns: 1fr; } }

/* ===================== LESEEXEMPLARE (Creme) ===================== */
.lese-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 70px); align-items: start;
}
.lese-copy { display: flex; flex-direction: column; gap: var(--sp-5); }
.lese-copy h2 { margin: 0; font-weight: 500; font-size: clamp(1.8rem, 4vw, 2.75rem); line-height: 1.1; max-width: 18ch; }
.lese-copy > p:not([class]) { margin: 0; font-size: 1.05rem; line-height: 1.65; max-width: 46ch; text-wrap: pretty; }

.lese-form { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-2); max-width: 480px; }
.lese-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.lese-field label { font-family: var(--font-head); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-dim); }
.lese-form input[type="text"],
.lese-form input[type="email"],
.lese-form select,
.lese-form textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: 14px 16px; border: 1px solid var(--ink); border-radius: 0;
  background: transparent; width: 100%; min-width: 0;
}
.lese-form textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.lese-form select { appearance: none; background-image: none; }
.lese-check { display: flex; gap: var(--sp-3); align-items: flex-start; }
.lese-check input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--terracotta); }
.lese-check span { font-size: 0.95rem; line-height: 1.5; color: var(--ink-body); }
/* Honigtopf: fuer Menschen unsichtbar, fuer Formular-Bots ein Pflichtfeld.
   Kein externes Captcha, das waere ein Datenabfluss an Dritte. */
.lese-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lese-note { margin: 0; font-size: 0.85rem; line-height: 1.6; color: var(--ink-dim); }
.lese-fallback { margin: 0; font-size: 0.85rem; line-height: 1.6; color: var(--ink-dim); }
.copy-mail {
  font-family: var(--font-head); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.12em; padding: 6px 12px; margin-left: var(--sp-2);
  border: 1px solid var(--border-lt); background: transparent; color: var(--ink-dim);
  cursor: pointer; border-radius: 0;
}
.copy-mail:hover { border-color: var(--ink); color: var(--ink); }

/* Sticky, weil die linke Spalte mit dem Formular deutlich laenger ist als
   diese vier Schritte. Ohne sticky steht rechts ab der Haelfte nur noch
   leere Flaeche, waehrend man ausfuellt. */
.lese-how { position: sticky; top: 100px; border-left: 2px solid var(--ink); padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.lese-how-head { margin: 0; font-family: var(--font-head); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-dim); }
.lese-step { display: flex; gap: var(--sp-4); align-items: baseline; }
.lese-step .no { font-family: var(--font-head); font-size: 0.95rem; color: var(--terracotta-ink); flex: none; }
.lese-step p { margin: 0; font-size: 1rem; line-height: 1.6; }
@media (max-width: 899.98px) {
  .lese-grid { grid-template-columns: 1fr; }
  .lese-how { position: static; border-left: 0; border-top: 2px solid var(--ink); padding-left: 0; padding-top: var(--sp-5); }
}

/* Stimmen-Zitate: erst sichtbar, wenn echte da sind. Wer Bewertungen zeigt,
   muss nach Paragraf 5b Abs. 3 UWG angeben, ob und wie er ihre Echtheit
   prueft, deshalb die Pruefzeile unter dem Block. */
.stimmen-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.stimmen-item { margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); border-top: 2px solid var(--ink); padding-top: var(--sp-5); }
.stimmen-item blockquote { margin: 0; font-size: 1.1rem; line-height: 1.55; font-style: italic; text-wrap: pretty; }
.stimmen-item figcaption { margin-top: auto; font-family: var(--font-head); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-dim); }
.stimmen-check { border-top: 1px solid var(--border-lt-soft); padding-top: var(--sp-5); font-size: 0.85rem; line-height: 1.6; color: var(--ink-dim); }
@media (max-width: 899.98px) { .stimmen-list { grid-template-columns: 1fr; } }

/* ===================== KAUFWEGE (Creme 2) ===================== */
.kaufwege-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-7); }
.kaufwege-head h2 { margin: 0; font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.kaufwege-isbn { font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ink-dim); text-align: right; }
.kaufwege-isbn span { display: block; }
.kaufwege-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.kaufweg {
  display: flex; flex-direction: column; gap: var(--sp-3);
  border: 1px solid var(--border-lt); padding: var(--sp-6) var(--sp-5) var(--sp-5);
  color: var(--ink); text-decoration: none;
}
a.kaufweg:hover { border-color: var(--ink); background: var(--cream-3); }
.kaufweg .kicker { font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: var(--terracotta-ink); }
.kaufweg .titel { font-family: var(--font-head); font-size: 1.35rem; font-weight: 500; line-height: 1.15; }
.kaufweg .detail { font-size: 0.9rem; line-height: 1.5; color: var(--ink-muted); margin-top: auto; }
.kaufwege-foot { margin: var(--sp-7) 0 0; padding-top: var(--sp-5); border-top: 1px solid var(--border-lt-soft); font-size: 0.9rem; line-height: 1.6; color: var(--ink-dim); max-width: 80ch; }
@media (max-width: 999.98px) { .kaufwege-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559.98px) { .kaufwege-grid { grid-template-columns: 1fr; } .kaufwege-isbn { text-align: left; } }

/* ===================== AUTOR ===================== */
.author-grid {
  display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 70px); align-items: center;
}
.author-portrait { margin: 0; }
.author-portrait img { width: 100%; height: auto; background: var(--bg-tile); border: 1px solid var(--border); }
.author-copy { display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }
.author-copy h2 { margin: 0; font-weight: 500; font-size: clamp(1.8rem, 3.8vw, 2.75rem); color: var(--text-warm); }
.author-copy > p:not([class]) { margin: 0; font-size: 1.08rem; line-height: 1.7; color: var(--text-muted); max-width: 56ch; text-wrap: pretty; }
@media (max-width: 899.98px) {
  .author-grid { grid-template-columns: 1fr; }
  .author-portrait { max-width: 320px; }
}

/* ===================== FAQ ===================== */
.faq-grid {
  display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 70px); align-items: start;
}
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--border); padding: var(--sp-5) 0; }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  font-family: var(--font-head); font-size: 1.12rem; font-weight: 400;
  color: var(--text-warm); cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-dim); }
.faq-icon-v { transform-origin: center; transition: transform 200ms var(--ease-out-expo); }
.faq-item[open] .faq-icon-v { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .faq-icon-v { transition: none; } }
.faq-item p { margin: var(--sp-3) 0 0; color: var(--text-dim); font-size: 1.02rem; line-height: 1.65; max-width: 62ch; }
@media (max-width: 899.98px) { .faq-grid { grid-template-columns: 1fr; } }

/* ===================== SCHLUSSZITAT ===================== */
.quote-block { max-width: 820px; }
.quote-media { position: relative; overflow: hidden; margin-bottom: var(--sp-6); aspect-ratio: 16 / 9; border: 1px solid var(--border); }
.quote-media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
@supports (animation-timeline: view()) {
  .quote-media img.anim-ready {
    animation: quote-parallax linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}
@keyframes quote-parallax {
  from { transform: translateY(-5%) scale(1.08); }
  to   { transform: translateY(5%) scale(1.08); }
}
.quote-media::after { content: ""; position: absolute; inset: 0; background: rgba(10,7,4,0.55); }
.quote-block .line {
  position: relative; font-family: var(--font-head); font-weight: 500;
  font-size: clamp(1.6rem, 4.2vw, 2.5rem); line-height: 1.22;
  color: var(--text-warm); margin: 0;
  hanging-punctuation: first; /* Progressive Enhancement, nur Safari */
}
.quote-block .line-tr { font-family: var(--font-body); font-style: italic; font-weight: 400; color: var(--text-dim); font-size: 0.55em; display: block; margin-top: var(--sp-3); }

/* ===================== FOOTER ===================== */
footer.site-footer { background: var(--bg-deep); border-top: 1px solid var(--border); padding-block: clamp(48px, 6vw, 70px) clamp(40px, 5vw, 50px); }
.footer-top { display: flex; justify-content: space-between; gap: var(--sp-7); flex-wrap: wrap; align-items: flex-start; margin-bottom: var(--sp-7); }
.footer-brand { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-wordmark { font-family: var(--font-head); font-size: 1.15rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--cream); }
.footer-price { font-size: 0.95rem; color: var(--text-legal); }
.footer-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.footer-anchors { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.footer-anchors a { font-family: var(--font-head); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-legal); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.footer-anchors a:hover { color: var(--text-muted); }
.footer-legal { border-top: 1px solid var(--border-soft); padding-top: var(--sp-5); display: flex; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; font-size: 0.82rem; line-height: 1.6; color: var(--text-legal); }
.footer-legal p { margin: 0 0 var(--sp-3); max-width: 62ch; }
.footer-legal a { color: var(--text-legal); }
.footer-legal a:hover { color: var(--text-muted); }
.footer-meta { display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center; }
.footer-meta a { display: inline-flex; align-items: center; min-height: 44px; }
/* Kolophon: ein Impressumsdetail aus dem Buchdruck, das die Seite als
   gestaltetes Objekt markiert statt als Template-Ausgabe. */
.colophon { font-variant-caps: small-caps; letter-spacing: 0.04em; }

/* ===================== LIGHTBOX ===================== */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center;
  background: rgba(10,7,4,0.94); padding: var(--sp-5);
}
.lightbox.is-open { display: flex; }
.lightbox-inner { position: relative; max-width: min(92vw, 900px); max-height: 88vh; }
.lightbox-inner img, .lightbox-inner video { max-width: 100%; max-height: 88vh; display: block; margin: 0 auto; }
/* Kacheln mit Zitat haengen Inhalt unter das Medium; ein volles 88vh-Medium
   liesse dafuer keinen Platz und schoebe es aus dem Bild. Nur .has-quote. */
.lightbox-inner.has-quote { overflow-y: auto; }
.lightbox-inner.has-quote img, .lightbox-inner.has-quote video { max-height: 62vh; }
.lightbox-close {
  position: absolute; top: -52px; right: 0;
  background: transparent; border: 1px solid #4A423A; color: var(--text-warm);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lightbox-close svg { width: 20px; height: 20px; }
.lightbox-caption { margin-top: var(--sp-3); text-align: center; color: var(--text-muted); font-size: 0.85rem; font-variant-caps: small-caps; letter-spacing: 0.03em; }
.lightbox-quote { margin: var(--sp-3) auto 0; max-width: 46ch; text-align: center; font-family: var(--font-body); font-style: italic; font-size: 1rem; line-height: 1.6; color: var(--text-warm); }
.lightbox-buy-hint { margin-top: var(--sp-2); text-align: center; font-size: 0.82rem; color: var(--text-dim); }
.lightbox-buy-hint a { color: var(--terracotta-lt); text-decoration: underline; text-underline-offset: 2px; }

/* ===================== DANKESEITE / FEHLERSEITE ===================== */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: clamp(72px, 10vw, 128px) var(--gutter); }
.legal-wrap h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 500; margin: 0 0 var(--sp-6); color: var(--text-warm); }
.legal-wrap h2 { font-size: 1.15rem; font-weight: 500; margin: var(--sp-7) 0 var(--sp-3); color: var(--text-warm); }
.legal-wrap p, .legal-wrap li { font-size: 1.02rem; color: var(--text); max-width: 65ch; line-height: 1.7; }
.legal-wrap ul { padding-left: 1.2em; }
.legal-wrap .back { display: inline-block; margin-top: var(--sp-8); }
.legal-wrap .notice-ok { border-left: 2px solid var(--terracotta); padding-left: var(--sp-5); }
.legal-wrap .notice-fail { border-left: 2px solid #b3453f; padding-left: var(--sp-5); }