/* ============================================================================
   MyLead – Theme im Stil von MyBüro (dunkles Glasmorphismus, Smaragd-Akzent)
   Zentrale Design-Tokens + Basis-Komponenten. Pro-Seiten-CSS nutzt die Tokens.
   ============================================================================ */
:root{
  --bg:#070b16; --txt:#eef2fb; --muted:#9aa7c2; --dim:#5d6b8a;
  --line:rgba(148,163,184,.14); --line2:rgba(148,163,184,.22);
  --chip:rgba(148,163,184,.10); --chip2:rgba(148,163,184,.16);
  --card:rgba(22,32,56,.55); --card2:rgba(8,14,28,.55);
  --emer:#34d399; --emer-d:#059669; --green:#34d399; --green-d:#059669;
  --red:#fb7185; --amber:#fbbf24; --orange:#fb923c; --blue:#60a5fa;
  --radius:14px;
  /* Akzent-Bausteine (Skins überschreiben NUR Tokens, nie Selektoren):
     -hi/-lo = Button-/Aktiv-Verlauf, -txt = Schrift darauf,
     -soft/-glow = RGB-Tripel für Tönungen/Schatten via rgba(var(--akz-soft),.14) */
  --akz-hi:#3ee0a3; --akz-lo:#059669; --akz-txt:#03251a;
  --akz-soft:52,211,153; --akz-glow:16,185,129;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html{color-scheme:dark;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  color:var(--txt); min-height:100vh; letter-spacing:.1px;
  background:
    radial-gradient(900px 520px at 8% -12%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(820px 620px at 104% 4%, rgba(var(--akz-glow),.13), transparent 55%),
    radial-gradient(1200px 860px at 50% 128%, rgba(99,102,241,.12), transparent 60%),
    linear-gradient(180deg,#0b1326 0%, #080d1c 55%, #060912 100%);
  background-attachment:fixed;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:680px; margin:0 auto; padding:0 16px;}
.wrap-wide{max-width:1320px; margin:0 auto; padding:0 16px;}

/* Gradient-Überschrift */
.h-grad{background:linear-gradient(180deg,#fff,#cdd7ec); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* Glas-Karte */
.card{position:relative; border-radius:18px;
  background:linear-gradient(180deg, rgba(28,40,70,.55), rgba(13,21,40,.5));
  border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(135%);
  box-shadow:0 1px 0 rgba(255,255,255,.045) inset, 0 20px 44px -26px rgba(0,0,0,.85);}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:13px; font-size:15px; font-weight:750; cursor:pointer; padding:12px 17px;
  color:var(--akz-txt); background:linear-gradient(180deg,var(--akz-hi),var(--akz-lo));
  box-shadow:0 10px 22px -10px rgba(var(--akz-glow),.7), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .08s ease, filter .15s, box-shadow .15s;}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05);
  box-shadow:0 14px 28px -12px rgba(var(--akz-glow),.8), inset 0 1px 0 rgba(255,255,255,.35);}
.btn:active{transform:translateY(0) scale(.99);}
.btn.ghost{background:var(--chip); color:var(--txt); border:1px solid var(--line2);
  box-shadow:none; font-weight:650;}
.btn.ghost:hover{background:var(--chip2); transform:none; filter:none;}
.btn.sm{padding:8px 13px; font-size:13px; border-radius:10px;}
.btn.danger{background:var(--chip); color:#fecaca; border:1px solid rgba(251,113,133,.3); box-shadow:none;}
.btn.danger:hover{background:rgba(251,113,133,.16); transform:none; filter:none;}

/* Formular-Elemente */
input,textarea,select{font-family:inherit; width:100%; color:var(--txt);
  background:rgba(8,14,28,.6); border:1px solid var(--line2); border-radius:13px;
  padding:12px 14px; font-size:15px; outline:none; transition:.18s;}
/* Dropdown-Einträge IMMER lesbar: weißes Aufklapp-Menü mit dunklem Text. Sonst
   erbt <option> den hellen --txt und ist im Dunkelmodus auf dem hellen System-Popup
   unsichtbar — man sieht nur die Emoji-Symbole (Gas/Öl/… fehlen). Gilt für alle
   Selects (Heizung, Firma, Status …) auf allen Seiten; der geschlossene Select
   behält seine eigene helle Schrift. */
select option{color:#0b1220; background:#fff;}
input::placeholder,textarea::placeholder{color:#5e6d8c;}
input:focus,textarea:focus,select:focus{border-color:var(--emer);
  background:rgba(10,18,34,.75); box-shadow:0 0 0 4px rgba(var(--akz-soft),.16);}
label{font-size:12px; color:var(--muted); display:block; margin:0 0 7px; font-weight:600; letter-spacing:.2px;}

/* Chips / Badges */
.badge{font-size:11px; font-weight:600; padding:3px 9px; border-radius:8px; background:var(--chip); color:var(--muted);}

/* Modal (Bottom-Sheet auf Mobile, zentriert auf Desktop) */
.modal-bg{position:fixed; inset:0; background:rgba(4,8,18,.6); backdrop-filter:blur(3px);
  z-index:50; display:none; align-items:flex-end; justify-content:center;}
.modal-bg.show{display:flex;}
.modal{width:100%; max-width:560px; border-radius:22px 22px 0 0;
  background:linear-gradient(180deg, rgba(26,38,66,.92), rgba(12,19,36,.95));
  border:1px solid var(--line2); backdrop-filter:blur(20px);
  box-shadow:0 -24px 60px -20px rgba(0,0,0,.8);
  padding:22px 18px max(22px,env(safe-area-inset-bottom)); animation:slideup .22s cubic-bezier(.2,.8,.2,1);}
@keyframes slideup{from{transform:translateY(26px); opacity:.4;} to{transform:none; opacity:1;}}
@media(min-width:560px){ .modal-bg{align-items:center;} .modal{border-radius:20px; margin:0 16px;} }
.modal h3{font-size:17px; font-weight:800; letter-spacing:-.2px; margin-bottom:14px;}

/* Toast */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(40px);
  background:rgba(20,30,54,.92); backdrop-filter:blur(12px); border:1px solid var(--line2);
  color:var(--txt); padding:11px 17px; border-radius:13px; font-size:14px; z-index:80;
  opacity:0; transition:.28s cubic-bezier(.2,.8,.2,1); pointer-events:none;
  box-shadow:0 16px 36px -16px rgba(0,0,0,.8);}
.toast.show{transform:translateX(-50%); opacity:1;}

/* Utilities */
.muted{color:var(--muted);} .dim{color:var(--dim);}
@keyframes rise{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ============================================================================
   Hell/Dunkel-Umschalter
   Standard = dunkel (oben). html[data-theme="light"] schaltet auf die helle
   Variante um (per static/theme-toggle.js gespeichert in localStorage).
   ============================================================================ */

/* Schwebender Umschalt-Button (in beiden Modi) */
.theme-toggle{
  position:fixed; left:16px; bottom:max(16px,env(safe-area-inset-bottom)); z-index:90;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line2);
  background:var(--card2); color:var(--txt); font-size:19px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(12px) saturate(135%); backdrop-filter:blur(12px) saturate(135%);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.55); transition:transform .12s, filter .15s, background .15s;}
.theme-toggle:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.theme-toggle:active{ transform:translateY(0) scale(.95); }
@media(max-width:560px){ .theme-toggle{ width:38px; height:38px; font-size:17px; left:14px; } }
/* In der installierten App sitzt unten die Tab-Leiste (.mlnav, z-index 9000).
   Den Umschalter darüber heben, damit er nicht verdeckt wird. */
body:has(.mlnav) .theme-toggle{ bottom:calc(70px + env(safe-area-inset-bottom)); z-index:9001; }

/* ── Helle Palette (Token-Override) ───────────────────────────────────────── */
html[data-theme="light"]{
  color-scheme:light;
  /* Gedämpfte, augenschonende Palette: kein reines Weiß, kein hartes Schwarz —
     grau-blaue Flächen mit ~5 % weniger Leuchtdichte, Kontrast bleibt AA+. */
  --bg:#e3e7ee; --txt:#1e2742; --muted:#4d5a75; --dim:#67748f;
  --line:rgba(30,39,66,.11); --line2:rgba(30,39,66,.18);
  --chip:rgba(30,39,66,.06); --chip2:rgba(30,39,66,.10);
  --card:rgba(248,249,252,.68); --card2:rgba(240,243,248,.58);
  --emer:#0b8a63; --emer-d:#047857; --green:#0b8a63; --green-d:#047857;
  --red:#d5305a; --amber:#a8500a; --orange:#d9530b; --blue:#2563eb;
  /* --akz-* bleiben hier bewusst unangetastet: der helle MyLead-Modus nutzte
     schon immer die dunklen Akzent-Verläufe. Skins setzen eigene Hell-Akzente. */
}

/* ── Geteilte Komponenten im Hellmodus ────────────────────────────────────── */
html[data-theme="light"] body{
  background:
    radial-gradient(900px 520px at 8% -12%, rgba(56,189,248,.09), transparent 60%),
    radial-gradient(820px 620px at 104% 4%, rgba(var(--akz-glow),.08), transparent 55%),
    radial-gradient(1200px 860px at 50% 128%, rgba(99,102,241,.06), transparent 60%),
    linear-gradient(180deg,#eaedf3 0%, #e3e7ee 55%, #dae0e9 100%);
}
html[data-theme="light"] .h-grad{
  background:linear-gradient(180deg,#10203f,#3a4a6b);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
html[data-theme="light"] .card{
  background:linear-gradient(180deg, rgba(249,250,253,.76), rgba(241,244,249,.60));
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 18px 40px -26px rgba(15,23,42,.24);}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select{
  color:var(--txt); background:rgba(249,250,253,.72); border:1px solid var(--line2);}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{ color:#8a97b0; }
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus{
  background:#fafbfd; border-color:var(--emer); box-shadow:0 0 0 4px rgba(5,150,105,.13);}
html[data-theme="light"] .btn.danger{ color:#be123c; border-color:rgba(225,29,72,.32); }
html[data-theme="light"] .btn.danger:hover{ background:rgba(225,29,72,.10); }
html[data-theme="light"] .modal-bg{ background:rgba(15,23,42,.30); }
html[data-theme="light"] .modal{
  background:linear-gradient(180deg, rgba(248,249,253,.97), rgba(238,242,248,.98));
  border:1px solid var(--line2); box-shadow:0 -24px 60px -20px rgba(15,23,42,.28);}
html[data-theme="light"] .toast{
  background:rgba(247,249,252,.96); border:1px solid var(--line2); color:var(--txt);
  box-shadow:0 16px 36px -16px rgba(15,23,42,.28);}

/* ── Seitenspezifische Hell-Overrides (aus Template-Inventar) ─────────────── */
/* >>> LIGHT-PER-PAGE >>> */
/* Kopfzeilen + Tabellenkopf */
html[data-theme="light"] .header,
html[data-theme="light"] header{ background:var(--card); }
html[data-theme="light"] th{ background:var(--chip); }

/* Gradient-Titel (Clip-Text) — sonst auf hell unsichtbar */
html[data-theme="light"] header h1,
html[data-theme="light"] .brand h1,
html[data-theme="light"] .period-big{
  background:linear-gradient(180deg,var(--txt),var(--muted));
  -webkit-background-clip:text; background-clip:text; }

/* Glas-Karten / Panels: dunkler Verlauf + harter Schatten -> helles Glas */
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .lead-card,
html[data-theme="light"] .archiv-card,
html[data-theme="light"] .lead-mini,
html[data-theme="light"] .filter-bar,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .kunde-card{
  background:linear-gradient(180deg, rgba(249,250,253,.76), rgba(241,244,249,.60));
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 18px 40px -26px rgba(15,23,42,.20); }
html[data-theme="light"] .entry-card{ box-shadow:0 16px 34px -24px rgba(15,23,42,.18); }

/* Status-getönte Lead-Karten: Akzentstreifen bleibt, Grund wird hell */
html[data-theme="light"] .lead-card.rr-today{
  background:linear-gradient(180deg, rgba(var(--akz-soft),.15), rgba(246,248,251,.76));
  box-shadow:inset 6px 0 0 var(--emer), 0 18px 40px -26px rgba(15,23,42,.20); }
html[data-theme="light"] .lead-card.lead-overdue{
  background:linear-gradient(180deg, rgba(251,113,133,.14), rgba(246,248,251,.76));
  box-shadow:inset 6px 0 0 var(--red), 0 18px 40px -26px rgba(15,23,42,.20); }

/* Overlays / Bottom-Sheets / Dropdowns */
html[data-theme="light"] .overlay,
html[data-theme="light"] .modal-back{ background:rgba(15,23,42,.34); }
html[data-theme="light"] .panel,
html[data-theme="light"] .addr-suggest{
  background:linear-gradient(180deg, rgba(248,249,253,.96), rgba(240,244,249,.97));
  box-shadow:0 -24px 60px -20px rgba(15,23,42,.28); }
html[data-theme="light"] .drag-hint{
  background:var(--card); box-shadow:0 16px 36px -16px rgba(15,23,42,.28); }

/* Felder/Buttons ohne Token (höhere Spezifität als der generische Input-Override) */
html[data-theme="light"] .corr-btn,
html[data-theme="light"] .kpi-reset,
html[data-theme="light"] .call-corr-btn,
html[data-theme="light"] .akt-due,
html[data-theme="light"] #termin-name-disp,
html[data-theme="light"] #umtermin-name-disp{ background:var(--chip); }
html[data-theme="light"] .rr-quick button{ background:rgba(246,248,251,.62); }
html[data-theme="light"] .akt-add-form input[type=text],
html[data-theme="light"] .akt-add-form input[type=date],
html[data-theme="light"] .akt-add-form select,
html[data-theme="light"] .modal input[type=date],
html[data-theme="light"] .modal input[type=time]{ background:rgba(249,250,253,.72); }
html[data-theme="light"] .note-quick input{ box-shadow:0 16px 36px -16px rgba(15,23,42,.28); }

/* Kalender: Eventflächen + Wochenend-/Fremdmonat-Zellen + aktive Toggle-Texte */
html[data-theme="light"] .ev{ background:var(--card2); border-left-color:var(--line2); }
html[data-theme="light"] .day.weekend .day-h{ background:rgba(15,23,42,.04); }
html[data-theme="light"] .mcell.other{ background:rgba(15,23,42,.05); }
html[data-theme="light"] .viewtoggle a.active,
html[data-theme="light"] .dropzone.over,
html[data-theme="light"] .dropzone.empty.over{ color:#065f46; }

/* archiv/stats Filter-Select, verlauf Timeline-Punkt-Rand, login Logo/Fehler */
html[data-theme="light"] .filter-bar select{ background:var(--card2); }
html[data-theme="light"] .entry::before{ border-color:var(--bg); }
html[data-theme="light"] .brand .brand-logo{ box-shadow:0 12px 30px -10px rgba(15,23,42,.30); }
html[data-theme="light"] .error{ background:rgba(225,29,72,.10); }

/* index: Hauptmenü-Dropdown + Push-Popup + Smaragd-Ziellinie der Kopfzeile */
html[data-theme="light"] .nav-menu{
  background:linear-gradient(180deg, rgba(250,251,254,.97), rgba(240,244,250,.98));
  box-shadow:0 26px 60px -18px rgba(15,23,42,.30); }
html[data-theme="light"] .nav-menu a:hover{ background:rgba(5,138,99,.09); }
html[data-theme="light"] .header::after{
  background:linear-gradient(90deg,transparent,rgba(5,138,99,.32) 24%,rgba(5,138,99,.32) 76%,transparent); }
html[data-theme="light"] .gcal-quick{
  background:linear-gradient(180deg, rgba(250,251,254,.98), rgba(240,244,250,.98));
  box-shadow:0 26px 64px -18px rgba(15,23,42,.35); }
/* <<< LIGHT-PER-PAGE <<< */