/* ═══════════════════════════════════════════════════════════════════════════
   DAD JOURNAL — DESIGN SYSTEM
   Eine Quelle für Farben, Typografie, Abstände, Radien, Schatten, Bewegung
   und Komponenten. Gilt für app.html, index.html, checkout.html, faq.html
   und alle Rechtsseiten.

   Aufbau
     1  Flächen und Farben
     2  Typografie
     3  Abstände, Radien, Schatten, Bewegung
     4  Brücke zu den Alt-Namen (--gold, --dim2, --radius-md …)
     5  Grundlagen
     6  Komponenten
     7  Zustände: leer, ladend, fehlerhaft
     8  Zahlen und Finanzwerte
     9  Alt-Bestand einfangen (Inline-Styles)

   Regeln
     · Farbe trägt Bedeutung. Grün = Gewinn, Rot = Verlust, Gelb = Warnung.
       Nichts davon wird dekorativ verwendet.
     · Hierarchie entsteht durch Abstand, Größe und Gewicht — nicht durch
       zusätzliche Rahmen, Schatten oder Farbflächen.
     · Bewegung ist kurz (120–240 ms) und unterstützt eine Handlung.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1  FLÄCHEN UND FARBEN
   Fünf dunkle Ebenen statt reinem Schwarz: dadurch entsteht Tiefe ohne
   einen einzigen Schatten. Jede Ebene liegt optisch eine Stufe höher.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --ds-surface-0:#08090b;   /* Seitengrund                        */
  --ds-surface-1:#0d0f13;   /* Kopfleiste, Seitenleiste, Fußzeile */
  --ds-surface-2:#121519;   /* Karten, Panels, Tabellen           */
  --ds-surface-3:#171b21;   /* Eingaben, Hover, Innenflächen      */
  --ds-surface-4:#1d222a;   /* Modale, Menüs, Tooltips            */

  --ds-border-subtle:rgba(255,255,255,.055);
  --ds-border:rgba(255,255,255,.09);
  --ds-border-strong:rgba(255,255,255,.15);

  --ds-text:#e9ebee;        /* nicht reinweiß: weniger Blendung   */
  --ds-text-2:#9aa1ac;
  --ds-text-3:#6d747f;
  --ds-text-off:#4a505a;

  /* Marke — bleibt das Blau des DAD Journal, nur eine Spur heller,
     damit es auf dunklem Grund den Kontrastwert 4.5:1 erreicht. */
  --ds-brand:#3d7dff;
  --ds-brand-hover:#5b91ff;
  --ds-brand-press:#2f6ae8;
  --ds-brand-weak:rgba(61,125,255,.12);
  --ds-brand-line:rgba(61,125,255,.32);

  /* Bedeutungsfarben */
  --ds-pos:#30c48d;  --ds-pos-weak:rgba(48,196,141,.12);  --ds-pos-line:rgba(48,196,141,.3);
  --ds-neg:#e5484d;  --ds-neg-weak:rgba(229,72,77,.12);   --ds-neg-line:rgba(229,72,77,.3);
  --ds-warn:#f5a524; --ds-warn-weak:rgba(245,165,36,.12); --ds-warn-line:rgba(245,165,36,.3);
}

/* ─────────────────────────────────────────────────────────────────────────
   2  TYPOGRAFIE
   Inter für die Oberfläche, IBM Plex Mono nur noch dort, wo eine feste
   Zeichenbreite echten Nutzen hat (Kennungen, Code, Kürzel).

   Der wichtigste Eingriff des gesamten Redesigns steht hier: die App war
   auf 9–10 px gesetzt (203 bzw. 151 Fundstellen). Fließtext liegt jetzt
   bei 14 px, die kleinste erlaubte Größe bei 11 px.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --ds-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ds-font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  --ds-display:600 40px/1.1 var(--ds-font);
  --ds-h1:600 28px/1.21 var(--ds-font);
  --ds-h2:600 20px/1.3 var(--ds-font);
  --ds-h3:600 16px/1.375 var(--ds-font);
  --ds-body:400 14px/1.5 var(--ds-font);
  --ds-body-sm:400 13px/1.46 var(--ds-font);
  --ds-small:400 12px/1.42 var(--ds-font);
  --ds-caption:400 11px/1.36 var(--ds-font);
  --ds-overline:550 11px/1.33 var(--ds-font);

  --ds-ls-display:-.03em;
  --ds-ls-h1:-.025em;
  --ds-ls-h2:-.02em;
  --ds-ls-h3:-.015em;
  --ds-ls-body:-.006em;
  --ds-ls-overline:.07em;
}

.ds-display{font:var(--ds-display);letter-spacing:var(--ds-ls-display);color:var(--ds-text);}
.ds-h1{font:var(--ds-h1);letter-spacing:var(--ds-ls-h1);color:var(--ds-text);}
.ds-h2{font:var(--ds-h2);letter-spacing:var(--ds-ls-h2);color:var(--ds-text);}
.ds-h3{font:var(--ds-h3);letter-spacing:var(--ds-ls-h3);color:var(--ds-text);}
.ds-body{font:var(--ds-body);letter-spacing:var(--ds-ls-body);color:var(--ds-text);}
.ds-body-2{font:var(--ds-body);letter-spacing:var(--ds-ls-body);color:var(--ds-text-2);}
.ds-small{font:var(--ds-small);color:var(--ds-text-2);}
.ds-caption{font:var(--ds-caption);color:var(--ds-text-3);}
.ds-overline{font:var(--ds-overline);letter-spacing:var(--ds-ls-overline);
  text-transform:uppercase;color:var(--ds-text-3);}

/* ─────────────────────────────────────────────────────────────────────────
   3  ABSTÄNDE · RADIEN · SCHATTEN · BEWEGUNG
   Vier-Punkt-Raster. Vorher standen 165 verschiedene Padding-Werte in der
   App; ab hier gibt es zwölf.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --ds-1:2px;  --ds-2:4px;  --ds-3:6px;   --ds-4:8px;
  --ds-5:12px; --ds-6:16px; --ds-7:20px;  --ds-8:24px;
  --ds-9:32px; --ds-10:40px; --ds-11:48px; --ds-12:64px;

  --ds-r-sm:4px; --ds-r-md:6px; --ds-r-lg:8px; --ds-r-xl:12px; --ds-r-pill:999px;

  /* Zurückhaltend: Tiefe kommt aus den Flächen, nicht aus Schlagschatten */
  --ds-shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --ds-shadow-md:0 4px 12px rgba(0,0,0,.35);
  --ds-shadow-lg:0 16px 40px rgba(0,0,0,.45);
  --ds-ring:0 0 0 3px rgba(61,125,255,.28);

  --ds-fast:120ms; --ds-base:180ms; --ds-slow:240ms;
  --ds-ease:cubic-bezier(.2,0,.15,1);
}
@media (prefers-reduced-motion:reduce){
  :root{--ds-fast:1ms;--ds-base:1ms;--ds-slow:1ms;}
}

/* ─────────────────────────────────────────────────────────────────────────
   4  BRÜCKE ZU DEN ALT-NAMEN
   app.html, longterm.js und evaluation.js sprechen an tausenden Stellen
   über --gold, --dim2, --bg2, --radius-md. Diese Namen bleiben gültig und
   zeigen ab hier auf das Design-System. Dadurch greift das neue System
   sofort überall, ohne dass eine einzige Vorlage angefasst werden muss.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --bg:var(--ds-surface-0);
  --bg2:var(--ds-surface-2);
  --bg3:var(--ds-surface-3);
  --bg4:var(--ds-surface-4);

  --accent:61,125,255;
  --gold:var(--ds-brand);
  --gold2:var(--ds-brand-hover);
  --gold3:var(--ds-brand-hover);
  --gold-border:var(--ds-brand-line);
  --gold-dim:var(--ds-brand-weak);
  --gold-glow:rgba(61,125,255,.5);

  --green:var(--ds-pos); --green-dim:var(--ds-pos-weak);
  --red:var(--ds-neg);   --red-dim:var(--ds-neg-weak);

  --text:var(--ds-text);
  --text2:var(--ds-text-2);
  --dim:var(--ds-text-3);
  --dim2:var(--ds-border);
  --line-app:var(--ds-border);
  --line-app-2:var(--ds-border-subtle);
  --panel-app:var(--ds-surface-2);

  /* --mono steht an 619 Stellen in app.html, longterm.js und evaluation.js.
     Es zeigt jetzt auf Inter. Das ist kein Kompromiss: Inter besitzt echte
     Tabellenziffern, Spalten fluchten damit exakt wie bei einer Schreib-
     maschinenschrift — nur ohne deren Werkzeug-Anmutung. Wo eine feste
     Zeichenbreite wirklich gebraucht wird (Kennungen, Code), gibt es
     .ds-mono und --ds-font-mono. */
  --mono:var(--ds-font);
  --sans:var(--ds-font);
  --display:var(--ds-font);

  --radius-sm:var(--ds-r-sm);
  --radius-md:var(--ds-r-md);
  --radius-lg:var(--ds-r-lg);
  --shadow-sm:var(--ds-shadow-sm);
  --shadow-md:var(--ds-shadow-md);
  --shadow-gold:none;
  --ease:var(--ds-ease);
}

/* ─────────────────────────────────────────────────────────────────────────
   5  GRUNDLAGEN
   ───────────────────────────────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%;}
body{
  font:var(--ds-body);
  letter-spacing:var(--ds-ls-body);
  color:var(--ds-text);
  background:var(--ds-surface-0);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv05' 1,'ss01' 1;   /* Inter: klareres l und g */
}

/* Ein Fokusring für die gesamte Plattform — Tastaturbedienung muss überall
   sichtbar sein, ohne bei Mausklicks zu stören. */
:focus{outline:none;}
:focus-visible{
  outline:none;
  box-shadow:var(--ds-ring)!important;
  border-radius:var(--ds-r-sm);
  position:relative;z-index:1;
}

::selection{background:rgba(61,125,255,.3);color:#fff;}

/* Bildlaufleisten in den Flächen des Systems statt im Grau des Systems */
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{
  background:var(--ds-border-strong);border-radius:var(--ds-r-pill);
  border:3px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25);background-clip:content-box;}

/* ─────────────────────────────────────────────────────────────────────────
   6  KOMPONENTEN
   ───────────────────────────────────────────────────────────────────────── */

/* ── 6.1 Knöpfe ────────────────────────────────────────────────────────────
   Fünf Varianten, vier Zustände. Höhe 36 px als Normalmaß; 30 px kompakt,
   44 px für die eine Haupthandlung einer Seite. Keine Versalien, keine
   gesperrte Schrift — Knöpfe sollen sich lesen, nicht rufen. */
.ds-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-3);
  height:36px;padding:0 var(--ds-5);
  font:500 13px/1 var(--ds-font);letter-spacing:-.004em;
  border:1px solid transparent;border-radius:var(--ds-r-md);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background var(--ds-fast) var(--ds-ease),
             border-color var(--ds-fast) var(--ds-ease),
             color var(--ds-fast) var(--ds-ease),
             opacity var(--ds-fast) var(--ds-ease);
}
.ds-btn-sm{height:30px;padding:0 var(--ds-4);font-size:12.5px;}
.ds-btn-lg{height:44px;padding:0 var(--ds-7);font-size:14px;}

