/* ═══════════════════════════════════════════════════════════════════════════
   AXIA Fonds-Dashboard – Stylesheet
   Mobile-first, hell und dunkel, deutsche Zahlenformatierung.

   Die Farbwerte der Diagramme sind auf Farbfehlsichtigkeit geprueft
   (Kontrast und Unterscheidbarkeit). Nicht einzeln aendern – die Reihenfolge
   der --serie-* Werte ist Teil der Pruefung.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Farb- und Maßtokens: Hell ──────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Flaechen */
  --seite:        #f5f5f7;
  --flaeche:      #ffffff;
  --flaeche-alt:  #fafafa;
  --flaeche-tief: #f0efec;

  /* Schrift */
  --text-1:       #0b0b0b;   /* primaer */
  --text-2:       #52514e;   /* sekundaer */
  --text-3:       #898781;   /* gedaempft, Achsen */

  /* Linien */
  --rahmen:       rgba(11, 11, 11, .10);
  --gitter:       #e1e0d9;
  --basislinie:   #c3c2b7;

  /* Diagramm-Serien (kategorial, feste Reihenfolge) */
  --serie-1:      #2a78d6;   /* blau */
  --serie-2:      #eb6834;   /* orange */
  --serie-3:      #1baf7a;   /* aqua */
  --serie-4:      #eda100;   /* gelb */
  --serie-5:      #e87ba4;   /* magenta */
  --serie-6:      #4a3aa7;   /* violett */

  /* Status (nie fuer Serien verwenden) */
  --gut:          #0ca30c;
  --warnung:      #fab219;
  --ernst:        #ec835a;
  --kritisch:     #d03b3b;

  /* Vorzeichenfarben fuer Text */
  --plus:         #006300;
  --minus:        #c62828;

  /* Maße */
  --radius-s:     10px;
  --radius:       16px;
  --radius-l:     20px;
  --pad:          16px;
  --schatten-s:   0 1px 3px rgba(0, 0, 0, .06);
  --schatten:     0 2px 12px rgba(0, 0, 0, .07);
  --schatten-l:   0 12px 40px rgba(0, 0, 0, .16);
  --tempo:        150ms ease;
}

/* ─── Farbtokens: Dunkel ─────────────────────────────────────────────────── */
/* Eigene Farbstufen, kein automatisches Umdrehen der hellen Werte. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --seite:        #0d0d0d;
    --flaeche:      #1c1c1e;
    --flaeche-alt:  #232325;
    --flaeche-tief: #2c2c2a;

    --text-1:       #ffffff;
    --text-2:       #c3c2b7;
    --text-3:       #898781;

    --rahmen:       rgba(255, 255, 255, .12);
    --gitter:       #2c2c2a;
    --basislinie:   #383835;

    --serie-1:      #3987e5;
    --serie-2:      #d95926;
    --serie-3:      #199e70;
    --serie-4:      #c98500;
    --serie-5:      #d55181;
    --serie-6:      #9085e9;

    --plus:         #0ca30c;
    --minus:        #ef5350;

    --schatten-s:   0 1px 3px rgba(0, 0, 0, .4);
    --schatten:     0 2px 12px rgba(0, 0, 0, .5);
    --schatten-l:   0 12px 40px rgba(0, 0, 0, .7);
  }
}

/* Manuelle Umschaltung ueber den Knopf im Kopfbereich */
:root[data-theme="dark"] {
  color-scheme: dark;
  --seite:        #0d0d0d;
  --flaeche:      #1c1c1e;
  --flaeche-alt:  #232325;
  --flaeche-tief: #2c2c2a;
  --text-1:       #ffffff;
  --text-2:       #c3c2b7;
  --text-3:       #898781;
  --rahmen:       rgba(255, 255, 255, .12);
  --gitter:       #2c2c2a;
  --basislinie:   #383835;
  --serie-1:      #3987e5;
  --serie-2:      #d95926;
  --serie-3:      #199e70;
  --serie-4:      #c98500;
  --serie-5:      #d55181;
  --serie-6:      #9085e9;
  --plus:         #0ca30c;
  --minus:        #ef5350;
  --schatten-s:   0 1px 3px rgba(0, 0, 0, .4);
  --schatten:     0 2px 12px rgba(0, 0, 0, .5);
  --schatten-l:   0 12px 40px rgba(0, 0, 0, .7);
}

@media (min-width: 700px)  { :root { --pad: 24px; } }
@media (min-width: 1240px) { :root { --pad: 36px; } }

