/* =====================================================================
   Flowstate CRM — Designsystem (Estera-Referenz, Flowstate-Blau)
   Icon-Rail + Top-Bar + Reiter + Segment-Switcher · Raster 8px
   ===================================================================== */
:root{
  --blau-900:#0B2545;--blau-800:#12376B;--blau-700:#1B4B93;--blau-600:#2563EB;
  --blau-500:#3B82F6;--blau-400:#60A5FA;--blau-300:#93C5FD;--blau-200:#BFDBFE;
  --blau-100:#DBEAFE;--blau-50:#EFF6FF;
  --background:#F7F8FB;--surface:#FFFFFF;--surface-2:#F1F3F9;--surface-3:#E8ECF5;
  --border:#E6E9F0;--border-stark:#D3DAE6;
  --foreground:#0F1B2D;--text-secondary:#4A5568;--text-muted:#7A8699;
  --primary:var(--blau-600);--primary-hover:var(--blau-700);--primary-soft:var(--blau-50);
  --akzent:#D63384;--akzent-flaeche:#FDEEF5;--akzent-rand:#F7D6E6;
  --success:#157A48;--success-flaeche:#E7F5EE;
  --warning:#AE7413;--warning-flaeche:#FDF4E3;
  --danger:#C2374F;--danger-flaeche:#FCECEF;
  --info:#2B7CC4;--info-flaeche:#E9F2FB;
  --stage-1:#93C5FD;--stage-2:#60A5FA;--stage-3:#3B82F6;--stage-4:#2563EB;
  --stage-5:#1B4B93;--stage-6:#12376B;--stage-7:#0B2545;--stage-8:#157A48;
  --r-sm:8px;--r-md:10px;--r-lg:14px;
  --s1:0 1px 2px rgba(15,27,45,.05);--s2:0 2px 8px rgba(15,27,45,.07);--s3:0 14px 40px rgba(15,27,45,.16);
  --tempo:170ms cubic-bezier(.4,0,.2,1);
}
/* Dunkle Fassung — nur die Farbmarken werden getauscht, kein Bauteil kennt sie einzeln.
   Umschalter sitzt in der Topbar, Auswahl liegt in localStorage. */
:root[data-theme="dark"]{
  --blau-900:#0A1626;--blau-800:#0F2540;--blau-700:#16345B;--blau-600:#4B8DF8;
  --blau-500:#5E9BFA;--blau-400:#7FB0FC;--blau-300:#9DC3FD;--blau-200:#1E3A5F;
  --blau-100:#16304F;--blau-50:#132840;
  --background:#0C1420;--surface:#121C2B;--surface-2:#1A2637;--surface-3:#243247;
  --border:#223044;--border-stark:#2E3F57;
  --foreground:#E8EEF6;--text-secondary:#A8B8CC;--text-muted:#7C8DA3;
  --primary:#4B8DF8;--primary-hover:#6BA1FA;--primary-soft:#16304F;
  --akzent:#F06CAB;--akzent-flaeche:#33192A;--akzent-rand:#4A2438;
  --success:#3DBB80;--success-flaeche:#12301F;
  --warning:#E0A33C;--warning-flaeche:#332612;
  --danger:#EC6A80;--danger-flaeche:#331A20;
  --info:#5AA9E6;--info-flaeche:#122536;
  --stage-1:#1E3A5F;--stage-2:#27507F;--stage-3:#31659F;--stage-4:#3B7ABF;
  --stage-5:#4B8DF8;--stage-6:#7FB0FC;--stage-7:#9DC3FD;--stage-8:#3DBB80;
  --s1:0 1px 2px rgba(0,0,0,.4);--s2:0 2px 8px rgba(0,0,0,.45);--s3:0 14px 40px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--background);color:var(--foreground);
  font:400 14px/1.55 'Inter','Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1{font-size:22px;font-weight:600;letter-spacing:-.015em}
h2{font-size:16px;font-weight:600;letter-spacing:-.01em}
h3{font-size:14px;font-weight:600}
.caption{font-size:12px;color:var(--text-muted)}
.sub{font-size:13px;color:var(--text-secondary)}
.muted{color:var(--text-muted)}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
svg{flex-shrink:0}