.ds-btn-primary{background:var(--ds-brand);border-color:var(--ds-brand);color:#fff;}
.ds-btn-primary:hover:not(:disabled){background:var(--ds-brand-hover);border-color:var(--ds-brand-hover);}
.ds-btn-primary:active:not(:disabled){background:var(--ds-brand-press);}

.ds-btn-secondary{background:var(--ds-surface-3);border-color:var(--ds-border);color:var(--ds-text);}
.ds-btn-secondary:hover:not(:disabled){background:var(--ds-surface-4);border-color:var(--ds-border-strong);}

.ds-btn-tertiary{background:transparent;border-color:var(--ds-border);color:var(--ds-text-2);}
.ds-btn-tertiary:hover:not(:disabled){background:var(--ds-surface-3);color:var(--ds-text);}

.ds-btn-ghost{background:transparent;border-color:transparent;color:var(--ds-text-2);}
.ds-btn-ghost:hover:not(:disabled){background:var(--ds-surface-3);color:var(--ds-text);}

.ds-btn-danger{background:var(--ds-neg);border-color:var(--ds-neg);color:#fff;}
.ds-btn-danger:hover:not(:disabled){background:#f05a5f;border-color:#f05a5f;}

.ds-btn:disabled,.ds-btn[disabled],.ds-btn[aria-disabled=true]{
  opacity:.42;cursor:not-allowed;pointer-events:none;}

/* Ladezustand: der Text bleibt stehen, damit der Knopf nicht springt */
.ds-btn[data-loading=true]{color:transparent!important;pointer-events:none;position:relative;}
.ds-btn[data-loading=true]::after{
  content:'';position:absolute;width:14px;height:14px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;color:#fff;
  animation:ds-spin .6s linear infinite;}
.ds-btn-secondary[data-loading=true]::after,
.ds-btn-tertiary[data-loading=true]::after,
.ds-btn-ghost[data-loading=true]::after{color:var(--ds-text-2);}
@keyframes ds-spin{to{transform:rotate(360deg);}}

/* ── 6.2 Eingaben ─────────────────────────────────────────────────────── */
.ds-field{display:flex;flex-direction:column;gap:var(--ds-3);}
.ds-label{font:500 12.5px/1.3 var(--ds-font);color:var(--ds-text-2);letter-spacing:-.004em;}
.ds-hint{font:var(--ds-caption);color:var(--ds-text-3);}
.ds-input,.ds-select,.ds-textarea{
  width:100%;height:36px;padding:0 var(--ds-4);
  font:var(--ds-body-sm);color:var(--ds-text);
  background:var(--ds-surface-3);
  border:1px solid var(--ds-border);border-radius:var(--ds-r-md);
  transition:border-color var(--ds-fast) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease);
}
.ds-textarea{height:auto;min-height:88px;padding:var(--ds-4);line-height:1.55;resize:vertical;}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--ds-text-off);}
.ds-input:hover,.ds-select:hover,.ds-textarea:hover{border-color:var(--ds-border-strong);}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{
  border-color:var(--ds-brand);box-shadow:var(--ds-ring);outline:none;}
.ds-input:disabled,.ds-select:disabled,.ds-textarea:disabled{
  opacity:.5;cursor:not-allowed;background:var(--ds-surface-2);}
.ds-input[aria-invalid=true],.ds-input.ds-invalid{
  border-color:var(--ds-neg);box-shadow:0 0 0 3px var(--ds-neg-weak);}
.ds-error{font:var(--ds-caption);color:var(--ds-neg);display:flex;align-items:center;gap:var(--ds-2);}
/* Zahlenfelder rechtsbündig mit Tabellenziffern */
.ds-input[type=number],.ds-input.ds-num{
  text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;}

/* ── 6.3 Karten und Flächen ────────────────────────────────────────────────
   Bewusst sparsam: nicht jede Information braucht einen Kasten. Wo eine
   Trennlinie oder ein Abstand reicht, wird keine Karte verwendet. */
.ds-card{
  background:var(--ds-surface-2);
  border:1px solid var(--ds-border-subtle);
  border-radius:var(--ds-r-lg);
  padding:var(--ds-7);
}
.ds-card-flush{padding:0;overflow:hidden;}
.ds-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ds-5);
  padding:var(--ds-5) var(--ds-7);border-bottom:1px solid var(--ds-border-subtle);}
.ds-card-title{font:var(--ds-h3);letter-spacing:var(--ds-ls-h3);color:var(--ds-text);}
.ds-card-body{padding:var(--ds-7);}

/* Abschnittsüberschrift ohne Karte — Hierarchie durch Typo statt Rahmen */
.ds-section{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--ds-5);margin:var(--ds-9) 0 var(--ds-5);}
.ds-section-title{font:var(--ds-h2);letter-spacing:var(--ds-ls-h2);color:var(--ds-text);}
.ds-section-meta{font:var(--ds-small);color:var(--ds-text-3);}

/* ── 6.4 Tabellen ─────────────────────────────────────────────────────────
   Keine senkrechten Linien. Zahlen rechts, Text links, Kopf klebt oben. */
.ds-table{width:100%;border-collapse:separate;border-spacing:0;font:var(--ds-body-sm);}
.ds-table thead th{
  position:sticky;top:0;z-index:2;
  background:var(--ds-surface-2);
  font:550 11px/1.4 var(--ds-font);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ds-text-3);text-align:left;
  padding:var(--ds-4) var(--ds-5);
  border-bottom:1px solid var(--ds-border);white-space:nowrap;}
.ds-table td{
  padding:var(--ds-5);border-bottom:1px solid var(--ds-border-subtle);
  color:var(--ds-text);vertical-align:middle;}
.ds-table tbody tr{transition:background var(--ds-fast) var(--ds-ease);}
.ds-table tbody tr:hover{background:rgba(255,255,255,.022);}
.ds-table tbody tr:last-child td{border-bottom:none;}
.ds-table .ds-num,.ds-table [data-num]{
  text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;}

/* ── 6.5 Reiter ───────────────────────────────────────────────────────── */
.ds-tabs{display:flex;gap:var(--ds-2);border-bottom:1px solid var(--ds-border-subtle);}
.ds-tab{
  position:relative;padding:var(--ds-4) var(--ds-5);
  font:500 13px/1.4 var(--ds-font);color:var(--ds-text-3);
  background:none;border:none;cursor:pointer;
  transition:color var(--ds-fast) var(--ds-ease);}
.ds-tab:hover{color:var(--ds-text-2);}
.ds-tab[aria-selected=true],.ds-tab.is-active{color:var(--ds-text);}
.ds-tab[aria-selected=true]::after,.ds-tab.is-active::after{
  content:'';position:absolute;left:var(--ds-5);right:var(--ds-5);bottom:-1px;height:2px;
  background:var(--ds-brand);border-radius:2px 2px 0 0;}

/* ── 6.6 Abzeichen ────────────────────────────────────────────────────── */
.ds-badge{
  display:inline-flex;align-items:center;gap:var(--ds-2);
  height:20px;padding:0 var(--ds-3);
  font:550 11px/1 var(--ds-font);letter-spacing:.01em;
  border:1px solid transparent;border-radius:var(--ds-r-sm);white-space:nowrap;}
.ds-badge-neutral{background:var(--ds-surface-3);border-color:var(--ds-border);color:var(--ds-text-2);}
.ds-badge-brand{background:var(--ds-brand-weak);border-color:var(--ds-brand-line);color:var(--ds-brand-hover);}
.ds-badge-pos{background:var(--ds-pos-weak);border-color:var(--ds-pos-line);color:var(--ds-pos);}
.ds-badge-neg{background:var(--ds-neg-weak);border-color:var(--ds-neg-line);color:var(--ds-neg);}
.ds-badge-warn{background:var(--ds-warn-weak);border-color:var(--ds-warn-line);color:var(--ds-warn);}
.ds-badge-dot::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;}

/* ── 6.7 Modale ───────────────────────────────────────────────────────── */
.ds-overlay{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;padding:var(--ds-6);
  background:rgba(4,5,7,.7);
  animation:ds-fade var(--ds-base) var(--ds-ease);}
.ds-modal{
  width:100%;max-width:560px;max-height:88vh;overflow:auto;
  background:var(--ds-surface-4);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-r-xl);
  box-shadow:var(--ds-shadow-lg);
  animation:ds-rise var(--ds-base) var(--ds-ease);}
.ds-modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--ds-7) var(--ds-7) var(--ds-5);}
.ds-modal-title{font:var(--ds-h3);letter-spacing:var(--ds-ls-h3);}
.ds-modal-body{padding:0 var(--ds-7) var(--ds-7);}
.ds-modal-foot{display:flex;justify-content:flex-end;gap:var(--ds-4);
  padding:var(--ds-5) var(--ds-7);border-top:1px solid var(--ds-border-subtle);}
@keyframes ds-fade{from{opacity:0;}}
@keyframes ds-rise{from{opacity:0;transform:translateY(8px) scale(.99);}}

/* ── 6.8 Kurzhinweise ─────────────────────────────────────────────────── */
.ds-tip{position:relative;}
.ds-tip::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  padding:var(--ds-3) var(--ds-4);
  font:var(--ds-caption);color:var(--ds-text);white-space:nowrap;
  background:var(--ds-surface-4);border:1px solid var(--ds-border);
  border-radius:var(--ds-r-sm);box-shadow:var(--ds-shadow-md);
  opacity:0;pointer-events:none;z-index:50;
  transition:opacity var(--ds-fast) var(--ds-ease);}
.ds-tip:hover::after,.ds-tip:focus-visible::after{opacity:1;}

/* ── 6.9 Meldungen ────────────────────────────────────────────────────── */
.ds-toast{
  display:flex;align-items:flex-start;gap:var(--ds-4);
  padding:var(--ds-5);max-width:380px;
  background:var(--ds-surface-4);border:1px solid var(--ds-border);
  border-left:2px solid var(--ds-brand);
  border-radius:var(--ds-r-md);box-shadow:var(--ds-shadow-lg);
  font:var(--ds-body-sm);
  animation:ds-slide var(--ds-slow) var(--ds-ease);}
.ds-toast-pos{border-left-color:var(--ds-pos);}
.ds-toast-neg{border-left-color:var(--ds-neg);}
.ds-toast-warn{border-left-color:var(--ds-warn);}
@keyframes ds-slide{from{opacity:0;transform:translateX(12px);}}

/* ─────────────────────────────────────────────────────────────────────────
   7  ZUSTÄNDE: LEER · LADEND · FEHLERHAFT
   Jeder leere Bereich erklärt, was fehlt und was als Nächstes zu tun ist.
   ───────────────────────────────────────────────────────────────────────── */
.ds-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--ds-4);padding:var(--ds-11) var(--ds-7);}
.ds-empty-icon{
  width:40px;height:40px;display:grid;place-items:center;
  color:var(--ds-text-3);background:var(--ds-surface-3);
  border:1px solid var(--ds-border-subtle);border-radius:var(--ds-r-lg);
  margin-bottom:var(--ds-2);}
.ds-empty-title{font:var(--ds-h3);letter-spacing:var(--ds-ls-h3);color:var(--ds-text);}
.ds-empty-text{font:var(--ds-body-sm);color:var(--ds-text-2);max-width:38ch;line-height:1.6;}
.ds-empty .ds-btn{margin-top:var(--ds-3);}

/* Skelette: die Fläche des künftigen Inhalts, nicht ein Kreisel im Nichts */
.ds-skel{
  background:linear-gradient(90deg,
    var(--ds-surface-3) 25%,rgba(255,255,255,.05) 37%,var(--ds-surface-3) 63%);
  background-size:400% 100%;
  animation:ds-shimmer 1.4s ease-in-out infinite;
  border-radius:var(--ds-r-sm);}
.ds-skel-text{height:12px;margin-bottom:var(--ds-3);}
.ds-skel-title{height:20px;width:40%;margin-bottom:var(--ds-5);}
.ds-skel-metric{height:30px;width:60%;}
.ds-skel-chart{height:180px;border-radius:var(--ds-r-md);}
.ds-skel-row{height:40px;margin-bottom:var(--ds-2);}
@keyframes ds-shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
@media (prefers-reduced-motion:reduce){.ds-skel{animation:none;}}

.ds-errorbox{
  display:flex;gap:var(--ds-4);padding:var(--ds-5);
  background:var(--ds-neg-weak);border:1px solid var(--ds-neg-line);
  border-radius:var(--ds-r-md);font:var(--ds-body-sm);color:var(--ds-text);}

