@charset "utf-8";
/* HELL/DUNKEL-SCHALTER – Schiebeschalter, Sonne-Mond-Verwandlung, Funken, Übergang (gleich für beide Designs) */
.thema-schalter{--breite:66px;--hoehe:34px;--rand:3px;--kugel:28px;--weg:calc(var(--breite) - var(--kugel) - 2 * var(--rand));
  position:relative;flex:none;width:var(--breite);height:var(--hoehe);padding:0;border:0;border-radius:999px;cursor:pointer;
  background:none;touch-action:none;-webkit-tap-highlight-color:transparent}
.thema-schalter:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Bahn: tagsüber warmer Himmel mit Wölkchen, nachts Nachtblau mit Sternen */
.thema-schalter .bahn{position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background:linear-gradient(135deg,#bfe0f5,#f7d9a8);box-shadow:inset 0 1px 3px rgba(0,0,0,.18);transition:background .6s}
.thema-schalter .bahn i{position:absolute;border-radius:50%;background:#fff;transition:opacity .5s,transform .6s cubic-bezier(.5,1.6,.5,1)}
.thema-schalter .s1{width:3px;height:3px;left:13px;top:8px}
.thema-schalter .s2{width:2px;height:2px;left:22px;top:20px}
.thema-schalter .s3{width:2px;height:2px;left:9px;top:22px}
.thema-schalter .s1,.thema-schalter .s2,.thema-schalter .s3{opacity:0;transform:scale(0)}
.thema-schalter .wolke{width:16px;height:7px;right:8px;bottom:7px;border-radius:6px;opacity:.85;
  box-shadow:5px -3px 0 1px #fff}

/* Kugel mit Sonne/Mond */
.thema-schalter .kugel{position:absolute;left:var(--rand);top:var(--rand);width:var(--kugel);height:var(--kugel);border-radius:50%;
  display:grid;place-items:center;background:#fff8e7;color:#f0a020;box-shadow:0 2px 6px rgba(0,0,0,.25);
  transform:translateX(0) rotate(0deg);transition:transform .6s cubic-bezier(.5,1.5,.45,1),background .5s,color .5s}
.thema-schalter svg{width:20px;height:20px;overflow:visible}
.thema-schalter .sonne{transform-box:fill-box;transform-origin:center;transition:transform .6s cubic-bezier(.5,1.7,.5,1)}
.thema-schalter .mond-schatten{transition:transform .6s cubic-bezier(.6,0,.2,1)}
.thema-schalter .strahlen{transform-origin:12px 12px;transition:transform .55s cubic-bezier(.5,1.6,.5,1),opacity .35s}
.thema-schalter:hover .kugel{box-shadow:0 2px 10px rgba(0,0,0,.3),0 0 0 4px rgba(255,255,255,.25)}

/* an (= dunkel): Kugel rutscht nach rechts, dreht sich, Sonne wird zum Mond, Sterne gehen an */
.thema-schalter.an .bahn{background:linear-gradient(135deg,#1c2340,#3a2f5c)}
.thema-schalter.an .s1,.thema-schalter.an .s2,.thema-schalter.an .s3{opacity:1;transform:scale(1)}
.thema-schalter.an .wolke{opacity:0;transform:translateY(10px)}
.thema-schalter.an .kugel{transform:translateX(var(--weg)) rotate(360deg);background:#e9e6f5;color:#6c6596}
.thema-schalter.an .sonne{transform:scale(1.75)}
.thema-schalter.an .mond-schatten{transform:translate(-13px,12px)}
.thema-schalter.an .strahlen{transform:rotate(-120deg) scale(0);opacity:0}

/* beim Wischen folgt die Kugel dem Finger */
.thema-schalter.ziehen .kugel{transition:none;transform:translateX(calc(var(--zug) * var(--weg))) rotate(calc(var(--zug) * 360deg))!important}

/* Funken über allem (eigene Ebene, damit sie beim Kreis-Übergang nicht abgeschnitten werden) */
.thema-funken{position:fixed;inset:0;pointer-events:none;z-index:200;view-transition-name:thema-funken}
.thema-funken span{position:absolute;font-size:14px;line-height:1;will-change:transform,opacity}
.thema-funken .stern{color:#f5c76b;text-shadow:0 0 8px rgba(245,199,107,.8)}
.thema-funken .punkt{color:#f0a24a;font-size:9px}

/* Kreis-Übergang: die alte Ansicht bleibt stehen, die neue wächst als Kreis darüber */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-group(thema-funken){z-index:300}
/* der Schalter läuft als eigene, lebendige Ebene über dem Übergang: man sieht ihn sofort rutschen */
.thema-schalter{view-transition-name:thema-schalter}
::view-transition-group(thema-schalter){animation:none;z-index:250}
::view-transition-old(thema-schalter){display:none}
::view-transition-new(thema-schalter){animation:none}

/* Ersatz für Browser ohne Kreis-Übergang: weiches Überblenden */
.thema-wechsel,.thema-wechsel *{transition:background-color .5s,color .5s,border-color .5s,fill .5s!important}

@media (prefers-reduced-motion:reduce){
  .thema-schalter *{transition:none!important;animation:none!important}
}