/* StockLife — die Marktoberflaeche.
 *
 * Umsetzung von `StockLife Markt.dc.html` (claude.ai/design, Projekt
 * b1f14639-…). Der Entwurf zeichnet ausschliesslich mit `style`-Attributen;
 * die Seite liefert `style-src 'self'` (web/_headers), deshalb steht hier jede
 * Regel als Klasse. Radien, Verlaeufe, Schattenstapel, Schriftgrade und beide
 * Variablensaetze sind aus dem Export uebernommen, nicht nachempfunden.
 *
 * Anders als `stocklife.css` kehrt dieses Blatt im hellen Theme wirklich um:
 * der Entwurf setzt dort weisse Karten auf eine warme Flaeche. Es gibt darum
 * nur ein Textpaar (`--tx`/`--mut`) und keine zweite Reihe fuer die Seite.
 *
 * Vier Sprachen laufen von rechts nach links (ar, he, fa, ur). Jede Kante,
 * die eine Seite meint, steht deshalb als logische Eigenschaft — `inline-start`
 * statt `left` —, damit dieselbe Regel in beiden Laufrichtungen stimmt.
 */

/* Outfit, SIL OFL 1.1, selbst gehostet fuer `font-src 'self'`. Dieselbe Datei
   wie in `stocklife.css`; ein zweites Exemplar waere 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: #191A1D;
  --surf3: #232428;
  --tx: #FFFFFF;
  --mut: #A0A1A8;
  --fnt: #71727A;
  --line: rgba(255, 255, 255, .09);
  --lime: #CBF24C;
  --ring: rgba(255, 255, 255, .14);
  --glass: rgba(10, 10, 11, .76);
  --up: #3BD97E;
  --dn: #FF6257;
  --ink: #0B0B0B;
  --violet: #7C8CF8;
  --mauve: #C79BFF;
  --depth: 0 18px 38px -26px rgba(0, 0, 0, .75);
  --shell: 1280px;
  --edge: 26px;

  /* ------------------------------ Bewegung ------------------------------
   *
   * Vier Kurven und vier Dauern, und nichts bewegt sich ausserhalb davon.
   *
   * `--ease` ist die Kurve, die eine Bewegung schnell losgehen und langsam
   * ankommen laesst — der Grund, warum eine Flaeche „gefuehrt" wirkt statt
   * „animiert". `--spring` schiesst um zwei Prozent ueber und faellt zurueck;
   * sie gehoert an Dinge, die auf einen Druck antworten, und an nichts sonst.
   *
   * Bewegt werden ausschliesslich `opacity` und `transform`. Beides laeuft im
   * Compositor, ohne Layout und ohne Neuzeichnen — der Unterschied zwischen
   * einer Oberflaeche, die auf einem alten Telefon weich bleibt, und einer,
   * die dort ruckelt.
   */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.42, .64, 1);
  --press: cubic-bezier(.4, 0, .2, 1);
  --t-tap: 110ms;
  --t-fast: 180ms;
  --t-base: 260ms;
  --t-slow: 420ms;
  --t-rise: 620ms;
}

[data-theme='light'] {
  --bg: #F6F6F4;
  --surf: #FFFFFF;
  --surf2: #FFFFFF;
  --surf3: #EDEDEA;
  --tx: #0C0D10;
  --mut: #5C5D64;
  --fnt: #87888F;
  --line: rgba(12, 13, 16, .09);
  --ring: rgba(12, 13, 16, .13);
  --glass: rgba(246, 246, 244, .82);
  --up: #12A85B;
  --dn: #DC3B30;
  --depth: 0 20px 40px -28px rgba(20, 22, 30, .35);
}

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

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font: 400 15px/1.5 'Outfit', system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: .72; }

h1, h2, h3, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button {
  margin: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
svg { display: block; }

/* Der Ring traegt die Textfarbe der Seite, nicht die Limette: auf einer
   limettenen Schaltflaeche laege er sonst auf sich selbst. */
:focus-visible {
  outline: 2px solid var(--tx);
  outline-offset: 2px;
  border-radius: 8px;
}

::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-thumb { background: var(--surf3); border-radius: 3px; }

/* Nur fuer Vorleser: die Ueberschrift, die die Seite benennt. Der Entwurf
   zeichnet sie nicht, ein Dokument ohne sie beginnt aber mit einer Liste. */
.m-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.m-up { color: var(--up); }
.m-dn { color: var(--dn); }
.m-shell { max-width: var(--shell); margin-inline: auto; }

/* ============================== Kopf ============================== */

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

.m-head-in {
  max-width: var(--shell);
  margin-inline: auto;
  min-height: 66px;
  padding-inline: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.m-brand { display: flex; align-items: center; gap: 7px; flex: none; }
.m-brand span { font: 600 17px/1 'Outfit', system-ui, sans-serif; letter-spacing: -.4px; }

.m-nav { display: flex; align-items: center; gap: 2px; flex: none; }
.m-nav a {
  height: 32px;
  padding-inline: 10px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  flex: none;
  font: 500 13.5px/1 'Outfit', system-ui, sans-serif;
  color: var(--mut);
  white-space: nowrap;
}
.m-nav a[aria-current='page'] { background: var(--surf3); color: var(--tx); }

.m-find { flex: 1 1 0; min-width: 150px; position: relative; max-width: 460px; margin-inline: auto; }
.m-find-box {
  height: 40px;
  border-radius: 12px;
  background: var(--surf);
  box-shadow: inset 0 0 0 1px var(--ring);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 12px;
}
.m-find-box svg { flex: none; color: var(--fnt); }
.m-find input {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--tx);
  font: 400 14px/1 'Outfit', system-ui, sans-serif;
}
.m-find input::placeholder { color: var(--fnt); }

.m-drop {
  position: absolute;
  top: 48px;
  inset-inline: 0;
  border-radius: 16px;
  background: var(--surf);
  box-shadow: inset 0 0 0 1px var(--ring), 0 30px 60px -30px rgba(0, 0, 0, .7);
  padding: 8px;
  z-index: 90;
  max-height: 392px;
  overflow: auto;
}
.m-drop[hidden] { display: none; }
.m-drop-title {
  font: 600 10px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: 1.1px;
  color: var(--fnt);
  padding: 10px 10px 8px;
}
.m-drop-row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding-inline: 10px;
  border-radius: 11px;
  width: 100%;
}
.m-drop-row:hover { background: var(--surf3); opacity: 1; }

.m-ini {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--surf3);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 12px/1 'Outfit', system-ui, sans-serif;
  flex: none;
}