/* ─────────────────────────────────────────────────────────────────────────
   8  ZAHLEN UND FINANZWERTE
   Alle Beträge in Tabellenziffern, damit Spalten untereinander fluchten.
   Vorzeichen trägt die Farbe, nicht die Größe.
   ───────────────────────────────────────────────────────────────────────── */
.ds-metric{display:flex;flex-direction:column;gap:var(--ds-2);}
.ds-metric-label{font:var(--ds-overline);letter-spacing:var(--ds-ls-overline);
  text-transform:uppercase;color:var(--ds-text-3);}
.ds-metric-value{
  font:600 24px/1.15 var(--ds-font);letter-spacing:-.02em;color:var(--ds-text);
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;}
.ds-metric-xl .ds-metric-value{font-size:30px;letter-spacing:-.025em;}
.ds-metric-sm .ds-metric-value{font-size:18px;letter-spacing:-.015em;}
.ds-metric-sub{font:var(--ds-caption);color:var(--ds-text-3);}
.ds-pos-val{color:var(--ds-pos);}
.ds-neg-val{color:var(--ds-neg);}
.ds-flat-val{color:var(--ds-text-2);}
.ds-num,[data-num]{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;}

/* ─────────────────────────────────────────────────────────────────────────
   9  ALT-BESTAND EINFANGEN
   app.html trägt 1387 Inline-Styles und 3995 feste px-Werte. Sie einzeln zu
   ersetzen hieße, jede Vorlage anzufassen und dabei Funktionen zu riskieren.
   Stattdessen werden die häufigsten Werte hier auf das Raster gezogen —
   ein rein visueller Eingriff, der keine Zeile Logik berührt.

   Wichtigster Punkt: alles unter 11 px wird angehoben. Die App war auf
   8–10 px gesetzt; das ist der Hauptgrund, warum sie nach Werkzeug statt
   nach Produkt aussah.
   ───────────────────────────────────────────────────────────────────────── */
[style*="font-size:8px"],[style*="font-size: 8px"],
[style*="font-size:8.5px"],[style*="font-size: 8.5px"],
[style*="font-size:9px"],[style*="font-size: 9px"]{font-size:11px!important;}
[style*="font-size:9.5px"],[style*="font-size: 9.5px"],
[style*="font-size:10px"],[style*="font-size: 10px"]{font-size:11.5px!important;}
[style*="font-size:10.5px"],[style*="font-size: 10.5px"],
[style*="font-size:11px"],[style*="font-size: 11px"]{font-size:12.5px!important;}
[style*="font-size:12px"],[style*="font-size: 12px"],
[style*="font-size:12.5px"],[style*="font-size: 12.5px"]{font-size:13px!important;}

/* Radien auf die vier Stufen des Systems */
[style*="border-radius:10px"],[style*="border-radius:11px"],
[style*="border-radius:12px"],[style*="border-radius:14px"]{border-radius:var(--ds-r-lg)!important;}
[style*="border-radius:16px"],[style*="border-radius:18px"],
[style*="border-radius:20px"],[style*="border-radius:24px"]{border-radius:var(--ds-r-xl)!important;}

/* Laufweite: gesperrte Versalien waren über die App verteilt und wirken
   auf kleinen Größen wie ein Etikett. Nur Mikro-Labels behalten sie. */
[style*="letter-spacing:.2em"],[style*="letter-spacing:0.2em"],
[style*="letter-spacing:.24em"],[style*="letter-spacing:.28em"],
[style*="letter-spacing:.3em"]{letter-spacing:.08em!important;}

/* ─────────────────────────────────────────────────────────────────────────
   10  DIE APP AUF DAS SYSTEM ZIEHEN
   app.html bringt eigene Klassennamen mit (kpi-cell, sec, wtable, tab-btn …).
   Sie werden hier auf die Bausteine des Systems abgebildet, statt sie im
   Markup umzubenennen — dadurch bleibt jede Funktion unangetastet.
   ───────────────────────────────────────────────────────────────────────── */

/* Tabellenziffern für die gesamte App: Zahlen fluchten spaltenweise, ohne
   dass irgendwo eine Schreibmaschinenschrift nötig wäre. */
body,input,select,textarea,button,table{
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1,'cv05' 1;}
.ds-mono{font-family:var(--ds-font-mono)!important;}

/* ── 10.1 Kennzahlen ──────────────────────────────────────────────────── */
.kpi-strip{gap:var(--ds-5)!important;}
.kpi-cell{
  background:var(--ds-surface-2)!important;
  border:1px solid var(--ds-border-subtle)!important;
  border-radius:var(--ds-r-lg)!important;
  padding:var(--ds-5) var(--ds-6)!important;
  box-shadow:none!important;
  transition:border-color var(--ds-fast) var(--ds-ease),background var(--ds-fast) var(--ds-ease);}
.kpi-cell:hover{
  transform:none!important;
  border-color:var(--ds-border)!important;
  background:var(--ds-surface-3)!important;
  box-shadow:none!important;}
.kpi-lbl{
  font:var(--ds-overline)!important;letter-spacing:var(--ds-ls-overline)!important;
  text-transform:uppercase;color:var(--ds-text-3)!important;margin-bottom:var(--ds-3)!important;}
.kpi-val{
  font:600 24px/1.15 var(--ds-font)!important;letter-spacing:-.02em!important;
  font-variant-numeric:tabular-nums;}
.kpi-sub{font:var(--ds-caption)!important;color:var(--ds-text-3)!important;
  letter-spacing:0!important;margin-top:var(--ds-2)!important;}
.kpi-val.g,.td-pos,.acc-kpi.positive{color:var(--ds-pos)!important;}
.kpi-val.r,.td-neg{color:var(--ds-neg)!important;}
.kpi-val.w{color:var(--ds-text)!important;}
.kpi-val.gold{color:var(--ds-brand-hover)!important;}
/* Der farbige Balken bleibt, wird aber ruhiger: er markiert Bedeutung,
   nicht Dekoration. */
.kpi-cell::before{opacity:.65!important;width:2px!important;}
.kpi-cell:hover::before{opacity:1!important;}

/* ── 10.2 Abschnittsköpfe ─────────────────────────────────────────────── */
.sec{
  font:600 15px/1.4 var(--ds-font)!important;
  letter-spacing:-.012em!important;
  text-transform:none!important;
  color:var(--ds-text)!important;
  padding-bottom:var(--ds-4)!important;
  margin-top:var(--ds-9)!important;
  border-bottom:1px solid var(--ds-border-subtle)!important;
  gap:var(--ds-4)!important;}
.sec::before{width:4px!important;height:4px!important;border-radius:50%!important;
  background:var(--ds-brand)!important;box-shadow:none!important;}
.sec > span:last-of-type{
  font:var(--ds-small)!important;letter-spacing:0!important;
  color:var(--ds-text-3)!important;text-transform:none!important;
  background:none!important;border:none!important;padding:0!important;}

.page-title{font:var(--ds-h1)!important;letter-spacing:var(--ds-ls-h1)!important;}
.page-subtitle{font:var(--ds-body)!important;color:var(--ds-text-2)!important;
  letter-spacing:var(--ds-ls-body)!important;text-transform:none!important;}

/* ── 10.3 Tabellen ────────────────────────────────────────────────────── */
.wtable{font:var(--ds-body-sm)!important;}
.wtable th{
  font:550 11px/1.4 var(--ds-font)!important;letter-spacing:.05em!important;
  text-transform:uppercase;color:var(--ds-text-3)!important;
  padding:var(--ds-4) var(--ds-5)!important;
  border-bottom:1px solid var(--ds-border)!important;
  background:var(--ds-surface-2);}
.wtable td{padding:var(--ds-4) var(--ds-5)!important;
  border-bottom:1px solid var(--ds-border-subtle)!important;
  font-variant-numeric:tabular-nums;}
.wtable tbody tr:hover{background:rgba(255,255,255,.022)!important;}
/* Finanzspalten rechtsbündig — der Blick vergleicht Beträge senkrecht */
.wtable td.td-pos,.wtable td.td-neg,.wtable td.td-dim{white-space:nowrap;}

/* ── 10.4 Reiter der Hauptnavigation ──────────────────────────────────── */
.tab-btn{
  font:500 13px/1.4 var(--ds-font)!important;
  letter-spacing:-.004em!important;
  text-transform:none!important;
  color:var(--ds-text-3)!important;
  padding:var(--ds-5) var(--ds-5)!important;
  transition:color var(--ds-fast) var(--ds-ease);}
.tab-btn:hover{color:var(--ds-text-2)!important;}
.tab-btn.active{color:var(--ds-text)!important;box-shadow:none!important;}

/* ── 10.5 Knöpfe der App auf das Knopfsystem ──────────────────────────── */
.btn-save,.lf-btn,.payout-btn,.btn-add,.btn-add-account,.btn-backup,
.acc-manage-btn,.btn-expand,.lf-btn2,.btn-del{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-3);
  height:36px!important;padding:0 var(--ds-5)!important;
  font:500 13px/1 var(--ds-font)!important;letter-spacing:-.004em!important;
  text-transform:none!important;
  border-radius:var(--ds-r-md)!important;
  transition:background var(--ds-fast) var(--ds-ease),
             border-color var(--ds-fast) var(--ds-ease),
             color var(--ds-fast) var(--ds-ease);}
.btn-save,.lf-btn,.payout-btn{
  background:var(--ds-brand)!important;border:1px solid var(--ds-brand)!important;
  color:#fff!important;box-shadow:none!important;}
.btn-save:hover,.lf-btn:hover,.payout-btn:hover{
  background:var(--ds-brand-hover)!important;border-color:var(--ds-brand-hover)!important;}
.btn-add,.btn-add-account,.btn-backup,.acc-manage-btn,.btn-expand,.lf-btn2{
  background:var(--ds-surface-3)!important;
  border:1px solid var(--ds-border)!important;
  color:var(--ds-text)!important;}
.btn-add:hover,.btn-add-account:hover,.btn-backup:hover,
.acc-manage-btn:hover,.btn-expand:hover,.lf-btn2:hover{
  background:var(--ds-surface-4)!important;border-color:var(--ds-border-strong)!important;}
.btn-del{background:transparent!important;border:1px solid var(--ds-neg-line)!important;
  color:var(--ds-neg)!important;}
.btn-del:hover{background:var(--ds-neg-weak)!important;}
.lf-btn{height:44px!important;font-size:14px!important;width:100%;}

/* ── 10.6 Eingaben ────────────────────────────────────────────────────── */
.field input,.field select,.field textarea,.field-input,.field-textarea,
.link-input,.acc-dropdown,.acc-select,select,.lf-field input,.trade-row input,
.trade-row select,.psych-textarea{
  font:var(--ds-body-sm)!important;
  color:var(--ds-text)!important;
  background:var(--ds-surface-3)!important;
  border:1px solid var(--ds-border)!important;
  border-radius:var(--ds-r-md)!important;
  transition:border-color var(--ds-fast) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease);}
.field input:hover,.field select:hover,.acc-select:hover,select:hover{
  border-color:var(--ds-border-strong)!important;}
.field input:focus,.field select:focus,.field textarea:focus,
.field-input:focus,.field-textarea:focus,.link-input:focus,
.acc-dropdown:focus,.acc-select:focus,select:focus,.lf-field input:focus,
.trade-row input:focus,.trade-row select:focus,.psych-textarea:focus{
  border-color:var(--ds-brand)!important;
  box-shadow:var(--ds-ring)!important;}
.field label,.field-label,.lf-field label,.psych-lbl,.settings-row label{
  font:500 12.5px/1.3 var(--ds-font)!important;
  letter-spacing:-.004em!important;text-transform:none!important;
  color:var(--ds-text-2)!important;}

