/* AION Core: Ergänzungen zu app.css aus LLM (app.css selbst bleibt unverändert).
   Toni, 17.10.2026: Titel der Übersicht stand auf dem Desktop zu tief. Die Kopfzeile enthält dort nur den Menüknopf fürs
   Handy und ist leer; ohne sie beginnt der Inhalt mit dem Abstand der LLM-Arbeitsseiten (kz-inhalt, 2.25rem oben). */
@media (min-width: 801px) { .kopfzeile.leer { display: none; } }

/* Logo (Toni, 17.10.2026: «nicht so gross, richtige Dimension wie bei LLM»). Das AION-Bild ist fast doppelt so breit
   wie das QDS-Logo (4.3 zu 2.2); bei 1rem hat es die gleiche sichtbare Buchstabenhöhe wie QDS bei 1.75rem (verglichen
   nebeneinander). Anmeldeseite im selben Verhältnis zu LLM (2.75rem → 1.5rem). */
.logo { height: 1rem; }
.marke.gross .logo { height: 1.5rem; }

/* Aktionsknöpfe unter dem Einleitungstext einer Seite (Kontoseite): linksbündig in einer Zeile statt rechts umbrechend */
.kz-titel .knopf-gruppe { justify-content: flex-start; margin-top: var(--a-4); }

/* Hinweis (hinweis.js) auf Grundlage des LLM-Toasts: Zeichen links, Fehler rot, über dem iPhone-Balken,
   auf dem Handy volle Breite mit Rand (Toni, 17.10.2026: im ganzen System gleich, auch mobil schön) */
