/* «Der Diebstahl» — C1 Titelkarte
   Zwei Temperaturen: weich (Standard) und hart. Umschaltbar in der Regie.
   Regel: keine Schatten auf Schrift. Tiefe kommt aus Fläche und Kontrast. */

@font-face{
  font-family:'Playfair Display'; font-style:normal; font-weight:400 900;
  font-display:swap; src:url('/fonts/playfair.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display'; font-style:italic; font-weight:400 700;
  font-display:swap; src:url('/fonts/playfair-kursiv.woff2') format('woff2');
}
@font-face{
  font-family:'ArchivoApp'; font-style:normal; font-weight:400 800;
  font-display:swap; src:url('/fonts/archivo.woff2') format('woff2');
}
@font-face{
  font-family:'AntonApp'; font-style:normal; font-weight:400;
  font-display:swap; src:url('/fonts/anton.woff2') format('woff2');
}

:root{
  --creme:#E8E2D5; --papier:#F0EBE0; --tinte:#15120C; --sepia:#6B6355;
  --kante:#CFC7B4; --vignette:#B9B1A0; --still:#6B6355;
  --grund:var(--creme); --schrift:var(--tinte);
  --titel:'Playfair Display', Georgia, 'Times New Roman', serif;
  --text:'ArchivoApp', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --rand:22px; --kantenstaerke:1px;
  --korn:.28;
}

body[data-temperatur="hart"]{
  --creme:#F4F2ED; --papier:#FFFFFF; --tinte:#0A0A0A; --sepia:#5E5C58;
  --kante:#0A0A0A; --vignette:#0A0A0A; --still:#5E5C58;
  --titel:'AntonApp', Impact, 'Haettenschweiler', sans-serif;
  --rand:16px; --kantenstaerke:3px;
  --korn:0;
}

*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}

/* Muss über den display-Regeln von header und nav stehen, sonst wirkt hidden nicht. */
[hidden]{display:none !important}

/* Platz für den Scrollbalken immer freihalten: Sonst rückt am Desktop die ganze App um 15 px,
   sobald eine Ansicht länger oder kürzer ist als der Bildschirm (Sprung, Wagi 21.09.2026). */
html{-webkit-text-size-adjust:100%; overflow-y:scroll; scrollbar-gutter:stable}

body{
  font-family:var(--text);
  background:var(--grund); color:var(--schrift);
  font-size:16px; line-height:1.5;
  display:flex; flex-direction:column;
  /* Gescrollt wird die Seite selbst, wie bei jeder App auf dem Handy (Wagi, 21.09.2026),
     nicht ein Kasten in der Seite. Kopf und Navigation haften oben und unten (sticky). */
  min-height:100vh; min-height:100dvh;
  overscroll-behavior-y:none;
}

/* Die App wird auf Handys bedient. Am Laptop bleibt sie in Handybreite stehen,
   statt sich über den ganzen Bildschirm zu ziehen — sonst zerfällt jede
   Titelkarte und das Bild läuft aus dem Format. */
@media (min-width:620px){
  body{
    max-width:440px; margin:0 auto;
    box-shadow:0 0 0 1px var(--kante);
  }
  html{background:#2A2723}
  body[data-temperatur="hart"]{box-shadow:0 0 0 1px var(--tinte)}
}

/* Filmkorn — nur in der weichen Fassung */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:60;
  opacity:var(--korn);
  background-image:radial-gradient(rgba(0,0,0,.5) .5px, transparent .5px);
  background-size:3px 3px;
}

button{font-family:inherit; cursor:pointer; color:inherit}
:focus-visible{outline:3px solid var(--tinte); outline-offset:2px}
.serif{font-family:'Playfair Display', Georgia, serif}
.kursiv{font-family:'Playfair Display', Georgia, serif; font-style:italic}

/* ---------- Kopf ---------- */
/* Der Kopf ist in jeder Ansicht gleich hoch und gleich aufgebaut: links 44 px für den
   Zurück-Pfeil (auch wenn er unsichtbar ist), Mitte der Titel, rechts 44 px. So springt
   weder die Höhe noch die Mitte, wenn man die Ansicht wechselt. */
header{
  position:sticky; top:0; z-index:50;
  flex:0 0 auto; background:var(--tinte); color:var(--creme);
  padding:env(safe-area-inset-top) 14px 0; min-height:calc(56px + env(safe-area-inset-top));
  display:flex; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
}
header .zurueck{
  background:none; border:0; color:var(--creme); font-size:17px;
  padding:0; line-height:1; width:60px; min-height:44px; text-align:left; flex:0 0 60px;
}
/* Platz behalten, damit die Titelmitte nicht springt. !important, weil die globale Regel
   [hidden]{display:none !important} sonst gewinnt. */
