/* ============================================================
   SOLARDESK · se-refresh.css
   Zentrales Design-Fundament fuer den Optik-Refresh (07/2026).
   Eigener Namespace (--se-* Tokens, .se-* Klassen), damit es
   additiv neben dem Alt-CSS liegt und kollisionsfrei bleibt.
   Wird als LETZTES Stylesheet geladen. Rollback = Datei leeren.

   Schriften kommen aus fonts.css (Inter, Fraunces, Geist Mono).
   Regeln (MM, 14.07.2026):
   - Zahlen IMMER Inter + tabular-nums (.se-num), nie Fraunces/Mono.
   - Marke = Gelb #feda03 als Flaeche/Button in beiden Modi.
   - Material: Licht von oben (erhaben = heller Rand oben + Schatten;
     vertieft = innerer Schatten).
   - Keine hochgestellten/umbrechenden Zahlen.
   ============================================================ */

/* ===================== TOKENS: DUNKEL (Default) ===================== */
:root{
  --se-bg:#0c0907; --se-bg-2:#14100b; --se-card:#17130d; --se-card-2:#1e1710;
  --se-ink:#f6f1e8; --se-dim:#b4a37c; --se-dim-2:#d6c59d;
  --se-line:rgba(163,125,56,.22); --se-line-2:rgba(163,125,56,.36);
  --se-accent:#feda03;            /* Marken-Gelb: Flaeche/Button, beide Modi */
  --se-accent-ink:#1a1205;        /* Text auf Gelb */
  --se-accent-text:#ffe23a;       /* Akzent als Text/Icon (auf dunkel lesbar) */
  --se-accent-soft:rgba(254,218,3,.13);
  --se-ok:#8bbf3c; --se-warn:#e6b23c; --se-bad:#e07d6a; --se-info:#6aa9f4; --se-mute:#9a8a6a;
  --se-topbar:rgba(20,15,10,.72);

  /* Material (Licht von oben) */
  --se-card-grad:linear-gradient(176deg,#1c1610 0%,#17130d 58%,#140f09 100%);
  --se-elev:inset 0 1px 0 rgba(255,240,205,.06), 0 1px 2px rgba(0,0,0,.4), 0 16px 32px -18px rgba(0,0,0,.72);
  --se-elev-sm:inset 0 1px 0 rgba(255,240,205,.05), 0 1px 2px rgba(0,0,0,.35), 0 6px 14px -8px rgba(0,0,0,.6);
  --se-field-shadow:inset 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(0,0,0,.32);
  --se-btn-grad:linear-gradient(180deg,#ffe83f 0%,#fdd902 48%,#ecc100 100%);
  --se-btn-edge:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 1px rgba(150,95,0,.5);
  --se-btn-shadow:0 2px 4px rgba(0,0,0,.35), 0 10px 22px -8px rgba(254,218,3,.42), 0 16px 30px -15px rgba(0,0,0,.72);
  --se-btn-shadow-h:0 3px 6px rgba(0,0,0,.35), 0 16px 32px -10px rgba(254,218,3,.55), 0 22px 42px -18px rgba(0,0,0,.75);
  --se-avatar-grad:radial-gradient(circle at 35% 28%,#ffe98a,#feda03 55%,#d9b400);
  --se-glow:rgba(254,218,3,.17);
  --se-logo-img:url(../assets/se-sonne.png);  /* echtes Sonnenexpert-Logo */

  /* Schrift-Rollen */
  --se-display:'Fraunces',Georgia,serif;   /* nur Ueberschriften */
  --se-body:'Inter',-apple-system,system-ui,sans-serif;
  --se-num:'Inter',sans-serif;             /* ALLE Zahlen */
  --se-code:'Geist Mono','SF Mono',monospace; /* nur Labels/Codes */

  /* Skala */
  --se-r-sm:9px; --se-r-md:12px; --se-r-lg:14px; --se-r-xl:20px; --se-r-pill:999px;
}

/* ===================== TOKENS: HELL =====================
   Koppelt an die vorhandene .theme-light-Klasse (Portal-Hell-Modus)
   UND an data-theme (fuer isolierte Tests). */
:root[data-theme="light"], html.theme-light, body.theme-light{
  --se-bg:#f4efe6; --se-bg-2:#efe8da; --se-card:#ffffff; --se-card-2:#fbf7ef;
  --se-ink:#171009; --se-dim:#675737; --se-dim-2:#4f412b;
  --se-line:rgba(150,116,54,.24); --se-line-2:rgba(150,116,54,.42);
  --se-accent:#feda03; --se-accent-ink:#1a1205;
  --se-accent-text:#8a6a12;       /* lesbares Gold auf Weiss */
  --se-accent-soft:rgba(254,218,3,.20);
  --se-ok:#4c6b17; --se-warn:#9a6a12; --se-bad:#a8402f; --se-info:#2e6fb8; --se-mute:#8a7857;
  --se-topbar:rgba(255,253,247,.82);

  --se-card-grad:linear-gradient(176deg,#ffffff 0%,#ffffff 58%,#fdfaf2 100%);
  --se-elev:inset 0 1px 0 rgba(255,255,255,.92), 0 1px 2px rgba(110,82,38,.1), 0 14px 28px -16px rgba(110,82,38,.28);
  --se-elev-sm:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(110,82,38,.1), 0 6px 14px -8px rgba(110,82,38,.22);
  --se-field-shadow:inset 0 2px 4px rgba(120,90,40,.13), inset 0 1px 0 rgba(120,90,40,.07);
  --se-btn-grad:linear-gradient(180deg,#ffe63a 0%,#fdd902 50%,#f1c900 100%);
  --se-btn-edge:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 1px rgba(185,135,0,.4);
  --se-btn-shadow:0 2px 3px rgba(150,110,20,.26), 0 10px 22px -8px rgba(254,218,3,.5), 0 16px 28px -15px rgba(150,110,20,.32);
  --se-btn-shadow-h:0 3px 5px rgba(150,110,20,.3), 0 16px 30px -10px rgba(254,218,3,.6), 0 22px 40px -18px rgba(150,110,20,.36);
  --se-avatar-grad:radial-gradient(circle at 35% 28%,#ffe98a,#feda03 55%,#e0b800);
  --se-glow:rgba(254,218,3,.3);
}

/* ===================== BASIS ===================== */
.se-num{ font-family:var(--se-num); font-variant-numeric:tabular-nums; }
.se-display{ font-family:var(--se-display); font-weight:560; letter-spacing:-.01em; }
.se-code{ font-family:var(--se-code); }

/* Sanfte Themewechsel-Transition (nur auf umgestellten Seiten) */
.se-app, .se-scene{ transition:background .4s ease, color .4s ease; }
@media (prefers-reduced-motion:reduce){ .se-app *, .se-scene *{ transition:none !important; } }

/* ===================== APP-LAYOUT ===================== */
.se-app{ display:grid; grid-template-columns:210px 1fr; min-height:100vh; background:var(--se-bg); color:var(--se-ink);
  font-family:var(--se-body); font-size:13px; line-height:1.5; -webkit-font-smoothing:antialiased; }

/* Sidebar */
.se-sidebar{ background:var(--se-bg-2); border-right:1px solid var(--se-line); padding:16px 12px; display:flex; flex-direction:column; gap:3px; }
.se-brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 16px; }
.se-logo{ width:33px; height:33px; background:var(--se-logo-img) center/contain no-repeat; flex-shrink:0; filter:drop-shadow(0 3px 6px rgba(0,0,0,.3)); }
.se-brand b{ font-family:var(--se-display); font-weight:600; font-size:15px; display:block; line-height:1.15; }
.se-brand span{ font-family:var(--se-code); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--se-dim); display:block; }
.se-navlbl{ font-family:var(--se-code); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--se-dim); padding:14px 8px 5px; opacity:.75; }
.se-nav{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--se-r-md); color:var(--se-dim); font-weight:500; text-decoration:none; transition:background .16s,box-shadow .16s,color .16s; }
.se-nav svg{ width:15px; height:15px; flex-shrink:0; opacity:.85; }
.se-nav:hover:not(.is-on){ background:var(--se-accent-soft); color:var(--se-ink); }
.se-nav.is-on{ background:linear-gradient(180deg, color-mix(in srgb,var(--se-accent) 15%, var(--se-card)) 0%, var(--se-card) 100%); color:var(--se-ink); font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 2px 3px rgba(0,0,0,.28), 0 8px 18px -8px rgba(0,0,0,.55), inset 0 0 0 1px var(--se-line-2); }
.se-nav.is-on svg{ color:var(--se-accent-text); opacity:1; }
.se-nav .se-badge{ margin-left:auto; }

/* Topbar */
.se-main{ background:var(--se-bg); display:flex; flex-direction:column; min-width:0; }
.se-topbar{ display:flex; align-items:center; gap:14px; padding:13px 20px; border-bottom:1px solid var(--se-line); background:var(--se-topbar); backdrop-filter:blur(8px); position:sticky; top:0; z-index:20; }
.se-search{ flex:1; max-width:360px; display:flex; align-items:center; gap:9px; background:var(--se-bg-2); border:1px solid var(--se-line); border-radius:var(--se-r-sm); padding:8px 12px; color:var(--se-dim); font-size:12.5px; box-shadow:var(--se-field-shadow); }
.se-search svg{ width:14px; height:14px; flex-shrink:0; }
.se-spacer{ flex:1; }
.se-iconbtn{ width:34px; height:34px; border-radius:var(--se-r-sm); border:1px solid var(--se-line); background:var(--se-card-grad); display:grid; place-items:center; color:var(--se-dim); position:relative; flex-shrink:0; box-shadow:var(--se-elev-sm); cursor:pointer; }
.se-iconbtn svg{ width:16px; height:16px; }
.se-iconbtn .se-dot{ position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--se-bad); border:1.5px solid var(--se-card); }
.se-avatar{ width:34px; height:34px; border-radius:50%; background:var(--se-avatar-grad); display:grid; place-items:center; color:var(--se-accent-ink); font-weight:700; font-size:12.5px; flex-shrink:0; box-shadow:var(--se-btn-edge), 0 3px 8px -3px rgba(0,0,0,.45); }

.se-content{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:18px; }
.se-h2{ font-family:var(--se-display); font-weight:560; font-size:22px; margin:0; letter-spacing:-.01em; }

/* ===================== KARTEN & PANELS ===================== */
.se-card{ background:var(--se-card-grad); border:1px solid var(--se-line); border-radius:var(--se-r-lg); box-shadow:var(--se-elev); }
.se-panel{ background:var(--se-card-grad); border:1px solid var(--se-line); border-radius:var(--se-r-lg); box-shadow:var(--se-elev); overflow:hidden; display:flex; flex-direction:column; }
.se-phead{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px 11px; border-bottom:1px solid var(--se-line); }
.se-phead h3{ font-family:var(--se-display); font-weight:540; font-size:14.5px; margin:0; }
.se-phead a{ font-family:var(--se-code); font-size:11px; color:var(--se-accent-text); text-decoration:none; font-weight:600; }

/* ===================== KPI ===================== */
.se-kpi{ background:var(--se-card-grad); border:1px solid var(--se-line); border-radius:var(--se-r-lg); padding:14px 15px 12px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--se-elev); }
.se-kpi .se-klbl{ font-family:var(--se-code); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--se-dim); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.se-kmid{ display:flex; align-items:center; gap:9px; flex-wrap:nowrap; }
.se-kval{ font-family:var(--se-num); font-variant-numeric:tabular-nums; font-weight:680; font-size:28px; line-height:1; letter-spacing:-.02em; white-space:nowrap; }
.se-kval .se-unit{ font-family:var(--se-body); font-size:13px; font-weight:500; color:var(--se-dim); margin-left:3px; }
.se-delta{ font-family:var(--se-num); font-variant-numeric:tabular-nums; font-size:11px; font-weight:700; display:inline-flex; align-items:center; gap:3px; white-space:nowrap; padding:3px 8px; border-radius:var(--se-r-pill); line-height:1; }
.se-delta svg{ width:11px; height:11px; flex-shrink:0; }
.se-delta.up{ color:var(--se-ok); background:color-mix(in srgb,var(--se-ok) 15%,transparent); }
.se-delta.down{ color:var(--se-bad); background:color-mix(in srgb,var(--se-bad) 15%,transparent); }
.se-spark{ width:100%; height:30px; display:block; overflow:visible; }

