/* Stock Radar — Gestaltungssystem
   ================================================================
   Aufgebaut nach dem apple-design-Skill. §11 der Spezifikation legt fest,
   welche Elemente es gibt; der Skill, wie sie aussehen und sich anfühlen.
   Bei Widerspruch gewinnt der Skill.

     1  Merkmale (Farben, Abstände, Typografie, Bewegung)
     2  Grundlage
     3  Schwebende Ebene: Reiter und Leiste
     4  Bedienelemente
     5  Karten
     6  Risiko-Donut
     7  Kurslage-Leiste
     8  Detailansicht
     9  Abgelaufen
    10  Formulare und Meldungen
    11  Mobil und Zugänglichkeit
   ================================================================ */

/* == 1  Merkmale ============================================== */

:root {
  /* Systemschrift: bringt optische Größen, Tracking-Tabellen und
     Lesbarkeitstuning mit (Skill §15). Keine Schriftdatei, die der Pi
     laden müsste. */
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 100%;
  line-height: 1.5;

  /* Abstände als Leiter statt beliebiger Werte — jeder Wert eine
     Entscheidung, die sich begründen lässt (Skill §16, Handwerk). */
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 3rem;

  --radius-gross: 18px;
  --radius: 12px;
  --radius-klein: 9px;
  --ziel: 44px;                    /* kleinste Trefferfläche, §11 */
  --spalte: 58rem;

  /* Bewegung: kritisch gedämpft, keine Überschwingung. Überschwingen
     gehört zu Gesten mit Schwung — hier gibt es keine (Skill §4). */
  --zeit-kurz: 120ms;
  --zeit: 200ms;
  --kurve: cubic-bezier(0.32, 0.72, 0, 1);

  /* Helle Erscheinung */
  --bg: #F2F2F7;                   /* grauer Grund, damit Weiss sich abhebt */
  --flaeche: #FFFFFF;
  --flaeche-2: #F7F7FA;
  --rand: #E4E4EA;
  --rand-stark: #CFD3DC;
  --text: #14161B;
  --text-2: #5C6472;
  --text-3: #8A92A0;
  --auf: #17795A;
  --ab: #B8362A;
  --akzent: #8A6D14;
  --chrome: rgba(242, 242, 247, 0.72);
  --schatten: 0 1px 2px rgba(20, 22, 27, 0.05),
              0 4px 12px rgba(20, 22, 27, 0.04);
  --schatten-hoch: 0 2px 6px rgba(20, 22, 27, 0.07),
                   0 12px 28px rgba(20, 22, 27, 0.07);
}

/* Im Dunkeln traegt kein Schatten -- dort uebernimmt ein feiner Rand. */
@media (prefers-color-scheme: dark) {
  .karte, .belege li, .antwort, .hinweis { border-color: var(--rand); }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Palette aus §11 — sie gilt, weil der Skill keine eigenen Farbwerte
       vorgibt, nur die Regel, dass beide Erscheinungen zu bedienen sind. */
    --bg: #0F1115;
    --flaeche: #171A21;
    --flaeche-2: #1D212A;
    --rand: #262B35;
    --rand-stark: #363D4A;
    --text: #E8EAED;
    --text-2: #98A0AE;
    --text-3: #6E7686;
    --auf: #3FB68B;
    --ab: #E0574A;
    --akzent: #C9A227;
    --chrome: rgba(15, 17, 21, 0.72);
    --schatten: none;
    --schatten-hoch: 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tracking ist größenabhängig, nie ein Wert für alles (Skill §15):
   große Schrift enger, kleine Schrift etwas weiter. */
h1, h2, h3 { margin: 0; font-weight: 650; }
h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); line-height: 1.12; letter-spacing: -0.021em; }
h2 { font-size: 1.06rem; line-height: 1.3; letter-spacing: -0.011em; }
h3 { font-size: 0.9rem;  line-height: 1.35; letter-spacing: -0.004em; color: var(--text-2); }

a { color: inherit; }

.zahl, .preis b, .karte-kurs b { font-variant-numeric: tabular-nums; }

.etikett {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.055em;
  text-transform: uppercase; color: var(--text-3);
}
.meta, .karte-meta {
  font-size: 0.785rem; line-height: 1.45; letter-spacing: 0.002em;
  color: var(--text-2);
}
.leer { color: var(--text-2); font-size: 0.9rem; margin: 0; }

main { max-width: var(--spalte); margin: 0 auto;
       padding: var(--raum-5) var(--raum-4) var(--raum-7); }
.seitentitel { margin-bottom: var(--raum-1); }

/* == 3  Schwebende Ebene ====================================== */

/* Durchscheinende Chrome-Ebene, Inhalt scrollt darunter durch —
   keine undurchsichtige Leiste, die einen Streifen wegnimmt (Skill §12). */
.kopf {
  position: sticky; top: 0; z-index: 30;
  background: var(--chrome);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
/* Weiche Kante statt 1px-Strich, und nur dort, wo Chrome den Inhalt
   tatsächlich überlappt (Skill §12). */
.kopf::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -22px; height: 22px;
  background: linear-gradient(var(--chrome), transparent);
  pointer-events: none;
}

.reiter {
  display: flex; gap: var(--raum-1);
  max-width: var(--spalte); margin: 0 auto;
  padding: var(--raum-2) var(--raum-4) 0;
}
.reiter a {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: var(--ziel);
  padding: var(--raum-2) var(--raum-2) 0.6rem;
  border-radius: var(--radius-klein);
  color: var(--text-3); text-decoration: none;
  font-size: 0.7rem; font-weight: 550; letter-spacing: 0.012em;
  transition: color var(--zeit) var(--kurve),
              transform var(--zeit-kurz) var(--kurve);
}
.reiter a[aria-current="page"] { color: var(--text); font-weight: 650; }
.reiter a[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }
.reiter svg { width: 21px; height: 21px; }
.reiter a:active { transform: scale(0.94); }

.badge {
  position: absolute; top: 2px; right: 22%;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  font-size: 0.62rem; font-weight: 700; font-style: normal;
  background: var(--ab); color: #fff; border-radius: 999px;
}