/* ─── Grundlagen ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--seite);
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

/* Tastatur-Fokus bleibt sichtbar – Barrierefreiheit */
:focus-visible { outline: 2px solid var(--serie-1); outline-offset: 2px; }

.nur-lesehilfe {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ─── Anmeldeseite ───────────────────────────────────────────────────────── */
.anmelde-seite {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
}

.anmelde-karte {
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-l);
  padding: 44px 36px 36px;
  width: 100%; max-width: 380px;
  text-align: center;
}

.anmelde-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; margin-bottom: 20px;
  background: var(--text-1); color: var(--flaeche);
  border-radius: 15px;
  font-size: 19px; font-weight: 700; letter-spacing: -.5px;
}

.anmelde-titel { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.anmelde-unter { font-size: 14px; color: var(--text-2); margin-bottom: 26px; }

.anmelde-fehler {
  display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--kritisch) 12%, transparent);
  color: var(--kritisch);
  font-size: 13px; text-align: left;
  border-radius: var(--radius-s);
  padding: 10px 13px; margin-bottom: 16px;
}

.anmelde-form { display: flex; flex-direction: column; gap: 12px; }

.anmelde-eingabe {
  width: 100%; padding: 13px 15px;
  background: var(--flaeche-alt);
  border: 1.5px solid var(--rahmen);
  border-radius: var(--radius-s);
  font-size: 16px;   /* 16px verhindert Zoom auf iOS */
  transition: border-color var(--tempo);
}
.anmelde-eingabe:focus { outline: none; border-color: var(--serie-1); }

.knopf-primaer {
  padding: 13px 20px;
  background: var(--serie-1); color: #fff;
  border-radius: var(--radius-s);
  font-size: 15px; font-weight: 600;
  transition: filter var(--tempo);
}
.knopf-primaer:hover { filter: brightness(1.08); }
.knopf-primaer:disabled { opacity: .5; cursor: not-allowed; }

/* ─── Kopfbereich ────────────────────────────────────────────────────────── */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--flaeche) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--rahmen);
}

.kopf-innen {
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--pad);
  max-width: 1600px; margin: 0 auto;
}