/* ── 10.7 Panels, Modale, Seitenleisten ───────────────────────────────── */
.equity-wrap,.cal-wrap,.payout-card,.acc-card,.rc-card,.form-card,.ziel-card,
.psych-card,.coach-sidebar,.coach-main,.trade-block,.day-sidebar,.symbol-wrap,
.goal-wrap,.payout-history-wrap,.lt-panel,.ev-panel,.lt-info-block{
  background:var(--ds-surface-2)!important;
  border:1px solid var(--ds-border-subtle)!important;
  border-radius:var(--ds-r-lg)!important;
  box-shadow:none!important;}
.payout-card:hover,.acc-card:hover,.ziel-card:hover,.psych-card:hover,.rc-card:hover{
  transform:none!important;
  border-color:var(--ds-border)!important;
  box-shadow:none!important;}
.payout-card-lbl{font:var(--ds-overline)!important;letter-spacing:var(--ds-ls-overline)!important;
  color:var(--ds-text-3)!important;}
.payout-card-val{font:600 20px/1.2 var(--ds-font)!important;letter-spacing:-.018em!important;}
.payout-card-sub{font:var(--ds-caption)!important;color:var(--ds-text-3)!important;}

.modal-box,.modal-inner{
  background:var(--ds-surface-4)!important;
  border:1px solid var(--ds-border)!important;
  border-radius:var(--ds-r-xl)!important;
  box-shadow:var(--ds-shadow-lg)!important;}
.modal-overlay{background:rgba(4,5,7,.7)!important;}
.modal-title{font:var(--ds-h3)!important;letter-spacing:var(--ds-ls-h3)!important;
  text-transform:none!important;color:var(--ds-text)!important;}
.modal-head,.modal-foot{border-color:var(--ds-border-subtle)!important;}
.settings-title{font:600 13px/1.4 var(--ds-font)!important;letter-spacing:-.01em!important;
  text-transform:none!important;color:var(--ds-text)!important;}

/* ── 10.8 Kopf und Tableiste ──────────────────────────────────────────── */
header{background:var(--ds-surface-1)!important;
  border-bottom:1px solid var(--ds-border-subtle)!important;
  backdrop-filter:none;-webkit-backdrop-filter:none;}
.tab-nav{background:var(--ds-surface-1)!important;
  border-bottom:1px solid var(--ds-border-subtle)!important;
  backdrop-filter:none;-webkit-backdrop-filter:none;}
.header-right{font:var(--ds-body-sm)!important;letter-spacing:-.004em!important;}

/* ── 10.9 Abzeichen ───────────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:var(--ds-2);
  height:20px;padding:0 var(--ds-3)!important;
  font:550 11px/1 var(--ds-font)!important;letter-spacing:.01em!important;
  border-radius:var(--ds-r-sm)!important;text-transform:none!important;}

/* ── 10.10 Anmeldung ──────────────────────────────────────────────────── */
.login-box{
  background:var(--ds-surface-2)!important;
  border:1px solid var(--ds-border)!important;
  border-radius:var(--ds-r-xl)!important;
  box-shadow:var(--ds-shadow-lg)!important;
  padding:var(--ds-10) var(--ds-9) var(--ds-9)!important;}
.login-sub{font:var(--ds-small)!important;letter-spacing:.06em!important;
  color:var(--ds-text-3)!important;}
.lf-field label{margin-bottom:var(--ds-3)!important;}
.lf-field input{height:40px!important;padding:0 var(--ds-4)!important;}

/* ── 10.11 Journal-Seitenleiste ───────────────────────────────────────── */
.day-item{
  border-bottom:1px solid var(--ds-border-subtle)!important;
  padding:var(--ds-4) var(--ds-5)!important;
  transition:background var(--ds-fast) var(--ds-ease);}
.day-item:hover{background:var(--ds-surface-3)!important;}
.di-num{font:var(--ds-overline)!important;letter-spacing:var(--ds-ls-overline)!important;
  color:var(--ds-text-3)!important;}
.di-date{font:var(--ds-body-sm)!important;color:var(--ds-text-2)!important;}
.di-pnl{font:600 13px/1.3 var(--ds-font)!important;font-variant-numeric:tabular-nums;}

/* ── 10.12 Kalender ───────────────────────────────────────────────────── */
.cal-dow{font:var(--ds-overline)!important;letter-spacing:var(--ds-ls-overline)!important;
  color:var(--ds-text-3)!important;}
.cal-day{border-color:var(--ds-border-subtle)!important;}

/* ── 10.13 Kennzahlenleiste: mitwachsend statt starr ───────────────────────
   Vorher lagen neun feste Spalten nebeneinander. Bei größerer Schrift passte
   „+$2.200,00" nicht mehr in 142 px und wurde abgeschnitten. Die Leiste bricht
   jetzt selbst um: jede Kachel bekommt mindestens 168 px, der Rest verteilt
   sich. Das gilt auf allen Bildschirmbreiten und ersetzt die vier festen
   Umbruchpunkte. */
.kpi-strip,.kpi-strip-7{
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr))!important;
  gap:var(--ds-5)!important;
  margin-bottom:var(--ds-9)!important;}
@media (max-width:640px){
  .kpi-strip,.kpi-strip-7{grid-template-columns:repeat(auto-fit,minmax(146px,1fr))!important;}
  .kpi-val{font-size:20px!important;}
}

/* ── 10.14 Kalender und Wochenrechner ─────────────────────────────────────
   Die letzten Stellen unter 11 px lagen im Monatskalender: Tageszahl,
   Trade-Anzahl und Trefferquote standen auf 9,5 px. Genau diese Zellen liest
   man im Vorbeigehen — sie brauchen die Größe am dringendsten. */
.d-num{font:500 12px/1.2 var(--ds-font)!important;color:var(--ds-text-2)!important;
  letter-spacing:0!important;}
.d-num.wd{color:var(--ds-text-3)!important;}
.d-pnl{font:600 12.5px/1.3 var(--ds-font)!important;font-variant-numeric:tabular-nums;}
.d-trades,.d-wr{font:400 11px/1.3 var(--ds-font)!important;color:var(--ds-text-3)!important;
  letter-spacing:0!important;}
.wk-lbl{font:var(--ds-overline)!important;letter-spacing:var(--ds-ls-overline)!important;
  color:var(--ds-text-3)!important;}
.goal-lbl{font:500 12.5px/1.4 var(--ds-font)!important;letter-spacing:-.004em!important;
  text-transform:none!important;color:var(--ds-text-2)!important;}
.goal-num{font:600 13px/1.4 var(--ds-font)!important;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em!important;}
.payout-markers span{font:var(--ds-caption)!important;letter-spacing:0!important;
  color:var(--ds-text-3)!important;}
.acc-selector-lbl{font:var(--ds-overline)!important;letter-spacing:var(--ds-ls-overline)!important;
  color:var(--ds-text-3)!important;}
.green-dot{font-size:11px!important;}

/* Fortschrittsbalken: dünn, ohne Verlauf, Farbe nur als Bedeutungsträger */
.goal-track,.mbar,.symbol-bar-track{background:var(--ds-surface-3)!important;
  border-radius:var(--ds-r-pill)!important;overflow:hidden;}
.goal-fill{background:var(--ds-brand)!important;border-radius:var(--ds-r-pill)!important;}
.symbol-bar-fill{border-radius:var(--ds-r-pill)!important;}

/* ── 10.15 KI Coach ───────────────────────────────────────────────────────
   Der Coach soll kein Chatfenster mit angeklebter Seitenleiste sein, sondern
   ein eigener Arbeitsbereich: links der Kontext des Kontos, rechts das
   Gespräch. Dafür braucht der Kontext lesbare Werte statt 10-px-Zeilen. */
.coach-ctx-lbl{font:400 12.5px/1.4 var(--ds-font)!important;color:var(--ds-text-2)!important;
  letter-spacing:-.004em!important;}
.coach-ctx-val{font:600 12.5px/1.4 var(--ds-font)!important;
  font-variant-numeric:tabular-nums;letter-spacing:-.008em!important;}
.coach-ctx-val.g{color:var(--ds-pos)!important;}
.coach-ctx-val.r{color:var(--ds-neg)!important;}
.coach-ctx-val.gold{color:var(--ds-brand-hover)!important;}
.coach-ctx-row{padding:var(--ds-3) 0!important;}
.coach-ctx-chev{font-size:11px!important;color:var(--ds-text-3)!important;}
.coach-quick-btn{
  font:500 12px/1 var(--ds-font)!important;letter-spacing:-.004em!important;
  height:30px;padding:0 var(--ds-4)!important;
  background:var(--ds-surface-3)!important;border:1px solid var(--ds-border)!important;
  border-radius:var(--ds-r-md)!important;color:var(--ds-text-2)!important;
  transition:background var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease);}
.coach-quick-btn:hover{background:var(--ds-surface-4)!important;color:var(--ds-text)!important;}
.coach-key-label,.coach-sidebar-sub{font:var(--ds-caption)!important;color:var(--ds-text-3)!important;}
.coach-msg{font:var(--ds-body)!important;line-height:1.6!important;}

/* ── 10.16 Long Term ──────────────────────────────────────────────────── */
.lt-info{font:400 12px/1.5 var(--ds-font)!important;color:var(--ds-text-3)!important;
  letter-spacing:0!important;}
.lt-hinweis,.ev-hinweis{font:400 12px/1.6 var(--ds-font)!important;
  color:var(--ds-text-3)!important;letter-spacing:0!important;}
.lt-fchip{font:500 12px/1 var(--ds-font)!important;height:26px;padding:0 var(--ds-4)!important;
  border-radius:var(--ds-r-sm)!important;border:1px solid var(--ds-border)!important;
  background:var(--ds-surface-3)!important;color:var(--ds-text-2)!important;}
.lt-fchip.on{background:var(--ds-brand-weak)!important;border-color:var(--ds-brand-line)!important;
  color:var(--ds-brand-hover)!important;}
.lt-fzahl,.lt-fclear{font:400 12px/1.3 var(--ds-font)!important;color:var(--ds-text-3)!important;}
.lt-tab{font:500 13px/1 var(--ds-font)!important;letter-spacing:-.004em!important;
  text-transform:none!important;}
.lt-metrik-l{font:var(--ds-overline)!important;letter-spacing:var(--ds-ls-overline)!important;
  color:var(--ds-text-3)!important;}
.lt-metrik-v{font:600 20px/1.2 var(--ds-font)!important;letter-spacing:-.018em!important;
  font-variant-numeric:tabular-nums;}

/* ═══════════════════════════════════════════════════════════════════════════
   11  SEITENLEISTE
   Die App hat über zwanzig Bereiche. In der waagerechten Leiste waren fünf
   davon sichtbar; der Rest lag hinter einem Verzeichnis-Knopf. Die Leiste
   zeigt die Struktur des Produkts dauerhaft — gruppiert, ruhig, einklappbar.
   ═══════════════════════════════════════════════════════════════════════════ */
.app-shell{display:flex;align-items:flex-start;min-height:calc(100vh - 120px);}
.app-main{flex:1;min-width:0;}

.side-nav{
  flex:0 0 224px;width:224px;
  display:flex;flex-direction:column;
  background:var(--ds-surface-1);
  border-right:1px solid var(--ds-border-subtle);
  transition:flex-basis var(--ds-base) var(--ds-ease),width var(--ds-base) var(--ds-ease);
  z-index:60;
}

/* ── Arbeitsfläche ab 1025 px: echte App-Navigation ───────────────────────────
   Vorher war die Leiste `position:sticky; top:0`. Sticky heißt: erst mitlaufen,
   dann kleben — sie wanderte also beim Scrollen nach oben und schob sich
   anschließend unter den Header (z-index 60 gegen 200).

   Jetzt liegt die gesamte Arbeitsfläche fest unter dem Kopfbereich und füllt
   den Rest des Fensters. Gescrollt wird ausschließlich in `.app-main`. Weil
   die Fläche aus dem Textfluss genommen ist, wird die Seite selbst nicht mehr
   höher als das Fenster — es gibt gar keinen Seiten-Scroll mehr, der die
   Leiste verschieben könnte.

   --app-kopf ist die gemessene Höhe von Header plus Kursleiste; sie wird beim
   Start und bei jeder Größenänderung neu gesetzt (siehe _kopfhoeheMessen). */