.toasts { bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
.toast { gap: var(--a-25); padding: var(--a-3) var(--a-4); min-height: 2.75rem; }
.toast span { white-space: normal; line-height: 1.4; }
.toast-zeichen { flex: none; width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast.fehler { background: var(--fehler); color: #fff; }
@media (max-width: 800px) {
  .toasts { left: var(--a-4); right: var(--a-4); bottom: calc(var(--a-4) + env(safe-area-inset-bottom)); transform: none; justify-items: stretch; }
  .toast { max-width: none; }
}

/* Etappe E (17.10.2026): Zustand der Live-Daten als Punkt mit Text (Form aus .pruefung .bahn::before) */
.live-zustand { white-space: nowrap; }
.live-zustand::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: var(--a-15); border-radius: 50%; background: var(--text-3); vertical-align: .05rem; }
.live-zustand.aktuell::before { background: var(--ok); }
.live-zustand.veraltet::before { background: var(--warn); }
.live-zustand.getrennt::before { background: var(--fehler); }
.tabelle tr.veraltet .preis { color: var(--text-3); }
.tabelle .zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* App-Seiten scrollen im Inhalt: body.app ist auf Fensterhöhe fixiert (Gerüst aus LLM chat.html), darum muss .kz-inhalt
   selbst scrollen; Form wie .verlauf in app.css (Toni, 17.10.2026: Marktseite liess sich nicht scrollen) */
.haupt > .kz-inhalt { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; }

/* Zahlen in Tabellen: einzeilig (Werte ändern sich live; das Raster weiter unten hält die Spalten fest) */
@media (min-width: 901px) { .tabelle td.zahl { white-space: nowrap; } }

/* ── Tabellen-Raster (Toni, 17.10.2026: «nervös und unregelmässig»): jede Geldtabelle hat dieselben Spalten, Titel
   34 %, drei gleich breite Wertspalten, Aktion 3 rem. So stehen die Spalten aller Tabellen genau untereinander.
   Details stehen in der Schublade hinter dem 3-Punkte-Knopf (wie LLM), nicht in der Tabelle. */
@media (min-width: 901px) {
  .tabelle.raster { table-layout: fixed; }
  .tabelle.raster th:first-child { width: 34%; }
  .tabelle.raster th.aktion { width: 4rem; }
  .tabelle.raster td.aktion { overflow: visible; }
  .tabelle.raster td, .tabelle.raster th { overflow: hidden; text-overflow: ellipsis; }
  .tabelle.raster td.zahl, .tabelle.raster th.rechts { text-align: right; }
}
.tabelle.raster td.aktion { text-align: right; }
.tabelle .unterzeile { display: block; margin-top: var(--a-05); font-size: .8125rem; font-weight: 400; color: var(--text-3); }
/* Links in Tabellen ohne Unterstrich (Toni, 17.10.2026) */
.tabelle a, .tabelle a:visited { color: var(--text); font-weight: 550; text-decoration: none; }
.tabelle a:hover { color: var(--text-2); }
.tabelle tr.klickbar { cursor: pointer; }

/* Auf und ab: Pfeil und Farbe (Zustand nie nur über Farbe: Pfeil und Vorzeichen) */
.gv { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gv.plus { color: var(--ok); }
.gv.minus { color: var(--fehler); }
.gv.plus::before { content: "▲ "; font-size: .7em; vertical-align: .1em; }
.gv.minus::before { content: "▼ "; font-size: .7em; vertical-align: .1em; }
.kennzahl b .gv { font: inherit; color: inherit; }
.kennzahl b .gv.plus { color: var(--ok); }
.kennzahl b .gv.minus { color: var(--fehler); }
.kennzahl b .gv::before { font-size: .55em; vertical-align: .25em; }

/* Angaben in der Detail-Schublade: Name links, Wert rechts */
.angaben { display: grid; grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr); gap: var(--a-2) var(--a-4); margin: 0; }   /* lange Werte brechen um, statt die Beschriftung zu überdecken */
.angaben dt { color: var(--text-3); font-size: .875rem; }
.angaben dd { margin: 0; text-align: right; font-size: .875rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.schublade-inhalt .schublade-abschnitt:first-child { margin-top: 0; }

/* Wertverlauf (SVG, eigene Zeichnung): Fläche, Linie, gestrichelte Linie «eingelegt», Fadenkreuz mit Hinweis */
.diagramm { display: grid; gap: var(--a-3); }
.diagramm-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-3); }
.diagramm-legende { display: flex; flex-wrap: wrap; gap: var(--a-4); font-size: .8125rem; color: var(--text-2); }
.diagramm-legende i { display: inline-block; width: 14px; height: 0; margin-right: var(--a-15); border-top: 2px solid var(--text-2); vertical-align: .25em; }
.diagramm-legende i.linie-wert { border-top-color: var(--diagramm-farbe, var(--text)); }
.diagramm-legende i.linie-eingelegt { border-top: 2px dashed var(--text-3); }
.diagramm-flaeche { position: relative; height: 240px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); overflow: hidden; }
.diagramm-flaeche svg { display: block; width: 100%; height: 100%; }
.diagramm-flaeche .leer { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--a-4); color: var(--text-3); font-size: .875rem; text-align: center; }
.diagramm .gitter { stroke: var(--linie); stroke-width: 1; }
.diagramm .achse { fill: var(--text-3); font-size: 11px; font-weight: 400; font-family: var(--schrift); }
.diagramm .linie { fill: none; stroke: var(--diagramm-farbe, var(--text)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.diagramm .flaeche { fill: var(--diagramm-farbe, var(--text)); opacity: .1; }
.diagramm .eingelegt { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.diagramm .faden { stroke: var(--text-3); stroke-width: 1; }
.diagramm .punkt { fill: var(--diagramm-farbe, var(--text)); stroke: var(--flaeche); stroke-width: 2; }
.diagramm-tipp { position: absolute; z-index: 2; min-width: 11rem; padding: var(--a-2) var(--a-3); border: 1px solid var(--linie); border-radius: 8px; background: var(--menu); box-shadow: var(--schatten); font-size: .8125rem; pointer-events: none; }
.diagramm-tipp b { display: block; margin-bottom: var(--a-1); font-weight: 600; }
.diagramm-tipp > span { display: flex; justify-content: space-between; gap: var(--a-3); color: var(--text-2); }
.diagramm.plus { --diagramm-farbe: var(--ok); }
.diagramm.minus { --diagramm-farbe: var(--fehler); }
@media (max-width: 900px) { .diagramm-flaeche { height: 200px; } }
.diagramm-tipp em { font-style: normal; }

/* Bot-Bereich (Etappe G): Kennzahlen, Zeile, Knöpfe untereinander mit dem Rhythmus-Abstand */
.stapel { display: grid; gap: var(--a-4); }
.stapel > p { margin: 0; }
.schublade .kennzahlen { grid-template-columns: minmax(0, 1fr); }   /* Guthaben im Kauf-/Verkaufsdialog volle Breite, auch mobil */

/* Tradingbot (17.10.2026): zuerst ein Satz, was der Bot tut; Regeln und Rohwerte in der Schublade */
.bot-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-3); }
.bot-kopf-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a-2) var(--a-3); }
.bot-kopf .knopf-gruppe { margin: 0; }
.live-zustand.gross { font-size: 1rem; font-weight: 600; }
.bot-lage { display: grid; gap: var(--a-2); padding: var(--a-5); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.bot-lage p { margin: 0; }
.bot-lage-titel { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.bot-lage-satz { font-size: 1.0625rem; line-height: 1.5; color: var(--text); }
.bot-liste { margin: 0; padding-left: 1.1rem; font-size: .875rem; color: var(--text-2); display: grid; gap: var(--a-1); }
.diagramm-flaeche.klein { height: 200px; }
.diagramm .reihe-kurs { fill: none; stroke: var(--linie-stark); stroke-width: 1.5; }
.diagramm .reihe-linie { fill: none; stroke: var(--text); stroke-width: 2; }
.diagramm .reihe-linie2 { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-dasharray: 5 3; }
.diagramm .marke-kauf { fill: var(--ok); }
.diagramm .marke-verkauf { fill: var(--fehler); }
.diagramm-legende i.linie-kurs { border-top-color: var(--linie-stark); }
.diagramm-legende i.linie-linie { border-top-color: var(--text); }
.diagramm-legende i.linie-linie2 { border-top: 2px dashed var(--akzent); }
.diagramm-legende i.marke-kauf, .diagramm-legende i.marke-verkauf { width: 0; height: 0; border: 5px solid transparent; vertical-align: .1em; }
.diagramm-legende i.marke-kauf { border-bottom: 9px solid var(--ok); border-top: 0; }
.diagramm-legende i.marke-verkauf { border-top: 9px solid var(--fehler); border-bottom: 0; }
/* KI-Zentrale (17.10.2026): Tonis Menünamen sind länger als die Leiste; am breiten Bildschirm umbrechen statt abschneiden */
@media screen and (min-width: 901px) { .kz-nav a { white-space: normal; padding-block: var(--a-15); line-height: 1.3; } .kz-nav a svg { flex: none; } }
/* Übersicht der KI-Zentrale (18.10.2026): fünf Hürden als Punkte, Zustand nie nur über Farbe (Zahl daneben, Titel je Punkt) */
.huerden { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.huerden i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--linie-stark); }
.huerden i.ok { background: var(--ok); }
.huerden i.nein { background: var(--fehler); }
.huerden span { margin-left: var(--a-2); }
.rang-top td:first-child { font-weight: 600; }
.diagramm .einzeln { fill: var(--text-3); stroke: var(--flaeche); stroke-width: 2; }
.diagramm-legende i.punkt-einzeln { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--text-3); vertical-align: .05em; }
/* KI-Zentrale, vier kurze Menüpunkte (Toni, 18.10.2026: nichts abgeschnitten, nichts zweizeilig): schmal ohne Symbole, gleich breit */
@media screen and (max-width: 600px) { .kz-nav-kurz a { flex: 1 1 0; justify-content: center; padding: 0 var(--a-2); } .kz-nav-kurz a svg { display: none; } }
/* Archiv der KI-Zentrale (18.10.2026): Älteres zugeklappt, ruhige Zeile mit Pfeil und Anzahl; Abstand innen über Polster */
.archiv > summary { display: flex; align-items: center; gap: var(--a-2); min-height: 2.5rem; padding: 0 var(--a-3); border: 1px solid var(--linie); border-radius: 10px; color: var(--text-2); font-size: .875rem; cursor: pointer; list-style: none; transition: background .15s, color .15s; }
.archiv > summary::-webkit-details-marker { display: none; }
.archiv > summary::before { content: ""; width: .45rem; height: .45rem; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.archiv[open] > summary::before { transform: rotate(45deg); }
.archiv > summary:hover { background: var(--flaeche-2); color: var(--text); }
.archiv > summary:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.archiv-zahl { margin-left: auto; padding: var(--a-05) var(--a-2); border-radius: 6px; background: var(--flaeche-2); font-size: .72rem; font-weight: 600; }
.archiv-inhalt { padding-top: var(--a-3); }
.archiv + .archiv { margin-top: var(--a-3); }
/* Messlatte im Verlauf der KI-Zentrale (18.10.2026): Medallion rund 0.14 % pro Tag */
.diagramm .messlatte { stroke: var(--ok); stroke-width: 1.5; stroke-dasharray: 2 4; }
.diagramm-legende i.linie-messlatte { border-top: 2px dotted var(--ok); }
/* Daten-Seiten (18.10.2026): Reiter, Reihen des Linien-Diagramms (eine Achse), Mini-Kurve. Formsprache wie .segment und
   die bestehenden Reihen (reihe-linie / reihe-kurs). */
.seiten-reiter { display: flex; gap: 2px; max-width: 100%; padding: 2px; border-radius: 9px; background: var(--flaeche-2); overflow-x: auto; scrollbar-width: none; justify-self: start; }
.seiten-reiter button { flex: none; padding: var(--a-15) var(--a-35); border: 0; border-radius: 7px; background: none; color: var(--text-2); font-size: .875rem; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.seiten-reiter button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); font-weight: 550; }
.diagramm .reihe-wert { fill: none; stroke: var(--text); stroke-width: 2; }
.diagramm .reihe-vergleich { fill: none; stroke: var(--text-3); stroke-width: 1.5; }
.diagramm .reihe-ok { fill: none; stroke: var(--ok); stroke-width: 1.75; }
.diagramm .reihe-warn { fill: none; stroke: var(--warn); stroke-width: 1.75; }
.diagramm .gestrichelt { stroke-dasharray: 5 4; }
.diagramm-legende i.linie-vergleich { border-top-color: var(--text-3); }
.diagramm-legende i.linie-ok { border-top-color: var(--ok); }
.diagramm-legende i.linie-warn { border-top-color: var(--warn); }
.diagramm-legende i.gestrichelt { border-top-style: dashed; }
.funke { width: 80px; height: 22px; vertical-align: middle; }
.funke path { fill: none; stroke-width: 1.5; }
.funke .auf { stroke: var(--ok); }
.funke .ab { stroke: var(--fehler); }
/* Zeitmaschine (18.10.2026): Knopf und Regler in einer Zeile, Regler in der Textfarbe statt Browser-Blau */
.zeitleiste { display: flex; align-items: center; gap: var(--a-4); }
.zeitleiste input[type="range"] { flex: 1; min-width: 0; accent-color: var(--text); }
/* Diagramme (Toni, 18.10.2026: «Werte kleben am Rand und sind fett, kaum lesbar»): Achsentext ohne die Umrisslinie der
   Symbol-Regel, normal gewichtet; die Zeichnung sitzt mit Innenabstand in der Fläche (gilt für alle Diagramme). */
.diagramm svg text, .diagramm .achse { stroke: none; font-weight: 400; font-size: 11px; fill: var(--text-3); paint-order: normal; }
.diagramm-flaeche svg { position: absolute; top: 14px; right: 18px; bottom: 10px; left: 14px; width: calc(100% - 32px); height: calc(100% - 24px); }

/* ── Gestaltung 18.10.2026 (Toni: «zu viel Text in den Tabellenzeilen, dafür haben wir den Drawer; Coins mit Logo;
   überall gleiche Abstände, mobil sauber; Drawer lesbarer»). Zentral für alle Seiten. ───────────────────────────── */
