/* StockLife — Marketing-Oberfläche.
 *
 * Umsetzung des Design-Projekts `StockLife Website v3.dc.html` (claude.ai/design,
 * Projekt b1f14639-…). Der Entwurf zeichnet ausschliesslich mit `style`-Attributen;
 * die Seite liefert `style-src 'self'` (siehe web/_headers), deshalb steht hier
 * jede Regel als Klasse. Werte, Radien, Verläufe und Schatten sind 1:1 aus dem
 * Export übernommen — siehe design/import/StockLife-Website-v3.dc.html.
 *
 * Die zwei Themes des Entwurfs sind bewusst keine Umkehrung voneinander:
 * die Karten bleiben in beiden dunkel, nur die Seitenfläche wechselt. Deshalb
 * gibt es zwei Textpaare — `--tx/--mut` gilt auf Karten, `--navtx/--navmut`
 * auf der Seite selbst.
 */

/* Outfit, SIL OFL 1.1. Die Datei liegt bereits selbst gehostet für die App
   (`font-src 'self'`); ein zweites Exemplar wäre nur derselbe Byte-Block. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/ticker/assets/fonts/outfit-latin.woff2') format('woff2');
  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: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/ticker/assets/fonts/outfit-latin-ext.woff2') format('woff2');
  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;
}

/* ============================== Tokens ============================== */

:root {
  --bg: #0A0A0B;
  --surf: #131416;
  --surf2: #1A1B1E;
  --surf3: #232428;
  --tx: #FFFFFF;
  --mut: #A0A1A8;
  --fnt: #71727A;
  --line: rgba(255, 255, 255, .09);
  --lime: #CBF24C;
  --ring: rgba(255, 255, 255, .16);
  --btn: #FFFFFF;
  --onbtn: #0B0B0B;
  --glass: rgba(10, 10, 11, .74);
  --hi: rgba(255, 255, 255, .07);
  --violet: #5B5BF5;
  --navtx: #FFFFFF;
  --navmut: #A0A1A8;
  --inset: #0A0A0B;
  --navpill: #1E1F23;
  --depth: 0 18px 38px -26px rgba(0, 0, 0, .75);
  --ink: #0B0B0B;
  --up: #8FBF2E;
  --down: #E0503C;
  --card: linear-gradient(202deg, var(--surf) 0%, var(--surf2) 100%);
  --card-tr: radial-gradient(130% 110% at 100% 0%, var(--surf2) 0%, var(--surf) 58%);
  --card-bl: radial-gradient(110% 130% at 0% 100%, var(--surf2) 0%, var(--surf) 62%);
  --card-d: linear-gradient(135deg, var(--surf) 0%, var(--surf2) 82%);
  --card-t: linear-gradient(158deg, var(--surf2) 0%, var(--surf) 44%);
  --edge: inset 0 1px 0 var(--hi), inset 0 0 0 1px var(--line), var(--depth);
  /* `--line` ist in beiden Themes weisslich — auf einer Karte richtig, auf der
     hellen Seitenflaeche unsichtbar. Fuer Linien auf der Seite gilt `--rule`. */
  --rule: rgba(255, 255, 255, .09);
}

[data-theme='light'] {
  --bg: #FFFFFF;
  --surf: #121316;
  --surf2: #191A1E;
  --surf3: #26272C;
  --mut: #A2A3AA;
  --fnt: #7C7D85;
  --line: rgba(255, 255, 255, .10);
  --ring: rgba(12, 13, 16, .16);
  --btn: #0C0D10;
  --onbtn: #FFFFFF;
  --glass: rgba(255, 255, 255, .82);
  --depth: 0 20px 40px -26px rgba(20, 22, 30, .38);
  --navtx: #0C0D10;
  --navmut: #5C5D64;
  --navpill: #ECECE8;
  --up: #5C8F17;
  --rule: rgba(12, 13, 16, .12);
}

/* ============================== Grundlage ============================== */

* { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--navtx);
  font-family: 'Outfit', system-ui, sans-serif;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: .7; }
button { font: inherit; color: inherit; background: none; border: 0; }
h1, h2, h3, p, figure { margin: 0; }
svg { display: block; }
img { max-width: 100%; }

/* Der Fokusring muss auf jedem Untergrund stehen, den die Seite kennt: auf
   der Seitenfläche, auf dunklen Karten und auf der limettenen Schaltfläche.
   Limette auf Limette wäre unsichtbar, deshalb tragen genau diese Flächen
   über `--focus` die Textfarbe der Seite — weiss auf Dunkel, schwarz auf
   Hell. Ein Ring, zwei Farben, keine Ausnahme ohne Grund. */
