/* ============================================================
   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)}
/* 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 ist am 30.08.2026 entfallen (Vorgabe Alex). Die vier kleinen
   Ueberschriften darueber -- Dein Labor, Das offene Labor, Die Pipeline,
   Werkzeuge -- haben den Abschnitt benannt, den die Ueberschrift darunter
   ohnehin benennt. Die Regel ist mit ihnen gegangen; sie hatte keine weiteren
   Nutzer. */
h2{font-size:clamp(25px,3.4vw,38px);max-width:760px}
/* EIN WORT GRUEN JE UEBERSCHRIFT (30.08.2026, Vorgabe Alex). Als eigene Regel
   und nicht je Sektion: die drei Stellen, die das vorher einzeln geregelt
   haben (.hero h1 em, .cta-final h2 em, .clarity h2 em), setzen exakt dasselbe.
   font-style zurueck auf normal, weil <em> sonst kursiv kaeme -- der Akzent
   liegt in der Farbe, nicht in der Schraeglage. */
h1 em, h2 em, h3 em{font-style:normal;color:var(--acc)}
.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 ----------
   Die Regeln fuer .probgrid, .probleft, .probstat, .problist und .probrow sind
   am 30.08.2026 nach public/landing-buehne.css gewandert und heissen dort
   .bgrid, .bgrund, .bstat, .bzweifel und .bz. Grund: der Abschnitt ist jetzt
   eine angeheftete Buehne, die beim Scrollen ein Stueck nach dem anderen
   zeigt, und sie bringt ihre eigene Datei mit. Umbenannt und nicht
   weiterverwendet, damit die Klassennamen nicht laenger von einem Aufbau
   erzaehlen, den es nicht mehr gibt. Die Beschreibung der Laborzahl
   ("nur der DIREKTE span", "nur die Trefferzahl ist rot") steht dort weiter. */

/* ---------- 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}
/* KEINE feste Hoehe mehr (30.08.2026). Im Bildschirm steht jetzt ein Foto mit festem
   Seitenverhaeltnis; die Hoehe ergibt sich aus Statusleiste plus Bild. Eine gesetzte
   Hoehe daneben wuerde das Foto stauchen oder einen Rest offen lassen, je nachdem,
   welche der beiden Zahlen als erste nicht mehr passt. */
.iph .scr{position:relative;margin:4px;border-radius:37px;overflow:hidden;background:var(--bg);
  display:flex;flex-direction:column}
/* Das Seitenverhaeltnis MUSS zu MASSE in tools/bilder-startseite.js passen (430 x 932,
   ein iPhone 15/16 Pro Max in Punkten). Steht hier eine andere Zahl, wird das Foto
   verzerrt und niemand sieht es, weil es nur ein paar Prozent sind. */
.ph-foto{display:block;width:100%;height:auto;aspect-ratio:430/932;object-fit:cover}
.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)}
@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}

/* ---------- Fensterrahmen um das App-Foto, mit Tooltips ----------
   Hier standen bis zum 30.08.2026 rund 300 Zeilen, die ein HTML-Abbild der
   Anwendung nachbauten: Seitenleiste, Kacheln, Diagramm, Tabelle. Der Gedanke
   dahinter war richtig -- scharf auf jedem Schirm, uebersetzbar, folgt dem Theme.
   Der Haken war der, den man beim Bauen nicht sieht: ein Nachbau veraltet bei
   jeder Aenderung an der Anwendung, ohne dass etwas kaputtgeht, also ohne dass
   es jemandem auffaellt. Zuletzt zeigte er eine Seitenleiste mit einem Punkt,
   den es nicht mehr gibt, und ohne zwei, die es laengst gibt.
   Geblieben ist der Rahmen: Fensterleiste, Punkte, Adresszeile. Der veraltet
   nicht. Der Inhalt darin ist ein Foto aus tools/bilder-startseite.js.
   Die Tooltips laufen weiter 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
   Bildrand 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}

/* Das Foto der Anwendung im Fensterrahmen (30.08.2026).
   position:relative, damit die Hotspots ihre Prozentwerte auf DAS BILD beziehen und
   nicht auf den Rahmen samt Adressleiste -- sonst verschiebt eine andere Leistenhoehe
   alle Punkte auf einmal.
   line-height:0 gegen den Zeilenabstand unter einem inline-Bild: ohne das steht unter
   dem Foto ein heller Streifen der Rahmenfarbe.
   Die unteren Ecken rundet das Bild selbst, weil .mk bewusst kein overflow:hidden hat
   (das wuerde die Sprechblasen am Rand abschneiden). */
.mk-foto{position:relative;line-height:0}
.mk-foto img{display:block;width:100%;height:auto;border-radius:0 0 13px 13px}

/* ---- 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. */
/* Die letzte Kachel geht ueber die volle Breite und schliesst den Block ab.
   Bis zum 30.08.2026 stand hier nth-child(6), weil News die sechste und letzte
   war. Mit den drei nachgetragenen Werkzeugen ist News ans Ende gewandert und
   die Regel haengt jetzt an :last-child -- eine feste Nummer haette den Balken
   mitten in das Raster gelegt. */
.wz-k:last-child{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%)}

