/* =====================================================================
   Klarkurs — Startseite. Eigenes Stylesheet, bewusst getrennt von
   style.css: dort haengen 107 generierte Unterseiten dran, die von
   diesem Umbau nichts merken duerfen.

   Haltung: "Papier & Tinte". Warmes Papier als Grund, Tinte als Text,
   EIN Markenton (Teal) fuer Bedienelemente, und Gruen/Rot ausschliesslich
   dort, wo eine Zahl eine Richtung hat. Das ist dieselbe Sprache wie die
   App (Fraunces / Hanken Grotesk / JetBrains Mono, Teal-Akzent) — die
   echten Produktaufnahmen auf dieser Seite sollen nicht wie Fremdkoerper
   wirken, sondern wie der naechste Schritt.
   ===================================================================== */

/* ---------- 1 Schriften (lokal, metrisch angeglichene Ersatzschrift) ---------- */
@font-face{font-family:'Fraunces';src:url('fonts/fraunces.woff2') format('woff2-variations');font-weight:500 700;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/hanken-grotesk.woff2') format('woff2-variations');font-weight:400 700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono.woff2') format('woff2-variations');font-weight:500 700;font-display:swap}
@font-face{font-family:'Fraunces Fallback';src:local('Georgia'),local('Times New Roman'),local('serif');size-adjust:102%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Hanken Fallback';src:local('Segoe UI'),local('Helvetica Neue'),local('Arial'),local('sans-serif');size-adjust:100%;ascent-override:95%;descent-override:25%;line-gap-override:0%}
@font-face{font-family:'Mono Fallback';src:local('DejaVu Sans Mono'),local('Consolas'),local('monospace');size-adjust:98%;ascent-override:100%;descent-override:26%;line-gap-override:0%}

/* ---------- 2 Marken ----------
   Alle Farben stehen genau einmal hier. Im Markup gibt es keinen einzigen
   festen Farbwert — sonst laesst sich die dunkle Fassung nicht sauber
   umschalten und jede spaetere Korrektur wird zur Suche. */
:root{
  --papier:#faf9f7;          /* Seitengrund, warm statt reinweiss */
  --flaeche:#ffffff;         /* Karten, Tafeln */
  --flaeche-2:#f3f1ed;       /* eingesenkte Baender */
  --tinte:#15191d;
  --tinte-dim:#4c5761;
  --tinte-mute:#636d77;   /* 4,67:1 auf dem dunkelsten Grund (WCAG AA) */
  --linie:rgba(21,25,29,.11);
  --linie-stark:rgba(21,25,29,.20);
  --marke:#0d7565;           /* Teal wie in der App, auf 4,88:1 gegen --marke-flach nachgezogen */
  --marke-tief:#0a5f52;
  --marke-flach:#e6f2ef;
  --auf:#0d7565;             /* Datenrichtung: aufwaerts / Kauf */
  --ab:#b3261e;              /* Datenrichtung: abwaerts / Verkauf */
  --neutral:#8a6d1f;         /* Datenrichtung: weder noch */
  --auf-flach:#e6f2ef;
  --ab-flach:#fbeceb;
  --neutral-flach:#f7f0dd;
  --schatten:none;
  --schatten-hoch:none;
  --ring:0 0 0 3px rgba(14,124,107,.28);

  /* Schriftskala — bewusst genau acht Stufen. Der Vorgaenger hatte 45. */
  --t-riese:clamp(2.15rem,4.6vw,3.4rem);
  --t-gross:clamp(1.5rem,2.7vw,2.05rem);
  --t-mittel:clamp(1.08rem,1.6vw,1.28rem);
  --t-lead:clamp(.95rem,1.05vw,1.05rem);
  --t-body:.9375rem;
  --t-klein:.8125rem;
  --t-mikro:.6875rem;
  --t-zahl:clamp(1.35rem,2vw,1.75rem);

  /* Abstaende, 4er-Raster */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;

  --r-klein:2px; --r:3px; --r-gross:3px;
  --breite:76rem;

  --dauer-kurz:160ms; --dauer:260ms; --dauer-lang:420ms;
  --feder:cubic-bezier(.22,1,.36,1);

  --serif:'Fraunces','Fraunces Fallback',Georgia,serif;
  --sans:'Hanken Grotesk','Hanken Fallback',system-ui,sans-serif;
  --mono:'JetBrains Mono','Mono Fallback',ui-monospace,monospace;
}

/* Dunkle Fassung. Der Grund ist derselbe Ton wie die 107 Unterseiten
   (#0b0f15) — damit steht die Startseite zum ersten Mal in derselben Welt
   wie der Rest der Domain. */
[data-fassung="dunkel"]{
  --papier:#0b0f15;
  --flaeche:#141a22;
  --flaeche-2:#0f151c;
  --tinte:#e8eef4;
  --tinte-dim:#a7b4c0;
  --tinte-mute:#7d8b98;
  --linie:rgba(232,238,244,.12);
  --linie-stark:rgba(232,238,244,.22);
  --marke:#3fbfa7;
  --marke-tief:#63d3bd;
  --marke-flach:rgba(63,191,167,.13);
  --auf:#3fbfa7;
  --ab:#f0736a;
  --neutral:#d8b354;
  --auf-flach:rgba(63,191,167,.13);
  --ab-flach:rgba(240,115,106,.13);
  --neutral-flach:rgba(216,179,84,.13);
  --schatten:none;
  --schatten-hoch:none;
  --ring:0 0 0 3px rgba(63,191,167,.35);
}

/* ---------- 3 Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--marke);outline-offset:3px;border-radius:4px}

/* Jede Zahl auf dieser Seite laeuft in Tabellenziffern. Das ist der
   Unterschied zwischen "Zahlen auf einer Marketingseite" und einem
   Finanzprodukt: Ziffern stehen untereinander auf gleicher Breite. */
.zahl,.tafel td,.tafel th,.statwert,.mono{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"zero" 1;letter-spacing:-.01em;
}

.wrap{width:min(100% - 2.5rem,var(--breite));margin-inline:auto}
@media (max-width:640px){
  .wrap{width:min(100% - 1.75rem,var(--breite))}
  :root{--t-riese:clamp(2.1rem,8.6vw,2.9rem);--t-gross:clamp(1.6rem,6.4vw,2.1rem)}
}

.band{padding-block:var(--s8)}
.band-eng{padding-block:var(--s7)}
.band-gesenkt{background:var(--flaeche-2);border-block:1px solid var(--linie);padding-block:var(--s7)}
@media (max-width:640px){.band{padding-block:var(--s8)}.band-eng{padding-block:var(--s7)}}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--marke);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--r-klein) 0}
.skip:focus{left:0}

