/* ZWEITE KRAFT - Layout. Nachtschicht an der Lochwand: kondensierte Schrift, Lochraster, ein Leitakzent (Glut).
   Farbwerte stehen in farben.css, Schriften in schriften/schriften.css (beide in den HTML-Seiten verlinkt). */
/* Layout: Nachtschicht an der Lochwand. Riesige Kondensschrift, HUD-Messfelder (Heron), geführter Check als Konsole (New Minds). Ein Leitakzent: Schmiedeglut. */
:root{
  color-scheme:dark;
  /* Schrift: Big Shoulders Display (kondensiert) für Überschriften, Inter für Text, IBM Plex Mono für Beschriftungen. Alles lokal aus schriften/. */
  --f-display:'Big Shoulders Display','Anton',Impact,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --td:uppercase;--dw:800;--dls:-.015em;--dlh:.92;
  --r-s:8px;--r-m:12px;--r-l:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--grund1);color:var(--ton);font-family:var(--f-body);font-size:clamp(15px,2vw,17px);line-height:1.6;
  background-image:radial-gradient(circle at center,var(--loch) 2.2px,transparent 2.8px),linear-gradient(180deg,var(--grund1) 0%,var(--grund2) 55%,var(--grund3) 100%);
  background-size:var(--loch-groesse) var(--loch-groesse),100% 100%;
  background-attachment:fixed,fixed;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--glut);outline-offset:3px;border-radius:4px}
.huelle{max-width:1120px;margin:0 auto;padding-inline:22px}
.leuchtet{color:var(--glut)}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:rgba(22,25,27,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--messing-kante)}
.kopf-innen{display:flex;align-items:center;gap:22px;height:62px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}
.striche{display:flex;gap:4px;height:22px}
.striche i{display:block;width:5px;border-radius:2px;background:var(--glut)}
.striche i+i{background:var(--glut-tief)}
.marke-wort{font-family:var(--f-display);font-weight:800;font-size:24px;letter-spacing:.01em;text-transform:uppercase;line-height:1}
.marke-wort b{font-weight:900;margin-left:.25em;color:var(--glut)}
.marke-ort{display:none;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--ton-leise);text-transform:uppercase}
.kopf-links{display:none;margin-left:auto;gap:22px}
.kopf-links a{white-space:nowrap;text-decoration:none;font-size:14px;color:var(--ton-leise);transition:color .2s}
.kopf-links a:hover{color:var(--glut)}
.kopf-tel{margin-left:auto;text-decoration:none;font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;border:1px solid var(--messing-kante);border-radius:999px;padding:7px 14px;transition:border-color .2s,color .2s;white-space:nowrap}
.kopf-tel:hover{border-color:var(--glut);color:var(--glut)}
.menue{background:none;border:1px solid var(--ton-still);color:var(--ton);border-radius:var(--r-s);padding:7px 12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;cursor:pointer}
.kopf.offen .kopf-links{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;padding:14px 22px 20px;gap:14px;background:rgba(22,25,27,.96);border-bottom:1px solid var(--messing-kante)}
@media (min-width:1000px){.kopf-links{display:flex}.kopf-tel{margin-left:0}.menue{display:none}.marke-ort{display:block}}
@media (min-width:1000px) and (max-width:1560px){.marke-ort{display:none}}
@media (max-width:520px){.kopf-innen{gap:10px}.marke-wort{font-size:19px}.kopf-tel{font-size:12px;padding:6px 10px;letter-spacing:.02em}.menue{padding:6px 10px;font-size:11px}}
@media (max-width:400px){.kopf-innen{gap:8px}.huelle{padding-inline:16px}.marke-wort{font-size:17px}.kopf-tel{font-size:11px;padding:6px 8px;letter-spacing:0}.menue{padding:6px 8px;font-size:10.5px}}