.m-row-mid { flex: 1; min-width: 0; text-align: start; }
.m-row-name {
  font: 500 13.5px/1.2 'Outfit', system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-row-meta {
  font: 400 11.5px/1.3 'Outfit', system-ui, sans-serif;
  color: var(--fnt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-row-end { text-align: end; flex: none; }
.m-row-px { font: 500 13px/1.2 'Outfit', system-ui, sans-serif; }
.m-row-chg { font: 500 11.5px/1.3 'Outfit', system-ui, sans-serif; }

.m-head-end { display: flex; align-items: center; gap: 8px; flex: none; }
.m-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(--mut);
  flex: none;
}
.m-account {
  height: 36px;
  padding-inline: 16px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  background: var(--lime);
  color: var(--ink);
  font: 600 13px/1 'Outfit', system-ui, sans-serif;
  white-space: nowrap;
}

/* Das Kursband. Es rollt seitlich, also braucht es einen Tabstopp — eine
   Flaeche, die nur mit der Maus zu bewegen ist, ist keine (WCAG 2.1.1). */
.m-tape-wrap { border-top: 1px solid var(--line); background: var(--bg); }
.m-tape {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--edge);
  display: flex;
  align-items: center;
  gap: 26px;
  height: 38px;
  overflow-x: auto;
  scrollbar-width: none;
}
.m-tape::-webkit-scrollbar { display: none; }
.m-tape li { display: flex; align-items: center; gap: 7px; flex: none; }
.m-tape span { font: 500 12px/1 'Outfit', system-ui, sans-serif; }
.m-tape .m-tape-n { color: var(--mut); }

/* ============================== Flaechen ============================== */

.m-wrap { max-width: var(--shell); margin-inline: auto; padding: 22px var(--edge) 0; }
.m-wrap-n { max-width: 1180px; margin-inline: auto; padding: 34px var(--edge) 0; }
.m-sect { max-width: 1180px; margin-inline: auto; padding: 44px var(--edge) 0; }

.m-card {
  border-radius: 20px;
  background: var(--surf);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.m-panel {
  border-radius: 18px;
  background: var(--surf);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 16px 18px;
}
.m-panel-t { font: 600 13.5px/1 'Outfit', system-ui, sans-serif; }

/* Reiterreihen. Der Entwurf zeichnet die Auswahl als Linie unter dem Wort,
   nicht als Flaeche — `box-shadow` statt `border`, damit nichts umbricht. */
.m-tabs {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.m-tabs::-webkit-scrollbar { display: none; }
.m-tab {
  padding: 0 0 11px;
  font: 500 14px/1 'Outfit', system-ui, sans-serif;
  color: var(--mut);
  box-shadow: inset 0 -2px 0 transparent;
  white-space: nowrap;
  flex: none;
}
.m-tab[aria-selected='true'] { color: var(--tx); box-shadow: inset 0 -2px 0 var(--tx); }

/* Segmentschalter (Gewinner / Verlierer / Umsatz). */
.m-seg { display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: var(--surf3); flex: none; }
.m-seg button {
  height: 28px;
  padding-inline: 13px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  font: 500 12.5px/1 'Outfit', system-ui, sans-serif;
  color: var(--mut);
  white-space: nowrap;
}
.m-seg button[aria-selected='true'] { background: var(--surf); color: var(--tx); }
.m-seg-s { gap: 2px; padding: 2px; border-radius: 9px; }
.m-seg-s button { height: 22px; padding-inline: 9px; border-radius: 7px; font: 600 11px/1 'Outfit', system-ui, sans-serif; }

/* --------------------------- Indexkacheln --------------------------- */

.m-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.m-tile {
  border-radius: 18px;
  background: var(--surf);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 16px 18px 12px;
  min-width: 0;
}
.m-tile-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.m-tile-n {
  font: 600 13.5px/1 'Outfit', system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-tile-x { font: 400 11px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); flex: none; }
.m-tile-v { display: flex; align-items: baseline; gap: 9px; margin-top: 11px; }
.m-tile-v strong { font: 600 26px/1 'Outfit', system-ui, sans-serif; letter-spacing: -.9px; }
.m-tile-v span { font: 500 13px/1 'Outfit', system-ui, sans-serif; }
.m-spark { width: 100%; height: 44px; margin-top: 10px; }

/* --------------------------- Marktspalten --------------------------- */

.m-body {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 22px var(--edge) 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 336px);
  gap: 22px;
  align-items: start;
}
.m-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.m-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 130px; }

.m-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  gap: 16px;
}
.m-card-t { font: 600 17px/1 'Outfit', system-ui, sans-serif; letter-spacing: -.3px; }

/* Die Bewegerliste. Fuenf Spalten, und die Kopfzeile teilt das Raster —
   sonst stimmen die Ueberschriften nur zufaellig mit den Zahlen ueberein. */
.m-movers-h,
.m-mover {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(64px, .95fr) minmax(56px, .8fr) minmax(72px, 1.15fr) minmax(52px, .72fr);
  gap: 10px;
}
.m-movers-h {
  padding: 0 20px 9px;
  font: 600 10px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: 1px;
  color: var(--fnt);
  border-bottom: 1px solid var(--line);
}
.m-mover {
  align-items: center;
  padding: 11px 20px;
  border-bottom: 1px solid var(--line);
  width: 100%;
}
.m-mover:hover { background: var(--surf2); opacity: 1; }
.m-num { text-align: end; font: 500 13.5px/1 'Outfit', system-ui, sans-serif; }
.m-mover-n { display: flex; align-items: center; gap: 11px; min-width: 0; }
.m-mover-n .m-row-meta { font-size: 11px; }
.m-vol { text-align: end; font: 400 12px/1 'Outfit', system-ui, sans-serif; color: var(--mut); }

.m-band { height: 4px; border-radius: 2px; background: var(--surf3); position: relative; }
.m-band i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--w, 0%);
  border-radius: 2px;
  background: currentColor;
}
.m-band-f {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font: 400 10px/1 'Outfit', system-ui, sans-serif;
  color: var(--fnt);
}
.m-more { display: block; padding: 13px 20px; font: 500 13px/1 'Outfit', system-ui, sans-serif; color: var(--mut); }

/* ------------------------------ Meldungen ------------------------------ */

.m-news-h {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.m-h2 { font: 600 20px/1 'Outfit', system-ui, sans-serif; letter-spacing: -.5px; padding-bottom: 8px; }
.m-cats {
  display: flex;
  gap: 22px;
  align-items: flex-end;
  flex: 1;
  justify-content: flex-end;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
  overflow-x: auto;
}
.m-cats .m-tab { font-size: 13px; padding-bottom: 10px; }

.m-lead { margin-bottom: 14px; display: block; }
.m-lead-art {
  height: 210px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  background: linear-gradient(140deg, #1D3B2E 0%, #0F1A16 60%, #0B0C0D 100%);
}
.m-lead-art svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.m-kicker {
  position: relative;
  display: inline-flex;
  height: 24px;
  padding-inline: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: 600 11px/24px 'Outfit', system-ui, sans-serif;
  backdrop-filter: blur(8px);
}
.m-lead-in { padding: 20px 22px 22px; }
.m-lead-t {
  font: 600 24px/1.22 'Outfit', system-ui, sans-serif;
  letter-spacing: -.6px;
  text-wrap: pretty;
  max-width: 640px;
}
.m-lead-p {
  font: 400 14.5px/1.55 'Outfit', system-ui, sans-serif;
  color: var(--mut);
  margin-top: 10px;
  max-width: 680px;
  text-wrap: pretty;
}
.m-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  font: 400 12px/1 'Outfit', system-ui, sans-serif;
  color: var(--fnt);
}

.m-item {
  display: flex;
  gap: 16px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.m-item:hover { background: var(--surf2); opacity: 1; }
.m-item-time {
  width: 92px;
  flex: none;
  font: 400 11.5px/1.4 'Outfit', system-ui, sans-serif;
  color: var(--fnt);
  padding-top: 2px;
}
.m-item-mid { flex: 1; min-width: 0; }
.m-item-t { font: 500 15px/1.4 'Outfit', system-ui, sans-serif; text-wrap: pretty; }
.m-item-tags { display: flex; align-items: center; gap: 9px; margin-top: 7px; flex-wrap: wrap; }
.m-chip {
  height: 20px;
  padding-inline: 8px;
  border-radius: 10px;
  background: var(--surf3);
  font: 600 10.5px/20px 'Outfit', system-ui, sans-serif;
  color: var(--mut);
}
.m-src { font: 400 11.5px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); }
.m-item-end { flex: none; text-align: end; min-width: 80px; }
.m-item-sym { font: 500 12.5px/1.2 'Outfit', system-ui, sans-serif; }
.m-item-chg { font: 500 12px/1.3 'Outfit', system-ui, sans-serif; }

/* ------------------------------ Randspalte ------------------------------ */

.m-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.m-hot { display: flex; align-items: center; gap: 11px; padding: 7px 0; width: 100%; }
.m-hot-r { width: 18px; font: 600 12px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); flex: none; text-align: start; }
.m-hot-n {
  flex: 1;
  min-width: 0;
  font: 500 13.5px/1.2 'Outfit', system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
}
.m-hot-c { font: 500 12.5px/1 'Outfit', system-ui, sans-serif; flex: none; }