.leiste {
  display: flex; align-items: center; gap: var(--raum-2); flex-wrap: wrap;
  max-width: var(--spalte); margin: 0 auto;
  padding: var(--raum-2) var(--raum-4) var(--raum-3);
}
.leiste.flach { padding-left: 0; padding-right: 0; }

/* Der Trefferzähler bekommt eine eigene Zeile unter den Bedienelementen:
   Er ist Ergebnis, nicht Bedienung, und gehört unter das, was ihn ändert. */
.treffer {
  flex: 1 0 100%;
  margin: var(--raum-1) 0 0;
  font-size: 0.875rem; color: var(--text-2);
}
.treffer strong { color: var(--text); font-weight: 650; }

/* Die Bedienelemente teilen sich die erste Zeile. Die Suche gibt als Erste
   nach, die Auswahlfelder behalten genug Platz für ihre längste Beschriftung. */
.leiste .suche { flex: 1 1 9rem; min-width: 7rem; max-width: 15rem; }
.leiste select { flex: 0 1 auto; min-width: 0; }
#sortierung { flex: 1 1 11rem; max-width: 14rem; }
#profil { flex: 0 1 8.5rem; }
#richtung { flex: 0 0 auto; padding: 0 var(--raum-3); }
#filter-auf { flex: 0 0 auto; }

/* == 4  Bedienelemente ======================================== */

button, select, input, textarea { font: inherit; color: var(--text); }

button, select {
  min-height: var(--ziel);
  padding: 0 var(--raum-3);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  cursor: pointer;
  transition: transform var(--zeit-kurz) var(--kurve),
              background-color var(--zeit) var(--kurve),
              border-color var(--zeit) var(--kurve);
}
/* Rückmeldung beim Drücken, nicht beim Loslassen (Skill §1). */
button:active, select:active { transform: scale(0.97); }
@media (hover: hover) {
  button:hover, select:hover { border-color: var(--rand-stark); }
}
button:disabled { opacity: 0.45; cursor: default; }

:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--raum-1); }
.chip {
  min-height: 34px; padding: 0 var(--raum-3);
  font-size: 0.83rem; border-radius: 999px;
  background: var(--flaeche); color: var(--text-2);
}
.chip[aria-pressed="true"] {
  background: var(--text); color: var(--bg); border-color: var(--text);
}

.regler-feld { display: none; max-width: var(--spalte); margin: 0 auto;
               padding: 0 var(--raum-4) var(--raum-3); }