/* ---------- Gemeinsames ---------- */
main section{scroll-margin-top:62px}
.abschnitt{padding-block:clamp(72px,11vw,150px)}
h1,h2,h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;margin:0;text-wrap:balance}
h2{font-size:clamp(38px,7.4vw,96px);line-height:.92;letter-spacing:-.012em;max-width:16ch}
h3{font-size:clamp(22px,2.6vw,30px);line-height:1;letter-spacing:.005em}
.einleitung{max-width:60ch;color:var(--ton-leise);font-size:clamp(16px,2vw,19px);margin:26px 0 0}
.knopf-haupt,.knopf-zweit{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:16px;border-radius:9px;cursor:pointer;font-family:var(--f-body);transition:transform .2s,border-color .2s,background .2s;border:1px solid transparent}
.knopf-haupt{background:var(--glut);color:#16191B;padding:15px 26px}
.knopf-haupt:hover{transform:translateY(-2px);background:#ff9a47}
.knopf-zweit{background:transparent;color:var(--ton);border-color:rgba(239,234,228,.28);padding:15px 22px}
.knopf-zweit:hover{border-color:var(--glut)}
.kontakt-wege{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.zusicherung{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--ton-leise);margin:22px 0 0}
.feld-eingelassen{background:radial-gradient(circle at 50% 30%,#0a0b0c 0%,#17191b 100%);box-shadow:inset 0 3px 10px rgba(0,0,0,.75),inset 0 -1px 0 rgba(239,234,228,.06);border:1px solid rgba(0,0,0,.5)}
.klammern{position:relative}
.klammern>.k{position:absolute;width:14px;height:14px;border:1.5px solid var(--messing);opacity:.8;pointer-events:none}
.k.a{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:6px}
.k.b{top:-1px;right:-1px;border-left:0;border-bottom:0;border-top-right-radius:6px}
.k.c{bottom:-1px;left:-1px;border-right:0;border-top:0;border-bottom-left-radius:6px}
.k.d{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:6px}
.schraube{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d8b27a,#7b5a2c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.schraube::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:1.5px;margin-top:-.75px;background:rgba(0,0,0,.55);transform:rotate(35deg)}

/* ---------- Hero ---------- */
.buehne{padding-top:calc(62px + clamp(40px,7vw,90px));padding-bottom:clamp(60px,8vw,110px);position:relative}
.buehne h1{font-weight:900;font-size:clamp(46px,10.6vw,132px);line-height:.88;letter-spacing:-.006em;max-width:none}
.wort-huelle{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-right:.2em}
.wort{display:inline-block;transform:translateY(105%);animation:hoch .8s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes hoch{to{transform:none}}
.einblenden{animation:ein .9s ease both}
@keyframes ein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-raster{display:grid;gap:34px;margin-top:clamp(34px,5vw,64px);align-items:start}
@media (min-width:960px){.hero-raster{grid-template-columns:5fr 6fr;gap:56px}}
.vorspann{font-size:clamp(17px,2.2vw,20px);margin:0 0 28px;max-width:46ch;color:var(--ton-leise)}
.vorspann strong{color:var(--ton);font-weight:600}
.hud{background:var(--karte);border:1px solid var(--ton-still);border-radius:var(--r-m);padding:18px 18px 20px;box-shadow:inset 0 2px 14px rgba(0,0,0,.5)}
.hud-kopf{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ton-leise);padding-bottom:14px;border-bottom:1px dashed var(--ton-still)}
.hud-kopf b{color:var(--ton);font-weight:500}
.pulsierer{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--messing);margin-right:8px;vertical-align:middle}
.haken{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;position:relative;padding-top:30px;margin-top:14px}
.haken::before{content:"";position:absolute;left:0;right:0;top:8px;height:5px;border-radius:3px;background:linear-gradient(#d0a56a,#7b5a2c)}
.haken-knopf{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;padding-top:6px}
.haken-knopf::before{content:"";position:absolute;top:-22px;width:3px;height:26px;background:var(--messing)}
.haken-knopf:focus-visible{outline:2px solid var(--glut);outline-offset:4px;border-radius:12px}
.w-feld{width:min(100%,86px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;transition:box-shadow .35s,border-color .35s}
.w-feld svg{width:46%;fill:rgba(239,234,228,.55);transition:fill .3s}
.haken-knopf .w-name{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ton-leise);text-align:center;line-height:1.25;transition:color .3s}
.haken-knopf:hover .w-feld svg{fill:var(--ton)}
.haken-knopf.an .w-feld{border-color:var(--glut-kante);box-shadow:inset 0 3px 10px rgba(0,0,0,.75),0 0 0 1px var(--glut-kante),0 0 34px var(--glut-schein)}
.haken-knopf.an .w-feld svg{fill:var(--glut)}
.haken-knopf.an .w-name{color:var(--ton)}
.lesung{margin-top:20px;background:rgba(0,0,0,.28);border:1px solid var(--ton-fein);border-radius:var(--r-s);padding:16px}
.les-kopf{display:flex;justify-content:space-between;margin:0 0 8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--messing)}
.les-titel{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(24px,3vw,32px);line-height:1;margin:0 0 14px;min-height:2em}
.les-zeilen{display:grid;grid-template-columns:repeat(3,auto);gap:6px 18px;justify-content:start}
.les-zeilen span{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ton-leise)}
.les-zeilen b{font-family:var(--f-mono);font-weight:500;font-size:14px}
.spanne{position:relative;height:8px;border-radius:4px;background:#0a0b0c;margin-top:16px;box-shadow:inset 0 1px 3px rgba(0,0,0,.8);overflow:hidden}
.spanne i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.s-max{background:var(--glut-hauch)}.s-min{background:var(--glut)}
.les-fuss{margin:12px 0 0;font-size:12px;color:var(--ton-leise)}
@media (max-width:480px){.les-zeilen{grid-template-columns:repeat(2,auto)}.w-name{font-size:9.5px!important}}

/* ---------- Problem ---------- */
.problem h2{max-width:18ch}
.problem-raster{display:grid;gap:40px;margin-top:40px}
@media (min-width:900px){.problem-raster{grid-template-columns:1.1fr 1fr;gap:64px}.problem-bild{position:sticky;top:96px;align-self:start}}
.problem .einleitung{margin-top:0}
.problem .einleitung+.einleitung{margin-top:22px}
.satz-gross{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,5vw,56px);line-height:.98;margin:34px 0 0;max-width:20ch}
.rahmen{border:1px solid var(--ton-still);border-radius:var(--r-m);background:var(--tief);padding:6px;overflow:hidden;box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.rahmen img{display:block;width:100%;height:auto;border-radius:8px}
figcaption{font-size:13.5px;color:var(--ton-leise);margin-top:12px}
.zaehler{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.zaehler div{background:var(--karte);border:1px solid var(--ton-still);border-radius:var(--r-s);padding:12px 12px 10px;box-shadow:inset 0 2px 8px rgba(0,0,0,.45)}
.zaehler b{display:block;font-family:var(--f-mono);font-weight:500;font-size:clamp(24px,4vw,34px);line-height:1;color:var(--ton)}
.zaehler span{display:block;margin-top:6px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ton-leise);line-height:1.3}
.problem-raster>*,.zaehler div{min-width:0}
.zaehler span{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
@media (max-width:380px){.zaehler{gap:6px}.zaehler div{padding:10px 8px 8px}.zaehler span{font-size:9.5px;letter-spacing:.04em}}

/* ---------- Check ---------- */
.konsole{margin-top:44px;background:var(--karte);border:1px solid var(--ton-still);border-radius:var(--r-l);box-shadow:inset 0 2px 18px rgba(0,0,0,.5);overflow:hidden}
.konsole-kopf{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--messing-kante);background:rgba(0,0,0,.25);font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.konsole-kopf .striche{height:16px}.konsole-kopf .striche i{width:4px}
.konsole-kopf b{font-weight:500}
#schritt-anzeige{margin-left:auto;color:var(--glut)}
.konsole-raster{display:grid}
@media (min-width:980px){.konsole-raster{grid-template-columns:1fr 300px}}
.dialog{padding:clamp(18px,3vw,34px);display:grid;gap:34px;min-width:0}
.zug{display:grid;gap:16px;animation:ein .5s ease both}
.bot{display:flex;gap:12px;align-items:flex-start}
.bot-kopf{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.bot-kopf .striche{height:15px}.bot-kopf .striche i{width:4px}
.bot-text{background:rgba(0,0,0,.32);border:1px solid var(--ton-fein);border-radius:4px var(--r-m) var(--r-m) var(--r-m);padding:12px 16px;max-width:62ch;margin:0}
.bot-text strong{font-weight:600}
.antwort{padding-left:46px;min-width:0}
@media (max-width:560px){.antwort{padding-left:0}}
.branchen{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.branche{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:12px;border:1px solid var(--ton-still);border-radius:var(--r-m);background:rgba(18,20,22,.55);transition:border-color .2s,transform .2s}
.branche:hover{border-color:var(--messing-kante);transform:translateY(-2px)}
.branche:focus-visible{outline:2px solid var(--glut);outline-offset:3px}
.branche.an{border-color:var(--glut)}
.branche-feld{grid-row:1/3;width:46px;height:46px;border-radius:50%;display:grid;place-items:center}
.branche-werkzeug{width:22px;height:22px;fill:rgba(239,234,228,.6);color:rgba(239,234,228,.6)}
.branche.an .branche-werkzeug{fill:var(--glut);color:var(--glut)}
.branche-name{font-weight:600;font-size:15px;line-height:1.2;align-self:end}
.branche-beispiel{font-size:11.5px;color:var(--ton-leise);line-height:1.3;align-self:start}
.aufgaben{display:grid;gap:8px}
.aufgabe{display:flex;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--ton-still);border-radius:var(--r-s);background:rgba(18,20,22,.55);cursor:pointer;transition:border-color .2s;position:relative}
.aufgabe:hover{border-color:var(--messing-kante)}
.aufgabe input{position:absolute;opacity:0;pointer-events:none}
.aufgabe .kasten{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center}
.aufgabe .kasten svg{width:14px;opacity:0;fill:none;stroke:#16191B;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.aufgabe.an{border-color:var(--glut-kante);background:var(--glut-zart)}
.aufgabe.an .kasten{background:var(--glut);box-shadow:none;border-color:var(--glut)}
.aufgabe.an .kasten svg{opacity:1}
.aufgabe input:focus-visible~.kasten{outline:2px solid var(--glut);outline-offset:3px}
.eigene{margin-top:22px;padding-top:20px;border-top:1px dashed var(--ton-still)}
.eigene-titel{margin:0;font-weight:600}
.eigene-hinweis{margin:6px 0 14px;font-size:14px;color:var(--ton-leise);max-width:62ch}
.eigene-zeile{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.eigene-feld,#stundensatz{background:#0d0f10;border:1px solid var(--ton-still);color:var(--ton);border-radius:var(--r-s);padding:11px 14px;font:inherit;font-size:15px;min-width:0;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.eigene-feld{flex:1 1 240px}
.eigene-feld:focus,#stundensatz:focus{outline:2px solid var(--glut);outline-offset:1px;border-color:var(--glut-kante)}
.stufen-knoepfe{display:flex;flex-wrap:wrap;gap:6px}
.stufe-knopf{background:transparent;color:var(--ton-leise);border:1px solid var(--ton-still);border-radius:999px;padding:7px 14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;cursor:pointer;transition:all .2s}
.stufe-knopf:hover{border-color:var(--messing-kante);color:var(--ton)}
.stufe-knopf.an{background:var(--glut);color:#16191B;border-color:var(--glut)}
.aufwand-block{padding:14px 0;border-bottom:1px dashed var(--ton-still);display:grid;gap:10px}
.aufwand-block:first-child{padding-top:0}
.aufwand-titel{margin:0;font-weight:500}
.satz-zeile{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:22px 0}
.satz-zeile label{font-weight:500}
#stundensatz{width:110px;font-family:var(--f-mono)}
.anzeige{border-top:1px solid var(--ton-still);background:rgba(0,0,0,.22);padding:clamp(18px,3vw,26px)}
@media (min-width:980px){.anzeige{border-top:0;border-left:1px solid var(--ton-still)}.anzeige-innen{position:sticky;top:90px}}
.a-label{margin:0 0 16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--messing)}
.anzeige dl{margin:0;display:grid;gap:14px}
.anzeige dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ton-leise)}
.anzeige dd{margin:2px 0 0;font-family:var(--f-mono);font-size:19px;font-weight:500}
.a-hinweis{font-size:12.5px;color:var(--ton-leise);margin:18px 0 0}
.konsole-fuss{margin:0;padding:14px 20px;border-top:1px solid var(--ton-still);font-size:12.5px;color:var(--ton-leise)}
.ergebnis-huelle{margin-top:34px}
.erg-raster{display:grid;gap:26px;align-items:start}
@media (min-width:900px){.erg-raster{grid-template-columns:1.5fr 1fr}}
.erg-kopf{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--messing);margin:0 0 18px}
.ringe{display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.ring{margin:0;text-align:center}
.ring-kreis{position:relative;width:120px;height:120px}
.ring-gross .ring-kreis{width:170px;height:170px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9}
.ring-boden{stroke:#0c0e0f}
.ring-blass{stroke:var(--glut-hauch);stroke-linecap:round}
.ring-hell{stroke:var(--glut);stroke-linecap:round}
.ring-klein .ring-hell{stroke:var(--messing)}.ring-klein .ring-blass{stroke:var(--messing-hauch)}
.ring-zahl{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-mono);font-weight:500;font-size:22px}
.ring-gross .ring-zahl{font-size:36px}
.ring figcaption{margin-top:6px;font-size:13px;display:grid;gap:0;line-height:1.3}
.ring figcaption span{color:var(--ton-leise)}
.ringe-hinweis,.erg-herkunft,.erg-sortiert{font-size:13px;color:var(--ton-leise);max-width:62ch}
.erg-liste{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px}
.erg-zeile{display:grid;grid-template-columns:auto 1fr auto;gap:6px 14px;align-items:center;padding:12px 14px;border:1px solid var(--ton-still);border-radius:var(--r-s);background:rgba(18,20,22,.55)}
.erg-top{border-color:var(--glut-kante)}
.erg-rang{font-family:var(--f-mono);color:var(--messing);font-size:13px}
.erg-marke{grid-column:2;justify-self:start;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px 10px;background:var(--messing-hauch);border:1px solid var(--messing-kante)}
.erg-wert{grid-row:1/3;grid-column:3;font-family:var(--f-mono);font-size:13px;white-space:nowrap}
.erg-summe{display:flex;align-items:baseline;gap:12px;margin:26px 0 0}
.erg-zahl{font-family:var(--f-display);font-weight:900;font-size:clamp(54px,9vw,96px);line-height:.9;color:var(--glut)}
.erg-einheit{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ton-leise)}
.erg-euro{font-size:clamp(17px,2.2vw,20px);margin:8px 0 14px}
.erg-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.eig-block{margin-top:26px;padding:16px;border:1px dashed var(--ton-still);border-radius:var(--r-m)}
.eig-titel{margin:0 0 10px;font-weight:600}
.eig-liste{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:6px}
.eig-zeile{display:flex;justify-content:space-between;gap:12px}
.eig-wert{font-family:var(--f-mono);font-size:13px;white-space:nowrap}
.eig-hinweis{font-size:13.5px;color:var(--ton-leise);margin:0}
.erg-buecher{margin-top:26px;padding-top:18px;border-top:1px dashed var(--ton-still)}
.erg-buecher-titel{margin:0 0 8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--messing)}
.erg-buecher ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.erg-buecher a{font-weight:600}
.erg-buecher span{display:block;font-size:12.5px;color:var(--ton-leise)}

/* Typenschild */
.platte{position:relative;background:linear-gradient(160deg,var(--platte1),var(--platte2));border:1px solid var(--messing-kante);border-radius:var(--r-m);padding:28px 26px 22px;box-shadow:inset 0 1px 0 rgba(239,234,228,.08),inset 0 -8px 18px rgba(0,0,0,.35)}
.platte-titel{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(24px,3vw,32px);line-height:1;margin:0 0 14px}
.platte ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.platte li{padding-left:18px;position:relative}
.platte li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--messing)}
.platte-nummer{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--messing);margin:22px 0 0}
.platte .schraube.s1{top:9px;left:9px}.platte .schraube.s2{top:9px;right:9px}

/* ---------- Leistungen ---------- */
.leistungen{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:48px}
.leistung{grid-column:1/-1;background:var(--karte);border:1px solid var(--ton-still);border-radius:var(--r-m);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:14px;min-width:0}
.leistung p{margin:0}
.leistung p strong{font-weight:600}
@media (min-width:860px){
  .l-web{grid-column:span 7}.l-tel{grid-column:span 5}.l-beg{grid-column:span 5}.l-zahl{grid-column:span 7}
}
.leistung-haupt{border-color:var(--glut-kante);display:grid;gap:30px}
@media (min-width:860px){.leistung-haupt{grid-template-columns:5fr 7fr;align-items:center}}
.leistung-feld{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px}
.leistung-feld svg{width:34px;fill:rgba(239,234,228,.62)}
.leistung-haupt .leistung-feld{box-shadow:inset 0 3px 10px rgba(0,0,0,.75),0 0 30px var(--glut-schein);border-color:var(--glut-kante)}
.leistung-haupt .leistung-feld svg{fill:var(--glut)}
.pilot{display:inline-block;vertical-align:middle;margin-left:8px;font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;border-radius:999px;padding:3px 10px;background:var(--messing-hauch);border:1px solid var(--messing-kante);color:var(--messing);text-transform:uppercase}
.pilot-hinweis{font-size:14.5px;color:var(--ton-leise)}
.leistung-link{font-weight:600;color:var(--glut);text-decoration:none}
.leistung-link:hover{text-decoration:underline}
.netz-figur{margin:0;min-width:0}
.netz-svg{display:block;width:100%;height:auto}
.netz-svg .linie{stroke:var(--messing-kante);stroke-width:1.5;fill:none;transition:stroke .3s}
.netz-svg .linie.an{stroke:var(--glut);stroke-dasharray:6 6;animation:fluss 1s linear infinite}
@keyframes fluss{to{stroke-dashoffset:-12}}
.netz-svg .kn-kreis{fill:#101213;stroke:var(--ton-still);stroke-width:1.5;transition:stroke .3s}
.netz-svg .kn.an .kn-kreis{stroke:var(--glut)}
.netz-svg text{font-family:var(--f-mono);fill:var(--ton-leise);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-anchor:middle}
.netz-svg .kn.an text{fill:var(--ton)}
.netz-svg .mitte-kreis{fill:#101213;stroke:var(--messing);stroke-width:1.5}
.netz-svg .mitte text{fill:var(--ton);font-size:12px;font-weight:500}
.netz-svg .kn-punkt{fill:rgba(239,234,228,.6)}
.netz-svg .kn.an .kn-punkt{fill:var(--glut)}
.netz-svg .kn{cursor:pointer}
.netz-text{font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;color:var(--ton-leise);min-height:2.8em;margin:8px 0 0}
.ticker{margin-top:12px;background:rgba(0,0,0,.3);border:1px solid var(--ton-fein);border-radius:var(--r-s);padding:12px 14px}
.ticker-kopf{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ton-leise)}
.ticker-bsp{margin-left:auto;color:var(--messing)}
.ticker-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px;min-height:6.4em;overflow:hidden}
.ticker-liste li{display:flex;gap:10px;animation:ein .5s ease both}
.ticker-liste time{flex:none;font-family:var(--f-mono);color:var(--messing);font-size:12px}
.netz-figur figcaption{font-size:12.5px}
.preis-satz{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,4.6vw,52px);line-height:1;margin:46px 0 0;max-width:22ch}

/* ---------- Pilotprojekt ---------- */
.pilotprojekt{background:var(--messing-hauch);border-block:1px solid var(--messing-kante)}
.probe-bild{margin:44px 0 0}
.probe-fakten{display:grid;gap:14px;margin-top:22px}
@media (min-width:760px){.probe-fakten{grid-template-columns:repeat(3,1fr)}}
.probe-fakt{background:var(--karte);border:1px solid var(--ton-still);border-radius:var(--r-m);padding:22px;display:grid;gap:8px;align-content:start}
.probe-fakt p{margin:0;color:var(--ton-leise);font-size:15px}
.probe-zahl{font-family:var(--f-display);font-weight:900;font-size:clamp(44px,6vw,68px);line-height:.9;color:var(--ton)}
.probe-paar{display:grid;gap:18px;margin-top:22px}
@media (min-width:760px){.probe-paar{grid-template-columns:2fr 1fr;align-items:end}}
.probe-paar figure{margin:0}
.probe-ehrlich{max-width:64ch;margin:36px 0 0;font-size:clamp(16px,2vw,18px)}
.probe-ehrlich strong{font-weight:600}
.probe-hinweis{font-size:13px;color:var(--ton-leise);margin:16px 0 0}
.demo-notiz{font-size:13px;color:var(--ton-leise);margin:12px 0 0}

/* ---------- Ablauf ---------- */
.schritte-wrap{position:relative;margin-top:56px}
.pfad{position:relative;height:4px;border-radius:2px;background:#0a0b0c;box-shadow:inset 0 1px 3px rgba(0,0,0,.8);margin-bottom:34px;display:none}
.pfad i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--glut);border-radius:2px}
@media (min-width:860px){.pfad{display:block}}
.schritte{list-style:none;margin:0;padding:0;display:grid;gap:18px}
@media (min-width:860px){.schritte{grid-template-columns:repeat(3,1fr);gap:26px}}
.schritte li{display:grid;gap:10px;align-content:start;padding:24px;border:1px solid var(--ton-still);border-radius:var(--r-m);background:var(--karte);transition:border-color .5s}
.schritte li.an{border-color:var(--glut-kante)}
.schritt-nr{font-family:var(--f-display);font-weight:900;font-size:clamp(64px,8vw,104px);line-height:.85;color:rgba(239,234,228,.14);transition:color .5s}
.schritte li.an .schritt-nr{color:var(--glut)}
.schritte p{margin:0;color:var(--ton-leise);font-size:15.5px}