/* ---------- Anmeldung ---------- */
body.login-seite{display:grid;place-items:center;min-height:100vh;
  background:radial-gradient(900px 500px at 50% -5%,var(--blau-50),transparent 65%),var(--background)}
.login-karte{width:min(410px,92vw);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:40px;box-shadow:var(--s3)}
.login-marke{display:flex;align-items:center;gap:13px}
.login-logo{width:44px;height:44px;border-radius:12px;background:var(--blau-900);color:#fff;
  display:grid;place-items:center;box-shadow:0 4px 14px rgba(11,37,69,.3)}
.login-logo svg{width:22px;height:22px}
.marke{font-size:19px;font-weight:700;letter-spacing:-.02em}
.marke em{color:var(--primary);font-style:normal}
.marke-sub{font-size:11px;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.login-karte form{display:grid;gap:14px;margin-top:22px}

/* ---------- Gerüst: Icon-Rail + Inhalt ---------- */
.shell{min-height:100vh}
.rail{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;
  padding:14px;position:fixed;top:0;left:0;bottom:0;width:88px;gap:3px;z-index:40;overflow:hidden;
  transition:width var(--tempo),box-shadow var(--tempo)}
.rail:hover{width:258px;box-shadow:var(--s3)}
.rail-wort{white-space:nowrap;opacity:0;transition:opacity 120ms;font-size:13.5px;font-weight:500}
.rail:hover .rail-wort{opacity:1}
.rail-gruppe{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-muted);padding:16px 10px 6px;white-space:nowrap;opacity:0;transition:opacity 120ms;height:32px}
.rail:hover .rail-gruppe{opacity:1}
.rail-marke{display:flex;align-items:center;gap:14px;padding:0 4px 18px;white-space:nowrap;min-width:0}
.rail-logo{width:40px;height:40px;border-radius:11px;background:var(--blau-900);color:#fff;
  display:grid;place-items:center;box-shadow:var(--s2);flex-shrink:0}
.rail-logo svg{width:20px;height:20px}
/* min-width:0 ist noetig: Flex-Kinder sind sonst mindestens so breit wie ihr
   Inhalt, und die Beschriftung ist nur unsichtbar (opacity), nicht weg. Ohne
   das waeren alle Zeilen breiter als die schmale Rail und die Markierung
   liefe bis an die Kante. */
.rail a{height:44px;border-radius:11px;display:flex;align-items:center;gap:14px;padding:0 20px;color:var(--text-muted);
  position:relative;flex-shrink:0;min-width:0;
  transition:background var(--tempo),color var(--tempo),padding var(--tempo)}
.rail:hover a{padding:0 12px}
.rail a:hover{background:var(--surface-2);color:var(--foreground)}
.rail a.aktiv{background:var(--primary-soft);color:var(--primary)}
.rail a.aktiv::before{content:'';position:absolute;left:-14px;top:11px;bottom:11px;width:3px;
  background:var(--primary);border-radius:0 3px 3px 0}
.rail a svg{width:19px;height:19px}
.rail-luecke{flex:1}
.rail-nutzer{display:flex;align-items:center;gap:14px;padding:12px 5px;border-top:1px solid var(--border);white-space:nowrap;min-width:0}
.rail-avatar{width:34px;height:34px;border-radius:50%;background:var(--blau-600);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:600;flex-shrink:0}
.rail form{margin:0}
.rail button{background:none;color:var(--text-muted);padding:0 11px;height:42px;
  border-radius:11px;display:flex;align-items:center;gap:14px;box-shadow:none}
.rail button:hover{background:var(--surface-2);color:var(--danger);box-shadow:none}
.inhalt{display:flex;flex-direction:column;min-width:0;margin-left:88px}

/* ---------- Top-Bar ---------- */
.topbar{display:flex;align-items:center;gap:20px;padding:13px 26px;background:var(--surface);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.topbar-titel{font-size:17px;font-weight:600;white-space:nowrap}
.topbar-suche{flex:1;max-width:540px;margin:0 auto;position:relative}
.topbar-suche input{background:var(--surface-2);border-color:transparent;padding-left:38px;height:38px;border-radius:10px}
.topbar-suche input:focus{background:var(--surface);border-color:var(--primary)}
.topbar-suche svg{position:absolute;left:13px;top:11px;width:16px;height:16px;color:var(--text-muted)}
.kbd{position:absolute;right:11px;top:9px;font-size:11px;color:var(--text-muted);background:var(--surface);
  border:1px solid var(--border);border-radius:5px;padding:2px 6px}
.topbar-rechts{display:flex;align-items:center;gap:14px;margin-left:auto}
.datum-chip{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-secondary);
  background:var(--surface-2);border-radius:99px;padding:6px 13px;white-space:nowrap}