/* ---------- 4 Typografie ---------- */
.h1{font-family:var(--serif);font-size:var(--t-riese);font-weight:600;line-height:1.02;letter-spacing:-.028em;text-wrap:balance}
.h2{font-family:var(--serif);font-size:var(--t-gross);font-weight:600;line-height:1.1;letter-spacing:-.022em;text-wrap:balance}
.h3{font-family:var(--serif);font-size:var(--t-mittel);font-weight:600;line-height:1.2;letter-spacing:-.015em}
.h4{font-size:var(--t-body);font-weight:600;letter-spacing:-.005em}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--tinte-dim);text-wrap:pretty}
.dim{color:var(--tinte-dim)}
.mute{color:var(--tinte-mute)}
.klein{font-size:var(--t-klein);line-height:1.5}
.mikro{font-size:var(--t-mikro);line-height:1.45;letter-spacing:.02em}
.masse{max-width:38rem}
.masse-weit{max-width:46rem}

/* Der Augenbrauen-Text ueber jeder Ueberschrift. Traegt die Einordnung,
   damit die Ueberschrift selbst kurz bleiben darf. */
.auge{
  font-family:var(--mono);font-size:var(--t-mikro);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--marke);
  display:flex;align-items:center;gap:.6rem;margin-bottom:var(--s3);
}
.auge::before{content:"";width:1.5rem;height:1px;background:currentColor;flex:none}

.kopf{margin-bottom:var(--s6)}
.kopf .lead{margin-top:var(--s3)}

