/* Projektseite D-04 Morning-Briefing – „Ein Tag über Dohren“. Farben und Landschaft aus der App „Horizont“
   (Repo morning-briefing, design/). Ohne JS: alle Inhalte in normaler Höhe, Bühne als ruhiges Nachtbild. */

/* ---------- Seitenwechsel: diese Welt fährt von unten herein, die vorige Seite tritt zurück (View Transitions; ohne Unterstützung oder bei reduzierter Bewegung normaler Seitenaufruf) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition{background:#f4f1ec}
  ::view-transition-old(root){animation:sw-zurueck .6s cubic-bezier(.5,0,.2,1) both;mix-blend-mode:normal}
  ::view-transition-new(root){animation:sw-herein .8s cubic-bezier(.16,1,.3,1) .05s both;mix-blend-mode:normal}
}
@keyframes sw-zurueck{to{transform:translateY(-4%) scale(.9);opacity:.2}}
@keyframes sw-herein{from{transform:translateY(100%)}}

@font-face{font-family:'Instrument Serif';src:url('../fonts/instrument-serif-normal-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('../fonts/instrument-serif-italic-400-latin.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../fonts/instrument-sans-normal-400_700-latin.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-normal-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-normal-500-latin.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --papier:#F7F4EE; --torf:#2B2420; --torf-2:#62574F; --linie:rgba(43,36,32,.15);
  --heide:#7B4F8E; --glut:#F2A53A; --glut-hell:#FFD68A; --moor:#2F3A2C; --moor-tief:#1E271D;
  --moor-tinte:#E6EADF; --moor-tinte-2:#B4BDAD; --hell:#F4F1EC; --nacht:#151B33;
  --mark:rgba(242,165,58,.5); --fokus:#7B4F8E;
  --titel:'Instrument Serif',Georgia,'Times New Roman',serif;
  --text:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --rand:clamp(16px,4vw,56px);
  --schatten:0 44px 80px -42px rgba(8,12,28,.6),0 2px 8px rgba(8,12,28,.14);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;background:var(--moor)}
body{min-height:100vh;background:var(--moor);color:var(--torf);font:400 17px/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:6px}
.leiste :focus-visible,.kopf :focus-visible,.sender :focus-visible,.kapitel :focus-visible,.nacht :focus-visible,.fuss :focus-visible{outline-color:var(--glut)}
[hidden]{display:none!important}

.sprung{position:absolute;left:var(--rand);top:-80px;z-index:20;background:var(--papier);color:var(--torf);padding:12px 18px;border-radius:99px;font-weight:600;text-decoration:none}
.sprung:focus{top:12px}

/* ---------- Bühne: Himmel und Land, fest hinter allem ---------- */
.buehne{position:fixed;left:0;top:0;width:100%;height:100svh;z-index:0;background:#0e1328;overflow:hidden;color:var(--uhr-tinte,var(--hell))}
.land{position:absolute;inset:0;width:100%;height:100%}
.buehne.ruht .ls-dreh,.buehne.ruht .ls-blink,.buehne.ruht .ls-regen{animation-play-state:paused}
/* aus landschaft.css; .ruht hält sie 4 s nach dem letzten Scrollen an */
.ls-dreh{animation:ls-dreh var(--d,6s) linear infinite}
@keyframes ls-dreh{to{transform:rotate(360deg)}}
.ls-blink{animation:ls-blink 2.4s ease-in-out infinite}
@keyframes ls-blink{0%,38%{opacity:1}55%,88%{opacity:.08}100%{opacity:1}}
.ls-regen{animation:ls-regen .6s linear infinite}
@keyframes ls-regen{to{transform:translate(-1.91px,23.92px)}}

.uhr{position:absolute;top:clamp(14px,3.2vh,40px);right:var(--rand);text-align:right;transition:opacity .35s ease}
.uhr.links{right:auto;left:var(--rand);text-align:left}
.uhr-zeit{font:400 clamp(44px,7.4vw,124px)/1 var(--titel);letter-spacing:-.01em;white-space:nowrap}
.ziffer{display:inline-block;height:1em;width:.5em;overflow:hidden;vertical-align:top;text-align:center}
.band{display:block;transition:transform .55s cubic-bezier(.2,.75,0,1)}
.band span{display:block;height:1em;line-height:1em}
.doppel{display:inline-block;width:.26em;text-align:center;vertical-align:top;line-height:1em}
.uhr-tag{font:500 12.5px/1.4 var(--mono);margin-top:6px;opacity:.9}
.ablesen{position:absolute;left:0;bottom:30%;transform:translateX(-50%);padding:7px 12px;border-radius:99px;background:rgba(18,24,18,.86);color:var(--hell);font:500 13px/1.3 var(--mono);white-space:nowrap;pointer-events:none}

/* ---------- Kopfleiste und Kopf ---------- */
/* „← Profil“ links, „Anton Gartmann“ (Startseite) rechts; oben schiebt die Leiste die große Uhr nach unten (Skript) */
.leiste{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px;padding:14px clamp(16px,3vw,40px) 0;pointer-events:none}
.leiste a{pointer-events:auto}
.zurueck{display:inline-flex;align-items:center;gap:.45em;min-height:44px;padding:9px 18px;border-radius:99px;border:1.5px solid rgba(244,241,236,.55);background:rgba(14,19,40,.4);color:var(--hell);font:600 16px/1.2 var(--text);text-decoration:none;transition:background .2s,border-color .2s}
.zurueck:hover{background:rgba(14,19,40,.7);border-color:var(--glut-hell)}
.name{display:inline-flex;align-items:center;min-height:44px;color:var(--hell);font:500 13px/1.2 var(--mono);text-decoration:none}

main{position:relative;z-index:1;pointer-events:none}
.szene{position:relative;padding:0 var(--rand);margin-bottom:68svh}
.karte,.kopf-text,.sender-karte{pointer-events:auto}

.kopf{min-height:calc(100svh - 58px);margin-bottom:22vh;padding-top:clamp(26px,8vh,110px)}
.kopf-text{max-width:min(1000px,100%);color:var(--hell)}
.ort{font:500 13px/1.4 var(--mono);letter-spacing:.06em}
h1{font:400 clamp(3.4rem,min(12.6vw,15.5vh),8.8rem)/.9 var(--titel);letter-spacing:-.025em;margin:.2em 0 .26em -.04em;hyphens:manual}
h1 em{font-style:italic;color:var(--glut-hell);padding-right:.06em}
.leitsatz{font-size:clamp(1.06rem,.62rem + 1.15vw,1.32rem);line-height:1.55;max-width:34em;text-wrap:pretty}
.tipp{margin-top:1.3em;font:500 16px/1.45 var(--text);color:var(--glut-hell)}

/* Kurzfassung „In 30 Sekunden“ gleich nach dem Kopf: eine Karte wie die übrigen, darunter die Sprungleiste als Kapitel-Chips */
.k-dl div+div{margin-top:16px}
.k-dl dt{font:500 13px/1.35 var(--mono);color:var(--heide)}
.k-dl dd{margin-top:4px}
.k-dl ul,.k-nav ul{list-style:none;padding:0}
.k-dl li{position:relative;padding-left:22px}
.k-dl li::before{content:"";position:absolute;left:1px;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--glut)}
.karte .k-los{margin:22px 0 0}
.k-los a,.k-nav a{display:inline-flex;align-items:center;gap:.4em;min-height:44px;border-radius:99px;font-weight:600;text-decoration:none}
.k-los a{padding:9px 20px;background:var(--torf);color:var(--hell)}
.k-nav ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid var(--linie)}
.k-nav a{padding:0 14px;background:rgba(123,79,142,.1)}
.k-los a:hover,.k-nav a:hover{text-decoration:underline}

