/* Regel-Depot 50/30/20 – Stylesheet
   Farben: Datenreihen nach fester Zuordnung (FTSE blau, Bitcoin orange, Gold gelb, Cash grau), Status-Farben nur für Zustände.
   Kontrast: Linien mindestens 3:1 zum Hintergrund (Gold hell #b98300), Text auf Rot hell weiß, dunkel fast schwarz (--bad-ink). */
:root{
  color-scheme:light;
  --bg:#F3F5F8; --surface:#FFFFFF; --surface-2:#EDF0F4; --surface-3:#DDE2E9; --ink:#0F1724; --ink-2:#3F4A5A; --muted:#667085;
  --rule:#D8DEE6; --rule-strong:#B9C2CE; --accent:#1B3A6B; --accent-soft:#E4EBF6; --accent-ink:#FFFFFF;
  --good:#0B6B37; --good-bg:#DFF1E6; --warn:#7A5000; --warn-bg:#FAEFD2; --bad:#A8231B; --bad-bg:#FBE4E1; --bad-ink:#FFFFFF;
  --live-buy-bg:#E4F1EB; --live-buy-ink:#186340; --live-sell-bg:#F6E8E8; --live-sell-ink:#8E2D2B; --live-sub:var(--muted); /* Kursbox bei möglichem Kauf-/Verkaufssignal (Justus 27.09.2026) */
  --ftse:#2a78d6; --btc:#eb6834; --alt:#f2a98a; --gold:#b98300; --rp:#7b4fd6; --bh:#667085; --cash:#8a94a3; --pos:#2a78d6; --neg:#e34948;
  --grid:#E7EBF0; --axis:#C3CAD4; --band:rgba(63,74,90,.10);
  --sig-buy:#0ca30c; --sig-sell:#d03b3b;
  --shadow:0 1px 2px rgba(15,23,36,.06),0 4px 16px rgba(15,23,36,.05);
  --mh-bg:linear-gradient(115deg,#D9E3F1 0%,#E4EBF5 50%,#EDF2F8 100%); --mh-line:#D0DAE7; --mh-muted:#4E5E75; --mh-track:#FFFFFF; --mh-track-b:#B9C6D8; --mh-deco:#1B3A6B; --mh-deco-lo:.3; --mh-deco-fo:.08; --mh-gold:#9A7425; --mh-t-reb:#23858A; --mh-t-sig:#A36E12; --mh-t-set:#657C9B; --mh-t-rul:#2071FF;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E1217; --surface:#151A21; --surface-2:#1C232C; --surface-3:#2A323D; --ink:#E7EBF1; --ink-2:#B6C0CC; --muted:#8C97A6;
    --rule:#29313B; --rule-strong:#3A4450; --accent:#A9C3EE; --accent-soft:#1B2638; --accent-ink:#0E1217;
    --good:#6FD699; --good-bg:#12301F; --warn:#F1C866; --warn-bg:#33290F; --bad:#FF928A; --bad-bg:#3A1917; --bad-ink:#1A0B0A;
    --live-buy-bg:#2E6244; --live-buy-ink:#A9E6C2; --live-sell-bg:#753D3A; --live-sell-ink:#FFBEB9; --live-sub:#CED5DE;
    --ftse:#3987e5; --btc:#d95926; --alt:#a8664a; --gold:#c98500; --rp:#c77dff; --bh:#7d8898; --cash:#6b7684; --pos:#3987e5; --neg:#e66767;
    --grid:#232B35; --axis:#3A4450; --band:rgba(182,192,204,.12);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.25);
    --mh-bg:radial-gradient(640px 220px at 88% -20%,rgba(120,170,255,.12),transparent 70%),linear-gradient(115deg,#121A26 0%,#152031 55%,#1A273D 100%); --mh-line:#222C3A; --mh-muted:#9AA6B6; --mh-track:rgba(255,255,255,.1); --mh-track-b:rgba(255,255,255,.22); --mh-deco:#FFFFFF; --mh-deco-lo:.22; --mh-deco-fo:.09; --mh-gold:#D8B763; --mh-t-reb:#70D6DB; --mh-t-sig:#F0C477; --mh-t-set:#B4BFCE; --mh-t-rul:#8BB5FF;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1217; --surface:#151A21; --surface-2:#1C232C; --surface-3:#2A323D; --ink:#E7EBF1; --ink-2:#B6C0CC; --muted:#8C97A6;
  --rule:#29313B; --rule-strong:#3A4450; --accent:#A9C3EE; --accent-soft:#1B2638; --accent-ink:#0E1217;
  --good:#6FD699; --good-bg:#12301F; --warn:#F1C866; --warn-bg:#33290F; --bad:#FF928A; --bad-bg:#3A1917; --bad-ink:#1A0B0A;
  --live-buy-bg:#2E6244; --live-buy-ink:#A9E6C2; --live-sell-bg:#753D3A; --live-sell-ink:#FFBEB9; --live-sub:#CED5DE;
  --ftse:#3987e5; --btc:#d95926; --alt:#a8664a; --gold:#c98500; --rp:#c77dff; --bh:#7d8898; --cash:#6b7684; --pos:#3987e5; --neg:#e66767;
  --grid:#232B35; --axis:#3A4450; --band:rgba(182,192,204,.12);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.25);
  --mh-bg:radial-gradient(640px 220px at 88% -20%,rgba(120,170,255,.12),transparent 70%),linear-gradient(115deg,#121A26 0%,#152031 55%,#1A273D 100%); --mh-line:#222C3A; --mh-muted:#9AA6B6; --mh-track:rgba(255,255,255,.1); --mh-track-b:rgba(255,255,255,.22); --mh-deco:#FFFFFF; --mh-deco-lo:.22; --mh-deco-fo:.09; --mh-gold:#D8B763; --mh-t-reb:#70D6DB; --mh-t-sig:#F0C477; --mh-t-set:#B4BFCE; --mh-t-rul:#8BB5FF;
}
*{box-sizing:border-box}
html{scroll-padding-top:66px} /* Menüleiste 10 px höher seit 27.09.2026 (vorher 56 px) */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;padding-top:env(safe-area-inset-top,0px)}
/* Breite: bis 1520px, darüber zentriert (Justus 26.09.2026: „etwas zu viel Rand“ bei 1400px; 27.09.2026: „etwas zentrierter, mehr Rand“, vorher 1600px).
   Seitenrand wächst mit der Fensterbreite: 16px (Handy), 24–40px (Tablet), 40–64px (Desktop); die Navigation zieht bündig mit. */
.wrap{max-width:1520px;margin:0 auto;padding-inline:16px;padding-block:0 64px}
.wrap.hdr{padding-block:0}
@media (min-width:640px){.wrap{padding-inline:clamp(24px,3vw,40px)}}
@media (min-width:1200px){.wrap{padding-inline:clamp(40px,3.5vw,64px)}}
a{color:var(--accent);text-underline-offset:2px}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-size:clamp(26px,4vw,36px);line-height:1.1}
h2{font-size:clamp(20px,2.4vw,24px);line-height:1.2}
h3{font-size:16.5px;line-height:1.3}
h4{font-size:14.5px}
p{margin:0}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13.5px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:.92em}
.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}
[hidden]{display:none!important}

