/* StockLife — die Bauteile der vier Marketing-Seiten.
 *
 * Umsetzung von `design/import/StockLife-Website-v3.dc.html` (Desktop) und
 * `StockLife-Website-Mobil.dc.html` (Telefon). Tokens, Grundlage, Kopfleiste
 * und Fuß stehen in `stocklife.css`; dieses Blatt lädt nur, wer Held, Bento,
 * Rechner, Tarife, Nachrichten oder FAQ zeichnet — also `/`, `/news.html`,
 * `/preise.html` und `/rechner.html`. Die Rechtsseiten bleiben davon frei.
 *
 * Es gelten dieselben zwei Grenzen wie überall: `style-src 'self'` (jede Regel
 * als Klasse, kein `style`-Attribut) und die zwei Textpaare — `--tx/--mut` auf
 * Karten, `--navtx/--navmut` auf der Seitenfläche.
 */

/* ============================== Held ============================== */

.sl-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
  padding-top: 72px;
}

.sl-flag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 29px;
  padding: 0 5px;
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px var(--ring);
}
.sl-flag__tag {
  height: 21px;
  padding: 0 9px;
  border-radius: 11px;
  background: var(--lime);
  color: var(--ink);
  font: 600 10.5px/21px 'Outfit', system-ui, sans-serif;
  letter-spacing: .4px;
}
.sl-flag__txt {
  font: 500 12.5px/1 'Outfit', system-ui, sans-serif;
  color: var(--navmut);
  padding-right: 10px;
}

.sl-h1 {
  font: 600 66px/1.02 'Outfit', system-ui, sans-serif;
  letter-spacing: -3px;
  margin-top: 26px;
  color: var(--navtx);
  text-wrap: pretty;
}

.sl-lead {
  font: 300 17.5px/1.62 'Outfit', system-ui, sans-serif;
  color: var(--navmut);
  margin-top: 22px;
  max-width: 470px;
  text-wrap: pretty;
}

.sl-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 32px; }

.sl-cta {
  height: 52px;
  padding: 0 6px 0 22px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--lime);
  color: var(--ink);
  font: 600 15px/1 'Outfit', system-ui, sans-serif;
  box-shadow: inset 0 1px 0 var(--hi), var(--depth);
}
.sl-cta .sl-pip { width: 40px; height: 40px; border-radius: 20px; }

.sl-ghost {
  height: 52px;
  padding: 0 24px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  background: var(--card);
  color: var(--tx);
  font: 500 15px/1 'Outfit', system-ui, sans-serif;
  box-shadow: var(--edge);
}

.sl-ghost--sm {
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  flex: none;
  font-size: 14px;
}

.sl-notes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 26px 0 0;
  padding: 0;
  font: 400 12.5px/1 'Outfit', system-ui, sans-serif;
  color: var(--navmut);
}
.sl-notes li { list-style: none; }
.sl-dot { width: 3px; height: 3px; border-radius: 2px; background: var(--fnt); }

/* ============================== Kennzahlen ============================== */

.sl-stats {
  background: var(--card-tr);
  border-radius: 24px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  box-shadow: var(--edge);
  color: var(--tx);
  margin: 0;
}
.sl-stats > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.sl-stats dt { font: 600 30px/1 'Outfit', system-ui, sans-serif; letter-spacing: -1.2px; }
.sl-stats dd { font: 400 13px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); margin: 9px 0 0; }

/* ============================== Überschriften ============================== */

.sl-h2 {
  font: 600 44px/1.08 'Outfit', system-ui, sans-serif;
  letter-spacing: -2px;
  color: var(--navtx);
  text-wrap: pretty;
}

.sl-head2 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.sl-head2 p {
  font: 300 16.5px/1.6 'Outfit', system-ui, sans-serif;
  color: var(--navmut);
  margin-top: 16px;
  text-wrap: pretty;
}
.sl-head2 > div { max-width: 620px; }

/* ============================== Bento ============================== */

.sl-bento {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: 14px;
  margin-top: 36px;
}

.sl-card {
  border-radius: 26px;
  padding: 26px;
  background: var(--card);
  box-shadow: var(--edge);
  color: var(--tx);
}
.sl-card--tr { background: var(--card-tr); }
.sl-card--bl { background: var(--card-bl); }
.sl-card--d { background: var(--card-d); }
.sl-card--t { background: var(--card-t); }

