/* Stil nach dem Design-Katalog: dunkles Navy, Glas-Panels, Glow nur auf Daten.
   Drei Farbstile: "tiefschwarz" (Standard, Schwarz mit Graphit-Glas), "schwarz" (Navy mit Schwarz)
   und "weiss" (Navy mit weißem Glas). Die Werte in :root sind Navy & Schwarz, die anderen überschreiben sie.
   Gewählt wird über <html data-stil="..."> (Einstellungen). */
:root {
  /* --- Farbstil: Navy & Schwarz --- */
  --hintergrund: #040A20;
  --panel-fest: #0B1A48;
  --hg-verlauf: linear-gradient(180deg, #0A1A4A 0%, #071236 35%, #040A20 70%, #010308 100%);
  --hg-licht:
    radial-gradient(900px 620px at 0% -8%, rgba(40, 80, 210, .38), transparent 65%),
    radial-gradient(800px 600px at 100% 0%, rgba(30, 60, 170, .22), transparent 65%),
    radial-gradient(1000px 700px at 60% 110%, rgba(20, 40, 130, .30), transparent 65%);
  --hg-kugeln:
    radial-gradient(circle at 16% 30%, rgba(55, 110, 255, .38) 0, rgba(55, 110, 255, 0) 260px),
    radial-gradient(circle at 84% 22%, rgba(45, 95, 230, .28) 0, rgba(45, 95, 230, 0) 230px),
    radial-gradient(circle at 52% 12%, rgba(120, 160, 255, .10) 0, rgba(120, 160, 255, 0) 180px),
    radial-gradient(circle at 72% 72%, rgba(40, 75, 210, .30) 0, rgba(40, 75, 210, 0) 280px),
    radial-gradient(circle at 24% 88%, rgba(50, 100, 240, .22) 0, rgba(50, 100, 240, 0) 230px);
  /* Glas: halbdurchsichtig, der Hintergrund schimmert verschwommen durch */
  --glas: linear-gradient(135deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, .008) 60%, rgba(255, 255, 255, .035) 100%),
          linear-gradient(155deg, rgba(20, 42, 120, .26) 0%, rgba(6, 14, 46, .36) 60%, rgba(2, 6, 20, .46) 100%);
  --glas-flach: rgba(255, 255, 255, .035);
  --glas-rand: rgba(255, 255, 255, .12);
  --linie: rgba(160, 190, 255, .12);
  --linie-hell: rgba(255, 255, 255, .26);
  --glanz: inset 0 1px 0 rgba(255, 255, 255, .16), inset 1px 0 0 rgba(255, 255, 255, .04), inset 0 0 24px rgba(120, 160, 255, .03);
  --schatten: 0 22px 50px rgba(0, 0, 0, .55), 0 0 30px rgba(40, 90, 230, .05);
  --leuchtkante: linear-gradient(90deg, transparent, rgba(120, 170, 255, .6) 50%, transparent);
  --leucht-schein: rgba(61, 139, 255, .4);
  --kopf-hg: rgba(3, 8, 26, .6);
  --feld-hg: rgba(0, 0, 0, .3);
  --nav-hg: rgba(3, 8, 26, .72);
  --dialog-hg: linear-gradient(155deg, rgba(16, 34, 96, .94), rgba(3, 8, 26, .97));
  --text: #EAF2FF;
  --gedaempft: #8FA3CC;
  /* feine Linien, Schein auf großen Zahlen, Diagramme */
  --tabellen-linie: rgba(140, 175, 255, .07);
  --zahl-schein: rgba(130, 180, 255, .22);
  --neutral: rgba(139, 163, 199, .18);
  --chart-text: #8BA3C7;
  --chart-gitter: rgba(120, 160, 240, .08);
  --chart-rand: rgba(120, 160, 240, .18);
  --chart-label: #13286E;

  /* --- gemeinsam --- */
  /* Live-Unschärfe ist teuer (bei jedem Scroll-Bild neu). Sie bleibt nur dort, wo Inhalt darunter
     durchscrollt: Kopfzeile, Navigation, Dialog-Hintergrund. Panels, Knöpfe und Felder haben keine. */
  --glas-unschaerfe: blur(16px) saturate(150%);
  --akzent: #3D8BFF;
  --gewinn: #2EE59D;
  --verlust: #FF5C6C;
  --warnung: #F2C14E;
  --serie2: #FF8A3D;
  --serie4: #B48CFF;
  --serie6: #3DD6F5;
  --radius: 10px;
  --abstand: 13px;
  --schrift: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme: dark;
}