/* Kopf und Navigation */
/* Kopfbereich „Investus“ farbig abgehoben (Justus 26.09.2026, Entwurf 7 „Hell getönt“): Verlauf je Modus, dahinter zart die FTSE-Wochenschlüsse der letzten fünf Jahre (#mhDeco, app.js drawMasthead) */
.masthead{position:relative;background:var(--mh-bg);border-bottom:1px solid var(--mh-line);overflow:hidden}
.masthead .wrap.hdr{position:relative;z-index:1}
.masthead .top{padding-block:20px 24px}
/* Titel „Investus“ in poliertem Gold (Justus 27.09.2026, Entwurf G); Schrift wieder wie vorher (Justus 27.09.2026: „Die Schriftart soll wieder
   die von vorher sein. Die Farbe und Glanz sollen bleiben“): Seitenschrift, Gewicht, Größe und Zeilenhöhe aus der h1-Regel oben.
   Seit 27.09.2026 ohne Glanz (Justus: „weiterhin selbe Farbe aber ohne Glanz“): einfarbiges Gold je Modus (--mh-gold), der Durchschnitt des
   früheren Verlaufs im Bereich der Buchstaben (hell etwas dunkler für mindestens 3:1 Kontrast), ohne Glanzstreifen und Schatten */
.masthead h1{justify-self:start}
/* Titelfarbe je Seite (Justus 27.09.2026): Status in der normalen Schriftfarbe (dunkel weiß), Depot Gold, Rebalancing #70D6DB, Signale #F0C477,
   Einstellungen #B4BFCE, Regeln #8BB5FF. So im dunklen Modus; im hellen Modus derselbe Farbton dunkler (--mh-t-*), damit der Titel auf dem
   hellen Kopfbereich mindestens 3,3:1 Kontrast hat. data-page setzt app.js showPage, beim Laden schon das Skript im Kopf der index.html */
html[data-page="depot"] .masthead h1{color:var(--mh-gold)}
html[data-page="rebalancing"] .masthead h1{color:var(--mh-t-reb)}
html[data-page="signale"] .masthead h1{color:var(--mh-t-sig)}
html[data-page="einstellungen"] .masthead h1{color:var(--mh-t-set)}
html[data-page="regeln"] .masthead h1{color:var(--mh-t-rul)}
@media (forced-colors:active){.masthead h1{color:CanvasText}}
.masthead .switch{color:var(--mh-muted)}
.masthead .switch input:not(:checked)+.track{background:var(--mh-track);border-color:var(--mh-track-b)}
.masthead .switch input:not(:checked)+.track::after{background:#fff}
.mh-deco{position:absolute;right:0;bottom:0;width:min(62%,820px);height:60%;pointer-events:none}
.mh-deco .ln{fill:none;stroke:var(--mh-deco);stroke-opacity:var(--mh-deco-lo);stroke-width:1.6;stroke-linejoin:round}
.mh-deco stop{stop-color:var(--mh-deco)}
.mh-deco .s0{stop-opacity:var(--mh-deco-fo)}
.mh-deco .s1{stop-opacity:0}
@media (max-width:640px){.mh-deco{width:100%;height:50%;opacity:.85}}
.top{padding-block:28px 14px;display:grid;gap:10px}
.toprow{display:flex;align-items:center;justify-content:flex-end;gap:12px}
/* Dunkelmodus-Schalter */
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:12.5px;color:var(--muted)}
.switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.switch .track{position:relative;width:34px;height:20px;border-radius:10px;background:var(--surface-3);border:1px solid var(--rule-strong);transition:background .15s}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.switch input:checked+.track{background:var(--accent);border-color:var(--accent)}
.switch input:checked+.track::after{transform:translateX(14px)}
.switch input:focus-visible+.track{outline:2px solid var(--accent);outline-offset:2px}
nav.toc{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule);margin-bottom:18px}
nav.toc .in{max-width:1520px;margin:0 auto;padding-inline:16px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
@media (min-width:640px){nav.toc .in{padding-inline:calc(clamp(24px,3vw,40px) - 10px)}}
@media (min-width:1200px){nav.toc .in{padding-inline:calc(clamp(40px,3.5vw,64px) - 10px)}}
nav.toc a{flex:0 0 auto;padding:13px 12px;font-size:16px;color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent} /* Menü größer (Justus 27.09.2026, vorher 13,5 px und 10 px Innenabstand) */
@media (max-width:640px){nav.toc a{padding:12px 9px;font-size:15px}} /* schmal etwas kleiner, damit die Leiste nicht viel weiter seitlich scrollt */
/* Menü mittig (Justus 27.09.2026); über die Außenabstände statt justify-content:center, damit es auf schmalen Bildschirmen, wo die Leiste
   seitlich scrollt, links beginnt und nichts abgeschnitten wird */
nav.toc .in>a:first-child{margin-left:auto} nav.toc .in>a:last-child{margin-right:auto}
@media (min-width:900px){nav.toc .in::after{content:"";flex:0 0 148px}} /* 75 px links der Mitte (Justus 27.09.2026): Platzhalter rechts 148 px plus 2 px Lücke; schmaler, wo die Leiste scrollen kann, genau mittig */
nav.toc a:hover,nav.toc a:focus-visible{color:var(--ink);border-bottom-color:var(--rule-strong);outline:none}
nav.toc a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)} /* aktuelle Seite */
nav.toc a[aria-current="page"]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:4px} /* Tastaturfokus auch auf der aktuellen Seite sichtbar */
nav.toc a .cnt{display:inline-block;min-width:20px;padding:0 6px;margin-left:6px;border-radius:10px;background:var(--bad);color:var(--bad-ink);font-size:12px;font-weight:700;text-align:center;line-height:20px}

section{padding-block:24px 6px;display:grid;gap:16px;scroll-margin-top:62px;min-width:0}
section>*{min-width:0}
/* Abschnittstitel: eine kompakte Zeile statt Überschrift plus Einleitung */
/* Abschnittstitel sichtbar entfernt (Justus 27.09.2026: „diese Überschriften sollen weg“; seit den eigenen Seiten nennt das Menü die Seite):
   nur für Screenreader da, als Beschriftung des Abschnitts und als Fokusziel nach einem Seitenwechsel (wie .sr-only) */
h2.eyebrow.sec{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Rebalancing-Stichtag als große Zahl (Justus 07.10.2026, Vorschlag 8): wie die große Zahl der Depotentwicklung (.rd-hero), daneben die
   Restzeit (fällig: Warnfarbe), dahinter klein die Erklärung; vorher eine kleine graue Zeile „Stichtag … · quartalsweise“ */
.rebhero{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin:0 0 clamp(8px,1.5vw,18px)}
.rebhero .hv{font-size:42px;font-weight:600;letter-spacing:-.01em;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.rebhero .hp{font-size:19px;font-weight:600;color:var(--ink-2)}
.rebhero .hp.due{color:var(--warn)}
.rebhero .hs{font-size:13.5px;color:var(--muted)}
@media (max-width:560px){.rebhero .hv{font-size:34px} .rebhero .hp{font-size:17px}}
/* Seiten (Justus 27.09.2026): jeder Menüpunkt ist eine eigene Seite, sichtbar ist nur der Abschnitt zur Adresse (#status, #depot …;
   app.js wirePages). Der Titel bekommt nach einem Seitenwechsel den Fokus (für Screenreader), ohne Rahmen */
section[hidden]{display:none!important}
h2.eyebrow.sec:focus{outline:none}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:10px;box-shadow:var(--shadow);min-width:0}
.pad{padding:16px 18px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}

/* Chips, Zustände */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;line-height:1;padding:5px 9px 5px 7px;border-radius:999px;white-space:nowrap}
.chip svg{width:13px;height:13px;flex:0 0 auto}
.c-buy{color:var(--good);background:var(--good-bg)}
.c-sell{color:var(--bad);background:var(--bad-bg)}
.c-warn{color:var(--warn);background:var(--warn-bg)}
/* Chip als Knopf zum Aufklappen (Grenzfall, Justus 27.09.2026): Pfeil rechts, zeigt nach oben, wenn offen */
button.chip{border:0;margin:0;font-family:inherit;cursor:pointer}
button.chip.tog::after{content:"";width:5px;height:5px;margin:0 1px 0 2px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-1.5px) rotate(45deg)}
button.chip.tog[aria-expanded="true"]::after{transform:translateY(1.5px) rotate(-135deg)}
button.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.c-info{color:var(--ink-2);background:var(--surface-2)}
.state{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:6px 12px 6px 10px;border-radius:8px}
.state i{width:10px;height:10px;border-radius:50%;display:inline-block}
.state.in{background:var(--good-bg);color:var(--good)}
.state.in i{background:var(--good)}
.state.out{background:var(--surface-2);color:var(--ink-2)}
.state.out i{background:transparent;border:2px solid var(--muted)}
.tag{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:2px 7px;border-radius:5px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap;vertical-align:middle}
.tag.est{background:var(--warn-bg);color:var(--warn)}
.tag.ok{background:var(--good-bg);color:var(--good)}
.tag.bad{background:var(--bad-bg);color:var(--bad)}
.tag.acc{background:var(--accent-soft);color:var(--accent)}