/* ---------- Karten ---------- */
.karte{position:relative;width:min(100%,590px);background:var(--papier);color:var(--torf);border-radius:20px;padding:clamp(22px,3vw,40px);box-shadow:var(--schatten)}
.rechts{margin-left:auto}
.links{margin-right:auto}
.breit{width:min(100%,940px)}
.etikett{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;border-top:2px solid currentColor;padding-top:12px;margin-bottom:20px;font:650 15px/1.35 var(--text)}
.karte .etikett{max-width:none}
.etikett .zeit{font:500 13px/1.35 var(--mono);color:var(--heide)}
h2{font:400 clamp(2.15rem,1.4rem + 2.6vw,3.5rem)/1.02 var(--titel);letter-spacing:-.018em;margin-bottom:.5em;text-wrap:balance}
.karte p{margin-bottom:1em;max-width:62ch;text-wrap:pretty}
.karte p:last-child{margin-bottom:0}
code{font:500 .88em var(--mono);background:rgba(123,79,142,.1);padding:.05em .32em;border-radius:5px}
.muehle-text span,.schritte-titel{font:400 13px/1.5 var(--mono);color:var(--torf-2)}
.notiz,figcaption,.sender-hinweis{font:400 16px/1.5 var(--text);color:var(--torf-2)}
.notiz{margin-top:14px}