.marke { display: flex; align-items: center; gap: 9px; min-width: 0; }
.marke-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  background: var(--text-1); color: var(--flaeche);
  border-radius: 8px; font-size: 12px; font-weight: 700;
}
.marke-name {
  font-size: 15px; font-weight: 600; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marke-nr {
  font-size: 11px; font-weight: 600; color: var(--text-2);
  background: var(--flaeche-tief);
  padding: 2px 7px; border-radius: 6px; flex-shrink: 0;
}

.kopf-werkzeuge { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.werkzeug {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  background: var(--flaeche-tief); color: var(--text-1);
  border-radius: 9px;
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
  transition: background var(--tempo);
}
.werkzeug:hover { background: var(--basislinie); }
.werkzeug svg { flex-shrink: 0; }
.werkzeug-nur-symbol { padding: 7px; }

.stichtag-wahl {
  padding: 7px 10px;
  background: var(--flaeche-tief);
  border: none; border-radius: 9px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

/* Die Fondswahl steht links neben dem Stichtag und ist etwas kraeftiger
   gesetzt: Sie entscheidet, WELCHER Fonds gezeigt wird -- die falsche Wahl
   hier fuehrt zu einem Dashboard, das plausibel aussieht und den falschen
   Fonds meint. Der Stichtag daneben ist demgegenueber die feinere Auswahl. */
.fonds-wahl {
  padding: 7px 10px;
  max-width: 15rem;
  background: var(--flaeche-tief);
  border: none; border-radius: 9px;
  font-size: 13px; font-weight: 650;
  cursor: pointer;
}

@media (max-width: 700px) {
  .fonds-wahl { max-width: 9rem; }
}

@media (max-width: 700px) {
  .werkzeug-text { display: none; }
  .werkzeug { padding: 8px; }
}

/* ─── Grundgerüst ────────────────────────────────────────────────────────── */
.inhalt {
  max-width: 1600px; margin: 0 auto;
  padding: var(--pad) var(--pad) 80px;
  display: flex; flex-direction: column; gap: 28px;
}

.abschnitt { display: flex; flex-direction: column; gap: 12px; }

.abschnitt-kopf {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.abschnitt-titel {
  font-size: 19px; font-weight: 650; letter-spacing: -.3px;
}
.abschnitt-notiz { font-size: 13px; color: var(--text-2); }
.abschnitt-kopf .rechts { margin-left: auto; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  box-shadow: var(--schatten-s);
  padding: 18px;
}
.karte-titel {
  font-size: 14px; font-weight: 600; color: var(--text-1);
  margin-bottom: 2px;
}
.karte-unter { font-size: 12px; color: var(--text-2); margin-bottom: 14px; }

/* ─── Risiko-Banner ──────────────────────────────────────────────────────── */
.risiko-banner {
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten-s);
  overflow: hidden;
}

.risiko-kopf {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 18px;
  text-align: left;
}

.ampel {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}
.ampel-gruen { background: var(--gut);      color: var(--gut); }
.ampel-gelb  { background: var(--warnung);  color: var(--warnung); }
.ampel-rot   { background: var(--kritisch); color: var(--kritisch); }

.risiko-titel { font-size: 14px; font-weight: 600; }
.risiko-zaehler { font-size: 13px; color: var(--text-2); }
.risiko-pfeil {
  margin-left: auto; color: var(--text-3);
  transition: transform var(--tempo);
}
.risiko-banner.offen .risiko-pfeil { transform: rotate(180deg); }

.risiko-liste {
  display: none;
  border-top: 1px solid var(--rahmen);
  padding: 6px 0;
}
.risiko-banner.offen .risiko-liste { display: block; }

.risiko-zeile {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 18px;
}
.risiko-zeile + .risiko-zeile { border-top: 1px solid var(--rahmen); }

/* Symbol + Text: Farbe allein traegt nie die Information */
.risiko-symbol {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  border-radius: 50%; color: #fff;
}
.stufe-kritisch .risiko-symbol { background: var(--kritisch); }
.stufe-warnung  .risiko-symbol { background: var(--ernst); }
.stufe-info     .risiko-symbol { background: var(--text-3); }

.risiko-inhalt { min-width: 0; }
.risiko-zeile-titel { font-size: 13.5px; font-weight: 600; }
.risiko-zeile-text { font-size: 12.5px; color: var(--text-2); margin-top: 1px; }
.risiko-marke {
  display: inline-block; margin-right: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-3);
}

/* ─── Hero-Zahl und Kennzahlen ───────────────────────────────────────────── */
.hero {
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  align-items: flex-end;
}

.hero-block { min-width: 0; }
.hero-etikett {
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 4px;
}
.hero-wert {
  font-size: clamp(34px, 7vw, 52px);
  font-weight: 680; line-height: 1.05; letter-spacing: -1.6px;
}
.hero-zusatz {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 7px; font-size: 13.5px; color: var(--text-2);
}

.delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.delta-plus  { color: var(--plus); }
.delta-minus { color: var(--minus); }
.delta-null  { color: var(--text-2); }

.kennzahl-gitter {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.kennzahl {
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-s);
  box-shadow: var(--schatten-s);
  padding: 13px 15px;
}
.kennzahl-etikett {
  font-size: 12px; color: var(--text-2); margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kennzahl-wert { font-size: 20px; font-weight: 640; letter-spacing: -.5px; }
.kennzahl-zusatz { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* Anteils-Balken innerhalb einer Kennzahl-Karte */
.messbalken {
  margin-top: 9px; height: 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--serie-1) 18%, transparent);
  overflow: hidden;
}
.messbalken-fuellung {
  height: 100%; border-radius: 3px; background: var(--serie-1);
  transition: width 400ms ease;
}

/* ─── Diagramme ──────────────────────────────────────────────────────────── */
.zeitraum-pillen { display: flex; gap: 3px; flex-wrap: wrap; }
.pille {
  padding: 5px 11px;
  background: transparent; color: var(--text-2);
  border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  transition: background var(--tempo), color var(--tempo);
}
.pille:hover { background: var(--flaeche-tief); }
.pille.aktiv { background: var(--text-1); color: var(--flaeche); }

/* Schalterzeile über dem Verlaufschart: Was wird gezeigt, und wie */
.verlauf-schalter {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.verlauf-schalter #verlauf-darstellung .pille {
  min-width: 34px; text-align: center;
}

/* Veränderung im gewählten Zeitfenster, als Zahl über dem Chart */
.verlauf-bilanz {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  align-items: baseline;
  margin-bottom: 10px;
}
.verlauf-bilanz:empty { display: none; }

.verlauf-zeitraum {
  font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
  width: 100%;
}
.verlauf-bilanz-block {
  display: inline-flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
}
.verlauf-bilanz-name { font-size: 12.5px; color: var(--text-2); }
.verlauf-bilanz-block .delta { font-size: 19px; letter-spacing: -.4px; }
.verlauf-bilanz-abs {
  font-size: 12.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.verlauf-chart { width: 100%; height: 320px; }
.balken-chart  { width: 100%; height: 300px; }
.stapel-chart  { width: 100%; height: 108px; }
.detail-chart  { width: 100%; height: 260px; }

@media (max-width: 700px) {
  .verlauf-chart { height: 260px; }
  .balken-chart  { height: 340px; }
}

.chart-notiz {
  font-size: 12px; color: var(--text-3); margin-top: 8px;
}

/* Legende: immer vorhanden ab zwei Serien */
.legende {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 10px;
}
.legende-eintrag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-2);
}
.legende-punkt {
  width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0;
}

.diagramm-gitter {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px)  { .diagramm-gitter { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1400px) { .diagramm-gitter.drei { grid-template-columns: repeat(3, 1fr); } }

/* ─── Filterzeile ────────────────────────────────────────────────────────── */
.filter-zeile {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}

.suche-feld { position: relative; flex: 1 1 210px; min-width: 170px; }
.suche-feld svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none;
}
.suche-eingabe {
  width: 100%; padding: 9px 12px 9px 34px;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 10px;
  font-size: 14px;
}
.suche-eingabe:focus { outline: none; border-color: var(--serie-1); }

.filter-wahl {
  padding: 9px 11px;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 10px;
  font-size: 13.5px; cursor: pointer;
  max-width: 190px;
}

.filter-zurueck {
  padding: 9px 13px;
  font-size: 13px; font-weight: 600; color: var(--serie-1);
  border-radius: 10px;
}
.filter-zurueck:hover { background: var(--flaeche-tief); }

.aktiv-marken { display: flex; flex-wrap: wrap; gap: 6px; }
.aktiv-marke {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px;
  background: color-mix(in srgb, var(--serie-1) 12%, transparent);
  color: var(--serie-1);
  border-radius: 7px;
  font-size: 12px; font-weight: 600;
}
.aktiv-marke button { color: inherit; display: flex; opacity: .7; }
.aktiv-marke button:hover { opacity: 1; }

/* ─── Positionstabelle ───────────────────────────────────────────────────── */
.tabelle-rahmen {
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  box-shadow: var(--schatten-s);
  overflow-x: auto;
}

.pos-tabelle {
  width: 100%; border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.pos-tabelle thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rahmen);
  padding: 11px 12px;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-2); text-transform: uppercase; letter-spacing: .4px;
  text-align: right; white-space: nowrap;
}
.pos-tabelle thead th:first-child { text-align: left; }

