/* LEVELMADE. — Design-Layer „Ethereal Glass" (Variante B) mit Hell/Dunkel-Umschalter
   Wird als LETZTES Stylesheet geladen. Ändert NUR das Aussehen — kein HTML-Inhalt,
   kein Formularfeld, kein Skript, keine Verbindung (Supabase/Login/Buchung).
   Schriften bleiben lokal (DSGVO).

   Zwei Themes über Design-Variablen:
   • Standard folgt der Rechner-Einstellung des Besuchers (prefers-color-scheme).
   • theme.js setzt data-theme="dark"/"light" auf <html>, wenn der Besucher den
     Sonne/Mond-Knopf drückt (in localStorage gemerkt).
   Zurücknehmen: die <link>- und die <script>-Zeile (theme.js) aus den Seiten entfernen. */

/* =========================================================================
   THEME-VARIABLEN
   ========================================================================= */

/* ---- HELL (Basis): gilt bei OS-Hell ohne Wahl und bei ausdrücklich Hell ---- */
:root,
:root[data-theme="light"]{
  color-scheme:light;
  --papier:#eaeeec; --papier-2:#ffffff; --ink:#0f1614; --grau:#576461;
  --linie:rgba(15,22,20,.11);
  --teal:#0c8b7c; --teal-ink:#0a6b60; --teal-hell:#0f9f8d;
  --lampe:#b3751d; --lampe-ink:#8a5a12; --knopf:#0c8b7c; --knopf-hover:#0a6b60;
  --nacht:#0f1618; --nacht-2:#16211f; --nacht-text:#eef3f2; --nacht-grau:#96a4a0;

  --lm-bg:#eaeeec;
  --lm-mesh:
    radial-gradient(48% 38% at 14% 6%, rgba(12,139,124,.10), transparent 62%),
    radial-gradient(45% 40% at 88% 20%, rgba(15,159,141,.08), transparent 60%),
    radial-gradient(60% 50% at 78% 92%, rgba(179,117,29,.06), transparent 62%),
    radial-gradient(40% 40% at 26% 74%, rgba(12,139,124,.05), transparent 60%);
  --lm-glass:rgba(255,255,255,.72);
  --lm-hair:rgba(15,22,20,.11);
  --lm-input:#ffffff;
  --lm-card-shadow:0 24px 50px -40px rgba(15,22,20,.22);
  --lm-nav:rgba(255,255,255,.74);
  --lm-grain:.022;
  --lm-headline:linear-gradient(120deg,#0c8b7c,#0f9f8d);
  --lm-hero:
    radial-gradient(70% 80% at 82% -8%, rgba(12,139,124,.13), transparent 58%),
    radial-gradient(60% 70% at -4% 110%, rgba(15,159,141,.08), transparent 60%),
    #e8edeb;
  --lm-panel:
    radial-gradient(90% 60% at 100% 0%, rgba(47,215,196,.16), transparent 60%),
    #0f1618;
  --lm-panel-border:rgba(255,255,255,.08);
}

/* ---- DUNKEL: gilt bei OS-Dunkel ohne Wahl ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --papier:#080b0c; --papier-2:#10161a; --ink:#eef3f2; --grau:#8b9a97;
    --linie:rgba(255,255,255,.09);
    --teal:#2fd7c4; --teal-ink:#5fe3d3; --teal-hell:#3ee68f;
    --lampe:#efb15a; --lampe-ink:#f0b85a; --knopf:#17b8a6; --knopf-hover:#2fd7c4;
    --nacht:#0b0f11; --nacht-2:#121a1d; --nacht-text:#eef3f2; --nacht-grau:#8b9a97;

    --lm-bg:#070b0c;
    --lm-mesh:
      radial-gradient(48% 38% at 14% 6%, rgba(47,215,196,.13), transparent 62%),
      radial-gradient(45% 40% at 88% 20%, rgba(62,230,143,.09), transparent 60%),
      radial-gradient(60% 50% at 78% 92%, rgba(239,177,90,.07), transparent 62%),
      radial-gradient(40% 40% at 26% 74%, rgba(47,215,196,.06), transparent 60%);
    --lm-glass:rgba(255,255,255,.04);
    --lm-hair:rgba(255,255,255,.09);
    --lm-input:rgba(255,255,255,.05);
    --lm-card-shadow:inset 0 1px 1px rgba(255,255,255,.05),0 30px 70px -44px rgba(0,0,0,.6);
    --lm-nav:rgba(11,15,17,.62);
    --lm-grain:.045;
    --lm-headline:linear-gradient(120deg,#2fd7c4,#3ee68f);
    --lm-hero:
      radial-gradient(70% 80% at 82% -8%, rgba(47,215,196,.20), transparent 58%),
      radial-gradient(60% 70% at -4% 110%, rgba(62,230,143,.12), transparent 60%),
      #080d0f;
    --lm-panel:
      radial-gradient(90% 60% at 100% 0%, rgba(47,215,196,.20), transparent 60%),
      rgba(255,255,255,.035);
    --lm-panel-border:rgba(47,215,196,.30);
  }
}
/* ---- DUNKEL: ausdrücklich gewählt (überschreibt OS-Hell) ---- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --papier:#080b0c; --papier-2:#10161a; --ink:#eef3f2; --grau:#8b9a97;
  --linie:rgba(255,255,255,.09);
  --teal:#2fd7c4; --teal-ink:#5fe3d3; --teal-hell:#3ee68f;
  --lampe:#efb15a; --lampe-ink:#f0b85a; --knopf:#17b8a6; --knopf-hover:#2fd7c4;
  --nacht:#0b0f11; --nacht-2:#121a1d; --nacht-text:#eef3f2; --nacht-grau:#8b9a97;

  --lm-bg:#070b0c;
  --lm-mesh:
    radial-gradient(48% 38% at 14% 6%, rgba(47,215,196,.13), transparent 62%),
    radial-gradient(45% 40% at 88% 20%, rgba(62,230,143,.09), transparent 60%),
    radial-gradient(60% 50% at 78% 92%, rgba(239,177,90,.07), transparent 62%),
    radial-gradient(40% 40% at 26% 74%, rgba(47,215,196,.06), transparent 60%);
  --lm-glass:rgba(255,255,255,.04);
  --lm-hair:rgba(255,255,255,.09);
  --lm-input:rgba(255,255,255,.05);
  --lm-card-shadow:inset 0 1px 1px rgba(255,255,255,.05),0 30px 70px -44px rgba(0,0,0,.6);
  --lm-nav:rgba(11,15,17,.62);
  --lm-grain:.045;
  --lm-headline:linear-gradient(120deg,#2fd7c4,#3ee68f);
  --lm-hero:
    radial-gradient(70% 80% at 82% -8%, rgba(47,215,196,.20), transparent 58%),
    radial-gradient(60% 70% at -4% 110%, rgba(62,230,143,.12), transparent 60%),
    #080d0f;
  --lm-panel:
    radial-gradient(90% 60% at 100% 0%, rgba(47,215,196,.20), transparent 60%),
    rgba(255,255,255,.035);
  --lm-panel-border:rgba(47,215,196,.30);
}

/* =========================================================================
   GRUND
   ========================================================================= */
html,body{overflow-x:hidden}
body{
  background:var(--lm-bg) !important;
  font-family:"Familjen Grotesk",system-ui,sans-serif !important;
  color:var(--ink);
}
/* Farbnebel als fest stehendes Pseudo-Element (iOS-sicher) */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--lm-mesh)}
/* feines Korn */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:var(--lm-grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* =========================================================================
   KOPF: schwebende Glas-Pille + Sonne/Mond-Knopf
   ========================================================================= */
.top{
  background:transparent !important;border:0 !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;padding-top:16px;
}
.top .row{
  max-width:max-content;margin:0 auto;gap:22px;
  padding:10px 12px 10px 22px;border-radius:999px;
  background:var(--lm-nav);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--lm-hair);
  box-shadow:0 14px 40px -18px rgba(0,0,0,.35);
}
.brand{color:var(--ink)}
.brand i{color:var(--teal)}
.top nav a{color:var(--grau)}
.top nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.top nav .nav-knopf{background:var(--teal) !important;color:#04211d !important;border:0 !important}
.top nav .nav-knopf:hover{background:var(--teal-hell) !important;color:#04211d !important}

.lm-theme-btn{
  display:inline-grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:50%;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 6%,transparent);
  border:1px solid var(--lm-hair);color:var(--ink);
  transition:background-color .3s,color .3s,transform .3s;
}
.lm-theme-btn:hover{color:var(--teal);transform:rotate(-15deg)}
.lm-theme-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================================
   HERO
   ========================================================================= */
.auftakt{background:var(--lm-hero) !important;border-bottom:1px solid var(--lm-hair) !important}
.auftakt h1{color:var(--ink)}
.auftakt h1 em{
  background:var(--lm-headline);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.auftakt p.stand{color:var(--ink)}
.auftakt p.stand + p.stand{color:var(--grau)}
.auftakt .tun .voll{background:var(--teal);color:#04211d}
.auftakt .tun .voll:hover{background:var(--teal-hell)}
.auftakt .tun .leer{color:var(--ink);border-color:var(--lm-hair)}
.auftakt .tun .leer:hover{border-color:var(--teal)}

/* =========================================================================
   KARTEN (Glas) & AKZENT-PANELS (dunkel in beiden Themes)
   ========================================================================= */
.posten,.paket:not(.empfohlen),.zf-vorn,.person{
  background:var(--lm-glass) !important;border:1px solid var(--lm-hair) !important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:var(--lm-card-shadow) !important;
}
.posten:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--teal) 32%,var(--lm-hair)) !important}
.posten h3,.zf-vorn h3{color:var(--ink)}
.posten p.claim{color:var(--teal-ink)}
.posten .zeichen .t{fill:var(--teal)}
.posten .zeichen .s{fill:color-mix(in srgb,var(--ink) 16%,transparent)}

