/* Gemeinsames Design „Dicht" (Tommy, 03.10.2026, ersetzt „Aurora"):
   finviz-nahe Struktur, eigene Farben. Dunkle Kopfleiste, helle Inhaltsflächen, kleine Schrift, dünne Linien,
   tabellarische Ziffern, Grün/Rot nur für Long/Short bzw. Gewinn/Verlust. Systemschrift, keine Webfonts. */

:root {
    /* Inhalt (hell) */
    --bg: #EEF0F3;
    --surface: #FFFFFF;
    --surface-2: #F3F5F8;
    --zebra: #F7F8FA;
    --hover: #EAF0FB;
    --text: #151A23;
    --text-2: #555F70;
    --line: #D9DEE5;
    --line-strong: #C3CAD4;
    --accent: #1F5FD1;
    --accent-text: #FFFFFF;
    --up: #0A7F37;
    --down: #C8232B;
    --focus: #1F5FD1;
    --warn: #A15C00;
    --zone: #3F5674;          /* Kaufzone: neutral (Grün/Rot bleiben für Gewinn/Verlust, Ziel/Stop) */
    --saved: #6A3FC2;         /* selbst gemerkte Zone („Zone merken“): eigene Farbe, getrennt von der Zone der Regel */

    /* Chartbilder (Analysten-Look 18.10.2026, wie das X-Chartbild): Grund, Raster, Kerzen, Zählung, Fibonacci, Ungültig/Stop, Ziel/Prognose */
    --chart-bg: #FFFFFF;
    --chart-grid: #EDF0F4;
    --candle-up: #089981;
    --candle-down: #F23645;
    --count: #8F6400;
    --fib: #B35A00;
    --chart-inv: #C62828;
    --chart-tp: #00796B;

    /* Kopfleiste (in beiden Modi dunkel) */
    --hdr-bg: #161A22;
    --menu-bg: #222733;
    --hdr-text: #EDF0F5;
    --hdr-text-2: #AEB6C4;
    --hdr-line: #343A48;
    --brand: #F2A51A;
    --logo-cyan: #19BFFF;
    --brand-text: #161A22;

    /* Heatmap (in beiden Modi dunkel, weiße Schrift) */
    --heat-bg: #1A1E26;
    --tile-neutral: #434856;
    --tile-text: #FFFFFF;
    --heat-up: #138A3E;
    --heat-down: #C9272E;

    --radius-l: 4px;
    --radius-m: 3px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --tabbar-h: 0px;
    --wrap: 1440px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0D1015;
        --surface: #151920;
        --surface-2: #1C212A;
        --zebra: #181C24;
        --hover: #1F2836;
        --text: #E7EAF0;
        --text-2: #9AA4B4;
        --line: #272D38;
        --line-strong: #353C49;
        --accent: #79A6FF;
        --accent-text: #0D1015;
        --up: #3DD07A;
        --down: #FF6B6B;
        --focus: #79A6FF;
        --warn: #F0B45A;
        --zone: #A9BBD6;
        --saved: #B79CFF;
        --hdr-bg: #0A0C10;
        --menu-bg: #171B23;
        --hdr-line: #262C37;
        --heat-bg: #0D1015;
        --chart-bg: #0E1116;
        --chart-grid: #1A1F27;
        --candle-up: #26A69A;
        --candle-down: #EF5350;
        --count: #F5C542;
        --fib: #F7931A;
        --chart-inv: #EF5350;
        --chart-tp: #26A69A;
    }
}

:root[data-theme="dark"] {
    --bg: #0D1015;
    --surface: #151920;
    --surface-2: #1C212A;
    --zebra: #181C24;
    --hover: #1F2836;
    --text: #E7EAF0;
    --text-2: #9AA4B4;
    --line: #272D38;
    --line-strong: #353C49;
    --accent: #79A6FF;
    --accent-text: #0D1015;
    --up: #3DD07A;
    --down: #FF6B6B;
    --focus: #79A6FF;
    --warn: #F0B45A;
    --zone: #A9BBD6;
    --saved: #B79CFF;
    --hdr-bg: #0A0C10;
    --menu-bg: #171B23;
    --hdr-line: #262C37;
    --heat-bg: #0D1015;
    --chart-bg: #0E1116;
    --chart-grid: #1A1F27;
    --candle-up: #26A69A;
    --candle-down: #EF5350;
    --count: #F5C542;
    --fib: #F7931A;
    --chart-inv: #EF5350;
    --chart-tp: #26A69A;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 var(--font);
    -webkit-font-smoothing: antialiased;
    padding-bottom: var(--tabbar-h);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 16px; z-index: 100; background: var(--surface); color: var(--text); padding: 6px 12px; border: 1px solid var(--line); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.icon { display: block; flex: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

/* ---------- Kopfleiste ---------- */
.hdr { color: var(--hdr-text); }
.hdr :focus-visible { outline-color: var(--brand); }
.hdr-top { background: var(--hdr-bg); }
.hdr-row { display: flex; align-items: center; gap: 20px; height: 48px; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--hdr-text); white-space: nowrap; font-size: 17px; letter-spacing: -0.01em; }
.logo:hover { text-decoration: none; color: #fff; }
/* Bildzeichen „Kerzen“ (26.10.2026): drei Kerzen, cyanfarbener Pfeil (Aussparung in Kopfleistenfarbe), goldene Kaufzone; Hover hebt den Pfeil kurz an */
.logo-mark { flex: none; overflow: visible; }
.lm-candle { fill: var(--hdr-text); }
.lm-knock { stroke: var(--hdr-bg); }
.lm-arrow { stroke: var(--logo-cyan); }
.lm-head { fill: var(--logo-cyan); stroke: var(--logo-cyan); }
.lm-zone { fill: var(--brand); }
@media (prefers-reduced-motion: no-preference) {
    .lm-pfeil { transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
    .logo:hover .lm-pfeil, .logo:focus-visible .lm-pfeil { transform: translate(1.5px, -2px); }   /* SVG-Einheiten (viewBox 64) */
}
.logo-text { font-weight: 600; }
.logo-text b { font-weight: inherit; color: var(--logo-cyan); }
.hdr-search {
    display: inline-flex; align-items: center; gap: 8px; height: 30px; width: min(380px, 40vw); padding: 0 8px 0 10px;
    border: 1px solid var(--hdr-line); border-radius: var(--radius-m); background: #0B0D12; color: var(--hdr-text-2);
    font: inherit; font-size: 13px; cursor: text; text-align: left;
}
.hdr-search:hover { border-color: #4A5263; color: var(--hdr-text); }
.hdr-search-text { flex: 1; white-space: nowrap; }
.hdr-search kbd { font: 600 10px var(--font); padding: 1px 5px; border: 1px solid var(--hdr-line); border-radius: 2px; color: var(--hdr-text-2); }
.hdr-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.hdr-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: var(--radius-m);
    background: transparent; color: var(--hdr-text-2); cursor: pointer;
}
.hdr-icon:hover { color: var(--hdr-text); background: rgba(255, 255, 255, .08); }
.hdr-link { font: inherit; font-size: 13px; color: var(--hdr-text); background: none; border: 0; padding: 6px 8px; cursor: pointer; white-space: nowrap; }
.hdr-link:hover { text-decoration: underline; }
.hdr-user { font-size: 13px; color: var(--hdr-text-2); padding: 0 4px; white-space: nowrap; }
.hdr-logout { margin: 0; }
.btn-signup {
    display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-m);
    background: var(--brand); color: var(--brand-text); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.btn-signup:hover { text-decoration: none; filter: brightness(1.08); }

.menu { background: var(--menu-bg); border-bottom: 1px solid var(--hdr-line); }
.menu-row { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.menu-row::-webkit-scrollbar { display: none; }
.menu-row a {
    display: block; padding: 8px 12px 7px; color: var(--hdr-text-2); font-size: 13px; font-weight: 600; white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.menu-row a:hover { color: var(--hdr-text); text-decoration: none; background: rgba(255, 255, 255, .05); }
.menu-row a[aria-current="page"] { color: #fff; border-bottom-color: var(--brand); }
.menu-row a:focus-visible { outline-offset: -2px; }

/* Sprachumschalter DE | EN (Plan Teil 32): ruhiges Segment in der Kopfleiste; aktive Sprache hervorgehoben, nicht klickbar wirkend */
.lang-switch { display: inline-flex; align-items: center; height: 26px; border: 1px solid var(--hdr-line); border-radius: var(--radius-m); overflow: hidden; }
.lang-switch a {
    display: inline-flex; align-items: center; height: 100%; padding: 0 7px; color: var(--hdr-text-2);
    font-size: 11px; font-weight: 700; letter-spacing: .04em; transition: color .2s, background-color .2s;
}
.lang-switch a + a { border-left: 1px solid var(--hdr-line); }
.lang-switch a:hover { color: var(--hdr-text); background: rgba(255, 255, 255, .08); text-decoration: none; }
.lang-switch a[aria-current="true"] { color: #fff; background: rgba(255, 255, 255, .10); cursor: default; }
.lang-switch a:focus-visible { outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .lang-switch a { transition: none; } }

/* Hinweis „English version available“ (nur Gäste mit englischer Browsersprache auf deutschen Seiten, app.js; schließbar) */
.lang-hint {
    position: fixed; z-index: 55; right: 16px; bottom: calc(var(--tabbar-h, 0px) + 16px);
    display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 12px; font-size: 13px;
    background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-left: 3px solid var(--brand);
    border-radius: var(--radius-l); box-shadow: 0 6px 24px rgb(0 0 0 / .18);
}
.lang-hint[hidden] { display: none; }
.lang-hint a { font-weight: 600; }
.lang-hint-close { width: 26px; height: 26px; border: 0; border-radius: var(--radius-m); background: transparent; color: var(--text-2); font-size: 18px; line-height: 1; cursor: pointer; }
.lang-hint-close:hover { background: var(--surface-2); color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
    .lang-hint:not([hidden]) { animation: lang-hint-in .24s ease-out; }
    @keyframes lang-hint-in { from { opacity: 0; transform: translateY(8px); } }
}

@media (max-width: 1100px) { .hdr-user { display: none; } }
@media (max-width: 767px) {
    .hdr-row { gap: 6px; }   /* 26.10.2026: „Kostenlos registrieren“ ist länger als „Sign up free“; bei 375 px sonst 2–3 px Überlauf */
    .logo { font-size: 15px; }
    .hdr-search { width: 30px; padding: 0; justify-content: center; border-color: transparent; background: transparent; margin-left: auto; }
    .hdr-search-text, .hdr-search kbd { display: none; }
    .hdr-actions { margin-left: 0; gap: 2px; }
    .hdr-actions .hdr-login { display: none; }   /* Anmelden steht unten in der Tab-Leiste (Klasse statt href – unter /en/ heißt der Link /en/login) */
    .btn-signup { padding: 0 7px; font-size: 11.5px; }
}
@media (max-width: 360px) {
    .logo-mark { display: none; }
    /* „Kostenlos vormerken“ (Plan Teil 25.2) passt so auch bei 320 px neben Logo, Suche und Hell/Dunkel */
    .hdr-row { gap: 6px; }
    .btn-signup { padding: 0 7px; font-size: 11.5px; }
    .lang-switch a { padding: 0 5px; }
}

/* Alte Klasse für Symbolknöpfe im Inhalt */
.icon-button {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0;
    border-radius: var(--radius-m); background: transparent; color: var(--text-2); cursor: pointer;
}
.icon-button:hover { background: var(--surface-2); color: var(--text); }

/* ---------- Navigation unten (Handy) ---------- */
.tabbar { display: none; }

@media (max-width: 767px) {
    :root { --tabbar-h: calc(52px + env(safe-area-inset-bottom)); }
    .tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
        height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom);
        background: var(--hdr-bg); border-top: 1px solid var(--hdr-line);
    }
    .tabbar a {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        color: var(--hdr-text-2); font-size: 11px; border-top: 2px solid transparent;
    }
    .tabbar a:hover { text-decoration: none; }
    .tabbar a[aria-current="page"] { color: #fff; border-top-color: var(--brand); }
    .tabbar a:focus-visible { outline-color: var(--brand); outline-offset: -3px; }
}

/* ---------- Inhalt ---------- */
main { max-width: var(--wrap); margin: 0 auto; padding: 16px 16px 40px; }
h1 { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 700; margin: 24px 0 8px; }
.sub { color: var(--text-2); margin: 0 0 16px; font-size: 13px; }
.small { font-size: 12px; color: var(--text-2); }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }

@media (max-width: 767px) {
    main { padding-top: 12px; }
    h1 { font-size: 20px; }
}

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 4px 14px; }
.card.empty { padding: 28px 16px; color: var(--text-2); text-align: center; }
.row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row > :last-child { color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }

/* Panel: Kasten mit Kopfzeile (Übersicht und andere dichte Bereiche) */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); min-width: 0; }
.panel-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap;
    padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.panel-head h2 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text); }
.panel-head a { font-size: 12px; font-weight: 600; }

/* ---------- Tabellen: dicht, Zebra, Hover ---------- */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--surface-2); text-transform: uppercase; letter-spacing: .03em; }
td { font-variant-numeric: tabular-nums; }
tbody tr:nth-child(even) { background: var(--zebra); }
tbody tr:hover { background: var(--hover); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
td.err { color: var(--down); white-space: normal; min-width: 200px; font-size: 12px; }

.pill {
    display: inline-block; padding: 0 6px; border-radius: 2px; font-size: 11px; font-weight: 600; line-height: 18px;
    background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line);
}
.pill.up { color: var(--up); background: color-mix(in srgb, var(--up) 10%, transparent); border-color: color-mix(in srgb, var(--up) 30%, transparent); }
.pill.down { color: var(--down); background: color-mix(in srgb, var(--down) 10%, transparent); border-color: color-mix(in srgb, var(--down) 30%, transparent); }
.pill.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.count { font-size: 13px; font-weight: 500; color: var(--text-2); margin-left: 6px; }
.hint { margin: -4px 0 10px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 24px 0 8px; }
.section-head h2 { margin: 0; }
.section-head .search { max-width: 280px; }

/* ---------- Seitenkopf und Werkzeugleiste ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.page-head .sub { margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.toolbar .search { flex: 1; min-width: 180px; max-width: 300px; margin-left: auto; }

/* Umschalter (Reiter) */
.segmented {
    display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-m); overflow-x: auto; max-width: 100%;
    scrollbar-width: none; background: var(--surface);
}
.segmented a, .segmented button {
    font: inherit; font-size: 13px; color: var(--text); padding: 4px 10px; border: 0; border-right: 1px solid var(--line);
    background: transparent; white-space: nowrap; cursor: pointer;
}
.segmented > :last-child { border-right: 0; }
.segmented a:hover, .segmented button:hover { text-decoration: none; background: var(--hover); }
.segmented [aria-current="true"], .segmented [aria-pressed="true"] { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.segmented :focus-visible { outline-offset: -2px; }

/* ---------- Listen (Tabelle auf dem Desktop, Liste auf dem Handy) ---------- */
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.list-head, .list-row {
    display: grid;
    grid-template-columns: minmax(180px, 2.2fr) 1fr 1fr minmax(160px, 1.8fr) 1fr 1fr;
    align-items: center;
    gap: 12px;
    padding: 4px 10px;
}
.list-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); background: var(--surface-2); border-bottom: 1px solid var(--line); padding-top: 6px; padding-bottom: 6px; }
.list-row { color: var(--text); border-bottom: 1px solid var(--line); font-size: 13px; min-height: 30px; }
.list-row:nth-of-type(odd) { background: var(--zebra); }
.list-row:last-of-type { border-bottom: 0; }
.list-row:hover { background: var(--hover); text-decoration: none; }
.list-row:focus-visible { outline-offset: -2px; }
.list-head .num, .list-row .num { text-align: right; justify-self: end; }
.cell-name { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
.cell-name .small, .cell-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-name strong { color: var(--accent); }
.list-row > span > .small { display: block; }
.list-row > .cell-name > .small { display: inline; }
.list-empty { padding: 16px 12px; margin: 0; }

.cell-score { display: flex; align-items: center; gap: 8px; }
.scorebar { position: relative; flex: 1; height: 6px; border-radius: 1px; background: var(--surface-2); }
.scorebar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line-strong); }
.scorebar-fill { position: absolute; top: 0; bottom: 0; border-radius: 1px; }
.scorebar-fill.pos { background: var(--up); }
.scorebar-fill.neg { background: var(--down); }
.score-value { width: 34px; text-align: right; font-weight: 600; }

.list-signals .list-head, .list-signals .list-row { grid-template-columns: minmax(180px, 2fr) 1.6fr 1fr 1fr 1fr 1fr; }

/* Aufklappbarer Bereich */
.disclosure { margin-top: 20px; }
.disclosure summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary h2 { margin: 0; }
.disclosure summary::before {
    content: ""; width: 6px; height: 6px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
    transform: rotate(-45deg); transition: transform .2s var(--ease); align-self: center;
}
.disclosure[open] summary::before { transform: rotate(45deg); }

@media (max-width: 767px) {
    .toolbar .search { max-width: none; margin-left: 0; order: -1; flex-basis: 100%; }
    .list-head { display: none; }
    .list-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "name price" "score change";
        gap: 2px 12px;
        padding: 8px 12px;
    }
    .list-row .cell-name { grid-area: name; flex-direction: column; gap: 0; }
    .list-row .cell-price { grid-area: price; }
    .list-row .cell-change { grid-area: change; }
    .list-row .cell-score { grid-area: score; }
    .list-row .cell-trend, .list-row .cell-signal { display: none; }

    /* Signal-Karten: Name, dann Signal/Einstieg, dann vier Kennzahlen nebeneinander */
    .list-signals .list-row { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: none; gap: 4px 10px; }
    .list-signals .list-row > :nth-child(1),
    .list-signals .list-row > :nth-child(2) { grid-column: 1 / -1; grid-area: auto / 1 / auto / -1; }
    .list-signals .list-row > :nth-child(2) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .list-signals .list-row > :nth-child(2) .small { display: inline; }
    .list-signals .list-row [data-label] { justify-self: start; text-align: left; font-size: 13px; }
    .list-signals .list-row [data-label]::before { content: attr(data-label); display: block; color: var(--text-2); font-size: 11px; font-weight: 400; }
}

/* ---------- Seitenleiste Favoriten ---------- */
.shell { max-width: var(--wrap); margin: 0 auto; }
.shell > main { max-width: none; margin: 0; }
.sidebar { display: none; }
@media (min-width: 1180px) {
    .shell.has-sidebar { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; padding: 0 16px; }
    .shell.has-sidebar > main { padding-left: 0; padding-right: 0; }
    .sidebar { display: block; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; padding: 16px 0; }
}
.favorites-page { max-width: 560px; }
.fav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fav-title { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.favorites-page .fav-head { display: none; }
.fav-lists { margin-bottom: 8px; }
.fav-items { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.fav-item {
    display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 6px;
    padding: 4px 8px 4px 4px; position: relative; border-bottom: 1px solid var(--line); background: transparent;
}
.fav-item:nth-child(even) { background: var(--zebra); }
.fav-item:hover { background: var(--hover); }
.fav-item:last-child { border-bottom: 0; }
.fav-item.dragging { opacity: .6; z-index: 2; outline: 1px solid var(--accent); }
.fav-drag { color: var(--text-2); cursor: grab; font-size: 11px; letter-spacing: -2px; touch-action: none; opacity: .5; user-select: none; }
.fav-item:hover .fav-drag { opacity: 1; }
.fav-link { color: var(--text); min-width: 0; display: flex; flex-direction: column; }
.fav-link:hover { text-decoration: none; }
.fav-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.fav-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.fav-price { text-align: right; font-size: 13px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.fav-badge { font-size: 10px; padding: 0 4px; }
.fav-note { color: var(--text-2); display: inline-flex; }
.fav-remove { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); opacity: 0; width: 24px; height: 24px; background: var(--surface-2); }
.fav-item:hover .fav-remove, .fav-remove:focus-visible { opacity: 1; }
.fav-empty { padding: 12px; }
.fav-actions { display: flex; gap: 12px; padding: 8px 4px; font-size: 12px; }
.trend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); display: inline-block; }
.trend-dot.up { background: var(--up); }
.trend-dot.down { background: var(--down); }
@media (hover: none) { .fav-remove { opacity: 1; position: static; transform: none; } .fav-item { grid-template-columns: 12px minmax(0, 1fr) auto auto; } }