.datum-chip svg{width:14px;height:14px}
.nutzer-block{text-align:right;line-height:1.25}
.nutzer-name{font-size:13.5px;font-weight:600}
.nutzer-rolle{font-size:11.5px;color:var(--text-muted)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--blau-600);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:13px}

/* ---------- Reiterleiste ---------- */
.reiterleiste{display:flex;align-items:center;gap:20px;padding:0 26px;background:var(--surface);
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.reiter{display:flex;gap:26px}
.reiter a{padding:13px 0;font-size:14px;font-weight:500;color:var(--text-secondary);
  border-bottom:2px solid transparent;transition:color var(--tempo),border-color var(--tempo)}
.reiter a:hover{color:var(--foreground);text-decoration:none}
.reiter a.aktiv{color:var(--akzent);border-bottom-color:var(--akzent);font-weight:600}
.segmente{display:inline-flex;gap:2px;background:var(--surface-2);padding:3px;
  border-radius:9px;margin:8px 0 8px auto}
.segmente a{padding:6px 14px;border-radius:7px;font-size:13px;font-weight:500;color:var(--text-secondary)}
.segmente a:hover{color:var(--foreground);text-decoration:none}
.segmente a.aktiv{background:var(--surface);color:var(--foreground);box-shadow:var(--s1);font-weight:600}

main{padding:22px 26px 64px;min-width:0}
.seiten-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  flex-wrap:wrap;margin-bottom:18px}
.seiten-kopf p{font-size:13.5px;color:var(--text-secondary);margin-top:2px}

/* ---------- Bedienelemente ---------- */
button,.knopf{background:var(--primary);color:#fff;border:0;border-radius:var(--r-sm);padding:9px 16px;
  font:600 13.5px/1.2 inherit;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:background var(--tempo),box-shadow var(--tempo),transform var(--tempo)}
button:hover,.knopf:hover{background:var(--primary-hover);text-decoration:none;box-shadow:var(--s2)}
button:active{transform:translateY(1px)}
button.dunkel,.knopf.dunkel{background:var(--blau-800)}
button.dunkel:hover{background:var(--blau-900)}
button.sekundaer,.knopf.sekundaer{background:var(--surface);color:var(--foreground);border:1px solid var(--border-stark)}
button.sekundaer:hover{background:var(--surface-2)}
button.still{background:transparent;color:var(--text-secondary);box-shadow:none;padding:6px 10px}
button.still:hover{background:var(--surface-2);box-shadow:none}
button.klein{padding:5px 11px;font-size:12.5px}
button svg,.knopf svg{width:16px;height:16px}
input,select,textarea{background:var(--surface);border:1px solid var(--border-stark);border-radius:var(--r-sm);
  padding:9px 12px;font:400 13.5px inherit;color:var(--foreground);width:100%;
  transition:border-color var(--tempo),box-shadow var(--tempo)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--blau-100)}
input::placeholder{color:var(--text-muted)}
label{display:block;font-size:12.5px;font-weight:550;color:var(--text-secondary);margin-bottom:6px}
.feld{margin-bottom:16px}.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- Karten & Raster ---------- */
.karte{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px 22px;box-shadow:var(--s1)}
.karte+.karte{margin-top:16px}
.karte-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}
.karte-kopf .sub{margin-top:2px}
.raster{display:grid;gap:16px}
.raster-3{grid-template-columns:1.15fr 1fr .9fr}
.raster-2{grid-template-columns:1fr 1fr}
@media(max-width:1300px){.raster-3{grid-template-columns:1fr}.raster-2{grid-template-columns:1fr}}

/* ---------- KPI-Kacheln ---------- */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-bottom:18px}
.kachel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;
  box-shadow:var(--s1);transition:box-shadow var(--tempo)}