header .zurueck[hidden]{display:block !important; visibility:hidden}
header .mitte{flex:1; min-width:0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
header .rechts{font-family:var(--titel); font-size:13px; letter-spacing:.06em; flex:0 0 60px; text-align:right; white-space:nowrap}
body[data-temperatur="hart"] header{border-bottom:3px solid var(--tinte)}

main{flex:1 0 auto; display:flex; flex-direction:column}
/* Die Bühne scrollt; ihre Kinder behalten ihre Höhe, statt sich in den Rest zu quetschen. */
main > *{flex-shrink:0}

/* ---------- Fusszeile ---------- */
nav{
  position:sticky; bottom:0; z-index:50;
  flex:0 0 auto; display:flex;
  border-top:var(--kantenstaerke) solid var(--kante);
  background:var(--papier);
  padding-bottom:env(safe-area-inset-bottom);
}
body[data-temperatur="hart"] nav{background:var(--tinte); border-top-width:3px}
/* Fünf Punkte (für die Regie sechs minus Notizen) müssen auf 320 px Platz haben:
   enger gesperrt als früher, und die Knöpfe dürfen schrumpfen. */
nav button{
  flex:1 1 0; min-width:0; padding:14px 2px; border:0; background:none;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sepia); min-height:48px;
}
body[data-temperatur="hart"] nav button{
  font-family:var(--titel); font-size:13px; color:#7A7A7A; background:var(--tinte);
}
nav button[aria-current="page"]{color:var(--tinte); font-weight:600}
body[data-temperatur="hart"] nav button[aria-current="page"]{
  background:var(--creme); color:var(--tinte);
}