.sl-card h3 { font: 600 19px/1.25 'Outfit', system-ui, sans-serif; color: var(--tx); text-wrap: pretty; }
.sl-card p { font: 400 13.5px/1.6 'Outfit', system-ui, sans-serif; color: var(--mut); margin-top: 10px; text-wrap: pretty; }

.sl-attr { padding: 28px 28px 0; overflow: hidden; display: flex; flex-direction: column; }
.sl-attr h3 { font-size: 21px; }
.sl-attr p { font-size: 14px; margin-top: 11px; }
.sl-attr__panel {
  margin-top: 26px;
  background: var(--inset);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px 24px;
  box-shadow: var(--edge);
  flex: 1;
}
.sl-attr__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font: 400 11.5px/1 'Outfit', system-ui, sans-serif;
  color: var(--fnt);
}
.sl-attr__top b { font: 600 13px/1 'Outfit', system-ui, sans-serif; color: var(--tx); }
.sl-attr__rows { display: flex; flex-direction: column; gap: 13px; margin-top: 18px; padding: 0; }
.sl-attr__rows li { list-style: none; }
.sl-attr__row {
  display: flex;
  justify-content: space-between;
  font: 500 12.5px/1 'Outfit', system-ui, sans-serif;
  color: var(--tx);
}

.sl-meter { height: 7px; border-radius: 4px; background: var(--surf3); margin-top: 8px; }
.sl-meter i { display: block; height: 7px; border-radius: 4px; background: var(--mut); width: var(--w, 0%); }
.sl-meter--lime i { background: var(--lime); }
.sl-meter--warn i { background: #FF6B5A; }
.sl-meter--tall, .sl-meter--tall i { height: 8px; border-radius: 5px; }

.sl-wide { grid-column: span 2; padding: 28px; display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: center; }
.sl-wide h3 { font-size: 21px; }
.sl-wide p { font-size: 14px; margin-top: 11px; }

.sl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding: 0; }
.sl-tags li { list-style: none; }
.sl-tag {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 14px;
  background: var(--surf2);
  font: 500 12px/1.2 'Outfit', system-ui, sans-serif;
  color: var(--mut);
  white-space: nowrap;
}
.sl-tag--edge { background: var(--card-t); font-size: 11.5px; box-shadow: inset 0 0 0 1px var(--line); }

.sl-bars { display: flex; align-items: flex-end; gap: 7px; height: 132px; padding: 0; margin: 0; }
.sl-bars li {
  flex: 1;
  border-radius: 7px 7px 3px 3px;
  background: var(--surf3);
  height: var(--h, 40%);
  list-style: none;
}
.sl-bars li:last-child { background: var(--lime); }

/* ------------------------------ Stimmung ------------------------------ */

.sl-gauge { width: 100%; height: 158px; margin-top: 14px; }
.sl-gauge__read {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-top: -6px;
}
.sl-gauge__read b { font: 600 34px/1 'Outfit', system-ui, sans-serif; letter-spacing: -1.3px; }
.sl-gauge__read span { font: 600 14px/1 'Outfit', system-ui, sans-serif; color: var(--mut); }
.sl-gauge__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.sl-scale { display: flex; gap: 3px; }
.sl-scale i { flex: 1; height: 7px; background: var(--surf3); }
.sl-scale i:first-child { border-radius: 4px 1px 1px 4px; }
.sl-scale i:last-child { border-radius: 1px 4px 4px 1px; }
.sl-scale i.is-on { background: var(--lime); }
.sl-marks { position: relative; height: 12px; }
.sl-marks i {
  position: absolute;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--navtx);
}
.sl-marks .sl-marks__now { left: var(--now, 50%); top: -10px; width: 3px; height: 15px; box-shadow: 0 0 0 2.5px var(--surf); }
.sl-marks .sl-marks__was { left: var(--was, 50%); top: -7px; width: 2px; height: 9px; background: var(--fnt); }
.sl-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.sl-trio dt { font: 400 11px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); }
.sl-trio dd { font: 500 14px/1 'Outfit', system-ui, sans-serif; margin: 6px 0 0; }

.sl-tax { margin-top: 20px; background: var(--inset); border-radius: 16px; padding: 16px 17px; box-shadow: var(--edge); }
.sl-tax__row { display: flex; justify-content: space-between; font: 400 12px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); }
.sl-tax__due { display: flex; justify-content: space-between; align-items: baseline; margin-top: 15px; font: 400 12px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); }
.sl-tax__due b { font: 600 17px/1 'Outfit', system-ui, sans-serif; color: var(--tx); }

