/* ===== Theme Vars ===== */
:root{
  --bg:#2a2d32;         /* matte dark background */
  --bg2:#1e2025;
  --fg:#e9ecf2;
  --muted:#aeb4c1;
  --drop: 0 26px 60px rgba(0,0,0,.45);
  --pill-grad-top: rgba(255,255,255,.06);
  --pill-grad-bot: rgba(0,0,0,.55);
  --label-dim: rgba(255,255,255,.5);
  --glass-alpha: .14;               /* Stärke der Knopf-Transparenz */
  --glass-border: rgba(255,255,255,.55);
  --shine-1: rgba(255,255,255,.85);
  --shine-2: rgba(255,255,255,.2);
}
html[data-theme="light"]{
  --bg:#c0c5cb;
  --bg2:#d7dadf;
  --fg:#1a1c20;
  --muted:#5b616e;
  --drop: 0 40px 70px rgba(0,0,0,.18);
  --pill-grad-top: rgba(255,255,255,.95);
  --pill-grad-bot: rgba(255,255,255,.65);
  --label-dim: rgba(0,0,0,.5);
  --glass-alpha: .55;
  --glass-border: rgba(255,255,255,.85);
  --shine-1: rgba(255,255,255,.95);
  --shine-2: rgba(255,255,255,.35);
}

/* ===== Base ===== */
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
  color:var(--fg);
  min-height:100dvh;
  background:
    radial-gradient(900px 500px at 70% 12%, rgba(255,255,255,.05), transparent 65%),
    radial-gradient(700px 400px at 20% 88%, rgba(255,255,255,.05), transparent 65%),
    linear-gradient(180deg,var(--bg2),var(--bg));
  display:grid; place-items:center;
  transition: background .45s ease, color .35s ease;
}

.page{ text-align:center; }

.caption{ margin:18px 0 0; color:var(--muted); font-weight:600; letter-spacing:.2px; }

/* ===== Glass Toggle ===== */
.glass-toggle{
  --w: 460px;
  --h: 116px;
  position:relative; border:0; background:transparent; padding:0; cursor:pointer;
  width:var(--w); height:var(--h);
  border-radius: calc(var(--h)/2);
  isolation:isolate;
  overflow: visible; /* wichtig für überlappenden Knopf */
}

/* Pill / Track */
.track{
  position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(180deg, var(--pill-grad-top), var(--pill-grad-bot));
  box-shadow:
    inset 0 12px 22px rgba(255,255,255,.10),
    inset 0 -18px 30px rgba(0,0,0,.55),
    var(--drop);
}
html[data-theme="light"] .track{
  box-shadow:
    inset 0 16px 28px rgba(255,255,255,.95),
    inset 0 -18px 28px rgba(0,0,0,.10),
    var(--drop);
}

/* Labels */
.label{
  position:absolute; top:50%; transform:translateY(-50%);
  font-weight:800; font-size:44px; letter-spacing:.2px; user-select:none;
  color:var(--label-dim);
}
.label--left{ left:44px; }
.label--right{ right:44px; }
.glass-toggle[aria-pressed="true"] .label--left{ color:rgba(255,255,255,.82); }
html[data-theme="light"] .glass-toggle[aria-pressed="false"] .label--right{ color:rgba(0,0,0,.70); }

/* ===== Transparent Overlapping Glass Knob ===== */
.knob{
  position:absolute;
  width: calc(var(--h) * 1.36);
  height: calc(var(--h) * 1.36);
  top: 50%;
  left: calc(0% - (var(--h) * 0.18));
  transform: translateY(-50%);
  border-radius: 50%;
  z-index: 5;
  /* der eigentliche Glas-Körper */
  background: rgba(255,255,255,var(--glass-alpha));
  border: 1.2px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    0 24px 60px rgba(0,0,0,.50),
    0 2px 0 rgba(255,255,255,.35) inset;
  transition: left .6s cubic-bezier(.2,.9,.2,1);
}

/* verschiebe Knopf nach rechts */
.glass-toggle[aria-pressed="false"] .knob{
  left: calc(100% - (var(--h) * 1.19));
}

/* kleine innere, leicht matte Kapsel für das Icon */
.knob-core{
  position:absolute; inset:10% 10% 12% 10%;
  border-radius:50%;
  display:grid; place-items:center;
  background: radial-gradient(140% 100% at 30% 20%, rgba(255,255,255,.85), rgba(255,255,255,.18) 70%);
  box-shadow:
    inset 0 6px 10px rgba(255,255,255,.65),
    inset 0 -10px 18px rgba(0,0,0,.12);
}

/* Highlights/Kanten */
.rim{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(65% 45% at 30% 25%, var(--shine-1), transparent 70%),
    radial-gradient(70% 55% at 70% 75%, var(--shine-2), transparent 70%);
  mix-blend-mode:screen; pointer-events:none;
  opacity:.85; filter: blur(.6px);
}
.highlight.top{
  position:absolute; left:10%; right:10%; top:14%; height:23%;
  border-radius:999px;
  background: linear-gradient(180deg, var(--shine-1), rgba(255,255,255,0));
  filter: blur(1.1px); opacity:.75; pointer-events:none;
}
.highlight.bottom{
  position:absolute; left:12%; right:12%; bottom:12%; height:18%;
  border-radius:999px;
  background: linear-gradient(0deg, rgba(255,255,255,.45), rgba(255,255,255,0));
  filter: blur(1.2px); opacity:.5; pointer-events:none;
}

/* Icons */
.icon{ width:44px; height:44px; fill:#fff; opacity:.95; filter: drop-shadow(0 3px 10px rgba(255,255,255,.6)); }
.icon--sun{ opacity:0; }
html[data-theme="light"] .icon--moon{ opacity:0; }
html[data-theme="light"] .icon--sun{ opacity:.95; }

/* Responsive */
@media (max-width:520px){
  .glass-toggle{ --w: 340px; --h: 88px; }
  .label{ font-size:32px; }
  .icon{ width:34px; height:34px; }
}