/* Live-Block auf den Status-Karten */
.scard .live{border-radius:8px;padding:9px 12px;background:var(--surface-2);display:grid;gap:3px}
/* Woche schlösse mit Kaufsignal: hellgrün, mit Verkaufssignal: hellrot (Farben --live-* oben je Farbschema; Justus 27.09.2026) */
.scard .live.would.buy{background:var(--live-buy-bg)}
.scard .live.would.sell{background:var(--live-sell-bg)}
.scard .live.would .ll,.scard .live.would .ls{color:var(--live-sub)}
.scard .live .lh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.scard .live .ll{font-size:12.5px;color:var(--muted)}
.scard .live .lv{font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap} /* aktueller Kurs größer (Justus 27.09.2026, 17 → 22 px), eine Stufe unter dem Wochenschluss darüber; bricht nie um, bei Platzmangel bricht die Beschriftung links */
.scard .live .ld{font-size:13px;color:var(--ink-2)}
.scard .live.would .ld{font-weight:500} .scard .live.would.buy .ld{color:var(--live-buy-ink)} .scard .live.would.sell .ld{color:var(--live-sell-ink)}
.scard .live .ls{font-size:11.5px;color:var(--muted)}

/* Status-Karten */
.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px}
/* Abstand über dem Seitentitel (Justus 27.09.2026, zuerst für „Status“, seit den eigenen Seiten für alle): ab etwa 1070 px Breite 32 px
   zusätzlich, schmaler weniger (mind. 12 px). Als padding, weil ein margin mit dem Abstand unter der Navigation verschmelzen würde;
   scroll-margin-top so groß, dass ein Sprung zur Seite (#depot …, auch vom Browser selbst) immer ganz oben landet, mit Kopf und Menü */
.wrap>section{--stx:clamp(12px,3vw,32px);padding-top:calc(24px + var(--stx));scroll-margin-top:200vh}
#status>.toolbar{justify-content:flex-end;margin-bottom:clamp(12px,2.5vw,20px)} /* mehr Abstand unter der Zeitraum-Leiste (Justus 27.09.2026): bis zu den Karten 40 statt 20 px, auf dem Handy 32 px */
/* Status-Karten als offene Spalten (Justus 26.09.2026, Entwurf B): kein eigener Kasten (kein Rahmen, keine Fläche, keine Rundung);
   die Spalten stehen direkt auf dem Seitengrund und sind nur durch eine Linie mitten im Spaltenabstand getrennt */
/* Abstand zwischen den drei Spalten bei Status und Regeln (Justus 27.09.2026, Entwurf C): bei 1512 px Fensterbreite 68 px,
   bis etwa 1090 px wie früher 56 px, höchstens 70 px; die Trennlinie steht jeweils in der Mitte */
.rules{--sgap:clamp(56px,calc(2.85vw + 25px),70px)}
.scards{--sgap:clamp(56px,calc(2.85vw + 25px),68px)} /* Status-Spalten: Abstand höchstens 68 px (Justus 27.09.2026) */
.scards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--sgap)}
.scards .scard{grid-row:span 4;grid-template-rows:subgrid;row-gap:20px;scroll-margin-top:70px} /* Abstand zwischen den Blöcken 20 px, vorher 30 px (Justus 27.09.2026) */
.scard{display:grid;gap:12px;padding:4px 0 8px;align-content:start;position:relative}
.card.scard{background:none;border:0;border-radius:0;box-shadow:none}
.scards .scard+.scard::before{content:"";position:absolute;left:calc(var(--sgap) / -2);top:0;bottom:0;border-left:1px solid var(--rule)}
.scard .top1,.scard .mid,.scard .bot{display:grid;gap:10px;align-content:start;min-width:0}
.scard .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
/* Name und Icon der Status-Karten größer (Justus 27.09.2026, Variante C: 23 px statt 16,5 px, Icon 29 px statt 20 px; danach Icon
   „ein wenig kleiner“: 25 px, dann „noch kleiner, die Schrift bleibt gleich groß“: 21 px; danach „nur die Namen wieder etwas größer“: Name bis 25 px, app.js fitNames; zuletzt „nur die Icons noch ein bisschen kleiner“: 18 px) */
.scard .hd h3{display:flex;align-items:center;gap:8px;font-size:23px} /* app.js fitNames vergrößert auf bis zu 25 px, wo Platz ist */
.aic{display:inline-block;flex:0 0 auto;line-height:0}
.aic svg{width:100%;height:100%;display:block;overflow:visible}
.scard .hd .aic{width:18px;height:18px}
.scard .sub{font-size:12.5px;color:var(--muted)}
.scard .stbox{display:grid;justify-items:end;gap:4px;flex:1 1 0} /* nimmt nur den Platz neben dem vollen Namen; der Name bricht erst um, wenn auch „Investiert“ und „seit Kaufsignal …“ nicht mehr daneben passen (27.09.2026) */
/* „seit Kaufsignal TT.MM.JJ“ bzw. „seit Verkaufssignal TT.MM.JJ“ und darunter die Prozentzahl seit dem Signal (app.js renderStatus), ungefärbt (Justus 27.09.2026) */
.scard .since{font-size:13.5px;color:var(--muted);text-align:right} /* 13,5 statt 12 px (Justus 27.09.2026) */
.scard .since>span{display:block;white-space:nowrap}
.scard .since>.sl{white-space:normal} /* „seit Kaufsignal“ bleibt zusammen, das Datum rutscht bei Platzmangel in die nächste Zeile (statt dass der Name umbricht) */
.scard .since .sp{font-weight:600;font-variant-numeric:tabular-nums}
.scard .fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
/* Wochenschluss-Block größer (Justus 27.09.2026: „den Bereich größer machen“): alle drei Größen mal --figk, das app.js fitFig auf bis zu 1,2 setzt,
   soweit Kurs und „zum SMA50“ dabei in einer Zeile bleiben */
.scard .fig .fl{font-size:calc(12.5px * var(--figk, 1));color:var(--muted);flex-basis:100%}
.scard .fig .fv{font-size:calc(clamp(26px,calc(1.6vw + 10px),30px) * var(--figk, 1));font-weight:600;letter-spacing:-.01em;color:var(--ink)}
@media (max-width:980px){.scard .fig .fv{font-size:calc(30px * var(--figk, 1))}} /* Status-Spalten (Justus 27.09.2026): die große Zahl wächst mit der Fensterbreite (26 → 30 px bis 1250 px), damit Kurs und „zum SMA50“ in einer Zeile bleiben */
.scard .fig .fd{font-size:calc(13px * var(--figk, 1));color:var(--ink-2);font-variant-numeric:tabular-nums}
.scard .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
/* Erklärung zum Grenzfall (app.js edgeLines): was geschah, was knapp auf der anderen Seite der Schwelle passiert wäre, warum das zählt */
.scard .edgex{border-radius:8px;padding:10px 12px;background:var(--warn-bg);font-size:13px;line-height:1.45;color:var(--ink);display:grid;gap:6px}
.scard .edgex p{margin:0}
.scard .edgex .alt{font-weight:600}
.scard .edgex .why{font-size:12.5px;color:var(--ink-2)}
/* „· vorläufig“ bzw. „· Ersatzquelle“ hinter dem Datum des Wochenschlusses als Knopf zum Aufklappen der Erklärung (Justus 07.10.2026,
   Vorschlag 2); gleiche Schrift und Zeilenhöhe wie das Datum, damit Wochenschluss und große Zahl in allen drei Karten auf einer Linie bleiben */