/* ------------------------------ Broker-Kranz ------------------------------ */

.sl-orbit { position: relative; width: 216px; height: 216px; margin: 18px auto 0; }
.sl-orbit i, .sl-orbit b, .sl-orbit em { position: absolute; }
.sl-orbit__ring { inset: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.sl-orbit__ring--in { inset: 44px; }
.sl-orbit__hub {
  left: 75px;
  top: 75px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(168deg, #2A2C28, #0A0B09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 12px 24px -10px rgba(0, 0, 0, .9);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sl-orbit em {
  left: var(--x);
  top: var(--y);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(168deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 52%), var(--c, #1E1E20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 16px -8px rgba(0, 0, 0, .8);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 'Outfit', system-ui, sans-serif;
  font-style: normal;
  color: #FFFFFF;
}

/* ============================== Rechner ============================== */

.sl-calc-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 14px; margin-top: 34px; align-items: start; }

.sl-calc { border-radius: 26px; padding: 28px 30px 26px; background: var(--card-bl); box-shadow: var(--edge); color: var(--tx); }
.sl-calc__top { display: flex; align-items: baseline; justify-content: space-between; }
.sl-calc__top h3 { font: 600 20px/1 'Outfit', system-ui, sans-serif; letter-spacing: -.5px; }
.sl-calc__live { display: flex; align-items: center; gap: 7px; font: 400 12px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); }
.sl-calc__live i { width: 6px; height: 6px; border-radius: 3px; background: var(--lime); }

.sl-fields { display: flex; flex-direction: column; gap: 19px; margin-top: 24px; }
.sl-field__row { display: flex; align-items: baseline; justify-content: space-between; }
.sl-field__row label { font: 400 13.5px/1 'Outfit', system-ui, sans-serif; color: var(--mut); }
.sl-field__row output { font: 600 15px/1 'Outfit', system-ui, sans-serif; color: var(--tx); }

.sl-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  outline: none;
  margin: 9px 0;
  background: linear-gradient(90deg, var(--lime) var(--p, 0%), var(--surf3) var(--p, 0%));
}
.sl-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: transparent; }
.sl-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 11px;
  background: #FFFFFF;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 5px 12px -3px rgba(0, 0, 0, .35);
  cursor: grab;
  transition: transform .12s;
}
.sl-range::-webkit-slider-thumb:active { transform: scale(1.08); cursor: grabbing; }
.sl-range::-moz-range-track { height: 6px; border-radius: 3px; background: transparent; }
.sl-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: #FFFFFF;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 5px 12px -3px rgba(0, 0, 0, .35);
}

.sl-calc__bars { display: flex; align-items: flex-end; gap: 4px; height: 92px; margin-top: 26px; padding: 0; }
.sl-calc__bars li {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: var(--lime);
  height: var(--h, 4%);
  list-style: none;
}
/* Der letzte Balken ist der Endwert und hebt sich ab. Der Entwurf nimmt dafür
   `--navtx` — das ist die Farbe der *Seite*, und im hellen Theme fast schwarz.
   Die Karte bleibt aber in beiden Themes dunkel, der Balken wäre dort also
   unsichtbar. `--tx` ist in beiden Fassungen weiss und meint dasselbe. */
.sl-calc__bars li:last-child { background: var(--tx); }

.sl-calc__out {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.sl-calc__out div:first-child { flex: 1; }
.sl-calc__out dt { font: 400 12.5px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); }
.sl-calc__out dd { margin: 9px 0 0; font: 600 17px/1 'Outfit', system-ui, sans-serif; color: var(--tx); }
.sl-calc__out .sl-calc__total { font-size: 32px; letter-spacing: -1.3px; }
.sl-calc__out .sl-calc__paid { font-weight: 500; color: var(--mut); }