/* ---------- Fachbücher ---------- */
.autorzeile{max-width:66ch;margin:22px 0 0;font-size:15px;color:var(--ton-leise)}
.autorzeile strong{color:var(--ton);font-weight:600}
.buecher{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:18px}
@media (min-width:640px){.buecher{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.buecher{grid-template-columns:repeat(4,1fr)}}
.buch{display:flex;flex-direction:column;gap:16px;background:var(--karte);border:1px solid var(--ton-still);border-radius:var(--r-m);padding:14px 14px 20px}
.buch img{width:100%;height:auto;aspect-ratio:480/768;object-fit:cover;border-radius:6px;display:block;background:#0a0b0c}
.buch-text{display:flex;flex-direction:column;gap:10px;flex:1;padding-inline:4px}
.buch-text h3{font-size:24px}
.buch-text p{margin:0;font-size:14.5px;color:var(--ton-leise)}
.buch-text .buch-unter{color:var(--ton);font-weight:500}
.buch-text .knopf-zweit{margin-top:auto;align-self:flex-start;padding:11px 16px;font-size:14.5px}
.buch-bald{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--messing)!important;margin-top:auto!important}
@media (max-width:639px){.buch{flex-direction:row;align-items:flex-start;gap:14px;padding:12px}.buch img{width:104px;flex:none}.buch-text{padding-inline:0;gap:8px}.buch-text h3{font-size:21px}.buch-text p{font-size:14px}.buch-text .knopf-zweit{padding:10px 14px;font-size:14px}}

/* ---------- Über mich ---------- */
.ueber-raster{display:grid;gap:34px;margin-top:44px;align-items:start}
@media (min-width:860px){.ueber-raster{grid-template-columns:1.2fr 1fr;gap:64px}}
.ueber-raster p{margin:0 0 18px;max-width:58ch}

/* ---------- Kontakt ---------- */
.kontakt h2{max-width:14ch}
.tel-gross{display:block;margin-top:40px;font-family:var(--f-display);font-weight:900;font-size:clamp(48px,12vw,150px);line-height:.9;letter-spacing:-.01em;text-decoration:none;color:var(--ton);transition:color .25s;width:fit-content;max-width:100%}
.tel-gross:hover{color:var(--glut)}
.kopieren-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;font-family:var(--f-mono);font-size:14px}
.kopier{background:transparent;color:var(--ton-leise);border:1px solid var(--ton-still);border-radius:6px;padding:4px 10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;cursor:pointer}
.kopier:hover{border-color:var(--glut);color:var(--ton)}

