/* Sunset Coffee Sassnitz – main.css. Erzeugt aus src/css/*.css durch tools/build.mjs. Nicht direkt bearbeiten. */

/* ===== 00-fonts.css ===== */
/* Schriften: lokal ausgeliefert (SIL Open Font License 1.1, Lizenztexte liegen neben den Dateien).
   Bricolage Grotesque: Display und Ueberschriften, Achsen wght 200-800 und wdth 75-100.
   Instrument Sans: Fliesstext, Achse wght 400-700.
   Fallback-Schriften sind in der Breite angepasst, damit der Wechsel keine Layoutspruenge ausloest. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-wdth.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Instrument Fallback";
  src: local("Arial");
  size-adjust: 100%;
  ascent-override: 93%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ===== 01-tokens.css ===== */
/* Gestaltungssystem "Die Scheibe geht auf": alle Werte einmal hier, nirgends im Dokument neu erfunden.
   Leitidee: Eine Scheibe (Sonne, Eigelb, Teller, Tasse von oben, Zifferblatt) geht ueber den Vormittag auf.
   --t ist die Morgenzeit der Seite (0 = 07:00, 1 = 12:00) und wird beim Scrollen gesetzt (siehe core.js). */

@property --t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.2;
}

:root {
  /* Farbwelt Morgenlicht (hell). Kontrastwerte siehe design-system.md */
  --c-kreide: #f6f1e6;
  --c-nebel: #dce5e3;
  --c-butter: #fcebb4;
  --c-dotter: #ffc21f;
  --c-dotter-tief: #f0a000;
  --c-tinte: #2a1b14;
  --c-tinte-weich: #5b463a;
  --c-hafen: #17525e;
  --c-hafen-hell: #cfe3e2;
  --c-kupfer: #b53a17;
  --c-kupfer-dunkel: #8f2c10;
  --c-papier: #fffaf0;
  --c-linie: rgb(42 27 20 / 0.55);
  --c-linie-fein: rgb(42 27 20 / 0.18);
  --c-schatten: rgb(60 30 10 / 0.24);
  --c-fokus: #17525e;

  /* Morgenzeit: --t0 bis --t2 teilen den Verlauf in zwei Abschnitte (Nebel -> Kreide -> Butter) */
  --t: 0.2;
  --t1: min(var(--t) * 2, 1);
  --t2: max(var(--t) * 2 - 1, 0);
  --bg-morgen: var(--c-kreide);
  --bg-morgen: color-mix(in oklab, color-mix(in oklab, var(--c-nebel) calc((1 - var(--t1)) * 100%), var(--c-kreide)) calc((1 - var(--t2)) * 100%), var(--c-butter));

  /* Licht und Schatten: die Scheibe ist die Lichtquelle. Frueh lange Schatten nach rechts, mittags kurz und senkrecht. */
  --sx: calc((1 - var(--t)) * 1.15rem);
  --sy: calc(0.3rem + var(--t) * 0.75rem);
  --sb: calc(0.9rem + var(--t) * 0.9rem);
  --schatten-1: var(--sx) var(--sy) var(--sb) var(--c-schatten);
  --schatten-2: calc(var(--sx) * 2) calc(var(--sy) * 1.8) calc(var(--sb) * 2) rgb(60 30 10 / 0.2);

  /* Schrift */
  --f-display: "Bricolage Grotesque", "Bricolage Fallback", "Arial Nova", Arial, sans-serif;
  --f-text: "Instrument Sans", "Instrument Fallback", "Segoe UI", Arial, sans-serif;
  --fs-0: clamp(1rem, 0.96rem + 0.2vw, 1.15rem);
  --fs-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.4rem);
  --fs-2: clamp(1.4rem, 1.2rem + 0.9vw, 2rem);
  --fs-3: clamp(1.9rem, 1.4rem + 2vw, 3.2rem);
  --fs-4: clamp(2.6rem, 1.6rem + 4.2vw, 5.6rem);
  --fs-hero: clamp(3.3rem, 0.9rem + 9.2vw, 10.5rem);
  --fs-klein: clamp(0.84rem, 0.8rem + 0.15vw, 0.95rem);
  --lh-text: 1.6;
  --lh-eng: 0.94;

  /* Raster: 12 Spalten, Rand und Rinne fliessend; Wechsel zwischen Dichte (eng) und Weite (weit) */
  --rand: clamp(1.1rem, 4.2vw, 4rem);
  --rinne: clamp(0.9rem, 2vw, 2rem);
  --breite: 112rem;
  --lese: 38rem;
  --abstand-eng: clamp(2.5rem, 5vw, 5rem);
  --abstand-normal: clamp(4rem, 9vw, 9rem);
  --abstand-weit: clamp(6rem, 15vw, 16rem);

  /* Formen */
  --r-klein: 0.5rem;
  --r-mittel: 1rem;
  --r-voll: 999px;
  --linie: 1.5px;

  /* Bewegung: alles geht auf (von unten nach oben), langsam anlaufend, weich auslaufend */
  --ease-aufgehen: cubic-bezier(0.22, 0.9, 0.24, 1);
  --ease-weich: cubic-bezier(0.45, 0, 0.2, 1);
  --ease-feder: linear(0, 0.063, 0.214, 0.406, 0.602, 0.778, 0.919, 1.022, 1.086, 1.119, 1.126, 1.116, 1.096, 1.071, 1.047, 1.025, 1.008, 0.996, 0.988, 0.985, 0.984, 0.986, 1);
  --ease-feder-sanft: linear(0, 0.066, 0.215, 0.393, 0.566, 0.715, 0.833, 0.92, 0.978, 1.013, 1.032, 1.038, 1.037, 1.032, 1.026, 1.019, 1.013, 1.008, 1.004, 1.001, 1);
  --d-fein: 180ms;
  --d-kurz: 420ms;
  --d-mittel: 900ms;
  --d-lang: 1400ms;
  --versatz: 90ms;

  --kopf-hoehe: 4.6rem;

  /* Ebenen */
  --z-hintergrund: 0;
  --z-inhalt: 1;
  --z-kopf: 50;
  --z-menue: 60;
  --z-banner: 70;
}

@media (min-width: 100em) {
  :root {
    --breite: 124rem;
  }
}

/* ===== 02-base.css ===== */
/* Grundlagen: Reset, Typografie, Fokus, Hilfsklassen. Ohne JavaScript bleibt alles lesbar. */

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

html {
  /* Fliessende Grundgroesse: auf grossen Bildschirmen waechst das ganze rem-basierte Layout mit */
  font-size: clamp(16px, 0.42vw + 10.2px, 21px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto;
  scroll-padding-top: 6rem;
  background: var(--c-kreide);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--f-text);
  font-size: var(--fs-0);
  line-height: var(--lh-text);
  color: var(--c-tinte);
  background: var(--c-kreide);
  background: var(--bg-morgen);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1,
h2,
h3,
h4 {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 88%;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-4);
  font-weight: 700;
}
h2 {
  font-size: var(--fs-3);
}
h3 {
  font-size: var(--fs-2);
  line-height: 1.1;
}
h4 {
  font-size: var(--fs-1);
  line-height: 1.2;
}

p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
  max-width: var(--lese);
}

ul,
ol {
  margin: 0 0 1.1em;
  padding-left: 1.25em;
  max-width: var(--lese);
}