@media(max-width:899px){
  /* Ohne Hover sind Hotspots nicht bedienbar. Sie werden ausgeblendet statt
     kaputt angezeigt. */
  .hs{display:none}

  /* DIE FOTOS WERDEN SCHIEBBAR, NICHT WINZIG (30.08.2026).
     Hier stand bis heute ein HTML-Nachbau, der sich auf schmalen Schirmen umbaute:
     Sidebar weg, Raster einspaltig. Ein Foto kann das nicht, es schrumpft nur -- und
     ein Bildschirmfoto der Anwendung auf 430 Punkte geschrumpft ist eine Briefmarke,
     auf der keine Zahl mehr lesbar ist. Das waere ein schlechteres Bild als vorher.
     Deshalb behaelt es hier eine Mindestbreite und der Kasten darum wird waagerecht
     schiebbar. Der angeschnittene rechte Rand ist die Einladung dazu; ein Hinweistext
     waere eine Erklaerung fuer etwas, das man sieht.
     900 px ist die Untergrenze, ab der die Zahlen in der Anwendung noch zu lesen sind,
     nicht eine runde Zahl. Darunter kann man das Bild auch weglassen. */
  .mk-foto{overflow-x:auto;overscroll-behavior-x:contain}
  .mk-foto img{min-width:900px}
  /* min-width:0 ist hier NICHT kosmetisch. Ein Rasterelement ist von Haus aus
     min-width:auto und schrumpft damit nicht unter die Mindestbreite seines Inhalts.
     Ohne diese Zeile zieht das 820 px breite Bild die ganze Spalte auf 820 px, und die
     Seite bekommt einen waagerechten Rollbalken -- gemessen: der Fliesstext daneben
     stand danach zur Haelfte ausserhalb des Schirms. */
  .feat-bild,.feat-rahmen{min-width:0}
  .feat-rahmen{overflow-x:auto}
  .feat-bild img{min-width:820px}
  /* Der Zoom beim Ueberfahren gehoert zu einem Bild, das ganz zu sehen ist. In einem
     schiebbaren Kasten verschiebt er nur den Ausschnitt unter dem Finger. */
  .feat-bild:hover img{transform: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}

/* ---------- Footer ---------- */
/* Fussbereich, neu am 30.08.2026. Begruendung der Gliederung steht im Markup
   in landing.html, hier nur das Aussehen. Kompakter als der erste Entwurf
   (Ansage Alex: "kannst du alles noch etwas kompakter machen"): oben 40 statt
   64, zwischen den Links 3 statt 5, untere Leiste 32 statt 48. An den
   Schriftgroessen wurde nichts geaendert, die stimmen mit dem Rest ueberein. */
footer{border-top:1px solid var(--line);padding:40px 0 0;background:var(--bg2)}
.fgrid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.1fr;
  gap:clamp(24px,3vw,48px);align-items:start}
/* Die Spaltenueberschriften sind bewusst dieselbe Bauart wie .colhead im
   Vergleichsabschnitt: Mono, 11px, gesperrt, gedaempft. */
.fcol h3{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.fcol a{display:block;color:var(--mut);font-size:13.5px;line-height:1.4;padding:3px 0;
  transition:color .2s var(--ease)}
.fcol a:hover{color:var(--text)}
.fbar{margin-top:32px;border-top:1px solid var(--line);padding:16px 0 24px}
.fbar .disclaimer{margin-top:0;max-width:none}
.fbar-u{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:12px}
.flang{margin-left:auto;display:flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.flang a{font:500 11px var(--mono);letter-spacing:.08em;color:var(--dim);padding:5px 11px}
.flang a.on{background:rgba(63,168,143,.13);color:var(--acc)}
.flang a:hover{color:var(--text)}
/* Der Markenblock bekommt auf mittlerer Breite eine eigene Zeile: drei Spalten
   plus Logo nebeneinander werden sonst zu schmal fuer "Widerruf & Erstattung". */
@media (max-width:900px){
  .fgrid{grid-template-columns:1fr 1fr;gap:34px}
  .fbrand{grid-column:1/-1}
}
@media (max-width:520px){
  .fgrid{grid-template-columns:1fr}
}
.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:0;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:0;border-top:1px solid var(--line)}
/* ZUM AUFKLAPPEN SEIT DEM 30.08.2026 (Vorgabe Alex).
   list-style:none plus die Webkit-Regel nehmen das Dreieck des Browsers weg; an
   seiner Stelle steht ein eigenes, damit es auf beiden Seiten gleich aussieht
   und sich mitdreht. cursor:pointer, weil die ganze Zeile schaltet, nicht nur
   das Zeichen. */
.faqitem summary{display:flex;align-items:baseline;gap:11px;cursor:pointer;
  list-style:none;padding:16px 0}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem summary::before{content:"";flex:0 0 auto;align-self:flex-start;margin-top:.45em;
  width:0;height:0;border-left:5px solid var(--dim);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .2s var(--ease)}
.faqitem[open] summary::before{transform:rotate(90deg)}
.faqitem summary:hover::before{border-left-color:var(--acc)}
.faqitem h3{font-size:15px;color:var(--text)}
.faqitem summary:hover h3{color:var(--acc)}
.faqitem summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.faqitem p{color:var(--mut);font-size:13.5px;line-height:1.62;max-width:52ch;
  padding:0 0 17px 16px}

/* ---------- Chaos zu Klarheit (Kreuz-Karten links, Punkte-Orbit, Haken-Karten rechts) ---------- */
.clarity{text-align:center}
/* Die Ueberschrift war am 30.08.2026 kurz die Schlusszeile der angehefteten
   Buehne und ist noch am selben Tag hierher zurueckgekommen. Begruendung steht
   im Markup daneben: ein angehefteter Satz erscheint und wandert nacheinander,
   ein Satz im Fluss tut beides zugleich.
   Groesse und Gewicht sind die aus der Buehnen-Fassung uebernommen (Alex hatte
   den Auftritt dort abgenommen), nicht die alten kleineren Werte. */
.clarity .clh2{margin:0 auto;max-width:24ch;font-weight:800;
  font-size:clamp(28px,3.9vw,54px);letter-spacing:-.028em;line-height:1.14}
.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)}
}