.regler-feld[data-offen] {
  display: grid; gap: var(--raum-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.regler > label { display: block; margin-bottom: var(--raum-1);
                  font-size: 0.8rem; color: var(--text-2); }
.regler > label b { color: var(--text); font-weight: 650;
                    font-variant-numeric: tabular-nums; }
.regler input[type="range"] {
  width: 100%; height: var(--ziel);
  accent-color: var(--akzent);
  touch-action: none;              /* die Seite scrollt beim Ziehen nicht mit */
}

.hinweis {
  max-width: var(--spalte); margin: 0 auto var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); color: var(--text-2); font-size: 0.855rem;
}

.knopfreihe { display: flex; gap: var(--raum-2); flex-wrap: wrap;
              align-items: center; }
.knopf-dringend {
  background: var(--ab); color: #fff; border-color: transparent;
  text-decoration: none; display: inline-flex; align-items: center;
  padding: 0 var(--raum-4); border-radius: var(--radius-klein);
  min-height: var(--ziel);
}
.warn { color: var(--ab); }

/* == 5  Karten ================================================ */

.karte {
  position: relative;
  padding: var(--raum-4);
  margin-bottom: var(--raum-2);
  background: var(--flaeche);
  border: 1px solid transparent;   /* im Hellen traegt der Schatten die Tiefe */
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  transition: transform var(--zeit-kurz) var(--kurve),
              background-color var(--zeit) var(--kurve),
              border-color var(--zeit) var(--kurve),
              box-shadow var(--zeit) var(--kurve);
}

/* Die ganze Karte ist das Ziel, nicht nur der Name (Skill §10).
   Der Selektor MUSS auf `.karte > .karte-oben` begrenzt bleiben: Ohne die
   Einschränkung greift er auch für `.karte-name` in der Trade-Liste unter
   „Abgelaufen", wo es keinen positionierten Vorfahren gibt — die Fläche
   spannt sich dann über die ganze Seite und schluckt jeden Klick. */
.karte > .karte-oben .karte-name::after {
  content: ""; position: absolute; inset: 0;
  border-radius: var(--radius-gross);
}
a.karte-name { text-decoration: none; }

.karte:has(.karte-name:active) { transform: scale(0.993); }
.karte:has(.karte-name:focus-visible) { outline: 2px solid var(--akzent);
                                        outline-offset: 2px; }
@media (hover: hover) {
  .karte:hover { border-color: var(--rand-stark); box-shadow: var(--schatten-hoch); }
  .karte:hover .pfeil { transform: translateX(3px); opacity: 0.85; }
}

.karte-oben {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: var(--raum-3);
}
.karte-titel { min-width: 0; }
.karte-name {
  display: block;
  font-size: 1.03rem; font-weight: 620;
  letter-spacing: -0.012em; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.karte-kurs { text-align: right; }
.karte-kurs b {
  display: block;
  font-size: 1.2rem; font-weight: 650; letter-spacing: -0.014em;
}
.abstand { font-size: 0.75rem; font-variant-numeric: tabular-nums; }
/* Kursrichtung nie allein über Farbe — immer mit Vorzeichen (§11). */
.abstand.up, .zahl.up, .balken-zahl .up { color: var(--auf); }
.abstand.down, .zahl.down, .balken-zahl .down { color: var(--ab); }

.karte-knoepfe {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.herz {
  min-width: var(--ziel); min-height: var(--ziel);
  display: grid; place-items: center;
  background: none; border: none; color: var(--text-3);
}
.herz[aria-pressed="true"] { color: var(--ab); }
.herz[aria-pressed="true"] svg { fill: currentColor; }
.herz:active { transform: scale(0.86); }
.kaufen {
  min-height: 28px; padding: 0 var(--raum-2);
  font-size: 0.685rem; font-weight: 550; white-space: nowrap;
  border-radius: 999px; color: var(--text-2); background: var(--flaeche-2);
}
.kaufen[data-an] { color: var(--auf); border-color: currentColor; opacity: 1; }

.pfeil {
  color: var(--text-3); opacity: 0.45; flex: none;
  transition: transform var(--zeit) var(--kurve), opacity var(--zeit) var(--kurve);
}

.preise {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--raum-2); margin-top: var(--raum-4);
}
.preise.vier { max-width: 32rem; }
.preis span {
  display: block;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.055em;
  text-transform: uppercase; color: var(--text-3);
}
.preis b { display: block; font-weight: 620; font-size: 0.95rem; margin-top: 1px; }
.preis.aktuell b { font-size: 1.08rem; }
.preis.aktuell.up b { color: var(--auf); }
.preis.aktuell.down b { color: var(--ab); }

.marke {
  font-size: 0.68rem; padding: 2px var(--raum-2);
  border-radius: 999px; border: 1px solid var(--rand);
  color: var(--text-2); white-space: nowrap;
}
.marke.an { color: var(--auf); border-color: currentColor; }
.marke.offen { opacity: 0.65; font-style: italic; }

.karte-unten {
  display: flex; align-items: center; gap: var(--raum-2);
  flex-wrap: wrap; margin-top: var(--raum-3);
}
.karte-unten .marke { margin-left: auto; }
.karte.dringend { border-color: var(--ab); }

/* == 6  Risiko-Donut ========================================== */

.donut { width: 52px; height: 52px; flex: none; }
.donut circle { fill: none; stroke-width: 5.5; }
.donut .bahn { stroke: var(--rand); }
.donut text {
  font-size: 15px; font-weight: 650; fill: var(--text);
  text-anchor: middle; dominant-baseline: central;
  font-variant-numeric: tabular-nums;
}
/* Die Faktorenzahl bleibt klein. `.donut.gross text` hat höhere Spezifität
   und hat sie vorher mit hochskaliert — dadurch stand „5/5" fast so groß
   da wie der Score selbst. */
.donut .faktoren { font-size: 7.5px; font-weight: 500; fill: var(--text-3); }
.donut.gross { width: 104px; height: 104px; }
.donut.gross text { font-size: 16px; }
.donut.gross .faktoren { font-size: 7px; }

/* == 7  Kurslage-Leiste ======================================= */

/* Sie erklärt sich nicht von selbst, deshalb steht die Skala darüber
   (Skill §16: wer ein Etikett braucht, hat eine schwache Zuordnung). */
.spur-block { margin-top: var(--raum-4); }
/* Der Einstieg wird auf der Leiste markiert, statt als eigenes Feld zu
   erscheinen -- eine Information, eine Stelle (Skill §16, Einfachheit). */
.spur .einstieg-marke {
  position: absolute; top: 50%;
  width: 2px; height: 9px; margin-top: -4.5px;
  background: var(--akzent); border-radius: 1px; opacity: 0.9;
}
.spur-skala {
  display: flex; justify-content: space-between;
  font-size: 0.63rem; letter-spacing: 0.02em;
  color: var(--text-3); margin-bottom: var(--raum-1);
}
.spur {
  position: relative; height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ab), var(--rand) 42%,
                              var(--rand) 58%, var(--auf));
  opacity: 0.45;
}
.spur i {
  position: absolute; top: 50%;
  width: 2.5px; height: 13px; margin-top: -6.5px;
  border-radius: 2px; background: var(--text);
  box-shadow: 0 0 0 2px var(--flaeche);
}

/* == 8  Detailansicht ========================================= */

.detail { max-width: var(--spalte); }
.zurueck {
  display: inline-flex; align-items: center; min-height: var(--ziel);
  color: var(--text-2); text-decoration: none; font-size: 0.855rem;
}
@media (hover: hover) { .zurueck:hover { color: var(--text); } }

.detail-kopf {
  display: grid; grid-template-columns: 1fr auto; gap: var(--raum-5);
  padding-bottom: var(--raum-5); border-bottom: 1px solid var(--rand);
}
.detail .gross {
  font-size: 2.1rem; font-weight: 660; letter-spacing: -0.022em;
  margin: var(--raum-3) 0 var(--raum-2);
  font-variant-numeric: tabular-nums;
}
/* Quelle und Alter des grossen Kurses -- direkt darunter, leise (§4, §11) */
.kurs-stand {
  margin: calc(-1 * var(--raum-2)) 0 var(--raum-2);
  font-size: 0.8rem; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.kopf-rechts { display: flex; flex-direction: column; align-items: center;
               gap: var(--raum-2); min-width: 12rem; }
.mitte { text-align: center; max-width: 11rem; }
.tr {
  width: 100%; justify-content: center;
  display: inline-flex; align-items: center;
  min-height: 38px; padding: 0 var(--raum-3);
  font-size: 0.8rem; border-radius: var(--radius-klein);
  border: 1px solid var(--rand); background: var(--flaeche);
  color: var(--text-2); text-decoration: none;
}
.tr[data-aus] { opacity: 0.45; cursor: not-allowed; }
.gekauft-an { border-color: var(--auf); color: var(--auf); }

.detail section { padding: var(--raum-5) 0; border-bottom: 1px solid var(--rand); }
.detail section:last-of-type { border-bottom: none; }
.detail section > h2 { margin-bottom: var(--raum-3); }

.belege { list-style: none; padding: 0; margin: 0;
          display: grid; gap: var(--raum-2); }
.belege li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--raum-1);
  padding: var(--raum-3);
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.quelle {
  margin-left: auto; font-size: 0.72rem; color: var(--text-3);
  text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-5); }
.zwei ul { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; }

.kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: var(--raum-4); margin: 0;
}
.kennzahlen dt { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.055em;
                 text-transform: uppercase; color: var(--text-3); }