/* Akzent-Panels: Schichtbuch, Zeitrechner-Tafel, empfohlenes Paket, Zeitfresser-Rückseite */
.schichtbuch,.zr-tafel,.paket.empfohlen,.zf-hinten{
  background:var(--lm-panel) !important;border:1px solid var(--lm-panel-border) !important;
  color:var(--nacht-text);
}
.paket.empfohlen .paket-cta{background:var(--teal);color:#04211d}
.paket.empfohlen .paket-cta:hover{background:var(--teal-hell)}
.zf-hinten .zf-marke{color:var(--teal-hell)}
.zr-gross b,.zr-tabelle tfoot th,.zr-tabelle tfoot td{color:var(--teal-hell)}

/* Regler auf beiden Themes */
.zr-feld input[type=range]{background:transparent}
.zr-feld input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--teal) var(--fuell),color-mix(in srgb,var(--ink) 14%,transparent) var(--fuell)) !important;
}
.zr-feld input[type=range]::-webkit-slider-thumb{
  background:var(--papier-2);border:3px solid var(--teal);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 16%,transparent),0 2px 8px rgba(0,0,0,.3);
}
.zr-feld input[type=range]::-moz-range-thumb{background:var(--papier-2);border:3px solid var(--teal)}
.zr-feld input[type=range]::-moz-range-progress{background:var(--teal)}