/* --- Farbstil: Navy & Weiß --- */
:root[data-stil="weiss"] {
  --hintergrund: #081440;
  --panel-fest: #142C78;
  --hg-verlauf: linear-gradient(180deg, #0B1C52 0%, #091640 50%, #06102F 100%);
  --hg-licht:
    radial-gradient(900px 620px at 0% -8%, rgba(80, 130, 255, .36), transparent 65%),
    radial-gradient(800px 600px at 100% 0%, rgba(200, 220, 255, .12), transparent 65%),
    radial-gradient(1000px 700px at 60% 110%, rgba(60, 90, 220, .26), transparent 65%);
  --hg-kugeln:
    radial-gradient(circle at 16% 30%, rgba(90, 140, 255, .40) 0, rgba(90, 140, 255, 0) 220px),
    radial-gradient(circle at 84% 22%, rgba(225, 235, 255, .20) 0, rgba(225, 235, 255, 0) 190px),
    radial-gradient(circle at 72% 72%, rgba(70, 110, 240, .34) 0, rgba(70, 110, 240, 0) 250px),
    radial-gradient(circle at 24% 88%, rgba(210, 222, 255, .14) 0, rgba(210, 222, 255, 0) 200px);
  --glas: linear-gradient(135deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .07) 35%, rgba(255, 255, 255, .03) 65%, rgba(255, 255, 255, .06) 100%),
          linear-gradient(155deg, rgba(30, 60, 160, .14) 0%, rgba(10, 24, 80, .22) 100%);
  --glas-flach: rgba(255, 255, 255, .06);
  --glas-rand: rgba(255, 255, 255, .20);
  --linie: rgba(255, 255, 255, .14);
  --linie-hell: rgba(255, 255, 255, .45);
  --glanz: inset 0 1px 0 rgba(255, 255, 255, .32), inset 1px 0 0 rgba(255, 255, 255, .08);
  --schatten: 0 22px 50px rgba(2, 6, 30, .55), 0 0 30px rgba(255, 255, 255, .03);
  --leuchtkante: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9) 50%, transparent);
  --leucht-schein: rgba(255, 255, 255, .45);
  --kopf-hg: rgba(12, 28, 84, .5);
  --feld-hg: rgba(255, 255, 255, .07);
  --nav-hg: rgba(12, 28, 84, .62);
  --dialog-hg: linear-gradient(155deg, rgba(30, 56, 150, .94), rgba(10, 24, 76, .97));
  --text: #FFFFFF;
  --gedaempft: #B4C3E4;
}