.kachel:hover{box-shadow:var(--s2)}
.kachel-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}
.kachel-label{font-size:13px;font-weight:500;color:var(--text-secondary)}
.kachel-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--primary-soft);color:var(--primary)}
.kachel-icon svg{width:17px;height:17px}
.kachel-icon.gruen{background:var(--success-flaeche);color:var(--success)}
.kachel-icon.bernstein{background:var(--warning-flaeche);color:var(--warning)}
.kachel-icon.rosa{background:var(--akzent-flaeche);color:var(--akzent)}
.kachel-zahl{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.kachel-fuss{margin-top:9px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;
  font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--text-secondary)}
.b-blau{background:var(--info-flaeche);color:var(--info)}
.b-gruen{background:var(--success-flaeche);color:var(--success)}
.b-bernstein{background:var(--warning-flaeche);color:var(--warning)}
.b-rot{background:var(--danger-flaeche);color:var(--danger)}
.b-rosa{background:var(--akzent-flaeche);color:var(--akzent)}
.punkt{width:7px;height:7px;border-radius:50%;background:currentColor}
.trend{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;
  padding:3px 8px;border-radius:6px}
.trend.auf{background:var(--success-flaeche);color:var(--success)}
.trend.ab{background:var(--danger-flaeche);color:var(--danger)}

/* ---------- Tabellen ---------- */
.tabelle-huelle{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--s1)}
table.tabelle{width:100%;border-collapse:collapse}
.tabelle th{text-align:left;padding:12px 18px;font-size:12px;font-weight:600;color:var(--text-secondary);
  border-bottom:1px solid var(--border);white-space:nowrap}
.tabelle td{padding:13px 18px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle}
.tabelle tbody tr{transition:background var(--tempo)}
.tabelle tbody tr:hover{background:var(--surface-2)}
.tabelle tbody tr:last-child td{border-bottom:0}
.tabelle .rechts{text-align:right}
.zeile-titel{font-weight:600;line-height:1.35}
.zeile-sub{font-size:12px;color:var(--text-muted);margin-top:1px}
.rang{width:34px;height:26px;border-radius:7px;background:var(--surface-2);color:var(--text-secondary);
  display:grid;place-items:center;font-size:12px;font-weight:600}

/* ---------- Filterleiste ---------- */
.filter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filter .such{position:relative;flex:1;min-width:240px;max-width:360px}
.filter .such svg{position:absolute;left:12px;top:11px;width:15px;height:15px;color:var(--text-muted)}
.filter .such input{padding-left:36px}
.filter select{width:auto;min-width:150px}
.filter-zahl{margin-left:auto;font-size:13px;color:var(--text-muted)}

/* ---------- Trichter ---------- */
.trichter{display:grid;gap:9px}
.trichter-zeile{display:grid;grid-template-columns:1fr 215px;align-items:center;gap:16px}
.trichter-spur{display:flex;justify-content:center}
.trichter-balken{height:38px;border-radius:8px;display:grid;place-items:center;color:#fff;
  font-weight:700;font-size:14px;transition:width .8s cubic-bezier(.4,0,.2,1);min-width:44px}
.trichter-info{font-size:12.5px;line-height:1.45}
.trichter-info strong{font-weight:600;display:block}
.trichter-info span{color:var(--text-muted)}