@media (min-width:1025px){
  .app-shell{
    position:fixed;
    top:var(--app-kopf,104px); left:0; right:0; bottom:0;
    align-items:stretch;
    min-height:0;
    z-index:1;
  }
  .side-nav{height:100%;}
  .app-main{
    height:100%;
    overflow-y:auto;
    overscroll-behavior:contain;
    /* Bezugsrahmen für alles, was im Inhalt selbst klebt */
    position:relative;
  }
}
.sn-head{display:flex;align-items:center;justify-content:flex-end;
  padding:var(--ds-4) var(--ds-4) 0;min-height:32px;}
.sn-toggle,.sn-close{
  display:grid;place-items:center;width:28px;height:28px;
  background:transparent;border:1px solid transparent;border-radius:var(--ds-r-sm);
  color:var(--ds-text-3);cursor:pointer;
  transition:background var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease);}
.sn-toggle:hover,.sn-close:hover{background:var(--ds-surface-3);color:var(--ds-text);}
.sn-close{display:none;font-size:15px;}

.sn-scroll{flex:1;overflow-y:auto;padding:var(--ds-2) var(--ds-4) var(--ds-5);}
.sn-group{margin-bottom:var(--ds-5);}
.sn-group-lbl{
  font:var(--ds-overline);letter-spacing:var(--ds-ls-overline);text-transform:uppercase;
  color:var(--ds-text-off);padding:var(--ds-3) var(--ds-4) var(--ds-2);}

.sn-item{
  display:flex;align-items:center;gap:var(--ds-4);width:100%;
  height:34px;padding:0 var(--ds-4);
  font:450 13px/1 var(--ds-font);letter-spacing:-.004em;
  color:var(--ds-text-2);text-align:left;
  background:transparent;border:none;border-radius:var(--ds-r-md);cursor:pointer;
  transition:background var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease);}
.sn-item:hover{background:var(--ds-surface-3);color:var(--ds-text);}
/* Der aktive Bereich ist eindeutig, aber leise: gefüllte Fläche statt Balken
   und Leuchten. */
.sn-item.active{background:var(--ds-brand-weak);color:var(--ds-text);font-weight:550;}
.sn-item.active .sn-ic{color:var(--ds-brand-hover);}
.sn-ic{display:grid;place-items:center;width:16px;height:16px;flex-shrink:0;color:var(--ds-text-3);}
.sn-ic svg{width:16px;height:16px;}
.sn-item:hover .sn-ic{color:var(--ds-text-2);}
.sn-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sn-foot{padding:var(--ds-4);border-top:1px solid var(--ds-border-subtle);}

/* Eingeklappt: nur Symbole, 56 px breit */
.sn-klein .side-nav{flex-basis:56px;width:56px;}
.sn-klein .sn-txt,.sn-klein .sn-group-lbl{display:none;}
.sn-klein .sn-item{justify-content:center;padding:0;}
.sn-klein .sn-group{margin-bottom:var(--ds-3);padding-top:var(--ds-3);
  border-top:1px solid var(--ds-border-subtle);}
.sn-klein .sn-group:first-child{border-top:none;padding-top:0;}

.side-scrim{display:none;}

/* Unter 1024 px fährt die Leiste als Schublade über den Inhalt */
@media (max-width:1024px){
  .side-nav{
    position:fixed;top:0;left:0;height:100vh;width:264px;flex-basis:0;
    transform:translateX(-100%);
    transition:transform var(--ds-base) var(--ds-ease);
    box-shadow:var(--ds-shadow-lg);z-index:1200;}
  .sn-offen .side-nav{transform:translateX(0);}
  .sn-close{display:grid;}
  .sn-offen .side-scrim{
    display:block;position:fixed;inset:0;z-index:1100;
    background:rgba(4,5,7,.6);animation:ds-fade var(--ds-fast) var(--ds-ease);}
  .sn-klein .side-nav{width:264px;}
  .sn-klein .sn-txt,.sn-klein .sn-group-lbl{display:block;}
  .sn-klein .sn-item{justify-content:flex-start;padding:0 var(--ds-4);}
}

/* Ab 1025 px übernimmt die Seitenleiste — die Reiterleiste verschwindet.
   Sie bleibt im DOM, damit Favoriten, Verzeichnis und Onboarding-Tour
   weiterhin auf ihre Elemente zugreifen können. */
@media (min-width:1025px){
  .tab-nav{display:none!important;}
}
@media (max-width:1024px){
  .side-nav{--x:0;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   12  AUFKLAPPBARE BEREICHE
   Das Dashboard soll in fünf Sekunden beantworten „Wie läuft mein Trading
   gerade?". Die tiefere Auswertung bleibt vollständig erhalten, liegt aber
   hinter einem Klick statt darüber.
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-disclosure{
  margin-top:var(--ds-9);
  border:1px solid var(--ds-border-subtle);
  border-radius:var(--ds-r-lg);
  background:var(--ds-surface-2);
  overflow:hidden;}
.ds-disclosure-head{
  display:flex;align-items:center;gap:var(--ds-4);
  padding:var(--ds-5) var(--ds-6);cursor:pointer;list-style:none;
  transition:background var(--ds-fast) var(--ds-ease);}
.ds-disclosure-head::-webkit-details-marker{display:none;}
.ds-disclosure-head:hover{background:var(--ds-surface-3);}
.ds-disclosure-chev{
  display:grid;place-items:center;width:20px;height:20px;flex-shrink:0;
  color:var(--ds-text-3);
  transition:transform var(--ds-base) var(--ds-ease);}
.ds-disclosure[open] .ds-disclosure-chev{transform:rotate(90deg);}
.ds-disclosure-title{display:block;font:550 13.5px/1.4 var(--ds-font);
  letter-spacing:-.008em;color:var(--ds-text);}
.ds-disclosure-sub{display:block;font:var(--ds-caption);color:var(--ds-text-3);margin-top:1px;}
.ds-disclosure-body{padding:0 var(--ds-6) var(--ds-6);}
/* Der erste Abschnittskopf im aufgeklappten Bereich braucht keinen zusätzlichen
   Abstand nach oben — die Kopfzeile liefert ihn bereits. */
.ds-disclosure-body > .sec:first-child{margin-top:var(--ds-3)!important;}

/* ── 12.1 Gruppen im Trade-Formular ────────────────────────────────────────
   Das Detailfeld eines Trades war ein Raster ohne Überschriften — 14 Felder
   ohne erkennbare Ordnung. Die Felder sind unverändert, sie stehen jetzt nur
   unter benannten Gruppen. */
.tf-group{
  background:var(--ds-surface-3);
  border:1px solid var(--ds-border-subtle);
  border-radius:var(--ds-r-md);
  padding:var(--ds-5);}
.tf-group-lbl{
  font:var(--ds-overline);letter-spacing:var(--ds-ls-overline);text-transform:uppercase;
  color:var(--ds-brand-hover);
  padding-bottom:var(--ds-3);margin-bottom:var(--ds-4);
  border-bottom:1px solid var(--ds-border-subtle);}
.td-lbl{font:500 12px/1.3 var(--ds-font)!important;color:var(--ds-text-2)!important;
  letter-spacing:-.004em!important;text-transform:none!important;margin-bottom:var(--ds-2)!important;}
.trade-detail{gap:var(--ds-5)!important;}

/* ── 12.2 Leere Zustände in der App ───────────────────────────────────────
   Vorher stand dort ein grauer Satz. Jetzt steht dort, was fehlt, warum es
   fehlt und was als Nächstes zu tun ist. */
.equity-empty,.lt-leer,.ev-leer{
  display:flex!important;flex-direction:column;align-items:center;text-align:center;
  gap:var(--ds-3);padding:var(--ds-10) var(--ds-7)!important;
  font:var(--ds-body-sm)!important;color:var(--ds-text-2)!important;
  background:none!important;border:none!important;}
.equity-empty::before,.lt-leer::before,.ev-leer::before{
  content:'';width:36px;height:36px;border-radius:var(--ds-r-lg);
  background:var(--ds-surface-3);border:1px solid var(--ds-border-subtle);
  margin-bottom:var(--ds-2);}

/* ═══════════════════════════════════════════════════════════════════════════
   13  STARTSEITE: ABLAUF UND VERTRAUEN
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ablauf in acht Schritten — nummeriert, ohne Karten, Hierarchie über
   Typografie und eine durchgehende Linie. */
.flow{
  list-style:none;margin:var(--ds-10) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--ds-11);
  counter-reset:flow;}
.flow-step{
  display:flex;gap:var(--ds-6);
  padding:var(--ds-7) 0;
  border-top:1px solid var(--ds-border-subtle);}
.flow-n{
  flex-shrink:0;width:32px;
  font:600 12px/1.6 var(--ds-font);letter-spacing:.06em;
  color:var(--ds-brand);
  font-variant-numeric:tabular-nums;}
.flow-step b{
  display:block;font:600 15px/1.4 var(--ds-font);letter-spacing:-.012em;
  color:var(--ds-text);margin-bottom:var(--ds-3);}
.flow-step p{
  font:400 13.5px/1.65 var(--ds-font);letter-spacing:-.004em;
  color:var(--ds-text-2);margin:0;}
@media (max-width:820px){
  .flow{grid-template-columns:1fr;gap:0;}
}

/* Vertrauen — Aussagen ohne Bild und ohne Siegel, nur nachprüfbare Angaben */
.trust-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--ds-5);margin-top:var(--ds-10);}
.trust-card{
  padding:var(--ds-7);
  background:var(--ds-surface-2);
  border:1px solid var(--ds-border-subtle);
  border-radius:var(--ds-r-lg);}
.trust-h{
  font:600 14.5px/1.4 var(--ds-font);letter-spacing:-.012em;
  color:var(--ds-text);margin-bottom:var(--ds-4);}
.trust-card p{
  font:400 13.5px/1.65 var(--ds-font);letter-spacing:-.004em;
  color:var(--ds-text-2);margin:0;}
.rate-cta{margin-top:var(--ds-10);text-align:center;}
.rate-hint{font:var(--ds-small);color:var(--ds-text-3);margin-top:var(--ds-4);}

/* ═══════════════════════════════════════════════════════════════════════════
   14  KAUFSEITE
   Zwei Spalten: links wird entschieden, rechts steht mitlaufend, was es
   kostet. Die Bestellübersicht bleibt beim Scrollen stehen — der Preis ist
   nie außer Sichtweite, und der Kaufknopf auch nicht.
   ═══════════════════════════════════════════════════════════════════════════ */
.co-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 372px;
  gap:var(--ds-11);align-items:start;
  max-width:1080px;margin:0 auto;text-align:left;}

/* ── Schritte ── */
.co-step{display:flex;align-items:center;gap:var(--ds-4);margin:var(--ds-9) 0 var(--ds-5);}
.co-step:first-child{margin-top:0;}
.co-step-n{
  display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;
  font:600 11px/1 var(--ds-font);
  color:var(--ds-brand-hover);background:var(--ds-brand-weak);
  border:1px solid var(--ds-brand-line);border-radius:50%;}
.co-step-t{font:600 15px/1.3 var(--ds-font);letter-spacing:-.012em;color:var(--ds-text);}
.co-step-t span{font:400 12px/1 var(--ds-font);color:var(--ds-text-3);margin-left:var(--ds-2);}

/* ── Pläne ── */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-5);}
.plan{
  position:relative;padding:var(--ds-7);cursor:pointer;
  background:var(--ds-surface-2);
  border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);
  transition:border-color var(--ds-fast) var(--ds-ease),background var(--ds-fast) var(--ds-ease);}
.plan:hover{border-color:var(--ds-border-strong);}
/* Der gewählte Plan ist auf einen Blick erkennbar: Rahmen, Fläche, Haken */
.plan.selected{
  border-color:var(--ds-brand);
  background:linear-gradient(180deg,var(--ds-brand-weak),transparent 60%),var(--ds-surface-2);}