/* --- Farbstil: Schwarz (tiefschwarz, Graphit-Glas, Akzente bleiben farbig) --- */
:root[data-stil="tiefschwarz"] {
  --hintergrund: #000000;
  --panel-fest: #151518;
  --hg-verlauf: linear-gradient(180deg, #0d0d0f 0%, #060607 45%, #000000 100%);
  --hg-licht:
    radial-gradient(900px 620px at 0% -8%, rgba(255, 255, 255, .06), transparent 65%),
    radial-gradient(800px 600px at 100% 0%, rgba(61, 139, 255, .06), transparent 65%);
  --hg-kugeln:
    radial-gradient(circle at 16% 30%, rgba(255, 255, 255, .07) 0, rgba(255, 255, 255, 0) 260px),
    radial-gradient(circle at 84% 22%, rgba(61, 139, 255, .09) 0, rgba(61, 139, 255, 0) 230px),
    radial-gradient(circle at 72% 72%, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, 0) 280px),
    radial-gradient(circle at 24% 88%, rgba(61, 139, 255, .05) 0, rgba(61, 139, 255, 0) 230px);
  --glas: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .025) 30%, rgba(255, 255, 255, .006) 60%, rgba(255, 255, 255, .03) 100%),
          linear-gradient(155deg, rgba(28, 28, 32, .55) 0%, rgba(11, 11, 13, .68) 60%, rgba(3, 3, 4, .78) 100%);
  --glas-flach: rgba(255, 255, 255, .035);
  --glas-rand: rgba(255, 255, 255, .10);
  --linie: rgba(255, 255, 255, .08);
  --linie-hell: rgba(255, 255, 255, .22);
  --glanz: inset 0 1px 0 rgba(255, 255, 255, .12), inset 1px 0 0 rgba(255, 255, 255, .03);
  --schatten: 0 22px 50px rgba(0, 0, 0, .75);
  --leuchtkante: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42) 50%, transparent);
  --leucht-schein: rgba(255, 255, 255, .16);
  --kopf-hg: rgba(0, 0, 0, .66);
  --feld-hg: rgba(255, 255, 255, .045);
  --nav-hg: rgba(0, 0, 0, .8);
  --dialog-hg: linear-gradient(155deg, rgba(28, 28, 32, .97), rgba(6, 6, 8, .98));
  --text: #F4F5F7;
  --gedaempft: #9A9EA8;
  --tabellen-linie: rgba(255, 255, 255, .06);
  --zahl-schein: rgba(255, 255, 255, .12);
  --neutral: rgba(160, 164, 172, .18);
  --chart-text: #8E929C;
  --chart-gitter: rgba(255, 255, 255, .06);
  --chart-rand: rgba(255, 255, 255, .14);
  --chart-label: #26262B;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: var(--hintergrund);
  color: var(--text);
  font: 500 14px/1.45 var(--schrift);
  -webkit-font-smoothing: antialiased;
}
/* Hintergrund als eigene feste Ebenen, weil iOS fixierte Hintergründe nicht kann */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0);
  background: var(--hg-licht), var(--hg-verlauf);
}
/* Lichtkugeln: Sie verschwimmen hinter dem Glas und machen den Glas-Effekt sichtbar */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0);
  background: var(--hg-kugeln);
}
a { color: inherit; text-decoration: none; }
h1 { font-size: 26px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 15px; font-weight: 700; margin: 0; }
p { margin: 0; }

.zahl { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.plus { color: var(--gewinn); }
.minus { color: var(--verlust); }
.warn { color: var(--warnung); }
.grau { color: var(--gedaempft); }
.klein { font-size: 12px; }
.rechts { text-align: right; }
.glow.plus { text-shadow: 0 0 14px rgba(46, 229, 157, .45); }
.glow.minus { text-shadow: 0 0 14px rgba(255, 92, 108, .45); }
.glow.warn { text-shadow: 0 0 14px rgba(242, 193, 78, .4); }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 22px;
  height: 60px; padding: 0 20px;
  padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
  background: var(--kopf-hg);
  backdrop-filter: var(--glas-unschaerfe); -webkit-backdrop-filter: var(--glas-unschaerfe);
  border-bottom: 1px solid var(--linie);
  box-shadow: var(--glanz), 0 10px 30px rgba(0, 0, 0, .35);
}
/* Leuchtlinie unter der Kopfzeile */
.kopf::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: var(--leuchtkante); opacity: .6; box-shadow: 0 0 14px var(--leucht-schein);
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; white-space: nowrap; }
.logo-icon {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  border: 1.5px solid var(--akzent); color: var(--akzent);
  box-shadow: 0 0 14px rgba(61, 139, 255, .35), inset 0 0 10px rgba(61, 139, 255, .15);
}
.nav { display: flex; gap: 2px; height: 100%; overflow-x: auto; scrollbar-width: none; }
.nav a {
  display: flex; align-items: center; padding: 0 12px;
  color: var(--gedaempft); font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--text); }