.kennzahlen dd { margin: 2px 0 0; font-weight: 620; font-size: 0.98rem; }

.chart { margin: 0; }
.chart svg { width: 100%; height: auto; touch-action: none; display: block; }
.chart .flaeche { fill: var(--akzent); opacity: 0.07; }
.chart .linie { fill: none; stroke: var(--text); stroke-width: 1.5;
                vector-effect: non-scaling-stroke; }
.chart .raster { stroke: var(--rand); stroke-width: 1;
                 vector-effect: non-scaling-stroke; }
.chart .achse { font-size: 10px; fill: var(--text-3);
                font-variant-numeric: tabular-nums; }
.chart .achse.ziel { fill: var(--auf); }
.chart .achse.stop { fill: var(--ab); }
.chart .achse.einstieg { fill: var(--akzent); }
.chart .marke-ziel, .chart .marke-stop, .chart .marke-einstieg {
  stroke-width: 1.2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke;
}
.chart .marke-ziel { stroke: var(--auf); }
.chart .marke-stop { stroke: var(--ab); }
.chart .marke-einstieg { stroke: var(--akzent); }
.chart .faden { stroke: var(--text-3); stroke-width: 1;
                vector-effect: non-scaling-stroke; }
.chart .punkt { fill: var(--text); }
.chart figcaption { margin-top: var(--raum-2); font-variant-numeric: tabular-nums; }

#frage-form { display: flex; gap: var(--raum-2); align-items: flex-start; }
#frage-form textarea { flex: 1; }
textarea, input[type="number"], input[type="text"], input[type="date"] {
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  padding: var(--raum-2) var(--raum-3); min-height: var(--ziel);
}
textarea { width: 100%; resize: vertical; }
.antwort {
  margin-top: var(--raum-3); padding: var(--raum-4);
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.antwort p { margin: 0 0 var(--raum-2); }
.antwort p:last-child { margin-bottom: 0; }
.antwort.laedt { color: var(--text-2); }
.antwort.fehler { border-color: var(--ab); color: var(--ab); }
.fruehere { margin-top: var(--raum-4); }
.fruehere details { padding: var(--raum-2) 0; border-top: 1px solid var(--rand); }
.fruehere summary { cursor: pointer; min-height: 1.9rem; font-size: 0.92rem; }
.fruehere p { font-size: 0.9rem; color: var(--text-2); margin: var(--raum-2) 0 0; }

/* == 9  Abgelaufen ============================================ */

.balken-block { padding: var(--raum-5) 0; border-bottom: 1px solid var(--rand); }
.balken-block.gedaempft { opacity: 0.55; }
.balken-zahl .gross {
  font-size: 2.1rem; font-weight: 660; letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
}
.balken {
  position: relative; height: 9px; margin: var(--raum-3) 0;
  background: var(--flaeche-2); border: 1px solid var(--rand);
  border-radius: 999px; overflow: hidden;
}
.balken .null { position: absolute; left: 50%; top: 0; bottom: 0;
                width: 1px; background: var(--rand-stark); z-index: 1; }
.balken i { position: absolute; top: 0; bottom: 0; border-radius: 999px;
            transition: width var(--zeit) var(--kurve),
                        left var(--zeit) var(--kurve); }
.balken i.up { background: var(--auf); }
.balken i.down { background: var(--ab); }

/* Bereichsregler mit zwei Griffen: zwei übereinanderliegende Regler,
   damit Tastatur und Vorlesefunktion erhalten bleiben (§8, §11). */
.bereich { position: relative; height: var(--ziel); touch-action: none; }
.bereich-bahn {
  position: absolute; top: 50%; left: 0; right: 0; height: 4px;
  margin-top: -2px; background: var(--rand); border-radius: 999px;
}
.bereich-aktiv { position: absolute; top: 0; bottom: 0;
                 background: var(--akzent); border-radius: 999px; }
.bereich input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; height: var(--ziel);
  margin: 0; background: none; appearance: none; pointer-events: none;
}
.bereich input[type="range"]::-webkit-slider-thumb {
  appearance: none; pointer-events: auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--flaeche); border: 2px solid var(--akzent);
  box-shadow: var(--schatten); cursor: grab;
}
.bereich input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--flaeche); border: 2px solid var(--akzent); cursor: grab;
}

.verteilung { display: flex; gap: 2px; align-items: flex-end;
              height: 46px; margin-top: var(--raum-3); }
.verteilung .saeule { flex: 1; display: flex; flex-direction: column;
                      justify-content: flex-end; height: 100%; }
.verteilung .saeule i { display: block; background: var(--akzent);
                        opacity: 0.7; border-radius: 3px 3px 0 0; min-height: 2px;
                        transition: opacity var(--zeit) var(--kurve); }
.verteilung .saeule.aus i { opacity: 0.15; }
.verteilung .saeule span { font-size: 0.58rem; color: var(--text-3);
                           text-align: center; }

.vergleich-zeile {
  display: flex; align-items: baseline; gap: var(--raum-2); flex-wrap: wrap;
  padding: var(--raum-3) 0; border-top: 1px solid var(--rand);
}
.vergleich-zeile .karte-meta { margin-right: auto; }
.vergleich-zeile b { min-width: 9rem; }
.vergleich-zeile.gedaempft { opacity: 0.5; }

/* == 10  Formulare und Meldungen ============================== */

.erfassen { margin: var(--raum-3) 0 var(--raum-5); }
.erfassen summary { cursor: pointer; min-height: var(--ziel);
                    display: flex; align-items: center; color: var(--text-2); }
#kauf-form, #kauf-block form {
  display: flex; flex-wrap: wrap; gap: var(--raum-2); align-items: flex-end;
}
#kauf-form label, #kauf-block label {
  display: grid; gap: 2px; font-size: 0.75rem; color: var(--text-2);
}
#kauf-form input, #kauf-block input { min-width: 9rem;
                                      font-variant-numeric: tabular-nums; }