.plan-check{
  position:absolute;top:var(--ds-6);right:var(--ds-6);
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--ds-border-strong);
  transition:border-color var(--ds-fast) var(--ds-ease),background var(--ds-fast) var(--ds-ease);}
.plan.selected .plan-check{
  border-color:var(--ds-brand);background:var(--ds-brand);
  box-shadow:inset 0 0 0 3px var(--ds-surface-2);}
.plan-badge{
  display:inline-block;margin-bottom:var(--ds-4);
  font:550 11px/1 var(--ds-font);letter-spacing:.01em;
  color:var(--ds-pos);background:var(--ds-pos-weak);
  border:1px solid var(--ds-pos-line);border-radius:var(--ds-r-sm);padding:5px var(--ds-3);}
.plan-name{font:var(--ds-overline);letter-spacing:var(--ds-ls-overline);
  text-transform:uppercase;color:var(--ds-text-3);margin-bottom:var(--ds-3);}
.plan-price{font:600 30px/1.1 var(--ds-font);letter-spacing:-.025em;color:var(--ds-text);
  font-variant-numeric:tabular-nums;}
.plan-price span{font:400 13px/1 var(--ds-font);color:var(--ds-text-3);margin-left:var(--ds-2);letter-spacing:0;}
.plan-period{font:var(--ds-caption);color:var(--ds-text-3);margin-top:var(--ds-3);line-height:1.55;}
.plan-for{font:400 12.5px/1.5 var(--ds-font);color:var(--ds-text-2);
  padding:var(--ds-4) 0;margin-top:var(--ds-4);
  border-top:1px solid var(--ds-border-subtle);}
.plan-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ds-3);}
.plan-features li{
  display:flex;align-items:center;gap:var(--ds-3);
  font:400 12.5px/1.4 var(--ds-font);color:var(--ds-text-2);}
.plan-features li::before{
  content:'';width:14px;height:14px;flex-shrink:0;border-radius:50%;
  background:var(--ds-pos-weak);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330c48d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:9px;background-repeat:no-repeat;background-position:center;}

/* ── Rabattcode ── */
.co-code{display:flex;gap:var(--ds-4);}
.co-code input{
  flex:1;min-width:0;height:40px;padding:0 var(--ds-5);
  font:var(--ds-body-sm);color:var(--ds-text);text-transform:uppercase;
  background:var(--ds-surface-3);border:1px solid var(--ds-border);
  border-radius:var(--ds-r-md);outline:none;
  transition:border-color var(--ds-fast) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease);}
.co-code input::placeholder{color:var(--ds-text-off);text-transform:none;}
.co-code input:focus{border-color:var(--ds-brand);box-shadow:var(--ds-ring);}
.co-code button{
  height:40px;padding:0 var(--ds-6);
  font:500 13px/1 var(--ds-font);color:var(--ds-text);
  background:var(--ds-surface-3);border:1px solid var(--ds-border);
  border-radius:var(--ds-r-md);cursor:pointer;
  transition:background var(--ds-fast) var(--ds-ease),border-color var(--ds-fast) var(--ds-ease);}
.co-code button:hover{background:var(--ds-surface-4);border-color:var(--ds-border-strong);}
.co-code-msg{font:var(--ds-caption);min-height:16px;margin-top:var(--ds-3);}

/* ── Zustimmung ── */
.agb-label{
  display:flex;align-items:flex-start;gap:var(--ds-4);
  padding:var(--ds-5);
  background:var(--ds-surface-2);border:1px solid var(--ds-border-subtle);
  border-radius:var(--ds-r-md);cursor:pointer;}
.agb-label input{margin-top:2px;width:16px;height:16px;accent-color:var(--ds-brand);flex-shrink:0;cursor:pointer;}
.agb-label span{font:400 12.5px/1.6 var(--ds-font);color:var(--ds-text-2);}
.agb-label a{color:var(--ds-brand-hover);text-decoration:none;}
.agb-label a:hover{text-decoration:underline;}

/* ── Ablauf nach der Zahlung ── */
.co-after{margin-top:var(--ds-8);padding:var(--ds-6);
  background:var(--ds-surface-2);border:1px solid var(--ds-border-subtle);border-radius:var(--ds-r-lg);}
.co-after-t{font:600 13px/1.4 var(--ds-font);letter-spacing:-.008em;color:var(--ds-text);margin-bottom:var(--ds-4);}
.co-after ol{margin:0;padding-left:var(--ds-7);display:flex;flex-direction:column;gap:var(--ds-3);}
.co-after li{font:400 12.5px/1.6 var(--ds-font);color:var(--ds-text-2);}

/* ── Bestellübersicht ── */
.co-right{position:sticky;top:var(--ds-8);}
.co-summary{
  padding:var(--ds-7);
  background:var(--ds-surface-2);
  border:1px solid var(--ds-border);border-radius:var(--ds-r-xl);}
.co-sum-head{font:600 15px/1.3 var(--ds-font);letter-spacing:-.012em;color:var(--ds-text);
  padding-bottom:var(--ds-5);margin-bottom:var(--ds-5);
  border-bottom:1px solid var(--ds-border-subtle);}
.co-sum-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ds-5);
  padding:var(--ds-3) 0;font:400 13px/1.5 var(--ds-font);color:var(--ds-text-3);}
.co-sum-row b{font-weight:500;color:var(--ds-text);text-align:right;font-variant-numeric:tabular-nums;}
.co-sum-rabatt b{color:var(--ds-pos);}
.co-sum-rabatt em{font-style:normal;font-size:11px;color:var(--ds-text-off);}
.co-sum-total{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-top:var(--ds-5);padding-top:var(--ds-5);
  border-top:1px solid var(--ds-border-subtle);
  font:500 13px/1.4 var(--ds-font);color:var(--ds-text-2);}
.co-sum-total b{font:600 24px/1.1 var(--ds-font);letter-spacing:-.022em;color:var(--ds-text);
  font-variant-numeric:tabular-nums;}
.co-sum-save{font:var(--ds-caption);color:var(--ds-pos);margin-top:var(--ds-3);}
.co-sum-tax{font:var(--ds-caption);color:var(--ds-text-3);margin-top:var(--ds-3);line-height:1.55;}
.co-sum-note{font:var(--ds-caption);color:var(--ds-text-3);margin:var(--ds-5) 0 var(--ds-4);}

.btn-pay{
  display:flex;align-items:center;justify-content:center;
  height:44px;width:100%;
  font:550 14px/1 var(--ds-font);letter-spacing:-.006em;
  color:#fff;background:var(--ds-brand);
  border:1px solid var(--ds-brand);border-radius:var(--ds-r-md);
  text-decoration:none;cursor:pointer;
  transition:background var(--ds-fast) var(--ds-ease);
  box-shadow:none;}
.btn-pay:hover{background:var(--ds-brand-hover);transform:none;box-shadow:none;}

#pay-hinweis,#pay-status{font:var(--ds-caption);color:var(--ds-text-3);
  line-height:1.55;margin-top:var(--ds-4);min-height:14px;}
#purchase-success{
  margin-top:var(--ds-5);padding:var(--ds-6);text-align:center;
  background:var(--ds-pos-weak);border:1px solid var(--ds-pos-line);border-radius:var(--ds-r-lg);}
.ps-t{font:600 14px/1.3 var(--ds-font);color:var(--ds-pos);margin-bottom:var(--ds-3);}
.ps-s{font:var(--ds-caption);color:var(--ds-text-2);margin-bottom:var(--ds-4);}
#purchase-code{
  font:600 20px/1.2 var(--ds-font);letter-spacing:.14em;color:var(--ds-brand-hover);
  background:var(--ds-surface-3);border:1px solid var(--ds-brand-line);
  border-radius:var(--ds-r-md);padding:var(--ds-5);cursor:pointer;}
.ps-a{display:inline-block;margin-top:var(--ds-4);font:500 12.5px/1 var(--ds-font);
  color:var(--ds-brand-hover);text-decoration:none;}

.co-trust{list-style:none;margin:var(--ds-6) 0 0;padding:var(--ds-5) 0 0;
  border-top:1px solid var(--ds-border-subtle);
  display:flex;flex-direction:column;gap:var(--ds-3);}
.co-trust li{display:flex;align-items:flex-start;gap:var(--ds-3);
  font:400 12px/1.5 var(--ds-font);color:var(--ds-text-3);}
.co-trust li::before{
  content:'';width:13px;height:13px;flex-shrink:0;margin-top:2px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d747f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;}
.legal-links{display:flex;flex-wrap:wrap;gap:var(--ds-4);
  margin-top:var(--ds-6);padding-top:var(--ds-5);
  border-top:1px solid var(--ds-border-subtle);}
.legal-links a{font:var(--ds-caption);color:var(--ds-text-3);text-decoration:none;}
.legal-links a:hover{color:var(--ds-text-2);}

#aff-banner{
  max-width:1080px;margin:0 auto var(--ds-7);padding:var(--ds-5) var(--ds-6);
  background:var(--ds-brand-weak);border:1px solid var(--ds-brand-line);
  border-radius:var(--ds-r-md);
  font:400 13px/1.5 var(--ds-font);color:var(--ds-text);text-align:left;}

@media (max-width:960px){
  .co-grid{grid-template-columns:1fr;gap:var(--ds-9);}
  /* Auf dem Telefon gehört der Preis nach unten ans Ende der Entscheidung */
  .co-right{position:static;order:2;}
  .plans{grid-template-columns:1fr;}
}

/* Zwei Auswahlmarken auf derselben Karte sind eine zu viel: die alte
   Textplakette „✓ AUSGEWÄHLT" entfällt, der Radiopunkt bleibt. Er zeigt auch
   den NICHT gewählten Plan als wählbar — das Textschild konnte das nicht. */
.plan.selected::after{display:none!important;}
.plan-badge{margin-right:34px;}

/* Die laufenden Nummern „MOD_01, MOD_02 …" entfallen — dieselbe Entscheidung
   wie seinerzeit bei SEC_1/SEC_2 auf der Startseite. Sie nummerieren etwas,
   das keine Reihenfolge hat, und lenken vom Namen des Moduls ab. */
.bc-tag::after,.checkout-page .mod-name::after{content:none!important;}

/* ═══════════════════════════════════════════════════════════════════════════
   15  RECHTSSEITEN, FAQ UND NEBENSEITEN
   AGB, Datenschutz, Impressum, Kündigung, Passwort-Reset und die beiden
   Zahlungsrückmeldungen liefen bisher mit eigenem Stil. Sie bekommen dieselbe
   Typografie und dieselben Flächen wie der Rest — Fließtext auf 15 px mit
   ruhiger Zeilenhöhe, weil dort tatsächlich gelesen wird.
   ═══════════════════════════════════════════════════════════════════════════ */
.legal,.legal-page,.doc,main.doc,article{max-width:none;}

/* Fließtext dieser Seiten */
body > .wrap p,.legal p,.doc p,article p,
.legal li,.doc li,article li{
  font:400 15px/1.75 var(--ds-font);
  letter-spacing:-.003em;
  color:var(--ds-text-2);}
body > .wrap h1,.legal h1,.doc h1,article h1{
  font:var(--ds-h1);letter-spacing:var(--ds-ls-h1);color:var(--ds-text);}
body > .wrap h2,.legal h2,.doc h2,article h2{
  font:var(--ds-h2);letter-spacing:var(--ds-ls-h2);color:var(--ds-text);
  margin-top:var(--ds-11);padding-bottom:var(--ds-4);
  border-bottom:1px solid var(--ds-border-subtle);}
body > .wrap h3,.legal h3,.doc h3,article h3{
  font:var(--ds-h3);letter-spacing:var(--ds-ls-h3);color:var(--ds-text);margin-top:var(--ds-8);}