.nav a.aktiv {
  color: #fff; border-bottom-color: var(--akzent);
  text-shadow: 0 0 12px rgba(120, 175, 255, .7);
  background: linear-gradient(0deg, rgba(61, 139, 255, .16), transparent 70%);
}
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ---------- Formularelemente ---------- */
button, select, input, textarea { font: inherit; color: var(--text); }
button {
  font-weight: 700; font-size: 13px;
  background: var(--glas-flach); border: 1px solid var(--glas-rand); border-radius: 8px;
  padding: 7px 12px; cursor: pointer; white-space: nowrap;
  box-shadow: var(--glanz);
}
button:hover { border-color: rgba(61, 139, 255, .6); box-shadow: var(--glanz), 0 0 16px rgba(61, 139, 255, .18); }
button:disabled { opacity: .5; cursor: default; }
button.primaer { background: var(--akzent); border-color: var(--akzent); box-shadow: 0 0 18px rgba(61, 139, 255, .35); }
button.gefahr { color: var(--verlust); border-color: rgba(255, 92, 108, .35); background: rgba(255, 92, 108, .06); }
button.klein { padding: 4px 9px; font-size: 12px; }
button.link { background: none; border: 0; padding: 0; color: var(--akzent); box-shadow: none; }
select, input, textarea {
  background: var(--feld-hg); border: 1px solid var(--glas-rand); border-radius: 8px; padding: 7px 10px; font-weight: 600;
  box-shadow: var(--glanz);
}
select option { background: var(--panel-fest); }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--akzent); }
textarea { resize: vertical; min-height: 60px; }

.umschalter { display: inline-flex; max-width: 100%; border: 1px solid var(--glas-rand); border-radius: 8px; overflow-x: auto; scrollbar-width: none; }
.umschalter button { border: 0; border-radius: 0; background: transparent; color: var(--gedaempft); padding: 5px 10px; font-size: 12px; box-shadow: none; }
.umschalter button.aktiv { background: rgba(61, 139, 255, .22); color: var(--text); }

/* ---------- Seite und Raster ---------- */
.seite { padding: 16px 20px 48px; max-width: 1640px; margin: 0 auto; }
.seiten-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.seiten-kopf p { color: var(--gedaempft); margin-top: 4px; }
.raster { display: grid; gap: var(--abstand); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.raster + .raster, .kacheln + .raster { margin-top: var(--abstand); }
.b-3 { grid-column: span 3; } .b-4 { grid-column: span 4; } .b-5 { grid-column: span 5; }
.b-6 { grid-column: span 6; } .b-7 { grid-column: span 7; } .b-8 { grid-column: span 8; } .b-12 { grid-column: span 12; }
.spalte { display: flex; flex-direction: column; gap: var(--abstand); min-width: 0; }
@media (max-width: 1150px) {
  .b-3, .b-4, .b-5, .b-6, .b-7, .b-8 { grid-column: span 12; }
  .schmal-zuerst { order: -1; }
  .logo-text { display: none; }
}

.banner {
  margin-bottom: 12px; padding: 8px 12px; border-radius: 8px; font-size: 13px;
  border: 1px solid rgba(242, 193, 78, .35); background: rgba(242, 193, 78, .07); color: var(--warnung);
}
.banner.fehler { border-color: rgba(255, 92, 108, .35); background: rgba(255, 92, 108, .07); color: var(--verlust); }

/* ---------- Panels ---------- */
.panel {
  background: var(--glas);
  border: 1px solid var(--glas-rand); border-top-color: var(--linie-hell); border-radius: var(--radius);
  box-shadow: var(--glanz), var(--schatten);
  min-width: 0; display: flex; flex-direction: column;
  position: relative;
}
/* Diagonaler Lichtreflex auf dem Glas (liegt unter dem Inhalt) */
.panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .04) 42%, rgba(255, 255, 255, .012) 52%, transparent 66%);
}
/* Lichtkante oben auf jedem Panel */
.panel::after {
  content: ''; position: absolute; left: 14%; right: 14%; top: -1px; height: 1px; pointer-events: none;
  background: var(--leuchtkante); box-shadow: 0 0 12px var(--leucht-schein);
}
.panel-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 46px; padding: 6px 16px; border-bottom: 1px solid var(--linie); flex-wrap: wrap;
}
.panel-info { color: var(--gedaempft); font-size: 12px; font-weight: 600; }
.panel-aktion { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: 100%; min-width: 0; }
.panel-inhalt { padding: 14px 16px; min-width: 0; }
.panel-inhalt.eng { padding: 6px 8px; }