.scard .fig .fl .pre{font:inherit;font-weight:600;color:var(--warn);background:none;border:0;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:baseline;gap:5px}
.scard .fig .fl .pre::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2.5px) rotate(45deg)}
.scard .fig .fl .pre[aria-expanded="true"]::after{transform:translateY(0) rotate(-135deg)}
.scard .fig .fl .pre:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.scard .act{border-radius:8px;padding:10px 12px;background:var(--surface-2);display:grid;gap:3px}
.scard .act b{font-size:15.5px}
.scard .act.buy{background:var(--good-bg)} .scard .act.buy b{color:var(--good)}
.scard .act.sell{background:var(--bad-bg)} .scard .act.sell b{color:var(--bad)}
.scard .act span{font-size:13px;color:var(--ink-2)}
/* Handlung als aufklappbare Box: Titel mit +/–, Text erst nach Klick (Justus 27.09.2026) */
.scard details.act{display:block}
.scard details.act>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.scard details.act>summary::-webkit-details-marker{display:none}
.scard details.act>summary::after{content:"+";font-weight:400;color:var(--muted);font-size:18px;line-height:1}
.scard details.act[open]>summary::after{content:"–"}
.scard details.act>summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.scard details.act>span{display:block;margin-top:3px}
/* Steuerhinweis zum Verkauf in der Handlung (app.js renderStatus, Justus 27.09.2026): unter dem Text, durch eine feine Linie abgesetzt;
   ein Warnhinweis mit Warnsymbol und dunklerer Schrift */
.scard details.act>.atax{display:flex;gap:7px;align-items:flex-start;margin:9px 0 0;padding-top:9px;border-top:1px solid var(--rule)}
.scard details.act>.atax svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;color:var(--warn)}
.scard details.act>.atax.warn span{color:var(--ink)}
/* Kleine Zahl über dem Chart-Fenster (Justus 27.09.2026): beim Darüberfahren oder mit den Pfeiltasten steht dort der Wochenschluss der Woche
   unter dem Zeiger mit Datum (app.js chartHover), der Kopf der Karte bleibt beim letzten Wochenschluss. Die Zeile liegt absolut im Abstand
   über dem Chart (40 px), braucht also keinen Platz und lässt nichts springen; ohne Zeiger ist sie leer */
.scard .cchart{position:relative;min-width:0;align-self:start;margin-top:20px} /* 20 px zusätzlich zum Zeilenabstand: 40 px über dem Chart, Platz für die Zeile .crd mit Luft zur Box darüber (Justus 27.09.2026, vorher 26 px) */
.scard .crd{position:absolute;left:0;right:0;bottom:100%;margin-bottom:5px;display:flex;align-items:baseline;gap:8px;font-size:12.5px;line-height:17px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;pointer-events:none}
.scard .crd b{font-weight:600;color:var(--ink)}
.scard .nextact{font-size:13px;color:var(--ink-2)}
.scard dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:13.5px}
.scard dt{color:var(--muted)}
.scard dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.scard .next{font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:10px}
.scard .next b{color:var(--ink);font-variant-numeric:tabular-nums}
.scard details.mini>summary{padding:10px 12px;font-size:13px}
.scard details.mini .body{padding:0 6px 8px}
@media (max-width:980px){.scards{grid-template-columns:minmax(0,1fr);gap:0} .scards .scard{grid-row:auto;grid-template-rows:none;padding:22px 0} .scards .scard:first-child{padding-top:4px} .scards .scard+.scard{border-top:1px solid var(--rule)} .scards .scard+.scard::before{display:none}}
.warnbox{border-radius:8px;padding:9px 12px;background:var(--warn-bg);color:var(--warn);font-size:13px;display:flex;gap:8px;align-items:flex-start}
.warnbox svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px}
.infobox{border-radius:8px;padding:9px 12px;background:var(--accent-soft);color:var(--ink);font-size:13px}