/* ---------- Fuß ---------- */
.fuss{border-top:1px solid var(--messing-kante);padding-block:40px;background:rgba(0,0,0,.25)}
.fuss-innen{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
.fuss-ort{margin:10px 0 0;font-size:14px;color:var(--ton-leise)}
.fuss-links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px}
.fuss-links a{text-decoration:none;color:var(--ton-leise)}
.fuss-links a:hover{color:var(--glut)}

/* ===== New-Minds-Look: ruhig, riesig, abgerundet ===== */
body{background-image:linear-gradient(180deg,#121416 0%,#16191B 38%,#1D1A17 100%);background-size:100% 100%;background-attachment:scroll}
.knopf-haupt,.knopf-zweit{border-radius:999px}
.kopf{border-bottom-color:var(--ton-fein)}
h2{font-size:clamp(44px,9.4vw,136px);line-height:.88;max-width:13ch;letter-spacing:-.02em}
.buehne{text-align:center;padding-top:calc(62px + clamp(56px,10vw,130px));padding-bottom:clamp(56px,8vw,100px)}
.buehne h1{font-size:clamp(46px,9.4vw,134px);line-height:.86;letter-spacing:-.012em;margin-inline:auto}
.vorspann{margin:clamp(28px,4vw,48px) auto 0;text-align:center;max-width:50ch}
.prompt{max-width:840px;margin:36px auto 0;text-align:left;background:rgba(239,234,228,.05);border:1px solid var(--glut-kante);border-radius:30px;padding:22px 24px 20px;box-shadow:0 0 70px var(--glut-hauch),inset 0 1px 0 rgba(239,234,228,.08)}
.prompt-zeile{display:flex;align-items:center;gap:14px;font-size:clamp(17px,2.4vw,22px);min-height:2.4em;color:var(--ton)}
.prompt-zeile .striche{flex:none}
.tipp{min-width:0;overflow-wrap:anywhere}
.cursor{flex:none;width:2px;height:1.2em;background:var(--glut);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.prompt-frage{margin:18px 0 10px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ton-leise)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:transparent;color:var(--ton);border:1px solid rgba(239,234,228,.22);border-radius:999px;padding:9px 18px;font:inherit;font-size:15px;cursor:pointer;transition:border-color .2s,background .2s}
.chip:hover{border-color:var(--glut);background:var(--glut-zart)}
.prompt-unten{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--ton-fein)}
.prompt-hinweis{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ton-leise)}
.buehne .zusicherung{text-align:center}
.laufband{overflow:hidden;border-block:1px solid var(--ton-still);padding:20px 0;white-space:nowrap}
.laufband-spur{display:inline-flex;gap:0;animation:lauf 46s linear infinite;will-change:transform}
.laufband-spur span{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,4.6vw,56px);line-height:1;color:rgba(239,234,228,.34);padding-right:56px;position:relative}
.laufband-spur span::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--glut)}
@keyframes lauf{to{transform:translateX(-50%)}}
.abschnitt{padding-block:clamp(88px,13vw,180px)}
.konsole,.erg-raster .platte,.platte{border-radius:30px}
.konsole{background:rgba(239,234,228,.035)}
.aufgabe,.erg-zeile,.eig-block{border-radius:16px}
.branche{border-radius:20px}
.branche-feld,.bot-kopf{border-radius:50%}
.bot-text{border-radius:6px 20px 20px 20px}
.leistung,.probe-fakt,.buch,.schritte li{border-radius:28px}
.rahmen{border-radius:24px}
.rahmen img{border-radius:18px}
.schritt-nr{font-size:clamp(88px,12vw,170px)}
.preis-satz,.satz-gross{font-size:clamp(34px,6.4vw,84px)}
.probe-zahl{font-size:clamp(54px,8vw,104px)}
.tel-gross{font-size:clamp(56px,15vw,210px)}
@media (min-width:860px) and (min-height:700px){
  .leistungen{display:block}
  .leistung{position:sticky;margin-bottom:26px;background:#1A1D1F;min-height:300px;box-shadow:0 -18px 40px rgba(0,0,0,.35)}
  .leistung-haupt{top:84px;min-height:480px}
  .l-web{top:104px}.l-tel{top:124px}.l-beg{top:144px}.l-zahl{top:164px}
  .leistung:not(.leistung-haupt) p{max-width:52ch;font-size:18px}
  .leistung:not(.leistung-haupt) h3{font-size:clamp(36px,5vw,60px)}
}

/* ===== Kleinere Schrift, andere Schriftpaare, Cursor-Licht ===== */
h1,h2,h3,.platte-titel,.preis-satz,.satz-gross,.probe-zahl,.schritt-nr,.erg-zahl,.tel-gross,.laufband-spur span{text-transform:var(--td);font-weight:var(--dw);letter-spacing:var(--dls)}
h1,h2,.preis-satz,.satz-gross{line-height:var(--dlh)}
.buehne h1{font-size:clamp(38px,6.6vw,92px);line-height:var(--dlh);font-weight:var(--dw)}
h2{font-size:clamp(32px,5.2vw,70px);max-width:18ch;line-height:var(--dlh)}
h3{font-size:clamp(20px,2.2vw,27px);line-height:1.1}
.preis-satz,.satz-gross{font-size:clamp(26px,4vw,52px)}
.probe-zahl{font-size:clamp(38px,5vw,64px)}
.schritt-nr{font-size:clamp(60px,8vw,110px);font-weight:700}
.tel-gross{font-size:clamp(40px,9vw,124px)}
.laufband-spur span{font-size:clamp(24px,3.4vw,42px)}
.leistung:not(.leistung-haupt) h3{font-size:clamp(28px,3.4vw,44px)}
.leistung:not(.leistung-haupt) p{font-size:16.5px}
.platte-titel{font-size:clamp(22px,2.6vw,30px)}
.erg-zahl{font-size:clamp(46px,7vw,78px)}
.marke-wort{font-size:22px;font-weight:800;letter-spacing:.005em}
.buehne h1{font-size:clamp(42px,8vw,110px)}
h2{font-size:clamp(36px,6.2vw,84px)}
.vorspann{font-size:clamp(16px,1.8vw,19px)}
.einleitung{font-size:clamp(15.5px,1.7vw,18px)}
.spot{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(560px circle at var(--mx,70%) var(--my,28%),rgba(255,178,110,.075),transparent 68%);transition:opacity .35s ease}
.spot::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at center,rgba(255,226,190,.7) 1.6px,transparent 2.3px);background-size:30px 30px;-webkit-mask-image:radial-gradient(240px circle at var(--mx,70%) var(--my,28%),#000,transparent 72%);mask-image:radial-gradient(240px circle at var(--mx,70%) var(--my,28%),#000,transparent 72%);opacity:.42}
main,.fuss{position:relative;z-index:1}
.blitze{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;transition:opacity .35s ease}
@media (hover:none){.spot,.blitze{display:none}}

/* ===== Rechtstexte (impressum.html, datenschutz.html) ===== */
.recht{padding-top:110px;position:relative;z-index:1}
.augenbraue{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--messing);margin:0 0 10px}
.recht h1{font-size:clamp(34px,6vw,60px);margin:0 0 20px;line-height:var(--dlh)}
.recht h2{font-size:clamp(22px,3vw,30px);margin:30px 0 8px;max-width:none;line-height:1.05}
.recht p{color:var(--ton-leise);max-width:66ch}
.recht a{color:var(--glut)}
.recht .platte{margin-top:34px;max-width:66ch}
.recht .erg-herkunft{max-width:66ch}
.recht .erg-herkunft strong{color:var(--ton)}
.zurueck{margin-top:34px}
.zurueck a{color:var(--glut);text-decoration:none;font-weight:600}