li + li {
  margin-top: 0.4em;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

address {
  font-style: normal;
}

table {
  border-collapse: collapse;
  width: 100%;
}

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

button {
  cursor: pointer;
}

hr {
  border: 0;
  border-top: var(--linie) solid var(--c-linie-fein);
  margin: 2rem 0;
}

::selection {
  background: var(--c-dotter);
  color: var(--c-tinte);
}

/* Sichtbarer Fokus fuer alle bedienbaren Elemente (WCAG 2.4.7 / 2.4.11) */
:focus-visible {
  outline: 3px solid var(--c-fokus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Hilfsklassen */
.nur-leser {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprung {
  position: absolute;
  left: var(--rand);
  top: -6rem;
  z-index: 100;
  padding: 0.8rem 1.2rem;
  background: var(--c-tinte);
  color: var(--c-kreide);
  border-radius: var(--r-klein);
  transition: top var(--d-fein) var(--ease-weich);
}
.sprung:focus {
  top: 1rem;
}

/* Lenis (lokale Bibliothek): notwendige Grundregeln */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ===== 03-layout.css ===== */
/* Layout: eigenes 12-Spalten-Raster mit Wechsel zwischen Dichte (eng gepackte Fakten) und Weite (grosse Typografie).
   Es gibt bewusst keine gleichfoermigen Abschnitte: jede Szene hat ihr eigenes Spaltenverhalten. */

.huelle {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}

.raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--rinne);
}

/* Mobil zuerst: alles einspaltig; ab 48em greifen die Spaltenklassen */
.raster > * {
  grid-column: 1 / -1;
}

@media (min-width: 48em) {
  .sp-1-5 { grid-column: 1 / 6; }
  .sp-1-6 { grid-column: 1 / 7; }
  .sp-1-7 { grid-column: 1 / 8; }
  .sp-1-8 { grid-column: 1 / 9; }
  .sp-2-7 { grid-column: 2 / 8; }
  .sp-2-12 { grid-column: 2 / 13; }
  .sp-3-9 { grid-column: 3 / 10; }
  .sp-4-12 { grid-column: 4 / 13; }
  .sp-5-12 { grid-column: 5 / 13; }
  .sp-6-12 { grid-column: 6 / 13; }
  .sp-7-12 { grid-column: 7 / 13; }
  .sp-8-12 { grid-column: 8 / 13; }
  .sp-ganz { grid-column: 1 / -1; }
}

/* Abschnitte: Rhythmus ueber Abstandsklassen statt immer gleicher Polster */
.abschnitt {
  position: relative;
  padding-block: var(--abstand-normal);
}
.abschnitt--eng {
  padding-block: var(--abstand-eng);
}
.abschnitt--weit {
  padding-block: var(--abstand-weit);
}
.abschnitt--oben0 {
  padding-top: 0;
}

/* Horizontlinie: das wiederkehrende Detail. Text "geht" von dieser Linie auf. */
.horizont {
  position: relative;
  height: var(--linie);
  background: var(--c-linie);
  margin: 0;
  border: 0;
}

.dicht {
  display: grid;
  gap: 1px;
  background: var(--c-linie-fein);
  border-block: var(--linie) solid var(--c-linie-fein);
}
.dicht > * {
  background: var(--bg-morgen);
  padding: clamp(1.1rem, 2.4vw, 2rem);
}
@media (min-width: 48em) {
  .dicht--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dicht--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

main {
  display: block;
}

/* ===== 04-komponenten.css ===== */
/* Komponenten: Kopf, Navigation, Knoepfe, Status, Formulare, Akkordeon, Einwilligung, Fuss.
   Jede Rueckmeldung hat einen Zweck (Zustand zeigen, Orientierung geben). */

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: var(--z-kopf);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  row-gap: 0.15rem;
  min-height: var(--kopf-hoehe);
  padding: 0.7rem var(--rand);
  background: var(--c-kreide);
  background: var(--bg-morgen);
  border-bottom: var(--linie) solid var(--c-linie-fein);
}
.kopf--fest {
  border-bottom-color: var(--c-linie-fein);
}

.wortmarke {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.7rem);
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.wortmarke__eins {
  font-weight: 750;
  font-stretch: 85%;
}
.wortmarke__zwei {
  font-weight: 300;
  font-stretch: 100%;
}
.wortmarke__scheibe {
  align-self: center;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--c-dotter);
  box-shadow: 0.06em 0.1em 0.18em rgb(60 30 10 / 0.35), inset -0.05em -0.07em 0.1em rgb(240 160 0 / 0.65);
  transition: transform var(--d-kurz) var(--ease-feder);
}
.wortmarke:hover .wortmarke__scheibe,
.wortmarke:focus-visible .wortmarke__scheibe {
  transform: translateY(-0.12em) scale(1.18);
}

.nav-aktionen {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ---------- Navigation ---------- */
.nav {
  /* Basisfassung (ohne JavaScript, kleine Bildschirme): Navigation als eigene Zeile unter Wortmarke und Sprache */
  order: 3;
  flex: 1 1 100%;
  padding-bottom: 0.5rem;
}
@media (min-width: 62em) {
  .nav {
    order: 0;
    flex: 0 1 auto;
    padding-bottom: 0;
  }
  .kopf {
    flex-wrap: nowrap;
  }
}
.nav__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.nav__liste li + li {
  margin-top: 0;
}
.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0;
  font-weight: 560;
  text-decoration: none;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.2rem;
  height: 0.16em;
  background: var(--c-dotter-tief);
  border-radius: 1em;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-kurz) var(--ease-aufgehen);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.menue-knopf {
  display: none;
}

/* Mit JavaScript wird die Navigation auf kleinen Bildschirmen zum Vollbildmenue (Offcanvas) */
@media (max-width: 62em) {
  .js .menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.4rem 0.9rem;
    background: var(--c-tinte);
    color: var(--c-kreide);
    border: 0;
    border-radius: var(--r-voll);
    font-weight: 600;
  }
  .menue-knopf__striche {
    position: relative;
    width: 1.1rem;
    height: 0.7rem;
  }
  .menue-knopf__striche::before,
  .menue-knopf__striche::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--d-kurz) var(--ease-aufgehen), top var(--d-kurz) var(--ease-aufgehen);
  }
  .menue-knopf__striche::before {
    top: 0;
  }
  .menue-knopf__striche::after {
    top: calc(100% - 2px);
  }
  .menue-knopf[aria-expanded="true"] .menue-knopf__striche::before {
    top: calc(50% - 1px);
    transform: rotate(45deg);
  }
  .menue-knopf[aria-expanded="true"] .menue-knopf__striche::after {
    top: calc(50% - 1px);
    transform: rotate(-45deg);
  }

  .js .nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-menue);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6rem var(--rand) 3rem;
    background: var(--c-butter);
    visibility: hidden;
    clip-path: circle(0% at calc(100% - 3rem) 2.2rem);
    transition: clip-path var(--d-mittel) var(--ease-aufgehen), visibility 0s linear var(--d-mittel);
  }
  .js .nav.ist-offen {
    visibility: visible;
    clip-path: circle(150% at calc(100% - 3rem) 2.2rem);
    transition: clip-path var(--d-mittel) var(--ease-aufgehen), visibility 0s;
  }
  .js .nav__liste {
    flex-direction: column;
    gap: 0.2rem;
  }
  .js .nav__link {
    font-family: var(--f-display);
    font-size: clamp(2.2rem, 9vw, 3.6rem);
    font-weight: 650;
    font-stretch: 88%;
    letter-spacing: -0.03em;
    line-height: 1.1;
    padding: 0.3rem 0;
  }
  .js .nav__zeile {
    display: block;
    overflow: hidden;
  }
  .js .nav__zeile > * {
    display: inline-block;
    transform: translateY(105%);
    transition: transform var(--d-mittel) var(--ease-aufgehen);
  }
  .js .nav.ist-offen .nav__zeile > * {
    transform: none;
  }
  .js .nav.ist-offen li:nth-child(2) .nav__zeile > * { transition-delay: calc(var(--versatz) * 1); }
  .js .nav.ist-offen li:nth-child(3) .nav__zeile > * { transition-delay: calc(var(--versatz) * 2); }
  .js .nav.ist-offen li:nth-child(4) .nav__zeile > * { transition-delay: calc(var(--versatz) * 3); }
  .js .nav.ist-offen li:nth-child(5) .nav__zeile > * { transition-delay: calc(var(--versatz) * 4); }
  .js .kopf .nav__ende {
    display: block;
    margin-top: 2rem;
  }
}
/* Der Tisch-Knopf im Menue gehoert nur zum Vollbildmenue (mit JavaScript) */
.nav__ende {
  display: none;
}