/* Feed, Zeitplan, Läufe */
.feed{display:grid}
.feed .it{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px 18px;border-top:1px solid var(--rule)}
.feed .it:first-child{border-top:0}
.feed .it h4{margin:0 0 2px}
.feed .it p{font-size:13.5px;color:var(--ink-2)}
.feed .it time{font-size:12.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.feed .more{padding:10px 18px;border-top:1px solid var(--rule)}
/* neue, beim Öffnen von „Signale“ gelesene Einträge: für diesen Besuch markiert (app.js FEED_NEW) */
#signale .feed .it.new{background:var(--accent-soft);border-radius:8px;padding-left:12px;padding-right:12px;border-top-color:transparent}
#signale .feed .it.new+.it{border-top-color:transparent}
#signale .feed .it.new+.it.new{margin-top:6px}
.feed .newtag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:9px;background:var(--bad);color:var(--bad-ink);font-size:11px;font-weight:700;letter-spacing:.02em;vertical-align:2px}
.sched{display:grid}
.sched div{display:flex;justify-content:space-between;gap:12px;padding:9px 18px;border-top:1px solid var(--rule);font-size:13.5px}
.sched div:first-child{border-top:0}
.sched b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.runlog{display:grid}
.runlog>div{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:9px 18px;border-top:1px solid var(--rule);font-size:13.5px}
.runlog>div:first-child{border-top:0}
.runlog b{font-weight:600}
.runlog time{font-size:12.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.runlog p{grid-column:1/-1;font-size:12.5px;color:var(--muted);margin:0;overflow-wrap:anywhere}
.runlog .bad{color:var(--bad);font-weight:600}
.runlog .empty{display:block;color:var(--muted)}

/* Steuerung */
.controls{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
/* Umschalter (Zeitraum, Gewinn/Wert/Vergleich) ohne grauen Kasten und Rahmen (Justus 27.09.2026), wie das Menü: gewählt hell mit Linie darunter */
.seg{display:inline-flex;flex-wrap:wrap;max-width:100%;background:none;border:0;border-radius:0;padding:0;gap:2px}
.seg button{font:inherit;font-size:13.5px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ink-2);padding:6px 10px;border-radius:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.seg button:hover{color:var(--ink);border-bottom-color:var(--rule-strong)}
.seg button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.seg button:focus-visible,.btn:focus-visible,button.link:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Charts */
.chartcard{padding:14px 16px 12px;display:grid;gap:8px}
.chart-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink-2)}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend i{display:inline-block;width:18px;height:0;border-top:2px solid;border-radius:2px}
.chart-legend i.dash{border-top-style:dashed}
.chart-legend i.box{height:10px;border:0;border-radius:2px}
.chart-legend i.tri{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:0;border-bottom:9px solid}
.chart-legend i.tri.dn{border-bottom:0;border-top:9px solid}
.chart{position:relative;width:100%}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart svg text{font-family:var(--sans);font-variant-numeric:tabular-nums}
.chart:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.scard .chart{touch-action:manipulation}
.chart.loading{opacity:.55}
.splitcharts{display:grid;gap:10px}
/* Vergleich mit Buy & Hold: Drawdown-Chart und Kennzahlen */
.perfdd{display:grid;gap:6px}
.ddtab{font-size:13px;width:auto;min-width:min(100%,560px)}
.ddtab th,.ddtab td{padding:6px 10px}
.ddtab tbody th{font-weight:500;color:var(--ink-2);white-space:nowrap}
.ddtab tbody tr:last-child th{border-bottom:0}
.ddtab td.wrap{white-space:normal}
/* Reine Regel im Vergleich (Justus 28.09.2026): Gründe für den Abstand und Orders der Regel neben deinen Orders */
.attrtab tbody th,.attrtab thead th:first-child{white-space:normal}
@media (max-width:560px){.perfdd .ddtab th,.perfdd .ddtab td{padding-left:6px;padding-right:6px}.perfdd .ddtab thead th{white-space:normal}}
@media (max-width:400px){.perfdd .ddtab{font-size:12.5px}}
.attrtab tfoot th,.attrtab tfoot td{font-weight:600;border-top:1px solid var(--rule-strong);border-bottom:0}
.perfdd .ordhead{margin-top:4px}
.ordtab{font-size:12.5px;width:auto;min-width:min(100%,560px)}
.ordtab th,.ordtab td{padding:7px 10px}
.ordtab td b{display:block;font-weight:600}
.ordtab td .sub{display:block;color:var(--muted);font-size:12px;margin-top:1px}
@media (max-width:560px){.ordtab,.ordtab tbody{display:block;min-width:0}.ordtab thead{display:none}.ordtab tr{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;padding:9px 0;border-bottom:1px solid var(--rule)}.ordtab tbody tr:last-child{border-bottom:0}.ordtab td{display:block;border:0;padding:0}.ordtab td::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}.ordtab td.n{grid-column:1 / -1;text-align:left;white-space:normal;margin-top:6px}.ordtab td.n::before{display:inline;margin:0 6px 0 0}}
.tip{position:absolute;pointer-events:none;background:var(--surface);border:1px solid var(--rule-strong);border-radius:8px;box-shadow:var(--shadow);padding:8px 10px;font-size:12.5px;min-width:190px;opacity:0;transition:opacity .08s;z-index:3}
.tip .d{color:var(--muted);margin-bottom:4px}
.tip .r{display:grid;grid-template-columns:14px 1fr auto;gap:8px;align-items:center}
.tip .r i{display:block;width:12px;border-top:2px solid}
.tip .r i.dash{border-top-style:dashed}
.tip .r i.none{border:0}
.tip .r b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);text-align:right}
.tip .r span{color:var(--ink-2)}
.tip .s{margin-top:5px;padding-top:5px;border-top:1px solid var(--rule);color:var(--ink-2)}
/* Werte-Zeile über den Charts (Justus 26.09.2026): statt eines Kästchens im Chart; feste Mindestbreite der Werte, damit nichts springt.
   Etwas größer seit 26.09. abends (Justus: „wirklich nur ein bisschen größer“): Depotentwicklung 13 → 14 px, Signalcharts 12,5 → 13,5 px.
   --rdh: Höhe des Kopfs für den längsten Tag (syncGroup), damit die Werte darunter beim Darüberfahren nicht springen */