.link-button { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.link-button.danger { color: var(--down); }

.star {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 2px;
    background: transparent; color: var(--text-2); cursor: pointer; padding: 0; transition: color .2s var(--ease);
}
.star:hover, .star.on { color: #E8930C; }
.star.on svg { fill: currentColor; }
.star:active { transform: scale(0.9); }
.name-line { display: flex; align-items: center; gap: 4px; margin-left: -4px; }
.name-line .star { width: 22px; height: 22px; }
.name-line .star svg { width: 14px; height: 14px; }
.note-mark { color: var(--text-2); display: inline-flex; }

/* ---------- Notizen ---------- */
.note-card textarea { resize: vertical; font-size: 14px; line-height: 1.5; }
.note-view { font-size: 14px; }
.note-view p, .shared-note p { margin: 6px 0; }
.note-view ul, .note-entry-text ul { margin: 6px 0; padding-left: 20px; }
.note-actions { margin: 6px 0 12px; }
.shared-note { border-top: 1px solid var(--line); padding: 6px 0; font-size: 14px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 6px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 1px; vertical-align: middle; }
.dot-idea { background: var(--accent); }
.dot-warning { background: var(--down); }
.dot-done { background: var(--up); }
.note-row {
    display: grid; grid-template-columns: 12px 150px minmax(0, 1fr) auto; gap: 10px; align-items: center;
    width: 100%; padding: 6px 12px; border: 0; border-bottom: 1px solid var(--line);
    background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.note-row:last-child { border-bottom: 0; }
.note-row:hover { background: var(--hover); }
.note-row-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-note { color: var(--text); }
.search-wide { flex: 1; max-width: 480px; margin-left: 0 !important; }
.notes-list .note-entry { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--text); }
.notes-list .note-entry:last-child { border-bottom: 0; }
.notes-list .note-entry:hover { background: var(--hover); text-decoration: none; }
.note-entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.note-date { margin-left: auto; }
.note-entry-text { display: block; font-size: 13px; margin-top: 2px; }
.note-entry-text p { margin: 2px 0; }

.dialog {
    border: 1px solid var(--line-strong); border-radius: var(--radius-l); padding: 18px; width: min(440px, calc(100vw - 32px));
    background: var(--surface); color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}
.dialog::backdrop { background: rgba(10, 12, 16, .5); }
.dialog h3 { margin: 0; font-size: 16px; }
.dialog .small { margin: -6px 0 0; }
.dialog-actions { display: flex; align-items: center; gap: 8px; }
.dialog-actions > span { flex: 1; }
.button-danger { background: var(--down); border-color: var(--down); color: #fff; }
@media (max-width: 767px) {
    .note-row { grid-template-columns: 12px minmax(0, 1fr) auto; }
    .note-row > :nth-child(3) { grid-column: 1 / -1; white-space: normal; }
}

/* ---------- Einstellungen ---------- */
.settings-nav { margin-bottom: 12px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.plain-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }   /* Formularteil abschaltbar (Kunden-Meldung noch aus) */
.plain-fieldset[disabled] { opacity: .6; }
.settings-grid .card { padding-bottom: 14px; scroll-margin-top: 16px; }
.settings-grid .form { margin-top: 8px; }
#symbole, #sicherung { scroll-margin-top: 16px; }
.inline-form { display: inline-block; margin: 6px 10px 0 0; }
.telegram { border-top: 1px solid var(--line); margin-top: 14px; }
.list-members { margin-top: 6px; }
.member-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.member-row:last-child { border-bottom: 0; }
.member-row .inline-form { margin: 0; }
code { font: 0.9em var(--mono); background: var(--surface-2); padding: 1px 4px; border-radius: 2px; }
input[type="file"] { font: inherit; font-size: 13px; }
@media (max-width: 767px) {
    .settings-grid { grid-template-columns: 1fr; }
    .member-row { grid-template-columns: 70px minmax(0, 1fr) auto; }
    .member-row .pill { display: none; }
}

/* ---------- News ---------- */
.news-card h3 { align-items: center; gap: 8px; }
.news-label { margin: 6px 0 2px; }
.news-bullets { margin: 0 0 6px; padding-left: 18px; font-size: 13px; }
.news-bullets li { margin: 2px 0; }
.news-articles { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; }
.news-articles li { padding: 4px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.news-articles li:last-child { border-bottom: 0; }
.news-articles a { color: var(--text); }
.news-articles a:hover { color: var(--accent); }
/* Klickbare Meldung: Kurzfassung, Kursreaktion und Link zum Original klappen auf */
.news-item summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 1px; padding-left: 14px; position: relative; }
.news-item summary::-webkit-details-marker { display: none; }
.news-item summary::before { content: "›"; position: absolute; left: 2px; top: 0; color: var(--muted, #888); transition: transform .15s; }
.news-item[open] summary::before { transform: rotate(90deg); }
.news-item summary:hover .news-title { color: var(--accent); }
.news-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.news-body { padding: 6px 0 4px 14px; }
.news-points { margin: 0 0 4px; padding-left: 16px; }
.news-points li { margin: 2px 0; }
.news-reaction { margin: 6px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.news-reaction svg { flex: none; }
.news-line { fill: none; stroke-width: 1.5; stroke: var(--muted, #888); }
.news-line.up { stroke: var(--up); }
.news-line.down { stroke: var(--down); }
.news-mark { stroke: var(--line); stroke-dasharray: 2 2; }
.news-source { margin: 4px 0 0; }
.news-source a { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .news-item summary::before { transition: none; } }

/* ---------- Backtest-Labor ---------- */
.field-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.field-row .field { flex: 1 1 110px; }
.field-row .field.grow { flex: 2 1 180px; }
.lab-form .card { padding-bottom: 14px; }
.lab-start { align-self: start; }
.lab-start .button { margin-top: 10px; }
.sub-inline { font-size: 16px; font-weight: 500; color: var(--text-2); }
.summary-text { font-size: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-l); padding: 10px 14px; margin: 0 0 16px; }
.lab-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); overflow: hidden; }
.kpi { background: var(--surface); padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; border-right: 1px solid var(--line); min-width: 0; }
.kpis > .kpi:last-child { border-right: 0; }
.kpi > .small:first-child { text-transform: uppercase; letter-spacing: .03em; font-size: 11px; font-weight: 600; }
.kpi strong { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-small { height: 280px; }
.chart-tiny { height: 160px; }
.chart-card + .chart-hint + .chart-card { margin-top: 10px; }
table.heatmap td, table.heatmap th { padding: 5px 8px; font-size: 12px; }
table.heatmap td.strong { font-weight: 700; }
table.heatmap tbody tr:nth-child(even), table.heatmap tbody tr:hover { background: transparent; }
.heat-up-1 { background: color-mix(in srgb, var(--up) 12%, transparent); }
.heat-up-2 { background: color-mix(in srgb, var(--up) 24%, transparent); }
.heat-up-3 { background: color-mix(in srgb, var(--up) 38%, transparent); }
.heat-up-4 { background: color-mix(in srgb, var(--up) 55%, transparent); }
.heat-down-1 { background: color-mix(in srgb, var(--down) 12%, transparent); }
.heat-down-2 { background: color-mix(in srgb, var(--down) 24%, transparent); }
.heat-down-3 { background: color-mix(in srgb, var(--down) 38%, transparent); }
.heat-down-4 { background: color-mix(in srgb, var(--down) 55%, transparent); }
.bars { padding: 6px 0 12px; }
.bar-row { display: grid; grid-template-columns: 36px 1fr 64px; gap: 8px; align-items: center; padding: 2px 0; font-size: 12px; }
.bar-track { position: relative; height: 8px; background: var(--surface-2); border-radius: 1px; }
.bar-track::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line-strong); }
.bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 1px; }
.bar-fill.pos { background: var(--up); }
.bar-fill.neg { background: var(--down); }
table.compare td.wrap { white-space: normal; min-width: 220px; }
table.compare th { text-align: left; }
.print-only { display: none; }
@media (max-width: 900px) {
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi { border-bottom: 1px solid var(--line); }
}

@media print {
    :root { --bg: #fff; --surface: #fff; --surface-2: #f2f2f2; --zebra: #fff; --text: #000; --text-2: #444; --line: #ccc; }
    .hdr, .tabbar, .sidebar, .footer, .no-print, .chart-toolbar { display: none !important; }
    .shell.has-sidebar { display: block; }
    main { padding: 0; max-width: none; }
    .print-only { display: block; }
    .card, .chart-card, .kpi, .table-wrap, .summary-text { break-inside: avoid; border: 1px solid #ddd; }
    table.trades tbody tr { break-inside: avoid; }
    a { color: #000; text-decoration: none; }
}

/* ---------- Chart-Seite ---------- */
.quote-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.quote-symbol { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.quote-symbol h1 { margin: 0; font-size: 24px; }
.quote-name { margin: 2px 0 0; }
.quote-price { text-align: right; }
/* Kurzporträt (Plan Teil 19): eigene Zeile unter Titel und Kurs, Lesebreite begrenzt, Stand klein */
.quote-about { flex: 0 0 100%; margin: 0; }   /* ohne max-width: sonst passt der Abschnitt neben den Titel statt in eine eigene Zeile */
.quote-about > * { max-width: 92ch; }
.quote-about-h { margin: 0 0 2px; font-size: 11px; font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.quote-about-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.quote-about-stand { margin-left: 4px; font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
/* Steckbrief (Plan Teil 25.3): ergänzt das Kurzporträt; eingeklappt in beiden Modi, Faktenzeile bleibt in der Kopfzeile sichtbar.
   Pfeil wie details[data-erkl] (gemeinsame Regel unten im Abschnitt Kompakt), aber ohne data-erkl: der Modus-Schalter öffnet ihn nicht. */
.quote-brief { flex: 0 0 100%; margin: -4px 0 0; }
.quote-brief > * { max-width: 92ch; }
.quote-brief > summary { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; width: fit-content; max-width: 100%;
    padding: 2px 0; cursor: pointer; list-style: none; border-radius: 2px; font-size: 13px; line-height: 1.4; }
.quote-brief > summary::-webkit-details-marker { display: none; }
.quote-brief-h { font-weight: 600; color: var(--text); }
.quote-brief-facts { color: var(--text-2); }
.quote-brief > summary:hover .quote-brief-h { color: var(--accent); }
.about-facts { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--text-2); }   /* Screener-ⓘ: Branche · Sitz */
.quote-brief-admin { font-size: 11px; }
.quote-brief-body { margin: 4px 0 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--line); }
.quote-brief-text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.quote-brief-src { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-2); }
.price-big { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.chart-legend { margin-left: auto; color: var(--text-2); min-height: 18px; font-size: 12px; font-variant-numeric: tabular-nums; }
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 8px 6px 6px; position: relative; }
.chart { height: 480px; }
.chart-message { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); margin: 0; background: var(--surface-2); border: 1px solid var(--line); padding: 8px 14px; border-radius: var(--radius-m); color: var(--text); text-align: center; max-width: 80%; }
.chart-hint { margin: 6px 4px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; }
.key { display: inline-block; width: 14px; height: 2px; }
.key-ema20 { background: var(--accent); }
.key-ema50 { background: #E8930C; }
.key-ema200 { background: var(--text-2); }
.key-zone { width: 12px; height: 10px; border-radius: 1px; }
.key-entry { background: color-mix(in srgb, var(--zone) 35%, transparent); border: 1px solid var(--zone); }   /* Kaufzone neutral */
.key-target { background: color-mix(in srgb, var(--up) 35%, transparent); border: 1px solid var(--up); }   /* Ziel grün */
.zone-range { display: block; white-space: nowrap; }

/* ---------- Kaufzonen (Tommy, 08.10.2026: „Einstiege sind immer in Zonen“) ----------
   Zone neutral (--zone), Ziel grün, Stop rot wie bisher. Zonen-Leiste: Lage des Schlusskurses zwischen Stop und TP2. */
.zone-big { display: inline-block; font-size: 15px; font-weight: 650; color: var(--zone); font-variant-numeric: tabular-nums;
    white-space: nowrap; padding: 0 6px; border-radius: var(--radius-m); background: color-mix(in srgb, var(--zone) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--zone) 28%, transparent); line-height: 20px; }
.zone-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.list-row > .zone-cell > .small { display: block; }
.pill.zone { color: var(--zone); background: color-mix(in srgb, var(--zone) 9%, transparent); border-color: color-mix(in srgb, var(--zone) 35%, transparent); }
a.pill.zone:hover { text-decoration: none; background: color-mix(in srgb, var(--zone) 16%, transparent); }
.zone-text { color: var(--zone); }
.pill.confirm { color: var(--accent); background: transparent; border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.zone-meter { position: relative; display: block; width: 120px; max-width: 100%; height: 6px; margin-top: 3px; border-radius: 1px; background: var(--surface-2); border: 1px solid var(--line); }
.zone-meter i { position: absolute; top: -1px; bottom: -1px; }
.zone-meter .zm-zone { background: color-mix(in srgb, var(--zone) 45%, transparent); }
.zone-meter .zm-stop { left: 0; width: 2px; background: var(--down); }
.zone-meter .zm-tp1 { width: 2px; background: var(--up); }
.zone-meter .zm-tp2 { right: 0; width: 2px; background: var(--up); }
.zone-meter .zm-close { top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.list-zones .list-head, .list-zones .list-row { grid-template-columns: minmax(170px, 1.7fr) 1.5fr 1.2fr 0.9fr 1.3fr 1fr; }
.list-zones .num .zone-meter { margin-left: auto; }
.zone-note { margin: 0 0 8px; }
.ov-zones td.zone { color: var(--zone); font-weight: 600; white-space: nowrap; }
.signals-help { max-width: 110ch; }
/* Ehrlich kennzeichnen (08.10.2026): handelbar für die getestete Regel oder gesperrt (abgeblendet, Grund in Klartext).
   Abblenden über Farbe statt opacity – kleine Schrift bliebe sonst nicht lesbar (Kontrast). */
.zone-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 10px; }
.zone-filter .check { margin-top: 0; font-weight: 600; min-height: 28px; }
.zone-filter .small { color: var(--text-2); }
.rule-note { display: block; font-size: 12px; line-height: 1.35; color: var(--text-2); }
.rule-note.ok { color: var(--accent); font-weight: 600; }
/* Regel-Status für Kunden-Konten (Plan Teil 23.1): sachlich, ohne Ampelfarbe – ja/nein fett, fester Hinweis direkt darunter */
.rule-status { margin-top: 4px; color: var(--text); }
.rule-status strong { font-weight: 650; }
.rule-legal { display: block; font-size: 11.5px; line-height: 1.35; color: var(--text-2); }
.quote-rule { flex-basis: 100%; }   /* Chart-Kopf: eigene Zeile unter den Pillen */
.quote-rule .rule-status { margin-top: 0; }
.explain-rule { margin: 0 0 10px; }
.list-zones.only-tradeable .list-row.blocked { display: none; }
.zone-hidden-note { margin: 0; padding: 8px 12px; color: var(--text-2); border-top: 1px solid var(--line); }
.list-zones:not(.only-tradeable) .zone-hidden-note { display: none; }
.list-row.blocked, .list-row.blocked .up, .list-row.blocked .down, .list-row.blocked .zone-big { color: var(--text-2); }
.list-row.blocked .zone-big { background: transparent; border-color: var(--line); }
.list-row.blocked .zone-meter { opacity: .45; }
.list-row.blocked .cell-name strong { font-weight: 600; }
.pill.zpos { display: block; width: fit-content; margin: 2px 0 0 auto; background: transparent; }
.pill.zpos-in { color: var(--zone); border-color: color-mix(in srgb, var(--zone) 45%, transparent); }
.pill.zpos-unter { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.pill.zpos-ueber { color: var(--text-2); border-color: var(--line-strong); }
.pill.rule-block, .pill.zone.blocked { color: var(--text-2); background: transparent; border-color: var(--line-strong); }
.zone-footnote { margin: 6px 0 0; color: var(--text-2); }
@media (max-width: 767px) {
    /* Handy: Name und Zone über die ganze Breite, darunter je zwei Kennzahlen nebeneinander (Kurs mit Zonen-Leiste) */
    .list-zones .list-row { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; gap: 6px 14px; }
    .list-zones .list-row > .cell-name { align-items: flex-start; }
    .list-zones .list-row > .zone-cell { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 2px 10px; }
    .list-zones .list-row > .zone-cell > .rule-note { flex-basis: 100%; }
    .list-zones .num .zone-meter { margin-left: 0; }
    .pill.zpos { margin-left: 0; }
    .zone-big { font-size: 16px; }
}
.chart-strategy[hidden] { display: none; }
/* Ebenen im Chart (Marken, Zonen, Fibonacci-Linien), Tooltip an Marken und Zonen */
.chart-layers { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; color: var(--text-2); }
.chart-layers label { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; cursor: pointer; }
.chart-layers input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.chart-layers select { width: auto; font: inherit; font-size: 12px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--text); min-height: 28px; }
.chart-layers select[hidden] { display: none; }
.chart-tip { position: absolute; z-index: 5; pointer-events: none; max-width: 280px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: 0 4px 14px rgba(0, 0, 0, .14); padding: 7px 9px; font-size: 12px; line-height: 1.35; }
.chart-tip[hidden] { display: none; }
.chart-tip strong { display: block; margin-bottom: 3px; }
.chart-tip .tip-row { display: flex; justify-content: space-between; gap: 12px; }
.chart-tip .tip-row span { color: var(--text-2); }
.chart-tip .tip-row b { font-weight: 600; text-align: right; }
.chart-tip .tip-foot { margin: 5px 0 0; color: var(--text-2); font-size: 11px; }
.chart-layer-hint { position: absolute; left: 12px; top: 12px; z-index: 4; margin: 0; max-width: min(420px, 80%); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 5px 9px; color: var(--text-2); }
.chart-layer-hint[hidden] { display: none; }
@media (pointer: coarse) { .chart-layers label, .chart-layers select { min-height: 40px; } }
.chart-hint .nw { white-space: nowrap; }
.key-risk { background: color-mix(in srgb, var(--down) 25%, transparent); border: 1px dashed var(--down); }   /* Stop/Risiko rot */

.cards-3, .cards-2 { display: grid; gap: 12px; margin-top: 16px; }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 8px 0 4px; display: flex; justify-content: space-between; gap: 8px; }
.card > .small:last-child { margin: 8px 0 10px; }
table.trades tbody tr { cursor: pointer; }
table.trades th[data-sort] { cursor: pointer; user-select: none; }
table.trades th[data-sort]:hover { color: var(--text); }

@media (max-width: 900px) { .cards-3, .cards-2 { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
    .chart { height: 340px; }
    .price-big { font-size: 26px; }
    .quote-price { text-align: left; }
    .chart-legend { margin-left: 0; flex-basis: 100%; font-size: 11px; }
}

/* ---------- Formulare und Buttons ---------- */
.form { display: flex; flex-direction: column; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field > span { font-size: 12px; color: var(--text-2); font-weight: 600; }
input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="number"], input[type="date"], select, textarea {
    font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--radius-m); padding: 5px 8px; width: 100%; min-height: 30px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); }
input::placeholder { color: var(--text-2); opacity: .8; }

.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600;
    border: 1px solid var(--line-strong); border-radius: var(--radius-m); padding: 5px 12px; min-height: 30px; cursor: pointer;
    background: var(--surface-2); color: var(--text);
}
.button:hover { background: var(--hover); text-decoration: none; }
.button:active { transform: translateY(1px); }
.button-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.button-primary:hover { background: var(--accent); filter: brightness(1.08); }
.button-block { width: 100%; }
.button-small { font-size: 12px; padding: 3px 10px; min-height: 26px; }

.alert {
    background: color-mix(in srgb, var(--down) 8%, var(--surface)); color: var(--down); border: 1px solid color-mix(in srgb, var(--down) 35%, transparent);
    border-radius: var(--radius-m); padding: 8px 12px; margin: 0 0 12px; font-size: 13px;
}
.notice {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: var(--radius-m); padding: 8px 12px; margin: 0 0 12px; font-size: 13px;
}
.field-error { color: var(--down); font-size: 12px; }
/* Kurze Meldung unten (app.js toast), z. B. erreichte Grenze des Plans mit Link „Premium ansehen“ */
.toast {
    position: fixed; z-index: 60; left: 50%; bottom: calc(var(--tabbar-h) + 16px); transform: translateX(-50%);
    display: flex; align-items: flex-start; gap: 8px; width: max-content; max-width: min(460px, calc(100vw - 24px));
    background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-left: 3px solid var(--accent);
    border-radius: var(--radius-l); padding: 8px 6px 8px 12px; font-size: 13px; box-shadow: 0 6px 24px rgb(0 0 0 / .18);
}
.toast p { margin: 4px 0; }
.toast a { font-weight: 600; white-space: nowrap; }
.toast-close { flex: none; width: 26px; height: 26px; font-size: 18px; line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
    .toast { animation: toast-in .22s ease-out; }
    @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
}
.fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fieldset + .fieldset { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.fieldset legend { font-size: 14px; font-weight: 700; padding: 0; margin-bottom: 8px; }

/* ---------- Anmeldung / Einrichtung (im normalen Layout) ---------- */
main.auth-main { max-width: 420px; padding-top: 40px; padding-bottom: 56px; }
.auth-card-wide { max-width: 520px; }
main.auth-main:has(.auth-card-wide) { max-width: 560px; }
.auth-card { width: 100%; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: var(--radius-l); padding: 20px 22px 22px; }
.auth-card h1 { font-size: 20px; }
.auth-card .form { margin-top: 6px; }
.auth-card .sub { margin-bottom: 14px; }
.auth-logo { display: none; }

/* ---------- Fuß ---------- */
.footer { border-top: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 12px; }
.footer-row { display: flex; flex-wrap: wrap; gap: 4px 24px; justify-content: space-between; padding-top: 12px; padding-bottom: 16px; }
.footer b { color: var(--text); }
.footer a { color: var(--text-2); text-decoration: underline; }
.footer-legal { flex: 1 1 100%; max-width: 900px; }
.footer-lang { display: inline-flex; gap: 12px; }
.footer .footer-lang a[aria-current="true"] { color: var(--text); text-decoration: none; font-weight: 600; }
.legal-note-inline { margin: -4px 0 8px; color: var(--text-2); }
.legal { max-width: 78ch; }
.legal h2 { font-size: 15px; margin: 18px 0 6px; }
.legal h2:first-child { margin-top: 0; }
.legal-note { background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); border-radius: var(--radius-m);
    font-size: 12px; padding: 6px 10px; margin: 0 0 12px; }
.footer-legal { line-height: 1.5; }
.legal ul { padding-left: 18px; }
.legal li { margin: 4px 0; }
/* Entwurfs-Markierung (vor dem Online-Gang zu klären): Text in --warn, Kontrast hell/dunkel ≥ 4,5:1 */
.legal-flag { color: var(--warn); font-weight: 700; }
/* Lange Rechtstexte (Datenschutz, Nutzungsbedingungen; 21.10.2026): Inhaltsleiste als Pillen (am Handy wischbar), ruhige Zeilen,
   Sprungziele unter der Kopfleiste, Fristen-Tabelle zweispaltig ohne Umbruchverbot */
.legal p, .legal li { line-height: 1.6; }
.legal h2[id] { scroll-margin-top: 76px; }
.legal-toc { display: flex; gap: 6px; margin: 0 0 14px; padding: 2px 0 6px; overflow-x: auto; scrollbar-width: thin; max-width: 100%; }
@media (min-width: 720px) { .legal-toc { flex-wrap: wrap; overflow: visible; } }
.legal-toc a { flex: none; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text);
    font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .2s, background-color .2s; }
.legal-toc a:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.legal-toc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.legal-table-wrap { max-width: 100%; overflow-x: auto; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 4px 0 12px; }
.legal-table th, .legal-table td { white-space: normal; text-align: left; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.legal-table th { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.legal-table td:last-child { width: 45%; }
.tv-revoke { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0 12px; }
.tv-revoke p { margin: 0; }

/* Signal-Protokoll */
.journal-version { margin-bottom: 12px; }
@media (min-width: 901px) { .journal-version .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Signale: Kennzahlen der offenen Positionen, klappbare Bereiche */
.signals-avg { margin: 12px 0 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.signals-avg strong { font-size: 15px; }
.signals-avg + .disclosure { margin-top: 16px; }
@media (max-width: 600px) { .signals-avg { grid-template-columns: 1fr; } }
.signals-total { margin: 12px 0 4px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.signals-total strong { font-size: 18px; }
@media (max-width: 1100px) { .signals-total { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .signals-total { grid-template-columns: 1fr; } }
.signals-total + .hint { margin: 6px 0 0; }
.signals-avg strong + strong { margin-top: 2px; }
.avg-scope { display: inline-block; min-width: 6.2em; font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }

/* Aktien und Krypto getrennt (Tommy, 09.10.2026): eigene Unterlisten mit eigener Kopfzeile, Krypto mit „nicht belegt“.
   Gilt für Signale (offen/abgeschlossen), Übersicht und Protokoll – nie eine gemischte Ø-Zahl. */
.asset-groups { display: grid; gap: 14px; }
.asset-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.asset-group-head .count { margin-left: 0; }
.asset-group-head .small { font-weight: 400; }
.asset-group-head .help { align-self: center; }
.asset-note { display: inline-block; padding: 0 6px; border: 1px solid var(--warn); border-radius: var(--radius-m); color: var(--warn);
    font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.asset-empty { margin: 0; padding: 8px 10px; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-m); color: var(--text-2); }
.asset-sum { display: inline-block; margin-right: 10px; }
summary .asset-sum:first-of-type { margin-left: 6px; }
.asset-tag { display: inline-block; margin-left: 4px; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: var(--radius-m);
    font-size: 11px; color: var(--text-2); line-height: 15px; }
.journal-group + .journal-group { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.journal-group .asset-group-head { font-size: 13px; }
.journal-total { margin: 10px 0 0; color: var(--text-2); }

/* Befehlspalette */
.palette { width: min(600px, 92vw); border: 1px solid var(--line-strong); border-radius: var(--radius-l); padding: 0; margin-top: 10vh;
    background: var(--surface); color: var(--text); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.palette::backdrop { background: rgba(10, 12, 16, .5); }
.palette input[type="search"] { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 12px 14px; font-size: 16px; outline: none; }
.palette ul { list-style: none; margin: 0; padding: 4px 0; max-height: 360px; overflow: auto; }
.palette li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 14px; cursor: pointer; font-size: 13px; }
.palette li span { color: var(--text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette li.sel, .palette li:hover { background: var(--hover); box-shadow: inset 2px 0 0 var(--accent); }
.palette-hint { margin: 0; padding: 6px 14px; color: var(--text-2); font-size: 11px; border-top: 1px solid var(--line); background: var(--surface-2); }

/* =====================================================================================================
   Übersicht (Startseite im finviz-Muster)
   ===================================================================================================== */
.ov-strip {
    display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin; margin-bottom: 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
}
.ov-tick {
    display: flex; flex-direction: column; gap: 0; padding: 6px 14px; border-right: 1px solid var(--line); color: var(--text);
    font-size: 13px; white-space: nowrap; flex: none; line-height: 1.35;
}
a.ov-tick:hover { background: var(--hover); text-decoration: none; }
a.ov-tick:focus-visible { outline-offset: -2px; }
.ov-tick:last-child { border-right: 0; margin-left: auto; }
.ov-tick-sym { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.ov-tick .num:nth-child(2) { font-weight: 700; }
.ov-breadth { min-width: 180px; }
.breadth-bar { display: block; height: 6px; margin: 4px 0 2px; background: var(--down); border-radius: 1px; overflow: hidden; }
.breadth-bar .up-fill { display: block; height: 100%; background: var(--up); }

.ov-top { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 10px; margin-bottom: 10px; }
.ov-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ov-map { padding-bottom: 6px; }
.ov-map .heatmap { margin: 6px 6px 0; }
/* Marktstimmung „Angst & Gier“ (src/Views/mood_card.php, Tommy 16.10.2026) */
.mood-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mood-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px 4px; min-width: 0; text-align: center; }
.mood-item + .mood-item { border-left: 1px solid var(--line); }
.mood-gauge { width: 120px; max-width: 100%; height: auto; }
.mood-gauge path { fill: none; stroke-width: 9; }
.mood-gauge .mood-x-fear { stroke: var(--down); }
.mood-gauge .mood-fear { stroke: color-mix(in srgb, var(--down) 55%, var(--line)); }
.mood-gauge .mood-neutral { stroke: var(--line); }
.mood-gauge .mood-greed { stroke: color-mix(in srgb, var(--up) 55%, var(--line)); }
.mood-gauge .mood-x-greed { stroke: var(--up); }
.mood-needle { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.mood-hub { fill: var(--text); }
.mood-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mood-title { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.mood-value { font-size: 13px; } .mood-value b { font-size: 20px; margin-right: 2px; }
.mood-cmp, .mood-src { color: var(--text-2); }
.mood-src a { color: inherit; text-decoration: underline; }
.mood-list > .mood-item:only-child { grid-column: 1 / -1; }

/* Breit: Heatmap füllt die ganze Höhe neben der Seitenspalte (Tommy 16.10.2026: unten kein leeres Feld) */
@media (min-width: 1181px) {
    .ov-map { display: flex; flex-direction: column; }
    .ov-map .heatmap { flex: 1 1 auto; height: auto; min-height: 560px; }
    /* Gäste: TradingView-Heatmap ebenso (das Widget füllt 100 % der .tv-frame-Fläche) */
    .ov-map > .tv-embed:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; }
    .ov-map > .tv-embed .tv-frame { flex: 1 1 auto; height: auto; min-height: 560px; }
}
.ov-map .hm-legend { padding: 0 8px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.stat-grid > div { padding: 6px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.stat-grid > div:nth-child(3n) { border-right: 0; }
.stat-grid dt { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-grid dd { margin: 0; font-size: 18px; font-weight: 700; white-space: nowrap; }
.stat-note { margin: 0; padding: 6px 10px; }

.ov-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ov-wide { grid-column: span 2; }
.ov-grid .panel { overflow: hidden; }

/* Dichte Tabellen */
table.dense { font-size: 13px; }
table.dense th, table.dense td { padding: 3px 8px; height: 26px; }
table.dense th { font-size: 10.5px; }
table.dense td.sym a { font-weight: 700; }
table.dense td.name { color: var(--text-2); max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; }
table.dense td.reason { font-size: 12px; color: var(--text-2); }
table.dense .empty { color: var(--text-2); padding: 10px 8px; white-space: normal; }
.chg { display: inline-block; padding: 0 4px; border-radius: 2px; text-align: right; font-weight: 600; }
.chg.up { color: var(--up); background: color-mix(in srgb, var(--up) 10%, transparent); }
.chg.down { color: var(--down); background: color-mix(in srgb, var(--down) 10%, transparent); }

/* Schlagzeilen */
.headlines { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.headlines li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 8px; padding: 4px 10px; border-bottom: 1px solid var(--line); }
.headlines li:nth-child(even) { background: var(--zebra); }
.headlines li:last-child { border-bottom: 0; }
.headlines time { color: var(--text-2); font-size: 12px; }
.headlines a:not(.tag), .headlines .hl-title { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.headlines a:not(.tag):hover { color: var(--accent); }
.headlines .small { grid-column: 2; }
.headlines .tag { font-weight: 700; }

/* Heatmap (Treemap) */
.heatmap { position: relative; height: 560px; overflow: hidden; background: var(--heat-bg); border-radius: 2px; }
.hm-group { position: absolute; }
.hm-group-label {
    position: absolute; left: 0; right: 0; top: 0; height: 15px; padding: 0 4px; font-size: 10px; line-height: 15px; font-weight: 700;
    color: #C9CFDA; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-tile {
    position: absolute; border: 1px solid var(--heat-bg); padding: 0; cursor: pointer; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--tile-text);
    font: inherit; font-size: 11px; line-height: 1.15; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); animation: tileIn .3s both;
}
.hm-tile b { font-size: 12px; } .hm-tile small { font-size: 10px; }
.hm-tile:hover, .hm-tile:focus-visible { z-index: 5; outline: 2px solid #fff; outline-offset: -2px; text-decoration: none; filter: brightness(1.12); }
@keyframes tileIn { from { opacity: 0; } }
.hm-legend { display: flex; align-items: center; gap: 2px; margin-top: 6px; font-size: 11px; color: var(--text-2); flex-wrap: wrap; }
.hm-legend span { margin: 0 4px; }
.hm-legend i { width: 26px; height: 10px; display: inline-block; }
.tip {
    position: fixed; z-index: 50; width: 220px; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong);
    border-radius: var(--radius-l); padding: 8px 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); pointer-events: none; font-size: 12px;
}
.tip-head { display: flex; flex-direction: column; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.tip-head b { font-size: 14px; } .tip-head span { color: var(--text-2); font-size: 11px; }
.tip-row { display: flex; justify-content: space-between; padding: 1px 0; font-variant-numeric: tabular-nums; } .tip-row span { color: var(--text-2); }
.tip-hint { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 11px; }   /* Touch: 2. Tipp öffnet den Chart */

@media (max-width: 1180px) {
    .ov-top { grid-template-columns: minmax(0, 1fr); }
    .ov-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .ov-side { display: flex; }
    .ov-grid { grid-template-columns: 1fr; }
    .ov-wide { grid-column: auto; }
    .heatmap { height: 420px; }
    .ov-tick:last-child { margin-left: 0; }
    table.dense td.name, table.dense th.name { display: none; }
    table.dense td.reason { white-space: normal; }
}

/* =====================================================================================================
   Zeitreise auf der Chart-Seite
   ===================================================================================================== */
.replay-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.replay-layout.on:has(> .why) { grid-template-columns: minmax(0, 1fr) 300px; }   /* Warum-Karte nur für den Admin */
.replay-bar { display: flex; align-items: center; gap: 10px; margin: 8px 6px 2px; flex-wrap: wrap; }
.replay-bar input[type="range"] { flex: 1; min-width: 160px; accent-color: var(--accent); padding: 0; background: none; border: 0; min-height: 0; }
.replay-bar select { width: auto; padding: 3px 8px; font-size: 13px; }
.replay-date { font-weight: 700; min-width: 90px; font-variant-numeric: tabular-nums; }
.why { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; align-self: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.why[hidden] { display: none; }
.why.pop { animation: whyIn .25s var(--ease); }
@keyframes whyIn { from { opacity: .3; transform: translateY(4px); } }
.why-tag { color: var(--accent); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.why h3 { margin: 0; font-size: 15px; }
.why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--line); }
.why li { display: grid; grid-template-columns: 1fr auto; padding: 5px 8px; font-size: 13px; border-bottom: 1px solid var(--line); background: var(--surface); }
.why li:last-child { border-bottom: 0; }
.why li em { grid-column: 1 / -1; font-style: normal; color: var(--text-2); font-size: 11px; }
.why li.ok { box-shadow: inset 3px 0 0 var(--up); } .why li.no { box-shadow: inset 3px 0 0 var(--down); } .why li.info { box-shadow: inset 3px 0 0 var(--accent); }
.why p { margin: 0; }
@media (max-width: 900px) { .replay-layout.on { grid-template-columns: minmax(0, 1fr); } }

/* Indikator-Einstellungen im Chart */
.ind-dialog { width: min(520px, calc(100vw - 32px)); }
.ind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.ind-row { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px; font-size: 13px; min-height: 30px; }
.ind-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.ind-row input[type="number"] { width: 68px; padding: 3px 6px; font-size: 13px; }
.ind-macd { display: flex; gap: 4px; } .ind-macd input[type="number"] { width: 50px; padding: 3px 5px; font-size: 12px; }
@media (max-width: 480px) { .ind-grid { grid-template-columns: 1fr; } }

/* Konfluenz-Engine auf der Chart-Seite */
.engine { margin-top: 20px; }
.engine .section-head h2 { display: flex; align-items: center; gap: 8px; }
.engine-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
.engine-grid .card { padding: 10px 14px; }
.engine-note { grid-column: 1 / -1; margin: 0; }
.score-ring { --s: 0; width: 100px; height: 100px; border-radius: 50%; margin: 4px auto 6px; display: grid; place-content: center; text-align: center;
    background: radial-gradient(closest-side, var(--surface) 80%, transparent 81% 100%), conic-gradient(var(--accent) calc(var(--s) * 1%), var(--surface-2) 0); }
.score-ring strong { font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.engine-score > .small { text-align: center; }
.mtf { display: flex; justify-content: center; gap: 4px; margin: 6px 0 10px; }
.mtf-dot { padding: 1px 8px; border-radius: 2px; font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); }
.mtf-dot.up { background: color-mix(in srgb, var(--up) 12%, transparent); color: var(--up); }
.mtf-dot.down { background: color-mix(in srgb, var(--down) 12%, transparent); color: var(--down); }
.mtf-dot.none { opacity: .5; text-decoration: line-through; }
.components { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.components li { display: grid; grid-template-columns: 110px 1fr; gap: 1px 10px; align-items: center; }
.comp-name { font-size: 13px; font-weight: 600; }
.comp-bar { position: relative; height: 7px; border-radius: 1px; background: var(--surface-2); }
.comp-bar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line-strong); }
.comp-bar i { position: absolute; top: 0; bottom: 0; border-radius: 1px; }
.comp-bar i.pos { background: var(--up); } .comp-bar i.neg { background: var(--down); } .comp-bar i.q { background: var(--accent); }
.comp-notes { grid-column: 2; }
.engine-setup .row { padding: 6px 0; font-size: 13px; }
@media (max-width: 900px) { .engine-grid { grid-template-columns: 1fr; } }

/* „Meine Analyse" – Zeichenleiste */
.draw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 4px 0; }
.draw-title { font-weight: 700; color: var(--text); }
.draw-colors { display: inline-flex; gap: 4px; }
.draw-color { width: 18px; height: 18px; border-radius: 2px; border: 2px solid transparent; padding: 0; cursor: pointer; }
.draw-color.on { border-color: var(--text); }
.draw-bar .check { margin: 0; }

/* Zeitebene: Knopf mit Menü */
.tf-menu { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.tf-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 700; padding: 3px 10px; min-height: 28px;
    border-radius: var(--radius-m); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); cursor: pointer; }
.tf-btn:hover { background: var(--hover); }
.tf-btn span[aria-hidden] { font-size: 10px; color: var(--text-2); }
.tf-list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 180px; padding: 4px 0; display: grid;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-l); box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
.tf-list[hidden] { display: none; }
.tf-group { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); padding: 6px 10px 2px; }
.tf-list button { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: inherit; font-size: 13px;
    padding: 4px 10px; border: 0; background: transparent; color: var(--text); cursor: pointer; text-align: left; }
.tf-list button:hover, .tf-list button:focus-visible { background: var(--hover); }
.tf-list button[aria-pressed="true"] { color: var(--accent); font-weight: 700; }
.tf-list kbd { font: 600 10px var(--font); padding: 0 5px; border-radius: 2px; border: 1px solid var(--line); color: var(--text-2); }
.tf-typed { font-weight: 700; font-size: 13px; padding: 2px 8px; border-radius: var(--radius-m); background: var(--accent); color: var(--accent-text); }

/* Research-Seite (live mitlesen) */
.research-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; margin-top: 12px; }
@media (max-width: 900px) { .research-grid { grid-template-columns: 1fr; } }
.md { padding: 6px 16px 12px; overflow-wrap: anywhere; font-size: 13px; }
.md h2 { font-size: 15px; margin: 16px 0 6px; }
.md h3 { font-size: 14px; margin: 12px 0 4px; text-transform: none; letter-spacing: 0; }
.md h4 { font-size: 13px; margin: 10px 0 4px; }
.md ul, .md ol { padding-left: 18px; margin: 4px 0; }
.md li { margin: 1px 0; }
.md pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 8px 10px; overflow-x: auto; font: 12px/1.45 var(--mono); }
.md code { font-size: 0.92em; }
.md .md-table { font-size: 12px; margin: 6px 0; }
.md .md-table th, .md .md-table td { padding: 3px 6px; text-align: left; }
details.card { margin-top: 12px; }
details.card summary { cursor: pointer; list-style: none; }
details.card summary h3 { display: inline; }
.research-log .log-list { list-style: none; padding: 0; margin: 6px 0; font-size: 13px; }
.research-log .log-list li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.research-live { margin-bottom: 12px; }
.research-plan { margin-bottom: 12px; }
.plan-steps { list-style: none; padding: 0; margin: 6px 0 8px; font-size: 13px; }
.plan-steps li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.plan-steps .plan-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--text-2); flex: none; }
.plan-steps li.is-done .plan-n { border-color: var(--accent); color: var(--accent); }
.plan-steps .plan-title { flex: 1 1 14em; min-width: 0; }
.plan-steps .plan-open { color: var(--text-2); }
.research-exps .exp-summary { display: block; color: var(--text-2); margin-top: 2px; max-width: 70ch; min-width: 16em; white-space: normal; }
.research-exps td:nth-child(2) { white-space: normal; min-width: 14em; }
.research-exps .exp-review { color: var(--text); }
.plan-sub { font-size: 12px; font-weight: 700; margin: 10px 0 2px; color: var(--text-2); }
.plan-extra { list-style: none; padding: 0; margin: 0 0 8px; font-size: 13px; }
.plan-extra > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.plan-extra-id { font-weight: 600; flex: none; }
.plan-extra-text { flex: 1 1 22em; min-width: 0; }
.plan-extra-note { flex-basis: 100%; color: var(--text-2); }
.plan-allowed { flex-basis: 100%; margin: 2px 0 0; padding-left: 18px; color: var(--text); }
.plan-allowed li { padding: 1px 0; }

/* Statusanzeigen neutral (Tommy, 08.10.2026): Rot/Grün bleiben Gewinn/Verlust bzw. Long/Short vorbehalten.
   st-info = blau umrandet (positiv/vorläufig), st-line = grau umrandet (abgeschlossen), st-strong = dunkel umrandet (abgelehnt, Abbruch, Fehler) */
.pill.st-info { color: var(--accent); background: transparent; border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.pill.st-line { color: var(--text-2); background: transparent; border-color: var(--line-strong); }
.pill.st-strong { color: var(--text); background: transparent; border-color: var(--text-2); }
.status-note { border-left: 3px solid var(--text-2); padding: 2px 0 2px 8px; }

/* Kennzahlen-Leiste unter dem Chart einer Aktie (Fundamentaldaten/13F aus SEC EDGAR, nur Information) – finviz-nahe Schnappschuss-Tabelle */
.fund-bar { margin: 12px 0 0; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); container-type: inline-size; overflow: hidden; }
.fund-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 6px 10px;
    border-bottom: 1px solid var(--line); background: var(--surface-2); }
.fund-head h2 { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
/* Rand rechts/unten der letzten Spalte/Zeile liegt außerhalb (overflow: hidden) – keine doppelten Linien */
.fund-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 -1px 0 0; }
.fund-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 5px 10px;
    border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 12px; line-height: 16px; }
.fund-cell dt { color: var(--text-2); min-width: 0; }
.fund-cell dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.fund-cell dd .small { font-weight: 400; color: var(--text-2); }
@container (min-width: 560px) {
    .fund-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fund-cell { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px; }
    .fund-cell dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fund-cell dd { white-space: nowrap; text-align: right; }
}
@container (min-width: 900px) { .fund-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Statusseite: Zusatzdaten für Research – Text darf umbrechen (sonst waagerechtes Scrollen) */
.status-extra td { white-space: normal; vertical-align: top; }
.status-extra td:first-child { min-width: 9em; }
.status-extra td:last-child { min-width: 18em; }
.fund-meta { margin: 0; padding: 6px 10px; font-size: 12px; color: var(--text-2); display: flex; flex-direction: column; gap: 2px; }
.fund-empty { padding: 8px 10px; margin: 0; }
.fund-head h3 { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.fund-bar-embedded { margin: 0; }
@container (min-width: 900px) { .fund-bar-embedded .fund-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Fundamentalanalyse je Aktie (Plan Teil 17): Kurz-Fazit, Balken je Jahr/Quartal, Ampel-Kacheln ----------
   Nur Information. Diagramme als HTML/CSS mit Prozent-Lagen (App\Charts\FundChart), Bedienung fund-profile.js.
   Farben: Umsatz hell, Gewinn kräftig im Akzent, Verlust rot; Linie (Marge/Ausschüttung) neutral (--zone);
   Ampel grün/gelb/rot = --up/--warn/--down, grau = keine Bewertung. Bewegung nur mit Klasse fp-play und ohne reduce. */
.fp { margin-top: 12px; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; container-type: inline-size; min-width: 0; }
.fp-head { display: flex; flex-direction: column; gap: 8px; }
.fp-head h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 6px; }
.fp-sub { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.fp-disclaimer { margin: 0; padding: 6px 10px; font-size: 12.5px; color: var(--text); background: var(--surface-2);
    border: 1px solid var(--line); border-left: 3px solid var(--zone); border-radius: var(--radius-m); }
.fp-restructure { margin: 0; padding: 6px 10px; font-size: 12.5px; color: var(--text); background: var(--surface-2);
    border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--radius-m); }
.fp-empty, .fp-none { margin: 0; color: var(--text-2); }
.fp-none { margin-top: 12px; }
.fp h3 { margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text); }
.fp-h3 { margin-top: 4px !important; }
.fp-intro { margin: -2px 0 0; color: var(--text-2); }
.fp-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container (min-width: 860px) { .fp-top { grid-template-columns: minmax(250px, 1fr) minmax(0, 2.1fr); } }
.fp-summary { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 10px 12px; min-width: 0; }
.fp-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.fp-fact { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; line-height: 1.4; }
.fp-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--text-2); display: inline-block; transform: translateY(-1px); }
.fp-gut .fp-dot { background: var(--up); }
.fp-mittel .fp-dot { background: var(--warn); }
.fp-schwach .fp-dot { background: var(--down); }
.fp-summary-note { margin: 10px 0 0; color: var(--text-2); }

.fp-chartbox { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fp-controls { display: flex; flex-wrap: wrap; gap: 6px 8px; justify-content: space-between; }
.fp-controls .segmented button { font-size: 12.5px; padding: 4px 9px; }
@container (max-width: 520px) {
    .fp-controls .segmented:first-child { display: flex; width: 100%; }
    .fp-controls .segmented:first-child button { flex: 1 1 0; white-space: normal; line-height: 1.25; padding: 4px 6px; }
}
.fp-chart { margin: 0; }
.fp-chart[hidden] { display: none; }
.fp-chart-empty { margin: 24px 0; color: var(--text-2); }
.fp-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; color: var(--text-2); margin: 0 0 6px; }
.fp-key { display: inline-flex; align-items: center; gap: 5px; }
.fp-key i { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); }
.fp-key-rev i { background: color-mix(in srgb, var(--accent) 32%, var(--surface)); }
.fp-key-line i { height: 2px; border-radius: 1px; width: 14px; background: var(--zone); }
.fp-unit { margin-left: auto; }
.fp-plot { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); outline: none; border-radius: var(--radius-m); }
.fp-plot:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.fp-axis { grid-column: 1; grid-row: 1; position: relative; height: 180px; }
.fp-axis span { position: absolute; right: 6px; transform: translateY(50%); font-size: 10.5px; color: var(--text-2); white-space: nowrap;
    font-variant-numeric: tabular-nums; }
.fp-area { grid-column: 2; grid-row: 1; position: relative; height: 180px; margin-bottom: 20px; }
.fp-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.fp-grid.fp-zero { background: var(--line-strong); height: 1px; }
.fp-cols { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; display: flex; }
.fp-col { flex: 1 1 0; position: relative; min-width: 0; cursor: default; }
.fp-col::before { content: ""; position: absolute; inset: 0 1px; border-radius: 2px; background: transparent; transition: background .2s var(--ease); }
.fp-col.is-active::before { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.fp-bars { position: absolute; inset: 0 16%; }
.fp-bar { position: absolute; left: 0; width: 100%; border-radius: 2px 2px 0 0; background: var(--accent); transform-origin: 50% 100%; }
.fp-bars > .fp-bar:first-child:not(:only-child) { width: 47%; }
.fp-bars > .fp-bar:nth-child(2) { left: 53%; width: 47%; }
.fp-bar-rev { background: color-mix(in srgb, var(--accent) 32%, var(--surface)); }
.fp-bar.fp-neg { background: var(--down); border-radius: 0 0 2px 2px; transform-origin: 50% 0; }
.fp-bar.fp-missing { display: none; }
.fp-col.is-active .fp-bar-rev { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.fp-x { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; font-size: 10.5px; color: var(--text-2);
    white-space: nowrap; font-variant-numeric: tabular-nums; }
.fp-col.is-active .fp-x { color: var(--text); font-weight: 600; }
@container (max-width: 520px) {
    .fp-axis, .fp-area { height: 160px; }
    .fp-n12 .fp-col:nth-child(odd) .fp-x, .fp-n11 .fp-col:nth-child(even) .fp-x { visibility: hidden; }
    .fp-n12 .fp-col.is-active .fp-x, .fp-n11 .fp-col.is-active .fp-x { visibility: visible; }
    .fp-plot { grid-template-columns: 50px minmax(0, 1fr); }
    .fp-axis span { font-size: 10px; right: 4px; }
}
.fp-strip { grid-column: 2; grid-row: 2; position: relative; height: 64px; border-top: 1px dashed var(--line); }
.fp-strip-name { grid-column: 1; grid-row: 2; align-self: center; text-align: right; padding-right: 6px; font-size: 10.5px; color: var(--text-2); }
.fp-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fp-line polyline { fill: none; stroke: var(--zone); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fp-pt { position: absolute; width: 0; height: 0; }
.fp-pt i { position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); border: 2px solid var(--zone); box-sizing: border-box; }
.fp-pt b { position: absolute; bottom: 6px; left: 0; transform: translateX(-50%); font-size: 10.5px; font-weight: 600; color: var(--text); white-space: nowrap;
    display: none; font-variant-numeric: tabular-nums; }
.fp-pt.fp-pt-edge b, .fp-pt.is-active b { display: block; }
.fp-pt.is-active i { background: var(--zone); transform: scale(1.3); }
@container (min-width: 700px) { .fp-pt b { display: block; } }
.fp-tip { position: absolute; top: 0; transform: translateX(-50%); z-index: 2; pointer-events: none; max-width: min(300px, 80%);
    background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-m); padding: 6px 8px;
    font-size: 12px; line-height: 1.4; box-shadow: 0 4px 14px rgb(0 0 0 / .12); }
.fp-readout { margin: 0; min-height: 2.8em; color: var(--text-2); }

.fp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px; }
.fp-tile { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 9px 11px 10px; border: 1px solid var(--line);
    border-left: 3px solid var(--text-2); border-radius: var(--radius-l); background: var(--surface); }
.fp-tile.fp-gut { border-left-color: var(--up); }
.fp-tile.fp-mittel { border-left-color: var(--warn); }
.fp-tile.fp-schwach { border-left-color: var(--down); }
.fp-tile-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; }
.fp-tile h4 { margin: 0; font-size: 13px; font-weight: 600; display: flex; align-items: baseline; gap: 4px; }
.fp-light { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--text-2); }
.fp-gut .fp-light { color: var(--up); }
.fp-mittel .fp-light { color: var(--warn); }
.fp-schwach .fp-light { color: var(--down); }
.fp-val { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fp-val .num { font-size: 24px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fp-val .small { color: var(--text-2); }
.fp-cmp { position: relative; height: 6px; margin: 4px 0 2px; border-radius: 3px; background: var(--surface-2); }
.fp-cmp-bar { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--text-2); transform-origin: 0 50%; }
.fp-cmp-bar.fp-cmp-neg { transform-origin: 100% 50%; }
.fp-gut .fp-cmp-bar { background: var(--up); }
.fp-mittel .fp-cmp-bar { background: var(--warn); }
.fp-schwach .fp-cmp-bar { background: var(--down); }
.fp-cmp-zero { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--line-strong); }
.fp-cmp-med { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.fp-med { margin: 0; color: var(--text-2); }
.fp-extra { margin: 0; color: var(--text); font-weight: 600; }
.fp-mean { margin: 2px 0 0; font-size: 13px; line-height: 1.45; }
.fp-rule { margin: 0; color: var(--text-2); font-size: 11.5px; }
.fp-table summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 4px 0; }
.fp-scroll { overflow-x: auto; margin: 6px 0; }
.fp-numbers { width: 100%; }
.fp-numbers caption { text-align: left; font-size: 12px; color: var(--text-2); padding: 2px 0 4px; }
.fp-foot { margin: 0; color: var(--text-2); }
.fp-learn { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--line); }
.fp-learn-t { color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
    .fp-chart.fp-play .fp-bar { animation: fp-grow .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
    .fp-chart.fp-play .fp-line { animation: fp-wipe .7s var(--ease) both; animation-delay: .25s; }
    .fp-chart.fp-play .fp-pt { animation: fp-fade .3s ease-out both; animation-delay: .7s; }
    .fp-tiles.fp-play .fp-cmp-bar { animation: fp-grow-x .6s var(--ease) both; }
    .fp-tip:not([hidden]) { animation: fp-fade .15s ease-out; }
}
@keyframes fp-grow { from { transform: scaleY(0); } }
@keyframes fp-grow-x { from { transform: scaleX(0); } }
@keyframes fp-wipe { from { clip-path: inset(0 100% 0 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes fp-fade { from { opacity: 0; } }

/* Bewegung nur als Reaktion, bei „weniger Bewegung" sofort */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Übersicht: Branchen heute (Balken um die Nulllinie) */
table.sectors td.name { color: var(--text); }
table.sectors td.sector-bar { width: 90px; min-width: 90px; }
table.sectors .bar-track { display: block; }
@media (max-width: 767px) { table.sectors td.name { display: table-cell; } }

/* Fuß immer unten, Anmeldekarte mittig */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.shell { flex: 1 0 auto; width: 100%; }
.shell > main.auth-main { margin: 0 auto; }

/* Übersicht richtet sich nach der Breite des Inhalts (mit Favoriten-Seitenleiste schmaler) */
main#inhalt { container-type: inline-size; }
@container (max-width: 1080px) {
    .ov-top { grid-template-columns: minmax(0, 1fr); }
    .ov-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 700px) {
    .ov-side { display: flex; }
    .ov-grid { grid-template-columns: 1fr; }
    .ov-wide { grid-column: auto; }
}

/* Status-Karte über dem Chart: erklärt in einfachen Worten, was die Strategie zeigt (public/assets/status-card.js) */
.status-card { padding: 10px 12px; margin: 0 0 8px; display: grid; gap: 8px; }
.status-card[hidden] { display: none; }
.status-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status-top .pill { font-size: 13px; padding: 3px 10px; }
.status-text { margin: 0; font-size: 14px; line-height: 1.45; max-width: 70ch; }
.status-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.status-facts > div { display: grid; gap: 1px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--zebra, transparent); }
.status-facts b { font-size: 16px; }
.status-timeline .tl-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.status-timeline .tl-bar i { display: block; height: 100%; background: var(--accent); }
.status-timeline .tl-labels { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; color: var(--text-2); flex-wrap: wrap; }
.status-note, .status-caveat { margin: 0; color: var(--text-2); }
.status-last, .status-ctx, .status-quality { display: grid; gap: 2px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-m); }
.status-card .row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.status-card details { border-top: 1px solid var(--line); padding-top: 6px; }
.status-card summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--accent); }
.status-card details p, .status-card details ul { margin: 6px 0 0; }
.status-card details ul { padding-left: 18px; display: grid; gap: 3px; font-size: 13px; }
.status-warn { color: var(--warn); }
@media (max-width: 560px) {
    .status-facts { grid-template-columns: 1fr 1fr; }
    .status-timeline .tl-labels { font-size: 11px; }
}
@media (max-width: 560px) {
    .status-card { padding: 8px 10px; gap: 6px; }
    .status-text { font-size: 13px; }
    .status-facts { gap: 6px; }
    .status-facts > div { padding: 4px 6px; }
    .status-facts b { font-size: 14px; }
    .status-timeline .tl-labels span:nth-child(2) { order: 3; flex-basis: 100%; text-align: center; }
}