.vorschlag { border-left: 3px solid var(--akzent); padding-left: var(--raum-3); }
.hervor { outline: 2px solid var(--akzent); outline-offset: 2px; }
.dringend-block { border-left: 3px solid var(--ab); padding-left: var(--raum-4); }
.laden { text-align: center; color: var(--text-3);
         padding: var(--raum-5); font-size: 0.855rem; }

footer {
  max-width: var(--spalte); margin: 0 auto;
  padding: 0 var(--raum-4) var(--raum-6);
  color: var(--text-3); font-size: 0.76rem;
}
.visuell-versteckt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* == 11  Mobil und Zugänglichkeit ============================= */

@media (max-width: 768px) {
  .leiste { gap: var(--raum-1); }
  .leiste .suche { flex: 1 1 100%; max-width: none; }
  #sortierung { flex: 1 1 8rem; }
  #profil { flex: 1 1 6rem; }
  .leiste select { font-size: 0.82rem; padding: 0 1.6rem 0 var(--raum-2); }
  .treffer { font-size: 0.82rem; }
  .regler-feld[data-offen] { grid-template-columns: 1fr; }

  .karte { padding: var(--raum-3); }
  .karte-oben { grid-template-columns: auto 1fr auto auto; gap: var(--raum-2); }
  .karte-kurs { grid-column: 2 / 3; grid-row: 2; text-align: left;
                margin-top: var(--raum-1); }
  .karte-kurs b { display: inline; font-size: 1.05rem; }
  .karte-kurs .abstand { margin-left: var(--raum-1); }
  .pfeil { display: none; }
  /* §11: die vier Preisfelder brechen auf zwei Reihen à zwei um */
  .preise { grid-template-columns: repeat(2, 1fr); row-gap: var(--raum-3); }

  .detail-kopf { grid-template-columns: 1fr; }
  .kopf-rechts { flex-direction: row; flex-wrap: wrap; align-items: center;
                 min-width: 0; }
  .tr { width: auto; flex: 1 1 12rem; }
  .zwei { grid-template-columns: 1fr; }
  #frage-form { flex-direction: column; }
  #frage-form button { width: 100%; }
  #kauf-form, #kauf-block form { flex-direction: column; align-items: stretch; }
  #kauf-form input, #kauf-block input { min-width: 0; width: 100%; }
  .vergleich-zeile b { min-width: 0; width: 100%; }
}

/* Gedämpfte Bewegung heißt nicht „keine Rückmeldung", sondern eine
   sanftere ohne Vestibularreiz (Skill §14). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  button:active, select:active, .herz:active, .reiter a:active { transform: none; }
  .karte:has(.karte-name:active) { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .kopf { background: var(--bg); backdrop-filter: none;
          -webkit-backdrop-filter: none; }
  .kopf::after { display: none; }
}

@media (prefers-contrast: more) {
  :root { --text-2: var(--text); --text-3: var(--text); --rand: currentColor; }
  .karte, .chip, button, select, .belege li { border-width: 2px; }
  .spur, .verteilung .saeule i { opacity: 1; }
  .pfeil { opacity: 1; }
}

/* == 12  Anmeldung ============================================ */

/* Eigene Seite statt des nativen Browser-Dialogs: Der gehört dem Browser
   und lässt sich nicht gestalten — auf dem iPhone ein grauer Systemkasten
   mitten in einer sonst eigenen Oberfläche. */
.anmelde-seite { display: grid; place-items: center; min-height: 100svh; }
.anmelden { width: 100%; max-width: 23rem; padding: var(--raum-4); }

.anmelde-karte {
  background: var(--flaeche);
  border: 1px solid transparent;
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hoch);
  padding: var(--raum-6) var(--raum-5) var(--raum-5);
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  .anmelde-karte { border-color: var(--rand); }
}

.anmelde-zeichen { width: 54px; height: 54px; margin-bottom: var(--raum-3); }
.anmelde-zeichen circle { fill: none; stroke-width: 5.5; }

.anmelde-karte h1 { font-size: 1.4rem; letter-spacing: -0.018em; }
.anmelde-karte > .karte-meta { margin: var(--raum-1) 0 var(--raum-5); }

.anmelde-karte form { display: grid; gap: var(--raum-3); text-align: left; }
.feld { display: grid; gap: var(--raum-1); }
.feld span {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.055em;
  text-transform: uppercase; color: var(--text-3);
}
.feld input {
  width: 100%;
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  padding: 0 var(--raum-3);
  min-height: var(--ziel);
  transition: border-color var(--zeit) var(--kurve);
}
.feld input:focus { border-color: var(--akzent); }

.anmelde-knopf {
  margin-top: var(--raum-2);
  width: 100%;
  background: var(--text); color: var(--bg);
  border-color: transparent; font-weight: 600;
}
@media (hover: hover) { .anmelde-knopf:hover { opacity: 0.88; } }

.anmelde-fehler {
  margin: 0; padding: var(--raum-2) var(--raum-3);
  background: color-mix(in srgb, var(--ab) 10%, transparent);
  border: 1px solid var(--ab); border-radius: var(--radius-klein);
  color: var(--ab); font-size: 0.83rem;
}
.anmelde-fuss {
  margin: var(--raum-4) 0 0; text-align: center;
  color: var(--text-3); font-size: 0.72rem;
}

/* == 13  Segmentierte Auswahl ================================= */

/* Ersetzt native <select> überall dort, wo es wenige Möglichkeiten gibt.
   Native Auswahlfelder sehen auf jeder Plattform anders aus und lassen sich
   kaum gestalten — mitten in einer sonst eigenen Oberfläche fallen sie auf.
   Für viele Möglichkeiten (Sortierung, Branchen) bleibt das <select>, dann
   aber mit eigenem Pfeil und unseren Abständen. */
.segment {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}
.segment button {
  min-height: 34px; padding: 0 var(--raum-3);
  font-size: 0.8rem; font-weight: 550;
  background: none; border: none; border-radius: 7px;
  color: var(--text-2); white-space: nowrap;
}
.segment button[aria-pressed="true"] {
  background: var(--flaeche); color: var(--text);
  box-shadow: var(--schatten);
}
@media (hover: hover) {
  .segment button:hover { color: var(--text); }
  .segment button[aria-pressed="true"]:hover { border-color: transparent; }
}