/* ===================== BUTTONS ===================== */
.se-btn{ font:inherit; font-size:12.5px; font-weight:600; border-radius:var(--se-r-md); padding:9px 16px; cursor:pointer; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.se-btn svg{ width:14px; height:14px; }
.se-btn.primary{ background:var(--se-btn-grad); color:var(--se-accent-ink); font-weight:700; box-shadow:var(--se-btn-edge), var(--se-btn-shadow); transition:transform .14s cubic-bezier(.34,1.2,.5,1), box-shadow .2s; }
.se-btn.primary:hover{ transform:translateY(-2px); box-shadow:var(--se-btn-edge), var(--se-btn-shadow-h); }
.se-btn.primary:active{ transform:translateY(1px); box-shadow:var(--se-btn-edge), 0 3px 10px -5px rgba(0,0,0,.5); }
.se-btn.ghost{ background:var(--se-card-grad); border-color:var(--se-line-2); color:var(--se-ink); box-shadow:var(--se-elev-sm); }

/* ===================== FORMULARE ===================== */
.se-field{ display:flex; flex-direction:column; gap:7px; }
.se-label{ font-family:var(--se-code); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--se-dim); font-weight:600; }
.se-input{ width:100%; background:var(--se-bg-2); border:1px solid var(--se-line); border-radius:var(--se-r-md); padding:13px 15px; color:var(--se-ink); font:inherit; font-size:14px; box-shadow:var(--se-field-shadow); transition:border-color .18s, box-shadow .18s; }
.se-input::placeholder{ color:var(--se-dim); opacity:.65; }
.se-input:focus{ outline:none; border-color:var(--se-accent); box-shadow:var(--se-field-shadow), 0 0 0 3px var(--se-accent-soft); }

/* ===================== BADGES, PILLS, CHIPS ===================== */
.se-badge{ font-family:var(--se-num); font-variant-numeric:tabular-nums; font-size:10px; background:var(--se-btn-grad); color:var(--se-accent-ink); border-radius:var(--se-r-pill); padding:1px 6px; font-weight:700; box-shadow:var(--se-btn-edge); }
.se-pill{ font-family:var(--se-code); font-size:10px; font-weight:700; letter-spacing:.03em; padding:3px 9px; border-radius:var(--se-r-pill); white-space:nowrap; text-transform:uppercase; display:inline-block; }
.se-pill.ok{ background:color-mix(in srgb,var(--se-ok) 16%,transparent); color:var(--se-ok); }
.se-pill.warn{ background:color-mix(in srgb,var(--se-warn) 20%,transparent); color:var(--se-warn); }
.se-pill.bad{ background:color-mix(in srgb,var(--se-bad) 16%,transparent); color:var(--se-bad); }
.se-pill.info{ background:color-mix(in srgb,var(--se-info) 16%,transparent); color:var(--se-info); }
.se-pill.mute{ background:color-mix(in srgb,var(--se-mute) 18%,transparent); color:var(--se-mute); }
.se-chip{ font-family:var(--se-code); font-size:11px; font-weight:600; padding:7px 13px; border-radius:var(--se-r-pill); border:1px solid var(--se-line); background:var(--se-card-grad); color:var(--se-dim); cursor:pointer; box-shadow:var(--se-elev-sm); white-space:nowrap; transition:transform .12s; }
.se-chip:hover{ transform:translateY(-1px); }
.se-chip.is-on{ background:var(--se-btn-grad); color:var(--se-accent-ink); border-color:transparent; box-shadow:var(--se-btn-edge); }

/* ===================== TABELLE ===================== */
.se-table{ background:var(--se-card-grad); border:1px solid var(--se-line); border-radius:var(--se-r-lg); box-shadow:var(--se-elev); overflow:hidden; }
.se-trow{ display:grid; gap:14px; align-items:center; padding:13px 18px; border-bottom:1px solid var(--se-line); }
.se-trow:last-child{ border-bottom:0; }
.se-thead{ background:color-mix(in srgb,var(--se-accent) 5%, transparent); }
.se-thead span{ font-family:var(--se-code); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--se-dim); font-weight:600; }
.se-tbody .se-trow:hover{ background:var(--se-accent-soft); }
.se-amount{ font-family:var(--se-num); font-variant-numeric:tabular-nums; font-weight:700; text-align:right; white-space:nowrap; }

/* ===================== HELL/DUNKEL-UMSCHALTER ===================== */
.se-toggle{ display:inline-flex; background:var(--se-card); border:1px solid var(--se-line); border-radius:var(--se-r-pill); padding:4px; gap:2px; box-shadow:var(--se-elev-sm); }
.se-toggle button{ font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; border:0; background:transparent; color:var(--se-dim); border-radius:var(--se-r-pill); padding:8px 14px; display:inline-flex; align-items:center; gap:7px; transition:color .2s; }
.se-toggle button svg{ width:15px; height:15px; }
.se-toggle button[aria-pressed="true"]{ background:var(--se-accent); color:#1a1205; }
:root[data-theme="light"] .se-toggle button[aria-pressed="true"]{ color:#fff; }

/* ===================== LOGIN-SZENE ===================== */
.se-scene{ min-height:100vh; display:grid; place-items:center; padding:40px 20px; color:var(--se-ink); font-family:var(--se-body);
  background:radial-gradient(620px 340px at 50% -6%, var(--se-glow), transparent 60%), var(--se-bg); }
.se-login{ width:100%; max-width:414px; background:var(--se-card-grad); border-radius:var(--se-r-xl); padding:40px 40px 28px; position:relative; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,240,205,.10), 0 1px 2px rgba(0,0,0,.5), 0 26px 50px -24px rgba(0,0,0,.82), 0 60px 120px -50px rgba(0,0,0,.9), 0 0 0 1px var(--se-line); }
.se-login::before{ content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,transparent,var(--se-accent),transparent); opacity:.7; }

/* ============================================================
   LOGIN-INTEGRATION (index.html)
   Kleidet die echten .login-* Klassen neu ein. HTML und Auth-JS
   bleiben unangetastet. Gezielte !important, um die ueber mehrere
   Alt-Dateien verteilten Login-Styles zu schlagen.
   ============================================================ */