body > .wrap a,.legal a,.doc a,article a{color:var(--ds-brand-hover);}
body > .wrap table,.legal table{width:100%;border-collapse:separate;border-spacing:0;
  font:var(--ds-body-sm);margin:var(--ds-6) 0;}
body > .wrap th,.legal th{
  font:550 11px/1.4 var(--ds-font);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ds-text-3);text-align:left;padding:var(--ds-4) var(--ds-5);
  border-bottom:1px solid var(--ds-border);}
body > .wrap td,.legal td{padding:var(--ds-4) var(--ds-5);
  border-bottom:1px solid var(--ds-border-subtle);color:var(--ds-text-2);}

/* Navigation dieser Seiten */
.nav-links a,.nav-back{
  font:500 13px/1 var(--ds-font)!important;
  letter-spacing:-.004em!important;text-transform:none!important;
  color:var(--ds-text-2)!important;}
.nav-links a:hover,.nav-back:hover{color:var(--ds-text)!important;}

/* FAQ */
.faq-item{
  border:1px solid var(--ds-border-subtle)!important;
  border-radius:var(--ds-r-lg)!important;
  background:var(--ds-surface-2)!important;
  margin-bottom:var(--ds-4)!important;
  transition:border-color var(--ds-fast) var(--ds-ease);}
.faq-item:hover,.faq-item.open{border-color:var(--ds-border)!important;}
.faq-q{font:550 14.5px/1.5 var(--ds-font)!important;letter-spacing:-.01em!important;
  color:var(--ds-text)!important;padding:var(--ds-5) var(--ds-6)!important;}
.faq-a{font:400 14px/1.7 var(--ds-font)!important;letter-spacing:-.003em!important;
  color:var(--ds-text-2)!important;}
.faq-page #q{
  height:44px;font:var(--ds-body)!important;
  background:var(--ds-surface-3)!important;
  border:1px solid var(--ds-border)!important;
  border-radius:var(--ds-r-md)!important;color:var(--ds-text)!important;}
.faq-page #q:focus{border-color:var(--ds-brand)!important;box-shadow:var(--ds-ring)!important;}
.faq-page .jump a{
  font:500 12.5px/1 var(--ds-font)!important;letter-spacing:-.004em!important;
  text-transform:none!important;
  background:var(--ds-surface-3)!important;border:1px solid var(--ds-border)!important;
  border-radius:var(--ds-r-md)!important;color:var(--ds-text-2)!important;
  padding:8px var(--ds-5)!important;}
.faq-page .jump a:hover{background:var(--ds-surface-4)!important;color:var(--ds-text)!important;}
.faq-page .count{font:var(--ds-small)!important;letter-spacing:0!important;color:var(--ds-text-3)!important;}

/* Hinweisfeld der englischen Rechtstext-Fassung */
#i18n-legal-note{
  background:var(--ds-warn-weak)!important;border:1px solid var(--ds-warn-line)!important;
  border-radius:var(--ds-r-md)!important;color:var(--ds-text-2)!important;
  font:400 13px/1.6 var(--ds-font)!important;}

/* Sprachumschalter im Systemstil */
.i18n-switch{
  background:var(--ds-surface-3)!important;
  border:1px solid var(--ds-border)!important;
  border-radius:var(--ds-r-md)!important;padding:2px!important;}
.i18n-switch .i18n-b{
  font:550 11.5px/1 var(--ds-font)!important;letter-spacing:.02em!important;
  color:var(--ds-text-3)!important;border-radius:var(--ds-r-sm)!important;
  padding:6px 10px!important;}
.i18n-switch .i18n-b:hover{color:var(--ds-text)!important;}
.i18n-switch .i18n-b.on{
  background:var(--ds-brand)!important;color:#fff!important;}

/* ── Anschrift im Impressum ───────────────────────────────────────────────
   Die ladungsfähige Anschrift ist nach § 5 DDG zwingend und muss leicht
   auffindbar bleiben — verstecken ist rechtlich nicht möglich. Sie steht
   deshalb weiterhin da, nur ohne hervorgehobene Fläche und ohne Fettdruck:
   auffindbar, aber nicht das Erste, was ins Auge fällt. */
.anschrift{
  font:400 14px/1.9 var(--ds-font)!important;
  color:var(--ds-text-3)!important;
  margin:var(--ds-4) 0 var(--ds-3)!important;}
.anschrift-hinweis{
  font:400 12.5px/1.6 var(--ds-font)!important;
  color:var(--ds-text-off)!important;}

/* ═══════════════════════════════════════════════════════════════════════════
   16  ATMOSPHÄRE DER KAUFSEITE AUF DER STARTSEITE
   Die Farbverläufe im Grund hatten beide Seiten schon. Der Unterschied lag im
   Aurora-Schleier: auf der Kaufseite steht er fest im Blickfeld und bleibt
   beim Scrollen erhalten, auf der Startseite lag er nur im Hero — sobald man
   nach unten kam, wurde der Hintergrund flach.

   Bewusst über body::before statt über zusätzliches Markup: die vorhandene
   Hero-Aurora mit ihrer eigenen Bewegung wird dadurch nicht angefasst. Die
   Klasse .landing-page grenzt die Regel sauber ab — ein :has(.hero) hätte
   auch die App und die Kaufseite getroffen, dort liegt der Schleier schon.
   ═══════════════════════════════════════════════════════════════════════════ */
body.landing-page::before{
  content:'';
  position:fixed;inset:-20% -10% 30%;
  z-index:0;pointer-events:none;
  filter:blur(72px);opacity:.42;
  background:
    radial-gradient(38vw 38vw at 12% 8%,rgba(61,125,255,.4),transparent 60%),
    radial-gradient(32vw 32vw at 88% 4%,rgba(92,155,255,.28),transparent 60%);
  animation:dsAurora 26s ease-in-out infinite;
}
@keyframes dsAurora{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%    {transform:translate3d(4vw,3vw,0) scale(1.1);}
}
/* Die Hero-Aurora liegt dann doppelt — sie wird zurückgenommen, damit der
   obere Bildschirm nicht heller strahlt als der Rest der Seite. */
body.landing-page .hero-aurora{opacity:.3!important;}

/* Auf schmalen Geräten und bei reduzierter Bewegung bleibt der Schleier aus:
   ein 72-px-Weichzeichner über die volle Fläche kostet dort spürbar Leistung. */
@media (max-width:820px){ body.landing-page::before{display:none;} }
@media (prefers-reduced-motion:reduce){ body.landing-page::before{animation:none;} }

/* ── Achsenbeschriftung des Edge-Score-Netzdiagramms ──────────────────────
   Bewusst hier und nicht inline: Abschnitt 9 zieht Inline-Schriftgrößen auf
   das Raster hoch. In einem SVG sind das aber viewBox-Einheiten, keine
   Bildschirmpixel — die Beschriftung wurde dadurch breiter als gedacht und
   lief aus dem Diagramm heraus. */
.es-lbl{
  font-size:11px;font-weight:500;letter-spacing:0;
  fill:var(--ds-text-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   17  FARB-THEMES
   Die Blöcke [data-theme="…"] in app.html haben nach der Einführung des
   Design-Systems nichts mehr bewirkt: sie stehen weiter oben in derselben
   Datei und haben dieselbe Spezifität wie das :root des Systems — bei
   Gleichstand gewinnt die spätere Regel, also immer das System. Übrig blieben
   nur Hintergrund und Logo, weil die über eigene Selektoren laufen.

   Die Themes werden deshalb hier neu gesetzt, am Ende der Kette. Jedes Theme
   verschiebt die komplette Palette: Akzent, Flächen, Linien und Textfarben.
   Über --accent zieht es außerdem alle rgba(var(--accent),…)-Angaben mit, die
   in app.html hunderte Male inline stehen.

   Unverändert bleiben --ds-pos und --ds-neg: Grün heißt Gewinn, Rot heißt
   Verlust. Diese beiden tragen Bedeutung und dürfen nicht zur Dekoration
   werden — auch nicht im roten oder grünen Theme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Gold ──────────────────────────────────────────────────────────────── */
:root[data-theme="gold"]{
  --ds-brand:#e0a83a; --ds-brand-hover:#f4c04e; --ds-brand-press:#c8912c;
  --ds-brand-weak:rgba(224,168,58,.13); --ds-brand-line:rgba(224,168,58,.34);
  --accent:224,168,58;
  --gold-glow:rgba(224,168,58,.6);
  --ds-surface-0:#0a0806; --ds-surface-1:#100d09; --ds-surface-2:#16120c;
  --ds-surface-3:#1c1710; --ds-surface-4:#231d15;
  --ds-text:#f2ece1; --ds-text-2:#a99e8c; --ds-text-3:#7a7263; --ds-text-off:#544e44;
  --ds-border-subtle:rgba(255,232,190,.06);
  --ds-border:rgba(255,232,190,.10);
  --ds-border-strong:rgba(255,232,190,.17);
}

/* ── S&P Rot ───────────────────────────────────────────────────────────── */
:root[data-theme="sp"]{
  --ds-brand:#e5484d; --ds-brand-hover:#ff6b6b; --ds-brand-press:#c93a3f;
  --ds-brand-weak:rgba(229,72,77,.13); --ds-brand-line:rgba(229,72,77,.34);
  --accent:229,72,77;
  --gold-glow:rgba(229,72,77,.6);
  --ds-surface-0:#0a0708; --ds-surface-1:#100c0d; --ds-surface-2:#161011;
  --ds-surface-3:#1c1516; --ds-surface-4:#231a1b;
  --ds-text:#f2e9ea; --ds-text-2:#a99598; --ds-text-3:#7a6b6d; --ds-text-off:#54494b;
  --ds-border-subtle:rgba(255,214,216,.06);
  --ds-border:rgba(255,214,216,.10);
  --ds-border-strong:rgba(255,214,216,.17);
  /* Der Akzent liegt hier nah am Verlust-Rot. Damit ein Minus trotzdem
     eindeutig bleibt, wird es eine Spur dunkler und satter gesetzt. */
  --ds-neg:#ff3b3b; --ds-neg-weak:rgba(255,59,59,.14); --ds-neg-line:rgba(255,59,59,.36);
}

/* ── Oil / Silber ──────────────────────────────────────────────────────── */
:root[data-theme="oil"]{
  --ds-brand:#c8ccd4; --ds-brand-hover:#eef1f6; --ds-brand-press:#aab0ba;
  --ds-brand-weak:rgba(200,204,212,.12); --ds-brand-line:rgba(200,204,212,.3);
  --accent:200,204,212;
  --gold-glow:rgba(200,210,225,.5);
  --ds-surface-0:#08090a; --ds-surface-1:#0d0f11; --ds-surface-2:#131517;
  --ds-surface-3:#191c1f; --ds-surface-4:#1f2327;
  --ds-text:#eceef1; --ds-text-2:#a0a5ac; --ds-text-3:#73787f; --ds-text-off:#4e5259;
  --ds-border-subtle:rgba(255,255,255,.06);
  --ds-border:rgba(255,255,255,.11);
  --ds-border-strong:rgba(255,255,255,.18);
}

/* ── Dollar / Grün ─────────────────────────────────────────────────────── */
:root[data-theme="dollar"]{
  --ds-brand:#00d66a; --ds-brand-hover:#4ff5a3; --ds-brand-press:#00b859;
  --ds-brand-weak:rgba(0,214,106,.12); --ds-brand-line:rgba(0,214,106,.32);
  --accent:0,214,106;
  --gold-glow:rgba(0,214,106,.6);
  --ds-surface-0:#050805; --ds-surface-1:#0a0e0a; --ds-surface-2:#101510;
  --ds-surface-3:#151b15; --ds-surface-4:#1b231b;
  --ds-text:#e8f0e9; --ds-text-2:#95a597; --ds-text-3:#6b7a6d; --ds-text-off:#495449;
  --ds-border-subtle:rgba(214,255,228,.06);
  --ds-border:rgba(214,255,228,.10);
  --ds-border-strong:rgba(214,255,228,.17);
  /* Akzent und Gewinn wären hier beide grün. Der Gewinn bekommt deshalb einen
     kühleren, helleren Ton, damit die beiden auseinanderzuhalten sind. */
  --ds-pos:#7dffb0; --ds-pos-weak:rgba(125,255,176,.13); --ds-pos-line:rgba(125,255,176,.32);
}

/* Der Logo-Schein folgt dem Akzent statt einer festen Farbe */
:root[data-theme] .logo img,
:root[data-theme] .login-logo img{
  filter:drop-shadow(0 0 10px rgba(var(--accent),.75)) drop-shadow(0 0 26px rgba(var(--accent),.4))!important;
}

/* Der Seitengrund war in app.html mit !important auf #050505 festgenagelt und
   folgte deshalb keinem Theme. Er läuft jetzt über den Flächen-Token, die
   Lichtschleier im Grund über den Akzent. */
body{
  background-color:var(--ds-surface-0)!important;
  background-image:
    radial-gradient(ellipse at 20% 0%,rgba(var(--accent),.08) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 100%,rgba(var(--accent),.05) 0%,transparent 50%)!important;
}

/* ── 17.1 Das Logo folgt dem Theme ────────────────────────────────────────
   Das Logo ist eine PNG-Datei, also nicht über Farbvariablen ansprechbar.
   Sein Grundton liegt bei 212° (Blau, gemessen über alle farbigen Pixel).
   Die Drehung je Theme ist die Differenz zum Zielton:

     Gold   #e0a83a →  40°  →  194°
     S&P    #e5484d → 358°  →  137°

   Die Werte sind am gerenderten Bild nachgemessen, nicht nur gerechnet:
   hue-rotate ist eine Matrixnäherung. Die reine Differenz (188° bzw. 146°)
   landete bei 34° und 7° statt bei 40° und 358°.
     Oil    #c8ccd4 →   —   →  entsättigen statt drehen
     Dollar #00d66a → 150°  →  298°

   Betroffen sind alle Auftritte: Kopfleiste, Anmeldung, die großflächigen
   Logos im Hintergrund und die Fußzeile. Der Schein ringsum läuft ohnehin
   schon über --accent. Die Regeln stehen bewusst mit !important, weil die
   alten Theme-Regeln in app.html ebenfalls !important tragen. */
:root[data-theme="gold"] .logo img,
:root[data-theme="gold"] .login-logo img,
:root[data-theme="gold"] footer img,
:root[data-theme="gold"] .nav-brand img{
  filter:hue-rotate(194deg) saturate(1.15) brightness(1.04)
    drop-shadow(0 0 10px rgba(var(--accent),.8)) drop-shadow(0 0 28px rgba(var(--accent),.45))!important;
}
:root[data-theme="gold"] .login-bg-logo,
:root[data-theme="gold"] .hero-logo-bg img,
:root[data-theme="gold"] .bg-logo{
  filter:hue-rotate(194deg) saturate(1.1) blur(1px)!important;
}

:root[data-theme="sp"] .logo img,
:root[data-theme="sp"] .login-logo img,
:root[data-theme="sp"] footer img,
:root[data-theme="sp"] .nav-brand img{
  filter:hue-rotate(137deg) saturate(1.3) brightness(1.02)
    drop-shadow(0 0 10px rgba(var(--accent),.8)) drop-shadow(0 0 28px rgba(var(--accent),.45))!important;
}
:root[data-theme="sp"] .login-bg-logo,
:root[data-theme="sp"] .hero-logo-bg img,
:root[data-theme="sp"] .bg-logo{
  filter:hue-rotate(137deg) saturate(1.2) blur(1px)!important;
}

/* Silber lässt sich nicht drehen — Silber hat keinen Farbton. Also entsättigen. */
:root[data-theme="oil"] .logo img,
:root[data-theme="oil"] .login-logo img,
:root[data-theme="oil"] footer img,
:root[data-theme="oil"] .nav-brand img{
  filter:grayscale(.9) brightness(1.25) contrast(1.05)
    drop-shadow(0 0 10px rgba(var(--accent),.55)) drop-shadow(0 0 28px rgba(var(--accent),.3))!important;
}
:root[data-theme="oil"] .login-bg-logo,
:root[data-theme="oil"] .hero-logo-bg img,
:root[data-theme="oil"] .bg-logo{
  filter:grayscale(.9) brightness(1.15) blur(1px)!important;
}

:root[data-theme="dollar"] .logo img,
:root[data-theme="dollar"] .login-logo img,
:root[data-theme="dollar"] footer img,
:root[data-theme="dollar"] .nav-brand img{
  filter:hue-rotate(298deg) saturate(1.35) brightness(1.02)
    drop-shadow(0 0 10px rgba(var(--accent),.85)) drop-shadow(0 0 28px rgba(var(--accent),.5))!important;
}
:root[data-theme="dollar"] .login-bg-logo,
:root[data-theme="dollar"] .hero-logo-bg img,
:root[data-theme="dollar"] .bg-logo{
  filter:hue-rotate(298deg) saturate(1.25) blur(1px)!important;
}

/* Der Schriftzug neben dem Logo trug im alten Aufbau feste Farben je Theme
   (#3a5a8a, #5a1a1a, #5f6b3f). Er folgt jetzt dem Akzent. */
:root[data-theme] .logo span{color:var(--ds-text-3)!important;}

/* ── KI Coach: Kontofilter ─────────────────────────────────────────────── */
.coach-acc-filter{
  padding:var(--ds-5) var(--ds-5) 0;
  display:flex;flex-direction:column;gap:var(--ds-3);}
.coach-acc-filter .coach-key-label{
  font:var(--ds-overline)!important;letter-spacing:var(--ds-ls-overline)!important;
  text-transform:uppercase;color:var(--ds-text-3)!important;}
#coach-acc-select{
  width:100%;height:34px;padding:0 var(--ds-4)!important;
  font:500 12.5px/1 var(--ds-font)!important;
  background:var(--ds-surface-3)!important;
  border:1px solid var(--ds-brand-line)!important;
  border-radius:var(--ds-r-md)!important;
  color:var(--ds-text)!important;}
#coach-acc-select:focus{border-color:var(--ds-brand)!important;box-shadow:var(--ds-ring)!important;}

/* ═══════════════════════════════════════════════════════════════════════════
   18  TROPHÄEN — Zertifikate und Auszeichnungen
   Die Datei ist der Inhalt, alles andere tritt zurück: großes Vorschaubild,
   darunter die Angaben als schlichte Felder statt als Formular.
   ═══════════════════════════════════════════════════════════════════════════ */
.zert-upload{
  display:flex;align-items:center;gap:var(--ds-5);flex-wrap:wrap;
  padding:var(--ds-6);margin-bottom:var(--ds-7);
  background:var(--ds-surface-2);
  border:1px dashed var(--ds-border);
  border-radius:var(--ds-r-lg);}
.zert-hinweis{font:var(--ds-caption);color:var(--ds-text-3);}
.zert-msg{font:var(--ds-caption);margin-left:auto;min-height:14px;}

/* Kategorien als Filterzeile */
.zert-bar{display:flex;flex-wrap:wrap;gap:var(--ds-3);margin-bottom:var(--ds-7);}
.zert-chip{
  display:inline-flex;align-items:center;gap:var(--ds-3);
  height:32px;padding:0 var(--ds-5);
  font:500 12.5px/1 var(--ds-font);letter-spacing:-.004em;
  background:var(--ds-surface-2);
  border:1px solid var(--ds-border-subtle);border-radius:var(--ds-r-pill);
  color:var(--ds-text-2);cursor:pointer;
  transition:background var(--ds-fast) var(--ds-ease),
             border-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease);}
.zert-chip:hover{background:var(--ds-surface-3);color:var(--ds-text);}
.zert-chip.on{background:var(--ds-brand-weak);border-color:var(--ds-brand-line);color:var(--ds-brand-hover);}
.zert-chip b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ds-text-3);}
.zert-chip.on b{color:var(--ds-brand-hover);}