/* ---------- Sprachumschalter ---------- */
.sprache {
  display: inline-flex;
  border: var(--linie) solid var(--c-linie);
  border-radius: var(--r-voll);
  overflow: hidden;
  font-size: var(--fs-klein);
  font-weight: 650;
}
.sprache a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  min-height: 2.4rem;
  padding: 0 0.7rem;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.sprache a[aria-current="true"] {
  background: var(--c-tinte);
  color: var(--c-kreide);
}
.sprache a:not([aria-current="true"]):hover {
  background: var(--c-dotter);
}

/* ---------- Knoepfe ---------- */
.knopf {
  --mx: 50%;
  --my: 50%;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 3.1rem;
  padding: 0.7rem 1.6rem;
  border: 0;
  border-radius: var(--r-voll);
  background: var(--c-kupfer);
  color: var(--c-papier);
  font-family: var(--f-display);
  font-size: 1.08rem;
  font-weight: 650;
  font-stretch: 92%;
  letter-spacing: -0.01em;
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--schatten-1);
  transition: transform var(--d-kurz) var(--ease-feder), box-shadow var(--d-kurz) var(--ease-weich);
}
.knopf::before {
  /* die Scheibe geht vom Zeiger aus auf */
  content: "";
  position: absolute;
  left: var(--mx);
  top: var(--my);
  z-index: -1;
  width: 30rem;
  height: 30rem;
  margin: -15rem 0 0 -15rem;
  border-radius: 50%;
  background: var(--c-dotter);
  transform: scale(0);
  transition: transform var(--d-mittel) var(--ease-aufgehen);
}
.knopf:hover,
.knopf:focus-visible {
  color: var(--c-tinte);
}
.knopf:hover::before,
.knopf:focus-visible::before {
  transform: scale(1);
}
.knopf:active {
  transform: scale(0.96);
}
.knopf__pfeil {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  transition: transform var(--d-kurz) var(--ease-feder);
}
.knopf:hover .knopf__pfeil,
.knopf:focus-visible .knopf__pfeil {
  transform: translate(0.2em, -0.2em);
}

.knopf--linie {
  background: transparent;
  color: var(--c-tinte);
  box-shadow: inset 0 0 0 var(--linie) var(--c-tinte);
}
.knopf--klein {
  min-height: 2.6rem;
  padding: 0.45rem 1.2rem;
  font-size: 0.98rem;
}

.textlink {
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(var(--c-dotter), var(--c-dotter)) left bottom / 100% 0.18em no-repeat;
  transition: background-size var(--d-kurz) var(--ease-aufgehen);
}
.textlink:hover,
.textlink:focus-visible {
  background-size: 100% 100%;
}

/* ---------- Status "jetzt geoeffnet" ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.95rem 0.4rem 0.75rem;
  border: var(--linie) solid var(--c-linie);
  border-radius: var(--r-voll);
  font-size: var(--fs-klein);
  font-weight: 600;
  line-height: 1.2;
  background: var(--c-papier);
}
.status__punkt {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--c-tinte-weich);
}
.status[data-zustand="offen"] .status__punkt {
  background: var(--c-dotter-tief);
  box-shadow: 0 0 0 0 rgb(240 160 0 / 0.55);
  animation: puls 2.6s var(--ease-weich) infinite;
}
@keyframes puls {
  0%   { box-shadow: 0 0 0 0 rgb(240 160 0 / 0.5); }
  70%  { box-shadow: 0 0 0 0.6rem rgb(240 160 0 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(240 160 0 / 0); }
}

/* ---------- Oeffnungszeiten ---------- */
.zeiten {
  width: 100%;
  max-width: 28rem;
}
.zeiten th,
.zeiten td {
  padding: 0.65rem 0;
  text-align: left;
  font-weight: 500;
  border-bottom: var(--linie) solid var(--c-linie-fein);
  font-variant-numeric: tabular-nums;
}
.zeiten th {
  font-weight: 650;
}
.zeiten td {
  text-align: right;
}
.zeiten tr.ist-heute th,
.zeiten tr.ist-heute td {
  background: linear-gradient(var(--c-dotter), var(--c-dotter)) left center / 100% 70% no-repeat;
  padding-inline: 0.5rem;
}

/* ---------- Formulare ---------- */
.formular {
  display: grid;
  gap: 1.3rem;
}
.formular__zwei {
  display: grid;
  gap: 1.3rem;
}
@media (min-width: 40em) {
  .formular__zwei {
    grid-template-columns: 1fr 1fr;
  }
}
.feld {
  position: relative;
  display: grid;
  gap: 0.4rem;
}
.feld label,
.feld__titel {
  font-weight: 650;
  font-size: var(--fs-klein);
  letter-spacing: 0.02em;
}
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.7rem 0.9rem;
  background: var(--c-papier);
  border: var(--linie) solid var(--c-linie);
  border-radius: var(--r-klein);
  transition: border-color var(--d-fein) var(--ease-weich), box-shadow var(--d-kurz) var(--ease-weich);
}
.feld textarea {
  min-height: 8rem;
  resize: vertical;
}
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
  outline: 3px solid var(--c-fokus);
  outline-offset: 2px;
  border-color: var(--c-tinte);
}
.feld[data-zustand="fehler"] input,
.feld[data-zustand="fehler"] select,
.feld[data-zustand="fehler"] textarea {
  border-color: var(--c-kupfer-dunkel);
  box-shadow: 0 0 0 3px rgb(181 58 23 / 0.18);
}
.feld[data-zustand="ok"] input,
.feld[data-zustand="ok"] select,
.feld[data-zustand="ok"] textarea {
  border-color: var(--c-hafen);
}
.feld__fehler {
  display: none;
  color: var(--c-kupfer-dunkel);
  font-size: var(--fs-klein);
  font-weight: 600;
}
.feld[data-zustand="fehler"] .feld__fehler {
  display: block;
  animation: aufsteigen var(--d-kurz) var(--ease-aufgehen) both;
}
.feld__hinweis {
  font-size: var(--fs-klein);
  color: var(--c-tinte-weich);
}
.feld--falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.haken {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: var(--fs-klein);
}
.haken input {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0.1rem 0 0;
  accent-color: var(--c-kupfer);
}
.wahl {
  display: inline-flex;
  padding: 0.25rem;
  gap: 0.25rem;
  border: var(--linie) solid var(--c-linie);
  border-radius: var(--r-voll);
  background: var(--c-papier);
}
.wahl input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.wahl label {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0 1.1rem;
  border-radius: var(--r-voll);
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  transition: background-color var(--d-kurz) var(--ease-weich), color var(--d-kurz) var(--ease-weich);
}
.wahl input:checked + label {
  background: var(--c-tinte);
  color: var(--c-kreide);
}
.wahl input:focus-visible + label {
  outline: 3px solid var(--c-fokus);
  outline-offset: 2px;
}
.formular__meldung {
  min-height: 1.5rem;
  font-weight: 600;
}
.formular__meldung[data-art="ok"] {
  color: var(--c-hafen);
}
.formular__meldung[data-art="fehler"] {
  color: var(--c-kupfer-dunkel);
}