.login-page{
  background:
    radial-gradient(620px 340px at 50% -6%, var(--se-glow), transparent 60%),
    var(--se-bg) !important;
  font-family:var(--se-body) !important;
}
.login-card{
  background:var(--se-card-grad) !important;
  border:1px solid var(--se-line) !important;
  border-radius:var(--se-r-xl) !important;
  box-shadow:inset 0 1px 0 rgba(255,240,205,.10), 0 1px 2px rgba(0,0,0,.5), 0 26px 50px -24px rgba(0,0,0,.82), 0 60px 120px -50px rgba(0,0,0,.9) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  color:var(--se-ink) !important;
  position:relative; overflow:hidden;
}
.login-card:hover{ transform:none !important; border-color:var(--se-line) !important;
  box-shadow:inset 0 1px 0 rgba(255,240,205,.10), 0 1px 2px rgba(0,0,0,.5), 0 26px 50px -24px rgba(0,0,0,.82), 0 60px 120px -50px rgba(0,0,0,.9) !important; }
/* Alt-Glass-Reflexe (::after weisse Ellipse, ::before Screen-Reflex) abschalten */
.login-card::after{ content:none !important; display:none !important; background:none !important; }
.login-card::before{
  content:"" !important; position:absolute !important;
  inset:auto !important; top:0 !important; left:0 !important; right:0 !important; bottom:auto !important;
  width:100% !important; height:3px !important;
  background:linear-gradient(90deg,transparent,var(--se-accent),transparent) !important;
  opacity:.7 !important; mix-blend-mode:normal !important; filter:none !important;
  border-radius:0 !important; z-index:3 !important; pointer-events:none;
}
/* Tab-Leiste nur zeigen, wenn der Registrieren-Tab aktiv eingeblendet ist (?signup=1).
   Im Normalbetrieb ist nur "Passwort" da, das einzelne Tab entfaellt. */
.login-tabs{ display:none !important; }
.login-tabs:has(#register-tab:not([style*="none"])){ display:flex !important; }
/* Logo: echtes Sonnenexpert-Zeichen (ersetzt den Inline-Punkt via .se-login-logo im HTML) */
.login-logo-mark .se-login-logo{ width:30px; height:30px; background:var(--se-logo-img) center/contain no-repeat; display:inline-block; flex:0 0 auto; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.login-logo-mark .fx-shiny-text{ font-family:var(--se-display) !important; font-weight:600 !important; color:var(--se-ink) !important; -webkit-text-fill-color:var(--se-ink) !important; background:none !important; -webkit-background-clip:border-box !important; font-size:19px !important; letter-spacing:.02em !important; animation:none !important; }
.login-logo-sub{ font-family:var(--se-code) !important; font-size:10.5px !important; letter-spacing:.4em !important; text-transform:uppercase !important; color:var(--se-dim) !important; }
.login-title{ font-family:var(--se-display) !important; font-weight:600 !important; font-size:30px !important; letter-spacing:-.015em !important; color:var(--se-ink) !important; }
.login-sub{ color:var(--se-dim-2) !important; font-size:14px !important; }
.login-tab{ font-family:var(--se-body) !important; color:var(--se-dim) !important; }
.login-tab.active{ color:var(--se-ink) !important; border-color:var(--se-accent) !important; background:var(--se-accent-soft) !important; }
.login-label{ font-family:var(--se-code) !important; font-size:10.5px !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--se-dim) !important; font-weight:600 !important; }
.login-input{
  background:var(--se-bg-2) !important; border:1px solid var(--se-line) !important;
  border-radius:var(--se-r-md) !important; color:var(--se-ink) !important;
  box-shadow:var(--se-field-shadow) !important; font-family:var(--se-body) !important;
}
.login-input::placeholder{ color:var(--se-dim) !important; opacity:.65 !important; }
.login-input:focus{ border-color:var(--se-accent) !important; box-shadow:var(--se-field-shadow), 0 0 0 3px var(--se-accent-soft) !important; outline:none !important; }
.login-btn{
  background:var(--se-btn-grad) !important; color:var(--se-accent-ink) !important;
  border:0 !important; border-radius:13px !important; font-weight:700 !important;
  box-shadow:var(--se-btn-edge), var(--se-btn-shadow) !important;
  font-family:var(--se-body) !important;
  transition:transform .14s cubic-bezier(.34,1.2,.5,1), box-shadow .2s !important;
}
.login-btn:hover{ transform:translateY(-2px) !important; box-shadow:var(--se-btn-edge), var(--se-btn-shadow-h) !important; }
.login-btn:active{ transform:translateY(1px) !important; }
.login-btn span, .login-btn-arrow{ color:var(--se-accent-ink) !important; -webkit-text-fill-color:var(--se-accent-ink) !important; }
.login-error{ color:var(--se-bad) !important; }
.login-success{ color:var(--se-ok) !important; }
.login-hint{ color:var(--se-dim) !important; }

/* ============================================================
   APP-INTEGRATION: die echten Portal-Klassen systemweit neu
   einkleiden. Scopes body.premium-dark / body.solardesk-demo +
   !important (fast alle Alt-Regeln nutzen !important). se-refresh
   laedt als letztes, gewinnt bei gleicher Spezifitaet.
   Alle Farben ueber --se-* Tokens, schalten mit .theme-light mit.
   ============================================================ */

/* --- Seiten-Hintergrund --- */
body.premium-dark, body.solardesk-demo{ background:var(--se-bg) !important; color:var(--se-ink) !important; }

/* --- Sidebar --- */
body.premium-dark .sidebar, body.solardesk-demo .sidebar{
  background:var(--se-bg-2) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-right:1px solid var(--se-line) !important;
}
body.premium-dark .sidebar .nav-item, body.solardesk-demo .sidebar .nav-item{
  color:var(--se-dim) !important; background:transparent !important; border:1px solid transparent !important;
  border-radius:10px !important; text-shadow:none !important; animation:none !important; font-weight:500 !important;
}
body.premium-dark .sidebar .nav-item:hover, body.solardesk-demo .sidebar .nav-item:hover{
  background:var(--se-accent-soft) !important; color:var(--se-ink) !important;
}
body.premium-dark .sidebar .nav-item.active, body.solardesk-demo .sidebar .nav-item.active{
  background:linear-gradient(180deg, color-mix(in srgb,var(--se-accent) 15%, var(--se-card)) 0%, var(--se-card) 100%) !important;
  color:var(--se-ink) !important; font-weight:600 !important; border:1px solid var(--se-line-2) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 2px 3px rgba(0,0,0,.28), 0 8px 18px -8px rgba(0,0,0,.55) !important;
  animation:none !important;
}
body.premium-dark .sidebar .nav-item.active svg, body.solardesk-demo .sidebar .nav-item.active svg{ color:var(--se-accent-text) !important; }
.nav-badge{ background:var(--se-btn-grad) !important; color:var(--se-accent-ink) !important; font-family:var(--se-num) !important;
  font-variant-numeric:tabular-nums !important; box-shadow:var(--se-btn-edge) !important; }
.sidebar .nav-section-label{ color:var(--se-dim) !important; font-family:var(--se-code) !important; }

/* --- Topbar (solid, kein Glass-Blur: massgeblich Zeile 398 + 449) --- */
.topbar-title{ font-family:var(--se-display) !important; font-weight:560 !important; font-size:1.2rem !important;
  letter-spacing:-.01em !important; background:none !important; -webkit-background-clip:border-box !important;
  background-clip:border-box !important; -webkit-text-fill-color:var(--se-ink) !important; color:var(--se-ink) !important; }

/* --- Karten / Panels (Glass-Blur abschalten, solides Material) --- */
body.premium-dark .cockpit-card, body.premium-dark .card, body.premium-dark .panel, body.premium-dark .kpi-tile,
body.premium-dark .pd-card, body.premium-dark .kb-col, body.premium-dark .kb-card, body.premium-dark .kanban-matrix-wrap,
body.solardesk-demo .card, body.solardesk-demo .panel, body.solardesk-demo .cockpit-card, body.solardesk-demo .kpi-tile{
  background:var(--se-card-grad) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border:1px solid var(--se-line) !important; box-shadow:var(--se-elev) !important; border-radius:var(--se-r-lg) !important;
}
.qa-tile{ background:var(--se-card-2) !important; border:1px solid var(--se-line) !important; border-radius:var(--se-r-md) !important; }

/* --- KPI / Kennzahlen: Werte in Inter (MM-Regel), Labels mono --- */
.kpi-tile__value, .kpi-tile-val, .c-kpi-num{
  font-family:var(--se-num) !important; font-variant-numeric:tabular-nums !important;
  color:var(--se-ink) !important; text-shadow:none !important; font-weight:680 !important; letter-spacing:-.01em !important;
}
.kpi-tile__label, .kpi-tile-label{ font-family:var(--se-code) !important; color:var(--se-dim) !important; }

/* --- Buttons --- */
body.premium-dark .btn-primary, body.solardesk-demo .btn-primary{
  background:var(--se-btn-grad) !important; color:var(--se-accent-ink) !important; border:0 !important; border-radius:var(--se-r-md) !important;
  box-shadow:var(--se-btn-edge), var(--se-btn-shadow) !important; font-weight:700 !important; text-shadow:none !important;
}
body.premium-dark .btn-primary:hover, body.solardesk-demo .btn-primary:hover{ box-shadow:var(--se-btn-edge), var(--se-btn-shadow-h) !important; }
body.premium-dark .btn, body.solardesk-demo .btn{
  background:var(--se-card-grad) !important; border:1px solid var(--se-line-2) !important; color:var(--se-ink) !important;
  border-radius:var(--se-r-md) !important; box-shadow:var(--se-elev-sm) !important;
}
body.premium-dark .btn-ghost, body.solardesk-demo .btn-ghost{ background:transparent !important; border-color:transparent !important; color:var(--se-dim) !important; box-shadow:none !important; }

/* --- Formulare --- */
body.premium-dark input:not([type=checkbox]):not([type=radio]):not([type=range]), body.premium-dark select, body.premium-dark textarea,
body.solardesk-demo input:not([type=checkbox]):not([type=radio]):not([type=range]), body.solardesk-demo select, body.solardesk-demo textarea{
  background:var(--se-bg-2) !important; border:1px solid var(--se-line) !important; border-radius:var(--se-r-md) !important;
  color:var(--se-ink) !important; box-shadow:var(--se-field-shadow) !important; font-family:var(--se-body) !important;
}
.form-label{ font-family:var(--se-code) !important; color:var(--se-dim) !important; }

/* --- Tabellen --- */
body.premium-dark th, body.solardesk-demo th{ font-family:var(--se-code) !important; background:var(--se-bg-2) !important;
  color:var(--se-dim) !important; border-bottom:1px solid var(--se-line-2) !important; }
body.premium-dark td, body.solardesk-demo td{ border-bottom:1px solid var(--se-line) !important; color:var(--se-ink) !important; }

/* --- Ueberschriften (Fraunces; Gradient-Text-Trick brechen) --- */
h2, .section-title{ font-family:var(--se-display) !important; color:var(--se-ink) !important; font-weight:560 !important; letter-spacing:-.01em !important; }
h3{ color:var(--se-ink) !important; font-family:var(--se-display) !important; font-weight:540 !important; }
.card-title{ color:var(--se-ink) !important; font-family:var(--se-display) !important; font-style:normal !important;
  background:none !important; -webkit-text-fill-color:var(--se-ink) !important; -webkit-background-clip:border-box !important; }
.cockpit-card__title{ font-family:var(--se-code) !important; color:var(--se-dim) !important; letter-spacing:.14em !important; }

/* --- crm.html (.c-*) und admin.html (.a-*): eigene Seiten-Prefixe --- */
.c-card, .c-kpi, .c-bar{ background:var(--se-card-grad) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border:1px solid var(--se-line) !important; box-shadow:var(--se-elev) !important; border-radius:var(--se-r-lg) !important; }
.c-h1{ background:none !important; -webkit-text-fill-color:var(--se-ink) !important; -webkit-background-clip:border-box !important;
  color:var(--se-ink) !important; font-family:var(--se-display) !important; }
.a-card, .a-tbl{ background:var(--se-card-grad) !important; border:1px solid var(--se-line) !important; box-shadow:var(--se-elev) !important; border-radius:var(--se-r-lg) !important; }
.a-search{ background:var(--se-bg-2) !important; border:1px solid var(--se-line) !important; box-shadow:var(--se-field-shadow) !important; }

/* --- Hell/Dunkel-Umschalter-Button (theme-toggle.js injiziert #sd-theme-toggle) --- */
#sd-theme-toggle{
  background:var(--se-card-grad) !important; border:1px solid var(--se-line) !important;
  color:var(--se-ink) !important; box-shadow:var(--se-elev-sm) !important;
  font-family:var(--se-body) !important; font-weight:600 !important;
}
#sd-theme-toggle .sd-tt-icon{ color:var(--se-accent-text) !important; }