/* ---------- 5 Kopfleiste ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--papier) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dauer) var(--feder),background var(--dauer) var(--feder);
}
.topbar[data-gescrollt]{border-bottom-color:var(--linie);background:color-mix(in srgb,var(--papier) 94%,transparent)}
.topbar .wrap{display:flex;align-items:center;gap:var(--s4);min-height:64px}
.marke-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--serif);font-weight:600;font-size:1.15rem;letter-spacing:-.02em;padding-block:.4rem}
.marke-logo svg{width:26px;height:26px;color:var(--marke)}
.topnav{display:flex;gap:var(--s5);margin-left:auto;align-items:center}
.topnav a{text-decoration:none;font-size:var(--t-klein);color:var(--tinte-dim);position:relative;padding-block:.6rem}
.topnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--marke);transition:right var(--dauer) var(--feder)}
.topnav a:hover{color:var(--tinte)}
.topnav a:hover::after{right:0}
@media (max-width:900px){.topnav{display:none}}

.fassung-schalter{
  margin-left:auto;display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--linie);border-radius:999px;background:transparent;
  cursor:pointer;color:var(--tinte-dim);transition:color var(--dauer-kurz),border-color var(--dauer-kurz),transform var(--dauer-kurz) var(--feder);
}
.topnav ~ .fassung-schalter{margin-left:var(--s3)}
.fassung-schalter:hover{color:var(--tinte);border-color:var(--linie-stark)}
.fassung-schalter:active{transform:scale(.94)}
.fassung-schalter svg{width:17px;height:17px}
[data-fassung="hell"] .ikon-mond{display:block}
[data-fassung="hell"] .ikon-sonne{display:none}
[data-fassung="dunkel"] .ikon-mond{display:none}
[data-fassung="dunkel"] .ikon-sonne{display:block}

/* ---------- 6 Knoepfe & Felder ---------- */
.btn{
  --btn-bg:var(--marke);--btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:0 1.5rem;border:1px solid transparent;border-radius:var(--r-klein);
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:600;font-size:var(--t-body);letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--dauer-kurz),border-color var(--dauer-kurz);
}
.btn:hover{background:var(--marke-tief)}
.btn:active{background:var(--marke-tief)}
[data-fassung="dunkel"] .btn{--btn-fg:#06231e}
.btn-still{--btn-bg:transparent;--btn-fg:var(--tinte);border-color:var(--linie-stark);box-shadow:none}
.btn-still:hover{background:var(--flaeche-2);border-color:var(--tinte-mute)}
.btn-klein{min-height:44px;font-size:var(--t-klein);padding:0 1.1rem}

.feld{
  display:flex;gap:.6rem;width:100%;max-width:32rem;
}
.feld input[type=email]{
  flex:1;min-width:0;min-height:52px;padding:0 1rem;
  border:1px solid var(--linie-stark);border-radius:var(--r-klein);
  background:var(--flaeche);color:var(--tinte);font:inherit;
  transition:border-color var(--dauer-kurz),box-shadow var(--dauer-kurz);
}
.feld input[type=email]::placeholder{color:var(--tinte-mute)}
.feld input[type=email]:focus{outline:none;border-color:var(--marke);box-shadow:var(--ring)}
.feld input[type=email][aria-invalid="true"]{border-color:var(--ab);box-shadow:0 0 0 3px var(--ab-flach)}
@media (max-width:520px){.feld{flex-direction:column}.feld .btn{width:100%}}
.hp-feld{position:absolute!important;left:-9999px;opacity:0;height:0;width:0}

.meldung{min-height:1.4rem;font-size:var(--t-klein);margin-top:var(--s2)}
.meldung[data-art="fehler"]{color:var(--ab)}
.meldung[data-art="gut"]{color:var(--marke)}

.zusage{font-size:var(--t-klein);color:var(--tinte-mute);margin-top:var(--s2)}
.einwilligung{font-size:var(--t-mikro);color:var(--tinte-mute);max-width:34rem;margin-top:var(--s4);line-height:1.55}
.einwilligung a{color:var(--tinte-dim)}

/* ---------- 7 Hero ---------- */
.hero{padding-top:var(--s8);padding-bottom:var(--s7);position:relative;overflow:hidden}
/* Ein einziger, sehr flacher Lichtschein hinter der Tafel. Kein Verlauf
   ueber die ganze Flaeche, kein Farbnebel — nur so viel, dass die Tafel
   optisch vom Papier abhebt. */
.hero::before{
  content:"";position:absolute;inset:-20% -10% auto auto;width:min(60rem,90vw);height:44rem;
  background:radial-gradient(closest-side,var(--marke-flach),transparent 72%);
  opacity:.9;pointer-events:none;z-index:0;
}
.hero .wrap{position:relative;z-index:1}
.hero-raster{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  grid-template-rows:auto 1fr;gap:0 var(--s8);align-items:start;
}
.hero-raster > *{min-width:0}
.hero-text{grid-column:1;grid-row:1}
/* Die Tafel laeuft ueber beide Zeilen der linken Spalte — dadurch steht sie
   oben buendig mit der Ueberschrift und reicht bis unter das Formular. */
.hero-tafel{grid-column:2;grid-row:1 / span 2}
.hero-fuss{grid-column:1;grid-row:2;padding-top:var(--s5)}
@media (max-width:980px){
  .hero-raster{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:var(--s6)}
  /* Auf dem Handy zaehlt die Reihenfolge: Ueberschrift, Formular, dann die
     Tafel — der Beweis darf nicht hinter dem Einwilligungstext liegen. */
  .hero-text,.hero-tafel,.hero-fuss{grid-column:1;grid-row:auto}
  .hero-fuss{padding-top:0}
}

.hero h1{margin-bottom:var(--s4)}
.hero .lead{max-width:34rem;margin-bottom:var(--s5)}
.hero-form{margin-bottom:var(--s2)}

.vertrauensreihe{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:var(--s3);font-size:var(--t-klein);color:var(--tinte-dim)}
.vertrauensreihe li{display:flex;align-items:center;gap:.4rem}
.vertrauensreihe svg{width:15px;height:15px;color:var(--marke);flex:none}

/* ---------- 8 Die Tafel — echte SEC-Meldungen ---------- */
.tafel-rahmen{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);
  box-shadow:var(--schatten-hoch);overflow:hidden;
}
.tafel-kopf{
  display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;
  border-bottom:1px solid var(--linie);background:var(--flaeche-2);
}
.puls{width:7px;height:7px;border-radius:999px;background:var(--marke);flex:none;position:relative}
.puls::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:1px solid var(--marke);opacity:.5;animation:pulsen 2.6s var(--feder) infinite}
@keyframes pulsen{0%{transform:scale(.7);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.tafel-titel{font-size:var(--t-klein);font-weight:600}
.tafel-stand{margin-left:auto;font-family:var(--mono);font-size:var(--t-mikro);color:var(--tinte-mute)}

.tafel-was{
  padding:.6rem 1rem;border-bottom:1px solid var(--linie);
  font-size:var(--t-mikro);line-height:1.5;color:var(--tinte-mute);background:var(--flaeche);
}
.tafel-was b{color:var(--tinte-dim);font-weight:600}

.reiter{display:flex;gap:0;border-bottom:1px solid var(--linie);overflow-x:auto;scrollbar-width:none}
.reiter::-webkit-scrollbar{display:none}
.reiter button{
  flex:1 1 auto;min-height:46px;padding:0 .75rem;background:none;border:0;cursor:pointer;
  font-size:var(--t-klein);font-weight:500;color:var(--tinte-mute);white-space:nowrap;
  position:relative;transition:color var(--dauer-kurz);
}
.reiter button:hover{color:var(--tinte-dim)}
.reiter button[aria-selected="true"]{color:var(--tinte);font-weight:600}
.reiter button::after{
  content:"";position:absolute;left:.75rem;right:.75rem;bottom:-1px;height:2px;
  background:var(--marke);transform:scaleX(0);transform-origin:center;
  transition:transform var(--dauer) var(--feder);
}
.reiter button[aria-selected="true"]::after{transform:scaleX(1)}

.tafel-koerper{min-height:20.5rem;overflow-x:auto}
.tafel{width:100%;border-collapse:collapse;font-size:var(--t-klein)}
.tafel th{
  text-align:left;font-family:var(--mono);font-size:var(--t-mikro);font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--tinte-mute);
  padding:.6rem .85rem;border-bottom:1px solid var(--linie);white-space:nowrap;
}
.tafel td{padding:.6rem .85rem;border-bottom:1px solid var(--linie);vertical-align:middle}

/* Vorgangsart als Marke. Ohne sie liest sich die Tafel wie eine beliebige
   Kursliste — erst „Verkauf · 1.209.649 Aktien zu 286,41 $" macht sichtbar,
   dass hier ein Mensch aus dem Unternehmen mit eigenen Aktien gehandelt hat. */
.t-kopf{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;line-height:1.25}
.t-art{
  font-family:var(--mono);font-size:.625rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:.12rem .42rem;border-radius:2px;
  white-space:nowrap;flex:none;
}
.t-art[data-richtung="ab"]{color:var(--ab);background:var(--ab-flach)}
.t-art[data-richtung="auf"]{color:var(--auf);background:var(--auf-flach)}
.t-art[data-richtung="neutral"]{color:var(--neutral);background:var(--neutral-flach)}
.t-stueck{
  display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:var(--t-mikro);color:var(--tinte-mute);line-height:1.4;
}
/* Der Firmenname darf nicht dreizeilig umbrechen — sonst wächst die Tafel aus
   dem ersten Bildschirm heraus. */
.tafel td:first-child{min-width:10.5rem}
.tafel td .t-summe{display:block;line-height:1.25}

.tafel tr:last-child td{border-bottom:0}
.tafel tbody tr{transition:background var(--dauer-kurz)}
.tafel tbody tr:hover{background:var(--flaeche-2)}
.tafel .rechts{text-align:right}
.t-firma{font-family:var(--sans);font-weight:600;line-height:1.25}
.t-person{font-family:var(--sans);color:var(--tinte-mute);font-size:var(--t-mikro);display:block;line-height:1.3}
.t-summe{font-weight:600;white-space:nowrap}
.t-summe[data-richtung="ab"]{color:var(--ab)}
.t-summe[data-richtung="auf"]{color:var(--auf)}
.t-datum{color:var(--tinte-mute);white-space:nowrap}
.t-quelle{
  color:var(--tinte-mute);text-decoration:none;border-bottom:1px solid var(--linie-stark);
  font-family:var(--mono);font-size:var(--t-mikro);white-space:nowrap;
  /* Trefferflaeche auf Zeilenhoehe ziehen, ohne die Zeile zu verschieben. */
  display:inline-block;padding:.55rem .3rem;margin:-.55rem -.3rem;
}
.t-quelle:hover{color:var(--marke);border-color:currentColor}

.tafel-fuss{
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;
  padding:.8rem 1rem;border-top:1px solid var(--linie);background:var(--flaeche-2);
  font-size:var(--t-mikro);color:var(--tinte-mute);
}
.tafel-fuss a{color:var(--tinte-dim);display:inline-block;padding-block:.3rem}
.tafel-erklaerung{
  padding:.9rem 1rem;border-top:1px solid var(--linie);
  background:var(--marke-flach);font-size:var(--t-klein);color:var(--tinte-dim);line-height:1.5;
}
.tafel-erklaerung strong{color:var(--tinte);font-weight:600}

@media (max-width:640px){
  /* Stueckzahl und Stueckpreis weichen zuerst — die Vorgangsart bleibt,
     weil sie die eigentliche Aussage traegt. */
  .t-stueck{display:none}
}
@media (max-width:520px){
  .tafel th,.tafel td{padding-inline:.6rem}
  /* Der Beleg-Link braucht keine eigene Mindestbreite mehr, sobald die
     Stueckzahl weg ist — sonst schiebt er die Tabelle sieben Pixel raus. */
  .tafel td:first-child{min-width:0}
  .reiter button{font-size:var(--t-mikro);padding:0 .5rem}
}

/* ---------- 9 Zahlenband ---------- */
.statband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
.stat{background:var(--flaeche);padding:var(--s5) var(--s4)}
.statwert{font-size:var(--t-zahl);font-weight:600;line-height:1.05;letter-spacing:-.03em;display:block}
.statwert[data-ton="ab"]{color:var(--ab)}
.statwert[data-ton="auf"]{color:var(--auf)}
.statlabel{font-size:var(--t-klein);color:var(--tinte-dim);margin-top:var(--s2);display:block;line-height:1.4}
@media (max-width:820px){.statband{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 10 Der Groessenvergleich (Kauf gegen Verkauf) ---------- */
.gegen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s8);align-items:center}
.gegen > *{min-width:0}
@media (max-width:900px){.gegen{grid-template-columns:minmax(0,1fr);gap:var(--s6)}}
.balkenpaar{display:flex;flex-direction:column;gap:var(--s5)}
.balken-zeile{display:grid;gap:.5rem}
.balken-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.balken-name{font-weight:600;font-size:var(--t-klein)}
.balken-wert{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:var(--t-klein)}
.balken-spur{height:14px;background:var(--flaeche-2);border:1px solid var(--linie);border-radius:999px;overflow:hidden}
.balken-fuell{height:100%;border-radius:999px;transform-origin:left center;transform:scaleX(0);transition:transform 1.1s var(--feder)}
.sichtbar .balken-fuell{transform:scaleX(1)}
.balken-fuell[data-ton="ab"]{background:var(--ab)}
.balken-fuell[data-ton="auf"]{background:var(--auf)}
.balken-fuss{font-size:var(--t-mikro);color:var(--tinte-mute)}

/* ---------- 11 Karten ---------- */
.karte{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);
  padding:var(--s5);box-shadow:var(--schatten);
  transition:transform var(--dauer) var(--feder),box-shadow var(--dauer) var(--feder),border-color var(--dauer);
}
.karte-hebt:hover{transform:translateY(-3px);box-shadow:var(--schatten-hoch);border-color:var(--linie-stark)}
.karte .h3{margin-bottom:var(--s2)}
.raster-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.raster-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
@media (max-width:900px){.raster-3,.raster-2{grid-template-columns:minmax(0,1fr)}}