@keyframes aufsteigen {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Akkordeon (FAQ) ---------- */
.akkordeon {
  border-top: var(--linie) solid var(--c-linie);
  max-width: 52rem;
}
.akkordeon details {
  border-bottom: var(--linie) solid var(--c-linie);
}
.akkordeon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  font-family: var(--f-display);
  font-size: var(--fs-1);
  font-weight: 600;
  font-stretch: 92%;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
}
.akkordeon summary::-webkit-details-marker {
  display: none;
}
.akkordeon summary::after {
  content: "";
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--c-tinte), var(--c-tinte)) center / 0.9rem 2px no-repeat,
    linear-gradient(var(--c-tinte), var(--c-tinte)) center / 2px 0.9rem no-repeat,
    var(--c-dotter);
  transition: transform var(--d-kurz) var(--ease-feder);
}
.akkordeon details[open] summary::after {
  transform: rotate(135deg);
}
.akkordeon summary:hover::after {
  transform: scale(1.12);
}
.akkordeon details[open] summary:hover::after {
  transform: rotate(135deg) scale(1.12);
}
.akkordeon__inhalt {
  padding: 0 0 1.4rem;
}
.akkordeon__inhalt > :last-child {
  margin-bottom: 0;
}

/* ---------- Einwilligung ---------- */
.einwilligung {
  position: fixed;
  left: var(--rand);
  right: var(--rand);
  bottom: 1rem;
  z-index: var(--z-banner);
  max-width: 25rem;
  padding: 1rem 1.15rem;
  background: var(--c-papier);
  border: var(--linie) solid var(--c-tinte);
  border-radius: var(--r-mittel);
  box-shadow: var(--schatten-2);
}
.einwilligung {
  display: none;
}
/* Sichtbar nur mit JavaScript und solange keine Entscheidung gespeichert ist (boot.js setzt .braucht-einwilligung schon vor dem ersten Rendern) */
.js.braucht-einwilligung .einwilligung {
  display: block;
}
.einwilligung h2 {
  font-size: 1.1rem;
  margin-bottom: 0.3em;
}
.einwilligung p {
  font-size: var(--fs-klein);
  line-height: 1.45;
  margin-bottom: 0.7rem;
}
.einwilligung__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* ---------- Karte (Google Maps nach Einwilligung) ---------- */
.karte {
  position: relative;
  min-height: 22rem;
  border: var(--linie) solid var(--c-tinte);
  border-radius: var(--r-mittel);
  overflow: hidden;
  background: var(--c-hafen-hell);
}
.karte iframe {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  border: 0;
}
.karte__sperre {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.8rem;
  min-height: 22rem;
  padding: clamp(1.2rem, 3vw, 2.4rem);
}
.karte__sperre p {
  margin: 0;
}

/* ---------- Sticky Aktionsleiste (mobil) ---------- */
.aktionsleiste {
  display: none;
}
@media (max-width: 47.99em) {
  .js .aktionsleiste {
    position: fixed;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: var(--z-kopf);
    display: flex;
    gap: 0.5rem;
    padding: 0.45rem;
    background: var(--c-papier);
    border: var(--linie) solid var(--c-tinte);
    border-radius: var(--r-voll);
    box-shadow: var(--schatten-2);
    transform: translateY(0);
    transition: transform var(--d-mittel) var(--ease-aufgehen);
  }
  .js .aktionsleiste.ist-versteckt {
    transform: translateY(calc(100% + 1rem));
  }
  .aktionsleiste .knopf {
    flex: 1;
    min-height: 2.75rem;
    padding-inline: 0.8rem;
    font-size: 1rem;
  }
  .js body {
    padding-bottom: 4.5rem;
  }
}

/* ---------- Fuss ---------- */
.fuss {
  border-top: var(--linie) solid var(--c-tinte);
  padding-block: var(--abstand-eng) 2rem;
  background: var(--c-kreide);
  background: color-mix(in oklab, var(--bg-morgen) 70%, var(--c-papier));
}
.fuss__raster {
  display: grid;
  gap: 2.2rem var(--rinne);
}
@media (min-width: 48em) {
  .fuss__raster {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}
.fuss h2 {
  font-size: var(--fs-klein);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--f-text);
  font-weight: 700;
  font-stretch: 100%;
  margin-bottom: 0.9em;
}
.fuss ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fuss a {
  text-decoration-color: var(--c-linie-fein);
}
.fuss a:hover {
  text-decoration-color: currentColor;
}
.fuss__klein {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: var(--linie) solid var(--c-linie-fein);
  font-size: var(--fs-klein);
  color: var(--c-tinte-weich);
}

/* ===== 05-szenen.css ===== */
/* Szenen der Startseite und gemeinsame Szenenbausteine.
   Staffel: Held (weit, raeumlich) -> Morgen (gelb, dicht+weit) -> Passage (horizontal) -> Ankommen (dicht) -> Finale (weit).
   Fassungen: Standard (js, ohne .ruhe/.leicht) = pinned Kamerafahrt; .leicht = reduzierte Inszenierung; .ruhe/no-JS = ruhige, statische Fassung. */

/* ---------- Morgenlinie: Lesefortschritt im Kopf, die Scheibe wandert von 07 bis 12 ---------- */
.morgenlinie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-inline: var(--rand);
  pointer-events: none;
  height: 0.9rem;
  transform: translateY(50%);
}
.morgenlinie__zeit {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-tinte-weich);
  background: var(--bg-morgen);
  padding-inline: 0.25rem;
  line-height: 1;
}
.morgenlinie__bahn {
  position: relative;
  flex: 1;
  height: var(--linie);
  background: var(--c-linie);
}
.morgenlinie__scheibe {
  position: absolute;
  top: 50%;
  left: calc(var(--t) * 100%);
  width: 0.95rem;
  height: 0.95rem;
  margin: -0.475rem 0 0 -0.475rem;
  border-radius: 50%;
  background: var(--c-dotter);
  box-shadow: 0.05rem 0.1rem 0.25rem rgb(60 30 10 / 0.4), inset -0.12rem -0.15rem 0.2rem rgb(240 160 0 / 0.7);
}
.morgenlinie__uhr {
  position: absolute;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  background: var(--c-tinte);
  color: var(--c-kreide);
  border-radius: var(--r-voll);
  opacity: 0;
  transition: opacity var(--d-kurz) var(--ease-weich);
}
.kopf--fest .morgenlinie__uhr,
.kopf:hover .morgenlinie__uhr {
  opacity: 1;
}

