/* Münzwerk – Projektseite D-02. Nachtblau, Messing, Porzellan; Schriften und Farben aus der App. */

/* ---------- 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:#f1cf89}
  ::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:"Barlow";src:url(../fonts/barlow-normal-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-normal-600-latin.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Semi Condensed";src:url(../fonts/barlow-semi-condensed-normal-700-latin.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-normal-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --nacht:#0e1726;--nacht2:#121d31;--nacht3:#1a2740;
  --gold:#e3b75b;--gold-hell:#f1cf89;--gold-dim:rgba(227,183,91,.34);--gold-linie:rgba(227,183,91,.2);
  --text:#dfe6f2;--text2:#a9b7cf;
  --tinte:#202e45;--tinte2:#435168;--tinte3:#5b6980;--grau:#e4e8ef;--porzellan:#f3f5f9;
  --gruen:#247852;--rot:#b44b57;--gruen-d:#8dd2b2;
  --sans:"Barlow",system-ui,sans-serif;--kond:"Barlow Semi Condensed","Barlow",system-ui,sans-serif;--mono:"JetBrains Mono",Consolas,monospace;
  --rand:clamp(16px,4vw,40px);
  --muenze:radial-gradient(circle at 35% 30%,#f8e4ab,#ddb35e 55%,#a47530);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--nacht);color:var(--text);font:400 18px/1.6 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
main{overflow-x:clip}
a{color:var(--gold-hell)}
:focus-visible{outline:3px solid var(--gold-hell);outline-offset:3px;border-radius:6px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.rahmen{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--rand)}
.skip{position:absolute;left:12px;top:-80px;z-index:50;background:var(--gold);color:#2b200c;padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.kicker,.st-label{font:700 14px/1.3 var(--kond);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
h2,h3{font-family:var(--kond);font-weight:700;letter-spacing:-.015em;line-height:1.04;margin:0;color:#f3f5f9;text-wrap:balance}
h2{font-size:clamp(32px,4vw,56px)}
h3{font-size:clamp(30px,3.4vw,48px)}

/* Kopf: „← Profil“ links, Fach-Etikett in der Mitte (am Handy ausgeblendet), Name als Weg zur Startseite rechts */
.kopf{position:relative;z-index:5;border-bottom:1px solid var(--gold-linie);background:var(--nacht)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px;padding:10px clamp(16px,3vw,40px)}
.zurueck,.kopf-name{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.zurueck{gap:8px;padding:7px 16px 7px 12px;border:1px solid var(--gold-dim);border-radius:999px;color:var(--gold-hell);font-weight:600;font-size:16px;transition:background .25s,border-color .25s}
.zurueck:hover{background:rgba(227,183,91,.1);border-color:var(--gold)}
.i-links{width:18px;height:18px;transform:scaleX(-1)}
.kopf-name{font-size:15px;color:var(--text2)}
.kopf-name:hover{color:var(--gold-hell);text-decoration:underline;text-underline-offset:3px}
.kopf-code{font:400 13px var(--mono);color:var(--gold)}
@media (max-width:519px){.kopf-code{display:none}}

/* Held */
.held{position:relative;overflow:hidden;padding:clamp(40px,6vw,88px) 0 clamp(64px,8vw,120px);background:radial-gradient(60% 70% at 80% 42%,#1c2b49 0,rgba(28,43,73,0) 72%),linear-gradient(#0e1726,#111c30 62%,#0e1726)}
.held-in{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.held-text{container-type:inline-size}
.titel{margin:0;font:700 clamp(56px,23cqi,164px)/.92 var(--kond);letter-spacing:-.02em;color:var(--gold-hell);background:linear-gradient(172deg,#fcebbd 8%,#e3b75b 48%,#b8893a 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.04em}
.leit-kenn{margin:14px 0 0;font:400 13px/1.4 var(--mono);color:var(--gold)} /* Leitsatz der App als Zitat gekennzeichnet */
.leitsatz{margin:4px 0 0;font:700 clamp(30px,4.2vw,58px)/1.05 var(--kond);color:#f3f5f9;letter-spacing:-.01em}
.lead{margin:28px 0 0;max-width:34em;font-size:clamp(18px,1.45vw,20px)}
.lead-2{margin:12px 0 0;max-width:34em;color:var(--text2)}
.marken{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.marken li{font:400 13px/1.4 var(--mono);color:var(--gold-hell);border:1px solid var(--gold-dim);border-radius:999px;padding:5px 12px}
.los{display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding:14px 22px;border-radius:10px;background:var(--gold);color:#2b200c;font-weight:600;text-decoration:none;box-shadow:0 14px 34px -16px rgba(227,183,91,.7);transition:background .25s}
.los:hover{background:#ecc677}
.i-runter{width:18px;height:18px;transform:rotate(90deg)}
.held-bild{position:relative;display:grid;justify-items:center;gap:26px}
.guilloche{position:absolute;left:50%;top:40%;width:min(150%,760px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.guilloche svg{display:block;width:100%;height:100%;fill:none;stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.13}
.guilloche ellipse,.guilloche circle{vector-effect:non-scaling-stroke}
.muenze{position:relative;width:min(100%,420px);aspect-ratio:1;filter:drop-shadow(0 34px 42px rgba(0,0,0,.6)) drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.mz{display:block;width:100%;height:100%}
.mz text{font:700 20px var(--kond);letter-spacing:.04em}
.mz-u-tief{fill:#6f4b1c}
.mz-u-licht{fill:#fff1c6;opacity:.75}
.ueberblick{position:relative;width:min(100%,470px);background:rgba(15,24,40,.86);border:1px solid var(--gold-linie);border-radius:14px;padding:16px 20px}
.ue-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;font-size:15px;color:var(--text2)}
.ue-kopf strong{font:700 17px var(--kond);color:#fff;letter-spacing:.02em}
.ue-werte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 0}
.ue-werte dt{font-size:14px;color:var(--text2)}
.ue-werte dd{margin:2px 0 0;font:400 clamp(16px,1.5vw,19px) var(--mono);color:#fff;white-space:nowrap}
.ue-ein dd{color:var(--gruen-d)}
.ue-saldo dd{color:var(--gold-hell)}
.ue-bsp{margin:10px 0 0;font:400 13px var(--mono);color:var(--text2)}
.ue-tropfen{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--muenze);box-shadow:0 0 0 3px rgba(227,183,91,.25),0 0 18px rgba(241,207,137,.7);opacity:0;pointer-events:none}
.mw-vor .muenze,.mw-vor .ue-werte>div{opacity:0}

/* Kurzfassung „In 30 Sekunden“: Tafel wie der Monatsüberblick, Funktionen mit Münzen, darunter die Sprungleiste */
.kurz{padding-bottom:clamp(56px,7vw,96px)}
.k-karte{display:grid;gap:22px;padding:clamp(22px,3vw,36px);border:1px solid var(--gold-linie);border-radius:14px;background:var(--nacht2)}
.k-karte .kicker{margin:0}
.k-dl{display:grid;gap:20px 48px;margin:0}
.k-dl dt{font:400 13px/1.4 var(--mono);color:var(--text2)}
.k-dl dd{margin:6px 0 0}
.k-dl ul,.k-nav ul{list-style:none;margin:0;padding:0}
.k-dl li{position:relative;padding:2px 0 2px 26px}
.k-dl li::before{content:"";position:absolute;left:0;top:.55em;width:16px;height:16px;border-radius:50%;background:var(--muenze)}
.k-karte .los{justify-self:start;margin:0}
.k-nav ul{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.k-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--gold-dim);border-radius:999px;font-weight:600;text-decoration:none}
.k-nav a:hover{background:rgba(227,183,91,.1);border-color:var(--gold)}
@media (min-width:1000px){.k-dl{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,.8fr)}}

/* Weg: Einleitung und Fahrplan */
.weg-intro{padding:clamp(72px,10vw,136px) 0 clamp(24px,4vw,48px)}
.intro{max-width:40em;margin:22px 0 0;font-size:clamp(18px,1.4vw,20px)}
.fahrplan{margin-top:44px}
.fahrplan ol{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.fahrplan ol::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--gold-dim)}
.fahrplan li a{position:relative;display:grid;grid-template-columns:44px auto;justify-content:start;align-items:center;gap:14px;color:var(--text);font-weight:600;text-decoration:none;padding:2px 6px 2px 0;border-radius:999px}
.fp-m{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font:700 16px var(--kond);color:#2b200c;background:var(--muenze);box-shadow:inset 0 0 0 2px rgba(255,241,200,.45),0 0 0 4px var(--nacht),0 0 0 5px var(--gold-dim);transition:transform .3s}
.fahrplan li a:hover .fp-m{transform:scale(1.08)}
.fahrplan li a:hover .fp-t{color:var(--gold-hell)}
.fp-neben{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:30px 0 0;color:var(--text2)}
.fp-neben a{color:var(--gold-hell);text-decoration:none;border-bottom:1px solid var(--gold-dim);padding-bottom:1px}
.fp-neben a:hover{border-color:var(--gold-hell)}

/* Warum: drei Pflichten werden zu Münzen */
.warum{padding:clamp(72px,10vw,136px) 0 clamp(56px,8vw,112px);border-top:1px solid var(--gold-linie);background:linear-gradient(var(--nacht2),var(--nacht) 70%)}
.wu-in{display:grid;gap:48px}
.wu-text p,.da-text p,.zs-text p{margin:18px 0 0;max-width:36em}
.wu-text h2+p,.da-text h2+p,.zs-text h2+p{margin-top:26px}
.pflichten{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.pf{display:grid;grid-template-columns:clamp(60px,15vw,84px) minmax(0,1fr);align-items:center;gap:14px clamp(14px,3vw,22px);padding:clamp(16px,3vw,24px);border:1px solid var(--gold-linie);border-radius:18px;background:linear-gradient(135deg,rgba(32,48,80,.75),rgba(16,26,44,.5))}
.pf-m{position:relative;aspect-ratio:1;filter:drop-shadow(0 12px 14px rgba(0,0,0,.5))}
.pf-m svg{position:relative;display:block;width:100%;height:100%}
.pf-par{font:700 46px var(--kond);text-anchor:middle}
.pf h3,.rl h3,.zt h3{font-size:clamp(23px,2.2vw,28px);line-height:1.12}
.pf p,.rl p{grid-column:1/-1;margin:0;color:var(--text2)}
@media (min-width:1000px){.wu-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(40px,6vw,96px);align-items:center}}

/* Weg: Stationen und Schiene */
.weg{position:relative}
.weg-linie,.weg-fahrt{display:none}
.station{padding:clamp(64px,9vw,120px) 0}
.st-in{position:relative}
.medaille{display:grid;place-items:center;width:48px;height:48px;margin:0 0 18px;border-radius:50%;font:700 18px var(--kond);color:#2b200c;background:var(--muenze);box-shadow:inset 0 0 0 3px rgba(255,241,200,.42),0 0 0 4px var(--nacht),0 0 0 5px var(--gold-dim);transition:background .45s,color .45s,box-shadow .45s,transform .6s cubic-bezier(.2,1.7,.4,1)}
.medaille.roh{background:var(--nacht);color:var(--gold);box-shadow:inset 0 0 0 1.5px var(--gold-dim),0 0 0 4px var(--nacht);transform:scale(.84)}
.st-text p{margin:18px 0 0;max-width:36em}
.st-text p:first-child{margin-top:24px}
.vitrine{position:relative;container-type:inline-size;margin-top:36px;border-radius:20px;overflow:hidden;background:radial-gradient(120% 90% at 18% 0,#203050 0,#152138 55%,#101a2c 100%);border:1px solid var(--gold-linie);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 44px 80px -44px rgba(0,0,0,.8)}
.ansichten{display:grid;gap:clamp(40px,6vw,72px);margin-top:clamp(44px,6vw,80px)}
.ansicht{margin:0;display:grid;gap:14px}
.ansicht a{display:block;border-radius:12px;overflow:hidden;background:#e9edf3;box-shadow:0 0 0 1px rgba(227,183,91,.34),0 50px 90px -46px rgba(0,0,0,.9);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.ansicht a:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--gold),0 60px 100px -46px rgba(0,0,0,.95)}
.ansicht img{display:block;width:100%;height:auto}
.ansicht figcaption{display:grid;gap:4px}
.an-nr{font:400 13px var(--mono);color:var(--gold)}
.an-titel{font:700 21px/1.2 var(--kond);color:#f3f5f9}
.an-bsp{font-size:16px;color:var(--text2)}

@media (min-width:1100px){
  .weg-linie{display:block;position:absolute;top:0;bottom:0;left:calc(max(40px,50% - 560px) + 23px);width:2px;background:var(--gold-linie)}
  .weg-fill{position:absolute;inset:0;background:linear-gradient(var(--gold),var(--gold-hell));transform-origin:top;transform:scaleY(var(--p,1))}
  .weg-fahrt{display:block;position:sticky;top:50vh;height:0;z-index:3}
  .token{position:absolute;left:calc(max(40px,50% - 560px) + 24px);top:0;width:44px;height:52px;margin:-26px 0 0 -22px;perspective:240px}
  .token::before{content:"";position:absolute;inset:-8px -6px;border-radius:14px;background:radial-gradient(closest-side,rgba(241,207,137,.35),rgba(241,207,137,0))}
  .tf{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:rotateY(90deg) scale(.9);transition:opacity .35s,transform .5s cubic-bezier(.2,.9,.3,1.2);filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
  .token[data-form="1"] .tf1,.token[data-form="2"] .tf2,.token[data-form="3"] .tf3,.token[data-form="4"] .tf4,.token[data-form="5"] .tf5,.token[data-form="6"] .tf6{opacity:1;transform:none}
  .st-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;padding-left:calc(var(--rand) + 88px)}
  .st-kopf{grid-column:1;grid-row:1}
  .st-text{grid-column:1;grid-row:2}
  .st-in>.vitrine{grid-column:2;grid-row:1/span 2;align-self:start;margin-top:0}
  .st-in>.ansichten{grid-column:1/-1;grid-row:3}
  .station .medaille{position:absolute;left:var(--rand);top:-12px;margin:0}
}
@media (min-width:900px){
  .ansicht{grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:32px;align-items:end}
  .ansicht a{grid-column:2;grid-row:1}
  .ansicht figcaption{grid-column:1;grid-row:1;border-top:1px solid var(--gold-dim);padding-top:14px}
  .ansicht.rechts{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}
  .ansicht.rechts a{grid-column:1}
  .ansicht.rechts figcaption{grid-column:2}
}
@media (min-width:760px){
  .fahrplan ol{grid-template-columns:repeat(6,minmax(0,1fr));gap:0}
  .fahrplan ol::before{left:22px;right:calc(100%/6 - 22px);top:21px;bottom:auto;width:auto;height:2px}
  .fahrplan li a{grid-template-columns:auto;justify-items:start;gap:12px}
}
@media (min-width:1000px){
  .held-in{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:clamp(32px,5vw,72px)}
}

/* Szenen allgemein */
.szene{position:relative;padding:clamp(16px,4.2cqi,32px) clamp(14px,4.2cqi,32px) 64px;font-size:clamp(12px,2.35cqi,15px);line-height:1.4;color:var(--tinte)}
.szene p{margin:0}
.papier{background:#fff;color:var(--tinte);border-radius:12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.25)}
.sz-bsp{position:absolute;left:clamp(14px,4.2cqi,32px);bottom:22px;font:400 12px var(--mono);color:var(--text2)}
@container (max-width:380px){.sz-lang{display:none}}
.sz-notiz{margin-top:14px!important;color:var(--gold-hell);font:700 1.1em var(--kond);letter-spacing:.01em}
.nochmal{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 11px;border:1px solid var(--gold-dim);border-radius:999px;background:rgba(14,23,38,.9);color:var(--gold-hell);font:600 14px var(--sans);cursor:pointer;transition:border-color .25s,color .25s}
.nochmal:hover{border-color:var(--gold);color:#fff}
.nochmal svg{width:16px;height:16px}
.nochmal[hidden]{display:none}
.minus{color:var(--rot)}
.plus{color:var(--gruen)}
.mono-w{font-family:var(--mono);white-space:nowrap}

/* 01 Eingang */
.ein-ordner{position:relative;overflow:hidden;display:flex;align-items:center;gap:8px;margin-bottom:14px!important;padding:8px 12px;border:1px dashed rgba(227,183,91,.45);border-radius:10px;color:var(--text);font:400 .86em var(--mono)}
.ein-ordner svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.7}
.ein-pfad{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ein-takt{margin-left:auto;color:var(--gold);white-space:nowrap}
.ein-scan{position:absolute;top:0;bottom:0;left:-30%;width:30%;background:linear-gradient(90deg,transparent,rgba(227,183,91,.34),transparent);opacity:0}
.ein-liste{position:relative;z-index:1;padding:4px 0}
.ein-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px 8px}
.ein-kopf b{font:700 1.3em var(--kond)}
.ein-zahl{background:#f6ead0;color:#7a5513;border-radius:6px;padding:2px 8px;font-size:.86em;white-space:nowrap}
.ein-zahl em{font-style:normal}
.ein-beleg{display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;gap:.8em;align-items:center;padding:.6em 16px;border-top:1px solid var(--grau);transition:background .4s,box-shadow .4s}
.ein-beleg.ist-xml{background:#fbf5e6;box-shadow:inset 3px 0 #c9973f}
.typ{display:grid;place-items:center;height:2.9em;border:1px solid #cbd3df;border-radius:5px;background:#eef1f6;font:400 .7em var(--mono);color:var(--tinte2)}
.ist-xml .typ{border-color:#c9973f;color:#7a5513;background:#fff}
.dn{display:grid;min-width:0}
.dn b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn small{font-size:.86em;color:var(--tinte3)}
.wann{font-size:.84em;color:var(--tinte3);white-space:nowrap}
.ein-er{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;margin:-10px 0 0 14%;padding:12px 14px;border:1px solid #9fd0d2;background:#f2fafa}
.er-tag{grid-column:1/-1;justify-self:start;font-size:.8em;color:#0f6166;background:#d8efef;border-radius:999px;padding:2px 9px}
.er-wer{font-weight:600}
.er-wert{grid-column:1;font:400 .88em var(--mono);color:var(--tinte2)}
.er-knopf{grid-column:2;grid-row:2/span 2;background:var(--gold);color:#2b200c;border-radius:7px;padding:.5em .9em;font-weight:600;font-size:.9em}
@container (max-width:430px){.wann,.dn small,.ein-takt{display:none}.ein-er{margin-left:5%}}

/* 02 Eine Zeile */
.zl-karte{padding:clamp(14px,4cqi,24px)}
.zl-titel{font:700 1.65em/1.1 var(--kond)}
.zl-sub{margin-top:4px!important;color:var(--tinte3)}
.zl-hilfe{margin-top:1.3em!important;font-weight:600;font-size:.92em}
.zl-feld{margin-top:.5em!important;padding:.75em .9em;border:2px solid var(--gold);border-radius:9px;box-shadow:0 0 0 4px rgba(227,183,91,.2);font-size:1.12em;white-space:nowrap;overflow:hidden}
.tk{border-radius:4px;padding:0 1px;transition:background .35s}
.t1{background:#f6e3e5}.t2{background:#f3e8cf}.t3,.t4{background:#e9edf3}
.tk.aus{background:transparent}
.zl-caret{display:inline-block;width:2px;height:1.15em;margin-left:1px;vertical-align:-.2em;background:var(--tinte);opacity:0}
.zl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:.8em!important}
.chip{display:inline-flex;align-items:center;gap:4px;padding:.28em .75em;border-radius:999px;font-size:.86em;white-space:nowrap}
.chip svg{width:1em;height:1em}
.c1{background:#f6e3e5;color:#9b3a46}.c2{background:#f3e8cf;color:#7a5513}.c3,.c4{background:#e9edf3;color:var(--tinte2)}
.zl-fuss{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:1.2em!important}
.zl-tipp{font-size:.86em;color:var(--tinte3)}
.zl-buchen{background:var(--gold);color:#2b200c;font-weight:600;border-radius:8px;padding:.6em 1.2em;white-space:nowrap}

/* 03 Grenzen-Wächter */
.wa-zeile{display:inline-block;margin-bottom:14px!important;padding:.7em 1em;border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(227,183,91,.2);font-size:1.06em;white-space:nowrap}
.wa-karte{padding:clamp(14px,3.6cqi,22px)}
.wa-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.wa-kopf b{font:700 1.18em var(--kond)}
.wa-kopf span{font:400 .78em var(--mono);color:var(--tinte3)}
.wa-wert{margin-top:.3em!important;font:400 1.3em var(--mono);color:var(--tinte3)}
.wa-wert b{font-weight:400;color:var(--tinte)}
.wa-balken{position:relative;height:12px;margin:2.6em 0 2.4em;background:var(--grau);border-radius:99px}
.wa-fill{position:absolute;left:0;top:0;bottom:0;width:61.2%;background:#936515;border-radius:99px}
.wa-geist{position:absolute;left:61.2%;top:0;bottom:0;width:38.8%;border-radius:0 99px 99px 0;transform-origin:left;background:repeating-linear-gradient(-45deg,rgba(180,75,87,.72) 0 4px,rgba(180,75,87,.26) 4px 8px)}
.wa-mark{position:absolute;top:-5px;bottom:-5px;width:2px;background:#a0adbf}
.wa-mark small{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);font:400 .72em var(--mono);color:var(--tinte3);white-space:nowrap}
.m60{left:60%}.m80{left:80%}.m95{left:95%}
.wa-posten{position:absolute;right:-5px;top:-13px;bottom:-13px;width:9px;border-radius:5px;background:linear-gradient(#f6dc97,#b8893a);box-shadow:0 0 0 3px rgba(227,183,91,.28),0 4px 10px rgba(0,0,0,.3);transform-origin:bottom}
.wa-plus{position:absolute;left:80.6%;bottom:calc(100% + 8px);transform:translateX(-50%);font:400 .8em var(--mono);color:#9b3a46;background:#f6e3e5;border-radius:6px;padding:1px 7px;white-space:nowrap}
.wa-luft{font-size:.9em;color:var(--tinte3)}
.wa-warnung{margin-top:14px;padding:12px 14px;border:1px solid #e6bdb7;border-radius:12px;background:#f8e8e6;color:#8f3b33}
.wa-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:.8em!important}
.wa-k1,.wa-k2{border-radius:8px;padding:.45em .9em;white-space:nowrap}
.wa-k1{border:1px solid var(--rot);color:#9b3a46;background:#fff8f7}
.wa-k2{border:1px solid #cbd3df;color:var(--tinte);background:#fff}

/* 04 Buchungsbuch */
.bu-blatt{padding:4px 0 6px}
.bu-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 16px}
.bu-kopf b{font:700 1.4em var(--kond)}
.bu-kopf span{font-size:.86em;color:var(--tinte3)}
.bu-z{position:relative;display:grid;grid-template-columns:3.7em 7.6em minmax(0,1fr) auto 4.4em;gap:.7em;align-items:center;padding:.72em 16px;border-top:1px solid var(--grau)}
.bu-z .d,.bu-z .n,.bu-z .b{font-family:var(--mono)}
.bu-z .n{font-size:.82em;color:var(--tinte3)}
.bu-z .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bu-z .b{text-align:right}
.tw{position:relative;color:#8c9cb2}
.strich{position:absolute;left:-2px;right:-2px;top:55%;height:1.5px;background:var(--tinte2);transform-origin:left}
.pille{display:inline-block;margin-left:.6em;font-style:normal;font-size:.78em;background:#f4e3cf;color:#8a4a1c;border-radius:999px;padding:.15em .6em}
.bu-knopf{justify-self:end;font-size:.8em;border:1px solid #cbd3df;border-radius:6px;padding:.2em .6em;background:#fff}
.bu-2 .bu-knopf{visibility:hidden}
.klammer{position:absolute;left:6px;bottom:50%;height:100%;width:7px;border:2px solid #c9973f;border-right:0;border-radius:6px 0 0 6px;transform-origin:top}
@container (max-width:470px){.bu-z{grid-template-columns:3.3em minmax(0,1fr) auto auto;gap:.55em}.bu-z .n{display:none}}
@container (max-width:360px){.bu-z{grid-template-columns:3.3em minmax(0,1fr) auto}.bu-knopf{display:none}}

/* 05 Festschreiben */
.sz-siegel{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.si-siegel{position:relative;order:-1;justify-self:center;width:min(40%,132px);aspect-ratio:1}
.si-siegel svg{display:block;width:100%;height:100%;filter:drop-shadow(0 14px 16px rgba(0,0,0,.55))}
.si-welle{position:absolute;inset:-8%;border-radius:50%;border:2px solid var(--gold);opacity:0}
.si-legende{font:700 6.3px var(--kond);letter-spacing:.04em;fill:#6f4b1c}
.si-blatt{position:relative;overflow:hidden;padding-top:4px}
.si-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 16px}
.si-kopf b{font:700 1.35em var(--kond)}
.si-kopf span{font-size:.86em;color:var(--tinte3)}
.si-zeilen{position:relative}
.si-zeilen p{display:grid;grid-template-columns:3.6em minmax(0,1fr) auto;gap:.6em;padding:.42em 16px;border-top:1px solid #eef1f5;font:400 .9em var(--mono)}
.si-zeilen .n{color:var(--tinte3)}
.si-zeilen p>span:last-child{justify-self:end}
.si-scan{position:absolute;left:0;right:0;top:-25%;height:24%;background:linear-gradient(transparent,rgba(227,183,91,.4),transparent);opacity:0;pointer-events:none}
.si-band{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 16px;background:#f4ecd9;border-top:1px solid #ead9b5}
.si-band svg{width:18px;height:18px;color:#936515}
.si-pruefen{border:1px solid #cbd3df;border-radius:7px;padding:.3em .8em;background:#fff}
.si-ok{display:inline-flex;align-items:center;gap:4px;color:var(--gruen);font-weight:600}
.si-ok svg{color:var(--gruen)}
@container (min-width:480px){.sz-siegel{grid-template-columns:minmax(0,1fr) 30%;align-items:center}.si-siegel{order:0;width:100%;max-width:190px}}
@container (max-width:380px){.si-zeilen .n{display:none}}

/* 06 EÜR */
.eu-monate{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin-bottom:14px;text-align:center}
.eu-monate span{display:grid;justify-items:center;gap:5px}
.eu-monate i{display:block;width:100%;max-width:30px;aspect-ratio:1;border-radius:50%;background:var(--muenze);box-shadow:inset 0 0 0 2px rgba(255,241,200,.42),0 3px 6px rgba(0,0,0,.45)}
.eu-monate .leer i{background:none;box-shadow:none;border:1.5px dashed rgba(227,183,91,.38)}
.eu-monate b{font:400 .72em var(--mono);color:var(--text2)}
.eu-blatt{overflow:hidden;padding-top:4px}
.eu-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 10px;padding:12px 16px}
.eu-kopf b{font:700 1.3em var(--kond)}
.eu-kopf span{font-size:.78em;color:#7a5513;background:#f6ead0;border-radius:999px;padding:.15em .7em}
.eu-z{display:grid;grid-template-columns:3.9em minmax(0,1fr) auto 1.3em;gap:.7em;align-items:center;padding:.55em 16px;border-top:1px solid #eef1f5}
.eu-z .z{font-family:var(--mono);color:var(--tinte2);white-space:nowrap}
.eu-z .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eu-z .b{font-family:var(--mono)}
.kopie{width:1.3em;height:1.3em;color:var(--tinte3)}
.eu-gewinn{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:14px 16px;border-top:2px solid #d9b46a;background:#fbf8f0}
.eu-gewinn>span:first-child{color:var(--tinte3)}
.eu-gewinn b{font:400 1.9em var(--mono);color:var(--gruen);letter-spacing:-.01em}
.eu-g{display:inline-flex;align-items:center;gap:4px;font-size:.82em;background:#e9edf3;color:var(--tinte2);border-radius:999px;padding:.2em .7em}
.eu-g svg{width:1em;height:1em}
@container (max-width:430px){.eu-monate b{display:none}.eu-z{grid-template-columns:4.3em minmax(0,1fr) auto;gap:.5em}.kopie{display:none}}

/* Nebenher */
.nebenher{padding:clamp(72px,10vw,140px) 0 0;background:linear-gradient(var(--nacht),var(--nacht2) 240px);border-top:1px solid var(--gold-linie)}
.neben{padding:clamp(56px,8vw,104px) 0}
.neben+.neben{border-top:1px solid var(--gold-linie)}
.probe{display:grid;justify-items:start;gap:10px;margin-top:24px}
.schalter{display:inline-flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border:1px solid var(--gold-dim);border-radius:999px;background:rgba(14,23,38,.6);color:var(--text);font:600 16px var(--sans);cursor:pointer}
.schalter:hover{border-color:var(--gold)}
.schalter[hidden]{display:none}
.schalter-bahn{position:relative;width:44px;height:26px;border-radius:99px;background:var(--gold);transition:background .3s}
.schalter-bahn i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transform:translateX(18px);transition:transform .3s}
.schalter[aria-pressed="false"] .schalter-bahn{background:#4a5873}
.schalter[aria-pressed="false"] .schalter-bahn i{transform:none}
.br-status{margin:0!important;max-width:30em;font-size:16px;color:var(--text2)}
.br-status:empty{display:none}

/* Tagwerk-Brücke */
.br-oben{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:6px;margin-bottom:18px}
.br-knoten{display:grid;justify-items:center;gap:3px;width:7.6em;text-align:center;transition:opacity .5s,filter .5s}
.br-logo{display:block;width:3.4em;height:3.4em}
.br-logo svg{display:block;width:100%;height:100%}
.br-knoten b{font:700 1.1em var(--kond);color:#fff}
.br-knoten small{font-size:.75em;color:var(--text2)}
.br-bogen{display:block;width:100%;height:auto;overflow:visible;margin-bottom:1.7em}
.br-grund{fill:none;stroke:rgba(227,183,91,.4);stroke-width:2;stroke-dasharray:3 6;transition:opacity .5s}
.br-pfad{fill:none;stroke:var(--gold);stroke-width:2.2;transition:opacity .5s}
.br-paket{fill:var(--gold-hell);opacity:0}
.br-label{position:absolute;left:50%;bottom:1.7em;transform:translate(-50%,50%);padding:1px 9px;border:1px solid var(--gold-dim);border-radius:999px;background:var(--nacht2);color:var(--gold);font:400 .78em var(--mono);white-space:nowrap;transition:opacity .5s}
.br-ziel{padding:4px 0}
.br-zk{padding:10px 16px 6px;font:400 .76em var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tinte2)}
.br-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.8em;align-items:center;padding:.55em 16px;border-top:1px solid var(--grau)}
.wer{display:grid;min-width:0}
.wer small{font-size:.82em;color:var(--tinte3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-knopf,.br-buchen{border:1px solid #cbd3df;border-radius:7px;padding:.3em .7em;font-size:.82em;white-space:nowrap}
.br-buchen{background:var(--gold);border-color:var(--gold);color:#2b200c;font-weight:600}
.br-hinweis{font-size:.8em;color:var(--tinte3);white-space:nowrap}
.gebucht{color:#8c9cb2}
.br-home{grid-template-columns:minmax(0,1fr) auto}
.br-home .mono-w{color:#3d65b3}
.br-fluss{display:grid;grid-template-rows:1fr;transition:grid-template-rows .6s ease,opacity .5s ease}
.br-fluss>div{min-height:0;overflow:hidden}
.br-fest{border-top:1px solid var(--grau)}
.ohne .br-fluss{grid-template-rows:0fr;opacity:0}
.ohne .br-tw{opacity:.35;filter:grayscale(1)}
.ohne .br-pfad,.ohne .br-grund,.ohne .br-label{opacity:.12}
@container (max-width:470px){.br-knopf,.br-hinweis,.br-knoten small{display:none}.br-knoten{width:5.6em}.br-home{grid-template-columns:minmax(0,1fr)}}

/* Backup */
.bk-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px!important;color:#fff}
.bk-kopf b{font:700 1.25em var(--kond)}
.bk-kopf span{font-size:.9em;color:var(--text2)}
.bk-kopf em{font:400 1em var(--mono);font-style:normal;color:var(--gold-hell)}
.bk-brett{position:relative;overflow:hidden;padding:8px 10px;border-radius:999px;background:linear-gradient(#0a111f,#18233a);box-shadow:inset 0 2px 8px rgba(0,0,0,.75),0 0 0 1px rgba(227,183,91,.3)}
.bk-reihe{display:flex;width:calc(100% * 15 / 14)}
.bk-m{flex:0 0 calc(100% / 15);display:grid;place-items:center}
.bk-m::before{content:"M";display:grid;place-items:center;width:86%;aspect-ratio:1;border-radius:50%;background:var(--muenze);box-shadow:inset 0 0 0 1.5px rgba(255,241,200,.5),0 2px 4px rgba(0,0,0,.5);font:700 .62em/1 var(--kond);color:#6b4a1a}
.bk-neu::before{box-shadow:inset 0 0 0 1.5px rgba(255,241,200,.6),0 0 0 2px var(--gold-hell),0 2px 6px rgba(0,0,0,.5)}
.bk-marken{display:flex;justify-content:space-between;gap:10px;margin:8px 4px 14px!important;font:400 .78em var(--mono);color:var(--text2)}
.bk-neu-l{color:var(--gold-hell)}
.bk-liste{padding:4px 0}
.bk-ein{overflow:hidden}
.bk-datei{display:flex;justify-content:space-between;gap:10px;padding:.55em 16px;border-top:1px solid var(--grau);font:400 .86em var(--mono)}
.bk-ein .bk-datei{border-top:0;background:#fbf5e6;box-shadow:inset 3px 0 #c9973f}
.bk-datei span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-datei span:last-child{font-family:var(--sans);color:var(--tinte3);white-space:nowrap}
@container (max-width:430px){.bk-datei span:last-child{display:none}}

/* Funktionen */
.funktionen{padding:clamp(72px,10vw,136px) 0;background:var(--porzellan);color:var(--tinte)}
.funktionen h2,.funktionen h3{color:var(--tinte)}
.funktionen .kicker{color:#7f5711}
.fu-in{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.bon{position:relative;max-width:470px;padding:30px 28px 46px;background:#fff;box-shadow:0 30px 60px -34px rgba(32,46,69,.45);-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%}
.bon-kopf{display:flex;justify-content:space-between;gap:12px;margin:0 0 6px;padding-bottom:14px;border-bottom:1px dashed #a0adbf;font:400 13px var(--mono);color:var(--tinte2);text-transform:uppercase;letter-spacing:.08em}
.bon-liste{list-style:none;margin:0;padding:0}
.bon-liste li{position:relative;padding:14px 0 14px 34px;border-bottom:1px dashed #cbd3df;font-size:18px;line-height:1.45}
.bon-liste li::before{content:"";position:absolute;left:0;top:15px;width:22px;height:22px;border-radius:50%;background:var(--muenze);box-shadow:inset 0 0 0 1.5px rgba(255,241,200,.5)}
.bon-fuss{margin:18px 0 0;text-align:center;font:700 20px var(--kond);color:#7f5711}
.fu-spalte h3{font-size:clamp(26px,2.6vw,34px);margin-top:8px}
.fu-spalte h3+.fu-liste{margin-top:14px}
.fu-liste+h3{margin-top:44px}
.fu-liste{margin:0;display:grid;gap:0}
.fu-liste div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:14px 0;border-top:1px solid #cbd3df}
.fu-liste dt{font-weight:600;color:var(--tinte)}
.fu-liste dd{margin:0;color:var(--tinte2)}
.fu-intro{margin:22px 0 0;max-width:42em;color:var(--tinte2)}
.beschluesse{list-style:none;margin:14px 0 0;padding:0}
.beschluesse li{position:relative;padding:16px 0 16px 62px;border-top:1px solid #cbd3df;color:var(--tinte2)}
.beschluesse b{display:block;color:var(--tinte);font-weight:600}
.bs-siegel{position:absolute;left:0;top:16px;width:44px;height:44px;filter:drop-shadow(0 5px 6px rgba(32,46,69,.35))}
.bs-siegel svg{display:block;width:100%;height:100%}
.beschluesse+h3{margin-top:44px}
.fw-n{position:relative;display:inline-block}
.fw-strich{position:absolute;left:-4px;right:-4px;top:52%;height:2px;border-radius:2px;background:rgba(180,75,87,.85);transform-origin:left}
@media (min-width:1000px){
  .fu-in{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:80px;align-items:start}
  .fu-kopf{grid-column:1/-1}
  .bon{position:sticky;top:40px}
  .fu-liste div{grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:20px}
}

/* Technik: Schichten wie ein Münzstapel, zwei Wege durch dieselbe Fachlogik */
.bau,.daten,.ausblick,.zusammen{padding:clamp(72px,10vw,136px) 0;border-top:1px solid var(--gold-linie)}
.bau{background:radial-gradient(55% 45% at 92% 8%,#1c2b49,rgba(28,43,73,0) 70%),var(--nacht)}
.bau-in,.da-in,.zs-in{display:grid;gap:44px}
.bau-text p{margin:0 0 18px;max-width:36em}
.stapel{position:relative;margin:0;padding:clamp(16px,3vw,28px) clamp(14px,3vw,28px) 76px;border:1px solid var(--gold-linie);border-radius:20px;background:radial-gradient(120% 90% at 18% 0,#203050 0,#152138 55%,#101a2c 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 44px 80px -44px rgba(0,0,0,.8)}
.sb-tueren{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sb-k{margin:0;padding:12px 14px;border:1px solid var(--gold-dim);border-radius:12px;background:linear-gradient(#1f2e4b,#17233a)}
.sb-k b{display:block;font:700 19px/1.2 var(--kond);color:#fff}
.sb-k span:not(.sb-txt){display:block;font:400 14px/1.45 var(--mono);color:var(--text2)}
.sb-zu{display:block;width:100%;height:40px;overflow:visible;fill:none;stroke:var(--gold-dim);stroke-width:2}
.sb-zu path{vector-effect:non-scaling-stroke}
.sb-s{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px 14px 30px}
.sb-s::before{content:"";position:absolute;left:10px;top:9px;bottom:9px;width:8px;border-radius:3px;background:repeating-linear-gradient(var(--gold) 0 2px,rgba(227,183,91,.22) 2px 5px)}
.sb-s+.sb-s{margin-top:30px}
.sb-s+.sb-s::after{content:"";position:absolute;left:50%;top:-31px;width:2px;height:30px;margin-left:-1px;background:var(--gold-dim)}
.sb-txt{flex:1;min-width:0}
.sb-w{flex:none;padding:3px 10px;border-radius:999px;background:var(--gold);color:#2b200c;font:400 14px var(--mono);font-style:normal;white-space:nowrap}
.sb-kette{flex:none;display:flex}
.sb-kette i{width:18px;height:11px;border:2px solid var(--gold);border-radius:6px}
.sb-kette i+i{margin-left:-5px}
.sb-token{position:absolute;left:0;top:0;z-index:2;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--muenze);box-shadow:0 0 0 3px rgba(227,183,91,.25),0 0 16px rgba(241,207,137,.7);opacity:0;pointer-events:none}
.stapel figcaption,.kreis figcaption,.zs-muenze figcaption{font-size:16px;color:var(--text2)}
.stapel figcaption{margin-top:20px}
.bau-liste div{border-color:var(--gold-linie)}
.bau-liste dt{color:#fff}
.bau-liste dd{color:var(--text2)}
@media (min-width:1000px){
  .bau-in{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,5vw,80px);align-items:start}
  .bau-kopf{grid-column:1/-1}
  .stapel{grid-column:2;grid-row:2/span 2;position:sticky;top:40px}
  .bau-text{grid-column:1;grid-row:2}
  .bau-liste{grid-column:1;grid-row:3}
  .da-in{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,5vw,80px);align-items:center}
  .zs-in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);column-gap:clamp(40px,6vw,96px);align-items:center}
  .zs-muenze{grid-column:1;grid-row:1}
}

/* Daten: der Kreis schließt sich um alles, was lokal bleibt */
.daten{background:linear-gradient(var(--nacht2),var(--nacht))}
.kreis{position:relative;margin:0;padding-bottom:64px}
.kr-bild{position:relative;width:min(100%,460px);aspect-ratio:1;margin:0 auto;container-type:inline-size}
.kr-bild svg{display:block;width:100%;height:100%;overflow:visible}
.kr-um{font:700 13px var(--kond);letter-spacing:.14em;fill:var(--gold)}
.kr-i{position:absolute;display:flex;justify-content:center;align-items:center;width:0;height:0}
.kr-i b{flex:none;padding:.3em .7em;border-radius:999px;background:#fff;color:var(--tinte);font:600 clamp(12px,3.7cqi,16px) var(--sans);white-space:nowrap;box-shadow:0 10px 24px -12px rgba(0,0,0,.8)}
.kr-1{left:50%;top:26%}.kr-2{left:77%;top:50%}.kr-3{left:50%;top:74%}.kr-4{left:23%;top:50%}.kr-tw{left:12%;top:5%}
.kr-tw b{background:#193d3b;color:#d4efe2;box-shadow:inset 0 0 0 1px rgba(185,227,206,.55)}
.kreis figcaption{max-width:30em;margin:22px auto 0;text-align:center}

/* Stand: fünf Versionen als Prägungen auf einer Schiene */
.stand{padding:clamp(72px,10vw,136px) 0;background:var(--porzellan);color:var(--tinte)}
.stand h2,.stand h3{color:var(--tinte)}
.stand .kicker{color:#7f5711}
.stand .intro,.zt h3+p,.sd-audit p{color:var(--tinte2)}
.zeit{--g:30px;list-style:none;margin:clamp(40px,6vw,64px) 0 0;padding:0;display:grid;gap:var(--g)}
.zt{position:relative;padding-left:66px}
.zt p{margin:0}
.zm{position:absolute;left:0;top:0;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--muenze);box-shadow:inset 0 0 0 2px rgba(255,241,200,.45),0 0 0 4px var(--porzellan),0 0 0 5px #d9b46a;font:700 16px var(--kond);color:#2b200c;transition:background .45s,color .45s,box-shadow .45s}
.roh .zm{background:#fff;color:#7f5711;box-shadow:inset 0 0 0 1.5px #d9b46a,0 0 0 4px var(--porzellan)}
.zt:not(:last-child)::before,.zt:not(:last-child)::after{content:"";position:absolute;left:21px;top:50px;bottom:calc(6px - var(--g));width:2px;background:#e2d5b6}
.zt:not(:last-child)::after{z-index:1;background:var(--gold);transform-origin:top;transition:transform .7s .2s}
.zt.roh::after{transform:scaleY(0)}
.zt-d{font:400 14px var(--mono);color:var(--tinte3)}
.zt h3{margin:4px 0 6px}
.zt h3+p{font-size:17px}
.sd-unten{display:grid;gap:44px;margin-top:clamp(56px,8vw,96px)}
.sd-unten h3{font-size:clamp(26px,2.6vw,34px)}
.pruef{margin:18px 0 0;display:grid;gap:12px}
.pruef div{display:grid;gap:4px;padding:16px 20px;border-radius:14px;background:#fff;box-shadow:0 18px 40px -28px rgba(32,46,69,.5)}
.pruef dt{display:flex;align-items:baseline;gap:12px;font-weight:600}
.pz{min-width:3ch;font:400 clamp(30px,3.4vw,40px)/1 var(--mono);text-align:right}
.pruef dd{margin:0;font-size:16px;color:var(--tinte2)}
.pr-ok{display:inline-flex;align-items:center;gap:8px;margin:20px 0 0 6px;padding:6px 14px;border:2px solid var(--gruen);border-radius:8px;color:var(--gruen);font:700 16px var(--mono);text-transform:uppercase;letter-spacing:.04em;transform:rotate(-4deg)}
.pr-ok svg{width:18px;height:18px}
.sd-audit p{margin:18px 0 0;max-width:36em}
@media (min-width:900px){
  .zeit{--g:26px;grid-template-columns:repeat(5,minmax(0,1fr))}
  .zt{padding:66px 0 0}
  .zt:not(:last-child)::before,.zt:not(:last-child)::after{left:50px;right:calc(6px - var(--g));top:21px;bottom:auto;width:auto;height:2px}
  .zt:not(:last-child)::after{transform-origin:left}
  .zt.roh::after{transform:scaleX(0)}
}
@media (min-width:1000px){.sd-unten{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,5vw,80px)}}

/* Ausblick: Rohlinge, noch ungeprägt */
.ausblick{background:var(--nacht2)}
.rohlinge{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:30px 40px}
.rl{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:10px 18px}
.rl-m{width:52px;aspect-ratio:1;margin:2px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#a08a5e,#665232 58%,#3d311d);outline:1.5px dashed rgba(227,183,91,.7);outline-offset:4px;box-shadow:inset 0 0 0 2px rgba(241,207,137,.18)}

/* Zusammenspiel: zwei Seiten einer Medaille */
.zusammen{background:radial-gradient(45% 55% at 20% 50%,rgba(25,61,59,.38),rgba(25,61,59,0) 70%),var(--nacht)}
.zs-link,.wt-a{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 18px;padding:16px 20px;border:1px solid var(--gold-dim);border-radius:18px;color:var(--text);text-decoration:none;transition:border-color .3s,background .3s}
.zs-link:hover,.wt-a:hover{border-color:var(--gold);background:rgba(227,183,91,.06)}
.zs-link{max-width:32em;margin-top:30px}
.zs-code{grid-row:1/span 3;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#193d3b;box-shadow:inset 0 0 0 2px rgba(185,227,206,.5);color:#d4efe2;font:700 16px var(--kond)}
.zs-name{font:700 26px/1.1 var(--kond);color:#fff}
.zs-was{font-size:16px;color:var(--text2)}
.zs-los{display:inline-flex;align-items:center;gap:8px;color:var(--gold-hell);font-weight:600}
.zs-los svg{width:18px;height:18px}
.zs-muenze{margin:0;display:grid;justify-items:center;gap:20px}
.zs-dreh{display:flex;justify-content:center;gap:clamp(12px,4vw,32px);width:100%}
.zs-seite{width:min(46%,240px);aspect-ratio:1;filter:drop-shadow(0 26px 30px rgba(0,0,0,.55))}
.zs-seite svg{display:block;width:100%;height:100%}
.zs-um{font:700 15px var(--kond);letter-spacing:.04em}
.zs-muenze figcaption{max-width:26em;text-align:center}
.zs-knopf{display:inline-flex;align-items:center;padding:9px 18px;border:1px solid var(--gold-dim);border-radius:999px;background:rgba(14,23,38,.6);color:var(--gold-hell);font:600 16px var(--sans);cursor:pointer;transition:border-color .25s,color .25s}
.zs-knopf:hover{border-color:var(--gold);color:#fff}
.zs-knopf[hidden]{display:none}
.wende{perspective:1100px}
/* Beim Wenden trägt die Medaille selbst den Schatten: ein Filter in der 3D-Perspektive lässt Chrome beim Umbau eine
   Layout-Verschiebung melden, die es nicht gibt (Lighthouse CLS 0,107) */
.wende .zs-dreh{display:block;position:relative;width:min(80%,320px);aspect-ratio:1;transform-style:preserve-3d;border-radius:50%;box-shadow:0 26px 34px -4px rgba(0,0,0,.55)}
.wende .zs-seite{position:absolute;inset:0;width:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;filter:none}
.wende .zs-mw{transform:rotateY(180deg)}
/* Mit Bewegung und Skript steht die Medaille schon beim ersten Zeichnen als eine Münze mit zwei Seiten: Der Umbau
   durch .wende nach dem Laden ließ Chrome dennoch eine Verschiebung melden (CLS bis 0,106). .wende bleibt als Rückfall
   für Browser ohne die Abfrage „scripting“; ohne Skript, bei reduzierter Bewegung und im Druck bleiben zwei Münzen. */
@media screen and (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .zs-muenze{perspective:1100px}
  .zs-dreh{display:block;position:relative;width:min(80%,320px);aspect-ratio:1;transform-style:preserve-3d;border-radius:50%;box-shadow:0 26px 34px -4px rgba(0,0,0,.55)}
  .zs-seite{position:absolute;inset:0;width:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;filter:none}
  .zs-mw{transform:rotateY(180deg)}
}

/* Fuß */
.fuss{padding:clamp(72px,9vw,120px) 0 48px;background:radial-gradient(60% 80% at 50% 0,#1a2846,rgba(26,40,70,0) 70%),var(--nacht);border-top:1px solid var(--gold-linie)}
.fuss-leit{margin:0;font:700 clamp(44px,8vw,112px)/1 var(--kond);letter-spacing:-.02em;background:linear-gradient(172deg,#fcebbd 10%,#e3b75b 50%,#b8893a 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.fuss-hinweis{margin:24px 0 0;max-width:40em;color:var(--text2)}
.fuss-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:36px}
.fuss-links a,.wt-alle a{display:inline-flex;align-items:center;gap:8px;color:var(--gold-hell);text-decoration:none;border-bottom:1px solid var(--gold-dim);padding-bottom:2px}
.fuss-links a:hover,.wt-alle a:hover{border-color:var(--gold-hell)}
.fuss-klein{margin:40px 0 0;font:400 13px var(--mono);color:var(--text2)}

/* Weitere Projekte: Nachbarmünzen */
.weiter{margin-top:64px;padding-top:44px;border-top:1px solid var(--gold-linie)}
.weiter h2{font-size:clamp(28px,3vw,40px)}
.wt-liste{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.wt-m{grid-row:1/span 2;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--muenze);box-shadow:inset 0 0 0 3px rgba(255,241,200,.42),0 8px 16px rgba(0,0,0,.45);font:700 17px var(--kond);color:#5a3d12;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.wt-a:hover .wt-m,.wt-a:focus-visible .wt-m{transform:rotateY(360deg)}
.wt-r{display:inline-flex;align-items:center;gap:8px;font-size:16px;color:var(--text2)}
.wt-r svg{width:16px;height:16px}
.wt-a b{font:700 clamp(24px,2.4vw,30px)/1.1 var(--kond);color:#f3f5f9}
.wt-nach{grid-template-columns:minmax(0,1fr) auto;text-align:right}
.wt-nach .wt-m{grid-column:2}
.wt-nach .wt-r{justify-content:flex-end}
.wt-alle{margin:22px 0 0}
@media (min-width:760px){.wt-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Großansicht */
.lupe{width:min(96vw,1440px);max-width:none;max-height:none;padding:0;border:0;background:transparent;color:var(--text);overflow:visible}
.lupe::backdrop{background:rgba(7,12,21,.88)}
.lupe figure{margin:0}
.lupe img{display:block;width:100%;height:auto;max-height:82vh;object-fit:contain;border-radius:10px;background:#e9edf3}
.lupe figcaption{margin-top:10px;font-size:16px;color:var(--text)}
.lupe-zu{position:absolute;right:0;top:-52px;padding:8px 16px;border:1px solid var(--gold-dim);border-radius:999px;background:var(--nacht);color:var(--gold-hell);font:600 15px var(--sans);cursor:pointer}

@media (max-width:479px){
  .ue-werte{grid-template-columns:minmax(0,1fr);gap:6px}
  .ue-werte>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- Druck ----------
   Papier statt Nachtblau: Hintergründe druckt der Browser nicht, darum Fließtext und Titel in Tinte und dunklem Messing
   statt Hellblau und Gold. Vitrinen, Schichtenstapel, Datenkreis und Monatsüberblick bleiben Abbildungen ihrer Welt
   (Nachtblau und Farben werden mitgedruckt), Münzen und Medaillen behalten ihre Prägung. Das Skript setzt beim Drucken
   jede Szene ins Endbild; Knöpfe (Noch einmal, Schalter, Wenden) und der mitfahrende Beleg entfallen. */
@media print{
  :root{--nacht:#fff;--nacht2:#fff;--text:#202e45;--text2:#435168;--gold:#7f5711;--gold-hell:#7f5711;--gold-dim:rgba(127,87,17,.45);--gold-linie:rgba(127,87,17,.3)}
  body{background:#fff}
  h2,h3,.leitsatz,.an-titel,.bau-liste dt,.zs-name,.wt-a b{color:var(--tinte)}
  .titel,.fuss-leit{background:none;-webkit-text-fill-color:currentColor;color:var(--gold)}
  .skip,.zurueck,.los,.k-nav,.nochmal,.schalter,.zs-knopf,.lupe,.weg-fahrt,.guilloche{display:none}
  .bon,.stapel{position:static}
  .vitrine,.stapel,.ueberblick,.kreis{--nacht:#0e1726;--nacht2:#121d31;--text:#dfe6f2;--text2:#a9b7cf;--gold:#e3b75b;--gold-hell:#f1cf89;--gold-dim:rgba(227,183,91,.34);--gold-linie:rgba(227,183,91,.2);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .kreis{background:var(--nacht);border-radius:20px;padding:24px 16px}
  .ueberblick{background:#0f1828}
  .held{padding-block:24px}
  .held-in{gap:24px}
  .muenze{width:min(100%,220px)} /* mit Kennzeile über dem Leitsatz passt der Einstieg so weiter auf die erste Seite */
  .fp-m,.medaille,.bon-liste li,.k-dl li,.zm,.wt-m,.rl-m,.zs-muenze,.zs-code{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Ringe außen weg: sie ragten über den Seitenumbruch und hinterließen Bögen am Fuß der vorigen Seite */
  .fp-m,.medaille,.zm{box-shadow:inset 0 0 0 2px rgba(255,241,200,.45)}
  .vitrine,.stapel,.kreis,.ueberblick,.ansicht,.bon,.k-karte,.fahrplan,.zeit,li,dl>div{break-inside:avoid}
  h2,h3,.kicker,.st-label,.st-kopf{break-after:avoid}
}