.pos-tabelle th.sortierbar { cursor: pointer; user-select: none; }
.pos-tabelle th.sortierbar:hover { color: var(--text-1); }
.sortier-pfeil { opacity: .3; margin-left: 3px; font-size: 10px; }
.pos-tabelle th.sortiert .sortier-pfeil { opacity: 1; }

.pos-tabelle tbody tr {
  border-bottom: 1px solid var(--rahmen);
  cursor: pointer;
  transition: background var(--tempo);
}
.pos-tabelle tbody tr:hover { background: var(--flaeche-alt); }
.pos-tabelle tbody tr:last-child { border-bottom: none; }

.pos-tabelle td { padding: 10px 12px; text-align: right; white-space: nowrap; }
.pos-tabelle td:first-child { text-align: left; white-space: normal; }

.pos-name { font-weight: 570; line-height: 1.3; }
.pos-unter {
  font-size: 11.5px; color: var(--text-2); margin-top: 2px;
  display: flex; flex-wrap: wrap; gap: 4px 7px;
}

.marke-klein {
  font-size: 10.5px; font-weight: 600;
  background: var(--flaeche-tief); color: var(--text-2);
  padding: 1px 6px; border-radius: 5px;
}
.marke-neu       { background: color-mix(in srgb, var(--gut) 16%, transparent);      color: var(--plus); }
.marke-auf       { background: color-mix(in srgb, var(--serie-1) 14%, transparent);  color: var(--serie-1); }
.marke-ab        { background: color-mix(in srgb, var(--ernst) 18%, transparent);    color: var(--minus); }

