/* ============================================================
   PropTrack — Design System
   Calm, refined fintech. Purple accent. Dark + Light.
   ============================================================ */

@import url('../fonts/fonts.css');   /* selbst gehostet — keine IP an Google */

/* ---------- Tokens: shared ---------- */
:root {
  --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Kurzformen für die Textfarben. An mehreren Stellen im Code stand
     var(--faint) / var(--muted) / var(--accent2) — diese Namen gab es nie,
     wodurch Kleintext in voller Textfarbe erschien und die Typo-Hierarchie
     verloren ging. Als Alias definiert, damit beide Schreibweisen tragen.
     Die Auflösung erfolgt am Element, greift also je Theme den richtigen Wert. */
  --faint: var(--text-faint);
  --muted: var(--text-muted);
  --accent2: var(--accent);

  --r-card: 14px;
  --r-ctl: 9px;
  --r-pill: 999px;

  --sidebar-w: 240px;
  --sidebar-w-collapsed: 68px;
  --header-h: 62px;

  --ease: cubic-bezier(.4, 0, .2, 1);

  /* accent (purple) — stable across themes, tuned per theme below */
  --accent: #7c5cfc;
  --accent-weak: rgba(124, 92, 252, 0.13);
  --accent-strong: #6b48f0;

  /* semantic (muted, refined) */
  --pos: #15a06a;
  --pos-weak: rgba(21, 160, 106, 0.13);
  --neg: #df4a52;
  --neg-weak: rgba(223, 74, 82, 0.13);
  --warn: #d2960f;
  --warn-weak: rgba(210, 150, 15, 0.15);
  --info: #2f7fe0;
  --info-weak: rgba(47, 127, 224, 0.14);
  --violet: #8b5cf6;
  --violet-weak: rgba(139, 92, 246, 0.15);
}

/* ---------- Dark theme (default) ---------- */
/* Ohne color-scheme rendert der Browser native Bedienelemente in Systemfarben:
   schwarzer Button-Text auf dunkler Karte, helle Scrollbars, ein weisser
   Datumswaehler im Dunkelmodus. */
[data-theme="dark"]  { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

[data-theme="dark"] {
  --bg: #0c0d11;
  --bg-grad: radial-gradient(1200px 600px at 80% -10%, rgba(124,92,252,0.07), transparent 60%);
  --surface: #14151b;
  --surface-2: #181a21;
  --surface-3: #1f222b;
  --card: #15171e;
  --card-hover: #191c24;
  --sidebar: #0e0f14;
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.12);
  --text: #eceef3;
  --text-muted: #9b9fae;
  --text-faint: #696d7c;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.28);
  --shadow-lg: 0 16px 50px rgba(0,0,0,0.55);
  --field: #0f1116;
  --field-border: rgba(255,255,255,0.10);
  --accent: #8b73ff;
  --accent-weak: rgba(139,115,255,0.15);
  --pos: #2dd48f; --pos-weak: rgba(45,212,143,0.13);
  --neg: #f06a72; --neg-weak: rgba(240,106,114,0.13);
  --warn: #f0bb3a; --warn-weak: rgba(240,187,58,0.14);
  --info: #5b9af5; --info-weak: rgba(91,154,245,0.14);
  --violet: #a98bff; --violet-weak: rgba(169,139,255,0.16);
  --grid-line: rgba(255,255,255,0.055);
}

/* ---------- Light theme ---------- */
[data-theme="light"] {
  --bg: #f4f5f8;
  --bg-grad: radial-gradient(1200px 600px at 85% -10%, rgba(124,92,252,0.06), transparent 60%);
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --surface-3: #f1f2f6;
  --card: #ffffff;
  --card-hover: #fbfafe;
  --sidebar: #ffffff;
  --border: rgba(17,20,32,0.09);
  --border-strong: rgba(17,20,32,0.16);
  --text: #14161f;
  --text-muted: #5d6273;
  --text-faint: #9296a6;
  --shadow: 0 1px 2px rgba(20,22,40,0.05), 0 6px 20px rgba(20,22,40,0.06);
  --shadow-lg: 0 20px 55px rgba(30,30,60,0.16);
  --field: #ffffff;
  --field-border: rgba(17,20,32,0.14);
  --accent: #6c4cf0;
  --accent-weak: rgba(108,76,240,0.10);
  --pos: #12925f; --pos-weak: rgba(18,146,95,0.11);
  --neg: #d23a44; --neg-weak: rgba(210,58,68,0.10);
  --warn: #b9810a; --warn-weak: rgba(185,129,10,0.13);
  --info: #2f73d6; --info-weak: rgba(47,115,214,0.11);
  --violet: #7c4dd6; --violet-weak: rgba(124,77,214,0.12);
  --grid-line: rgba(17,20,32,0.07);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv01','cv03','ss01';
  transition: background .35s var(--ease), color .35s var(--ease);
}

#root { height: 100%; }

.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

::selection { background: var(--accent-weak); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   App shell
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100%;
  background: var(--bg);
  background-image: var(--bg-grad);
  transition: grid-template-columns .26s var(--ease);
}
.app.collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.sb-brand {
  height: var(--header-h);
  display: flex; align-items: center; gap: 11px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sb-logo {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(145deg, var(--accent), var(--accent-strong));
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px var(--accent-weak);
}
.sb-name { font-weight: 800; font-size: 16.5px; letter-spacing: -0.02em; white-space: nowrap; }
.sb-name b { color: var(--accent); }
.collapsed .sb-name, .collapsed .sb-label, .collapsed .sb-section { opacity: 0; pointer-events: none; }

.sb-nav { flex: 1; overflow-y: auto; padding: 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.sb-section { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-faint); font-weight: 700; padding: 14px 12px 6px; white-space: nowrap; }
.sb-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--r-ctl);
  color: var(--text-muted); cursor: pointer;
  font-weight: 600; font-size: 13.5px;
  white-space: nowrap; position: relative;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.sb-item:hover { background: var(--surface-3); color: var(--text); }
.sb-item.active { background: var(--accent-weak); color: var(--accent); }
.sb-item.active .sb-ic { color: var(--accent); }
/* Schiene am linken Rand: markiert den aktiven Punkt auch im eingeklappten
   Zustand, wo die Farbflaeche allein kaum auffaellt. */
