/* =========================================================================
   werkzeug.css — das Stilblatt der WERKZEUGSEITEN.

   ⚠️ HIESS BIS ZUM 01.10.2026 rechner.css. Umbenannt, als die zweite und
   dritte Werkzeugseite dazukamen (/migration-tool, /backtest-stitcher): die
   Haelfte der Datei ist Seitengeruest — Breiten (.rk-breit/.rk-lese), Hero,
   Erklaerspalten, FAQ, Tuer, die beiden Kleckse — und galt nie nur dem
   Rechner. Die Vorsilbe `rk-` bleibt, weil sie in drei Seiten und zwei
   Erzeugern steht; ein Umbenennen waere hier reine Kosmetik mit Risiko.

   Was wirklich nur dem Rechner gehoert, traegt weiterhin `rk-` und steht im
   Abschnitt „Das Werkzeug"; was nur den Landeseiten gehoert, traegt `wz-`.

   Der urspruengliche Kopf dieser Datei stand hier und ist aufgegangen in dem,
   was unten an den einzelnen Abschnitten steht.
   ========================================================================= */

:root {
  /* Das Werkzeug ist breit, der Lesetext nicht. Zwei Masse, zwei Aufgaben. */
  --rk-breit: 72rem;
  --rk-lese: 38rem;
  /* Die Spalte der Regler. Schmaler wird sie nicht: darunter brechen die
     Zahlenfelder neben ihren Beschriftungen um. */
  --rk-regler: 19rem;
}

/* ---- Der Hintergrund: zwei Ausgaenge, die ineinanderlaufen ----------
   ⚠️ HIER LAG DAS KURSRASTER (`.bg-grid`). Es ist die Atmosphaere der
   Verkaufsseiten und auf einer Werkzeugseite geborgt: ein Gitter, das nichts
   misst, hinter einem Bild, in dem jede Linie etwas misst.

   Die beiden Kleckse tragen `--pos` und `--neg` — bestanden und gerissen, die
   einzigen zwei Farben, die diese Seite kennt. Sie wandern beim Scrollen
   aufeinander zu (`--rk-ax/ay/bx/by`, gesetzt im Skript der Seite). Das ist
   nicht Dekoration mit Hausfarben, sondern das Thema als Flaeche: zwei
   Ausgaenge, die sich mischen, waehrend man liest.

   ⚠️ 12 % IM KERN, NICHT 42 % WIE IM HERO. Darueber liegt eine Leinwand, die
   dieselben zwei Farben in voller Staerke benutzt — ein kraeftiger Grund
   darunter zoege sie herunter.
   ⚠️ `position: fixed`: die Kleckse gehoeren der Seite, nicht einer Sektion.
   `z-index: 0` plus `isolation` am Inhalt haelt sie zuverlaessig dahinter,
   ohne dass jede Sektion eine eigene Flaeche braucht. */
.rk-blobs {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle clamp(320px, 38vw, 680px)
      at calc(28% + var(--rk-ax, 0px)) calc(26% + var(--rk-ay, 0px)),
      color-mix(in srgb, var(--pos) 12%, transparent) 0%,
      color-mix(in srgb, var(--pos) 10%, transparent) 36%,
      color-mix(in srgb, var(--pos) 4%, transparent) 68%,
      transparent 100%),
    radial-gradient(circle clamp(300px, 34vw, 600px)
      at calc(78% + var(--rk-bx, 0px)) calc(58% + var(--rk-by, 0px)),
      color-mix(in srgb, var(--neg) 12%, transparent) 0%,
      color-mix(in srgb, var(--neg) 10%, transparent) 36%,
      color-mix(in srgb, var(--neg) 4%, transparent) 68%,
      transparent 100%);
}
.rk-wrap { position: relative; z-index: 1; isolation: isolate;
           padding: clamp(10px, 2vw, 22px) 0 clamp(56px, 9vw, 104px); }
.rk-breit { width: min(var(--rk-breit), calc(100% - 2 * clamp(20px, 5vw, 40px))); margin-inline: auto; }
.rk-lese  { width: min(var(--rk-lese),  calc(100% - 2 * clamp(20px, 5vw, 40px))); margin-inline: auto; }