/* ---------- Kennzahl-Kacheln ---------- */
.kacheln { display: grid; gap: var(--abstand); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kachel { padding: 12px 14px; }
.kachel-titel { color: var(--gedaempft); font-size: 12px; font-weight: 700; }
.kachel-wert { font: 600 22px/1.25 var(--mono); margin-top: 4px; font-variant-numeric: tabular-nums; text-shadow: 0 0 16px var(--zahl-schein); }
.kachel-unter { color: var(--gedaempft); font-size: 12px; margin-top: 2px; }

/* Kopfbereich der Übersicht: Kontowert groß */
.held { padding: 20px 22px 14px; }
.held-oben { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 18px 28px; align-items: center; }
.held-chart { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie); }
.held-chart-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.held-wert { font: 700 44px/1.1 var(--mono); margin-top: 6px; letter-spacing: -.02em; text-shadow: 0 0 24px var(--zahl-schein); }
.held-rendite { font: 600 20px/1.3 var(--mono); margin-top: 6px; }
.held-rendite .grau { font: 500 13px var(--schrift); }
.held-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; }
.held-mini { font-size: 18px; margin-top: 2px; }
button.blick { text-align: left; cursor: pointer; }
button.blick:hover { border-color: rgba(61, 139, 255, .55); }
@media (max-width: 900px) {
  .held-oben { grid-template-columns: 1fr; }
}