.sb-item.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.collapsed .sb-item.active::before { left: 0; }
/* Zahl am Menuepunkt */
.sb-n {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: 800;
  line-height: 1; padding: 3px 6px; border-radius: 6px;
  background: var(--surface-3); color: var(--text-faint);
}
.sb-item.active .sb-n { background: var(--accent); color: #fff; }
.sb-n.warn { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.collapsed .sb-n { display: none; }
.sb-ic { width: 19px; height: 19px; flex-shrink: 0; display: grid; place-items: center; color: var(--text-faint); }
.sb-item.active .sb-ic, .sb-item:hover .sb-ic { color: inherit; }
.sb-label { white-space: nowrap; }
.sb-divider { height: 1px; background: var(--border); margin: 12px 8px; }
.sb-foot { padding: 10px 12px 16px; border-top: 1px solid var(--border); }

/* tooltip on collapsed */
.collapsed .sb-item { justify-content: center; padding: 10px 0; }
.collapsed .sb-item::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: var(--surface-3); color: var(--text); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: 7px; font-size: 12px; font-weight: 600;
  white-space: nowrap; opacity: 0; pointer-events: none; z-index: 50;
  box-shadow: var(--shadow); transition: opacity .12s;
}
.collapsed .sb-item:hover::after { opacity: 1; }

/* ---------- Main ---------- */
.main { min-width: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.topbar {
  height: var(--header-h); flex-shrink: 0;
  /* Eigener Stapelkontext über dem Seiteninhalt. Ohne das legten sich die
     klebenden Filterleisten der Seiten (position:sticky mit z-index) über die
     aufgeklappten Menüs der Kopfleiste — sie stehen im Dokument später und
     gewinnen bei z-index:auto. */
  position: relative; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 0 26px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
}
.tb-toggle {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer;
  color: var(--text-muted); border: 1px solid transparent;
}
.tb-toggle:hover { background: var(--surface-3); color: var(--text); }
.tb-title { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }

/* ---------- Pfad statt zweiter Überschrift ----------
   Bewusst 13px und ruhig: die H1 der Seite bleibt die lauteste Stimme,
   die Leiste sagt nur, wo man steht. */
/* Nicht schrumpfen: der Pfad ist kurz und die Ortsangabe der Seite — wenn die
   Leiste eng wird, gibt das Suchfeld nach, nicht die Überschrift. */
.tb-crumb { display: flex; align-items: center; gap: 7px; flex-shrink: 0; font-size: 13px; }
.tb-crumb i { font-style: normal; color: var(--text-faint); font-size: 12px; }
.tb-crumb b { font-weight: 700; color: var(--text); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-crumb-s { color: var(--text-faint); font-weight: 600; white-space: nowrap; }
.tb-crumb button { background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.tb-crumb button:hover { color: var(--accent); }
@media (max-width: 640px) { .tb-crumb-s, .tb-crumb i:first-of-type { display: none; } }

/* ---------- Menüs in der Kopfleiste ---------- */
.tb-pop { position: relative; flex-shrink: 0; }
.tb-menu {
  position: absolute; top: calc(100% + 9px); z-index: 120;
  background: var(--card); border: 1px solid var(--border-strong, var(--border));
  border-radius: 13px; padding: 6px; box-shadow: 0 18px 48px rgba(0,0,0,.34);
  animation: tbDrop .13s var(--ease, ease) both;
}
@keyframes tbDrop { from { opacity: 0; transform: translateY(-5px); } }
.tb-menu-h { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint); padding: 7px 11px 5px; }
.tb-menu-i {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text);
  padding: 8.5px 11px; border-radius: 9px; transition: background .12s, color .12s;
}
.tb-menu-i svg { color: var(--text-faint); flex-shrink: 0; transition: color .12s; }
.tb-menu-i:hover { background: var(--surface-3); }
.tb-menu-i:hover svg { color: var(--accent); }
.tb-menu-i.danger:hover { background: var(--neg-weak); color: var(--neg); }
.tb-menu-i.danger:hover svg { color: var(--neg); }
.tb-menu-sep { height: 1px; background: var(--border); margin: 5px 7px; }
.tb-menu-row { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 7px 11px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.tb-menu-row .seg button { padding: 4px 9px; font-size: 11.5px; display: grid; place-items: center; }

/* Konto-Kachel im Menükopf */
.tb-me-card { display: flex; align-items: center; gap: 11px; padding: 10px 11px 12px; }
.tb-me-card b { display: block; font-size: 13.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-me-card span span { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Neu-Knopf: die einzige Handlung, die auf jeder Seite Sinn ergibt */
.tb-new {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: #fff;
  background: var(--accent); border: 1px solid var(--accent);
  padding: 8px 12px 8px 11px; border-radius: 10px; cursor: pointer;
  box-shadow: 0 4px 14px var(--accent-weak); transition: background .15s, transform .15s;
}
.tb-new:hover { background: var(--accent-strong); }
.tb-new.on { background: var(--accent-strong); }
.tb-new .tb-caret { opacity: .75; transition: transform .15s; }
.tb-new.on .tb-caret { transform: rotate(180deg); }
@media (max-width: 760px) { .tb-new span { display: none; } .tb-new { padding: 8px 9px; } }

.tb-av { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12.5px;
  background: linear-gradient(140deg, var(--accent), var(--accent2, var(--accent))); }
.tb-av.lg { width: 40px; height: 40px; border-radius: 11px; font-size: 15px; }
.tb-me { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  background: none; border: 1px solid transparent; border-radius: 12px;
  padding: 3px 5px 3px 3px; cursor: pointer; color: var(--text-faint); transition: all .15s; }
.tb-me:hover, .tb-me.on { background: var(--surface-3); border-color: var(--border); color: var(--text); }
.tb-me .tb-caret { transition: transform .15s; }
.tb-me.on .tb-caret { transform: rotate(180deg); }
/* Sucheinstieg: sieht aus wie ein Feld, oeffnet aber die Befehlspalette —
   ein echtes Eingabefeld hier waere ein zweiter Ort fuer dieselbe Sache. */
.tb-search {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  margin-left: 18px; min-width: 210px; max-width: 340px; flex: 0 1 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 11px; font: inherit; font-size: 13px; color: var(--text-faint);
  transition: border-color .15s ease, color .15s ease;
}
.tb-search:hover { border-color: var(--accent); color: var(--text-muted); }
.tb-search > span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-search kbd, .cp kbd {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 5px; background: var(--surface-3);
  border: 1px solid var(--border); color: var(--text-faint); white-space: nowrap;
}
@media (max-width: 900px) { .tb-search { display: none; } }
.tb-sub { color: var(--text-faint); font-size: 12.5px; margin-top: 1px; }
.tb-spacer { flex: 1; }

.content { flex: 1; overflow-y: auto; padding: 26px; }
.content-inner { max-width: 1320px; margin: 0 auto; }

/* page header */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-title { font-size: 23px; font-weight: 800; letter-spacing: -0.025em; margin: 0; }
.page-subtitle { color: var(--text-muted); font-size: 13.5px; margin-top: 3px; }
.page-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ============================================================
   Primitives
   ============================================================ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.card-desc { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 0; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 13.5px;
  padding: 9px 15px; border-radius: var(--r-ctl); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-3); color: var(--text);
  transition: all .15s var(--ease); white-space: nowrap; line-height: 1;
}
.btn:hover { background: var(--card-hover); border-color: var(--border-strong); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 14px var(--accent-weak); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }
.btn-sm { padding: 6.5px 11px; font-size: 12.5px; }
.btn-icon { padding: 0; width: 34px; height: 34px; }
.btn-danger { color: var(--neg); }
.btn-danger:hover { background: var(--neg-weak); border-color: var(--neg); }

/* segmented control / toggles */
.seg { display: inline-flex; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 3px; gap: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
  font-family: var(--font-ui); font-weight: 600; font-size: 12.5px;
  padding: 5px 11px; border-radius: 6px; transition: all .15s var(--ease);
}
.seg button.on { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.seg button:hover:not(.on) { color: var(--text); }

/* badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 3.5px 9px; border-radius: var(--r-pill); white-space: nowrap;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-pos { background: var(--pos-weak); color: var(--pos); }
.b-neg { background: var(--neg-weak); color: var(--neg); }
.b-warn { background: var(--warn-weak); color: var(--warn); }
.b-info { background: var(--info-weak); color: var(--info); }
.b-violet { background: var(--violet-weak); color: var(--violet); }
.b-neutral { background: var(--surface-3); color: var(--text-muted); }
.b-accent { background: var(--accent-weak); color: var(--accent); }

/* pos/neg text */
.t-pos { color: var(--pos); }
.t-neg { color: var(--neg); }
.t-muted { color: var(--text-muted); }
.t-faint { color: var(--text-faint); }

/* KPI card */
/* Alle KPI-Karten exakt gleich hoch — Label/Wert/Fuß auf einer Linie, egal wie lang der Text ist */
.kpi { padding: 18px 18px 17px; display: flex; flex-direction: column; height: 100%; }
.grid > div:has(> .kpi) { display: flex; flex-direction: column; }
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 13px; min-height: 38px; }
.kpi-label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; line-height: 1.35; }
.kpi-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  animation: kpiIcFloat 4.5s ease-in-out infinite; }
.kpi-ic svg { width: 19px; height: 19px; transition: transform .25s; stroke-width: 2.1; }
/* Karte-Hover hebt & dreht das Icon leicht */
.kpi:hover .kpi-ic { transform: translateY(-2px) scale(1.12) rotate(-4deg); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.kpi:hover .kpi-ic svg { transform: scale(1.08); }
/* Versetzte Float-Animation pro Karte, damit nicht alle synchron wippen */
.grid > .kpi:nth-child(2) .kpi-ic { animation-delay: .6s; }
.grid > .kpi:nth-child(3) .kpi-ic { animation-delay: 1.2s; }
.grid > .kpi:nth-child(4) .kpi-ic { animation-delay: 1.8s; }
.grid > .kpi:nth-child(5) .kpi-ic { animation-delay: 2.4s; }
.grid > .kpi:nth-child(6) .kpi-ic { animation-delay: 3.0s; }
@keyframes kpiIcFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ── Prop-Firm-Logo: animierter, leuchtender Rahmen ── */
/* Firmenlogo — ruhig im Normalzustand, Bewegung erst bei Berührung.
   Die frühere Dauerrotation war bei vielen Logos gleichzeitig unruhig. */
.firm-logo {
  position: relative;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
/* Farbring in der Hausfarbe der Firma — statisch, sauber, jederzeit lesbar */
.firm-logo::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(145deg,
    var(--firm-glow, #7c5cfc) 0%,
    color-mix(in srgb, var(--firm-glow, #7c5cfc) 25%, transparent) 55%,
    transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .7; pointer-events: none;
  transition: opacity .22s ease;
}
/* Lichtstreifen, der bei Berührung einmal durchläuft */
.firm-logo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%,
    color-mix(in srgb, var(--firm-glow, #7c5cfc) 45%, transparent) 50%, transparent 65%);
  opacity: 0; pointer-events: none;
  transform: translateX(-120%);
}
.firm-logo:hover { transform: translateY(-2px) scale(1.04); }
.firm-logo:hover::before { opacity: 1; }
.firm-logo:hover::after { animation: firmSheen .75s ease-out; }
@keyframes firmSheen {
  0%   { opacity: 0;   transform: translateX(-120%); }
  35%  { opacity: .9;  }
  100% { opacity: 0;   transform: translateX(120%); }
}
/* Ganze Zeilen sollen das Logo mitheben, nicht nur der direkte Zeiger */
.dash-acc-row:hover .firm-logo,
.fp-firm:hover .firm-logo,
.py-open:hover .firm-logo,
.iv-card:hover .firm-logo { transform: translateY(-2px) scale(1.04); }
.dash-acc-row:hover .firm-logo::before,
.fp-firm:hover .firm-logo::before,
.py-open:hover .firm-logo::before,
.iv-card:hover .firm-logo::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .firm-logo, .firm-logo:hover { transform: none; transition: none; }
  .firm-logo:hover::after { animation: none; }
}
.kpi-val { font-size: 27px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.kpi-val.sm { font-size: 23px; }
.kpi-foot { margin-top: auto; padding-top: 9px; font-size: 12px; color: var(--text-faint); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpi-spark { margin-top: 10px; height: 30px; display: block; width: 100%; overflow: visible; }
.kpi-hero { padding: 22px 24px 20px; }
.kpi-hero .kpi-val { font-size: 38px; }
.kpi-hero .kpi-ic { width: 46px; height: 46px; border-radius: 13px; }
.kpi-hero .kpi-ic svg { width: 23px; height: 23px; }
.kpi-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 12px; }

/* grids */
.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .g-4, .g-6 { grid-template-columns: repeat(3, 1fr); } .g-3 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 980px) { .g-2 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .g-2, .g-3, .g-4, .g-6 { grid-template-columns: 1fr; } }

/* fields */
/* min-width:0 ist hier kein Feinschliff, sondern eine Reparatur.
   Ein <select> ist von sich aus so breit wie seine laengste Option. Die
   Account-Auswahl heisst „Tradeify · #DEMO-115 · 25.000 $ (live)" — damit
   sprengte sie auf schmalen Schirmen den ganzen Dialog: gemessen 503 px
   Dialogbreite bei 375 px Fensterbreite, der Rest lag ausserhalb und war
   nicht erreichbar. Betroffen war jeder Dialog mit Kontoauswahl. */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.select { min-width: 0; }
.modal-head, .modal-body, .modal-foot { min-width: 0; }
.mf-sec, .mf-legend, .mf-grid, .mf-grid > * { min-width: 0; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.field label .opt { color: var(--text-faint); font-weight: 500; }
.input, .select, textarea.input {
  font-family: var(--font-ui); font-size: 13.5px; color: var(--text);
  background: var(--field); border: 1px solid var(--field-border);
  border-radius: var(--r-ctl); padding: 9px 12px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, textarea.input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak);
}
.input::placeholder { color: var(--text-faint); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239b9fae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px; cursor: pointer; }
.input-icon { position: relative; }
.input-icon svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; }
.input-icon .input { padding-left: 36px; }

/* toggle switch */
.switch { position: relative; width: 40px; height: 23px; flex-shrink: 0; cursor: pointer; }
.switch input { display: none; }
.switch .track { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--field-border); border-radius: 99px; transition: all .2s var(--ease); }
.switch .thumb { position: absolute; top: 2.5px; left: 2.5px; width: 17px; height: 17px; border-radius: 50%; background: var(--text-faint); transition: all .2s var(--ease); }
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track + .thumb, .switch input:checked ~ .thumb { transform: translateX(17px); background: #fff; }

/* progress bars */
.bar { height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; transition: width .5s var(--ease); }

/* tables */
.tbl-wrap { overflow-x: auto; border-radius: var(--r-card); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th {
  text-align: left; font-weight: 600; color: var(--text-muted); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 11px 14px;
  border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; background: var(--card); z-index: 1;
}
.tbl tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: var(--surface-2); cursor: pointer; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .row-pos td:first-child { box-shadow: inset 3px 0 0 var(--pos); }
.tbl .row-neg td:first-child { box-shadow: inset 3px 0 0 var(--neg); }

/* modal */
/* grid-template-columns: minmax(0,1fr) ist der eigentliche Punkt. Eine
   automatische Rasterspalte darf nicht unter die min-content-Breite ihres
   Inhalts schrumpfen — und die wird von der laengsten <option> der
   Kontoauswahl bestimmt. Ohne diese Zeile war der Dialog auf dem Telefon
   breiter als das Fenster, und der rechte Rand mitsamt Schliessen-Knopf lag
   ausserhalb. minmax(0,1fr) hebt diese Untergrenze auf. */
.overlay { position: fixed; inset: 0; background: rgba(8,9,13,0.62); backdrop-filter: blur(4px); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; z-index: 100; padding: 24px; animation: fade .18s var(--ease); }
@media (max-width: 560px) { .overlay { padding: 12px; } }
[data-theme="light"] .overlay { background: rgba(30,32,48,0.42); }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; animation: pop .22s var(--ease); }
.modal.lg { max-width: 920px; }
.modal.xl { max-width: 1100px; }
.modal-head {
  display: flex; align-items: center; gap: 13px;
  padding: 18px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  /* Ein Hauch Farbe von oben — der Kopf soll zum Dialog gehoeren, nicht wie
     eine Titelleiste darauf liegen. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 7%, transparent), transparent);
  border-radius: 18px 18px 0 0;
}
.modal-head h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.modal-head.has-sub { padding: 17px 20px 15px; }
.mh-ic {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--accent);
}
.mh-t { flex: 1; min-width: 0; }
.mh-t p {
  margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-faint);
}
.mh-x { flex: none; align-self: flex-start; }
.modal-body { padding: 22px; overflow-y: auto; }

/* ============================================================
   Formularsprache in Dialogen
   ------------------------------------------------------------
   Vorher lagen alle Felder gleichrangig in einem Raster: neun Kaesten, die
   sich nicht unterscheiden, obwohl „Betrag" und „Transaktions-Referenz"
   voellig verschieden wichtig sind. Der Nutzer musste jedes Etikett lesen,
   um die Form zu verstehen.

   Jetzt tragen Abschnitte die Struktur. Jeder beantwortet eine Frage, und
   die Reihenfolge ist die, in der man sie beim Erfassen ohnehin beantwortet.
   ============================================================ */
.mform { display: flex; flex-direction: column; gap: 20px; }
.mf-sec { display: flex; flex-direction: column; gap: 11px; }
.mf-legend { display: flex; align-items: baseline; gap: 9px; }
.mf-nr {
  flex: none; width: 19px; height: 19px; border-radius: 50%;
  display: inline-grid; place-items: center; align-self: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 800;
  background: var(--surface-3); color: var(--text-faint);
  border: 1px solid var(--border);
}
.mf-lt {
  font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
.mf-lh { font-size: 11.5px; color: var(--text-faint); font-weight: 500; }
.mf-sec::after {
  content: ''; height: 1px; background: var(--border); margin-top: 2px;
}
.mf-sec:last-child::after { display: none; }
.mf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.mf-grid.one { grid-template-columns: 1fr; }
@media (max-width: 560px) { .mf-grid { grid-template-columns: 1fr; } }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-top: 1px solid var(--border); flex-shrink: 0; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* slide-in panel */
.panel-overlay { position: fixed; inset: 0; background: rgba(8,9,13,0.45); backdrop-filter: blur(2px); z-index: 90; animation: fade .18s var(--ease); }
.slide-panel { position: fixed; top: 0; right: 0; height: 100%; width: 400px; max-width: 92vw; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 91; display: flex; flex-direction: column; animation: slidein .26s var(--ease); }
@keyframes slidein { from { transform: translateX(100%); } }

/* empty state */
.empty { text-align: center; padding: 56px 20px; color: var(--text-muted); }
.empty-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--surface-3); display: grid; place-items: center; margin: 0 auto 16px; color: var(--text-faint); }
.empty h4 { margin: 0 0 6px; font-size: 16px; color: var(--text); font-weight: 700; }

/* toast */
.toasts { position: fixed; top: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 12px 15px; box-shadow: var(--shadow-lg); min-width: 260px; font-size: 13.5px; font-weight: 600; animation: toastin .3s var(--ease); }
.toast .tic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; }
@keyframes toastin { from { opacity: 0; transform: translateX(20px); } }

/* stepper */
.stepper { display: flex; align-items: center; gap: 0; margin-bottom: 4px; }
.step { display: flex; align-items: center; gap: 10px; }
.step-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; border: 1.5px solid var(--border-strong); color: var(--text-faint); background: var(--surface); transition: all .2s; }
.step.active .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.step.done .step-dot { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }
.step-lbl { font-size: 12.5px; font-weight: 600; color: var(--text-faint); white-space: nowrap; }
.step.active .step-lbl, .step.done .step-lbl { color: var(--text); }
.step-line { flex: 1; height: 1.5px; background: var(--border); margin: 0 12px; min-width: 14px; }
.step.done + .step-line, .step-line.done { background: var(--accent); }

/* choice cards */
.choice { border: 1.5px solid var(--border); border-radius: 13px; padding: 18px; cursor: pointer; transition: all .16s var(--ease); background: var(--card); }
.choice:hover { border-color: var(--border-strong); background: var(--card-hover); }
.choice.sel { border-color: var(--accent); background: var(--accent-weak); box-shadow: 0 0 0 3px var(--accent-weak); }
.choice h4 { margin: 0 0 5px; font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.choice p { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

/* checklist */
.check-item { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13px; border-bottom: 1px dashed var(--border); }
.check-item:last-child { border-bottom: 0; }
.check-mark { width: 19px; height: 19px; border-radius: 5px; display: grid; place-items: center; flex-shrink: 0; }
.check-mark.ok { background: var(--pos-weak); color: var(--pos); }
.check-mark.no { background: var(--neg-weak); color: var(--neg); }

/* invoice preview (paper) */
/* A4-Anmutung: mehr Rand, weniger Radius. Ein Beleg mit stark gerundeten
   Ecken sieht aus wie eine Web-Karte, nicht wie ein Dokument. */
.paper { background: #fff; color: #1a1a22; border-radius: 3px; padding: 46px 48px 40px; font-size: 12.5px; line-height: 1.55; box-shadow: var(--shadow); }
@media print { .paper { box-shadow: none; border-radius: 0; padding: 0; } }
[data-theme="dark"] .paper { box-shadow: 0 0 0 1px var(--border), var(--shadow); }
.paper h2 { font-size: 20px; margin: 0 0 2px; letter-spacing: -0.02em; }

/* ai panel */
.ai-block { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 16px; }
.ai-out { font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; color: var(--text); }
.ai-out h1, .ai-out h2, .ai-out h3 { font-size: 14px; margin: 14px 0 6px; font-weight: 700; }
.spin { width: 16px; height: 16px; border: 2px solid var(--accent-weak); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* shimmer skeleton */
.skel { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 6px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* fade-in for page transitions — transform-only so content is NEVER hidden if frozen */
@keyframes pageIn { from { transform: translateY(10px); } }
@media (prefers-reduced-motion: no-preference) {
  .page-enter { animation: pageIn .3s var(--ease); }
}

/* heatmap */
.heat { display: grid; gap: 4px; }
.heat-cell { aspect-ratio: 1.6; border-radius: 5px; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; }

/* misc helpers */
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap { flex-wrap: wrap; }
.gap-sm { gap: 6px; } .gap-lg { gap: 18px; }
.mt-sm { margin-top: 8px; } .mt { margin-top: 16px; } .mt-lg { margin-top: 24px; }
.mb { margin-bottom: 16px; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-muted); }

@media (prefers-reduced-motion: no-preference) {
  .fade-list > * { animation: pageIn .32s var(--ease); }
  .fade-list > *:nth-child(2) { animation-delay: .04s; }
  .fade-list > *:nth-child(3) { animation-delay: .08s; }
  .fade-list > *:nth-child(4) { animation-delay: .12s; }
  .fade-list > *:nth-child(5) { animation-delay: .16s; }
  .fade-list > *:nth-child(6) { animation-delay: .2s; }
}

/* ============================================================
   Dashboard — Account-Rail & Aktivitäts-Timeline
   ============================================================ */
.dash-acc { display:flex; flex-direction:column; gap:2px; }
.dash-acc-row {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:13px 12px; border-radius:12px; cursor:pointer; position:relative;
  transition:background .18s ease, transform .18s ease;
}
.dash-acc-row::before {
  content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px;
  border-radius:99px; background:var(--acc-tone,var(--accent)); opacity:0;
  transition:opacity .18s ease;
}
.dash-acc-row:hover { background:var(--surface-3); transform:translateX(2px); }
.dash-acc-row:hover::before { opacity:1; }
.dash-acc-name { font-weight:700; font-size:13.5px; letter-spacing:-.01em; }
.dash-acc-meta { display:flex; align-items:center; gap:7px; margin-top:3px; flex-wrap:wrap; }
.dash-acc-chip {
  font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:5px; background:var(--surface-3); color:var(--muted);
}
.dash-acc-bars { display:flex; gap:10px; margin-top:8px; }
.dash-acc-bar { flex:1; min-width:0; }
.dash-acc-bar span {
  display:block; font-size:9.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--faint); margin-bottom:3px;
}
.dash-acc-bar i {
  display:block; height:5px; border-radius:99px; background:var(--surface-3); overflow:hidden;
}
.dash-acc-bar i b {
  display:block; height:100%; border-radius:99px; transition:width .6s cubic-bezier(.2,.8,.2,1);
}
.dash-acc-val { text-align:right; white-space:nowrap; }
.dash-acc-bal { font-weight:800; font-size:15px; letter-spacing:-.02em; }
.dash-acc-pl {
  display:inline-block; margin-top:4px; font-size:11.5px; font-weight:800;
  padding:2px 8px; border-radius:99px;
}
.dash-acc-pl.up { background:var(--pos-weak); color:var(--pos); }
.dash-acc-pl.dn { background:var(--neg-weak); color:var(--neg); }
.dash-acc-pl.flat { background:var(--surface-3); color:var(--muted); }

/* Timeline */
.dash-tl { position:relative; padding-left:4px; }
.dash-tl-day {
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); margin:14px 0 6px 30px;
}
.dash-tl-day:first-child { margin-top:2px; }
.dash-tl-item {
  position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px; align-items:center; padding:8px 8px 8px 0; margin-left:0;
  border-radius:10px; transition:background .18s ease;
}
.dash-tl-item:hover { background:var(--surface-3); }
.dash-tl-rail {
  position:relative; width:22px; display:flex; justify-content:center; align-self:stretch;
}
.dash-tl-rail::before {
  content:''; position:absolute; top:-14px; bottom:-14px; width:2px;
  background:var(--border); border-radius:99px;
}
.dash-tl-item:last-child .dash-tl-rail::before { bottom:50%; }
.dash-tl-dot {
  position:relative; width:11px; height:11px; border-radius:50%; align-self:center;
  border:2.5px solid var(--card); box-shadow:0 0 0 2px var(--tl-tone,var(--accent));
  background:var(--tl-tone,var(--accent));
}
.dash-tl-dot::after {
  content:''; position:absolute; inset:-5px; border-radius:50%;
  background:var(--tl-tone,var(--accent)); opacity:.18;
  animation:tlPulse 2.6s ease-out infinite;
}
.dash-tl-item:not(:first-of-type) .dash-tl-dot::after { animation:none; opacity:.10; }
@keyframes tlPulse { 0%{transform:scale(.6);opacity:.30} 70%{transform:scale(1.35);opacity:0} 100%{opacity:0} }
.dash-tl-title { font-weight:650; font-size:13px; flex-wrap:wrap; }
.dash-tl-sub { font-size:11.5px; color:var(--faint); margin-top:1px; }
.dash-tl-amt { font-size:12.5px; font-weight:800; white-space:nowrap; text-align:right; }
.dash-tl-time { font-size:10.5px; color:var(--faint); text-align:right; margin-top:1px; }

@media (prefers-reduced-motion: reduce) {
  .dash-tl-dot::after { animation:none; }
  .dash-acc-row:hover { transform:none; }
}
@media (max-width:600px) {
  .dash-acc-bars { display:none; }
  .dash-acc-row { padding:11px 8px; gap:10px; }
}

/* Enge Karten-Spalte: Layout stapelt statt zu ueberlappen */
.card:has(.dash-acc), .card:has(.dash-tl) { container-type:inline-size; }
@container (max-width: 420px) {
  .dash-acc-bars { display:none; }
  .dash-acc-row { grid-template-columns:auto minmax(0,1fr); row-gap:6px; }
  .dash-acc-val { grid-column:2; text-align:left; display:flex; align-items:center; gap:8px; }
  .dash-acc-pl { margin-top:0; }
  .dash-tl-item { grid-template-columns:auto minmax(0,1fr); row-gap:2px; }
  .dash-tl-item > div:last-child { grid-column:2; display:flex; align-items:baseline; gap:8px; }
  .dash-tl-time { margin-top:0; }
}

/* ============================================================
   Demo-Modus-Leiste
   ============================================================ */
.demo-bar {
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 18px; font-size:12.5px; color:#fff;
  background:linear-gradient(100deg,#4c1d95,#7c5cfc 45%,#2364c4);
  box-shadow:0 2px 14px rgba(0,0,0,.28);
}
.demo-bar b { font-weight:800; letter-spacing:-.01em; }
.demo-txt { color:rgba(255,255,255,.82); }
.demo-dot {
  width:8px; height:8px; border-radius:50%; background:#2dd48f; flex-shrink:0;
  box-shadow:0 0 0 0 rgba(45,212,143,.7); animation:demoPulse 2.2s infinite;
}
@keyframes demoPulse {
  0%   { box-shadow:0 0 0 0 rgba(45,212,143,.6); }
  70%  { box-shadow:0 0 0 9px rgba(45,212,143,0); }
  100% { box-shadow:0 0 0 0 rgba(45,212,143,0); }
}
.demo-cta {
  background:#fff; color:#4c1d95; border:none; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:12.5px;
  padding:7px 15px; border-radius:9px; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}
.demo-cta:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(0,0,0,.3); }
.demo-x {
  background:rgba(255,255,255,.16); color:#fff; border:none; cursor:pointer;
  width:26px; height:26px; border-radius:7px; font-size:13px; line-height:1;
  display:grid; place-items:center; flex-shrink:0;
}
.demo-x:hover { background:rgba(255,255,255,.3); }
@media (max-width:640px) { .demo-txt { display:none; } }
@media (prefers-reduced-motion: reduce) { .demo-dot { animation:none; } }

/* Dashboard — Feinschliff */
.dash-toggle {
  background:var(--surface); border:1px solid var(--border); border-radius:8px; cursor:pointer;
  font-family:inherit; font-size:11.5px; font-weight:700; color:var(--muted);
  padding:6px 12px; transition:all .16s; white-space:nowrap;
}
.dash-toggle:hover { border-color:var(--accent); color:var(--text); }

/* Untere Kartenreihe auf gleiche Höhe bringen, statt eine Karte leer zu strecken */
/* ============================================================
   Rücklagen & ELSTER im Steuer-Cockpit
   ============================================================ */
.rk-hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:22px;
  padding:20px 22px; border-radius:16px; margin-bottom:16px;
  background:linear-gradient(135deg, var(--accent-weak), transparent 65%), var(--surface);
  border:1px solid var(--border); }
@media (max-width:820px) { .rk-hero { grid-template-columns:1fr; } }
.rk-hero .k { font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-faint); }
.rk-hero .num { font-family:var(--font-mono); font-size:34px; font-weight:900;
  letter-spacing:-.04em; line-height:1.1; margin:6px 0 8px; }
.rk-hero .sub { font-size:12.5px; color:var(--text-muted); line-height:1.65; }
.rk-bar { height:8px; border-radius:99px; background:var(--surface-3); overflow:hidden; margin-top:16px; }
.rk-bar i { display:block; height:100%; border-radius:99px; transition:width .4s var(--ease); }
.rk-barl { display:flex; justify-content:space-between; font-size:11px; color:var(--text-faint); margin-top:6px; }

.rk-hero-r { display:flex; flex-direction:column; gap:12px; }
.rk-rate, .rk-vz { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:13px 15px; }
.rk-reset { background:none; border:0; padding:0; cursor:pointer; font:inherit; font-size:11.5px;
  font-weight:700; color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.rk-note { font-size:11px; color:var(--text-faint); line-height:1.55; margin:8px 0 0; }
.rk-vz b { display:block; font-family:var(--font-mono); font-size:19px; font-weight:900;
  letter-spacing:-.02em; margin:5px 0 2px; }
.rk-vz .d { font-size:12px; font-weight:700; color:var(--text-muted); }
.rk-vz .p { display:block; font-size:10.5px; color:var(--text-faint); margin-top:4px; }

.rk-two { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-bottom:14px;
  background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
@media (max-width:680px) { .rk-two { grid-template-columns:1fr; } }
.rk-two > div { background:var(--card); padding:13px 16px; }
.rk-two .k { display:block; font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:5px; }
.rk-two b { display:block; font-family:var(--font-mono); font-size:19px; font-weight:800; letter-spacing:-.02em; }
.rk-two .s { display:block; font-size:11px; color:var(--text-faint); margin-top:3px; }
.rk-expl { font-size:11.5px; color:var(--text-faint); line-height:1.7; margin:0 0 20px;
  padding:11px 14px; border-radius:10px; background:var(--surface); border:1px solid var(--border); }
.rk-expl b { color:var(--text-muted); }

.rk-sec { margin-top:20px; }
.rk-sec-h { display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:10px; }
.rk-sec-h > span { font-size:13px; font-weight:800; letter-spacing:-.01em; }
.rk-add { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font:inherit;
  font-size:12px; font-weight:700; color:var(--accent); background:var(--accent-weak);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding:6px 12px; border-radius:9px; }
.rk-add:hover { background:color-mix(in srgb, var(--accent) 20%, transparent); }
.rk-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; width:100%;
  padding:11px 12px; border-radius:11px; background:var(--surface); border:1px solid var(--accent); }
.rk-empty { font-size:12px; color:var(--text-faint); line-height:1.65; padding:14px 16px;
  border-radius:10px; background:var(--surface); border:1px dashed var(--border); margin:0; }
.rk-list { display:flex; flex-direction:column; gap:6px; }
.rk-row { display:flex; align-items:center; gap:11px; padding:9px 13px; border-radius:10px;
  background:var(--surface); border:1px solid var(--border); }
.rk-row b { font-size:12.5px; font-weight:700; display:block; }
.rk-ic { width:22px; height:22px; border-radius:7px; flex-shrink:0; display:grid; place-items:center;
  font-weight:800; font-size:13px; background:var(--pos-weak); color:var(--pos); }
.rk-ic.out { background:var(--neg-weak); color:var(--neg); }
.rk-note-i { display:block; font-size:11px; color:var(--text-faint); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk-row > b.tnum { margin-left:auto; font-family:var(--font-mono); font-size:13.5px; }
.rk-del { background:none; border:0; cursor:pointer; color:var(--text-faint); padding:3px;
  border-radius:6px; display:grid; place-items:center; }
.rk-del:hover { color:var(--neg); background:var(--neg-weak); }
.rk-row.payout > span:nth-child(2) { flex:1; }
.rk-split { text-align:right; flex-shrink:0; min-width:86px; }
.rk-split em { display:block; font-style:normal; font-family:var(--font-mono);
  font-size:13px; font-weight:800; }
.rk-split u { display:block; text-decoration:none; font-size:9.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); margin-top:1px; }

/* ELSTER-Zuordnung */
.el-warn, .el-note { display:flex; align-items:flex-start; gap:10px; padding:11px 14px;
  border-radius:10px; font-size:11.5px; line-height:1.7; margin-bottom:14px; }
.el-warn { background:var(--warn-weak); border:1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  color:var(--text-muted); }
.el-warn > svg { color:var(--warn); flex-shrink:0; margin-top:2px; }
.el-warn b { color:var(--text); }
.el-note { background:var(--surface); border:1px solid var(--border); color:var(--text-faint);
  margin:16px 0 0; }
.el-note > svg { color:var(--text-faint); flex-shrink:0; margin-top:2px; }
.el-note b { color:var(--text-muted); }
.el-list { display:flex; flex-direction:column; gap:8px; }
.el-row { display:flex; align-items:flex-start; gap:14px; padding:13px 15px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border); }
.el-z { flex-shrink:0; width:52px; text-align:center; padding:5px 0; border-radius:9px;
  background:var(--accent-weak); border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
.el-z em { display:block; font-style:normal; font-size:8.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint); }
.el-z b { display:block; font-family:var(--font-mono); font-size:19px; font-weight:900;
  line-height:1.1; color:var(--accent); }
.el-lbl { display:block; font-size:12.5px; font-weight:700; line-height:1.5; }
.el-why { display:block; font-size:11px; color:var(--text-faint); line-height:1.6; margin-top:4px; }
.el-amt { flex-shrink:0; font-family:var(--font-mono); font-size:15px; font-weight:800;
  letter-spacing:-.02em; padding-top:2px; }

/* ============================================================
   Schmale Schirme
   ------------------------------------------------------------
   Bis hierher war das Raster bei jeder Breite starr: Auf einem 375-Pixel-
   Telefon nahm die Seitenleiste 240 Pixel und für den Inhalt blieben 73.
   Gemessen, nicht geschätzt — die App war auf dem Handy unbenutzbar.

   Unter 900 px wird die Leiste ausgeschoben statt eingeklappt, und unten
   erscheint eine Reiterleiste für die vier Wege, die man am Telefon geht.
   ============================================================ */
.mob-tabs { display: none; }
.mob-veil { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .app.collapsed { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w);
    z-index: 220; transform: translateX(-100%);
    transition: transform .26s var(--ease);
    box-shadow: 0 0 40px rgba(0,0,0,.4);
  }
  .app.mnav .sidebar { transform: none; }
  /* Eingeklappt gilt am Telefon nicht — dort ist sie entweder da oder weg */
  .collapsed .sb-label, .collapsed .sb-section, .collapsed .sb-n { display: revert; }

  .mob-veil { display: block; position: fixed; inset: 0; z-index: 210;
    background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }

  .content { padding: 16px 14px calc(64px + env(safe-area-inset-bottom, 0px)); }
  .topbar { padding: 0 14px; gap: 10px; }

  .mob-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--card) 94%, transparent);
    border-top: 1px solid var(--border); backdrop-filter: blur(14px);
  }
  .mob-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; background: none; border: 0; cursor: pointer; padding: 0;
    font-family: var(--font-ui); font-size: 10px; font-weight: 700;
    color: var(--text-faint); transition: color .15s;
  }
  .mob-tab.on { color: var(--accent); }
  .mob-tab svg { display: block; }

  /* Der Cookie-Knopf klebt unten links und lag damit auf der Reiterleiste.
     Er gehört darüber — verdecken darf er sie nicht. */
  .ptc-tab { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Auf dem Telefon gibt es keinen Platz für Nebensachen */
  .page-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-actions { flex-wrap: wrap; }
  .page-title { font-size: 20px; }
  .card-pad { padding: 15px; }
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- „Heute" ---------- */
.td-head { display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; margin-bottom:16px; }
.td-head h1 { margin:0; font-size:22px; font-weight:800; letter-spacing:-.025em; }
.td-head p { margin:3px 0 0; font-size:12.5px; color:var(--text-muted); }

.td-hero { padding:17px 20px; border-radius:16px; margin-bottom:12px;
  border:1px solid var(--border); background:var(--card); }
.td-hero.ok   { border-color:color-mix(in srgb, var(--pos) 38%, transparent);
  background:linear-gradient(150deg, var(--pos-weak), transparent 68%), var(--card); }
.td-hero.warn { border-color:color-mix(in srgb, var(--warn) 40%, transparent);
  background:linear-gradient(150deg, var(--warn-weak), transparent 68%), var(--card); }
.td-hero.bad  { border-color:color-mix(in srgb, var(--neg) 44%, transparent);
  background:linear-gradient(150deg, var(--neg-weak), transparent 68%), var(--card); }
.td-hero .k { display:block; font-size:10.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-faint); }
.td-hero b { display:block; font-family:var(--font-mono); font-size:34px; font-weight:900;
  letter-spacing:-.045em; line-height:1.05; margin:5px 0 5px; }