/* ---------- Donut ---------- */
.donut-block{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.donut{position:relative;width:186px;height:186px;flex-shrink:0}
.donut svg{transform:rotate(-90deg)}
.donut-mitte{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.donut-mitte b{font-size:23px;font-weight:700;letter-spacing:-.02em;display:block}
.donut-legende{flex:1;min-width:230px;display:grid;gap:10px}
.legende-zeile{display:grid;grid-template-columns:12px 1fr auto auto;align-items:center;gap:11px;font-size:13px}
.legende-farbe{width:10px;height:10px;border-radius:3px}
.legende-wert{font-weight:600}
.legende-prozent{color:var(--text-muted);font-size:12px;min-width:36px;text-align:right}

/* ---------- Balken ---------- */
.balken-block{display:flex;align-items:flex-end;gap:14px;height:200px;padding-top:12px}
.balken-saeule{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%}
.balken{width:100%;max-width:60px;border-radius:7px 7px 0 0;margin-top:auto;
  background:linear-gradient(180deg,var(--blau-300),var(--blau-700));transition:height .8s cubic-bezier(.4,0,.2,1)}
.balken-label{font-size:12px;color:var(--text-secondary);white-space:nowrap}

/* ---------- Kanban ---------- */
.kanban{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 18px;align-items:flex-start}
.spalte{flex:0 0 286px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:14px;box-shadow:var(--s1);border-top:3px solid var(--stufe,var(--stage-3))}
.spalte-kopf{margin-bottom:12px}
.spalte-titel-zeile{display:flex;align-items:center;justify-content:space-between;gap:8px}
.spalte-titel{font-size:14px;font-weight:600}
.spalte-zahl{font-size:12px;font-weight:600;color:var(--text-muted)}
.spalte-quote{font-size:11.5px;color:var(--text-muted);margin-top:2px}
.spalte-karten{display:grid;gap:10px;min-height:56px}
.deal{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:13px;
  cursor:grab;transition:box-shadow var(--tempo),transform var(--tempo),background var(--tempo)}
.deal:hover{background:var(--surface);box-shadow:var(--s2);transform:translateY(-1px)}
.deal.zieht{opacity:.45;cursor:grabbing}
.spalte.ziel{background:var(--blau-50);border-color:var(--blau-300)}
.deal-kopf{display:flex;align-items:flex-start;gap:8px}
.deal-punkt{width:8px;height:8px;border-radius:50%;background:var(--stufe,var(--stage-3));margin-top:5px;flex-shrink:0}
.deal-name{font-weight:600;font-size:13.5px;line-height:1.35;flex:1}
.deal-griff{color:var(--border-stark)}
.deal-griff svg{width:13px;height:13px}
.deal-betrag{font-size:17px;font-weight:700;letter-spacing:-.02em;margin:7px 0 4px}
.deal-zeile{font-size:12px;color:var(--text-muted);margin-bottom:8px}
.deal-marken{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:9px}
.deal-fuss{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);
  padding-top:9px;border-top:1px solid var(--border)}
.deal-fuss svg{width:13px;height:13px;color:var(--text-muted)}
.spalte-leer{border:1.5px dashed var(--border-stark);border-radius:var(--r-md);padding:16px 10px;
  text-align:center;font-size:12px;color:var(--text-muted)}

/* ---------- Handlungsliste ---------- */
.signal{display:flex;align-items:center;gap:13px;background:var(--akzent-flaeche);border-radius:var(--r-md);
  padding:14px 16px;margin-bottom:16px}
.signal-icon{width:38px;height:38px;border-radius:11px;background:var(--surface);color:var(--akzent);
  display:grid;place-items:center;flex-shrink:0}
.signal-icon svg{width:18px;height:18px}
.signal-text{flex:1}
.signal-text b{font-size:13.5px;display:block}
.signal-text span{font-size:12.5px;color:var(--text-secondary)}
.aufgabe{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.aufgabe:last-child{border-bottom:0}
.aufgabe input[type=checkbox]{width:16px;height:16px;flex-shrink:0}
.aufgabe-text{flex:1}
.spalten-titel{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.06em;display:flex;align-items:center;gap:7px;margin-bottom:10px}
.spalten-titel svg{width:14px;height:14px}

/* ---------- Detail / Feed ---------- */
.zwei-spalten{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
@media(max-width:1100px){.zwei-spalten{grid-template-columns:1fr}}
.feed-eintrag{display:grid;grid-template-columns:28px 1fr;gap:11px;padding:12px 0;border-bottom:1px solid var(--border)}
.feed-eintrag:last-child{border-bottom:0}
.feed-icon{width:28px;height:28px;border-radius:9px;background:var(--surface-2);color:var(--text-muted);
  display:grid;place-items:center}
.feed-icon svg{width:14px;height:14px}
.feed-icon.gruen{background:var(--success-flaeche);color:var(--success)}
.feed-icon.blau{background:var(--info-flaeche);color:var(--info)}
.feed-text{font-size:13.5px;line-height:1.45}
.feed-zeit{font-size:11.5px;color:var(--text-muted);margin-top:2px}
dl.def{display:grid;grid-template-columns:auto 1fr;gap:11px 16px;font-size:13.5px;align-items:baseline}
dl.def dt{color:var(--text-secondary);font-weight:500;white-space:nowrap}
dl.def dd{text-align:right;font-weight:500}
.fortschritt{height:9px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.fortschritt>span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blau-500),var(--blau-700));transition:width .9s cubic-bezier(.4,0,.2,1)}

/* ---------- Hinweis / Leer / Dialog ---------- */
.hinweis{border-radius:var(--r-md);padding:13px 16px;font-size:13px;display:flex;gap:11px;align-items:flex-start}
.hinweis svg{width:17px;height:17px;margin-top:1px}
.hinweis.info{background:var(--info-flaeche);color:var(--info)}
.hinweis.warn{background:var(--warning-flaeche);color:var(--warning)}
.leer{text-align:center;padding:52px 24px}
.leer-icon{width:52px;height:52px;margin:0 auto 14px;border-radius:14px;background:var(--surface-2);
  display:grid;place-items:center;color:var(--text-muted)}
.leer-icon svg{width:24px;height:24px}
.leer h3{font-size:15px;margin-bottom:6px}
.leer p{font-size:13.5px;color:var(--text-secondary);max-width:420px;margin:0 auto}
dialog{border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;max-width:560px;width:92vw;
  box-shadow:var(--s3);color:var(--foreground)}
dialog::backdrop{background:rgba(15,27,45,.34);backdrop-filter:blur(2px)}
dialog h2{margin-bottom:4px}dialog .sub{margin-bottom:20px}
.dialog-fuss{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;padding-top:16px;border-top:1px solid var(--border)}

@media(max-width:860px){
  .rail{padding:10px;width:64px}.inhalt{margin-left:64px}
  .rail a{padding:0 12px}
  .topbar{padding:10px 14px;gap:10px}.topbar-suche{display:none}
  .reiterleiste{padding:0 14px;overflow-x:auto}.reiter{gap:16px}
  main{padding:16px 14px 48px}.feld-paar{grid-template-columns:1fr}
  .trichter-zeile{grid-template-columns:1fr}
  .raster,.raster-2,.raster-3{grid-template-columns:1fr!important}
}

/* Zeitraum-Umschalter wie bei Estera */
.zeitraum{display:flex;gap:2px;background:var(--surface-2);padding:4px;border-radius:10px;margin:14px 0 18px}
.zeitraum a{flex:1;text-align:center;padding:8px 12px;border-radius:7px;font-size:13px;font-weight:500;
  color:var(--text-secondary);transition:background var(--tempo),color var(--tempo)}
.zeitraum a:hover{color:var(--foreground);text-decoration:none}
.zeitraum a.aktiv{background:var(--blau-800);color:#fff;font-weight:600;box-shadow:var(--s1)}
.chart-kopf{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.chart-zahl{font-size:30px;font-weight:700;letter-spacing:-.03em}
.chart-achse{display:flex;justify-content:space-between;margin-top:6px}
.chart-y{position:absolute;left:0;top:0;bottom:0;width:48px;font-size:11px;color:var(--text-muted)}
.chart-y span{position:absolute;right:8px;transform:translateY(-50%);white-space:nowrap}
.chart-flaeche{position:relative;padding-left:48px}
.chart-fuss{font-size:12.5px;color:var(--text-secondary);margin-top:10px}

/* Forecast-Box */
.forecast{background:linear-gradient(135deg,var(--akzent-flaeche),var(--surface));border:1px solid var(--akzent-rand);
  border-radius:var(--r-md);padding:16px 18px;margin-bottom:16px}
.forecast-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--akzent);margin-bottom:6px}
.forecast-label svg{width:16px;height:16px}
.forecast-zahl{font-size:29px;font-weight:700;letter-spacing:-.03em;color:var(--foreground)}
.forecast-sub{font-size:12px;color:var(--text-muted);margin-top:3px}
.kennliste{display:grid;gap:2px}
.kennzeile{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.kennzeile:last-child{border-bottom:0}
.kennzeile svg{width:16px;height:16px;color:var(--text-muted)}
.kennzeile span{flex:1;color:var(--text-secondary)}
.kennzeile .rail-avatar{flex:none}
.kennzeile .rail-avatar,.kennzeile .caption{color:inherit}
.kennzeile .caption{color:var(--text-muted)}
.kennzeile b{font-weight:650}

/* ---------- Reiter "Pipeline-Volumen": Auswertung je Sparte ---------- */
.sparte-zeile{padding:15px 0;border-bottom:1px solid var(--border)}
.sparte-zeile:last-of-type{border-bottom:0}
.sparte-kopf{display:flex;align-items:baseline;gap:12px;margin-bottom:9px}
.sparte-kopf b{font-size:14.5px;font-weight:650}
.sparte-wert{margin-left:auto;font-size:16px;font-weight:700;letter-spacing:-.02em}
.sparte-spur{position:relative;height:22px;background:var(--surface-2);border-radius:7px;overflow:hidden}
.sparte-balken{position:absolute;left:0;top:0;bottom:0;background:var(--blau-200);border-radius:7px;
  transition:width var(--tempo)}
.sparte-balken.gewichtet{background:var(--blau-600)}
.sparte-fuss{display:flex;justify-content:space-between;margin-top:6px}
.legende-flach{display:flex;gap:20px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--text-secondary)}
.legende-flach span{display:flex;align-items:center;gap:7px}
.pkt{width:11px;height:11px;border-radius:3px;display:inline-block}
.pkt.gesamt{background:var(--blau-200)}.pkt.gewichtet{background:var(--blau-600)}
.stufen-liste{display:grid;gap:1px}
.stufen-zeile{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13px;
  border-bottom:1px solid var(--border)}
.stufen-zeile:last-child{border-bottom:0}
.stufen-punkt{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.stufen-name{min-width:118px;color:var(--text-secondary)}
.stufen-spur{flex:1;height:7px;background:var(--surface-2);border-radius:4px;overflow:hidden;min-width:40px}
.stufen-balken{height:100%;border-radius:4px;transition:width var(--tempo)}
.stufen-zeile b{min-width:20px;text-align:right;font-weight:650}
.stufen-wert{min-width:74px;text-align:right;color:var(--text-muted);font-size:12.5px}
.hinweis{margin-top:14px;background:var(--surface-2);border-left:3px solid var(--blau-500);
  border-radius:0 9px 9px 0;padding:11px 14px;font-size:12.8px;color:var(--text-secondary);line-height:1.5}
.hinweis b{color:var(--foreground)}

/* Rueckweg ins Operating System — sitzt ueber dem Nutzerblock */
.rail-zurueck{border-top:1px solid var(--border);border-radius:0;margin-bottom:2px;color:var(--text-muted)}
.rail-zurueck:hover{background:var(--primary-soft);color:var(--primary)}

/* ---------- Verschachtelte Navigation: Unterbereiche des aktiven Moduls ---------- */
.rail a.offen{color:var(--foreground)}
/* Untereintraege sind leicht eingerueckt, damit die Gruppe erkennbar bleibt —
   aber nur so weit, dass rechts genug Luft bleibt. Beim Ausfahren wird die
   Einrueckung groesser, weil dann Platz fuer die Beschriftung da ist. */
.rail-gruppe-unter{display:grid;gap:2px;margin:2px 0 6px 14px;padding-left:0;min-width:0;
  border-left:1px solid var(--border);
  transition:margin-left var(--tempo),padding-left var(--tempo)}
.rail:hover .rail-gruppe-unter{margin-left:23px;padding-left:9px}
.rail a.rail-unter{height:38px;font-size:13px;padding:0 13px}
.rail:hover a.rail-unter{padding:0 12px}
.rail a.rail-unter svg{width:16px;height:16px}
.rail a.rail-unter .rail-wort{font-size:12.8px}
.rail a.rail-unter.aktiv::before{left:-14px;top:9px;bottom:9px}
.rail:hover a.rail-unter.aktiv::before{left:-23px}
.rail-marke{text-decoration:none;color:inherit}
.rail-marke:hover{text-decoration:none}

/* ---------- Hell/Dunkel-Schalter ---------- */
.thema-schalter{padding:8px;border-radius:9px;background:transparent;box-shadow:none;
  color:var(--text-muted);display:grid;place-items:center;width:36px;height:36px}
.thema-schalter:hover{background:var(--surface-2);color:var(--foreground);box-shadow:none}
.thema-schalter svg{width:17px;height:17px;grid-area:1/1}
.thema-schalter svg:last-child{display:none}
:root[data-theme="dark"] .thema-schalter svg:first-child{display:none}
:root[data-theme="dark"] .thema-schalter svg:last-child{display:block}