/* ---------- Kopfzeile der Seite --------------------------------------
   Eine eigene, schlanke — die grosse Kopfleiste der Verkaufsseite mit
   Klappmenue und Produktpanel waere hier Beiwerk. Dasselbe Urteil wie beim
   Blog, nur traegt diese Seite zusaetzlich den Sprachwechsel. */
/* ⚠️ HIER STANDEN DIE REGELN EINER EIGENEN, SCHLANKEN KOPFLEISTE. Am
   01.10.2026 ersetzt durch die Leiste der Landing (erzeugt von
   tools/kopfleiste.py): eine Werkzeugseite ist keine Insel, und ein Besucher,
   der aus der Suche kommt, soll von dort in das Produkt finden. Die Leiste
   liegt jetzt AUSSERHALB von <main> — `header` ist in site.css das nackte
   Element und klebt nur dann am Fensterrand. */

/* ---------- Hero ------------------------------------------------------
   Kein Bild, keine Kachelreihe: die Behauptung steht als Frage da, und die
   Antwort gibt das Werkzeug zwei Zeilen darunter. */
.rk-hero { padding: clamp(30px, 6vw, 56px) 0 clamp(22px, 4vw, 34px); }
.rk-braue {
  display: block; margin-bottom: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}
.rk-hero h1 {
  font-size: clamp(30px, 5.4vw, 54px); font-weight: 700; line-height: 1.04;
  letter-spacing: -0.035em; text-wrap: balance; max-width: 18ch;
}
.rk-lede {
  margin-top: 16px; max-width: 46ch;
  font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; color: var(--dim);
}

/* ---------- Das Werkzeug ---------------------------------------------- */
/* ⚠️ HIER STANDEN REGLER UND BILD NEBENEINANDER, ein schmaler Streifen
   links und das Bild rechts. Gemessen: 304 px Regler gegen 657 px Bild, und
   darueber 356 px Vorspann — auf einem 836 px hohen Schirm sah ein Besucher
   die Ueberschrift und ein Drittel des Werkzeugs.

   Jetzt untereinander: oben das Werkzeug ueber die volle Breite (Urteil links,
   Beleg rechts), darunter die Regler als Schiene. Die Seite oeffnet auf der
   Antwort, nicht auf einem Absatz ueber sich selbst. */
.rk-tool { display: grid; gap: clamp(16px, 2.4vw, 24px); }

/* ---- Urteil links, Beleg rechts --------------------------------------
   ⚠️ ALLES URTEILENDE IN EINER SPALTE. Vorher stand die Rate ueber dem
   Bild und die drei Nebenzahlen unter der Legende — das Urteil an zwei
   Stellen, getrennt durch seinen eigenen Beleg. */
.rk-bild.rk-feld {
  display: grid; align-items: start;
  grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 34px);
}
@media (max-width: 880px) { .rk-bild.rk-feld { grid-template-columns: 1fr; } }

/* ---- Die Regler: zwei Parteien ---------------------------------------
   ⚠️ DAS IST DER STOFF DER SEITE, nicht eine Liste mit acht Zeilen. Links
   stehen DEINE Zahlen, rechts IHRE Regeln, und eine Haarlinie dazwischen sagt
   das, wofuer der Fliesstext sonst einen Satz braeuchte. Vorher trugen beide
   Gruppen dieselbe 11-px-Braue und lasen sich als Einstellungsdialog. */
.rk-regler-feld {
  display: grid; gap: clamp(18px, 3vw, 40px);
  grid-template-columns: 1fr 1fr;
  padding-top: clamp(4px, 1vw, 10px);
}
.rk-regler-feld > .rk-gruppe + .rk-gruppe {
  padding-left: clamp(18px, 3vw, 40px); border-left: 1px solid var(--line-2);
}
@media (max-width: 760px) {
  .rk-regler-feld { grid-template-columns: 1fr; }
  .rk-regler-feld > .rk-gruppe + .rk-gruppe {
    padding-left: 0; border-left: 0;
    padding-top: 22px; border-top: 1px solid var(--line-2);
  }
}