.td-hero .s { display:block; font-size:12.5px; color:var(--text-muted); line-height:1.6; }
.td-hero .s b { display:inline; font-family:var(--font-ui); font-size:inherit;
  font-weight:700; color:var(--text); letter-spacing:0; }
.td-hero.none b { color:var(--text-faint); }
.td-bar { height:8px; border-radius:99px; background:var(--surface-3); overflow:hidden; margin-top:14px; }
.td-bar i { display:block; height:100%; border-radius:99px; background:currentColor; }
.td-hero.ok   .td-bar i { background:var(--pos); }
.td-hero.warn .td-bar i { background:var(--warn); }
.td-hero.bad  .td-bar i { background:var(--neg); }

.td-nums { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-bottom:14px;
  background:var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.td-nums > div { background:var(--card); padding:10px 14px; }
.td-nums .k { display:block; font-size:9.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:5px; }
.td-nums b { display:block; font-family:var(--font-mono); font-size:19px; font-weight:800;
  letter-spacing:-.03em; line-height:1.15; }
.td-nums .f { display:block; font-size:10.5px; color:var(--text-faint); margin-top:4px; }

.td-sec { margin-bottom:14px; }
.td-sec-h { font-size:12.5px; font-weight:800; margin-bottom:10px; }
/* ============================================================
   Der Rahmen für heute — Zahl und Konten in einem Block
   ------------------------------------------------------------
   Hero und „Deine Limits" waren zwei Bloecke mit derselben Aussage. Jetzt
   traegt der Kopf die Zahl, der Koerper die Konten, aus denen sie stammt.
   ============================================================ */
.td-rahmen {
  border-radius:18px; border:1px solid var(--border); background:var(--card);
  overflow:hidden; margin-bottom:14px;
}
.td-rahmen.ok   { border-color:color-mix(in srgb, var(--pos) 34%, transparent); }
.td-rahmen.warn { border-color:color-mix(in srgb, var(--warn) 38%, transparent); }
.td-rahmen.bad  { border-color:color-mix(in srgb, var(--neg) 42%, transparent); }

.td-rh { padding:18px 20px 15px; }
.td-rahmen.ok   .td-rh { background:linear-gradient(150deg, var(--pos-weak), transparent 70%); }
.td-rahmen.warn .td-rh { background:linear-gradient(150deg, var(--warn-weak), transparent 70%); }
.td-rahmen.bad  .td-rh { background:linear-gradient(150deg, var(--neg-weak), transparent 70%); }
.td-rh .k { display:block; font-size:10.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-faint); }
.td-rh b { display:block; font-family:var(--font-mono); font-size:34px; font-weight:900;
  letter-spacing:-.045em; line-height:1.05; margin:5px 0 7px; }
.td-rh-s { margin:0; font-size:12.5px; color:var(--text-muted); line-height:1.6; max-width:56ch; }
.td-rh-fix { display:flex; align-items:center; gap:8px; width:100%; padding:10px 20px;
  background:var(--warn-weak); border:none; border-top:1px solid var(--border);
  color:var(--warn); font:inherit; font-size:12px; font-weight:700; cursor:pointer; text-align:left; }
.td-rh-fix:hover { background:color-mix(in srgb, var(--warn) 20%, transparent); }

/* Konten im Rahmen */
.td-kl { display:flex; flex-direction:column; border-top:1px solid var(--border); }
.td-k { display:grid; grid-template-columns:30px minmax(0,1fr) minmax(60px,1.1fr) auto;
  gap:11px; align-items:center; width:100%; text-align:left; font:inherit; color:var(--text);
  cursor:pointer; padding:10px 20px; background:none; border:none;
  border-bottom:1px solid var(--border); transition:background .15s; }
.td-k:last-child { border-bottom:none; }
.td-k:hover { background:var(--surface-2); }
/* Das knappste Konto ist die Quelle der Zahl oben — das darf man sehen */
.td-k.ist-knapp { background:var(--surface-2); }
.td-k.ist-knapp::before { content:''; position:absolute; }
.td-k-id { min-width:0; }
.td-k-id b { display:block; font-size:13px; font-weight:700; }
.td-k-id em { display:block; font-style:normal; font-family:var(--font-mono);
  font-size:10.5px; color:var(--text-faint); margin-top:1px; }
/* Fuellung = VERBRAUCH. Morgens leer, nicht voll. */
.td-k-bar { display:block; height:6px; border-radius:99px; background:var(--surface-3);
  overflow:hidden; }
.td-k-bar i { display:block; height:100%; border-radius:99px; transition:width .3s var(--ease); }
.td-k-r { text-align:right; white-space:nowrap; }
.td-k-r b { font-family:var(--font-mono); font-size:14px; font-weight:800; letter-spacing:-.02em; }
.td-k-r em { display:block; font-style:normal; font-size:10px; color:var(--text-faint); margin-top:1px; }
.td-k-r em.kein { font-size:10.5px; font-weight:700; }
@media (max-width:620px) {
  /* Vier Kinder, drei Spalten: der Balken sprang mit `2 / -1` in die zweite
     Zeile und schob den Betrag in die 30-px-Spalte des Logos — 46 px Inhalt
     auf 30 px Platz. Beide bekommen jetzt eine ausdrueckliche Position. */
  .td-k { grid-template-columns:30px minmax(0,1fr) auto; row-gap:7px; }
  .td-k-bar { grid-row:2; grid-column:2 / -1; }
  .td-k-r   { grid-row:1; grid-column:3; }
}

/* Zustand des Tages neben dem Datum */
.td-zust { display:inline-block; margin-left:9px; padding:2px 9px; border-radius:99px;
  font-size:10.5px; font-weight:700; background:var(--surface-3); color:var(--text-faint);
  border:1px solid var(--border); vertical-align:1px; }
.td-zust.aktiv { background:var(--accent-weak); color:var(--accent2);
  border-color:color-mix(in srgb, var(--accent) 30%, transparent); }

/* Zuletzt gehandelt — Null in der Mitte, Gewinn nach oben, Verlust nach unten */
.td-days { position:relative; display:flex; gap:8px;
  padding:10px 14px 9px; border-radius:13px;
  background:var(--surface); border:1px solid var(--border); }
.td-zero { position:absolute; left:14px; right:14px; top:10px; height:56px;
  pointer-events:none; }
.td-zero::after { content:''; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--border-strong); opacity:.7; }
.td-day { flex:1; min-width:0; display:flex; flex-direction:column;
  align-items:center; gap:6px; }
.td-plot { position:relative; display:block; width:100%; height:56px; }
.td-plot b { position:absolute; left:50%; transform:translateX(-50%);
  width:100%; max-width:26px; border-radius:3px; display:block; }
.td-plot b.up   { bottom:50%; background:var(--pos); border-radius:3px 3px 1px 1px; }
.td-plot b.down { top:50%;    background:var(--neg); border-radius:1px 1px 3px 3px; }
.td-day u { text-decoration:none; font-size:10.5px; color:var(--text-faint);
  font-weight:600; }
.td-day:hover .td-plot b { filter:brightness(1.15); }

.td-sec-h { display:flex; align-items:baseline; gap:8px; }
.td-sec-sub { margin-left:auto; font-style:normal; font-size:11px;
  font-weight:600; color:var(--text-faint); }
.td-sec-sub b { font-family:var(--font-mono); font-weight:800; }
.td-sec-n { font-style:normal; font-size:10px; font-weight:800; padding:2px 8px;
  border-radius:99px; background:var(--warn-weak); color:var(--warn); }

/* Ablauf: morgens die Limits, abends das Aufräumen */
.td-todo { display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  font:inherit; color:var(--text); cursor:pointer; padding:12px 15px; border-radius:13px;
  background:var(--surface); border:1px solid var(--border); transition:border-color .15s, transform .15s; }
.td-todo:hover { border-color:var(--accent); transform:translateX(2px); }
.td-todo .ic { font-size:19px; flex-shrink:0; line-height:1.2; }
.td-todo b { display:block; font-size:13px; font-weight:700; line-height:1.4; }
.td-todo em { display:block; font-style:normal; font-size:11px; color:var(--text-faint);
  margin-top:2px; line-height:1.55; }
