/* MarketLab Design Tokens · V1.4
   Einzige CI-Quelle fuer Farbe und Schrift.

   Angebunden an die Hauptseite marketlab.markets. Alle Farb- und Schriftwerte
   sind aus deren styles.css uebernommen, damit das Research Lab als Reiter im
   Funnel nicht wie ein Fremdkoerper wirkt.
   Quelle: 07_FUNNELS_OFFERS/20_WORK/atas_marathon/web/styles.css

   Abweichung mit Absicht: die Hauptseite bildet auch --mono auf Roboto Serif ab.
   Hier bleibt eine echte Monospace stehen, weil auf der Preisachse Zahlen
   untereinander fluchten muessen. Alles andere folgt der Hauptseite. */

/* Roboto Serif, lokal ausgeliefert wie auf der Hauptseite.
   Kein Google-Fonts-Link: der uebertrug bei jedem Aufruf die IP des Besuchers. */
@font-face{
  font-family:"Roboto Serif";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(assets/fonts/roboto-serif-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Roboto Serif";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(assets/fonts/roboto-serif-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  color-scheme:dark;

  /* Flaechen · identisch zur Hauptseite */
  --bg:#07090a; --bg-rgb:7,9,10; --e2:#101417; --e3:#151a1d;

  /* Akzente · identisch zur Hauptseite.
     #35d4ef ist das einzige Cyan im Projekt und markiert ausschliesslich die aktive Spur.
     --gold bleibt der Finale-Akzent aus marathon.config.js. */
  --cyan:#35d4ef; --cyan-soft:rgba(53,212,239,.13); --cyan-line:rgba(53,212,239,.45);
  --on-cyan:#041013; --gold:#d4af37;

  /* Textramp. Alle Werte >= 7:1 auf --bg (WCAG 2.1 AAA), gemessen gegen #07090a.
     --bone/--soft/--muted stammen 1:1 von der Hauptseite (text/lead/muted),
     --dim/--faint fuellen die zwei leiseren Stufen der Buehne AAA-konform auf.
     Die Stufe --quiet der Hauptseite (#7f8a8e, 5,6:1) wird hier bewusst nicht
     verwendet: sie unterschreitet den Lesefloor fuer Heiner und Rainer. */
  --bone:#f2f4f3; --soft:#d4dcde; --muted:#b4bec1; --dim:#a9b4b7; --faint:#9aa5a9;

  --rule:rgba(229,239,241,.13); --rule2:rgba(229,239,241,.24);

  /* Buehnen- und Panelflaechen */
  --surface-map:rgba(16,20,23,.55);
  --surface-lage:rgba(7,9,10,.72);
  --surface-axis:rgba(7,9,10,.94);
  --grid-line:rgba(255,255,255,.018);
  /* Kartenraster der Buehne. Deutlicher als das Seitenraster, damit die
     Landkarte wie Papier auf dem Tisch liegt und nicht wie eine leere Flaeche. */
  --map-grid:rgba(229,239,241,.055);
  --map-vignette:rgba(7,9,10,.82);
  /* Gold als Linie und Flaeche, analog zum Cyan-Paar. Bis hierhin stand der
     Wert an jeder Fundstelle einzeln im Stylesheet. */
  --gold-soft:rgba(212,175,55,.09);
  --gold-line:rgba(212,175,55,.45);

  /* Eine Schrift fuer die ganze Seite, wie auf marketlab.markets.
     Dort tragen --display, --body und --mono denselben Stack; die
     Unterscheidung laeuft ueber Schnitt, Groesse und Laufweite, nicht
     ueber die Schriftfamilie. Vorher standen hier drei Familien
     nebeneinander - Roboto Serif fuer Ueberschriften, Segoe UI im
     Fliesstext und JetBrains Mono in den Labels. Auf der Seite trafen
     damit Serife, Grotesk und Monospace aufeinander, und die Kopfleiste
     sah anders aus als dieselbe Leiste auf der Startseite.
     Die Namen --body und --mono bleiben, damit keine der rund 90
     Fundstellen im Stylesheet angefasst werden muss. */
  --display:"Roboto Serif", Georgia, "Times New Roman", serif;
  --body:"Roboto Serif", Georgia, "Times New Roman", serif;
  --mono:"Roboto Serif", Georgia, "Times New Roman", serif;

  /* Schriftgroessen-Floor fuer die Kernzielgruppe 50+ (Heiner & Rainer).
     Nichts im Interface faellt unter --fs-micro. */
  --fs-micro:13px;    /* Badges, Eyebrows, Fusszeile */
  --fs-meta:14px;     /* Metadaten, Kicker, Zustandslabels */
  --fs-body:17px;     /* Fliesstext, Lagefeld, Etappenmodul */
  --fs-body-lg:18px;  /* Lange Lageberichte */
  --lh-body:1.6;

  /* SVG-Buehne: rund 25 Prozent groesser als V1.3 */
  --fs-svg:18px;      /* Zonenbeschriftungen: VAH, POC, VAL, Extrempunkte */
  --fs-svg-head:15px;
  --fs-svg-kmark:14px;

  /* Layout und Ergonomie */
  --rail-w:220px; --side-w:320px; --gap-col:32px;
  --tap:48px;         /* Mindesthoehe aller Klick- und Touch-Targets */
}

/* HELLE FASSUNG · Werte der Hauptseite, gleicher Schalter (data-theme).
   Nur Token-Werte, keine dupliziertem Regeln: die gesamte Buehne inklusive
   SVG haengt an derselben Ramp und kippt mit. */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f6f3; --bg-rgb:246,246,243; --e2:#ffffff; --e3:#f2f2ee;
  /* Abweichung von der Hauptseite mit Absicht. Deren helles Cyan #0a6f83 kommt
     gegen #f6f6f3 nur auf 5,37:1 und liegt damit unter dem Lesefloor, den die
     Kernzielgruppe braucht. #07565f ist derselbe Farbton, eine Stufe tiefer:
     7,74:1 gegen den Grund, 8,39:1 fuer Weiss darauf. Gleiche Begruendung wie
     bei --quiet, das aus demselben Grund nicht uebernommen wurde. */
  --cyan:#07565f; --cyan-soft:rgba(7,86,95,.10); --cyan-line:rgba(7,86,95,.42);
  --on-cyan:#ffffff; --gold:#5c4809;
  /* Wie im dunklen Theme bleiben alle Stufen >= 7:1, hier gegen #f6f6f3. */
  --bone:#12171a; --soft:#39434a; --muted:#3c464b; --dim:#454f54; --faint:#4a5459;
  --rule:rgba(18,23,26,.14); --rule2:rgba(18,23,26,.28);
  --surface-map:rgba(255,255,255,.72);
  --surface-lage:rgba(255,255,255,.62);
  --surface-axis:rgba(246,246,243,.96);
  --grid-line:rgba(18,23,26,.035);
  --map-grid:rgba(18,23,26,.06);
  --map-vignette:rgba(18,23,26,.07);
  --gold-soft:rgba(92,72,9,.08);
  --gold-line:rgba(92,72,9,.42);
}

*{box-sizing:border-box}
img{max-width:100%;height:auto}
html{background:var(--bg);color:var(--bone);font-family:var(--body)}
body{margin:0;background:var(--bg);color:var(--bone)}
a{color:inherit}
button,input{font:inherit}
.mono{font-family:var(--mono);letter-spacing:.04em}
.serif{font-family:var(--display)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}