/* Ablauf-Ziffern */
ol.ablauf li::before{
  background:var(--lm-glass) !important;color:var(--teal) !important;
  border:1px solid color-mix(in srgb,var(--teal) 40%,var(--lm-hair)) !important;
}
ol.ablauf li:last-child::before{background:var(--teal) !important;color:#04211d !important;border-color:var(--teal) !important}
ol.ablauf li::after{background:var(--lm-hair)}

/* =========================================================================
   SONDERBAU: bewusst dunkles Amber-Band in beiden Themes (Akzent)
   ========================================================================= */
.sonderbau{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(239,177,90,.20), transparent 55%),
    #16110a !important;
  border:1px solid rgba(239,177,90,.30) !important;
}
.sonderbau::before{opacity:.22 !important}
.sonderbau .overline,.sonderbau .eyebrow{color:#efb15a !important}
.sonderbau .eyebrow::before{background:#efb15a !important}
.sonderbau .eyebrow b{color:#efb15a !important}
.sonderbau h2{color:#fff}
.sonderbau-inhalt p{color:#c9c1b1}
.sonderbau-preise dd{color:#efb15a}
.sonderbau-cta{background:#efb15a;color:#3a2708}
.sonderbau-cta:hover{background:#f4c274}

/* =========================================================================
   VORGABEN-BAND + FUSS
   ========================================================================= */
.regel{
  background:
    radial-gradient(90% 90% at 8% 0%, rgba(47,215,196,.10), transparent 55%),
    var(--nacht) !important;
  border-block:1px solid var(--lm-panel-border) !important;
}
.vorgaben{background:rgba(255,255,255,.03) !important;border:1px solid rgba(255,255,255,.08) !important}
.schalter.an{background:var(--teal)}
.schalter.lampe{background:var(--lampe)}
.kontakt .mail{background:var(--teal);color:#04211d}
.kontakt .mail:hover{background:var(--teal-hell)}
footer{border-top:1px solid var(--lm-hair)}

/* Eyebrows / Links */
.eyebrow{color:var(--grau)}
.eyebrow::before{background:var(--teal)}
.eyebrow b{color:var(--teal-ink)}
a{color:var(--teal-ink)}

/* =========================================================================
   HANDY-FEINSCHLIFF
   ========================================================================= */
@media (max-width:820px){
  .top{padding-top:0}
  .top .row{
    max-width:none;margin:0;border-radius:0;padding:10px 16px;gap:8px 12px;
    background:color-mix(in srgb,var(--lm-bg) 88%,transparent);
    border:0;border-bottom:1px solid var(--lm-hair);box-shadow:none;
  }
  .top nav{gap:2px 4px}
  .top nav a{padding:6px 11px;font-size:.9rem}
  .lm-theme-btn{width:34px;height:34px}
}

/* =========================================================================
   UNTERSEITEN (Buchung, Konto, Auth, Henry, Sicherheit)
   ========================================================================= */
.formular input,.formular textarea,.formular .menge select,
.feld input,.neu input,.neu select,.werkzeuge input[type=search],.sortier select,
input[inputmode="numeric"]{
  background:var(--lm-input) !important;border-color:var(--lm-hair) !important;color:var(--ink) !important;
}
.formular input::placeholder,.feld input::placeholder,.formular textarea::placeholder,
.neu input::placeholder{color:color-mix(in srgb,var(--ink) 45%,transparent)}
.karte,.spalte,.wahl,.kachel,.module li,.kunde,.summe-leer,.neu,.gut-zeile,.marke{
  background:var(--lm-glass) !important;border-color:var(--lm-hair) !important;
}
.karte{
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:var(--lm-card-shadow) !important;
}
.summe-leer{border-style:dashed !important}
.wahl:has(input:checked){
  border-color:var(--teal) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 20%,transparent) !important;
}
.pw-zeigen,.chip,.knopf-leer{
  background:color-mix(in srgb,var(--ink) 5%,transparent) !important;border-color:var(--lm-hair) !important;color:var(--grau) !important;
}
.chip.aktiv{background:var(--teal) !important;color:#04211d !important;border-color:var(--teal) !important}
.knopf-klein{background:var(--knopf) !important;color:#fff !important;border-color:var(--knopf) !important}
.marke.modul{background:color-mix(in srgb,var(--teal) 14%,transparent) !important;border-color:color-mix(in srgb,var(--teal) 40%,var(--lm-hair)) !important;color:var(--teal-ink) !important}
.marke.test{background:color-mix(in srgb,var(--lampe) 16%,transparent) !important;border-color:color-mix(in srgb,var(--lampe) 45%,var(--lm-hair)) !important;color:var(--lampe-ink) !important}
/* QR-Rahmen bleibt bewusst weiß (muss scanbar sein) — nicht anfassen */