.nummer{
  font-family:var(--mono);font-size:var(--t-klein);font-weight:600;color:var(--marke);
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:999px;
  background:var(--marke-flach);margin-bottom:var(--s3);
}

/* ---------- 12 Kennzahl-Uebersetzer ---------- */
.uebersetzer{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:var(--s6);align-items:start}
.uebersetzer > *{min-width:0}
@media (max-width:900px){.uebersetzer{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}
.kennzahlliste{display:flex;flex-direction:column;gap:.5rem}
@media (max-width:900px){
  .kennzahlliste{
    flex-direction:row;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:none;
    /* Auslaufender rechter Rand: zeigt, dass die Reihe weitergeht. Ohne das
       sieht ein abgeschnittener Knopf nach Layoutfehler aus, nicht nach
       "hier kannst du wischen". */
    -webkit-mask-image:linear-gradient(to right,#000 84%,transparent 100%);
    mask-image:linear-gradient(to right,#000 84%,transparent 100%);
    scroll-snap-type:x proximity;
  }
  .kennzahlliste::-webkit-scrollbar{display:none}
  .kennzahl-knopf{scroll-snap-align:start}
}
.kennzahl-knopf{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:56px;padding:.75rem 1rem;width:100%;text-align:left;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-klein);
  cursor:pointer;transition:border-color var(--dauer-kurz),background var(--dauer-kurz),transform var(--dauer-kurz) var(--feder);
}
@media (max-width:900px){.kennzahl-knopf{flex:0 0 auto;width:auto;min-width:11rem}}
.kennzahl-knopf:hover{border-color:var(--linie-stark);transform:translateX(2px)}
@media (max-width:900px){.kennzahl-knopf:hover{transform:none}}
.kennzahl-knopf[aria-selected="true"]{border-color:var(--marke);background:var(--marke-flach)}
.kennzahl-name{font-weight:600;font-size:var(--t-klein)}
.kennzahl-wert{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--t-klein);font-weight:600;color:var(--tinte-dim)}
.kennzahl-knopf[aria-selected="true"] .kennzahl-wert{color:var(--marke)}

.erklaerkarte{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);
  padding:var(--s6);box-shadow:var(--schatten);min-height:19rem;
}
.erklaer-vorher{
  font-family:var(--mono);font-size:var(--t-klein);color:var(--tinte-mute);
  padding:.6rem .8rem;background:var(--flaeche-2);border-radius:var(--r-klein);
  border:1px solid var(--linie);display:inline-block;margin-bottom:var(--s4);
}
.erklaer-text{font-size:var(--t-lead);line-height:1.6;color:var(--tinte-dim)}
.erklaer-text strong{color:var(--tinte);font-weight:600}
.erklaer-fazit{
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--linie);
  display:flex;gap:.75rem;align-items:flex-start;font-size:var(--t-klein);
}
.erklaer-fazit svg{width:18px;height:18px;color:var(--marke);flex:none;margin-top:.15rem}
.wechsel{animation:einblenden var(--dauer-lang) var(--feder)}
@keyframes einblenden{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 13 Produktaufnahmen ---------- */
.aufnahme{
  border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--schatten-hoch);background:var(--flaeche);
}
.aufnahme img{width:100%;height:auto}
.aufnahme-leiste{
  display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;
  border-bottom:1px solid var(--linie);background:var(--flaeche-2);
}
.aufnahme-punkt{width:9px;height:9px;border-radius:999px;background:var(--linie-stark)}
.aufnahme-adresse{
  margin-left:.6rem;font-family:var(--mono);font-size:var(--t-mikro);color:var(--tinte-mute);
  background:var(--flaeche);border:1px solid var(--linie);border-radius:2px;padding:.15rem .7rem;
}
.bildtext{font-size:var(--t-mikro);color:var(--tinte-mute);margin-top:var(--s3);text-align:center}

.panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);align-items:start}
.panels-hinweis{display:none}
@media (max-width:900px){
  .panels{
    display:flex;gap:var(--s3);max-width:none;margin-inline:0;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    /* Aus dem Textmass herauslaufen lassen, damit das naechste Bild
       angeschnitten sichtbar ist — das ist der Hinweis zum Wischen. */
    margin-inline:calc(var(--s4) * -1);padding-inline:var(--s4);
    scroll-padding-inline:var(--s4);
  }
  .panels::-webkit-scrollbar{display:none}
  .panels > figure{flex:0 0 78%;scroll-snap-align:start;max-width:20rem}
  .panels-hinweis{
    display:block;font-family:var(--mono);font-size:var(--t-mikro);
    letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-mute);
    margin-top:var(--s5);
  }
  .panels-hinweis::after{content:" \2192"}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .panels{scroll-snap-type:none}
}
.panel-bild{border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;background:var(--flaeche);box-shadow:var(--schatten);aspect-ratio:3/4}
.panel-bild img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* ---------- 14 Preise ---------- */
.preisraster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);max-width:52rem;margin-inline:auto}
@media (max-width:820px){.preisraster{grid-template-columns:minmax(0,1fr)}}
.preiskarte{position:relative;display:flex;flex-direction:column;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:var(--s6);box-shadow:var(--schatten)}
.preiskarte[data-empfohlen]{border-color:var(--marke);box-shadow:var(--schatten-hoch)}
.preisband{
  position:absolute;top:0;right:var(--s5);transform:translateY(-50%);
  background:var(--marke);color:#fff;font-size:var(--t-mikro);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;
}
[data-fassung="dunkel"] .preisband{color:#06231e}
.preis{display:flex;align-items:baseline;gap:.4rem;margin-block:var(--s3) var(--s2)}
.preis-zahl{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:2.4rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.preis-waehrung{font-family:var(--sans);font-size:1.7rem;font-weight:600;letter-spacing:-.02em;margin-left:-.15rem}
.preis-takt{color:var(--tinte-mute);font-size:var(--t-klein)}
.preisliste{display:flex;flex-direction:column;gap:.65rem;margin-block:var(--s5);font-size:var(--t-klein)}
.preisliste li{display:flex;gap:.6rem;align-items:flex-start;color:var(--tinte-dim)}
.preisliste svg{width:16px;height:16px;flex:none;margin-top:.2rem;color:var(--marke)}
.preisliste li[data-aus]{color:var(--tinte-mute)}
.preisliste li[data-aus] svg{color:var(--tinte-mute);opacity:.6}
.preiskarte .btn{margin-top:auto}

/* ---------- 15 FAQ ---------- */
.faq{max-width:46rem;margin-inline:auto;border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem .25rem;cursor:pointer;list-style:none;font-weight:600;
  min-height:56px;transition:color var(--dauer-kurz);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--marke)}
.faq summary::after{
  content:"";width:11px;height:11px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--dauer) var(--feder);color:var(--tinte-mute);
}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq-inhalt{padding:0 .25rem 1.3rem;color:var(--tinte-dim);font-size:var(--t-klein);line-height:1.65;max-width:40rem}
.faq details[open] .faq-inhalt{animation:einblenden var(--dauer) var(--feder)}

/* ---------- 16 Schluss & Fuss ---------- */
.schluss{text-align:center}
.schluss .feld{margin-inline:auto}
.schluss .einwilligung{margin-inline:auto;text-align:left}
.vorteile{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.2rem;margin-top:var(--s5);font-size:var(--t-klein);color:var(--tinte-dim)}
.vorteile li{display:flex;align-items:center;gap:.4rem}
.vorteile svg{width:15px;height:15px;color:var(--marke)}

.fuss{border-top:1px solid var(--linie);background:var(--flaeche-2);padding-block:var(--s6)}
.hinweis{font-size:var(--t-mikro);color:var(--tinte-mute);line-height:1.6;max-width:52rem;margin-bottom:var(--s5)}
.fusszeile{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;font-size:var(--t-klein);color:var(--tinte-mute)}
.fusslinks{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin-left:auto}
.fusslinks a{display:inline-block;padding-block:.4rem}
@media (max-width:640px){
  /* Auf dem Telefon zielt ein Daumen, kein Mauszeiger. */
  .fusslinks{gap:.1rem 1.25rem}
  .fusslinks a{padding-block:.8rem}
  .fusszeile a{display:inline-block;padding-block:.65rem}
}
.fusslinks a,.fusszeile a{color:var(--tinte-dim);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--dauer-kurz),color var(--dauer-kurz)}
.fusslinks a:hover,.fusszeile a:hover{color:var(--tinte);border-bottom-color:var(--linie-stark)}
@media (max-width:640px){.fusslinks{margin-left:0}}

/* Klebender Aufruf am unteren Rand — erst wenn beide Formulare aus dem Bild sind. */
.klebe-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--papier) 92%,transparent);
  backdrop-filter:blur(14px);border-top:1px solid var(--linie);
  display:flex;justify-content:center;
  transform:translateY(110%);transition:transform var(--dauer-lang) var(--feder);
}
.klebe-cta[data-an]{transform:none}
.klebe-cta .btn{width:min(100%,26rem)}
@media (min-width:981px){.klebe-cta{display:none}}

/* ---------- 18 Werkzeug-Uebersicht ----------
   29 Eintraege wuerden als 29 Karten eine Wand ergeben. Stattdessen die Form
   eines Datenblatts: links der Bereich, rechts seine Werkzeuge, dazwischen
   nur Haarlinien. Gekennzeichnet wird ausschliesslich, was Premium ist —
   dadurch traegt die Abwesenheit eines Zeichens die Aussage "kostenlos", und
   die Liste bleibt ruhig. */
.wz-legende{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;
  font-size:var(--t-klein);color:var(--tinte-dim);margin-bottom:var(--s5);
}
.wz-zahl{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--tinte)}

.wz-tafel{border-bottom:1px solid var(--linie)}
/* Jede Gruppe ist ein <details open>. Das "open" steht im HTML, nicht im
   Skript — ohne JavaScript ist die Liste vollstaendig aufgeklappt und haengt
   an keiner Bedienung. Auf schmalen Schirmen klappt seite.js alles ausser der
   ersten Gruppe zu, weil 29 Eintraege am Stueck dort den Preis-Abschnitt um
   rund 3000 px nach unten schieben wuerden. */
.wz-gruppe{
  display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:var(--s4) var(--s6);padding-block:var(--s5);border-top:1px solid var(--linie);
}
.wz-gruppe > summary::-webkit-details-marker{display:none}
.wz-gruppe > summary{list-style:none}
.wz-gruppe > *{min-width:0}
.wz-kopf{display:flex;flex-direction:column;gap:.35rem;position:relative}
/* Ab 901 px ist die Gruppe keine Bedienung, sondern nur eine Ueberschrift:
   Zeiger und Tastatur sollen sie nicht als Schalter anbieten. */
@media (min-width:901px){.wz-gruppe > summary{pointer-events:none}.wz-pfeil{display:none}}
@media (max-width:900px){
  .wz-gruppe > summary{cursor:pointer;min-height:48px;justify-content:center;padding-right:2rem}
  .wz-gruppe > summary:hover .wz-kopf-name{color:var(--marke)}
  .wz-pfeil{
    position:absolute;right:0;top:50%;width:11px;height:11px;
    border-right:2px solid var(--tinte-mute);border-bottom:2px solid var(--tinte-mute);
    transform:translateY(-70%) rotate(45deg);
    transition:transform var(--dauer) var(--feder);
  }
  .wz-gruppe[open] > summary .wz-pfeil{transform:translateY(-25%) rotate(225deg)}
  .wz-gruppe[open] > .wz-liste{animation:einblenden var(--dauer) var(--feder)}
}
@media (min-width:901px){
  /* Der Bereichsname laeuft neben seiner Liste mit — bei einer Gruppe mit
     dreizehn Eintraegen weiss man sonst auf halber Hoehe nicht mehr, wo man
     ist. Der Abstand entspricht der Hoehe der Kopfleiste. */
  .wz-kopf{position:sticky;top:5.25rem;align-self:start}
}
.wz-kopf-name{font-family:var(--serif);font-size:var(--t-mittel);font-weight:600;letter-spacing:-.015em;line-height:1.15}
.wz-kopf-zahl{font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-mute)}