/* ⚠️ NUR DIE ABLESUNG IST EINE FLAECHE. Vorher trugen Regler UND Bild
   dieselbe Karte und lasen sich damit als Geschwister — sie sind aber keine:
   das eine stellt man ein, das andere liest man ab. Eingesenkt gegen erhaben,
   ohne dass dafuer ein Schatten noetig waere (das Haus ist flach). */
.rk-feld {
  border: 1px solid var(--line-2); border-radius: 18px;
  background: var(--surface-2);
  padding: clamp(18px, 2.2vw, 26px);
  /* Haelt die randlose Leinwand in den gerundeten Ecken. */
  overflow: hidden;
}

/* Regler-Spalte */
/* Die Braue traegt jetzt Gewicht: sie benennt eine PARTEI, nicht einen
   Abschnitt. Groesser, dunkler, mit der Linie darunter als Kante. */
.rk-gruppe-titel {
  display: block; margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
}
/* ⚠️ DICHTER ALS DER REST DER SEITE, und das ist Absicht: acht Regler
   sind ein Bedienfeld, kein Fliesstext. 16 px Abstand liessen die Schiene auf
   430 px wachsen und schoben die Erklaerbloecke aus dem Bild. */
.rk-zeile + .rk-zeile { margin-top: 12px; }
.rk-zeile-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rk-zeile label { font-size: 12.5px; font-weight: 600; color: var(--dim); }
.rk-wert {
  font-size: 13px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}

/* ⚠️ Der Regler wird in BEIDEN Engines angefasst: `::-webkit-slider-*` und
   `::-moz-range-*` lassen sich nicht in einer Regelliste zusammenfassen —
   eine unbekannte Pseudoklasse verwirft die ganze Liste. Deshalb doppelt. */
.rk-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px; margin: 2px 0 0; background: transparent; cursor: pointer;
}
.rk-range:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.rk-range::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px; background: var(--line-2);
}
.rk-range::-moz-range-track { height: 3px; border-radius: 2px; background: var(--line-2); }
.rk-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -6.5px; border-radius: 50%;
  background: var(--ink); border: 0; transition: transform .12s;
}
.rk-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); border: 0; transition: transform .12s;
}
.rk-range:active::-webkit-slider-thumb { transform: scale(1.18); }
.rk-range:active::-moz-range-thumb { transform: scale(1.18); }

.rk-note {
  margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: var(--faint);
}
.rk-note b { color: var(--dim); font-weight: 600; }

/* Umschalter „Drawdown-Art" — drei Knoepfe, einer an. Kein `select`: die Wahl
   ist die wichtigste auf der Seite und soll sichtbar danebenstehen, nicht
   hinter einem Klick. */
/* ⚠️ HIER STANDEN DREI KARTEN UNTEREINANDER, jede mit Titel und
   Erklaersatz — gemessen rund 180 px fuer eine Wahl mit drei Moeglichkeiten,
   mehr als die vier Regler der anderen Spalte zusammen. Jetzt eine
   Segmentreihe: drei Felder nebeneinander in einer Spur, darunter EIN Satz,
   der das aktive Segment erklaert. Der Platz faellt von 180 auf rund 60 px,
   und die Information bleibt vollstaendig — sie steht nur nicht mehr dreimal
   gleichzeitig da, davon zweimal ueber etwas, das gar nicht eingestellt ist. */