.coin-logo { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; background: var(--flaeche-2); }
.coin-logo.gross { width: 36px; height: 36px; }
.schublade-symbol:has(> .coin-logo) { background: none; }
.coin-zelle { display: flex; align-items: center; gap: var(--a-3); min-width: 0; }
.coin-zelle-text { display: grid; min-width: 0; }
.coin-zelle-name { font-weight: 550; color: var(--text); }
.quelle-zeichen { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--flaeche-2); color: var(--text-2); }
.quelle-zeichen svg { width: 15px; height: 15px; }
/* Tabellen: erste Spalte Titel und höchstens zwei Zeilen Unterzeile, alles Weitere in der Schublade */
.tabelle td:first-child .unterzeile { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.tabelle td:first-child { line-height: 1.4; }
@media screen and (min-width: 901px) { .tabelle td:first-child { min-width: 13rem; } }
/* Schublade: breiter, Kennzahlen im Raster, Angaben als Zeilen mit Trennlinie, Text gut lesbar */
.schublade { width: min(560px, 100vw); }
.schublade-abschnitt { margin: var(--a-6) 0 var(--a-3); }
.details .details-kennzahlen.kennzahlen.kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-3); }   /* stärker als app.css «4 oder 8 = 4 Spalten» (:has zählt 0,3,0; Fall 19.10.2026) */
.details .details-kennzahlen .kennzahl { padding: var(--a-4); }
.details .angaben { gap: 0; }
.details .angaben dt, .details .angaben dd { padding: var(--a-25) 0; border-bottom: 1px solid var(--linie); line-height: 1.45; }
.details .angaben dd { color: var(--text); font-weight: 500; }
.details .angaben dt:last-of-type, .details .angaben dd:last-of-type { border-bottom: 0; }
.details > p.gedaempft { margin: 0 0 var(--a-3); font-size: .9375rem; line-height: 1.6; color: var(--text-2); }
.details .bot-liste { gap: var(--a-2); line-height: 1.55; font-size: .9375rem; }
.details .diagramm { margin-bottom: var(--a-2); }
@media (max-width: 600px) { .details .angaben { grid-template-columns: minmax(0, 1fr); } .details .angaben dt { padding-bottom: 0; border-bottom: 0; } .details .angaben dd { text-align: left; padding-top: var(--a-05); } }
.tabelle .zelle-titel, .tabelle .coin-zelle-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Seitenkopf (Toni, 18.10.2026: «oben nicht ausbalanciert»): Titel ruhiger (24 px, halbfett), Etikett mittig daneben;
   am Desktop sitzt die Titelmitte auf der Höhe der Logomitte (28 px) und die erste Zeile der Beschreibung auf der
   Höhe des ersten Menüpunkts (78 px). Mobil bleibt die Kopfzeile mit dem Menüknopf. */
.kz-titel h1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-25); font: 600 1.5rem/1.2 var(--schrift); letter-spacing: -.015em; }
.kz-titel h1 .ps-chip { flex: none; letter-spacing: 0; }
.einstellungen h1 { font: 600 1.5rem/1.2 var(--schrift); letter-spacing: -.015em; }
@media screen and (min-width: 901px) {
  body.app .haupt > .kz-inhalt { padding-top: 26px; }   /* Titelmitte 40 px = Logomitte (Toni, 18.10.2026: «klebt am Rand») */
  body.app .leiste-kopf { height: 5rem; }

}
/* Text in rechtsbündigen Spalten bricht um (18.10.2026: «Gegenseite», «Im Wallet», «Status» wurden abgeschnitten) */
.tabelle td.text-rechts { text-align: right; white-space: normal; overflow-wrap: anywhere; }
.tabelle .betrag-zeile { display: block; }
.tabelle td.zahl .live-zustand { white-space: normal; }
@media screen and (max-width: 900px) {
  .tabelle td.zahl, .tabelle td.text-rechts { white-space: normal; text-align: left; }
  .tabelle td.zahl .gv { white-space: nowrap; }
}

/* Rhythmus im ganzen System (Toni, 18.10.2026: «Abstände zwischen Titel, Text und Tabelle sehr gross und unregelmässig»):
   Titel → Inhalt 24 px, Block → Block 16 px, vor einer Überschrift 40 px, Überschrift → nächster Block 12 px,
   Titel → Beschreibung 8 px. In Stapeln (Reiter-Seiten) zählen nur die Lücken, keine Aussenabstände der Bausteine. */
.kz-titel { margin-bottom: var(--a-6); }
.kz-titel p { margin-top: var(--a-2); }
.kz-bereich.kz-bereich > .kz-titel + * { margin-top: var(--a-6); }
.stapel > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.stapel > .kz-unter:not(:first-child) { margin-top: var(--a-6) !important; }
.stapel > .kz-unter + * { margin-top: -4px !important; }
/* Knöpfe immer links (Toni, 18.10.2026: «keine Knöpfe rechts»), auch in Schubladen und Kopfzeilen */
.knopf-gruppe { justify-content: flex-start; }
.schublade-fuss { justify-content: flex-start; }
.bot-kopf { justify-content: flex-start; }
/* Pfeile bei Gewinn und Verlust (Toni, 18.10.2026: «fast nicht erkennbar»): statt kleiner Dreiecke ein klarer
   Trendpfeil als Symbol in der Farbe der Zahl, mittig zur Zahl, wächst mit der Schrift (auch in den Kacheln). */
.gv.plus::before, .gv.minus::before, .kennzahl b .gv.plus::before, .kennzahl b .gv.minus::before {
  content: ""; display: inline-block; width: .82em; height: .82em; margin-right: .3em; vertical-align: -.06em; font-size: inherit;
  background: currentColor; -webkit-mask: var(--pfeil) center / contain no-repeat; mask: var(--pfeil) center / contain no-repeat; }