/* ============================================================
   SIDEBAR/HEADER-FEINSCHLIFF: alte Glass-Schichten, Glows,
   blaue Logo-Flaeche und Nav-Boxen restlos entfernen.
   ============================================================ */
body.premium-dark .sidebar, body.solardesk-demo .sidebar{ box-shadow:none !important; background:var(--se-bg-2) !important; }
.sidebar::before, .sidebar::after{ content:none !important; display:none !important; background:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; opacity:0 !important; }
.sidebar-logo-mark, .sidebar-logo-icon, .sidebar-logo::before, .sidebar-logo::after, .sidebar-head::before, .sidebar-head::after{
  background:transparent !important; border:none !important; box-shadow:none !important; text-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
/* Nav-Items: keine Box, kein Rest-Schatten, keine Pseudo-Glows */
body.premium-dark .sidebar .nav-item, body.solardesk-demo .sidebar .nav-item{ box-shadow:none !important; }
body.premium-dark .sidebar .nav-item::before, body.premium-dark .sidebar .nav-item::after,
body.solardesk-demo .sidebar .nav-item::before, body.solardesk-demo .sidebar .nav-item::after{ display:none !important; content:none !important; }
/* aktives Tab behaelt sein plastisches Gold */
body.premium-dark .sidebar .nav-item.active, body.solardesk-demo .sidebar .nav-item.active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 2px 3px rgba(0,0,0,.28), 0 8px 18px -8px rgba(0,0,0,.55) !important; }
/* Sidebar-Footer-Logo (unten) ohne Glow */
.sidebar-footer, .sidebar-foot, .sidebar-bottom{ background:transparent !important; box-shadow:none !important; }
.sidebar-footer::before, .sidebar-footer::after{ display:none !important; }
/* Topbar/Header sauber, kein Glass-Schimmer */
body.premium-dark .topbar, body.solardesk-demo .topbar{ box-shadow:none !important; background:var(--se-topbar) !important; }
.topbar::before, .topbar::after{ display:none !important; content:none !important; }
/* Logo-Glow (animiertes ::before mit Blur) und Halo-Schatten restlos aus */
.sidebar-logo::before, .sidebar-logo::after, .sidebar-logo-mark::before, .sidebar-logo-mark::after, .sidebar-logo-icon::before, .sidebar-logo-icon::after{
  display:none !important; content:none !important; background:none !important; filter:none !important; animation:none !important; }
.sidebar-logo-icon, .sidebar-logo-mark{ box-shadow:none !important; }
/* Nav-Items inaktiv wirklich flach (hoehere Spezifitaet als Alt-Regeln) */
html body.premium-dark .sidebar .nav-item:not(.active), html body.solardesk-demo .sidebar .nav-item:not(.active){
  background:transparent !important; border-color:transparent !important; box-shadow:none !important; }
html body.premium-dark .sidebar .nav-item:not(.active):hover, html body.solardesk-demo .sidebar .nav-item:not(.active):hover{
  background:var(--se-accent-soft) !important; transform:none !important; }


/* ============================================================
   TOPBAR solid (kein blaues Durchscheinen) + Pipeline-Kacheln
   deutlich herausheben (MM 14.07.).
   ============================================================ */
body.premium-dark .topbar, body.solardesk-demo .topbar, header.topbar{
  background:var(--se-bg-2) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  box-shadow:none !important; border-bottom:1px solid var(--se-line) !important; }
.topbar-titles-halo, .topbar::before, .topbar::after{ display:none !important; content:none !important; }

/* Projekt-Statuskacheln (proj-stat*) plastischer, damit sie greifbar sind */
body.premium-dark [class*="proj-stat"], body.solardesk-demo [class*="proj-stat"], [class*="proj-stat-card"], [class*="proj-kachel"]{
  background:var(--se-card-2) !important; border:1px solid var(--se-line-2) !important; border-radius:var(--se-r-lg) !important;
  box-shadow:var(--se-elev), 0 24px 48px -18px rgba(0,0,0,.55) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  transition:transform .16s cubic-bezier(.34,1.1,.5,1), box-shadow .2s !important; }
body.premium-dark [class*="proj-stat"]:hover, body.solardesk-demo [class*="proj-stat"]:hover{ transform:translateY(-3px) !important; }
html.theme-light [class*="proj-stat"], body.theme-light [class*="proj-stat"]{ box-shadow:var(--se-elev), 0 20px 40px -18px rgba(110,82,38,.4) !important; }
.stat-value, .proj-stat-value, .proj-stat-num, .proj-metric-value{ font-family:var(--se-num) !important; font-variant-numeric:tabular-nums !important; color:var(--se-ink) !important; text-shadow:none !important; }
.stat-label, .proj-stat-label, .proj-metric-label{ font-family:var(--se-code) !important; color:var(--se-dim) !important; }


/* Goldrand der Pipeline-Kacheln deutlich kraeftiger (MM 14.07.) */
body.premium-dark [class*="proj-stat"], body.solardesk-demo [class*="proj-stat"], [class*="proj-stat-card"], [class*="proj-kachel"]{
  border:2px solid rgba(230,185,90,.7) !important;
  box-shadow:var(--se-elev), 0 24px 48px -18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(230,185,90,.22) !important;
}
html.theme-light [class*="proj-stat"], body.theme-light [class*="proj-stat"], :root[data-theme="light"] [class*="proj-stat"]{
  border:2px solid rgba(150,116,54,.75) !important;
  box-shadow:var(--se-elev), 0 20px 40px -18px rgba(110,82,38,.4), inset 0 0 0 1px rgba(150,116,54,.18) !important;
}