/* Gewichtungs-Balken in der Tabellenzelle */
.gewicht-zelle { min-width: 92px; }
.gewicht-huelle {
  display: flex; align-items: center; gap: 7px; justify-content: flex-end;
}
.gewicht-spur {
  width: 42px; height: 5px; border-radius: 3px; flex-shrink: 0;
  background: color-mix(in srgb, var(--serie-1) 18%, transparent);
  overflow: hidden;
}
.gewicht-fuellung { height: 100%; background: var(--serie-1); border-radius: 3px; }
.gewicht-warn .gewicht-fuellung { background: var(--ernst); }
.gewicht-warn .gewicht-spur { background: color-mix(in srgb, var(--ernst) 20%, transparent); }

.wert-plus  { color: var(--plus); }
.wert-minus { color: var(--minus); }

/* ─── Karten für kleine Bildschirme ──────────────────────────────────────── */
.pos-karten { display: none; flex-direction: column; gap: 9px; }

@media (max-width: 900px) {
  .tabelle-rahmen { display: none; }
  .pos-karten { display: flex; }
}

.pos-karte {
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-s);
  box-shadow: var(--schatten-s);
  padding: 13px 14px;
  cursor: pointer;
}
.pos-karte-kopf {
  display: flex; justify-content: space-between; gap: 10px;
  align-items: flex-start;
}
.pos-karte-zahlen {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 11px; padding-top: 11px;
  border-top: 1px solid var(--rahmen);
  font-variant-numeric: tabular-nums;
}
.pos-karte-zahl-etikett { font-size: 10.5px; color: var(--text-2); }
.pos-karte-zahl-wert { font-size: 13.5px; font-weight: 600; margin-top: 1px; }

/* ─── Detailfenster ──────────────────────────────────────────────────────── */
.abdunkelung {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, .35);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
}
.abdunkelung.sichtbar { opacity: 1; pointer-events: auto; }

.detail-fenster {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(520px, 100%);
  background: var(--flaeche);
  border-left: 1px solid var(--rahmen);
  box-shadow: var(--schatten-l);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(.32, .72, 0, 1);
  display: flex; flex-direction: column;
}
.detail-fenster.offen { transform: translateX(0); }

@media (max-width: 620px) {
  .detail-fenster {
    width: 100%; top: auto; height: 92vh;
    border-left: none; border-top-left-radius: var(--radius-l);
    border-top-right-radius: var(--radius-l);
    transform: translateY(100%);
  }
  .detail-fenster.offen { transform: translateY(0); }
}

.detail-leiste {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--rahmen);
}
.detail-schliessen {
  flex-shrink: 0; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--flaeche-tief); border-radius: 8px; color: var(--text-2);
}
.detail-schliessen:hover { background: var(--basislinie); }
.detail-name { font-size: 16px; font-weight: 640; line-height: 1.25; }
.detail-marken { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }

.detail-koerper { flex: 1; overflow-y: auto; padding: 16px 18px 40px; }

.detail-zahlen {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rahmen);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-s);
  overflow: hidden; margin-top: 16px;
}
.detail-zahl { background: var(--flaeche); padding: 11px 13px; }
.detail-zahl-etikett { font-size: 11.5px; color: var(--text-2); }
.detail-zahl-wert {
  font-size: 14.5px; font-weight: 620; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ─── Upload-Dialog ──────────────────────────────────────────────────────── */
.dialog {
  position: fixed; inset: 0; z-index: 110;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .45);
}
.dialog.offen { display: flex; }

.dialog-karte {
  background: var(--flaeche);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-l);
  width: 100%; max-width: 560px;
  max-height: 88vh; overflow-y: auto;
  padding: 24px;
}
.dialog-kopf {
  display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
}
.dialog-titel { font-size: 18px; font-weight: 650; }
.dialog-text { font-size: 13.5px; color: var(--text-2); margin-bottom: 18px; }

.ablage {
  border: 2px dashed var(--basislinie);
  border-radius: var(--radius);
  padding: 32px 20px; text-align: center;
  background: var(--flaeche-alt);
  transition: border-color var(--tempo), background var(--tempo);
  cursor: pointer;
}
.ablage:hover, .ablage.bereit {
  border-color: var(--serie-1);
  background: color-mix(in srgb, var(--serie-1) 6%, var(--flaeche-alt));
}
.ablage-symbol { color: var(--text-3); margin-bottom: 10px; }
.ablage-titel { font-size: 14.5px; font-weight: 600; }
.ablage-text { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }

