/* ═══════════════════════════════════════════════════════════════════════
   HeimatSeeds — Redesign-Skin (Etappe 3) · 2026-07-13
   Optik-Ebene, die dashboard.css gezielt überschreibt (nach ihr geladen).
   Zieht den glasigen Karten-Look aus der Design-Vorschau über die ganze App.
   VOLLSTÄNDIG REVERSIBEL: <link> zu dieser Datei entfernen = alter Look zurück.
   Struktur/Funktion bleibt unberührt — nur Aussehen.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --sk-accent:#30d158;
  --sk-card:rgba(28,28,30,.72);
  --sk-card-hover:rgba(44,44,46,.85);
  --sk-border:rgba(255,255,255,.08);
  --sk-border-hover:rgba(255,255,255,.16);
  --sk-t2:#86868b;
  --sk-blur:blur(20px) saturate(180%);
  --sk-shadow:0 2px 10px rgba(0,0,0,.3);
  --sk-r:16px; --sk-r-sm:11px;
}

/* ── Inhaltsfläche: mehr Luft, lesbare Breite ── */
.panel.active{padding:24px 30px 40px!important}

/* ── Kopfzeile (Toolbar) ── */
.toolbar{background:rgba(10,10,12,.7)!important;backdrop-filter:var(--sk-blur);border-bottom:1px solid var(--sk-border)!important;padding:12px 24px!important}

/* ── Abschnitts-Überschriften ── */
.dash-section-hdr,.section-hdr{font-size:11.5px!important;letter-spacing:.06em;color:var(--sk-t2)!important;text-transform:uppercase;font-weight:650!important;margin:22px 0 12px!important}

/* ── Dashboard-Kennzahlen ── */
.dash-grid{gap:14px!important}
.dash-kpi{background:var(--sk-card)!important;backdrop-filter:var(--sk-blur);border:1px solid var(--sk-border)!important;border-radius:var(--sk-r)!important;padding:18px 18px 16px!important;box-shadow:var(--sk-shadow);transition:transform .2s,border-color .2s}
.dash-kpi:hover{transform:translateY(-3px);border-color:var(--sk-border-hover)!important}
.dash-kpi-icon{font-size:20px!important;margin-bottom:8px!important;opacity:.95}
.dash-kpi-val{font-size:31px!important;font-weight:720!important;letter-spacing:-.03em!important;line-height:1!important}
.dash-kpi-lbl{font-size:11px!important;color:var(--sk-t2)!important;text-transform:uppercase;letter-spacing:.05em;margin-top:7px!important;font-weight:600}

/* ── Karten (generisch, modulübergreifend) ── */
.card,.proto-card,.backup-card,.dash-activity,.dash-alerts,.tc-stats,.steck-stats,
.wp-card,.best-card,.lager-card,.ze-card,.aufg-col,.ideen-card,.usermgmt-card,.account-card{
  background:var(--sk-card)!important;border:1px solid var(--sk-border)!important;
  border-radius:var(--sk-r)!important;backdrop-filter:var(--sk-blur)}
.card,.dash-activity,.proto-card,.usermgmt-card,.account-card{padding:20px!important;box-shadow:var(--sk-shadow)}
.dash-alerts{padding:14px 18px!important}
.card:hover,.proto-card:hover{border-color:var(--sk-border-hover)!important}
.card-title{font-weight:650!important;letter-spacing:-.01em}

/* ── Statistik-Kacheln ── */
.tc-stat,.steck-stat{background:var(--sk-card)!important;border:1px solid var(--sk-border)!important;border-radius:var(--sk-r-sm)!important;padding:15px 16px!important}

/* ── Aktivitäts-Zeilen ── */
.dash-act-row{padding:9px 2px!important;border-bottom:1px solid var(--sk-border)!important}
.dash-act-who{font-weight:620!important;color:var(--sk-accent)!important}

/* ── Buttons: Aktions-Buttons abrunden; primäre grün ── */
.toolbar-btn,.btn-add-row,.btn-multiselect-toggle,.tc-filter-btn,.wp-mat-btn,
.dash-subtab,.btn-mark-done,.proto-btn,.best-btn,.lager-btn,.ze-btn,.ideen-btn{
  border-radius:10px!important;transition:.18s}