.m-fg-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.m-fg-h span { font: 400 11px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); }
.m-fg { width: 100%; height: auto; margin-top: 8px; }
.m-fg-read { display: flex; align-items: baseline; justify-content: center; gap: 9px; margin-top: 6px; }
.m-fg-read strong { font: 600 34px/1 'Outfit', system-ui, sans-serif; letter-spacing: -1.2px; }
.m-fg-read span { font: 500 14px/1 'Outfit', system-ui, sans-serif; color: var(--mut); }
.m-fg-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font: 400 11.5px/1 'Outfit', system-ui, sans-serif;
  color: var(--fnt);
}
.m-needle { transform-box: view-box; transform-origin: 110px 120px; transform: rotate(var(--a, 0deg)); }

.m-quote-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; gap: 12px; }
.m-quote-row dt { font: 400 13px/1 'Outfit', system-ui, sans-serif; color: var(--mut); }
.m-quote-row dd { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.m-quote-row dd b { font: 500 13px/1 'Outfit', system-ui, sans-serif; font-weight: 500; }
.m-quote-row dd span { font: 500 12px/1 'Outfit', system-ui, sans-serif; min-width: 52px; text-align: end; }

.m-date { display: flex; gap: 12px; padding: 8px 0; align-items: flex-start; }
.m-date-d { width: 42px; flex: none; text-align: center; }
.m-date-d b { font: 600 14px/1 'Outfit', system-ui, sans-serif; display: block; }
.m-date-d span { font: 400 10.5px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); display: block; margin-top: 3px; }
.m-date-t { font: 500 13px/1.3 'Outfit', system-ui, sans-serif; }
.m-date-k { font: 400 11.5px/1.3 'Outfit', system-ui, sans-serif; color: var(--fnt); margin-top: 2px; }

.m-cta { border-radius: 18px; background: var(--lime); color: var(--ink); padding: 18px; }
.m-cta h2 { font: 600 16px/1.25 'Outfit', system-ui, sans-serif; letter-spacing: -.3px; }
.m-cta p { font: 400 13px/1.5 'Outfit', system-ui, sans-serif; margin: 7px 0 14px; opacity: .78; }
.m-cta a {
  height: 36px;
  border-radius: 18px;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  padding-inline: 16px;
  font: 600 13px/1 'Outfit', system-ui, sans-serif;
}
.m-cta :focus-visible { outline-color: var(--ink); }

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

.m-app-wrap { max-width: 1180px; margin-inline: auto; padding: 8px var(--edge) 0; }
.m-app {
  background: linear-gradient(135deg, var(--surf) 0%, var(--surf2) 82%);
  border-radius: 30px;
  padding: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px var(--line), var(--depth);
}
.m-app h2 { font: 600 40px/1.1 'Outfit', system-ui, sans-serif; letter-spacing: -1.8px; text-wrap: pretty; }
.m-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;
}
.m-stores { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.m-store {
  height: 46px;
  padding-inline: 18px;
  border-radius: 23px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--tx);
  color: var(--bg);
  font: 600 13.5px/1 'Outfit', system-ui, sans-serif;
}
.m-store-2 { background: var(--surf2); color: var(--tx); box-shadow: inset 0 0 0 1px var(--ring); }
.m-qr {
  background: #FFFFFF;
  border-radius: 26px;
  padding: 22px 22px 20px;
  margin-inline-end: 26px;
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .55);
  flex: none;
}
.m-qr b { font: 600 15px/1 'Outfit', system-ui, sans-serif; color: var(--ink); text-align: center; display: block; }
.m-qr img { display: block; width: 164px; height: 164px; margin-top: 14px; }
.m-qr span { font: 400 11px/1 'Outfit', system-ui, sans-serif; color: #71727A; text-align: center; display: block; margin-top: 12px; }

/* -------------------------------- FAQ -------------------------------- */

.m-faq { max-width: 900px; margin-inline: auto; padding: 96px 28px 0; }
.m-faq h2 { font: 600 44px/1.08 'Outfit', system-ui, sans-serif; letter-spacing: -2px; text-align: center; }
.m-faq-list { margin-top: 36px; border-bottom: 1px solid var(--line); }
.m-faq-item { border-top: 1px solid var(--line); }
.m-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 2px;
  width: 100%;
  font: 600 16px/1.35 'Outfit', system-ui, sans-serif;
  text-wrap: pretty;
  text-align: start;
}
.m-faq-q svg { flex: none; color: var(--mut); transition: transform .2s; }
.m-faq-q[aria-expanded='true'] svg { transform: rotate(180deg); }
.m-faq-a > p {
  font: 400 14.5px/1.65 'Outfit', system-ui, sans-serif;
  color: var(--mut);
  padding: 0 60px 24px 2px;
  max-width: 720px;
  text-wrap: pretty;
}
[dir='rtl'] .m-faq-a > p { padding: 0 2px 24px 60px; }

/* ------------------------------- Meldungsseite ------------------------------- */

.m-news-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.m-title-xl { font: 600 52px/1 'Outfit', system-ui, sans-serif; letter-spacing: -2.4px; }
.m-stamp { font: 400 13px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); margin-top: 14px; }
.m-news-top .m-tabs { border-bottom: none; margin-bottom: 0; gap: 26px; }
.m-news-top .m-tab { padding-bottom: 12px; }

.m-lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(300px, 1fr);
  gap: 34px;
  margin-top: 34px;
  align-items: start;
}
.m-hero-art {
  height: 400px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
  background: linear-gradient(150deg, #123526 0%, #0E1A16 58%, #0B0C0D 100%);
}
.m-hero-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-hero-art .m-kicker {
  position: absolute;
  inset-inline-start: 28px;
  top: 26px;
  height: 26px;
  padding-inline: 12px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .16);
  line-height: 26px;
  letter-spacing: .8px;
}
.m-eyebrow { font: 600 10.5px/1 'Outfit', system-ui, sans-serif; letter-spacing: 1.4px; color: var(--fnt); }
.m-hero-t {
  font: 600 44px/1.08 'Outfit', system-ui, sans-serif;
  letter-spacing: -2px;
  margin-top: 14px;
  text-wrap: pretty;
  max-width: 760px;
}
.m-hero-p {
  font: 400 17px/1.6 'Outfit', system-ui, sans-serif;
  color: var(--mut);
  margin-top: 16px;
  max-width: 700px;
  text-wrap: pretty;
}

.m-top-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
  width: 100%;
}
.m-top-k { font: 600 9.5px/1 'Outfit', system-ui, sans-serif; letter-spacing: 1.2px; color: var(--fnt); }
.m-top-t {
  font: 600 16px/1.32 'Outfit', system-ui, sans-serif;
  letter-spacing: -.3px;
  margin-top: 8px;
  text-wrap: pretty;
}
.m-top-m { font: 400 11.5px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); margin-top: 9px; }
.m-thumb { width: 78px; height: 78px; border-radius: 13px; flex: none; box-shadow: inset 0 0 0 1px var(--line); }