/* Sammlung */
.zert-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:var(--ds-6);}
.zert-karte{
  display:flex;flex-direction:column;
  background:var(--ds-surface-2);
  border:1px solid var(--ds-border-subtle);
  border-radius:var(--ds-r-lg);overflow:hidden;
  transition:border-color var(--ds-fast) var(--ds-ease);}
.zert-karte:hover{border-color:var(--ds-border);}

.zert-vorschau{
  display:block;width:100%;padding:0;border:none;background:none;cursor:zoom-in;}
.zert-vorschau-bild{
  position:relative;aspect-ratio:4/3;width:100%;
  display:grid;place-items:center;overflow:hidden;
  background:var(--ds-surface-3);
  border-bottom:1px solid var(--ds-border-subtle);}
.zert-vorschau-bild img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--ds-slow) var(--ds-ease);}
.zert-vorschau:hover .zert-vorschau-bild img{transform:scale(1.03);}
.zert-pdf{
  font:600 13px/1 var(--ds-font);letter-spacing:.08em;
  color:var(--ds-text-3);
  border:1px solid var(--ds-border);border-radius:var(--ds-r-sm);
  padding:var(--ds-4) var(--ds-5);}
.zert-laedt{font:var(--ds-caption);color:var(--ds-text-off);}

.zert-body{display:flex;flex-direction:column;gap:var(--ds-3);padding:var(--ds-5);}
.zert-kat{font:var(--ds-overline);letter-spacing:var(--ds-ls-overline);
  text-transform:uppercase;color:var(--ds-text-3);}
/* Die Felder sehen aus wie Text und werden erst beim Anfassen zum Eingabefeld —
   die Sammlung soll sich wie eine Vitrine lesen, nicht wie eine Maske. */
.zert-titel,.zert-meta,.zert-notiz{
  width:100%;background:transparent;border:1px solid transparent;
  border-radius:var(--ds-r-sm);padding:var(--ds-2) var(--ds-3);
  color:var(--ds-text);font-family:var(--ds-font);
  transition:background var(--ds-fast) var(--ds-ease),border-color var(--ds-fast) var(--ds-ease);}
.zert-titel{font:600 15px/1.35 var(--ds-font);letter-spacing:-.014em;}
.zert-meta{font:400 12.5px/1.4 var(--ds-font);color:var(--ds-text-2);}
.zert-notiz{font:400 12.5px/1.55 var(--ds-font);color:var(--ds-text-2);resize:vertical;}
.zert-titel:hover,.zert-meta:hover,.zert-notiz:hover{background:var(--ds-surface-3);}
.zert-titel:focus,.zert-meta:focus,.zert-notiz:focus{
  background:var(--ds-surface-3);border-color:var(--ds-brand);
  box-shadow:var(--ds-ring);outline:none;}
.zert-reihe{display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-3);}

.zert-fuss{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ds-4);
  margin-top:var(--ds-2);padding-top:var(--ds-4);
  border-top:1px solid var(--ds-border-subtle);
  font:var(--ds-caption);color:var(--ds-text-off);}
.zert-fuss span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.zert-del{
  flex-shrink:0;font:500 11.5px/1 var(--ds-font);
  background:none;border:none;color:var(--ds-text-3);cursor:pointer;
  padding:var(--ds-2) var(--ds-3);border-radius:var(--ds-r-sm);
  transition:background var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease);}
.zert-del:hover{background:var(--ds-neg-weak);color:var(--ds-neg);}

@media (max-width:640px){
  .zert-grid{grid-template-columns:1fr;}
  .zert-msg{margin-left:0;}
}


/* ═══════════════════════════════════════════════════════════════════════════
   COT — schmale Geräte
   Die Übersicht hat fünf Spalten. Unter 620 px reicht die Breite nicht; die
   Einordnung wandert deshalb unter den Marktnamen, statt über den Kartenrand
   hinauszulaufen.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:620px){
  .cot-kontext-spalte{display:none;}
  .cot-kontext-mobil{display:block!important;}
}