/* ============================================================
   EVA DESK · 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 #3FD6EE 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:#3FD6EE;            /* 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(63,214,238,.13);
  --se-ok:#e09db0; --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(63,214,238,.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(63,214,238,.55), 0 22px 42px -18px rgba(0,0,0,.75);
  --se-avatar-grad:radial-gradient(circle at 35% 28%,#ffe98a,#3FD6EE 55%,#d9b400);
  --se-glow:rgba(63,214,238,.17);
  --se-logo-img:url(../assets/se-sonne.png);  /* echtes EVA-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:#3FD6EE; --se-accent-ink:#1a1205;
  --se-accent-text:#8a6a12;       /* lesbares Gold auf Weiss */
  --se-accent-soft:rgba(63,214,238,.20);
  --se-ok:#b72750; --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(63,214,238,.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(63,214,238,.6), 0 22px 40px -18px rgba(150,110,20,.36);
  --se-avatar-grad:radial-gradient(circle at 35% 28%,#ffe98a,#3FD6EE 55%,#e0b800);
  --se-glow:rgba(63,214,238,.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 EVA-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(63,214,238,.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:#ecc7d1; }
:root[data-theme="light"], html.theme-light, body.theme-light{
  --se-warn-ink:#8a6a12; --se-danger-ink:#b0442f; --se-ok-ink:#b84767; }


/* ============================================================
   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; }

/* ==========================================================================
   HELLER MODUS: TABELLENKOEPFE, UND DER FEHLENDE FOKUSRING
   Gemessen und ergaenzt am 23.09.2026.

   ANLASS: N.N. meldete am 22.09.2026 aus dem Einsatz auf dem Dach, er
   sehe im Sonnenlicht nicht, in welches Feld er etwas eintragen soll. Beim
   Nachmessen im Browser zeigten sich zwei Dinge, die nicht an der
   Wartungsseite liegen, sondern portalweit gelten.

   BEFUND 1, Tabellenkoepfe im hellen Modus: css/theme-soft-dark.css setzt
   "table thead th" mit !important auf rgba(20,26,36,.88) und hat auf 4.281
   Zeilen genau EINE Ausnahme fuer den hellen Modus. Wo eine Seite nicht
   zusaetzlich css/tokens.css laedt, bleibt der Kopf deshalb dunkel, waehrend
   die Schrift darin hell auf dunkel gerechnet ist. Gemessen an einer
   Pruefseite mit dem Kopf von nutzung.html: Kontrast 1,2 zu 1, also
   unlesbar. Das betrifft 27 der 55 Portalseiten. Die anderen 18 laden
   tokens.css und kommen auf 4,82 zu 1, also knapp ausreichend.
   Mit diesem Block liegen beide Gruppen bei 9,25 zu 1.

   BEFUND 2, Fokusring: theme-soft-dark.css setzt fuer
   "body.premium-dark input[type=text]" und Geschwister outline:none
   !important, und zwar nicht nur fuer den Ruhezustand. Ein Feld zeigt beim
   Hineintippen also nirgends im Portal, dass es das aktive ist, in beiden
   Farbmodi. Genau das war N.N. Satz "ich sehe nicht, wo die Teile ist, wo
   ich was eintragen muss". Der Ring kommt hier zurueck.

   WAS HIER BEWUSST NICHT STEHT: Der Grund der Eingabefelder. Die erste
   Fassung dieses Blocks hat ihn auf Weiss gezogen, nach einer Messung, die
   einen Frame zu frueh gelesen hatte und 1,04 zu 1 meldete. Sauber gemessen
   (Umschalten ueber den Hausschalter, danach neu laden) liegen die Felder bei
   15,46 zu 1 ohne tokens.css und 18,24 mit, also einwandfrei. Auch die
   Feldrahmen liegen mit 3,55 zu 1 gegen den Feldgrund ueber der Grenze von 3.
   Dafuer braucht es keine Regel, und jede Regel mehr waere eine Regel, die
   einem Modulblock in die Quere kommen kann.

   WARUM HIER: se-refresh.css wird auf allen betroffenen Seiten NACH
   theme-soft-dark.css geladen (geprueft, keine Ausnahme). Gegen !important
   hilft nur !important. Drei der betroffenen Seiten laden se-refresh.css
   nicht (aufgaben.html, controlling.html, kaeufer.html), die brauchen eine
   eigene Entscheidung.

   SPEZIFITAET: bewusst niedrig gehalten, damit die fuenf Seiten mit eigenem
   Hellmodus-Block (nutzung, nutzung-person, projekte, projekt-detail,
   wartung) ihre eigene Fassung behalten. Diese Datei ist der Rueckfall, nicht
   die Oberhand.

   FARBEN: ausschliesslich die Haus-Tokens --se-*, keine neuen Festwerte.
   Kein Eingriff in den dunklen Modus ausser dem Fokusring, der dort ebenso
   gefehlt hat.
   ========================================================================== */

html.theme-light table thead th, html.theme-light .table-wrapper table thead th,
body.theme-light table thead th, body.theme-light .table-wrapper table thead th {
  background-color: var(--se-card-2, #fbf7ef) !important;
  color: var(--se-dim-2, #4f412b) !important;
  border-bottom-color: var(--se-line-2, rgba(150,116,54,.42)) !important;
  text-shadow: none !important;
}

/* Die Zeilentrenner standen im hellen Modus auf rgba(153,198,205,.06), also
   auf hellem Grund praktisch unsichtbar. */
html.theme-light table tbody td, html.theme-light .table-wrapper table tbody td,
body.theme-light table tbody td, body.theme-light .table-wrapper table tbody td {
  border-bottom-color: var(--se-line, rgba(150,116,54,.24)) !important;
}

/* Fokusring, beide Farbmodi. Bewusst :focus und nicht :focus-visible: Auf dem
   Telefon und auf dem Tablet, also genau dort, wo N.N. arbeitet, zeigt
   :focus-visible beim Antippen nichts an.

   Der Selektor haengt bewusst NICHT an body.premium-dark: aufgaben.html traegt
   diese Klasse nicht, und dort wuerde der Ring sonst wieder fehlen. Die drei
   Elemente plus :focus plus zwei :not() ergeben (0,3,3) und liegen damit knapp
   ueber den beiden Regeln in theme-soft-dark.css, die outline:none !important
   setzen: "body.premium-dark input[type=text]" (0,2,2) und
   "body.premium-dark .field input:focus" (0,3,2). Dieses Aufrunden ist hier
   gewollt, anders als beim Feldgrund: Ein Feld muss zeigen, dass es das aktive
   ist, und kein Modul sollte das abschalten koennen. */
html body input:focus:not([type="hidden"]):not([type="submit"]),
html body select:focus:not([type="hidden"]):not([type="submit"]),
html body textarea:focus:not([type="hidden"]):not([type="submit"]) {
  outline: 2px solid var(--se-accent-text, #8a6a12) !important;
  outline-offset: 1px !important;
}