/* ---------- Vorspann mit Titelbild ---------- */
.titelbild{
  position:relative; overflow:hidden; flex:0 0 auto;
  height:min(58vh, 470px);
  background:var(--tinte);
}
.titelbild img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 34%;
}
/* Die weiche Fassung holt das harte Schwarzweiss in die Cremewelt. */
body[data-temperatur="weich"] .titelbild img{
  filter:sepia(.3) contrast(1.04) brightness(1.03);
}
.titelbild .lage{
  position:absolute; left:0; right:0; bottom:0;
  padding:60px var(--rand) 22px; text-align:center;
  /* Das Bild wird abgedunkelt, damit die Schrift steht — nie die Schrift verdoppelt. */
  background:linear-gradient(to top, rgba(8,8,8,.95) 0%, rgba(8,8,8,.78) 42%, rgba(8,8,8,0) 100%);
}
.titelbild .zeigt{
  font-family:var(--text); font-size:9.5px; letter-spacing:.28em;
  text-transform:uppercase; color:#E4E2DD;
}
.titelbild h1{
  font-family:var(--titel); font-weight:900; font-size:clamp(34px,11vw,44px);
  line-height:.98; margin:9px 0 6px; color:var(--creme);
}
body[data-temperatur="weich"] .titelbild h1{color:#F2ECDF}
body[data-temperatur="hart"] .titelbild h1{text-transform:uppercase; letter-spacing:.01em}
.titelbild .unter{
  font-family:'Playfair Display',serif; font-style:italic; font-size:15px; color:#CFC9BC;
}

.anmeldung{padding:26px var(--rand) 34px}
.feld{
  width:100%; padding:15px; border:var(--kantenstaerke) solid var(--tinte);
  background:transparent; color:var(--tinte);
  font-family:var(--text); font-size:17px; text-align:center; margin-bottom:12px;
  min-height:52px;
}
.feld.links{text-align:left}
select.feld{appearance:none; -webkit-appearance:none; border-radius:0}
body[data-temperatur="hart"] .feld{
  background:var(--papier); font-family:var(--titel); text-transform:uppercase; letter-spacing:.04em;
}
.knopf{
  width:100%; padding:15px; border:var(--kantenstaerke) solid var(--tinte);
  background:var(--tinte); color:var(--creme);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; min-height:52px;
}
body[data-temperatur="hart"] .knopf{font-family:var(--titel); font-size:16px; letter-spacing:.16em}
.knopf.leise{background:transparent; color:var(--tinte)}
body[data-temperatur="hart"] .knopf.leise{background:var(--papier)}
.knopf.gefahr{background:transparent; border-color:#96322A; color:#96322A}
.knopf+.knopf{margin-top:10px}
.klein{
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:13px; color:var(--sepia); margin-top:16px; line-height:1.5; text-align:center;
}
body[data-temperatur="hart"] .klein{font-family:var(--text); font-style:normal; font-size:12.5px}
.abspann{
  margin-top:28px; padding-top:16px; border-top:var(--kantenstaerke) solid var(--kante);
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sepia); text-align:center; line-height:2.1;
}
/* Wer betreibt die App, was wird gespeichert, wo, an wen wende ich mich. */
.rechtliches{
  margin-top:14px; font-size:11.5px; line-height:1.55; color:var(--sepia); text-align:center;
}

/* ---------- Fuss jeder Seite ----------
   Wagis Standard: Impressum · Datenschutz · Admin, darunter «MADE BY W♥GI».
   margin-top:auto schiebt ihn auf kurzen Seiten ans untere Ende der Bühne. */
.fuss{
  margin-top:auto; padding:30px var(--rand) 22px; text-align:center;
  font-size:12px; color:var(--sepia);
}
.fusslinks ul{display:flex; flex-wrap:wrap; justify-content:center; margin:0; padding:0; list-style:none}
.fusslinks li{display:inline-flex; align-items:center}
.fusslinks li+li::before{content:"·"; color:var(--sepia)}
.fusslink{
  display:inline-flex; align-items:center; min-height:44px; padding:0 12px;
  border:0; background:transparent; color:var(--sepia);
  font-family:var(--text); font-size:12px; text-decoration:underline; text-underline-offset:3px;
}
.fusslink:hover, .fusslink:focus-visible{color:var(--tinte)}
.madeby{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:48px; padding:4px 16px; font-size:10.5px; line-height:1.5;
  color:var(--sepia); text-decoration:none;
}
.madeby-zeile{letter-spacing:.12em; font-weight:600}
.madeby-domain{border-bottom:1px solid var(--kante)}
.madeby:hover .madeby-domain, .madeby:focus-visible .madeby-domain{color:var(--tinte); border-color:var(--tinte)}
/* Rot nur als Form, nie als Schrift. */
.herz{width:.95em; height:.95em; margin:0 .06em; vertical-align:-.12em; fill:#B3261E}
.sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.rechtstext h3{
  margin:22px 0 6px; font-family:var(--text); font-weight:600;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--sepia);
}

.fehler{
  margin-top:12px; padding:11px 13px; border:var(--kantenstaerke) solid #96322A;
  color:#96322A; font-size:14px; text-align:center;
}

/* ---------- Durchsage der Regie ----------
   Hervorgehoben über Fläche und Kontrast: umgekehrte Farben, kein Randstrich. */
.durchsage{
  padding:16px var(--rand); background:var(--tinte); color:var(--creme);
  font-size:16px; line-height:1.45;
}
.durchsage b{
  display:block; margin-bottom:5px; font-weight:400;
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
}

/* ---------- Karte ----------
   Film Noir: Papier, Tinte, Sepia. Wasser und Grün nur als Tonwert, keine bunten Flächen.
   Der aktuelle Ort ist über Fläche hervorgehoben (gefüllter Punkt, Ring), nicht über Farbe. */
.karte{background:var(--papier); border-bottom:var(--kantenstaerke) solid var(--kante)}
.karte-bild{aspect-ratio:1000 / 649; background:var(--papier)}      /* Höhe steht fest, bevor der Kartengrund da ist */
.karte svg{display:block; width:100%; height:100%}
.k-schild rect{fill:var(--papier); stroke:var(--tinte); stroke-width:2}
.k-schild .k-zeit{font-family:var(--text); font-size:22px; letter-spacing:.14em; fill:var(--sepia)}
.k-schild .k-name{font-family:var(--titel); font-weight:700; font-size:29px; fill:var(--tinte)}
.k-schild.jetzt rect{fill:var(--tinte)}
.k-schild.jetzt .k-zeit, .k-schild.jetzt .k-name{fill:var(--creme)}
.k-gruen{fill:#DAD4C2}
.k-wasser{fill:#B4AD9B}
.k-fluss{fill:none; stroke:#B4AD9B; stroke-width:7; stroke-linecap:round}
.k-gleis{fill:none; stroke:var(--sepia); stroke-width:.7; opacity:.45}
.k-strasse-klein{fill:none; stroke:#C9C1AD; stroke-width:1.4}
.k-strasse-gross{fill:none; stroke:#A59C86; stroke-width:2.6}
.k-route{fill:none; stroke:var(--tinte); stroke-width:4; stroke-dasharray:1 11; stroke-linecap:round}
.k-punkt{fill:var(--papier); stroke:var(--tinte); stroke-width:4}
.k-nr{font-family:var(--titel); font-weight:700; font-size:26px; fill:var(--tinte)}
.k-ort.jetzt .k-punkt{fill:var(--tinte)}
.k-ort.jetzt .k-nr{fill:var(--creme)}
.k-ring{fill:none; stroke:var(--tinte); stroke-width:3}
body[data-temperatur="hart"] .k-gruen{fill:#E4E2DC}
body[data-temperatur="hart"] .k-wasser{fill:#0A0A0A}
body[data-temperatur="hart"] .k-fluss{stroke:#0A0A0A}
body[data-temperatur="hart"] .k-strasse-klein{stroke:#C4C2BC}
body[data-temperatur="hart"] .k-strasse-gross{stroke:#7A7872}
.karte-unter{padding:10px var(--rand) 12px; text-align:center}
.karte-unter b{display:block; font-weight:400; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--sepia)}
.karte-unter span{font-family:var(--titel); font-weight:700; font-size:17px}
.karte-leer{height:100%; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--sepia)}

/* ---------- Plakat ---------- */
.plakat{
  padding:26px var(--rand) 22px; text-align:center; background:var(--papier);
  border-bottom:var(--kantenstaerke) solid var(--kante);
}
body[data-temperatur="hart"] .plakat{background:var(--tinte); color:var(--creme)}
.plakat .zeile{font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--sepia)}
body[data-temperatur="hart"] .plakat .zeile{color:#9A9894}
.plakat .titel{font-family:var(--titel); font-weight:900; font-size:28px; line-height:1.02; margin:7px 0 5px}
body[data-temperatur="hart"] .plakat .titel{text-transform:uppercase}
.plakat .regie{font-family:'Playfair Display',serif; font-style:italic; font-size:13px; color:var(--sepia)}
body[data-temperatur="hart"] .plakat .regie{color:#B8B6B0}

/* ---------- Titelkarten (Programm) ---------- */
.akt{
  display:block; width:100%; text-align:center; background:var(--creme);
  border:0; border-bottom:var(--kantenstaerke) solid var(--kante);
  padding:20px var(--rand); min-height:70px;
}
.akt .spalte{display:block}
.akt .nr{display:block; font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--sepia)}
.akt .t{display:block; font-family:var(--titel); font-weight:700; font-size:21px; line-height:1.14; margin:4px 0 3px}
.akt .o{display:block; font-family:'Playfair Display',serif; font-style:italic; font-size:13.5px; color:var(--sepia)}
.akt.jetzt{background:var(--papier); box-shadow:inset 0 0 0 1px var(--kante)}
.akt.zu .t{font-family:'Playfair Display',serif; font-style:italic; font-weight:400; font-size:19px; color:var(--still)}
.akt.gang{padding:13px var(--rand); background:#DED8CA}
.akt.gang .t{font-family:'Playfair Display',serif; font-style:italic; font-weight:400; font-size:15.5px}

body[data-temperatur="hart"] .akt{
  display:flex; gap:14px; text-align:left; align-items:flex-start;
  background:var(--creme); border-bottom:3px solid var(--tinte); padding:16px;
}
body[data-temperatur="hart"] .akt .nr{
  font-family:var(--titel); font-size:26px; line-height:.85; min-width:40px;
  letter-spacing:0; text-transform:none; color:var(--tinte);
}
body[data-temperatur="hart"] .akt .spalte{flex:1}
body[data-temperatur="hart"] .akt .t{
  font-family:var(--titel); font-size:20px; text-transform:uppercase; margin:0;
}
body[data-temperatur="hart"] .akt .o{display:block; margin-top:4px; color:var(--sepia)}
body[data-temperatur="hart"] .akt.jetzt{background:var(--tinte); color:var(--creme); box-shadow:none}
body[data-temperatur="hart"] .akt.jetzt .nr{color:var(--creme)}
body[data-temperatur="hart"] .akt.jetzt .o{color:#B8B6B0}
body[data-temperatur="hart"] .akt.zu .nr{color:#B4B2AE}
body[data-temperatur="hart"] .akt.zu .t{
  font-family:'Playfair Display',serif; font-style:italic; font-size:18px;
  text-transform:none; color:var(--still);
}
body[data-temperatur="hart"] .akt.gang{
  padding:11px 16px; border-bottom:1px solid #D5D3CE; background:var(--creme);
}
body[data-temperatur="hart"] .akt.gang .nr{
  font-family:var(--text); font-size:13px; font-weight:700; color:var(--sepia); padding-top:2px;
}
body[data-temperatur="hart"] .akt.gang .t{
  font-family:'Playfair Display',serif; font-style:italic; font-size:15px; text-transform:none;
}
body[data-temperatur="hart"] .akt.gang .o{
  font-family:var(--text); font-style:normal; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
}

/* ---------- Station ---------- */
.stkopf{
  padding:30px var(--rand) 24px; text-align:center;
  border-bottom:var(--kantenstaerke) solid var(--kante);
  background:radial-gradient(ellipse at 50% 40%, var(--papier) 50%, var(--vignette) 100%);
}
body[data-temperatur="hart"] .stkopf{background:var(--tinte); color:var(--creme); text-align:left}
.stkopf .akt-nr{font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--sepia)}
body[data-temperatur="hart"] .stkopf .akt-nr{color:#9A9894}
.stkopf h2{font-family:var(--titel); font-weight:900; font-size:28px; line-height:1.08; margin:8px 0 6px}
body[data-temperatur="hart"] .stkopf h2{text-transform:uppercase; font-size:29px}
.stkopf .meta{font-family:'Playfair Display',serif; font-style:italic; font-size:13.5px; color:var(--sepia)}
body[data-temperatur="hart"] .stkopf .meta{color:#B8B6B0}

.inhalt{padding:22px var(--rand)}
.inhalt .lead{font-family:var(--titel); font-size:20px; line-height:1.3; margin-bottom:14px}
body[data-temperatur="hart"] .inhalt .lead{text-transform:uppercase; font-size:22px; line-height:1.1}
.inhalt p{margin-bottom:13px}
.inhalt .lernziel{font-size:13.5px; color:var(--sepia)}
.inhalt .lernziel b{font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:10px; margin-right:6px}
.inhalt .punkte{margin:0 0 16px; padding-left:1.15em}
.inhalt .punkte li{margin-bottom:7px; line-height:1.45}
.inhalt a{color:var(--tinte); text-underline-offset:3px}
.karteikarte{
  border:var(--kantenstaerke) solid var(--tinte); background:var(--papier);
  padding:15px 16px; margin:11px 0;
}
.karteikarte h3{font-family:var(--titel); font-weight:700; font-size:16px; margin-bottom:4px}
body[data-temperatur="hart"] .karteikarte h3{text-transform:uppercase}
.karteikarte p{font-size:14.5px; margin:0; color:var(--tinte)}
.merk{
  margin:20px 0 4px; padding:16px 6px; text-align:center;
  border-top:var(--kantenstaerke) solid var(--tinte);
  border-bottom:var(--kantenstaerke) solid var(--tinte);
}
body[data-temperatur="hart"] .merk{
  background:var(--tinte); color:var(--creme); padding:16px; text-align:left; border:0;
}
.merk b{
  display:block; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--sepia); margin-bottom:7px; font-weight:400;
}
body[data-temperatur="hart"] .merk b{color:#9A9894}
.merk span{font-family:'Playfair Display',serif; font-style:italic; font-size:17px; line-height:1.34}

/* ---------- Notizfeld ---------- */
.notiz{padding:6px var(--rand) 34px}
.notiz h3{
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--sepia); margin-bottom:9px; text-align:center; font-weight:400;
}
body[data-temperatur="hart"] .notiz h3{
  font-family:var(--titel); font-size:14px; letter-spacing:.1em; text-align:left; color:var(--tinte);
}
textarea{
  width:100%; min-height:140px; padding:14px;
  font-family:'Playfair Display', Georgia, serif; font-size:17px; line-height:1.5;
  color:var(--tinte); background:var(--papier);
  border:var(--kantenstaerke) solid var(--kante); resize:vertical;
}
body[data-temperatur="hart"] textarea{font-family:var(--text); font-size:16px; border-color:var(--tinte)}
.notiz .stand{
  font-size:11.5px; color:var(--sepia); margin-top:7px; text-align:center; min-height:17px;
}
body[data-temperatur="hart"] .notiz .stand{text-align:left}

/* ---------- Zwischenspiel ---------- */
.walkkopf{
  padding:24px var(--rand) 18px; text-align:center;
  border-bottom:var(--kantenstaerke) solid var(--kante);
}
body[data-temperatur="hart"] .walkkopf{background:var(--tinte); color:var(--creme); text-align:left}
.walkkopf .band{font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--sepia)}
body[data-temperatur="hart"] .walkkopf .band{color:#9A9894}
.walkkopf h2{font-family:var(--titel); font-weight:700; font-size:23px; margin:7px 0 4px; line-height:1.1}
body[data-temperatur="hart"] .walkkopf h2{text-transform:uppercase}
.walkkopf .meta{font-family:'Playfair Display',serif; font-style:italic; font-size:13.5px; color:var(--sepia)}
body[data-temperatur="hart"] .walkkopf .meta{color:#B8B6B0}

.zwischentitel{
  padding:46px var(--rand); min-height:220px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(ellipse at 50% 50%, var(--papier) 44%, var(--vignette) 100%);
}
body[data-temperatur="hart"] .zwischentitel{background:var(--tinte); color:var(--creme)}
.zwischentitel span{font-family:var(--titel); font-weight:700; font-size:26px; line-height:1.22}
body[data-temperatur="hart"] .zwischentitel span{text-transform:uppercase; font-size:27px; line-height:1.06}

.blaettern{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px var(--rand)}
.blaettern button{
  border:var(--kantenstaerke) solid var(--tinte); background:transparent;
  padding:11px 16px; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  min-height:44px; min-width:88px;
}
body[data-temperatur="hart"] .blaettern button{font-family:var(--titel); font-size:13px; background:var(--papier)}
.blaettern button:disabled{opacity:.28}
.blaettern .zahl{font-family:'Playfair Display',serif; font-style:italic; font-size:14px; color:var(--sepia)}
body[data-temperatur="hart"] .blaettern .zahl{font-family:var(--titel); font-style:normal; color:var(--tinte)}

/* ---------- Stiller Moment ---------- */
.stille{
  flex:1 0 auto;   /* füllt die Resthöhe — sonst blitzt der helle Grund durch */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:50px 26px; gap:20px;
  background:radial-gradient(ellipse at 50% 45%, var(--papier) 40%, var(--vignette) 100%);
}
body[data-temperatur="hart"] .stille{background:var(--tinte); color:var(--creme)}
.stille .akt-nr{font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--sepia)}
body[data-temperatur="hart"] .stille .akt-nr{color:#9A9894}
.stille .gross{font-family:var(--titel); font-weight:900; font-size:31px; line-height:1.12}
body[data-temperatur="hart"] .stille .gross{text-transform:uppercase; font-size:33px; line-height:.98}
.stille p{
  font-family:'Playfair Display',serif; font-style:italic; font-size:17px;
  color:var(--sepia); max-width:27ch; line-height:1.42;
}
body[data-temperatur="hart"] .stille p{color:#B8B6B0}

/* ---------- Listen, Regie ---------- */
.leer{
  text-align:center; padding:62px 26px; line-height:1.6;
  font-family:'Playfair Display',serif; font-style:italic; font-size:16px; color:var(--sepia);
}
.balken{
  background:var(--tinte); color:var(--creme); padding:13px var(--rand);
  display:flex; align-items:baseline; gap:10px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
}
.balken b{font-family:var(--titel); font-size:18px; letter-spacing:.02em; font-weight:400}
body[data-temperatur="hart"] .balken b{text-transform:uppercase}
.balken small{margin-left:auto; color:#9A9894; font-size:9.5px; letter-spacing:.2em}

.zeile{
  display:flex; align-items:center; gap:12px;
  padding:13px var(--rand); border-bottom:1px solid var(--kante);
}
.zeile .wachsen{flex:1; min-width:0}
.zeile .name{font-family:var(--titel); font-size:17px; font-weight:700}
body[data-temperatur="hart"] .zeile .name{text-transform:uppercase; font-weight:400}
.zeile .unter{font-size:12.5px; color:var(--sepia); word-break:break-all}
/* Warnung als Fläche: dunkler Grund, heller Text. Kein farbiger Randstrich. */
.zeile .unter.warnung{background:var(--tinte); color:var(--creme); padding:6px 8px; word-break:normal}
.zeile .unter.link{font-size:11.5px; user-select:all; -webkit-user-select:all}
.schalter{
  border:var(--kantenstaerke) solid var(--tinte); background:transparent;
  padding:9px 13px; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  min-height:44px; white-space:nowrap;
}
.schalter.an{background:var(--tinte); color:var(--creme)}
.schalter.gefahr{border-color:#96322A; color:#96322A}
.regieteil{padding:0 0 10px}
.regieteil h3{
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--sepia);
  padding:22px var(--rand) 8px; font-weight:400;
}
.regieteil .tat{padding:12px var(--rand) 4px}
/* Felder und Knöpfe untereinander, alle über die ganze Breite. */
.regieteil .tat.gestapelt{display:flex; flex-direction:column; gap:10px}
.tat.gestapelt .feld, .tat.gestapelt .redtext{margin-bottom:0; width:100%}
.tat.gestapelt .knopf+.knopf{margin-top:0}
.regieteil .hinweis{padding:4px var(--rand) 14px; font-size:12.5px; color:var(--sepia)}

/* ---------- Redaktion ---------- */
.redaktion{padding:6px var(--rand) 40px}
.redteil{margin-bottom:22px}
.redteil label{display:block}
.beschriftung{
  display:block; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--sepia); margin-bottom:7px;
}
body[data-temperatur="hart"] .beschriftung{
  font-family:var(--titel); font-size:13px; letter-spacing:.1em; color:var(--tinte);
}
.redteil .feld, .redkarte .feld{margin-bottom:0; font-size:16px; text-align:left}
body[data-temperatur="hart"] .redteil .feld,
body[data-temperatur="hart"] .redkarte .feld{
  font-family:var(--text); text-transform:none; letter-spacing:0;
}
.redtext{min-height:110px; font-family:var(--text); font-size:15.5px}
.redtext.klein{min-height:80px}
.redtext.hoch{min-height:260px}
.redhinweis{font-size:12.5px; color:var(--sepia); margin-top:6px; line-height:1.45}
.redkarte{
  border:var(--kantenstaerke) solid var(--kante); padding:12px; margin-bottom:10px;
  display:flex; flex-direction:column; gap:8px;
}
.redkarte .feld{margin-bottom:0}
.redkarte .schalter{align-self:flex-start}
.redaktion .tat{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.redaktion .tat .knopf+.knopf{margin-top:0}

/* ---------- Meldung ---------- */
#melder{
  position:fixed; left:50%; bottom:78px; transform:translateX(-50%);
  background:var(--tinte); color:var(--creme); padding:11px 18px;
  font-size:13px; letter-spacing:.04em; z-index:70; max-width:90vw; text-align:center;
}
#melder[hidden]{display:none}

@media (prefers-reduced-motion:no-preference){
  main{scroll-behavior:smooth}
}

/* ---------- Ein Titelblock für alle Ansichten ----------
   Bis 21.09.2026 gab es vier: .plakat (Home, Programm), .stkopf (Station), .walkkopf (Transfer-Walk)
   und den dunklen .balken (Fragen, Wissen, Notizen, Regie). Jeder war anders hoch und anders
   hinterlegt, beim Wechsel sprang die Seite. Jetzt: gleiche Fläche, gleiche Abstände, gleiche
   Mindesthöhe, dieselbe Dreiteilung Oberzeile · Titel · Unterzeile. */
.plakat, .stkopf, .walkkopf, .balken{
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0;
  min-height:150px; padding:24px var(--rand) 22px; text-align:center;
  color:var(--tinte); letter-spacing:normal; text-transform:none; font-size:16px;
  border-bottom:var(--kantenstaerke) solid var(--kante);
  background:radial-gradient(ellipse at 50% 40%, var(--papier) 50%, var(--vignette) 100%);
}
body[data-temperatur="hart"] .plakat, body[data-temperatur="hart"] .stkopf,
body[data-temperatur="hart"] .walkkopf, body[data-temperatur="hart"] .balken{background:var(--papier)}
.balken{flex-direction:column-reverse}                       /* im DOM steht der Titel vor der Oberzeile */
.plakat .titel, .stkopf h2, .walkkopf h2, .balken b{
  font-family:var(--titel); font-weight:900; font-size:28px; line-height:1.06; letter-spacing:0; margin:7px 0 5px;
}
.plakat .zeile, .stkopf .akt-nr, .walkkopf .band, .balken small{
  margin:0; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--sepia);
}
.plakat .regie, .stkopf .meta, .walkkopf .meta{
  font-family:'Playfair Display',serif; font-style:italic; font-size:13.5px; color:var(--sepia);
}

/* ---------- Der Coach antwortet ----------
   Lesbarkeit vor Stimmung (Wagi, 21.09.2026: «ist so nicht leserlich»). Die Titelschrift trägt nur den
   einen Satz zum Merken; alles Weitere steht in der Leseschrift, linksbündig, mit Luft. Was man antippen
   kann, sieht auch so aus: volle Breite, Pfeil, Tinte statt Sepia, mindestens 52 px hoch. */
.coach{padding:26px 0 18px}
.coach > p, .coach > h3, .coach > ol{margin-left:var(--rand); margin-right:var(--rand)}
.coach-kern{font-family:var(--titel); font-weight:700; font-size:23px; line-height:1.24; margin-bottom:16px}
body[data-temperatur="hart"] .coach-kern{text-transform:uppercase; font-weight:400; font-size:24px; line-height:1.12}
.coach-text{font-size:16.5px; line-height:1.6; margin-bottom:6px}
.coach-hinweis{font-size:14px; line-height:1.5; color:var(--sepia); margin-top:10px}
.coach > h3{
  margin-top:30px; margin-bottom:0; padding-bottom:9px; border-bottom:2px solid var(--tinte);
  font-family:var(--text); font-weight:600; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--tinte);
}
.coach-schritte{list-style:none; padding:0; counter-reset:schritt}
.coach-schritte li{
  counter-increment:schritt; display:flex; gap:14px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--kante); font-size:16px; line-height:1.45;
}
.coach-schritte li::before{
  content:counter(schritt); flex:0 0 22px; font-family:var(--titel); font-weight:900; font-size:21px; line-height:1;
}
.coach-zeile{
  display:flex; align-items:center; gap:14px; width:100%; min-height:52px; padding:13px var(--rand);
  border:0; border-bottom:1px solid var(--kante); background:transparent; color:var(--tinte);
  font-family:var(--text); font-size:16px; line-height:1.4; text-align:left; text-decoration:none;
}
.coach-zeile::after{content:"→"; margin-left:auto; font-family:var(--titel); font-size:20px; flex:0 0 auto}
.coach-zeile:hover, .coach-zeile:focus-visible, .coach-zeile:active{background:var(--papier)}
.coach-zeile-text{display:block; min-width:0}
.coach-zeile-text b{display:block; font-weight:500}
.coach-zeile-text small{display:block; font-size:12px; letter-spacing:.06em; color:var(--sepia); margin-top:2px}
.coach-frage{
  margin:0 var(--rand) 0; padding:22px 0 0; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--sepia);
}
.verlauf.offen{border-bottom:2px solid var(--tinte)}
.verlauf.offen .coach{padding-top:10px}
.verlauf-zu .coach-zeile-text small{
  font-size:13px; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

/* ---------- Die Lernkarte ----------
   Eine Karteikarte aus Papier mit Tintenrand. Vorn trägt die Titelschrift einen einzigen Satz, hinten
   steht alles in der Leseschrift. Die Übung ist die dunkle Fläche (dort wird gehandelt), der Tipp die
   helle mit Rand. Drehen nur über transform: nichts ruckelt, nichts springt. */
.lk-stapel{padding:22px var(--rand) 8px; display:flex; flex-direction:column; gap:18px}
.lk-stapel-titel{
  font-family:var(--text); font-weight:600; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  padding-bottom:9px; border-bottom:2px solid var(--tinte);
}
.lk{
  background:var(--papier); border:2px solid var(--tinte); padding:20px 18px 18px;
  transition:transform .17s ease-in; transform-origin:50% 50%;
}
.lk.dreht{transform:scaleX(.02)}
@media (prefers-reduced-motion:reduce){ .lk{transition:none} }
.lk-nr{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--sepia)}
.lk-titel{font-family:var(--titel); font-weight:900; font-size:25px; line-height:1.1; margin:8px 0 12px}
.lk-titel.klein{font-size:19px; margin-bottom:14px}
body[data-temperatur="hart"] .lk-titel{text-transform:uppercase; font-weight:400}
.lk-kern{font-family:'Playfair Display',serif; font-style:italic; font-size:19px; line-height:1.38; margin-bottom:20px}
.lk-punkte{list-style:none; padding:0; margin:0 0 6px}
.lk-punkte li{padding:11px 0; border-top:1px solid var(--kante); font-size:16px; line-height:1.55}
.lk-punkte li:first-child{border-top:0; padding-top:0}
.lk-punkte b{font-weight:600}
.lk-text{font-size:16px; line-height:1.55; margin-bottom:12px}
.lk-uebung, .lk-tipp{margin-top:16px; padding:15px 16px}
.lk-uebung{background:var(--tinte); color:var(--creme)}
.lk-tipp{border:1px solid var(--tinte)}
.lk-uebung > b, .lk-tipp > b{
  display:block; margin-bottom:6px; font-weight:600; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
}
.lk-uebung p, .lk-tipp p{font-size:15.5px; line-height:1.55}
.lk-tipp a{color:var(--tinte); text-underline-offset:3px}
.lk-zeile{display:flex; align-items:center; gap:14px; margin-top:12px}
.lk-uhr, .lk-wort{font-family:var(--titel); font-weight:900; font-size:24px; line-height:1}
.lk-wort{margin-bottom:0}
.lk-knopf{
  display:block; width:100%; min-height:48px; margin-top:16px; padding:12px 14px;
  border:2px solid var(--tinte); background:var(--tinte); color:var(--creme);
  font-family:var(--text); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
}
.lk-zeile .lk-knopf{width:auto; flex:0 0 auto; margin-top:0}
.lk-knopf.leise{background:transparent; color:var(--tinte)}
.lk-knopf.hell{background:var(--creme); color:var(--tinte); border-color:var(--creme)}

.lk-stapel:empty{display:none}