.takt{list-style:none;padding:0;margin:4px 0 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.takt li{position:relative;padding-top:24px;font-size:15px;line-height:1.35}
.takt li::before{content:"";position:absolute;left:0;top:3px;width:12px;height:12px;border-radius:50%;border:2px solid var(--glut);background:var(--papier)}
.takt li:first-child::before{background:var(--glut)}
.takt li::after{content:"";position:absolute;left:18px;right:6px;top:8.5px;border-top:1.5px dotted rgba(43,36,32,.35)}
.takt li:last-child::after{display:none}
.takt .zeit{display:block;font:500 13px/1.3 var(--mono);color:var(--heide)}

.schritte{margin-top:22px;padding:16px 18px 6px;border-radius:14px;background:rgba(242,165,58,.13)}
.schritte-titel{margin-bottom:4px!important}
.schritte ol{list-style:none;padding:0}
.schritte li+li{border-top:1px solid var(--linie)}
.schritte a{display:flex;gap:12px;align-items:baseline;padding:11px 0;text-decoration:none;line-height:1.4}
.schritte a:hover{text-decoration:underline;text-decoration-color:var(--heide);text-underline-offset:3px}
.nr{flex:none;width:1.1em;font:400 1.5rem/1 var(--titel);color:var(--heide)}

/* Quellen fließen zur Mühle */
.quellen{position:relative;margin:8px 0 24px}
.quellen-liste{position:relative;z-index:1;list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.quellen-liste li{background:#fff;border:1px solid var(--linie);border-radius:99px;padding:7px 13px;font:600 14.5px/1.3 var(--text);box-shadow:0 1px 2px rgba(43,36,32,.06)}
.quellen-liste small{font:400 12px/1.3 var(--mono);color:var(--torf-2);margin-left:.25em}
.quellen-wege{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.weg{fill:none;stroke:var(--torf);stroke-opacity:.38;stroke-width:1.4;stroke-dasharray:1.5 6;stroke-linecap:round}
.korn{fill:var(--glut);stroke:#C77F16;stroke-width:1}
.muehle-feld{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;margin-top:64px}
.muehle{width:116px;height:auto;overflow:visible}
.muehle-turm{fill:var(--torf)}
.muehle-fenster{fill:var(--glut)}
.muehle-fluegel{fill:none;stroke:var(--torf)}
.muehle-fluegel circle{fill:var(--torf);stroke:none}
.muehle-text{margin:10px 0 0!important;text-align:center;line-height:1.3}
.muehle-text strong{display:block;font:400 1.7rem/1.1 var(--titel)}
.quellen figcaption{margin-top:12px;text-align:center}

.sieb{list-style:none;padding:0}
.sieb li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--linie);line-height:1.5}
.sieb li::before{content:"";position:absolute;left:4px;top:20px;width:9px;height:13px;border-radius:50%;background:var(--glut);transform:rotate(28deg)}
.sieb strong{display:block;font-weight:650}

/* Karten mit Bild: Text und Telefon nebeneinander ab Tablet */
.mit-bild{width:min(100%,880px)}
.telefon{margin:0}
.telefon a{display:block;border-radius:18px;overflow:hidden;background:#1d2733;box-shadow:0 22px 44px -26px rgba(20,24,32,.7),0 0 0 1px rgba(43,36,32,.08)}
.telefon img,.schirm img{width:100%;height:auto}
.telefon figcaption,.schirm figcaption{margin-top:9px;text-align:center;line-height:1.4}
.telefon a:hover img,.schirm a:hover img{transform:scale(1.02)}
.telefon img,.schirm img{transition:transform .5s cubic-bezier(.2,.7,0,1)}
.mit-bild>.telefon{max-width:250px;margin:24px auto 0}
@media (min-width:760px){
  .mit-bild{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:36px;align-items:start}
  .mit-bild>.telefon{margin:6px 0 0;max-width:none}
}

.paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0 4px}
.reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0 18px}
.reihe .telefon a{aspect-ratio:520/900;background:#EEF1F1}
.reihe .telefon:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}
@media (min-width:640px){
  .reihe{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reihe .telefon:last-child{grid-column:auto;width:auto}
}
.spalten{display:grid;gap:0 32px}
@media (min-width:760px){.spalten{grid-template-columns:1fr 1fr}}
.schirm{margin:6px auto 0;max-width:800px} /* Ansicht liegt nur in 800 px vor: nicht hochskalieren */
.schirm a{display:block;border-radius:12px;overflow:hidden;box-shadow:0 22px 44px -26px rgba(20,24,32,.7),0 0 0 1px rgba(43,36,32,.08)}

.legende{list-style:none;padding:0;margin:0 0 20px}
.legende li{display:flex;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--linie);line-height:1.45}
.legende svg{flex:none;width:42px;height:26px}
.legende strong{font-weight:650;margin-right:.25em}
.lg-linie{fill:none;stroke:var(--moor);stroke-width:2.4;stroke-linecap:round}
.lg-wolke{fill:#C6CDD5;stroke:#62574F;stroke-width:1}
.lg-regen{stroke:#4E6C8C;stroke-width:1.7;stroke-linecap:round}
.lg-bogen{fill:none;stroke:#62574F;stroke-width:1.4;stroke-dasharray:1.5 4;stroke-linecap:round}
.lg-sonne{fill:var(--glut)}
.lg-wimpel{fill:var(--glut);stroke:#C77F16;stroke-width:1.4;stroke-linejoin:round}
.nur-js{font:500 16px/1.5 var(--text);color:var(--heide)}

/* Nacht: dunkles Papier, schmal, damit der Mond frei bleibt */
.nacht{background:var(--nacht);color:#ECE8F4;width:min(100%,540px)}
.nacht>.telefon{max-width:230px;margin:26px auto 0}
.nacht .etikett .zeit{color:var(--glut-hell)}
.nacht .telefon figcaption{color:#B9B6D0}
.zahlen>div{padding:15px 0;border-top:1px solid rgba(236,232,244,.2)}
.zahlen dt{font:500 13px/1.4 var(--mono);color:var(--glut-hell)}
.zahlen dd{margin:4px 0 0;color:#D9D5E6}
.gross{display:block;font:400 clamp(2rem,1.5rem + 1.6vw,2.7rem)/1.08 var(--titel);color:#fff;margin-bottom:2px}

/* ---------- Der Sender: Player, Welle, Kapitel, Mitlesen ---------- */
.sender-buehne{margin-top:12vh}
.sender-klebt{display:flex;justify-content:flex-end}
.sender-karte{width:min(100%,640px);background:var(--papier);border-radius:20px;overflow:hidden;box-shadow:var(--schatten)}
.sender{display:flex;gap:16px;align-items:center;padding:18px 20px 8px;background:var(--moor);color:var(--moor-tinte)}
.sonnenknopf{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:var(--torf);background:radial-gradient(circle at 38% 34%,var(--glut-hell),var(--glut) 62%,#E4892E);box-shadow:0 0 0 calc(6px + var(--halo,0px)) rgba(242,165,58,.16),0 0 calc(30px + var(--halo,0px) * 2) rgba(242,165,58,.34)}
.sonnenknopf svg{width:24px;height:24px;fill:currentColor}
.sender-text{flex:1;min-width:0}
.sender-zeile{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;margin-bottom:4px}
.sender-zeile strong{font:650 1.08rem/1.25 var(--text)} /* schmal rutscht die Zeit in die nächste Zeile, der Titel bleibt ganz */
.sender-zeit{font:400 13px/1.2 var(--mono);color:var(--moor-tinte-2);white-space:nowrap}
.welle{width:100%;height:40px}
.welle rect{fill:rgba(230,234,223,.3)}
.welle rect.an{fill:var(--glut)}
.kapitel{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px 14px;background:var(--moor)}
.kapitel a{min-height:44px;display:inline-flex;align-items:center;padding:0 13px;border-radius:99px;background:rgba(230,234,223,.11);color:var(--moor-tinte);font:500 14px/1 var(--text);text-decoration:none;transition:background .3s,color .3s}
.kapitel a:hover{background:rgba(230,234,223,.22)}
.kapitel a[aria-current="true"]{background:var(--glut);color:var(--torf)}
.mitlesen{padding:22px 24px 6px}
.mitlesen-innen{position:relative}
.mitlesen p{max-width:36em;margin-bottom:1em;font-size:1.06rem;line-height:1.62}
.satz{border-radius:3px;background:linear-gradient(transparent 58%,var(--mark) 58%) 0 0/0% 100% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .5s ease,color .4s ease}
.satz.jetzt{background-size:100% 100%}
.satz.gehoert{color:var(--torf-2)}
.sender-hinweis{padding:8px 24px 18px;border-top:1px solid var(--linie)}

/* Mit Bewegung: hohe Szene, der Sender klebt, das Mitlesen läuft im Fenster mit – nur wenn der ganze Sender ins
   Fenster passt; niedriger (z. B. 400 % Zoom) steht er mit vollem Text im Fluss */
@media (min-height:520px){
  .js-bewegt .sender-buehne{height:330svh;margin-top:4vh}
  .js-bewegt .sender-klebt{position:sticky;top:0;height:100svh;align-items:center}
  .js-bewegt .mitlesen{height:clamp(170px,34svh,340px);overflow:hidden;mask-image:linear-gradient(transparent,#000 10%,#000 78%,transparent)}
}
.js-bewegt .mitlesen-innen{transition:transform .7s cubic-bezier(.2,.7,0,1)}
.sender-ende{height:1px}

/* ---------- Ausbau: neue Szenen, jede mit eigener Bewegung (ohne JS: Endzustand) ---------- */
/* Ausgangslage: der Weg bis zum Ton als Sonnenbogen von 0 bis 10 Sekunden */
.zehn{margin:6px 0 22px}
.zehn svg{width:min(100%,420px);height:auto;margin:0 auto;overflow:visible}
.z-bogen{fill:none;stroke:var(--torf-2);stroke-width:1.6;stroke-dasharray:1.5 6;stroke-linecap:round}
.z-ticks{fill:var(--torf-2)}
.z-start{fill:var(--papier);stroke:var(--torf-2);stroke-width:1.6}
.zehn text{font:500 12px var(--mono);fill:var(--torf-2);text-anchor:middle}
.zehn .z-zahl{font:400 30px var(--titel);fill:var(--torf);opacity:0}
.z-schein{fill:var(--glut);opacity:.22;transform-box:fill-box;transform-origin:center;transition:transform .6s cubic-bezier(.2,.7,0,1),opacity .6s}
.z-scheibe{fill:var(--glut)}
.z-spiel{fill:var(--torf)}
.z-sonne{opacity:0;fill:var(--glut);transition:opacity .3s}
.z-sonne circle:first-child{opacity:.28}
.js-bewegt .z-sonne,.js-bewegt .zehn .z-zahl{opacity:1}
.js-bewegt .zehn.da .z-sonne{opacity:0}
.js-bewegt .zehn:not(.da) .z-schein{transform:scale(.55);opacity:.06}
.zehn figcaption{text-align:center;margin-top:8px}

/* Aufbau: ein Korn läuft durch die sechs Stationen und zündet sie an */
.werk{position:relative;margin:6px 0 20px}
.werk ol{list-style:none;padding:0;position:relative}
.werk ol::before{content:"";position:absolute;left:17px;top:24px;bottom:24px;border-left:2px dotted rgba(43,36,32,.32)}
.werk li{display:flex;gap:16px;align-items:flex-start;padding:9px 0}
.werk li p{margin:0;padding-top:5px}
.werk strong,.anlauf strong,.zustaende strong,.berichte strong,.w-heute{font-weight:650}
.werk strong,.berichte strong{display:block}
.werk-nr{flex:none;position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--glut);background:var(--glut);font:400 1.25rem/1 var(--titel);color:var(--torf);transition:background .35s,color .35s}
.js-bewegt .werk li:not(.an) .werk-nr{background:var(--papier);color:var(--torf-2)}
.werk-korn{position:absolute;left:12px;top:0;z-index:0;width:12px;height:12px;border-radius:50%;background:var(--glut);box-shadow:0 0 0 5px rgba(242,165,58,.28);opacity:0;pointer-events:none}
.js-bewegt .werk-korn{opacity:1}

/* Zuverlässigkeit: drei Anläufe; Regen, Haken und Pause zeichnen sich beim Scrollen */
.anlauf{margin:6px 0 22px}
.anlauf ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.anlauf li{position:relative;line-height:1.4}
.anlauf li::after{content:"";position:absolute;left:46px;right:-4px;top:21px;border-top:1.5px dotted rgba(43,36,32,.35)}
.anlauf li:last-child::after{display:none}
.a-zeichen{display:block;width:42px;height:42px;border-radius:50%;border:2px solid var(--glut);background:var(--papier);margin-bottom:8px}
.a-zeichen svg{width:100%;height:100%;fill:none;stroke:var(--torf);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.a-zeichen path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--z,1))}
.a-fehl .a-zeichen{border-color:var(--heide)}
.a-fehl svg{stroke:var(--heide)}
.a-gut .a-zeichen{background:var(--glut)}
.anlauf .zeit{display:block;font:500 13px/1.3 var(--mono);color:var(--heide)}
.anlauf strong,.a-was{display:block}
.a-was{opacity:var(--z,1)}
.js-bewegt .anlauf li{--z:0}
.anlauf figcaption{margin-top:12px}

/* Hinweisband: das Band rollt durch seine drei Zustände, der passende Eintrag wird markiert */
.hband{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;margin:4px 0 16px;padding:9px 16px;border-radius:12px;background:#fff;border:1px solid var(--linie);box-shadow:0 1px 3px rgba(43,36,32,.08);font:600 16px/1.6 var(--text)}
.hb-punkt{flex:none;width:9px;height:9px;border-radius:50%;background:var(--glut)}
.hb-fenster{display:block;height:1.6em;overflow:hidden}
.hb-rolle{display:block;transition:transform .55s cubic-bezier(.2,.75,0,1)}
.hb-rolle span{display:block;height:1.6em;white-space:nowrap}
.zustaende{list-style:none;padding:0;margin:0}
.zustaende li{padding:10px 0;border-top:1px solid var(--linie);line-height:1.5}
.zustaende strong{display:table;border-radius:3px;background:linear-gradient(transparent 58%,var(--mark) 58%) 0 0/0% 100% no-repeat;transition:background-size .5s ease}
.zustaende .jetzt strong{background-size:100% 100%}

/* Prüfberichte: zehn Berichte, darunter wandern Balken vom alten zum neuen Wert */
.berichte{list-style:none;padding:0;margin:10px 0 30px;display:grid;gap:0 32px}
.berichte li{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--linie);line-height:1.5}
.berichte p{margin:0}
.b-nr{flex:none;width:2.2em;font:500 13px/1.95 var(--mono);color:var(--heide)}
h3.w-titel{font:400 clamp(1.6rem,1.2rem + 1vw,2rem)/1.1 var(--titel);letter-spacing:-.01em;margin-bottom:8px}
.wandel{margin:0}
.w-zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 18px;padding:12px 0;border-top:1px solid var(--linie)}
.karte .w-zeile p{margin:0}
.w-werte{color:var(--torf-2)}
.w-heute{color:var(--torf);margin-left:.7em}
.w-spur{flex:1 0 100%;position:relative;display:block;height:10px;margin-top:6px;border-radius:99px;background:rgba(43,36,32,.08)}
.w-spur i{position:absolute;left:0;top:0;bottom:0;min-width:5px;width:calc(var(--q,var(--n)) * 100%);border-radius:inherit;background:var(--glut)}
.js-bewegt .w-spur i{width:calc(var(--q,var(--v)) * 100%)}
.w-spur::after{content:"";position:absolute;top:-4px;bottom:-4px;left:calc(var(--v) * 100% - 2px);border-left:2px solid var(--heide)}
.wandel figcaption{margin-top:12px}

/* Kosten: ein Monat aus 30 Morgen, jeder ein Briefing */
.monat{display:grid;grid-template-columns:repeat(10,12px);gap:8px;margin:14px 0 2px}
.monat i{width:12px;height:12px;border-radius:50%;background:var(--glut);box-shadow:0 0 0 3px rgba(242,165,58,.18);transition:background .3s,box-shadow .3s}
.js-bewegt .monat i:not(.an){background:transparent;box-shadow:inset 0 0 0 1.5px rgba(236,232,244,.4)}
.monat b{grid-column:1/-1;margin-top:4px;font:500 13px/1.5 var(--mono);color:var(--glut-hell)}
.nacht .karte-text>p{color:#D9D5E6}

/* Zusammenspiel: drei Wimpel auf einem Hügel, ein Korn auf dem n8n-Weg */
.schmal{width:min(100%,540px)}
.nachbarn{margin:4px 0 16px}
.nachbarn svg{width:100%;height:auto;overflow:visible}
.nb-land{fill:rgba(47,58,44,.12)}
.nb-linie{fill:none;stroke:var(--moor);stroke-width:1.6}
.nb-weg{fill:none;stroke:var(--torf);stroke-opacity:.55;stroke-width:1.5;stroke-dasharray:1.5 6;stroke-linecap:round}
.nb-weg.zwei{stroke-dasharray:6 6;stroke-opacity:.3}
.nachbarn text{font:500 12px var(--mono);fill:var(--torf-2);text-anchor:middle}
.nachbarn .nb-code{fill:var(--torf)}
.wimpel{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--h,1));stroke:var(--torf);stroke-width:1.6;stroke-linecap:round}
.nb-fahne{fill:var(--glut);stroke:#C77F16;stroke-linejoin:round}
.hier .nb-fahne{fill:var(--heide);stroke:var(--heide)}
.nb-korn{fill:var(--glut);stroke:#C77F16;opacity:0}
.js-bewegt .wimpel{--h:0}
.js-bewegt .nb-korn{opacity:1}
.verweise{list-style:none;padding:0}
.verweise li{padding:10px 0 14px;border-top:1px solid var(--linie)}
.verweise a{display:inline-flex;align-items:baseline;gap:.45em;min-height:44px;padding:8px 0 4px;font:400 1.7rem/1.1 var(--titel);text-decoration:underline;text-decoration-color:rgba(123,79,142,.45);text-underline-offset:5px}
.verweise a:hover{text-decoration-color:var(--heide)}
.v-code{font:500 13px var(--mono);color:var(--heide)}
.karte .verweise p{margin:0}

.kasten{margin-top:22px;padding:16px 18px;border-radius:14px;background:rgba(242,165,58,.13)}
.kasten strong{display:block;font-weight:650}

/* ---------- Fuß ---------- */
.fuss{position:relative;z-index:1;margin-top:30vh;background:linear-gradient(rgba(30,39,29,0),var(--moor-tief) 140px);color:var(--moor-tinte)}
.fuss-innen{max-width:1200px;margin:0 auto;padding:160px var(--rand) calc(48px + env(safe-area-inset-bottom))}
.fuss-satz{font:400 clamp(2.3rem,1.4rem + 3.4vw,4.4rem)/1.04 var(--titel);letter-spacing:-.02em;max-width:14em;text-wrap:balance}
.steckbrief{display:grid;gap:0 28px;margin-top:36px}
.steckbrief div{padding:14px 0;border-top:1px solid rgba(230,234,223,.2)}
.steckbrief dt,.weiter-titel{font:500 13px/1.4 var(--mono);color:var(--glut-hell)}
.steckbrief dd{margin:4px 0 0;line-height:1.5}
.weiter{margin-top:34px}
.weiter-titel{margin-bottom:10px}
.weiter ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.weiter a{display:flex;flex-direction:column;gap:3px;min-height:44px;padding:12px 20px;border-radius:16px;border:1.5px solid rgba(230,234,223,.35);color:var(--moor-tinte);font:600 17px/1.25 var(--text);text-decoration:none;transition:border-color .2s,background .2s}
.weiter a:hover{border-color:var(--glut-hell);background:rgba(230,234,223,.07)}
.w-richtung{font:500 13px/1.3 var(--mono);color:var(--moor-tinte-2)}
@media (min-width:760px){.steckbrief{grid-template-columns:repeat(3,minmax(0,1fr))}.berichte{grid-template-columns:1fr 1fr}}
.fuss-zurueck{margin:30px 0 24px}
.zurueck-fuss{font-size:17px;padding:11px 22px;background:transparent}
.fuss-links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 28px}
.fuss-links a{display:inline-block;padding:10px 0;color:var(--moor-tinte);text-underline-offset:4px}
.fuss-links a:hover{color:var(--glut-hell)}
.fuss-notiz{margin-top:22px;max-width:64ch;font:400 16px/1.6 var(--text);color:var(--moor-tinte-2)}

/* ---------- Breiten ---------- */
@media (max-width:899px){
  .uhr,.uhr.links{left:auto;right:var(--rand);text-align:right}
}
@media (max-width:640px){
  h1{font-size:clamp(3.4rem,19vw,5.4rem)}
  h1 em{display:block}
  .szene{margin-bottom:58svh}
  .karte{border-radius:16px}
  .sender{padding:14px 14px 6px;gap:12px}
  .sonnenknopf{width:54px;height:54px}
  .kapitel{padding:6px 10px 12px;gap:5px}
  .kapitel a{padding:0 11px}
  .mitlesen{padding:18px 18px 4px}
  .sender-hinweis{padding:8px 18px 16px}
}
@media (max-width:640px) and (max-height:700px){
  .kopf{padding-top:8px}
  h1{font-size:clamp(3rem,17vw,4.4rem);margin:.12em 0 .18em}
  .leitsatz{font-size:1rem;line-height:1.5}
  .tipp{margin-top:.7em}
}
@media (max-width:560px){
  .anlauf ol{grid-template-columns:1fr;gap:0}
  .anlauf li{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;padding:6px 0 14px}
  .a-zeichen{grid-row:span 3;margin:0}
  .anlauf li::after{left:21px;right:auto;top:48px;bottom:-4px;border-top:0;border-left:1.5px dotted rgba(43,36,32,.35)}
}
@media (max-width:380px){
  .takt{grid-template-columns:1fr;gap:4px}
  .takt li::after{display:none}
  .takt li{padding:0 0 0 24px}
  .takt li::before{top:5px}
  .takt .zeit{display:inline;margin-right:.4em}
}

@media (prefers-reduced-motion:reduce){
  .ls-dreh,.ls-blink,.ls-regen{animation:none}
  .band,.satz,.uhr,.telefon img,.schirm img,.zurueck,.kapitel a,.z-schein,.werk-nr,.hb-rolle,.zustaende strong,.monat i,.weiter a{transition:none}
}

/* ---------- Druck ----------
   Papier statt Himmel: Die feste Bühne stand sonst hinter jeder Seite. Sie steht einmal als Band über dem Kopf (das Skript
   zeichnet dafür den Mittag), Karten laufen in voller Breite ohne Szenenabstand, helle Schrift der Nacht wird Torf.
   Player-Bedienung entfällt; kleine Marken (Punkte, Balken) behalten ihre Farbe, sonst fehlten sie ganz. */
@page{margin:14mm 12mm}
@media print{
  html,body{background:#fff}
  body{min-height:0;overflow:visible;zoom:.8}
  .buehne{position:relative;height:70mm;margin-bottom:4mm;border-radius:6px}
  .uhr,.ablesen,.tipp,.k-los,.k-nav,.sonnenknopf,.welle,.kapitel,.quellen-wege,.werk-korn{display:none}
  .muehle-feld{margin-top:20px}
  .leiste{padding:0}
  .zurueck{color:var(--torf);border-color:var(--torf);background:none}
  .name,.kopf-text{color:var(--torf)}
  h1 em{color:#9a5a0c}
  .kopf{min-height:0;margin-bottom:6mm;padding-top:2mm}
  .szene{margin-bottom:6mm;padding:0}
  .karte,.breit,.schmal,.mit-bild,.nacht,.sender-karte{width:auto;margin:0;box-shadow:none;border:1px solid var(--linie)}
  .sender-buehne{margin:0 0 6mm}
  .sender-klebt{display:block}
  .telefon a,.schirm a{box-shadow:none;border:1px solid var(--linie)}
  .nachbarn svg{max-width:110mm;margin-inline:auto}
  .sender{background:none;color:var(--torf)}
  .sender-zeit{color:var(--torf-2)}
  .satz.gehoert{color:inherit}
  .nacht,.nacht .karte-text>p,.zahlen dd,.gross{color:var(--torf)}
  .nacht .etikett .zeit,.zahlen dt,.monat b{color:var(--heide)}
  .nacht .telefon figcaption{color:var(--torf-2)}
  .zahlen>div{border-top-color:var(--linie)}
  .fuss{margin-top:0;background:none;color:var(--torf)}
  .fuss-innen{padding:4mm 0 0}
  .fuss-satz{font-size:2.6rem}
  .steckbrief,.weiter{margin-top:14px}
  .fuss-zurueck{margin:14px 0 8px}
  .fuss-notiz{margin-top:8px}
  .steckbrief{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steckbrief div{border-top-color:var(--linie)}
  .steckbrief dt,.weiter-titel{color:var(--heide)}
  .weiter a,.fuss-links a{color:var(--torf);border-color:var(--linie)}
  .w-richtung,.fuss-notiz{color:var(--torf-2)}
  .sieb li::before,.takt li::before,.k-dl li::before,.hb-punkt,.werk-nr,.w-spur,.w-spur i,.a-zeichen,.monat i{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  h2,h3,.etikett{break-after:avoid}
  figure,.zehn,.quellen,.sieb li,.werk li,.anlauf li,.legende li,.zustaende li,.berichte li,.w-zeile,.zahlen>div,.verweise li,.steckbrief div,.schritte{break-inside:avoid}
}