.sl-seo { padding: 6px 4px 0; }
.sl-seo h3 {
  font: 600 27px/1.18 'Outfit', system-ui, sans-serif;
  color: var(--navtx);
  letter-spacing: -1.1px;
  margin-top: 14px;
  text-wrap: pretty;
}
.sl-seo > p { font: 300 15px/1.68 'Outfit', system-ui, sans-serif; color: var(--navmut); margin-top: 16px; text-wrap: pretty; }
.sl-seo .sl-kicker { color: var(--navmut); letter-spacing: 1.3px; }
.sl-seo__faq { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.sl-seo__faq dt { font: 600 14px/1.35 'Outfit', system-ui, sans-serif; color: var(--navtx); }
.sl-seo__faq dd { font: 400 13.5px/1.6 'Outfit', system-ui, sans-serif; color: var(--navmut); margin: 7px 0 0; text-wrap: pretty; }
.sl-seo .sl-tags { gap: 7px; margin-top: 24px; }

/* ============================== Tarife ============================== */

.sl-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; align-items: stretch; }

.sl-plan {
  border-radius: 26px;
  padding: 30px;
  background: var(--card-tr);
  box-shadow: var(--edge);
  display: flex;
  flex-direction: column;
  color: var(--tx);
}
.sl-plan__name { font: 600 17px/1 'Outfit', system-ui, sans-serif; }
.sl-plan__price { display: flex; align-items: baseline; gap: 9px; margin-top: 18px; min-height: 44px; }
.sl-plan__price b { font: 600 44px/1 'Outfit', system-ui, sans-serif; letter-spacing: -2px; }
.sl-plan__price span { font: 400 13.5px/1 'Outfit', system-ui, sans-serif; color: var(--mut); }
.sl-plan__sub { font: 400 12.5px/1.4 'Outfit', system-ui, sans-serif; color: var(--fnt); margin-top: 12px; min-height: 34px; }

.sl-feats { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 0; padding: 0; flex: 1; }
.sl-feats li { display: flex; align-items: center; gap: 11px; font: 400 14px/1.4 'Outfit', system-ui, sans-serif; list-style: none; }
.sl-tick {
  width: 19px;
  height: 19px;
  border-radius: 10px;
  background: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.sl-feats li.is-off { color: var(--fnt); }
.sl-feats li.is-off .sl-tick { background: var(--surf3); color: var(--fnt); }

.sl-plan__go {
  height: 48px;
  border-radius: 24px;
  background: var(--surf2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  font: 500 14.5px/1 'Outfit', system-ui, sans-serif;
  color: var(--tx);
  box-shadow: inset 0 1px 0 var(--hi), inset 0 0 0 1px var(--line);
}

.sl-plan--pro {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, #6E6EFF 0%, #4E4EF2 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 30px 60px -34px rgba(91, 91, 245, .75);
  color: #FFFFFF;
}
.sl-plan--pro::before {
  content: '';
  position: absolute;
  right: -58px;
  top: -72px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  pointer-events: none;
}
.sl-plan--pro > * { position: relative; }
.sl-plan--pro .sl-plan__price span { color: rgba(255, 255, 255, .82); }
.sl-plan--pro .sl-plan__sub { color: rgba(255, 255, 255, .7); }
.sl-plan__head { display: flex; align-items: flex-start; justify-content: space-between; }
.sl-trial {
  height: 24px;
  padding: 0 11px;
  border-radius: 12px;
  background: var(--lime);
  color: var(--ink);
  font: 600 10.5px/24px 'Outfit', system-ui, sans-serif;
  letter-spacing: .5px;
  white-space: nowrap;
}
.sl-plan__go--lime {
  position: relative;
  background: var(--lime);
  color: var(--ink);
  font-weight: 600;
  box-shadow: none;
}
.sl-plan__go--lime .sl-pip { position: absolute; right: 8px; width: 32px; height: 32px; border-radius: 16px; }

.sl-terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.sl-terms > div { border-radius: 20px; padding: 22px; box-shadow: var(--edge); color: var(--tx); }
.sl-terms dt { font: 600 14.5px/1.2 'Outfit', system-ui, sans-serif; }
.sl-terms dd { font: 400 12.5px/1.55 'Outfit', system-ui, sans-serif; color: var(--fnt); margin: 9px 0 0; text-wrap: pretty; }

/* ------------------------------ Preisseite ------------------------------ */

.sl-price-head { padding-top: 78px; text-align: center; }
.sl-price-head .sl-kicker { color: var(--navmut); letter-spacing: 1.3px; }
.sl-price-head h1 {
  font: 600 60px/1.05 'Outfit', system-ui, sans-serif;
  letter-spacing: -2.8px;
  margin-top: 18px;
  color: var(--navtx);
  text-wrap: pretty;
}
.sl-price-head p {
  font: 300 17px/1.6 'Outfit', system-ui, sans-serif;
  color: var(--navmut);
  margin: 18px auto 0;
  max-width: 520px;
  text-wrap: pretty;
}

.sl-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 22px;
  background: var(--card);
  margin-top: 28px;
  box-shadow: var(--edge);
}
.sl-switch button {
  height: 34px;
  padding: 0 15px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  font: 600 13px/1 'Outfit', system-ui, sans-serif;
  /* Der Schalter sitzt auf einer dunklen Fläche, in beiden Themes. */
  color: var(--mut);
  cursor: pointer;
  white-space: nowrap;
}
.sl-switch button[aria-pressed='true'] { background: var(--lime); color: var(--ink); }

.sl-narrow { max-width: 1000px; }

/* ============================== Nachrichten ============================== */

.sl-news-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--navtx);
}
.sl-news-head h1 {
  font: 600 50px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: -2.4px;
  margin-top: 12px;
  color: var(--navtx);
}
.sl-news-head .sl-kicker { color: var(--navmut); letter-spacing: 1.3px; }
.sl-when { text-align: right; font: 500 12px/1 'Outfit', system-ui, sans-serif; color: var(--navmut); }
.sl-when__live { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 9px; }
.sl-when__live i { width: 6px; height: 6px; border-radius: 3px; background: var(--up); }