.chart-legend.readout{display:grid;gap:3px;font-size:14px}
.readout .rd-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;min-height:var(--rdh,1.5em)}
.readout .rd-h b{font-weight:600;color:var(--ink)}
.readout .rd-x{color:var(--muted)}
.readout .rd-row{display:flex;flex-wrap:wrap;align-items:center;gap:3px 18px}
.readout .rd-i{white-space:nowrap}
.readout .rd-t{color:var(--muted)}
.readout .rd-v{display:inline-block;min-width:var(--rdw,8ch);text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.readout .rd-short{display:none}
.readout .rd-n{color:var(--ink-2)}
.readout .sig-buy{color:var(--good);font-weight:600}
.readout .sig-sell{color:var(--bad);font-weight:600}
/* Depotentwicklung: große Zahl statt Kopfzeile (Justus 27.09.2026, Entwurf C); Breiten aus charts.js fitHero, damit nichts springt */
.readout .rd-hero{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px}
.readout .rd-hero .hv{display:inline-block;min-width:var(--hvw,0);font-size:42px;font-weight:600;letter-spacing:-.01em;line-height:1.15;color:var(--ink)}
.readout .rd-hero .hp{min-width:var(--hpw,0);font-size:19px;font-weight:600;color:var(--ink-2)} /* große Zahl 42 statt 32 px, Prozent 19 statt 15 px (Justus 27.09.2026) */
.readout .rd-hero .hp.good{color:var(--good)}
.readout .rd-hero .hp.bad{color:var(--bad)}
.readout .rd-hero .hs{font-size:13.5px;color:var(--muted)}
.readout .rd-hero .hs i{border-top-width:3px;margin-right:7px;vertical-align:middle} /* Farbmarke der Linie zur großen Zahl (Vergleich, 02.10.2026) */
.readout .rd-chips{gap:3px 16px;font-size:13.5px}
.readout .rd-chips .rd-v{text-align:left;margin-left:2px}
.readout .rd-chips .rd-i{font-size:15px} /* Bausteine unter der großen Zahl etwas größer (Justus 27.09.2026, 13,5 → 15 px wie die Prozentzahl daneben); „Positionen … · Wert …“ bleibt klein */
@media (max-width:560px){.readout .rd-hero .hv{font-size:34px} .readout .rd-hero .hp{font-size:17px}}
/* Signalcharts: feste Zeilen je nach verfügbarer Breite (charts.js fitMode misst mit der Schrift des Geräts), in allen drei Karten gleich,
   damit die Charts auf gleicher Höhe bleiben und nichts abgeschnitten wird. Grundform (schmal): Datum, Abstand, Schluss, SMA50, Regelstand je
   eine Zeile; rd-mid: Schluss und SMA50 nebeneinander; rd-wide: drei Zeilen (Datum und Abstand, Schluss und SMA50, Regelstand);
   rd-two: der Regelstand darf zwei Zeilen nutzen (immer reserviert). */
.chart-legend.rule-rd{font-size:13.5px;margin-bottom:6px}
.rule-rd .rd-h,.rule-rd .rd-n{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rule-rd .rd-h b{display:block}
.rule-rd .rd-row{display:grid;justify-items:start}
.rule-rd .rd-l{min-width:4.6em}
.rule-rd.rd-mid .rd-row,.rule-rd.rd-wide .rd-row{display:flex;flex-wrap:nowrap;overflow:hidden}
.rule-rd.rd-mid .rd-l,.rule-rd.rd-wide .rd-l{min-width:0}
.rule-rd.rd-wide .rd-h b{display:inline;margin-right:10px}
.rule-rd.rd-two .rd-n{white-space:normal;min-height:3em}
/* Großansicht (Justus 27.09.2026: „Die Schrift soll deutlich größer sein. Nutze auch den freien Platz nach rechts“): Werte-Zeile 13,5 → 18 px;
   rd-line (charts.js fitMode: Datum, Abstand, Schluss und SMA50 passen zusammen in eine Zeile, Abstand 32 px) = zwei Zeilen, der Regelstand darunter */
.bigchart .rule-rd{font-size:18px;gap:5px;margin-bottom:10px}
.bigchart .rule-rd .rd-row{gap:4px 24px}
.bigchart .rule-rd i{width:22px}
/* Wert direkt hinter „Schluss“ und „SMA50“ (Justus 27.09.2026: „weniger Abstand“): linksbündig in der reservierten Breite, statt rechtsbündig mit Leerraum davor */
.bigchart .rule-rd .rd-v{text-align:left}
.rule-rd.rd-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 32px}
.rule-rd.rd-line .rd-h{display:flex;flex-wrap:nowrap;align-items:baseline;gap:0 12px;min-height:0;overflow:visible}
.rule-rd.rd-line .rd-h b{display:inline;margin-right:0}
.rule-rd.rd-line .rd-row{flex-wrap:nowrap;overflow:visible;align-items:baseline}
/* Schluss und SMA50 auf derselben Schriftlinie wie Datum und Regelstand: Beschriftung und Wert nach der Grundlinie, die Farbmarke mittig
   (ohne das richtete sich die Gruppe nach der textlosen Marke und saß einige Pixel zu tief) */
.rule-rd.rd-line .rd-i{align-items:baseline}
.rule-rd.rd-line .rd-i>i{align-self:center}
.rule-rd.rd-line .rd-n{flex-basis:100%}
/* rd-one (charts.js fitMode): der Regelstand passt klein in dieselbe Zeile (Justus 27.09.2026: „Regel investiert und Band klein in der gleichen
   Zeile“); Abstand zwischen Kopf, Werten und Regelstand 28 px, charts.js liest ihn von hier */
.rule-rd.rd-one{column-gap:28px}
.rule-rd.rd-one .rd-n{flex-basis:auto;font-size:14px}
@media (max-width:560px){.bigchart .rule-rd{font-size:16px}}
@media (max-width:560px){#perfLegend.readout .rd-h{min-height:var(--rdh,3em)}.readout .rd-long{display:none}.readout .rd-short{display:inline}}
.cap{font-size:13px;color:var(--muted)}
#perfCap:empty{display:none} /* ohne Sonderfall-Hinweis keine leere Zeile unter dem Chart der Depotentwicklung (27.09.2026) */
.subhd{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* Ein-/ausklappbare Karten */
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fold{font:inherit;font-size:12.5px;font-weight:500;color:var(--accent);background:transparent;border:1px solid transparent;border-radius:6px;padding:3px 8px 3px 22px;cursor:pointer;position:relative;white-space:nowrap}
.fold::before{content:"";position:absolute;left:8px;top:50%;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.fold[aria-expanded="false"]::before{transform:translateY(-35%) rotate(-45deg)}
.fold:hover{background:var(--surface-2,rgba(0,0,0,.04))}
.fold:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cardhead.tight{padding-bottom:6px}
.cardhead.topline{border-top:1px solid var(--rule)}
.card.folded > .cardhead.tight{padding-bottom:16px}
#pushBody{display:grid;gap:12px}

/* Tabellen */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:8px 11px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
thead th{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule-strong);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td .aic{width:16px;height:16px;margin-right:8px;vertical-align:-3px}
tfoot td{font-weight:600;border-top:1px solid var(--rule-strong);border-bottom:0}
.up{color:var(--good)} .down{color:var(--bad)}

/* Aufteilung */
.alloc{display:grid;gap:12px}
.donuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;align-items:start}
.donut{position:relative;display:grid;justify-items:center;gap:4px;margin:0;min-width:0}
.donut svg{width:100%;max-width:300px;height:auto;display:block;overflow:visible}
.alloc td .sub{display:block;font-size:12px;color:var(--muted)}
.alloc td .dm{display:none}
@media (max-width:480px){
  .alloc table th:nth-child(4),.alloc table td:nth-child(4){display:none}
  .alloc td .dm{display:block}
  .alloc th,.alloc td{padding-left:6px;padding-right:6px}
}
.donut figcaption{font-size:13px;color:var(--ink-2);text-align:center}
.donut figcaption b{color:var(--ink);font-weight:600}
.donut .tip{min-width:170px}
.perf-head{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 12px} /* ohne Überschrift „Depotentwicklung“ */
.perf-head .controls{flex:1 1 auto;justify-content:space-between} /* „Gewinn / Wert / Vergleich“ links, Zeitraum rechts (Justus 27.09.2026) */
/* Depot offen wie Status und Regeln (Justus 27.09.2026): keine Kästen, die Blöcke nur durch Linien getrennt,
   der Inhalt bündig mit dem Abschnittstitel */
#depot{row-gap:0}
#depot>.card,#depot>details.box{background:none;border:0;border-radius:0;box-shadow:none}
#depot>#depotBanner:not(:empty){padding-top:16px}
#depot>.card{padding:22px 0 26px;border-top:1px solid var(--rule)}
#depot>#alloc{border-top:0}
#depot>.card>.pad{padding:0 0 6px}
#depot table th:first-child,#depot table td:first-child{padding-left:0}
#depot table th:last-child,#depot table td:last-child{padding-right:0}
/* Ist und Ziel als zwei offene Spalten mit Linie in der Mitte; bis 640 px untereinander, getrennt durch eine Linie */
#depot .donuts{--dg:clamp(24px,5vw,56px);column-gap:var(--dg)}
#depot .donuts>*{position:relative}
#depot .donuts>*+*::before{content:"";position:absolute;left:calc(var(--dg) / -2);top:0;bottom:0;border-left:1px solid var(--rule)}
@media (max-width:640px){#depot .donuts{grid-template-columns:minmax(0,1fr);row-gap:0} #depot .donuts>*+*{border-top:1px solid var(--rule);padding-top:18px;margin-top:18px} #depot .donuts>*+*::before{display:none} #depot .donut svg{max-width:220px}}
/* Eingabe-Bereiche als Zeilen zwischen Linien */
#depot>details.box{border-top:1px solid var(--rule)}
#depot>details.box:last-child{border-bottom:1px solid var(--rule)}
#depot details.box>summary{padding:15px 0}
#depot details.box>summary:focus-visible{border-radius:4px}
#depot details.box .body{padding:4px 0 22px}
/* Abstände im Depot (Justus 27.09.2026). Reihenfolge: Depotentwicklung (direkt unter „Depot“, 16 px), darunter ohne Linie Portfolio/Ziel
   (102 px vom Chart bis zu den Ringen), dann mit Linie Positionen und Buchungen (je 80 px vom Inhalt darüber bis zur Linie); auf schmalen
   Bildschirmen weniger. Der Abstand über dem Titel „Depot“ ist seit den eigenen Seiten derselbe wie auf allen Seiten (.wrap>section). */
#depot>#perfCard{border-top:0;padding-top:16px} /* erster Block unter „Depot“ */
#depot>#alloc{margin-top:0;padding-top:0} /* keine Linie zwischen Depotentwicklung und Portfolio/Ziel; die Ringe dicht unter dem Chart (Justus 27.09.2026: „weniger Abstand“, sichtbar etwa 75 statt 149 px) */
#depot>#posCard{margin-top:clamp(16px,5vw,54px)}
#depot>#txCard{margin-top:clamp(16px,5vw,54px)}
/* Rebalancing, Signale, Einstellungen und Regeln offen wie Status und Depot (Justus 27.09.2026): keine Kästen, nur Linien,
   der Inhalt bündig mit dem Abschnittstitel. Abstand über dem Titel wie auf allen Seiten (.wrap>section) */
#signale .card,#rebalancing .card,#regeln>.card{background:none;border:0;border-radius:0;box-shadow:none}
/* Signale: zwei offene Spalten mit Linie in der Mitte (bis 980 px untereinander), in einer Spalte die Blöcke durch eine Linie getrennt.
   gap mit !important, weil die linke Spalte in index.html ein style-Attribut mit gap:14px hat */
#signale .grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
#signale .grid2>*{position:relative;min-width:0}
#signale .grid2>*+*::before{content:"";position:absolute;left:-28px;top:0;bottom:0;border-left:1px solid var(--rule)}
#signale .grid2>div{gap:0!important;align-content:start}
#signale .pushcard{padding:0 0 22px}
#signale .grid2 .card>.pad{padding-left:0;padding-right:0}
#signale .grid2>.card>.pad:first-child{padding-top:0}
#signale .grid2>div>.card+.card{border-top:1px solid var(--rule);padding-top:10px}
#signale .feed .it,#signale .feed .more,#signale .sched div,#signale .runlog>div{padding-left:0;padding-right:0}
@media (max-width:980px){#signale .grid2{grid-template-columns:minmax(0,1fr)} #signale .grid2>*+*::before{display:none} #signale .grid2>*+*{border-top:1px solid var(--rule);margin-top:14px;padding-top:10px}}
/* Rebalancing: Vorschläge ohne Kasten; bei zwei Vorschlägen zwei Spalten mit Linie in der Mitte (bis 980 px untereinander) */
#rebalancing #rebCards{gap:0 56px}
#rebalancing #rebCards.one{grid-template-columns:minmax(0,1fr)}
#rebalancing #rebCards:not(.one){grid-template-columns:repeat(2,minmax(0,1fr))}
#rebalancing #rebCards>*{position:relative}
#rebalancing #rebCards>*+*::before{content:"";position:absolute;left:-28px;top:0;bottom:0;border-left:1px solid var(--rule)}
#rebalancing .rv .hd{padding:0 0 14px}
#rebalancing .rv .ft,#rebalancing .rv .rebact{padding-left:0;padding-right:0}
#rebalancing table th:first-child,#rebalancing table td:first-child{padding-left:0}
#rebalancing table th:last-child,#rebalancing table td:last-child{padding-right:0}
#rebalancing>.card.pad{padding:20px 0 0;border-top:1px solid var(--rule);margin-top:6px}
@media (max-width:980px){#rebalancing #rebCards:not(.one){grid-template-columns:minmax(0,1fr)} #rebalancing #rebCards>*+*::before{display:none} #rebalancing #rebCards>*+*{border-top:1px solid var(--rule);margin-top:14px;padding-top:18px}}
/* Rebalancing besser lesbar (Justus 27.09.2026: „Bereich größer machen“): Stichtag, Hinweise oben, Titel, Kennzahlen, Tabelle und
   Zeile darunter je 1,5–4,5 px größer als die Grundschriften, Tabellenzeilen etwas luftiger */
#rebalancing #rebBanner .banner{font-size:15.5px;padding:13px 16px;gap:5px}
#rebalancing .rv .hd{gap:6px}
#rebalancing .rv .hd h3{font-size:21px}
#rebalancing .rv .hd p.small{font-size:15px}
#rebalancing .rv .hd .tot{font-size:15.5px;gap:6px 20px;margin-top:2px}
#rebalancing .rv table{font-size:15px}
#rebalancing .rv th,#rebalancing .rv td{padding-top:11px;padding-bottom:11px}
#rebalancing .rv thead th{font-size:12.5px}
#rebalancing .rv td .sub{font-size:13.5px}
#rebalancing .rv td .aic{width:18px;height:18px;vertical-align:-3px}
#rebalancing .rv .ft.small{font-size:15px}
/* Einstellungen: aufklappbare Bereiche als Zeilen zwischen Linien */
#einstellungen{row-gap:0}
#einstellungen>details.box{background:none;border:0;border-radius:0;border-top:1px solid var(--rule)}
#einstellungen>h2+details.box{border-top:0}
#einstellungen>details.box:last-child{border-bottom:1px solid var(--rule)}
#einstellungen details.box>summary{padding:15px 0}
#einstellungen details.box>summary:focus-visible{border-radius:4px}
#einstellungen details.box .body{padding:4px 0 22px}
/* Regeln: „Datenquellen und Ablauf“ ohne Kasten, mit Linie darüber */
#regeln>.card.pad{padding:20px 0 0;border-top:1px solid var(--rule);margin-top:6px}

/* Banner */
.banner{border-left:3px solid var(--warn);background:var(--warn-bg);padding:11px 14px;border-radius:0 8px 8px 0;color:var(--ink);font-size:14px;display:grid;gap:4px}
.banner.info{border-left-color:var(--accent);background:var(--accent-soft)}
.banner.bad{border-left-color:var(--bad);background:var(--bad-bg)}
.banner b{font-weight:600}
.banner .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}

/* Formulare */
details.box{background:var(--surface);border:1px solid var(--rule);border-radius:10px}
details.box>summary{cursor:pointer;padding:13px 18px;font-weight:600;font-size:14.5px;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
details.box>summary::-webkit-details-marker{display:none}
details.box>summary #taxYearLbl{margin-right:auto;margin-left:-4px} /* Jahr direkt hinter „Steuerangaben“ (Justus 27.09.2026), das Plus bleibt rechts */
details.box>summary::after{content:"+";font-weight:400;color:var(--muted);font-size:18px;line-height:1}
details.box[open]>summary::after{content:"–"}
details.box>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:10px}
details.box .body{padding:4px 18px 18px;display:grid;gap:14px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 14px;align-items:end}
.form label{display:grid;gap:5px;font-size:12.5px;color:var(--ink-2);font-weight:500}
.form label small{font-weight:400;color:var(--muted);font-size:12px}
.form label.check{grid-template-columns:auto 1fr;align-items:center;gap:8px}
.form label.check input{width:auto}
.form label.check small{grid-column:2}
.form label.check.wide{grid-column:1/-1}
input,select,textarea{font:inherit;font-size:14.5px;color:var(--ink);background:var(--surface);border:1px solid var(--rule-strong);border-radius:7px;padding:8px 10px;width:100%;min-width:0}
textarea{font-family:var(--mono);font-size:12px;min-height:88px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.btn{font:inherit;font-size:14px;font-weight:600;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:7px;cursor:pointer;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.danger{border-color:var(--bad);background:var(--bad);color:var(--bad-ink)}
.btn.sm{font-size:12.5px;padding:4px 9px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
button.link{font:inherit;background:none;border:0;color:var(--accent);text-decoration:underline;cursor:pointer;padding:0}
.formmsg{font-size:13px;color:var(--ink-2);min-height:1.2em}
.formmsg.err{color:var(--bad)}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.restore{display:grid;gap:8px;border-top:1px solid var(--rule);padding-top:12px}
.restore select{width:auto;flex:1 1 260px;max-width:100%}
#storeBanner:not(:empty){display:grid;gap:10px;margin-top:16px}

/* Rebalancing */
.rv{display:grid;gap:0;align-content:start}
.rv .hd{padding:14px 18px;display:grid;gap:4px;border-bottom:1px solid var(--rule)}
.rv .hd .tot{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--ink-2)}
.rv .hd .tot b{color:var(--ink);font-variant-numeric:tabular-nums}
.rv .ft{padding:12px 18px;border-top:1px solid var(--rule);display:grid;gap:8px}
.rv .rebact{padding:12px 18px 16px;border-top:1px solid var(--rule);display:grid;gap:8px;justify-items:start;min-width:0}
.rv .rebact .btn{white-space:normal;text-align:left}
.rebpanel{display:grid;gap:10px;width:100%;min-width:0}
.rebpanel table input{width:8.5em;text-align:right;padding:6px 8px;font-size:14px}
.rebpanel table input.sm{width:5.5em} /* Gebühr und Steuer: schmaler, damit die Tabelle mit der Spalte „Steuer“ in die Karte passt */
.rebpanel .rebdate{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--ink-2)}
.rebpanel .rebdate input{width:auto}
.rebprev{font-size:13px;color:var(--ink-2);margin:0}
.notes{display:grid;gap:7px;font-size:13.5px;color:var(--ink-2)}
.notes p{padding-left:14px;position:relative}
.notes p::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--rule-strong)}

/* Push */
.pushcard{display:grid;gap:12px}
.pushstate{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
ol.steps{margin:0;padding-left:20px;font-size:13.5px;color:var(--ink-2);display:grid;gap:5px}
ol.steps code,.notes code,.small code{font-family:var(--mono);font-size:12px;background:var(--surface-2);padding:1px 5px;border-radius:4px}

/* Großansicht */
.modal{position:fixed;inset:0;z-index:50;background:rgba(15,23,36,.55);backdrop-filter:blur(3px);overflow:auto;padding:24px 12px;display:grid;align-items:start;justify-items:center}
/* Großansicht bis 1800 px breit (Justus 27.09.2026; vorher 1360 px, davor 1240 px), der Chart darin bis 55 % der Fensterhöhe hoch (charts.js ruleChart, o.tall) */
.modalbox{position:relative;background:var(--bg);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow);width:min(1800px,100%);padding:18px 20px 22px;display:grid;--bgap:clamp(24px,3vw,40px);gap:var(--bgap)}
/* Großansicht: mehr Abstand zwischen Chart, Handlung, Grenze und Signalen (Justus 27.09.2026: „noch ein bisschen mehr als B“,
   ab etwa 1330 px Breite 40 px, auf schmalen Bildschirmen weniger, Handy 24 px).
   Kopf → Kennzahlen 40 px, seit die Zeile unter dem Namen entfallen ist, und Kennzahlen → Zeitraum-Leiste 30 px statt 10 px
   (Justus 27.09.2026: „unter dem Asset-Namen mehr Abstand lassen“, „über der Leiste ebenfalls“, dann „noch mehr Abstand bei beiden“) */
.modalbox>.toolbar{margin-top:calc(40px - var(--bgap));row-gap:30px}
.bigx{position:absolute;top:10px;right:10px;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.bigx svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.bigx:hover{background:var(--surface-2);color:var(--ink)}
.bigx:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.bighd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px;padding-right:34px}
.bighd h2{display:flex;align-items:center;gap:10px}
.bighd h2 .aic{width:26px;height:26px}
.bighd .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bigfacts{display:flex;flex-wrap:wrap;gap:8px 18px}
.bigfacts .bf{display:grid;gap:1px}
.bigfacts .k{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.bigfacts .v{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.bigfacts .bf.good .v{color:var(--good)}
.bigfacts .bf.bad .v{color:var(--bad)}
.bigchart{background:none;border:0;border-radius:0;padding:0} /* ohne grauen Kasten um das Chartfenster (Justus 27.09.2026), wie die kleinen Charts */
.modalbox>.bigchart{margin-bottom:clamp(16px,2.5vw,36px)} /* mehr Abstand unter dem Chart bis zur Handlung (Justus 27.09.2026): am Desktop etwa 80 statt 43 px unter der Jahresachse */
.modalbox .act{border-radius:8px;padding:10px 12px;background:var(--surface-2);display:grid;gap:3px}
.modalbox .act b{font-size:15.5px}
.modalbox .act.buy{background:var(--good-bg)} .modalbox .act.buy b{color:var(--good)}
.modalbox .act.sell{background:var(--bad-bg)} .modalbox .act.sell b{color:var(--bad)}
.modalbox .act span{font-size:13px;color:var(--ink-2)}
.modalbox .next{font-size:13.5px;color:var(--ink-2)} .modalbox .next b{color:var(--ink)}
.bigsw{display:grid;gap:6px}
.bigsw .swrow{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:13.5px;color:var(--ink-2)}
@media (max-width:640px){.modal{padding:8px} .modalbox{padding:14px} .bigx{top:6px;right:6px}}

/* Regeln */
/* Regel-Karten wie die Status-Karten als offene Spalten (Justus 26.09.2026) */
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--sgap)}
.rule{padding:4px 0 8px;display:grid;gap:8px;align-content:start;position:relative}
.card.rule{background:none;border:0;border-radius:0;box-shadow:none}
.rules .rule+.rule::before{content:"";position:absolute;left:calc(var(--sgap) / -2);top:0;bottom:0;border-left:1px solid var(--rule)}
/* Farbiger Rand über den Regel-Karten wie über den Status-Karten (Justus 27.09.2026: „bei den Regeln unten auch wieder“): 3 px in der Farbe
   des Bausteins über die ganze Spaltenbreite, mit runden Enden; untereinander (bis 980 px) statt der grauen Linie zwischen den Karten */
.rules .rule{padding-top:21px}
.rules .rule::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:2px;background:var(--acol,var(--rule))}
@media (max-width:980px){.rules{grid-template-columns:minmax(0,1fr);gap:0} .rules .rule{padding:21px 0 18px} .rules .rule+.rule::before{display:none}}
.rule .formula{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);border-radius:6px;padding:8px 10px;color:var(--ink);line-height:1.55}
footer{margin-top:36px;padding-top:16px;border-top:1px solid var(--rule);font-size:13px;color:var(--muted);display:grid;gap:6px}
footer[hidden]{display:none} /* nur bei einem Problem mit der letzten Aktualisierung der Kursdaten sichtbar (app.js renderFoot) */
#footSrc{color:var(--warn);margin:0}
#footSrc.bad{color:var(--bad)} /* fehlgeschlagener Lauf: rot */
@media (max-width:640px){
  .pad{padding:14px}
  .feed .it{grid-template-columns:auto 1fr;padding:12px 14px}
  .feed .it time{grid-column:2}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Buchungstabelle: Zusatzzeilen in Zellen, Notiz-Marker, Kopfzeilen-Knöpfe */
td .sub{display:block;font-size:12px;color:var(--muted);font-weight:400}
.noteic{display:inline-flex;width:15px;height:15px;border-radius:50%;border:1px solid var(--rule-strong);font-size:10px;font-style:italic;font-family:var(--serif,Georgia,serif);align-items:center;justify-content:center;color:var(--muted);margin-left:2px;vertical-align:middle;cursor:help}
.cardhead .row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fold.plain{padding-left:8px}
.fold.plain::before{display:none}
.fold.plain[aria-pressed="true"]{background:var(--surface-2)}
.pushcard{align-content:start}
.link.del{font-size:12.5px;color:var(--muted);text-decoration:none;white-space:nowrap}
.link.del:hover,.link.del:focus-visible{color:var(--bad);text-decoration:underline}
#signale .grid2{align-items:stretch} /* beide Spalten volle Höhe, damit die Trennlinie durchgeht (offene Spalten, 27.09.2026) */
/* Beimischung (ETH, SOL) in der Positionstabelle: leise Unterzeilen */
tr.altrow td{font-size:12.5px;color:var(--muted);padding-top:4px;padding-bottom:6px}
tr.altrow .tag{font-size:10.5px;padding:1px 6px}
/* Positionen-Tabelle etwas größer (Justus 27.09.2026): Zeilen 14,5 px statt 13,5 px, Spaltenköpfe 12 px statt 11,5 px; Unterzeilen,
   davon-Zeilen, Markierungen (investiert, Cash, live) und Icons im selben Verhältnis. Dafür 9 px statt 11 px Innenabstand links und rechts
   in den Zellen, damit die zehn Spalten weiter so früh nebeneinander passen wie vorher (Namen einzeilig ab etwa 1440 px Fensterbreite,
   gemessen mit Arial-Breiten). Die Buchungstabelle bleibt wie sie ist. */
#posTable table{font-size:14.5px}
#posTable th,#posTable td{padding-left:9px;padding-right:9px}
#depot #posTable th:first-child,#depot #posTable td:first-child{padding-left:0}
#depot #posTable th:last-child,#depot #posTable td:last-child{padding-right:0}
#posTable thead th{font-size:12px}
#posTable td .sub{font-size:12.5px}
#posTable tr.altrow td{font-size:13px}
#posTable .tag{font-size:12px}
#posTable tr.altrow .tag{font-size:11px}
#posTable td .aic{width:17px;height:17px}