.m-sect-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.m-sect-h h2 { font: 600 22px/1 'Outfit', system-ui, sans-serif; letter-spacing: -.8px; }
.m-sect-h a,
.m-sect-h span { font: 500 13px/1 'Outfit', system-ui, sans-serif; color: var(--mut); }

.m-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 24px; }
.m-card3 { min-width: 0; display: block; }
.m-card3-art { height: 168px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.m-card3 .m-eyebrow { font-size: 10px; letter-spacing: 1.2px; margin-top: 14px; display: block; }
.m-card3-t {
  font: 600 19px/1.25 'Outfit', system-ui, sans-serif;
  letter-spacing: -.5px;
  margin-top: 9px;
  text-wrap: pretty;
}
.m-card3-m { font: 400 11.5px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); margin-top: 10px; }

.m-analysis {
  border-radius: 24px;
  background: var(--surf);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 38px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 36px;
  align-items: center;
}
.m-analysis blockquote {
  margin: 16px 0 0;
  font: 600 30px/1.24 'Outfit', system-ui, sans-serif;
  letter-spacing: -1.1px;
  text-wrap: pretty;
}
.m-by { font: 400 13px/1 'Outfit', system-ui, sans-serif; color: var(--mut); margin-top: 18px; }
.m-rates { display: flex; flex-direction: column; gap: 12px; }
.m-rate { display: flex; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.m-rate:last-child { padding-bottom: 0; border-bottom: none; }
.m-rate dt { font: 400 12.5px/1 'Outfit', system-ui, sans-serif; color: var(--mut); }
.m-rate dd { margin: 0; font: 500 12.5px/1 'Outfit', system-ui, sans-serif; }

.m-latest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 12px; }
.m-latest .m-item { padding-inline: 0; gap: 16px; }
.m-latest .m-item-time { width: 52px; padding-top: 3px; }
.m-latest .m-item-t { font-size: 15.5px; }
.m-latest .m-item-end { min-width: 74px; }

/* ------------------------------- Rechner ------------------------------- */

.m-calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 352px);
  gap: 22px;
  margin-top: 32px;
  align-items: start;
}
.m-calc {
  border-radius: 22px;
  background: var(--surf);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 24px 26px 26px;
}
.m-calc-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.m-calc-h h2 { font: 600 24px/1 'Outfit', system-ui, sans-serif; letter-spacing: -1px; margin-top: 11px; }
.m-ghost {
  height: 32px;
  padding-inline: 14px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 12.5px/1 'Outfit', system-ui, sans-serif;
  color: var(--mut);
  box-shadow: inset 0 0 0 1px var(--ring);
  flex: none;
  white-space: nowrap;
}
.m-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin-top: 24px; }
.m-field-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.m-field-h label { font: 500 13px/1 'Outfit', system-ui, sans-serif; color: var(--mut); }
.m-field-h output { font: 600 15px/1 'Outfit', system-ui, sans-serif; }

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: var(--surf3);
  outline: none;
  margin: 12px 0;
  accent-color: var(--lime);
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 0;
  border-radius: 10px;
  background: var(--tx);
  border: none;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
input[type='range']::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--tx);
  border: none;
  cursor: grab;
}

.m-bars { display: flex; align-items: flex-end; gap: 4px; height: 190px; margin-top: 28px; }
.m-bars li { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.m-bar-i { height: var(--i, 0%); background: var(--lime); border-radius: 3px 3px 0 0; }
.m-bar-p { height: var(--p, 0%); background: var(--violet); }
.m-bars-f {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font: 400 11px/1 'Outfit', system-ui, sans-serif;
  color: var(--fnt);
}
.m-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.m-results dt { font: 400 11.5px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); display: flex; align-items: center; gap: 7px; }
.m-results dd { margin: 0; font: 500 18px/1 'Outfit', system-ui, sans-serif; margin-top: 12px; }
.m-results .m-total { font: 600 26px/1 'Outfit', system-ui, sans-serif; letter-spacing: -1px; margin-top: 10px; }
.m-dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.m-dot-i { background: var(--lime); }
.m-dot-p { background: var(--violet); }

.m-tax { border-radius: 18px; background: var(--surf); box-shadow: inset 0 0 0 1px var(--line); padding: 16px 18px 18px; }
.m-tax p { font: 400 12.5px/1.5 'Outfit', system-ui, sans-serif; color: var(--mut); margin: 6px 0 14px; }
.m-tax-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.m-tax-row dt { font: 400 12.5px/1 'Outfit', system-ui, sans-serif; color: var(--mut); }
.m-tax-row dd { margin: 0; font: 500 12.5px/1 'Outfit', system-ui, sans-serif; }
.m-tax-row:last-child dd { font-weight: 600; font-size: 13px; }

.m-prose { max-width: 820px; margin-inline: auto; padding: 52px var(--edge) 0; }
.m-prose-in { border-top: 1px solid var(--line); padding-top: 34px; }
.m-prose h2 { font: 600 28px/1.2 'Outfit', system-ui, sans-serif; letter-spacing: -1.1px; }
.m-prose h2 + p { margin-top: 16px; }
.m-prose h3 { font: 600 15.5px/1.3 'Outfit', system-ui, sans-serif; }
.m-prose p { font: 400 15px/1.7 'Outfit', system-ui, sans-serif; color: var(--mut); text-wrap: pretty; }
.m-prose h3 + p { font-size: 14.5px; margin-top: 9px; }
.m-step { display: flex; gap: 14px; margin-top: 24px; }
.m-step:first-of-type { margin-top: 30px; }
.m-step b {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--surf3);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 11px/1 'Outfit', system-ui, sans-serif;
  flex: none;
  margin-top: 2px;
}
.m-prose-2 { font: 600 24px/1.25 'Outfit', system-ui, sans-serif; letter-spacing: -.9px; margin-top: 38px; }
.m-prose-2 + p { margin-top: 14px; }
.m-prose p + p { margin-top: 14px; }

.m-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.m-tool {
  border-radius: 16px;
  background: var(--surf);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 15px 16px;
  min-width: 0;
}
.m-tool b { font: 600 14px/1.2 'Outfit', system-ui, sans-serif; display: block; }
.m-tool span { font: 400 12px/1.45 'Outfit', system-ui, sans-serif; color: var(--fnt); display: block; margin-top: 6px; }

/* ------------------------------ Aktienseite ------------------------------ */

.m-crumbs { display: flex; align-items: center; gap: 8px; font: 400 12px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); flex-wrap: wrap; }
.m-crumbs [aria-current] { color: var(--mut); }