.rk-wahl {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  margin-top: 7px; padding: 2px; border-radius: 9px;
  border: 1px solid var(--line-2); background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.rk-wahl button {
  text-align: center; padding: 7px 4px; border-radius: 7px;
  border: 0; background: transparent; color: var(--dim);
  font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.25; cursor: pointer;
  transition: color .15s, background .15s;
}
.rk-wahl button:hover { color: var(--ink); }
.rk-wahl button[aria-pressed="true"] {
  color: var(--ink); background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
/* Die Erklaersaetze bleiben im Dokument — sie sind der Ort der Uebersetzung
   und die Quelle, aus der das Skript die Zeile darunter schreibt. */
.rk-wahl button small { display: none; }
.rk-dd-note { min-height: 2.6em; }
.rk-wahl button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Das Bild --------------------------------------------------- */
.rk-buehne { position: relative; }
/* ⚠️ Das Seitenverhaeltnis steht im CSS, nicht im Skript. Die Leinwand wird
   aus der GEMESSENEN Kastengroesse skaliert; stuende die Hoehe im Skript,
   haette die Seite zwei Wahrheiten und der erste Anstrich saesse daneben. */
/* ⚠️ RANDLOS BIS AN DIE FELDKANTEN. Ein Diagramm in einem Kasten in einer
   Karte ist die Vorlagenloesung; hier IST das Bild die Karte. Negative Raender
   gegen das Polster des Feldes, der `overflow: hidden` oben schneidet die
   Ecken. */
/* ⚠️ NUR NOCH NACH RECHTS RANDLOS. Mit der Urteilsspalte links waere ein
   negativer linker Rand ein Bild, das unter den Text laeuft. */
.rk-buehne { margin-right: calc(-1 * clamp(18px, 2.2vw, 26px)); }
@media (max-width: 880px) { .rk-buehne { margin-inline: calc(-1 * clamp(18px, 2.2vw, 26px)); } }
.rk-leinwand { display: block; width: 100%; aspect-ratio: 16 / 9; }
@media (max-width: 560px) { .rk-leinwand { aspect-ratio: 4 / 3; } }

.rk-legende {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  padding: 12px clamp(18px, 2.2vw, 26px) 0 0;
  font-size: 12px; color: var(--faint);
}
/* Das Band ist eine Flaeche, kein Strich — sein Zeichen auch. Die beiden
   Laeufe bleiben Striche, denn sie sind welche. */
.rk-lg-band { color: var(--dim); }
.rk-lg-band i { height: 10px; border-radius: 2px; opacity: .3; }
/* Eine Zeile Kleingedrucktes, die eine echte Frage beantwortet: warum endet
   das Band? Weil die Gruppe endet. */
.rk-lg-hinweis { flex-basis: 100%; color: var(--faint); opacity: .8; }
.rk-legende span { display: inline-flex; align-items: center; gap: 7px; }
.rk-legende i {
  width: 14px; height: 2px; border-radius: 2px; background: currentColor; flex: none;
}
.rk-lg-pos { color: var(--pos); }
.rk-lg-neg { color: var(--neg); }
.rk-lg-ziel i { height: 0; border-top: 2px dashed currentColor; border-radius: 0; }
.rk-lg-boden i { height: 0; border-top: 2px dotted currentColor; border-radius: 0; }

/* ---------- Die Ablesung ----------------------------------------------
   Eine Zahl, gross, GANZ OBEN — die Frage der Seite wird zuerst beantwortet
   und darunter belegt. Die drei Nebenzahlen stehen als Zeile am Fuss; vier
   gleich grosse Kacheln machten aus einer Aussage vier Behauptungen. */
.rk-urteil { display: grid; gap: clamp(16px, 2.2vw, 22px); align-content: start; }
.rk-rate { display: grid; gap: 8px; }
.rk-rate-zahl {
  font-size: clamp(50px, 9vw, 86px); font-weight: 700; line-height: 0.92;
  letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
  /* ⚠️ Keine feste Breite — aber tabellarische Ziffern, sonst huepft die Zahl
     beim Ziehen am Regler um die Breite einer „1". */
}
/* ⚠️ 500, nicht 600. Neben einer 86-px-Zahl ist halbfetter Fließtext ein
   zweiter Schreihals; der Satz soll sie erklaeren, nicht mit ihr streiten.
   Auf dem Telefon faellt er unter die Zahl und darf dort die volle Breite
   nehmen — 22 Zeichen waeren vier Zeilen. */
.rk-rate-wort { font-size: 13.5px; font-weight: 500; color: var(--dim); line-height: 1.55; }

/* ---- Der Pegel --------------------------------------------------------
   ⚠️ EIN BALKEN, KEIN ZWEITER RING. 78,4 % allein ist keine Aussage — viel
   oder wenig haengt an den Regeln daneben. Die Marke sitzt da, wo dieselbe
   Challenge ohne jeden Vorteil landet; die Luecke dazwischen IST der Vorteil.
   ⚠️ Der Fuellstand traegt `--pos` nur als Flaeche bei 55 %: er ist eine
   Menge, kein Ergebnis. Die grosse Zahl darueber faerbt das Urteil. */
.rk-pegel { display: grid; gap: 9px; }
.rk-pegel-spur {
  position: relative; height: 7px; border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.rk-pegel-fuell {
  position: absolute; inset: 0 auto 0 0; border-radius: 4px;
  background: color-mix(in srgb, var(--pos) 55%, transparent);
  transition: width .18s ease;
}
/* Die Marke ist ein Strich AUF der Spur, nicht darunter: ein Wert auf
   derselben Skala gehoert auf dieselbe Linie. */
.rk-pegel-marke {
  position: absolute; top: -4px; bottom: -4px; width: 0;
  transition: left .18s ease;
}
.rk-pegel-marke i {
  display: block; width: 2px; height: 100%; margin-left: -1px;
  background: var(--ink); border-radius: 1px;
}
.rk-pegel-text { font-size: 12px; line-height: 1.5; color: var(--faint); }
.rk-pegel-text b { color: var(--dim); font-weight: 700; }
/* Die drei Nebenzahlen stehen in der Urteilsspalte untereinander — sie
   gehoeren zum Urteil, nicht zur Legende des Bildes. Auf dem Telefon, wo die
   Spalte die volle Breite hat, legen sie sich nebeneinander. */
.rk-neben {
  display: grid; gap: 12px;
  padding-top: clamp(14px, 2vw, 18px); border-top: 1px solid var(--line-2);
}
@media (max-width: 880px) {
  .rk-neben { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px 24px; }
}
.rk-neben div { min-width: 0; }
.rk-neben dt { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.rk-neben dd { margin-top: 3px; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---------- Erklaerblöcke ---------------------------------------------
   ⚠️ KEINE NUMMERN. Die drei Absaetze sind keine Reihenfolge — man muss sie
   nicht nacheinander tun. Eine 01/02/03-Leiste behauptete einen Ablauf, den es
   nicht gibt; die Zwischentitel tragen die Aussage von selbst. */
.rk-erklaer { padding: clamp(50px, 8vw, 88px) 0 0; }
.rk-erklaer h2 {
  font-size: clamp(24px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.12; text-wrap: balance; max-width: 20ch;
}
.rk-erklaer > .rk-lede { margin-bottom: clamp(26px, 4vw, 40px); }
/* ⚠️ Die Ueberschrift und der Vorspann bleiben auf Lesebreite, auch wenn der
   Abschnitt breit ist. Eine Zeile ueber 1.100 px waere 140 Zeichen lang — das
   Auge findet den naechsten Zeilenanfang nicht mehr. Nur die drei Spalten
   nutzen die Breite. */
.rk-erklaer > h2, .rk-erklaer > .rk-lede { max-width: var(--rk-lese); }
.rk-punkte { display: grid; gap: clamp(22px, 3vw, 34px); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.rk-punkt h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 8px; }
.rk-punkt p { font-size: 14.5px; line-height: 1.62; color: var(--dim); }

/* ---------- FAQ -------------------------------------------------------- */
.rk-faq { padding: clamp(50px, 8vw, 88px) 0 0; }
.rk-faq h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 18px; }
.rk-frage { border-top: 1px solid var(--line-2); }
.rk-frage:last-of-type { border-bottom: 1px solid var(--line-2); }
.rk-frage summary {
  list-style: none; cursor: pointer; padding: 15px 30px 15px 0; position: relative;
  font-size: 15.5px; font-weight: 600; line-height: 1.4;
}
.rk-frage summary::-webkit-details-marker { display: none; }
.rk-frage summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 1.8px solid var(--faint); border-bottom: 1.8px solid var(--faint);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.rk-frage[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.rk-frage summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 6px; }

/* ---- Auf und zu, aber weich ------------------------------------------
   ⚠️ ES GIBT DAFUER KEINE REGEL HIER, UND DAS IST ABSICHT. `bindFaqSanft()`
   in js/site.js macht es fuer die ganze Seite: es MISST die Zielhoehe des
   <details> (statt eine Maximalhoehe zu raten, die bei langen Antworten
   abschneidet) und haelt `open` offen, bis die Fahrt zu Ende ist — sonst waere
   der Text im ersten Bild weg und es schrumpfte eine leere Kiste. Die
   Werkzeug-FAQ wird dort an `.rk-faq details` mitverdrahtet.

   Hier bleibt nur die eine Zeile, die das Skript nicht kennen kann: solange
   `.faq-zu` steht, bleibt `open` gesetzt, obwohl zugeklappt wird — der Haken
   darf in dieser Zeit nicht schon nach oben zeigen. */
.rk-frage.faq-zu summary::after { transform: translateY(-70%) rotate(45deg); }
.rk-frage p { margin: 0; padding: 0 30px 18px 0; font-size: 14.5px; line-height: 1.62; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .rk-antwort { transition: none; } }

/* ---------- Haftung und Tuer ------------------------------------------- */
.rk-haftung {
  margin-top: clamp(46px, 7vw, 80px); padding: 18px 20px;
  border: 1px solid var(--line-2); border-radius: 14px;
  font-size: 12.5px; line-height: 1.6; color: var(--faint);
}
.rk-haftung b { display: block; margin-bottom: 5px; color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* ---- Die Tuer in die Demo --------------------------------------------
   Eine Zeile, ein Knopf, ein Bild. Der erklaerende Satz ist entfallen: er war
   eine Behauptung, die man glauben musste, und das Dashboard darunter zeigt
   dasselbe, ohne dass jemand es bestaetigen muss.
   ⚠️ Das Bild ist angeschnitten, nicht vollstaendig. Ein ganzes Fenster mitten
   auf der Seite sieht aus wie ein Beweisfoto; eines, das unten aus dem Bild
   laeuft, sieht aus wie eine Tuer, durch die es weitergeht. */
.rk-tuer { margin-top: clamp(44px, 6vw, 76px); text-align: center; }
.rk-tuer h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.03em; max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.rk-tuer .chip-solid { margin-top: 20px; }
.rk-schau {
  display: block; margin: clamp(28px, 4vw, 44px) auto 0;
  width: min(100%, 62rem);
  border: 1px solid var(--line-2); border-radius: 14px 14px 0 0;
  border-bottom: 0; overflow: hidden;
  /* ⚠️ ERST BESCHNEIDEN, DANN AUSBLENDEN. Eine Maske macht Pixel unsichtbar,
     nicht platzlos: ohne `max-height` stand unter dem Bild ein halber Bildschirm
     Leere, der aussah wie ein Fehler im Abstand. Die Hoehe schneidet, der
     Verlauf nimmt der Schnittkante die Haerte. */
  max-height: clamp(240px, 30vw, 400px);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.rk-schau img { display: block; width: 100%; height: auto; }

/* ⚠️ `prefers-reduced-motion`: das Einzeichnen der Pfadschar laeuft dann gar
   nicht erst an — das Skript fragt dieselbe Abfrage ab und zeichnet das
   Endbild sofort. Hier bleiben nur die Uebergaenge. */
@media (prefers-reduced-motion: reduce) {
  .rk-range::-webkit-slider-thumb,
  .rk-range::-moz-range-thumb,
  .rk-wahl button,
  .rk-frage summary::after { transition: none; }
}


/* =========================================================================
   Die Landeseiten der Werkzeuge (/migration-tool, /backtest-stitcher)

   ⚠️ SIE SIND KEIN ZWEITES WERKZEUG. Eine Landeseite erklaert, was das Ding
   kann, zeigt EINEN Beleg und hat genau eine Tuer hinein. Deshalb gibt es
   hier keine Bedienelemente, keine Kacheln mit Zahlen und keinen zweiten
   Knopf — alles davon waere eine Kopie, die beim naechsten Umbau des
   Werkzeugs still falsch wird.
   ========================================================================= */

/* Die Tuer steht direkt unter dem Vorspann. Wer aus der Suche kommt, will das
   Werkzeug, nicht den Text darueber. */
.wz-tuer-oben { margin-top: clamp(20px, 3vw, 28px); }

.wz-beleg { padding: clamp(40px, 7vw, 72px) 0 0; }
.wz-beleg h2 {
  font-size: clamp(20px, 2.6vw, 27px); font-weight: 700; letter-spacing: -0.025em;
  max-width: var(--rk-lese);
}
.wz-beleg-lede {
  margin: 10px 0 clamp(22px, 3vw, 32px); max-width: var(--rk-lese);
  font-size: 15px; line-height: 1.62; color: var(--dim);
}

/* ---- Die Spaltenzuordnung ----------------------------------------------
   ⚠️ DAS IST DER BELEG, NICHT DIE DEKORATION. Es sind die echten Spaltennamen,
   die TradeZella, TraderSync und Edgewonk in ihre Exporte schreiben — ein
   Leser erkennt seine eigene Datei daran wieder, und genau das kann kein
   Bildschirmfoto und kein Haekchen-Logo.
   Drei Karten nebeneinander, bei schmalem Fenster untereinander. */
.wz-karten {
  display: grid; gap: clamp(12px, 1.6vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr));
}
.wz-karte {
  border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface-2);
  padding: clamp(16px, 2vw, 20px);
}
.wz-karte h3 {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 12px;
}
.wz-map { display: grid; gap: 7px; }
/* Eine feste mittlere Spalte fuer den Pfeil: so stehen die Ziele aller drei
   Karten auf einer Linie, auch wenn die Quellnamen verschieden lang sind. */
.wz-paar {
  display: grid; grid-template-columns: 1fr 14px minmax(0, 1fr); align-items: baseline;
  gap: 8px; font-size: 12.5px; line-height: 1.4;
}
.wz-von { font-family: var(--font-mono); font-size: 11.5px; color: var(--dim);
          overflow-wrap: anywhere; }
.wz-pfeil { color: var(--faint); }
.wz-nach { font-weight: 600; color: var(--ink); }

/* ---- Drei Protokolle, eine Kurve ----------------------------------------
   Die Zeichnung IST die Aussage: oben drei Strecken mit Ueberlappung, unten
   die eine, die daraus wird. Reine viewBox-Koordinaten, nichts wird gemessen
   — im verborgenen Tab liefert getBoundingClientRect() Nullen.
   ⚠️ `--pos` ist hier NICHT Gewinn, sondern „die fertige Kurve". Deshalb
   traegt nur SIE Farbe und die Teilstuecke bleiben grau: haetten alle vier
   dieselbe Farbe, zeigte das Bild vier Kurven statt eines Vorgangs. */
.wz-kurve { display: block; width: 100%; height: auto; }
.wz-k-teil path { fill: none; stroke: var(--faint); stroke-width: 2;
                  stroke-linejoin: round; stroke-linecap: round; }
.wz-k-lap rect { fill: color-mix(in srgb, var(--ink) 7%, transparent); stroke: none; }
.wz-k-eins { fill: none; stroke: var(--pos); stroke-width: 2.6;
             stroke-linejoin: round; stroke-linecap: round; }

/* Zwei Beschriftungen statt einer Legende: das Bild hat genau zwei Zustaende,
   und eine Legende mit Farbfeldern waere fuer zwei Zeilen ein eigener Apparat.
   Die untere traegt die Farbe der fertigen Kurve — so muss niemand raten,
   welche der Linien gemeint ist. */
.wz-kurve-wrap { display: grid; gap: 8px; }
.wz-k-marke {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint);
}
.wz-k-marke-eins { color: var(--pos); }

/* ---- Auf dem Telefon rutscht das Bild vor die drei Zahlen ---------------
   Gestapelt standen Rate, Pegel UND die drei Nebenzahlen vor der Leinwand —
   gemessen rund 430 px, der Beleg war vom ersten Bild weg. `display: contents`
   loest die Urteilsspalte auf, ihre Kinder werden Felder desselben Rasters und
   lassen sich einzeln ordnen. Kein zweites Markup — derselbe Griff wie im
   mobilen Menue der App.

   ⚠️ DIESER BLOCK MUSS AM ENDE DER DATEI STEHEN. `.rk-urteil { display: grid }`
   weiter oben hat dieselbe Spezifitaet, und eine Media-Query erhoeht sie NICHT
   — stand der Block an seiner logischen Stelle im Raster-Abschnitt, gewann die
   spaetere Zeile und auf dem Telefon passierte gar nichts. */
@media (max-width: 880px) {
  .rk-urteil { display: contents; }
  .rk-rate   { order: 1; }
  .rk-pegel  { order: 2; }
  .rk-buehne { order: 3; }
  .rk-neben  { order: 4; }
}