/* ============================================================
   PROJEKT-PIPELINE (Kanban, projekt-kanban.html):
   eigene Inline-Styles (blaue oklch-250-Spalten, Glas-Karten)
   an den neuen warmen Look angleichen, hell + dunkel.
   ============================================================ */
.kb-col{ background:var(--se-card-grad) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border:1px solid var(--se-line) !important; box-shadow:var(--se-elev) !important; }
.kb-col-head{ border-bottom:1px solid var(--se-line) !important; }
.kb-col-title{ color:var(--se-ink) !important; }
.kb-col-sub{ color:var(--se-dim) !important; }
.kb-col-count{ background:var(--se-bg-2) !important; color:var(--se-dim) !important; }
.kb-card{ background:var(--se-card-2) !important; border:1.5px solid var(--se-line-2) !important; box-shadow:var(--se-elev-sm) !important; }
.kb-card:hover{ border-color:var(--se-accent) !important; box-shadow:var(--se-elev) !important; }
.kb-card-title{ color:var(--se-ink) !important; }
.kb-card-row{ color:var(--se-dim) !important; }
.kb-card-prog{ background:var(--se-bg-2) !important; }
.kb-av{ border:2px solid var(--se-card) !important; }
.kb-viewtoggle{ background:var(--se-bg-2) !important; border:1px solid var(--se-line) !important; }
.kb-tab{ color:var(--se-dim) !important; }
.kb-tab.active{ background:var(--se-btn-grad) !important; color:var(--se-accent-ink) !important; }
.kb-letzte{ border-top:1px solid var(--se-line) !important; }
#kb-modal{ background:var(--se-card-grad) !important; border:1px solid var(--se-line-2) !important; }
/* Topbar auf allen Seiten (auch Kanban) wirklich solid, kein blaues Durchscheinen */
header.topbar, .topbar{ background:var(--se-bg-2) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }


/* ============================================================
   HELL-MODUS FLAECHEN-FIX
   Grund: Alt-Regeln (sidebar-pro html body:not(.is-mobile-nav)
   .premium-dark .sidebar = Spezifitaet 0,3,2 u.a.) halten
   Sidebar/Topbar dunkel, weil der Umschalter premium-dark
   nicht entfernt, sondern nur theme-light ergaenzt. Hier mit
   hoeherer Spezifitaet (html.theme-light body...  = 0,4,2)
   im Hellen sauber ueberschreiben.
   ============================================================ */
html.theme-light body:not(.is-mobile-nav).premium-dark .sidebar,
html.theme-light body:not(.is-mobile-nav).solardesk-demo .sidebar,
html.theme-light body.premium-dark.theme-light .sidebar,
html.theme-light body.solardesk-demo.theme-light .sidebar{
  background:var(--se-bg-2) !important; background-image:none !important;
  border-right:1px solid var(--se-line) !important; box-shadow:none !important; color:var(--se-ink) !important;
}
html.theme-light body:not(.is-mobile-nav).premium-dark .topbar,
html.theme-light body:not(.is-mobile-nav).solardesk-demo .topbar,
html.theme-light body.premium-dark.theme-light .topbar,
html.theme-light body.theme-light .topbar{
  background:var(--se-bg-2) !important; background-image:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-bottom:1px solid var(--se-line) !important;
}
/* Nav-Items im Hellen: heller Grund, lesbarer Text, Gold-Aktiv */
html.theme-light body.theme-light .sidebar .nav-item{
  background:transparent !important; color:var(--se-dim) !important; box-shadow:none !important; }
html.theme-light body.theme-light .sidebar .nav-item:hover{
  background:var(--se-card) !important; color:var(--se-ink) !important; box-shadow:var(--se-elev-sm) !important; }