/* Wo ein <select> bleibt: eigener Pfeil statt des Systempfeils. */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.75rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--text);
}

/* Kleine Erklärzeile unter einer Auswahl — für Begriffe wie „Spur A/B/C",
   die ohne Erklärung nichts sagen (Skill §16, Klarheit). */
.erklaerung {
  font-size: 0.73rem; color: var(--text-3);
  margin: var(--raum-1) 0 0; line-height: 1.4;
}
.spurwahl { max-width: var(--spalte); margin: 0 auto var(--raum-4); }
.spurwahl .segment { width: 100%; }
.spurwahl .segment button { flex: 1; }
@media (max-width: 768px) {
  .spurwahl .segment { width: 100%; }
  .spurwahl .segment button { font-size: 0.72rem; padding: 0 var(--raum-1); }
  .segment { width: 100%; }
  .segment button { flex: 1; }
}

/* Abmelden unten auf jeder Seite — unaufdringlich, aber auffindbar. */
.abmelden-form { display: inline; }
.abmelden-knopf {
  background: none; border: none; padding: 0;
  min-height: auto; color: inherit; font-size: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

/* == 14  Trefferquoten ======================================== */

/* „Nach Risiko-Klasse" und „Nach Branche" waren Textzeilen — die Zahlen
   ließen sich nicht vergleichen, ohne sie zu lesen. Jetzt trägt ein Balken
   den Vergleich und die Zahl bestätigt ihn (Skill §16: Hierarchie so, dass
   das Wichtigste das Auffälligste ist). */
.quoten { display: grid; gap: var(--raum-2); }

.quote {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "punkt titel wert" "punkt balken wert";
  align-items: center;
  column-gap: var(--raum-3);
  row-gap: var(--raum-1);
  padding: var(--raum-3) var(--raum-4);
  background: var(--flaeche);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
@media (prefers-color-scheme: dark) { .quote { border-color: var(--rand); } }

.quote.leerzeile { opacity: 0.5; grid-template-areas: "punkt titel wert"; }
/* Zu kleine Stichprobe wird gedämpft, nicht versteckt (§8). */
.quote.unsicher { opacity: 0.62; }

.quote-punkt {
  grid-area: punkt;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-3);
}
.quote-titel { grid-area: titel; display: flex; align-items: baseline;
               gap: var(--raum-2); flex-wrap: wrap; }
.quote-titel b { font-size: 0.94rem; font-weight: 620; letter-spacing: -0.006em; }
.quote-titel span { font-size: 0.73rem; color: var(--text-3);
                    font-variant-numeric: tabular-nums; }

.quote-wert {
  grid-area: wert; text-align: right;
  font-size: 1.05rem; font-weight: 650; letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
}
.quote-wert.up { color: var(--auf); }
.quote-wert.down { color: var(--ab); }
.quote-wert small { display: block; font-size: 0.66rem; font-weight: 500;
                    color: var(--text-3); letter-spacing: 0.03em; }

.quote-balken {
  grid-area: balken;
  position: relative; height: 6px;
  background: var(--flaeche-2); border-radius: 999px; overflow: hidden;
}
.quote-balken i {
  position: absolute; inset: 0 auto 0 0;
  background: var(--auf); border-radius: 999px;
  transition: width var(--zeit) var(--kurve);
}

@media (max-width: 768px) {
  .quote { column-gap: var(--raum-2); padding: var(--raum-3); }
  .quote-wert { font-size: 0.98rem; }
}

/* == 15  Wortmarke ============================================ */

/* Das Logo ist reines Schwarz-Weiß. Statt einer zweiten Bilddatei kehrt
   `invert(1)` im Hellmodus die Farben exakt um: schwarzer Grund mit weißer
   Schrift wird zu weißem Grund mit schwarzer Schrift. Auf dem Startbildschirm
   bleibt es unverändert — dort gilt das Symbol, nicht die Erscheinung. */
.marke-oben {
  display: block;
  max-width: var(--spalte);
  margin: 0 auto;
  padding: var(--raum-3) var(--raum-4) 0;
  line-height: 0;
}
.marke-oben img {
  width: auto; height: 26px;
  border-radius: 6px;
  filter: invert(1);
  transition: opacity var(--zeit) var(--kurve);
}
@media (prefers-color-scheme: dark) { .marke-oben img { filter: none; } }
@media (hover: hover) { .marke-oben:hover img { opacity: 0.75; } }

.anmelde-marke {
  width: 84px; height: 84px;
  border-radius: 18px;
  margin-bottom: var(--raum-4);
  filter: invert(1);
}
@media (prefers-color-scheme: dark) { .anmelde-marke { filter: none; } }

/* Bei erhöhtem Kontrast bleibt das Umkehren, aber ein Rand macht die
   Kante sichtbar, falls Grund und Marke gleich hell sind. */
@media (prefers-contrast: more) {
  .marke-oben img, .anmelde-marke { outline: 1px solid var(--text); }
}

.schritte { margin: 0; padding-left: 1.25rem; font-size: 0.875rem; }
.schritte li { margin-bottom: var(--raum-2); line-height: 1.5; }
.schritte li::marker { color: var(--text-3); font-variant-numeric: tabular-nums; }

/* == 16  Suche ================================================ */

.suche {
  position: relative;
  display: flex; align-items: center;
  flex: 1 1 11rem; min-width: 8rem; max-width: 16rem;
}
.suche > svg {
  position: absolute; left: var(--raum-3);
  color: var(--text-3); pointer-events: none;
}
.suche input {
  width: 100%;
  min-height: var(--ziel);
  padding: 0 2.2rem 0 2.45rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  transition: border-color var(--zeit) var(--kurve);
}
.suche input::placeholder { color: var(--text-3); }
.suche input:focus { border-color: var(--akzent); }
/* Das eigene Kreuz statt des System-Kreuzes von type=search */
.suche input::-webkit-search-cancel-button { display: none; }
#suche-leeren {
  position: absolute; right: 4px;
  width: 30px; min-height: 30px; padding: 0;
  display: grid; place-items: center;
  font-size: 1.1rem; line-height: 1;
  background: none; border: none; color: var(--text-3);
}
@media (hover: hover) { #suche-leeren:hover { color: var(--text); } }

@media (max-width: 768px) {

}

/* --- §5a Wochenauswahl -----------------------------------------------------
   Der Block steht ueber der langen Liste und ist das Ergebnis, das die Liste
   erklaert. Deshalb bekommt er mehr Gewicht als eine Karte: eigene Flaeche,
   groessere Zahlen, aber dieselben Abstaende und Radien wie ueberall
   (Skill §16, Handwerk -- kein Wert ist zufaellig). */
.woche {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  padding: var(--raum-5);
  margin-bottom: var(--raum-5);
}

.woche-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--raum-3);
  margin-bottom: var(--raum-2);
}