.sl-strip {
  display: flex;
  overflow-x: auto;
  padding: 14px 0;
  margin: 0;
  border-bottom: 1px solid var(--rule);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.sl-strip::-webkit-scrollbar { display: none; }
.sl-strip li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 0 18px;
  border-right: 1px solid var(--rule);
  white-space: nowrap;
  list-style: none;
  font: 400 11.5px/1 'Outfit', system-ui, sans-serif;
  color: var(--navmut);
}
.sl-strip b { font-weight: 600; color: var(--navtx); }
.sl-strip .sl-up { font-weight: 600; color: var(--up); }
.sl-strip .sl-down { font-weight: 600; color: var(--down); }

.sl-news { display: grid; grid-template-columns: 1fr 316px; gap: 36px; margin-top: 28px; align-items: start; }

.sl-lede { display: block; }
.sl-lede__meta { display: flex; align-items: center; gap: 11px; font: 400 12px/1 'Outfit', system-ui, sans-serif; color: var(--navmut); }
.sl-badge {
  padding: 6px 11px;
  border-radius: 12px;
  background: var(--lime);
  color: var(--ink);
  font: 600 11px/1.2 'Outfit', system-ui, sans-serif;
}
.sl-lede h2 {
  font: 600 44px/1.06 'Outfit', system-ui, sans-serif;
  color: var(--navtx);
  letter-spacing: -2px;
  margin-top: 16px;
  max-width: 700px;
  text-wrap: pretty;
}
.sl-lede p {
  font: 300 17px/1.6 'Outfit', system-ui, sans-serif;
  color: var(--navmut);
  margin-top: 16px;
  max-width: 640px;
  text-wrap: pretty;
}

