/* ============================================================
   EAProof Landingpage · "Proof Dark"
   Zero-Dependency, lokale Fonts, mobile-first (Breakpoints 600/900)
   ============================================================ */

/* Eine Datei, ein Gewichtsbereich: die variable Fassung deckt 200 bis 800 ab. Begruendung
   fuer den Wechsel von Space Grotesk steht im Kopf von style.css. Die Startseite zieht mit,
   sonst haette dasselbe Produkt vor und hinter der Anmeldung zwei Schriften. */
@font-face{font-family:'Plus Jakarta Sans';src:url('/fonts/plus-jakarta-sans-latin-variable.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#060a0e; --bg2:#0a0f15; --panel:#0d141c; --panel2:#111a24;
  --line:#1b2632; --line2:#243342;
  /* --dim war #5a6c7e und lag damit unter WCAG AA (08.08.2026). PageSpeed Insights
     beanstandete drei Stellen in der Fusszeile: die Zeile "Das Pruefzentrum fuer Expert
     Advisors", den Risikohinweis und die Copyright-Zeile. Gemessen gegen den Grund, auf
     dem sie stehen, kam #5a6c7e auf 3,55:1, noetig sind 4,5 fuer normalen Text.
     Der unangenehmste der drei ist der RISIKOHINWEIS: ein Pflichttext, den man schlecht
     lesen kann, ist doppelt schlecht.
     #74899d loest alle drei auf einmal, weil alle drei an diesem einen Token haengen, und
     kommt gegen jeden der vier Hintergruende ueber 4,5 (5,49 / 5,32 / 5,12 / 4,85).
     DERSELBE WERT STEHT SEIT LAENGEREM IN public/style.css, dort mit derselben
     Begruendung. Die Anwendung hatte den Fehler also schon behoben, die Landingpage
     nicht -- sie bringt ihre eigenen Farbwerte mit und hat den alten Wert behalten.
     Wer hier etwas aendert, sieht bitte in beiden Dateien nach. */
  --text:#eaf2f7; --mut:#93a6b8; --dim:#74899d;
  --acc:#3fa88f; --acc-dim:rgba(63,168,143,.12);
  --blue:#4da3ff; --red:#ff5d6c; --amber:#ffb84d; --grey:#7c8fa3;
  --r:14px;
  /* Eine Easing-Kurve für alles: schnell raus, weich rein. Sorgt dafür, dass
     Einblendungen, Hover und Scroll-Reveals sich wie eine Bewegung anfühlen. */
  --ease:cubic-bezier(.16,1,.3,1);
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:72px}
body{background:var(--bg);color:var(--text);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--acc);text-decoration:none}
img{max-width:100%}
::selection{background:rgba(63,168,143,.25)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
h1,h2,h3{letter-spacing:-.015em;line-height:1.15;font-weight:700}
.skip{position:absolute;left:-999px;top:0;background:var(--acc);color:#04110d;padding:8px 14px;border-radius:0 0 10px 0;z-index:99}
.skip:focus{left:0}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(27,38,50,.6);
  background:rgba(6,10,14,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav{display:flex;align-items:center;gap:14px;height:60px}
.logo{font-weight:700;font-size:17px;letter-spacing:.1em;color:var(--text);display:inline-flex;align-items:center;gap:9px}
.logo b{color:var(--acc)}
.logo .lgi{width:22px;height:22px;flex-shrink:0}
/* Sprungmarken im Kopf. Klein und ruhig, sie sollen die Marke nicht ueberholen. */
.hnav{display:flex;gap:22px;margin-left:30px}
.hnav a{font:500 11.5px var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;transition:color .25s var(--ease)}
.hnav a:hover{color:var(--text)}
@media (max-width:900px){.hnav{display:none}}

.nav .right{margin-left:auto;display:flex;gap:10px;align-items:center}
/* Der Sprachschalter besteht seit dem 09.08.2026 aus LINKS, nicht mehr aus Knoepfen:
   Deutsch und Englisch haben eigene Adressen, ein Wechsel ist also eine Navigation.
   Nebeneffekt und halber Zweck: ein Link ist fuer eine Suchmaschine der Weg zur anderen
   Sprachfassung, ein Knopf mit Skript dahinter ist es nicht. */
.lang{display:flex;border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.lang a{background:none;border:0;color:var(--dim);font:500 12.5px var(--mono);padding:7px 11px;cursor:pointer;text-decoration:none;display:block}
.lang a.on{background:var(--acc-dim);color:var(--acc)}
.lang a:not(.on):hover{color:var(--text)}

.btn{display:inline-block;border-radius:11px;font-weight:700;font-size:14.5px;padding:10px 20px;
  border:1px solid transparent;transition:transform .13s,border-color .13s,background .13s}
.btn:active{transform:translateY(1px)}
.btn-acc{background:var(--acc);color:#04110d}
.btn-acc:hover{transform:translateY(-1px);background:#4cbfa3}
.btn-ghost{border-color:var(--line2);color:var(--mut)}
.btn-ghost:hover{border-color:var(--acc);color:var(--text)}
.btn-lg{padding:13px 26px;font-size:15.5px;border-radius:12px}

/* ---------- Hero ---------- */
.hero{position:relative;padding:84px 0 150px;overflow:hidden;text-align:center}
.layer{position:absolute;inset:0;pointer-events:none;will-change:transform}
.layer-grid{background:
  linear-gradient(rgba(63,168,143,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(63,168,143,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 20%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 75% at 50% 20%,#000 30%,transparent 78%)}
.glow{position:absolute;border-radius:50%;filter:blur(90px)}
.glow-a{width:540px;height:540px;top:-200px;right:-140px;background:rgba(63,168,143,.13)}
.glow-b{width:420px;height:420px;bottom:-220px;left:-160px;background:rgba(77,163,255,.06)}
/* ---------- Hero-Szene: "Ein EA unter der Lupe" ----------
   Choreografie (rein CSS, laeuft einmal). Bewusst straff: der Score ist die
   Pointe und darf nicht erst nach sechs Sekunden kommen, so lange bleibt kaum
   jemand auf dem Hero stehen.
   0.0s   Grid + Achse stehen sofort
   0.2s   Kurven-Reveal startet (2.6s, clip-path-Maske ueber beiden fertigen Pfaden)
   0.7 / 1.05 / 1.35 / 1.65 / 2.0s  Datums-Labels, wenn die Kurvenfront ihre x-Position erreicht
   1.5s   Dip-Label am tiefsten Floating-Einbruch (rot, bleibt stehen)
   2.2s   Score-Ring poppt, WAEHREND die Kurve noch laeuft. Das ist Absicht: die
          Pointe soll da sein, bevor der Blick am Kurvenende ankommt.
   2.6s   GRUEN-Badge, 2.85s Puls-Dot am fertigen Kurvenende
   ab 3.2s  Nachleben: wanderndes Leuchten, Lichtschimmer, Lichthof am Ring */
.eq-scene{position:absolute;left:0;right:0;bottom:-1px;height:clamp(190px,30vw,330px);pointer-events:none}
.eq-svg{position:absolute;inset:0;width:100%;height:100%;display:block;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.5) 45%,rgba(0,0,0,.95));
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.5) 45%,rgba(0,0,0,.95))}
.eq-curves{clip-path:inset(0 100% 0 0);animation:eqReveal 2.6s cubic-bezier(.42,0,.58,1) .2s forwards}
@keyframes eqReveal{to{clip-path:inset(0 0 0 0)}}
/* Datums-Labels an der X-Achse */
.eq-date{position:absolute;bottom:2px;font:500 12px var(--mono);letter-spacing:.08em;color:var(--dim);
  white-space:nowrap;opacity:0;transform:translate(-50%,7px);animation:eqIn .55s ease forwards}
@keyframes eqIn{to{opacity:1;transform:translate(-50%,0)}}
.eq-date.d1{left:10%;animation-delay:.7s}
.eq-date.d2{left:30%;animation-delay:1.05s}
.eq-date.d3{left:50%;animation-delay:1.35s}
.eq-date.d4{left:70%;animation-delay:1.65s}
.eq-date.d5{left:90%;animation-delay:2s}
/* Kurzes Label am tiefsten Floating-Einbruch */
.eq-dip{position:absolute;left:61%;bottom:13%;transform:translate(-50%,5px);white-space:nowrap;
  font:500 12.5px var(--mono);letter-spacing:.06em;color:var(--red);
  background:rgba(30,10,14,.85);border:1px solid rgba(255,93,108,.45);border-radius:99px;padding:4px 12px;
  box-shadow:0 0 18px rgba(255,93,108,.28),inset 0 0 12px rgba(255,93,108,.08);
  opacity:0;animation:eqDip .55s ease 1.5s forwards,eqDipGlow 4.5s ease-in-out 2.1s infinite}
@keyframes eqDip{to{opacity:1;transform:translate(-50%,0)}}
/* Warnmarke atmet leicht: sie markiert den Einbruch dauerhaft, deshalb darf sie
   nicht komplett totstehen, aber auch nicht blinken. */
@keyframes eqDipGlow{
  0%,100%{box-shadow:0 0 18px rgba(255,93,108,.28),inset 0 0 12px rgba(255,93,108,.08)}
  50%{box-shadow:0 0 30px rgba(255,93,108,.5),inset 0 0 14px rgba(255,93,108,.14)}
}
/* Puls-Dot am Kurvenende */
.eq-dot{position:absolute;left:98.8%;bottom:75.6%;width:9px;height:9px;margin:0 0 -4.5px -4.5px;
  border-radius:50%;background:var(--acc);box-shadow:0 0 12px rgba(63,168,143,.85);
  opacity:0;animation:eqFade .4s ease 2.85s forwards}
@keyframes eqFade{to{opacity:1}}
.eq-dot::before{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(63,168,143,.45);
  animation:eqpulse 2.4s ease-out infinite}
@keyframes eqpulse{0%{transform:scale(.7);opacity:.9}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
/* Finale: Score-Ring + Urteil (groesser und vom Rand weg, das ist ein Feature) */
.eq-result{position:absolute;right:9%;bottom:35%;display:flex;flex-direction:column;align-items:center;gap:9px}
.eq-score{position:relative;width:106px;height:106px;border-radius:50%;
  background:rgba(10,15,21,.9);border:1px solid var(--line2);
  box-shadow:0 8px 30px rgba(0,0,0,.45),0 0 24px rgba(63,168,143,.12);
  /* Die Animation wird weiter unten im Abschnitt "Nachleben" um den Lichthof
     ergaenzt und dort erneut gesetzt. Zeiten deshalb an beiden Stellen gleich halten. */
  opacity:0;transform:scale(.6);animation:eqPop .55s ease 2.2s forwards}
@keyframes eqPop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.07)}
  80%{transform:scale(.96)}100%{opacity:1;transform:scale(1)}}
.eq-score svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.eq-ring-track{fill:none;stroke:var(--line2);stroke-width:5}
.eq-ring-val{fill:none;stroke:var(--acc);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:0 201.1;animation:eqRing 1.1s cubic-bezier(.3,.7,.3,1) 2.3s forwards} /* fuellt sich auf 74% */
@keyframes eqRing{to{stroke-dasharray:148.8 201.1}}
.eq-score b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:500 31px var(--mono);color:var(--acc)}
.eq-verdict{font:500 11.5px var(--mono);letter-spacing:.14em;color:var(--acc);background:var(--acc-dim);
  border:1px solid rgba(63,168,143,.35);border-radius:99px;padding:5px 12px;
  opacity:0;transform:translateY(6px);animation:eqRise .45s ease 2.6s forwards}
@keyframes eqRise{to{opacity:1;transform:translateY(0)}}
/* Mobile: weniger Labels, Ring kompakter und ueber der Kurve */
@media(max-width:599px){
  .eq-date.d2,.eq-date.d4{display:none}
  .eq-dip{bottom:17%}
  .eq-result{right:16px;bottom:46%}
  .eq-score{width:76px;height:76px}
  .eq-score b{font-size:22px}
}
.hero-inner{position:relative;max-width:780px;margin:0 auto}
.badge{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--acc);background:var(--acc-dim);
  border:1px solid rgba(63,168,143,.3);border-radius:99px;padding:6px 14px;margin-bottom:22px}
.hero h1{font-size:clamp(34px,6.5vw,58px)}
.hero h1 em{font-style:normal;color:var(--acc)}
/* dein/sein-Wechsel in der Headline: zwei gestapelte Woerter, sanftes Rollen alle paar
   Sekunden zwischen "dein" und "sein" (verdient DEIN Geld vs. verdient SEIN Geld).
   Breite kommt vom sichtbaren "dein" im Textfluss. */
.wswap{position:relative;display:inline-block}
.wswap .w{display:inline-block;transition:opacity .45s ease,transform .45s ease}
.wswap .ws{position:absolute;left:0;top:0;opacity:0;transform:translateY(.25em)}
/* Das Wechselwort kommt aus dem Attribut, NICHT aus einem Textknoten. Stand es als
   Text im h1, klebte es im Rohtext direkt am ersten Wort: "verdient deinsein Geld?".
   Sichtbar war das nie (Deckkraft 0), aber genau diesen Rohtext liest jede Maschine,
   und die H1 ist das staerkste Textsignal der Seite. Wer hier wieder ein Wort in den
   Span schreibt, baut das zurueck; tools/test-seo.js faellt dann um.
   Das Attribut selbst steht im h1 und in der Sprachtabelle T. */
.wswap .ws::after{content:attr(data-wort)}
/* Kein farbiges Zeichen mehr. Die Doppeldeutigkeit traegt allein der Wechsel
   dein -> sein. Ein eingefaerbtes d zieht den Blick auf den Buchstaben statt
   auf das Wort. */
.wswap .wd i{font-style:normal}
.wswap.s .wd{opacity:0;transform:translateY(-.25em)}
.wswap.s .ws{opacity:1;transform:none}
.hero .sub{color:var(--mut);font-size:17px;max-width:620px;margin:20px auto 30px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ---------- Sections ---------- */
section{position:relative;padding:76px 0}
.kicker{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;color:var(--acc);
  text-transform:uppercase;margin-bottom:14px}
h2{font-size:clamp(25px,3.4vw,38px);max-width:760px}
.lead{color:var(--mut);font-size:16.5px;max-width:660px;margin-top:14px}
.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- Karten (Problem + USP + Trust) ---------- */
.cards{display:grid;gap:16px;margin-top:40px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;
  transition:transform .18s,border-color .18s}
.card:hover{transform:translateY(-3px);border-color:var(--line2)}
.card .ico{width:40px;height:40px;border-radius:10px;background:var(--acc-dim);display:flex;
  align-items:center;justify-content:center;margin-bottom:16px}
.card .ico svg{width:20px;height:20px;stroke:var(--acc);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:17.5px;margin-bottom:8px}
.card p{color:var(--mut);font-size:14.5px}
.card p b{color:var(--text);font-weight:600}

/* ---------- Problem-Sektion als Split (These links, Liste rechts statt Karten-Klone) ---------- */
.probgrid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
/* Die Zahl in der Ueberschrift traegt den Akzent, der Rest bleibt weiss (23.08.2026,
   Ansage Alex: "wir schreiben das als zahl und im design mit weiss und unserem gruen").
   Dieselbe Bauart wie im Hero, wo "verdient" den Akzent traegt. */
.probleft h2 em{font-style:normal;color:var(--acc)}
.probleft .lead{color:var(--mut);font-size:16.5px;margin-top:14px;max-width:36ch}
.probstat{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.probstat b{font:600 30px var(--mono);letter-spacing:-.02em;color:var(--red)}
/* Nur der DIREKTE span ist der Beschreibungstext. Vorher stand hier
   ".probstat span" ohne Kindkombinator, und als die Zahl aus mehreren spans
   zusammengesetzt wurde, hat die Regel auch die erwischt: alles klein, grau
   und untereinander statt gross und rot. */
.probstat > span{display:block;color:var(--dim);font-size:13px;margin-top:4px;max-width:38ch}
/* Nur die Trefferzahl ist rot. "von 113" ist die Bezugsgroesse und keine
   Warnung, deshalb in Textfarbe. */
.probstat b span{display:inline;font-size:inherit;margin:0;color:var(--text)}
.probstat b #probRed{color:var(--red)}
.problist{display:flex;flex-direction:column}
.probrow{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:26px 0;border-top:1px solid var(--line)}
.probrow:first-child{border-top:0;padding-top:6px}
.probrow .ico{width:44px;height:44px;border-radius:11px;background:var(--acc-dim);display:flex;align-items:center;justify-content:center}
.probrow .ico svg{width:21px;height:21px;stroke:var(--acc);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.probrow h3{font-size:17.5px;margin-bottom:7px}
.probrow p{color:var(--mut);font-size:14.5px;max-width:58ch}
@media(max-width:840px){
  .probgrid{grid-template-columns:1fr;gap:30px}
  .probleft .lead{max-width:none}
}

/* ---------- Unterwegs-Sektion: Copy links, zwei iPhone-Rahmen rechts ---------- */
.mobgrid{display:grid;grid-template-columns:6fr 6fr;gap:56px;align-items:center}
.moblist{margin-top:26px;display:flex;flex-direction:column}
.mobrow{display:flex;gap:12px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.mobrow:first-child{border-top:0}
.mobrow .q{color:var(--mut)}
.mobrow .a{margin-left:auto;font:600 12.5px var(--mono);color:var(--acc);white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.mobrow .a.warn{color:var(--red)}
.mobnote{margin-top:22px;font-size:13px;color:var(--dim)}
.mobnote b{color:var(--text);font-weight:600}
/* iPhone-Rahmen: Titan-Rand, Dynamic Island, Seitentasten, Statusleiste, Home-Indikator */
.duo{display:flex;gap:26px;justify-content:center;align-items:flex-start}
.iph{position:relative;width:252px;flex-shrink:0;background:#000;border-radius:42px;
  border:2px solid #43484f;box-shadow:inset 0 0 0 3px #16181b,0 30px 80px rgba(0,0,0,.55)}
.iph.second{margin-top:34px}
.sbtn{position:absolute;background:#3a3f45;border-radius:2px}
.sbtn.sl{left:-4px;width:3px}
.sbtn.s1{top:96px;height:22px}
.sbtn.s2{top:132px;height:38px}
.sbtn.s3{top:178px;height:38px}
.sbtn.sr{right:-4px;top:150px;width:3px;height:56px}
.iph .scr{position:relative;margin:4px;border-radius:37px;overflow:hidden;background:var(--bg);
  display:flex;flex-direction:column;height:536px}
.iph .di{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:78px;height:22px;background:#000;border-radius:99px;z-index:5}
.stbar{display:flex;justify-content:space-between;align-items:center;padding:13px 22px 2px;flex-shrink:0}
.stbar b{font-size:12px;letter-spacing:.02em}
.stico{display:flex;gap:5px;align-items:center}
.stico svg{height:10px;width:auto;fill:var(--text)}
.phc{flex:1;overflow:hidden;padding:8px 10px 0;display:flex;flex-direction:column;gap:7px;min-height:0}
.ph-top{display:flex;justify-content:space-between;align-items:baseline;margin:0 2px}
.ph-title{font-size:15px;font-weight:700}
.ph-stat{font:500 7.5px var(--mono);color:var(--acc);letter-spacing:.06em}
.pms{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.pms .l{font:500 7px var(--mono);letter-spacing:.1em;color:var(--dim);text-transform:uppercase;margin-bottom:5px}
.pms .g{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.pms .g i{display:block;font-style:normal;font-size:7px;color:var(--dim);text-transform:uppercase}
.pms .g b{font:600 10.5px var(--mono)}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.pe1{display:flex;align-items:center;gap:5px;min-width:0}
.pe1 b{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pe1 em{font:600 10.5px var(--mono);font-style:normal;margin-left:auto;flex-shrink:0}
.pdot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pdot.g{background:var(--acc);box-shadow:0 0 5px rgba(63,168,143,.7)}
.pdot.y{background:var(--amber)}
.pst{font:500 6.5px var(--mono);border:1px solid rgba(255,184,77,.4);color:var(--amber);border-radius:99px;padding:1px 5px;flex-shrink:0;letter-spacing:.05em}
.pst.live{color:var(--acc);border-color:rgba(63,168,143,.4)}
.pst.blue{color:var(--blue);border-color:rgba(77,163,255,.35)}
.pst.red{color:var(--red);border-color:rgba(255,93,108,.4)}
.pe2{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px;padding-top:5px;border-top:1px solid var(--line)}
.pe2 i{display:block;font-style:normal;font-size:6px;color:var(--dim);text-transform:uppercase;white-space:nowrap}
.pe2 b{font:500 8.5px var(--mono)}
.pos{color:var(--acc)}.neg{color:var(--red)}.amb{color:var(--amber)}
.pback{font-size:10px;color:var(--acc);margin:0 2px}
.pchips{display:flex;gap:4px;flex-wrap:wrap;margin:0 2px}
.pscore{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 11px}
.pring{position:relative;width:46px;height:46px;flex-shrink:0}
.pring svg{position:absolute;inset:0}
.pring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 15px var(--mono);color:var(--red)}
.psc2{min-width:0}
.prec{display:inline-block;font-size:8.5px;color:var(--amber);background:rgba(255,184,77,.1);border:1px solid rgba(255,184,77,.3);border-radius:99px;padding:2px 7px}
.psc2 i{display:block;font-style:normal;font-size:8px;color:var(--dim);margin-top:4px}
.ptiles{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ptiles>div{background:var(--panel);padding:7px 9px}
.ptiles i{display:block;font-style:normal;font-size:6.5px;color:var(--dim);text-transform:uppercase}
.ptiles b{font:500 11.5px var(--mono)}
.pchart{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px}
.pchart svg{width:100%;height:58px;display:block}
/* --- Zusaetze fuer die neuen Telefonschirme (Uebersicht und EA-Detail) --- */
.ppills{display:flex;gap:4px;margin:6px 2px 0}
.ppills span{font-size:7.5px;color:var(--mut);border:1px solid var(--line);border-radius:99px;
  padding:3px 7px;white-space:nowrap}
.ppills span.on{color:var(--acc);border-color:rgba(63,168,143,.45);background:rgba(63,168,143,.1)}
.pkv{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.pkv.four{grid-template-columns:repeat(4,1fr);margin-top:6px;padding-top:5px;border-top:1px solid var(--line)}
.pkv i{display:block;font-style:normal;font-size:6.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.pkv b{font:600 12px var(--mono)}
.pkv.four b{font:500 9px var(--mono)}
.pmin{margin-top:6px;padding-top:5px;border-top:1px solid var(--line)}
.pmin i{display:block;font-style:normal;font-size:6.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.pmin b{font:600 10.5px var(--mono)}
.pmin em{font-style:normal;font-size:7px;color:var(--dim);margin-left:6px}
.pbig{font:600 17px var(--mono);letter-spacing:-.02em}
.plab{font:500 7px var(--mono);letter-spacing:.1em;color:var(--dim);text-transform:uppercase;margin:4px 2px 0}
.ptabs{display:flex;gap:4px;margin:0 2px}
.ptabs span{font-size:7.5px;color:var(--mut);border:1px solid transparent;border-radius:7px;padding:3px 6px}
.ptabs span.on{color:var(--text);border-color:var(--line2);background:var(--panel)}
.plist{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:2px 10px}
.prow{display:flex;align-items:center;gap:5px;padding:5px 0;border-top:1px solid var(--line);min-width:0}
.prow:first-child{border-top:0}
.prow b{font-size:9.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.prow b u{text-decoration:none;color:var(--dim)}
.prow em{font:600 9.5px var(--mono);font-style:normal;margin-left:auto;flex-shrink:0}
.psum{border-top:1px dashed var(--line2)}
.psum b{color:var(--mut)}
.pcl{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.pcl i{font-style:normal;font-size:6.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;
  line-height:1.35}
.pcl b{font:600 9px var(--mono);margin-left:auto;white-space:nowrap}
.pcl u{text-decoration:none;font:500 8px var(--mono);color:var(--dim);white-space:nowrap}
/* Zaehler am Glockensymbol, wie in der Anwendung */
.pnav .pbadge{position:relative}
.pnav .pbadge::after{content:attr(data-n);position:absolute;top:-2px;left:calc(50% + 4px);
  min-width:9px;height:9px;padding:0 2px;border-radius:99px;background:var(--amber);
  color:#0b0f14;font:700 6px var(--sans);display:grid;place-items:center}

.pnav{position:relative;display:flex;flex-shrink:0;border-top:1px solid var(--line);background:rgba(10,15,21,.9);padding:6px 4px 14px}
.pnav span{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:6.5px;color:var(--dim);font-weight:600}
.pnav span.on{color:var(--acc)}
.pnav svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pnav .homebar{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:86px;height:3.5px;border-radius:3px;background:var(--line2)}
@media(max-width:1060px){.iph.second{display:none}}
@media(max-width:840px){
  .mobgrid{grid-template-columns:1fr;gap:40px}
  .duo{order:-1}
}

/* ---------- Manifest-Statement ("Warum es EAProof gibt") ---------- */
/* Manifest-Satz. Stand frueher in einem eigenen Abschnitt (.statement), sitzt
   jetzt als Einleitung oben in der Klarheits-Sektion. */
.big{font-size:clamp(19px,1.1vw + 13px,26px);font-weight:700;line-height:1.45;max-width:840px;margin-top:14px}
.big .x{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.big em{font-style:normal;color:inherit}
/* Ueberschriften moeglichst gleichmaessig umbrechen statt die letzte Zeile
   mit einem einzelnen Wort stehen zu lassen. Browser ohne Unterstuetzung
   ignorieren die Zeile, der Umbruch bleibt dann wie bisher. */
h2{text-wrap:balance}

/* ---------- Pipeline ---------- */
.pipe-wrap{margin-top:44px}
.pipe-line{height:3px;background:var(--line);border-radius:2px;margin-bottom:20px;overflow:hidden}
.pipe-line i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),#4cbfa3);
  transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.22,.8,.3,1) .2s}
.rv.vis .pipe-line i{transform:scaleX(1)}
.pipe{display:grid;gap:14px}
.stage{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 18px;
  transition:transform .18s,border-color .18s}
.stage:hover{transform:translateY(-3px);border-color:var(--line2)}
.stage .no{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
.stage h3{font-size:17px;margin:6px 0 10px}
/* Seit 03.08.2026 stehen hier ganze Saetze statt Kuerzel wie "PF >= 1.3".
   Schreibmaschinenschrift passte zu den Kuerzeln, Prosa liest sich darin zaeh. */
.stage ul{list-style:none;font-size:13px;line-height:1.45;color:var(--mut);display:grid;gap:7px}
.stage ul li::before{content:"·";color:var(--acc);margin-right:6px}
.stage.last{border-color:rgba(63,168,143,.45)}
.stage.last .no{color:var(--acc)}

/* Archiv-Zeile */
.kill{margin-top:16px;display:flex;align-items:center;gap:14px;background:rgba(255,93,108,.06);
  border:1px solid rgba(255,93,108,.25);border-radius:var(--r);padding:16px 18px}
.kill .dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex-shrink:0}
.kill p{font-size:14px;color:var(--mut)}
.kill p b{color:var(--red);font-weight:700}

/* Ampel */
.ampel{display:grid;gap:10px;margin-top:22px}
.ampel .a{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;font-size:13px;color:var(--mut)}
.ampel .a b{color:var(--text)}
.ampel .dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex-shrink:0}
.d-red{background:var(--red);box-shadow:0 0 10px rgba(255,93,108,.45)}
.d-blue{background:var(--blue);box-shadow:0 0 10px rgba(77,163,255,.45)}
.d-amber{background:var(--amber);box-shadow:0 0 10px rgba(255,184,77,.45)}
.d-green{background:var(--acc);box-shadow:0 0 10px rgba(63,168,143,.5)}
.scoreline{font-family:var(--mono);font-size:12.5px;color:var(--dim);margin-top:22px;letter-spacing:.04em}
.scoreline b{color:var(--acc);font-weight:500}

/* ---------- App-Mockups mit Tooltips ----------
   Kein Screenshot, sondern echtes Markup nach dem Vorbild der laufenden App:
   bleibt auf jedem Schirm scharf, folgt dem Theme, laesst sich mit Hotspots
   verknuepfen und veraltet nicht als Bilddatei. Die Groessen sind gegenueber
   der echten App verkleinert (die laeuft bei ~1500 px, hier sind ~1080 da),
   die Proportionen bleiben. Die Tooltips laufen rein in CSS ueber :hover und
   :focus-visible, damit sie auch per Tastatur erreichbar sind. */
.mk{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  margin-top:40px;box-shadow:0 34px 80px -44px rgba(0,0,0,.95)}
/* KEIN overflow:hidden am Rahmen. Das wuerde die Sprechblasen der Hotspots am
   Mockup-Rand abschneiden. Stattdessen runden die Kinder ihre eigenen Ecken. */
.mk-bar{display:flex;align-items:center;gap:6px;padding:9px 13px;border-bottom:1px solid var(--line);
  background:var(--panel2);border-radius:13px 13px 0 0}
.mk-bar span{width:8px;height:8px;border-radius:50%;background:var(--line2)}
.mk-bar i{font:500 10.5px var(--mono);color:var(--dim);font-style:normal;margin-left:8px;letter-spacing:.03em}
.mkapp{display:grid;grid-template-columns:148px 1fr;font-size:11px}

/* ---- Sidebar ---- */
.mkside{border-right:1px solid var(--line);background:var(--bg2);padding:12px 10px 10px;
  border-radius:0 0 0 13px}
.mks-logo{display:flex;align-items:center;gap:7px;font-weight:700;font-size:12px;letter-spacing:.1em;
  color:var(--text);padding:2px 4px 12px}
.mks-logo b{color:var(--acc)}
.mks-logo svg{width:15px;height:15px;flex-shrink:0}
.mks-sec{font:500 8px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  padding:11px 6px 5px}
.mks-i{padding:5px 8px;border-radius:6px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mks-i.on{background:var(--acc-dim);color:var(--acc);font-weight:600}
.mks-i.fav::before{content:'★';color:var(--amber);margin-right:6px;font-size:9px}
.mks-i.cur{background:rgba(63,168,143,.07);color:var(--text)}
.mks-more{font-size:9.5px;color:var(--dim);padding:3px 8px}
/* Die Alarm-Zahl in der Attrappe. Bernstein wie in der App, und sie steht rechts in der
   Zeile: dort steht sie im Betrieb auch. Ohne sie liest sich die Zeile als "nichts los". */
.mks-i .mks-zahl{float:right;background:rgba(255,184,77,.16);color:var(--amber);
  border-radius:999px;padding:0 5px;font-size:8.5px;font-weight:700;line-height:14px;margin-top:1px}
.mks-user{display:flex;align-items:center;gap:7px;margin-top:16px;padding-top:10px;border-top:1px solid var(--line)}
.mks-user .av{width:20px;height:20px;border-radius:50%;background:var(--acc-dim);color:var(--acc);
  font:600 8px var(--sans);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mks-user .um{overflow:hidden;line-height:1.3}
.mks-user b{display:block;font-size:9.5px;color:var(--text)}
.mks-user i{display:block;font-style:normal;font-size:8px;color:var(--dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* ---- Hauptbereich ---- */
.mkmain{padding:14px 16px 18px;min-width:0}
.mk-back{font-size:10.5px;color:var(--mut);margin-bottom:10px}
.mk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.mk-h1{font-size:clamp(17px,1.9vw,22px);font-weight:700;letter-spacing:-.015em;line-height:1.2}
.mk-h1 .acc{color:var(--acc)}
.mk-pen{font-size:10px;color:var(--dim);border:1px solid var(--line2);border-radius:5px;padding:1px 5px;
  vertical-align:middle;margin-left:5px}
.mk-sub2{font-size:10.5px;color:var(--dim);margin-top:4px}
.mk-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:7px}
.mk-orig{font-size:9.5px;color:var(--dim)}
.mk-chip{font:500 9.5px var(--mono);letter-spacing:.05em;border:1px solid var(--line2);
  border-radius:5px;padding:2px 7px;color:var(--mut)}
.mk-chip.st{color:var(--text);background:var(--panel2)}
.mk-chip.cl{color:var(--amber);border-color:rgba(255,184,77,.35);background:rgba(255,184,77,.08)}
.mk-chip.rot{color:var(--red);border-color:rgba(255,93,108,.4);background:rgba(255,93,108,.1)}
.mk-acts{display:flex;gap:7px;flex-wrap:wrap}
.mk-btn{font:600 9.5px var(--sans);border:1px solid var(--line2);border-radius:7px;padding:5px 10px;color:var(--mut)}
.mk-btn.acc{background:var(--acc);border-color:var(--acc);color:#04140f}

.mk-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}
.mk-b{font:500 9px var(--mono);letter-spacing:.04em;border:1px solid var(--line);border-radius:5px;
  padding:3px 7px;color:var(--dim);background:var(--panel2)}
.mk-b.sym{color:var(--acc);border-color:rgba(63,168,143,.3)}
.mk-b.gold{color:var(--amber);border-color:rgba(255,184,77,.35)}
.mk-b.sel{color:var(--blue);border-color:rgba(77,163,255,.3)}

/* ---- Stufenleiste ---- */
.mk-stages{display:flex;align-items:stretch;gap:6px;margin-top:12px;border:1px solid var(--line);
  border-radius:9px;padding:8px 10px;background:var(--panel2)}
.mk-stg{flex:1;text-align:center;padding:5px 4px;border-radius:6px}
.mk-stg i{display:block;font:500 8px var(--mono);letter-spacing:.14em;color:var(--dim);font-style:normal}
.mk-stg b{display:block;font:500 12px var(--mono);color:var(--dim);margin-top:3px}
.mk-stg u{display:block;text-decoration:none;font:500 7.5px var(--mono);color:var(--dim);margin-top:1px}
.mk-stg.on{background:rgba(63,168,143,.09);border:1px solid rgba(63,168,143,.3)}
.mk-stg.on i{color:var(--acc)} .mk-stg.on b{color:var(--text)}
.mk-arr{align-self:center;color:var(--dim);font-size:10px}

/* ---- Score-Karte + Kennzahlen ---- */
.mk-card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px}
.mk-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
.mk-scorecard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.mk-ring{position:relative;width:88px;height:88px;flex-shrink:0}
.mk-ring svg{position:absolute;inset:0;width:88px;height:88px;transform:rotate(-90deg)}
.mk-ring .mk-t{fill:none;stroke:var(--line2);stroke-width:7}
.mk-ring .mk-v{fill:none;stroke:var(--acc);stroke-width:7;stroke-linecap:round;stroke-dasharray:127 283}
.mk-ring .mk-v.r{stroke:var(--red)} /* Umfang 2*pi*45 = 283, davon 45 % */
/* NUR das direkte Kind. Im Ring steckt auch ein Hotspot, und dessen Sprechblase
   hat selbst ein <b> als Ueberschrift. Ohne den Kindselektor erbte diese
   Ueberschrift position:absolute und inset:0 und klebte ohne Innenabstand in der
   linken oberen Ecke der Sprechblase. Das war die unsaubere Stelle. */
.mk-ring > b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:500 27px var(--mono);color:var(--red)}
  /* Flex statt line-height: JetBrains Mono hat oben mehr Luft als unten, mit
     line-height sitzt die Ziffer sichtbar zu hoch im Ring. */
.mk-rec{font:500 9.5px var(--mono);color:var(--amber);background:rgba(255,184,77,.1);
  border:1px solid rgba(255,184,77,.3);border-radius:99px;padding:4px 11px}
.mk-crithint{font-size:9.5px;color:var(--dim)}
.mk-crithint u{color:var(--acc);text-decoration:none}
.mk-subs{width:100%;display:flex;flex-direction:column;gap:7px;margin-top:2px}
.mk-sub{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:9.5px;color:var(--mut);text-align:left}
.mk-sub em{font:500 9.5px var(--mono);font-style:normal;color:var(--text)}
.mk-sub i{grid-column:1/-1;height:3px;border-radius:2px;background:var(--line2);overflow:hidden}
.mk-sub s{display:block;height:100%;text-decoration:none}
.mk-sub s.r{background:var(--red)} .mk-sub s.y{background:var(--amber)} .mk-sub s.g{background:var(--acc)}
.mk-rate{width:100%;background:var(--acc);color:#04140f;font:600 11px var(--sans);
  border-radius:7px;padding:7px;margin-top:4px}

.mk-right{display:flex;flex-direction:column;gap:10px;min-width:0}
.mk-kpis{display:grid;grid-template-columns:1fr;gap:10px}
.mk-kpi i{display:block;font-style:normal;font:500 8px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.mk-kpi b{display:block;font:500 20px var(--mono);letter-spacing:-.02em;margin-top:5px}
.mk-kpi b.pos{color:var(--acc)} .mk-kpi b.neg{color:var(--red)}
.mk-kpi b u{font-size:11px;color:var(--dim);text-decoration:none}
.mk-mini{display:flex;gap:14px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}
.mk-mini span{font:500 7.5px var(--mono);letter-spacing:.1em;color:var(--dim)}
.mk-mini em{display:block;font-style:normal;font-size:10px;color:var(--mut);margin-top:2px}
.mk-mini em.pos{color:var(--acc)}
.mk-note{font:500 8px var(--mono);letter-spacing:.08em;color:var(--dim);margin-top:9px;
  padding-top:8px;border-top:1px solid var(--line)}
.mk-note em{font-style:normal;color:var(--text)}

/* ---- Chart mit Tabs ---- */
.mk-chart{padding:10px 12px}
.mk-tabs{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.mk-tab{font:500 9px var(--sans);border:1px solid transparent;border-radius:6px;padding:4px 8px;color:var(--dim)}
.mk-tab.on{background:var(--panel);border-color:var(--line2);color:var(--text)}
.mk-tspace{flex:1;min-width:6px}
.mk-tab.sm{font-size:8.5px;padding:3px 7px}
/* Die EBENE ist ein eigener Schalter, seit dem 06.08.2026 auch in der App: links die
   Kennzahlen DIESES EA, rechts die des Kontos. Beide in eine Reihe zu stellen war der
   Kategorienfehler, an dem ein ganzer Abend gehangen hat -- eine Kurve fuer den EA unter
   der Ueberschrift "Kontostand" liest sich als Kontostand des Kontos. */
.mk-ebene{font:600 9px var(--sans);border:1px solid var(--line2);border-radius:6px;
  padding:4px 9px;color:var(--dim);background:transparent}
.mk-ebene.on{background:var(--acc-dim);border-color:transparent;color:var(--acc)}
.mk-tsep{width:1px;height:14px;background:var(--line2);margin:0 5px}
.mk-plot{position:relative;padding-left:26px}
.mk-yax{position:absolute;left:0;top:0;bottom:14px;display:flex;flex-direction:column;
  justify-content:space-between;font:500 7.5px var(--mono);color:var(--dim)}
.mk-plot svg{width:100%;height:clamp(120px,15vw,168px);display:block}
.mk-xax{display:flex;justify-content:space-between;font:500 7.5px var(--mono);color:var(--dim);margin-top:4px}

/* ---- Statistik-Kacheln ---- */
.mk-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.mk-st{padding:10px}
.mk-st i{display:block;font-style:normal;font:500 7.5px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.mk-st b{display:block;font:500 15px var(--mono);margin-top:4px}
.mk-st u{display:block;text-decoration:none;font-size:8.5px;color:var(--dim);margin-top:2px}

/* ---- Dashboard: Briefing, Verteilung, Karten ---- */
.mk-blab{font:500 8.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);
  border-left:2px solid var(--acc);padding-left:7px;margin-bottom:9px}
.mk-blab.lc{margin-top:14px}
.mk-brief{margin-top:12px}
.mk-brow{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:5px 0;
  border-top:1px solid var(--line);font-size:10px;color:var(--mut)}
.mk-brow:nth-child(2){border-top:0}
.mk-brow i{font-style:normal;font:500 8px var(--mono);letter-spacing:.1em;color:var(--dim)}
.mk-brow .neg{color:var(--red);font-weight:700}
.mk-dist{display:flex;height:11px;border-radius:4px;overflow:hidden;margin-top:12px;gap:2px}
.mk-dist i{display:block;height:100%;border-radius:2px}
.mk-dist i.g{background:var(--acc)} .mk-dist i.y{background:var(--amber)}
.mk-dist i.r{background:var(--red)} .mk-dist i.b{background:var(--blue)}
.mk-dist i.gr{background:var(--grey)} .mk-dist i.gd{background:var(--line2)}
.mk-leg{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px;font-size:9px;color:var(--mut)}
.mk-leg span{display:flex;align-items:center;gap:5px}
.mk-leg i{width:6px;height:6px;border-radius:50%}
.mk-leg i.g{background:var(--acc)} .mk-leg i.y{background:var(--amber)}
.mk-leg i.r{background:var(--red)} .mk-leg i.b{background:var(--blue)}
.mk-leg i.gr{background:var(--grey)} .mk-leg i.gd{background:var(--line2)}
.mk-leg .tot{color:var(--dim)}
.mk-3{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.mk-row3,.mk-pipe4{display:flex;gap:14px;flex-wrap:wrap}
.mk-row2{display:flex;gap:20px;flex-wrap:wrap}
.mk-row3 i,.mk-row2 i,.mk-pipe4 i{display:block;font-style:normal;font:500 7.5px var(--mono);
  letter-spacing:.1em;color:var(--dim)}
.mk-row3 b,.mk-row2 b{display:block;font:500 17px var(--mono);margin-top:3px}
.mk-pipe4 span{flex:1;min-width:52px;background:var(--panel);border:1px solid var(--line);
  border-radius:7px;padding:7px 9px}
.mk-pipe4 b{display:block;font:500 17px var(--mono);margin-top:2px}
.mk-row2 u{display:block;text-decoration:none;font-size:8.5px;color:var(--dim);margin-top:2px}
.mk-row3 b.pos,.mk-row2 b.pos{color:var(--acc)}
.mk-row3 b.neg,.mk-row2 b.neg{color:var(--red)}
.mk-frow{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:8px;
  border-top:1px solid var(--line);font-size:9.5px}
.mk-frow i{font-style:normal;font:500 7.5px var(--mono);letter-spacing:.1em;color:var(--dim)}
.mk-frow .tag{font:500 9px var(--mono);color:var(--mut)}
.mk-frow .tag.dm{border:1px solid var(--line2);border-radius:4px;padding:1px 5px;font-size:7.5px}
.mk-frow b{margin-left:auto}
.mk-frow b.neg{color:var(--red)}
.mk-off{font-size:9px;color:var(--red);margin-top:8px}
.mk-flags{display:flex;align-items:baseline;gap:7px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}
.mk-flags i{font-style:normal;font:500 7.5px var(--mono);letter-spacing:.1em;color:var(--dim)}
.mk-flags b{font:500 17px var(--mono)}
.mk-flags b.amb{color:var(--amber)}
.mk-flags u{text-decoration:none;font-size:8.5px;color:var(--dim)}

/* ---- Dashboard-Tabelle ---- */
.mk-tbl{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.mk-tr{display:grid;grid-template-columns:2.4fr .8fr .8fr 1fr 1fr 1.1fr;gap:8px;align-items:center;
  padding:8px 11px;border-top:1px solid var(--line);font:500 10px var(--mono);color:var(--mut)}
.mk-tr:first-child{border-top:0}
.mk-th{background:var(--panel);font:500 7.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.mk-tr .nm{display:flex;align-items:center;gap:8px;min-width:0}
.mk-tr .nm em{font-style:normal;min-width:0}
.mk-tr .nm em u{display:block;text-decoration:none;font-size:8px;color:var(--dim);margin-top:1px}
.mk-tr .nm > em{color:var(--text);font:600 10.5px var(--sans)}
.mk-tr .d{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.mk-tr .d.g{background:var(--acc);box-shadow:0 0 7px rgba(63,168,143,.6)}
.mk-tr .d.y{background:var(--amber)} .mk-tr .d.r{background:var(--red)} .mk-tr .d.b{background:var(--blue)}
.mk-tr .pill{font:500 7.5px var(--mono);border:1px solid var(--line2);border-radius:4px;
  padding:2px 6px;color:var(--mut);justify-self:start}
.mk-tr .pos{color:var(--acc)} .mk-tr .neg{color:var(--red)}
.mk-tr .amb{color:var(--amber)} .mk-tr .dim{color:var(--dim)}
.mk-sep{grid-template-columns:1fr;background:var(--panel);font-size:8px;letter-spacing:.1em;color:var(--dim)}

/* ---- Merkmale im Wechsel: Text neben Bildschirmfoto ----
   Eine Zeile Text links, Bild rechts; die naechste gespiegelt (.feat-dreh).
   Das Bild sitzt in einem Rahmen mit verborgenem Ueberlauf, damit es beim
   Zeigen leicht hineinzoomen kann, ohne den Rahmen zu sprengen. */
.feats{display:grid;gap:clamp(64px,9vw,120px);margin-top:clamp(56px,7vw,96px)}
.feat{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(32px,5vw,72px);align-items:center}
/* Gespiegelte Zeile: das Bild steht im Quelltext vorn, also muss die BREITE
   Spalte nach vorn wandern. Mit order statt Spaltentausch landete das Bild in
   der schmalen Spalte und war sichtbar kleiner als in der Zeile darueber. */
.feat-dreh{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.feat-txt h3{margin:0;font-size:clamp(25px,3.1vw,35px);line-height:1.14;letter-spacing:-.02em}
.feat-txt > p{margin:14px 0 0;max-width:46ch;color:var(--mut);font-size:16.5px;line-height:1.62}
.feat-pts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:13px;max-width:44ch}
.feat-pts li{position:relative;padding-left:17px;font-size:14.5px;line-height:1.5;color:var(--mut)}
.feat-pts li::before{content:'';position:absolute;left:0;top:.58em;width:5px;height:5px;
  border-radius:1px;background:var(--acc)}
.feat-pts b{display:block;color:var(--text);font-weight:600;margin-bottom:2px}
.feat-lnk{display:inline-flex;align-items:center;gap:8px;margin-top:28px;
  border:1px solid var(--line2);border-radius:99px;padding:9px 17px;
  font-size:14px;color:var(--text);text-decoration:none;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.feat-lnk svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.feat-lnk:hover{border-color:rgba(63,168,143,.55);background:rgba(63,168,143,.08);transform:translateY(-1px)}

/* Die Perspektive liegt am Rahmen AUSSEN, geneigt wird die Flaeche innen.
   Andersherum kippt der Schatten mit und das Bild sieht aus wie Papier. */
.feat-bild{margin:0;perspective:1100px}
.feat-rahmen{overflow:hidden;border-radius:14px;border:1px solid var(--line2);
  background:var(--panel);box-shadow:0 40px 90px -42px rgba(0,0,0,.95);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .55s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
  will-change:transform}
.feat-bild img{display:block;width:100%;height:auto;
  transition:transform .9s var(--ease)}
.feat-bild:hover .feat-rahmen{border-color:rgba(63,168,143,.34);
  box-shadow:0 50px 110px -40px rgba(0,0,0,1),0 0 0 1px rgba(63,168,143,.13)}
.feat-bild:hover img{transform:scale(1.055)}

.feat[hidden]{display:none}

@media (max-width:860px){
  .feats{gap:56px}
  .feat{grid-template-columns:1fr;gap:26px}
  /* Auf schmalen Schirmen zuerst lesen, dann sehen. */
  .feat-dreh{grid-template-columns:1fr}
  .feat-dreh .feat-txt{order:0}
  .feat-dreh .feat-bild{order:1}
  .feat-txt h3{font-size:23px}
  .feat-txt > p{font-size:15.5px}
  .feat-pts{margin-top:18px;gap:11px}
  .feat-lnk{margin-top:22px}
}
@media (prefers-reduced-motion: reduce){
  .feat-bild:hover img{transform:none}
  .feat-rahmen{transition:none}
}


/* ---- Werkzeuge: ungleiches Raster ----
   Zwoelf Spalten. Erste Reihe 7 + 5, zweite Reihe drei mal 4. Die grosse
   Kachel traegt die Funktion, die am meisten erklaert werden muss. */
.wz{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:clamp(34px,4vw,52px)}
.wz-k{grid-column:span 4;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:20px 20px 0;overflow:hidden;
  transition:border-color .35s var(--ease),transform .35s var(--ease)}
.wz-k:hover{border-color:rgba(63,168,143,.32);transform:translateY(-2px)}
.wz-gross{grid-column:span 7}
.wz-k:nth-child(2){grid-column:span 5}
/* SECHS KACHELN GEHEN IM 12er-RASTER NICHT AUF (23.08.2026). Mit fuenf war es 7+5 / 4+4+4,
   also zwei volle Reihen. Die sechste stand allein und ein Drittel breit da, was nach
   Versehen aussieht. News nimmt deshalb die ganze Breite: ihr Bild ist ein Zeitstrahl und
   liegt waagerecht ohnehin besser. */
.wz-k:nth-child(6){grid-column:span 12}
.wz-kopf{display:flex;align-items:center;gap:9px}
.wz-kopf h3{margin:0;font-size:18px;letter-spacing:-.01em}
.wz-pro{font:600 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);border:1px solid rgba(63,168,143,.4);border-radius:99px;padding:2px 7px}
.wz-k > p{margin:8px 0 0;color:var(--mut);font-size:14px;line-height:1.5;max-width:44ch}
.wz-bild{margin-top:auto;padding-top:18px}

/* Arena: zwei Spalten nebeneinander, die bessere hervorgehoben */
.wz-arena{display:flex;align-items:center;gap:10px;padding-bottom:20px}
.wza-sp{flex:1;min-width:0;background:var(--bg2,rgba(6,10,14,.55));
  border:1px solid var(--line);border-radius:11px;padding:9px 11px}
.wza-sp.on{border-color:rgba(63,168,143,.4);background:rgba(63,168,143,.06)}
.wza-kopf{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.wza-kopf b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wza-kopf em{font:600 15px var(--mono);font-style:normal;margin-left:auto}
.wza-z{display:flex;gap:8px;padding:3px 0;font-size:10.5px;color:var(--dim)}
.wza-z i{font-style:normal}
.wza-z span{margin-left:auto;font-family:var(--mono);color:var(--mut)}
.wza-vs{font:500 9px var(--mono);color:var(--dim);letter-spacing:.1em;flex-shrink:0}

/* Portfolio: gestapelte Kurve plus Legende */
.wz-depot{padding-bottom:16px}
.wz-depot svg{width:100%;height:74px;display:block}
.wz-leg{display:flex;gap:14px;margin-top:9px;font-size:10px;color:var(--dim)}
.wz-leg span{display:inline-flex;align-items:center;gap:5px}
.wz-leg i{width:7px;height:2px;border-radius:2px;background:var(--acc)}
.wz-leg i.d2{background:#4da3ff;opacity:.7}
.wz-leg i.d3{background:var(--amber);opacity:.7}

/* Wishlist: Kaestchen, eines schon angehakt */
.wz-liste{padding-bottom:18px}
.wzl-z{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:12px;
  border-top:1px solid var(--line)}
.wzl-z:first-child{border-top:0}
.wzl-z i{width:11px;height:11px;border-radius:3px;border:1px solid var(--line2);flex-shrink:0}
.wzl-z i.ab{border-color:var(--acc);background:var(--acc)}
.wzl-p{margin-left:auto;font:500 8.5px var(--mono);letter-spacing:.05em;
  color:var(--blue);border:1px solid rgba(77,163,255,.35);border-radius:99px;padding:2px 6px}

/* Alarme: zwei Meldungen mit Ampelpunkt */
.wz-alarm{padding-bottom:18px}
.wza-z2{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:11.5px;
  border-top:1px solid var(--line);color:var(--mut)}
.wza-z2:first-child{border-top:0}
.wza-z2 b{font:500 10px var(--mono);color:var(--text)}
.wza-z2 u{margin-left:auto;text-decoration:none;font:500 9px var(--mono);color:var(--dim)}
.wza-z2 .pdot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.wza-z2 .pdot.y{background:var(--amber)} .wza-z2 .pdot.r{background:var(--red)}

/* News: Zeitstrahl mit einem roten Termin */
.wz-news{padding-bottom:18px}
.wzn-strahl{position:relative;height:3px;border-radius:3px;background:var(--line);margin-bottom:12px}
.wzn-strahl i{position:absolute;top:-3px;width:3px;height:9px;border-radius:2px;background:var(--line2)}
.wzn-strahl i.rot{background:var(--red);height:13px;top:-5px;width:3px;
  box-shadow:0 0 9px rgba(255,93,108,.7)}
.wzn-z{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--mut)}
.wzn-z b{font:600 11px var(--mono)}
.wzn-z u{margin-left:auto;text-decoration:none;font-size:10px;color:var(--dim)}

@media (max-width:1000px){
  .wz{grid-template-columns:repeat(6,1fr)}
  .wz-gross,.wz-k:nth-child(2){grid-column:span 6}
  .wz-k{grid-column:span 3}
  .wz-k:last-child{grid-column:span 6}
}
@media (max-width:640px){
  .wz{grid-template-columns:1fr;gap:12px}
  .wz-gross,.wz-k,.wz-k:nth-child(2),.wz-k:last-child{grid-column:span 1}
  .wz-arena{flex-direction:column;align-items:stretch;gap:8px}
  .wza-vs{align-self:center}
}


/* ---- Hotspots ---- */
.hs{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;padding:0;border:0;background:none;
  /* KEIN cursor:help. Das ist unter macOS ein Pfeil mit Fragezeichen und sieht
     aus, als sei etwas kaputt. Der Punkt ist ein Knopf, also Handzeiger. */
  cursor:pointer;z-index:20}
/* Punkt 8 -> 12px. Zwischen den vielen kleinen Zahlen der App war er als
   Bedienelement nicht zu erkennen. */
.hs-dot{position:absolute;inset:7px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 3px rgba(63,168,143,.26),0 0 16px rgba(63,168,143,1),
             0 0 0 1px rgba(6,10,14,.85)}
.hs-dot::before{content:'';position:absolute;inset:-3px;border-radius:50%;
  background:rgba(63,168,143,.45);animation:hsPulse 2.6s ease-out infinite}
@keyframes hsPulse{0%{transform:scale(.6);opacity:.9}70%{transform:scale(3);opacity:0}100%{transform:scale(3);opacity:0}}
.hs:hover .hs-dot,.hs:focus-visible .hs-dot{box-shadow:0 0 0 4px rgba(63,168,143,.28),0 0 20px rgba(63,168,143,1)}

.hs-tip{position:absolute;left:50%;top:30px;z-index:6;transform:translate(-50%,6px);width:min(268px,70vw);
  background:#0a1016;border:1px solid rgba(63,168,143,.34);border-radius:11px;padding:11px 13px;
  text-align:left;opacity:0;pointer-events:none;
  box-shadow:0 24px 60px -18px rgba(0,0,0,1);
  /* Bewusst KEIN visibility:hidden. Der Name des Knopfes besteht genau aus diesem
     Text; visibility wuerde ihn auch aus dem Accessibility-Baum nehmen und der
     Knopf waere fuer einen Screenreader namenlos. */
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.hs-tip b{display:block;font-size:12.5px;color:var(--text);margin-bottom:4px}
.hs-tip span{display:block;font-size:12px;line-height:1.55;color:var(--mut)}
.hs:hover .hs-tip,.hs:focus-visible .hs-tip{opacity:1;transform:translate(-50%,0)}
/* Seitliche Sprechblasen sitzen auf HOEHE des Punktes, nicht darunter. Vorher
   fiel die Blase am Score-Ring nach unten und legte sich auf die Empfehlung. */
.hs-l .hs-tip{left:auto;right:16px;top:50%;transform:translate(6px,-50%)}
.hs-l:hover .hs-tip,.hs-l:focus-visible .hs-tip{transform:translate(0,-50%)}
.hs-r .hs-tip{left:16px;top:50%;transform:translate(-6px,-50%)}
.hs-r:hover .hs-tip,.hs-r:focus-visible .hs-tip{transform:translate(0,-50%)}
.hs-up .hs-tip{top:auto;bottom:30px;transform:translate(-50%,-6px)}
.hs-up:hover .hs-tip,.hs-up:focus-visible .hs-tip{transform:translate(-50%,0)}
.hs-up.hs-l .hs-tip{top:auto;bottom:50%;transform:translate(6px,50%)}
.hs-up.hs-l:hover .hs-tip,.hs-up.hs-l:focus-visible .hs-tip{transform:translate(0,50%)}
.hs-up.hs-r .hs-tip{top:auto;bottom:50%;transform:translate(-6px,50%)}
.hs-up.hs-r:hover .hs-tip,.hs-up.hs-r:focus-visible .hs-tip{transform:translate(0,50%)}

/* ---- Drei Punkte unter dem Dashboard ---- */
.mk-usps{display:grid;gap:18px;margin-top:32px}
.mk-usp b{display:block;font-size:15.5px;margin-bottom:5px}
.mk-usp span{display:block;color:var(--mut);font-size:14px}

@media(min-width:700px){
  .mk-grid{grid-template-columns:230px 1fr}
  .mk-kpis{grid-template-columns:repeat(3,1fr)}
  .mk-stats{grid-template-columns:repeat(5,1fr)}
  .mk-3{grid-template-columns:1fr 1fr 1fr}
  .mk-usps{grid-template-columns:repeat(3,1fr);gap:26px}
  .mkmain{padding:16px 20px 22px}
}
@media(max-width:899px){
  /* Ohne Hover sind Hotspots nicht bedienbar, und die Sidebar wuerde den Rest
     erdruecken. Beides wird reduziert statt kaputt angezeigt. */
  .hs{display:none}
  .mkapp{grid-template-columns:1fr}
  .mkside{display:none}
  .mk-tr{grid-template-columns:2fr .8fr 1fr 1fr}
  .mk-tr span:nth-child(3),.mk-tr span:nth-child(5){display:none}
  .mk-brow{grid-template-columns:1fr}
  .mk-acts{display:none}
}

/* ---------- Schritte (offener Ablauf statt Karten) ---------- */
.steps{display:grid;gap:40px;margin-top:48px;list-style:none}
.step{position:relative;padding-left:66px}
.step-num{position:absolute;left:0;top:-4px;font:500 40px/1 var(--mono);color:rgba(63,168,143,.34);letter-spacing:-.04em}
.step h3{font-size:17.5px;margin-bottom:8px}
.step p{color:var(--mut);font-size:14.5px;max-width:440px}
/* Verbindungslinie: mobil vertikal links, Desktop horizontal zwischen den Spalten */
.step:not(:last-child)::before{content:'';position:absolute;left:23px;top:46px;bottom:-34px;width:1px;background:var(--line2)}
.step:not(:last-child)::after{content:'';position:absolute;left:19.5px;bottom:-32px;width:7px;height:7px;
  border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);transform:rotate(45deg)}

/* ---------- Trust (kompakte Zeilenliste statt Karten) ---------- */
.trustlist{list-style:none;margin-top:36px;border-bottom:1px solid var(--line)}
.trust{display:flex;gap:14px;align-items:flex-start;padding:16px 0 17px;border-top:1px solid var(--line)}
.tico{width:30px;height:30px;border-radius:9px;background:var(--acc-dim);display:flex;align-items:center;
  justify-content:center;flex-shrink:0;margin-top:2px}
.tico svg{width:15px;height:15px;stroke:var(--acc);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trust h3{font-size:15px;margin-bottom:3px}
.trust p{color:var(--mut);font-size:13.5px}

/* ---------- Finaler CTA ---------- */
.cta-final{text-align:center}
.cta-final h2{margin:0 auto 26px}
.cta-final h2 em{font-style:normal;color:var(--acc)}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:44px 0 56px;background:var(--bg2)}
.foot-top{display:flex;gap:24px;flex-wrap:wrap;align-items:baseline}
.foot-top .tag{color:var(--dim);font-size:13.5px}
.foot-links{margin-left:auto;display:flex;gap:20px;font-size:13.5px;flex-wrap:wrap}
.foot-links a{color:var(--mut)}
.foot-links a:hover{color:var(--text)}
.disclaimer{color:var(--dim);font-size:12px;max-width:840px;margin-top:28px;line-height:1.6}
/* Der Kern der Risikowarnung bleibt sichtbar, der volle Wortlaut klappt auf.
   Auf dem Handy waren das sonst fünf Zeilen Kleingedrucktes unter jeder Seite. */
/* Der Satz selbst IST der Schalter, deshalb steht daneben kein Wort mehr.
   Vorher trug die Zeile zwei Bauteile fuer eine Aussage: den anklickbaren Satz und
   ein freistehendes "Details" dahinter, das hinter dem Punkt in der Luft hing.
   Dazu ein zweiter Fehler, der erst im aufgeklappten Zustand auffiel: das Wort war
   per visibility:hidden weg, behielt aber seinen Platz -- ein Loch, und danach gab
   es keinen sichtbaren Hinweis mehr, dass man wieder zuklappen kann.
   Das Dreieck kann beides: es zeigt zu, dass hier mehr liegt, und es dreht sich. */
.disclaimer summary{display:flex;align-items:baseline;gap:8px;cursor:pointer;list-style:none}
.disclaimer summary::-webkit-details-marker{display:none}
/* flex-start, NICHT center: auf dem Handy bricht der Satz auf zwei Zeilen, und zentriert
   saesse das Dreieck dann zwischen den Zeilen statt an der ersten. Der Rand von .5em
   schiebt es auf die Mitte der ersten Zeile ((1.6em - 7px) / 2 bei 12px Schrift). */
.disclaimer summary::before{content:"";flex:0 0 auto;align-self:flex-start;margin-top:.5em;width:0;height:0;
  border-left:4px solid currentColor;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
  transition:transform .15s ease}
.disclaimer[open] summary::before{transform:rotate(90deg)}
.disclaimer summary:hover{color:var(--mut)}
.disclaimer .lgs{flex:0 1 auto;min-width:0}
.disclaimer p{margin-top:9px}
.copy{color:var(--dim);font-size:12px;margin-top:14px;font-family:var(--mono)}

/* ---------- Reveals ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.22,.8,.3,1),transform .7s cubic-bezier(.22,.8,.3,1)}
.rv.vis{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

/* ---------- Breakpoints (mobile-first) ---------- */
@media(min-width:600px){
  .wrap{padding:0 24px}
  .cards{grid-template-columns:1fr 1fr}
  .pipe{grid-template-columns:1fr 1fr}
  .ampel{grid-template-columns:1fr 1fr}
}
@media(min-width:900px){
  .hero{padding:110px 0 190px}
  .cards.c3{grid-template-columns:repeat(3,1fr)}
  .pipe{grid-template-columns:repeat(4,1fr)}
  .ampel{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(3,1fr);gap:48px}
  .step{padding-left:0}
  .step-num{position:static;display:block;font-size:56px;line-height:1;margin-bottom:16px}
  .step:not(:last-child)::before{left:86px;right:-40px;top:27px;bottom:auto;width:auto;height:1px}
  .step:not(:last-child)::after{left:auto;right:-41px;bottom:auto;top:23.5px;
    border-bottom:0;border-top:1px solid var(--line2);border-right:1px solid var(--line2)}
  .trustlist{display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
  .faqgrid{grid-template-columns:1fr 1fr;column-gap:56px}
  .shots{grid-template-columns:1fr 1fr}
  .shot-wide{grid-column:1/-1}
}

/* ---------- Haeufige Fragen (09.08.2026) ----------
   Bauart bewusst wie .trustlist eine Sektion weiter oben: Trennlinien statt Kaesten,
   zwei Spalten ab derselben Breite. Acht Kaesten mit Rand und Schatten waeren am Ende
   einer Seite, die schon aus Kacheln besteht, eine Wand.
   Die Frage traegt die Textfarbe, die Antwort die gedaempfte -- die Frage ist der Anker
   beim Ueberfliegen, die Antwort liest man erst, wenn die Frage die eigene ist. */
.faqgrid{margin-top:36px;display:grid;gap:0;border-bottom:1px solid var(--line)}
.faqitem{padding:18px 0 19px;border-top:1px solid var(--line)}
.faqitem h3{font-size:15px;margin-bottom:5px;color:var(--text)}
.faqitem p{color:var(--mut);font-size:13.5px;line-height:1.62;max-width:52ch}

/* ---------- Chaos zu Klarheit (Kreuz-Karten links, Punkte-Orbit, Haken-Karten rechts) ---------- */
.clarity{text-align:center}
.clarity .clh2{margin:0 auto}
.clarity h2 em{font-style:normal;color:var(--acc)}
.clarity .clead{margin-left:auto;margin-right:auto}
.cgrid{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:stretch;text-align:left;margin-top:48px}
.cgrid .ccol{justify-content:center}
.ccol{display:flex;flex-direction:column;gap:12px}
.colhead{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}
.colhead.b{color:var(--red)}
.colhead.g{color:var(--acc)}
.ccard{display:flex;gap:11px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);
  border-radius:13px;padding:13px 16px;font-size:14.5px;line-height:1.5;color:var(--mut)}
.ccard .ic{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px}
.ccard.bad .ic{background:rgba(255,93,108,.12)}
.ccard.good .ic{background:var(--acc-dim)}
.ccard.good{color:var(--text)}
.ccard .ic svg{width:11px;height:11px;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ccard.bad .ic svg{stroke:var(--red)}
.ccard.good .ic svg{stroke:var(--acc)}
/* Punktkurve zwischen den beiden Argumentspalten. Bewusst OHNE Rahmen, ohne
   Kreis und ohne Logo: die Form soll frei im Raum zwischen den Karten stehen und
   dort langsam hin und her wandern. Die Spalte spannt deshalb ueber die volle
   Hoehe der Zeile, damit die Wanderung Platz hat. */
.corb{position:relative;width:clamp(260px,32vw,440px);align-self:stretch;min-height:clamp(300px,30vw,420px);margin:0 auto}
.corb canvas{position:absolute;inset:0;width:100%;height:100%}
/* Die Karten laufen jetzt ueber den normalen .rv-Mechanismus, gestaffelt per
   data-stagger am Container. Die frueheren .crv-Sonderregeln sind entfallen. */
@media(max-width:899px){
  .cgrid{grid-template-columns:1fr;gap:26px}
  .corb{order:-1}
}

/* ---------- Reduced Motion / No-JS ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  /* Hero-Szene sofort im Endzustand: Kurven komplett, Labels, Dot, Ring und Badge sichtbar */
  .eq-curves{clip-path:none}
  .eq-date{opacity:1;transform:translate(-50%,0)}
  .eq-dot{opacity:1}
  .eq-dot::before{display:none}
  .eq-score{opacity:1;transform:none}
  .eq-ring-val{stroke-dasharray:148.8 201.1} /* ohne Animation direkt gefuellt */
  .eq-verdict{opacity:1;transform:none}
  .eq-dip{opacity:1;transform:translate(-50%,0)}
  .pipe-line i{transform:scaleX(1)}
}

/* ================= LABOR: echte, anklickbare Pruefberichte =================
   Aufbau bewusst so: Berichte zuerst, dann der Knopf, ganz zum Schluss eine
   ruhige Zeile zum Bestand. Frueher stand hier eine grosse Durchfallquote als
   Blickfang. Die war richtig gerechnet, aber sie beantwortete die Frage des
   Lesers nicht und legte ihm den Schluss nahe, dass EAs generell sinnlos sind.
   Genau der Schluss kostet Anmeldungen. */
#labor .lab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;margin-top:26px}
#labor .lab-ea{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px;display:block;color:var(--text);transition:border-color .18s var(--ease),transform .18s var(--ease)}
#labor .lab-ea:hover{border-color:var(--acc);transform:translateY(-3px)}
#labor .lab-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#labor .lab-nm{font-weight:700;font-size:17px;letter-spacing:-.01em}
#labor .lab-sc{font:700 21px var(--mono);flex-shrink:0}
#labor .lab-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
#labor .lab-chip{font:500 10.5px var(--mono);letter-spacing:.06em;border:1px solid var(--line2);
  border-radius:99px;padding:3px 9px;color:var(--mut)}
#labor .lab-chip.gr{color:var(--acc);border-color:rgba(63,168,143,.4);background:var(--acc-dim)}
#labor .lab-chip.ye{color:var(--amber);border-color:rgba(255,184,77,.4);background:rgba(255,184,77,.08)}
#labor .lab-chip.rd{color:var(--red);border-color:rgba(255,93,108,.4);background:rgba(255,93,108,.08)}
#labor .lab-chip.bl{color:var(--blue);border-color:rgba(77,163,255,.4);background:rgba(77,163,255,.08)}
#labor .lab-kv{display:flex;gap:18px;margin-top:15px;flex-wrap:wrap}
#labor .lab-kv div{font-size:11.5px;color:var(--dim)}
#labor .lab-kv b{display:block;font:500 14px var(--mono);color:var(--text);margin-top:2px}
#labor .lab-kv b.pos{color:var(--acc)}
#labor .lab-kv b.neg{color:var(--red)}
#labor .lab-go{display:block;margin-top:15px;padding-top:13px;border-top:1px solid var(--line);
  font:500 12px var(--mono);letter-spacing:.06em;color:var(--acc)}
#labor .lab-go::after{content:' →';transition:margin .18s var(--ease)}
#labor .lab-ea:hover .lab-go::after{margin-left:5px}

/* Aussage und Knopf: erst die Behauptung, dann die Handlung. Die Aussage ist
   hier bewusst gross, sie ist der Beleg fuer den Massstab und nicht nur eine
   Fussnote zum Bestand. */
#labor .lab-claim{margin-top:36px}
#labor .lab-stand{font-size:clamp(19px,1.1vw + 13px,26px);font-weight:700;line-height:1.35;
  letter-spacing:-.015em;margin-bottom:20px}
#labor .lab-stand em{font-style:normal;color:var(--acc)}

/* =========================================================================
   Hero-Choreografie: Auftritt und Scroll-Kopplung
   ------------------------------------------------------------------------
   Der Auftritt laeuft in CSS. Die Scroll-Kopplung kommt aus EINER Variable
   --hp (0 = Hero ganz oben, 1 = Hero durchgescrollt), die der bestehende
   rAF-Loop in landing.html setzt. Damit gibt es nur einen Scroll-Listener
   fuer Parallax, Ausblenden und Kopfzeile.
   ========================================================================= */
.hero{--hp:0}

/* Inhalt driftet beim Scrollen leicht nach oben und blendet aus. Die Kurve
   dahinter bleibt laenger stehen, dadurch entsteht Tiefe. */
.hero-inner{
  opacity:calc(1 - var(--hp));
  transform:translate3d(0,calc(var(--hp) * -46px),0);
  will-change:opacity,transform;
}
.eq-scene{transform:translate3d(0,calc(var(--hp) * 34px),0);will-change:transform}

/* Auftritt: Kennzeichen, Ueberschrift Wort fuer Wort, Unterzeile, Knoepfe */
.hero-inner .badge,
.hero-inner .sub,
.hero-inner .cta-row{opacity:0;transform:translateY(16px);animation:heroUp .9s var(--ease) forwards}
.hero-inner .badge{animation-delay:.15s}
.hero-inner .sub{animation-delay:.62s}
.hero-inner .cta-row{animation-delay:.76s}
@keyframes heroUp{to{opacity:1;transform:none}}

/* Wortweiser Aufbau der Ueberschrift. Kein overflow:hidden, weil der
   dein/sein-Wechsel ein absolut positioniertes Wort stapelt, das sonst
   abgeschnitten wuerde. */
.hero h1 .hw{display:inline-block;opacity:0;transform:translateY(.42em);
  animation:heroWord .85s var(--ease) forwards}
@keyframes heroWord{to{opacity:1;transform:none}}

/* Kopfzeile dockt beim Scrollen an: dichter, dunkler, mit feiner Kante */
.hdr{transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.hdr .nav{transition:height .35s var(--ease)}
.hdr.stuck{background:rgba(6,10,14,.92);border-bottom-color:var(--line2);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.9)}
.hdr.stuck .nav{height:52px}

/* Knoepfe: gleiche Kurve, minimal groesser statt nur angehoben */
.btn{transition:transform .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease),color .28s var(--ease)}
.btn-acc:hover{transform:translateY(-1px) scale(1.02)}
.btn-ghost:hover{transform:translateY(-1px) scale(1.02)}
.btn:active{transform:scale(.985)}

/* Scroll-Reveals auf dieselbe Kurve ziehen */
.rv{transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* Der Block ganz oben schaltet bereits per * alle Animationen und Uebergaenge ab.
   Hier stehen nur die Dinge, die KEINE Animation sind und deshalb eigens
   zurueckgesetzt werden muessen: die scroll-gekoppelten calc()-Werte und die
   Startzustaende der Auftritts-Elemente. */
@media (prefers-reduced-motion: reduce){
  .hero-inner{opacity:1;transform:none}
  .eq-scene{transform:none}
  .hero-inner .badge,.hero-inner .sub,.hero-inner .cta-row,.hero h1 .hw{opacity:1;transform:none}
  .eq-shimmer{opacity:0}
}

/* =========================================================================
   Hero-Nachleben: die Szene atmet weiter, ohne sich zu wiederholen
   ------------------------------------------------------------------------
   Alles startet erst NACH dem Auftritt (ca. 7s), damit es nicht mit der
   Dramaturgie konkurriert. Nichts wird zurueckgesetzt, nichts neu gezeichnet:
   der Score bleibt stehen, nur das Licht bewegt sich.
   ========================================================================= */

/* Die beiden Leuchtflecken wandern sehr langsam und mit ungleichen Perioden,
   damit sie nie in denselben Takt fallen und ein Muster erkennbar wird. */
.glow-a{animation:glowDriftA 74s ease-in-out 3.2s infinite}
.glow-b{animation:glowDriftB 97s ease-in-out 3.2s infinite}
@keyframes glowDriftA{
  0%{transform:translate3d(0,0,0) scale(1);opacity:1}
  30%{transform:translate3d(-46px,30px,0) scale(1.1);opacity:.82}
  62%{transform:translate3d(28px,-20px,0) scale(.94);opacity:1}
  100%{transform:translate3d(0,0,0) scale(1);opacity:1}
}
@keyframes glowDriftB{
  0%{transform:translate3d(0,0,0) scale(1);opacity:1}
  40%{transform:translate3d(38px,-26px,0) scale(1.14);opacity:.72}
  75%{transform:translate3d(-22px,16px,0) scale(.97);opacity:1}
  100%{transform:translate3d(0,0,0) scale(1);opacity:1}
}

/* Lichtschimmer entlang der Balance-Kurve.
   pathLength="1" im SVG macht die Pfadlaenge zu 1. Das Strichmuster .06/1.94 hat
   damit die Periode 2, ein Segment von 6% Laenge. stroke-dashoffset von 0 auf -1
   schiebt genau dieses eine Segment einmal vom Anfang bis zum Ende. Danach bleibt
   es unsichtbar stehen, bis der Zyklus neu beginnt: ein Wischer alle 13 Sekunden,
   kein Dauerlauf. */
.eq-shimmer{stroke-dasharray:6 194;stroke-dashoffset:0;opacity:0;
  animation:eqShimmer 13s cubic-bezier(.5,0,.5,1) 4.4s infinite}
@keyframes eqShimmer{
  0%{stroke-dashoffset:0;opacity:0}
  5%{opacity:.5}
  33%{opacity:.5}
  38%{stroke-dashoffset:-100;opacity:0}
  100%{stroke-dashoffset:-100;opacity:0}
}

/* Der Score-Ring bekommt einen kaum merklichen Lichthof, der langsam an- und
   abschwillt. Zweite Animation neben eqPop: die eine bewegt transform, die
   andere nur den Schatten, deshalb stehen sie sich nicht im Weg. */
.eq-score{animation:eqPop .55s ease 2.2s forwards,eqHalo 9s ease-in-out 3.6s infinite}
@keyframes eqHalo{
  0%,100%{box-shadow:0 8px 30px rgba(0,0,0,.45),0 0 24px rgba(63,168,143,.12)}
  50%{box-shadow:0 8px 30px rgba(0,0,0,.45),0 0 40px rgba(63,168,143,.26)}
}