html.theme-light body.theme-light .sidebar .nav-item.active{
  background:linear-gradient(180deg, color-mix(in srgb,var(--se-accent) 20%, #ffffff) 0%, #ffffff 100%) !important;
  color:var(--se-ink) !important; box-shadow:var(--se-elev-sm) !important; }
html.theme-light body.theme-light .sidebar .nav-item.active svg{ color:var(--se-accent-text) !important; }
html.theme-light body.theme-light .sidebar-user{ background:var(--se-card) !important; color:var(--se-ink) !important; }
html.theme-light body.theme-light .sidebar-footer, html.theme-light body.theme-light .sidebar-brand{ color:var(--se-dim) !important; }
html.theme-light body.theme-light .topbar-title{ color:var(--se-ink) !important; }
html.theme-light body.theme-light .topbar-breadcrumb, html.theme-light body.theme-light .topbar-back{ color:var(--se-dim) !important; }
/* Kanban-Spalten/Karten im Hellen sauber */
html.theme-light body.theme-light .kb-col{ background:var(--se-card-2) !important; }
html.theme-light body.theme-light .kb-card{ background:#ffffff !important; }


/* ============================================================
   HELL-MODUS TEXT & GLOW
   Der Emboss-Textschatten und die weisse Schrift sind fuers
   Dunkle gebaut und verwaschen im Hellen. Hier: Textschatten
   weg, Nav/Titel/Logo dunkel & voll deckend (auch gegen
   Gradient-Text-Clips per -webkit-text-fill-color), obere
   Ambient-Glow-Layer aus.
   ============================================================ */
html.theme-light body.theme-light *{ text-shadow:none !important; }
html.theme-light body.theme-light .sidebar .nav-item,
html.theme-light body.theme-light .sidebar .nav-label,
html.theme-light body.theme-light .sidebar .nav-item span{
  color:var(--se-dim-2) !important; -webkit-text-fill-color:var(--se-dim-2) !important; background-image:none !important; }
html.theme-light body.theme-light .sidebar .nav-item.active,
html.theme-light body.theme-light .sidebar .nav-item.active .nav-label,
html.theme-light body.theme-light .sidebar .nav-item.active span{
  color:var(--se-ink) !important; -webkit-text-fill-color:var(--se-ink) !important; }
html.theme-light body.theme-light .sidebar .nav-item svg,
html.theme-light body.theme-light .sidebar .nav-item.active svg{ -webkit-text-fill-color:currentColor !important; }
html.theme-light body.theme-light .sidebar-logo-text,
html.theme-light body.theme-light .sidebar-title,
html.theme-light body.theme-light .topbar-title,
html.theme-light body.theme-light .topbar-title *{
  color:var(--se-ink) !important; -webkit-text-fill-color:var(--se-ink) !important; background-image:none !important; background:none !important; }
html.theme-light body.theme-light .sidebar-logo-text .sub,
html.theme-light body.theme-light .sidebar-brand,
html.theme-light body.theme-light .topbar-breadcrumb{
  color:var(--se-dim) !important; -webkit-text-fill-color:var(--se-dim) !important; }
/* obere Ambient-Glow-Layer im Hellen abschalten */
html.theme-light body.theme-light .topbar::before,
html.theme-light body.theme-light .topbar::after,
html.theme-light body.theme-light .app-layout::before,
html.theme-light body.theme-light .app-layout::after,
html.theme-light body.theme-light .main-content::before,
html.theme-light body.theme-light .main-content::after,
html.theme-light body.theme-light .page-content::before,
html.theme-light body.theme-light .app-bg,
html.theme-light body.theme-light .ambient-glow,
html.theme-light body.theme-light .bg-glow{
  display:none !important; background:none !important; opacity:0 !important; content:none !important; }
/* Karten-Labels/Ueberschriften im Hellen lesbar */
html.theme-light body.theme-light .kpi-label,
html.theme-light body.theme-light .section-label,
html.theme-light body.theme-light .card-title,
html.theme-light body.theme-light .section-title,
html.theme-light body.theme-light h2, html.theme-light body.theme-light h3{
  color:var(--se-dim) !important; -webkit-text-fill-color:var(--se-dim) !important; }
html.theme-light body.theme-light .section-title,
html.theme-light body.theme-light .card-title,
html.theme-light body.theme-light h2{ color:var(--se-ink) !important; -webkit-text-fill-color:var(--se-ink) !important; }


/* ============================================================
   HELL-MODUS FEINSCHLIFF (echte Klassen aus dem DOM)
   Ambient-Glow (body::before/::after) aus, Sidebar-Logo-Text
   + Footer-Brand + Schnellaktions-Titel dunkel & deckend.
   Der gelbe Sonnenpunkt (.sidebar-logo-mark) bleibt gelb.
   ============================================================ */
html.theme-light body.theme-light::before,
html.theme-light body.theme-light::after{
  display:none !important; background:none !important; opacity:0 !important; content:none !important; }
html.theme-light body.theme-light .sidebar-logo,
html.theme-light body.theme-light .credit-brand,
html.theme-light body.theme-light .credit-brand-mark,
html.theme-light body.theme-light .credit-brand-italic,
html.theme-light body.theme-light .credit-brand-thin{
  color:var(--se-ink) !important; -webkit-text-fill-color:var(--se-ink) !important; background-image:none !important; }
html.theme-light body.theme-light .sidebar-logo-sub{
  color:var(--se-dim) !important; -webkit-text-fill-color:var(--se-dim) !important; }
html.theme-light body.theme-light .qa-tile__label{
  color:var(--se-ink) !important; -webkit-text-fill-color:var(--se-ink) !important; }
html.theme-light body.theme-light .qa-tile__desc{
  color:var(--se-dim) !important; -webkit-text-fill-color:var(--se-dim) !important; }
html.theme-light body.theme-light .qa-tile{
  background:var(--se-card) !important; border:1px solid var(--se-line) !important; box-shadow:var(--se-elev-sm) !important; }


/* ============================================================
   HELL-MODUS: Alt-Gruen-Glow-Reste + Topbar-Schimmer neutralisieren
   theme-soft-dark :root setzt --accent-glow/--gold-glow noch auf
   Gruen; der Mouse-Glow-Layer der Topbar nutzt sie -> gruenlicher
   Schimmer, der nur im Hellen sichtbar wird. Tokens im Hellen
   transparent, Topbar hart solid, Glow-Pseudos aus.
   ============================================================ */
html.theme-light body.theme-light{
  --accent-glow:transparent !important; --gold-glow:transparent !important;
  --mouse-glow-alpha:0 !important; --accent-gradient:none !important; }
html.theme-light body.theme-light .topbar,
html.theme-light body:not(.is-mobile-nav).premium-dark .topbar,
html.theme-light body:not(.is-mobile-nav).solardesk-demo .topbar{
  background:var(--se-bg-2) !important; background-image:none !important;
  box-shadow:0 1px 0 var(--se-line) !important; }
html.theme-light body.theme-light .topbar::before,
html.theme-light body.theme-light .topbar::after,
html.theme-light body.theme-light .main-content::before,
html.theme-light body.theme-light .page-content::before,
html.theme-light body.theme-light .content-scroll::before,
html.theme-light body.theme-light .app-main::before,
html.theme-light body.theme-light .app-shell::before{
  display:none !important; content:none !important; background:none !important; opacity:0 !important; }


/* ============================================================
   HELL-MODUS: zentrale TEXT-FARB-VARIABLEN an der Wurzel dunkel
   Grund: --text/--ivory/--sidebar-text/... sind in den Alt-Sheets
   (premium-dark/glass/soft-dark) noch hell (weiss/beige). Da der
   Umschalter premium-dark nicht entfernt, bleiben sie im Hellen
   aktiv -> Schrift unlesbar. Hier auf JEDEM Element ueberschreiben,
   damit auch tiefere Neudefinitionen (.glass etc.) verlieren.
   --text-on-accent (Schrift auf farbigen Buttons) bleibt hell.
   ============================================================ */
html.theme-light body.theme-light *{
  --text:#171009 !important; --text-primary:#171009 !important;
  --text-secondary:#4f412b !important; --text-muted:#675737 !important;
  --text-faint:#8a7a58 !important; --ivory:#171009 !important;
  --sidebar-text:#4f412b !important; --sidebar-text-soft:#675737 !important;
  --sidebar-active-text:#171009 !important; --heading:#171009 !important;
  --title:#171009 !important; --fg:#171009 !important; --foreground:#171009 !important;
}
/* Sicherheitsnetz gegen hartkodierte helle Schrift auf typischen
   Text-Traegern (KPI-Zahlen, Kartentitel, Ueberschriften). */
html.theme-light body.theme-light .kb-card-title,
html.theme-light body.theme-light .kb-col-title,
html.theme-light body.theme-light .kpi-value,
html.theme-light body.theme-light .kpi-number,
html.theme-light body.theme-light .stat-value,
html.theme-light body.theme-light .stat-num,
html.theme-light body.theme-light .metric-value,
html.theme-light body.theme-light .card-title,
html.theme-light body.theme-light .tile-title,
html.theme-light body.theme-light h1,
html.theme-light body.theme-light h2,
html.theme-light body.theme-light h3,
html.theme-light body.theme-light h4{
  color:var(--se-ink) !important; -webkit-text-fill-color:var(--se-ink) !important; }


/* ============================================================
   HELL-MODUS: KPI/Stat-Zahlen lesbar
   Basis-Farbe dunkel; Farb-Modifier (gruen/rot/gelb/blue/accent)
   waren fuers Dunkle hell (oklch 76-90%) -> im Hellen kraeftiger.
   ============================================================ */
html.theme-light body.theme-light .kpi-value,
html.theme-light body.theme-light .stat-value,
html.theme-light body.theme-light .kpi-num,
html.theme-light body.theme-light .stat-num{
  color:var(--se-ink) !important; -webkit-text-fill-color:var(--se-ink) !important; }
html.theme-light body.theme-light .kpi-value.gruen, html.theme-light body.theme-light .stat-value.gruen{ color:oklch(50% 0.15 145) !important; -webkit-text-fill-color:oklch(50% 0.15 145) !important; }
html.theme-light body.theme-light .kpi-value.rot, html.theme-light body.theme-light .stat-value.rot{ color:oklch(52% 0.20 25) !important; -webkit-text-fill-color:oklch(52% 0.20 25) !important; }
html.theme-light body.theme-light .kpi-value.gelb, html.theme-light body.theme-light .stat-value.gelb{ color:oklch(56% 0.13 85) !important; -webkit-text-fill-color:oklch(56% 0.13 85) !important; }
html.theme-light body.theme-light .kpi-value.blue, html.theme-light body.theme-light .stat-value.blue,
html.theme-light body.theme-light .kpi-value.accent, html.theme-light body.theme-light .stat-value.accent{ color:oklch(52% 0.17 252) !important; -webkit-text-fill-color:oklch(52% 0.17 252) !important; }


/* ============================================================
   HELL-MODUS: gedaempfte Sekundaertexte kraeftiger
   --text-muted leicht dunkler; Opacity-Daempfungen auf
   Karten-Detailzeilen im Hellen aufheben (Lesbarkeit).
   ============================================================ */
html.theme-light body.theme-light *{ --text-muted:#5c4c30 !important; --text-faint:#6f5d3c !important; }
html.theme-light body.theme-light .kb-card-foot,
html.theme-light body.theme-light .kb-card-row,
html.theme-light body.theme-light .kb-card-meta,
html.theme-light body.theme-light .kb-card-prog-label,
html.theme-light body.theme-light .kb-doc,
html.theme-light body.theme-light .kb-card-sub{
  color:var(--se-dim-2) !important; -webkit-text-fill-color:var(--se-dim-2) !important; opacity:1 !important; }


/* ============================================================
   TOPBAR MATERIAL-LOOK (durchgaengig mit Sidebar/Karten)
   MM: die obere Leiste muss dieselbe Material-Tiefe haben wie
   der Rest. Konsolidiert alle frueheren flachen Topbar-Regeln:
   warmer Verlauf + Lichtkante oben + Tiefenschatten unten,
   plastische Icon-Buttons. Hell + Dunkel.
   ============================================================ */
html body.premium-dark .topbar,
html body.solardesk-demo .topbar,
html body.premium-dark header.topbar,
html body.solardesk-demo header.topbar{
  background:linear-gradient(180deg, #201810 0%, #181109 100%) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-bottom:1px solid rgba(230,185,90,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,226,163,.12), 0 12px 30px -16px rgba(0,0,0,.75) !important;
}
html.theme-light body.theme-light .topbar,
html.theme-light body:not(.is-mobile-nav).premium-dark .topbar,
html.theme-light body:not(.is-mobile-nav).solardesk-demo .topbar,
html.theme-light body.premium-dark.theme-light .topbar{
  background:linear-gradient(180deg, #fffefb 0%, #f6f0e4 100%) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-bottom:1px solid var(--se-line) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px -18px rgba(120,90,40,.55) !important;
}
/* Icon-Buttons + Datum-Pill plastisch (Tokens schalten mit dem Modus) */
.topbar .sd-help-btn, .topbar .sd-bell, .topbar .topbar-date-pill{
  background:var(--se-card-grad) !important; border:1px solid var(--se-line-2) !important;
  box-shadow:var(--se-elev-sm) !important; color:var(--se-dim) !important;
  border-radius:12px !important; transition:transform .14s ease, border-color .14s ease, color .14s ease !important; }
.topbar .sd-help-btn:hover, .topbar .sd-bell:hover, .topbar .topbar-date-pill:hover{
  border-color:var(--se-accent) !important; color:var(--se-ink) !important; transform:translateY(-1px) !important; }
.topbar .topbar-date-pill{ font-family:var(--se-num), Inter, sans-serif !important; font-variant-numeric:tabular-nums !important; letter-spacing:.02em !important; }
.topbar-titles-halo{ display:none !important; }


/* ============================================================
   DUNKEL-MODUS: bläulicher Ambient-Glow abschalten
   body::before/::after wird aus den Alt-BLAU-Tokens
   (theme-soft-dark :root --accent-cool/-glow oklch(...252))
   gespeist und faerbt die obere Zone + Topbar blau. Das passt
   nicht zum warmen Rest. Im Dunkeln wie im Hellen abschalten.
   ============================================================ */
body.premium-dark::before, body.premium-dark::after,
body.solardesk-demo::before, body.solardesk-demo::after,
html body.premium-dark::before, html body.premium-dark::after,
html body.solardesk-demo::before, html body.solardesk-demo::after{
  display:none !important; background:none !important; opacity:0 !important; content:none !important; }
/* auch die blauen Glow-Tokens im Dunkeln neutralisieren, damit
   kein anderes Element den Blaustich zurueckholt */
html body.premium-dark, html body.solardesk-demo{
  --accent-glow:rgba(254,218,3,.14) !important; --accent-cool:var(--se-accent) !important; }


/* ============================================================
   BLAUSTICH-QUELLE: .main-content::before (theme-soft-dark:14)
   ist ein fixed Fullscreen-Glow mit blauem --surf-deep-rgb
   (radial oben + unten). Faerbt die obere Zone/Topbar blau und
   passt nicht zum warmen Rest. In BEIDEN Modi abschalten.
   ============================================================ */
html body .main-content::before, html body .main-content::after,
html body.premium-dark .main-content::before, html body.premium-dark .main-content::after,
html body.solardesk-demo .main-content::before, html body.solardesk-demo .main-content::after,
html body .page-content::before, html body .app-main::before{
  display:none !important; background:none !important; opacity:0 !important; content:none !important; }


/* ============================================================
   BLAUSTICH IN DER TOPBAR: .topbar-titles
   theme-soft-dark gibt dem zentrierten Titel-Container einen
   grossen BLAUEN Glow: box-shadow #49a2fe / oklch(...252),
   ::before Shimmer-Animation, ::after mehrere blaue radial-
   gradients mit mix-blend-mode:screen. Das ist die Blaustich-
   Quelle. Komplett neutralisieren, Titel in den normalen Fluss.
   ============================================================ */
html body .topbar-titles,
body.premium-dark .topbar-titles,
body.solardesk-demo .topbar-titles,
html.theme-light body.theme-light .topbar-titles{
  background:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border:none !important; box-shadow:none !important;
  position:static !important; transform:none !important; left:auto !important; top:auto !important;
  min-width:0 !important; padding:0 !important; overflow:visible !important; z-index:auto !important; }
html body .topbar-titles::before, html body .topbar-titles::after,
body.premium-dark .topbar-titles::before, body.premium-dark .topbar-titles::after,
body.solardesk-demo .topbar-titles::before, body.solardesk-demo .topbar-titles::after{
  display:none !important; content:none !important; background:none !important; animation:none !important; box-shadow:none !important; }
/* blaue Icon-Faerbung in der Topbar (theme-soft-dark .topbar svg -> oklch(88% .1 252)) neutralisieren */
html body .topbar svg, html body .topbar .icon{ color:var(--se-dim) !important; filter:none !important; }


/* ============================================================
   THEME-UMSCHALTER in der Kopfleiste (statt schwebend)
   theme-toggle.js reiht den Button jetzt in .topbar-right ein
   (Klasse .sd-tt-in-topbar). Hier plastisch, konsistent mit
   den anderen Topbar-Buttons; Icon in Gold.
   ============================================================ */
#sd-theme-toggle.sd-tt-in-topbar{
  position:static !important; top:auto !important; right:auto !important; z-index:auto !important;
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  padding:8px 13px !important; border-radius:12px !important; cursor:pointer !important;
  font:600 12px/1 var(--se-num, Inter, sans-serif) !important; white-space:nowrap !important;
  color:var(--se-dim) !important;
  background:var(--se-card-grad) !important;
  border:1px solid var(--se-line-2) !important;
  box-shadow:var(--se-elev-sm) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  transition:transform .14s ease, border-color .14s ease, color .14s ease !important;
  flex-shrink:0 !important; margin:0 !important; }
#sd-theme-toggle.sd-tt-in-topbar:hover{
  border-color:var(--se-accent) !important; color:var(--se-ink) !important; transform:translateY(-1px) !important; }
#sd-theme-toggle.sd-tt-in-topbar .sd-tt-icon{ color:var(--se-accent-text) !important; font-size:14px !important; line-height:1 !important; }
#sd-theme-toggle.sd-tt-in-topbar .sd-tt-label{ color:inherit !important; -webkit-text-fill-color:currentColor !important; }


/* ============================================================
   HELL-MODUS: gelbe & weisse SCHRIFT lesbar
   Gelbe Textfarben (--accent/--gold/--gold-soft/--jm-gold-2/
   --gold-light als color) und hartkodiert weisse Schrift sind
   auf hellem Grund unlesbar. Gelb -> dunkles Gold, Weiss ->
   dunkel. --gold-soft NICHT global (faerbt auch Flaechen),
   darum je Textklasse; --jm-gold-2/--gold-light sind reine
   Textfarben und werden an der Wurzel dunkel gesetzt.
   ============================================================ */
html.theme-light body.theme-light *{
  --jm-gold-2:#8a6a12 !important; --gold-light:#8a6a12 !important; --gold:#8a6a12 !important; }
/* gelbe Texte -> dunkles Gold */
html.theme-light body.theme-light .section-label,
html.theme-light body.theme-light .text-accent,
html.theme-light body.theme-light .topbar-breadcrumb .crumb.current,
html.theme-light body.theme-light .topbar-date-pill,
html.theme-light body.theme-light .dataroom-kpi-val,
html.theme-light body.theme-light .qa-tile--gold .qa-tile__label,
html.theme-light body.theme-light .qa-tile--gold .qa-tile__arrow,
html.theme-light body.theme-light .qa-tile--gold .qa-tile__desc,
html.theme-light body.theme-light .funnel-row__meta,
html.theme-light body.theme-light .deal-row__rank,
html.theme-light body.theme-light .deal-row__kwp,
html.theme-light body.theme-light .region-row__count,
html.theme-light body.theme-light .strom-stat__value,
html.theme-light body.theme-light .kb-ov-n,
html.theme-light body.theme-light .kb-ov-total .kb-ov-n{
  color:var(--se-accent-text) !important; -webkit-text-fill-color:var(--se-accent-text) !important; }
/* weisse Content-Titel/Werte -> dunkel */
html.theme-light body.theme-light .proj-name,
html.theme-light body.theme-light .proj-metric-value,
html.theme-light body.theme-light .hero-name,
html.theme-light body.theme-light .section-title,
html.theme-light body.theme-light .stat-num,
html.theme-light body.theme-light .partner-card-title,
html.theme-light body.theme-light .phase-title,
html.theme-light body.theme-light .dataroom-hero-title,
html.theme-light body.theme-light .success-title,
html.theme-light body.theme-light .calc-row-val,
html.theme-light body.theme-light .kanban-card-notiz,
html.theme-light body.theme-light .cmdk-kbd{
  color:var(--se-ink) !important; -webkit-text-fill-color:var(--se-ink) !important; }
/* weisse Sekundaertexte -> gedimmt dunkel */
html.theme-light body.theme-light .hero-stat-label,
html.theme-light body.theme-light .projekt-card-location,
html.theme-light body.theme-light .dr-header-sub,
html.theme-light body.theme-light .kanban-col-add,
html.theme-light body.theme-light .kanban-empty,
html.theme-light body.theme-light .stage-progress-label,
html.theme-light body.theme-light .td-empty,
html.theme-light body.theme-light .activity-empty,
html.theme-light body.theme-light .quelle-card.is-empty,
html.theme-light body.theme-light .quelle-proj-more{
  color:var(--se-dim) !important; -webkit-text-fill-color:var(--se-dim) !important; }


/* ============================================================
   SEMANTISCHE TEXT-VARIABLEN (fuer inline-Farben im JS)
   Viele JS-Komponenten setzen Textfarben inline hart auf helle
   Dunkel-Modus-Werte (z.B. Fristen-Waechter). Diese werden auf
   var(--se-*, #originalhex) umgestellt; hier die Werte je Modus.
   Dunkel = hell (wie bisher), Hell = dunkel/lesbar.
   ============================================================ */
:root, body.premium-dark, body.solardesk-demo{
  --se-warn-ink:#F4D9A0; --se-danger-ink:#FCC4AE; --se-ok-ink:#c3d98f; }
:root[data-theme="light"], html.theme-light, body.theme-light{
  --se-warn-ink:#8a6a12; --se-danger-ink:#b0442f; --se-ok-ink:#4d7a2f; }


/* ============================================================
   WURZEL DES HELL-MODUS-PROBLEMS
   theme-soft-dark.css:11 setzt ALLEN Basistext per !important
   auf #f2f2f2 (hell): body,p,span,td,th,li,label,dt,dd,.text,
   .body-text. Das ueberschreibt jede Klassen- und inline-Farbe
   und macht im Hellen fast alles unlesbar. Hier im Hellen via
   :where() (Spezifitaet 0/0/1 = exakt wie die Alt-Regel, aber
   spaetere Position gewinnt) auf dunkel. Echte Farb-Klassen
   (Badges, KPI-Werte, Status) haben hoehere Spezifitaet und
   bleiben unberuehrt.
   ============================================================ */
:where(html.theme-light) body, :where(html.theme-light) p,
:where(html.theme-light) span, :where(html.theme-light) td,
:where(html.theme-light) th, :where(html.theme-light) li,
:where(html.theme-light) label, :where(html.theme-light) dt,
:where(html.theme-light) dd, :where(html.theme-light) .text,
:where(html.theme-light) .body-text{
  color: var(--se-ink) !important;
}


/* ============================================================
   HELL-MODUS BASISTEXT KOMPLETT (alle globalen Alt-Regeln)
   theme-soft-dark setzt Basistext an MEHREREN Stellen hell per
   !important: (1) body,.card-body,.card *,p,td,.text  (2) body,
   p,span,td,th,li,label,dt,dd,.text,.body-text  (3) h1..h6
   (4/5/6) table tbody td (+ b/strong), .table-wrapper b/strong,
   .checker-table td. Alle werden hier im Hellen via :where()
   (gleiche Spezifitaet wie die Alt-Regel, spaetere Position ->
   gewinnt) auf dunkel gesetzt. Echte Farb-Klassen (Badges, KPI,
   Status) mit hoeherer Spezifitaet bleiben unberuehrt.
   ============================================================ */
:where(html.theme-light) body, :where(html.theme-light) p, :where(html.theme-light) span,
:where(html.theme-light) div, :where(html.theme-light) td, :where(html.theme-light) th,
:where(html.theme-light) li, :where(html.theme-light) ul, :where(html.theme-light) ol,
:where(html.theme-light) label, :where(html.theme-light) dt, :where(html.theme-light) dd,
:where(html.theme-light) dl, :where(html.theme-light) small, :where(html.theme-light) strong,
:where(html.theme-light) b, :where(html.theme-light) em, :where(html.theme-light) i,
:where(html.theme-light) u, :where(html.theme-light) caption, :where(html.theme-light) figcaption,
:where(html.theme-light) summary, :where(html.theme-light) legend, :where(html.theme-light) blockquote,
:where(html.theme-light) h1, :where(html.theme-light) h2, :where(html.theme-light) h3,
:where(html.theme-light) h4, :where(html.theme-light) h5, :where(html.theme-light) h6,
:where(html.theme-light) .text, :where(html.theme-light) .body-text,
:where(html.theme-light) .card-body, :where(html.theme-light) .card *,
:where(html.theme-light) .cockpit-card *, :where(html.theme-light) .panel *,
:where(html.theme-light) table tbody td, :where(html.theme-light) .table-wrapper table tbody td,
:where(html.theme-light) .checker-table td, :where(html.theme-light) td b, :where(html.theme-light) td strong,
:where(html.theme-light) .table-wrapper b, :where(html.theme-light) .table-wrapper strong{
  color: var(--se-ink) !important;
}
/* Formularfelder im Hellen: dunkler Text (waren fuer Dunkel hell) */
:where(html.theme-light) input, :where(html.theme-light) textarea,
:where(html.theme-light) select, :where(html.theme-light) option, :where(html.theme-light) button{
  color: var(--se-ink) !important; -webkit-text-fill-color:var(--se-ink) !important;
}
:where(html.theme-light) input::placeholder, :where(html.theme-light) textarea::placeholder{
  color: var(--se-dim) !important; -webkit-text-fill-color:var(--se-dim) !important; opacity:1 !important;
}


/* ============================================================
   HELL-MODUS: Tabellenzellen + Badges nachziehen
   Deren Alt-Regeln sind body.premium-dark-gescoped (hoehere
   Spezifitaet als :where). Hier mit html.theme-light-Praefix
   sicher ueberschreiben. Tabellentext dunkel; Badge-Text dunkel
   (Semantik traegt der farbige Hintergrund, wie im Fristen-
   Waechter). Farbige KPI-Werte bleiben (eigene Klassen).
   ============================================================ */
html.theme-light table tbody td, html.theme-light table tbody th,
html.theme-light .table-wrapper table tbody td, html.theme-light .checker-table td,
html.theme-light td, html.theme-light th, html.theme-light tr{
  color:var(--se-ink) !important; -webkit-text-fill-color:var(--se-ink) !important; }
html.theme-light .badge, html.theme-light .status-pill, html.theme-light .tag-pill,
html.theme-light .gap-pill, html.theme-light .chip, html.theme-light [class*="badge"]{
  color:var(--se-ink) !important; -webkit-text-fill-color:var(--se-ink) !important; }


/* ============================================================
   PROJEKTDURCHGANG (projektdurchgang.html)
   Die Seite bringt einen eigenen Style-Block mit fest kodierten
   Dunkel-Farben (Texte #f6f8fb .. #7a8290) und BLAUEN Flaechen
   (oklch(..250)) mit: im Hellen unlesbar, im Dunkeln zu
   kontrastarm und farblich nicht warm. Hier auf die se-Tokens
   gemappt -> schaltet korrekt mit Hell/Dunkel.
   Gelbe Buttons (.pg-btn-primary/.pg-chip.on/.on) bleiben
   unangetastet (dunkle Schrift auf Gelb ist korrekt).
   ============================================================ */
/* Flaechen warm statt blau (beide Modi) */
.pg-kpi, .pg-prog, .pg-row{ background:var(--se-card-grad) !important; border-color:var(--se-line) !important; }
.pg-prog-t{ background:var(--se-bg-2) !important; }
.pg-search, .pg-btn-ghost{ background:var(--se-card-2) !important; border-color:var(--se-line) !important; }
.pg-chip:not(.on){ background:var(--se-card-2) !important; border-color:var(--se-line) !important; }
/* Haupttexte */
.pg-title, .pg-pname, .pg-search, .v{ color:var(--se-ink) !important; -webkit-text-fill-color:var(--se-ink) !important; }
/* Sekundaertexte (kraeftig, warm) */
.pg-sub, .pg-pl, .pg-prog-l, .pg-person, .pg-tchip, .pg-ttitel, .pg-chip:not(.on){
  color:var(--se-dim-2) !important; -webkit-text-fill-color:var(--se-dim-2) !important; }
/* zuvor sehr schwache Grautoene -> lesbar */
.l, .cnt, .pg-caret, .pg-empty, .pg-hint, .pg-ploc, .pg-group-h, .pg-tmeta, .pg-tasks-h, .pg-frist, .pg-netz.leer{
  color:var(--se-dim) !important; -webkit-text-fill-color:var(--se-dim) !important; }
/* semantische Akzente, schalten mit dem Modus */
.acc, .v.acc, .pg-add, .pg-tchip-add, .pg-row.done{ color:var(--se-accent-text) !important; -webkit-text-fill-color:var(--se-accent-text) !important; }
.warn, .v.warn, .pg-row.attn, .pg-taskcnt.over, .pg-flag, .pg-frist.soon, .pg-netz.offen{
  color:var(--se-warn-ink) !important; -webkit-text-fill-color:var(--se-warn-ink) !important; }
.blau, .v.blau, .pg-taskcnt, .pg-pool{ color:var(--se-blue-ink) !important; -webkit-text-fill-color:var(--se-blue-ink) !important; }
.over, .pg-frist.warn{ color:var(--se-danger-ink) !important; -webkit-text-fill-color:var(--se-danger-ink) !important; }
.pg-netz.ok, .pg-check.on, .pg-tcheck.done{ color:var(--se-ok-ink) !important; -webkit-text-fill-color:var(--se-ok-ink) !important; }
/* Blau-Token ergaenzen (Dunkel = wie bisher, Hell = lesbar dunkel) */
:root, body.premium-dark, body.solardesk-demo{ --se-blue-ink:#8cbef0; }
:root[data-theme="light"], html.theme-light, body.theme-light{ --se-blue-ink:#2c6fa8; }

/* aktiver Chip: gelbe Flaeche braucht dunkle Schrift (war gelb auf gelb) */
.pg-chip.on, .pg-chip.on *{ color:var(--se-accent-ink) !important; -webkit-text-fill-color:var(--se-accent-ink) !important; }
/* dunkle Schrift auf gelber Flaeche braucht keinen Emboss-Schatten (verwaescht sonst) */
.pg-chip.on, .pg-chip.on *, .pg-btn-primary, .pg-btn-primary *{ text-shadow:none !important; }

/* ------------------------------------------------------------
   Projektdurchgang: Zeilen sauber in einer Flucht ausrichten
   Problem: .pg-rhead hatte als letzte Spalte "auto" -> sie wurde
   je nach Inhalt (mit/ohne Aufgaben-Chip, langer Status) breiter,
   und weil die Namensspalte 2.3fr flexibel ist, verschob sich die
   komplette Zeile. Ergebnis: nichts stand untereinander.
   Fix: letzte Spalte fest, Namensspalte schrumpfbar (minmax(0,..)),
   alles vertikal zentriert, einheitliche Zeilenhoehe.
   ------------------------------------------------------------ */
.pg-rhead{
  grid-template-columns: 24px minmax(0, 2.3fr) 118px 150px 120px 158px 244px !important;
  align-items: center !important;
  min-height: 58px !important;
}
/* rechte Meta-Spalte immer rechtsbuendig, Inhalte auf einer Linie */
.pg-meta-r{ justify-content:flex-end !important; align-items:center !important; flex-wrap:nowrap !important; }
/* Namensblock darf schrumpfen statt zu druecken; Text sauber abschneiden */
.pg-rhead > *{ min-width:0 !important; }
.pg-pname, .pg-ploc{ overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
/* Spalteninhalte nicht umbrechen -> keine Hoehen-Spruenge */
.pg-pl, .pg-netz, .pg-frist, .pg-badge, .pg-taskcnt{ white-space:nowrap !important; }
/* Caret vertikal mittig */
.pg-caret{ display:inline-flex !important; align-items:center !important; }