/* ===== Quer-Streifen (quer.js setzt html.quer-an: großer Bildschirm, Maus, keine reduzierte Bewegung) ===== */
.kopfblock>.einleitung,.kopfblock>.autorzeile{max-width:60ch}
html.quer-an .quer-buehne{position:sticky;top:0;height:100vh;overflow:hidden}
html.quer-an .quer-spur{display:flex;width:max-content;height:100%;will-change:transform}
html.quer-an .quer[data-richtung="links"] .quer-spur,
html.quer-an .quer[data-richtung="links"] .quer-spur>section>.huelle{flex-direction:row-reverse}
html.quer-an .quer-spur>section{flex:none;height:100%;padding:62px 0 0;scroll-margin-top:0}
html.quer-an .quer-spur>section>.huelle{max-width:none;width:max-content;margin:0;height:100%;display:flex;align-items:center;gap:clamp(36px,4vw,64px);padding-inline:clamp(48px,5vw,96px)}
html.quer-an .quer .kopfblock{flex:none;width:min(560px,36vw)}
html.quer-an .quer h2{max-width:none;margin:0}
html.quer-an .quer .kopfblock .einleitung{margin-top:22px}
html.quer-an .leistungen{display:contents}
html.quer-an .leistung{position:static;flex:none;width:410px;min-height:0;margin:0;box-shadow:none}
html.quer-an .leistung-haupt{width:min(1000px,68vw);grid-template-columns:4fr 7fr}
html.quer-an .leistung:not(.leistung-haupt) h3{font-size:clamp(28px,2.6vw,40px)}
html.quer-an .leistung:not(.leistung-haupt) p{font-size:16.5px}
html.quer-an .preis-satz{flex:none;width:min(520px,36vw);margin:0}
html.quer-an .probe-bild{flex:none;width:min(780px,52vw);margin:0}
html.quer-an .probe-fakten{flex:none;width:340px;grid-template-columns:1fr;margin:0;gap:12px}
html.quer-an .probe-fakt{padding:18px 22px}
html.quer-an .probe-zahl{font-size:clamp(38px,4vw,54px)}
html.quer-an .probe-paar{flex:none;width:min(860px,58vw);margin:0;grid-template-columns:2fr 1fr}
html.quer-an .probe-paar img{max-height:58vh;width:auto;max-width:100%;margin-inline:auto}
html.quer-an .probe-schluss{flex:none;width:460px}
html.quer-an .probe-ehrlich{margin-top:0}
html.quer-an .schritte-wrap{flex:none;width:min(1120px,74vw);margin:0}
html.quer-an .schritte{grid-template-columns:repeat(3,1fr)}
html.quer-an .pfad{display:block}
html.quer-an .buecher{flex:none;width:min(1180px,80vw);margin:0;grid-template-columns:repeat(4,1fr)}
html.quer-an .buch img{max-height:36vh;width:auto;max-width:100%;margin-inline:auto}
html.quer-an .ueber-raster{display:contents}
html.quer-an .ueber-text{flex:none;width:520px}
html.quer-an .ueber-text p:last-child{margin-bottom:0}
html.quer-an #ueber-mich .platte{flex:none;width:440px}