:focus-visible {
  outline: 3px solid var(--focus, var(--lime));
  outline-offset: 2px;
  border-radius: 4px;
}

.sl-account:focus-visible,
.sl-cta:focus-visible,
.sl-plan__go--lime:focus-visible,
.sl-sub:focus-visible,
.sl-switch button[aria-pressed='true']:focus-visible {
  --focus: var(--navtx);
}

/* Wer Transparenz abbestellt hat, bekommt eine ruhige Fläche statt Milchglas. */
@media (prefers-reduced-transparency: reduce) {
  .sl-head { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.sl-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  background: var(--lime);
  color: var(--ink);
  font: 600 14px/1 'Outfit', system-ui, sans-serif;
}
.sl-skip:focus { left: 0; }

.sl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sl-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.sl-band { padding-top: 96px; }
.sl-band--tight { padding-top: 56px; }
.sl-num { font-variant-numeric: tabular-nums; }

/* ============================== Kopfleiste ============================== */

.sl-head {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--rule);
}

.sl-head__row {
  display: flex;
  align-items: center;
  gap: 36px;
  height: 68px;
}

.sl-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font: 600 17px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: -.4px;
  color: var(--navtx);
}

/* Blanke Glyphe ohne Kachel: sie nimmt die Textfarbe der Seite an — weiss auf
   Dunkel, schwarz auf Hell, wie der Schriftzug daneben. Drei Balken, kein
   Kurs-Strich; deshalb braucht es auch keine Farbe mehr, mit der sich etwas
   durch die Balken stanzt. */
.sl-mark {
  width: 32px;
  height: 32px;
  flex: none;
  color: var(--navtx);
}
.sl-mark--sm { width: 28px; height: 28px; }

.sl-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}

.sl-nav__item {
  height: 34px;
  padding: 0 13px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  font: 500 14px/1 'Outfit', system-ui, sans-serif;
  color: var(--navmut);
  cursor: pointer;
  white-space: nowrap;
}
.sl-nav__item[aria-current='page'],
.sl-nav__item[aria-expanded='true'] {
  color: var(--navtx);
  background: var(--navpill);
}
.sl-nav__item--caret { gap: 6px; padding: 0 11px 0 13px; }
.sl-nav__item--caret svg { transition: transform .18s; }
.sl-nav__item[aria-expanded='true'] svg { transform: rotate(180deg); }

.sl-head__end {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

.sl-account {
  height: 38px;
  padding: 0 5px 0 17px;
  border-radius: 19px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--lime);
  color: var(--ink);
  font: 600 13.5px/1 'Outfit', system-ui, sans-serif;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--depth);
}

.sl-pip {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.sl-pip--lime { background: var(--lime); }

.sl-theme {
  width: 34px;
  height: 34px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px var(--ring);
  color: var(--navtx);
  cursor: pointer;
  flex: none;
}
.sl-theme__moon { display: none; }
[data-theme='light'] .sl-theme__sun { display: none; }
[data-theme='light'] .sl-theme__moon { display: block; }

.sl-burger { display: none; }

/* ------------------------------ Rechner-Menü ------------------------------ */

.sl-mega {
  border-top: 1px solid var(--rule);
  background: var(--bg);
}
.sl-mega[hidden] { display: none; }

.sl-mega__grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 232px;
  gap: 28px;
  padding-top: 24px;
  padding-bottom: 28px;
}

.sl-mega__cats { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; }

.sl-mega__cat {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  font: 500 13.5px/1 'Outfit', system-ui, sans-serif;
  /* Das Menü steht auf der Seitenfläche, nicht auf einer Karte — im hellen
     Theme ist die weiss. Deshalb die Seitenfarben, nicht die Kartenfarben. */
  color: var(--navmut);
}
.sl-mega__cat.is-current {
  background: var(--card-t);
  font-weight: 600;
  color: var(--tx);
}

.sl-kicker {
  font: 600 10.5px/1 'Outfit', system-ui, sans-serif;
  color: var(--fnt);
  letter-spacing: 1.2px;
}

.sl-mega__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 14px;
}
.sl-mega__list a {
  font: 500 14px/1.2 'Outfit', system-ui, sans-serif;
  color: var(--navtx);
}

.sl-mega__promo {
  border-radius: 20px;
  padding: 20px;
  background: var(--card-tr);
  box-shadow: var(--edge);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sl-mega__title {
  font: 600 17px/1.25 'Outfit', system-ui, sans-serif;
  margin-top: 12px;
  color: var(--tx);
  text-wrap: pretty;
}
.sl-mega__go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  font: 600 13px/1 'Outfit', system-ui, sans-serif;
  color: var(--tx);
}