.m-stock-h {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 352px);
  gap: 22px;
  align-items: center;
  margin-top: 18px;
}
.m-stock-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.m-ini-l {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--surf3);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 20px/1 'Outfit', system-ui, sans-serif;
  flex: none;
}
.m-stock-n { font: 600 30px/1.05 'Outfit', system-ui, sans-serif; letter-spacing: -1.1px; }
.m-stock-m { font: 400 12.5px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); margin-top: 8px; }
.m-stock-px { margin-inline-start: auto; text-align: end; }
.m-stock-px div { display: flex; align-items: baseline; gap: 10px; justify-content: flex-end; }
.m-stock-px strong { font: 600 30px/1 'Outfit', system-ui, sans-serif; letter-spacing: -1.1px; }
.m-stock-px em { font: 500 15px/1 'Outfit', system-ui, sans-serif; font-style: normal; }
.m-delay { font: 400 11.5px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); margin-top: 8px; }
.m-stock-act { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.m-round {
  width: 38px;
  height: 38px;
  border-radius: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px var(--ring);
  color: var(--mut);
  flex: none;
}
.m-round[aria-pressed='true'] { color: var(--lime); }
.m-pill {
  height: 38px;
  padding-inline: 15px;
  border-radius: 19px;
  display: flex;
  align-items: center;
  box-shadow: inset 0 0 0 1px var(--ring);
  font: 600 13px/1 'Outfit', system-ui, sans-serif;
  color: var(--mut);
  white-space: nowrap;
}
.m-pill-l { background: var(--lime); color: var(--ink); box-shadow: none; padding-inline: 18px; }

.m-chart-card { border-radius: 20px; background: var(--surf); box-shadow: inset 0 0 0 1px var(--line); padding: 16px 18px 14px; }
.m-chart-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.m-chart-h .m-seg button { height: 26px; padding-inline: 11px; font-size: 12px; }
.m-chart-tools { display: flex; align-items: center; gap: 8px; }
.m-chart-tools .m-ghost { height: 30px; border-radius: 15px; padding-inline: 12px; font-size: 12px; }
.m-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px var(--ring);
  color: var(--mut);
  flex: none;
}
.m-chart-box { position: relative; margin-top: 14px; }
.m-chart { width: 100%; height: 320px; }
.m-ylab {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 4px;
}
.m-ylab span {
  font: 400 11px/1 'Outfit', system-ui, sans-serif;
  color: var(--fnt);
  background: var(--surf);
  padding: 2px 4px;
  align-self: flex-end;
}
.m-xlab {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font: 400 11px/1 'Outfit', system-ui, sans-serif;
  color: var(--fnt);
}
.m-facts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.m-facts dt { font: 400 10.5px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); letter-spacing: .6px; }
.m-facts dd { margin: 0; font: 500 14px/1 'Outfit', system-ui, sans-serif; margin-top: 7px; }

.m-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.m-block { border-radius: 20px; background: var(--surf); box-shadow: inset 0 0 0 1px var(--line); padding: 18px 20px 20px; }
.m-block-h { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.m-block-h h2 { font: 600 16px/1 'Outfit', system-ui, sans-serif; }
.m-block-h span { font: 400 11.5px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); }
.m-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; margin-top: 16px; }
.m-quad dt { font: 400 11px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); }
.m-quad dd { margin: 0; font: 600 19px/1 'Outfit', system-ui, sans-serif; letter-spacing: -.6px; margin-top: 8px; }
.m-quad-s dd { font: 500 14px/1 'Outfit', system-ui, sans-serif; letter-spacing: 0; }
.m-quad-t { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); gap: 14px; }

.m-div-bars { display: flex; gap: 9px; align-items: flex-end; height: 86px; margin-top: 20px; }
.m-div-bars li { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.m-div-bars i { height: var(--h, 0%); border-radius: 6px 6px 0 0; background: var(--lime); }
.m-div-lab { display: flex; gap: 9px; margin-top: 9px; }
.m-div-lab span { flex: 1; font: 400 11px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); text-align: center; }

.m-legend { display: flex; gap: 14px; font: 400 11.5px/1 'Outfit', system-ui, sans-serif; color: var(--mut); margin-top: 10px; flex-wrap: wrap; }
.m-legend span { display: flex; align-items: center; gap: 6px; }
.m-legend i { width: 9px; height: 9px; border-radius: 3px; display: block; }
.m-rev-bars { display: flex; gap: 10px; margin-top: 18px; align-items: flex-end; height: 150px; }
.m-rev-bars li { flex: 1; display: flex; gap: 6px; align-items: flex-end; height: 100%; }
.m-rev-bars i { flex: 1; border-radius: 7px 7px 0 0; }
.m-rev-r { height: var(--r, 0%); background: var(--lime); }
.m-rev-n { height: var(--n, 0%); background: var(--violet); }
.m-rev-lab { display: flex; gap: 10px; margin-top: 10px; font: 400 11.5px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); }
.m-rev-lab span { flex: 1; text-align: center; }

.m-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.m-metric {
  border-radius: 16px;
  background: var(--surf2);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 14px 12px 12px;
  min-width: 0;
}
[data-theme='light'] .m-metric { background: var(--surf3); }
.m-metric h3 { font: 600 13px/1 'Outfit', system-ui, sans-serif; text-align: center; margin-bottom: 14px; }
.m-metric-plot { display: flex; gap: 8px; height: 150px; }
.m-metric-ax {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font: 400 8.5px/1 'Outfit', system-ui, sans-serif;
  color: var(--fnt);
  text-align: end;
  flex: none;
}
.m-metric-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  border-inline-start: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-inline: 2px;
  min-width: 0;
}
.m-metric-bars li { flex: 1; height: var(--h, 2%); border-radius: 2px 2px 0 0; background: var(--lime); }
.m-metric-n li { background: var(--violet); }
.m-metric-f li { background: var(--mauve); }
.m-metric-lab { display: flex; padding-inline-start: 34px; margin-top: 8px; }
.m-metric-lab span {
  flex: 1;
  font: 400 9.5px/1 'Outfit', system-ui, sans-serif;
  color: var(--fnt);
  text-align: center;
  white-space: nowrap;
}

.m-keys dt { font: 400 12.5px/1 'Outfit', system-ui, sans-serif; color: var(--mut); }
.m-keys dd { margin: 0; font: 500 12.5px/1 'Outfit', system-ui, sans-serif; }
.m-key-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.m-key-row:last-child { border-bottom: none; }

.m-52 { margin-top: 16px; }
.m-52-h,
.m-52-f { display: flex; justify-content: space-between; font: 400 11px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); }
.m-52-f { margin-top: 8px; }
.m-52-bar { height: 5px; border-radius: 3px; background: var(--surf3); margin-top: 9px; position: relative; }
.m-52-bar i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--w, 0%);
  border-radius: 3px;
  background: var(--tx);
}
.m-52-bar b {
  position: absolute;
  inset-inline-start: var(--w, 0%);
  top: -3px;
  width: 11px;
  height: 11px;
  border-radius: 6px;
  background: var(--tx);
  margin-inline-start: -5px;
}

