:root {
  --a-grund:  #E5D6B2;
  --a-blatt:  #F3EBD8;
  --a-tinte:  #241C12;
  --a-matt:   #6E5F45;
  --a-linie:  #C6B187;
  --a-fein:   #D8C9A4;
  --a-akzent: #9A2B1B;
  --a-ueber:  #241C12;
  --a-zier:   #6B5426;
  --a-rand:   clamp(1rem, 5vw, 4rem);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --a-grund: #12100B; --a-blatt: #1A1610; --a-tinte: #FFFFFF; --a-matt: #D9D2C4;
    --a-linie: #4A3C26; --a-fein: #241D12; --a-akzent: #E8785C; --a-ueber: #F4E6C3; --a-zier: #E3C98A;
  }
}
:root[data-theme="dark"] {
  --a-grund: #12100B; --a-blatt: #1A1610; --a-tinte: #FFFFFF; --a-matt: #D9D2C4;
  --a-linie: #4A3C26; --a-fein: #241D12; --a-akzent: #E8785C; --a-ueber: #F4E6C3; --a-zier: #E3C98A;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0; background: var(--a-grund); color: var(--a-matt);
  font-family: "Newsreader", "Iowan Old Style", Georgia, serif; font-size: 1.1rem; line-height: 1.5;
  font-variation-settings: "opsz" 14;
}
a { color: inherit; }
h1, h2, h3 {
  font-family: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif; font-weight: 600;
  font-variation-settings: "opsz" 12, "wght" 600; color: var(--a-ueber); margin: 0; line-height: 1.05;
  text-wrap: balance;
}
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.marke { font-family: "Bodoni Moda", Didot, Georgia, serif; font-variation-settings: "opsz" 12, "wght" 600; font-size: 1.45rem; letter-spacing: .18em; color: var(--a-ueber); text-decoration: none; line-height: 1; }
@media (max-width: 640px) { .marke { font-size: 1.35rem; } }
.kopf {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem var(--a-rand); background: var(--a-grund); border-bottom: 1px solid var(--a-linie);
}
.kopf nav { display: flex; gap: 1.4rem; }
.kopf nav a { text-decoration: none; color: var(--a-matt); }
.kopf nav a:hover, .kopf nav a:focus-visible { color: var(--a-akzent); }
@media (max-width: 640px) { .kopf nav { display: none; } }
.knopf {
  display: inline-block; text-decoration: none; padding: .8rem 1.3rem; border: 1px solid var(--a-ueber);
  color: var(--a-ueber); font-family: "IBM Plex Mono", monospace; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
}
.knopf:hover, .knopf:focus-visible { background: var(--a-ueber); color: var(--a-grund); outline: none; }
.knopf.voll { background: var(--a-akzent); border-color: var(--a-akzent); color: #fff; }
.knopf.voll:hover { filter: brightness(1.12); }
.abschnitt { padding-block: clamp(3rem, 8vw, 6rem); padding-inline: var(--a-rand); max-width: 72rem; margin-inline: auto; }
.abschnitt > header { display: grid; gap: .6rem; margin-bottom: 2rem; max-width: 40rem; }
.abschnitt h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.belege { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.4rem; }
.beleg { display: grid; gap: .55rem; text-decoration: none; }
.beleg .rahmen { aspect-ratio: 16 / 9; max-width: 100%; background: var(--a-blatt); border: 1px solid var(--a-linie); overflow: hidden; display: grid; place-items: center; }
.beleg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.beleg figcaption { display: grid; gap: .1rem; }
.beleg b { color: var(--a-tinte); font-weight: 600; }
.beleg:hover .rahmen, .beleg:focus-visible .rahmen { border-color: var(--a-akzent); }
.drei { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem 3rem; margin: 0; }
.drei dt { color: var(--a-tinte); font-weight: 600; font-size: 1.15rem; }
.drei dd { margin: .3rem 0 0; }
.schluss { border-top: 1px solid var(--a-linie); border-bottom: 1px solid var(--a-linie); background: var(--a-blatt); }
.schluss .innen { max-width: 72rem; margin-inline: auto; padding-inline: var(--a-rand); padding-block: clamp(3rem, 8vw, 6rem); display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
.schluss p { margin: .6rem 0 0; max-width: 38ch; }
@media (max-width: 640px) { .schluss .innen { grid-template-columns: 1fr; align-items: start; } }
.fuss { padding: 1.6rem var(--a-rand) 2.4rem; display: flex; flex-wrap: wrap; gap: .6rem 2rem; color: var(--a-zier); }
.fuss a { text-decoration: none; }


/* Scrollweg: ein Schritt (--u) je Übergang, dazu ein kurzer Halt der letzten Szene (--ende) — sonst scrollt man dort ins Leere */
.geschichte { --u: 110vh; --ende: .35; position: relative; height: calc((var(--n) - 1 + var(--ende)) * var(--u) + 100vh); }
.buehne {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center;
  padding: 3.2rem var(--a-rand) 0; gap: 2rem;
}
.leinwand { position: relative; height: min(88vh, 100%); width: 100%; }
.leinwand canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.text { position: relative; min-height: 14rem; }
.szene {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: .9rem;
  opacity: 0; transform: translateY(12px); will-change: opacity, transform; pointer-events: none;
}
.szene[data-aktiv] { pointer-events: auto; }
.szene .mono { color: var(--a-zier); }
.szene h1, .szene h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); }   /* die erste Szene trägt das h1 der Seite (praesentation.py) */
.szene p { margin: 0; max-width: 32ch; font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.szene p em { color: var(--a-tinte); font-style: normal; font-weight: 600; }
.szene .knopf { margin-top: .6rem; align-self: flex-start; }
/* Hintergrund: zwei Ellipsen und ein Lichtfleck laufen mit dem Scrollfortschritt (--p aus der Engine) — man sieht, dass es weitergeht.
   Alles dreht im Uhrzeigersinn (Wunsch des Nutzers, 22.09.): Ellipsen mit positivem Winkel, der Lichtfleck auf einer Kreisbahn */
html { --p: 0; }
.hinter { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hinter i { position: absolute; left: 50%; top: 50%; display: block; border: 1px solid color-mix(in oklab, var(--a-zier) 28%, transparent); border-radius: 50%; }
.hinter i:nth-child(1) { width: 150vmax; height: 96vmax; transform: translate(-50%, calc(-50% - var(--p) * 18vh)) rotate(calc(-20deg + var(--p) * 130deg)); }
.hinter i:nth-child(2) { width: 118vmax; height: 70vmax; border-style: dashed; border-color: color-mix(in oklab, var(--a-zier) 20%, transparent); transform: translate(-50%, calc(-50% + var(--p) * 22vh)) rotate(calc(35deg + var(--p) * 170deg)); }
.hinter i:nth-child(3) { width: 90vmax; height: 90vmax; border: 0; background: radial-gradient(closest-side, color-mix(in oklab, var(--a-blatt) 90%, var(--a-zier)) 0%, transparent 70%); opacity: .8; transform: translate(calc(-50% + sin(var(--p) * 300deg - 120deg) * 30vw), calc(-50% - cos(var(--p) * 300deg - 120deg) * 30vh)); }   /* von links unten über oben nach unten */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hinter i:nth-child(3) { opacity: .45; } }
:root[data-theme="dark"] .hinter i:nth-child(3) { opacity: .45; }
.leinwand, .text, .figur, .hinweis, .spiel { position: relative; z-index: 1; }
.leinwand { position: relative; }
/* Abspielen: scrollt die Geschichte von selbst, jede Berührung hält an */
.spiel { position: absolute; left: var(--a-rand); bottom: 1.2rem; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem .3rem .5rem; border: 1px solid var(--a-linie); border-radius: 999px; background: color-mix(in oklab, var(--a-grund) 80%, transparent); color: var(--a-zier); font: 500 .64rem/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.spiel:hover, .spiel:focus-visible { border-color: var(--a-akzent); color: var(--a-akzent); outline: none; }
.spiel svg { width: .62rem; height: .62rem; fill: currentColor; flex: none; }
.spiel .pause, .spiel[data-an] .play { display: none; }
.spiel[data-an] .pause { display: block; }
.hinweis { position: absolute; right: var(--a-rand); bottom: 1.2rem; color: var(--a-zier); }
.figur { position: absolute; left: var(--a-rand); top: 4.3rem; color: var(--a-zier); }
@media (max-width: 860px) {
  .geschichte { --u: 100vh; }
  .buehne { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; padding-top: 3.4rem; padding-bottom: 3.6rem; gap: .5rem; }
  .leinwand { height: auto; min-height: 0; }
  .text { min-height: 15.5rem; }
  .szene { justify-content: flex-start; }
  .szene h1, .szene h2 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .hinweis { display: none; }
  .figur { top: 3.5rem; max-width: calc(100% - 2 * var(--a-rand) - 3rem); line-height: 1.4; }   /* bricht vor dem Abspielknopf um */
  /* Mobil sitzt der Text unten — der Abspielknopf wandert nach oben rechts, sonst liegt er über dem Knopf der ersten Szene;
     dort nur das Zeichen im Kreis, das Wort trägt aria-label */
  .spiel { left: auto; right: var(--a-rand); bottom: auto; top: 3.2rem; width: 2rem; height: 2rem; padding: 0; justify-content: center; }
  .spiel .wort { display: none; }
  .spiel svg { width: .7rem; height: .7rem; }
  .buehne { padding-bottom: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .szene { transition: none; } .hinter i { transform: translate(-50%, -50%) !important; } }

/* Farbstimmung: --zier (0..1) kommt aus der Zeichenschleife; auf dem Höhepunkt des Ornaments wärmt sich der Grund zum Zierton,
   die Wortmarke wird golden, die Kopflinie leuchtet, der Taktstrich verliert den Akzent */
html { --zier: 0; }
body, .kopf { background: color-mix(in oklab, var(--a-grund), var(--a-zier) calc(var(--zier) * 14%)); }
.kopf { border-bottom-color: color-mix(in oklab, var(--a-linie), var(--a-zier) calc(var(--zier) * 100%)); }
.marke { color: color-mix(in oklab, var(--a-ueber), var(--a-zier) calc(var(--zier) * 100%)); }
.figur { color: color-mix(in oklab, var(--a-zier), var(--a-ueber) calc(var(--zier) * 100%)); }
.takt i.an { background: color-mix(in oklab, var(--a-akzent), var(--a-zier) calc(var(--zier) * 100%)); }

/* ---------- Präsentation (apple.com-Muster) ---------- */
/* Rundungen: Pillen-Knöpfe, Karten mit Radius — die scharfen Ecken der Basis waren zu hart */
.knopf, .reiter label { border-radius: 999px; }
.kachel, .tafel .rahmen, .beleg .rahmen { border-radius: .9rem; }
.kachel .tiefe p { border-radius: 0; }
.szene .wege { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.szene .wege .knopf { margin-top: 0; }
.kopf .knopf { padding: .5rem .9rem; font-size: .72rem; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .3s, transform .3s, visibility .3s; pointer-events: none; }   /* visibility: sonst fängt der unsichtbare Knopf den Tabulator */
.kopf[data-weg] .knopf { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
@media (max-width: 640px) { .kopf .knopf { display: none; } }
@media (max-width: 860px) { .szene .wege .knopf:not(.voll) { display: none; } }
.abschnitt .vorspann { margin: .2rem 0 0; max-width: 46ch; }
.abschnitt.blatt { max-width: none; padding-inline: 0; background: var(--a-blatt); border-top: 1px solid var(--a-linie); border-bottom: 1px solid var(--a-linie); }
.abschnitt.blatt > .innen { max-width: 72rem; margin-inline: auto; padding-inline: var(--a-rand); }
.abschnitt h3 { font-size: 1.35rem; }
.fn { text-decoration: none; color: var(--a-zier); font-family: "IBM Plex Mono", monospace; }
.fn sup { font-size: .55em; margin-left: .15em; }

/* Kennzahlen: ein umgekehrtes Band, Zahlen in der Auszeichnungsschrift */
.band { background: var(--a-tinte); color: var(--a-grund); --b-zahl: #EBCF8A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .band { --b-zahl: #8A6A2B; } }
:root[data-theme="dark"] .band { --b-zahl: #8A6A2B; }
.band .innen { max-width: 72rem; margin-inline: auto; padding: clamp(2.4rem, 6vw, 4rem) var(--a-rand); }
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2rem 2.5rem; margin: 0; }
.zahlen dt { font-family: "Bodoni Moda", Didot, Georgia, serif; font-variation-settings: "opsz" 12, "wght" 600; font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: 1; color: var(--b-zahl); white-space: nowrap; }
.zahlen dt .fn { color: inherit; opacity: .7; }
.zahlen dd { margin: .5rem 0 0; display: grid; gap: .2rem; }
.zahlen dd b { color: var(--a-grund); font-weight: 600; }
.zahlen dd span { font-size: .98rem; opacity: .85; }

/* Highlights: Kacheln mit Vertiefung */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.kachel { background: var(--a-blatt); border: 1px solid var(--a-linie); padding: 1.3rem 1.4rem 1.2rem; }
.kachel summary { list-style: none; cursor: pointer; position: relative; padding-right: 2.2rem; }
.kachel summary::-webkit-details-marker { display: none; }
.kachel summary h3 { margin-bottom: .35rem; }
.kachel summary p { margin: 0; font-size: 1rem; }
.kachel .mehr { position: absolute; right: 0; top: .1rem; width: 1.6rem; height: 1.6rem; border: 1px solid var(--a-linie); border-radius: 50%; }
.kachel .mehr::before, .kachel .mehr::after { content: ""; position: absolute; left: 50%; top: 50%; width: .7rem; height: 1px; background: var(--a-ueber); transform: translate(-50%, -50%); transition: transform .25s; }
.kachel .mehr::after { transform: translate(-50%, -50%) rotate(90deg); }
.kachel[open] .mehr::after { transform: translate(-50%, -50%) rotate(0deg); }
.kachel:hover, .kachel[open] { border-color: var(--a-zier); }
.kachel .tiefe p { margin: .9rem 0 0; padding-top: .9rem; border-top: 1px solid var(--a-linie); font-size: .98rem; }

/* Näher betrachtet: Reiter aus Radioknöpfen, ohne Skript */
.betrachter { display: grid; gap: 1.2rem; }
.betrachter > input { position: absolute; opacity: 0; pointer-events: none; }
.reiter { display: flex; gap: .4rem; flex-wrap: wrap; }
.reiter label { cursor: pointer; padding: .55rem 1rem; border: 1px solid var(--a-linie); font-family: "IBM Plex Mono", monospace; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--a-matt); }
.reiter label:hover { color: var(--a-akzent); }
#ansicht-bank:checked ~ .reiter label[for="ansicht-bank"], #ansicht-freigabe:checked ~ .reiter label[for="ansicht-freigabe"], #ansicht-abrechnung:checked ~ .reiter label[for="ansicht-abrechnung"] { background: var(--a-ueber); color: var(--a-grund); border-color: var(--a-ueber); }
#ansicht-bank:focus-visible ~ .reiter label[for="ansicht-bank"], #ansicht-freigabe:focus-visible ~ .reiter label[for="ansicht-freigabe"], #ansicht-abrechnung:focus-visible ~ .reiter label[for="ansicht-abrechnung"] { outline: 2px solid var(--a-akzent); outline-offset: 2px; }
.tafel { display: none; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 2rem; align-items: center; }
#ansicht-bank:checked ~ .tafel[data-ansicht="bank"], #ansicht-freigabe:checked ~ .tafel[data-ansicht="freigabe"], #ansicht-abrechnung:checked ~ .tafel[data-ansicht="abrechnung"] { display: grid; }
.tafel .wort p { margin: .5rem 0 0; }
.tafel .original { display: inline-block; margin-top: 1rem; font-family: "IBM Plex Mono", monospace; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--a-zier); }
.tafel .rahmen { aspect-ratio: 16 / 9; background: var(--a-grund); border: 1px solid var(--a-linie); overflow: hidden; display: grid; place-items: center; }
.tafel .rahmen img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tafel .rahmen:hover, .tafel .rahmen:focus-visible { border-color: var(--a-akzent); }
@media (max-width: 760px) { .tafel { grid-template-columns: 1fr; gap: 1rem; } .tafel .rahmen { order: -1; } }

/* Angebot: Vergleichskarten */
.beigaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.6rem 3rem; margin: 2.2rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--a-linie); }
.beigaben dt { color: var(--a-tinte); font-weight: 600; }
.beigaben dd { margin: .3rem 0 .5rem; font-size: .98rem; }
.beigaben .mono { color: var(--a-zier); }
#angebot .beigaben + .knopf { margin-top: 2rem; }

/* Fragen */
.fragen { border-top: 1px solid var(--a-linie); max-width: 46rem; }
.fragen details { border-bottom: 1px solid var(--a-linie); }
.fragen summary { list-style: none; cursor: pointer; padding: 1rem 2.4rem 1rem 0; position: relative; color: var(--a-tinte); font-weight: 600; font-size: 1.1rem; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: .2rem; top: .95rem; font-family: "IBM Plex Mono", monospace; color: var(--a-zier); transition: transform .25s; }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen p { margin: 0 0 1.2rem; font-size: 1rem; max-width: 60ch; }

/* Fußnoten */
.fussnoten { max-width: 72rem; margin-inline: auto; padding: 2rem var(--a-rand) 0; color: var(--a-zier); font-size: .84rem; line-height: 1.55; }
.fussnoten ol { margin: 0; padding-left: 1.4rem; max-width: 70ch; }
.fussnoten li { margin-bottom: .5rem; }
.fussnoten li:target { color: var(--a-tinte); }
.fussnoten a { color: var(--a-akzent); }