.woche-kopf h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 650;
  /* Grosse Schrift steht optisch zu weit auseinander (Skill §15) */
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.woche-kennung {
  margin-left: auto;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

/* Versuch nebenher: abgesetzt, aber nicht versteckt (§5a) */
.woche-test {
  margin-top: var(--raum-4);
  padding-top: var(--raum-4);
  border-top: 1px dashed var(--rand);
}
.woche-test h3 {
  margin: 0 0 var(--raum-1);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.woche-test .woche-erklaerung { margin-bottom: var(--raum-3); }

.woche-stand {
  margin: 0 0 var(--raum-2);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

.woche-erklaerung,
.woche-fussnote,
.woche-leer {
  margin: 0;
  color: var(--text-2);
  font-size: 0.875rem;
}

.woche-fussnote {
  margin-top: var(--raum-4);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--rand);
  color: var(--text-3);
  font-size: 0.8rem;
}

.woche-liste {
  list-style: none;
  margin: var(--raum-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--raum-2);
}

.woche-wert {
  background: var(--flaeche-2);
  border-radius: var(--radius);
  padding: var(--raum-3) var(--raum-4);
}

/* Der ganze Kopf ist die Trefferflaeche, nicht nur der Name (Skill §10) */
.woche-name {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  min-height: var(--ziel);
  color: inherit;
  text-decoration: none;
}

.woche-rang {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rand);
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.woche-titel { min-width: 0; }

.woche-titel b {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.woche-symbol {
  font-size: 0.78rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.woche-name:active { opacity: 0.7; }
.woche-name:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: var(--radius-klein);
}

/* Zahlen umbrechen statt zu schrumpfen -- auf dem Telefon stehen sie
   untereinander, nicht in einer unlesbar engen Zeile (Skill §16, Flexibilitaet) */
.woche-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-5);
  margin: var(--raum-2) 0 0;
  padding-left: calc(26px + var(--raum-3));
}

.woche-zahlen div { min-width: 0; }

.woche-zahlen dt {
  font-size: 0.72rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;   /* kleine Schrift braucht mehr Luft (Skill §15) */
}

.woche-zahlen dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.woche-zahlen dd.gut { color: var(--auf); }

@media (max-width: 30rem) {
  .woche { padding: var(--raum-4); }
  .woche-zahlen { padding-left: 0; gap: var(--raum-2) var(--raum-4); }
}

/* Eine erzwungene Doppelung muss sichtbar bleiben, sonst sieht die Auswahl
   gestreut aus, obwohl sie es nicht ist (Skill §16, Feedback als Warnung). */
.woche-nachgerueckt {
  margin: var(--raum-2) 0 0;
  padding-left: calc(26px + var(--raum-3));
  font-size: 0.78rem;
  color: var(--akzent);
}
@media (max-width: 30rem) { .woche-nachgerueckt { padding-left: 0; } }

/* Kein Messwert ist weder Gewinn noch Verlust. Ohne eigene Klasse waere der
   Gedankenstrich gruen, weil `null >= 0` in JS true ergibt (§8). */
.zahl.neutral, .balken-zahl .neutral { color: var(--text-3); }

/* Begruendet, warum genau dieser Wert dasteht (§5a). Gedaempft: es ist der
   Beleg zur Auswahl, nicht die Auswahl selbst. */
.woche-frische {
  margin: var(--raum-2) 0 0;
  padding-left: calc(26px + var(--raum-3));
  font-size: 0.78rem;
  color: var(--text-3);
}
@media (max-width: 30rem) { .woche-frische { padding-left: 0; } }

/* --- Leerer Balken (§8) ---------------------------------------------------
   Ohne abgeschlossene Trades gibt es nichts zu zeigen. Zahl und Balken
   verschwinden ganz, statt als leeres Gerippe stehenzubleiben -- das las sich
   wie ein Ladefehler. Der Hinweis wird zur Hauptaussage und bleibt voll
   lesbar; „gedaempft" gilt nur fuer echte, aber duenne Messungen. */
.balken-block.leer .balken-zahl,
.balken-block.leer .balken { display: none; }

.balken-block.leer #balken-hinweis {
  margin: 0 0 var(--raum-2);
  font-size: 1rem;
  color: var(--text);
}

.balken-block.leer #offen-hinweis { margin: 0; }

/* Leere Abschnitte bekommen dieselbe Flaeche wie gefuellte, damit die Seite
   nicht in nackte Textzeilen zerfaellt. */
#branchen .leer, #trades .leer {
  margin: 0;
  padding: var(--raum-4);
  background: var(--flaeche-2);
  border-radius: var(--radius);
  color: var(--text-3);
  font-size: 0.875rem;
}

/* --- Stand der Kursdaten (§11) --------------------------------------------
   Gedaempft, solange alles frisch ist -- es ist Beiwerk, keine Nachricht.
   Wird die Liste alt, tritt die Zeile hervor: dann ist sie die wichtigste
   Angabe auf der Seite, weil jede Zahl darunter davon abhaengt. */
.stand {
  margin: var(--raum-1) 0 0;
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.stand.alt {
  color: var(--akzent);
  font-weight: 550;
}

.stand.alt::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: var(--raum-2);
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}