html.quer-an .quer .huelle>*,html.quer-an .leistung{z-index:2}
/* Menü: aktueller Bereich (bewegung.js) */
.kopf-links a{position:relative}
.kopf-links a.aktiv{color:var(--glut);text-shadow:0 0 14px var(--glut-schein)}
.kopf-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--glut);box-shadow:0 0 10px var(--glut-schein);transform:scaleX(0);transition:transform .35s ease}
.kopf-links a.aktiv::after{transform:scaleX(1)}
.kopf.offen .kopf-links a::after{bottom:-3px;right:auto;width:28px}

/* ===== Freitagabend-Szene im Problem-Abschnitt (abend.js) ===== */
.abend{display:block;width:100%;height:auto;border-radius:18px;background:#141618}
.abend .blatt,.abend .mail-zeile{transform-box:fill-box;transform-origin:50% 100%;transition:transform .55s cubic-bezier(.2,.9,.25,1.15),opacity .35s ease}
.abend .blatt.weg{opacity:0;transform:translate(-8px,-34px) rotate(-6deg)}
.abend .mail-zeile.weg{opacity:0;transform:translateX(10px)}
.abend .dampf{transform-box:fill-box;transform-origin:50% 100%;animation:abend-dampf 3.4s ease-in-out infinite}
.abend .dampf.d2{animation-delay:1.5s}
@keyframes abend-dampf{0%{transform:translateY(5px) scaleY(.85);opacity:0}45%{opacity:1}100%{transform:translateY(-12px) scaleY(1.1);opacity:0}}
.abend .tel{transition:opacity .4s}
.abend .tel-welle{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.abend #tel-schirm{transition:fill .25s}
.abend .tel.klingelt{animation:abend-ruettel .9s ease-in-out}
.abend .tel.klingelt #tel-schirm{animation:abend-schirm .9s ease-out}
.abend .tel.klingelt.wichtig #tel-schirm{animation-name:abend-schirm-wichtig}
.abend .tel.klingelt .tel-welle{animation:abend-welle .9s ease-out}
.abend .tel.klingelt .tel-welle.w2{animation-delay:.15s}
.abend .tel.klingelt.wichtig .tel-welle{stroke:#FF8A2B}
@keyframes abend-ruettel{0%,100%{transform:rotate(0)}10%,30%,50%,70%{transform:rotate(-5deg)}20%,40%,60%,80%{transform:rotate(5deg)}}
@keyframes abend-schirm{0%,100%{fill:#16191B}15%,70%{fill:#C9C3BB}}
@keyframes abend-schirm-wichtig{0%,100%{fill:#16191B}15%,70%{fill:#FF8A2B}}
@keyframes abend-welle{0%{opacity:0;transform:scale(.85)}30%{opacity:.8}100%{opacity:0;transform:scale(1.2)}}
.abend .mail-neu{opacity:0;transform-box:fill-box;transform-origin:100% 100%}
.abend .mail-neu.zeigt{animation:abend-toast 1.4s ease-out}
@keyframes abend-toast{0%{opacity:0;transform:translateY(8px) scale(.9)}15%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
.abend .tel-licht{opacity:0}
.abend .tel.klingelt .tel-licht:not(.tel-licht-wichtig){animation:abend-licht .9s ease-out}
.abend .tel.klingelt.wichtig .tel-licht:not(.tel-licht-wichtig){animation:none}
.abend .tel.klingelt.wichtig .tel-licht-wichtig{animation:abend-licht .9s ease-out}
@keyframes abend-licht{0%,100%{opacity:0}20%,65%{opacity:1}}

/* ===== Kacheln lassen das Cursor-Licht nicht durch =====
   Halbdurchsichtige Kacheln bekommen einen festen Untergrund (gleicher Farbton wie vorher),
   damit Licht, Lochraster und Begriffe dahinter nicht durchscheinen und die Schrift lesbar bleibt.
   Steht der Mauszeiger auf einer Kachel, blendet lochlicht.js das Licht ganz aus (Klasse .aus). */
.hud,.zaehler div,.probe-fakt,.schritte li,.buch,.branche,.aufgabe,.erg-zeile{background:linear-gradient(var(--karte),var(--karte)) var(--grund2)}
.konsole{background:linear-gradient(rgba(239,234,228,.035),rgba(239,234,228,.035)) var(--grund2)}
.prompt{background:linear-gradient(rgba(239,234,228,.05),rgba(239,234,228,.05)) var(--grund2)}
.lesung{background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)) var(--grund2)}
.ticker{background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)) var(--grund2)}
.bot-text{background:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,.32)) var(--grund2)}
.pilot{background:linear-gradient(var(--messing-hauch),var(--messing-hauch)) var(--grund2)}
.knopf-zweit,.chip,.kopier,.stufe-knopf{background-color:var(--grund2)}
.chip:hover{background:linear-gradient(var(--glut-zart),var(--glut-zart)) var(--grund2)}
.spot.aus,.blitze.aus{opacity:0}