.gv.plus { --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L12 4M6 4h6v6'/%3E%3C/svg%3E"); }
.gv.minus { --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 6v6H6'/%3E%3C/svg%3E"); }
/* Zustandspunkt vor dem Titel bleibt in derselben Zeile (Toni, 18.10.2026: «grüner Punkt oberhalb des Titels») */
.tabelle .live-zustand + .zelle-titel { display: inline; }

/* Tradingbot (Toni, 18.10.2026): Knöpfe unter der Zeile «läuft», nicht daneben */
.bot-kopf { flex-direction: column; align-items: flex-start; }
/* Eingeklappte Leiste (Toni, 18.10.2026: «Icons nicht ganz zentriert»): Knöpfe 36 px, genau in der Mitte der 56 px */
.leiste-zu .leiste-nav { padding-inline: 0; }
.leiste-zu .nav-knopf { width: 36px; margin-inline: auto; }
.leiste-zu .konto-menu summary { width: 36px; margin-inline: auto; }
.diagramm-wahl { display: flex; flex-wrap: wrap; gap: var(--a-2); }
/* Strategie eines Wallets (18.10.2026) */
.bot-zeile { display: inline-flex; align-items: baseline; gap: 0 var(--a-1); min-width: 0; }
.bot-zeile .live-zustand { flex: none; }
/* Wallet-Symbol (18.10.2026): runder Kreis mit Geldbörse, Farbverlauf fest je Wallet, Zustandspunkt mit Flächenring */
.wallet-symbol { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--w-a), var(--w-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.wallet-symbol svg { width: 20px; height: 20px; }
.wallet-symbol.gross { width: 48px; height: 48px; }
.wallet-symbol.gross svg { width: 24px; height: 24px; }
.wallet-symbol.f1 { --w-a: #4a7cc4; --w-b: #2c4f86; }
.wallet-symbol.f2 { --w-a: #3c9a78; --w-b: #1f6650; }
.wallet-symbol.f3 { --w-a: #c88a4c; --w-b: #8a5527; }
.wallet-symbol.f4 { --w-a: #8b6cc2; --w-b: #5a418a; }
.wallet-symbol.f5 { --w-a: #c4606d; --w-b: #8a3843; }
.wallet-symbol.f6 { --w-a: #5a9cac; --w-b: #356673; }
.wallet-symbol.archiv { --w-a: var(--text-3); --w-b: var(--text-2); opacity: .7; }
.wallet-symbol-punkt { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-3); box-shadow: 0 0 0 2px var(--grund); }
.wallet-symbol-punkt.aktuell { background: var(--ok); }
.wallet-symbol-punkt.veraltet { background: var(--warn); }
.tabelle a.coin-zelle-name { display: -webkit-box; }
.wallet-symbol-platz { display: inline-flex; flex: none; }
.wallet-symbol-platz:empty { display: none; }
.wallet-symbol-platz .wallet-symbol { width: 32px; height: 32px; }
.wallet-symbol-platz .wallet-symbol svg { width: 17px; height: 17px; }
.wallet-strategie { font-size: .875rem; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.wallet-strategie:empty { display: none; }
/* Marktwetter (Toni, 18.10.2026): Wetter immer mit Symbol; Farbe hilft, der Name steht immer dabei (nie nur Farbe) */
:root { --wetter-sonne: #b8730a; --wetter-sonne-weich: #fbefd9; --wetter-regen: #2f6db3; --wetter-regen-weich: #e3edf8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --wetter-sonne: #f0b44c; --wetter-sonne-weich: #3a2e19; --wetter-regen: #7fb0e8; --wetter-regen-weich: #1d2a3a; } }
:root[data-theme="dunkel"] { --wetter-sonne: #f0b44c; --wetter-sonne-weich: #3a2e19; --wetter-regen: #7fb0e8; --wetter-regen-weich: #1d2a3a; }
.wetter-symbol { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--text-2); }
.wetter-symbol svg { width: 100%; height: 100%; }
.wetter-symbol.sonnig { color: var(--wetter-sonne); }
.wetter-symbol.regen { color: var(--wetter-regen); }
.wetter-symbol.sturm { color: var(--fehler); }
.wetter-symbol.klein { width: 16px; height: 16px; }
.wetter-symbol.mini { width: 14px; height: 14px; }
.wetter-symbol.gross { width: 56px; height: 56px; padding: 13px; border-radius: 50%; background: var(--flaeche-2); }
.wetter-symbol.gross.sonnig { background: var(--wetter-sonne-weich); }
.wetter-symbol.gross.regen { background: var(--wetter-regen-weich); }
.wetter-symbol.gross.sturm { background: var(--fehler-weich); }
.wetter-text { display: inline-flex; align-items: center; gap: var(--a-15); vertical-align: middle; }
.wetter-karte { display: grid; gap: var(--a-4); padding: var(--a-5); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.wetter-kopf { display: flex; align-items: center; gap: var(--a-4); min-width: 0; }
.wetter-kopf-text { display: grid; gap: var(--a-05); min-width: 0; }
.wetter-kopf-text b { font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.wetter-kopf-text span { font-size: .875rem; line-height: 1.45; color: var(--text-2); }
.wetter-kopf-text span.gedaempft { font-size: .8125rem; color: var(--text-3); }
.wetter-coins { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.wetter-coin { display: inline-flex; align-items: center; gap: var(--a-15); padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--flaeche-2); font-size: .8125rem; font-weight: 550; }
.wetter-coin .coin-logo { width: 22px; height: 22px; }
.wetter-verlauf-zeile { display: flex; align-items: center; gap: var(--a-3); min-width: 0; font-size: .8125rem; }
.wetter-verlauf { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
@media (max-width: 560px) { .wetter-karte { padding: var(--a-4); } .wetter-symbol.gross { width: 48px; height: 48px; padding: 11px; } .wetter-verlauf-zeile { align-items: flex-start; flex-direction: column; gap: var(--a-2); } }
/* Ergebnis-Zerlegung (A1, 19.10.2026): Balken um null, rechts Gewinn, links Verlust; Betrag immer mit Vorzeichen daneben */
.zerlegung-kopf { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.zerlegung-balken { display: grid; gap: var(--a-3); padding: var(--a-5); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.zb-zeile { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr) 7.5rem; align-items: center; gap: var(--a-4); }
.zb-text { display: grid; gap: 2px; min-width: 0; }
.zb-text b { font-weight: 550; }
.zb-text span { font-size: .8125rem; color: var(--text-3); line-height: 1.35; }
.zb-spur { position: relative; height: 14px; border-radius: 4px; background: var(--flaeche-2); }
.zb-spur::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--linie-stark); }
.zb-spur.leer { background: none; }
.zb-spur.leer::after { display: none; }
.zb-balken { position: absolute; top: 0; bottom: 0; min-width: 2px; background: var(--text-3); }
.zb-balken.plus { background: var(--ok); border-radius: 0 4px 4px 0; }
.zb-balken.minus { background: var(--fehler); border-radius: 4px 0 0 4px; }
.zb-wert { text-align: right; font-variant-numeric: tabular-nums; font-weight: 550; white-space: nowrap; }
.zb-wert.plus, .zerlegung-tabelle td.plus { color: var(--ok); }
.zb-wert.minus, .zerlegung-tabelle td.minus { color: var(--fehler); }
.zb-summe { padding-top: var(--a-3); border-top: 1px solid var(--linie); }
@media (max-width: 560px) {
  .zerlegung-balken { padding: var(--a-4); }
  .zb-zeile { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--a-15); }
  .zb-spur { grid-column: 1 / -1; grid-row: 2; }
  .zb-text span { display: none; }
}
/* A3 (19.10.2026): Wetter ist ein Zustand, kein Signal; Satz aus der Messung, Details in der Schublade */
.wetter-messung { margin: 0; padding-top: var(--a-4); border-top: 1px solid var(--linie); font-size: .875rem; line-height: 1.5; color: var(--text-2); }
.wetter-messung .text-knopf { margin: 0; font-size: inherit; color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
/* B2 (19.10.2026): Wallet wählen für «In Wallet einsetzen», Zeilen wie die Wallet-Liste */
.wallet-wahl-liste { display: grid; gap: var(--a-2); }
.wallet-wahl { display: flex; align-items: center; gap: var(--a-3); width: 100%; padding: var(--a-3); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); color: var(--text); text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.wallet-wahl:hover, .wallet-wahl:focus-visible { background: var(--zeile-hover, var(--flaeche-2)); border-color: var(--linie-stark); }
.wallet-wahl-text { display: grid; gap: 2px; min-width: 0; }
.wallet-wahl-text b { font-weight: 550; }
.wallet-wahl-text .bot-zeile { font-size: .8125rem; color: var(--text-3); }
/* C1 (19.10.2026): Fehlermuster der Bot-Handel als Anteile; Sätze aus den Zahlen */
.muster-balken { display: grid; gap: var(--a-3); padding: var(--a-5); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.mb-zeile { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr) 3.5rem; align-items: center; gap: var(--a-4); }
.mb-name { font-weight: 550; }
.mb-spur { position: relative; height: 14px; border-radius: 4px; background: var(--flaeche-2); overflow: hidden; }
.mb-balken { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--text-3); }
.mb-balken.gewinn { background: var(--ok); }
.mb-balken.richtung { background: var(--fehler); }
.mb-balken.zu_klein { background: var(--warn); }
.mb-wert { text-align: right; font-variant-numeric: tabular-nums; font-weight: 550; }
.diagnose-satz { margin: 0; line-height: 1.55; color: var(--text-2); }
@media (max-width: 560px) {
  .muster-balken { padding: var(--a-4); }
  .mb-zeile { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--a-15); }
  .mb-spur { grid-column: 1 / -1; grid-row: 2; }
}
/* C5 (19.10.2026): Schritte des Zeitplans; Name, dann ja/nein, alles links (Toni: keine Knöpfe rechts) */
.zeitplan-schritt { display: grid; grid-template-columns: minmax(0, 15rem) auto; justify-content: start; align-items: center; gap: var(--a-2) var(--a-3); }
@media (max-width: 560px) { .zeitplan-schritt { grid-template-columns: minmax(0, 1fr); } }
/* D1 (19.10.2026): Bericht des KI-Analysten; Vorschläge als ruhige Karten ohne Randlinie links */
.analyst-titel { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.analyst-vorschlag { padding: var(--a-4); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
/* Position verkaufen (19.10.2026): Total zum Heimnehmen gross, Zerlegung darunter, Zahlen leben */
.verkauf-gross { display: grid; gap: var(--a-1); padding: var(--a-5); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.verkauf-gross-text { font-size: .8125rem; color: var(--text-3); }
.verkauf-gross .gv { font-size: 2rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
/* C6 (19.10.2026): Hinweis unter einem Formularfeld in normaler Schrift, nicht im Gewicht der Beschriftung */
.formular label > .gedaempft { font-size: .8125rem; font-weight: 400; color: var(--text-3); }
/* KI-Assistent im Wallet (19.10.2026): Chat in der breiten Schublade; Verlauf scrollt, Eingabe bleibt unten, Knopf links */
.schublade-chat .schublade-inhalt { display: flex; flex-direction: column; overflow: hidden; padding-bottom: var(--a-4); }
.chat { display: flex; flex-direction: column; gap: var(--a-4); flex: 1; min-height: 0; }
.chat-liste { display: flex; flex-direction: column; gap: var(--a-3); flex: 1; min-height: 0; overflow-y: auto; padding-right: var(--a-1); }
.chat-blase { display: grid; gap: var(--a-1); max-width: 88%; padding: var(--a-3) var(--a-4); border-radius: 14px; }
.chat-blase p { margin: 0; line-height: 1.55; white-space: pre-wrap; }
.chat-blase.du { align-self: flex-end; background: var(--flaeche-2); }
.chat-blase.aion { align-self: flex-start; border: 1px solid var(--linie); background: var(--flaeche); }
.chat-wer { font-size: .75rem; font-weight: 600; color: var(--text-3); }
.chat-zusatz { font-size: .75rem; color: var(--text-3); }
.chat-eingabe { display: grid; gap: var(--a-2); justify-items: start; }
.chat-eingabe textarea { width: 100%; padding: var(--a-3); border: 1px solid var(--linie-stark); border-radius: 12px; background: var(--flaeche); color: var(--text); font: 400 1rem/1.5 var(--schrift); resize: vertical; }
/* Marktwetter 180 Tage als Balken (19.10.2026): Abschnitte so breit wie ihre Dauer; Name immer im Satz darunter */
.wetter-verlauf-block { display: grid; gap: var(--a-15); }
.wetter-verlauf-block p { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--text-2); }   /* gleich wie der Satz zur Messung darunter (Toni, 19.10.2026) */
.wetter-balken { display: flex; gap: 2px; height: 12px; }
.wb-teil { min-width: 2px; border-radius: 3px; background: var(--flaeche-3); }
.wb-teil.sonnig { background: var(--wetter-sonne); }
.wb-teil.wechselhaft { background: var(--text-3); }
.wb-teil.regen { background: var(--wetter-regen); }
.wb-teil.sturm { background: var(--fehler); }
.wetter-achse { display: flex; justify-content: space-between; font-size: .75rem; color: var(--text-3); }

/* Kaufen und Verkaufen (19.10.2026, Toni: «nicht branchenüblich»): wie Börsen-Apps. Reiter, Coin-Liste mit Logo und
   Live-Kurs, grosses Betragsfeld in Franken, Anteile, Zusammenfassung; Abstände nur über gap. */
.auftrag { display: flex; flex-direction: column; gap: var(--a-3); }
.auftrag-reiter { display: grid; grid-template-columns: 1fr 1fr; }
.auftrag-reiter button { padding-block: var(--a-25); font-size: .9375rem; }
.auftrag-guthaben { margin: 0; font-size: .875rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.auftrag-label { font-size: .8125rem; font-weight: 550; color: var(--text-3); }
.auftrag-suche, .auftrag-feld { width: 100%; min-height: 2.75rem; padding: 0 var(--a-35); border: 1px solid var(--linie-stark); border-radius: 10px; background: var(--flaeche); color: var(--text); font: inherit; font-size: 1rem; }
.auftrag-suche:focus, .auftrag-feld:focus { outline: 0; border-color: var(--text-3); box-shadow: 0 0 0 3px var(--flaeche-2); }
.auftrag-liste { display: flex; flex-direction: column; gap: 2px; max-height: 15.5rem; overflow-y: auto; padding: 2px; border: 1px solid var(--linie); border-radius: 10px; }
.auftrag-liste > .gedaempft { padding: var(--a-3); margin: 0; }
.auftrag-coin { display: flex; align-items: center; gap: var(--a-3); width: 100%; padding: var(--a-2) var(--a-25); border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.auftrag-coin:hover { background: var(--zeile-hover); }
.auftrag-coin[aria-pressed="true"] { background: var(--flaeche-2); box-shadow: inset 0 0 0 1px var(--linie-stark); }
.auftrag-coin-text, .auftrag-coin-zahlen { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.auftrag-coin-text { flex: 1; }
.auftrag-coin-text b, .auftrag-coin-zahlen b { font-size: .9375rem; font-weight: 550; }
.auftrag-coin-text span { font-size: .8125rem; color: var(--text-3); }
.auftrag-coin-zahlen { align-items: flex-end; font-variant-numeric: tabular-nums; font-size: .8125rem; text-align: right; }
.auftrag-betrag { display: flex; flex-direction: column; gap: var(--a-2); }
.auftrag-feldzeile { position: relative; }
.auftrag-feld { min-height: 3.5rem; padding-right: 4.5rem; font-size: 1.5rem; font-weight: 550; font-variant-numeric: tabular-nums; }
.auftrag-einheit { position: absolute; right: var(--a-35); top: 50%; transform: translateY(-50%); color: var(--text-3); font-weight: 550; pointer-events: none; }
.auftrag-schnell { display: grid; grid-template-columns: repeat(4, 1fr); }
.auftrag-zusammen { display: flex; flex-direction: column; gap: var(--a-2); padding: var(--a-35); border-radius: 10px; background: var(--flaeche-2); }
.auftrag-zusammen p { margin: 0; font-size: .8125rem; }
.auftrag-zusammen .angaben dt:last-of-type, .auftrag-zusammen .angaben dd:last-of-type { font-weight: 600; color: var(--text); font-size: .9375rem; }
.schublade-auftrag .schublade-fuss .knopf.primaer { flex: 1; }

/* Gewinn und Verlust (20.10.2026): Spalte mit sichtbarem Knopf «Verkaufen», breit genug, nichts ragt hinaus */
.tabelle.raster th.knopf-zelle { width: 7.5rem; }
.tabelle.raster td.knopf-zelle { text-align: right; white-space: nowrap; }
/* Gewinn mitnehmen je offener Position (20.10.2026): eigene Zeile unter Menge und Wallet */
.regel-hinweis { display: block; color: var(--text-3); }
/* Laufende Version in der Seitenleiste (20.10.2026, Toni: «Versionierung sehe ich nichts») */
.leiste-version { margin: 0 0 var(--a-2); padding: 0 var(--a-3); font-size: .75rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ein Layout (21.10.2026, Toni: «die Reiter passen gar nicht»): Unterbereiche als Umschalter wie «Aktiv | Archiviert»
   auf der Seite Wallets, unter dem Seitentitel; ohne Icons */
.seiten-wahl { display: inline-flex; max-width: 100%; gap: 2px; margin: 0 0 var(--a-7); padding: 2px; overflow-x: auto; border-radius: 9px; background: var(--flaeche-2); scrollbar-width: none; }
.seiten-wahl::-webkit-scrollbar { display: none; }
.seiten-wahl a { flex: none; padding: var(--a-15) var(--a-35); border-radius: 7px; color: var(--text-2); font-size: .875rem; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.seiten-wahl a:hover { color: var(--text); }
.seiten-wahl a[aria-current="page"] { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); font-weight: 550; }
.seiten-wahl a:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.seiten-wahl + .seite-bereiche .kz-bereich > .kz-titel { margin-bottom: var(--a-5); }
/* Profil (21.10.2026): eine Seite, linksbündig, je Thema eine Karte */
.profil { display: grid; gap: var(--a-5); max-width: 34rem; }
.profil-block { padding: var(--a-6); border: 1px solid var(--linie); border-radius: 14px; background: var(--flaeche); }
.profil-block h2 { margin: 0 0 var(--a-4); font-size: 1.05rem; font-weight: 600; }
.profil-block > .gedaempft { margin: calc(-1 * var(--a-2)) 0 var(--a-4); font-size: .875rem; line-height: 1.5; }
.profil-block .formular input { background: var(--grund); }
.profil-daten { display: grid; gap: var(--a-3); margin: 0; }
.profil-daten div { display: grid; gap: 2px; }
.profil-daten dt { font-size: .8125rem; color: var(--text-3); }
.profil-daten dd { margin: 0; font-size: .9375rem; }
.profil .knopf-gruppe { justify-content: flex-start; }

/* Kontostand im Profilmenü (21.10.2026) */
.menu-stand { padding: var(--a-2) var(--a-25) var(--a-25); margin-bottom: var(--a-15); border-bottom: 1px solid var(--linie); }
.menu-stand-wert { font-size: 1.1rem; font-weight: 650; letter-spacing: -.01em; }
.menu-stand-ergebnis { margin-top: 2px; font-size: .8125rem; font-weight: 550; color: var(--text-2); }
.menu-stand-ergebnis.plus { color: var(--ok); }
.menu-stand-ergebnis.minus { color: var(--fehler); }

/* ══ Gestaltung (GESTALTUNG.md, 21.10.2026, Toni: «hässlich, kein Feingefühl, riesen Zahlen, Werte irgendwo platziert»)
   Gilt für Web und App gleich. Steht am Ende, damit es ältere Regeln in app.css und oben ersetzt. ══ */
@font-face { font-family: "Inter"; src: url("/static/schrift/inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }   /* Toni, 21.10.2026: Jost «hässlich», Inter gewählt */
:root { --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body { font-size: 15px; font-feature-settings: "tnum" 1; }
/* Abstände: Handy 16, Tablet 24, Desktop 32 */
.kz-inhalt, .kz-inhalt.einstellungen { padding: var(--a-6) var(--a-4) 4rem; }
@media (min-width: 601px) { .kz-inhalt, .kz-inhalt.einstellungen { padding: var(--a-6) var(--a-6) 4rem; } }
@media (min-width: 1101px) { .kz-inhalt, .kz-inhalt.einstellungen { padding: var(--a-8) var(--a-8) 5rem; } }
/* Titel */
.kz-titel h1 { font: 500 22px/1.2 var(--schrift); letter-spacing: 0; }
.kz-titel p { margin-top: var(--a-2); font-size: 15px; line-height: 1.5; color: var(--text-2); }
.kz-unter { margin: var(--a-8) 0 var(--a-3); font: 500 16px/1.3 var(--schrift); letter-spacing: 0; }
@media (min-width: 601px) { .kz-titel h1 { font-size: 24px; } .kz-unter { font-size: 17px; } }
.kz-titel { margin-bottom: var(--a-6); }
/* Karten */
.kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-3); align-items: stretch; }
/* Spaltenzahl nach der Breite des Inhalts (nicht des Fensters): 4 Karten nur, wenn jede mindestens 170 px hat */
.kz-inhalt { container-type: inline-size; }
/* #seite (Id) schlägt die :has-Regeln aus app.css (0,3,0), die Spalten nach der Fensterbreite setzten */
#seite .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-3); }
#seite .kennzahlen > .kennzahl:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* keine Lücke neben einer einzelnen Karte */
@container (min-width: 560px) {
  #seite .kennzahlen:has(> :nth-child(3):last-child), #seite .kennzahlen:has(> :nth-child(6):last-child), #seite .kennzahlen.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #seite .kennzahlen:has(> :nth-child(3):last-child) > .kennzahl:last-child { grid-column: auto; } }
@container (min-width: 740px) {
  #seite .kennzahlen:has(> :nth-child(4):last-child), #seite .kennzahlen:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #seite .kennzahlen > .kennzahl:last-child:nth-child(odd) { grid-column: auto; } }
.kennzahl { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--a-1); min-width: 0; padding: var(--a-4); border-radius: 12px; }
@media (min-width: 601px) { .kennzahl { padding: var(--a-4) var(--a-5); } }
.kennzahl > span { order: 0; margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--text-3); }
.kennzahl > b { order: 1; font: 500 20px/1.25 var(--schrift); letter-spacing: 0; overflow-wrap: anywhere; }
@media (min-width: 601px) { .kennzahl > b { font-size: 22px; } }
.kennzahl b .gv::before { font-size: .6em; vertical-align: .2em; }
.kennzahlen-satz { margin: var(--a-3) 0 0; font-size: 13px; line-height: 1.5; color: var(--text-3); }
/* Kopfzeile Handy: Menüknopf und Logo */
.kopf-logo { align-items: center; margin-left: var(--a-2); color: var(--text); text-decoration: none; }
.kopf-logo .logo { height: 14px; }
/* Listen statt enger Tabellen auf Handy und Tablet (GESTALTUNG.md 4): Kopf ganze Breite, Aktion rechts im Kopf,
   Werte in drei gleich breiten Spalten, Etikett oben, alles linksbündig */
@media screen and (max-width: 900px) {
  .tabelle.raster tbody tr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-3) var(--a-3); padding: var(--a-4); border-radius: 12px; }
  .tabelle.raster td { grid-column: auto; padding: 0 !important; text-align: left !important; font-size: 15px; }
  .tabelle.raster td:first-child { grid-column: 1 / -1; min-height: 32px; padding-right: 7.5rem !important; font-weight: 500; }
  .tabelle.raster td.leer-zeile, .tabelle.raster td[colspan] { grid-column: 1 / -1; padding-right: 0 !important; }
  .tabelle.raster td[data-label]:not([data-label=""]):not(:first-child)::before { position: static; display: block; width: auto; margin: 0 0 2px; font: 400 12.5px/1.35 var(--schrift); color: var(--text-3); }
  .tabelle.raster td .unterzeile { margin-top: 2px; font-size: 12.5px; }
  .tabelle.raster td.zahl .gv { white-space: nowrap; }
  .tabelle.raster td.rechts, .tabelle.raster td.aktion, .tabelle.raster td.knopf-zelle { position: absolute; top: var(--a-4); right: var(--a-4); display: flex !important; gap: var(--a-2); width: auto; margin: 0; }
  .tabelle.raster td.rechts:empty, .tabelle.raster td.aktion:empty, .tabelle.raster td.knopf-zelle:empty { display: none !important; }
  .tabelle.raster td.rechts .knopf, .tabelle.raster td.knopf-zelle .knopf { min-height: 2rem; padding: 0 var(--a-3); font-size: 13px; }
}
/* Marktwetter kompakt (GESTALTUNG.md 5) */
.wetter-karte { gap: var(--a-4); padding: var(--a-4); border-radius: 12px; }
@media (min-width: 601px) { .wetter-karte { padding: var(--a-5); } }
.wetter-kopf { gap: var(--a-3); }
.wetter-symbol.gross { width: 44px; height: 44px; padding: 10px; }
.wetter-kopf-text b { font: 500 17px/1.25 var(--schrift); }
.wetter-kopf-text span { font-size: 13.5px; line-height: 1.4; }
.wetter-kopf-text span.gedaempft { font-size: 12.5px; }
.wetter-coins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 601px) { .wetter-coins { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1101px) { .wetter-coins { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.wetter-coin { justify-content: flex-start; min-width: 0; padding: 4px 8px 4px 4px; font-size: 12.5px; font-weight: 500; }
.wetter-coin .coin-logo { width: 20px; height: 20px; }
.wetter-coin .wetter-coin-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wetter-verlauf-block p, .wetter-messung { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.wetter-messung { padding-top: var(--a-3); border-top: 1px solid var(--linie); color: var(--text-3); }
.wetter-achse { font-size: 12px; }
.kennzahl .wert-mit { display: block; }
.kennzahl .wert-mit small { display: block; margin: 2px 0 0; font: 400 12.5px/1.35 var(--schrift); color: var(--text-3); }
/* Knöpfe einer Seite (Wallet: acht Aktionen): Handy zwei Spalten statt acht volle Zeilen */
@media (max-width: 800px) {
  .kz-titel .knopf-gruppe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-2); }
  .kz-titel .knopf-gruppe > :only-child { grid-column: 1 / -1; }
  .kz-titel .knopf-gruppe .knopf { min-height: 2.5rem; padding: 0 var(--a-3); font-size: 14px; }
}
/* Titel in Listen: Platz rechts nur so breit wie die Aktion (3-Punkte-Knopf schmal, Textknopf breit) */
@media screen and (max-width: 900px) {
  .tabelle.raster tr:not(:has(td .knopf)) td:first-child { padding-right: 2.5rem !important; }
  .tabelle.raster td.zahl { font-size: 14px; }
}
/* Reiter (Markt, Wallets, Konto): passen auf das Handy, sonst waagrecht verschiebbar statt abgeschnitten */
.seiten-wahl, .kz-nav, .kz-nav-kurz { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seiten-wahl::-webkit-scrollbar, .kz-nav::-webkit-scrollbar { display: none; }
@media (max-width: 600px) { .seiten-wahl a, .seiten-wahl button, .kz-nav a, .kz-nav-kurz a { padding-inline: var(--a-3); font-size: 14px; white-space: nowrap; } }
@media (max-width: 600px) { .seiten-reiter button { padding: 6px 10px; font-size: 13.5px; } }
/* Werte mit Zusatzzeile: gleiche Grösse wie jeder andere Kennzahl-Wert (app.css «.kennzahl span» verkleinerte sie) */
.kennzahl b .wert-mit, .kennzahl b .wert-mit .gv { font: inherit; color: inherit; margin: 0; line-height: inherit; }
.kennzahl b .wert-mit .gv.plus { color: var(--ok); } .kennzahl b .wert-mit .gv.minus { color: var(--fehler); }
/* Stapel (Gewinn mitnehmen, Reserve in Franken): nie breiter als die Seite; lange Zustandssätze brechen um */
.stapel { grid-template-columns: minmax(0, 1fr); }
.stapel .live-zustand, .stapel p { white-space: normal; overflow-wrap: anywhere; }
.stapel .knopf-gruppe { display: flex; flex-direction: row; flex-wrap: wrap; }
.stapel .knopf-gruppe .knopf { width: auto; }
/* Erklärsätze unter Kartengruppen klein und gedämpft (Kurse, Quelle) */
#kursquelle { margin-top: var(--a-3); font-size: 13px; line-height: 1.5; color: var(--text-3); }
/* Erklärsätze in Abschnitten: kleiner und gedämpft, damit Zahlen und Titel führen (GESTALTUNG.md 8) */
.kz-bereich > p:not(.kz-titel p), .stapel > p, .kz-bereich > .gedaempft, .stapel .gedaempft { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.seiten-reiter button, .segment button { white-space: nowrap; }
/* Laden ohne Wort (21.10.2026, Toni: «überall steht Laden …»): ruhige Fläche in der Grösse des Inhalts */
.platzhalter { display: block; min-height: 5.5rem; border-radius: 12px; background: linear-gradient(90deg, var(--flaeche) 0%, var(--flaeche-2) 50%, var(--flaeche) 100%); background-size: 200% 100%; animation: platzhalter 1.4s ease-in-out infinite; }
.platzhalter.zeile { display: inline-block; width: 60%; min-height: 1rem; border-radius: 6px; vertical-align: middle; }
@keyframes platzhalter { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .platzhalter { animation: none; } }
/* Knöpfe einheitlich (GESTALTUNG.md 7b) */
.knopf { min-height: 36px; padding: 0 14px; border-radius: 10px; font: 500 14px/1.2 var(--schrift); }
@media (max-width: 800px) { .knopf { min-height: 40px; } }
.knopf.gefahr:not(.primaer), .knopf.gefaehrlich:not(.primaer) { background: none; }
.seiten-reiter button, .seiten-wahl a { min-height: 32px; font-size: 13.5px; }
/* Live-Märkte: Status nur als Punkt vor der Zeit, Preise nie umbrechen; Listen mit zwei Werten in zwei Spalten */
.live-zustand.nur-punkt { display: inline-block; width: .5rem; margin-right: 6px; font-size: 0; vertical-align: .1rem; }
.live-zustand.nur-punkt::before { margin-right: 0; }
.tabelle td.preis, .tabelle td.preis > span:first-child { white-space: nowrap; }
@media screen and (max-width: 900px) { .tabelle.raster.zwei tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Marktwetter auf dem Handy (Toni, 21.10.2026: «die Sonne links sieht hässlich aus, behalte sie, aber schöner»):
   Sonne klein vor dem Zustand auf einer Zeile, die Beschreibung darunter über die volle Breite */
@media (max-width: 600px) {
  .wetter-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--a-25); row-gap: var(--a-1); }
  .wetter-kopf-text { display: contents; }
  .wetter-kopf .wetter-symbol.gross { grid-row: 1; width: 32px; height: 32px; padding: 7px; }
  .wetter-kopf-text b { grid-row: 1; grid-column: 2; font-size: 17px; }
  .wetter-kopf-text span { grid-column: 1 / -1; }
}
/* Grössen für Inter (grössere x-Höhe als Jost; Toni: «übelgrosse dicke Zahlen») */
body { font-size: 14.5px; letter-spacing: -0.005em; }
.kennzahl > b { font-size: 18px; font-weight: 550; letter-spacing: -0.01em; }
@media (min-width: 601px) { .kennzahl > b { font-size: 20px; } }
.kz-titel h1 { font-weight: 600; letter-spacing: -0.015em; }
.kz-unter { font-weight: 600; letter-spacing: -0.01em; }
@media screen and (max-width: 900px) { .tabelle.raster td { font-size: 14px; } .tabelle.raster td:first-child { font-size: 14.5px; } }
.diagramm-kopf .seiten-reiter button, .diagramm-kopf .segment button, .diagramm .seiten-reiter button { padding: 6px 10px; font-size: 13px; }
/* Umschalter (.segment): eine Zeile, kompakt, auf dem Handy waagrecht verschiebbar statt abgeschnitten (GESTALTUNG.md 7b) */
.segment { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.segment::-webkit-scrollbar { display: none; }
.segment button { flex: none; white-space: nowrap; }
@media (max-width: 600px) { .segment button { padding: 6px 10px; font-size: 13px; min-height: 32px; } }
/* Anteil-Knöpfe in Betrags-Schubladen (25 %, 50 %, Alles) */
.anteil-knoepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-2); margin-top: calc(-1 * var(--a-2)); }
.anteil-knoepfe .knopf { min-height: 34px; font-size: 13.5px; }
/* Erster Schritt in einem leeren Wallet */
.erster-schritt { display: grid; justify-items: start; gap: var(--a-2); margin-bottom: var(--a-4); padding: var(--a-4) var(--a-5); border: 1px solid var(--linie-stark); border-radius: 12px; background: var(--flaeche); }
.erster-schritt b { font-weight: 600; font-size: 15px; }
.erster-schritt p { margin: 0; color: var(--text-2); font-size: 14px; }
.erster-schritt .knopf { margin-top: var(--a-1); }
/* Coin-Liste: Suche und Sortierung in einer Zeile, auf dem Handy untereinander */
.coin-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-3); margin: var(--a-3) 0 0; }
.coin-werkzeuge .coin-suche { flex: 1 1 14rem; min-width: 0; max-width: 24rem; }
.leer-zeile .knopf { margin-top: var(--a-2); }
/* Kontomenü (Toni, 21.10.2026: «E-Mail nicht vertikal zentriert»): jeder Bereich gleicher Abstand oben und unten,
   Trennlinien dazwischen; Profil und Abmelden mit Zeichen */
.konto-menu .menu { padding: 6px; }
.menu-stand { margin: 0; padding: 10px 10px 12px; border-bottom: 1px solid var(--linie); }
.menu-kopf { margin: 0; padding: 11px 10px; line-height: 1.3; border-bottom: 1px solid var(--linie); }
.menu-zeile { padding: 8px 4px 8px 10px; }
.menu-trenner { height: 1px; margin: 0 0 4px; background: var(--linie); }
.konto-menu .menu .menu-mit-zeichen { display: flex; align-items: center; gap: 10px; }
.menu-mit-zeichen svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--text-2); }
/* Verlauf in Coin-Karten (Toni, 21.10.2026: «Verlauf 30 Tage bricht um, auch die Chart schöner»): zwei Spalten breit */
@media screen and (max-width: 900px) {
  .tabelle.raster td.verlauf-zelle { grid-column: span 2; }
  .tabelle.raster td.verlauf-zelle .funke { display: block; width: 100%; height: 30px; }
}
.live-zustand.ohne-punkt::before { display: none; }
@media screen and (max-width: 900px) { .tabelle.raster td.zahl.lang { font-size: 12px; white-space: nowrap; } }
/* Hilfe (21.10.2026): Inhalt als Kapseln, Schritte als Karten, Ausschnitte mit Rand */
.hilfe-inhalt { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-bottom: var(--a-2); }
.hilfe-inhalt a { padding: 6px 12px; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--text); font-size: 13.5px; text-decoration: none; }
.hilfe-inhalt a:hover { background: var(--flaeche-2); }
.hilfe-abschnitt { scroll-margin-top: var(--a-4); }
.hilfe-einleitung { margin: 0 0 var(--a-3); color: var(--text-2); }
.hilfe-schritt { display: grid; gap: var(--a-2); margin-bottom: var(--a-3); padding: var(--a-4) var(--a-5); border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); }
.hilfe-schritt h3 { margin: 0; font-size: 15.5px; font-weight: 600; }
.hilfe-schritt p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.hilfe-bilder { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--a-3); margin-top: var(--a-2); }
.hilfe-bilder img { width: 100%; max-width: 360px; height: auto; border: 1px solid var(--linie); border-radius: 12px; background: #f7f5f1; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.feld-hilfe { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--text-3); }
/* Anmeldung ohne Titel: Abstand Logo zu den Feldern */
.zugang-karte .marke.gross + .formular, .zugang-karte .marke.gross + .meldung { margin-top: var(--a-8); }
/* Coin-Liste: Zeitwahl unter dem Suchfeld (Toni, 21.10.2026) */
.coin-werkzeuge { flex-direction: column; align-items: flex-start; }
.coin-werkzeuge .coin-suche { width: 100%; max-width: 24rem; flex: none; }

/* Laden (Toni, 21.10.2026: «dass man sieht, hier lädt die Karte»): eine noch leere Tabelle zeigt einen Schimmer über die
   ganze Breite (als Tabellenbeschriftung unten); leere Zustände füllt das Skript immer mit einer Zeile (leer()). */
.tabelle tbody:empty { display: table-caption; caption-side: bottom; }
.tabelle tbody:empty::before { content: ""; display: block; height: 7.5rem; margin-top: 0.75rem; border-radius: 12px;
  background: linear-gradient(90deg, var(--flaeche) 0%, var(--flaeche-2) 50%, var(--flaeche) 100%); background-size: 200% 100%;
  animation: platzhalter 1.4s ease-in-out infinite, platzhalter-ende 0s 15s forwards; }   /* bleibt eine Tabelle wirklich leer: nach 15 s weg */
@keyframes platzhalter-ende { to { height: 0; margin-top: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tabelle tbody:empty::before { animation: platzhalter-ende 0s 15s forwards; } }
/* Lernbuch des KI-Händlers (22.10.2026) */
.lernbuch-tag { display: flex; flex-direction: column; gap: var(--a-2); }
.lernbuch-tag p { margin: 0; }
.lernbuch-tag ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: var(--a-1); }

/* ── Schubladen und Schrift (22.10.2026, Toni: «nervös», «sehr dicke und zu grosse Titel», «DM Sans testen») ──────────
   Skala: Seitentitel 19/22, Abschnitt 15.5/16, Kennzahl 18/20, Text 14.5, Nebentext 13.5, klein 12.5; Gewicht höchstens 500.
   Inter bleibt als Datei (Vergleich). */
@font-face { font-family: "DM Sans"; src: url("/static/schrift/dmsans.ttf") format("truetype"); font-weight: 100 1000; font-style: normal; font-display: swap; }
:root { --schrift: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body { font-size: 14.5px; letter-spacing: 0; font-optical-sizing: auto; }
b, strong, th { font-weight: 500; }
.kz-titel h1 { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.kz-unter { font-size: 15.5px; font-weight: 500; letter-spacing: 0; }
@media (min-width: 601px) { .kz-titel h1 { font-size: 22px; } .kz-unter { font-size: 16px; } }
.kz-titel p { font-size: 14px; }
.kennzahl > b { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
@media (min-width: 601px) { .kennzahl > b { font-size: 20px; } }
.tabelle.raster td:first-child, .tabelle td:first-child { font-weight: 500; }
.erster-schritt b, .hilfe-schritt h3, .antwort h1, .antwort h2, .antwort h3, .schublade-titel { font-weight: 500; }
.schublade-titel { font-size: 17px; }
.wetter-kopf-text b { font-weight: 500; }
/* Schublade: kurze Werte rechts neben dem Namen, lange Werte darunter linksbündig; auf dem Handy gleich */
.details .angaben { grid-template-columns: minmax(0, 1fr) auto; gap: 0; }   /* ohne Spaltenlücke, sonst brechen die Linien */
.details .angaben dd.kurz { padding-left: var(--a-4); }
.details .angaben dt, .details .angaben dd { padding: var(--a-25) 0; border-bottom: 1px solid var(--linie); line-height: 1.45; font-size: 13.5px; }
.details .angaben dt { color: var(--text-2); }
.details .angaben dd { color: var(--text); font-size: 14px; font-weight: 450; }
.details .angaben dd.kurz { text-align: right; white-space: nowrap; }
.details .angaben dt.lang { grid-column: 1 / -1; padding-bottom: 2px; border-bottom: 0; }
.details .angaben dd.lang { grid-column: 1 / -1; text-align: left; font-weight: 400; padding-top: 0; }
.details .angaben dt:last-of-type, .details .angaben dd:last-of-type { border-bottom: 0; }
@media (max-width: 600px) {
  .details .angaben { grid-template-columns: minmax(0, 1fr) auto; }
  .details .angaben dt.kurz { padding-bottom: var(--a-25); border-bottom: 1px solid var(--linie); }
  .details .angaben dd.kurz { text-align: right; padding-top: var(--a-25); }
}
.details > p.gedaempft, .details .bot-liste { font-size: 14px; line-height: 1.55; }

/* Leistung (22.10.2026) */
.lg-braucht { margin: 0; display: flex; gap: var(--a-2); align-items: baseline; font-size: 14px; line-height: 1.5; color: var(--text); }
.lg-glossar { grid-template-columns: minmax(0, 1fr); }
.lg-glossar dt.lang { color: var(--text); font-weight: 500; padding-top: var(--a-3); }
.lg-glossar dd.lang { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; }
/* Bestätigung in den AION-Farben (22.10.2026, Toni: «wieso ist hier Rot drin? wieso nicht mit unseren Farben?»):
   Symbol und Name neutral, der Bestätigungsknopf wie jeder Hauptknopf; was passiert, sagt der Text. */
.bestaetigung.gefahr .bestaetigung-symbol { background: var(--flaeche-2); color: var(--text-2); }
.bestaetigung.gefahr .bestaetigung-name { background: var(--flaeche-2); color: var(--text); }
.bestaetigung .knopf.gefahr-voll { background: var(--knopf); border-color: var(--knopf); color: var(--knopf-text); }
/* Version nie abschneiden (22.10.2026): in der schmalen Leiste lieber umbrechen als «Version 0.2…» */
.leiste-version { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }
/* Lernen (22.10.2026): Begründung beim Nutzen umbrechen statt abschneiden */
#ln-agenten td.zahl { white-space: normal; }
#ln-agenten td.zahl .unterzeile { display: block; max-width: 22rem; margin-left: auto; white-space: normal; text-align: right; }
@media screen and (max-width: 900px) { #ln-agenten td.zahl .unterzeile { text-align: left; margin-left: 0; } }