/* --- §5a Die drei Plaetze -------------------------------------------------
   Drei Zustaende, drei Lesarten. Der Zustand steht als farbiger Punkt vor dem
   Namen -- Form und Position gleich, nur die Farbe traegt die Bedeutung, damit
   die Karten als eine Reihe lesbar bleiben (Skill §16, Vertrautheit). */
.platz-marke {
  flex: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--rand-stark);
}
.platz-marke-laeuft { background: var(--auf); }
.platz-marke-wartet { background: var(--akzent); }

.platz-stand { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

.platz-lage,
.platz-frei {
  margin: var(--raum-2) 0 0;
  padding-left: calc(10px + var(--raum-3));
  font-size: 0.8rem;
  color: var(--text-2);
}

/* Ein freier Platz ist kein Fehler, sondern eine Ansage. Ruhig, aber sichtbar:
   Er erklaert, wie viele Werte am Sonntag kommen. */
.woche-wert.platz-frei {
  background: none;
  border: 1px dashed var(--rand-stark);
}
.platz-frei {
  padding: var(--raum-1) 0;
  color: var(--text-3);
}

/* Wo der Kurs zwischen Stop und Ziel steht. Kein Balken von links, sondern eine
   Marke auf der Strecke -- die Frage ist "wo dazwischen", nicht "wie viel". */
.platz-leiste {
  position: relative;
  height: 4px;
  margin: var(--raum-3) 0 0 calc(10px + var(--raum-3));
  border-radius: 999px;
  background: linear-gradient(to right, var(--ab), var(--rand), var(--auf));
  opacity: 0.55;
}
.platz-leiste i {
  position: absolute;
  top: -3px;
  width: 10px; height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--flaeche-2);
}

.woche-zahlen dd { color: var(--text); }

@media (max-width: 30rem) {
  .platz-lage, .platz-leiste { padding-left: 0; margin-left: 0; }
}

/* --- §5/§7c Warum diese Preise ---------------------------------------------
   Die Herleitung ist eine Rechnung und liest sich wie eine: Begriff links,
   Satz rechts, ohne Karte drumherum. Die Begruendung aus der Recherche ist
   Fliesstext und bekommt Absaetze -- zwei Textsorten, zwei Formen. */
.herleitung {
  margin: 0 0 var(--raum-3);
  display: grid;
  gap: var(--raum-2);
}
.herleitung div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--raum-3);
  align-items: baseline;
}
.herleitung dt {
  font-size: 0.78rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.herleitung dd { margin: 0; font-size: 0.9rem; }

.preise-warum h3 {
  margin: var(--raum-4) 0 var(--raum-2);
  font-size: 0.95rem;
  font-weight: 600;
}
.preise-warum p { margin: 0 0 var(--raum-2); font-size: 0.9rem; }
.preise-warum .dagegen { color: var(--text-2); }

@media (max-width: 30rem) {
  .herleitung div { grid-template-columns: 1fr; gap: var(--raum-1); }
}

/* --- §8 Stop-Stufen ----------------------------------------------------------
   Eine Tabelle, weil es tabellarische Daten sind: vier Zeilen, die man
   zeilenweise vergleicht. Sie scrollt in ihrem eigenen Rahmen, nie die Seite
   (Skill §16, Flexibilitaet). Auf dem Telefon fallen die beiden Prozentspalten
   weg -- die Euro-Werte sind das, was man beim Broker eintippt. */
.tabelle-rahmen { overflow-x: auto; margin: var(--raum-3) 0; }

.stufen-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.stufen-tabelle th, .stufen-tabelle td {
  padding: var(--raum-2) var(--raum-3);
  text-align: left;
  border-bottom: 1px solid var(--rand);
  white-space: nowrap;
}
.stufen-tabelle th {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stufen-tabelle td.zahl { text-align: right; }
.stufen-tabelle th:nth-child(n+2) { text-align: right; }
.stufen-tabelle tr:last-child td { border-bottom: none; }

/* Erreichte Stufen: leicht hinterlegt, damit man sieht, was schon gilt */
.stufen-tabelle tr.erreicht td { background: var(--flaeche-2); }

.stufe-nr {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--rand);
  font-size: 0.78rem;
  font-weight: 600;
  margin-right: var(--raum-2);
}
.stufen-tabelle tr.erreicht .stufe-nr { background: var(--auf); color: #fff; }

.stufe-hinweis {
  font-size: 0.72rem;
  color: var(--text-3);
  margin-right: var(--raum-2);
}
.stufe-hinweis.erreicht-marke { color: var(--auf); font-weight: 500; }

.stufen-tabelle td.up { color: var(--auf); }
.stufen-tabelle td.down { color: var(--ab); }

@media (max-width: 30rem) {
  .stufen-tabelle .schmal { display: none; }
  .stufen-tabelle th, .stufen-tabelle td { padding: var(--raum-2); }
}

/* Laeuft ein Trade, sagt der Kopf, wessen Zahlen er zeigt. Gedaempft, weil es
   eine Herkunftsangabe ist -- aber ohne sie sieht die Detailseite anders aus
   als die Karte, und niemand weiss warum (§11). */
.anzeige-quelle { margin: 0 0 var(--raum-2); }

/* --- §11 Screener eingeklappt ----------------------------------------------
   Ein ruhiger Textknopf, kein Primaerknopf: Er fuehrt eine Ebene tiefer, er
   ist nicht die Handlung der Seite. Mindest-Trefferflaeche bleibt (§10). */
.screener-schalter { margin: var(--raum-5) 0 var(--raum-3); text-align: center; }
.screener-schalter button {
  min-height: var(--ziel);
  padding: 0 var(--raum-5);
  border: 1px solid var(--rand-stark);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--text-2);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform var(--zeit-kurz) ease-out;
}
.screener-schalter button:active { transform: scale(0.97); }
.screener-schalter button[aria-expanded="true"] { color: var(--text-3); }

/* Der "Kurse vom"-Stand steht jetzt unter den Plaetzen statt im Kopf */
main > .stand { margin: 0 0 var(--raum-2); text-align: center; }