/* ===== TradingView-Widget und Gast-Analyse auf der Chart-Seite (08.10.2026) =====
   Gäste: Kurs im TradingView-Widget (2-Klick), unsere Analyse als Zahlen daneben (Desktop) bzw. darunter (Handy).
   Angemeldet: dieselbe .tv-embed-Fläche hinter dem Umschalter „TradingView-Chart“. */
.tv-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
@media (min-width: 1100px) { .tv-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
.tv-embed { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden;
    display: flex; flex-direction: column; min-height: clamp(380px, 62vh, 620px); }
.tv-embed + .chart-hint, .replay-layout + .tv-embed { margin-top: 0; }
.tv-consent { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    gap: 6px; padding: 28px 18px; background:
        repeating-linear-gradient(0deg, transparent 0 47px, color-mix(in srgb, var(--line) 60%, transparent) 47px 48px), var(--surface); }
.tv-consent-mark { color: var(--accent); margin-bottom: 4px; }
.tv-consent-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.tv-consent-text { margin: 0; max-width: 52ch; color: var(--text-2); line-height: 1.45; }
.tv-consent-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.tv-consent-actions .check { margin: 0; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; }
.tv-consent-sym { margin: 4px 0 0; color: var(--text-2); }
.tv-frame { flex: none; height: clamp(420px, 64vh, 640px); }   /* feste Höhe: das Widget (autosize) braucht eine bestimmte Höhe */
.tv-frame .tradingview-widget-copyright { font-size: 12px; line-height: 32px; text-align: center; }
.tv-frame .tradingview-widget-copyright a { color: var(--text-2); }
.tv-foot { margin: 0; padding: 6px 10px; border-top: 1px solid var(--line); color: var(--text-2); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
[data-tv-toggle][aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

/* Weitere TradingView-Widgets für Gäste (09.10.2026): Ticker Tape, Heatmaps, Hotlists, Screener (src/Views/tv_widget.php).
   Höhe kommt aus .tv-frame (Widgets mit 100 % Höhe brauchen eine feste Fläche); das Ticker Tape bestimmt seine Höhe selbst. */
.tv-embed[data-tv-widget] { min-height: 0; }
/* Das Widget-Dokument von TradingView meldet „light“. Ist das Farbschema des iframes anders („normal“ wird bei dunkler
   Systemeinstellung zu dark), malt Chrome eine deckende weiße Fläche dahinter – echter Fund 09.10.2026: transparentes Ticker
   Tape im Dunkelmodus weiß. Gemessen: nur „light“ hält den Hintergrund durchsichtig; das Widget-Theme kommt aus der Konfiguration. */
.tv-frame iframe { color-scheme: light; }
.tv-w-stock-heatmap .tv-frame, .tv-w-crypto-heatmap .tv-frame { height: 560px; }
.tv-w-stock-heatmap .tv-consent, .tv-w-crypto-heatmap .tv-consent { min-height: 560px; }
.tv-w-hotlists .tv-frame { height: 470px; }
.tv-w-hotlists .tv-consent { min-height: 300px; }
.tv-w-screener .tv-frame { height: 540px; }
.tv-w-screener .tv-consent { min-height: 220px; }
.tv-compact .tv-frame { height: auto; min-height: 46px; }
.tv-compact .tv-frame .tradingview-widget-copyright { line-height: 20px; }
.tv-compact .tv-consent { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: left; gap: 4px 14px;
    padding: 8px 12px; background: var(--surface); }
.tv-compact .tv-consent-title { font-size: 13px; }
.tv-compact .tv-consent-text { flex: 1 1 320px; max-width: none; }
.tv-compact .tv-consent-actions { margin-top: 0; }
.tv-compact .tv-foot { padding: 3px 10px; }
.ov-map .tv-embed { border: 0; border-radius: 0; margin: 6px 6px 0; }
.ov-tv-ticker { margin-bottom: 10px; }
.tv-switch { display: inline-flex; gap: 0; }
.tv-switch button { font: inherit; font-size: 12px; padding: 2px 10px; min-height: 26px; border: 1px solid var(--line); background: var(--surface);
    color: var(--text-2); cursor: pointer; }
.tv-switch button + button { border-left: 0; }
.tv-switch button:first-child { border-radius: var(--radius-m) 0 0 var(--radius-m); }
.tv-switch button:last-child { border-radius: 0 var(--radius-m) var(--radius-m) 0; }
.tv-switch button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.tv-link { white-space: nowrap; position: relative; z-index: 1; }
span.tv-link, .cell-chart { color: var(--accent); }
/* Scanner für Gäste: ohne Kurs/Tag, dafür Hinweis auf den TradingView-Chart */
.list-guest .list-head, .list-guest .list-row { grid-template-columns: minmax(180px, 2.2fr) minmax(160px, 1.8fr) 1fr 1fr 1fr; }
.scanner-tv { margin-top: 12px; }
.scanner-tv .tv-embed { margin-bottom: 4px; }
@media (max-width: 767px) {
    /* Signal-Karten: 4 schmale Spalten – der Link darf umbrechen (echter Fund: lief in „Haltedauer“ hinein) */
    .list-signals .list-row .tv-link { white-space: normal; overflow-wrap: anywhere; }
    .list-guest .list-row { grid-template-columns: 1fr auto; grid-template-areas: "name chart" "score score"; }
    .list-guest .list-row .cell-chart { grid-area: chart; justify-self: end; }
}
.guest-note { margin: 0 0 10px; }
@media (max-width: 767px) {
    .tv-w-stock-heatmap .tv-frame, .tv-w-crypto-heatmap .tv-frame { height: 440px; }
    .tv-w-stock-heatmap .tv-consent, .tv-w-crypto-heatmap .tv-consent { min-height: 360px; }
    .tv-w-screener .tv-frame { height: 480px; }
    .tv-compact .tv-consent { padding: 10px 12px; }
}
.ga-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ga-side .legal-note { margin: 0; line-height: 1.45; }
.ga-side .legal-note strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.ga-card { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.ga-title { font-size: 14px; margin: 0; display: flex; align-items: baseline; gap: 4px; }
.ga-muted { margin: 0; color: var(--text-2); }
table.ga-table { width: 100%; }
table.ga-table th { background: transparent; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; width: 1%; }
table.ga-table td { text-align: right; white-space: normal; }
table.ga-table td.zone { color: var(--zone); font-weight: 600; }
table.ga-table tr:last-child th, table.ga-table tr:last-child td { border-bottom: 0; }
/* Wellenbild der Regel (09.10.2026, src/Charts/WaveSketch.php + src/Views/wave_sketch.php): Skizze ohne Kurskurve und
   ohne Preisachse. Farben nur über diese Klassen – hell/dunkel ohne neues Bild; Ziel grün, Stop rot, Kaufzone neutral. */
.tv-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ws-card { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ws-card.ws-collapsible { margin-top: 12px; }
.ws-card.ws-collapsible > summary { cursor: pointer; list-style: none; }
.ws-card.ws-collapsible > summary::-webkit-details-marker { display: none; }
.ws-card.ws-collapsible > summary::before { content: "▸"; color: var(--text-2); margin-right: 4px; transition: transform .2s var(--ease); display: inline-block; }
.ws-card.ws-collapsible[open] > summary::before { transform: rotate(90deg); }
.ws-stand { font-weight: 400; color: var(--text-2); font-size: 12.5px; }
.ws-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Version 2: volle Kartenbreite, 320 px hoch (Handy 300 px); breite/schmale Anordnung per Container-Abfrage (WaveSketch::VARIANTS) */
.ws-figure { margin: 0; min-width: 0; color: var(--text-2); container: wsfig / inline-size; }
svg.ws { display: block; width: 100%; height: 320px; font-family: var(--font); overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: 4px; font-variant-numeric: tabular-nums; }
.ws .ws-n { display: none; }
/* Buch-Regel: Ziele bis 261,8 % ab Ende Welle 2 → höheres Bild (WaveSketch::H_DESKTOP_BOOK / H_MIN_BOOK) */
svg.ws[data-regel="ebuch"] { height: 400px; }
@container wsfig (max-width: 599.98px) {
    svg.ws { height: 300px; }
    svg.ws[data-regel="ebuch"] { height: 380px; }
    .ws .ws-n { display: inline; }
    .ws .ws-w { display: none; }
}
.ws .ws-grid { stroke: var(--line); stroke-opacity: .7; stroke-width: 1; }
.ws .ws-band { fill: var(--text-2); }
.ws .ws-band-a { fill-opacity: .035; }
.ws .ws-band-b { fill-opacity: .07; }
.ws .ws-band-deep { fill: var(--zone); fill-opacity: .08; }
.ws .ws-zone { fill: var(--fib); fill-opacity: .1; stroke: var(--fib); stroke-width: 1; }   /* Analysten-Look 18.10.2026: Kaufzone als Kasten */
.ws .ws-tp-band { fill: var(--up); fill-opacity: .12; }
.ws .ws-fl { stroke: var(--text-2); stroke-opacity: .45; stroke-width: 1; }
.ws .ws-fl-edge { stroke: var(--text-2); stroke-opacity: .8; }
.ws .ws-fl-zone { stroke: var(--fib); stroke-opacity: 1; stroke-width: 1.2; }
.ws .ws-786 { stroke: var(--chart-inv); stroke-width: 1.2; }
.ws .ws-tp { stroke: var(--chart-tp); stroke-width: 1.2; }
.ws .ws-stop { stroke: var(--chart-inv); }
.ws .ws-stop-init { stroke-opacity: .6; }   /* Anfangsstop: Stop inzwischen nachgezogen (Zahl nie im Bild) */
.ws .ws-fib-l { fill: var(--text-2); font-size: 12px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.ws .ws-fib-l-zone { fill: var(--fib); font-weight: 600; }
.ws .ws-fib-l-786 { fill: var(--chart-inv); font-weight: 600; }
.ws .ws-fib-l-tp { fill: var(--chart-tp); font-weight: 600; }
.ws .ws-fib-l-sub { font-size: 10.5px; font-weight: 400; }
.ws .ws-pill { fill: var(--surface); fill-opacity: .92; stroke: var(--line-strong); stroke-opacity: 1; }
.ws .ws-status { fill: var(--text); font-weight: 600; font-size: 13px; }
.ws .ws-st-ok { fill: var(--up); }
.ws .ws-st-zone { fill: var(--zone); }
.ws .ws-st-muted { fill: var(--text-2); }
.ws .ws-line { stroke: var(--accent); stroke-width: 1.6; }
.ws .ws-line-open { stroke-opacity: .85; }
.ws .ws-proj { stroke: var(--up); stroke-width: 1.8; }
.ws .ws-arrow { fill: var(--up); }
.ws .ws-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.ws .ws-dot-open { stroke-dasharray: 2 2; }
.ws .ws-num-bg { fill: var(--surface); stroke: var(--accent); stroke-width: 1.2; }   /* kleine Kreise mit Rand (Analysten-Look) */
.ws .ws-wave { fill: var(--accent); font-weight: 700; font-size: 11px; }
.ws .ws-num-open .ws-num-bg { fill: var(--surface); stroke: var(--up); stroke-width: 1.5; }
.ws .ws-num-open .ws-wave { fill: var(--up); }
.ws .ws-now { fill: var(--text-2); font-size: 12px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.ws .ws-entry { stroke: var(--up); stroke-opacity: .7; }
.ws .ws-entry-mark { fill: var(--up); }
.ws .ws-axis { stroke: var(--line-strong); }
.ws .ws-date { fill: var(--text-2); font-size: 12px; }
.ws .ws-date-entry { fill: var(--up); font-weight: 600; }
.ws .ws-flag-t { font-size: 12px; font-weight: 600; fill: #fff; }
.ws .ws-flag-tp .ws-flag-bg { fill: var(--up); }
.ws .ws-flag-zone .ws-flag-bg { fill: var(--zone); }
.ws .ws-flag-stop .ws-flag-bg { fill: var(--down); }
.ws .ws-flag-stop-init .ws-flag-bg { fill: var(--surface); stroke: var(--down); stroke-width: 1.2; stroke-dasharray: 4 3; }
.ws .ws-flag-stop-init .ws-flag-t { fill: var(--down); }
.ws .ws-flag-786 .ws-flag-bg { fill: var(--surface); stroke: var(--zone); stroke-width: 1.2; }
.ws .ws-flag-786 .ws-flag-t { fill: var(--zone); }
.ws .ws-flag-lead { stroke: var(--line-strong); stroke-width: 1; }
:root[data-theme="dark"] .ws .ws-flag-t:not(.ws-flag-786 *, .ws-flag-stop-init *) { fill: var(--surface); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ws .ws-flag-t:not(.ws-flag-786 *, .ws-flag-stop-init *) { fill: var(--surface); }
}
.ws-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--text-2); }
.ws-legend li { display: inline-flex; gap: 6px; align-items: center; line-height: 1.4; }
.ws-legend .num { color: var(--text); white-space: nowrap; }
.ws-key { display: inline-block; flex: none; width: 18px; height: 10px; border-radius: 2px; }
.ws-key-line { height: 0; border-top: 1.6px solid var(--accent); border-radius: 0; }
.ws-key-zone { background: color-mix(in srgb, var(--fib) 12%, transparent); border: 1px solid var(--fib); }
.ws-key-786 { height: 0; border-top: 2px dashed var(--chart-inv); border-radius: 0; }
.ws-key-stop { height: 0; border-top: 2px solid var(--chart-inv); border-radius: 0; }
.ws-key-stop-init { border-top-style: dashed; opacity: .75; }
.ws-key-tp { height: 0; border-top: 2px solid var(--chart-tp); border-radius: 0; }
.ws-key-entry { width: 18px; height: auto; color: var(--up); font-size: 10px; line-height: 1; text-align: center; }
.ws-note { margin: 0; line-height: 1.45; }
.ws-howto { border-top: 1px solid var(--line); padding-top: 6px; }
.ws-howto > summary { list-style: revert; display: list-item; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); padding: 4px 0; }
.ws-howto > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.ws-howto ol { margin: 6px 0 4px; padding-left: 20px; display: grid; gap: 4px; line-height: 1.45; }
.ws-howto p { margin: 0; }
/* Analysebild mit Kerzen (10.10.2026, src/Charts/WaveChart.php): statisches SVG im Stil eines TradingView-Charts.
   Mindestens 640 px breit; schmaler waagerecht verschiebbar, Start rechts bei „heute“ (direction: rtl nur am Behälter). */
.wc-scroll { overflow-x: auto; overflow-y: hidden; direction: rtl; border: 1px solid var(--line); border-radius: 4px;
    background: var(--surface); overscroll-behavior-x: contain; }
.wc-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
svg.wc { direction: ltr; display: block; width: 100%; min-width: 640px; height: 460px; font-family: var(--font);
    font-variant-numeric: tabular-nums; color: var(--text-2); overflow: hidden; }
/* Analysten-Look (Tommy, 18.10.2026 – wie das X-Chartbild, bin/x-chart.mjs): ruhiger Grund (dunkel fast schwarz), feines Raster, Kerzen
   in Chartprogramm-Farben, Elliott-Zählung als dünne goldene Linie mit kleinen Kreisen, Fibonacci nur als kurze orange Linien mit
   „61.80% (Wert)“, Kaufzone als schmaler Kasten, Ziele kurz grün, Ungültig rot gestrichelt, Prognose durchgezogen. Farben: --chart-*. */
svg.wc { background: var(--chart-bg); }
.wc-scroll { background: var(--chart-bg); }
.wc .wc-grid { stroke: var(--chart-grid); stroke-width: 1; }
.wc .wc-up { color: var(--candle-up); }
.wc .wc-dn { color: var(--candle-down); }
.wc .wc-head { fill: var(--text-2); font-size: 11.5px; }
.wc .wc-sym { fill: var(--text); font-weight: 700; }
.wc .wc-status { fill: var(--text); font-size: 12px; font-weight: 500; }
.wc .wc-st-ok { fill: var(--chart-tp); }
.wc .wc-st-zone { fill: var(--fib); }
.wc .wc-st-muted { fill: var(--text-2); }
.wc .wc-zone { fill: var(--fib); fill-opacity: .1; stroke: var(--fib); stroke-width: 1; }
.wc .wc-fl { stroke-width: 1.3; }
.wc .wc-fl-zone { stroke: var(--fib); }
.wc .wc-fl-inv { stroke: var(--chart-inv); stroke-width: 1.2; }
.wc .wc-fl-tp { stroke: var(--chart-tp); stroke-width: 1.3; }
.wc .wc-stop { stroke: var(--chart-inv); }
.wc .wc-stop-init { stroke-opacity: .65; }
.wc .wc-entry { stroke: var(--text); stroke-opacity: .7; }
.wc .wc-last { stroke-width: 1; }
.wc .wc-wave { stroke: var(--accent); stroke-width: 1.6; }
.wc .wc-wave-open { stroke-opacity: .85; }
.wc .wc-proj { stroke: var(--chart-tp); stroke-width: 1.6; }
.wc .wc-proj-dot { fill: var(--chart-tp); }
.wc .wc-buy { fill: var(--chart-tp); }
.wc .wc-buy-t { fill: var(--chart-tp); font-weight: 600; paint-order: stroke; stroke: var(--chart-bg); stroke-width: 3px; stroke-linejoin: round; }
/* Punkte der Regel (Start, Hoch, Tief Rücklauf, mögliches Ziel): kleine umrandete Pillen statt gefüllter Flächen */
.wc .wc-num-bg { fill: var(--chart-bg); stroke: var(--accent); stroke-width: 1.2; }
.wc .wc-num-t { fill: var(--accent); font-weight: 600; font-size: 10.5px; }
.wc .wc-num-open .wc-num-bg { fill: var(--chart-bg); stroke: var(--chart-tp); }
.wc .wc-num-open .wc-num-t { fill: var(--chart-tp); }
.wc .wc-lv { fill: var(--text-2); font-size: 10.5px; paint-order: stroke; stroke: var(--chart-bg); stroke-width: 3px; stroke-linejoin: round; }
.wc .wc-lv-zone { fill: var(--fib); }
.wc .wc-lv-inv, .wc .wc-lv-stop { fill: var(--chart-inv); }
.wc .wc-lv-tp { fill: var(--chart-tp); }
.wc .wc-lv-entry { fill: var(--text); font-weight: 600; }
.wc .wc-axis-bg { fill: var(--chart-bg); }
.wc .wc-axis-line { stroke: var(--line-strong); }
.wc .wc-tick, .wc .wc-time { fill: var(--text-2); }
.wc .wc-time-y { fill: var(--text); font-weight: 600; }
.wc .wc-foot { fill: var(--text-2); font-size: 10.5px; }
.wc .wc-tag text { fill: #fff; font-weight: 600; }
.wc .wc-tag-stop rect { fill: var(--chart-inv); }
.wc .wc-tag-entry rect { fill: var(--text); }
.wc .wc-tag-last rect { fill: var(--text); }
.wc .wc-tag-last rect.wc-tag-up { fill: var(--chart-tp); }
.wc .wc-tag-last rect.wc-tag-dn { fill: var(--chart-inv); }
:root[data-theme="dark"] .wc .wc-tag text { fill: var(--chart-bg); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wc .wc-tag text { fill: var(--chart-bg); }
}
.ws-key-candles { display: inline-flex; gap: 3px; width: 18px; height: 12px; align-items: stretch; }
.ws-key-candles i { flex: 1; border-radius: 1px; }
.ws-key-candles .wc-k-up { background: var(--up); margin: 2px 0 0; }
.ws-key-candles .wc-k-dn { background: var(--down); margin: 0 0 3px; }
/* Elliott-Zählung im Analysebild (WaveChart::patternLayer), Analysten-Look 18.10.2026: dünne goldene Linie, Name klein im Kreis,
   Zusatz („läuft“, „fertig“) klein und grau, Ungültig-Marke rot gestrichelt; Unterwellen und „davor“ blass */
.wc .wc-pat-line { stroke: var(--count); stroke-width: 1.6; }
.wc .wc-pat-c { fill: var(--chart-bg); stroke: var(--count); stroke-width: 1.2; }
.wc .wc-pat-l { fill: var(--count); font-weight: 700; font-size: 10.5px; }
.wc .wc-pat-zs { fill: var(--text-2); font-size: 9.5px; paint-order: stroke; stroke: var(--chart-bg); stroke-width: 3px; stroke-linejoin: round; }
.wc .wc-pat-inv { stroke: var(--chart-inv); stroke-width: 1.2; }
.wc .wc-pat-it { fill: var(--chart-inv); font-size: 10.5px; paint-order: stroke; stroke: var(--chart-bg); stroke-width: 3px; stroke-linejoin: round; }
.wc .wc-pat-open { fill: var(--chart-bg); stroke: var(--count); }
.wc .wc-pat-open-l { stroke-opacity: .6; }
.wc .wc-pat-lead { stroke: var(--count); stroke-opacity: .45; stroke-width: .8; }
.wc .wc-pat-guide { stroke: var(--text-2); stroke-opacity: .45; }
.wc .wc-pat-sub { stroke: var(--text-2); stroke-opacity: .4; }
.wc .wc-pat-sl { fill: var(--text-2); font-size: 9.5px; paint-order: stroke; stroke: var(--chart-bg); stroke-width: 2.5px; stroke-linejoin: round; }
.wc .wc-pat-dline { stroke: var(--text-2); stroke-opacity: .35; }
.wc .wc-pat-dl { fill: var(--text-2); font-size: 10px; paint-order: stroke; stroke: var(--chart-bg); stroke-width: 2.5px; stroke-linejoin: round; }
.ws-key-pat { display: inline-block; width: 18px; height: 0; border-top: 1.6px solid var(--count); vertical-align: middle; }
.wc-pat-text { margin: 0; display: grid; gap: 2px; line-height: 1.45; }
.wc-pat-text p { margin: 0; }
.wc-pat-text .wc-pat-hint { color: var(--text-2); }
/* Rückfall-Zählung (Plan Stufe 2, PatternFallback): Linie durchgehend gestrichelt (stroke-dasharray im Bild) und blasser, Etikett als Pille mit
   gestricheltem Rahmen – Kennzeichnung über Text und Strichform, nicht nur über Farbe */
.wc .wc-pat-q .wc-pat-line { stroke-opacity: .78; }
.wc .wc-pat-q .wc-pat-c { stroke-dasharray: 2 2; }
.wc .wc-q-bg { fill: var(--warn); stroke: var(--warn); }
.wc .wc-q-t { fill: var(--text); font-size: 11px; font-weight: 600; }
.ws-key-pat-q { border-top-style: dashed; }
.wc-pat-text .wc-pat-q { color: var(--text); }
.wc-pat-q-tag, .sc-q-tag { display: inline-block; margin-right: 4px; padding: 0 7px; border: 1px dashed var(--warn); border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 17px; color: var(--warn); white-space: nowrap; }
/* Fibonacci-Zielzonen der Zählung (Plan Stufe 2, nur Konto-Fassung): Farbe der Fibonacci-Stufen (--fib), nicht Grün/Rot; häufigste Zone als
   Band, erreichte Stufen blass mit ✓, nächste Stufe kräftig mit ▸, möglicher Weg gestrichelt */
.wc .wc-mz-zone { fill: var(--fib); stroke: var(--fib); stroke-opacity: .55; }
.wc .wc-mz-l { stroke: var(--fib); stroke-width: 1.1; stroke-opacity: .8; }
.wc .wc-mz-often { stroke-width: 1.4; stroke-opacity: 1; }
.wc .wc-mz-hit { stroke-opacity: .4; }
.wc .wc-mz-next { stroke: var(--text); stroke-width: 1.6; stroke-opacity: 1; }
.wc .wc-mz-proj { stroke: var(--fib); stroke-opacity: .85; }
.wc .wc-mz-dot { fill: var(--fib); }
.wc .wc-mz-t { fill: var(--fib); font-size: 10.5px; paint-order: stroke; stroke: var(--chart-bg); stroke-width: 3px; stroke-linejoin: round; }
.wc .wc-mz-t-often { font-weight: 600; }
.wc .wc-mz-t-hit { fill: var(--text-2); font-weight: 400; }
.wc .wc-mz-t-next { fill: var(--text); font-weight: 700; }
.wc .wc-mz-t-out { fill: var(--text-2); }
.wc .wc-mz-head, .wc .wc-ziel-lock { fill: var(--text-2); font-size: 11.5px; font-weight: 500; }
.ws-key-mz { display: inline-block; width: 18px; height: 8px; border-top: 1.4px solid var(--fib); border-bottom: 1.1px dashed var(--fib);
    background: color-mix(in srgb, var(--fib) 14%, transparent); vertical-align: middle; }
/* Zeiteinheit 1W/1D/4H/1H (Plan Teil 16, src/Views/wave_tf_switch.php, wave_frames.php, public/assets/wave-tf.js) */
.wf-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.wf-switch[hidden] { display: none; }
.wf-switch-label { color: var(--text-2); }
.wf-switch .segmented button { min-width: 44px; min-height: 30px; font-variant-numeric: tabular-nums; }
.wf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; min-width: 0; }
.wf-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wf-panel[hidden] { display: none; }
.wf-panel:not([hidden]) { animation: wf-in .22s var(--ease); }
@keyframes wf-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.ws-stand-line { margin: 0; color: var(--text-2); }
.ws-stand-line b { color: var(--text); font-weight: 600; }
.wf-empty { margin: 0; padding: 14px 12px; border: 1px dashed var(--line-strong); border-radius: 4px; color: var(--text-2); line-height: 1.45; max-width: 80ch; }
@media (prefers-reduced-motion: reduce) {
    .wf-panel:not([hidden]) { animation: none; }
}
/* Szenario-Karte (src/Views/scenario_card.php, App\Charts\WaveScenarios, 13.10.2026): Wenn-dann-Sätze je Zeiteinheit, Gewichtung nur in Worten.
   Punkte = erfüllte Richtlinien (bauen sich beim Umschalten auf), neutral gefärbt – Grün/Rot bleiben für Gewinn/Verlust. */
.sc-card { margin-top: 12px; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; container: sc / inline-size; min-width: 0; }
.sc-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sc-panel[hidden] { display: none; }
.sc-panel:not([hidden]) { animation: wf-in .22s var(--ease); }
.sc-stand { margin: 0; color: var(--text-2); }
.sc-stand b { color: var(--text); font-weight: 600; }
.sc-weight { margin: 0; font-size: 13px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.sc-weight-k { display: inline-block; margin-right: 6px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 3px; font-size: 10.5px;
    font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); vertical-align: 1px; }
.sc-note { margin: -3px 0 0; color: var(--text-2); }
.sc-empty { margin: 0; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 4px; color: var(--text-2); line-height: 1.45; max-width: 80ch; }
.sc-moved { margin: 0; color: var(--warn); }
.sc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@container sc (min-width: 620px) { .sc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sc-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 8px 10px 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.sc-main { border-left: 3px solid var(--accent); }
.sc-alt { background: var(--surface-2); }
.sc-item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.card h3.sc-role { display: block; margin: 0; font-size: 11.5px; }
.sc-rel { padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 3px; font-size: 11px; font-weight: 700; line-height: 17px; color: var(--text-2); white-space: nowrap; }
.sc-rel-more { color: var(--accent); border-color: currentColor; }
.sc-score { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.sc-dots { display: inline-flex; gap: 3px; }
.sc-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.sc-dot.on { background: var(--zone); box-shadow: none; }
.sc-main .sc-dot.on { background: var(--accent); }
.sc-panel:not([hidden]) .sc-dot.on { animation: sc-dot .26s var(--ease) both; }
.sc-dot:nth-child(2) { animation-delay: 35ms; } .sc-dot:nth-child(3) { animation-delay: 70ms; } .sc-dot:nth-child(4) { animation-delay: 105ms; }
.sc-dot:nth-child(5) { animation-delay: 140ms; } .sc-dot:nth-child(6) { animation-delay: 175ms; } .sc-dot:nth-child(n+7) { animation-delay: 210ms; }
@keyframes sc-dot { from { transform: scale(0); } to { transform: none; } }
.sc-text { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.sc-dir { display: inline-block; width: 1.15em; color: var(--text-2); font-weight: 700; }
.sc-inv { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.sc-none .sc-text { color: var(--text-2); }
/* Plan Stufe 2: Rückfall-Kennzeichnung und Fibonacci-Zielzonen in der Szenario-Karte */
.sc-q { margin: 0; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; max-width: 90ch; }
.sc-mz { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 9px 11px 10px; border: 1px dashed color-mix(in srgb, var(--fib) 55%, var(--line));
    border-radius: var(--radius-m, 8px); background: color-mix(in srgb, var(--fib) 5%, var(--surface)); }
.card h3.sc-mz-h { display: block; margin: 0; font-size: 12.5px; }
.sc-mz-m, .sc-mz-state { margin: 0; color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.sc-mz-zone { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sc-mz-levels { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.sc-mz-lv { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: 999px;
    font-size: 12px; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-mz-lv.is-often { border-color: color-mix(in srgb, var(--fib) 70%, transparent); }
.sc-mz-lv.is-hit { color: var(--text-2); border-style: dashed; }
.sc-mz-lv.is-next { border-color: var(--text); font-weight: 700; }
.sc-mz-badge { font-size: 10.5px; font-weight: 600; color: var(--text-2); }
.sc-mz-badge-often { color: var(--fib); }
.sc-mz-note { margin: 2px 0 0; color: var(--text-2); }
.sc-mz-lock { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--text-2); line-height: 1.45; }
.sc-panel:not([hidden]) .sc-mz { animation: wf-in .26s var(--ease) both; animation-delay: 60ms; }
@media (max-width: 420px) { .sc-mz-lv { white-space: normal; } }
@media (prefers-reduced-motion: reduce) {
    .sc-panel:not([hidden]), .sc-panel:not([hidden]) .sc-dot.on, .sc-panel:not([hidden]) .sc-mz { animation: none; }
}
@media (max-width: 767px) {
    .tv-embed { min-height: 420px; }
    .tv-frame { height: 440px; }
    .tv-consent { padding: 22px 14px; }
    table.ga-trades .ga-why { display: none; }   /* Handy: Grund weglassen, Kurse und Ergebnis bleiben */
    table.ga-trades th, table.ga-trades td { padding-left: 5px; padding-right: 5px; }
}

/* =====================================================================================================
   Für Anfänger (Paket A, Wunsch Tommy 08.10.2026): Erklär-Fragezeichen ⓘ, „So liest du dieses Signal“,
   Einstieg auf der Übersicht, Legende der Zonen-Leiste. Texte: src/Support/Glossary.php, SignalExplainer;
   Bedienung: public/assets/help.js. Blasen sind position: fixed (werden von overflow: hidden nicht abgeschnitten).
   ===================================================================================================== */
.help { display: inline; white-space: nowrap; }
/* Überschrift mit ⓘ daneben statt darin (SEO 23.10.2026: Erklärtext gehört nicht in h2/h3) – sieht aus wie vorher */
.hh { display: flex; align-items: center; gap: 4px; }
.hh-b { align-items: baseline; }
.hh > :is(h2, h3, h4) { min-width: 0; }
.help-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
    margin: 0 0 0 2px; padding: 0; vertical-align: -2px; border: 1px solid var(--text-2); border-radius: 50%;
    background: transparent; color: var(--text-2); font: italic 700 10px/1 Georgia, "Times New Roman", serif;
    text-transform: none; letter-spacing: 0; cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.help-btn::after { content: ""; position: absolute; inset: -5px; }   /* Trefferfläche ≥ 24 px */
.help-btn:hover { color: var(--accent); border-color: var(--accent); }
.help-btn[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.help-pop {
    position: fixed; z-index: 60; left: 8px; top: 8px; width: min(320px, calc(100vw - 16px));
    display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 11px;
    background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-l);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    font: 400 13px/1.45 var(--font); text-transform: none; letter-spacing: normal; text-align: left; white-space: normal;
    animation: helpIn .18s var(--ease);
}
@keyframes helpIn { from { opacity: 0; transform: translateY(4px); } }
.help-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.help-title { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--text); }
.help-close {
    flex: none; width: 24px; height: 24px; margin: -4px -6px 0 0; padding: 0; border: 0; border-radius: var(--radius-m);
    background: transparent; color: var(--text-2); font: 400 18px/1 var(--font); cursor: pointer;
}
.help-close:hover { background: var(--hover); color: var(--text); }
.help-text, .help-example, .help-more { display: block; }
.help-example { font-size: 12.5px; color: var(--text); background: var(--surface-2); border-left: 2px solid var(--zone); padding: 4px 8px; border-radius: 0 var(--radius-m) var(--radius-m) 0; }
.help-label { font-weight: 600; color: var(--text-2); }
.help-more { font-size: 12.5px; font-weight: 600; }
@media (max-width: 599px) {
    /* Handy: Blatt am unteren Rand (über der Tab-Leiste), volle Breite */
    .help-pop {
        left: 0 !important; right: 0; top: auto !important; bottom: var(--tabbar-h); width: auto; max-height: 70vh; overflow-y: auto;
        padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 10px 10px 0 0; border-width: 1px 0 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .28); font-size: 14px; animation-name: helpSheetIn;
    }
    .help-title { font-size: 15px; }
    .help-close { width: 32px; height: 32px; }
}
@keyframes helpSheetIn { from { transform: translateY(16px); opacity: 0; } }
/* Kennzahlen der Übersicht: ⓘ in der rechten oberen Ecke der Zelle, Beschriftung bleibt einzeilig (kein Umbruch in
   schmalen Zellen; liegt außerhalb von overflow: hidden der Beschriftung, weil die Zelle der Bezugsrahmen ist) */
.stat-grid > div:has(> dt .help) { position: relative; }
.stat-grid dt .help { position: absolute; right: 6px; bottom: 9px; }   /* neben der (kurzen) Zahl, nie über der Beschriftung */
.stat-grid dt .help-btn { margin: 0; vertical-align: top; }
.panel-head h2 + .help { margin-right: auto; }

/* =====================================================================================================
   Startseite: Hero (Tommy, 09.10.2026 – „Aushängeschild“), src/Views/overview_hero.php + public/assets/home-tour.js.
   Links Aussage und Knöpfe, rechts „Setup des Tages“ mit Wellenbild; darunter Marktpuls und „Mitmachen“.
   Wow über Daten statt Deko: Wellenlinie zeichnet sich einmal nach, Kennzahlen zählen hoch, die Tour hebt Teile des
   Bilds hervor. Keine Verläufe, keine Dauerbewegung; Grün/Rot nur für Ziel/Stop. Ersetzt die Einklapp-Box .ov-intro.
   ===================================================================================================== */
.hero {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 10px; padding: 20px 16px 16px;
    background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: var(--radius-l);
}
.hero-intro { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hero-eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.hero-title {
    margin: 0; font-size: clamp(25px, 1.6vw + 16px, 40px); font-weight: 750; line-height: 1.12; letter-spacing: -0.025em;
    text-wrap: balance; color: var(--text);
}
.hero-title em { font-style: normal; box-shadow: inset 0 -0.2em color-mix(in srgb, var(--brand) 55%, transparent); }
.hero-sub { margin: 0; max-width: 56ch; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button-lg { min-height: 40px; padding: 8px 18px; font-size: 14px; }
.hero-proof { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-2); }
.hero-proof li { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero-legal { margin: 0; max-width: 62ch; }

/* Karte „Setup des Tages“ */
.hero-card {
    container: hc / inline-size; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 12px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-l); background: var(--surface);
}
.hc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 16px; }
.hc-kicker {
    flex: 1 0 100%; margin: 0; display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
}
.hc-live { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
.hc-stand { font-weight: 400; letter-spacing: .02em; text-transform: none; }
.hc-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.hc-sym { margin: 0; font-size: 26px; font-weight: 750; line-height: 1.1; letter-spacing: -0.01em; }
.hc-sym a { color: var(--text); }
.hc-sym a:hover { color: var(--accent); text-decoration: none; }
.hc-name { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--text-2); }
.hc-pill { align-self: center; font-size: 12px; line-height: 20px; padding: 0 8px; }
.hc-rate { display: grid; justify-items: end; line-height: 1.15; }
.hc-rate-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.hc-rate-num { font-size: 26px; font-weight: 750; }
.hc-rate-sub { font-size: 12px; color: var(--text-2); }
.hc-figure svg.ws { border-color: var(--line); }

.hc-kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: var(--radius-m); }
.hc-kv > div { min-width: 0; padding: 6px 10px 7px; border-right: 1px solid var(--line); transition: background .25s var(--ease); }
.hc-kv > div:last-child { border-right: 0; }
.hc-kv dt { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.hc-kv dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
.hc-kv-zone dd { color: var(--zone); }
.hc-kv-stop dd { color: var(--down); }
.hc-kv-tp dd { color: var(--up); }
.hc-kv > div.is-focus { background: var(--hover); }
.hc-why { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.hc-basis { margin: -4px 0 0; color: var(--text-2); }
.hc-why b { color: var(--text); }
.hc-foot { margin: 0; }
.hc-foot a { font-weight: 600; white-space: nowrap; }

/* Tour (ohne JS: 3 Schritte nebeneinander als Liste) */
.tour { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.tour[data-tour-state="closed"] { display: none; }
.tour-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.tour-dots { display: flex; gap: 4px; }
.tour-dots i { width: 20px; height: 3px; border-radius: 2px; background: var(--line-strong); transition: background .25s var(--ease); }
.tour-dots i.on { background: var(--accent); }
.hero-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hero-steps li {
    counter-increment: step; position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0;
    padding: 8px 10px 9px 38px; border: 1px solid var(--line); border-radius: var(--radius-m);
}
.hero-steps li::before {
    content: counter(step); position: absolute; left: 10px; top: 8px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent); color: var(--accent-text); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.hero-steps b { font-size: 13.5px; }
.hero-steps li > span { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.tour-ready .hero-steps { grid-template-columns: minmax(0, 1fr); }
.tour-ready .hero-steps li { padding: 0 0 0 34px; border: 0; animation: tourIn .25s var(--ease); }
.tour-ready .hero-steps li::before { left: 0; top: 0; }
.tour-ready .hero-steps b { font-size: 15px; }
.tour-ready .hero-steps li > span { font-size: 13.5px; color: var(--text); }
.tour-title:focus { outline: none; }
.tour-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
@keyframes tourIn { from { opacity: 0; transform: translateX(6px); } }
.tour-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tour-skip {
    margin-left: auto; min-height: 30px; padding: 4px 6px; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 13px; color: var(--text-2); text-decoration: underline;
}
.tour-skip:hover { color: var(--text); }
.tour-end { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tour-signup, .join-signup { height: 30px; }

/* Hervorhebung im Wellenbild je Schritt (Gruppen und Fahnen aus App\Charts\WaveSketch::svg) */
.hc-figure .ws-v > * { transition: opacity .25s var(--ease); }
.hc-figure[data-tour-focus] .ws-v > :not(.ws-pill, .ws-st, .ws-status) { opacity: .16; }
.hc-figure[data-tour-focus="trend"] .ws-v > :is(.ws-line, .ws-dot, .ws-now, .ws-fl-edge, .ws-axis, .ws-date, svg:has(> .ws-num)) { opacity: 1; }
.hc-figure[data-tour-focus="zone"] .ws-v > :is(.ws-zone, .ws-fl-zone, .ws-786, .ws-fib-l-zone, .ws-fib-l-786, .ws-flag-zone, .ws-flag-786, .ws-line, .ws-dot, svg:has(> .ws-num)) { opacity: 1; }
.hc-figure[data-tour-focus="zone"] .ws-zone { fill-opacity: .42; }
.hc-figure[data-tour-focus="risk"] .ws-v > :is(.ws-stop, .ws-tp, .ws-tp-band, .ws-fib-l-tp, .ws-flag-stop, .ws-flag-tp, .ws-proj, .ws-pj, .ws-pj-dot, .ws-pj-lab, .ws-pj-area, .ws-pj-now) { opacity: 1; }

/* Mögliches Szenario 3-4-5 mit Unterwellen im Hero (WaveSketch::projectionLayer, 16.10.2026): gestrichelt und neutral in der Akzentfarbe
   (kein Grün – es ist kein Ergebnis), ohne Werte und Daten; Fläche ab „heute“ = Zukunft. Ohne .ws-play steht das fertige Bild. */
.ws .ws-pj-area { fill: var(--text-2); fill-opacity: .05; }
.ws .ws-pj-now { stroke: var(--line-strong); stroke-width: 1; }
.ws .ws-pj-seg { stroke: var(--chart-tp); stroke-width: 1.8; }   /* Analysten-Look 18.10.2026: durchgezogen, nur Hauptwellen */
.ws .ws-pj-dot { fill: var(--chart-tp); }
.ws .ws-pj-wave { fill: var(--chart-tp); font-weight: 600; font-size: 11.5px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.ws .ws-pj-axis { fill: var(--text-2); font-style: italic; }
.ws .ws-pj-1 { --pj-n: 0; }
.ws .ws-pj-2 { --pj-n: 1; }
.ws .ws-pj-3 { --pj-n: 2; }
/* Abspielen (home-tour.js setzt .ws-play nach dem Sichtbarwerden): erst der echte Verlauf, dann Welle für Welle das Szenario,
   jede Gruppe (Hauptwelle mit ihren Unterwellen) deckt sich von links auf, die Nummer erscheint, wenn sie fertig ist */
.hc-figure { --pj-start: 1000ms; --pj-step: 620ms; }
.hc-figure.ws-play .ws-pj { animation: wsPjDraw var(--pj-step) cubic-bezier(.4, 0, .6, 1) both; animation-delay: calc(var(--pj-start) + var(--pj-n) * var(--pj-step)); }
.hc-figure.ws-play :is(.ws-pj-dot, .ws-pj-num) { animation: wsPjIn .25s var(--ease) both; animation-delay: calc(var(--pj-start) + (var(--pj-n) + 1) * var(--pj-step) - 80ms); }
.hc-figure.ws-play :is(.ws-pj-area, .ws-pj-now, .ws-pj-axis) { animation: wsPjIn .4s var(--ease) both; animation-delay: calc(var(--pj-start) - 250ms); }
@keyframes wsPjDraw { from { clip-path: inset(-14px 100% -14px -14px); } to { clip-path: inset(-14px -14px -14px -14px); } }
@keyframes wsPjIn { from { opacity: 0; } }
.hc-scen { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; line-height: 1.4; color: var(--text-2); }
.hc-scen-key { flex: none; width: 22px; height: 0; border-top: 2px solid var(--chart-tp); }
@media (prefers-reduced-motion: reduce) {
    .hc-figure.ws-play :is(.ws-pj, .ws-pj-dot, .ws-pj-num, .ws-pj-area, .ws-pj-now, .ws-pj-axis) { animation: none; }
}

@container hc (max-width: 599.98px) {
    .hc-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hc-kv > div:nth-child(2n) { border-right: 0; }
    .hc-kv > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .hero-steps { grid-template-columns: minmax(0, 1fr); }
    .hc-sym { font-size: 22px; }
}

/* Marktpuls: Anzahlen aus dem Tageslauf (keine Kurse), jede Zelle führt zur passenden Seite */
.pulse { margin-bottom: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.pulse-title {
    margin: 0; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2);
    font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
}
.pulse-title .small { letter-spacing: 0; text-transform: none; font-weight: 400; }
.pulse-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pulse-cell { position: relative; min-width: 0; border-right: 1px solid var(--line); }
.pulse-cell:last-child { border-right: 0; }
.pulse-link { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px 11px; color: var(--text); transition: background .2s var(--ease); }
.pulse-link:hover { background: var(--hover); text-decoration: none; }
.pulse-link:focus-visible { outline-offset: -2px; }
.pulse-label { padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.pulse-num { font-size: 26px; font-weight: 750; line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; }
.pulse-score { font-size: 15px; font-weight: 700; color: var(--accent); }
.pulse-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-2); }
.pulse-cell > .help { position: absolute; top: 9px; right: 10px; }

/* Mitmachen (Gast) bzw. „Deine Favoriten heute“ (angemeldet) */
.join {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 22px; margin-bottom: 10px;
    padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius-l);
}
.join-title { margin: 0; font-size: 14px; font-weight: 700; white-space: nowrap; }
.join-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; font-size: 13px; color: var(--text-2); }
.join-list li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; min-width: 0; }
.join-list .icon { flex: none; margin-top: 1px; color: var(--accent); }
.join-list b { font-weight: 600; color: var(--text); }
.join-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.join-text { margin: 0; font-size: 13px; color: var(--text-2); }
.join-stats { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.join-stats div { display: flex; align-items: baseline; gap: 6px; }
.join-stats dt { font-size: 12px; color: var(--text-2); }
.join-stats dd { margin: 0; font-size: 18px; font-weight: 700; }

@media (min-width: 1100px) {
    .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; padding: 30px 28px 24px; }
    .hero-intro { padding-top: 10px; gap: 16px; }
}
@media (max-width: 1099px) {
    .pulse-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pulse-cell:nth-child(3n) { border-right: 0; }
    .pulse-cell:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
    .join { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .hero { padding: 16px 12px 12px; gap: 16px; }
    .hero-sub { font-size: 14px; }
    .hero-actions .button-lg { flex: 1 1 auto; }
    .hero-card { padding: 10px 10px 10px; }
    .join-list { grid-template-columns: minmax(0, 1fr); }
    /* Gäste: Signal-Tabellen vor den TradingView-Platzhaltern */
    .ov-top-guest .ov-side { order: -1; }
}
@media (max-width: 599px) {
    .pulse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pulse-cell:nth-child(3n) { border-right: 1px solid var(--line); }
    .pulse-cell:nth-child(2n) { border-right: 0; }
    .pulse-cell:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
    .pulse-num { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .tour-ready .hero-steps li { animation: none; }
    .hc-figure .ws-v > *, .hc-kv > div, .tour-dots i, .pulse-link { transition: none; }
}

/* Signale: Legende der Zonen-Leiste */
.zone-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 10px; }
.zl-title { font-weight: 600; color: var(--text); }
.zl-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.zone-legend i { display: inline-block; flex: none; border-radius: 1px; }
.zl-stop, .zl-tp { width: 3px; height: 12px; }
.zl-stop { background: var(--down); }
.zl-tp { background: var(--up); }
.zl-zone { width: 18px; height: 8px; background: color-mix(in srgb, var(--zone) 45%, transparent); border: 1px solid var(--line); }
.zl-close { width: 2px; height: 14px; background: var(--text); }

/* Signalzeilen mit Erklärung: <div>-Zeile, Link über die ganze Zeile, Knopf und Text darüber (gültiges HTML) */
.list-row.has-link { position: relative; }
.row-link { color: inherit; }
.row-link:hover { text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:focus-visible { outline: none; }
.list-row.has-link:has(.row-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.list-row.has-link .help, .explain-toggle, .row-explain { position: relative; z-index: 1; }
.explain-toggle {
    display: inline-flex; align-items: center; gap: 5px; min-height: 24px; margin: 1px 0 0; padding: 0; border: 0; background: none;
    color: var(--accent); font: 600 12px/1.2 var(--font); cursor: pointer;
}
.explain-toggle::after {
    content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease);
}
.explain-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-1px, -1px); }
.explain-toggle:hover { text-decoration: underline; }
.row-explain {
    grid-column: 1 / -1; margin: 2px 0 6px; padding: 8px 12px; max-width: 120ch; cursor: text;
    background: var(--surface); color: var(--text); border: 1px solid var(--line); border-left: 3px solid var(--zone);
    border-radius: var(--radius-m); font-size: 13px; line-height: 1.5;   /* Aufklappen: motion.js */
}
.list-row.blocked .row-explain { border-left-color: var(--line-strong); }
@media (max-width: 767px) {
    .list-zones .list-row > .zone-cell > .explain-toggle { flex-basis: 100%; }
    .row-explain { font-size: 14px; }
}

/* =====================================================================================================
   Paket B (08.10.2026): „So liest du dieses Signal“ auf der Chart-Seite, große Zonen-Leiste, weiches Aufklappen.
   Daten: App\Analysis\ChartExplain; Ansicht src/Views/chart_explain.php; Bewegung: public/assets/motion.js.
   ===================================================================================================== */
.explain-card { margin: 12px 0; padding: 0; border-left: 3px solid var(--zone); }
.explain-card.is-signal { border-left-color: var(--up); }
.explain-card.is-blocked { border-left-color: var(--line-strong); }
.explain-title { margin: 0; font-size: 15px; }
.explain-head {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; width: 100%; min-height: 40px; padding: 9px 14px;
    border: 0; background: none; color: var(--text); font: 700 15px/1.3 var(--font); text-align: left; cursor: pointer;
}
.explain-head::after {
    content: ""; align-self: center; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--text-2);
    border-bottom: 2px solid var(--text-2); transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease);
}
.explain-head[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-1px, -1px); }
.explain-head:hover { background: var(--hover); }
.explain-head:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.explain-kind { font-weight: 500; color: var(--text-2); }
.explain-body { padding: 0 14px 12px; display: grid; gap: 10px; }
.explain-body[hidden] { display: none; }
.explain-text { margin: 0; max-width: 85ch; font-size: 14px; line-height: 1.55; }
.explain-scale { display: grid; gap: 8px; max-width: 720px; }
.zone-meter.zone-meter-lg { width: 100%; height: 10px; margin: 6px 0 0; border-radius: 2px; }
.zone-meter.zone-meter-lg .zm-stop, .zone-meter.zone-meter-lg .zm-tp1, .zone-meter.zone-meter-lg .zm-tp2 { width: 3px; }
.zone-meter.zone-meter-lg .zm-close { top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; }
.explain-ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 12px; }
.explain-ticks li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 6px; min-width: 0; }
.explain-ticks li > i { grid-row: span 2; display: inline-block; border-radius: 1px; }
.explain-ticks li > span { color: var(--text-2); }
.explain-ticks li > b { font-size: 13px; color: var(--text); }
.explain-guest { margin: 0; max-width: 85ch; padding: 8px 12px; background: var(--surface-2); border-radius: var(--radius-m); font-size: 13.5px; line-height: 1.5; }
.explain-foot { margin: 0; color: var(--text-2); }
.explain-foot a { font-weight: 600; }
@media (max-width: 767px) {
    .explain-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .explain-text { font-size: 15px; }
}
.cards-3 .row .help, .ga-table th .help { white-space: nowrap; }
.ga-table td.num { white-space: nowrap; }

/* =====================================================================================================
   Handy-Durchsicht (08.10.2026): alle Seiten bei 375/390 px mit Touch, hell und dunkel geprüft.
   Nur Darstellung – keine Werte, keine Logik. Steht am Ende, damit es frühere Handy-Regeln gezielt übersteuert.
   ===================================================================================================== */
.nw { white-space: nowrap; }
/* Überschriften gleichmäßig umbrechen (kein einzelnes „%“ in der letzten Zeile) */
h1, h2, h3, .learn-card-body strong { text-wrap: balance; }
/* „So liest du dieses Signal“: Werte (Zonen „X–Y“, Ziele „A / B“) nie in sich umbrechen; Marken fließen nebeneinander (Desktop, SHIB-Längen) */
.explain-ticks { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.explain-ticks li > b { white-space: nowrap; }
/* Protokoll: Versionskopf als Fließtext statt zweier Spalten; Versionskennung im Original-Wortlaut */
.journal-version h3 { display: block; }
.journal-version h3 .small { text-transform: none; letter-spacing: 0; }
/* Zeichenfarben im Chart: Trefferfläche mindestens 24 px am Touchscreen */
@media (pointer: coarse) {
    .draw-colors { gap: 6px; }
    .draw-color { width: 26px; height: 26px; }
    /* iOS vergrößert die Seite beim Antippen von Feldern unter 16 px – deshalb 16 px auf Touchgeräten */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: 16px; }
}

@media (max-width: 767px) {
    /* Listen-Karten: Kürzel und Name linksbündig statt mittig */
    .list-row .cell-name { align-items: flex-start; }

    /* Offene Positionen: Ziel mit Zielzone in eigener Zeile – vorher lief „Zone X–Y“ rechts aus der Karte */
    .list-signals .list-row:has(.zone-range) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .list-signals .list-row > [data-label]:has(> .zone-range) {
        grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px;
    }
    .list-signals .list-row > [data-label]:has(> .zone-range)::before { flex-basis: 100%; }
    .list-signals .list-row .zone-range { display: inline; }

    /* Seitenkopf: Text und Zusatz (z. B. Lern-Fortschritt) untereinander statt gequetscht nebeneinander */
    .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
    .page-head .learn-overall { text-align: left; min-width: 0; }   /* learn.css lädt später → mit .page-head übersteuern */

    /* Umschalter mit vielen bzw. langen Einträgen (Bereiche, Gruppen): umbrechende Chips statt abgeschnitten waagerecht zu wischen */
    .segmented:is(.settings-nav, [aria-label="Gruppe"]) { display: flex; flex-wrap: wrap; gap: 6px; border: 0; background: transparent; overflow: visible; }
    .segmented:is(.settings-nav, [aria-label="Gruppe"]) > * { border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface); padding: 5px 10px; }
    .segmented:is(.settings-nav, [aria-label="Gruppe"]) > :last-child { border-right: 1px solid var(--line-strong); }
    .segmented:is(.settings-nav, [aria-label="Gruppe"]) > [aria-current="true"], .segmented:is(.settings-nav, [aria-label="Gruppe"]) > [aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }

    /* „So liest du dieses Signal“: Marken als Zeilen (Beschriftung links, Wert rechts), Zonen „X–Y“ nie mitten im Wert umbrechen */
    .explain-ticks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .explain-ticks li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
    .explain-ticks li > i { align-self: center; }
    .explain-ticks li > b { margin-left: auto; white-space: nowrap; font-size: 14px; }

    /* Trades-Tabellen im Chart (angemeldet: table[data-trades], Gast: .ga-trades; Labor/Protokoll/Research nicht): Karten statt 8 Spalten zum Wischen – Ergebnis sofort sichtbar.
       Zeile 1: Nr · Einstieg → Ausstieg · Ergebnis; Zeile 2: Kurse · Haltedauer; Zeile 3: Grund */
    table.trades[data-trades], table.trades[data-trades] tbody, table.ga-trades, table.ga-trades tbody { display: block; }
    table.trades[data-trades] thead { display: block; border-bottom: 1px solid var(--line); background: var(--surface-2); }
    table.trades[data-trades] thead tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px 8px; }
    table.trades[data-trades] thead th { display: block; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 3px 8px; background: var(--surface); }
    table.trades[data-trades] thead th:nth-child(3), table.trades[data-trades] thead th:nth-child(5) { display: none; }   /* Kurs-Sortierung nur am Desktop */
    table.trades[data-trades] thead tr::before { content: "Sortieren:"; font-size: 11px; color: var(--text-2); }
    :lang(en) table.trades[data-trades] thead tr::before { content: "Sort:"; }
    table.trades[data-trades] tbody tr, table.ga-trades tbody tr {
        display: grid; column-gap: 10px; row-gap: 1px; padding: 7px 10px; border-bottom: 1px solid var(--line); align-items: baseline;
    }
    table.trades[data-trades] tbody tr:last-child, table.ga-trades tbody tr:last-child { border-bottom: 0; }
    table.trades[data-trades] tbody td, table.ga-trades tbody td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
    table.trades[data-trades] tbody td[colspan] { grid-column: 1 / -1; }
    /* feste Randspalten, damit Datum und Kurse über alle Zeilen bündig stehen */
    table.trades[data-trades] tbody tr { grid-template-columns: 2.2em minmax(0, 1fr) minmax(0, 1fr) 6.2em; }
    table.trades[data-trades] td:nth-child(1) { grid-area: 1 / 1; color: var(--text-2); font-size: 12px; }
    table.trades[data-trades] td:nth-child(2) { grid-area: 1 / 2; }
    table.trades[data-trades] td:nth-child(4) { grid-area: 1 / 3; }
    table.trades[data-trades] td:nth-child(8) { grid-area: 1 / 4; text-align: right; font-weight: 700; }
    table.trades[data-trades] td:nth-child(3) { grid-area: 2 / 2; color: var(--text-2); }
    table.trades[data-trades] td:nth-child(5) { grid-area: 2 / 3; color: var(--text-2); }
    table.trades[data-trades] td:nth-child(7) { grid-area: 2 / 4; text-align: right; color: var(--text-2); font-size: 12px; }
    table.trades[data-trades] td:nth-child(7)::after { content: " T."; }
    table.trades[data-trades] td:nth-child(6) { grid-area: 3 / 2 / 4 / -1; white-space: normal; font-size: 12px; color: var(--text-2); }
    table.trades[data-trades] td:nth-child(4)::before, table.trades[data-trades] td:nth-child(5)::before,
    table.ga-trades td:nth-child(3)::before, table.ga-trades td:nth-child(4)::before { content: "→ "; color: var(--text-2); }
    table.ga-trades thead { display: none; }   /* Bedeutung steht in der Zeile (Pfeil Einstieg → Ausstieg) */
    table.ga-trades tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 6.6em; }
    table.ga-trades tbody td.ga-why { display: block; }   /* Grund passt jetzt wieder (früher am Handy ausgeblendet) */
    table.ga-trades td:nth-child(1) { grid-area: 1 / 1; }
    table.ga-trades td:nth-child(3) { grid-area: 1 / 2; }
    table.ga-trades td:nth-child(6) { grid-area: 1 / 3; text-align: right; font-weight: 700; }
    table.ga-trades td:nth-child(2) { grid-area: 2 / 1; color: var(--text-2); }
    table.ga-trades td:nth-child(4) { grid-area: 2 / 2; color: var(--text-2); }
    table.ga-trades td:nth-child(5) { grid-area: 2 / 3; text-align: right; white-space: normal; font-size: 12px; color: var(--text-2); }
}
@media (max-width: 767px) {
    /* Kennzahl-Zeilen (Label links, Wert rechts): Zahlen und Bereiche „X – Y“ nie in sich umbrechen; reicht der Platz nicht,
       rutscht der Wert rechtsbündig in die nächste Zeile (z. B. Fibonacci-Setup bei BTC/SHIB) */
    .row { flex-wrap: wrap; column-gap: 12px; row-gap: 0; }
    .row > :first-child { flex: 1 1 11em; min-width: 0; }
    .row > .num:last-child { white-space: nowrap; margin-left: auto; }
}
@media (pointer: coarse) {
    /* Kürzel-Links in dichten Tabellen (17 px hoch): Trefferfläche nach oben/unten auf ~25 px vergrößern, Zeilenhöhe bleibt */
    td > a:not(.button):not(.pill) { display: inline-block; padding-block: 4px; margin-block: -4px; }
}

/* Gast-Chart: Textzellen in .ga-table dürfen umbrechen (z. B. „nachgezogen (Einstand bzw. Nachzug)“), sonst Überlauf am Handy */
table.ga-table td.num { white-space: normal; }

/* ---------- Beiträge der Nutzer (Chart-Seite, public/assets/posts.js; Moderation src/Views/moderation.php) ----------
   Dicht wie die Tabellen: Name fett, Zeit grau, Text 14 px mit Zeilenumbrüchen, Aktionen als Textknöpfe.
   Bullisch/Bärisch nutzen --up/--down (Meinung zu Long/Short), Neutral grau. */
.posts { margin-top: 16px; }
.posts .section-head { margin-top: 8px; }
.posts-card { padding: 10px 14px 6px; }
.posts-note { margin: 6px 0 4px; color: var(--text-2); }
.posts-locked { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; }
.posts-locked p { margin: 0 0 4px; }
.posts-locked p.small { color: var(--text-2); }
.posts-lock { fill: var(--text-2); flex: none; margin-top: 2px; }

.posts-mood { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.posts-mood-title { margin: 0 0 4px; display: flex; align-items: center; gap: 4px; }
.posts-mood-empty { margin: 0; color: var(--text-2); }
.mood-bar { display: flex; height: 8px; border-radius: 2px; overflow: hidden; background: var(--surface-2); gap: 2px; }
.mood-seg { width: var(--w); min-width: 3px; transition: width .3s var(--ease); }
.mood-bull { --mood: var(--up); } .mood-neutral { --mood: var(--text-2); } .mood-bear { --mood: var(--down); }
.mood-seg { background: var(--mood); }
.mood-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 4px 0 0; color: var(--text-2); }
.mood-key::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 1px; background: var(--mood); margin-right: 5px; }
.mood-key b { color: var(--text); font-weight: 600; }
.mood-base { margin-left: auto; }
.mood-skeleton { animation: sk-pulse 1.2s ease-in-out infinite; }
[data-grow] .mood-seg { animation: mood-grow .45s var(--ease) both; transform-origin: left center; }

.post-form { display: flex; flex-direction: column; gap: 6px; }
.post-form textarea { resize: vertical; min-height: 64px; line-height: 1.45; }
.post-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.post-form-row .post-counter { margin-left: auto; }
.post-form .alert { margin: 0; }
.post-counter { color: var(--text-2); font-variant-numeric: tabular-nums; }
.post-counter[data-state="over"] { color: var(--down); font-weight: 600; }
.post-chips { display: inline-flex; gap: 4px; }
.post-chip {
    font: inherit; font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2);
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.post-chip:hover { background: var(--hover); color: var(--text); }
.post-chip[aria-pressed="true"].chip-bull { color: var(--up); border-color: var(--up); background: color-mix(in srgb, var(--up) 10%, transparent); }
.post-chip[aria-pressed="true"].chip-bear { color: var(--down); border-color: var(--down); background: color-mix(in srgb, var(--down) 10%, transparent); }
.post-chip[aria-pressed="true"].chip-neutral { color: var(--text); border-color: var(--text-2); background: var(--surface-2); }

.post-list { list-style: none; margin: 4px 0 0; padding: 0; }
.post { padding: 8px 0; border-top: 1px solid var(--line); }
.post-list > .post:first-child { border-top: 0; }
.post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; }
.post-head time, .post-head .small { color: var(--text-2); }
.post-author { font-weight: 700; color: var(--text); }
.post-author.is-gone { font-weight: 400; font-style: italic; color: var(--text-2); }
/* Kennzeichen „Betreiber“ neben Beiträgen des Admins (serverseitig aus users.is_admin) */
.pill.post-operator { color: var(--accent); background: transparent; border-color: color-mix(in srgb, var(--accent) 55%, transparent); font-weight: 600; }
.post-text { margin: 3px 0 2px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 2px; }
.post-act {
    font: inherit; font-size: 12px; background: none; border: 0; padding: 4px 0; color: var(--text-2); cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px; min-height: 26px;
}
.post-act:hover { color: var(--accent); }
.post-act.danger:hover { color: var(--down); }
.post-act[aria-expanded="true"] { color: var(--text); }
.post-reported { cursor: default; }
.post-reported:hover { color: var(--text-2); }
.post-thumb { fill: currentColor; }
.post-like[aria-pressed="true"] { color: var(--accent); font-weight: 600; }
.post-likes { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.post-pop .post-thumb { animation: post-pop .25s var(--ease); }
.post-slot:empty { display: none; }
.post-slot { margin: 6px 0 2px; }
.post-slot .notice, .post-slot .alert { margin: 0; }
.post-form-inline { padding: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-m); }
.post-report select { width: auto; flex: 0 1 220px; }
.post-report input { flex: 1 1 200px; width: auto; }
.post-report p { margin: 0; }
.post-replies { list-style: none; margin: 4px 0 0 4px; padding: 0 0 0 12px; border-left: 2px solid var(--line); }
.post-replies .post { padding: 6px 0; }
.post-replies .post:first-child { border-top: 0; }
.post-hidden .post-text { color: var(--text-2); }
.post-deleted > p { margin: 0; color: var(--text-2); font-style: italic; }
.post-empty { padding: 14px 0; color: var(--text-2); text-align: center; }
.posts-more { margin: 4px 0 8px; text-align: center; }
.posts-more:has(> [hidden]) { display: none; }
.post-new { animation: post-in .3s var(--ease); }

/* Skeleton statt Ladekreisel */
.post-skeleton { display: flex; flex-direction: column; gap: 6px; }
.sk { display: block; border-radius: 2px; background: var(--surface-2); animation: sk-pulse 1.2s ease-in-out infinite; }
.sk-line { height: 10px; width: 92%; }
.sk-short { width: 22%; }
.sk-mid { width: 64%; }

@keyframes sk-pulse { 50% { opacity: .45; } }
@keyframes post-in { from { opacity: 0; transform: translateY(-4px); background: var(--hover); } to { opacity: 1; transform: none; } }
@keyframes post-pop { 50% { transform: scale(1.3); } }
@keyframes mood-grow { from { transform: scaleX(0); } }

@media (pointer: coarse) {
    .post-act { min-height: 36px; }
    .post-chip { padding: 9px 12px; }
    .posts .segmented button, .post-form .button, .posts-more .button { min-height: 36px; }
}
@media (max-width: 767px) {
    .posts-card { padding: 8px 10px 4px; }
    .post-form-row .button-primary { margin-left: auto; }
    .post-form-row .post-counter { margin-left: 0; }
    .mood-base { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .sk, .mood-skeleton, .post-new, .post-pop .post-thumb, [data-grow] .mood-seg { animation: none; }
    .mood-seg, .post-chip { transition: none; }
}

/* Moderation (nur Admin) */
.mod-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mod-item { padding: 8px 14px; }
.mod-reports { margin: 4px 0; padding-left: 18px; color: var(--text-2); }
.mod-snapshot { display: block; margin-top: 2px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.mod-snapshot-label { color: var(--text-2); }
.mod-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mod-actions .inline-form { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.mod-days { width: 64px !important; min-height: 26px; padding: 2px 6px; }
.mod-danger { color: var(--down); }
table.mod-log td.mod-excerpt { white-space: normal; min-width: 220px; color: var(--text-2); font-size: 12px; }

/* =====================================================================================================
   Handelsplan (Teil 4, 09.10.2026): Ein- und Ausstiege für Laien – senkrechte Leiter in Ampel-Logik.
   Oben grün „Verkauf mit Gewinn“, Mitte neutral „Kaufzone – Kauf zur nächsten Eröffnung nach der Umkehrkerze“, unten rot
   „Verkauf mit Verlust“. Teil 4b: gesperrte Setups (.is-blocked) grau ohne Ampelfarben, Text in voller Lesbarkeit (keine Opacity).
   Ohne Farbe lesbar: Symbole ▲ ■ ▼, Wörter und Vorzeichen der Prozente. Baustein src/Views/trade_plan.php.
   ===================================================================================================== */
.tplan { min-width: 0; display: grid; gap: 8px; container: tplan / inline-size; }
.tplan-title { margin: 0; font-size: 13px; font-weight: 650; display: flex; align-items: center; gap: 4px; }
.tplan-sub { margin: -4px 0 0; color: var(--text-2); }
.tplan-ladder { display: grid; gap: 4px; }
.tplan-band { border-left: 4px solid var(--band, var(--line-strong)); border-radius: var(--radius-m); padding: 5px 10px 6px;
    background: color-mix(in srgb, var(--band, var(--line)) 7%, transparent); }
.tplan-up { --band: var(--up); }
.tplan-zone { --band: var(--zone); background: color-mix(in srgb, var(--zone) 12%, transparent); }
.tplan-down { --band: var(--down); }
.tplan-band-name { margin: 0 0 2px; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.tplan-sym { color: var(--band); font-size: 10px; display: inline-block; width: 12px; }
.tplan-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tplan-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; align-items: baseline; gap: 2px 10px; min-height: 24px; }
.tplan-what { min-width: 0; font-size: 13px; }
.tplan-what b { font-weight: 650; }
.tplan-term { color: var(--text-2); font-size: 12px; white-space: nowrap; }
.tplan-note { display: block; color: var(--text-2); font-size: 12px; line-height: 1.3; }
.tplan-val { font-size: 15px; font-weight: 700; white-space: nowrap; text-align: right; }
.tplan-up .tplan-val { color: var(--up); }
.tplan-zone .tplan-val { color: var(--zone); }
.tplan-down .tplan-val { color: var(--down); }
.tplan-pct { font-size: 12px; font-weight: 600; white-space: nowrap; text-align: right; color: var(--text-2); }
.tplan-up .tplan-pct { color: var(--up); }
.tplan-down .tplan-pct { color: var(--down); }
.tplan-zone .tplan-pct { font-weight: 400; }
/* Gäste (10.10.2026): nur Prozent zur Oberkante der Kaufzone – die Prozentspalte trägt den Wert, groß wie sonst der Kurs */
.tplan.is-rel .tplan-row { grid-template-columns: minmax(0, 1fr) auto; }
.tplan .tplan-pct-only { font-size: 15px; font-weight: 700; }
.tplan-zone .tplan-pct-only { color: var(--zone); }
/* Zusatz zum Bandnamen (wann gekauft wird bzw. warum nicht) in normaler Schreibweise statt Versalien */
.tplan-band-more { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; }
/* Gesperrtes Setup: Leiter ausgegraut – Bänder, Symbole und Werte neutral, damit nichts nach „Kaufen“ aussieht */
.tplan.is-blocked .tplan-band { --band: var(--text-2); background: color-mix(in srgb, var(--text-2) 6%, transparent);
    border-left-style: dashed; }
.tplan.is-blocked .tplan-val, .tplan.is-blocked .tplan-pct { color: var(--text-2); }
.tplan.is-blocked .tplan-zone .tplan-band-more { color: var(--text); font-weight: 650; }
.tplan-close, .tplan-ratio { margin: 0; line-height: 1.45; }
.tplan-close .num { font-weight: 650; white-space: nowrap; }
.tplan-basis { display: block; color: var(--text-2); }
/* Schmal (Karte unter 340 px): Prozent unter den Wert statt eigener Spalte */
@container tplan (max-width: 340px) {
    .tplan-row { grid-template-columns: minmax(0, 1fr) auto; }
    .tplan-pct { grid-column: 2; }
    /* lange Zonen (SHIB: 0,000005064–0,000005285) in eigene Zeile, damit die Beschriftung nicht zerquetscht wird */
    .tplan-row-zone .tplan-val { grid-column: 1; grid-row: 2; text-align: left; }
    .tplan-row-zone .tplan-pct { grid-row: 2; }
}
@media (prefers-reduced-motion: no-preference) {
    .tplan-band { transition: background .2s var(--ease); }
    .tplan-band:hover { background: color-mix(in srgb, var(--band) 14%, transparent); }
}
/* Erklärkarte: Text links, Handelsplan rechts (breit), untereinander am Handy */
.explain-main { display: grid; gap: 12px; align-items: start; }
@media (min-width: 900px) {
    .explain-main:has(.tplan) { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 24px; }
}
/* Gast-Chart: Status der Regel, Plan der laufenden Position */
.ga-status .tplan { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ga-status .status-text { margin-top: 8px; }
/* Zonen-Verlauf (12.10.2026): Zeile „Zone gilt seit … · zuletzt geändert …“ und aufklappbarer Verlauf als schmale Zeitleiste.
   Neutralfarben (Grün/Rot nur für Gewinn/Verlust); Marke je Ereignis: gefüllt = Zone neu/angepasst, Ring = Zone beendet. */
.zh { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); min-width: 0; }
.ga-status .ga-title + .zh { margin-top: 0; padding-top: 0; border-top: 0; }
.zh-line { margin: 0; color: var(--text-2); line-height: 1.5; overflow-wrap: anywhere; }
.zh-line b { color: var(--text); font-weight: 600; }
.zh-tag { display: inline-block; margin-right: 4px; padding: 0 5px; border: 1px solid var(--line); border-radius: 3px; font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.zh-more { margin-top: 4px; }
.zh-premium { margin: 4px 0 0; color: var(--text-2); }
.zh-premium a { font-weight: 600; }
.zh-more > summary { list-style: revert; display: list-item; cursor: pointer; width: fit-content; font-size: 12.5px; font-weight: 600; color: var(--accent); padding: 2px 0; }
.zh-more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.zh-count { font-weight: 400; color: var(--text-2); }
.zh-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; row-gap: 3px; margin: 6px 0 4px; padding: 0 0 0 2px; list-style: none; font-size: 12.5px; }
.zh-ev { display: contents; }
.zh-ev time { position: relative; padding-left: 13px; color: var(--text-2); white-space: nowrap; }
.zh-ev time::before { content: ""; position: absolute; left: 0; top: .45em; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.zh-ev-neu time::before, .zh-ev-geaendert time::before { background: var(--zone); }
.zh-ev-ungueltig time::before, .zh-ev-entfallen time::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-2); }
.zh-text { min-width: 0; }
.zh-zone { display: inline-block; color: var(--zone); font-weight: 600; white-space: nowrap; }
.zh-foot { margin: 0; color: var(--text-2); }
.explain-card .zh { margin: 2px 0 10px; }
.zh-card .explain-title { margin: 0 0 6px; font-size: 15px; }
.zone-cell > .zh-since { color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
    .zh-more[open] > .zh-list { animation: zh-in .22s var(--ease) both; }
    @keyframes zh-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
}
/* Überschriften mit Fachbegriff in Klammern */
.h-term { font-weight: 400; color: var(--text-2); font-size: .82em; }
/* Übersicht: Kaufzone mit Handelsplan-Kurzform */
.plan-cell { line-height: 1.25; }
.plan-zone { display: block; color: var(--zone); font-weight: 650; white-space: nowrap; }
.plan-short { display: block; font-size: 11px; color: var(--text-2); white-space: nowrap; }
/* sehr schmale Handys (≤ 400 px): Ziel/Stop und Spaltenköpfe dürfen umbrechen, sonst ist die Tabelle breiter als die Karte */
@media (max-width: 400px) {
    table.ov-plan td.plan-cell, table.ov-plan .plan-short, table.ov-plan th { white-space: normal; }
}
/* Startseite: Zusatz unter den Werten der Hero-Karte */
.hc-kv dd.hc-note { font-size: 11px; font-weight: 400; color: var(--text-2); }
.hc-term { text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Chart angemeldet: sichtbare Legende der Marken */
.mark-legend-title { font-weight: 650; color: var(--text); }
.mark-legend li b { color: var(--text); font-weight: 650; }
.mk { display: inline-block; width: 12px; text-align: center; font-size: 11px; color: var(--text); }
.mk-buy, .mk-tp { color: var(--up); }
/* Wellenbild: Ampelfarben wie der Handelsplan; 0,236/0,382 nur blass zur Orientierung, 78,6 % neutral */
.ws .ws-fl[data-level="0,236"], .ws .ws-fl[data-level="0,382"] { stroke-opacity: .18; stroke-dasharray: 2 3; }
.ws .ws-fib-l[data-level="0,236"], .ws .ws-fib-l[data-level="0,382"] { opacity: .7; font-size: 11px; }
.ws .ws-flag-786 .ws-flag-bg { stroke: var(--chart-inv); }
.ws .ws-flag-786 .ws-flag-t { fill: var(--chart-inv); }
.ws-key-faint { height: 0; border-top: 1px dashed var(--text-2); opacity: .5; border-radius: 0; }
.ws-term { color: var(--text-2); }
.ws-sym { font-size: 10px; }
/* Buch-Regel (data-regel="ebuch"): 0,5 ist nur Orientierung (Zone 0,618–0,786); Wochen-Kontext als ruhige Zeile unter dem Bild */
.ws[data-regel="ebuch"] .ws-fl[data-level="0,5"] { stroke-opacity: .18; stroke-dasharray: 2 3; }
.ws[data-regel="ebuch"] .ws-fib-l[data-level="0,5"] { opacity: .7; font-size: 11px; }
.ws-context { margin: 0; line-height: 1.45; color: var(--text-2); max-width: 90ch; }
.ws-context b { color: var(--text); font-weight: 650; }
@media (max-width: 767px) {
    .tplan-val { font-size: 14px; }
}
.explain-left { display: grid; gap: 10px; min-width: 0; }

/* =====================================================================================================
   Wöchentliche Marktanalyse (/marktanalyse, Plan Teil 15, 10.10.2026; Präfix wa-): Lagebild der Märkte oben (Richtung des
   Hauptszenarios, Abstand bis zur Ungültig-Marke als Leiste, die sich einmal aufbaut), darunter je Markt Wochenbild, Text,
   Haupt-/Alternativszenario und Tages-Setup. Grün/Rot nur für die erwartete Richtung (Long/Short) sowie Ziel/Stop.
   ===================================================================================================== */
.wa-hero {
    display: grid; gap: 12px; margin-bottom: 12px; padding: 20px 16px 16px;
    background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: var(--radius-l);
}
.wa-hero-title { margin: 0; font-size: clamp(24px, 1.5vw + 15px, 36px); font-weight: 750; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.wa-legal { margin: 0; }
.wa-board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.wa-tile a {
    display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 10px 12px 11px; color: var(--text);
    border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface);
    transition: background .2s var(--ease), border-color .2s var(--ease);
}
.wa-tile a:hover { background: var(--hover); text-decoration: none; }
.wa-tile a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.wa-tile-up a { border-left-color: var(--up); }
.wa-tile-down a { border-left-color: var(--down); }
.wa-tile-name { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.wa-tile-dir { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.wa-tile-up .wa-tile-dir > span { color: var(--up); }
.wa-tile-down .wa-tile-dir > span { color: var(--down); }
.wa-tile-st { font-size: 12.5px; color: var(--text-2); }
.wa-tile-gap { display: grid; gap: 3px; margin-top: 4px; }
/* Abstand bis zur Ungültig-Marke (0–50 %): baut sich einmal von links auf (Bedeutung: so viel Luft hat das Szenario) */
.wa-gap { display: block; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.wa-gap-bar { display: block; height: 100%; width: var(--w, 0%); background: var(--accent); border-radius: 2px; transform-origin: left center;
    animation: wa-grow .9s var(--ease) both; }
@keyframes wa-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wa-empty { padding: 16px; }
.wa-admin { margin: 0 0 8px; text-align: right; }
.wa-list { display: grid; gap: 12px; }
.wa-card { padding: 14px 16px 16px; container-type: inline-size; scroll-margin-top: 90px; }
.wa-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 10px; }
.wa-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.wa-title { margin: 0; font-size: 21px; font-weight: 750; letter-spacing: -0.015em; }
.wa-sym { font-size: 12.5px; color: var(--text-2); }
.wa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.wa-chart { font-size: 13px; font-weight: 600; }
.wa-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; grid-template-areas: "fig" "text" "scen" "day"; }
.wa-figure { grid-area: fig; margin: 0; }
.wa-figure .wc-scroll { border-radius: var(--radius-m); }
svg.wk { height: 440px; }
.wa-text { grid-area: text; display: grid; gap: 8px; align-content: start; }
.wa-text p { margin: 0; max-width: 72ch; font-size: 14.5px; line-height: 1.6; }
.wa-scens { grid-area: scen; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
.wa-scen { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); display: grid; gap: 3px; }
.wa-scen dt { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.wa-scen dd { margin: 0; }
.wa-dir { font-weight: 650; }
.wa-dir > span { font-weight: 700; }
.wa-dir-up > span { color: var(--up); }
.wa-dir-down > span { color: var(--down); }
.wa-sub, .wa-inv { font-size: 12.5px; color: var(--text-2); }
.wa-inv b { color: var(--text); font-weight: 650; }
.wa-scen-none dd { color: var(--text-2); }
.wa-scen .wa-gap { margin-top: 3px; }
.wa-day { grid-area: day; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.wa-day-h { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.wa-day-s { font-size: 13px; }
.wa-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.wa-plan li { display: inline-flex; align-items: baseline; gap: 5px; font-size: 13px; }
.wa-plan li span { color: var(--text-2); font-size: 12px; }
.wa-plan-stop b { color: var(--down); }
.wa-plan-tp b { color: var(--up); }
.wa-day-n { color: var(--text-2); }
.wa-basis { margin: 10px 2px; color: var(--text-2); }
.wa-archive { margin: 20px 0 8px; }
.wa-archive h2 { margin: 0 0 4px; font-size: 16px; }
.wa-archive-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wa-archive-list li { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.wa-archive-list a[aria-current="page"] { font-weight: 700; color: var(--text); }
@container (min-width: 820px) {
    .wa-body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "fig fig" "text scen" "day day"; }
}
@container (min-width: 560px) and (max-width: 819px) {
    .wa-scens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Leiste „Marktlage heute“ der Startseite (zwischen Hero und Marktpuls, 12.10.2026): Ampel + Richtung je Markt, nächste Termine.
   Aufbau wie der Marktpuls (Kopf, Zellen mit Trennlinien); breit Märkte und Termine nebeneinander, schmal als Zeilen. */
.mlage { margin-bottom: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); container-type: inline-size; }
.mlage-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 6px 10px; border-bottom: 1px solid var(--line);
    background: var(--surface-2); border-radius: var(--radius-l) var(--radius-l) 0 0; }
.mlage-title { margin: 0; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.mlage-hint { color: var(--text-2); }
.mlage-more { margin-left: auto; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.mlage-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.mlage-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mlage-m { min-width: 0; border-right: 1px solid var(--line); }
.mlage-m:last-child { border-right: 0; }
.mlage-m a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 8px 12px 9px; color: var(--text); transition: background .2s var(--ease); }
.mlage-m a:hover { background: var(--hover); text-decoration: none; }
.mlage-m a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.mlage-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.mlage-dir { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.mlage-stand { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mlage-dates { min-width: 0; padding: 7px 12px 8px; border-top: 1px solid var(--line); }
.mlage-sub { margin: 0 0 3px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.mlage-dl { list-style: none; margin: 0; padding: 0; }
.mlage-dl li { display: grid; grid-template-columns: 7.6em 6.6em minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 2px 0; font-size: 12.5px; }
.mlage-dl time { white-space: nowrap; font-weight: 650; }
.mlage-dl time .num { font-weight: 500; color: var(--text-2); }
.mlage-dl .ma-art { justify-self: start; }
.mlage-dn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlage-empty, .mlage-note { margin: 0; color: var(--text-2); }
.mlage-note { margin-top: 3px; }
@container (min-width: 1000px) {
    .mlage-body { grid-template-columns: minmax(0, 11fr) minmax(0, 8fr); }
    .mlage-dates { border-top: 0; border-left: 1px solid var(--line); }
}
@container (max-width: 620px) {
    .mlage-hint { display: none; }
    .mlage-list { grid-template-columns: minmax(0, 1fr); }
    .mlage-m { border-right: 0; border-bottom: 1px solid var(--line); }
    .mlage-m:last-child { border-bottom: 0; }
    .mlage-m a { display: grid; grid-template-columns: minmax(0, 1fr) auto 5.6em; align-items: center; gap: 10px; padding: 6px 12px; }
    .mlage-dir { font-size: 14px; }
    .mlage-stand { text-align: right; }
    .mlage-dl li { grid-template-columns: 7.6em minmax(0, 1fr); gap: 2px 8px; }
    .mlage-dl .ma-art { justify-self: end; }
    .mlage-dn { grid-column: 1 / -1; white-space: normal; }
}
/* Ampeln gehen beim Laden nacheinander an (Reihenfolge der Märkte), mit reduzierter Bewegung sofort */
@media (prefers-reduced-motion: no-preference) {
    .mlage .ma-light { animation: mlage-on .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
}
@keyframes mlage-on { from { opacity: 0; transform: scale(.3); } }
@media (prefers-reduced-motion: reduce) {
    .mlage-m a { transition: none; }
}
/* Bearbeiten (nur Admin) */
.wa-weeks { margin: 0 0 12px; flex-wrap: wrap; }
.wa-edit { margin-bottom: 24px; scroll-margin-top: 90px; }
.wa-edit .alert ul { margin: 4px 0 0; padding-left: 18px; }
.wa-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.wa-edit-form { display: grid; gap: 8px; align-content: start; }
.wa-textarea { width: 100%; min-height: 180px; font: inherit; font-size: 14px; line-height: 1.5; padding: 8px 10px; border: 1px solid var(--line-strong);
    border-radius: var(--radius-m); background: var(--surface); color: var(--text); resize: vertical; }
.wa-textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.wa-anyway { display: inline-flex; gap: 6px; align-items: center; }
.wa-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wa-input summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.wa-input pre { white-space: pre-wrap; font-size: 12px; background: var(--surface-2); padding: 8px; border-radius: var(--radius-m); }
.wa-prev-h { margin: 0 0 4px; color: var(--text-2); }
@media (min-width: 1280px) { .wa-edit-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
/* Wochenbild (src/Market/WeeklyChart.php): Hauptzählung Akzent, Alternative gestrichelt grau, Ungültig-Marken in Warnfarbe */
.wk .wk-wave { stroke: var(--accent); }
.wk .wk-wave-alt { stroke: var(--text-2); stroke-opacity: .85; }
.wk .wk-wave-open { stroke-opacity: .7; }
.wk .wk-inv { stroke: var(--warn); }
.wk .wk-inv-alt { stroke-opacity: .6; }
.wk .wk-bias { stroke: var(--accent); }
.wk .wk-arrow { fill: var(--accent); }
.wk .wk-alt-t { font-weight: 500; fill: var(--text-2); }
.wk .wk-num-alt .wc-num-bg { fill: var(--surface); stroke: var(--text-2); }
.wk .wk-num-open .wc-num-bg { fill: var(--surface); stroke: var(--accent); }
.wk .wk-lv-inv, .wk .wk-lv-inv-alt { fill: var(--warn); font-weight: 600; }
.wk .wk-tag-inv rect { fill: var(--warn); }
.wk .wk-tag-inv-alt rect { fill: var(--text-2); }
.wk .wk-tag-last rect { fill: var(--text); }
/* Nummern auf hellem Grund: Text in Linienfarbe (gilt hell und dunkel; schlägt die Regel „Text = Hintergrundfarbe“ des Analysebilds) */
:root .wk .wc-num.wk-num-alt .wc-num-t { fill: var(--text-2); }
:root .wk .wc-num.wk-num-open .wc-num-t { fill: var(--accent); }
:root[data-theme="dark"] .wk g.wc-num.wk-num-alt:not(.wc-num-open) .wc-num-t { fill: var(--text-2); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wk g.wc-num.wk-num-alt:not(.wc-num-open) .wc-num-t { fill: var(--text-2); }
}
@media (max-width: 767px) {
    .wa-hero { padding: 16px 12px 12px; }
    .wa-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wa-card { padding: 12px; }
    .wa-title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .wa-gap-bar { animation: none; }
    .wa-tile a { transition: none; }
}
.wa-weeks [aria-current="true"] .small { color: inherit; }

/* =====================================================================================================
   Marktanalyse auf Tageskerzen (/marktanalyse, Plan Teil 21, 11.10.2026; Präfix ma-, baut auf wa- auf): Marktlage-Kacheln mit Ampel,
   Termine der Woche, Karten mit Wenn-dann-Sätzen, Branchen Top/Flop und Kaufzonen-Listen. Grün/Rot nur für Richtung (Long/Short) und
   Gewinn/Verlust der Branchen; Termine und Hinweise neutral. Bewegung: Leisten bauen sich einmal auf (Bedeutung: Luft bis zur Marke,
   Stärke der Branche), mit prefers-reduced-motion sofort.
   ===================================================================================================== */
.ma-hero .hero-sub { max-width: 70ch; }
.ma-hero .hero-sub .small { color: var(--text-2); white-space: nowrap; }
.ma-board { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ma-tile a { gap: 4px; }
.ma-tile-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.ma-tile-stand { font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ma-tile .wa-tile-dir { display: inline-flex; align-items: center; gap: 7px; }
/* Ampel: grün = aufwärts erwartet, rot = abwärts, grau = keine gültige Zählung */
.ma-light { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--text-2); opacity: .55;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-2) 14%, transparent); }
.ma-tile-up .ma-light { background: var(--up); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 18%, transparent); }
.ma-tile-down .ma-light { background: var(--down); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--down) 18%, transparent); }
.ma-tile-none a { border-left-color: var(--line-strong); }
.ma-tile-inv { color: var(--text-2); line-height: 1.35; }
.ma-tile-chg { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-2); }
.ma-tc { color: var(--text); font-weight: 600; }
.ma-tc-none { color: var(--text-2); font-weight: 500; }
.ma-tc-new { color: var(--warn); }
.ma-sec { margin-top: 4px; }
.ma-sec-head { margin: 22px 0 8px; align-items: baseline; }
.ma-sec-head h2 { font-size: 17px; letter-spacing: -0.01em; }
.ma-sec-head .small { color: var(--text-2); }
.ma-muted { color: var(--text-2); }
.ma-pad { margin: 0; padding: 8px 10px; }

/* Termine: dichte Liste, Datum links in fester Breite, Art als neutrale Marke */
.ma-dates { list-style: none; margin: 0; padding: 0; }
.ma-date { display: grid; grid-template-columns: 8.6em 6.6em minmax(0, 1fr); align-items: baseline; gap: 4px 10px; padding: 6px 10px;
    border-bottom: 1px solid var(--line); font-size: 13px; }
.ma-date:nth-child(even) { background: var(--zebra); }
.ma-date:last-child { border-bottom: 0; }
.ma-date time { white-space: nowrap; font-weight: 650; }
.ma-date-t { color: var(--text-2); font-weight: 500; }
.ma-date-past { color: var(--text-2); }
.ma-art { justify-self: start; padding: 0 6px; border-radius: 2px; font-size: 11px; font-weight: 700; line-height: 18px; letter-spacing: .02em;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.ma-art-fomc { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.ma-art-cpi, .ma-art-pce { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.ma-art-nfp { color: var(--text); }
.ma-date-name { min-width: 0; overflow-wrap: anywhere; }
.ma-dates-empty { margin: 0; padding: 10px; font-size: 13px; color: var(--text-2); }
.ma-dates-note { margin: 0; padding: 6px 10px; border-top: 1px solid var(--line); color: var(--text-2); }

/* Karte: Szenarien links, Kaufzone + Wochentext rechts */
.wa-body.ma-body { grid-template-areas: "fig" "scen" "side"; }
.ma-scen { grid-area: scen; display: grid; gap: 6px; align-content: start; min-width: 0; }
.ma-scen p { margin: 0; }
.ma-scen-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ma-dir { display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 8px; border-radius: 2px; font-size: 13px; font-weight: 700;
    border: 1px solid var(--line); background: var(--surface-2); }
.ma-dir-up { color: var(--up); border-color: color-mix(in srgb, var(--up) 35%, transparent); background: color-mix(in srgb, var(--up) 9%, transparent); }
.ma-dir-down { color: var(--down); border-color: color-mix(in srgb, var(--down) 35%, transparent); background: color-mix(in srgb, var(--down) 9%, transparent); }
.ma-dir-none { color: var(--text-2); }
.ma-scen-k { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.ma-if { font-size: 14.5px; line-height: 1.5; font-weight: 550; max-width: 70ch; }
.ma-else { font-size: 13.5px; line-height: 1.5; color: var(--text-2); max-width: 70ch; }
.ma-facts { display: flex; flex-wrap: wrap; gap: 2px 16px; color: var(--text-2); }
.ma-facts b { color: var(--text); font-weight: 650; }
.ma-gap { max-width: 260px; }
.ma-chg { margin: 4px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 10px; border: 1px solid var(--line);
    border-radius: var(--radius-m); background: var(--surface-2); }
.ma-chg dt { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.ma-chg dd { margin: 1px 0 0; font-size: 13px; line-height: 1.45; }
.ma-chg dd + dd { margin-top: 3px; }
.ma-chg-none { color: var(--text-2); }
.ma-gross { color: var(--text-2); line-height: 1.45; }
.ma-gross-k { font-weight: 700; color: var(--text); }
.ma-side { grid-area: side; display: grid; gap: 12px; align-content: start; min-width: 0; }
.ma-side > .wa-day, .ma-side > .wa-text { grid-area: auto; }   /* wa-Bereichsnamen gelten hier nicht (sonst liegen beide übereinander) */
.ma-side .wa-day { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); }
.ma-text { padding-top: 10px; border-top: 1px solid var(--line); }
.wa-text .ma-text-h { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.wa-text .ma-text-none { color: var(--text-2); font-size: 13.5px; }
.wa-text .ma-stamp { color: var(--text-2); font-size: 12px; padding-top: 6px; border-top: 1px dashed var(--line); }
@container (min-width: 820px) {
    .wa-body.ma-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "fig fig" "scen side"; }
}
@container (min-width: 560px) and (max-width: 819px) {
    .ma-chg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Branchen und Kaufzonen: drei Kästen nebeneinander (Desktop), untereinander (Handy) */
.ma-breite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.panel-head h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text); display: inline-flex; align-items: center; gap: 2px; }
.ma-sub-h { margin: 0; padding: 6px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.ma-sector-list, .ma-zone-list { list-style: none; margin: 0; padding: 0; }
.ma-sector { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 1fr) 5.2em; align-items: center; gap: 10px; padding: 5px 10px; font-size: 13px; }
.ma-sector-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ma-sector-rank { grid-column: 2 / -1; justify-self: end; color: var(--text-2); }
.ma-sector-pct { text-align: right; font-weight: 650; }
.ma-sector-pct.up { color: var(--up); }
.ma-sector-pct.down { color: var(--down); }
.ma-bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ma-bar-fill { display: block; height: 100%; width: var(--w, 0%); border-radius: 3px; transform-origin: left center; animation: wa-grow .9s var(--ease) both; }
.ma-bar-fill.up { background: var(--up); }
.ma-bar-fill.down { background: var(--down); }
.ma-zone { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 5px 10px;
    border-bottom: 1px solid var(--line); font-size: 13px; }
.ma-zone:nth-child(even) { background: var(--zebra); }
.ma-zone-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.ma-zone-link b { color: var(--accent); }
.ma-zone-name { color: var(--text-2); }
.ma-zone-val { text-align: right; white-space: nowrap; }
.ma-zone-since { grid-column: 1 / -1; color: var(--text-2); margin-top: -2px; }
@media (min-width: 1024px) {
    .ma-breite { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .ma-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ma-date { grid-template-columns: auto minmax(0, 1fr); }
    .ma-date .ma-art { grid-column: 2; grid-row: 1; justify-self: end; }
    .ma-date-name { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
    .ma-board { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .ma-bar-fill { animation: none; }
}

/* ---------- Zonen-Screener (Plan Teil 18): Filterleiste, Ampeln je Wert, abgeblendete Zeilen ohne Regel-Kauf ----------
   Nutzt die Listen der Signal-Seite (.list-signals.list-zones, 6 Spalten). Ampel grün/gelb/rot = --up/--warn/--down wie fp-dot. */
.screener-filter { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 0 0 8px; }
.screener-filter .segmented { align-self: flex-end; }
.screener-filter .sc-tf-note { flex: 1 1 100%; margin: 0; }   /* Erklärsatz zum Reiter „Regel“ bricht in eine eigene Zeile (17.10.2026) */
.field-inline { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.field-inline > span { font-size: 11px; color: var(--text-2); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.field-inline select { width: auto; max-width: 220px; font-size: 13px; }
.screener-meta { margin-top: 0; }
.screener-search { margin: 4px 0 8px; }
.list-screener .list-head, .list-screener .list-row { grid-template-columns: minmax(150px, 1.4fr) 1fr 1.35fr 1.25fr 1.2fr 1fr; }
.list-screener .cell-name strong { flex: none; overflow: visible; }   /* Kürzel nie abschneiden, der Name kürzt */
/* Name + Kurzporträt (Plan Teil 19): Zeilen-Link und ⓘ nebeneinander; ⓘ liegt über der Link-Fläche (.list-row.has-link .help) */
.sc-name { display: flex; align-items: center; gap: 2px; min-width: 0; }
.sc-name > .cell-name { min-width: 0; }
.list-row > .sc-name > .cell-name > .small { display: inline; }
.sc-name > .about { flex: none; }
/* Offene Blase über allen Zeilen: jede .help in Link-Zeilen bildet mit z-index 1 eine eigene Ebene, spätere Zeilen lagen sonst darüber */
.list-row.has-link .help:has(> [aria-expanded="true"]) { z-index: 61; }
.about-stand { display: block; font-size: 11.5px; color: var(--text-2); }
/* Status-Seite (Admin): Selbstprüfung der Kurzporträts */
.pc-list { margin-top: 8px; }
.pc-list summary h3 { margin: 0; font-size: 14px; }
.pc-items { margin: 0 0 8px; padding-left: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.list-screener .sc-pattern { font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.list-row.muted-row .zone-big { color: var(--text-2); }
.fav-pill { margin-left: 4px; color: var(--warn); border-color: transparent; padding: 0 2px; }
.fl-row { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; }
.fl { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--text-2); }
.fl i { width: 9px; height: 9px; border-radius: 50%; background: var(--text-2); opacity: .5; display: inline-block; }
.fl-gut i { background: var(--up); opacity: 1; }
.fl-mittel i { background: var(--warn); opacity: 1; }
.fl-schwach i { background: var(--down); opacity: 1; }
@media (max-width: 767px) {
    .screener-filter .field-inline { flex: 1 1 140px; }
    .field-inline select { max-width: none; width: 100%; }
    .screener-filter .segmented { flex-basis: 100%; }
    .list-screener .list-row > [data-label="Elliott-Muster"], .list-screener .list-row > [data-label="Fundamental"] { grid-column: 1 / -1; }
    .sc-name { align-items: flex-start; }
}
/* Signal-Seite (Admin, 13.10.2026): Branche und Fundamental-Ampeln als letzte zwei Spalten jeder Liste (Ampeln wie im Screener),
   Branchenfilter in der Werkzeugleiste. Ab 1200 px eigene Spalten; 768–1199 px eine Zusatzzeile unter den bisherigen Spalten;
   am Handy Branche links, Ampeln daneben (beschriftet wie die übrigen Kennzahlen). */
.sig-filter { display: flex; align-items: flex-end; gap: 8px; margin-left: auto; }
.sig-filter .button { min-height: 32px; }
.sig-filter-note { margin: 0 0 12px; }
.list-row > .sig-sector { font-size: 12.5px; line-height: 1.3; color: var(--text-2); white-space: normal; hyphens: auto; min-width: 0; }
@media (min-width: 1200px) {
    /* Platz für zwei Spalten mehr: Kürzel über dem Namen. Zonen- und Signal-Listen (hohe Zeilen): Ampeln untereinander in schmaler Spalte;
       Offen/Abgeschlossen (Zeilen-Links, flache Zeilen): Ampeln nebeneinander wie im Screener, damit die Zeilen dicht bleiben. */
    .list-signals > :is(.list-head, .list-row):has(> .sig-fund) {
        grid-template-columns: minmax(96px, 1fr) minmax(170px, 2fr) 1.2fr 0.8fr 1.15fr 1fr minmax(88px, 0.85fr) minmax(92px, 0.95fr);
        gap: 10px;
    }
    .list-signals > :is(.list-head:has(+ a.list-row), a.list-row):has(> .sig-fund) {
        grid-template-columns: minmax(96px, 1fr) 0.85fr 0.65fr 0.7fr 0.65fr minmax(120px, 1.15fr) minmax(88px, 0.8fr) minmax(150px, 2fr);
    }
    .list-signals > .list-row:has(> .sig-fund) > .cell-name { flex-direction: column; align-items: flex-start; gap: 0; }
    .list-signals > .list-row:has(> .sig-fund) > .cell-name > .small { display: block; max-width: 100%; }
    .list-signals > div.list-row > .sig-fund .fl-row { flex-direction: column; gap: 1px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    /* Bisherige sechs Spalten bleiben; Branche und Ampeln als beschriftete Zusatzzeile (Kopf ohne die beiden Spalten) */
    .list-signals > .list-head > :is(.sig-sector, .sig-fund) { display: none; }
    .list-signals > .list-row > .sig-sector { grid-column: 1; }
    .list-signals > .list-row > .sig-fund { grid-column: 2 / -1; display: flex; align-items: baseline; gap: 8px; }
    .list-signals > .list-row > :is(.sig-sector, .sig-fund)::before { content: attr(data-label); margin-right: 6px; color: var(--text-2); font-size: 11px; }
}
@media (max-width: 767px) {
    .sig-filter { margin-left: 0; flex-basis: 100%; }
    .sig-filter .field-inline { flex: 1 1 auto; }
    /* Branche links, Ampeln daneben bis zum Rand – eine Zeile statt zwei */
    .list-signals .list-row > .sig-sector { grid-column: 1; }
    .list-signals .list-row > .sig-fund { grid-column: 2 / -1; }
}

/* ---------- Screener für Laien (Plan Teil 22.2): Voreinstellungen, „Warum diese Zone?“, Meine Filter, Einsteiger-Ansicht ----------
   Voreinstellungen = Links (teilbar), aktive mit aria-current. Spalten mit [data-x] blendet die Einsteiger-Ansicht aus
   (html[data-sc-cols="einfach"], gesetzt von screener-cols.js; ohne JS alle Spalten). */
.sc-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin: 0 0 10px; }
.sc-preset {
    display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 10px; color: var(--text);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.sc-preset strong { font-size: 13px; font-weight: 650; color: var(--accent); }
.sc-preset .small { font-size: 12px; line-height: 1.35; color: var(--text-2); }
.sc-preset:hover { text-decoration: none; border-color: var(--line-strong); background: var(--hover); }
.sc-preset:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sc-preset[aria-current="true"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.sc-preset-now { display: none; margin: -4px 0 10px; }
.screener-filter .sc-new { margin: 0; min-height: 30px; align-self: flex-end; font-size: 13px; }
.sc-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; padding: 6px 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.sc-saved-h { margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }
.sc-saved-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sc-saved-list li { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); }
.sc-saved-list a { padding: 2px 4px 2px 8px; font-size: 13px; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-saved-list a[aria-current="true"] { font-weight: 650; }
.sc-saved-list form { display: inline; margin: 0; }
.sc-del { min-width: 24px; min-height: 24px; padding: 0 6px; color: var(--text-2); font-size: 15px; line-height: 1; }
.sc-del:hover { color: var(--down); text-decoration: none; }
.sc-save { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.sc-save input[type="text"] { width: 220px; max-width: 100%; font-size: 13px; }
.sc-save-note { margin: 0; }
.sc-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.sc-bar .screener-meta { margin-bottom: 0; flex: 1 1 320px; }
.sc-cols-toggle { font-size: 12.5px; padding: 3px 10px; }
.sc-cols-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.list-screener .sc-lage { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.list-screener .sc-lage .pill.zpos { margin: 0; }
/* Warum diese Zone? – eigene Zeile über die ganze Breite, liegt über der Link-Fläche der Zeile */
.list-screener .zw { grid-column: 1 / -1; position: relative; z-index: 1; margin: -4px 0 0; font-size: 12.5px; }
.list-screener .zw > summary {
    display: inline-flex; align-items: center; gap: 5px; min-height: 24px; cursor: pointer; list-style: none;
    color: var(--accent); font-weight: 600; font-size: 12px;
}
.list-screener .zw > summary::-webkit-details-marker { display: none; }
.list-screener .zw > summary::before { content: none; }   /* nicht den Pfeil von .disclosure summary erben */
.list-screener .list-row:has(> .zw) { row-gap: 0; }
.list-screener .zw > summary::after {
    content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease);
}
.list-screener .zw[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.list-screener .zw > summary:hover { text-decoration: underline; }
.list-screener .zw > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.list-screener .zw > p {
    margin: 2px 0 6px; padding: 8px 12px; max-width: 110ch; cursor: text; color: var(--text); line-height: 1.5; font-size: 13px;
    background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--zone); border-radius: var(--radius-m);
    white-space: normal; animation: zwIn .22s var(--ease);
}
@keyframes zwIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
/* Einsteiger-Ansicht: Wert | Kaufzone in % | Lage (mit „Zone gilt seit“) | Fundamental, darunter „Warum diese Zone?“ */
html[data-sc-cols="einfach"] .list-screener [data-x] { display: none; }
html[data-sc-cols="einfach"] .list-screener .list-head,
html[data-sc-cols="einfach"] .list-screener .list-row { grid-template-columns: minmax(190px, 1.5fr) minmax(120px, 0.9fr) minmax(160px, 1.2fr) minmax(170px, 1fr); }
@media (max-width: 767px) {
    .sc-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .sc-preset { padding: 6px 8px; }
    .sc-preset strong { font-size: 12.5px; line-height: 1.3; }
    .sc-preset .small { display: none; }   /* Handy: Erklärung der aktiven Voreinstellung als Zeile darunter */
    .sc-preset-now { display: block; }
    .sc-save input[type="text"] { width: auto; flex: 1 1 160px; }
    .list-screener .list-row > .sc-lage { grid-column: 1 / -1; }
    html[data-sc-cols="einfach"] .list-screener .list-row { grid-template-columns: minmax(0, 1fr); }
    .list-screener .zw > p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .list-screener .zw > p { animation: none; }
    .list-screener .zw > summary::after, .sc-preset { transition: none; }
}

/* ---------- Premium (/premium, Plan Teil 22.1): Vergleich Kostenlos/Premium ---------- */
.pc-mine { margin: 0; color: var(--text-2); }
.pc-promise {
    margin: 0 0 14px; padding: 10px 14px; font-size: 14px; background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--brand); border-radius: var(--radius-l); color: var(--text-2);
}
.pc-promise strong { color: var(--text); }
.pc-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .pc-layout { grid-template-columns: minmax(0, 1fr) 280px; } }
.pc-table { width: 100%; border-collapse: collapse; }
.pc-table thead th { text-align: left; }
.pc-table thead th.pc-col { text-align: center; }
.pc-table tbody th { text-transform: none; letter-spacing: 0; background: transparent; }
.pc-table tbody tr:hover { background: transparent; }
.pc-table tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.pc-table tbody:last-of-type tr:last-child > * { border-bottom: 0; }
.pc-group th { white-space: normal; font-size: 11px; font-weight: 700; color: var(--text-2); background: var(--surface-2); text-transform: uppercase; letter-spacing: .03em; padding-top: 6px; padding-bottom: 6px; }
.pc-feature { text-align: left; font-weight: 400; white-space: normal; padding-top: 7px !important; padding-bottom: 7px !important; }
.pc-name { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.pc-hint { display: block; font-size: 12px; color: var(--text-2); font-weight: 400; margin-top: 1px; }
.pc-col { text-align: center; white-space: nowrap; width: 1%; padding-left: 14px !important; padding-right: 14px !important; font-size: 13px; }
.pc-col-premium { background: color-mix(in srgb, var(--brand) 7%, transparent); }
thead .pc-col-premium { box-shadow: inset 0 3px 0 var(--brand); color: var(--text); }
.pc-yes { display: inline-flex; color: var(--accent); vertical-align: middle; }
.pc-no { color: var(--text-2); }
.pc-price h2 { margin-top: 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }
.pc-price-value { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
/* Preis (festgelegt 13.10.2026): zwei Angebote untereinander, Jahresabo mit Markenkante; nur Anzeige, kein Kauf-Knopf */
.pc-offers { display: grid; gap: 8px; margin: 4px 0 8px; }
.pc-offer { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.pc-offer-year { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.pc-offer-name { margin: 0 0 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.pc-offer-tag { font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 0 6px; border-radius: 3px; background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--text); }
.pc-offer .pc-price-value { margin: 0; font-size: 22px; font-variant-numeric: tabular-nums; }
.pc-per { font-size: 13px; font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.pc-offer-note { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.pc-offer-note .num { color: var(--text); font-weight: 600; }
.pc-vat { margin: 0 0 10px; font-size: 12px; color: var(--text-2); }
.pc-start { margin: 0 0 8px; font-size: 13px; }
.pc-soon { cursor: default; color: var(--text-2); justify-content: center; gap: 6px; }
.pc-soon:hover { background: transparent; }
.pc-soon:active { transform: none; }
.pc-soon-tag { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 3px; background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--text); }
.pc-facts { margin: 10px 0 12px; padding-left: 18px; color: var(--text-2); }
.pc-facts li + li { margin-top: 4px; }
@media (max-width: 520px) {
    .pc-col { padding-left: 6px !important; padding-right: 6px !important; font-size: 12.5px; }
    .pc-hint { font-size: 11.5px; }
}
/* Einstellungen: Plan (Plan Teil 22.1) */
.plan-use { margin: 6px 0 10px; padding-left: 18px; color: var(--text-2); }
.plan-use li + li { margin-top: 3px; }
.plan-row { border-top: 1px solid var(--line); padding: 8px 0; }
.plan-row-name { margin: 0 0 6px; }
.plan-row-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.plan-row-fields .field { flex: 1 1 140px; margin: 0; }

/* ---------- Newsletter und Kontakt (Plan Teil 22.3/22.4): /newsletter, /kontakt, Bestätigen/Abmelden, Vorschau, Eingang ---------- */
/* Honeypot: für Menschen unsichtbar (auch für Screenreader: aria-hidden am Container, tabindex -1 am Feld) */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.nl-layout, .ct-layout { display: grid; gap: 16px 20px; grid-template-columns: minmax(0, 1fr); align-items: start; margin-bottom: 16px; }
@media (min-width: 900px) {
    .nl-layout { grid-template-columns: minmax(0, 620px) minmax(0, 360px); }
    .ct-layout { grid-template-columns: minmax(0, 760px) minmax(0, 320px); }
}
.nl-card, .ct-card { padding: 14px 18px 16px; }
.nl-h { font-size: 16px; font-weight: 700; letter-spacing: -0.005em; margin: 2px 0 10px; }
.nl-form input[type="email"] { min-height: 38px; font-size: 15px; }
.nl-consent { align-items: flex-start; gap: 8px; line-height: 1.45; margin-top: 2px; }
.nl-consent input { flex: none; margin-top: 2px; }
.nl-consent span { color: var(--text); }
.nl-submit { align-self: flex-start; min-height: 38px; padding: 6px 18px; font-size: 14px; }
@media (max-width: 520px) { .nl-submit { align-self: stretch; } }
.nl-steps { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.nl-steps li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: baseline; line-height: 1.45; }
.nl-step-n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.nl-account { margin: 10px 0 0; }
.nl-thanks p, .ct-thanks p { margin: 0; line-height: 1.5; }
.nl-thanks, .ct-thanks { border-left: 3px solid var(--accent); }
/* Rechter Kasten: so sieht der Newsletter aus (bzw. Antwortzusage) – wie ein Mailkopf mit Marken-Linie */
.nl-mock, .ct-aside { border-top: 3px solid var(--brand); padding: 12px 16px 14px; }
.nl-mock-kicker { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.nl-mock-title { margin: 2px 0 10px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.nl-mock-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 0; counter-reset: nl; }
.nl-mock-list li { position: relative; padding: 8px 0 8px 30px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.nl-mock-list li:first-child { border-top: 0; padding-top: 2px; }
.nl-mock-list li::before { counter-increment: nl; content: counter(nl); position: absolute; left: 0; top: 8px; width: 20px; height: 20px; border-radius: var(--radius-m);
    display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); }
.nl-mock-list li:first-child::before { top: 2px; }
.nl-mock-list b { font-size: 13px; }
.nl-mock-list span { font-size: 12px; color: var(--text-2); }
.nl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.nl-chip { display: inline-flex; gap: 4px; align-items: baseline; font-size: 11.5px; color: var(--text-2); padding: 1px 6px; border: 1px solid var(--line);
    border-radius: var(--radius-m); background: var(--surface-2); white-space: nowrap; }
.nl-chip b { font-weight: 700; color: var(--text); }
.nl-chip-up b { color: var(--up); }
.nl-chip-down b { color: var(--down); }
.nl-chip-note { font-size: 11px !important; margin-top: 2px; }
.nl-mock-foot { margin: 0; padding-top: 8px; border-top: 1px solid var(--line); }
.nl-state { margin: 4px 0 8px; font-size: 13px; padding: 6px 10px; border-radius: var(--radius-m); background: var(--surface-2); border: 1px solid var(--line); }
.nl-state-aktiv { border-left: 3px solid var(--accent); }
.nl-state-pending { border-left: 3px solid var(--warn); }
/* Bestätigen / Abmelden */
.nl-token { max-width: 560px; margin: 24px auto 32px; padding: 20px 22px 18px; border-top: 3px solid var(--brand); }
.nl-token h1 { font-size: 20px; margin: 0 0 6px; }
.nl-token .sub { font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
.nl-token-form { margin: 0 0 12px; }
.nl-token-form .button { min-height: 38px; padding: 6px 20px; font-size: 14px; }
.nl-token-links { margin: 0; }
.nl-token-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; margin-bottom: 8px;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.nl-token.is-error { border-top-color: var(--line-strong); }
@media (prefers-reduced-motion: no-preference) {
    .nl-token-mark { animation: nl-pop .26s ease-out; }
    @keyframes nl-pop { from { transform: scale(.6); opacity: 0; } }
}
/* Kontakt: Themen als große Auswahlfelder */
.ct-topics { border: 0; margin: 0; padding: 0; min-width: 0; }
.ct-topics legend { font-size: 12px; color: var(--text-2); font-weight: 600; padding: 0; margin-bottom: 6px; }
.ct-topic-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.ct-topic { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-l);
    background: var(--surface); cursor: pointer; transition: border-color .2s, background-color .2s; }
.ct-topic:hover { background: var(--hover); }
.ct-topic input { flex: none; margin: 2px 0 0; accent-color: var(--accent); }
.ct-topic span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ct-topic b { font-size: 13px; }
.ct-topic small { font-size: 12px; color: var(--text-2); line-height: 1.35; }
.ct-topic:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.ct-topic:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.ct-topics[aria-invalid="true"] .ct-topic { border-color: color-mix(in srgb, var(--down) 50%, var(--line-strong)); }
.ct-row { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .ct-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.ct-opt { font-style: normal; font-weight: 400; }
.ct-form textarea { resize: vertical; min-height: 140px; line-height: 1.45; }
.ct-count { margin: -4px 0 0; }
.ct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ct-actions .button { min-height: 38px; padding: 6px 18px; font-size: 14px; }
.ct-privacy { margin: 0; flex: 1 1 220px; }
.error-contact { margin-top: 18px; }
/* Kontakt-Eingang (Admin) */
.ct-tabs { margin-bottom: 12px; }
.ct-inbox { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.ct-msg { padding: 10px 14px; }
.ct-msg.is-open { border-left: 3px solid var(--accent); }
.ct-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ct-from { font-size: 14px; }
.ct-mail { font-size: 13px; overflow-wrap: anywhere; }
.ct-time { margin-left: auto; }
.ct-tag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-m); background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); }
.ct-tag-fehler { color: var(--warn); }
.ct-body { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; max-width: 90ch; }
.ct-msg-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; border-top: 1px solid var(--line); padding-top: 6px; }
.ct-msg-foot .inline-form { margin: 0; }
/* Newsletter-Vorschau (Admin): die Mail als helles Blatt wie im Mailprogramm, auch im Dunkelmodus */
.nlp-meta { display: grid; gap: 10px; margin-bottom: 14px; }
.nlp-lock code, .nlp-lock { overflow-wrap: anywhere; }
.nlp-counts { max-width: 520px; }
.nlp-mail { margin-bottom: 14px; }
.nlp-subject { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.nlp-subject span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin-right: 6px; }
.nlp-frame { color-scheme: light; background: #FFFFFF; color: #1D1D1F; border: 1px solid var(--line-strong); border-radius: var(--radius-l); padding: 24px 16px; overflow-x: auto; }
/* Tabellen der Mail ohne Seiten-Stile (Zebra, Hover, Schriftgröße) – so wie im Mailprogramm */
.nlp-frame table { font-size: inherit; }
.nlp-frame tbody tr:nth-child(even), .nlp-frame tbody tr:hover, .nlp-frame tr { background: transparent; }
.nlp-frame td { white-space: normal; }
.form .field-error { margin-top: -6px; }
.nlp-text summary h2 { display: inline; font-size: 14px; margin: 0; }
.nlp-text pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.5; max-width: 90ch; }

/* ---------- „Zone merken“ (Tommy 13.10.2026): eigene Farbe --saved, getrennt von der Zone der Regel ---------- */
.key-saved {
    width: 12px; height: 10px; border-radius: 1px; border: 1px dashed var(--saved);
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--saved) 35%, transparent) 0 2px, transparent 2px 5px);
}
.sz-card { margin: 12px 0; display: grid; gap: 8px; }
.sz-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.sz-title { font-size: 15px; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.sz-meta { color: var(--text-2); }
.sz-show { margin: 0 0 0 auto; }
.sz-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sz-note-input { flex: 1 1 220px; min-width: 0; max-width: 420px; }
.sz-tf { padding: 0; margin: 0; }
.sz-tf label { font-size: 13px; padding: 4px 10px; border-right: 1px solid var(--line); cursor: pointer; white-space: nowrap; }
.sz-tf label:last-child { border-right: 0; }
.sz-tf input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sz-tf label:has(input:checked) { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.sz-tf label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.sz-help, .sz-limit, .sz-status { margin: 0; }
.sz-help { color: var(--text-2); max-width: 90ch; }
.sz-status:empty { display: none; }
.sz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sz-item {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 8px 10px;
    border: 1px dashed color-mix(in srgb, var(--saved) 60%, transparent); border-left: 3px solid var(--saved); border-radius: var(--radius-m);
    background: color-mix(in srgb, var(--saved) 5%, var(--surface));
}
.sz-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.sz-tf-pill { color: var(--saved); border-color: color-mix(in srgb, var(--saved) 50%, transparent); }
.sz-label { font-weight: 600; font-size: 13px; }
.sz-sym { color: inherit; }
.sz-values { grid-column: 1; display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0; font-size: 13px; }
.sz-values div { display: flex; gap: 6px; }
.sz-values dt { color: var(--text-2); }
.sz-values dd { margin: 0; }
.sz-note { grid-column: 1; margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.sz-del, .sz-del-form { grid-column: 2; grid-row: 1 / span 3; justify-self: end; margin: 0; }
.sz-guest-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sz-guest-row p { margin: 0; flex: 1 1 260px; }
.sz-page-list { margin-top: 12px; }
@media (prefers-reduced-motion: no-preference) {
    .sz-new { animation: sz-in 260ms var(--ease); }
    @keyframes sz-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 560px) {
    .sz-show { margin-left: 0; }
    .sz-note-input { max-width: none; flex-basis: 100%; }
}
.sz-guest .button:disabled { color: var(--text-2); border-style: dashed; background: transparent; cursor: not-allowed; }
.sz-page-list + .legal-note { margin-top: 12px; }

/* ---------- Anzeigemodus Kompakt (Leitbild 13.10.2026, Konzept docs/startseite-vorschlag.md) ----------
   html[data-anzeige="kompakt"]: Gäste über theme-boot.js (localStorage sct.anzeige), Konten vom Server (users.anzeige).
   Ein Haken: reine Erklärungen tragen .erkl (aus), Erklär-Aufklapper details[data-erkl] starten zu. Nie .erkl: .legal-note,
   „nicht belegt“, Stand/Quelle, Kauf-/Ungültig-Marken, Fehler- und Leerzustände. ⓘ-Knöpfe bleiben in beiden Modi. */
html[data-anzeige="kompakt"] .erkl { display: none !important; }
/* bis app.js die Aufklapper geschlossen hat, Inhalt verbergen (Gäste: Server rendert offen) – kein Aufblitzen. Nur mit JavaScript
   (Klasse sct-js aus theme-boot.js): ohne JS bliebe der Inhalt sonst auch nach dem Aufklappen unsichtbar (N3). */
html.sct-js[data-anzeige="kompakt"] details[data-erkl]:not([data-erkl-bereit]) > :not(summary) { display: none; }

/* Gemeinsamer Aufklapper für Erklärungen (Standard offen) */
details[data-erkl] > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; border-radius: 2px; }
details[data-erkl] > summary::-webkit-details-marker { display: none; }
details[data-erkl] > summary::before { content: none; }
details[data-erkl] > summary::after, .quote-brief > summary::after {
    content: ""; flex: none; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    opacity: .7; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease);
}
details[data-erkl][open] > summary::after, .quote-brief[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
details[data-erkl] > summary:hover, .quote-brief > summary:hover { color: var(--accent); }
details[data-erkl] > summary:focus-visible, .quote-brief > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
details[data-erkl] > summary > :is(h2, h3) { display: inline; margin: 0; }
.hc-why > summary { color: var(--text); }
.hc-why > p { margin: 2px 0 0; }
.ma-text-d > p { margin: 6px 0 0; }
.learn-try-d { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { details[data-erkl] > summary::after, .quote-brief > summary::after { transition: none; } }

/* Schalter im Fuß und Auswahl in den Einstellungen */
.footer-anzeige .link-button { font-size: inherit; }
.footer-anzeige .link-button[aria-pressed="true"]::before { content: "✓ "; }
.settings-anzeige { margin: 12px 0 4px; padding: 0; border: 0; display: grid; gap: 4px; }
.settings-anzeige legend { margin-bottom: 4px; padding: 0; font-weight: 600; }

/* Kurzporträt: Standard voll, Kompakt eine Zeile mit Stand und „mehr“ (Stand bleibt sichtbar, Kopie aria-hidden – der Text steht im Absatz) */
.quote-about-more, .quote-about-stand-k { display: none; font-size: 12.5px; }
html[data-anzeige="kompakt"] .quote-about { display: grid; grid-template-columns: minmax(0, max-content) auto auto; justify-content: start; align-items: baseline; column-gap: 8px; }
html[data-anzeige="kompakt"] .quote-about:not([data-about-open]) .quote-about-stand-k { display: inline; margin: 0; }
html[data-anzeige="kompakt"] .quote-about[data-about-open] .quote-about-text { grid-column: 1 / 3; }
@media (max-width: 560px) {   /* Handy: Text und „mehr“ in einer Zeile, Stand darunter */
    html[data-anzeige="kompakt"] .quote-about { grid-template-columns: minmax(0, 1fr) auto; }
    html[data-anzeige="kompakt"] .quote-about-stand-k { grid-column: 1; grid-row: 3; }
    html[data-anzeige="kompakt"] .quote-about-more { grid-column: 2; grid-row: 2; }
    html[data-anzeige="kompakt"] .quote-about[data-about-open] .quote-about-text { grid-column: 1; }
}
html[data-anzeige="kompakt"] .quote-about-h { grid-column: 1 / -1; }
html[data-anzeige="kompakt"] .quote-about:not([data-about-open]) .quote-about-text {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden;
}
html[data-anzeige="kompakt"] .quote-about-more { display: inline; }

/* Dichte: Listen und Tabellen enger (Zeilen ca. 28 px), Abstände kleiner */
html[data-anzeige="kompakt"] .list-row { min-height: 28px; padding-top: 2px; padding-bottom: 2px; }
html[data-anzeige="kompakt"] table.dense th, html[data-anzeige="kompakt"] table.dense td { padding-top: 2px; padding-bottom: 2px; height: 24px; }

/* Screener: Voreinstellungen als eine Linkzeile, „Warum?“ klein */
html[data-anzeige="kompakt"] .sc-presets { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-bottom: 8px; }
html[data-anzeige="kompakt"] .sc-preset { padding: 2px 0; border: 0; border-radius: 0; background: none; }
html[data-anzeige="kompakt"] .sc-preset .small { display: none; }
html[data-anzeige="kompakt"] .sc-preset[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--accent); background: none; }
html[data-anzeige="kompakt"] .list-screener .zw { margin-top: -6px; }
html[data-anzeige="kompakt"] .list-screener .zw > summary { min-height: 20px; font-size: 11.5px; font-weight: 500; }

/* Szenario-Karte: eine Spalte als Liste, ohne Punkte-Grafik (Wort und „x von y Richtlinien“ bleiben) */
html[data-anzeige="kompakt"] .sc-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
html[data-anzeige="kompakt"] .sc-dots { display: none; }

/* Backtest-Ergebnisse (/ergebnisse, Tommy 15.10.2026): Kennzahlen-Karten und Jahres-Balken (Breite = Betrag relativ zum größten Jahr) */
.res-h { margin: 22px 0 8px; font-size: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.res-kpis { margin-bottom: 10px; }
.res-years { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.res-years figcaption { margin-bottom: 6px; font-weight: 600; }
.res-years ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.res-years li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 5.5em; align-items: center; gap: 8px; font-size: 13px; }
.res-years li > .num { text-align: right; font-variant-numeric: tabular-nums; }
.res-bar { position: relative; display: block; height: 10px; border-radius: 3px; background: var(--line); overflow: hidden; }
.res-bar::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--text-2); opacity: .6; }
.res-bar i { position: absolute; top: 0; bottom: 0; width: calc(var(--w) / 2); border-radius: 3px; }
.res-bar i.pos { left: 50%; background: var(--up); }
.res-bar i.neg { right: 50%; background: var(--down); }
.res-bar i.pos.neutral { background: var(--text-2); }
.res-sub { margin: 14px 0 6px; font-size: 14px; }
.res-period { margin: 0 0 6px; }
.res-alt { font-size: 13px; }
.res-alt b { font-size: 15px; }
.res-rule > summary { cursor: pointer; list-style: none; }
.res-rule > summary h2 { display: inline; }
.res-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.res-card-grid dd, .res-card-grid dt { white-space: normal; text-overflow: clip; overflow: visible; }
html[data-anzeige="kompakt"] .res-years li { font-size: 12px; }
.res-read ul { margin: 6px 0 8px; padding-left: 18px; display: grid; gap: 6px; }
.home-results { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
@media (prefers-reduced-motion: no-preference) { .res-bar i { animation: res-grow .3s ease-out both; } }
@keyframes res-grow { from { width: 0; } to { width: calc(var(--w) / 2); } }
@media (max-width: 600px) { .res-years li { grid-template-columns: 5.5em minmax(0, 1fr) 4.8em; font-size: 12px; } }
@media (min-width: 901px) { .res-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* /ergebnisse: Trades des Musterdepots je Jahr (dicht wie der Screener, waagrecht scrollbar nur in der Tabelle) */
.res-trades { margin: 4px 0 16px; }
.res-year { border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); margin-bottom: 4px; }
.res-year > summary { cursor: pointer; padding: 6px 10px; font-size: 13px; }
.res-year .table-wrap { overflow-x: auto; }
.res-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.res-table th, .res-table td { padding: 3px 10px; border-top: 1px solid var(--line); white-space: nowrap; text-align: left; }
.res-table th.num, .res-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Startseite „Marktbreite“ (Tommy 18.10.2026, src/Views/breadth_card.php) */
.breadth-words { margin: 0 0 8px; font-size: 14px; }
.breadth-card .breadth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.breadth-card .breadth-grid dt { white-space: normal; overflow: visible; text-overflow: clip; }
.breadth-card .breadth-grid .breadth-cmp { color: var(--text-2); font-weight: 400; font-size: 11px; margin: 2px 0 0; }
.breadth-split { height: 4px; margin: 4px 0 0; border-radius: 2px; background: var(--down); overflow: hidden; }
.breadth-split i { display: block; height: 100%; background: var(--up); }
.breadth-chart { margin: 10px 0 4px; }
.breadth-chart svg { display: block; width: 100%; height: 70px; overflow: visible; }
.breadth-chart polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.breadth-l200 { stroke: var(--accent, var(--up)); }
.breadth-l50 { stroke: var(--text-2); stroke-dasharray: 4 3; }
.breadth-mid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.breadth-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--text-2); margin-top: 4px; }
.breadth-k200::before, .breadth-k50::before { content: ""; display: inline-block; width: 14px; height: 0; margin-right: 5px; vertical-align: middle; border-top: 2px solid var(--accent, var(--up)); }
.breadth-k50::before { border-top: 2px dashed var(--text-2); }

/* ---------- Eigene Alarme (Tommy 19.10.2026): Knopf im Chart-Kopf, Dialog, Seite /meine-alarme ----------
   Farben nur aus Tokens; Grün/Rot bleiben Long/Short bzw. Gewinn/Verlust vorbehalten – Alarme nutzen Akzent (aktiv) und Warnton (ausgelöst). */
.alarm-btn {
    display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid var(--line-strong);
    border-radius: var(--radius-m); color: var(--text-2); font-size: 12px; font-weight: 600; background: transparent;
    transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.alarm-btn:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.alarm-btn.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.alarm-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.alarm-btn-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--accent-text);
    font-size: 10px; line-height: 16px; text-align: center; }
.alarm-btn-count[hidden] { display: none; }

.alarm-dialog { width: min(500px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; display: none; }
.alarm-dialog[open] { display: grid; gap: 12px; }
.alarm-dialog-head { display: flex; align-items: center; gap: 8px; }
.alarm-dialog-head h3 { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.alarm-x { font-size: 20px; line-height: 1; width: 32px; height: 32px; }
.alarm-guest-text { margin: 0; font-size: 14px; line-height: 1.5; }
.dialog .alarm-guest-text + .small { margin: 0; }

.alarm-form { gap: 12px; }
.alarm-form .field > label { font-size: 12px; color: var(--text-2); font-weight: 600; }
.alarm-form .field .small, .alarm-form > .small { margin: 0; }
.alarm-kinds { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.alarm-kinds legend { font-size: 12px; color: var(--text-2); font-weight: 600; padding: 0; margin-bottom: 6px; }
.alarm-kind {
    display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 8px; align-items: start; padding: 8px 10px; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface);
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.alarm-kind input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); }
.alarm-kind:hover { background: var(--hover); }
.alarm-kind:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.alarm-kind:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.alarm-kind.is-off { cursor: not-allowed; opacity: 1; color: var(--text-2); border-style: dashed; }
.alarm-kind.is-off:hover { background: var(--surface); }
.alarm-kind-text { display: grid; gap: 1px; min-width: 0; }
.alarm-kind-label { font-size: 14px; font-weight: 600; }
.alarm-kind-hint { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.alarm-price[hidden] { display: none; }
.alarm-price input { max-width: 220px; font-variant-numeric: tabular-nums; }
.alarm-freq, .alarm-mail { color: var(--text-2); }
.alarm-mail.is-missing { color: var(--warn); }
.alarm-status:empty { display: none; }
.alarm-status { font-weight: 600; }
.alarm-limit[hidden] { display: none; }
.alarm-form .dialog-actions { flex-wrap: wrap; }
.alarm-form .dialog-actions > span { min-width: 140px; }
.alarm-mine { border-top: 1px solid var(--line); padding-top: 10px; }
.alarm-mine[hidden] { display: none; }
.alarm-mine-title { margin: 0 0 6px; font-size: 13px; }
.alarm-mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.alarm-mini { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.alarm-mini-note { color: var(--text-2); overflow-wrap: anywhere; }
.pill.alarm-st-active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pill.alarm-st-triggered { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }

.alarm-meta { color: var(--text-2); margin: 0; }
.alarm-limit-note { margin: 0 0 12px; color: var(--text-2); max-width: 90ch; }
.alarm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alarm-item {
    display: grid; gap: 4px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    border-left: 3px solid var(--accent);
}
.alarm-item.alarm-is-triggered { border-left-color: var(--warn); }
.alarm-item.alarm-is-paused { border-left-color: var(--line-strong); }
.alarm-item p { margin: 0; }
.alarm-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.alarm-name { color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.alarm-item-head .pill { margin-left: auto; }
.alarm-what { display: flex; align-items: center; gap: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.alarm-when, .alarm-note { color: var(--text-2); overflow-wrap: anywhere; }
.alarm-trigger { font-variant-numeric: tabular-nums; }
.alarm-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; margin-top: 4px; }
.alarm-actions form { margin: 0; }
.alarm-edit { flex: 0 1 auto; }
.alarm-edit summary { list-style: none; }
.alarm-edit summary::-webkit-details-marker { display: none; }
.alarm-edit[open] { flex-basis: 100%; order: 3; }
.alarm-edit-form { margin-top: 8px; max-width: 360px; }
.alarm-del { margin-left: auto !important; }
.alarm-page-form { padding: 14px; max-width: 560px; }
.alarm-list + .legal-note { margin-top: 12px; }
@media (prefers-reduced-motion: no-preference) {
    .alarm-dialog[open] { animation: alarm-in 220ms var(--ease); }
    .alarm-new { animation: alarm-in 240ms var(--ease); }
}
@keyframes alarm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
    .alarm-dialog { padding: 14px; }
    .alarm-price input { max-width: none; }
    .alarm-item-head .pill { margin-left: 0; }
}

/* ── Stufen und Preise (Plan Teil 27, Tommy 19.10.2026): Kennzeichen, Preisseite /preise, Startseiten-Abschnitt, Hinweis-Seite der
   Erweiterten Auswahl. Ruhig: keine Stufe hervorgehoben, kein Rot, keine Animation außer kurzer Rückmeldung beim Umschalten. ── */
.plan-tag {
    display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: var(--radius-m);
    font-size: 11px; font-weight: 700; line-height: 18px; letter-spacing: .01em; text-decoration: none; white-space: nowrap; vertical-align: 1px;
    color: var(--text); background: color-mix(in srgb, var(--brand) 18%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
}
.plan-tag::before { content: "ab"; font-weight: 400; color: var(--text-2); }
:lang(en) .plan-tag::before { content: "from"; }   /* Sprache (Plan Teil 32): CSS-Texte über :lang() */
.plan-tag:hover { text-decoration: none; background: color-mix(in srgb, var(--brand) 28%, transparent); }
.plan-tag-premium { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.plan-tag-premium:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.sc-ext-more, .fav-usage { color: var(--text-2); margin: 6px 0 10px; }
.sc-ext-more .num, .fav-usage { font-variant-numeric: tabular-nums; }
.plan-next { margin-top: 8px; }

/* Preisseite */
.pr { margin: 16px 0 28px; }
.pr-billing { display: inline-flex; gap: 0; margin: 0 0 14px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.pr-billing input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pr-billing label { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2); }
.pr-billing input:checked + label { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.pr-billing input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.pr-billing-note { font-size: 11.5px; font-weight: 400; color: var(--text-2); }
.pr-tiers { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .pr-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pr-tier { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; }
.pr-tier-head { display: flex; align-items: center; gap: 8px; }
.pr-tier-head h2 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.pr-role { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.pr-price { min-height: 86px; }
.pr-amount { margin: 2px 0 0; font-size: clamp(26px, 3.2vw, 32px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pr-per { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.pr-note { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.pr-note .num { color: var(--text); font-weight: 600; }
.pr-founder { margin: 8px 0 0; padding: 6px 8px; border-radius: var(--radius-l); font-size: 12.5px; background: var(--surface-2); color: var(--text-2); }
.pr-founder .num { color: var(--text); font-weight: 700; }
.pr-who { margin: 4px 0 0; font-size: 13.5px; }
.pr-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.pr-points li { display: flex; gap: 8px; align-items: flex-start; overflow-wrap: anywhere; }
.pr-points .pc-yes { margin-top: 2px; flex: none; }
.pr-cta { margin-top: auto; padding-top: 8px; }
/* Monat/Jahr ohne JavaScript: ohne :has stehen beide Preise untereinander */
@supports selector(:has(*)) {
    .pr .pr-y { display: none; }
    .pr:has(#pr-jahr:checked) .pr-y { display: block; }
    .pr:has(#pr-jahr:checked) .pr-m { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
    /* nur Rückmeldung auf Bedienung (Umschalter), kein Einblenden beim Laden – Preise sind sofort voll lesbar */
    .pr-billing label { transition: background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease); }
}
.pr-facts { margin-top: 14px; max-width: 75ch; font-size: 13.5px; }
.pr-facts p { margin: 0 0 6px; }
.pr-sec { margin: 28px 0 10px; font-size: 18px; }
.pr-table thead th.pc-col { min-width: 88px; }
.pr-faq { max-width: 75ch; }
.pr-faq .disclosure { margin-top: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pr-faq .disclosure summary { margin-bottom: 0; font-weight: 600; }
.pr-faq .disclosure p { margin: 8px 0 2px; color: var(--text-2); }
@media (max-width: 480px) {
    .pr-billing { display: flex; }
    .pr-billing label { flex: 1; justify-content: center; padding: 6px 8px; }
    .pr-tier { padding: 14px; }
    .pr-table thead th.pc-col { min-width: 0; font-size: 10px; letter-spacing: 0; }
    /* Handy: drei Stufen-Spalten ohne seitliches Wischen – Mengen dürfen umbrechen („200 / Werte“) */
    .pr-table .pc-col { white-space: normal; width: auto; padding-left: 3px !important; padding-right: 3px !important; font-size: 12px; }
    .pr-table .pc-feature { padding-right: 6px !important; }
}

/* Startseite: ruhiger Abschnitt weit unten */
.plans-strip { margin: 28px 0 8px; padding: 18px 0 0; border-top: 1px solid var(--line); }
.plans-strip h2 { margin: 0 0 10px; font-size: 17px; }
.plans-strip-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .plans-strip-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plans-strip-item { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; }
.plans-strip-item p { margin: 0; }
.plans-strip-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.plans-strip-price { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.plans-strip-item .small { margin-top: 4px; }

/* Chart-Seite eines Werts der Erweiterten Auswahl ohne Beobachter */
.chart-locked .locked-card { max-width: 70ch; margin-top: 16px; }
.chart-locked .locked-card h2 { margin-top: 0; font-size: 18px; }
.locked-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Setups der Woche (Premium, Plan Teil 27) und Premium-Werkzeuge im Screener */
.sw-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .sw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sw-item { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; }
.sw-item p { margin: 0; }
.sw-item p + p { margin-top: 6px; }
.sw-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.sw-nr { min-width: 1.6em; color: var(--text-2); font-weight: 700; }
.sw-name { color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.sw-lage { font-weight: 600; }
.sw-text { font-size: 13.5px; line-height: 1.5; }
.sw-meta, .sw-links { color: var(--text-2); }
.sw-light { font-weight: 600; color: var(--text); }
.sw-preview .sw-item { border-style: dashed; }
.sw-archive { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 12px 0; }
.sw-archive a[aria-current="page"] { font-weight: 700; }
.sc-konf-off, .sc-csv-off { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); align-self: center; }
.sc-bar .sc-csv { white-space: nowrap; }

/* =====================================================================================================
   Startseite „ein Satz, ein Knopf“ (Tommy 19.10.2026: „zeigt zu viel auf einmal“), src/Views/overview_hero.php + overview_setup.php.
   Oben nur Nutzen und ein Hauptknopf, direkt darunter „Heute“ (Neu / Bald in der Kaufzone, Setups der Woche als Premium-Beispiel),
   dann Marktlage; Setup des Tages, Marktpuls, Heatmap und Tabellen ruhig unter „Mehr entdecken“. Kompakt: Kopf schrumpft, Erklärsätze aus.
   ===================================================================================================== */
.home-intro { display: grid; justify-items: start; gap: 14px; padding: clamp(16px, 3vw, 40px) clamp(2px, 1.6vw, 24px) clamp(18px, 2.6vw, 30px); }
.home-title { max-width: 26ch; font-size: clamp(28px, 2.4vw + 14px, 50px); line-height: 1.07; letter-spacing: -0.03em; }
.home-sub { margin: 0; max-width: 58ch; font-size: clamp(15px, .35vw + 13px, 18px); line-height: 1.5; color: var(--text-2); }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
.home-actions .button-lg { min-height: 44px; padding: 10px 22px; font-size: 15px; font-weight: 650; }
.home-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; }
.home-facts { margin: 0; color: var(--text-2); line-height: 1.6; }
.home-facts .num { font-weight: 700; color: var(--text); }
.home-legal { margin: 0; max-width: 64ch; padding: 0; background: none; border: 0; }

.home-today { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
@media (min-width: 720px) { .home-today { grid-template-columns: repeat(2, minmax(0, 1fr)); } .today-weekly { grid-column: 1 / -1; } }
@media (min-width: 1180px) { .home-today { grid-template-columns: repeat(3, minmax(0, 1fr)); } .today-weekly { grid-column: auto; } }
.today-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px 12px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-l); }
.today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.today-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.today-count { font-size: 28px; font-weight: 750; line-height: 1; letter-spacing: -0.02em; }
.today-sub { margin: 0; color: var(--text-2); line-height: 1.45; }
.today-term { color: var(--text-2); }
.today-list { list-style: none; margin: 2px 0 0; padding: 0; border-top: 1px solid var(--line); }
.today-list li { border-bottom: 1px solid var(--line); }
.today-row { display: grid; grid-template-columns: 6.2ch minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px;
    color: var(--text); transition: background .2s var(--ease); }
.today-row:hover { background: var(--hover); text-decoration: none; }
.today-row:focus-visible { outline-offset: -2px; }
.today-sym { font-weight: 750; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-name { display: grid; min-width: 0; font-size: 14px; line-height: 1.25; }
.today-name, .today-kind { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-kind { font-size: 12px; color: var(--text-2); }
.today-date { font-size: 12px; font-weight: 600; color: var(--zone); white-space: nowrap; }
.today-empty { margin: 4px 0; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-m); color: var(--text-2); }
.today-more { margin: auto 0 0; padding-top: 4px; font-size: 13px; font-weight: 600; }
.today-note { margin: 0; color: var(--text-2); }
.today-weekly .plan-tag { align-self: center; }
.today-sw { margin: 2px 0; grid-template-columns: minmax(0, 1fr) !important; }
.today-sw .sw-item { padding: 10px 12px; border-style: dashed; border-radius: var(--radius-l); }
.today-sw .sw-text { font-size: 13px; }

.home-markt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
@media (min-width: 900px) { .home-markt { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } }

.home-section { margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--line-strong); font-size: 13px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.home-setup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 10px; scroll-margin-top: 70px; }
@media (min-width: 1100px) { .home-setup { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } .home-setup-solo { grid-template-columns: minmax(0, 1fr); } }
.home-setup .join { margin: 0; grid-template-columns: minmax(0, 1fr); }
.home-setup .join-list { grid-template-columns: minmax(0, 1fr); }
.home-setup .join-title { white-space: normal; }

@media (max-width: 599px) {
    .home-actions { width: 100%; }
    .home-actions .button-lg { flex: 1 1 100%; justify-content: center; }
    .today-card { padding: 12px 12px 10px; }
    .today-list li:nth-child(n+5) { display: none; }   /* Handy: vier Einträge, „Alle … Werte“ führt weiter */
    .today-sw .sw-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) { .today-row { transition: none; } }

/* Kompakt: Kopf auf eine Zeile Größe, dichte Ansicht wie vor dem Umbau */
html[data-anzeige="kompakt"] .home-intro { gap: 8px; padding: 10px 0 12px; }
html[data-anzeige="kompakt"] .home-title { max-width: none; font-size: 22px; letter-spacing: -0.015em; }
html[data-anzeige="kompakt"] .home-actions .button-lg { min-height: 34px; padding: 5px 14px; font-size: 13px; }
html[data-anzeige="kompakt"] .home-link { min-height: 34px; }
html[data-anzeige="kompakt"] .today-row { min-height: 30px; padding: 2px 6px; }
html[data-anzeige="kompakt"] .home-section { margin-top: 14px; padding-top: 10px; }

/* Aktienseite (Tommy 19.10.2026): Kopf „Was ist das?“ mit Firmenname, darunter die Ampel „Wo steht der Kurs zur Kaufzone?“ (zone_light_card.php).
   Lage-Wörter statt Bewertung; Farbe nur als Zusatz (Wort, Leiste und aria-current tragen die Aussage). Kaufzone in --zone, „nah dran“ in --warn. */
.quote-h1 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.quote-h1-name { font-size: .72em; font-weight: 500; color: var(--text-2); letter-spacing: -0.01em; }
.quote-brief-more { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.zl-card { --zl: var(--text-2); display: grid; gap: 8px; margin: 0 0 12px; padding: 14px 16px 12px; background: var(--surface);
    border: 1px solid var(--line); border-left: 4px solid var(--zl); border-radius: var(--radius-l); container-type: inline-size; }
.zl-in { --zl: var(--zone); }
.zl-nah, .zl-zurueck { --zl: var(--warn); }
.zl-weit, .zl-unter, .zl-keine { --zl: var(--text-2); }
.zl-q { margin: 0; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.zl-now { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.zl-light { align-self: center; width: 12px; height: 12px; border-radius: 50%; background: var(--zl); box-shadow: 0 0 0 4px color-mix(in srgb, var(--zl) 20%, transparent); }
.zl-keine .zl-light { background: transparent; border: 2px dashed var(--line-strong); box-shadow: none; }
.zl-word { font-size: clamp(20px, 1vw + 15px, 26px); font-weight: 750; letter-spacing: -0.015em; }
.zl-dist { font-size: 14px; color: var(--text-2); }
.zl-dist .num { font-weight: 700; color: var(--text); }
.zl-track { max-width: 760px; list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.zl-step { display: grid; gap: 5px; min-width: 0; font-size: 12px; color: var(--text-2); }
.zl-step::before { content: ""; height: 8px; border-radius: 2px; background: var(--surface-2); border: 1px solid var(--line); }
.zl-step-zone::before { background: color-mix(in srgb, var(--zone) 22%, var(--surface)); border-color: color-mix(in srgb, var(--zone) 45%, transparent); }
.zl-step.is-now::before { background: var(--zl); border-color: var(--zl); }
.zl-step.is-now { font-weight: 700; color: var(--text); }
.zl-step span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zl-text { margin: 0; max-width: 80ch; font-size: 14px; line-height: 1.5; }
.zl-foot { margin: 0; color: var(--text-2); }
@container (max-width: 420px) { .zl-step span { white-space: normal; line-height: 1.2; } }
.chart-locked .zl-q { margin: 0 0 4px; }
@media (prefers-reduced-motion: no-preference) { .zl-step::before { transition: background .25s var(--ease); } }

/* Preise sichtbar am Ort des Mehrwerts (Tommy 19.10.2026): Screener-Karte „+ N weitere Aktien ab Beobachter“ mit Beispielnamen (nur Name und
   Branche), /preise oben „Für wen?“ je Stufe. Ruhig: kein Pop-up, kein Blur, kein Countdown, keine Stufe hervorgehoben. */
.sc-ext-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 20px; align-items: center; margin: 10px 0 12px; padding: 12px 16px;
    background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-l); }
@media (min-width: 900px) { .sc-ext-card { grid-template-columns: minmax(0, 14fr) minmax(0, 20fr) auto; } }
.sc-ext-h { margin: 0; font-size: 16px; font-weight: 700; }
.sc-ext-card .sc-ext-more { margin: 2px 0 0; }
.sc-ext-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sc-ext-list a { display: inline-flex; align-items: baseline; gap: 6px; min-height: 32px; padding: 5px 10px; max-width: 100%;
    border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); color: var(--text); }
.sc-ext-list a:hover { background: var(--hover); text-decoration: none; }
.sc-ext-list a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sc-ext-list a .small { color: var(--text-2); }
.sc-ext-etc { align-self: center; color: var(--text-2); }
.sc-ext-cta { margin: 0; }
.sc-ext-cta .button { white-space: nowrap; }
.pr-forwhom { margin: 0 0 14px; }
.pr-forwhom-h { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.pr-forwhom-list { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
@media (min-width: 820px) { .pr-forwhom-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
.pr-forwhom-list > div { padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.pr-forwhom-list dt { font-weight: 700; }
.pr-forwhom-list dd { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
/* Zonen-Verlauf: Hinweis „ab Premium“ gut sichtbar am Ort des Mehrwerts (19.10.2026) */
.zh-premium { padding: 6px 8px; line-height: 1.8; border: 1px dashed var(--line-strong); border-radius: var(--radius-m); }
.today-title { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
/* „Mehr entdecken“ als Aufklapper (19.10.2026): Desktop offen, Handy eingeklappt (home-tour.js collapseOnPhone) */
.home-more > summary.home-section { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; cursor: pointer; list-style: none; }
.home-more > summary::-webkit-details-marker { display: none; }
.home-more > summary h2 { margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--text); }
.home-more > summary::before { content: ""; align-self: center; width: 7px; height: 7px; margin-right: 2px; border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--ease); }
.home-more[open] > summary::before { transform: rotate(45deg); }
.home-more-sub { font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.home-more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .home-more > summary::before { transition: none; } }
.quote-zone-link:hover { text-decoration: none; filter: brightness(1.05); }

/* ── Bezahlgrenze (Plan Teil 28, Tommy 19.10.2026): Ziele/Stop und Vorsprung ab Beobachter. Gesperrtes zeigt nur das Kennzeichen „ab Beobachter“
   (.plan-tag) und echte Anzahlen – kein Blur, kein Countdown, keine erfundene Knappheit. Ruhig gestrichelt wie die Karte der Erweiterten Auswahl. ── */
.sc-up { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 20px; align-items: center; margin: 10px 0 12px; padding: 12px 16px;
    background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-l); }
@media (min-width: 900px) { .sc-up { grid-template-columns: minmax(0, 1fr) auto; } }
.sc-up-h { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.sc-up-h .num { font-variant-numeric: tabular-nums; }
.sc-up-list { margin: 0; padding-left: 18px; color: var(--text-2); display: grid; gap: 2px; }
.sc-up-cta { margin: 0; }
.sc-up-cta .button { white-space: nowrap; }
.sc-lock, .today-lock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 8px 0 4px; padding: 8px 10px; font-size: 13px;
    color: var(--text-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-m); }
.sc-lock span, .today-lock span { min-width: 0; overflow-wrap: anywhere; }
.today-lock { margin: 6px 0 2px; }
.sc-exit-lock { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sc-exit-lock .small { color: var(--text-2); }
.plan-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; font-size: 11.5px; color: var(--text-2); }
.plan-lock-row { color: var(--text-2); white-space: normal; }
.home-up { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 6px 0 0; color: var(--text-2); }
.home-up span { min-width: 0; overflow-wrap: anywhere; }
.tplan-row .tplan-lock { grid-column: 2 / -1; justify-self: end; }
.tplan.is-locked .tplan-row-tp1 .tplan-what, .tplan.is-locked .tplan-row-tp2 .tplan-what, .tplan.is-locked .tplan-row-stop .tplan-what { color: var(--text-2); }
.tplan-locked { display: block; }
.tplan-locked .plan-tag { margin-right: 4px; }
.zl-up { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0; font-size: 13px; }
.zl-neu { --zl: var(--zone); }
.hc-kv-lock { grid-column: span 3; }
.hc-kv-lock dd:not(.hc-note) { font-size: 13px; }
@container hc (max-width: 599.98px) { .hc-kv-lock { grid-column: span 1; } }
.wa-plan-lock b { font-weight: 400; }
.ws-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

/* ── Technik-Ansicht (Plan Teil 29, Tommy 19.10.2026): Bild ohne Setup und ohne Wellenzählung – ruhige, dünne Linien in den vorhandenen
   Chartfarben; Widerstand/Unterstützung als blasse Bänder, die letzte Kaufzone gestrichelt, Ziel nur im Konto-Bild ab Beobachter. ── */
.wc .wc-tk-zone { fill: var(--fib); fill-opacity: .08; stroke: var(--fib); stroke-opacity: .6; }
.wc .wc-tk-res { fill: var(--down); fill-opacity: .12; }
.wc .wc-tk-sup { fill: var(--up); fill-opacity: .12; }
.wc .wc-tk-fib { stroke: var(--fib); stroke-opacity: .55; }
.wc .wc-tk-sma { stroke: var(--text-2); stroke-opacity: .8; }
.wc .wc-tk-trend { stroke: var(--count); stroke-opacity: .85; }
.wc .wc-tk-goal { stroke: var(--chart-tp); }
.wc .wc-tk-l-res { fill: var(--down); }
.wc .wc-tk-l-sup { fill: var(--up); }
.wc .wc-tk-l-goal, .wc .wc-tk-lock { fill: var(--chart-tp); font-weight: 700; }
.wc .wc-tk-l-trend { fill: var(--count); }
.wc .wc-tk-trend-broken { stroke-opacity: .6; }
.wc .wc-tk-fibl { fill: var(--fib); font-size: 9.5px; opacity: .8; }
.ws-key-tk-sma { height: 0; border-top: 1.4px solid var(--text-2); border-radius: 0; vertical-align: middle; }
.ws-key-tk-res { background: color-mix(in srgb, var(--down) 30%, transparent); }
.ws-key-tk-sup { background: color-mix(in srgb, var(--up) 30%, transparent); }
.ws-key-tk-trend { height: 0; border-top: 1.4px solid var(--count); border-radius: 0; vertical-align: middle; }
.ws-key-tk-fib { height: 0; border-top: 1px dashed var(--fib); border-radius: 0; vertical-align: middle; }
.ws-key-tk-zone { background: color-mix(in srgb, var(--fib) 15%, transparent); border: 1px dashed var(--fib); }

/* ── Großes Bild (Plan Teil 30, Tommy 19.10.2026): mögliche Welle (2) höheren Grades im Bereich 1W – eigenes Wochenbild, linear; dieselben
   Chartfarben wie Analysebild und Technik-Ansicht, Zone blass, Zählung in der Wellenfarbe, Ungültig gestrichelt. ── */
.gb-block { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.card h3.gb-title { display: block; font-size: 1rem; font-weight: 650; text-transform: none; letter-spacing: -.01em; margin: 0 0 8px; }
.gb-sub { font-weight: 400; font-size: .875rem; color: var(--text-2); }
.wc .wc-gb-zone { fill: var(--fib); fill-opacity: .12; stroke: var(--fib); stroke-opacity: .7; }
.wc .wc-gb-inv { stroke: var(--chart-inv); stroke-opacity: .8; }
.wc .wc-gb-wave { stroke: var(--count); stroke-opacity: .9; }
.wc .wc-gb-c { stroke: var(--chart-tp); }
.wc .wc-gb-mark { fill: var(--count); font-weight: 700; }
.wc .wc-gb-l-zone { fill: var(--fib); }
.wc .wc-gb-l-inv { fill: var(--chart-inv); }
.wc .wc-gb-l-hoch { fill: var(--count); }
.wc .wc-gb-l-c, .wc .wc-gb-lock { fill: var(--chart-tp); font-weight: 700; }
.wc .wc-gb-l-c-done { font-weight: 400; opacity: .6; }
.ws-key-gb-wave { height: 0; border-top: 1.6px solid var(--count); border-radius: 0; vertical-align: middle; }
.ws-key-gb-zone { background: color-mix(in srgb, var(--fib) 18%, transparent); border: 1px dashed var(--fib); }
.ws-key-gb-inv { height: 0; border-top: 1.4px dashed var(--chart-inv); border-radius: 0; vertical-align: middle; }
.ws-key-gb-c { height: 0; border-top: 1.4px solid var(--chart-tp); border-radius: 0; vertical-align: middle; }
.sc-big { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius-l); background: color-mix(in srgb, var(--fib) 8%, transparent); border: 1px solid color-mix(in srgb, var(--fib) 25%, transparent); }

/* Startseite: Analysemethoden als eigenes Feld (Positionierung 20.10.2026). Desktop: rechts neben Satz und Hauptknopf (die Fläche war leer),
   Liste mit Kurzbeschreibung je Methode. Handy: zwei Spalten kompakter Knöpfe, Beschreibung erst im Screener. */
.home-methods-box { width: 100%; padding: 12px 14px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.home-methods-h { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--text-2); }
.home-methods-h .num { color: var(--text); }
.home-methods { list-style: none; margin: 0; padding: 0; }
.home-methods li + li { border-top: 1px solid var(--line); }
.home-methods a {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; min-height: 44px; padding: 6px 6px;
    color: var(--text); border-radius: var(--radius-m); transition: background-color .2s var(--ease);
}
.home-methods a::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; color: var(--text-2); transition: transform .2s var(--ease), color .2s var(--ease); }
.home-methods a:hover { text-decoration: none; background: var(--hover); }
.home-methods a:hover::after { color: var(--accent); transform: translateX(2px); }
.home-methods a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.home-methods strong { font-size: 14px; font-weight: 650; }
.home-methods .small { grid-column: 1; color: var(--text-2); line-height: 1.35; }
@media (min-width: 1100px) {
    .home-intro { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); column-gap: clamp(28px, 4vw, 64px); }
    .home-intro > * { grid-column: 1; }
    .home-intro > .home-methods-box { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
}
@media (max-width: 599px) {
    .home-methods-box { padding: 10px 10px 10px; }
    .home-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .home-methods li + li { border-top: 0; }
    .home-methods a { grid-template-columns: minmax(0, 1fr); min-height: 40px; padding: 6px 10px; border: 1px solid var(--line-strong); }
    .home-methods a::after, .home-methods .small { display: none; }
    .home-methods strong { font-size: 13px; line-height: 1.25; }
}
@media (prefers-reduced-motion: reduce) { .home-methods a, .home-methods a::after { transition: none; } }
html[data-anzeige="kompakt"] .home-methods .small { display: none; }
html[data-anzeige="kompakt"] .home-methods a { min-height: 30px; }

/* „Mehrere Methoden“: Plaketten je Analysemethode (Tommy 20.10.2026) */
.kf-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.kf-pill { white-space: normal; }

/* Analysebild der Zusatzmethoden (Tommy 20.10.2026, src/Charts/MethodSketch.php) */
.mk-fig { margin: .9rem 0 .4rem; }
.mk { width: 100%; height: auto; display: block; font-family: inherit; }
.mk-up { stroke: var(--up, #1a9d5c); fill: var(--up, #1a9d5c); }
.mk-dn { stroke: var(--down, #d6453d); fill: var(--down, #d6453d); }
.mk line.mk-up, .mk line.mk-dn { fill: none; stroke-width: 1; }
.mk-zone { fill: var(--accent, #2f6fed); fill-opacity: .14; }
.mk-stop, .mk-tp, .mk-line, .mk-trig { stroke-width: 1; stroke-dasharray: 5 4; fill: none; }
.mk-stop { stroke: var(--down, #d6453d); }
.mk-tp { stroke: var(--up, #1a9d5c); }
.mk-line { stroke: var(--text-2, #6b7280); }
.mk-trig { stroke: var(--text-2, #6b7280); stroke-opacity: .5; stroke-dasharray: 2 4; }
.mk-sma { fill: none; stroke: var(--accent, #2f6fed); stroke-width: 1.6; }
.mk-gap { fill: #e0a800; fill-opacity: .35; }
.mk-dot { fill: var(--accent, #2f6fed); }
.mk-note, .mk-lab, .mk-ax { fill: var(--text-2, #6b7280); font-size: 11px; }
.mk-lab { font-weight: 600; }
.mk-stoptxt { fill: var(--down, #d6453d); }
.mk-tptxt { fill: var(--up, #1a9d5c); }
.mk-zonetxt { fill: var(--accent, #2f6fed); }

/* Methoden-Karte: Status, Bild, Kennzahlen als Kacheln (Tommy 20.10.2026) */
.mc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.mc-head h2 { margin: 0; }
.mc-pill { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--up) 16%, transparent); color: var(--up); }
.mc-pill.is-near { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.mc-lead { margin: .5rem 0 0; color: var(--text-2); }
.mc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin: .8rem 0 .4rem; }
.mc-tile { padding: .6rem .8rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-l); }
.mc-tile dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin: 0 0 .15rem; }
.mc-tile dd { margin: 0; font-size: 15px; font-weight: 600; }
.mc-locked dd { font-weight: 500; font-size: 13px; }

/* =====================================================================================================
   Screener-Werkzeugleiste und Zusatz-Screener (Oberflächen-Durchsicht 20.10.2026)
   - .sc-bar als ruhige Leiste zwischen Filtern und Listen (Metazeile wirkte lose), Auswahl (Gruppe/Branche) in einer Zeile.
   - Eigene Spaltenraster für Methoden-, Fundamental- und „Mehrere Methoden“-Listen (sie erbten das Sechs-Spalten-Raster des
     Elliott-Screeners und ließen rechts eine leere Spalte); am Handy dichte Karten statt einer Zeile je Angabe.
   ===================================================================================================== */
.sc-bar { margin: 12px 0 4px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sc-bar .screener-meta { margin: 0; color: var(--text-2); line-height: 1.5; }
.sc-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.sc-pick label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; color: var(--text-2); }
.sc-pick select { width: auto; min-width: 150px; max-width: 240px; font-size: 13px; }
.sc-pick .button { min-height: 32px; }

.list-screener.list-method .list-head, .list-screener.list-method .list-row { grid-template-columns: minmax(180px, 1.5fr) minmax(130px, 1fr) minmax(120px, 1fr) minmax(170px, 1.2fr); }
.list-screener.list-fund .list-head, .list-screener.list-fund .list-row { grid-template-columns: minmax(200px, 1.6fr) minmax(140px, 1fr) minmax(220px, 1.4fr); }
.list-screener.list-konf .list-head, .list-screener.list-konf .list-row { grid-template-columns: minmax(200px, 1.4fr) minmax(140px, 1fr) minmax(260px, 2fr); }
.list-screener.list-method .sc-exit-lock { align-items: flex-start; }
.list-screener.list-method .list-head > .num, .list-screener.list-method .list-row > .num { text-align: left; justify-self: start; }
.list-screener:is(.list-fund, .list-konf) > .list-row > span:nth-child(2) { font-size: 13px; color: var(--text-2); }

@media (max-width: 767px) {
    .sc-bar { padding: 8px 0; }
    .sc-pick { width: 100%; }
    .sc-pick label { flex: 1 1 auto; }
    .sc-pick select { flex: 1 1 auto; min-width: 0; max-width: none; }

    /* Methoden-Liste: Name links, Lage-Plakette rechts; darunter Kaufzone mit Auslöser, dann Stop/Ziele in einer Zeile */
    .list-screener.list-method .list-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
    .list-screener.list-method .list-row > .sc-name { grid-column: 1; grid-row: 1; }
    .list-screener.list-method .list-row > .sc-lage { grid-column: 2; grid-row: 1; align-self: start; }
    .list-screener.list-method .list-row > .zone-cell { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .list-screener.list-method .list-row > [data-label] { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
    .list-screener.list-method .list-row > [data-label]::before { display: inline; margin: 0; }
    .list-screener.list-method .sc-exit-lock { flex-direction: row; }
    .list-screener.list-method .sc-exit-lock > .small { display: none; }   /* die Beschriftung davor sagt schon „Stop · Ziele“ */

    /* Fundamental und „Mehrere Methoden“: Kürzel und Name in einer Zeile, Branche klein, darunter Ampeln bzw. Plaketten ohne Extra-Beschriftung */
    .list-screener:is(.list-fund, .list-konf) .list-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-block: 8px; }
    .list-screener:is(.list-fund, .list-konf) .list-row > * { grid-column: 1; }
    .list-screener:is(.list-fund, .list-konf) .list-row .cell-name { flex-direction: row; align-items: baseline; gap: 6px; }
    .list-screener:is(.list-fund, .list-konf) .list-row > span:nth-child(2) { display: block; font-size: 12px; }
    .list-screener:is(.list-fund, .list-konf) .list-row > [data-label]::before { content: none; }
    .list-screener:is(.list-fund, .list-konf) .list-row > [data-label] { margin-top: 2px; }
}
/* Analysebild der Zusatzmethoden am Handy (20.10.2026): nicht unter 560 px schrumpfen (Beschriftungen waren ~6 px), wie svg.wc waagerecht
   verschiebbar mit Start rechts bei „heute“ (direction: rtl nur am Behälter, .wc-scroll). */
.mk-scroll { border: 0; background: none; }
.mk-scroll .mk { direction: ltr; }
@media (max-width: 599px) { .mk-scroll .mk { min-width: 560px; } }
/* Elliott-Screener am Handy (20.10.2026): keine leere Zeile „Fundamental –“ bei Werten ohne Ampeln; die Lage-Plakette braucht keine
   Beschriftung darüber (die Listenüberschrift sagt schon, worum es geht) – je Karte zwei Zeilen weniger. */
@media (max-width: 767px) {
    .list-screener .list-row > .sc-fund-none { display: none; }
    .list-screener .list-row > .sc-lage::before { content: none; }
}

/* Startseite: Hero mit Setup des Tages rechts (wie früher), darunter die Analysemethoden als Kachelleiste (Tommy 20.10.2026) */
.home-hero .home-intro { padding: clamp(6px, 1.2vw, 14px) 0; align-content: start; }
.home-hero .home-intro > * { grid-column: auto; }
.home-hero .home-setup-card { display: block; margin: 0; scroll-margin-top: 70px; }
.home-hero .home-setup-card .hero-card { margin: 0; }
.home-methods-strip { margin: 0 0 12px; }
.home-methods-strip .home-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 8px; }
.home-methods-strip .home-methods li + li { border-top: 0; }
.home-methods-strip .home-methods a { grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2, transparent); }
.home-methods-strip .home-methods a::after { display: none; }
.home-methods-strip .home-methods a:hover { border-color: var(--accent); }
.home-methods-strip .home-methods .small { display: block; }
@media (max-width: 599px) {
    .home-methods-strip .home-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-methods-strip .home-methods .small { display: none; }
}
.home-hero .home-intro { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) and (max-width: 1099px) {
    .home-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; padding: 24px 20px 18px; }
}
.home-hero .home-title { font-size: clamp(26px, 1.6vw + 14px, 42px); }

/* =====================================================================================================
   Gestaltungssystem 2026 (Tommy 20.10.2026: „einfach, verständlich, so richtig modern – es muss Spaß machen“)
   Ein gemeinsamer Schritt statt Einzellösungen je Seite – alles über Tokens und die vorhandenen Klassen:
   - Tiefe: weichere Radien (12/8 px) und zwei Schattenstufen; im Dunkelmodus eine feine Lichtkante statt grauer Schatten.
   - Ruhigere Überschriften: Kastenköpfe in normaler Schreibung statt GROSS + Grauleiste (wirkte tabellarisch).
   - Reaktion auf Bedienung: Karten heben sich beim Zeigen leicht an, Knöpfe geben nach – 200 ms, nur Transform/Schatten.
   - Bewegung mit Bedeutung: Seitenwechsel blenden weich über (View Transitions, die Kopfleiste bleibt stehen, die
     aktive Analysemethode gleitet zur neuen), das Analysebild der Zusatzmethoden baut sich von links nach rechts auf.
   - Methoden mit eigenem Zeichen (src/Views/method_icon.php): das Muster als Linienskizze.
   - Ein Verlauf nur im Startseiten-Hero (leiser Lichtschein), sonst keine.
   prefers-reduced-motion: keine Übergänge, kein Anheben, kein Aufbau. Modus „Kompakt“: kleinere Radien, keine Schatten/Hebung.
   ===================================================================================================== */
:root {
    --radius-l: 12px;
    --radius-m: 8px;
    --radius-s: 6px;
    --shadow-1: 0 1px 2px rgb(16 24 40 / .05), 0 1px 3px rgb(16 24 40 / .05);
    --shadow-2: 0 2px 4px rgb(16 24 40 / .04), 0 10px 24px -6px rgb(16 24 40 / .16);
    --shadow-3: 0 4px 10px rgb(16 24 40 / .05), 0 24px 48px -12px rgb(16 24 40 / .22);
    --lift: translateY(-2px);
    --hero-glow-a: color-mix(in srgb, var(--accent) 9%, transparent);
    --hero-glow-b: color-mix(in srgb, var(--brand) 9%, transparent);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --shadow-1: inset 0 1px 0 rgb(255 255 255 / .035), 0 1px 2px rgb(0 0 0 / .35);
        --shadow-2: inset 0 1px 0 rgb(255 255 255 / .05), 0 12px 28px -8px rgb(0 0 0 / .65);
        --shadow-3: inset 0 1px 0 rgb(255 255 255 / .06), 0 28px 56px -16px rgb(0 0 0 / .75);
        --hero-glow-a: color-mix(in srgb, var(--accent) 17%, transparent);
        --hero-glow-b: color-mix(in srgb, var(--brand) 10%, transparent);
    }
}
:root[data-theme="dark"] {
    --shadow-1: inset 0 1px 0 rgb(255 255 255 / .035), 0 1px 2px rgb(0 0 0 / .35);
    --shadow-2: inset 0 1px 0 rgb(255 255 255 / .05), 0 12px 28px -8px rgb(0 0 0 / .65);
    --shadow-3: inset 0 1px 0 rgb(255 255 255 / .06), 0 28px 56px -16px rgb(0 0 0 / .75);
    --hero-glow-a: color-mix(in srgb, var(--accent) 17%, transparent);
    --hero-glow-b: color-mix(in srgb, var(--brand) 10%, transparent);
}
html[data-anzeige="kompakt"] { --radius-l: 8px; --radius-m: 6px; --shadow-1: none; --shadow-2: none; --lift: none; }

:focus-visible { border-radius: var(--radius-s); }

/* Seitentitel: größer und feiner abgestuft */
h1 { font-size: clamp(22px, .9vw + 15px, 30px); font-weight: 750; letter-spacing: -0.022em; line-height: 1.15; }
.page-head { padding-bottom: 12px; margin-bottom: 16px; }

/* Flächen mit Tiefe */
.card, .panel, .list, .table-wrap, .mlage, .today-card, .home-methods-box, .pr-tier, .hero, .learn-card-link, .sc-preset { box-shadow: var(--shadow-1); }

/* Kastenköpfe: ruhige Überschrift statt GROSSBUCHSTABEN auf Grauleiste */
.panel-head, .mlage-head { background: transparent; padding: 10px 14px 8px; }
.panel-head h2, .panel-head h3, .mlage-title { font-size: 14px; font-weight: 700; letter-spacing: -0.005em; text-transform: none; }

/* Plaketten rund */
.pill, .plan-tag { border-radius: 999px; }
.pill { padding: 0 7px; }

/* Knöpfe: geben beim Klick nach, Hauptknopf mit Tiefe */
.button { border-radius: var(--radius-m); transition: background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.button-primary { box-shadow: 0 1px 2px rgb(16 24 40 / .12), 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.button-primary:hover { transform: var(--lift); box-shadow: 0 2px 4px rgb(16 24 40 / .12), 0 10px 22px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.button:active, .button-primary:active { transform: translateY(1px); }
.btn-signup { border-radius: var(--radius-m); transition: filter .2s var(--ease), transform .2s var(--ease); }
.btn-signup:hover { transform: var(--lift); }
.hdr-search { border-radius: var(--radius-m); transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.hdr-search:hover { background: #10131A; }

/* Karten, die man anklicken kann, heben sich beim Zeigen leicht an */
a.learn-card-link, .sc-preset, .home-methods-strip .home-methods a {
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
a.learn-card-link:hover, .sc-preset:hover, .home-methods-strip .home-methods a:hover { transform: var(--lift); box-shadow: var(--shadow-2); }
a.learn-card-link:hover { background: var(--surface); }
a.learn-card-link:active, .sc-preset:active, .home-methods-strip .home-methods a:active { transform: none; box-shadow: var(--shadow-1); }

/* ---------- Startseite: Hero mit leisem Lichtschein (einziger Verlauf der Seite) ---------- */
.home-hero {
    position: relative; overflow: hidden; border-top: 1px solid var(--line); box-shadow: var(--shadow-2);
    background:
        radial-gradient(900px 420px at -5% -10%, var(--hero-glow-a), transparent 65%),
        radial-gradient(700px 380px at 105% -10%, var(--hero-glow-b), transparent 60%),
        var(--surface);
}
.home-hero::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 40%, var(--accent)) 45%, transparent 90%);
}
.home-hero .hero-card { box-shadow: var(--shadow-3); border-color: var(--line); background: var(--surface); }
@media (min-width: 1100px) { .home-hero { padding: 28px 28px 24px; gap: 32px; } }
.home-title { letter-spacing: -0.032em; }
.home-actions .button-lg { border-radius: 10px; }

/* Analysemethoden: Kacheln mit Zeichen */
.mi { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mi .mi-soft { stroke-width: 1.4; stroke-dasharray: 2 2.6; opacity: .6; }
.mi-konfluenz circle, .mi-gap rect { fill: currentColor; fill-opacity: .1; }
.home-methods-box { padding: 16px 16px 14px; }
.home-methods-h { margin: 0 0 10px; font-size: 15px; letter-spacing: -0.005em; color: var(--text); }
.home-methods-strip .home-methods { gap: 10px; }
.home-methods-strip .home-methods li { display: flex; min-width: 0; }
.home-methods-strip .home-methods li > a { flex: 1; }
.breadth-card > .breadth-words { padding: 10px 14px 0; }
.home-methods-strip .home-methods a {
    grid-template-columns: minmax(0, 1fr); row-gap: 3px; align-items: start; align-content: start; padding: 14px 14px 13px;
    border-color: var(--line); background: var(--surface);
}
.home-methods-strip .home-methods a > .mi {
    width: 36px; height: 36px; margin-bottom: 7px; padding: 7px; border-radius: 10px;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent);
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.home-methods-strip .home-methods a:hover > .mi { background: var(--accent); color: var(--accent-text); }
.home-methods-strip .home-methods strong { grid-column: 1; font-size: 14.5px; line-height: 1.3; }
.home-methods-strip .home-methods .small { grid-column: 1; font-size: 12.5px; line-height: 1.4; }
@media (max-width: 599px) {
    .home-methods-strip .home-methods { gap: 8px; }
    .home-methods-strip .home-methods a { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 10px; column-gap: 8px; border-color: var(--line); }
    .home-methods-strip .home-methods a > .mi { width: 30px; height: 30px; margin: 0; padding: 6px; border-radius: 8px; }
    .home-methods-strip .home-methods strong { grid-column: 2; font-size: 13px; }
}

/* ---------- Startseite: „Beliebte Screens“ oben rechts (Plan Teil 34, Tommy 27.10.2026) ----------
   Karte im Stil der Hero-Karte; je Screen Zeichen, Name, Erklärsatz, echte Trefferzahl (zählt hoch, motion.js) und ein dünner Balken = Anteil an den
   geprüften Aktien. Ab 440 px Kartenbreite zwei Spalten (Container Query), am Handy eine Spalte ohne Erklärsatz. Keine Grün/Rot-Farben. */
.home-screens {
    container: hs / inline-size; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-3);
}
.hs-head { display: grid; gap: 2px; }
.hs-title { margin: 0; font-size: 18px; font-weight: 750; letter-spacing: -0.015em; }
.hs-sub { margin: 0; color: var(--text-2); line-height: 1.45; }
.hs-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.hs-list li { display: flex; min-width: 0; }
.hs-row {
    flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center;
    column-gap: 10px; row-gap: 8px; padding: 10px 12px 9px; color: var(--text); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-m);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.hs-row:hover { text-decoration: none; border-color: var(--accent); transform: var(--lift); box-shadow: var(--shadow-2); }
.hs-row:active { transform: none; box-shadow: var(--shadow-1); }
.hs-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hs-row > .mi {
    grid-row: 1; width: 30px; height: 30px; padding: 6px; border-radius: 8px; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 11%, transparent); transition: background-color .2s var(--ease), color .2s var(--ease);
}
.hs-row:hover > .mi { background: var(--accent); color: var(--accent-text); }
.hs-text { display: grid; gap: 1px; min-width: 0; }
.hs-name { font-size: 14px; font-weight: 650; line-height: 1.3; }
.hs-expl { color: var(--text-2); font-size: 12.5px; line-height: 1.4; }
.hs-count { font-size: 22px; font-weight: 750; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hs-bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.hs-bar i { display: block; height: 100%; width: var(--share, 0%); border-radius: inherit; background: var(--accent); transform-origin: left center;
    animation: hsGrow .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms + 150ms); }
.hs-list li { --i: 0; }
@keyframes hsGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hs-note, .hs-foot { margin: 0; color: var(--text-2); line-height: 1.45; }
.hs-foot a { font-weight: 600; white-space: nowrap; }
@container hs (min-width: 440px) { .hs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
    .home-screens { padding: 14px 12px 12px; }
    .hs-row { padding: 8px 10px 7px; row-gap: 6px; }
    .hs-row > .mi { width: 26px; height: 26px; padding: 5px; }
    .hs-expl { display: none; }
    .hs-count { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .hs-row, .hs-row > .mi { transition: none; }
    .hs-row:hover { transform: none; }
    .hs-bar i { animation: none; }
}
html[data-anzeige="kompakt"] .home-screens { gap: 8px; padding: 12px; }
html[data-anzeige="kompakt"] .hs-expl { display: none; }
html[data-anzeige="kompakt"] .hs-row { padding: 6px 10px; row-gap: 5px; }
html[data-anzeige="kompakt"] .hs-row:hover { transform: none; }

/* Methoden-Kennzeichen je Zeile der Heute-Karten (Plan Teil 34): Zeichen + Zonen-Name vor der Branche */
.today-meth { display: inline-flex; align-items: center; gap: 3px; margin-right: 5px; font-size: 11.5px; font-weight: 650; color: var(--accent); }
.today-meth .mi { width: 12px; height: 12px; stroke-width: 2.2; }
.today-meth::after { content: "·"; margin-left: 2px; color: var(--text-2); font-weight: 400; }
.stat-lead { padding-top: 0; color: var(--text-2); }

/* ---------- Startseite: „Zonen heute“ mit Methoden-Umschalter (Plan Teil 34b, Tommy 27.10.2026) ----------
   Ein Bereich statt zweier Elliott-Karten: Reiterleiste (am Handy wischbar), darunter je Reiter „Heute neu“ und „Bald“ nebeneinander (Container
   Query). Ohne JS sind die Reiter Links, nur „Alle“ ist sichtbar; mit JS Tabs (zone-tabs.js). Keine Grün/Rot-Farben, Bewegung nur beim Wechsel. */
.home-today > .today-zones { grid-column: 1 / -1; }
@media (min-width: 1180px) { .home-today > .today-zones { grid-column: span 2; } }
.today-zones {
    container: zt / inline-size; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-1);
}
.zt-head { display: grid; gap: 2px; }
.zt-title { margin: 0; font-size: 19px; font-weight: 750; letter-spacing: -0.015em; }
.zt-sub { margin: 0; color: var(--text-2); line-height: 1.45; }
.zt-tabs {
    position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 -4px; padding: 2px 4px 4px;
}
.zt-tab {
    flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 12px 6px 9px; color: var(--text);
    font-size: 14px; font-weight: 600; white-space: nowrap; background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.zt-tab:hover { text-decoration: none; border-color: var(--accent); }
.zt-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.zt-tab .mi { width: 18px; height: 18px; color: var(--accent); }
.zt-n { min-width: 22px; padding: 1px 7px; font-size: 12px; font-weight: 700; text-align: center; color: var(--text-2);
    background: color-mix(in srgb, var(--text-2) 12%, transparent); border-radius: 999px; font-variant-numeric: tabular-nums; }
.zt-tab[aria-current="true"], .zt-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.zt-tab[aria-current="true"] .mi, .zt-tab[aria-selected="true"] .mi { color: var(--accent-text); }
.zt-tab[aria-current="true"] .zt-n, .zt-tab[aria-selected="true"] .zt-n { color: var(--accent-text); background: color-mix(in srgb, var(--accent-text) 20%, transparent); }
.zt-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.zt-panel[hidden] { display: none; }
.zt-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-m); }
.zt-panel > .today-card { box-shadow: none; background: var(--surface); }
.zt-panel .today-head h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.zt-note { grid-column: 1 / -1; margin: 0; color: var(--text-2); }
.zt-legal { margin: 0; }
@container zt (min-width: 600px) { .zt-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: no-preference) {
    .zt-panel.zt-in { animation: ztIn .22s var(--ease) both; }
    @keyframes ztIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .zt-tab { transition: none; } }
@media (max-width: 599px) {   /* Handy: eine wischbare Zeile statt Umbruch */
    .today-zones { padding: 14px 12px 10px; }
    .zt-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .zt-tab { min-height: 38px; font-size: 13px; }
}
html[data-anzeige="kompakt"] .today-zones { gap: 8px; padding: 12px; }
html[data-anzeige="kompakt"] .zt-tab { min-height: 32px; padding: 3px 10px 3px 8px; }

/* ---------- Wert-Seite: Reiter und Methoden-Überblick (Plan Teil 35, Tommy 27.10.2026) ----------
   Reiter wie „Zonen heute“ (.zt-tab) direkt im Kopf; die Karte „Was die Methoden zu … sagen“ als ruhige Liste: Zeichen, Name, Status in Worten,
   „Ansehen →“. Status ohne Grün/Rot (das bleibt Gewinn/Verlust): Zone = Akzent, gesperrt = Plakettenfarbe, nichts = grau. */
.quote-head > .cm-tabs { flex: 0 0 100%; margin-top: 2px; }
.cov { display: grid; gap: 10px; }
.cov-h { margin: 0; font-size: 18px; font-weight: 750; letter-spacing: -0.015em; }
.cov-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.cov-row {
    display: grid; grid-template-columns: auto minmax(8ch, 13rem) minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px;
    padding: 8px 12px; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface);
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.cov-row:hover { text-decoration: none; border-color: var(--accent); }
.cov-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cov-row > .mi { width: 30px; height: 30px; padding: 6px; border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); }
.cov-name { font-weight: 650; }
.cov-state { min-width: 0; font-size: 14px; color: var(--text-2); }
.cov-in, .cov-near { color: var(--zone); font-weight: 650; }
.cov-in::before, .cov-near::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.cov-near::before { background: transparent; border: 2px solid currentColor; width: 6px; height: 6px; }
.cov-locked { color: var(--text); }
.cov-go { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.cov-note { margin: 0; color: var(--text-2); }
@media (max-width: 599px) {
    .cov-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 2px; }
    .cov-row > .mi { grid-row: 1 / span 2; width: 28px; height: 28px; }
    .cov-state { grid-column: 2; grid-row: 2; font-size: 13px; }
    .cov-go { grid-column: 3; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) { .cov-row { transition: none; } }
html[data-anzeige="kompakt"] .cov-row { min-height: 34px; padding: 4px 10px; }

/* ---------- Screener: Reiter und beliebte Screens (Plan Teil 37, Tommy 27.10.2026) ----------
   Reiter wie die Wert-Seite (.zt-tab, runde Pillen = Ansicht wählen). Die beliebten Screens darunter sind eine Ebene tiefer: eckigere Knöpfe mit
   Zeichen und der echten Trefferzahl (zählt einmal hoch, motion.js). Am Handy wischbar; position: relative, damit .sr-only die Seite nicht verbreitert. */
.sc-tabs { margin: 0 -4px 14px; }
.sc-pop { display: grid; gap: 6px; margin: 0 0 14px; }
.sc-pop-h { margin: 0; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.sc-pop-list { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sc-pop-list > li { flex: none; }
.sc-pop-b {
    display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 4px 6px 4px 9px; color: var(--text);
    font-size: 13.5px; font-weight: 600; white-space: nowrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.sc-pop-b:hover { text-decoration: none; border-color: var(--accent); }
.sc-pop-b:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sc-pop-b .mi { width: 16px; height: 16px; color: var(--accent); }
.sc-pop-n {
    min-width: 26px; padding: 1px 7px; font-size: 12px; font-weight: 700; text-align: center; color: var(--text-2); border-radius: 999px;
    background: color-mix(in srgb, var(--text-2) 12%, transparent); font-variant-numeric: tabular-nums;
}
.sc-pop-b[aria-current="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.sc-pop-b[aria-current="true"] .sc-pop-n { color: var(--text); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.sc-pop .sc-preset-now, .sc-pop-note { margin: 0; }
.sc-pop-note { color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .sc-pop-b { transition: none; } }
@media (max-width: 599px) {
    .sc-pop-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 2px 4px 4px; }
    .sc-pop-list::-webkit-scrollbar { display: none; }
    .sc-pop-b { min-height: 38px; font-size: 13px; }
}
html[data-anzeige="kompakt"] .sc-pop-b { min-height: 30px; padding: 2px 6px 2px 8px; }
html[data-anzeige="kompakt"] .sc-pop-b .mi { display: none; }

/* Heute-Karten: Zahl als Blickfang, Zeilen weicher */
.today-card { padding: 18px 18px 14px; gap: 10px; }
.today-head h2 { font-size: 18px; }
.today-count { font-size: 34px; letter-spacing: -0.035em; color: var(--text); }
.today-row { border-radius: var(--radius-m); transition: background-color .2s var(--ease); }
.today-list { border-top: 0; }
.today-list li { border-bottom: 0; }
.today-list li + li { border-top: 1px solid var(--line); }

/* Leere Zustände: freundliches Zeichen statt nackter Grauzeile */
.today-empty, .card.empty { --empty-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M7.5 10.5h6'/%3E%3C/svg%3E"); }
.today-empty { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px dashed var(--line-strong); background: transparent; border-radius: var(--radius-m); }
.today-empty::before, .card.empty::before {
    content: ""; flex: none; display: block; width: 22px; height: 22px; background: var(--accent);
    -webkit-mask: var(--empty-ic) center / contain no-repeat; mask: var(--empty-ic) center / contain no-repeat;
}
.card.empty { padding: 32px 16px; border-style: dashed; box-shadow: none; }
.card.empty::before { display: block; margin: 0 auto 10px; }

/* Screener-Voreinstellungen */
.sc-presets { gap: 8px; }
.sc-preset { padding: 10px 12px; border-radius: var(--radius-m); }
.sc-preset[aria-current="true"] { box-shadow: inset 3px 0 0 var(--accent), var(--shadow-1); }

/* Preise: Stufen mit Tiefe, Zahl groß */
.pr-tier { border-radius: 16px; padding: 22px; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.pr-tier:hover { box-shadow: var(--shadow-2); }
.pr-amount { font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -0.03em; }
.pr-founder { border-radius: var(--radius-m); }

/* Analysebild der Zusatzmethoden baut sich auf: Kerzen von links nach rechts, danach Zone, Linien und Beschriftungen */
@media (prefers-reduced-motion: no-preference) {
    .mk-fig .mk { animation: mkWipe .9s cubic-bezier(.3, .7, .2, 1) both; }
    .mk-fig .mk :is(.mk-zone, .mk-line, .mk-stop, .mk-tp, .mk-trig, .mk-sma) { animation: mkFade .45s var(--ease) .75s both; }
    .mk-fig .mk :is(.mk-note, .mk-lab, .mk-dot, .mk-stoptxt, .mk-tptxt, .mk-zonetxt) { animation: mkFade .4s var(--ease) 1s both; }
    .mk-fig .mk .mk-zone { transform-box: fill-box; transform-origin: left center; animation-name: mkZone; }
}
@keyframes mkWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mkFade { from { opacity: 0; } }
@keyframes mkZone { from { opacity: 0; transform: scaleX(.2); } }

/* Methoden-Karte im Chart: am breiten Bildschirm Bild links, Kennzahlen als Spalte rechts (das Bild wurde sonst über 600 px hoch,
   Beschriftungen riesig); Status-Plakette neutral in Zonenfarbe (Grün/Rot nur für Ziel/Stop) */
.mc-pill { background: color-mix(in srgb, var(--zone) 16%, transparent); color: var(--zone); }
.method-card { padding: 16px 18px 12px; }
@media (min-width: 1000px) {
    .method-card:has(> .mk-fig) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); column-gap: 24px; grid-auto-flow: row dense; }
    .method-card:has(> .mk-fig) > * { grid-column: 1 / -1; }
    .method-card:has(> .mk-fig) > .mk-fig { grid-column: 1; }
    .method-card:has(> .mk-fig) > .mc-tiles { grid-column: 2; grid-template-columns: minmax(0, 1fr); align-self: start; margin-top: .9rem; }
}
.mc-tile { border-radius: var(--radius-m); }
.mc-tile:not(.mc-locked) dd { font-size: 16px; }

/* Seitenwechsel: weiches Überblenden statt hartem Neuaufbau; Kopfleiste und Tab-Leiste bleiben stehen */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}
.hdr { view-transition-name: site-hdr; }
.tabbar { view-transition-name: site-tabbar; }
::view-transition-old(root) { animation: vtOut .18s var(--ease) both; }
::view-transition-new(root) { animation: vtIn .26s var(--ease) both; }
::view-transition-group(ms-active) { animation-duration: .32s; animation-timing-function: cubic-bezier(.3, .8, .2, 1); }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
    .button, .btn-signup, a.learn-card-link, .sc-preset, .home-methods-strip .home-methods a, .home-methods-strip .home-methods a > .mi,
    .today-row, .pr-tier { transition: none; }
    .button-primary:hover, .btn-signup:hover, a.learn-card-link:hover, .sc-preset:hover, .home-methods-strip .home-methods a:hover { transform: none; }
}

/* Krypto-Coin-Seite: Kennzahlen mit Grafiken und „Was ist …?“ in Kurzform (Tommy 20.10.2026, Vorbild CoinGecko/CoinMarketCap, src/Views/coin_header.php, coin_about.php) */
.cn-head { margin: 0 0 12px; padding: 16px 18px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-1, none); }
.cn-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.cn-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 28px; }
@media (min-width: 900px) { .cn-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .cn-ranges, .cn-facts { grid-column: auto; } }
.cn-k { font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--text-2); }
.cn-spark { min-width: 0; }
.cn-spark-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.cn-price { font-size: 20px; font-weight: 700; }
.cn-spark-svg { display: block; width: 100%; height: 84px; overflow: visible; }
.cn-spark-line { fill: none; stroke: var(--up); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.cn-spark-area { fill: var(--up); fill-opacity: .1; stroke: none; }
.cn-spark-svg.is-down .cn-spark-line { stroke: var(--down); }
.cn-spark-svg.is-down .cn-spark-area { fill: var(--down); }
.cn-perf { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.cn-perf li { display: grid; grid-template-columns: 82px minmax(0, 1fr) 64px; align-items: center; gap: 10px; font-size: 13px; }
.cn-perf-k { color: var(--text-2); }
.cn-perf-bar { height: 8px; border-radius: 99px; background: var(--surface-2, rgba(128, 128, 128, .12)); overflow: hidden; }
.cn-perf-bar i { display: block; height: 100%; border-radius: 99px; background: var(--text-2); transform-origin: left; }
.cn-perf li.up .cn-perf-bar i { background: var(--up); }
.cn-perf li.down .cn-perf-bar i { background: var(--down); }
.cn-perf-v { text-align: right; font-weight: 650; }
.cn-perf li.up .cn-perf-v { color: var(--up); }
.cn-perf li.down .cn-perf-v { color: var(--down); }
.cn-ranges { display: grid; gap: 14px; align-content: start; }
.cn-range-h { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.cn-track { position: relative; height: 8px; border-radius: 99px; background: var(--surface-2, rgba(128, 128, 128, .12)); }
.cn-track-fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: color-mix(in srgb, var(--accent) 35%, transparent); transform-origin: left; }
.cn-track-dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: var(--shadow-1, none); }
.cn-range-v { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--text-2); }
.cn-range-pos { text-align: center; }
.cn-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 20px; align-content: start; }
.cn-facts dt { font-size: 12px; font-weight: 600; color: var(--text-2); margin: 0 0 2px; }
.cn-facts dd { margin: 0; font-size: 15px; font-weight: 650; }
.cn-facts .small { font-weight: 400; }
.cn-bar { height: 6px; border-radius: 99px; background: var(--surface-2, rgba(128, 128, 128, .12)); margin-top: 6px !important; overflow: hidden; }
.cn-bar i { display: block; height: 100%; border-radius: 99px; background: color-mix(in srgb, var(--accent) 60%, transparent); transform-origin: left; }
.cn-note { margin: 12px 0 0; }
@media (prefers-reduced-motion: no-preference) {
    .cn-perf-bar i, .cn-track-fill, .cn-bar i { animation: cnGrow .7s var(--ease, ease-out) both; }
    .cn-track-dot { animation: cnPop .5s .45s var(--ease, ease-out) both; }
    .cn-spark-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cnDraw 1s var(--ease, ease-out) .1s forwards; }
    .cn-spark-area { animation: cnFade .8s .5s both; }
}
@keyframes cnGrow { from { transform: scaleX(0); } }
@keyframes cnPop { from { transform: scale(0); opacity: 0; } }
@keyframes cnFade { from { opacity: 0; } }
@keyframes cnDraw { to { stroke-dashoffset: 0; } }
.cn-about { margin: 0 0 12px; padding: 16px 18px; }
.cn-about-h { margin: 0 0 6px; font-size: 16px; }
.cn-about-lead { margin: 0 0 10px; line-height: 1.5; max-width: 70ch; }
.cn-about-risk { color: var(--text-2); }
.cn-chips { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cn-chip { padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); }
.cn-chip-plain { background: var(--surface-2, rgba(128, 128, 128, .12)); color: var(--text-2); font-weight: 500; }
.cn-chip-link a { color: inherit; text-decoration: none; }
.cn-chip-link { background: transparent; border: 1px solid var(--line-strong, var(--line)); }
.cn-chip-link:hover { border-color: var(--accent); }
.cn-more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.cn-more p { margin: 8px 0 0; color: var(--text-2); max-width: 70ch; }
@media (max-width: 599px) {
    .cn-head { padding: 14px 12px 10px; }
    .cn-perf li { grid-template-columns: 74px minmax(0, 1fr) 58px; gap: 8px; }
}
html[data-anzeige="kompakt"] .cn-head { padding: 10px 12px 8px; }
html[data-anzeige="kompakt"] .cn-spark-svg { height: 56px; }

/* Marktdaten der Kryptowerte (CoinGecko, kostenlos mit Pflichthinweis; src/Views/coin_market.php) */
.cm-box { margin: 0 0 12px; padding: 16px 18px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-1, none); }
.cm-tiles { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.cm-tile { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); min-width: 0; }
.cm-tile dt { margin: 0 0 3px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-2); }
.cm-tile dd { margin: 0; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.cm-tile dd.small { font-size: 12px; font-weight: 400; margin-top: 4px; }
.cm-tile .cn-bar { margin-top: 8px !important; }
html[data-anzeige="kompakt"] .cm-box { padding: 10px 12px 8px; }

/* Konto: Registrierung, Passwort vergessen, Bestätigen (Online-Gang 20.10.2026; src/Views/signup.php, password_*.php, account_message.php) */
.acc-form .field > span .small, .auth-card .field > span .small { font-weight: 400; color: var(--text-2); }
.acc-consent { align-items: flex-start; gap: 8px; line-height: 1.45; margin-top: 2px; }
.acc-consent input { flex: none; margin-top: 2px; }
.acc-consent span { color: var(--text); }
.acc-plan { margin: 12px 0 0; }
.acc-links { margin: 12px 0 0; }
.acc-steps { list-style: none; margin: 12px 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.acc-steps li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: baseline; line-height: 1.45; }
.acc-step-n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.acc-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; margin-bottom: 10px;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.acc-msg.is-error { border-top-color: var(--line-strong); }
@media (prefers-reduced-motion: no-preference) {
    .acc-mark { animation: acc-pop .26s ease-out; }
    @keyframes acc-pop { from { transform: scale(.6); opacity: 0; } }
}

/* ── Screener „Take Profit“ (21.10.2026; src/Views/screener_ziele.php, screener_view_switch.php) ──
   Umschalter „Kaufzonen | Take Profit“ rechts im Seitenkopf (.segmented wie die Zeiteinheit). Eigene Liste .list-tp – nicht .list-screener/.list-signals,
   deren 6-Spalten-Raster und :nth-child-Handyregeln hier nicht passen. Lage-Plaketten in Akzentfarbe (Grün/Rot bleibt Gewinn/Verlust vorbehalten);
   gefüllt = Ziel erreicht, Umriss = nahe. Gast/Kostenlos: Karte .sc-up mit echten Anzahlen. */
.page-head:has(> .sc-view) { flex-wrap: wrap; }
.sc-view { flex: none; }
.sc-view a { display: inline-flex; align-items: center; gap: 6px; }
.list-tp .list-head, .list-tp .list-row { grid-template-columns: minmax(200px, 1.6fr) minmax(130px, 1fr) minmax(150px, 1fr) minmax(210px, 1.3fr); }
.list-tp .cell-name strong { flex: none; overflow: visible; }   /* Kürzel nie abschneiden, der Name kürzt */
.list-tp .tp-sector { font-size: 13px; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.list-tp .tp-lage, .list-tp .tp-dist { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.list-tp .tp-lage .small, .list-tp .tp-dist .small { display: inline; color: var(--text-2); }
.list-tp .tp-lage .ext-stand { flex-basis: 100%; }
.list-tp .tp-dist .num { font-variant-numeric: tabular-nums; text-align: left; justify-self: start; }
.pill.tp-pill { margin: 0; font-weight: 600; white-space: nowrap; }
.pill.tp-nahe { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.pill.tp-erreicht { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
.tp-teaser .sc-up-h .plan-tag { margin-right: 4px; }
@media (max-width: 767px) {
    .sc-view { width: 100%; display: flex; }
    .sc-view a { flex: 1 1 0; justify-content: center; }
    .list-tp .list-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; gap: 4px 10px; padding-block: 8px; }
    .list-tp .list-row > .sc-name { grid-column: 1; grid-row: 1; }
    .list-tp .list-row > .tp-lage { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-end; text-align: right; }
    .list-tp .list-row > .tp-sector { grid-column: 1 / -1; grid-row: 2; font-size: 12px; white-space: normal; }
    .list-tp .list-row > .tp-dist { grid-column: 1 / -1; grid-row: 3; }
    .list-tp .tp-lage .ext-stand { flex-basis: auto; }
}
/* Take Profit, Feinschliff: Stufen-Kennzeichen auf dem aktiven (Akzent-)Reiter lesbar, Abstand des Lesehinweises, leere Branche (Krypto) am Handy ohne Zeile */
.sc-view [aria-current="true"] .plan-tag { background: var(--surface); border-color: transparent; color: var(--text); }
.sc-view [aria-current="true"] .plan-tag::before { color: var(--text-2); }
.tp-hint { margin-top: 16px; }
@media (max-width: 767px) { .list-tp .list-row > .tp-sector-none { display: none; } }

/* ── Screener „Mehr Filter“, „Alle Werte“ und Seite „Branchen“ (22.10.2026; src/Views/screener_more.php, screener_alle.php, branchen.php) ──
   Mehr Filter: aufklappbarer Bereich im Filterformular, drei Gruppen (Unternehmen, Trend, Momentum und Handel) als Raster. Alle Werte: dichte Tabelle
   (table.dense) mit Sortier-Links in den Spaltenköpfen, Einsteiger-Ansicht blendet [data-x] aus wie die Kaufzonen-Listen. Branchen: Kacheln
   (Farbe = Ø Kursentwicklung, Grün/Rot nur für Plus/Minus; Gäste: Stufe nach Rang) und Tabelle mit Anteils-Balken (SVG, kein Inline-Stil). */
.sc-more { flex: 1 1 100%; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.sc-more > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 12px; min-height: 36px; }
.sc-more > summary::-webkit-details-marker { display: none; }
.sc-more > summary::before { content: none; }
.sc-more > summary::after {
    content: ""; width: 7px; height: 7px; margin-left: auto; align-self: center; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
    transform: rotate(45deg); transition: transform .2s var(--ease, ease);
}
.sc-more[open] > summary::after { transform: rotate(-135deg); }
.sc-more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-l); }
.sc-more-t { font-weight: 700; font-size: 14px; }
.sc-more-n { margin: 0; color: var(--accent); font-weight: 600; }
/* Teil 36: vier Gruppen; Spaltenzahl nach Breite des Filterblocks (mit Seitenleiste schmaler als das Fenster) */
.sc-more { container-type: inline-size; }
.sc-more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; padding: 4px 12px 10px; border-top: 1px solid var(--line); }
/* Spalte „Merkmale“ im Modus Alle Werte: kleine, ruhige Marken (keine Farbe – Grün/Rot nur für Gewinn/Verlust) */
.sc-feat { display: flex; flex-wrap: wrap; gap: 3px 4px; min-width: 120px; max-width: 260px; }
.sc-tag { display: inline-block; padding: 1px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; line-height: 1.45;
    white-space: nowrap; color: var(--text); background: var(--surface-2); }
td.sc-feat-c { white-space: normal; }
.sc-more-hint { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: var(--text-2); }
.sc-more-g select:disabled { opacity: 1; color: var(--text-2); background: var(--surface-2); cursor: not-allowed; }
.sc-more-g { border: 0; margin: 0; padding: 8px 0 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-more-g legend { padding: 0; font-size: 12px; font-weight: 700; color: var(--text); }
.sc-more-g .field-inline select { max-width: none; width: 100%; }
/* Handy: .screener-filter .field-inline { flex: 1 1 140px } ist für die waagerechte Filterzeile gedacht – in den senkrechten Gruppen ergab es
   140 px hohe Lücken je Feld (Teil 36, Screenshot) */
.sc-more-g .field-inline, .sc-more-pair .field-inline { flex: 0 0 auto; }
.sc-more-pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
.sc-more-note { margin: 0; padding: 0 12px 10px; color: var(--text-2); }
@container (max-width: 960px) { .sc-more-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@container (max-width: 540px) { .sc-more-grid { grid-template-columns: minmax(0, 1fr); } }

/* Kennzahlen-Zeile unter einer Zone (Kaufzonen-Listen) */
.list-screener .sc-kz { grid-column: 1 / -1; margin: -2px 0 0; color: var(--text-2); font-size: 12.5px; line-height: 1.35; }
html[data-sc-cols="einfach"] .list-screener .sc-kz[data-x] { display: none; }

/* Alle Werte */
.sc-all-wrap { margin-top: 4px; }
table.sc-all th, table.sc-all td { vertical-align: middle; }
table.sc-all th .help { margin-left: 2px; }
table.sc-all td.sc-all-name { white-space: normal; min-width: 150px; max-width: 260px; line-height: 1.3; }
table.sc-all td.sc-all-name a { display: inline-flex; gap: 4px; align-items: baseline; }
table.sc-all td.sc-all-name .small { display: block; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
table.sc-all .ext-stand { white-space: nowrap; }
table.sc-all .sc-word { color: var(--text-2); font-size: 12px; }
table.sc-all .sc-cls { color: var(--text-2); font-size: 12px; }
table.sc-all .sc-vol-hoch { font-weight: 700; color: var(--text); }
table.sc-all .fav-star { color: var(--saved, var(--warn)); font-size: 12px; }
table.sc-all .pill.zpos { white-space: nowrap; }
html[data-sc-cols="einfach"] .sc-all [data-x] { display: none; }
.sc-sort { color: inherit; display: inline-flex; align-items: center; gap: 3px; }
.sc-sort:hover { color: var(--accent); text-decoration: none; }
.sc-sort.on { color: var(--text); }
.sc-sort.on::after { content: "▾"; font-size: 10px; color: var(--accent); }
th[aria-sort="ascending"] .sc-sort.on::after { content: "▴"; }
.sc-pages { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
@media (max-width: 767px) {
    table.sc-all td.sc-all-name { min-width: 120px; max-width: 150px; }
    table.sc-all td.sc-all-name .small { max-width: 140px; }
    .sc-all-wrap { margin-inline: 0; }
}

/* Branchen */
.br-period { margin: 4px 0 10px; }
.br-tiles { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.br-tile a {
    display: flex; flex-direction: column; gap: 2px; min-height: 84px; padding: 10px 12px; border-radius: var(--radius-l); border: 1px solid var(--line);
    background: var(--surface); color: var(--text); transition: transform .2s var(--ease, ease), border-color .2s;
}
.br-tile a:hover { text-decoration: none; border-color: var(--line-strong); transform: translateY(-1px); }
.br-tile a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.br-tile b { font-size: 14px; }
.br-tile .br-tile-v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.br-tile .small { color: var(--text-2); }
.br-tile.hp1 a { background: color-mix(in srgb, var(--up) 8%, var(--surface)); }
.br-tile.hp2 a { background: color-mix(in srgb, var(--up) 16%, var(--surface)); }
.br-tile.hp3 a { background: color-mix(in srgb, var(--up) 26%, var(--surface)); }
.br-tile.hn1 a { background: color-mix(in srgb, var(--down) 8%, var(--surface)); }
.br-tile.hn2 a { background: color-mix(in srgb, var(--down) 16%, var(--surface)); }
.br-tile.hn3 a { background: color-mix(in srgb, var(--down) 26%, var(--surface)); }
.br-tile:is(.hp1, .hp2, .hp3) .br-tile-v { color: var(--up); }
.br-tile:is(.hn1, .hn2, .hn3) .br-tile-v { color: var(--down); }
.br-legend { margin: 0 0 14px; color: var(--text-2); }
table.br-table th[scope="row"] { font-size: 13px; text-transform: none; letter-spacing: 0; background: transparent; color: var(--text); font-weight: 600; }
table.br-table td .small { color: var(--text-2); }
.br-rank { font-variant-numeric: tabular-nums; font-weight: 600; }
.br-rank.br-stark { color: var(--accent); }
.br-rank.br-schwach { color: var(--text-2); }
.br-tile.hr3 a { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.br-tile.hr2 a { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.br-tile.hr3 .br-tile-v { color: var(--accent); }
.br-meter { display: inline-block; width: 56px; height: 6px; margin-right: 6px; vertical-align: middle; }
.br-meter-bg { fill: var(--line); }
.br-meter-fg { fill: var(--accent); }
.br-new { color: var(--text-2); white-space: nowrap; }
.br-lock { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
    .br-tile { animation: br-in .3s var(--ease, ease) both; }
    .br-meter-fg { animation: br-grow .5s var(--ease, ease) both; transform-origin: left center; transform-box: fill-box; }
    @keyframes br-in { from { opacity: 0; transform: translateY(4px); } }
    @keyframes br-grow { from { transform: scaleX(0); } }
}
@media (prefers-reduced-motion: reduce) {
    .br-tile a, .sc-more > summary::after { transition: none; }
}
@media (max-width: 767px) {
    .br-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .br-tile a { min-height: 76px; padding: 8px 10px; }
    .br-tile .br-tile-v { font-size: 17px; }
    .br-period { display: flex; width: 100%; }
    .br-period a { flex: 1 1 0; text-align: center; }
}
/* Ansichts-Umschalter mit drei Reitern (Kaufzonen | Take Profit | Alle Werte) am Handy: passt in 375 px, Stufen-Kennzeichen klein */
@media (max-width: 767px) {
    .sc-view { max-width: 100%; overflow-x: auto; }
    .sc-view a { flex: 1 1 auto; padding-inline: 8px; font-size: 13px; white-space: nowrap; }
    .sc-view .plan-tag { font-size: 10px; padding: 0 4px; }
}
/* Breite Tabellen (Alle Werte, Branchen) scrollen in ihrem Rahmen statt die Seite zu verbreitern (Inhalt der Seite ist ein Grid-Element) */
/* position: relative – sonst entkommen .sr-only-Texte (absolut) und ⓘ-Blasen in den Zellen dem Scrollrahmen und verbreitern die Seite am Handy */
.sc-all-wrap, .br-wrap { position: relative; max-width: 100%; min-width: 0; }
.sc-more-off { flex: 1 1 100%; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text-2); }

/* ── Insider (22.10.2026; src/Views/insider.php, insider_card.php) ──
   Dichte Tabellen wie im Screener; Zweitzeilen (gemeldet, Rolle, Firmenname) klein darunter. Rahmen position: relative, damit .sr-only-Texte
   nicht aus dem Scrollrahmen fallen (Handy-Breite). Grün/Rot nur für Erwerb/Veräußerung bzw. Saldo. */
.ins-stand { margin: 0 0 10px; }
.ins-tabs { margin: 0 0 10px; max-width: 100%; overflow-x: auto; }
.ins-tabs a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ins-tabs [aria-current="true"] .plan-tag { background: var(--surface); color: var(--text); border-color: transparent; }
.ins-wrap, .ins-sum-wrap { position: relative; max-width: 100%; min-width: 0; }
table.ins-table td, table.ins-sum-table td { vertical-align: top; }
table.ins-table td .small, table.ins-sum-table td .small { display: block; color: var(--text-2); }
table.ins-table td.ins-sym, table.ins-table td.ins-who { white-space: normal; min-width: 130px; max-width: 240px; line-height: 1.3; }
table.ins-table .ins-plan { color: var(--text-2); }
.ins-rang { margin: 0 0 8px; }
td.ins-sum { min-width: 160px; }
.ins-bar { display: inline-block; width: 70px; height: 6px; margin-right: 8px; vertical-align: middle; }
.ins-bar.up rect { fill: var(--up); } .ins-bar.down rect { fill: var(--down); }
.ins-codes { margin-top: 16px; }
.ins-codes ul { margin: 6px 0; padding-left: 18px; }
.ins-card { margin-top: 16px; }
.ins-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ins-card-head h2 { margin: 0 0 8px; font-size: 16px; }
table.ins-sum-table th[scope="row"] { background: transparent; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); }
.ins-card-sub { font-size: 13px; margin: 12px 0 4px; }
.ins-last { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.ins-last li { display: grid; grid-template-columns: 86px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 2px 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.ins-last li:last-child { border-bottom: 0; }
.ins-last .ins-d { color: var(--text-2); font-variant-numeric: tabular-nums; }
.ins-last .ins-a.up { color: var(--up); } .ins-last .ins-a.down { color: var(--down); }
.ins-last .ins-v { text-align: right; }
.ins-note { margin: 8px 0 0; color: var(--text-2); }
@media (max-width: 767px) {
    .ins-last li { grid-template-columns: minmax(0, 1fr) auto; }
    .ins-last .ins-p { grid-column: 1 / -1; grid-row: 2; }
    .ins-last .ins-a { grid-column: 1; grid-row: 3; }
    .ins-last .ins-v { grid-column: 2; grid-row: 1; }
    .ins-tabs { display: flex; width: 100%; }
    .ins-tabs a { flex: 1 0 auto; justify-content: center; font-size: 13px; padding-inline: 8px; }
}

/* ── Depot (22.10.2026; src/Views/depot.php) ──
   Kennzahlen-Leiste oben, Branchen-Balken (SVG, kein Inline-Stil), dichte Tabelle im Scrollrahmen (position: relative gegen .sr-only-Überlauf),
   Lage-Ampel als Punkt + Wort (Farbe nie allein), Grün/Rot nur für Gewinn/Verlust bzw. Ziel/Stop. */
.dp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 6px; }
.dp-switch { max-width: 100%; overflow-x: auto; }
.dp-switch a { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.dp-switch [aria-current="true"] .count { color: inherit; }
.dp-new { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dp-new input { width: 200px; max-width: 100%; }
.dp-limit { margin: 0; }
.dp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 4px; }
.dp-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); min-width: 0; }
.dp-k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }
.dp-kpis b { font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dp-kpis b .chg { font-size: inherit; }
.dp-kpis .small { color: var(--text-2); }
.dp-sectors { margin: 10px 0; }
.dp-sectors h2 { font-size: 14px; margin: 0 0 8px; }
.dp-sec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dp-sec-list li { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) 56px; gap: 10px; align-items: center; font-size: 13px; }
.dp-sec-list .num { text-align: right; font-variant-numeric: tabular-nums; }
.dp-sec-bar { width: 100%; height: 8px; }
.dp-sec-bar .bg { fill: var(--line); }
.dp-sec-bar .fg { fill: var(--accent); }
.dp-wrap { position: relative; max-width: 100%; min-width: 0; margin-top: 8px; }
table.dp-table td { vertical-align: top; }
table.dp-table td .small { display: block; color: var(--text-2); }
table.dp-table td.dp-name { white-space: normal; min-width: 140px; max-width: 240px; line-height: 1.3; }
.dp-amp { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dp-amp i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex: none; }
.dp-amp-zone i { background: var(--zone); }
.dp-amp-warn i { background: var(--warn); }
.dp-amp-neutral i { background: var(--text-2); }
.dp-amp-none { color: var(--text-2); }
.dp-act { white-space: nowrap; }
.dp-alarm { padding: 2px 8px; min-height: 28px; display: inline-flex; align-items: center; vertical-align: top; }
.dp-edit { display: inline-block; margin-left: 6px; vertical-align: top; }
.dp-edit > summary { cursor: pointer; font-size: 12.5px; color: var(--accent); list-style: none; min-height: 28px; display: inline-flex; align-items: center; }
.dp-edit > summary::-webkit-details-marker { display: none; }
.dp-edit > summary::before { content: none; }
.dp-edit[open] { display: block; margin: 6px 0 0; white-space: normal; }
.dp-edit-form { display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)) auto; gap: 6px; align-items: end; margin: 6px 0; min-width: 380px; }
.dp-edit-form label, .dp-add-form label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 600; color: var(--text-2); }
.dp-edit-form input, .dp-add-form input { width: 100%; }
.dp-del { color: var(--down); font-size: 12.5px; }
.dp-add { margin: 14px 0; }
.dp-add h2 { font-size: 14px; margin: 0 0 8px; }
.dp-add-form { display: grid; grid-template-columns: minmax(140px, 1.4fr) repeat(3, minmax(100px, 1fr)) auto; gap: 8px; align-items: end; }
.dp-manage { margin-top: 12px; }
.dp-manage form { margin: 6px 0; }
@media (max-width: 767px) {
    .dp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dp-kpis b { font-size: 17px; }
    .dp-add-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .dp-add-form label:first-child { grid-column: 1 / -1; }
    .dp-add-form button { grid-column: 1 / -1; }
    .dp-sec-list li { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) 48px; }
    .dp-edit-form { min-width: 260px; grid-template-columns: minmax(0, 1fr); }
    .dp-new input { width: 160px; }
}
/* Scrollbare Reiterleisten mit Stufen-Kennzeichen: .sr-only („ab“) bleibt im Rahmen (sonst verbreitert er die Seite am Handy) */
.ins-tabs, .dp-switch, .sc-view, .br-period { position: relative; }
/* Depot am Handy: Stück, Kaufkurs und aktueller Kurs ausblenden (im Ändern-Formular und am Desktop sichtbar) – Wert, Gewinn und Lage bleiben im Blick */
@media (max-width: 600px) {
    table.dp-table th:nth-child(2), table.dp-table td:nth-child(2), table.dp-table th:nth-child(3), table.dp-table td:nth-child(3),
    table.dp-table th:nth-child(4), table.dp-table td:nth-child(4) { display: none; }
}

/* ---------- Backtest deiner Liste (Plan Teil 31, Tommy 22.10.2026): /backtest, /backtest/{id} ----------
   Luftiger Kopf mit drei Schritten, Zeitebenen als Auswahlkarten, Vergleichstabelle mit Balken um die Nulllinie (Ø Trade nach Kosten, wächst
   beim Laden aus der Mitte), Matrix und Trade-Listen dicht mit festem Kopf beim Scrollen. Scrollbare Rahmen mit position: relative (.sr-only).
   Grün/Rot nur für Gewinn/Verlust; Status „läuft“ mit ruhig pulsierendem Punkt (zeigt Arbeit an), bei reduzierter Bewegung steht alles. */
.ubt-head .sub { max-width: 72ch; }
.ubt-back { margin: 0 0 2px; }
.ubt-head-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ubt-head-act form { margin: 0; }
.ubt-steps { list-style: none; counter-reset: ubt; margin: 4px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ubt-steps li { counter-increment: ubt; display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: start;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.ubt-steps li::before { content: counter(ubt); grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 700; font-size: 13px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ubt-steps b { font-size: 14px; }
.ubt-steps span { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.ubt-teaser, .ubt-form-card { padding: 14px 16px 16px; margin: 0 0 16px; }
.ubt-teaser h2, .ubt-form-card h2 { margin: 0 0 6px; }
.ubt-more { margin: 10px 0; padding-left: 18px; color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
.ubt-example-note { margin: 6px 0 0; }
.ubt-form { display: grid; gap: 14px; }
.ubt-field { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ubt-field > label, .ubt-field legend { font-size: 12px; font-weight: 600; color: var(--text-2); padding: 0; }
.ubt-field select { max-width: 420px; width: 100%; }
.ubt-tf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.ubt-tf-opt { position: relative; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface);
    cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease); min-width: 0; }
.ubt-tf-opt:hover { border-color: var(--line-strong); }
.ubt-tf-opt:active { transform: translateY(1px); }
.ubt-tf-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ubt-tf-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.ubt-tf-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ubt-tf-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ubt-tf-text { font-size: 12.5px; line-height: 1.35; }
.ubt-tf-max { color: var(--text-2); }
.ubt-period { grid-template-columns: auto minmax(0, 170px) auto minmax(0, 170px); align-items: center; justify-content: start; column-gap: 8px; }
.ubt-submit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ubt-submit .ubt-usage { margin: 0; }
.ubt-form > p.small { margin: 0; }
.ubt-wrap { position: relative; max-width: 100%; min-width: 0; }
.ubt-scroll { max-height: min(70vh, 640px); overflow: auto; }
.ubt-scroll thead th { position: sticky; top: 0; z-index: 2; }
.ubt-runs { margin-top: 8px; }
.ubt-runs h2 { margin: 0 0 8px; }
table.ubt-runs-table td { vertical-align: middle; }
.ubt-src b { display: block; white-space: normal; max-width: 260px; overflow-wrap: anywhere; }
.ubt-src .small { display: block; }
.ubt-tf-inline { display: none; }
.ubt-act { white-space: nowrap; }
.ubt-act > * { vertical-align: middle; }
.ubt-del-form { display: inline; margin: 0 0 0 10px; }
.ubt-st { display: inline-flex; align-items: center; gap: 5px; }
.ubt-st-laeuft { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ubt-st-laeuft::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: sk-pulse 1.2s ease-in-out infinite; }
.ubt-st-fertig { color: var(--text); border-color: var(--line-strong); }
.ubt-st-fehler { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.ubt-note-top { margin: 0 0 14px; }
.ubt-wait { padding: 14px 16px; }
.ubt-wait-text { margin: 0 0 12px; }
.ubt-skel { display: grid; gap: 8px; }
.ubt-skel span { display: block; height: 14px; border-radius: var(--radius-s); background: var(--surface-2); animation: sk-pulse 1.2s ease-in-out infinite; }
.ubt-skel span:nth-child(2n) { width: 86%; }
.ubt-class { margin: 18px 0 8px; }
.ubt-class .section-head { margin-top: 8px; }
.ubt-h3 { font-size: 14px; margin: 18px 0 8px; }
.ubt-h3 .small { font-weight: 400; }
.ubt-legend { margin: 6px 0 0; max-width: 90ch; line-height: 1.5; }
table.ubt-compare th[scope="row"] { font-weight: 600; white-space: normal; min-width: 150px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); background: none; }
table.ubt-compare .ubt-few { margin-left: 4px; font-weight: 600; white-space: nowrap; }
table.ubt-compare td.ubt-bar, table.ubt-compare th.ubt-bar-h { width: 120px; min-width: 100px; }
.ubt-track { display: block; width: 100%; }
.ubt-fill.pos { transform-origin: left center; }
.ubt-fill.neg { transform-origin: right center; }
@media (prefers-reduced-motion: no-preference) {
    .ubt-fill { animation: fp-grow-x .7s var(--ease) both; animation-delay: .1s; }
}
.ubt-na th[scope="row"] { color: var(--text-2); }
.ubt-na-text, .ubt-na-cell, .ubt-none { color: var(--text-2); }
.ubt-na-text { white-space: normal; font-size: 12.5px; }
table.ubt-matrix th[scope="row"], table.ubt-trade-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
table.ubt-matrix thead th:first-child, table.ubt-trade-table thead th:first-child { left: 0; z-index: 3; }
table.ubt-matrix tbody tr:nth-child(even) > th[scope="row"], table.ubt-trade-table tbody tr:nth-child(even) > td:first-child { background: var(--zebra); }
table.ubt-matrix tbody tr:hover > th[scope="row"], table.ubt-trade-table tbody tr:hover > td:first-child { background: var(--hover); }
table.ubt-matrix th[scope="row"] { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
table.ubt-matrix .ubt-wname { margin-left: 4px; }
.ubt-trades { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); margin: 0 0 8px; }
.ubt-trades > summary { cursor: pointer; padding: 10px 12px; list-style: none; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; min-height: 40px; }
.ubt-trades > summary::-webkit-details-marker { display: none; }
.ubt-trades > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
    transform: rotate(-45deg); transition: transform .2s var(--ease); flex: none; align-self: center; }
.ubt-trades[open] > summary::before { transform: rotate(45deg); }
.ubt-trades > .table-wrap { border-width: 1px 0 0; border-radius: 0 0 var(--radius-m) var(--radius-m); }
.ubt-trades > p.small { margin: 0; padding: 0 12px 10px; }
.ubt-open td { color: var(--text-2); }
.ubt-flags .pill { margin-right: 2px; }
.ubt-skipped { margin: 20px 0 8px; }
.ubt-skip-list { margin: 0; padding-left: 18px; line-height: 1.6; }
.ubt-how { margin: 22px 0 8px; padding: 12px 16px; max-width: 100ch; }
.ubt-how h2 { font-size: 14px; margin: 0 0 6px; color: var(--text); }
.ubt-how ul { margin: 0 0 6px; padding-left: 18px; line-height: 1.55; }
.ubt-how li + li { margin-top: 4px; }
@media (max-width: 900px) {
    .ubt-steps { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .ubt-steps li { padding: 9px 12px; }
}
@media (max-width: 640px) {
    .ubt-tf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ubt-period { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; }
    .ubt-col-period, .ubt-col-tf, .ubt-col-n { display: none; }
    .ubt-tf-inline { display: inline; }
    .ubt-head { flex-direction: column; align-items: flex-start; }
    table.ubt-compare th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 120px; max-width: 140px; }
    table.ubt-compare tbody tr:nth-child(even) > th[scope="row"] { background: var(--zebra); }
    table.ubt-compare .ubt-few { font-size: 10px; padding: 0 4px; }
    table.ubt-compare td.ubt-bar, table.ubt-compare th.ubt-bar-h { display: none; }
}

/* Chart angemeldet: Legende der Marken neu geordnet (22.10.2026) – vier Gruppen nebeneinander, je Zeile Symbol · Kürzel · Text in festen Spalten;
   Linien und Zonen als eigene Zeile darunter */
.mark-legend { margin: 10px 4px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); color: var(--text-2); max-width: 100%; box-sizing: border-box; }
.mark-legend .ml-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin-bottom: 8px; }
.mark-legend .ml-note { font-size: 12px; }
.mark-legend .ml-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 24px; }
.mark-legend .ml-group { min-width: 0; }
.mark-legend .ml-group-title { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.mark-legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.mark-legend li { display: grid; grid-template-columns: 14px 6.6em minmax(0, 1fr); align-items: baseline; column-gap: 6px; line-height: 1.35; }
.mark-legend li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.mark-legend li b { color: var(--text); font-weight: 650; white-space: nowrap; }
.chart-keys { gap: 4px 18px; }
.chart-keys .ck-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.chart-keys .ck-group[hidden] { display: none; }
.chart-keys .ck-label { font-weight: 650; color: var(--text); }
.chart-keys .ck-note { flex-basis: 100%; color: var(--text-2); }
@media (max-width: 767px) {
    .mark-legend .ml-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* Verzeichnis aller Werte (/werte) und „Ähnliche Werte“ auf der Wert-Seite (SEO 23.10.2026): nur Kürzel und Name, ruhige Listen in Karten je Branche */
.dir-head { flex-wrap: wrap; }
.dir-search { display: flex; gap: 6px; flex: 0 1 340px; min-width: 0; }
.dir-search input[type="search"] { flex: 1 1 auto; min-width: 0; }
.dir-stand { margin: -6px 0 12px; }
.dir-jump { position: relative; display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; margin-bottom: 4px; scrollbar-width: thin; }
.dir-jump a { flex: none; display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 999px;
    background: var(--surface); color: var(--text); font-size: 13px; white-space: nowrap; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.dir-jump a:hover { text-decoration: none; background: var(--hover); border-color: var(--text-2); }
.dir-count { font-size: 12px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dir-group { margin-top: 18px; scroll-margin-top: 72px; }
.dir-group > h2 { display: flex; align-items: baseline; gap: 8px; font-size: clamp(18px, .6vw + 14px, 22px); letter-spacing: -.01em; margin-top: 8px; }
/* Spalten statt Raster: Branchen sind ungleich lang (4–63 Werte), so füllen sie die Fläche ohne Lücken */
.dir-grid { columns: 300px; column-gap: 12px; }
.dir-sector { break-inside: avoid; margin-bottom: 12px; min-width: 0; padding: 12px 14px 10px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-l); scroll-margin-top: 72px; }
@media (min-width: 768px) {
    .dir-jump { flex-wrap: wrap; overflow-x: visible; }
}
.dir-sector h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 14px; }
.dir-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.dir-list-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); column-gap: 16px; padding: 8px 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.dir-list a { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 4px 6px; margin: 0 -6px; border-radius: var(--radius-s); color: var(--text);
    transition: background-color .2s var(--ease); }
.dir-list a:hover { text-decoration: none; background: var(--hover); }
.dir-sym { flex: none; min-width: 4.6em; font-weight: 650; font-variant-numeric: tabular-nums; }
.dir-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.dir-ext { margin: 12px 0 0; font-size: 13px; color: var(--text-2); }
.dir-result { margin: 0 0 12px; }
.similar-values h2 { margin-top: 12px; }
.similar-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); column-gap: 16px; }
.similar-all { margin: 6px 0 12px; }
@media (max-width: 640px) {
    .dir-search { flex-basis: 100%; }
}

/* SEO 24.10.2026: Analysedatum im Kopf der Wert-Seite, Zählung in Worten unter dem Analysebild, Verweis „So analysieren wir“ */
.quote-asof { margin: 4px 0 0; color: var(--text-2); }
.quote-asof time { color: var(--text); font-variant-numeric: tabular-nums; }
.ws-alt { margin: 8px 0 0; color: var(--text-2); line-height: 1.45; max-width: 90ch; }
.wf-head .method-link { margin-left: 8px; white-space: nowrap; }
.dir-method { margin: 6px 0 0; }

/* ── Einführungsphase (Tommy 24.10.2026, bis plans.einfuehrung_bis): ruhige Hinweise ohne Countdown und ohne Knappheit.
   .intro-note = Kasten oben auf /preise, .intro-line = eine Zeile (Startseite, Stufen-Abschnitt), .plan-tag-intro = Zusatz im Kennzeichen
   für Gäste – in dichten Zeilen (Tabellen, Kacheln, Kopfzeilen) nur als title, damit Listen ruhig bleiben. ── */
.intro-note {
    margin: 0 0 16px; padding: 14px 16px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
    border-left: 3px solid var(--brand); border-radius: var(--radius-l); color: var(--text-2);
}
.intro-note-h { margin: 0 0 4px; font-size: clamp(17px, 1.2vw + 12px, 20px); color: var(--text); letter-spacing: -.01em; }
.intro-note p { margin: 6px 0 0; max-width: 72ch; line-height: 1.5; }
.intro-note .intro-note-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.intro-note-cta .small { flex: 1 1 22ch; max-width: 48ch; }
.intro-line { margin: 8px 0 0; color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.intro-line b { color: var(--text); font-weight: 600; }
.plan-tag .plan-tag-intro { font-weight: 500; color: var(--text-2); white-space: normal; }
td .plan-tag-intro, dd .plan-tag-intro, .sc-exit-lock .plan-tag-intro, .tplan-lock .plan-tag-intro, .wa-plan-lock .plan-tag-intro,
.alarm-kind-label .plan-tag-intro, .today-head .plan-tag-intro, h1 .plan-tag-intro, h2 .plan-tag-intro, .sc-konf-off .plan-tag-intro,
.sc-csv-off .plan-tag-intro, .home-up .plan-tag-intro { display: none; }