.sl-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.sl-mini { border-radius: 22px; padding: 22px; box-shadow: var(--edge); color: var(--tx); }
.sl-mini__label { font: 400 11px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); }
.sl-mini__read { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.sl-mini__read b { font: 600 38px/1 'Outfit', system-ui, sans-serif; letter-spacing: -1.6px; }
.sl-mini__read span { font: 600 13px/1 'Outfit', system-ui, sans-serif; color: #A8CF3C; }
.sl-mini__foot { font: 400 11.5px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); margin-top: 12px; }
.sl-heat { display: flex; gap: 3px; margin-top: 16px; }
.sl-heat i { flex: 1; height: 7px; }
.sl-heat i:nth-child(1) { border-radius: 4px 1px 1px 4px; background: #D93A2B; }
.sl-heat i:nth-child(2) { background: #E4842B; }
.sl-heat i:nth-child(3) { background: #8FAE3A; }
.sl-heat i:nth-child(4) { background: var(--lime); }
.sl-heat i:nth-child(5) { border-radius: 1px 4px 4px 1px; background: var(--surf3); }

.sl-movers { display: flex; flex-direction: column; gap: 11px; margin: 14px 0 0; padding: 0; }
.sl-movers li {
  display: flex;
  justify-content: space-between;
  font: 500 12.5px/1 'Outfit', system-ui, sans-serif;
  list-style: none;
}
.sl-movers .sl-up { color: #A8CF3C; }
.sl-movers .sl-down { color: var(--down); }

.sl-latest { margin-top: 30px; }
.sl-latest > .sl-kicker { color: var(--navmut); letter-spacing: 1.3px; display: block; padding-bottom: 12px; }
.sl-story {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.sl-story__time { font: 600 12px/1 'Outfit', system-ui, sans-serif; color: var(--navtx); }
.sl-story__desk { font: 500 10.5px/1 'Outfit', system-ui, sans-serif; color: var(--navmut); letter-spacing: .7px; margin-top: 7px; }
.sl-story h3 {
  font: 600 18px/1.3 'Outfit', system-ui, sans-serif;
  color: var(--navtx);
  letter-spacing: -.4px;
  text-wrap: pretty;
}
.sl-story p {
  font: 400 13.5px/1.6 'Outfit', system-ui, sans-serif;
  color: var(--navmut);
  margin-top: 8px;
  max-width: 560px;
  text-wrap: pretty;
}
.sl-story__by { font: 400 11.5px/1 'Outfit', system-ui, sans-serif; color: var(--navmut); margin-top: 10px; }

.sl-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 88px; }
.sl-rail .sl-mini .sl-kicker { display: block; }
.sl-rank { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 0; padding: 0; }
.sl-rank li { display: flex; gap: 12px; font: 500 13.5px/1.35 'Outfit', system-ui, sans-serif; list-style: none; text-wrap: pretty; }
.sl-rank b { font-weight: 600; color: var(--fnt); }
.sl-diary { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; padding: 0; }
.sl-diary li { display: flex; gap: 12px; font: 500 12.5px/1.3 'Outfit', system-ui, sans-serif; list-style: none; }
.sl-diary b { color: var(--fnt); width: 48px; flex: none; font-weight: 500; }
.sl-rail h2 { font: 600 15px/1.3 'Outfit', system-ui, sans-serif; color: var(--tx); text-wrap: pretty; }
.sl-rail h2 + p { font: 400 12.5px/1.55 'Outfit', system-ui, sans-serif; color: var(--mut); margin-top: 9px; text-wrap: pretty; }

.sl-sub {
  height: 40px;
  border-radius: 20px;
  background: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  font: 600 13px/1 'Outfit', system-ui, sans-serif;
  color: var(--ink);
}

/* ============================== App-Band ============================== */

.sl-app {
  background: var(--card-d);
  border-radius: 30px;
  padding: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  box-shadow: var(--edge);
  color: var(--tx);
}
.sl-app h2 { font: 600 40px/1.1 'Outfit', system-ui, sans-serif; letter-spacing: -1.8px; text-wrap: pretty; }
.sl-app p { font: 400 15.5px/1.6 'Outfit', system-ui, sans-serif; color: var(--mut); margin-top: 16px; max-width: 440px; text-wrap: pretty; }
.sl-stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.sl-store {
  height: 46px;
  padding: 0 18px;
  border-radius: 23px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surf2);
  color: var(--tx);
  font: 600 13.5px/1 'Outfit', system-ui, sans-serif;
  box-shadow: var(--edge);
}
.sl-store--light { background: var(--btn); color: var(--onbtn); box-shadow: inset 0 1px 0 var(--hi), var(--depth); }

.sl-qr {
  background: #FFFFFF;
  border-radius: 26px;
  padding: 22px 22px 20px;
  margin-right: 26px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 26px 50px -30px rgba(0, 0, 0, .55);
  flex: none;
  text-align: center;
}
.sl-qr figcaption { font: 600 15px/1 'Outfit', system-ui, sans-serif; color: var(--ink); }
.sl-qr svg,
.sl-qr img { display: block; width: 164px; height: 164px; margin: 14px auto 0; }
.sl-qr small { display: block; font: 400 11px/1 'Outfit', system-ui, sans-serif; color: #71727A; margin-top: 12px; }

/* ============================== FAQ ============================== */

.sl-faq { max-width: 900px; }
.sl-faq h2 { text-align: center; }
.sl-faq__list { margin-top: 36px; border-bottom: 1px solid var(--rule); }
.sl-faq__item { border-top: 1px solid var(--rule); }
.sl-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 2px;
  text-align: left;
  font: 600 16px/1.35 'Outfit', system-ui, sans-serif;
  color: var(--navtx);
  cursor: pointer;
  text-wrap: pretty;
}
.sl-faq__q svg { flex: none; color: var(--navmut); transition: transform .18s; }
.sl-faq__q[aria-expanded='true'] svg { transform: rotate(180deg); }
.sl-faq__a {
  font: 400 14.5px/1.65 'Outfit', system-ui, sans-serif;
  color: var(--navmut);
  padding: 0 60px 24px 2px;
  max-width: 720px;
  text-wrap: pretty;
}
.sl-faq__a[hidden] { display: none; }

/* ============================== Feste Anteile ==============================
 * Der Entwurf schreibt Balkenhöhen und Ringpositionen als `style`-Attribut.
 * Unter `style-src 'self'` geht das nicht, und ein Wert, der sich nie ändert,
 * gehört ohnehin nicht ins Dokument. Deshalb hier, einmal, als Klasse. */

.sl-w16 { --w: 16%; }
.sl-w26 { --w: 26%; }
.sl-w39 { --w: 39%; }
.sl-w81 { --w: 81%; }
.sl-w83 { --w: 83%; }

.sl-b38 { --h: 38%; }
.sl-b46 { --h: 46%; }
.sl-b52 { --h: 52%; }
.sl-b59 { --h: 59%; }
.sl-b68 { --h: 68%; }
.sl-b81 { --h: 81%; }
.sl-b100 { --h: 100%; }

/* Neun Marken auf dem Kranz, gleichmässig ab Zwölf-Uhr. */
.sl-o1 { --x: 88px; --y: 0; --c: #1E1E20; }
.sl-o2 { --x: 145px; --y: 21px; --c: #2647A8; }
.sl-o3 { --x: 175px; --y: 73px; --c: #1E7FD4; }
.sl-o4 { --x: 164px; --y: 132px; --c: #E4842B; }
.sl-o5 { --x: 118px; --y: 171px; --c: #12A06A; }
.sl-o6 { --x: 58px; --y: 171px; --c: #3AC15B; }
.sl-o7 { --x: 12px; --y: 132px; --c: #7B3FE4; }
.sl-o8 { --x: 1px; --y: 73px; --c: #E8386A; }
.sl-o9 { --x: 31px; --y: 21px; --c: #26272C; }

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

@media (max-width: 1080px) {
  .sl-hero { grid-template-columns: 1fr; gap: 40px; }
  .sl-bento { grid-template-columns: 1fr 1fr; }
  .sl-attr { grid-column: span 2; }
  .sl-wide { grid-template-columns: 1fr; }
  .sl-calc-grid { grid-template-columns: 1fr; }
  .sl-news { grid-template-columns: 1fr; }
  .sl-rail { position: static; }
}

/* ============================== Telefon ==============================
 * Der Entwurf stapelt nicht die Desktop-Spalten, er wechselt das Prinzip:
 * Reihen, die seitlich laufen, statt Spalten, die untereinander stehen.
 * Kennzahlen und Tarife liest man auf dem Telefon mit dem Daumen quer.
 */

@media (max-width: 760px) {
  .sl-h1 { font-size: 40px; letter-spacing: -1.9px; margin-top: 18px; }
  .sl-lead { font-size: 15px; margin-top: 14px; }
  .sl-flag { height: 27px; gap: 8px; }
  .sl-flag__txt { font-size: 11.5px; }
  .sl-actions { flex-direction: column; gap: 9px; margin-top: 20px; }
  .sl-actions > * { width: 100%; justify-content: center; padding: 0 18px; }
  .sl-cta .sl-pip { display: none; }
  .sl-notes { gap: 12px; font-size: 11.5px; }

  .sl-h2, .sl-lede h2 { font-size: 28px; letter-spacing: -1.2px; }
  .sl-price-head { padding-top: 34px; }
  .sl-price-head h1 { font-size: 38px; letter-spacing: -1.8px; }
  .sl-news-head h1 { font-size: 32px; letter-spacing: -1.4px; }
  .sl-app h2 { font-size: 26px; letter-spacing: -1.1px; }
  .sl-faq h2 { font-size: 26px; letter-spacing: -1.1px; }
  .sl-head2 { flex-direction: column; align-items: flex-start; gap: 18px; }


  /* Der negative Rand hebt die Spaltenbreite auf, damit die Reihe den
     Bildschirmrand berührt und die Karte am Rand angeschnitten steht — das
     ist das Signal, dass es seitlich weitergeht. */
  .sl-stats,
  .sl-plans {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: -18px;
    padding-inline: 18px;
  }
  .sl-stats::-webkit-scrollbar,
  .sl-plans::-webkit-scrollbar { display: none; }

  .sl-stats { gap: 10px; padding-block: 0; background: none; border-radius: 0; box-shadow: none; }
  .sl-stats > div,
  .sl-stats > div + div {
    flex: none;
    width: 118px;
    scroll-snap-align: start;
    padding: 16px;
    border-left: 0;
    border-radius: 18px;
    background: var(--card-t);
    box-shadow: inset 0 1px 0 var(--hi), inset 0 0 0 1px var(--line);
  }
  .sl-stats dt { font-size: 19px; letter-spacing: -.7px; }
  .sl-stats dd { font-size: 10.5px; line-height: 1.3; margin-top: 7px; }

  .sl-plans { gap: 12px; }
  .sl-plans > .sl-plan { flex: none; width: min(300px, 82vw); scroll-snap-align: start; padding: 22px; }
  .sl-plan__price b { font-size: 38px; letter-spacing: -1.7px; }

  .sl-bento, .sl-terms, .sl-duo { grid-template-columns: 1fr; gap: 11px; }
  .sl-attr, .sl-wide { grid-column: auto; }
  .sl-card, .sl-attr, .sl-wide, .sl-calc { border-radius: 22px; padding: 20px; }
  .sl-attr { padding-bottom: 0; }
  .sl-wide { grid-template-columns: 1fr; gap: 18px; }
  .sl-calc-grid { gap: 22px; margin-top: 22px; }
  .sl-orbit { width: 200px; height: 200px; }

  .sl-news { gap: 24px; margin-top: 20px; }
  .sl-story { grid-template-columns: 62px 1fr; gap: 12px; }
  .sl-story h3 { font-size: 16px; }

  .sl-app { grid-template-columns: 1fr; padding: 24px; border-radius: 24px; }
  .sl-qr { margin: 0 auto; }
  .sl-stores > * { flex: 1; justify-content: center; }
  .sl-faq__a { padding-right: 16px; }
}

/* ============================== Einblenden ==============================
 * Die Regeln greifen nur, wenn `theme.js` die Klasse `sl-anim` gesetzt hat —
 * also nur dort, wo ein IntersectionObserver existiert und niemand um weniger
 * Bewegung gebeten hat. Ohne die Klasse steht alles sichtbar da: eine Seite,
 * deren Text von einem Skript abhängt, ist keine Seite.
 *
 * Bewegt werden ausschliesslich `opacity` und `transform`. Beides läuft im
 * Compositor, ohne Layout und ohne Neuzeichnen.
 *
 * Der Held fehlt in der Liste, und zwar mit Absicht: er ist das grösste
 * Element im ersten Bild, und was mit `opacity: 0` beginnt, verschiebt den
 * Largest Contentful Paint um die Dauer seiner eigenen Animation. Bewegung
 * unterhalb der Falz kostet nichts, Bewegung im ersten Bild kostet Ladezeit.
 *
 * `:where()` trägt keine Spezifität — deshalb gewinnt `.is-in` darunter ohne
 * doppelte Klasse und ohne `!important`.
 */

.sl-anim :where(
  .sl-stats > div,
  .sl-head2,
  .sl-h2:not(.sl-head2 .sl-h2),
  .sl-bento > article,
  .sl-calc,
  .sl-seo,
  .sl-plans > .sl-plan,
  .sl-terms > div,
  .sl-app,
  .sl-faq__item,
  .sl-lede,
  .sl-duo > article,
  .sl-latest,
  .sl-rail > section,
  .sl-ad
) {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

.sl-anim .is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .62s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms),
    transform .62s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms);
}

/* Kein `will-change`: Opazität und Transform laufen ohnehin im Compositor,
   und die Ankündigung würde für jedes der rund vierzig Elemente dauerhaft
   eine eigene Ebene reservieren — teurer als der Gewinn. */

@media (prefers-reduced-motion: reduce) {
  .sl-anim :where(.sl-stats > div, .sl-bento > article, .sl-plans > .sl-plan, .sl-faq__item, .sl-app, .sl-calc, .sl-seo, .sl-lede, .sl-latest, .sl-h2, .sl-head2, .sl-terms > div, .sl-duo > article, .sl-rail > section, .sl-ad) {
    opacity: 1;
    transform: none;
  }
}