.wz-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5)}
@media (max-width:1080px){.wz-liste{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .wz-gruppe{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .wz-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){.wz-liste{grid-template-columns:minmax(0,1fr)}}

.wz{display:flex;flex-direction:column;gap:.2rem}
.wz-name{
  display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;
  font-size:var(--t-klein);font-weight:600;line-height:1.35;
}
.wz-text{font-size:var(--t-klein);color:var(--tinte-dim);line-height:1.5}
.wz-grenze{font-family:var(--mono);font-size:var(--t-mikro);color:var(--tinte-mute)}
.wz-premium{
  font-family:var(--mono);font-size:.625rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--marke);background:var(--marke-flach);
  border-radius:2px;padding:.14rem .45rem;white-space:nowrap;flex:none;
}

/* ---------- 19 Probe: „Tipp deine Aktie ein" ----------
   Der Besucher soll das Produkt an seinem eigenen Wert erleben, bevor er eine
   E-Mail hergibt. Ohne JavaScript steht statt des Feldes ein Hinweis mit Link
   auf die Werteliste — nie ein totes Eingabefeld. */
.probe-buehne{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-gross);
  box-shadow:var(--schatten-hoch);padding:var(--s6);position:relative;
}
@media (max-width:640px){.probe-buehne{padding:var(--s5) var(--s4);border-radius:var(--r)}}

.probe-feld{position:relative;max-width:34rem}
.probe-feld input{
  width:100%;min-height:60px;padding:0 3rem 0 3rem;
  border:1px solid var(--linie-stark);border-radius:var(--r-klein);
  background:var(--papier);color:var(--tinte);font:inherit;font-size:var(--t-lead);
  transition:border-color var(--dauer-kurz),box-shadow var(--dauer-kurz);
}
.probe-feld input::placeholder{color:var(--tinte-mute)}
.probe-feld input:focus{outline:none;border-color:var(--marke);box-shadow:var(--ring)}
.probe-lupe{
  position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:var(--tinte-mute);pointer-events:none;
}
.probe-leeren{
  position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:none;place-items:center;border:0;background:none;
  cursor:pointer;color:var(--tinte-mute);border-radius:2px;
}
.probe-leeren[data-an]{display:grid}
.probe-leeren:hover{color:var(--tinte);background:var(--flaeche-2)}
.probe-leeren svg{width:17px;height:17px}

/* Vorschlagsliste */
.probe-liste{
  position:absolute;left:0;right:0;top:calc(100% + .35rem);z-index:20;
  background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:var(--r-klein);
  box-shadow:var(--schatten-hoch);max-height:19rem;overflow-y:auto;padding:.3rem;
  margin:0;list-style:none;
}
.probe-liste[hidden]{display:none}
.probe-treffer{
  display:flex;align-items:center;gap:.75rem;min-height:46px;padding:.4rem .7rem;
  border-radius:6px;cursor:pointer;
}
.probe-treffer[aria-selected="true"],.probe-treffer:hover{background:var(--marke-flach)}
.probe-treffer-name{font-weight:600;font-size:var(--t-klein)}
.probe-treffer-ticker{
  font-family:var(--mono);font-size:var(--t-mikro);color:var(--tinte-mute);
  margin-left:auto;flex:none;
}
.probe-treffer-branche{font-size:var(--t-mikro);color:var(--tinte-mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Schnellwahl */
.probe-schnell{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s4);align-items:center}
.probe-schnell-text{font-size:var(--t-klein);color:var(--tinte-mute);margin-right:.25rem}
.probe-chip{
  min-height:44px;padding:0 1rem;border:1px solid var(--linie-stark);border-radius:2px;
  background:transparent;color:var(--tinte-dim);font-size:var(--t-klein);cursor:pointer;
  transition:border-color var(--dauer-kurz),color var(--dauer-kurz),background var(--dauer-kurz);
}
.probe-chip:hover{border-color:var(--marke);color:var(--marke);background:var(--marke-flach)}

/* Ergebnis */
.probe-ergebnis{margin-top:var(--s5)}
.probe-ergebnis:empty{display:none}
.probe-karte{animation:einblenden var(--dauer-lang) var(--feder)}
@media (prefers-reduced-motion:reduce){.probe-karte{animation:none}}

.probe-kopf{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem;
  padding-bottom:var(--s3);border-bottom:1px solid var(--linie);margin-bottom:var(--s4);
}
.probe-kopf-name{font-family:var(--serif);font-size:var(--t-mittel);font-weight:600;letter-spacing:-.015em}
.probe-kopf-ticker{font-family:var(--mono);font-size:var(--t-klein);font-weight:600;color:var(--marke)}
.probe-kopf-meta{font-size:var(--t-klein);color:var(--tinte-mute);margin-left:auto}

.probe-satz{font-size:var(--t-lead);line-height:1.55;color:var(--tinte);margin-bottom:var(--s5)}

.probe-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5);margin-bottom:var(--s5)}
@media (max-width:640px){.probe-spalten{grid-template-columns:minmax(0,1fr)}}
.probe-spalte h4{
  font-family:var(--mono);font-size:var(--t-mikro);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:var(--s3);display:flex;align-items:center;gap:.4rem;
}
.probe-spalte[data-ton="auf"] h4{color:var(--auf)}
.probe-spalte[data-ton="ab"] h4{color:var(--ab)}
.probe-spalte ul{display:flex;flex-direction:column;gap:.6rem}
.probe-spalte li{
  font-size:var(--t-klein);line-height:1.5;color:var(--tinte-dim);
  padding-left:.9rem;position:relative;
}
.probe-spalte li::before{
  content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:999px;
}
.probe-spalte[data-ton="auf"] li::before{background:var(--auf)}
.probe-spalte[data-ton="ab"] li::before{background:var(--ab)}

.probe-achten{
  background:var(--marke-flach);border-radius:var(--r-klein);padding:var(--s4);
  margin-bottom:var(--s5);
}
.probe-achten h4{
  font-family:var(--mono);font-size:var(--t-mikro);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--marke);margin-bottom:var(--s2);
}
.probe-achten p{font-size:var(--t-klein);line-height:1.6;color:var(--tinte-dim)}