.m-donut { position: relative; width: 168px; margin: 6px auto 4px; }
.m-donut svg { width: 168px; height: 168px; transform: rotate(-90deg); }
.m-donut-mid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.m-donut-mid b { font: 600 17px/1 'Outfit', system-ui, sans-serif; letter-spacing: -.4px; }
.m-donut-mid span { font: 400 10.5px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); }
.m-seg-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid var(--line); }
.m-seg-row i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.m-seg-row b {
  flex: 1;
  min-width: 0;
  font: 500 12.5px/1.2 'Outfit', system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-seg-row span { font: 400 11.5px/1 'Outfit', system-ui, sans-serif; color: var(--mut); flex: none; }

.m-rating { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.m-rating i { display: block; }
.m-rating-b { width: var(--b, 0%); background: var(--up); }
.m-rating-h { width: var(--h, 0%); background: var(--fnt); }
.m-rating-s { width: var(--s, 0%); background: var(--dn); }
.m-rating-f {
  display: flex;
  justify-content: space-between;
  margin-top: 11px;
  font: 400 11.5px/1 'Outfit', system-ui, sans-serif;
  color: var(--mut);
}
.m-target {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.m-target dt { font: 400 12.5px/1 'Outfit', system-ui, sans-serif; color: var(--mut); }
.m-target dd { margin: 0; display: flex; align-items: baseline; gap: 9px; }
.m-target b { font: 600 17px/1 'Outfit', system-ui, sans-serif; }
.m-target span { font: 500 12.5px/1 'Outfit', system-ui, sans-serif; }

.m-peer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); width: 100%; }
.m-peer-n { font: 500 13px/1.2 'Outfit', system-ui, sans-serif; text-align: start; }
.m-peer-p { font: 400 11px/1.3 'Outfit', system-ui, sans-serif; color: var(--fnt); margin-top: 4px; text-align: start; }

/* Vollbild-Kurve. Sie liegt ueber allem, also traegt sie ihre eigene Flaeche. */
.m-full {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 22px 26px 26px;
}
.m-full[hidden] { display: none; }
.m-full-h { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.m-full-id { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.m-ini-m {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surf3);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 15px/1 'Outfit', system-ui, sans-serif;
  flex: none;
}
.m-full-n { font: 600 19px/1 'Outfit', system-ui, sans-serif; letter-spacing: -.5px; }
.m-full-m { font: 400 11.5px/1 'Outfit', system-ui, sans-serif; color: var(--fnt); margin-top: 6px; }
.m-full-px { display: flex; align-items: baseline; gap: 9px; margin-inline-start: 12px; }
.m-full-px b { font: 600 22px/1 'Outfit', system-ui, sans-serif; letter-spacing: -.8px; }
.m-full-px span { font: 500 13px/1 'Outfit', system-ui, sans-serif; }
.m-full-plot { flex: 1; position: relative; margin-top: 18px; min-height: 0; }
.m-full-plot svg { width: 100%; height: 100%; }
.m-full-plot .m-ylab span { font-size: 11.5px; background: var(--bg); padding: 2px 5px; }
.m-full .m-xlab { margin-top: 10px; font-size: 11.5px; }
.m-close {
  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(--mut);
  flex: none;
}

/* -------------------------------- Fuss -------------------------------- */

.m-foot { margin-top: 88px; border-top: 1px solid var(--line); }
.m-foot-in {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 28px var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.m-foot p { font: 400 12px/1.5 'Outfit', system-ui, sans-serif; color: var(--fnt); max-width: 640px; }
.m-foot ul { display: flex; gap: 18px; font: 400 12.5px/1 'Outfit', system-ui, sans-serif; color: var(--mut); flex-wrap: wrap; }
.m-foot a { display: inline-flex; align-items: center; min-height: 24px; }

/* ------------------------------ Bildflaechen ------------------------------ */

.m-g1 { background: linear-gradient(150deg, #3A1A1C 0%, #1A1214 62%, #0E0E0F 100%); }
.m-g2 { background: linear-gradient(150deg, #152A3A 0%, #111A22 62%, #0E0E0F 100%); }
.m-g3 { background: linear-gradient(150deg, #2A2A16 0%, #1B1B12 62%, #0E0E0F 100%); }
.m-g4 { background: linear-gradient(150deg, #123043, #101A20); }
.m-g5 { background: linear-gradient(150deg, #2C1B36, #171219); }
.m-g6 { background: linear-gradient(150deg, #14321F, #101A14); }
.m-g7 { background: linear-gradient(150deg, #3A2A12, #1A1611); }
.m-g8 { background: linear-gradient(150deg, #1B2A3C, #12161B); }
.m-g9 { background: linear-gradient(150deg, #2A1636, #161018); }
.m-g10 { background: linear-gradient(150deg, #123526, #0E1A16); }
.m-g11 { background: linear-gradient(150deg, #233042, #141A20); }
.m-g12 { background: linear-gradient(150deg, #332216, #1A1512); }

/* ============================== Kleinteile ============================== */

/* Zwei Zeichen, eines sichtbar. Der Umschalter zeigt, wohin er fuehrt: im
   dunklen Theme die Sonne, im hellen den Mond. Beide liegen uebereinander,
   damit der Wechsel eine Drehung sein kann und kein Austausch — die Regeln
   dazu stehen im Abschnitt Bewegung. */
.m-theme .m-sun,
.m-theme .m-moon { inset: 0; margin: auto; }

.m-empty,
.m-row-meta { font: 400 12.5px/1.5 'Outfit', system-ui, sans-serif; color: var(--mut); }
.m-empty { padding: 14px 0; }

.m-back { display: inline-flex; margin-bottom: 22px; }
.m-field { min-width: 0; }

/* Aufmacher und Held sind ganze Verweise, ihre Teile also Zeilen im Verweis. */
.m-lead,
.m-hero { display: block; color: inherit; }
.m-lead:hover,
.m-hero:hover,
.m-card3:hover,
.m-top-item:hover { opacity: .86; }
.m-lead-art,
.m-lead-in,
.m-lead-t,
.m-lead-p,
.m-hero-art,
.m-hero-t,
.m-hero-p,
.m-eyebrow { display: block; }
.m-hero .m-eyebrow { margin-top: 24px; }

/* Die Werbeflaeche steht erst dann im Dokument, wenn sie geladen wird. Bis
   dahin nimmt sie keinen Platz — eine leere Zeile mitten in den Meldungen
   waere ein Loch, das nichts erklaert. */
[data-ad-slot]:empty { display: none; }
[data-ad-slot] { flex-direction: column; }

/* ============================== Bewegung ============================== */

/* Der Uebergang zwischen zwei Dokumenten. Zwei Zeilen, und der Wechsel von
   der Markt- zur Meldungsseite blendet, statt zu blitzen. Browser ohne diese
   Regel merken nichts davon. */
@view-transition { navigation: auto; }

/* -------------------------------- Druck --------------------------------
 *
 * Die wichtigste Bewegung der ganzen Seite, und die kuerzeste: Ein Element,
 * das auf den Finger antwortet, fuehlt sich an wie ein Gegenstand. Hinein
 * geht es schnell und linear-nah, heraus mit der Feder — genau andersherum
 * waere es traege.
 *
 * `:active` und nicht `:hover`, weil es um den Druck geht und nicht um den
 * Zeiger, und weil ein Telefon keinen Zeiger hat. */
.m-nav a,
.m-account,
.m-theme,
.m-tab,
.m-seg button,
.m-tile,
.m-mover,
.m-item,
.m-hot,
.m-peer,
.m-drop-row,
.m-store,
.m-cta a,
.m-pill,
.m-round,
.m-ghost,
.m-icon-btn,
.m-close,
.m-more,
.m-faq-q,
.m-lead,
.m-hero,
.m-card3,
.m-top-item,
.m-foot a {
  transition:
    transform var(--t-base) var(--spring),
    opacity var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.m-nav a:active,
.m-tab:active,
.m-seg button:active,
.m-more:active,
.m-foot a:active { transform: scale(.94); transition-duration: var(--t-tap); transition-timing-function: var(--press); }

.m-account:active,
.m-store:active,
.m-cta a:active,
.m-pill:active,
.m-ghost:active { transform: scale(.96); transition-duration: var(--t-tap); transition-timing-function: var(--press); }

.m-theme:active,
.m-round:active,
.m-icon-btn:active,
.m-close:active { transform: scale(.88); transition-duration: var(--t-tap); transition-timing-function: var(--press); }

/* Flaechen sind gross, also faellt eine Skalierung schnell auf. Sie bekommen
   deshalb weniger davon — ein Prozent genuegt, um die Karte zu „drucken". */
.m-tile:active,
.m-lead:active,
.m-hero:active,
.m-card3:active,
.m-drop-row:active { transform: scale(.99); transition-duration: var(--t-tap); transition-timing-function: var(--press); }

/* Zeilen in einer Liste weichen nicht zurueck, sie ruecken ein: eine Zeile,
   die kleiner wird, zieht ihre Nachbarn optisch mit. */
.m-mover:active,
.m-item:active,
.m-hot:active,
.m-peer:active,
.m-top-item:active { transform: translateX(2px); transition-duration: var(--t-tap); transition-timing-function: var(--press); }
[dir='rtl'] .m-mover:active,
[dir='rtl'] .m-item:active,
[dir='rtl'] .m-hot:active,
[dir='rtl'] .m-peer:active,
[dir='rtl'] .m-top-item:active { transform: translateX(-2px); }

/* Der Zeiger hebt, was er meint. Nur dort, wo es wirklich einen Zeiger gibt —
   auf dem Telefon bleibt ein Hover-Zustand sonst kleben. */
@media (hover: hover) {
  .m-tile:hover,
  .m-card3:hover,
  .m-lead:hover,
  .m-hero:hover { transform: translateY(-2px); opacity: 1; }
  .m-tile:hover { box-shadow: inset 0 0 0 1px var(--ring), 0 12px 28px -20px rgba(0, 0, 0, .6); }
  .m-account:hover,
  .m-store:hover,
  .m-cta a:hover { transform: translateY(-1px); opacity: 1; }
}

/* ------------------------------ Der Kopf ------------------------------
 *
 * Er liegt ueber dem Inhalt, sobald welcher darunter liegt. Vorher waere ein
 * Schatten eine Behauptung ueber eine Kante, die es nicht gibt. */
.m-head {
  transition: box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
[data-scrolled] .m-head { box-shadow: 0 1px 0 var(--line), 0 12px 32px -28px rgba(0, 0, 0, .7); }

/* Sonne und Mond tauschen die Plaetze, statt zu springen. */
.m-theme svg { transition: transform var(--t-base) var(--spring), opacity var(--t-fast) var(--ease); }
.m-theme { position: relative; }
.m-theme .m-sun,
.m-theme .m-moon { position: absolute; }
.m-moon { display: block; opacity: 0; transform: rotate(-90deg) scale(.6); }
.m-sun { opacity: 1; transform: none; }
[data-theme='light'] .m-sun { display: block; opacity: 0; transform: rotate(90deg) scale(.6); }
[data-theme='light'] .m-moon { opacity: 1; transform: none; }

/* --------------------------- Der Schieber ---------------------------
 *
 * Der iOS-Segmentschalter bewegt seine Flaeche zwischen den Feldern, statt
 * sie an einer Stelle zu loeschen und an einer anderen zu zeichnen. Das ist
 * der Unterschied zwischen „etwas ist jetzt gewaehlt" und „ich habe etwas
 * gewaehlt".
 *
 * `markt.js` setzt `--x` und `--w` aus dem gewaehlten Feld und haengt
 * `data-slider` an die Reihe. Ohne Skript bleibt die Flaeche am Feld, und
 * niemand vermisst etwas. */
.m-seg { position: relative; }
.m-seg-slider {
  position: absolute;
  left: 3px;
  top: 3px;
  bottom: 3px;
  width: var(--w, 0);
  border-radius: 8px;
  background: var(--surf);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  transform: translateX(var(--x, 0));
  transition: transform var(--t-base) var(--ease), width var(--t-base) var(--ease);
  pointer-events: none;
}
.m-seg-s .m-seg-slider { left: 2px; top: 2px; bottom: 2px; border-radius: 7px; }
.m-seg[data-slider] button[aria-selected='true'] { background: transparent; }
.m-seg button { position: relative; z-index: 1; }

/* Dieselbe Bewegung fuer die Unterstreichung der Reiterreihen. */
.m-tabs { position: relative; }
.m-tab-line {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--w, 0);
  background: var(--tx);
  transform: translateX(var(--x, 0));
  transition: transform var(--t-base) var(--ease), width var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
  pointer-events: none;
}
.m-tabs[data-slider] .m-tab[aria-selected='true'] { box-shadow: none; }

/* ------------------------------ Der Auftritt ------------------------------
 *
 * Was unterhalb der Falz liegt, kommt herein: vierzehn Pixel von unten und
 * aus der Durchsichtigkeit. Die Staffelung kommt aus der Stellung unter den
 * Geschwistern und nicht aus der Reihenfolge der Beobachtung — sonst liefe
 * die Welle mit dem Zufall des Scrollens statt mit dem Auge.
 *
 * Nichts, was im ersten Bild steht, bewegt sich — und zwar nicht, weil eine
 * Liste das so festlegt, sondern weil `markt.js` erst nach dem ersten Bild
 * laeuft und dort nur die Elemente scharf stellt, die zu diesem Zeitpunkt
 * *unterhalb* des Fensters liegen. Ein Element, das mit `opacity: 0` in den
 * ersten Anstrich ginge, verschoebe den Largest Contentful Paint um die Dauer
 * seiner eigenen Bewegung; ein Element, das noch niemand gesehen hat, kostet
 * nichts. Deshalb versteckt das Blatt von sich aus gar nichts: erst `is-armed`
 * tut es, und das setzt nur, wer weiss, dass es unsichtbar geschieht.
 *
 * Ohne Skript und mit `prefers-reduced-motion` steht damit alles einfach da,
 * ohne dass es dafuer eine zweite Regel braeuchte. */
.m-rise.is-armed {
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}
.m-rise.is-armed.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--t-rise) var(--ease) calc(var(--i, 0) * 70ms),
    transform var(--t-rise) var(--ease) calc(var(--i, 0) * 70ms);
}
/* Nach dem Auftritt gibt das Element die Ebene wieder frei. Ein `will-change`,
   das liegen bleibt, ist eine Textur im Speicher fuer nichts. */
.m-rise.is-done { will-change: auto; }

/* ------------------------------ Das Suchfeld ------------------------------ */

.m-find-box { transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.m-find-box:focus-within { box-shadow: inset 0 0 0 1px var(--tx); }
.m-drop {
  transform-origin: top center;
  animation: m-drop-in var(--t-fast) var(--ease) both;
}
@keyframes m-drop-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: none; }
}
/* Die Treffer kommen einzeln, nicht als Block. Sechs mal dreissig Millisekunden
   sind kaum zu bemerken und trotzdem der Unterschied zu einem Sprung. */
.m-drop-row { animation: m-row-in var(--t-fast) var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes m-row-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------ Die Fragen ------------------------------
 *
 * Die Antwort waechst aus null. `grid-template-rows` von `0fr` nach `1fr` ist
 * die eine Groesse, die der Browser stufenlos rechnen kann, ohne dass jemand
 * vorher die Hoehe messen muss — und ohne die Messung gibt es auch keinen
 * Sprung, wenn sich der Text in einer anderen Sprache anders umbricht. */
.m-faq-a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.m-faq-a > p { margin: 0; min-height: 0; }
.m-faq-item.is-shut .m-faq-a { grid-template-rows: 0fr; opacity: 0; }
.m-faq-item.is-shut .m-faq-a > p { overflow: hidden; }
.m-faq-q svg { transition: transform var(--t-base) var(--spring); }

/* --------------------------- Die Vollbildkurve --------------------------- */

.m-full { animation: m-full-in var(--t-base) var(--ease) both; }
@keyframes m-full-in {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: none; }
}

/* Die Linie zeichnet sich. `markt-live.js` setzt `--len` auf die wirkliche
   Laenge des Pfades, sonst waere die Dauer von der Breite des Fensters
   abhaengig. */
.sl-anim [data-chart-line].is-drawing {
  stroke-dasharray: var(--len, 4000);
  stroke-dashoffset: var(--len, 4000);
  animation: m-draw 900ms var(--ease-io) forwards;
}
@keyframes m-draw { to { stroke-dashoffset: 0; } }
[data-chart-area] { transition: opacity var(--t-slow) var(--ease); }
.sl-anim [data-chart-area].is-drawing { opacity: 0; animation: m-fade-in var(--t-slow) var(--ease) 500ms forwards; }
@keyframes m-fade-in { to { opacity: 1; } }

/* ------------------------------ Die Zahlen ------------------------------
 *
 * Ein Kurs, der sich aendert, sagt es einmal kurz und hoert dann auf. Der
 * Aufblitzer ist die eine Bewegung, die nicht vom Leser ausgeht — er ist
 * erlaubt, weil er genau das meldet, wofuer die Seite da ist. */
.m-flash-up { animation: m-flash-up 900ms var(--ease) both; }
.m-flash-dn { animation: m-flash-dn 900ms var(--ease) both; }
@keyframes m-flash-up {
  0% { background-color: color-mix(in srgb, var(--up) 26%, transparent); }
  100% { background-color: transparent; }
}
@keyframes m-flash-dn {
  0% { background-color: color-mix(in srgb, var(--dn) 26%, transparent); }
  100% { background-color: transparent; }
}
[data-px], [data-change] { border-radius: 5px; transition: color var(--t-fast) var(--ease); }

/* Der Zeiger der Marktstimmung faellt nicht auf seinen Wert, er schwingt
   sich ein. Neunhundert Millisekunden sind lang fuer eine Oberflaeche und
   genau richtig fuer ein Zifferblatt. */
.m-needle { transition: transform 900ms var(--spring); }

/* Balken und Baender folgen ihrem Wert, statt zu springen. */
.m-bar-i, .m-bar-p { transition: height var(--t-base) var(--ease); }
.m-band i, .m-52-bar i { transition: width var(--t-slow) var(--ease); }
.m-52-bar b { transition: inset-inline-start var(--t-slow) var(--ease); }
.m-rating i { transition: width var(--t-slow) var(--ease); }
.m-div-bars i, .m-rev-bars i, .m-metric-bars li { transition: height var(--t-slow) var(--ease); }

/* ------------------------------ Das Warten ------------------------------
 *
 * Solange die Zahlen unterwegs sind, steht dort die Gestalt der Zeile und
 * nicht ihr Fehlen. Der Schimmer laeuft nur, solange wirklich gewartet wird. */
.m-skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surf3) 25%, var(--surf2) 37%, var(--surf3) 63%);
  background-size: 400% 100%;
  animation: m-shimmer 1400ms linear infinite;
  color: transparent;
}
[data-theme='light'] .m-skeleton { background: linear-gradient(90deg, var(--surf3) 25%, #F7F7F5 37%, var(--surf3) 63%); background-size: 400% 100%; }
@keyframes m-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ------------------------------ Das Rollen ------------------------------ */

/* Eine Flaeche, die seitlich rollt, haelt ihr Rollen bei sich: sonst
   uebernimmt die Seite, sobald die Reihe am Ende ist. */
.m-tape, .m-tiles, .m-two, .m-metrics, .m-cards3, .m-tabs, .m-drop {
  overscroll-behavior-x: contain;
}
.sl-anim { scroll-behavior: smooth; }

/* Der Fokusring wird nicht gezeichnet, er wird gesetzt — aber sein Abstand
   darf sich bewegen, und das reicht, damit er nicht aufblitzt. */
:focus-visible { transition: outline-offset var(--t-tap) var(--ease); }

/* --------------------------- Weniger Bewegung ---------------------------
 *
 * Kein Kompromiss und keine kuerzere Dauer: wer darum bittet, bekommt eine
 * Seite, die sich nicht bewegt. Der Aufblitzer der Kurse bleibt als Farbe
 * ohne Verlauf, weil er eine Meldung ist und keine Verzierung. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .m-rise.is-armed { opacity: 1; transform: none; }
  .m-skeleton { animation: none; }
  .sl-anim [data-chart-line].is-drawing { stroke-dasharray: none; stroke-dashoffset: 0; }
}

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

/* Der Entwurf ist fuer 1280 gezeichnet. Auf dem Telefon stapeln die Spalten
   nicht einfach: Kacheln und Kennzahlen laufen seitlich mit Rastpunkten, so
   wie es der Mobil-Entwurf der Marketingseite schon vormacht. Die angeschnittene
   Karte am Rand ist das Signal, dass es weitergeht. */

@media (max-width: 1080px) {
  .m-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-body,
  .m-stock-h,
  .m-calc-grid,
  .m-lead-grid { grid-template-columns: minmax(0, 1fr); }
  .m-side { position: static; }
  .m-cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-latest { grid-template-columns: minmax(0, 1fr); }
  .m-analysis { grid-template-columns: minmax(0, 1fr); padding: 28px 26px; }
  .m-facts { grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
  .m-hero-art { height: 300px; }
  .m-hero-t { font-size: 34px; letter-spacing: -1.4px; }
  .m-stock-act { justify-content: flex-start; }
  .m-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --edge: 18px; }
  .m-head-in { flex-wrap: wrap; padding-block: 10px; gap: 10px; row-gap: 12px; }
  .m-brand { order: 1; }
  .m-head-end { order: 2; margin-inline-start: auto; }
  .m-find { order: 3; flex-basis: 100%; max-width: none; margin-inline: 0; }
  /* Kein Burger. Vier Ziele passen nebeneinander, und ein Menue, das sich
     verstecken kann, ist ein Klick mehr fuer nichts. */
  .m-nav { order: 4; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
  .m-nav::-webkit-scrollbar { display: none; }
  .m-drop { top: 44px; }

  .m-tiles,
  .m-two,
  .m-metrics,
  .m-cards3 {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--edge) * -1);
    padding-inline: var(--edge);
    scrollbar-width: none;
  }
  .m-tiles::-webkit-scrollbar,
  .m-two::-webkit-scrollbar,
  .m-metrics::-webkit-scrollbar,
  .m-cards3::-webkit-scrollbar { display: none; }
  .m-tiles > *,
  .m-two > *,
  .m-metrics > *,
  .m-cards3 > * { flex: 0 0 82%; scroll-snap-align: start; }

  .m-movers-h { display: none; }
  .m-mover { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .m-mover .m-band-wrap,
  .m-mover .m-vol { grid-column: 1 / -1; }
  .m-mover .m-vol { text-align: start; }

  .m-item-time { width: 58px; }
  .m-item-end { min-width: 62px; }
  .m-latest .m-item { padding-inline: 0; }

  .m-app { grid-template-columns: minmax(0, 1fr); padding: 28px; gap: 24px; }
  .m-app h2 { font-size: 30px; letter-spacing: -1.2px; }
  .m-qr { margin-inline-end: 0; justify-self: center; }

  .m-faq { padding: 64px 20px 0; }
  .m-faq h2 { font-size: 30px; letter-spacing: -1.2px; }
  .m-faq-a > p { padding-inline-end: 20px; }
  [dir='rtl'] .m-faq-a > p { padding-inline-start: 20px; }

  .m-title-xl { font-size: 36px; letter-spacing: -1.5px; }
  .m-fields { grid-template-columns: minmax(0, 1fr); }
  .m-results { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .m-facts { grid-template-columns: repeat(2, 1fr); }
  .m-stock-n { font-size: 24px; }
  .m-stock-px strong { font-size: 24px; }
  .m-chart { height: 240px; }
  .m-tools { grid-template-columns: minmax(0, 1fr); }
  .m-analysis blockquote { font-size: 22px; letter-spacing: -.7px; }
  .m-prose h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .m-faq-q svg { transition: none; }
  * { scroll-behavior: auto; }
}