/* ---------- Gemeinsame Bausteine ---------- */
.scheibe {
  border-radius: 50%;
  background: radial-gradient(circle at 32% 27%, #ffe784 0%, var(--c-dotter) 46%, var(--c-dotter-tief) 100%);
  box-shadow: var(--schatten-2), inset -0.9rem -1.2rem 2.4rem rgb(240 140 0 / 0.55);
}

/* Zeilenweises Erscheinen: jede Zeile steigt aus einer Maske auf, die Basislinie ist der Horizont */
.zeile {
  display: block;
  overflow: clip;
  /* etwas Luft fuer Unterlaengen, damit die Maske nichts abschneidet */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.zeile__text {
  display: inline-block;
  animation: zeileAuf var(--d-lang) var(--ease-aufgehen) both;
  animation-delay: calc(var(--z, 0) * var(--versatz) + 250ms);
}
.zeile:nth-child(2) .zeile__text { --z: 1; }
.zeile:nth-child(3) .zeile__text { --z: 2; }
.zeile:nth-child(4) .zeile__text { --z: 3; }
@keyframes zeileAuf {
  from { transform: translateY(108%) rotate(2.5deg); transform-origin: left bottom; }
  to   { transform: none; }
}

/* Fenster: kleine, gerahmte Bildausschnitte (die vorhandenen Fotos sind klein, daher nie vollflaechig) */
.fenster {
  position: relative;
  overflow: hidden;
  background: var(--c-papier);
  border: 0.45rem solid var(--c-papier);
  box-shadow: var(--schatten-2);
}
.fenster--rund {
  border-radius: 50%;
  aspect-ratio: 1;
}
.fenster picture,
.fenster img {
  display: block;
  width: 100%;
  height: 100%;
}
.fenster img {
  object-fit: cover;
  border-radius: inherit;
}
.fenster--rund img {
  transform: scale(1.04);
}
.fenster::after {
  /* Korn als Oberflaeche: verbindet Fotos verschiedener Quellen */
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/korn.png") 0 0 / 160px 160px;
  mix-blend-mode: soft-light;
  opacity: 0.35;
  pointer-events: none;
  border-radius: inherit;
}
.fenster--bogen {
  border-radius: 999px 999px var(--r-mittel) var(--r-mittel);
}

/* ---------- Szene 1: Held (raeumlicher Hero) ---------- */
.held {
  --hp: 0;
  --px: 0;
  --py: 0;
  position: relative;
  min-height: calc(100svh - var(--kopf-hoehe));
}
.held__buehne {
  position: relative;
  display: grid;
  min-height: calc(100svh - var(--kopf-hoehe));
  overflow: clip;
  perspective: 1500px;
  perspective-origin: 50% 46%;
  isolation: isolate;
}
.held__buehne::before {
  /* Lichtfleck hinter der Scheibe: einziger Verlauf, als Lichtabfall begruendet (E-03) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(52% 62% at 76% 44%, rgb(255 226 120 / 0.5), rgb(255 226 120 / 0) 72%);
  opacity: max(0, calc(1 - var(--hp) * 2));
  pointer-events: none;
}
.held__kamera {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--hp) * 1050px)) rotateX(calc(var(--py) * -2deg)) rotateY(calc(var(--px) * 3deg));
}
.tiefe {
  position: absolute;
  transform-style: preserve-3d;
}
.tiefe--scheibe {
  z-index: 1;
  right: -5vw;
  top: 7%;
  width: min(46vw, 80svh);
  aspect-ratio: 1;
  transform: translateZ(-170px) translate3d(calc(var(--px) * 18px), calc(var(--py) * 12px), 0) scale(calc(1.12 + var(--hp) * 1.4));
}
.tiefe--scheibe .scheibe {
  width: 100%;
  height: 100%;
  animation: scheibeAuf 2.2s var(--ease-aufgehen) 80ms both;
}
@keyframes scheibeAuf {
  from { transform: translateY(62%) scale(0.86); opacity: 0.4; }
  to   { transform: none; opacity: 1; }
}
.held__titel {
  position: absolute;
  z-index: 2;
  left: var(--rand);
  top: clamp(1rem, 3.5svh, 2.6rem);
  margin: 0;
  max-width: 92%;
  font-size: min(var(--fs-hero), 17.5svh);
  font-weight: 760;
  font-stretch: 84%;
  line-height: var(--lh-eng);
  letter-spacing: -0.045em;
  transform: translate3d(calc(var(--px) * -10px), calc(var(--py) * -8px), 20px);
  opacity: max(0, calc(1 - var(--hp) * 1.7));
  text-wrap: nowrap;
}
.held__titel .zeile__text--weit {
  /* Zweite Zeile "Morgen,": die Schrift geht auf (Weite und Gewicht wachsen von leicht und schmal zu kraeftig und breit) */
  animation-name: zeileAuf, schriftAuf;
  animation-duration: var(--d-lang), 2.6s;
  animation-timing-function: var(--ease-aufgehen), var(--ease-aufgehen);
  animation-delay: calc(var(--z, 0) * var(--versatz) + 250ms), 600ms;
  animation-fill-mode: both, backwards;
  padding-left: 0.5em;
  font-weight: 800;
  font-stretch: calc(90% + var(--hp) * 10%);
}
@keyframes schriftAuf {
  from { font-weight: 220; font-stretch: 75%; }
  to   { font-weight: 800; font-stretch: 90%; }
}
.tiefe--fenster {
  z-index: 3;
  right: 15vw;
  bottom: 13%;
  width: clamp(9rem, 20vw, 21rem);
  aspect-ratio: 1;
  transform: translateZ(150px) translate3d(calc(var(--px) * -26px), calc(var(--py) * -18px), 0) rotate(calc(var(--hp) * -14deg));
}
.tiefe--fenster .fenster {
  width: 100%;
  height: 100%;
  animation: fensterAuf 1.5s var(--ease-feder-sanft) 1100ms both;
}
@keyframes fensterAuf {
  from { transform: translateY(40%) scale(0.5); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ring {
  position: absolute;
  inset: -22%;
  animation: ringDreh 70s linear infinite, ringEin 1.6s var(--ease-weich) 1700ms both;
}
.ring text {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 650;
  font-stretch: 90%;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  fill: var(--c-tinte);
}
@keyframes ringDreh {
  to { transform: rotate(360deg); }
}
@keyframes ringEin {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.held__fuss {
  position: absolute;
  z-index: 4;
  left: var(--rand);
  bottom: clamp(1.4rem, 4vh, 3rem);
  max-width: 31rem;
  opacity: max(0, calc(1 - var(--hp) * 3));
  animation: aufsteigen var(--d-lang) var(--ease-aufgehen) 1000ms both;
}
.held__lead {
  font-size: var(--fs-1);
  line-height: 1.45;
  margin-bottom: 1.4rem;
}
.held__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.held__fuellung {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--c-dotter);
  opacity: clamp(0, calc((var(--hp) - 0.72) * 4.5), 1);
  pointer-events: none;
}
.held__weiter {
  position: absolute;
  z-index: 4;
  right: var(--rand);
  bottom: clamp(1.4rem, 4vh, 3rem);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-klein);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: max(0, calc(1 - var(--hp) * 4));
}
.held__weiter svg {
  width: 1.6rem;
  height: 1.6rem;
  animation: wippen 2.4s var(--ease-weich) infinite;
}
@keyframes wippen {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.35rem); }
}

/* Pinned Kamerafahrt nur in der vollen Fassung */
.js:not(.ruhe):not(.leicht) .held {
  height: 250svh;
}
.js:not(.ruhe):not(.leicht) .held__buehne {
  position: sticky;
  top: var(--kopf-hoehe);
  height: calc(100svh - var(--kopf-hoehe));
}

/* Mobil: Titel in drei Zeilen, Scheibe und Fenster ordnen sich um den Text */
@media (max-width: 47.99em) {
  .held__titel {
    top: 2.5%;
    transform: none;
    font-size: clamp(3.4rem, min(21vw, 14svh), 6rem);
  }
  .tiefe--scheibe {
    right: -22vw;
    top: 30%;
    width: 86vw;
  }
  .tiefe--fenster {
    right: 5vw;
    bottom: 43%;
    width: 33vw;
  }
  .held__fuss {
    right: var(--rand);
    bottom: 1.2rem;
  }
  .held__weiter {
    display: none;
  }
}

/* Ruhige Fassung: Komposition bleibt, nichts bewegt sich */
.ruhe .zeile__text,
.ruhe .tiefe--scheibe .scheibe,
.ruhe .tiefe--fenster .fenster,
.ruhe .ring,
.ruhe .held__fuss,
.ruhe .held__weiter svg {
  animation: none;
}
.ruhe .held__kamera,
.ruhe .tiefe,
.ruhe .held__titel,
.ruhe .held__fuss {
  --hp: 0;
}

/* ===== 06-szenen-weiter.css ===== */
/* Weitere Szenen: Morgen (gelb), Passage (horizontal), Ankommen, Finale, Seitenkopf der Unterseiten. */

/* ---------- Szene 2: Morgen (gelbe Flaeche, die Scheibe ist jetzt der Raum) ---------- */
.morgen {
  position: relative;
  overflow: clip;
  background: var(--c-dotter);
  color: var(--c-tinte);
  padding-block: var(--abstand-normal) var(--abstand-eng);
}
.morgen::after {
  /* Korn: die Flaeche bekommt Oberflaeche */
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/korn.png") 0 0 / 160px 160px;
  mix-blend-mode: soft-light;
  opacity: 0.4;
  pointer-events: none;
}
.morgen > * {
  position: relative;
  z-index: 1;
}
.morgen::before {
  /* zwei konzentrische Ringe: die Scheibe als Zifferblatt, nur Kontur, kein Verlauf */
  content: "";
  position: absolute;
  right: -14vw;
  top: 12%;
  width: min(52vw, 46rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: var(--linie) solid rgb(42 27 20 / 0.35);
  box-shadow: 0 0 0 clamp(1.2rem, 3vw, 2.6rem) var(--c-dotter), 0 0 0 calc(clamp(1.2rem, 3vw, 2.6rem) + var(--linie)) rgb(42 27 20 / 0.25);
  pointer-events: none;
}
.morgen__zeit {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin: 0 0 clamp(1.5rem, 4vw, 3rem);
  font-family: var(--f-display);
  font-size: var(--fs-1);
  font-weight: 650;
  letter-spacing: 0.02em;
}
.morgen__zeit-linie {
  flex: 0 1 8rem;
  height: var(--linie);
  background: currentColor;
  align-self: center;
}
.morgen__satz {
  max-width: 62rem;
  margin: 0 0 var(--abstand-eng);
  font-family: var(--f-display);
  font-size: clamp(2rem, 1rem + 4.6vw, 5.4rem);
  font-weight: 640;
  font-stretch: 88%;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.wort {
  display: inline;
}
.morgen__fakten.dicht {
  background: rgb(42 27 20 / 0.28);
  border-color: rgb(42 27 20 / 0.28);
}
.morgen__fakten.dicht > * {
  background: var(--c-dotter);
}
.fakt__titel {
  margin: 0 0 0.5rem;
  font-family: var(--f-text);
  font-size: var(--fs-klein);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fakt__wert {
  margin: 0;
  max-width: none;
  font-family: var(--f-display);
  font-size: var(--fs-2);
  font-weight: 620;
  font-stretch: 90%;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Wort fuer Wort aufleuchten, gekoppelt an den Scrollfortschritt (CSS, wo unterstuetzt) */
@supports (animation-timeline: view()) {
  .js:not(.ruhe) .wort {
    animation: wortLicht linear both;
    animation-timeline: view();
    animation-range: entry calc(8% + var(--w, 0) * 1.6%) entry calc(36% + var(--w, 0) * 1.6%);
  }
}
@keyframes wortLicht {
  from { opacity: 0.2; }
  to   { opacity: 1; }
}

/* ---------- Szene 3: Passage "Bis zwoelf" (horizontal) ---------- */
.passage {
  --pp: 0;
  --weg: 0px;
  position: relative;
  background: var(--c-kreide);
  background: color-mix(in oklab, var(--bg-morgen) 55%, var(--c-papier));
}
.passage__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: var(--abstand-eng) var(--rand) 1.4rem;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
}
.passage__kopf h2 {
  margin: 0;
  font-size: var(--fs-4);
  font-weight: 720;
  font-stretch: 84%;
  line-height: 0.95;
}
.passage__kopf p {
  margin: 0;
  max-width: 24rem;
  color: var(--c-tinte-weich);
}
.passage__rahmen {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0.4rem var(--rand) 3rem;
  scrollbar-width: thin;
  scrollbar-color: var(--c-tinte) transparent;
}
.passage__spur {
  display: flex;
  gap: var(--rinne);
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.passage__spur > li + li {
  margin-top: 0;
}

.szene {
  position: relative;
  flex: 0 0 min(84vw, 36rem);
  scroll-snap-align: center;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1.4rem;
  min-height: 34rem;
  padding: clamp(1.2rem, 2.6vw, 2.2rem);
  border: var(--linie) solid var(--c-tinte);
  border-radius: var(--r-mittel);
  background: var(--c-papier);
  overflow: clip;
}
.szene__scheibe {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 15rem;
}
.szene__scheibe .scheibe {
  position: absolute;
  width: min(15rem, 70%);
  aspect-ratio: 1;
}
.szene__scheibe .fenster {
  position: relative;
  width: min(13rem, 62%);
}
.szene__uhr {
  position: absolute;
  top: clamp(1.2rem, 2.6vw, 2.2rem);
  left: clamp(1.2rem, 2.6vw, 2.2rem);
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.szene__wort {
  margin: 0 0 0.35em;
  font-size: var(--fs-3);
  font-weight: 740;
  font-stretch: 82%;
  line-height: 0.98;
}
.szene__text {
  margin: 0;
}
.szene--gelb {
  background: var(--c-dotter);
}
.szene--hafen {
  background: var(--c-hafen);
  color: var(--c-kreide);
}
.szene--hafen .szene__scheibe .scheibe {
  background: var(--c-kreide);
  box-shadow: var(--schatten-2), inset -0.9rem -1.2rem 2.4rem rgb(23 82 94 / 0.25);
}
.szene--nebel {
  background: var(--c-nebel);
}
.szene__riesig {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 10rem;
  text-align: center;
  font-family: var(--f-display);
  font-size: 2.9rem;
  font-weight: 780;
  font-stretch: 80%;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--c-tinte);
}
.szene--hafen .szene__riesig {
  color: var(--c-hafen);
}

/* Szenen unterscheiden sich in Mass, Versatz und Aufbau (kein gleichfoermiges Kartenraster) */
.szene:nth-child(2) {
  flex-basis: min(88vw, 42rem);
  margin-top: 2.2rem;
}
.szene:nth-child(3) {
  grid-template-rows: 1fr auto;
  min-height: 29rem;
}
.szene:nth-child(3) .szene__scheibe {
  order: 2;
}
.szene:nth-child(3) .szene__uhr {
  top: auto;
  bottom: clamp(1.2rem, 2.6vw, 2.2rem);
}
.szene:nth-child(4) {
  margin-top: 1rem;
  border-radius: 999px 999px var(--r-mittel) var(--r-mittel);
  padding-top: clamp(2.6rem, 4vw, 3.6rem);
}
.szene:nth-child(4) .szene__uhr {
  left: 50%;
  top: 1.4rem;
  transform: translateX(-50%);
}

/* Tiefe in der Passage: Scheibe und Wort laufen leicht gegeneinander (nur volle Fassung) */
.js:not(.ruhe):not(.leicht) .szene__scheibe {
  transform: translate3d(calc(var(--d, 0) * -2.6rem), 0, 0);
}
.js:not(.ruhe):not(.leicht) .szene__wort {
  transform: translate3d(calc(var(--d, 0) * 1.6rem), 0, 0);
}

/* Volle Fassung: Bereich festhalten, die Spur gleitet waagerecht durch */
.js:not(.ruhe):not(.leicht) .passage {
  height: calc(100svh + 260svh);
}
.js:not(.ruhe):not(.leicht) .passage__buehne {
  position: sticky;
  top: var(--kopf-hoehe);
  height: calc(100svh - var(--kopf-hoehe));
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
}
.js:not(.ruhe):not(.leicht) .passage__kopf {
  padding-top: 0;
  width: 100%;
}
.js:not(.ruhe):not(.leicht) .passage__rahmen {
  overflow: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
}
.js:not(.ruhe):not(.leicht) .passage__spur {
  transform: translate3d(calc(var(--pp) * var(--weg) * -1), 0, 0);
}
.js:not(.ruhe):not(.leicht) .szene {
  flex-basis: min(46vw, 34rem);
  min-height: min(32rem, 64svh);
}

/* ---------- Szene 4: Ankommen (dicht, mit Bogenfenster) ---------- */
.ankommen__raster {
  align-items: start;
  row-gap: 2.4rem;
}
.ankommen__bild {
  position: relative;
  max-width: 26rem;
  isolation: isolate;
}
.ankommen__bild .fenster {
  aspect-ratio: 3 / 4;
}
.ankommen__bild::before {
  /* Tuerbogen-Linie, die versetzt hinter dem Fenster steht: die Tuer geht auf */
  content: "";
  position: absolute;
  inset: -0.9rem 0.9rem 0.9rem -0.9rem;
  border: var(--linie) solid var(--c-tinte);
  border-radius: 999px 999px var(--r-mittel) var(--r-mittel);
  z-index: -1;
}
.ankommen__daten {
  display: grid;
  gap: 2rem;
}

/* ---------- Szene 5: Finale ---------- */
.finale {
  position: relative;
  overflow: clip;
  background: var(--c-butter);
  padding-block: var(--abstand-weit) var(--abstand-normal);
}
.finale::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/korn.png") 0 0 / 160px 160px;
  mix-blend-mode: soft-light;
  opacity: 0.35;
  pointer-events: none;
}
.finale__scheibe {
  position: absolute;
  right: -10vw;
  top: -14vw;
  width: min(58vw, 60rem);
  aspect-ratio: 1;
}
.finale__scheibe .scheibe {
  width: 100%;
  height: 100%;
}
.finale .huelle {
  position: relative;
  z-index: 1;
}
.finale__zeit {
  margin: 0 0 1rem;
  font-family: var(--f-display);
  font-size: var(--fs-1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.finale__titel {
  margin: 0 0 2rem;
  font-size: var(--fs-hero);
  font-weight: 780;
  font-stretch: 84%;
  line-height: var(--lh-eng);
  letter-spacing: -0.045em;
}
.finale__lead {
  font-size: var(--fs-1);
  margin-bottom: 1.6rem;
}
.finale__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf {
  position: relative;
  overflow: clip;
  padding-block: clamp(3rem, 8vw, 7rem) var(--abstand-eng);
}
.seitenkopf__scheibe {
  position: absolute;
  right: -8vw;
  top: -4rem;
  width: min(36vw, 30rem);
  aspect-ratio: 1;
  opacity: 0.95;
}
.seitenkopf__scheibe .scheibe {
  width: 100%;
  height: 100%;
  animation: scheibeAuf 2s var(--ease-aufgehen) 80ms both;
}
.seitenkopf .huelle {
  position: relative;
  z-index: 1;
}
.seitenkopf__titel {
  margin: 0 0 1.4rem;
  font-size: clamp(3rem, 0.8rem + 8.4vw, 9.5rem);
  font-weight: 760;
  font-stretch: 84%;
  line-height: var(--lh-eng);
  letter-spacing: -0.045em;
}
.seitenkopf__lead {
  font-size: var(--fs-1);
  max-width: 38rem;
}
.ruhe .seitenkopf__scheibe .scheibe,
.ruhe .finale__scheibe .scheibe {
  animation: none;
}

/* ---------- Textabschnitte der Unterseiten ---------- */
.liste-linie {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  border-top: var(--linie) solid var(--c-linie);
}
.liste-linie li {
  margin: 0;
  padding: 0.9rem 0;
  border-bottom: var(--linie) solid var(--c-linie-fein);
}
.schritte {
  counter-reset: schritt;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1.6rem;
  max-width: none;
}
.schritte li {
  counter-increment: schritt;
  position: relative;
  padding-left: 4.2rem;
  margin: 0;
}
.schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: -0.2rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--c-dotter);
  box-shadow: var(--schatten-1);
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 750;
}
.schritte h3 {
  margin-bottom: 0.2em;
}
.schritte p {
  margin: 0;
}

.textlink--knopf {
  padding: 0;
  border: 0;
  background-color: transparent;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-align: left;
}
.icon {
  display: inline-block;
  vertical-align: -0.3em;
  margin-right: 0.3rem;
}

/* ===== 07-seiten.css ===== */
/* Seitenbausteine der Unterseiten: Baender, Stimmen, Rechtliches, Formularhuelle. */

.sp-1-4 { grid-column: 1 / -1; }
@media (min-width: 48em) {
  .sp-1-4 { grid-column: 1 / 5; }
  /* leichter Versatz nach unten: bricht das Raster bewusst (asymmetrische Komposition) */
  .sp-versetzt { margin-top: clamp(2rem, 8vw, 7rem); }
}

.gross {
  font-family: var(--f-display);
  font-size: var(--fs-2);
  font-weight: 600;
  font-stretch: 90%;
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 32rem;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* Baender: farbige Flaechen als Taktwechsel zwischen den Abschnitten */
.band {
  position: relative;
}
.band--nebel {
  background: var(--c-nebel);
}
.band--gelb {
  background: var(--c-dotter);
}
.band--gelb::after,
.band--nebel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/korn.png") 0 0 / 160px 160px;
  mix-blend-mode: soft-light;
  opacity: 0.35;
  pointer-events: none;
}
.band > .huelle {
  position: relative;
  z-index: 1;
}
.band__fenster .fenster {
  width: min(14rem, 60vw);
}
.karte-hinweis {
  padding: 1.4rem;
  border: var(--linie) solid var(--c-tinte);
  border-radius: var(--r-mittel);
  background: var(--c-papier);
}
.karte-hinweis h3 {
  margin-bottom: 0.4em;
}

/* Stimmen: grosse Zahl, belegte Quelle */
.stimmen__zahl {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  margin-bottom: 1.6rem;
}
.stimmen__wert {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(5rem, 3rem + 10vw, 11rem);
  font-weight: 780;
  font-stretch: 84%;
  line-height: 0.85;
  letter-spacing: -0.05em;
}
.stimmen__text {
  margin: 0 0 0.5rem;
  font-family: var(--f-display);
  font-size: var(--fs-2);
  font-weight: 600;
  font-stretch: 90%;
  line-height: 1.15;
}
.scheiben {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}
.scheiben i {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: var(--linie) solid var(--c-tinte);
  background: var(--c-dotter);
  box-shadow: var(--schatten-1);
}
.scheiben i:last-child {
  /* 4,9 von 5: die letzte Scheibe ist zu neun Zehnteln gefuellt (harte Kante, kein Verlauf) */
  background: linear-gradient(90deg, var(--c-dotter) 0 90%, var(--c-papier) 90% 100%);
}
.stimmen .huelle {
  display: grid;
  gap: 1rem;
}

/* Kontakt */
.kontakt__daten h2,
.formular-huelle h2 {
  font-size: var(--fs-3);
}
.formular-huelle {
  padding: clamp(1.2rem, 3vw, 2.4rem);
  border: var(--linie) solid var(--c-tinte);
  border-radius: var(--r-mittel);
  background: var(--c-papier);
  box-shadow: var(--schatten-2);
}
.formular__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.formular__aktionen .formular__meldung {
  margin: 0;
}
.formular__danke:focus {
  outline: none;
}
.formular__danke h2 {
  margin-bottom: 0.4em;
}

/* Rechtliches */
.recht__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
  font-weight: 600;
}
.recht {
  border-top: var(--linie) solid var(--c-linie-fein);
}
.recht h3 {
  margin-top: 1.6em;
  font-size: var(--fs-1);
}
.recht h3:first-child {
  margin-top: 0;
}
.recht__text a {
  text-decoration-thickness: 0.1em;
}
.recht .sp-1-4 h2 {
  font-size: var(--fs-2);
}

/* ===== 08-bewegung.css ===== */
/* Bewegung: Einblenden beim Scrollen, Enthuellen ueber Masken, Seitenuebergang, ruhige Fassung.
   Regel: Alles geht auf (von unten nach oben). Ohne JavaScript oder mit reduzierter Bewegung ist alles sofort sichtbar. */

/* Magnetischer Zug und Druck fuer Knoepfe (Variablen setzt core.js, nur bei feinem Zeiger) */
.knopf {
  transform: translate(var(--magx, 0px), var(--magy, 0px)) scale(var(--skal, 1));
}
.knopf:active {
  --skal: 0.96;
  transform: translate(var(--magx, 0px), var(--magy, 0px)) scale(var(--skal, 1));
}

/* Erscheint: Zeilen steigen auf, sobald der Abschnitt sichtbar wird (core.js setzt .ist-da) */
.js:not(.ruhe) [data-erscheint] .zeile__text {
  animation: none;
  transform: translateY(108%);
}
.js:not(.ruhe) [data-erscheint].ist-da .zeile__text {
  animation: zeileAuf var(--d-lang) var(--ease-aufgehen) both;
  animation-delay: calc(var(--z, 0) * var(--versatz));
}

/* Enthuellen ueber Masken: das Fenster oeffnet sich von unten nach oben, danach ruht das Bild */
.js:not(.ruhe) [data-enthuellen] .fenster {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.5s var(--ease-aufgehen);
}
.js:not(.ruhe) [data-enthuellen].ist-da .fenster {
  clip-path: inset(-3rem -3rem -3rem -3rem);
}
.js:not(.ruhe) [data-enthuellen] .fenster img {
  transform: scale(1.18);
  transition: transform 2.2s var(--ease-aufgehen);
}
.js:not(.ruhe) [data-enthuellen].ist-da .fenster img {
  transform: scale(1.04);
}

/* Weiches Einblenden grosser Textbloecke, nur wo die Browser Scroll-Timelines kennen */
@supports (animation-timeline: view()) {
  .js:not(.ruhe) .band h2,
  .js:not(.ruhe) .abschnitt h2 {
    animation: aufsteigen linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

/* Native Seitenuebergaenge (Chromium, Safari): die Scheibe oeffnet die naechste Seite vom Klickpunkt aus,
   die alte Seite weicht in die Tiefe. Browser ohne Unterstuetzung wechseln ohne Uebergang. */
@view-transition {
  navigation: auto;
}
:root {
  --vt-x: 50vw;
  --vt-y: 30vh;
}
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(root) {
    animation-duration: 0.9s;
    animation-timing-function: var(--ease-aufgehen);
  }
  ::view-transition-old(root) {
    animation: seiteWeg 0.9s var(--ease-weich) both;
    z-index: 1;
  }
  ::view-transition-new(root) {
    animation: seiteAuf 0.9s var(--ease-aufgehen) both;
    z-index: 2;
  }
  .kopf {
    view-transition-name: kopf;
  }
}
@keyframes seiteWeg {
  from { transform: none; opacity: 1; }
  to   { transform: scale(0.94); opacity: 0.55; }
}
@keyframes seiteAuf {
  from { clip-path: circle(0% at var(--vt-x) var(--vt-y)); }
  to   { clip-path: circle(150% at var(--vt-x) var(--vt-y)); }
}
::view-transition-old(kopf),
::view-transition-new(kopf) {
  animation: none;
  mix-blend-mode: normal;
}

/* Ruhige Fassung: gleiche Komposition, keine Bewegung, alles sofort lesbar */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}
.ruhe [data-enthuellen] .fenster,
.ruhe [data-enthuellen] .fenster img,
.ruhe [data-erscheint] .zeile__text,
.ruhe .wort,
.ruhe .band h2,
.ruhe .abschnitt h2 {
  clip-path: none;
  transform: none;
  opacity: 1;
  animation: none;
}
.ruhe .status[data-zustand="offen"] .status__punkt {
  animation: none;
}

/* Kleine Bildschirme: die Zeitanzeige an der Morgenlinie wuerde Inhalt ueberdecken */
@media (max-width: 47.99em) {
  .morgenlinie__uhr {
    display: none;
  }
}