.probe-insider{border:1px solid var(--linie);border-radius:var(--r-klein);overflow:hidden;margin-bottom:var(--s5)}
.probe-insider-kopf{
  display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:baseline;
  padding:.7rem .9rem;background:var(--flaeche-2);border-bottom:1px solid var(--linie);
  font-size:var(--t-mikro);color:var(--tinte-mute);
}
.probe-insider-kopf strong{font-size:var(--t-klein);color:var(--tinte);font-weight:600}
.probe-insider-zeile{
  display:flex;align-items:center;gap:.75rem;padding:.55rem .9rem;
  border-bottom:1px solid var(--linie);font-size:var(--t-klein);
}
.probe-insider-zeile:last-child{border-bottom:0}
.probe-insider-art{
  font-family:var(--mono);font-size:var(--t-mikro);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;padding:.1rem .45rem;border-radius:2px;flex:none;
}
.probe-insider-art[data-r="Kauf"]{color:var(--auf);background:var(--auf-flach)}
.probe-insider-art[data-r="Verkauf"]{color:var(--ab);background:var(--ab-flach)}
.probe-insider-wer{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.probe-insider-summe{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;
  margin-left:auto;flex:none;white-space:nowrap;
}
.probe-insider-datum{font-family:var(--mono);font-size:var(--t-mikro);color:var(--tinte-mute);flex:none}
@media (max-width:560px){.probe-insider-datum{display:none}}

.probe-fuss{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center;
  padding-top:var(--s4);border-top:1px solid var(--linie);
}
.probe-fuss-text{font-size:var(--t-klein);color:var(--tinte-dim);flex:1;min-width:14rem}
.probe-mehr{
  font-size:var(--t-klein);font-weight:600;color:var(--marke);text-decoration:none;
  display:inline-block;padding:.6rem 0;border-bottom:1px solid transparent;
}
.probe-mehr:hover{border-bottom-color:currentColor}
.probe-mehr::after{content:" \2192"}
.probe-leer{font-size:var(--t-klein);color:var(--tinte-dim);line-height:1.6}
.probe-leer a{color:var(--marke)}
.probe-hinweis{font-size:var(--t-mikro);color:var(--tinte-mute);margin-top:var(--s4);line-height:1.5}

/* ---------- 20 Wer dahintersteht ----------
   Ersatz fuer Social Proof, den es nicht gibt: 3 bestaetigte Vormerkungen
   waeren als Zaehler schaedlich, erfundene Zahlen verboten. Stattdessen
   nachpruefbare Offenheit — jede Aussage hier ist im Impressum, im Datenstand
   oder im Code belegt. */
.dahinter{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s7);align-items:start}
.dahinter > *{min-width:0}
@media (max-width:900px){.dahinter{grid-template-columns:minmax(0,1fr);gap:var(--s6)}}
.dahinter-text p{font-size:var(--t-lead);line-height:1.65;color:var(--tinte-dim)}
.dahinter-text p + p{margin-top:var(--s4)}
.dahinter-text strong{color:var(--tinte);font-weight:600}
.dahinter-name{
  display:flex;align-items:center;gap:.75rem;margin-top:var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--linie);
}
.dahinter-kuerzel{
  width:42px;height:42px;flex:none;border-radius:999px;display:grid;place-items:center;
  background:var(--marke-flach);color:var(--marke);
  font-family:var(--mono);font-weight:600;font-size:var(--t-klein);letter-spacing:.02em;
}
.dahinter-wer{display:flex;flex-direction:column}
.dahinter-wer b{font-size:var(--t-klein);font-weight:600}
.dahinter-wer span{font-size:var(--t-mikro);color:var(--tinte-mute)}
.dahinter-wer a{color:var(--tinte-mute)}

.belege{display:flex;flex-direction:column;gap:1px;background:var(--linie);
  border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
.beleg{background:var(--flaeche);padding:var(--s5)}
.beleg-titel{
  font-family:var(--mono);font-size:var(--t-mikro);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinte-mute);margin-bottom:.7rem;
  display:flex;align-items:center;gap:.5rem;
}
/* Ein Punkt in Datenfarbe trennt „steht schon" von „fehlt noch" auf einen
   Blick, ohne dass die Ueberschriften selbst bunt werden. */
.beleg-titel::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor;flex:none}
.beleg-titel[data-ton="auf"]{color:var(--auf)}
.beleg-titel[data-ton="ab"]{color:var(--ab)}
.beleg-liste{display:flex;flex-direction:column;gap:.7rem}
.beleg-liste li{
  font-size:var(--t-klein);line-height:1.55;color:var(--tinte-dim);
  padding-left:.9rem;position:relative;
}
.beleg-liste li::before{
  content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;
  border-radius:999px;background:var(--linie-stark);
}
.beleg-liste b{color:var(--tinte);font-weight:600}
.beleg-liste a{color:var(--marke);text-decoration:none;border-bottom:1px solid transparent}
.beleg-liste a:hover{border-bottom-color:currentColor}
.beleg-wert{font-size:var(--t-klein);line-height:1.5;color:var(--tinte-dim)}
.beleg-wert b{color:var(--tinte);font-weight:600}
.beleg-wert a{color:var(--marke);text-decoration:none;border-bottom:1px solid transparent}
.beleg-wert a:hover{border-bottom-color:currentColor}

/* ---------- 21 Abschnitte unter der Falz überspringen ----------
   Die Seite ist lang. Ohne diese Regel rechnet der Browser beim ersten
   Anstrich Layout und Malen für alles durch, was weit unter dem sichtbaren
   Bereich liegt — auf gedrosseltem Handy hunderte Millisekunden für Inhalt,
   den niemand sieht.

   content-visibility:auto überspringt genau das, bis der Abschnitt in die
   Nähe kommt. contain-intrinsic-size gibt eine Platzhaltergröße vor, damit
   die Bildlaufleiste nicht springt und CLS nicht leidet; die Werte sind an
   den gemessenen Abschnittshöhen ausgerichtet und müssen nicht genau sein.

   Hero und Zahlenband bleiben ausdrücklich AUSSEN VOR — sie stehen im
   ersten Bild, dort würde die Regel nichts sparen und nur Risiko schaffen. */
#probe,#radar,#uebersetzer,#produkt,#werkzeuge,#preisuebersicht,#faq,#dahinter,#anmelden{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}
/* Beim Drucken darf nichts übersprungen werden. */
@media print{
  #probe,#radar,#uebersetzer,#produkt,#werkzeuge,#preisuebersicht,#faq,#dahinter,#anmelden{
    content-visibility:visible;
  }
}

/* ---------- 22 Drei bewusste Brueche ----------
   Die Seite war zu regelmaessig: fuenfzehn Mal dieselbe Karte, jedes Band mit
   demselben Polster, jede Ueberschrift an derselben Kante. Diese Gleichfoermigkeit
   ist ein Erkennungszeichen generierter Seiten. Deshalb genau drei Ausnahmen —
   nicht mehr, sonst wird die Ausnahme zur neuen Regel. */

/* (1) Der Balkenvergleich steht ohne Karte direkt auf dem gesenkten Band. */
#balken.karte{
  background:none;border:0;box-shadow:none;padding:0;
}
#balken > .balkenpaar{padding-top:.25rem}

/* (2) Die Belege in „Wer dahintersteht" ebenso — nur noch eine Haarlinie
       zwischen den beiden Listen. */
#dahinter .belege{
  background:none;border:0;border-radius:0;gap:0;
}
#dahinter .beleg{background:none;padding:0}
#dahinter .beleg + .beleg{
  margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--linie);
}