/* Dieses Blatt trägt, was jede Seite braucht: Tokens, Grundlage, Kopfleiste
 * und Fuß. Alles, was nur die vier Marketing-Seiten zeichnen — Held, Bento,
 * Rechner, Tarife, Nachrichten, FAQ — steht in `marketing.css`.
 *
 * Der Schnitt hat einen messbaren Grund: `check-bundle-budgets.mjs` erlaubt
 * 13 KiB Brotli an CSS je Seite, und `status.html` lädt drei Blätter. Ein
 * einziges gemeinsames Stylesheet hätte die Rechtsseiten mit Bauteilen
 * belastet, die dort nie vorkommen.
 */

/* ============================== Fuß ============================== */

.sl-foot { margin-top: 88px; border-top: 1px solid var(--rule); }
.sl-foot__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  padding-top: 52px;
  padding-bottom: 36px;
}
.sl-foot__about p { font: 400 13px/1.6 'Outfit', system-ui, sans-serif; color: var(--navmut); margin-top: 14px; max-width: 250px; text-wrap: pretty; }
.sl-foot__about small { display: block; font: 400 12px/1 'Outfit', system-ui, sans-serif; color: var(--navmut); margin-top: 22px; }
.sl-foot h2 { font: 600 10.5px/1 'Outfit', system-ui, sans-serif; color: var(--navmut); letter-spacing: 1.2px; }
.sl-foot ul { display: flex; flex-direction: column; gap: 6px; margin: 13px 0 0; padding: 0; }
/* WCAG 2.2 verlangt 24 CSS-Pixel als kleinste Zielfläche. Eine 13,5-px-Zeile
   misst rund 18; die fehlenden sechs kommen aus der Höhe, nicht aus dem
   Abstand — sonst rückt der Fuß auseinander, ohne besser treffbar zu sein. */
.sl-foot li {
  list-style: none;
  font: 400 13.5px/1.35 'Outfit', system-ui, sans-serif;
  color: var(--navmut);
  min-height: 24px;
  display: flex;
  align-items: center;
}

/* Der Werbeplatz wird erst nach Einwilligung befüllt (web/ads.js). */
.sl-ad {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--card-t);
  box-shadow: var(--edge);
  color: var(--tx);
}
.sl-ad .sl-kicker { display: block; }
.sl-ad p { margin: 8px 0 14px; }
.sl-ad .sl-ghost--sm { display: inline-flex; }

/* ============================== Schmale Fenster ============================== */

@media (max-width: 1080px) {
  .sl-mega__grid { grid-template-columns: 1fr 1fr; }
  .sl-mega__cats, .sl-mega__promo { grid-column: span 2; }
  .sl-mega__cats { flex-direction: row; flex-wrap: wrap; }
  .sl-foot__grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ============================== Telefon ==============================
 * Umsetzung von `design/import/StockLife-Website-Mobil.dc.html` (393 px).
 * Die Kopfleiste bekommt zwei Zeilen: die Navigation rutscht per `order`
 * unter Marke und Konto — ohne zweites Markup und ohne Menü, das sich
 * verstecken kann. Genau deshalb gibt es keinen Burger mehr: vier Ziele
 * passen nebeneinander, und ein Klick weniger ist ein Klick weniger.
 */

@media (max-width: 760px) {
  .sl-wrap { padding: 0 18px; }
  .sl-band { padding-top: 38px; }
  .sl-band--tight { padding-top: 22px; }

  .sl-head__row { height: auto; flex-wrap: wrap; gap: 10px; padding-top: 10px; }
  .sl-brand { font-size: 16px; gap: 6px; }
  .sl-mark { width: 23px; height: 23px; }
  .sl-theme { width: 32px; height: 32px; }
  .sl-account { height: 34px; padding: 0 4px 0 13px; gap: 8px; font-size: 12.5px; }
  .sl-account .sl-pip { width: 26px; height: 26px; }
  .sl-nav {
    order: 3;
    flex: 1 0 100%;
    gap: 4px;
    padding-bottom: 9px;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .sl-nav::-webkit-scrollbar { display: none; }
  .sl-nav__item { height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px; }
  .sl-nav__item--caret { padding: 0 10px 0 12px; }

  .sl-mega__grid { grid-template-columns: 1fr; gap: 20px; padding-top: 18px; }
  .sl-mega__cats, .sl-mega__promo { grid-column: auto; }
  .sl-foot__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}