.td-todo > svg { color:var(--text-faint); flex-shrink:0; }
.td-ablauf { display:flex; align-items:center; gap:13px; padding:15px 17px; border-radius:14px; }
.td-ablauf.morgen { background:linear-gradient(120deg, var(--accent-weak), transparent 65%), var(--surface);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
.td-ablauf.fertig { background:linear-gradient(120deg, var(--pos-weak), transparent 65%), var(--surface);
  border:1px solid color-mix(in srgb, var(--pos) 30%, transparent); }
.td-ablauf .ic { font-size:22px; flex-shrink:0; }
.td-ablauf.fertig .ic { color:var(--pos); font-weight:900; }
.td-ablauf b { display:block; font-size:13.5px; font-weight:800; }
.td-ablauf span:last-child { display:block; }
.td-ablauf > div > span { font-size:11.5px; color:var(--text-muted); line-height:1.6; margin-top:2px; }
.td-days i { display:block; width:100%; max-width:34px; border-radius:4px; }
.td-days u { text-decoration:none; font-size:9.5px; font-weight:700; color:var(--text-faint); }

/* ---------- Ziel & Wochenrückblick ---------- */
.zw-edit, .zw-del { background:none; border:0; padding:0; cursor:pointer; font:inherit;
  font-size:11.5px; font-weight:700; color:var(--accent);
  text-decoration:underline; text-underline-offset:2px; }
.zw-del { color:var(--text-faint); }
.zw-set { display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; padding:15px 17px; border-radius:13px;
  background:linear-gradient(120deg, var(--accent-weak), transparent 65%), var(--surface);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.zw-set b { display:block; font-size:14px; font-weight:800; letter-spacing:-.015em; }
.zw-set > div > span { display:block; font-size:11.5px; color:var(--text-muted);
  line-height:1.6; margin-top:3px; max-width:52ch; }

.zw-goal { display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:center;
  padding:15px 17px; border-radius:13px; background:var(--surface); border:1px solid var(--border); }
@media (max-width:640px) { .zw-goal { grid-template-columns:1fr; gap:12px; } }
.zw-goal-l .k { display:block; font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint); }
.zw-goal-l b { display:block; font-family:var(--font-mono); font-size:27px; font-weight:900;
  letter-spacing:-.035em; line-height:1.1; margin:4px 0 2px; }
.zw-goal-l .s { font-size:11.5px; color:var(--text-faint); }
.zw-bar { height:9px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.zw-bar i { display:block; height:100%; border-radius:99px; transition:width .5s var(--ease); }
.zw-goal-t { display:block; font-size:12px; color:var(--text-muted); line-height:1.65; margin-top:9px; }
.zw-goal-t b { color:var(--text); }

.zw-week { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.zw-w-h { display:flex; align-items:baseline; gap:10px; font-size:13px; font-weight:800;
  letter-spacing:-.01em; margin-bottom:12px; }
.zw-w-h em { font-style:normal; font-size:11px; font-weight:600; color:var(--text-faint); }
.zw-empty { font-size:12px; color:var(--text-faint); line-height:1.65; margin:0;
  padding:13px 15px; border-radius:11px; background:var(--surface); border:1px dashed var(--border); }
.zw-nums { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
@media (max-width:560px) { .zw-nums { grid-template-columns:1fr; } }
.zw-nums > div { background:var(--card); padding:12px 15px; }
.zw-nums .k { display:block; font-size:9.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:4px; }
.zw-nums b { display:block; font-family:var(--font-mono); font-size:19px; font-weight:800;
  letter-spacing:-.025em; line-height:1.1; }
.zw-nums .s { display:block; font-size:10.5px; color:var(--text-faint); margin-top:3px; }
.zw-facts { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.zw-facts > span { flex:1; min-width:150px; padding:10px 13px; border-radius:11px;
  background:var(--surface); border:1px solid var(--border); }
.zw-facts em { display:block; font-style:normal; font-size:9.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.zw-facts b { display:block; font-family:var(--font-mono); font-size:15px; font-weight:800;
  letter-spacing:-.02em; margin-top:3px; }
.zw-facts i { display:block; font-style:normal; font-size:10.5px; color:var(--text-faint); margin-top:2px; }
.zw-todo { font-size:11.5px; color:var(--text-muted); line-height:1.7; margin:12px 0 0;
  padding:11px 14px; border-radius:11px;
  background:var(--warn-weak); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.zw-todo b { color:var(--text); }

/* ---------- Plattform-Import ---------- */
.im-top { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; margin-bottom:8px; }
.im-hint { font-size:11.5px; color:var(--text-faint); line-height:1.65; margin:0 0 14px; }
.im-drop { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.im-file { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:inherit;
  font-size:12.5px; font-weight:700; color:var(--accent); padding:9px 15px; border-radius:11px;
  background:var(--accent-weak); border:1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  transition:background .15s; }
.im-file:hover { background:color-mix(in srgb, var(--accent) 20%, transparent); }
.im-oder { font-size:11.5px; color:var(--text-faint); }
.im-tz { display:inline-flex; align-items:center; gap:9px; font-size:12px; color:var(--text-muted); }
/* Spalten von Hand zuordnen — erscheint nur, wenn die Erkennung scheitert. */
.im-zuordnen { margin-top:16px; padding:15px 17px; border-radius:13px;
  background:var(--surface-2); border:1px solid rgba(251,191,36,.35); }
.im-zuordnen > b { display:block; font-size:14px; margin-bottom:5px; }
.im-zuordnen > p { font-size:12.8px; line-height:1.6; color:var(--text-muted); margin-bottom:13px; }
.im-felder { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:11px; }
.im-felder label { display:flex; flex-direction:column; gap:5px; }
.im-felder label > span { font-size:11.5px; font-weight:700; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:.04em; }
.im-hinweis { font-size:11.5px; line-height:1.6; color:var(--text-faint); margin-top:12px; }
.im-res { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.im-zahlen { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.im-zahlen > div { background:var(--card); padding:12px 15px; }
.im-zahlen b { display:block; font-family:var(--font-mono); font-size:22px; font-weight:800;
  letter-spacing:-.03em; line-height:1.1; }
.im-zahlen span { display:block; font-size:10.5px; color:var(--text-faint); margin-top:3px; }
.im-zahlen .ok b { color:var(--pos); }
.im-zahlen .warn b { color:var(--warn); }
.im-erkannt { font-size:11.5px; color:var(--text-faint); line-height:1.7; margin:12px 0 0; }
.im-erkannt b { color:var(--text-muted); }
.im-mehr { font-size:11px; color:var(--text-faint); text-align:center; padding:8px 0 0; margin:0; }
.im-warn { display:flex; align-items:flex-start; gap:9px; margin:12px 0 0; padding:10px 13px;
  border-radius:10px; font-size:11.5px; line-height:1.65; color:var(--text-muted);
  background:var(--warn-weak); border:1px solid color-mix(in srgb, var(--warn) 28%, transparent); }
.im-warn > svg { color:var(--warn); flex-shrink:0; margin-top:2px; }
.im-note { font-size:11.5px; color:var(--text-faint); line-height:1.75; margin:18px 0 0;
  padding-top:14px; border-top:1px solid var(--border); }
.im-note b { color:var(--text-muted); }

/* ---------- Fehler-Kosten ---------- */
.fk-hero { padding:18px 20px; border-radius:15px; margin-bottom:16px;
  border:1px solid color-mix(in srgb, var(--neg) 38%, transparent);
  background:linear-gradient(150deg, var(--neg-weak), transparent 68%), var(--card); }
.fk-hero .k { display:block; font-size:10.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-faint); }
.fk-hero b { display:block; font-family:var(--font-mono); font-size:36px; font-weight:900;
  letter-spacing:-.045em; line-height:1.05; margin:7px 0 7px; color:var(--neg); }
.fk-hero .s { display:block; font-size:12.5px; color:var(--text-muted); line-height:1.7; }
.fk-hero .s b { display:inline; font-family:var(--font-ui); font-size:inherit;
  font-weight:700; color:var(--text); letter-spacing:0; }
.fk-list { display:flex; flex-direction:column; gap:8px; }
.fk-row { display:flex; align-items:center; gap:13px; padding:12px 15px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border); }
.fk-row.teuer { border-color:color-mix(in srgb, var(--neg) 26%, transparent); }
.fk-n { flex-shrink:0; min-width:38px; text-align:center; font-family:var(--font-mono);
  font-size:13px; font-weight:800; color:var(--text-faint); }
.fk-row > span b { display:block; font-size:13px; font-weight:700; }
.fk-meta { display:block; font-size:11px; color:var(--text-faint); margin-top:2px; }
.fk-bar { display:block; height:4px; border-radius:99px; background:var(--surface-3);
  overflow:hidden; margin-top:7px; }
.fk-bar i { display:block; height:100%; border-radius:99px; }
.fk-val { flex-shrink:0; text-align:right; min-width:96px; }
.fk-val b { font-family:var(--font-mono); font-size:14.5px; font-weight:800; letter-spacing:-.02em; }
.fk-val em { display:block; font-style:normal; font-size:9.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--text-faint); margin-top:2px; }
.fk-fazit { font-size:12.5px; color:var(--text-muted); line-height:1.75; margin:14px 0 0;
  padding:12px 15px; border-radius:11px;
  background:var(--warn-weak); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.fk-fazit b { color:var(--text); }
.fk-method, .fk-leer { display:flex; align-items:flex-start; gap:10px; margin:16px 0 0;
  padding:12px 15px; border-radius:11px; font-size:11.5px; line-height:1.7;
  color:var(--text-faint); background:var(--surface); border:1px solid var(--border); }
.fk-leer { margin:0; font-size:12.5px; color:var(--text-muted); }
.fk-method > svg, .fk-leer > svg { flex-shrink:0; margin-top:2px; }
.fk-method b, .fk-leer b { color:var(--text-muted); }

/* ---------- Lebenszeit-Bilanz ---------- */
.lb-hero { padding:20px 22px; border-radius:16px; margin-bottom:16px; border:1px solid var(--border); }
.lb-hero.pos { border-color:color-mix(in srgb, var(--pos) 38%, transparent);
  background:linear-gradient(150deg, var(--pos-weak), transparent 68%), var(--card); }
.lb-hero.neg { border-color:color-mix(in srgb, var(--warn) 40%, transparent);
  background:linear-gradient(150deg, var(--warn-weak), transparent 68%), var(--card); }
.lb-hero .k { display:block; font-size:10.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-faint); }
.lb-hero b { display:block; font-family:var(--font-mono); font-size:38px; font-weight:900;
  letter-spacing:-.045em; line-height:1.05; margin:7px 0 7px; }
.lb-hero.pos b { color:var(--pos); }
.lb-hero .s { display:block; font-size:12.5px; color:var(--text-muted); line-height:1.7; }
.lb-hero .s b { display:inline; font-family:var(--font-ui); font-size:inherit;
  font-weight:700; color:var(--text); letter-spacing:0; margin:0; }
.lb-flow { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center;
  margin-bottom:14px; }
@media (max-width:560px) { .lb-flow { grid-template-columns:1fr; }
  .lb-arrow { transform:rotate(90deg); } }
.lb-side { padding:14px 16px; border-radius:13px; background:var(--surface); border:1px solid var(--border); }
.lb-side.out { border-color:color-mix(in srgb, var(--neg) 24%, transparent); }
.lb-side.in  { border-color:color-mix(in srgb, var(--pos) 24%, transparent); }
.lb-side .k { display:block; font-size:9.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint); }
.lb-side b { display:block; font-family:var(--font-mono); font-size:22px; font-weight:800;
  letter-spacing:-.03em; margin:5px 0 3px; }
.lb-side.out b { color:var(--neg); }
.lb-side.in  b { color:var(--pos); }
.lb-side .s { display:block; font-size:10.5px; color:var(--text-faint); line-height:1.5; }
.lb-arrow { display:grid; place-items:center; color:var(--text-faint); }
.lb-quote { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.lb-quote > div { background:var(--card); padding:11px 14px; }
.lb-quote span { display:block; font-size:10px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-faint); }
.lb-quote b { display:block; font-family:var(--font-mono); font-size:19px; font-weight:800;
  letter-spacing:-.025em; margin-top:3px; }
.lb-note { font-size:12px; color:var(--text-muted); line-height:1.75; margin:16px 0 0;
  padding-top:14px; border-top:1px solid var(--border); }
.lb-note b { color:var(--text); }

/* ---------- Auszahlungs-Prognose ---------- */
.pp-list { display:flex; flex-direction:column; gap:9px; }
.pp-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:13px 16px;
  border-radius:13px; background:var(--surface); border:1px solid var(--border); }
.pp-id { flex:1; min-width:150px; }
.pp-id b { display:block; font-size:13.5px; font-weight:700; }
.pp-id span { display:block; font-size:11px; color:var(--text-faint); margin-top:2px; }
.pp-t { flex-shrink:0; min-width:132px; }
.pp-t .k { display:block; font-size:9px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:2px; }
.pp-t b { display:block; font-size:14px; font-weight:800; letter-spacing:-.015em; color:var(--accent); }
.pp-t.alt b { color:var(--text-muted); font-weight:700; }
.pp-t .s { display:block; font-size:10.5px; color:var(--text-faint); margin-top:2px; }
.pp-fertig { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
  color:var(--pos); padding:6px 13px; border-radius:99px; background:var(--pos-weak); }
.pp-kein { flex:1; min-width:200px; font-size:11.5px; color:var(--text-muted); line-height:1.65; }
.pp-kein b { color:var(--text); }
.pp-note { font-size:11.5px; color:var(--text-faint); line-height:1.75; margin:14px 0 0;
  padding-top:13px; border-top:1px solid var(--border); }
.pp-note b { color:var(--text-muted); }

/* ---------- Disziplin-Serien ---------- */
.sk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.sk-card { position:relative; padding:16px 18px; border-radius:14px;
  background:var(--surface); border:1px solid var(--border); }
.sk-card.gut { border-color:color-mix(in srgb, var(--pos) 38%, transparent);
  background:linear-gradient(150deg, var(--pos-weak), transparent 70%), var(--surface); }
.sk-card.aus { opacity:.72; }
.sk-ic { font-size:20px; line-height:1; }
.sk-card b { display:block; font-family:var(--font-mono); font-size:30px; font-weight:900;
  letter-spacing:-.04em; line-height:1.05; margin:8px 0 4px; }
.sk-card.gut b { color:var(--pos); }
.sk-t { display:block; font-size:12.5px; font-weight:700; }
.sk-s { display:block; font-size:11px; color:var(--text-faint); margin-top:3px; line-height:1.5; }
.sk-best { position:absolute; top:14px; right:14px; font-size:9.5px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:99px;
  background:var(--surface-3); color:var(--text-faint); }
.sk-warn { display:flex; align-items:flex-start; gap:10px; margin:14px 0 0; padding:11px 14px;
  border-radius:11px; font-size:11.5px; line-height:1.7; color:var(--text-muted);
  background:var(--warn-weak); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.sk-warn > svg { color:var(--warn); flex-shrink:0; margin-top:2px; }
.sk-warn b { color:var(--text); }
.sk-note { font-size:11.5px; color:var(--text-faint); line-height:1.75; margin:16px 0 0;
  padding-top:14px; border-top:1px solid var(--border); }
.sk-note b { color:var(--text-muted); }

/* ---------- Eigene Prop Firm ---------- */
.cf-head { display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:12px; padding:14px 16px; border-radius:13px;
  background:linear-gradient(120deg, var(--accent-weak), transparent 65%), var(--card);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.cf-head b { display:block; font-size:14px; font-weight:800; letter-spacing:-.015em; }
.cf-head > div > span { display:block; font-size:11.5px; color:var(--text-muted);
  line-height:1.6; margin-top:3px; max-width:56ch; }
.cf-list { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.cf-row { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border); }
.cf-row b { display:block; font-size:13px; font-weight:700; }
.cf-row em { display:block; font-style:normal; font-size:11px; color:var(--text-faint); margin-top:2px; }
.cf-used { font-style:normal; margin-left:8px; padding:1px 7px; border-radius:99px;
  background:var(--pos-weak); color:var(--pos); font-weight:700; font-size:9.5px; }
.cf-act { display:inline-flex; align-items:center; gap:5px; cursor:pointer; font:inherit;
  font-size:11.5px; font-weight:700; color:var(--text-muted); background:none;
  border:1px solid var(--border); border-radius:8px; padding:5px 10px; transition:all .14s; }
.cf-act:hover { border-color:var(--accent); color:var(--text); }
.cf-act.del:hover { border-color:var(--neg); color:var(--neg); background:var(--neg-weak); }

.cf-prev { display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:18px;
  border-radius:13px; background:var(--surface); border:1px solid var(--border); flex-wrap:wrap; }
.cf-prev b { display:block; font-size:15px; font-weight:800; letter-spacing:-.02em; }
.cf-prev > div > span { display:block; font-size:11.5px; color:var(--text-faint); margin-top:2px; }
.cf-tag { margin-left:auto; flex-shrink:0; font-size:10px; font-weight:800; letter-spacing:.03em;
  padding:4px 11px; border-radius:99px; }
.cf-tag.eu  { background:var(--info-weak, rgba(56,189,248,.14)); color:var(--info, #38bdf8); }
.cf-tag.non { background:var(--warn-weak); color:var(--warn); }

.cf-cols { display:flex; gap:6px; flex-wrap:wrap; }
.cf-col { width:26px; height:26px; border-radius:8px; cursor:pointer; border:2px solid transparent;
  transition:transform .13s, border-color .13s; }
.cf-col:hover { transform:scale(1.1); }
.cf-col.on { border-color:var(--text); transform:scale(1.1); }

.cf-logo { display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-top:18px;
  padding:13px 15px; border-radius:12px; background:var(--surface); border:1px solid var(--border); }
.cf-logo-l { font-size:12px; font-weight:700; color:var(--text-muted); }
.cf-logo img { width:38px; height:38px; border-radius:9px; object-fit:contain;
  background:var(--card); border:1px solid var(--border); padding:3px; }
.cf-logo-btn { cursor:pointer; font-size:11.5px; font-weight:700; color:var(--accent);
  background:var(--accent-weak); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius:8px; padding:6px 12px; }
.cf-logo-del { cursor:pointer; font:inherit; font-size:11.5px; font-weight:700; color:var(--text-faint);
  background:none; border:0; text-decoration:underline; text-underline-offset:2px; }
.cf-logo-h { flex-basis:100%; font-size:10.5px; color:var(--text-faint); line-height:1.6; }
.cf-note { font-size:11.5px; color:var(--text-faint); line-height:1.75; margin:16px 0 0;
  padding-top:14px; border-top:1px solid var(--border); }
.cf-note b { color:var(--text-muted); }

/* ---------- Konto-Auswahl mit Logo ----------
   Das echte <select> liegt unsichtbar darüber: native Bedienung, eigene Optik. */
.acs { position:relative; display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-ctl);
  padding:6px 11px 6px 7px; min-width:0; max-width:300px;
  transition:border-color .15s, background .15s; }
.acs:hover { border-color:var(--accent); }
.acs:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); }
.acs select { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
  font-size:16px; /* verhindert den Auto-Zoom auf iOS */ }
.acs-all { display:grid; place-items:center; border-radius:8px; flex-shrink:0;
  background:var(--accent-weak); color:var(--accent); }
.acs-t { min-width:0; display:flex; flex-direction:column; gap:1px; }
.acs-t b { font-size:12.5px; font-weight:700; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acs-t em { font-style:normal; font-family:var(--font-mono); font-size:10px;
  color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acs-ph { flex-shrink:0; font-size:8.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 7px; border-radius:99px;
  background:var(--surface-3); color:var(--text-muted); }
.acs-ph.ph-funded { background:var(--pos-weak); color:var(--pos); }
.acs-ph.ph-live { background:color-mix(in srgb, var(--violet, #a78bfa) 18%, transparent);
  color:var(--violet, #a78bfa); }
.acs-c { flex-shrink:0; color:var(--text-faint); }

/* ============================================================
   Einstellungen
   ============================================================ */
/* Vollständigkeits-Ring im Seitenkopf */
.st-ring { display:flex; align-items:center; gap:11px; flex-shrink:0;
  padding:9px 15px 9px 10px; border-radius:13px;
  background:var(--surface); border:1px solid var(--border); }
.st-ring.done { border-color:color-mix(in srgb, var(--pos) 34%, transparent); background:var(--pos-weak); }
.st-ring svg { transform:rotate(-90deg); flex-shrink:0; }
.st-ring circle { fill:none; stroke-width:4; }
.st-ring circle.bg { stroke:var(--surface-3); }
.st-ring circle.fg { stroke:var(--accent); stroke-linecap:round;
  /* Umfang bei r=16 ist ~100,5 — deshalb lässt sich der Prozentwert direkt
     als dasharray verwenden, ohne Umrechnung. */
  pathLength:100; transition:stroke-dasharray .5s var(--ease); }
.st-ring.done circle.fg { stroke:var(--pos); }
.st-ring b { display:block; font-family:var(--font-mono); font-size:15px; font-weight:800;
  letter-spacing:-.02em; line-height:1.1; }
.st-ring em { display:block; font-style:normal; font-size:10.5px; color:var(--text-faint); margin-top:2px; }

/* Reiter mit Untertitel statt vier gleicher Knöpfe */
.st-tabs { display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:9px; margin-bottom:22px; }
.st-tab { display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer;
  font:inherit; color:var(--text); background:var(--surface);
  border:1px solid var(--border); border-radius:13px; padding:12px 14px;
  transition:border-color .15s, background .15s, transform .15s; }
.st-tab:hover { border-color:var(--border-strong); transform:translateY(-1px); }
.st-tab.on { border-color:var(--accent); background:var(--accent-weak); }
.st-tab-ic { display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  flex-shrink:0; background:var(--surface-3); color:var(--text-faint); transition:all .15s; }
.st-tab.on .st-tab-ic { background:var(--accent); color:#fff; }
.st-tab b { display:block; font-size:13px; font-weight:700; letter-spacing:-.01em; }
.st-tab em { display:block; font-style:normal; font-size:10.5px; color:var(--text-faint);
  margin-top:2px; line-height:1.45; }

/* Einheitliche Breite über alle Reiter — vorher sprang die Spalte zwischen
   560, 720 und 800 Pixeln, sobald man den Reiter wechselte. */
.st-body { max-width:760px; }
.st-body.wide { max-width:960px; }

/* Was noch fehlt */
.st-todo { display:flex; align-items:flex-start; gap:11px; padding:13px 15px; margin-bottom:16px;
  border-radius:12px; font-size:12.5px; color:var(--text-muted);
  background:var(--warn-weak); border:1px solid color-mix(in srgb, var(--warn) 32%, transparent); }
.st-todo > svg { color:var(--warn); flex-shrink:0; margin-top:2px; }
.st-todo > div > b { display:block; color:var(--text); margin-bottom:8px; }
.st-todo-list { display:flex; flex-wrap:wrap; gap:7px; }
.st-todo-list > span { display:inline-flex; flex-direction:column; gap:1px; padding:5px 11px;
  border-radius:8px; background:var(--card); border:1px solid var(--border); }
.st-todo-list b { font-size:11.5px; font-weight:700; color:var(--text); }
.st-todo-list em { font-style:normal; font-size:10px; color:var(--text-faint); }

.st-hint { display:block; font-size:11px; line-height:1.6; margin-top:5px; color:var(--text-faint); }
.st-hint em { font-style:normal; }
.st-plz { display:inline-block; margin-top:7px; background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:11.5px; font-weight:700; color:var(--accent);
  text-decoration:underline; text-underline-offset:2px; }
.st-plz:disabled { color:var(--text-faint); cursor:default; text-decoration:none; }

/* Speicherleiste klebt unten — der Knopf ist da, wo man tippt */
.st-save { position:sticky; bottom:0; z-index:5; display:flex; align-items:center;
  justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:18px;
  padding:12px 16px; border-radius:13px;
  background:color-mix(in srgb, var(--card) 92%, transparent);
  border:1px solid var(--border); backdrop-filter:blur(10px); }
.st-save > span { font-size:12.5px; font-weight:600; color:var(--text-faint); }
.st-save.on { border-color:var(--accent); box-shadow:0 8px 28px rgba(0,0,0,.24); }
.st-save.on > span { color:var(--accent); font-weight:700; }

/* Datenbestand */
.st-counts { display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:8px; margin-top:14px; }
.st-count { display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:11px 13px; border-radius:11px; background:var(--surface); border:1px solid var(--border); }
.st-count svg { color:var(--text-faint); }
.st-count b { font-family:var(--font-mono); font-size:19px; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.st-count span { font-size:10.5px; color:var(--text-faint); }
.st-count.empty { opacity:.5; }

.st-danger { border-color:color-mix(in srgb, var(--neg) 40%, transparent) !important;
  background:linear-gradient(150deg, var(--neg-weak), transparent 65%), var(--card) !important; }
.st-danger .card-title { color:var(--neg); }

.st-info { display:flex; align-items:flex-start; gap:11px; padding:13px 15px; margin-bottom:14px;
  border-radius:12px; font-size:12px; line-height:1.7; color:var(--text-muted);
  background:var(--surface); border:1px solid var(--border); }
.st-info > svg { color:var(--text-faint); flex-shrink:0; margin-top:2px; }
.st-info b { color:var(--text); }
.st-own { background:var(--accent-weak); }
.st-own-tag { display:inline-block; font-style:normal; margin-left:8px; padding:2px 8px;
  border-radius:99px; font-size:9.5px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; background:var(--pos-weak); color:var(--pos); }

/* ---------- Krankenkassen-Rechner ---------- */
.kv-in { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:14px; }
.kv-kg { display:flex; align-items:flex-start; gap:11px; padding:12px 14px; margin-bottom:18px;
  border-radius:11px; background:var(--surface); border:1px solid var(--border); cursor:pointer; }
.kv-kg b { display:block; font-size:12.5px; font-weight:700; }
.kv-kg em { display:block; font-style:normal; font-size:11.5px; color:var(--text-faint);
  line-height:1.6; margin-top:3px; }
.kv-hero { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-bottom:14px;
  background:var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
@media (max-width:720px) { .kv-hero { grid-template-columns:1fr; } }
.kv-hero > div { background:var(--card); padding:16px 18px; }
.kv-hero .k { display:block; font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }
.kv-hero .num { display:block; font-family:var(--font-mono); font-size:25px; font-weight:900;
  letter-spacing:-.03em; line-height:1.1; }
.kv-hero .s { display:block; font-size:11.5px; color:var(--text-faint); margin-top:5px; line-height:1.5; }
.kv-warn, .kv-note { display:flex; align-items:flex-start; gap:10px; padding:12px 15px;
  border-radius:11px; font-size:12px; line-height:1.7; margin-bottom:14px; color:var(--text-muted); }
.kv-warn { background:var(--warn-weak); border:1px solid color-mix(in srgb, var(--warn) 34%, transparent); }
.kv-warn > svg { color:var(--warn); flex-shrink:0; margin-top:2px; }
.kv-note { background:var(--surface); border:1px solid var(--border); }
.kv-note > svg { color:var(--text-faint); flex-shrink:0; margin-top:2px; }
.kv-warn b, .kv-note b { color:var(--text); }
.kv-break { margin:18px 0; }
.kv-break-h { font-size:12.5px; font-weight:800; margin-bottom:9px; }
.kv-bar { display:flex; height:14px; border-radius:99px; overflow:hidden; background:var(--surface-3); }
.kv-bar i { display:block; height:100%; }
.kv-leg { display:flex; gap:18px; flex-wrap:wrap; margin-top:9px; font-size:11.5px; color:var(--text-muted); }
.kv-leg span { display:inline-flex; align-items:center; gap:7px; }
.kv-leg b { width:9px; height:9px; border-radius:3px; display:inline-block; }
.kv-cmp { display:flex; align-items:flex-start; gap:11px; padding:13px 16px; border-radius:12px;
  font-size:12.5px; line-height:1.7; margin-top:6px; color:var(--text-muted); }
.kv-cmp.ok  { background:var(--pos-weak); border:1px solid color-mix(in srgb, var(--pos) 32%, transparent); }
.kv-cmp.bad { background:var(--warn-weak); border:1px solid color-mix(in srgb, var(--warn) 32%, transparent); }
.kv-cmp.ok > svg  { color:var(--pos); flex-shrink:0; margin-top:2px; }
.kv-cmp.bad > svg { color:var(--warn); flex-shrink:0; margin-top:2px; }
.kv-cmp b { color:var(--text); }
.kv-src { font-size:10.5px; color:var(--text-faint); line-height:1.75; margin:18px 0 0;
  padding-top:14px; border-top:1px solid var(--border); }
.kv-src b { color:var(--text-muted); }

/* ---------- Prüfer-Ordner ---------- */
.gb-top, .gb-warn { display:flex; align-items:flex-start; gap:11px; padding:13px 15px;
  border-radius:12px; font-size:12px; line-height:1.7; margin-bottom:14px; color:var(--text-muted); }
.gb-top { background:var(--accent-weak); border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
.gb-top > svg { color:var(--accent); flex-shrink:0; margin-top:2px; }
.gb-warn { background:var(--warn-weak); border:1px solid color-mix(in srgb, var(--warn) 34%, transparent); }
.gb-warn > svg { color:var(--warn); flex-shrink:0; margin-top:2px; }
.gb-top b, .gb-warn b { color:var(--text); }
.gb-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; margin-top:18px; }
.gb-card { background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:15px 17px; }
.gb-h { font-size:12.5px; font-weight:800; margin-bottom:11px; }
.gb-ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.gb-ul li { display:flex; flex-direction:column; gap:2px; padding-left:15px; position:relative; }
.gb-ul li::before { content:"›"; position:absolute; left:0; color:var(--accent); font-weight:800; }
.gb-ul b { font-family:var(--font-mono); font-size:11.5px; font-weight:700; }
.gb-ul span { font-size:11px; color:var(--text-faint); }
.gb-fr { display:flex; flex-direction:column; gap:9px; }
.gb-fr-row { display:flex; align-items:center; gap:12px; }
.gb-fr-j { flex-shrink:0; width:48px; text-align:center; padding:5px 0; border-radius:9px;
  background:var(--card); border:1px solid var(--border); }
.gb-fr-j b { display:block; font-family:var(--font-mono); font-size:17px; font-weight:900; line-height:1.1; }
.gb-fr-j em { display:block; font-style:normal; font-size:8.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-faint); }
.gb-fr-row > span:last-child b { display:block; font-size:12px; font-weight:700; }
.gb-fr-row > span:last-child span { display:block; font-size:11px; color:var(--text-faint); margin-top:1px; }
.gb-note { font-size:10.5px; color:var(--text-faint); line-height:1.7; margin:13px 0 0; }

/* ---------- Auszahlungs-Radar ---------- */
.pr-sum { text-align:right; flex-shrink:0; }
.pr-sum b { display:block; font-family:var(--font-mono); font-size:26px; font-weight:900;
  letter-spacing:-.03em; line-height:1; color:var(--accent); }
.pr-sum span { display:block; font-size:10px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-faint); margin-top:3px; }
.pr-sum em { display:block; font-style:normal; font-size:10.5px; color:var(--text-faint); margin-top:2px; }
.pr-top, .pr-alert { display:flex; align-items:flex-start; gap:11px; padding:13px 15px;
  border-radius:12px; font-size:12px; line-height:1.7; color:var(--text-muted); }
.pr-top { background:var(--surface); border:1px solid var(--border); margin-bottom:16px; }
.pr-top > svg { color:var(--text-faint); flex-shrink:0; margin-top:2px; }
.pr-alert { background:var(--warn-weak); border:1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  margin-top:14px; }
.pr-alert > svg { color:var(--warn); flex-shrink:0; margin-top:2px; }
.pr-top b, .pr-alert b { color:var(--text); }
.pr-list { display:flex; flex-direction:column; gap:9px; }
.pr-row { position:relative; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 16px 17px; border-radius:13px; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); }
.pr-id { flex:1; min-width:150px; }
.pr-id b { display:block; font-size:14px; font-weight:800; letter-spacing:-.01em; }
.pr-id > span { display:block; font-size:11.5px; color:var(--text-faint); margin-top:2px; }
.pr-id em { font-style:normal; font-weight:700; }
.pr-metric { flex-shrink:0; min-width:112px; }
.pr-metric .k { display:block; font-size:9px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:3px; }
.pr-metric .v { display:block; font-family:var(--font-mono); font-size:15px; font-weight:800;
  letter-spacing:-.02em; line-height:1.2; }
.pr-metric .v.tone-ok   { color:var(--pos); }
.pr-metric .v.tone-warn { color:var(--warn); }
.pr-metric .v.tone-bad  { color:var(--neg); }
.pr-metric .s { display:block; font-size:10.5px; color:var(--text-faint); margin-top:2px; }
/* Auszahlungsquote als dünner Streifen am unteren Rand der Zeile */
.pr-quote { position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--surface-3); }
.pr-quote i { display:block; height:100%; }
.pr-note { font-size:11.5px; color:var(--text-faint); line-height:1.7; margin:14px 0 0; }
.pr-note b { color:var(--text-muted); }

/* ---------- Gewerbe-Lotse ---------- */
.gw-top { display:flex; align-items:flex-start; gap:11px; padding:13px 15px; margin-bottom:18px;
  border-radius:12px; font-size:12px; line-height:1.7; color:var(--text-muted);
  background:var(--accent-weak); border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.gw-top > svg { color:var(--accent); flex-shrink:0; margin-top:2px; }
.gw-top b { color:var(--text); }
.gw-list { display:flex; flex-direction:column; gap:9px; }
.gw-k { display:flex; gap:13px; padding:14px 16px; border-radius:13px;
  background:var(--surface); border:1px solid var(--border); transition:border-color .15s; }
.gw-k.done { border-color:color-mix(in srgb, var(--accent) 34%, transparent); }
.gw-n { width:24px; height:24px; border-radius:8px; flex-shrink:0; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:12px; font-weight:800;
  background:var(--surface-3); color:var(--text-faint); }
.gw-k.done .gw-n { background:var(--accent); color:#fff; }
.gw-t { font-size:13.5px; font-weight:800; letter-spacing:-.01em; }
.gw-f { font-size:12.5px; color:var(--text); line-height:1.6; margin:4px 0 0; }
.gw-h { font-size:11.5px; color:var(--text-faint); line-height:1.65; margin:6px 0 0; }
.gw-btns { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:11px; }
.gw-b { cursor:pointer; font:inherit; font-size:12px; font-weight:700; padding:6px 15px;
  border-radius:99px; background:var(--card); border:1px solid var(--border);
  color:var(--text-muted); transition:all .14s; }
.gw-b:hover { color:var(--text); border-color:var(--text-faint); }
.gw-b.on.v-ja     { background:var(--pos-weak);  border-color:var(--pos);  color:var(--pos); }
.gw-b.on.v-nein   { background:var(--neg-weak);  border-color:var(--neg);  color:var(--neg); }
.gw-b.on.v-unklar { background:var(--warn-weak); border-color:var(--warn); color:var(--warn); }
.gw-state { display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:14px;
  padding:10px 15px; border-radius:10px; font-size:12px; font-weight:600;
  background:var(--surface); border:1px solid var(--border); color:var(--text-muted); }
.gw-sec { margin-top:22px; padding-top:20px; border-top:1px solid var(--border); }
.gw-sec-h { font-size:13px; font-weight:800; margin-bottom:12px; }
.gw-plz { max-width:220px; margin-bottom:14px; }
.gw-links { display:flex; flex-direction:column; gap:9px; }
.gw-link { display:flex; align-items:flex-start; gap:12px; padding:13px 15px; border-radius:12px;
  text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--border); transition:border-color .15s, transform .15s; }
.gw-link:hover { border-color:var(--accent); transform:translateX(2px); }
.gw-li { font-size:19px; flex-shrink:0; line-height:1.2; }
.gw-link b { display:block; font-size:13px; font-weight:700; }
.gw-link em { display:block; font-style:normal; font-size:11.5px; color:var(--text-faint);
  line-height:1.65; margin-top:3px; }
.gw-note { font-size:11px; color:var(--text-faint); line-height:1.7; margin:14px 0 0; }

/* ---------- Herkunft des Umrechnungskurses ---------- */
.py-fx { display:flex; align-items:flex-start; gap:9px; margin-top:14px;
  padding:10px 13px; border-radius:10px; font-size:12px; line-height:1.6;
  background:var(--pos-weak); border:1px solid color-mix(in srgb, var(--pos) 32%, transparent);
  color:var(--text-muted); }
.py-fx > svg { color:var(--pos); flex-shrink:0; margin-top:1px; }
.py-fx b { color:var(--text); }
.py-fx.warn { background:var(--warn-weak); border-color:color-mix(in srgb, var(--warn) 34%, transparent); }
.py-fx.warn > svg { color:var(--warn); }
.py-fx-reset { display:inline; background:none; border:0; padding:0; margin-left:7px; cursor:pointer;
  font:inherit; font-weight:700; color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* ---------- Plattform-Marke ----------
   Wird im Firmenvergleich und im Konto-Dialog gebraucht — deshalb hier und
   nicht im seiteneigenen Stil, der nur beim Firmenvergleich eingehängt wird. */
.fc-plat { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 4px;
  border-radius:8px; font-size:10.5px; font-weight:600; color:var(--text-muted);
  background:color-mix(in srgb, var(--pc) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--pc) 32%, transparent); }
.fc-plat i { display:grid; place-items:center; width:17px; height:17px; border-radius:5px; flex-shrink:0;
  font-style:normal; font-family:var(--font-mono); font-size:8.5px; font-weight:800; letter-spacing:-.02em;
  background:var(--pc); color:#fff; }

/* ============================================================
   Account hinzufügen
   ============================================================ */
.aa-pick-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }

/* Firmenauswahl: jede Kachel trägt die drei Angaben, nach denen man eine
   Prop Firm tatsächlich auseinanderhält — Stufen, Drawdown-Typ, Split. */
.aa-firms { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:9px; }
.aa-firm {
  position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); gap:11px;
  align-items:center; width:100%; text-align:left; font:inherit; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:11px 12px; cursor:pointer; transition:border-color .15s, background .15s, transform .15s;
}
.aa-firm:hover { border-color:var(--border-strong, var(--accent)); transform:translateY(-1px); }
.aa-firm.on { border-color:var(--accent); background:var(--accent-weak); }
.aa-firm-id b { display:block; font-size:13px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:18px; }
.aa-firm-sub { display:block; font-size:10.5px; color:var(--text-faint); margin-top:1px; }
.aa-firm-sub em { font-style:normal; margin-left:6px; padding:1px 6px; border-radius:99px;
  background:var(--pos-weak, rgba(45,212,143,.14)); color:var(--pos); font-weight:700; font-size:9px; }
.aa-firm-facts { grid-column:2; display:flex; gap:5px; flex-wrap:wrap; margin-top:7px; }
.aa-firm-facts i { font-style:normal; font-size:9.5px; font-weight:700; padding:2px 7px;
  border-radius:5px; background:var(--surface-3); color:var(--text-muted); white-space:nowrap; }
.aa-firm-facts i.warn { background:var(--warn-weak, rgba(251,191,36,.14)); color:var(--warn); }
.aa-firm-facts i.ok   { background:var(--pos-weak, rgba(45,212,143,.13)); color:var(--pos); }
.aa-firm-chk { position:absolute; top:9px; right:9px; width:19px; height:19px; border-radius:6px;
  display:grid; place-items:center; background:var(--accent); color:#fff; }

.aa-note { font-size:11.5px; color:var(--text-faint); line-height:1.65; margin:16px 0 0; }
.aa-note b { color:var(--text-muted); }

/* Kopfzeile in Schritt 2: welche Firma gilt und wie man sie wechselt */
.aa-firmbar { display:flex; align-items:center; gap:12px; margin-bottom:18px;
  padding:11px 13px; border-radius:12px; background:var(--surface); border:1px solid var(--border); }
.aa-firmbar b { display:block; font-size:14px; font-weight:700; }
.aa-firmbar span span { display:block; font-size:11.5px; color:var(--text-faint); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aa-change { margin-left:auto; flex-shrink:0; background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:12px; font-weight:700; color:var(--accent);
  text-decoration:underline; text-underline-offset:2px; }

/* Abschnitte statt einer Wand aus elf Feldern */
.aa-sec { padding:18px 0; border-top:1px solid var(--border); }
.aa-sec:first-of-type { border-top:0; padding-top:0; }
.aa-sec-h { display:flex; align-items:center; gap:9px; margin-bottom:14px;
  font-size:13px; font-weight:800; letter-spacing:-.01em; }
.aa-sec-h > span { width:20px; height:20px; border-radius:6px; flex-shrink:0;
  display:grid; place-items:center; font-family:var(--font-mono); font-size:11px; font-weight:800;
  background:var(--accent-weak); color:var(--accent); }
.aa-sec-h em { font-style:normal; margin-left:auto; font-size:10.5px; font-weight:600;
  color:var(--text-faint); text-align:right; }
.aa-lbl { display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:7px; }

/* Erklärzeile unter einem Abschnitt */
.aa-inline { margin:12px 0 0; padding:9px 12px; border-radius:9px;
  background:var(--surface); border:1px solid var(--border);
  font-size:11.5px; color:var(--text-muted); line-height:1.65; }
.aa-inline b { color:var(--text); }

/* Phase als drei erklärte Karten statt eines Auswahlfelds mit vier Zeilen */
.aa-phases { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
@media (max-width:640px) { .aa-phases { grid-template-columns:1fr; } }
.aa-phase { text-align:left; font:inherit; color:var(--text); cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:13px 14px;
  transition:border-color .15s, background .15s; }
.aa-phase:hover { border-color:var(--accent); }
.aa-phase.on { border-color:var(--accent); background:var(--accent-weak); }
.aa-phase svg { color:var(--text-faint); margin-bottom:7px; display:block; }
.aa-phase.on svg { color:var(--accent); }
.aa-phase b { display:block; font-size:13.5px; font-weight:700; margin-bottom:3px; }
.aa-phase span { display:block; font-size:11px; color:var(--text-faint); line-height:1.55; }

.aa-subphase { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px;
  font-size:12px; font-weight:600; color:var(--text-muted); }
.aa-subphase em { font-style:normal; font-size:11px; color:var(--text-faint); margin-left:4px; }

/* Regelfeld: Eingabe, Einheit und die Übersetzung in die andere Einheit */
.aa-rules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; }
@media (max-width:680px) { .aa-rules { grid-template-columns:1fr; } }
.aa-rule-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.aa-rule label { display:block; font-size:12px; font-weight:600; color:var(--text-muted); }

/* Prozent oder Betrag — Futures-Anbieter nennen ihre Grenzen in Dollar */
.aa-unitsw { display:inline-flex; gap:2px; padding:2px; border-radius:8px;
  background:var(--surface-3); border:1px solid var(--border); flex-shrink:0; }
.aa-unitsw button { border:0; background:none; cursor:pointer; font-family:var(--font-mono);
  font-size:11px; font-weight:800; line-height:1; color:var(--text-faint);
  padding:4px 9px; border-radius:6px; transition:background .13s, color .13s; }
.aa-unitsw button:hover { color:var(--text); }
.aa-unitsw button.on { background:var(--card); color:var(--accent); box-shadow:var(--shadow); }

/* Plattform-Kacheln statt Auswahlliste */
.aa-plats { display:flex; gap:7px; flex-wrap:wrap; }
.aa-plats.dim { margin-top:8px; }
.aa-plat {
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:6px 13px 6px 6px; border-radius:10px; cursor:pointer;
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--text-muted);
  background:var(--surface); border:1px solid var(--border);
  transition:border-color .15s, color .15s, background .15s;
}
.aa-plat i { display:grid; place-items:center; width:24px; height:24px; border-radius:7px; flex-shrink:0;
  font-style:normal; font-family:var(--font-mono); font-size:10px; font-weight:800; letter-spacing:-.02em;
  background:var(--pc); color:#fff; }
.aa-plat:hover { border-color:var(--pc); color:var(--text); }
.aa-plat.on { border-color:var(--pc); color:var(--text);
  background:color-mix(in srgb, var(--pc) 14%, transparent);
  box-shadow:0 0 0 1px var(--pc); }
/* Punkt = von der gewählten Firma angeboten */
.aa-plat u { position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%;
  background:var(--pos); border:2px solid var(--card); text-decoration:none; }
.aa-plats.dim .aa-plat { opacity:.62; }
.aa-plats.dim .aa-plat:hover, .aa-plats.dim .aa-plat.on { opacity:1; }
.aa-plat-sep { display:flex; align-items:center; gap:10px; margin:11px 0 0; }
.aa-plat-sep span { font-size:10.5px; color:var(--text-faint); }
.aa-plat-sep::after { content:""; flex:1; height:1px; background:var(--border); }
.aa-rule-in { position:relative; }
.aa-rule-in .input { padding-right:32px; }
.aa-unit { position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:12px; font-weight:700; color:var(--text-faint); pointer-events:none; }
.aa-rule-hint { display:block; font-size:11px; margin-top:5px; line-height:1.5; }
.aa-rule-hint b { font-family:var(--font-mono); font-weight:700; color:var(--accent2, var(--accent)); }

/* Bestätigung */
.aa-sum { display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:14px;
  border-radius:14px; border:1px solid var(--accent);
  background:linear-gradient(120deg, var(--accent-weak), transparent 70%), var(--surface); }
.aa-sum-t { font-size:16.5px; font-weight:800; letter-spacing:-.02em; }
.aa-sum-s { font-size:12.5px; color:var(--text-muted); margin-top:2px; }
.aa-rows { border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.aa-row { display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:10px 15px; font-size:12.5px; border-bottom:1px solid var(--border); }
.aa-row:last-child { border-bottom:0; }
.aa-row:nth-child(odd) { background:var(--surface); }
.aa-row > span { color:var(--text-muted); }
.aa-row > b { font-family:var(--font-mono); font-weight:700; text-align:right; }

/* ---------- Handelsmonat ---------- */
/* Ohne das schrumpft der Titelblock auf Minimalbreite und die Unterzeile
   bricht mitten im Satz um, obwohl daneben Platz frei ist. */
.tm-card > .card-head { flex-wrap:wrap; }
.tm-card > .card-head > div:first-child { flex:1 1 210px; min-width:0; }
.tm-nav { display:flex; align-items:center; gap:4px; flex-shrink:0; margin-left:auto; }
.tm-nav span { font-size:12.5px; font-weight:700; min-width:104px; text-align:center; }
.tm-nav button {
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--border); color:var(--text-muted); cursor:pointer;
  transition:border-color .15s, color .15s;
}
.tm-nav button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.tm-nav button:disabled { opacity:.35; cursor:default; }

.tm-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:6px; }
.tm-dow span { font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint); text-align:center; }
.tm-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.tm-c {
  position:relative; aspect-ratio:1/.78; border-radius:8px;
  border:1px solid var(--border); background:var(--surface);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
  padding:5px 6px; overflow:hidden;
}
.tm-c.empty { border-color:transparent; background:none; }
.tm-c b { font-size:11px; font-weight:700; color:var(--text-faint); line-height:1; }
.tm-c.has b { color:var(--text); }
/* Trade-Anzahl klein in der Ecke — sie erklärt, warum ein Tag stark gefärbt ist */
.tm-c i { align-self:flex-end; font-style:normal; font-family:var(--font-mono);
  font-size:9.5px; font-weight:700; color:var(--text-muted); line-height:1; }
.tm-c.has i { color:var(--text); opacity:.72; }

.tm-hint { display:flex; align-items:center; gap:8px; margin:11px 0 0;
  font-size:11px; color:var(--text-faint); line-height:1.5; }
.tm-hint-mark { width:12px; height:12px; border-radius:3px; flex-shrink:0;
  border:1px solid var(--border); background:var(--surface); position:relative; }
.tm-hint-mark::after { content:""; position:absolute; top:0; right:0;
  border-width:0 7px 7px 0; border-style:solid;
  border-color:transparent var(--warn) transparent transparent; }
.tm-c.today { box-shadow:0 0 0 1.5px var(--accent); }
/* Gemischte Währungen: die Ecke markiert, dass hier zwei Beträge stehen */
.tm-c.mix::after { content:""; position:absolute; top:0; right:0; border-width:0 9px 9px 0;
  border-style:solid; border-color:transparent var(--warn) transparent transparent; }

.tm-foot { display:flex; flex-wrap:wrap; gap:10px 26px; align-items:flex-end;
  margin-top:14px; padding-top:13px; border-top:1px solid var(--border); }
.tm-foot > span { display:flex; flex-direction:column; gap:2px; }
.tm-foot em { font-style:normal; font-size:9.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint); }
.tm-foot b { font-family:var(--font-mono); font-size:15px; font-weight:800; letter-spacing:-.02em; }
.tm-foot > span > i { font-style:normal; font-size:10.5px; color:var(--text-faint); }
.tm-dowbars { margin-left:auto; }
.tm-bars { display:flex; align-items:flex-end; gap:5px; height:34px; margin-top:3px; }
.tm-bars > span { display:flex; flex-direction:column; align-items:center; gap:3px; justify-content:flex-end; }
.tm-bars i { display:block; width:9px; border-radius:2px; }
.tm-bars u { text-decoration:none; font-size:8.5px; font-weight:700; color:var(--text-faint); }
/* Unter 1080px wird das Monatsraster neben dem Kreisdiagramm zu schmal —
   die Tageszellen fielen unter 34px und die Zahl darin wurde unlesbar. */
@media (max-width:1080px) { .dash-month { grid-template-columns:1fr !important; } }

.dash-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.dash-pair > .card { display:flex; flex-direction:column; max-height:520px; }
.dash-pair > .card > .card-head { flex-shrink:0; }
.dash-scroll { overflow-y:auto; flex:1; min-height:0; margin:0 -4px; padding:0 4px; }
.dash-scroll::-webkit-scrollbar { width:6px; }
.dash-scroll::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; }
.dash-scroll::-webkit-scrollbar-track { background:transparent; }
@media (max-width:980px) { .dash-pair { grid-template-columns:1fr; } .dash-pair > .card { max-height:none; } }

/* Gesperrte Segment-Schalter (Pro-Funktionen) */
.seg button.seg-lock { opacity:.55; cursor:pointer; }
.seg button.seg-lock:hover { opacity:.85; color:var(--accent2); }

/* Account-Zeile: absoluter P&L unter der Prozentangabe */
.dash-acc-abs { font-size: 11px; font-weight: 700; color: var(--faint); margin-top: 3px; }

/* ── Seiten-Werkzeugleiste (Accounts) ─────────────────────────────────────
   Eine Leiste statt einer Karte: Phasen als Chips mit Anzahl, rechts die
   freien Filter. Spart Höhe und zeigt die Verteilung auf einen Blick. */
.pg-tools {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:10px 12px;
}
.pg-chips { display:flex; gap:4px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border);
            border-radius:11px; padding:3px; }
.pg-chip {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:transparent; border:0; border-radius:8px; padding:6px 11px;
  font-size:12.5px; font-weight:700; color:var(--muted); white-space:nowrap;
  transition:background .14s ease, color .14s ease;
}
.pg-chip:hover { background:var(--surface-3, rgba(127,127,127,.12)); color:var(--text); }
.pg-chip .n {
  font-family:var(--font-mono); font-size:10.5px; font-weight:800; line-height:1;
  padding:3px 5px; border-radius:5px; background:var(--surface-3, rgba(127,127,127,.16)); color:var(--faint);
}
.pg-chip.on { background:var(--card); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.22); }
.pg-chip.on .n { background:var(--accent); color:#fff; }
.pg-chip.on.ph-funded    .n { background:var(--pos); }
.pg-chip.on.ph-live      .n { background:var(--info, var(--accent)); }
.pg-chip.on.ph-failed    .n { background:var(--neg); }
.pg-chip.on.ph-cancelled .n { background:var(--faint); }
.pg-fill { display:flex; align-items:center; gap:10px; flex:1; min-width:230px; flex-wrap:wrap; }
.pg-search { flex:1; min-width:160px; }
@media (max-width:760px) { .pg-chips { width:100%; } }

/* ── Trade-Qualität: Sterne, Fehler-Tags ────────────────────────────────── */
.stars { display:inline-flex; gap:2px; }
.star {
  background:none; border:0; padding:0 1px; cursor:pointer; line-height:1;
  color:var(--border); transition:color .12s ease, transform .12s ease;
}
.star.on { color:#f5b301; }
.star:not(.ro):hover { transform:scale(1.15); }
.star.ro { cursor:default; }

.tagwrap { display:flex; flex-wrap:wrap; gap:6px; }
.tagchip {
  cursor:pointer; border:1px solid var(--border); background:var(--surface);
  color:var(--muted); border-radius:999px; padding:5px 11px;
  font-size:12px; font-weight:600; white-space:nowrap;
  transition:border-color .14s ease, color .14s ease, background .14s ease;
}
.tagchip:hover { border-color:var(--faint); color:var(--text); }
.tagchip.on-neg {
  background:color-mix(in srgb, var(--neg) 16%, transparent);
  border-color:var(--neg); color:var(--neg);
}
.tagchip.on-pos {
  background:color-mix(in srgb, var(--pos) 16%, transparent);
  border-color:var(--pos); color:var(--pos);
}
.tagchip.sm { padding:3px 8px; font-size:11px; }

/* Ehrlicher Hinweis, wenn eine Auswertung an ihre Grenze stößt */
.note-warn {
  display:flex; align-items:flex-start; gap:10px;
  background:color-mix(in srgb, var(--warn, #e0a800) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--warn, #e0a800) 42%, transparent);
  color:var(--text); border-radius:12px; padding:11px 14px;
  font-size:12.5px; line-height:1.6;
}
.note-warn > svg { flex:none; margin-top:1px; color:var(--warn, #e0a800); }

/* ══════════════════════════════════════════════════════════════════════
   Dashboard — Tages-Cockpit, offene Punkte, Kennzahlenleiste
   ══════════════════════════════════════════════════════════════════════ */
.dh-hero {
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr); gap:0;
  border:1px solid var(--border); border-radius:20px; overflow:hidden;
  background:
    radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--card);
}
.dh-left { padding:24px 26px 22px; min-width:0; }
.dh-greet {
  font-size:15px; font-weight:800; letter-spacing:-.01em;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:18px;
}
.dh-greet span { font-size:12.5px; font-weight:600; color:var(--faint); letter-spacing:0; }

.dh-big { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.dh-big > span {
  font-family:var(--font-mono); font-weight:900; font-size:40px; line-height:1; letter-spacing:-.035em;
}
.dh-big em {
  font-style:normal; font-family:var(--font-mono); font-size:13px; font-weight:800;
  padding:4px 9px; border-radius:8px; background:var(--surface-3); white-space:nowrap;
}
.dh-biglbl { font-size:12.5px; color:var(--faint); margin-top:9px; }

/* 30-Tage-Band */
.dh-band {
  display:flex; align-items:flex-end; gap:3px; height:34px; margin-top:22px;
}
.dh-band i {
  display:block; flex:1; min-width:3px; border-radius:2px; background:var(--border);
  transition:height .4s cubic-bezier(.4,0,.2,1);
}
.dh-band i.up { background:var(--pos); }
.dh-band i.dn { background:var(--neg); }
.dh-band i.no { background:var(--surface-3); }
.dh-bandlbl { font-size:11px; color:var(--faint); margin-top:9px; }

/* Heute-Panel */
.dh-today {
  padding:24px 26px 22px; border-left:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  display:flex; flex-direction:column;
}
.dh-today-h {
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); margin-bottom:16px;
}
.dh-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.dh-tiles > div { display:flex; flex-direction:column; gap:5px; min-width:0; }
.dh-tiles .k {
  font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dh-tiles .v {
  font-family:var(--font-mono); font-weight:900; font-size:19px; letter-spacing:-.025em; line-height:1.15;
}
.dh-risk {
  height:6px; border-radius:99px; background:var(--surface-3);
  overflow:hidden; margin-top:auto; margin-bottom:8px; padding-top:0;
}
.dh-risk > i { display:block; height:100%; border-radius:99px; transition:width .5s ease; }
.dh-risklbl { font-size:11px; color:var(--faint); line-height:1.55; margin-top:14px; }
.dh-risk + .dh-risklbl { margin-top:0; }

@media (max-width:1000px) {
  .dh-hero { grid-template-columns:1fr; }
  .dh-today { border-left:0; border-top:1px solid var(--border); }
}
@media (max-width:560px) { .dh-big > span { font-size:31px; } }

/* Offene Punkte */
.dh-todos { display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:10px; }
.dh-todo {
  display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:12px; align-items:center;
  text-align:left; cursor:pointer; font:inherit; width:100%;
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:13px 15px;
  border-left:3px solid var(--border);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.dh-todo:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.16); }
.dh-todo > svg { color:var(--faint); flex:none; }
.dh-todo:hover > svg { color:var(--accent); }
.dh-todo .ic {
  display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  font-size:15px; font-weight:800;
}
.dh-todo .tx { min-width:0; }
.dh-todo .tx b { display:block; font-size:13px; font-weight:700; line-height:1.35; }
.dh-todo .tx span { display:block; font-size:11.5px; color:var(--faint); margin-top:3px; line-height:1.5; }
.dh-todo.tone-accent { border-left-color:var(--accent); }
.dh-todo.tone-accent .ic { background:var(--accent-weak); color:var(--accent); }
.dh-todo.tone-warn   { border-left-color:var(--warn); }
.dh-todo.tone-warn   .ic { background:color-mix(in srgb, var(--warn) 15%, transparent); color:var(--warn); }
.dh-todo.tone-violet { border-left-color:var(--violet); }
.dh-todo.tone-violet .ic { background:color-mix(in srgb, var(--violet) 15%, transparent); color:var(--violet); }
.dh-todo.tone-info   { border-left-color:var(--info); }
.dh-todo.tone-info   .ic { background:color-mix(in srgb, var(--info) 15%, transparent); color:var(--info); }

/* Kennzahlen als eine Leiste statt sechs schwebender Karten */
.dh-metrics {
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
}
.dh-cell {
  background:var(--card); padding:15px 16px 17px; min-width:0; position:relative;
  cursor:grab; transition:background .14s ease;
}
.dh-cell:hover { background:var(--surface); }
.dh-cell:active { cursor:grabbing; }
.dh-cell .k {
  font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dh-cell .v {
  font-family:var(--font-mono); font-weight:900; font-size:20px; letter-spacing:-.03em; line-height:1.1;
}
.dh-cell .f {
  font-size:10px; color:var(--faint); margin-top:7px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dh-spark { position:absolute; left:0; right:0; bottom:0; height:26px; opacity:.4; pointer-events:none; }
@media (max-width:1250px) { .dh-metrics { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px)  { .dh-metrics { grid-template-columns:repeat(2,1fr); } }


/* Buttons, die wie Inhalt aussehen (Karten, Listenzeilen, Kacheln), duerfen
   nicht auf die Vorgabefarbe des Browsers zurueckfallen. */
.dh-todo, .jr-day, .jr-tr, .pg-chip, .fp-tab, .tagchip, .fm-chip {
  color: var(--text);
}
.pg-chip:not(.on), .fp-tab:not(.on) { color: var(--text-faint); }
.tagchip:not(.on-pos):not(.on-neg), .fm-chip { color: var(--text-muted); }

/* ── Kennzahlenleiste (Kosten, Accounts) ──────────────────────────────────
   Lag zuerst nur im <style> der Kostenseite; sobald eine zweite Seite sie
   verwendet, muss sie global stehen, sonst rendert sie dort unformatiert. */
.fp-metrics {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
}
.fp-metrics > div { background:var(--card); padding:15px 17px; min-width:0; }
.fp-metrics .k { font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
                 color:var(--faint); margin-bottom:7px; white-space:nowrap;
                 overflow:hidden; text-overflow:ellipsis; }
.fp-metrics .v { font-family:var(--font-mono); font-weight:900; font-size:22px; letter-spacing:-.025em; }
.fp-metrics .f { font-size:10.5px; color:var(--faint); margin-top:6px;
                 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:900px) { .fp-metrics { grid-template-columns:1fr 1fr; } }


/* ── Letzte Aktivitäten ─────────────────────────────────────────────────── */
.act { display:flex; flex-direction:column; }
.act-day {
  display:flex; align-items:center; gap:11px; padding:14px 2px 7px;
  font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--faint);
}
.act-day:first-child { padding-top:2px; }
.act-day .ln { flex:1; height:1px; background:var(--border); }
.act-day .net { font-family:var(--font-mono); font-size:12px; font-weight:800; letter-spacing:-.01em; }

.act-row {
  display:grid; grid-template-columns:34px minmax(0,1fr) auto 16px; gap:12px; align-items:center;
  width:100%; text-align:left; font:inherit; color:var(--text);
  background:none; border:0; border-radius:11px; padding:9px 10px;
  transition:background .14s ease;
}
.act-row.go { cursor:pointer; }
.act-row.go:hover { background:var(--surface); }
.act-row.go:hover .act-go { opacity:1; transform:translateX(2px); }
.act-ic {
  display:grid; place-items:center; width:34px; height:34px; border-radius:11px; flex:none;
  background:var(--surface-3); color:var(--text-muted);
}
.act-ic.tone-pos    { background:color-mix(in srgb, var(--pos) 15%, transparent);    color:var(--pos); }
.act-ic.tone-neg    { background:color-mix(in srgb, var(--neg) 15%, transparent);    color:var(--neg); }
.act-ic.tone-warn   { background:color-mix(in srgb, var(--warn) 15%, transparent);   color:var(--warn); }
.act-ic.tone-accent { background:var(--accent-weak);                                 color:var(--accent); }
.act-ic.tone-violet { background:color-mix(in srgb, var(--violet) 15%, transparent); color:var(--violet); }
.act-ic.tone-info   { background:color-mix(in srgb, var(--info) 15%, transparent);   color:var(--info); }

.act-t { display:block; font-size:13px; font-weight:700; line-height:1.35; }
.act-t .act-note {
  font-style:normal; font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  margin-left:8px; padding:2px 7px; border-radius:99px;
  background:var(--surface-3); color:var(--text-faint);
}
.act-s {
  display:block; font-size:11.5px; color:var(--faint); margin-top:3px; line-height:1.5;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.act-amt { font-family:var(--font-mono); font-weight:800; font-size:13.5px; white-space:nowrap; }
.act-go { color:var(--text-faint); opacity:0; transition:opacity .14s ease, transform .14s ease; }
@media (hover:none) { .act-go { opacity:.5; } }


/* ── Befehlspalette ──────────────────────────────────────────────────────── */
.cp-veil {
  position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px); display: flex; justify-content: center;
  align-items: flex-start; padding: 12vh 20px 20px;
  animation: cpIn .14s ease;
}
@keyframes cpIn { from { opacity: 0; } to { opacity: 1; } }
.cp {
  width: 100%; max-width: 580px; background: var(--card);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  animation: cpUp .16s cubic-bezier(.2,.8,.2,1);
}
@keyframes cpUp { from { transform: translateY(-8px); opacity: .6; } to { transform: none; opacity: 1; } }
.cp-in { display: flex; align-items: center; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--border); }
.cp-in > svg { color: var(--text-faint); flex: none; }
.cp-in input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  font: inherit; font-size: 15px; color: var(--text);
}
.cp-in input::placeholder { color: var(--text-faint); }
.cp-list { max-height: 52vh; overflow-y: auto; padding: 7px; }
.cp-row {
  display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: none; border: 0; border-radius: 10px; padding: 9px 10px;
}
.cp-row.on { background: var(--accent-weak); }
.cp-ic {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: var(--surface-3); color: var(--text-muted); font-size: 15px;
}
.cp-row.on .cp-ic { background: var(--accent); color: #fff; }
.cp-row .t { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.cp-row .s { display: block; font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.cp-none { padding: 26px 14px; text-align: center; font-size: 13px; color: var(--text-faint); }
.cp-foot {
  display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--border);
  background: var(--surface); font-size: 11px; color: var(--text-faint);
}
.cp-foot span { display: inline-flex; align-items: center; gap: 6px; }

/* ── Seitenkopf ──────────────────────────────────────────────────────────── */
.page-head { align-items: center; padding-bottom: 4px; }
.page-actions { gap: 9px; }

/* ══ Steuer-Cockpit ═══════════════════════════════════════════════════════ */
.tc-hero {
  display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:0;
  border:1px solid var(--border); border-radius:18px; overflow:hidden; margin-bottom:16px;
  background:
    radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 62%),
    var(--card);
}
.tc-hero-l { padding:22px 24px; min-width:0; }
.tc-hero .k { font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
              color:var(--faint); margin-bottom:9px; }
.tc-hero .num { font-family:var(--font-mono); font-weight:900; font-size:36px; line-height:1;
                letter-spacing:-.04em; }
.tc-hero .sub { font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.6; }

.tc-fall { display:flex; height:10px; border-radius:99px; overflow:hidden;
           background:var(--surface-3); margin-top:20px; }
.tc-fall i { display:block; height:100%; }
.tc-legend { display:flex; gap:15px; flex-wrap:wrap; margin-top:10px; font-size:11px; color:var(--faint); }
.tc-legend span { display:inline-flex; align-items:center; gap:6px; }
.tc-legend b { width:8px; height:8px; border-radius:2px; display:inline-block; }
.tc-rates { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px;
            font-size:11.5px; color:var(--faint); }
.tc-rates button { background:none; border:0; padding:0; cursor:pointer; font:inherit;
                   font-size:11.5px; font-weight:700; color:var(--accent); }

.tc-res { padding:22px 20px; border-left:1px solid var(--border);
          background:color-mix(in srgb, var(--warn) 7%, transparent); }
.tc-res .amt { font-family:var(--font-mono); font-weight:900; font-size:23px;
               letter-spacing:-.03em; color:var(--warn); }
.tc-res .pct { font-size:11px; color:var(--faint); margin-top:4px; }
.tc-res input[type=range] { width:100%; margin-top:12px; accent-color:var(--warn); cursor:pointer; }
.tc-res .note { font-size:10.5px; color:var(--faint); margin-top:9px; line-height:1.5; }
.tc-res .note a { color:var(--accent); }
@media (max-width:820px) { .tc-hero { grid-template-columns:1fr; }
  .tc-res { border-left:0; border-top:1px solid var(--border); } }
@media (max-width:520px) { .tc-hero .num { font-size:28px; } }

/* Gewerbe gegen sonstige Leistung */
.tc-cmp { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:stretch; }
.tc-cmp .side { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
.tc-cmp .side.win { border-color:color-mix(in srgb, var(--pos) 42%, transparent);
                    background:linear-gradient(150deg, color-mix(in srgb, var(--pos) 9%, transparent), transparent 70%), var(--card); }
.tc-cmp .h { font-size:13.5px; font-weight:800; }
.tc-cmp .t { font-family:var(--font-mono); font-size:10.5px; color:var(--faint); margin-top:2px; }
.tc-cmp .v { font-family:var(--font-mono); font-weight:900; font-size:25px;
             letter-spacing:-.03em; margin:11px 0 8px; }
.tc-cmp .f { font-size:11.5px; color:var(--faint); line-height:1.6; }
.tc-cmp .mid { display:flex; flex-direction:column; align-items:center; justify-content:center;
               padding:0 4px; text-align:center; }
.tc-cmp .mid .d { font-family:var(--font-mono); font-weight:900; font-size:18px; letter-spacing:-.02em; }
.tc-cmp .mid .l { font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
                  color:var(--faint); margin-top:5px; }
@media (max-width:760px) { .tc-cmp { grid-template-columns:1fr; }
  .tc-cmp .mid { flex-direction:row; gap:10px; padding:4px 0; } }

/* Vorauszahlungstermine */
.tc-quarters { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.tc-quarters > div { background:var(--card); border:1px solid var(--border); border-radius:12px;
                     padding:13px 14px; text-align:center; }
.tc-quarters .d { font-size:11px; font-weight:700; color:var(--faint); }
.tc-quarters .a { font-family:var(--font-mono); font-weight:900; font-size:18px;
                  letter-spacing:-.02em; margin-top:6px; }
@media (max-width:620px) { .tc-quarters { grid-template-columns:1fr 1fr; } }

/* Handlungsknopf im Toast — z. B. „Rückgängig" nach dem Löschen */
.toast-act {
  flex:none; cursor:pointer; font:inherit; font-size:12px; font-weight:800;
  padding:5px 11px; border-radius:8px; margin-left:4px;
  background:var(--surface-3); border:1px solid var(--border); color:var(--accent);
  transition:border-color .14s ease, background .14s ease;
}
.toast-act:hover { border-color:var(--accent); background:var(--accent-weak); }

/* ── Massenbearbeitung & Zusammenfassen ─────────────────────────────────── */
.be-list { display:flex; flex-direction:column; gap:2px; }
.be-row {
  display:grid; grid-template-columns:42px minmax(0,1fr); gap:12px; align-items:start;
  padding:14px 0; border-bottom:1px solid var(--border);
}
.be-row:last-child { border-bottom:0; }
.be-t { font-size:13px; font-weight:700; }
.be-h { font-size:11.5px; color:var(--faint); margin-top:2px; line-height:1.5; }
.be-c { margin-top:10px; transition:opacity .16s ease; }
.be-c.off { opacity:.4; pointer-events:none; }

.be-sw { position:relative; width:38px; height:22px; flex:none; cursor:pointer; display:block; margin-top:2px; }
.be-sw input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.be-sw i { position:absolute; inset:0; border-radius:99px; background:var(--surface-3);
           transition:background .18s ease; }
.be-sw i::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px;
                  border-radius:50%; background:#fff; transition:transform .18s ease; }
.be-sw input:checked + i { background:var(--accent); }
.be-sw input:checked + i::after { transform:translateX(16px); }

.be-prev { display:flex; gap:6px; flex-wrap:wrap; }

.mf-list { display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto; }
.mf-row {
  display:grid; grid-template-columns:42px minmax(0,1fr); gap:12px; align-items:start;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px;
  transition:opacity .16s ease;
}
.mf-row.off { opacity:.45; }
.mf-h { display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:13px; }
.mf-cnt { margin-left:auto; font-family:var(--font-mono); font-size:10.5px; font-weight:800;
          padding:2px 8px; border-radius:99px; background:var(--surface-3); color:var(--text-faint); }
.mf-fills { display:flex; flex-direction:column; gap:3px; margin-top:8px;
            font-family:var(--font-mono); font-size:11px; color:var(--faint); }
.mf-res { margin-top:9px; padding-top:9px; border-top:1px solid var(--border);
          font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted); }

/* ============================================================
   Regel-Simulator — "Hättest du bestanden?"
   ============================================================ */
.rs-ein {
  display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: flex-end;
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.rs-txt { font-size: 12.5px; color: var(--text-faint); }
.rs-txt b { color: var(--text); font-variant-numeric: tabular-nums; }

.rs-fazit {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border); margin-bottom: 16px;
  font-size: 13.5px; line-height: 1.55;
}
.rs-fazit > b {
  flex: none; font-size: 30px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rs-fazit.gut { background: color-mix(in srgb, var(--pos) 9%, transparent); border-color: color-mix(in srgb, var(--pos) 32%, transparent); }
.rs-fazit.gut > b { color: var(--pos); }
.rs-fazit.schlecht { background: color-mix(in srgb, var(--neg) 8%, transparent); border-color: color-mix(in srgb, var(--neg) 30%, transparent); }
.rs-fazit.schlecht > b { color: var(--neg); }

.rs-list { display: flex; flex-direction: column; gap: 7px; }
.rs-row {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: auto minmax(0,1.25fr) minmax(0,1fr) 104px;
  padding: 10px 13px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
}
.rs-row.s-bestanden { border-left-color: var(--pos); }
.rs-row.s-raus      { border-left-color: var(--neg); }
.rs-row.s-offen     { border-left-color: var(--accent); }
.rs-row.s-leer      { opacity: .6; }

.rs-id { min-width: 0; }
.rs-id b { display: block; font-size: 13.5px; }
.rs-id em {
  display: block; font-style: normal; margin-top: 2px;
  font-size: 11.5px; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.rs-erg { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rs-erg > :last-child { font-size: 11.5px; color: var(--text-faint); line-height: 1.45; }

.rs-badge {
  align-self: flex-start; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 650; letter-spacing: .01em;
  border: 1px solid transparent;
}
.rs-badge.b-bestanden { color: var(--pos); background: color-mix(in srgb, var(--pos) 13%, transparent); border-color: color-mix(in srgb, var(--pos) 30%, transparent); }
.rs-badge.b-raus      { color: var(--neg); background: color-mix(in srgb, var(--neg) 13%, transparent); border-color: color-mix(in srgb, var(--neg) 30%, transparent); }
.rs-badge.b-offen     { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.rs-badge.b-leer      { color: var(--text-faint); background: var(--surface-3); }

.rs-spark { height: 26px; }
.rs-spark svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Zwei Hinweise, die bewusst nicht wie Fussnoten aussehen sollen:
   dass Firmen fehlen und dass die Rechnung Grenzen hat, gehört zum Ergebnis. */
.rs-fehlt, .rs-method, .nt-info {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 14px 0 0; padding: 11px 13px;
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12px; line-height: 1.55; color: var(--text-faint);
}
.rs-fehlt b, .rs-method b, .nt-info b { color: var(--text); }
.rs-fehlt svg, .rs-method svg, .nt-info svg { flex: none; margin-top: 2px; opacity: .8; }
.rs-method {
  background: var(--warn-weak);
  border-color: color-mix(in srgb, var(--warn) 26%, transparent);
}
.nt-info { max-width: 620px; }

@media (max-width: 780px) {
  .rs-row { grid-template-columns: auto minmax(0,1fr); }
  .rs-erg { grid-column: 1 / -1; }
  .rs-spark { grid-column: 1 / -1; }
}

/* ============================================================
   Steuer-Cockpit: Krankenkasse
   ============================================================ */
.kv-hinweis {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 12px; padding: 11px 13px;
  border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12px; line-height: 1.55; color: var(--text-faint);
}
.kv-hinweis b { color: var(--text); }
.kv-hinweis svg { flex: none; margin-top: 2px; opacity: .85; }

/* Die Netto-Zahl ist ohne Versicherungsstatus unvollständig. Das gehört
   sichtbar an die Zahl, nicht in eine Fussnote weiter unten. */
.tc-unklar {
  display: inline-flex; gap: 7px; align-items: center;
  margin-top: 10px; padding: 6px 11px;
  border-radius: 999px; cursor: pointer;
  background: var(--warn-weak);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  color: var(--warn); font-size: 12px; font-weight: 600;
  font-family: inherit; text-align: left;
}
.tc-unklar b { color: var(--warn); }
.tc-unklar:hover { background: color-mix(in srgb, var(--warn) 22%, transparent); }

/* ============================================================
   Auszahlung erfassen — Betrag, Kurs, Zufluss
   ============================================================ */
/* Der Betrag ist die Angabe, um die es geht. Er war vorher ein Feld unter
   neun gleich grossen. Waehrung sitzt im selben Rahmen, weil Betrag und
   Waehrung eine Angabe sind und keine zwei. */
.py-amt {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface); overflow: hidden;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.py-amt:focus-within {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.py-amt-in {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: var(--font-mono); font-size: 27px; font-weight: 800;
  letter-spacing: -.02em; color: var(--text); padding: 13px 16px;
}
.py-amt-in::placeholder { color: var(--text-faint); font-weight: 700; }
.py-amt-in::-webkit-outer-spin-button,
.py-amt-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.py-amt-in { -moz-appearance: textfield; }
.py-amt-cur {
  flex: none; border: none; border-left: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-muted);
  font-family: inherit; font-size: 13.5px; font-weight: 800;
  padding: 0 13px; cursor: pointer; outline: none;
}
.py-amt-cur:hover { color: var(--text); }

/* Der Kurs ist eine Folge des Betrags, kein gleichrangiges Feld */
.py-rate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.py-rate > label {
  font-size: 11.5px; font-weight: 700; color: var(--text-faint);
  letter-spacing: .03em;
}
.py-rate .input { width: 110px; font-family: var(--font-mono); }
.py-rate-eq { font-size: 13px; color: var(--text-faint); }
.py-rate-eq b { color: var(--text); font-family: var(--font-mono); font-weight: 800; }

/* Was das Zahlungsdatum steuerlich bedeutet — an der Stelle, an der es
   eingetragen wird, nicht in einer Fussnote am Seitenende. */
.py-zufluss {
  display: flex; gap: 8px; align-items: flex-start; margin: 0;
  padding: 10px 12px; border-radius: 10px;
  font-size: 12px; line-height: 1.55;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-faint);
}
.py-zufluss b { color: var(--text); }
.py-zufluss > svg { flex: none; margin-top: 2px; }
.mf-sec:has(.py-zufluss) .py-zufluss { border-style: solid; }

/* ============================================================
   Rechnungs-Assistent: was noch fehlt
   ============================================================ */
.iw-fehlt {
  background: var(--neg-weak);
  border: 1px solid color-mix(in srgb, var(--neg) 32%, transparent);
  border-radius: 13px; padding: 14px 16px; margin-bottom: 16px;
}
.iw-fehlt-h { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.iw-fehlt-h > svg { color: var(--neg); flex: none; }
.iw-fehlt-h b { font-size: 13.5px; font-weight: 800; }
.iw-fehlt-h em {
  margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--text-faint); white-space: nowrap;
}
.iw-fehlt-l { display: flex; flex-direction: column; gap: 6px; }
.iw-fehlt-l button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
  padding: 9px 12px; border-radius: 9px; color: var(--text);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--neg) 22%, transparent);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.iw-fehlt-l button:hover:not(:disabled) {
  border-color: var(--neg); background: var(--surface-2);
}
.iw-fehlt-l button:disabled { cursor: default; opacity: .7; }
.iw-fehlt-l button > span { flex: 1; min-width: 0; font-weight: 600; }
.iw-fehlt-l button > em {
  font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint); white-space: nowrap;
}
.iw-fehlt-l button > svg { color: var(--text-faint); flex: none; }
.iw-fehlt-l button:hover > svg { color: var(--neg); }
.iw-fehlt-f {
  margin: 11px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-faint);
}

/* ============================================================
   Prop Firms: Pläne je Kontogröße
   ============================================================ */
.fc-plans { border-top: 1px solid var(--border); }
.fc-plans-t {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 10px 16px; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-muted);
  text-align: left;
}
.fc-plans-t:hover { color: var(--text); background: var(--surface-2); }
.fc-plans-t > svg { flex: none; transition: transform .18s var(--ease); }
.fc-plans-t.on > svg { transform: rotate(180deg); }
.fc-plans-t > span { flex: 1; min-width: 0; }
.fc-plans-t em {
  font-style: normal; font-size: 10.5px; font-weight: 600;
  color: var(--text-faint); white-space: nowrap;
}
.fc-plans-b { padding: 2px 16px 15px; }
.fc-plans-w { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.fc-plans-tab { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.fc-plans-tab th {
  text-align: left; white-space: nowrap; padding: 7px 10px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.fc-plans-tab td {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fc-plans-tab tbody tr:last-child td { border-bottom: none; }
.fc-plans-tab td.nm { font-family: var(--font-ui); font-weight: 700; }
/* Eine Luecke soll als Luecke lesbar sein, nicht als Wert */
.fc-plans-tab td.leer { color: var(--text-faint); }
.fc-plans-f { margin: 11px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-faint); }
.fc-plans-f b { color: var(--text-muted); }
.fc-plans-q {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--border);
  font-size: 10.5px; line-height: 1.6; color: var(--text-faint);
}
.fc-plans-q a { color: var(--accent2); }

/* ============================================================
   Tagebuch: Muster
   ============================================================ */
.jm-block { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--border); }
.jm-block:first-of-type { padding-top: 4px; margin-top: 4px; border-top: none; }
.jm-block h4 {
  margin: 0 0 12px; font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
.jm-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jm-seite {
  padding: 14px 16px; border-radius: 13px;
  background: var(--surface); border: 1px solid var(--border);
}
.jm-seite.gut      { border-color: color-mix(in srgb, var(--pos) 34%, transparent);
                     background: linear-gradient(150deg, var(--pos-weak), transparent 70%), var(--surface); }
.jm-seite.schlecht { border-color: color-mix(in srgb, var(--neg) 34%, transparent);
                     background: linear-gradient(150deg, var(--neg-weak), transparent 70%), var(--surface); }
.jm-seite .k { display: block; font-size: 10.5px; font-weight: 700; color: var(--text-faint);
               letter-spacing: .04em; }
.jm-seite b  { display: block; font-family: var(--font-mono); font-size: 23px; font-weight: 900;
               letter-spacing: -.03em; margin: 6px 0 3px; }
.jm-seite em { font-style: normal; font-size: 11px; color: var(--text-faint); }
@media (max-width: 560px) { .jm-paar { grid-template-columns: 1fr; } }

.jm-liste { display: flex; flex-direction: column; gap: 1px;
            background: var(--border); border: 1px solid var(--border);
            border-radius: 12px; overflow: hidden; }
.jm-zeile { display: grid; grid-template-columns: minmax(0,1fr) 74px 108px auto;
            gap: 12px; align-items: center; padding: 10px 14px;
            background: var(--surface); font-size: 12.5px; }
.jm-nm { font-weight: 600; }
.jm-n, .jm-tr { font-size: 11px; color: var(--text-faint); white-space: nowrap;
                font-variant-numeric: tabular-nums; }
.jm-zeile b { font-family: var(--font-mono); font-size: 14px; font-weight: 800;
              text-align: right; white-space: nowrap; }
@media (max-width: 620px) {
  .jm-zeile { grid-template-columns: minmax(0,1fr) auto; }
  .jm-n, .jm-tr { grid-column: 1; font-size: 10.5px; }
  .jm-tr { display: none; }
}

.jm-satz  { margin: 12px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--text-faint); }
.jm-satz b { color: var(--text); }
.jm-warte { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--text-faint); }

/* ============================================================
   Frage des Tages · Vertrag · Zwilling · Tilt
   ============================================================ */
.jr-frage {
  background: linear-gradient(140deg, var(--accent-weak), transparent 70%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 14px;
}
.jf-k { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
        color: var(--accent2); margin-bottom: 10px; }
.jf-e + .jf-e { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border); }
.jf-q { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.55; }
.jf-w { margin: 5px 0 0; font-size: 12px; color: var(--text-faint); line-height: 1.55; }

/* Vertrag: Rechenschaft */
.jr-vertrag { border-radius: 14px; padding: 14px 16px; margin-bottom: 12px;
  border: 1px solid var(--border); background: var(--surface); }
.jr-vertrag.gehalten  { border-color: color-mix(in srgb, var(--pos) 32%, transparent);
                        background: linear-gradient(140deg, var(--pos-weak), transparent 70%), var(--surface); }
.jr-vertrag.gebrochen { border-color: color-mix(in srgb, var(--neg) 32%, transparent);
                        background: linear-gradient(140deg, var(--neg-weak), transparent 70%), var(--surface); }
.jv-k { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; font-size: 13.5px; }
.jr-vertrag.gehalten  .jv-k > svg { color: var(--pos); }
.jr-vertrag.gebrochen .jv-k > svg { color: var(--neg); }
.jv-k em { margin-left: auto; font-style: normal; font-family: var(--font-mono);
           font-size: 11.5px; font-weight: 700; color: var(--text-faint); }
.jv-liste { display: flex; flex-direction: column; gap: 5px; }
.jv-z { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 9px;
        align-items: baseline; font-size: 12.5px; }
.jv-i { font-family: var(--font-mono); font-weight: 800; }
.jv-z.ok .jv-i { color: var(--pos); }
.jv-z.no .jv-i { color: var(--neg); }
.jv-z.no .jv-t { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--neg) 60%, transparent); }
.jv-ist { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.jv-f { margin: 11px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-faint); }
.jv-f b { color: var(--text); }

/* Vertrag: Vorsatz setzen */
.jr-regelsetzer { border: 1px dashed var(--border-strong); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 16px; }
.jr-rs-k b { display: block; font-size: 13px; font-weight: 700; }
.jr-rs-k span { display: block; font-size: 11.5px; color: var(--text-faint);
                line-height: 1.55; margin-top: 2px; }
.jr-rs-l { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; align-items: center; }
.jr-rs-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px 5px 11px;
  border-radius: 99px; font-size: 12px; font-weight: 650;
  background: var(--accent-weak); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.jr-rs-chip button { background: none; border: none; color: var(--text-faint);
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.jr-rs-chip button:hover { color: var(--neg); }
.jr-rs-add { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 99px; border: 1px dashed var(--border-strong); background: none;
  color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.jr-rs-add:hover { border-color: var(--accent); color: var(--text); }
.jr-rs-neu { width: 100%; }
.jr-rs-neu .k { display: block; font-size: 11.5px; font-weight: 700;
                color: var(--text-muted); margin-bottom: 8px; }
.jr-rs-neu .w { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.jr-rs-neu .ab { background: none; border: none; color: var(--text-faint);
                 font: inherit; font-size: 11.5px; cursor: pointer; text-decoration: underline; }
.jr-rs-morgen { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px;
  background: none; border: none; color: var(--accent2); font: inherit;
  font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; }
.jr-rs-morgen:hover { text-decoration: underline; }

/* Zwilling */
.jz-zahl { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: 13px; overflow: hidden; margin-bottom: 18px; }
.jz-s { background: var(--surface); padding: 14px 16px; }
.jz-s .k { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em;
           text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.jz-s b { font-family: var(--font-mono); font-size: 20px; font-weight: 900; letter-spacing: -.03em; }
.jz-s.zw { background: linear-gradient(140deg, var(--accent-weak), transparent 75%), var(--surface); }
.jz-s.diff.gut      b { color: var(--pos); }
.jz-s.diff.schlecht b { color: var(--neg); }
@media (max-width: 640px) { .jz-zahl { grid-template-columns: 1fr; } }
.jz-chart { margin-bottom: 6px; }
.jz-chart svg { width: 100%; height: 150px; display: block; overflow: visible; }
.jz-leg { display: flex; gap: 18px; margin-top: 9px; font-size: 11.5px; color: var(--text-faint); }
.jz-leg span { display: inline-flex; align-items: center; gap: 7px; }
.jz-leg i { width: 18px; height: 0; border-top: 2px solid var(--text); }
.jz-leg i.strich { border-top-style: dashed; border-top-color: var(--accent2); }

/* Tilt-Warnung */
.td-tilt { border-radius: 16px; padding: 16px 18px; margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--neg) 45%, transparent);
  background: linear-gradient(150deg, var(--neg-weak), transparent 72%), var(--card); }
.tt-k { display: flex; align-items: center; gap: 9px; font-size: 14.5px; margin-bottom: 10px; }
.tt-k > svg { color: var(--neg); flex: none; }
.tt-l { margin: 0 0 10px; padding-left: 19px; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.tt-l li { margin-bottom: 4px; }
.tt-p { margin: 0 0 13px; font-size: 13px; color: var(--text-muted); }
.tt-p b { color: var(--text); font-family: var(--font-mono); }
.tt-a { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.tt-stop { padding: 9px 15px; border-radius: 10px; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 700; color: #fff; border: none; background: var(--neg); }
.tt-stop:hover { filter: brightness(1.1); }
.tt-weg { background: none; border: none; color: var(--text-faint); font: inherit;
  font-size: 12.5px; cursor: pointer; text-decoration: underline; }

/* ============================================================
   Rechnungen: Storno und Zahlung
   ============================================================ */
/* Eine stornierte Rechnung bleibt sichtbar — sie ist aufgehoben,
   nicht verschwunden. Das muss man ihr ansehen. */
.iv-card.ist-storniert { opacity: .62; }
.iv-card.ist-storniert .iv-no { text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--neg) 70%, transparent); }
.iv-card.ist-storniert .iv-amt { text-decoration: line-through; color: var(--text-faint); }

.st-l { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.65;
        color: var(--text-muted); }
.st-l li { margin-bottom: 7px; }
.st-l b { color: var(--text); }

/* ============================================================
   Export-Anleitung im CSV-Import
   ============================================================ */
.ea { margin-top: 18px; border: 1px solid var(--border); border-radius: 14px;
      background: var(--surface); overflow: hidden; }
.ea-k { padding: 14px 16px 12px; }
.ea-k b { display: block; font-size: 13.5px; font-weight: 700; }
.ea-k span { display: block; font-size: 12px; color: var(--text-faint);
             line-height: 1.55; margin-top: 2px; }

.ea-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 12px;
           border-bottom: 1px solid var(--border); }
.ea-tab { position: relative; flex: none; padding: 6px 9px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--border); cursor: pointer;
  display: flex; align-items: center; gap: 6px; }
.ea-tab:hover { border-color: var(--border-strong); }
.ea-tab.on { border-color: var(--accent); background: var(--accent-weak); }
/* Die eigenen Plattformen bekommen einen Punkt — sie stehen ohnehin vorn,
   aber man soll sehen, warum. */
.ea-tab i { font-style: normal; font-size: 8px; color: var(--pos); line-height: 1; }

.ea-body { padding: 15px 16px; }
.ea-steps { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.6;
            color: var(--text-muted); }
.ea-steps li { margin-bottom: 6px; }
.ea-steps li::marker { color: var(--accent2); font-weight: 700; }

.ea-file { margin-top: 14px; padding: 11px 13px; border-radius: 10px;
  background: var(--pos-weak); border: 1px solid color-mix(in srgb, var(--pos) 26%, transparent); }
.ea-file-k { display: flex; align-items: center; gap: 7px; font-size: 11.5px;
             font-weight: 700; color: var(--pos); margin-bottom: 8px; }
.ea-file code { display: block; overflow-x: auto; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.7;
  color: var(--text); background: var(--surface); padding: 8px 10px;
  border-radius: 7px; border: 1px solid var(--border); }
.ea-file p { margin: 8px 0 0; font-size: 11px; line-height: 1.55; color: var(--text-faint); }

.ea-falle { display: flex; gap: 8px; align-items: flex-start; margin: 13px 0 0;
  padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.6;
  background: var(--warn-weak); color: var(--text-muted);
  border: 1px solid color-mix(in srgb, var(--warn) 26%, transparent); }
.ea-falle > svg { flex: none; margin-top: 2px; color: var(--warn); }
.ea-falle b { color: var(--text); }
.ea-unsicher { margin: 11px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-faint);
               font-style: italic; }

.ea-alt { padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-2); }
.ea-alt-b { background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--accent2); text-decoration: underline; }
.ea-paste p { margin: 0 0 9px; font-size: 12px; line-height: 1.6; color: var(--text-faint); }

/* ============================================================
   Stop-Check · Kontospiegel · Uhrzeit · Verpasste Setups
   ============================================================ */
.sc-gut { display:flex; gap:13px; align-items:flex-start; padding:16px 18px;
  border-radius:13px; background:var(--pos-weak);
  border:1px solid color-mix(in srgb, var(--pos) 30%, transparent); }
.sc-gut > svg { color:var(--pos); flex:none; margin-top:1px; }
.sc-gut b { display:block; font-size:14px; margin-bottom:4px; }
.sc-gut span { display:block; font-size:12.5px; line-height:1.6; color:var(--text-muted); }

.sc-drei { display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:13px; overflow:hidden; }
.sc-s { background:var(--surface); padding:14px 16px; }
.sc-s .k { display:block; font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }
.sc-s b { display:block; font-family:var(--font-mono); font-size:21px; font-weight:900;
  letter-spacing:-.03em; }
.sc-s em { display:block; font-style:normal; font-size:10.5px; color:var(--text-faint); margin-top:4px; }
.sc-s.diff { background:linear-gradient(140deg, var(--neg-weak), transparent 75%), var(--surface); }
@media (max-width:640px) { .sc-drei { grid-template-columns:1fr; } }
.sc-satz { margin:14px 0 0; font-size:13px; line-height:1.65; color:var(--text-muted); }
.sc-satz b { color:var(--text); }
/* Die Stop-Zeile traegt zwei Kursangaben statt einer Zahl — das Raster der
   Musterliste (74 px) ist dafuer zu eng und die Spalten liefen ineinander. */
.jm-zeile.sc-z { grid-template-columns:minmax(0,1fr) minmax(120px,auto) minmax(96px,auto) auto; }
.jm-zeile.sc-z .jm-n { font-family:var(--font-mono); font-size:10.5px; }
.jm-zeile.sc-z .jm-tr { font-family:var(--font-mono); font-size:10.5px; }
@media (max-width:720px) {
  .jm-zeile.sc-z { grid-template-columns:minmax(0,1fr) auto; }
  .jm-zeile.sc-z .jm-n { grid-column:1; }
  .jm-zeile.sc-z .jm-tr { display:none; }
}

/* Kontospiegel */
.ks-t .jm-zeile { grid-template-columns:minmax(0,1.5fr) 52px 58px 84px 62px minmax(70px,auto); }
.ks-kopf { font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint); background:var(--surface-2) !important; }
.ks-z span { font-variant-numeric:tabular-nums; font-size:12.5px; }
.ks-z .jm-nm b { display:block; font-size:13px; }
.ks-z .jm-nm em { display:block; font-style:normal; font-family:var(--font-mono);
  font-size:10px; color:var(--text-faint); margin-top:1px; }
.ks-z .r, .ks-kopf .r { text-align:right; font-family:var(--font-mono); font-weight:800; }
@media (max-width:760px) {
  .ks-t .jm-zeile { grid-template-columns:minmax(0,1fr) auto; }
  .ks-kopf { display:none !important; }
  .ks-z span:not(.jm-nm):not(.r) { display:none; }
}

/* Uhrzeit */
.su-fund { padding:15px 17px; border-radius:13px; margin-bottom:16px;
  background:linear-gradient(140deg, var(--neg-weak), transparent 72%), var(--surface);
  border:1px solid color-mix(in srgb, var(--neg) 30%, transparent); }
.su-f-k { font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-faint); }
.su-f-z { font-family:var(--font-mono); font-size:26px; font-weight:900; letter-spacing:-.03em;
  margin:5px 0 7px; }
.su-fund p { margin:0; font-size:13px; line-height:1.65; color:var(--text-muted); }
.su-fund b { color:var(--text); }

.su-bars { position:relative; display:flex; gap:5px; padding:10px 12px;
  border-radius:12px; background:var(--surface); border:1px solid var(--border);
  overflow-x:auto; }
.su-b { flex:1; min-width:26px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.su-b.drin { background:color-mix(in srgb, var(--neg) 10%, transparent); border-radius:7px; }
.su-plot { position:relative; display:block; width:100%; height:100px; }
.su-plot::after { content:''; position:absolute; left:0; right:0; top:50%; height:1px;
  background:var(--border-strong); opacity:.6; }
.su-plot i { position:absolute; left:50%; transform:translateX(-50%); width:100%;
  max-width:18px; display:block; border-radius:3px; }
.su-plot i.up   { bottom:50%; background:var(--pos); }
.su-plot i.down { top:50%;    background:var(--neg); }
.su-b u { text-decoration:none; font-family:var(--font-mono); font-size:10px;
  color:var(--text-faint); }
.su-b em { font-style:normal; font-size:9px; color:var(--text-faint); opacity:.7; }
.su-leg { margin-top:9px; font-size:11px; color:var(--text-faint); }

/* Verpasste Setups */
.vs-frage { display:flex; gap:14px; align-items:baseline; padding:14px 16px;
  border-radius:13px; margin-bottom:6px;
  background:var(--surface); border:1px solid var(--border); }
.vs-frage.warn { background:linear-gradient(140deg, var(--warn-weak), transparent 72%), var(--surface);
  border-color:color-mix(in srgb, var(--warn) 30%, transparent); }
.vs-frage > b { flex:none; font-family:var(--font-mono); font-size:19px; font-weight:900; }
.vs-frage span { font-size:12.5px; line-height:1.6; color:var(--text-muted); }
.vs-frage span b { color:var(--text); }

/* Erfassung auf der Heute-Seite */
.vg { margin-bottom:14px; }
.vg-b { display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:12px 15px; border-radius:13px; cursor:pointer; font:inherit; color:var(--text);
  background:var(--surface); border:1px dashed var(--border-strong); transition:border-color .15s; }
.vg-b:hover { border-color:var(--accent); }
.vg-b > svg { color:var(--accent2); flex:none; }
.vg-b b { display:block; font-size:13px; font-weight:700; }
.vg-b em { display:block; font-style:normal; font-size:11.5px; color:var(--text-faint); margin-top:1px; }
.vg-b i { margin-left:auto; font-style:normal; font-family:var(--font-mono); font-size:12px;
  font-weight:800; color:var(--accent2); background:var(--accent-weak);
  padding:3px 9px; border-radius:99px; }
.vg-w { padding:13px 15px; border-radius:13px; background:var(--surface);
  border:1px solid var(--accent); }
.vg-k { font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:9px; }
.vg-l { display:flex; flex-wrap:wrap; gap:6px; }
.vg-ab { margin-top:10px; background:none; border:none; padding:0; cursor:pointer;
  font:inherit; font-size:11.5px; color:var(--text-faint); text-decoration:underline; }
.vg-heute { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.vg-heute span { font-size:10.5px; color:var(--text-faint); font-family:var(--font-mono);
  background:var(--surface-2); padding:3px 8px; border-radius:99px; border:1px solid var(--border); }

/* ============================================================
   Tarif offenlegen — die Herleitung der Einkommensteuer
   ============================================================ */
.tz { margin: 4px 0 10px; }
.tz-t { display:flex; align-items:center; gap:8px; width:100%; padding:7px 0;
  background:none; border:none; cursor:pointer; font:inherit; font-size:12px;
  font-weight:700; color:var(--accent2); text-align:left; }
.tz-t:hover { color:var(--text); }
.tz-t > svg { flex:none; transition:transform .18s var(--ease); }
.tz-t.on > svg { transform:rotate(180deg); }
.tz-t > span { flex:1; min-width:0; }
.tz-t em { font-style:normal; font-size:10.5px; font-weight:600; color:var(--text-faint);
  white-space:nowrap; }

.tz-b { padding:14px 16px; border-radius:12px; background:var(--surface);
  border:1px solid var(--border); margin-bottom:6px; }
.tz-zone { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px;
  padding-bottom:11px; border-bottom:1px solid var(--border); }
.tz-zone .k { font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-faint); }
.tz-zone b { font-size:14px; }
.tz-zone em { font-style:normal; margin-left:auto; font-family:var(--font-mono);
  font-size:11.5px; color:var(--text-faint); white-space:nowrap; }

.tz-f { margin-bottom:10px; }
.tz-f-k { font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:5px; }
.tz-f pre { margin:0; padding:10px 12px; border-radius:9px; overflow-x:auto;
  background:var(--surface-2); border:1px solid var(--border);
  font-family:var(--font-mono); font-size:11.5px; line-height:1.75;
  color:var(--text-muted); white-space:pre; }
.tz-f.eingesetzt pre { color:var(--text); border-color:color-mix(in srgb, var(--accent) 30%, transparent);
  background:var(--accent-weak); }
.tz-hin { margin:0 0 10px; font-size:11.5px; line-height:1.6; color:var(--text-faint); }
.tz-hin b { color:var(--text); }

/* Gegenprobe */
.tz-probe { margin-top:14px; padding:13px 15px; border-radius:11px; }
.tz-probe.ok { background:var(--pos-weak); border:1px solid color-mix(in srgb, var(--pos) 28%, transparent); }
.tz-probe.no { background:var(--neg-weak); border:1px solid color-mix(in srgb, var(--neg) 32%, transparent); }
.tz-p-k { display:flex; align-items:center; gap:8px; margin-bottom:11px; font-size:13px; }
.tz-probe.ok .tz-p-k > svg { color:var(--pos); }
.tz-probe.no .tz-p-k > svg { color:var(--neg); }
.tz-p-k em { font-style:normal; margin-left:auto; font-size:10.5px; color:var(--text-faint);
  white-space:nowrap; }
.tz-p-z { display:grid; grid-template-columns:20px minmax(0,1fr); gap:9px; margin-bottom:12px; }
.tz-p-z > .n { font-family:var(--font-mono); font-size:11px; font-weight:800;
  color:var(--text-faint); }
.tz-p-z b { display:block; font-size:12.5px; }
.tz-p-z > div > span { display:block; font-size:11.5px; line-height:1.6;
  color:var(--text-faint); margin-top:3px; }
.tz-p-z > div > span b { display:inline; font-family:var(--font-mono); color:var(--text); }
.tz-p-l { display:flex; flex-direction:column; gap:3px; margin-top:8px; }
.tz-p-r { display:grid; grid-template-columns:14px minmax(0,1fr) auto; gap:8px;
  align-items:baseline; font-size:11px; }
.tz-p-r > span { font-family:var(--font-mono); font-weight:800; }
.tz-p-r.ok > span { color:var(--pos); }
.tz-p-r.no > span { color:var(--neg); }
.tz-p-r em { font-style:normal; color:var(--text-faint); }
.tz-p-r b { font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted);
  white-space:nowrap; }
.tz-p-f { margin:0; padding-top:10px; border-top:1px solid var(--border);
  font-size:11.5px; line-height:1.65; color:var(--text-faint); }
.tz-p-f b { color:var(--text); }

/* Warnung, wenn ein Tarifjahrgang die eigene Probe nicht besteht */
.tz-alarm { display:flex; gap:12px; align-items:flex-start; padding:15px 17px;
  border-radius:13px; margin-bottom:16px;
  background:linear-gradient(150deg, var(--neg-weak), transparent 74%), var(--card);
  border:1px solid color-mix(in srgb, var(--neg) 42%, transparent); }
.tz-alarm > svg { color:var(--neg); flex:none; margin-top:2px; }
.tz-alarm b { display:block; font-size:14px; margin-bottom:7px; }
.tz-alarm p { margin:0 0 7px; font-size:12.5px; line-height:1.65; color:var(--text-muted); }
.tz-alarm p:last-child { margin-bottom:0; }
.tz-alarm p b { display:inline; font-family:var(--font-mono); }

/* Demo zuruecksetzen — absichtlich, nicht als Nebenwirkung des Neuladens */
.demo-reset { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
  color:#fff; border-radius:99px; padding:5px 13px; font:inherit; font-size:12px;
  font-weight:700; cursor:pointer; white-space:nowrap; margin-right:8px; }
.demo-reset:hover { background:rgba(255,255,255,.24); }
@media (max-width:700px) { .demo-reset { display:none; } }

/* Fehlende Supabase-Tabellen: SQL direkt greifbar */
.sqlh { margin-top: 13px; }
.sqlh-t { background:none; border:none; padding:0; cursor:pointer; font:inherit;
  font-size:12px; color:var(--text-faint); text-decoration:underline; }
.sqlh-p { margin:11px 0 0; padding:12px 14px; border-radius:10px; max-height:260px;
  overflow:auto; background:var(--surface-2); border:1px solid var(--border);
  font-family:var(--font-mono); font-size:11px; line-height:1.65; color:var(--text-muted);
  white-space:pre; }

/* Pro-Marke auf der Werkzeugkachel */
.tp-cpro { margin-left:auto; font-size:9px; font-weight:900; letter-spacing:.08em;
  padding:2px 7px; border-radius:99px; color:var(--accent2);
  background:var(--accent-weak); border:1px solid color-mix(in srgb, var(--accent) 32%, transparent); }

/* Gutschriftverfahren: die Frage an der Stelle, an der der Fehler entstuende */
.gsf { display:flex; gap:10px; align-items:flex-start; padding:13px 15px; border-radius:12px;
  font-size:12.5px; line-height:1.6; }
.gsf > svg { flex:none; margin-top:2px; }
.gsf b { display:block; font-size:13px; margin-bottom:5px; }
.gsf p { margin:0; color:var(--text-muted); }
.gsf p b, .gsf span b { display:inline; }
.gsf.frage { background:var(--warn-weak); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.gsf.frage > svg { color:var(--warn); }
.gsf.stop  { background:var(--neg-weak);  border:1px solid color-mix(in srgb, var(--neg) 40%, transparent); }
.gsf.stop > svg { color:var(--neg); }
.gsf.ok    { background:var(--pos-weak);  border:1px solid color-mix(in srgb, var(--pos) 26%, transparent);
             align-items:center; }
.gsf.ok > svg { color:var(--pos); margin-top:0; }
.gsf-x { background:none; border:none; padding:0; margin-left:8px; cursor:pointer;
  font:inherit; font-size:11.5px; color:var(--text-faint); text-decoration:underline; }

/* Wo die Daten liegen */
.do-region { padding:13px 15px; border-radius:12px; margin-bottom:16px;
  background:var(--surface); border:1px solid var(--border); }
.do-region.fehlt { background:var(--warn-weak);
  border-color:color-mix(in srgb, var(--warn) 32%, transparent); }
.do-region .k { display:block; font-size:10px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-faint); }
.do-region b { display:block; font-size:16px; margin-top:4px; }
.do-region.fehlt b { color:var(--warn); }
.do-region em { display:block; font-style:normal; font-size:11.5px; line-height:1.6;
  color:var(--text-faint); margin-top:7px; }
.do-region em b { display:inline; font-size:inherit; color:var(--text); }
.do-l { margin-bottom:15px; }
.do-l h4 { margin:0 0 8px; font-size:10.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-muted); }
.do-l ul { margin:0; padding-left:19px; font-size:12.5px; line-height:1.7; color:var(--text-faint); }
.do-l li { margin-bottom:3px; }
.do-z { display:flex; gap:11px; align-items:baseline; padding:8px 0;
  border-bottom:1px solid var(--border); font-size:12.5px; }
.do-z:last-child { border-bottom:none; }
.do-z b { flex:none; min-width:88px; }
.do-z span { color:var(--text-faint); }

/* Onboarding: die zwei Fragen, die alles Weitere steuern */
.ob-frage { margin-bottom:16px; padding:13px 15px; border-radius:13px;
  background:var(--surface); border:1px solid var(--border); }
.ob-frage .k { display:block; font-size:12.5px; font-weight:700; margin-bottom:9px; }
.ob-w { display:flex; gap:7px; flex-wrap:wrap; }
.ob-b { padding:8px 14px; border-radius:99px; cursor:pointer; font:inherit; font-size:12.5px;
  font-weight:650; background:var(--surface-2); color:var(--text-muted);
  border:1px solid var(--border); transition:all .15s var(--ease); }
.ob-b:hover { border-color:var(--border-strong); color:var(--text); }
.ob-b.on { background:var(--accent-weak); color:var(--text);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.ob-hin { margin:10px 0 0; font-size:11.5px; line-height:1.6; color:var(--text-faint); }

/* ============================================================
   Druck
   ------------------------------------------------------------
   Es gibt einen Moment, in dem diese App nicht auf dem eigenen Schirm
   landet, sondern auf einem Blatt beim Steuerberater — oder in dessen
   Ordner. Dafuer gab es bisher eine einzige Regel.

   Zwei Grundsaetze:
     · Auf Papier wird hell gedruckt. Der Dunkelmodus verbraucht nicht nur
       Toner, er ist auf Papier auch schlicht schlechter lesbar. Die
       Farbtoken werden fuer den Druck deshalb ueberschrieben — unabhaengig
       davon, welches Thema am Bildschirm eingestellt ist.
     · Was man nicht anklicken kann, gehoert nicht aufs Blatt. Navigation,
       Knoepfe, Filter und Banner verschwinden; der Inhalt bekommt die
       ganze Seite.
   ============================================================ */
@media print {
  :root, [data-theme="dark"], [data-theme="light"] {
    --bg:#ffffff; --bg-grad:none;
    --surface:#ffffff; --surface-2:#ffffff; --surface-3:#f4f5f7;
    --card:#ffffff; --card-hover:#ffffff; --sidebar:#ffffff;
    --border:#d8dbe0; --border-strong:#b8bcc4;
    --text:#111318; --text-muted:#41454f; --text-faint:#6b7079;
    --shadow:none; --shadow-lg:none;
    --accent:#3b3f8f; --accent-weak:#eef0fb; --accent2:#3b3f8f;
    --pos:#0f6b45; --pos-weak:#eaf5ef;
    --neg:#9c2c21; --neg-weak:#fbeeec;
    --warn:#8a6410; --warn-weak:#faf3e2;
    --info:#22558f; --info-weak:#eaf1fa;
    color-scheme: light;
  }
  html, body { background:#fff !important; }

  /* Bedienelemente haben auf Papier nichts verloren */
  .sidebar, .topbar, .mob-tabs, .demo-bar, #cookieBar, .cookie-btn,
  .tb-search, .tb-new, .tb-me, .fab, .toast-wrap,
  .btn, button, .tp-jump, .jr-tab, .fp-tabs, .iv-tabs,
  .page-actions, .fc-cmp, .tz-t, .fc-plans-t { display: none !important; }

  /* Aufgeklappte Bereiche muessen aufs Blatt, auch wenn ihr Schalter weg ist */
  .tz-b, .fc-plans-b { display: block !important; }

  /* Der Inhalt bekommt die ganze Breite */
  .app, .main, .content, .content-inner {
    display:block !important; margin:0 !important; padding:0 !important;
    width:100% !important; max-width:none !important; overflow:visible !important;
    height:auto !important; }

  .card, .fc-card, .kpi, .tp-card {
    border:1px solid var(--border) !important; box-shadow:none !important;
    break-inside: avoid; page-break-inside: avoid; }

  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  table { break-inside: auto; }
  tr { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }

  /* Ausklappbares, Karten und Tabellen duerfen nicht seitlich abgeschnitten
     werden — auf Papier gibt es kein Scrollen. */
  .tw, .fc-plans-w, .jm-liste, .su-bars, .ea-file code, pre {
    overflow: visible !important; white-space: pre-wrap !important; }

  /* Seitenraender: der Ordner braucht links Platz fuer die Lochung */
  @page { margin: 18mm 14mm 16mm 22mm; }
}

/* Gewerbe-Lotse: der datierte Entschluss */
.gw-entschluss { margin-top:16px; padding:15px 17px; border-radius:14px;
  background:var(--surface); border:1px dashed var(--border-strong); }
.gw-entschluss.gesetzt { border-style:solid;
  border-color:color-mix(in srgb, var(--accent) 34%, transparent);
  background:linear-gradient(140deg, var(--accent-weak), transparent 72%), var(--surface); }
.ge-k b { display:block; font-size:13.5px; }
.ge-k span { display:block; font-size:11.5px; line-height:1.6; color:var(--text-faint); margin-top:3px; }
.ge-w { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.ge-b { padding:9px 14px; border-radius:11px; cursor:pointer; font:inherit; text-align:left;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted);
  transition:all .15s var(--ease); }
.ge-b:hover { border-color:var(--border-strong); color:var(--text); }
.ge-b.on { background:var(--accent-weak); color:var(--text);
  border-color:color-mix(in srgb, var(--accent) 48%, transparent); }
.ge-b b { display:block; font-size:12.5px; font-weight:700; }
.ge-b em { display:block; font-style:normal; font-family:var(--font-mono);
  font-size:10px; color:var(--text-faint); margin-top:2px; }
.ge-am { display:flex; gap:7px; align-items:flex-start; margin:11px 0 0;
  font-size:11.5px; line-height:1.6; color:var(--text-faint); }
.ge-am > svg { flex:none; margin-top:2px; color:var(--pos); }
.ge-am b { color:var(--text); }

/* Rückmeldung der Steuerberatung */
.brk { margin-top:16px; }
.brk-z { font-family:var(--font-mono); font-size:11.5px; font-weight:700; padding:3px 9px;
  border-radius:999px; background:var(--surface-2); color:var(--text-faint); }
.brk-z.voll { background:color-mix(in srgb, var(--pos) 15%, transparent); color:var(--pos); }
.brk-lead { font-size:12.5px; line-height:1.65; margin:-4px 0 14px; }
.brk-k { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:12px;
  padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid var(--border); }
.brk-l { display:flex; flex-direction:column; }
.brk-i { border-bottom:1px solid var(--border); }
.brk-i:last-child { border-bottom:0; }
.brk-h { display:flex; align-items:center; gap:10px; width:100%; padding:11px 2px;
  background:none; border:0; font:inherit; color:inherit; cursor:pointer; text-align:left; }
.brk-s { display:flex; flex:none; width:22px; height:22px; border-radius:7px;
  align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--text-faint); }
.brk-i.hat .brk-s { background:color-mix(in srgb, var(--pos) 15%, transparent); color:var(--pos); }
.brk-t { flex:1; font-size:13px; font-weight:600; min-width:0; }
.brk-d { font-size:11px; color:var(--text-faint); font-family:var(--font-mono);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:46%; }
.brk-o { font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--warn); }
.brk-a { margin:-4px 0 11px 32px; font-size:12.5px; line-height:1.65; color:var(--text-muted);
  white-space:pre-wrap; }
.brk-e { padding:0 0 13px 32px; }
.brk-f { display:flex; gap:7px; align-items:flex-start; margin:14px 0 0; padding-top:12px;
  border-top:1px solid var(--border); font-size:11.5px; line-height:1.6; color:var(--text-faint); }
.brk-f > svg { flex:none; margin-top:2px; }
@media (max-width:560px) { .brk-d { display:none; } .brk-a, .brk-e { margin-left:0; padding-left:0; } }

/* Auskunft der Kanzlei im Gewerbe-Lotsen */
.ge-berater { margin-top:12px; padding:10px 13px; border-radius:10px;
  background:var(--surface-2); border-left:3px solid var(--accent); }
.gb-k { display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); }
.gb-k em { font-style:normal; font-weight:600; letter-spacing:0; text-transform:none;
  font-size:11px; color:var(--text-muted); }
.gb-k span { font-family:var(--font-mono); font-size:10.5px; letter-spacing:0;
  text-transform:none; color:var(--text-faint); }
.ge-berater p { margin:6px 0 0; font-size:12.5px; line-height:1.65;
  color:var(--text-muted); white-space:pre-wrap; }

/* Instrumenten-Zeichen */
.symi { flex:none; display:block; }
.td-sym { display:inline-flex; align-items:center; gap:9px; }
.td-sym b { font-weight:600; }
.symlbl { display:inline-flex; align-items:center; gap:9px; min-width:0; }
.sl-t { min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.sl-t b { font-family:var(--font-mono); font-size:13px; font-weight:600; }
.sl-t em { font-style:normal; font-size:11px; color:var(--text-faint); }
.qe-chip.sym { display:inline-flex; align-items:center; gap:6px; }
.tm-chip.mit-sym { display:inline-flex; align-items:center; gap:7px; }
.tm-symvor { display:flex; align-items:center; gap:10px; padding:8px 11px; margin-bottom:8px;
  border-radius:11px; background:var(--surface-2); border:1px solid var(--border);
  font-size:12.5px; color:var(--text-muted); }


/* Plattform mit gezeichneter Bildmarke: die Marke traegt die Farbe
   selbst, deshalb hier keine gefuellte Kachel dahinter. */
.fc-plat.hat-marke { padding:3px 11px 3px 6px; font-size:11px; }
.fc-plat.hat-marke > svg, .fc-plat.hat-marke > img { flex-shrink:0; }

/* ── Jahresrechnung ── */
.jj-kern { border-radius:18px; padding:26px 24px; text-align:center; margin:6px 0 20px;
  border:1px solid var(--border-strong); }
.jj-kern.plus  { background:linear-gradient(160deg, color-mix(in srgb, var(--pos) 15%, transparent), transparent 68%), var(--surface);
  border-color:color-mix(in srgb, var(--pos) 38%, transparent); }
.jj-kern.minus { background:linear-gradient(160deg, color-mix(in srgb, var(--neg) 14%, transparent), transparent 68%), var(--surface);
  border-color:color-mix(in srgb, var(--neg) 34%, transparent); }
.jj-satz { font-size:14px; color:var(--text-muted); line-height:1.6; }
.jj-satz b { color:var(--text); }
.jj-zahl { font-family:var(--font-mono); font-size:clamp(30px,6vw,46px); font-weight:900;
  letter-spacing:-.035em; margin:7px 0 5px; }
.jj-kern.plus  .jj-zahl { color:var(--pos); }
.jj-kern.minus .jj-zahl { color:var(--neg); }
.jj-rechnung { font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); }
.jj-zeilen { display:flex; flex-direction:column; }
.jj-z { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:baseline;
  padding:10px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.jj-z:last-child { border-bottom:0; }
.jj-z span { color:var(--text-muted); min-width:0; }
.jj-z em { font-style:normal; font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono); }
.jj-z b { font-family:var(--font-mono); font-weight:700; font-size:14px; }
.jj-quote { margin:16px 0 0; padding:12px 15px; border-radius:12px; font-size:13px; line-height:1.65;
  background:var(--surface-2); border-left:3px solid var(--accent); color:var(--text-muted); }
.jj-quote b { color:var(--text); font-family:var(--font-mono); }
.jj-firmen { margin-top:20px; }
.jj-f-k { font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:8px; }
.jj-f { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:11px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--border); }
.jj-f:last-child { border-bottom:0; }
.jj-f-n { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jj-f-d { font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); }
.jj-f b { font-family:var(--font-mono); font-size:13.5px; }
.jj-fuss { display:flex; gap:7px; align-items:flex-start; margin:18px 0 0; padding-top:14px;
  border-top:1px solid var(--border); font-size:11.5px; line-height:1.65; color:var(--text-faint); }
.jj-fuss > svg { flex:none; margin-top:2px; }
@media (max-width:560px) {
  .jj-f { grid-template-columns:auto minmax(0,1fr) auto; }
  .jj-f-d { display:none; }
}

/* ============================================================
   Tippziele auf dem Telefon
   ------------------------------------------------------------
   Gemessen waren in der App 31 Bedienelemente unter 32 px Höhe —
   die Symbol-Chips der Schnellerfassung bei 28 px, das Schließen-
   Kreuz bei 26 px. Apple empfiehlt 44 pt, Google 48 dp.

   Vergrößert wird die TREFFERFLÄCHE, nicht die Optik: Die Chips
   sollen weiter schlank aussehen, sich aber treffen lassen. Dafür
   sorgt ein unsichtbarer Bereich, der über das Element hinausragt.
   ============================================================ */
@media (pointer: coarse) {
  .tp-sym, .qs-chip, .chip, .ctab, .tag,
  .btn-icon, .mob-tab, .lang-btn {
    position: relative;
  }
  .tp-sym::after, .qs-chip::after, .chip::after, .ctab::after, .tag::after,
  .btn-icon::after, .lang-btn::after {
    content: '';
    position: absolute;
    /* Auf mindestens 44 px in beide Richtungen strecken. */
    inset: 50% 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
    min-width: 100%; min-height: 100%;
  }
}