.upload-ergebnis { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.upload-zeile {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-s);
  font-size: 13px;
  background: var(--flaeche-alt);
}
.upload-zeile.gut     { border-color: color-mix(in srgb, var(--gut) 40%, transparent); }
.upload-zeile.schlimm { border-color: color-mix(in srgb, var(--kritisch) 40%, transparent); }
.upload-zeile-name { font-weight: 600; word-break: break-all; }
/* Der zugeordnete Fonds steht zwischen Dateiname und Kennzahlen und ist
   kraeftiger gesetzt als die uebrigen Angaben: Er ist die eine Zeile, die man
   bei einem gemischten Stapel wirklich pruefen muss. */
.upload-zeile-fonds {
  font-size: 12px; font-weight: 650;
  color: var(--text-1); margin-top: 3px;
}
.upload-zeile-text { color: var(--text-2); font-size: 12px; margin-top: 2px; }

.dialog-fuss {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--rahmen);
}
.knopf-still {
  padding: 11px 18px;
  background: var(--flaeche-tief); color: var(--text-1);
  border-radius: var(--radius-s);
  font-size: 14px; font-weight: 600;
}
.knopf-still:hover { background: var(--basislinie); }

/* ─── Zustände: leer und laden ───────────────────────────────────────────── */
.leer-zustand {
  text-align: center; padding: 60px 20px;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
}
.leer-symbol { color: var(--text-3); margin-bottom: 14px; }
.leer-titel { font-size: 18px; font-weight: 640; margin-bottom: 6px; }
.leer-text {
  font-size: 14px; color: var(--text-2);
  max-width: 420px; margin: 0 auto 20px;
}

.lade-schicht {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--seite) 75%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease;
}
.lade-schicht.sichtbar { opacity: 1; pointer-events: auto; }

.dreher {
  width: 34px; height: 34px;
  border: 3px solid var(--flaeche-tief);
  border-top-color: var(--serie-1);
  border-radius: 50%;
  animation: drehen 700ms linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }

.platzhalter {
  background: linear-gradient(90deg, var(--flaeche-tief) 25%,
              var(--flaeche-alt) 50%, var(--flaeche-tief) 75%);
  background-size: 200% 100%;
  animation: schimmer 1.3s infinite;
  border-radius: var(--radius-s);
}
@keyframes schimmer { to { background-position: -200% 0; } }

.meldung {
  position: fixed; bottom: 22px; left: 50%; z-index: 300;
  transform: translate(-50%, 130%);
  padding: 12px 20px;
  background: var(--text-1); color: var(--seite);
  border-radius: 11px;
  font-size: 13.5px; font-weight: 550;
  box-shadow: var(--schatten-l);
  transition: transform 260ms cubic-bezier(.32, .72, 0, 1);
  max-width: calc(100vw - 40px);
}
.meldung.sichtbar { transform: translate(-50%, 0); }

/* ─── Drucken ────────────────────────────────────────────────────────────── */
@media print {
  .kopf, .filter-zeile, .zeitraum-pillen, .lade-schicht,
  .detail-fenster, .abdunkelung, .dialog { display: none !important; }
  body { background: #fff; }
  .karte, .tabelle-rahmen { box-shadow: none; break-inside: avoid; }
  .pos-karten { display: none !important; }
  .tabelle-rahmen { display: block !important; }
}

/* Bewegungsreduzierung respektieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Factsheet-Link auf der Anteilwert-Karte. Zurueckhaltend gesetzt: Er ist eine
   Aktion, soll aber die Kennzahl daneben nicht ueberstrahlen. */
.factsheet-link {
  color: var(--serie-1);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
.factsheet-link:hover { opacity: .75; }


/* ─── Factsheet-Dialog ───────────────────────────────────────────────────── */
/* Je Anteilsklasse eine Zeile zum Anklicken. Bewusst grosszuegig: Es ist eine
   Unterlage, die nach draussen geht – die Wahl der Klasse soll man sehen. */
.fs-klassen { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }

.fs-klasse {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name pfeil" "zusatz pfeil";
  gap: 2px 12px; align-items: center;
  padding: 12px 14px;
  background: var(--flaeche-alt);
  border: 1.5px solid var(--rahmen);
  border-radius: var(--radius-s);
  transition: border-color var(--tempo), background var(--tempo);
}
.fs-klasse:hover { border-color: var(--serie-1); background: var(--flaeche); }

.fs-klasse-name   { grid-area: name; font-weight: 600; font-size: 14px; }
.fs-klasse-zusatz { grid-area: zusatz; font-size: 12px; color: var(--text-2);
                    font-variant-numeric: tabular-nums; }
.fs-klasse-pfeil  {
  grid-area: pfeil;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: var(--serie-1);
  border: 1.5px solid currentColor; border-radius: 6px;
  padding: 4px 8px;
}