/* (3) Die Produktaufnahme laeuft aus dem Textspiegel heraus. Das ist der eine
       Rasterbruch: er faellt genau dort, wo der Besucher hinsehen soll. */
#produkt > .wrap > figure{margin:0}
@media (min-width:1100px){
  #produkt > .wrap > figure{
    margin-inline:calc((100% - min(100vw - 4rem, 84rem)) / 2);
  }
}

/* ---------- 17 Bewegung ---------- */
.js .auf-blende{opacity:0;transform:translateY(14px)}
.js .auf-blende.sichtbar{opacity:1;transform:none;transition:opacity var(--dauer-lang) var(--feder),transform var(--dauer-lang) var(--feder)}
.js .auf-blende.v1{transition-delay:70ms}
.js .auf-blende.v2{transition-delay:140ms}
.js .auf-blende.v3{transition-delay:210ms}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .auf-blende{opacity:1;transform:none}
  .balken-fuell{transform:scaleX(1)}
}

@media print{
  .topbar,.klebe-cta,.reiter{display:none}
  body{background:#fff;color:#000}
}

/* ---------- 23 Kursblatt — die redaktionelle Fassung ----------
   Recherche 30.08.2026, gemessen an den Stilvorlagen von finviz.com,
   stockanalysis.com, simplywall.st und parqet.com: dort dominieren Linien,
   nicht Schatten (finviz: 146 Ein-Pixel-Rahmen gegen 49 Schatten), Radien
   von 2 bis 6 Pixeln (finviz 2-4 px, stockanalysis 6 px, simplywall 4 px)
   und Schriftgroessen von 11 bis 14 Pixeln in den Datenteilen. Klarkurs
   stand vorher bei 14 px Radius, 18 Pillenformen, 10 Schattenflaechen und
   16 px Grundschrift — genau die Kacheloptik, an der eine erzeugte Seite
   erkannt wird. Dieser Abschnitt zieht die Bauteile nach.

   Die Regel dahinter: eine Flaeche wird durch eine Haarlinie begrenzt, nicht
   durch Hoehe. Rund bleibt nur, was wirklich ein Punkt ist (Statusleuchte,
   Aufzaehlungspunkt, Bildmarke). */

/* Kein Lichtschein hinter der Tafel. Ein Farbschein hinter dem Hero ist das
   meistgenannte Erkennungszeichen erzeugter Startseiten. */
.hero::before{display:none}

/* Die Abschnittsmarke wird zum Tabellenkopf: Wort links, Haarlinie bis zum
   Rand. Vorher stand acht Mal derselbe Markenstrich in Teal davor. */
.auge{color:var(--tinte-mute);letter-spacing:.14em;align-items:center;gap:.75rem}
.auge::before{content:none}
.auge::after{content:"";flex:1 1 auto;height:1px;background:var(--linie)}
.kopf{margin-bottom:var(--s5)}

/* Karten sind begrenzte Blöcke, keine schwebenden Kacheln. */
.karte{box-shadow:none}
.karte-hebt:hover{transform:none;box-shadow:none;border-color:var(--linie-stark)}

/* Die drei Schritte laufen als geregelte Spalten wie die Werkzeug-Tafel,
   die auf dieser Seite ohnehin der beste Abschnitt ist. */
.band .raster-3{gap:0;border-top:1px solid var(--linie-stark);border-bottom:1px solid var(--linie)}
.band .raster-3 > .karte{border:0;border-radius:0;background:none;padding:var(--s5) var(--s5) var(--s5) 0}
.band .raster-3 > .karte + .karte{border-left:1px solid var(--linie);padding-left:var(--s5)}
@media (max-width:900px){
  .band .raster-3 > .karte + .karte{border-left:0;border-top:1px solid var(--linie);padding-left:0}
}
/* Aus dem Kreis mit Ziffer wird eine laufende Nummer wie im Inhaltsverzeichnis. */
.nummer{
  width:auto;height:auto;background:none;border-radius:0;display:block;
  color:var(--tinte-mute);font-size:var(--t-mikro);letter-spacing:.14em;margin-bottom:var(--s3);
}

/* Kopfleiste ohne Milchglas. */
.topbar{backdrop-filter:none;background:var(--papier)}

/* Preis: zwei geregelte Spalten statt zweier Kacheln, und linksbuendig wie
   der Rest der Seite. Die schwebende Empfehlungs-Pille wird zur Marke im Text. */
.preisraster{
  max-width:none;margin-inline:0;gap:0;
  border-top:1px solid var(--linie-stark);border-bottom:1px solid var(--linie-stark);
}
.preiskarte{background:none;border:0;border-radius:0;box-shadow:none;padding:var(--s6) var(--s5) var(--s6) 0}
.preiskarte + .preiskarte{border-left:1px solid var(--linie);padding-left:var(--s5)}
.preiskarte[data-empfohlen]{box-shadow:none;border-color:var(--linie)}
.preisband{
  position:static;transform:none;background:none;color:var(--marke);
  border:1px solid var(--marke);border-radius:0;padding:.08rem .4rem;
  display:inline-block;margin-bottom:var(--s2);
}
@media (max-width:820px){
  .preiskarte{padding-inline:0}
  .preiskarte + .preiskarte{border-left:0;border-top:1px solid var(--linie);padding-left:0}
}

/* Haken laufen grau. Gruen heisst auf dieser Seite Kursrichtung, sonst nichts —
   die gruene Haken-Liste ist das zweite Erkennungszeichen erzeugter Seiten. */
.vertrauensreihe svg,.vorteile svg,.preisliste svg{color:var(--tinte-mute);width:13px;height:13px}

/* FAQ linksbuendig, Zeichen statt Winkel. */
.faq{margin-inline:0;max-width:54rem;border-top:1px solid var(--linie-stark)}
.faq summary::after{
  content:"+";width:auto;height:auto;border:0;transform:none;
  font-family:var(--mono);font-size:var(--t-lead);color:var(--tinte-mute);
}
.faq details[open] summary::after{content:"–";transform:none}

/* Der Schluss steht links wie alles andere auf der Seite. */
.schluss{text-align:left}
.schluss .feld,.schluss .einwilligung{margin-inline:0}
.vorteile{justify-content:flex-start}

/* Ein Kursbalken hat keinen Pillenkopf. */
.balken-spur,.balken-fuell{border-radius:0}

/* Keine Einblendung beim Scrollen. Die Klasse bleibt, weil der Balkenaufbau
   an ihr haengt — nur der Vorhang faellt weg. */
.js .auf-blende{opacity:1;transform:none}

/* Nachzug 23a: die Abschnittslinie laeuft ueber die volle Spaltenbreite wie
   im Kursteil einer Zeitung, der Text darunter behaelt sein Mass. */
.kopf.masse-weit,.kopf.masse{max-width:none}
.kopf .h1,.kopf .h2{max-width:34rem}
.kopf .lead{max-width:38rem}
.hero .lead{max-width:30rem}
.preisband{align-self:flex-start;width:max-content}