.toolbar-btn{border:1px solid var(--sk-border)!important}
.toolbar-btn:hover,.tc-filter-btn:hover,.wp-mat-btn:hover{border-color:var(--sk-border-hover)!important;background:rgba(255,255,255,.06)!important}
.btn-tc-anlegen,.klima-submit,.btn-primary,.ze-submit,.btn-save{
  border-radius:10px!important;background:var(--sk-accent)!important;color:#04210e!important;font-weight:640!important;border:none!important}
.btn-tc-anlegen:hover,.klima-submit:hover,.btn-primary:hover{filter:brightness(1.06)}

/* ── Formularfelder in Panels ── */
.panel input[type="text"],.panel input[type="number"],.panel input[type="date"],
.panel input[type="search"],.panel input:not([type]),.panel select,.panel textarea{
  border-radius:var(--sk-r-sm)!important;border:1px solid var(--sk-border)!important;
  background:#1c1c1e!important;transition:border-color .18s}
.panel input[type="text"]:focus,.panel input[type="number"]:focus,.panel select:focus,
.panel textarea:focus,.panel input:not([type]):focus{border-color:rgba(48,209,88,.5)!important;outline:none!important}

/* ── Tabellen: luftigere Header, Row-Hover, weiche Ränder ── */
.genetik-table,.steck-table,.gendb-table,.lager-table,.best-table,.tc-medien-table,.ze-table{
  border-radius:var(--sk-r-sm);overflow:hidden}
.genetik-table th,.steck-table th,.gendb-table th,.lager-table th,.best-table th,.tc-medien-table th,.ze-table th{
  font-size:10.5px!important;letter-spacing:.05em;color:var(--sk-t2)!important;text-transform:uppercase;
  font-weight:650!important;padding:11px 12px!important;background:rgba(255,255,255,.02)!important}
.genetik-table td,.steck-table td,.gendb-table td,.lager-table td,.best-table td,.tc-medien-table td,.ze-table td{
  padding:10px 12px!important}
.genetik-table tbody tr:hover,.gendb-table tbody tr:hover,.lager-table tbody tr:hover,
.best-table tbody tr:hover,.steck-table tbody tr:hover{background:rgba(255,255,255,.03)!important}

/* ── Filter-/Status-Chips runder ── */
.tc-filter-btn,.dash-subtab,.steck-filter,.best-filter{border-radius:20px!important}

/* ── Modale/Overlays: sanfter Glas-Look (nur Rahmen/Radius, keine Logik) ── */
.pa-modal,.tc-modal,.row-edit-modal,.cgd-confirm-modal,.b2-modal,.dash-modal{
  border-radius:var(--sk-r)!important;border:1px solid var(--sk-border)!important}

/* ═══ Etappe 3b: Branding, Avatar, Cockpit-Begrüßung + kräftigerer Look ═══ */

/* Gebrandete Seitenleiste */
.sidebar-header{padding:16px 14px 14px!important;gap:11px!important;align-items:center}
.sk-brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:conic-gradient(from 210deg,#30d158,#0a84ff,#bf5af2,#30d158);
  font-size:16px!important;color:#fff!important;filter:grayscale(1) brightness(3);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 4px 14px rgba(48,209,88,.25);flex:none}
.sk-brand{display:flex!important;flex-direction:column;line-height:1.15}
.sk-brand b{font-size:15px;font-weight:700;letter-spacing:-.02em;color:#f5f5f7}
.sk-brand small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sk-accent);font-weight:600;margin-top:1px}
.sidebar.collapsed .sk-brand{display:none!important}

/* Nutzer-Box mit Avatar */
.sk-user-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sk-avatar{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:14px;font-weight:700;color:#04210e;background:linear-gradient(135deg,#30d158,#0a84ff);
  box-shadow:0 2px 8px rgba(48,209,88,.3)}
.sk-user-meta{min-width:0}
.sk-user-meta #sidebar-username{margin:1px 0 0!important}

/* Cockpit-Begrüßung */
.sk-cockpit-hello{margin:2px 0 20px}
.sk-cockpit-hello h1{font-size:26px;font-weight:720;letter-spacing:-.03em;margin:0;color:#f5f5f7;text-wrap:balance}
.sk-cockpit-hello p{font-size:14px;color:var(--sk-t2);margin:5px 0 0}

/* Kräftiger: mehr Rundung, mehr Präsenz */
.dash-kpi,.card,.proto-card,.backup-card,.dash-activity,.dash-alerts,.usermgmt-card,.account-card{border-radius:18px!important}
.dash-kpi-val{font-size:33px!important}
.dash-kpi:hover{box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(48,209,88,.15)!important}
.dash-section-hdr,.section-hdr{font-size:12px!important;margin:26px 0 14px!important}

/* ═══ Etappe 4 (revidiert 2026-07-13): zurück zur klaren System-Schrift ═══
   Der Owner bevorzugt den sauberen Glas-Look des ERSTEN Mockups (klare
   System-/SF-Pro-Schrift). Die technische IBM-Plex/Mono-Typografie wurde
   wieder ENTFERNT — sie wirkte zu hart. Nur ein paar ruhige Abstände bleiben.
   Nebeneffekt: keine Google-Font-Abhängigkeit mehr (lädt überall, auch wenn
   ein Firmennetz fonts.gstatic.com blockt). */
.dash-grid{gap:16px!important}
.sk-cockpit-hello{margin-bottom:26px!important}

/* ═══ Etappe 5: Baustein-System — klare Button-Hierarchie ═══
   Löst „alles gleich": Bausteine sichtbar unterscheiden, damit man auf einen
   Blick versteht, was wichtig/gefährlich ist und was zusammengehört. */

/* PRIMÄR — Haupt-Aktionen: gefüllt grün */
.btn-pflanze-anlegen,.btn-tc-anlegen,.klima-submit,.ideen-submit,.btn-import-heimat,.login-btn{
  background:var(--sk-accent)!important;color:#04210e!important;border:none!important;font-weight:600!important;
  border-radius:10px!important;box-shadow:0 2px 10px rgba(48,209,88,.22),inset 0 1px 0 rgba(255,255,255,.15)!important}
.btn-pflanze-anlegen:hover,.btn-tc-anlegen:hover,.klima-submit:hover,.ideen-submit:hover,.btn-import-heimat:hover,.login-btn:hover{filter:brightness(1.07)!important}

/* HINZUFÜGEN — leise Ghost-Affordance mit Akzent-Text */
.btn-add-row{background:rgba(48,209,88,.06)!important;border:1px dashed rgba(48,209,88,.35)!important;
  color:#5fe08a!important;border-radius:11px!important;font-weight:500!important}
.btn-add-row:hover{background:rgba(48,209,88,.12)!important}

/* SEKUNDÄR — Neben-Aktionen: Umriss, subtil */
.toolbar-btn,.proto-btn,.backup-btn,.gendb-graph-toggle-btn,.wp-mat-btn,.btn-multiselect-toggle,.btn-tc-scan{
  background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.1)!important;
  border-radius:9px!important;font-weight:500!important;color:#e6ebe6!important;transition:.15s}
.toolbar-btn:hover,.proto-btn:hover,.backup-btn:hover,.gendb-graph-toggle-btn:hover,.wp-mat-btn:hover,.btn-multiselect-toggle:hover,.btn-tc-scan:hover{
  background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.18)!important}

/* ZEILEN-ICONS — leise (QR/Löschen pro Zeile); Löschen rot beim Hover */
.btn-qr-row,.btn-del-row{background:transparent!important;border:none!important;opacity:.4;
  border-radius:7px!important;box-shadow:none!important;transition:.15s}
.btn-qr-row:hover{opacity:1;background:rgba(255,255,255,.1)!important}
.btn-del-row:hover{opacity:1;background:rgba(229,72,64,.18)!important}

/* SCHLIESSEN — leise Icons */
.lager-modal-close,.aufg-modal-close,.dash-modal-close,.chat-header-close,.chat-header-clear,.gendb-fullscreen-close{
  background:transparent!important;border:none!important;opacity:.55;transition:.15s}
.lager-modal-close:hover,.aufg-modal-close:hover,.dash-modal-close:hover,.chat-header-close:hover,.chat-header-clear:hover{opacity:1}

/* FILTER-CHIPS — Pille + deutlicher aktiver Zustand (semantische Farben bleiben) */
.tc-filter-btn,.power-filter-btn,.nachr-filter-btn,.gendb-kat-btn,.umgmt-tab{
  border-radius:20px!important;padding:7px 14px!important;font-weight:500!important;transition:.15s}
.tc-filter-btn.active,.power-filter-btn.active,.nachr-filter-btn.active,.gendb-kat-btn.active,.umgmt-tab.active{
  box-shadow:inset 0 0 0 1.5px rgba(48,209,88,.55),0 2px 8px rgba(48,209,88,.18)!important}

/* ALERT-BANNER — als Status erkennbar (nicht wie eine normale Karte) */
.dash-alerts{background:rgba(48,209,88,.06)!important;border:1px solid rgba(48,209,88,.22)!important}

/* ═══ Etappe 6: Seitenleiste + Kopf ruhiger (Clean-Sidebar Schritt 1) ═══
   Owner-Feedback: linke Leiste fühlt sich noch „alt/hart" an. Ziel: ruhiger,
   klarer Glas-Look wie im Favorit-Mockup. Nur Optik, keine Logik/Verdrahtung. */

/* Marke oben links: FIX weißer Kasten (filter grayscale+brightness bleichte
   Gradient UND ❖-Glyph komplett weiß) → dezente grüne Glas-Marke, ❖ sichtbar */
.sk-brand-mark{
  background:radial-gradient(120% 120% at 30% 20%,#3ee06a,#1f9e4d)!important;
  filter:none!important;color:#04210e!important;font-size:17px!important;
  box-shadow:0 4px 14px rgba(48,209,88,.28),inset 0 1px 0 rgba(255,255,255,.28)!important}

/* Aktiver Reiter: harter Glow-Vollblock → weiche Pille + dünner Akzentbalken */
.sidebar-item{position:relative;border-radius:11px!important}
.sidebar-item.active{
  background:rgba(48,209,88,.12)!important;border-color:transparent!important;
  box-shadow:none!important;text-shadow:none!important;color:#f5f5f7!important;font-weight:600}
.sidebar-item.active::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:19px;border-radius:0 3px 3px 0;background:var(--sk-accent)}
.sidebar-item.active .icon{color:var(--sk-accent)!important}
.sidebar-item:hover:not(.active){background:rgba(255,255,255,.05)!important}

/* Sektions-Titel: ruhiger, etwas größer, mehr Luft, kein grelles Grün */
.sidebar-section{
  font-size:10.5px!important;color:rgba(130,175,150,.5)!important;
  letter-spacing:.07em!important;padding:15px 12px 6px!important;font-weight:600!important}

/* Alarm-Banner: ruhig & flach (neutrale Glaskarte) statt grün-grellem Kasten */
.dash-alerts{background:var(--sk-card)!important;border:1px solid var(--sk-border)!important;
  box-shadow:none!important}

/* Live-Uhr/Timer im Kopf: entschärft — neutral statt Neon-Grün */
.live-clock{color:var(--sk-t2)!important;background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.1)!important;font-weight:500!important}

/* ═══ Etappe 6b: einheitliches Strich-Icon-Set statt bunter Emoji ═══
   Löst „unruhig": alle Nav-Icons monochrom, gleiche Strichstärke, erben die
   Farbe (ruhiges Grau; aktiv = grün). SVG-Sprite liegt in index.html. */
.sidebar-item .icon{display:flex!important;align-items:center;justify-content:center;color:#8a8f98}
.sidebar-item:hover:not(.active) .icon{color:#c7ccd2}
.sk-ic{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.sidebar.collapsed .sidebar-item .icon{width:100%}

/* ═══ Etappe 6c: Seitenleiste größer & luftiger ═══
   Owner: Leiste fühlt sich weiter „zu klein" an. Schrift 13→15px, Zeilen höher,
   Icons größer, mehr Luft — bleibt INNERHALB der 244px-Breite (keine Layout-
   Offsets verschoben) → sicher, kein Überlappen von Inhalt/Toolbar/Mobile. */
.sidebar-nav{padding:10px 8px!important}
.sidebar-item{font-size:15px!important;padding:12px 12px!important;gap:12px!important;margin-bottom:3px!important}
.sidebar-item .label{font-size:15px!important;font-weight:500!important}
.sidebar-item .icon{width:22px!important}
.sk-ic{width:20px!important;height:20px!important}
.sidebar-section{font-size:11px!important;padding:18px 12px 7px!important}
.sidebar-header{padding:18px 14px 16px!important}
.sk-brand b{font-size:16px!important}
/* Eingeklappt: Icons weiter zentriert, keine Textbreite */
.sidebar.collapsed .sidebar-item{padding:11px 0!important;gap:0!important}

/* ═══ Etappe 6e: klarere Gruppen (Oberbegriffe größer, weniger „100 Reiter") ═══
   Owner: Gruppen-Titel zu klein + wirkt wie 100 Reiter. Ziel: 7 klare Blöcke
   statt einer Wand. Kräftige Oberbegriffe + Luft ZWISCHEN Gruppen, Items eng
   INNERHALB (Gestalt-Nähe), Divider-Rauschen raus. Eingeklappt abgesichert. */
.sidebar:not(.collapsed) .sidebar-section{
  font-size:12.5px!important;font-weight:700!important;
  color:rgba(140,205,165,.72)!important;letter-spacing:.04em!important;
  padding:24px 12px 8px!important}
.sidebar:not(.collapsed) .sidebar-nav>.sidebar-section:first-child{padding-top:8px!important}
/* Eingeklappt: Header vollständig neutralisieren (kein Geist-Abstand) */
.sidebar.collapsed .sidebar-section{padding:0!important;height:0!important;font-size:0!important}
/* Items innerhalb einer Gruppe eng clustern → Trennung kommt über Header-Luft */
.sidebar-item{margin-bottom:1px!important}
/* Divider raus: weniger Rauschen, Gruppen trennen jetzt kräftige Header + Abstand */
.sidebar-divider{display:none!important}

/* Abmelden-Button: Strich-Icon statt Emoji (Kleinkram #8, 2026-07-21) */
.btn-logout{display:flex;align-items:center;justify-content:center;gap:7px}
.btn-logout .sk-ic{flex:none}

/* ═══ Logo-Ersatz (2026-07-21): ❖-Marke + Schriftzug statt HeimatSeeds-Bild ═══
   Owner-Entscheidung: Login-Logo + Kopfzeilen-Logo (Base64-Bild) durch die
   grüne ❖-Glas-Marke ersetzt — konsistent mit der Seitenleisten-Marke. */
.sk-mark-lg{width:64px;height:64px;font-size:30px!important;border-radius:18px;margin:0 auto;display:grid;place-items:center}
.login-logo{display:flex;justify-content:center}
#header-logo{display:flex;align-items:center;gap:10px}
.sk-toolbar-brand{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.sk-toolbar-brand b{font-size:15px;font-weight:700;letter-spacing:-.02em;color:#f5f5f7}
.sk-toolbar-brand small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#30d158;font-weight:600;margin-top:1px}

/* ═══ Etappe 6f: dezenter Galaxy-Hintergrund (überall) ═══
   Wunsch: leicht transparenter Galaxy-Look in jedem Reiter. Wiederverwendung
   des bereits vorhandenen Login-Bildes img/login-bg.jpg als fixed-Body-Hinter-
   grund, mit kräftigem dunklem Schleier davor → dezent, Inhalte bleiben lesbar.
   Panels sind transparent, Glaskarten liegen darüber (Glas-über-Galaxy-Effekt). */
body{
  background-color:#000!important;
  background-image:linear-gradient(rgba(4,6,9,.84),rgba(4,6,9,.88)),url('../img/login-bg.jpg')!important;
  background-position:center center,center center!important;
  background-size:cover,cover!important;
  background-repeat:no-repeat,no-repeat!important;
  background-attachment:fixed,fixed!important;
}

/* ═══ Etappe 7 (2026-07-22): Mobile-Navigation im Clean-Look (Feature 3) ═══
   Bottom-Nav + More-Sheet auf die Glas-Designsprache gezogen (Toolbar-Glas,
   Sidebar-Aktiv-Pille, Strich-Icons, Etappe-5-Button-Hierarchie). NUR Optik —
   keine Größen/Höhen setzen: die Landscape-Kompakt-Regeln in dashboard.css
   (46px/38px-Leisten) müssen weiter greifen, und .sk-ic mit 1em erbt die
   bestehenden font-size-Regeln von .mnav-icon/.msn-icon in allen Breakpoints. */

/* Leiste: gleiches Glas wie Kopfzeile */
#mobile-bottom-nav{background:rgba(10,10,12,.7)!important;border-top:1px solid var(--sk-border)!important;backdrop-filter:var(--sk-blur);-webkit-backdrop-filter:var(--sk-blur)}
/* Items: ruhiges Grau statt Uppercase; Strich-Icons erben Farbe */
#mobile-bottom-nav .mnav-item{position:relative;color:#8a8f98;text-transform:none;letter-spacing:.02em;font-weight:500}
#mobile-bottom-nav .mnav-item .mnav-icon{color:#8a8f98;display:flex;align-items:center;justify-content:center}
#mobile-bottom-nav .mnav-item .mnav-icon .sk-ic{width:1em!important;height:1em!important}
/* Aktiv: wie Sidebar-Pille — Text hell, Icon grün, feiner Akzentbalken oben */
#mobile-bottom-nav .mnav-item.active{color:#f5f5f7;font-weight:600}
#mobile-bottom-nav .mnav-item.active .mnav-icon{color:var(--sk-accent)}
#mobile-bottom-nav .mnav-item.active::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--sk-accent)}

/* More-Sheet: Glaspanel wie Karten */
.mobile-sheet-overlay{background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.mobile-sheet-panel{background:rgba(16,17,20,.92);backdrop-filter:var(--sk-blur);-webkit-backdrop-filter:var(--sk-blur);border-top:1px solid var(--sk-border);border-radius:18px 18px 0 0}
.mobile-sheet-handle{background:rgba(255,255,255,.18)}
/* Abschnitts-/Gruppen-Titel: wie Sidebar-Gruppen */
.mobile-sheet-section-label{color:rgba(140,205,165,.72);letter-spacing:.05em}
.mobile-sheet-cat-label{font-size:11px;color:rgba(140,205,165,.72);letter-spacing:.05em;padding:12px 4px 4px}
/* Kachel-Grid: Glas-Karten, aktiv = grüne Pille */
.mobile-sheet-nav-item{background:var(--sk-card);border:1px solid var(--sk-border);border-radius:var(--sk-r-sm);color:#c7ccd2}
.mobile-sheet-nav-item .msn-icon{color:#8a8f98;display:flex;align-items:center;justify-content:center}
.mobile-sheet-nav-item .msn-icon .sk-ic{width:1em!important;height:1em!important}
.mobile-sheet-nav-item:active,.mobile-sheet-nav-item.active{background:rgba(48,209,88,.12);border-color:transparent;color:#f5f5f7}
.mobile-sheet-nav-item:active .msn-icon,.mobile-sheet-nav-item.active .msn-icon{color:var(--sk-accent)}
/* Aktionen: Etappe-5-Hierarchie (primär grün gefüllt, Rest ruhig);
   msab-sync (blau) / msab-reset (rot) behalten ihre semantischen Farben */
.mobile-sheet-action-btn{border-radius:10px!important}
.msab-export{background:var(--sk-accent)!important;color:#04210e!important;box-shadow:0 2px 10px rgba(48,209,88,.22),inset 0 1px 0 rgba(255,255,255,.15)}
.msab-logout{background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.1)!important;color:#e6ebe6!important}

/* ── Eingeklappte Leiste, Feinschliff (Owner 20.08.2026) ──────────────────
   1. Kopf gestapelt statt überlappend: Logo oben, darunter ☰ und Pfeil.
   2. Der untere Block (Avatar, Anlage, Reiter anpassen, Profil, Abmelden)
      bleibt als ICON-SPALTE sichtbar — die Leiste läuft bis ganz unten.
   3. Breite 60px passend zum Seitenabstand des Inhalts. */
.sidebar-header{position:relative}
.sidebar-toggle-pfeil{position:absolute;right:9px;top:40px;background:none;border:none;color:#8a8f98;font-size:10px;cursor:pointer;padding:3px 7px;border-radius:6px}
.sidebar-toggle-pfeil:hover{color:#e2e4e9;background:rgba(148,163,184,.12)}
.sidebar.collapsed{width:60px}
body.sidebar-collapsed{padding-left:60px}
.sidebar.collapsed .sidebar-header{flex-direction:column;align-items:center;gap:4px;padding:10px 0 6px}
.sidebar.collapsed .sidebar-logo{margin:0;transform:scale(.82);transform-origin:center}
.sidebar.collapsed .sidebar-toggle{position:static;transform:none;margin:0}
.sidebar.collapsed .sidebar-toggle-pfeil{position:static;margin:0}
/* dashboard.css blendet den Block mit opacity:0 aus — hier bleibt er als Icon-Spalte */
.sidebar.collapsed .sidebar-user{opacity:1;overflow:visible;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 4px}
body.sidebar-collapsed .toolbar{left:60px}
.sidebar.collapsed .sk-user-row{justify-content:center;margin:0}
.sidebar.collapsed .sk-avatar{width:34px;height:34px;font-size:15px}
.sidebar.collapsed .sk-user-meta{display:none}
.sidebar.collapsed .sidebar-user button{width:40px!important;height:40px;min-width:40px!important;padding:0!important;margin:0!important;display:flex;align-items:center;justify-content:center;font-size:0!important;line-height:0;border-radius:10px}
.sidebar.collapsed .sidebar-user button svg{width:17px;height:17px}
.sidebar.collapsed .sidebar-user button .btn-ic{font-size:16px;line-height:1}
.sidebar.collapsed .sidebar-user button .btn-txt,
.sidebar.collapsed .sidebar-user button span:not(.btn-ic){font-size:0}
.sidebar.collapsed .sidebar-footer{display:none}