/* ---------- Listen ---------- */
.zeile {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--linie); border-radius: 8px; background: var(--glas-flach); box-shadow: var(--glanz);
}
.zeile + .zeile { margin-top: 8px; }
.zeile.klickbar { cursor: pointer; }
.zeile.klickbar:hover { border-color: rgba(61, 139, 255, .55); box-shadow: var(--glanz), 0 0 18px rgba(61, 139, 255, .14); }
.zeile-haupt { flex: 1; min-width: 0; }
.zeile-titel { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile-unter { color: var(--gedaempft); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gruppe-titel { color: var(--gedaempft); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 14px 0 8px; }
.gruppe-titel:first-child { margin-top: 0; }
.leer-hinweis { color: var(--gedaempft); font-size: 13px; padding: 6px 2px; }

/* ---------- Tabellen ---------- */
.tabelle-wrap { overflow-x: auto; }
table.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabelle th {
  text-align: left; color: var(--gedaempft); font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--linie); white-space: nowrap;
}
.tabelle td { padding: 9px 10px; border-bottom: 1px solid var(--tabellen-linie); white-space: nowrap; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tr.klickbar { cursor: pointer; }
.tabelle tr.klickbar:hover td { background: rgba(61, 139, 255, .06); }
.tabelle .rechts { text-align: right; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; border: 1px solid; white-space: nowrap;
}
.badge.gruen { color: var(--gewinn); border-color: rgba(46, 229, 157, .38); background: rgba(46, 229, 157, .08); }
.badge.rot { color: var(--verlust); border-color: rgba(255, 92, 108, .38); background: rgba(255, 92, 108, .08); }
.badge.gelb { color: var(--warnung); border-color: rgba(242, 193, 78, .38); background: rgba(242, 193, 78, .08); }
.badge.blau { color: #7FB2FF; border-color: rgba(61, 139, 255, .45); background: rgba(61, 139, 255, .1); }
.badge.lila { color: var(--serie4); border-color: rgba(180, 140, 255, .4); background: rgba(180, 140, 255, .08); }
.badge.grau { color: var(--gedaempft); border-color: rgba(139, 163, 199, .3); background: rgba(139, 163, 199, .06); }
.badge .punkt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
button.chip { padding: 3px 8px; font-size: 12px; font-weight: 600; background: var(--glas-flach); }
button.chip.aktiv { border-color: var(--akzent); background: rgba(61, 139, 255, .22); color: var(--text); }

/* Karten (z. B. Strategien) */
.karten { display: grid; gap: var(--abstand); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
button.karte { display: block; text-align: left; padding: 14px 16px; cursor: pointer; font-weight: 500; white-space: normal; }
button.karte:hover { border-color: rgba(61, 139, 255, .55); }
.karte .sparkline { width: 100%; }
/* Portfolio-Karten */
.portfolio-karte { display: flex; flex-direction: column; }
.karte-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.karte-wert { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.karte-wert .zahl:first-child { font: 600 22px/1.2 var(--mono); }
.karte-wert .zahl:last-child { font: 600 15px var(--mono); }
button.karte-neu {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 220px; border-style: dashed; background: var(--glas-flach);
}
.karte-plus {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: var(--akzent);
  border: 1px solid rgba(61, 139, 255, .5); box-shadow: 0 0 14px rgba(61, 139, 255, .25);
}
select.portfolio-wechsel { width: auto; max-width: 100%; }
.karte-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.karte-zahlen > div { display: flex; flex-direction: column; gap: 2px; }

/* ---------- Charts ---------- */
.chart { width: 100%; height: 330px; }
.chart.klein { height: 200px; }
.chart.niedrig { height: 140px; }
.punkt-farbe { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.legende { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 8px; font-size: 12px; color: var(--gedaempft); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sparkline { display: block; }

/* Heatmaps */
.heatmap-wrap { overflow-x: auto; padding-bottom: 4px; }
.heatmap { display: grid; gap: 3px; min-width: min-content; }
.hm-kopf { font-size: 11px; color: var(--gedaempft); text-align: center; padding: 2px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.hm-name { font-size: 12px; font-weight: 600; display: flex; flex-direction: column; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.hm-name.fett { font-weight: 800; }
.hm-name small { color: var(--gedaempft); font-weight: 500; font-size: 11px; }
.hm-zelle { border-radius: 4px; display: grid; place-items: center; font: 600 11px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.hm-zelle.markiert { box-shadow: inset 0 0 0 1.5px var(--verlust), 0 0 10px rgba(255, 92, 108, .45); }
.farbleiste-wrap { max-width: 320px; margin-top: 10px; }
.farbleiste { height: 8px; border-radius: 4px; border: 1px solid var(--linie); }
.farbleiste-text { display: flex; justify-content: space-between; font-size: 11px; color: var(--gedaempft); margin-top: 3px; }

/* Fortschrittsbalken */
.balken { height: 6px; border-radius: 3px; background: var(--neutral); overflow: hidden; }
.balken > div { height: 100%; border-radius: 3px; background: var(--akzent); box-shadow: 0 0 10px rgba(61, 139, 255, .5); }
.balken.grau > div { background: var(--gedaempft); box-shadow: none; }
.balken.gelb > div { background: var(--warnung); box-shadow: 0 0 10px rgba(242, 193, 78, .4); }

/* Vergleichswerte */
.vergleich { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; font-size: 13px; }
.vergleich .balken { grid-column: 1 / -1; margin-bottom: 6px; }

/* ---------- Reiter ---------- */
.reiter { position: relative; display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--linie); margin-bottom: var(--abstand); scrollbar-width: none; }
.reiter button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--gedaempft); padding: 10px 12px; box-shadow: none; }
.reiter button.aktiv { color: var(--text); border-bottom-color: var(--akzent); }

.reiter-gruppe {
  align-self: center; flex: none; color: var(--gedaempft); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 0 4px 0 14px; opacity: .7; border-left: 1px solid var(--linie); margin-left: 6px;
}
.reiter button { flex: none; }

/* ---------- Ebenen, Erklärungen, Fokus ---------- */
.ebene {
  display: inline-block; vertical-align: 2px; margin-right: 8px; padding: 2px 7px; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid;
}
.ebene-ganz, .ebene-alle { color: #7FB2FF; border-color: rgba(61, 139, 255, .45); background: rgba(61, 139, 255, .1); }
.ebene-strategie, .ebene-kandidaten { color: var(--serie6); border-color: rgba(61, 214, 245, .38); background: rgba(61, 214, 245, .07); }
.ebene-paare { color: var(--serie4); border-color: rgba(180, 140, 255, .4); background: rgba(180, 140, 255, .08); }
.ebene-markt, .ebene-zeit, .ebene-trade { color: var(--serie2); border-color: rgba(255, 138, 61, .38); background: rgba(255, 138, 61, .07); }
small.fach { color: var(--gedaempft); font-size: .78em; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .85; }

.erklaerung {
  margin-bottom: var(--abstand); padding: 10px 14px; border-radius: var(--radius);
  border: 1px solid rgba(61, 139, 255, .28); background: rgba(61, 139, 255, .06);
}
.erklaerung-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.erklaerung-frage { font-weight: 700; display: flex; align-items: center; gap: 10px; }
.erklaerung-zeichen {
  flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px;
  background: rgba(61, 139, 255, .25); color: var(--text); box-shadow: 0 0 10px rgba(61, 139, 255, .35);
}
.erklaerung-teile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linie); }
.erklaerung-teile b { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--gedaempft); }
.erklaerung-teile p { margin-top: 4px; font-size: 13px; line-height: 1.5; }
@media (max-width: 900px) { .erklaerung-teile { grid-template-columns: 1fr; } }

.werkzeugleiste { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; margin-bottom: var(--abstand); }
.werkzeugleiste label { color: var(--gedaempft); font-size: 12px; font-weight: 700; }
.werkzeugleiste select { width: auto; max-width: 100%; }
.werkzeugleiste .rechts-aussen { margin-left: auto; }
button.aktiv-knopf { border-color: rgba(61, 139, 255, .55); }

.fokus-leiste { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
button.fokus-teil { text-align: left; padding: 8px 10px; display: block; background: var(--glas-flach); white-space: normal; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
button.fokus-teil:hover { border-color: rgba(61, 139, 255, .55); }
.fokus-teil .grau { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fokus-teil div + div { margin-top: 3px; font-size: 13px; }

.tabelle tr.fokus td { background: rgba(61, 139, 255, .12); }
.tabelle tr.fokus td:first-child { box-shadow: inset 3px 0 0 var(--akzent); }
.hm-zelle.blass { opacity: .22; }
.blass-zeile { opacity: .35; }
.hm-name.fokus, .hm-kopf.fokus { color: #7FB2FF; }

/* Portfolio: Live-Leiste und Zusammenspiel mit Fragen-Menü */
.live-leiste { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 10px 16px; margin-bottom: var(--abstand); }
.live-leiste > div { display: flex; flex-direction: column; }
.live-leiste b { font-size: 15px; }
.live-leiste .rechts-aussen { margin-left: auto; }
.zusammenspiel { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--abstand); align-items: start; }
.fragen { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 76px; }
button.frage {
  text-align: left; white-space: normal; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  background: var(--glas-flach); border-color: var(--linie);
}
button.frage b { font-size: 13px; }
button.frage span { color: var(--gedaempft); font-size: 12px; font-weight: 500; }
button.frage:hover { border-color: rgba(61, 139, 255, .45); }
button.frage.aktiv { border-color: var(--akzent); background: rgba(61, 139, 255, .16); box-shadow: var(--glanz), 0 0 16px rgba(61, 139, 255, .18); }
button.frage.aktiv span { color: var(--text); }
.fragen-inhalt { min-width: 0; }
@media (max-width: 900px) {
  .zusammenspiel { grid-template-columns: 1fr; }
  .fragen { flex-direction: row; overflow-x: auto; position: static; scrollbar-width: none; padding-bottom: 2px; }
  button.frage { flex: none; padding: 7px 11px; }
  button.frage span { display: none; }
}

/* Termine */
.termin-tag { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--tabellen-linie); }
.termin-tag:last-child { border-bottom: 0; }
.termin-datum { color: var(--gedaempft); font: 600 12px var(--mono); padding-top: 3px; white-space: nowrap; }
.termin-eintraege { display: grid; gap: 6px; min-width: 0; }
.termin { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.termin .badge { flex: none; }

/* Risiko-Plan */
.stufe-titel { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; font-weight: 800; font-size: 15px; }
.stufe-titel:first-child { margin-top: 0; }
.stufe-nr {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--mono);
  border: 1px solid rgba(61, 139, 255, .55); background: rgba(61, 139, 255, .14); box-shadow: 0 0 12px rgba(61, 139, 255, .3);
}
.stufe-titel small { color: var(--gedaempft); font-weight: 500; font-size: 13px; }
.auslastung { position: relative; height: 8px; border-radius: 4px; background: var(--neutral); margin-top: 8px; overflow: hidden; }
.auslastung > div { height: 100%; border-radius: 4px; background: var(--akzent); }
.auslastung.gelb > div { background: var(--warnung); }
.auslastung.rot > div { background: var(--verlust); }
.grenz-balken { position: relative; }
.grenz-balken .grenze { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--warnung); box-shadow: 0 0 6px var(--warnung); }
.vorschlag { padding: 12px 14px; border: 1px solid var(--linie); border-radius: 8px; background: var(--glas-flach); }
.vorschlag + .vorschlag { margin-top: 10px; }
.vorschlag-kopf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vorschlag-kopf .zahl { margin-left: auto; font-size: 15px; }
.vorschlag ul { margin: 8px 0 10px; padding-left: 0; list-style: none; display: grid; gap: 5px; font-size: 13px; }
.vorschlag li { display: flex; gap: 8px; align-items: baseline; }
.rechner-ergebnis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 6px; }
.rechner-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0 12px; }

/* ---------- Dialog ---------- */
.dialog-hintergrund {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: rgba(1, 4, 12, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.dialog { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.dialog .panel { background: var(--dialog-hg); }
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.feld label { color: var(--gedaempft); font-size: 12px; font-weight: 700; }
.dialog-knoepfe { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.dialog-knoepfe .links { margin-right: auto; }

/* Zeitleiste */
.zeitleiste { border-left: 2px solid var(--linie); margin-left: 6px; padding-left: 16px; }
.zeitleiste-eintrag { position: relative; padding-bottom: 14px; }
.zeitleiste-eintrag::before {
  content: ''; position: absolute; left: -22px; top: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--panel-fest); border: 2px solid var(--akzent); box-shadow: 0 0 10px rgba(61, 139, 255, .5);
}

/* Farbstil-Auswahl in den Einstellungen */
.stil-auswahl { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stil-karte { display: block; width: 100%; padding: 0; text-align: left; overflow: hidden; border-radius: var(--radius); white-space: normal; }
.stil-karte.aktiv { border-color: var(--akzent); box-shadow: var(--glanz), 0 0 0 1px var(--akzent), 0 0 22px rgba(61, 139, 255, .3); }
.stil-vorschau { height: 86px; position: relative; }
.stil-vorschau::after {
  content: ''; position: absolute; left: 14px; right: 14px; top: 16px; bottom: 16px; border-radius: 8px;
  background: var(--vorschau-glas); border: 1px solid var(--vorschau-rand); backdrop-filter: blur(10px);
}
.stil-name { padding: 10px 12px; font-weight: 700; }
.stil-name small { display: block; color: var(--gedaempft); font-weight: 500; }

/* Platzhalter */
.geplant { display: grid; gap: 8px; }
.geplant li { color: var(--gedaempft); }
.geplant ul { margin: 0; padding-left: 18px; }

.laden { color: var(--gedaempft); padding: 40px; text-align: center; }

/* ---------- Handy ---------- */
.unten-nav { display: none; }
@media (max-width: 760px) {
  .kopf { gap: 10px; padding: 0 12px; padding-top: env(safe-area-inset-top); }
  .nav { display: none; }
  .logo-text { display: none; }
  .kopf-rechts select { max-width: 52vw; }
  .seite { padding: 12px 12px calc(84px + env(safe-area-inset-bottom)); }
  .chart { height: 240px; }
  h1 { font-size: 22px; }
  .kachel-wert { font-size: 19px; }
  .held { padding: 16px 16px 10px; }
  .held-wert { font-size: 34px; }
  .held-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kacheln > .kachel:first-child { grid-column: span 2; }
  .nur-gross { display: none; }
  .tabelle th, .tabelle td { padding: 8px 6px; }
  .unten-nav {
    display: flex; justify-content: space-around;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--nav-hg); backdrop-filter: var(--glas-unschaerfe); -webkit-backdrop-filter: var(--glas-unschaerfe);
    border-top: 1px solid var(--linie);
  }
  .unten-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 8px; font-size: 11px; font-weight: 600; color: var(--gedaempft); }
  .unten-nav a.aktiv { color: var(--akzent); }
  .unten-nav svg { width: 22px; height: 22px; }
}