:root{
  color-scheme:light;
  --ease:cubic-bezier(.2,.8,.2,1);
  --orb-x:82%;
  --orb-y:18%;
  --moon-x:82%;
  --moon-y:18%;
  --sun-opacity:.76;
  --moon-opacity:0;
  --cloud-opacity:.22;
  --cloud-blur:1.4px;
  --bg-brightness:1;
  --bg-saturation:1;
  --wash-top:.34;
  --wash-mid:.08;
  --light-beam:.22;
  --light-beam-size:42rem;
  --orb-glow:rgba(255,232,151,.38);
  --content-shadow-strength:.08;
  --ambient-opacity:.28;
  --horizon-warmth:.08;
  --ground-wash:.04;
  --scene-contrast:1;
  --sun-core:rgba(255,244,170,.94);
  --sun-halo:rgba(250,204,21,.30);
  --moon-core:rgba(226,232,240,.75);
  --page-y:0vh;
  --cloud-from-x:-12vw;
  --cloud-to-x:18vw;
  --cloud-from-y:0vh;
  --cloud-to-y:0vh;
  --cloud-speed-1:78s;
  --cloud-speed-2:104s;
  --cloud-speed-3:88s;
  --cloud-speed-4:126s;
  --wind-opacity:0;
  --rain-opacity:0;
  --snow-opacity:0;
  --mist-opacity:0;
  --dust-opacity:.06;
  --particle-angle:12deg;
  --particle-speed:1.1s;
  --flake-speed:9s;
  --wind-from-x:-5vw;
  --wind-to-x:8vw;
  --wind-from-y:0vh;
  --wind-to-y:0vh;
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{
  min-height:100svh;
  margin:0;
  font-family:"Manrope",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--sky-c);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-10;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--orb-x) var(--orb-y), var(--orb-glow), transparent var(--light-beam-size)),
    radial-gradient(circle at 10% 14%, var(--glow-a), transparent 32rem),
    radial-gradient(circle at 90% 84%, var(--glow-b), transparent 34rem),
    linear-gradient(135deg,var(--sky-a),var(--sky-b) 48%,var(--sky-c));
  filter:brightness(var(--bg-brightness)) saturate(var(--bg-saturation)) contrast(var(--scene-contrast));
  transition:background 58s linear,filter 58s linear;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-8;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,var(--wash-top)),rgba(255,255,255,var(--wash-mid)) 43%,transparent 82%),
    radial-gradient(ellipse at var(--orb-x) var(--orb-y),rgba(255,255,255,var(--light-beam)),transparent 45rem);
  mix-blend-mode:soft-light;
  transition:opacity 58s linear,background 58s linear;
}
body[data-period="night"]{color-scheme:dark}
body[data-period="night"]::after{mix-blend-mode:screen;opacity:.76}
.weather-scene{position:fixed;inset:0;z-index:-5;pointer-events:none;overflow:hidden;filter:saturate(var(--bg-saturation));transition:filter 58s linear}
.weather-scene::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0 43%,rgba(255,255,255,var(--ground-wash)) 72%,rgba(255,176,82,var(--horizon-warmth)) 100%);mix-blend-mode:soft-light;opacity:.92;transition:background 58s linear,opacity 58s linear}
.ambient{position:absolute;display:block;border-radius:999px;filter:blur(34px);opacity:var(--ambient-opacity);animation:ambientFloat 22s ease-in-out infinite alternate}
.a1{width:34vw;min-width:16rem;height:34vw;min-height:16rem;left:-10vw;top:8vh;background:var(--glow-a)}
.a2{width:30vw;min-width:15rem;height:30vw;min-height:15rem;right:-9vw;bottom:-8vh;background:var(--glow-b);animation-delay:-11s}
.sun,.moon{position:absolute;left:var(--orb-x);top:var(--orb-y);width:clamp(8rem,14vw,13rem);height:clamp(8rem,14vw,13rem);translate:-50% -50%;border-radius:50%;transition:left 58s linear,top 58s linear,opacity 58s linear,filter 58s linear;will-change:left,top,opacity;}
.sun{opacity:var(--sun-opacity);background:radial-gradient(circle at 48% 48%,#fffde8 0 22%,var(--sun-core) 23% 43%,rgba(255,201,76,.38) 44% 61%,transparent 70%);box-shadow:0 0 4rem var(--sun-halo),0 0 9rem rgba(251,191,36,.16);animation:sunBreath 5.5s ease-in-out infinite alternate}
.sun::before{content:"";position:absolute;inset:-24%;border-radius:inherit;background:radial-gradient(circle,rgba(255,255,255,.25),transparent 62%);filter:blur(8px)}
.moon{left:var(--moon-x);top:var(--moon-y);opacity:var(--moon-opacity);overflow:hidden;background:
  radial-gradient(circle at 30% 28%,rgba(255,255,255,.22) 0 7%,transparent 8%),
  radial-gradient(circle at 62% 34%,rgba(148,163,184,.16) 0 6%,transparent 7%),
  radial-gradient(circle at 57% 61%,rgba(148,163,184,.14) 0 9%,transparent 10%),
  radial-gradient(circle at 43% 48%,rgba(203,213,225,.16) 0 5%,transparent 6%),
  radial-gradient(circle at 42% 36%,var(--moon-core) 0 44%,rgba(186,196,212,.86) 67%,rgba(154,166,184,.78) 100%);
  box-shadow:0 0 4rem rgba(147,197,253,.20),0 0 10rem rgba(59,130,246,.12), inset -.85rem -.9rem 1.6rem rgba(94,108,132,.16);
  animation:moonBreath 6s ease-in-out infinite alternate}
.moon::before{content:"";position:absolute;inset:0;border-radius:50%;background:
  radial-gradient(circle at 26% 25%,rgba(255,255,255,.26) 0 5%,transparent 6%),
  radial-gradient(circle at 64% 37%,rgba(148,163,184,.18) 0 6%,transparent 7%),
  radial-gradient(circle at 54% 63%,rgba(148,163,184,.15) 0 8%,transparent 9%),
  radial-gradient(circle at 38% 48%,rgba(255,255,255,.08),transparent 56%);
  opacity:.82;pointer-events:none}
.moon::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 46% 50%,rgba(71,85,105,.95) 0 68%,rgba(51,65,85,.98) 100%);box-shadow:inset 0 0 2rem rgba(15,23,42,.34);pointer-events:none;transition:transform 58s linear,opacity 58s linear}
.moon-full::after{transform:translateX(-125%)}
.moon-new::after{transform:translateX(0)}
.moon-waxing-crescent::after{transform:translateX(-34%)}
.moon-first-quarter::after{transform:translateX(-50%)}
.moon-waxing-gibbous::after{transform:translateX(-76%)}
.moon-waning-gibbous::after{transform:translateX(76%)}
.moon-last-quarter::after{transform:translateX(50%)}
.moon-waning-crescent::after{transform:translateX(34%)}
.stars{position:absolute;inset:0;opacity:var(--stars-opacity,0);transition:opacity 1.2s var(--ease);overflow:hidden}
.stars i{position:absolute;left:var(--star-x);top:var(--star-y);width:var(--star-size);height:var(--star-size);border-radius:50%;background:rgba(255,255,255,.96);opacity:var(--star-alpha);box-shadow:0 0 calc(var(--star-size) * 2.8) rgba(191,219,254,.54);animation:starTwinkle var(--star-duration) ease-in-out var(--star-delay) infinite alternate}
body[data-period="night"] .stars{opacity:var(--stars-opacity,.30)}
.cloud{position:absolute;width:clamp(15rem,25vw,31rem);height:clamp(4.1rem,7vw,8rem);border-radius:999px;background:rgba(255,255,255,.50);filter:blur(var(--cloud-blur));opacity:var(--cloud-opacity);animation:cloudDrift var(--cloud-speed-1) linear infinite;will-change:translate,opacity;transition:opacity 58s linear,filter 58s linear,background 58s linear}
.cloud::before,.cloud::after{content:"";position:absolute;border-radius:999px;background:inherit}
.cloud::before{width:42%;height:120%;left:13%;top:-46%}
.cloud::after{width:56%;height:160%;right:12%;top:-76%}
.c1{left:-10rem;top:18vh;animation-duration:var(--cloud-speed-1)}
.c2{right:-8rem;top:68vh;transform:scale(.74);animation-duration:var(--cloud-speed-2);animation-delay:-25s}
.c3{left:44vw;top:8vh;transform:scale(.54);animation-duration:var(--cloud-speed-3);animation-delay:-36s}
.c4{left:10vw;bottom:8vh;transform:scale(.42);animation-duration:var(--cloud-speed-4);animation-delay:-58s;opacity:calc(var(--cloud-opacity) * .62)}
body[data-weather="clear"] .c2,body[data-weather="clear"] .c4{opacity:calc(var(--cloud-opacity) * .28)}
body[data-weather="clear"] .c3{opacity:calc(var(--cloud-opacity) * .48)}
body[data-weather="cloudy"] .cloud,body[data-weather="rain"] .cloud,body[data-weather="snow"] .cloud,body[data-weather="fog"] .cloud{background:rgba(255,255,255,.62)}
body[data-weather="fog"] .weather-scene{filter:blur(1px) saturate(.85)}
.wind-lines{position:absolute;inset:-20%;opacity:var(--wind-opacity);background:repeating-linear-gradient(105deg,transparent 0 48px,rgba(255,255,255,.22) 49px 50px,transparent 51px 92px);filter:blur(.8px);animation:windSweep 12s linear infinite;mix-blend-mode:soft-light;will-change:translate,opacity;transition:opacity 58s linear}
.rain-layer{position:absolute;inset:-20%;opacity:var(--rain-opacity);background:repeating-linear-gradient(var(--particle-angle),transparent 0 20px,rgba(37,99,235,.34) 21px 23px,transparent 24px 34px);filter:blur(.15px);animation:rainMove var(--particle-speed) linear infinite;mix-blend-mode:multiply;will-change:background-position,opacity;transition:opacity 58s linear}
body[data-period="night"] .rain-layer{mix-blend-mode:screen;filter:blur(.25px)}
.dust-layer{position:absolute;inset:0;opacity:var(--dust-opacity);background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 .7px,transparent 1.6px),radial-gradient(circle,rgba(255,214,137,.55) 0 .8px,transparent 1.8px);background-size:82px 82px,129px 129px;background-position:10px 20px,55px 70px;animation:dustFloat 36s ease-in-out infinite alternate;mix-blend-mode:soft-light;transition:opacity 58s linear}
body[data-weather="storm"] .weather-scene::after{content:"";position:absolute;inset:0;opacity:.10;background:linear-gradient(110deg,transparent 0 44%,rgba(255,255,255,.85) 45%,transparent 47% 100%);animation:stormFlash 7.5s infinite}

.minimal-page{
  min-height:100svh;
  width:100%;
  padding:calc(env(safe-area-inset-top) + clamp(2rem,5.5vh,5rem)) max(1.55rem,calc(env(safe-area-inset-left) + 1.55rem)) calc(env(safe-area-inset-bottom) + clamp(2rem,5.5vh,5rem)) max(1.55rem,calc(env(safe-area-inset-right) + 1.55rem));
  display:grid;
  place-items:center;
}
.minimal-hero{
  width:min(100%,760px);
  transform:translateY(var(--page-y));
  text-align:left;
  text-shadow:0 20px 84px rgba(15,23,42,var(--content-shadow-strength));
  animation:contentIn .62s var(--ease) both;
}
.kicker{margin:0 0 clamp(.95rem,2.4vh,1.45rem);color:var(--accent);font-size:clamp(.72rem,.9vw,.84rem);line-height:1;font-weight:800;letter-spacing:.19em;text-transform:uppercase}
.minimal-hero h1{margin:0;max-width:760px;font-size:clamp(4.25rem,8.2vw,7.25rem);line-height:.96;font-weight:850;letter-spacing:-.055em;text-wrap:balance}
.sentence{margin:clamp(1.05rem,2.7vh,1.65rem) 0 0;font-size:clamp(1.16rem,1.55vw,1.36rem);line-height:1.36;font-weight:720;letter-spacing:-.02em}
.detail{margin:.64rem 0 0;max-width:680px;color:var(--muted);font-size:clamp(.96rem,1.12vw,1.05rem);line-height:1.62;font-weight:590;letter-spacing:-.006em}
.mini-stats{display:grid;grid-template-columns:max-content max-content;align-items:start;gap:clamp(2.2rem,5vw,4.8rem);margin-top:clamp(1.85rem,4.6vh,3rem)}
.mini-stats div{min-width:0}.mini-stats span{display:block;color:var(--muted);font-size:.70rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase}.mini-stats strong{display:block;margin-top:.38rem;font-size:clamp(1.22rem,1.85vw,1.52rem);line-height:1.12;font-weight:780;letter-spacing:-.035em}
body[data-leave-state="current"] .kicker{color:#16a34a}
body[data-leave-state="current"] .minimal-hero h1{font-size:clamp(3.9rem,7.6vw,6.8rem)}
body[data-leave-state="current"] .sentence{font-size:clamp(1.42rem,2.2vw,2rem);font-weight:800;color:var(--accent)}
body[data-leave-state="current"] .sun{filter:saturate(1.08) brightness(1.06)}


.flash-wrap{position:fixed;top:1rem;right:1rem;z-index:20;display:grid;gap:.55rem}.flash{padding:.85rem 1rem;border-radius:1rem;background:rgba(255,255,255,.82);border:1px solid rgba(15,23,42,.10);box-shadow:0 18px 60px rgba(15,23,42,.12);font-weight:700;backdrop-filter:blur(22px)}.flash.ok{color:#15803d}.flash.error{color:#b91c1c}
.shell{width:min(920px,calc(100% - 2rem));margin:0 auto;padding:3rem 0}.narrow{width:min(820px,calc(100% - 2rem))}.hero-panel,.list-card{background:rgba(255,255,255,.76);border:1px solid rgba(15,23,42,.10);border-radius:1.2rem;padding:1.25rem;margin-bottom:1rem;box-shadow:0 18px 60px rgba(15,23,42,.07);backdrop-filter:blur(24px)}.hero-panel{display:flex;justify-content:space-between;gap:1rem;align-items:center}.eyebrow{display:block;margin:0 0 .75rem;color:var(--accent);font-size:.75rem;line-height:1;letter-spacing:.14em;text-transform:uppercase;font-weight:800}.hero-panel h1,.list-card h1{margin:0;font-size:clamp(2rem,6vw,4rem);line-height:.98;letter-spacing:-.04em}.hero-panel p,.list-card p{margin:.8rem 0 0;color:var(--muted);line-height:1.55}.list-card h2{margin:.2rem 0 .8rem;font-size:1.35rem;letter-spacing:-.03em}.stack-form{display:grid;gap:1rem;margin-top:1rem}.stack-form label{display:grid;gap:.42rem;color:var(--muted);font-size:.84rem;font-weight:650}.stack-form input,.stack-form textarea,.stack-form select{width:100%;border:1px solid rgba(15,23,42,.13);border-radius:1rem;background:rgba(255,255,255,.78);color:var(--text);padding:.86rem .95rem;outline:none}.stack-form textarea{resize:vertical;min-height:13rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:.9rem;line-height:1.45}.form-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.8fr);gap:1rem}.split-even{grid-template-columns:1fr 1fr}.fill-page{padding-top:2rem;padding-bottom:2rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.ghost-button,.primary-button{display:inline-flex;align-items:center;justify-content:center;min-height:2.45rem;padding:0 1rem;border-radius:999px;font-weight:760;border:1px solid rgba(15,23,42,.13);background:rgba(255,255,255,.66);color:var(--text);cursor:pointer;text-decoration:none}.primary-button{border:0;background:var(--text);color:#fff}.full{width:100%}.manage-list{display:grid;gap:.55rem}.manage-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid rgba(15,23,42,.10);padding:.75rem 0}.manage-row span{display:block;color:var(--muted);font-size:.9rem;margin-top:.14rem}.delete-button{width:2rem;height:2rem;border-radius:999px;border:1px solid rgba(220,38,38,.25);background:rgba(239,68,68,.12);color:#dc2626;font-size:1.3rem;cursor:pointer}.footer{display:none}

@keyframes contentIn{from{opacity:0;transform:translateY(calc(var(--page-y) + 10px));filter:blur(3px)}to{opacity:1;transform:translateY(var(--page-y));filter:blur(0)}}
@keyframes sunBreath{from{transform:scale(1);filter:blur(0) brightness(1)}to{transform:scale(1.025);filter:blur(.2px) brightness(1.08)}}
@keyframes moonBreath{from{transform:scale(.99);filter:brightness(.96)}to{transform:scale(1.018);filter:brightness(1.08)}}
@keyframes cloudDrift{from{translate:var(--cloud-from-x) var(--cloud-from-y)}to{translate:var(--cloud-to-x) var(--cloud-to-y)}}
@keyframes ambientFloat{from{translate:0 0;scale:1}to{translate:3vw -2vh;scale:1.04}}
@keyframes starTwinkle{from{transform:scale(.72);filter:brightness(.72);opacity:calc(var(--star-alpha) * .58)}to{transform:scale(1.18);filter:brightness(1.35);opacity:var(--star-alpha)}}
@keyframes rainMove{to{background-position:0 70px}}
@keyframes stormFlash{0%,93%,100%{opacity:0}94%{opacity:.16}95%{opacity:.03}96%{opacity:.12}}
@keyframes windSweep{from{translate:var(--wind-from-x) var(--wind-from-y)}to{translate:var(--wind-to-x) var(--wind-to-y)}}
@keyframes dustFloat{from{translate:-1.5vw .4vh;filter:blur(0)}to{translate:1.8vw -1vh;filter:blur(.4px)}}

@media(max-width:760px){
  .minimal-page{padding:calc(env(safe-area-inset-top) + 1.5rem) max(1.55rem,calc(env(safe-area-inset-left) + 1.55rem)) calc(env(safe-area-inset-bottom) + 2rem) max(1.55rem,calc(env(safe-area-inset-right) + 1.55rem));place-items:center}
  .minimal-hero{width:min(100%,520px)}
  .minimal-hero h1{font-size:clamp(3.65rem,16vw,5.9rem);line-height:1;letter-spacing:-.047em;max-width:100%}
  .sentence{font-size:clamp(1.08rem,4.5vw,1.32rem);line-height:1.34}
  .detail{font-size:.96rem;line-height:1.55}
  .mini-stats{gap:clamp(2.35rem,11vw,4rem);margin-top:1.9rem}
  .sun,.moon{width:clamp(8.5rem,35vw,12rem);height:clamp(8.5rem,35vw,12rem)}
  .cloud{width:17rem;height:4.8rem}.c1{left:-8rem;top:15vh}.c2{right:-7rem;top:72vh}.c3{left:38vw;top:7vh}.c4{left:-5rem;bottom:10vh}
  .form-grid,.form-row{grid-template-columns:1fr}.hero-panel{display:block}.flash-wrap{left:1rem;right:1rem;top:1rem}
}
@media(max-width:430px){
  .minimal-page{padding:calc(env(safe-area-inset-top) + .9rem) max(1.35rem,calc(env(safe-area-inset-left) + 1.35rem)) calc(env(safe-area-inset-bottom) + 1.35rem) max(1.35rem,calc(env(safe-area-inset-right) + 1.35rem))}
  .minimal-hero{transform:translateY(calc(var(--page-y) - .5vh))}
  .kicker{font-size:.67rem;letter-spacing:.18em;margin-bottom:.95rem}
  .minimal-hero h1{font-size:clamp(3.05rem,15.4vw,4.78rem);line-height:1.015;letter-spacing:-.036em}
  body[data-leave-state="current"] .minimal-hero h1{font-size:clamp(2.82rem,13.8vw,4.35rem)}
  .sentence{margin-top:1rem}
  .detail{margin-top:.56rem}
  .mini-stats{grid-template-columns:1fr 1fr;gap:1.35rem;margin-top:1.65rem}
  .mini-stats span{font-size:.64rem;letter-spacing:.16em}.mini-stats strong{font-size:1.18rem}
  .sun,.moon{width:10.5rem;height:10.5rem}
}
@media(max-width:360px){
  .minimal-page{padding-inline:1.15rem}.minimal-hero h1{font-size:clamp(2.72rem,14.6vw,4.1rem)}.detail{font-size:.88rem}.mini-stats{gap:1rem}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* V10.5 Demo sandbox: Regler reagieren sofort, Firefox-sicher, Layout nicht mehr abgeschnitten */
body[data-demo="1"]::before,
body[data-demo="1"]::after,
body[data-demo="1"] .weather-scene,
body[data-demo="1"] .weather-scene::before,
body[data-demo="1"] .sun,
body[data-demo="1"] .moon,
body[data-demo="1"] .cloud,
body[data-demo="1"] .wind-lines,
body[data-demo="1"] .rain-layer,
body[data-demo="1"] .dust-layer{
  transition-duration:.42s!important;
  transition-timing-function:var(--ease)!important;
}
body[data-demo="1"] .rain-layer,
body[data-demo="1"] .wind-lines,
body[data-demo="1"] .dust-layer{z-index:1}
body[data-demo="1"] .weather-scene{z-index:-5}
.demo-page{
  min-height:100svh;
  width:min(100%,1420px);
  margin-inline:auto;
  padding:calc(env(safe-area-inset-top) + clamp(1.6rem,5vh,4rem)) max(2rem,calc(env(safe-area-inset-right) + 2rem)) calc(env(safe-area-inset-bottom) + clamp(1.6rem,5vh,4rem)) max(2rem,calc(env(safe-area-inset-left) + 2rem));
  display:grid;
  grid-template-columns:minmax(0,620px) minmax(340px,430px);
  justify-content:center;
  align-items:center;
  gap:clamp(2rem,7vw,7rem);
  overflow:hidden;
}
.demo-hero{
  width:100%;
  max-width:620px;
  min-width:0;
  animation:contentIn .62s var(--ease) both;
  text-shadow:0 20px 84px rgba(15,23,42,var(--content-shadow-strength));
}
.demo-hero h1{
  margin:0;
  font-size:clamp(4.2rem,7vw,7rem);
  line-height:.94;
  font-weight:850;
  letter-spacing:-.048em;
  text-wrap:balance;
  max-width:10ch;
}
.demo-hero .sentence{max-width:34rem}.demo-hero .detail{max-width:34rem}
.demo-panel{
  align-self:center;
  width:100%;
  border:1px solid var(--line);
  border-radius:1.55rem;
  padding:1.05rem;
  background:rgba(255,255,255,.34);
  box-shadow:0 24px 80px rgba(15,23,42,.08);
  backdrop-filter:blur(26px) saturate(1.2);
  -webkit-backdrop-filter:blur(26px) saturate(1.2);
  animation:contentIn .72s var(--ease) both;
}
.demo-panel-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.9rem;padding:.15rem .15rem .35rem}
.demo-panel-head strong{font-size:1.02rem;letter-spacing:-.025em}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.demo-field{display:grid;gap:.42rem;padding:.75rem;border-radius:1rem;background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.26)}
.demo-field.wide{grid-column:1/-1;margin-bottom:.75rem}
.demo-field span{display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.demo-field b{color:var(--text);font-weight:850;letter-spacing:0;text-transform:none}
.demo-field input[type="range"]{width:100%;accent-color:var(--accent);touch-action:none}
.demo-field select{width:100%;appearance:none;border:1px solid var(--line);border-radius:.9rem;padding:.7rem .8rem;background:rgba(255,255,255,.45);color:var(--text);font:inherit;font-weight:750;outline:none}
.demo-presets{display:flex;flex-wrap:wrap;gap:.48rem;margin-top:.85rem}
.demo-presets button{border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.28);color:var(--text);min-height:2.15rem;padding:0 .82rem;font-weight:780;cursor:pointer;backdrop-filter:blur(14px)}
.demo-presets button:hover,.demo-presets button.is-active{background:rgba(255,255,255,.58)}
.demo-status{margin:.7rem .15rem 0;color:var(--muted);font-size:.78rem;font-weight:720;letter-spacing:-.01em;opacity:.88}
body[data-demo="1"][data-weather="rain"] .rain-layer{opacity:max(var(--rain-opacity),.18)}
body[data-demo="1"][data-weather="windy"] .wind-lines{opacity:max(var(--wind-opacity),.12)}
@media(max-width:980px){
  .demo-page{width:100%;grid-template-columns:1fr;align-items:start;justify-items:center;padding:calc(env(safe-area-inset-top) + 2rem) max(1.25rem,calc(env(safe-area-inset-left) + 1.25rem)) calc(env(safe-area-inset-bottom) + 2rem) max(1.25rem,calc(env(safe-area-inset-right) + 1.25rem));gap:1.3rem;overflow:visible}
  .demo-hero,.demo-panel{width:min(100%,620px)}
  .demo-hero h1{font-size:clamp(3.35rem,14vw,5.6rem);line-height:.98;letter-spacing:-.042em;max-width:9ch}
}
@media(max-width:520px){
  .demo-page{padding-inline:1.05rem;gap:1.1rem}
  .demo-hero h1{font-size:clamp(3rem,15vw,4.65rem);line-height:1.01;letter-spacing:-.037em}
  .demo-grid{grid-template-columns:1fr}
  .demo-field{padding:.68rem}
  .demo-panel{border-radius:1.25rem;padding:.82rem}
  .demo-panel-head{display:grid;grid-template-columns:1fr}
  .demo-presets button{font-size:.86rem;padding-inline:.72rem}
}


/* V10.8: fließendes Lichtmodell statt harter Demo-Nacht-Overrides.
   Die Szene wird ausschließlich über CSS-Variablen aus app.js gesteuert. */
:root{--stars-opacity:0;--demo-panel-bg:rgba(255,255,255,.42);--demo-field-bg:rgba(255,255,255,.30);--demo-control-line:rgba(100,116,139,.32)}
body[data-period] .stars{opacity:var(--stars-opacity,0)!important}
body[data-demo="1"]{background:var(--sky-c)!important;}
body[data-demo="1"][data-period]::before{
  background:
    radial-gradient(circle at var(--orb-x) var(--orb-y), var(--orb-glow), transparent var(--light-beam-size)),
    radial-gradient(circle at var(--moon-x) var(--moon-y), rgba(147,197,253,calc(var(--moon-opacity) * .38)), transparent 30rem),
    radial-gradient(circle at 10% 14%, var(--glow-a), transparent 32rem),
    radial-gradient(circle at 90% 84%, var(--glow-b), transparent 34rem),
    linear-gradient(135deg,var(--sky-a),var(--sky-b) 48%,var(--sky-c))!important;
  filter:brightness(var(--bg-brightness)) saturate(var(--bg-saturation)) contrast(var(--scene-contrast))!important;
}
body[data-demo="1"][data-period]::after{
  opacity:.92!important;
  mix-blend-mode:soft-light!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,var(--wash-top)),rgba(255,255,255,var(--wash-mid)) 43%,transparent 82%),
    radial-gradient(ellipse at var(--orb-x) var(--orb-y),rgba(255,255,255,var(--light-beam)),transparent 45rem)!important;
}
body[data-demo="1"][data-period] .sun{display:block!important;opacity:var(--sun-opacity)!important}
body[data-demo="1"][data-period] .moon{display:grid!important;opacity:var(--moon-opacity)!important}
body[data-demo="1"] .demo-panel{
  background:var(--demo-panel-bg)!important;
  border-color:rgba(255,255,255,.32)!important;
}
body[data-demo="1"] .demo-field,
body[data-demo="1"] .demo-field select,
body[data-demo="1"] .demo-presets button{
  background:var(--demo-field-bg)!important;
  border-color:rgba(255,255,255,.24)!important;
}
body[data-demo="1"] .demo-field span,
body[data-demo="1"] .demo-status{color:var(--muted)!important}
body[data-demo="1"] .demo-status::before{content:"V10.8 · ";opacity:.72}
body[data-demo="1"] .demo-presets button.is-active{
  color:var(--sky-c)!important;
  background:var(--text)!important;
  border-color:rgba(255,255,255,.18)!important;
}
body[data-demo="1"] .rain-layer{opacity:var(--rain-opacity)!important}
body[data-demo="1"] .wind-lines{opacity:var(--wind-opacity)!important}
body[data-demo="1"] .dust-layer{opacity:var(--dust-opacity)!important}
body[data-demo="1"] .cloud{opacity:var(--cloud-opacity)!important}
body[data-demo="1"] .weather-scene::before{transition-duration:.2s!important}
body[data-demo="1"]::before,
body[data-demo="1"]::after,
body[data-demo="1"] .weather-scene,
body[data-demo="1"] .sun,
body[data-demo="1"] .moon,
body[data-demo="1"] .cloud,
body[data-demo="1"] .wind-lines,
body[data-demo="1"] .rain-layer,
body[data-demo="1"] .dust-layer{transition-duration:.2s!important}
body:not([data-demo="1"])::before,
body:not([data-demo="1"])::after,
body:not([data-demo="1"]) .weather-scene,
body:not([data-demo="1"]) .weather-scene::before,
body:not([data-demo="1"]) .sun,
body:not([data-demo="1"]) .moon,
body:not([data-demo="1"]) .cloud,
body:not([data-demo="1"]) .wind-lines,
body:not([data-demo="1"]) .rain-layer,
body:not([data-demo="1"]) .dust-layer{transition-duration:58s!important;transition-timing-function:linear!important}
/* Die Overlay-Mischung bleibt für Live und Demo gleich, damit der Übergang nicht an einem Schwellenwert springt. */
body[data-period]::after{mix-blend-mode:soft-light!important;opacity:.92!important}

/* V10.9: getrennte Sonnen-/Mond-Lichter + robuste Demo-Darstellung.
   Kein warmes Sonnen-Glow mehr in der Nacht. */
:root{
  --moon-glow:rgba(147,197,253,0);
  --sun-beam:.18;
  --moon-beam:0;
}
body::before{
  background:
    radial-gradient(circle at var(--orb-x) var(--orb-y), var(--orb-glow), transparent var(--light-beam-size)),
    radial-gradient(circle at var(--moon-x) var(--moon-y), var(--moon-glow), transparent 32rem),
    radial-gradient(circle at 10% 14%, var(--glow-a), transparent 32rem),
    radial-gradient(circle at 90% 84%, var(--glow-b), transparent 34rem),
    linear-gradient(135deg,var(--sky-a),var(--sky-b) 48%,var(--sky-c));
}
body::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,var(--wash-top)),rgba(255,255,255,var(--wash-mid)) 43%,transparent 82%),
    radial-gradient(ellipse at var(--orb-x) var(--orb-y),rgba(255,255,255,var(--sun-beam)),transparent 45rem),
    radial-gradient(ellipse at var(--moon-x) var(--moon-y),rgba(147,197,253,var(--moon-beam)),transparent 42rem);
}
body[data-demo="1"][data-period]::before{
  background:
    radial-gradient(circle at var(--orb-x) var(--orb-y), var(--orb-glow), transparent var(--light-beam-size)),
    radial-gradient(circle at var(--moon-x) var(--moon-y), var(--moon-glow), transparent 32rem),
    radial-gradient(circle at 10% 14%, var(--glow-a), transparent 32rem),
    radial-gradient(circle at 90% 84%, var(--glow-b), transparent 34rem),
    linear-gradient(135deg,var(--sky-a),var(--sky-b) 48%,var(--sky-c))!important;
}
body[data-demo="1"][data-period]::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,var(--wash-top)),rgba(255,255,255,var(--wash-mid)) 43%,transparent 82%),
    radial-gradient(ellipse at var(--orb-x) var(--orb-y),rgba(255,255,255,var(--sun-beam)),transparent 45rem),
    radial-gradient(ellipse at var(--moon-x) var(--moon-y),rgba(147,197,253,var(--moon-beam)),transparent 42rem)!important;
}
body[data-demo="1"] .demo-status::before{content:"V10.9 · "!important;opacity:.72}
body[data-demo="1"][data-period="night"] .demo-panel{box-shadow:0 24px 90px rgba(2,6,23,.28)!important}
body[data-demo="1"][data-period="night"] .demo-presets button.is-active{background:rgba(248,250,252,.88)!important;color:#0f172a!important}

/* V11.0 – kontinuierliche Canvas-Wetterengine und neu aufgebaute Demo-Oberfläche */
.weather-canvas{
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  opacity:1;
}
.has-weather-canvas .rain-layer,
body[data-weather="storm"] .weather-scene::after{display:none}

body[data-demo="1"]{
  --demo-panel-bg:rgba(255,255,255,.48);
  --demo-field-bg:rgba(255,255,255,.34);
  --demo-control-line:rgba(100,116,139,.28);
}
body[data-demo="1"]::before,
body[data-demo="1"]::after,
body[data-demo="1"] .weather-scene,
body[data-demo="1"] .weather-scene::before,
body[data-demo="1"] .sun,
body[data-demo="1"] .moon,
body[data-demo="1"] .cloud,
body[data-demo="1"] .wind-lines,
body[data-demo="1"] .dust-layer{
  transition-duration:.34s!important;
  transition-timing-function:linear!important;
}
body[data-demo="1"].demo-playing::before,
body[data-demo="1"].demo-playing::after,
body[data-demo="1"].demo-playing .weather-scene,
body[data-demo="1"].demo-playing .weather-scene::before,
body[data-demo="1"].demo-playing .sun,
body[data-demo="1"].demo-playing .moon,
body[data-demo="1"].demo-playing .cloud,
body[data-demo="1"].demo-playing .mist,
body[data-demo="1"].demo-playing .wind-lines,
body[data-demo="1"].demo-playing .dust-layer{transition-duration:.10s!important}

.demo-page{
  width:min(100%,1480px);
  grid-template-columns:minmax(0,590px) minmax(430px,520px);
  align-items:start;
  gap:clamp(2.5rem,7vw,7.5rem);
  padding-top:clamp(2rem,5vh,4.5rem);
  padding-bottom:clamp(2rem,5vh,4.5rem);
  overflow:visible;
}
.demo-hero{
  position:sticky;
  top:clamp(2rem,10vh,7rem);
  align-self:start;
  padding-top:clamp(1rem,5vh,4rem);
}
.demo-hero h1{
  max-width:9.5ch;
  font-size:clamp(4rem,6.4vw,6.7rem);
  letter-spacing:-.06em;
}
.demo-hero .sentence{font-size:clamp(1.18rem,1.55vw,1.42rem);line-height:1.38}
.demo-hero .detail{max-width:37rem;font-size:1rem;line-height:1.7}
.demo-live-card{
  width:min(100%,35rem);
  margin-top:1.8rem;
  padding:.9rem 1rem;
  display:flex;
  align-items:center;
  gap:.78rem;
  border:1px solid rgba(255,255,255,.34);
  border-radius:1.15rem;
  background:rgba(255,255,255,.20);
  box-shadow:0 18px 55px rgba(15,23,42,.055);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
}
.demo-live-dot{
  width:.7rem;
  height:.7rem;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 .34rem color-mix(in srgb,var(--accent) 18%,transparent);
  animation:demoLivePulse 2.2s ease-in-out infinite;
}
.demo-live-card div{display:grid;gap:.12rem;min-width:0}
.demo-live-card small{color:var(--muted);font-size:.67rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.demo-live-card [data-demo-status]{
  margin:0!important;
  color:var(--text)!important;
  font-size:.88rem!important;
  font-weight:760!important;
  letter-spacing:-.01em!important;
  opacity:.92!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.demo-live-card [data-demo-status]::before{content:none!important}

.demo-panel{
  width:100%;
  max-height:calc(100svh - clamp(2.5rem,8vh,6rem));
  overflow:auto;
  overscroll-behavior:contain;
  padding:1.15rem;
  border-radius:1.8rem;
  border:1px solid rgba(255,255,255,.42)!important;
  background:var(--demo-panel-bg)!important;
  box-shadow:0 30px 100px rgba(15,23,42,.12);
  scrollbar-width:thin;
  scrollbar-color:rgba(100,116,139,.3) transparent;
}
.demo-panel::-webkit-scrollbar{width:8px}
.demo-panel::-webkit-scrollbar-thumb{background:rgba(100,116,139,.28);border-radius:999px}
.demo-panel-head{
  margin:0;
  padding:.25rem .25rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.28);
}
.demo-panel-head>div{display:grid;gap:.18rem}
.demo-panel-kicker{color:var(--accent);font-size:.64rem;font-weight:850;letter-spacing:.15em;text-transform:uppercase}
.demo-panel-head strong{font-size:1.18rem;letter-spacing:-.035em}

.demo-control-section{padding:1.05rem .15rem 0}
.demo-control-section+.demo-control-section{margin-top:1rem;border-top:1px solid rgba(255,255,255,.26)}
.demo-section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.82rem}
.demo-section-head>div{display:flex;align-items:center;gap:.55rem}
.demo-section-head small{display:grid;place-items:center;width:1.42rem;height:1.42rem;border-radius:.45rem;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-size:.61rem;font-weight:900}
.demo-section-head h2{margin:0;font-size:.98rem;letter-spacing:-.025em}
.demo-section-hint{color:var(--muted);font-size:.69rem;font-weight:720}

.demo-play-button{
  min-height:2.25rem;
  padding:0 .78rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  background:rgba(255,255,255,.26);
  color:var(--text);
  font:inherit;
  font-size:.73rem;
  font-weight:800;
  cursor:pointer;
  transition:transform .2s var(--ease),background .2s var(--ease)!important;
}
.demo-play-button:hover{transform:translateY(-1px);background:rgba(255,255,255,.42)}
.demo-play-icon{width:0;height:0;border-top:.27rem solid transparent;border-bottom:.27rem solid transparent;border-left:.42rem solid currentColor;transition:all .2s var(--ease)}
.demo-play-button.is-playing .demo-play-icon{width:.42rem;height:.48rem;border:0;border-left:.13rem solid currentColor;border-right:.13rem solid currentColor}

.demo-time-section{
  padding:.95rem;
  margin-top:1rem;
  border:1px solid rgba(255,255,255,.30);
  border-radius:1.3rem;
  background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.13));
}
.demo-time-topline{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin:.35rem 0 .9rem}
.demo-time-readout{display:flex;align-items:baseline;gap:.62rem}
.demo-time-readout>span{font-size:clamp(2.5rem,5vw,3.45rem);line-height:.92;font-weight:850;letter-spacing:-.065em;font-variant-numeric:tabular-nums}
.demo-time-readout small{color:var(--muted);font-size:.72rem;font-weight:800}
.demo-clock-input{display:grid;gap:.32rem;justify-items:end}
.demo-clock-input span{color:var(--muted);font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.demo-clock-input input{
  min-height:2.45rem;
  width:7.3rem;
  padding:0 .7rem;
  border:1px solid rgba(255,255,255,.38);
  border-radius:.8rem;
  background:rgba(255,255,255,.30);
  color:var(--text);
  font:inherit;
  font-size:.9rem;
  font-weight:800;
  color-scheme:inherit;
  outline:none;
}
.demo-clock-input input:focus{border-color:color-mix(in srgb,var(--accent) 55%,white);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--accent) 12%,transparent)}
.demo-time-scale{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:.45rem;margin-top:.46rem;color:var(--muted);font-size:.57rem;font-weight:720}
.demo-time-scale span:nth-child(2),.demo-time-scale span:nth-child(3){text-align:center}
.demo-time-scale span:last-child{text-align:right}

.demo-presets{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.45rem;
  margin:0;
}
.demo-presets button{
  min-height:3.6rem;
  padding:.42rem .3rem;
  display:grid;
  place-items:center;
  align-content:center;
  gap:.18rem;
  border-radius:.9rem;
  border:1px solid rgba(255,255,255,.28)!important;
  background:rgba(255,255,255,.22)!important;
  color:var(--text)!important;
  font-size:.68rem;
  font-weight:800;
  line-height:1.1;
  transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)!important;
}
.demo-presets button span{font-size:1.05rem;filter:saturate(.9)}
.demo-presets button:hover{transform:translateY(-2px);background:rgba(255,255,255,.38)!important}
.demo-presets button.is-active{
  transform:translateY(-1px);
  background:var(--text)!important;
  color:var(--sky-c)!important;
  box-shadow:0 10px 28px rgba(15,23,42,.14);
}
body[data-demo="1"][data-period="night"] .demo-presets button.is-active{background:rgba(248,250,252,.92)!important;color:#0f172a!important}

.demo-select-field{display:grid;gap:.42rem;margin-bottom:.8rem}
.demo-select-field>span,.demo-group-label>span{color:var(--muted);font-size:.64rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
.demo-select-field select{
  width:100%;
  min-height:2.75rem;
  padding:0 2.4rem 0 .85rem;
  appearance:none;
  border:1px solid rgba(255,255,255,.34)!important;
  border-radius:.9rem;
  background-color:rgba(255,255,255,.26)!important;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) 51%,calc(100% - 11px) 51%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  color:var(--text);
  font:inherit;
  font-size:.86rem;
  font-weight:780;
  outline:none;
}
.demo-group-label{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:.95rem .1rem .52rem}
.demo-group-label small{color:var(--muted);font-size:.61rem;font-weight:650;text-align:right}
.demo-grid{gap:.55rem}
.demo-field{
  gap:.55rem;
  padding:.72rem .75rem;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:.92rem;
  background:rgba(255,255,255,.20)!important;
}
.demo-field>span{font-size:.68rem;letter-spacing:0;text-transform:none}
.demo-field>span i{font-style:normal;font-weight:760}
.demo-field>span b{font-variant-numeric:tabular-nums;font-size:.72rem}
.demo-field-rain{background:linear-gradient(145deg,rgba(186,230,253,.16),rgba(255,255,255,.17))!important}
.demo-field-snow{background:linear-gradient(145deg,rgba(224,242,254,.24),rgba(255,255,255,.18))!important}

.demo-field input[type="range"],
.demo-time-range{
  --fill:50%;
  width:100%;
  height:1.15rem;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
  touch-action:none;
}
.demo-field input[type="range"]::-webkit-slider-runnable-track,
.demo-time-range::-webkit-slider-runnable-track{
  height:.28rem;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent) 0 var(--fill),var(--demo-control-line) var(--fill) 100%);
}
.demo-field input[type="range"]::-moz-range-track,
.demo-time-range::-moz-range-track{
  height:.28rem;
  border:0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent) 0 var(--fill),var(--demo-control-line) var(--fill) 100%);
}
.demo-field input[type="range"]::-webkit-slider-thumb,
.demo-time-range::-webkit-slider-thumb{
  width:1rem;
  height:1rem;
  margin-top:-.36rem;
  appearance:none;
  -webkit-appearance:none;
  border:3px solid rgba(255,255,255,.92);
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 2px 10px rgba(15,23,42,.22);
}
.demo-field input[type="range"]::-moz-range-thumb,
.demo-time-range::-moz-range-thumb{
  width:.72rem;
  height:.72rem;
  border:3px solid rgba(255,255,255,.92);
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 2px 10px rgba(15,23,42,.22);
}
.demo-time-range::-webkit-slider-runnable-track,.demo-time-range::-moz-range-track{height:.36rem}
.demo-time-range::-webkit-slider-thumb{width:1.15rem;height:1.15rem;margin-top:-.4rem}
.demo-time-range::-moz-range-thumb{width:.82rem;height:.82rem}
.demo-field input[type="range"]:focus-visible::-webkit-slider-thumb,
.demo-time-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 .28rem color-mix(in srgb,var(--accent) 20%,transparent),0 2px 10px rgba(15,23,42,.22)}

.demo-advanced{margin-top:.85rem;border-top:1px solid rgba(255,255,255,.24);padding-top:.75rem}
.demo-advanced summary{color:var(--muted);font-size:.7rem;font-weight:780;cursor:pointer;user-select:none}
.demo-advanced[open] summary{margin-bottom:.65rem}
.demo-advanced .demo-field.wide{margin:0}

@keyframes demoLivePulse{0%,100%{transform:scale(.9);opacity:.72}50%{transform:scale(1.08);opacity:1}}

@media(max-width:1080px){
  .demo-page{grid-template-columns:minmax(0,540px) minmax(410px,500px);gap:2.2rem;padding-inline:1.5rem}
  .demo-hero h1{font-size:clamp(3.6rem,6.2vw,5.6rem)}
}
@media(max-width:980px){
  .demo-page{display:grid;grid-template-columns:1fr;gap:1.35rem;padding-top:2rem;padding-bottom:2rem}
  .demo-hero{position:relative;top:auto;padding-top:0;width:min(100%,680px)}
  .demo-hero h1{max-width:11ch}
  .demo-panel{width:min(100%,680px);max-height:none;overflow:visible}
}
@media(max-width:620px){
  .demo-page{padding-inline:.85rem}
  .demo-hero h1{font-size:clamp(3rem,14vw,4.5rem);letter-spacing:-.048em}
  .demo-live-card [data-demo-status]{white-space:normal}
  .demo-panel{padding:.85rem;border-radius:1.35rem}
  .demo-panel-head{align-items:flex-start}
  .demo-time-section{padding:.78rem}
  .demo-section-head{align-items:flex-start}
  .demo-time-section .demo-section-head{display:grid}
  .demo-play-button{width:100%}
  .demo-time-topline{align-items:flex-start}
  .demo-time-readout{display:grid;gap:.15rem}
  .demo-time-readout>span{font-size:2.7rem}
  .demo-time-scale{font-size:.5rem}
  .demo-presets{grid-template-columns:repeat(3,minmax(0,1fr))}
  .demo-grid{grid-template-columns:1fr}
  .demo-group-label{align-items:flex-end}
}
@media(max-width:390px){
  .demo-time-topline{display:grid}
  .demo-clock-input{justify-items:start}
  .demo-clock-input input{width:100%}
  .demo-presets{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .weather-canvas{opacity:.72}
  .demo-live-dot{animation:none}
}


/* V11.1 – stabile Kontraste, editierbarer Sonnenlauf und natürliche Partikel */
body[data-demo="1"]{
  --demo-panel-bg:rgba(7,13,24,.955);
  --demo-field-bg:rgba(255,255,255,.065);
  --demo-control-line:rgba(148,163,184,.34);
  --demo-text:#f8fafc;
  --demo-muted:#a9b8cc;
  --demo-accent:#7dd3fc;
}
body[data-demo="1"] .demo-live-card{
  border-color:rgba(125,211,252,.24);
  background:rgba(7,13,24,.90);
  box-shadow:0 22px 70px rgba(2,6,23,.28);
  backdrop-filter:blur(22px) saturate(1.08);
  -webkit-backdrop-filter:blur(22px) saturate(1.08);
}
body[data-demo="1"] .demo-live-card small{color:var(--demo-muted)}
body[data-demo="1"] .demo-live-card [data-demo-status]{color:var(--demo-text)!important}
body[data-demo="1"] .demo-live-dot{background:var(--demo-accent);box-shadow:0 0 0 .34rem rgba(125,211,252,.15)}
body[data-demo="1"] .demo-panel{
  color:var(--demo-text);
  border-color:rgba(148,163,184,.18)!important;
  background:linear-gradient(155deg,rgba(12,21,37,.98),rgba(6,12,23,.96))!important;
  box-shadow:0 36px 110px rgba(2,6,23,.40),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(30px) saturate(1.05);
  -webkit-backdrop-filter:blur(30px) saturate(1.05);
}
body[data-demo="1"] .demo-panel-head{border-bottom-color:rgba(148,163,184,.16)}
.demo-panel-badge{
  display:inline-flex;
  align-items:center;
  min-height:2rem;
  padding:0 .72rem;
  border:1px solid rgba(125,211,252,.20);
  border-radius:999px;
  background:rgba(14,116,144,.13);
  color:#bae6fd;
  font-size:.66rem;
  font-weight:820;
  letter-spacing:.04em;
}
body[data-demo="1"] .demo-panel-kicker,
body[data-demo="1"] .demo-section-head small{color:var(--demo-accent)}
body[data-demo="1"] .demo-panel-head strong,
body[data-demo="1"] .demo-section-head h2,
body[data-demo="1"] .demo-time-readout>span,
body[data-demo="1"] .demo-field>span b{color:var(--demo-text)}
body[data-demo="1"] .demo-section-hint,
body[data-demo="1"] .demo-time-readout small,
body[data-demo="1"] .demo-clock-input span,
body[data-demo="1"] .demo-time-scale,
body[data-demo="1"] .demo-select-field>span,
body[data-demo="1"] .demo-group-label>span,
body[data-demo="1"] .demo-group-label small,
body[data-demo="1"] .demo-field>span{color:var(--demo-muted)!important}
body[data-demo="1"] .demo-control-section+.demo-control-section{border-top-color:rgba(148,163,184,.14)}
body[data-demo="1"] .demo-time-section{
  border-color:rgba(125,211,252,.17);
  background:linear-gradient(145deg,rgba(30,58,88,.34),rgba(13,24,41,.70));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.demo-solar-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin:0 0 .85rem}
.demo-solar-grid .demo-clock-input{justify-items:stretch}
.demo-solar-grid .demo-clock-input input{width:100%}
body[data-demo="1"] .demo-clock-input input,
body[data-demo="1"] .demo-select-field select{
  border-color:rgba(148,163,184,.22)!important;
  background-color:#111c2f!important;
  color:var(--demo-text)!important;
  color-scheme:dark;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
body[data-demo="1"] .demo-clock-input input:focus,
body[data-demo="1"] .demo-select-field select:focus{border-color:rgba(125,211,252,.62)!important;box-shadow:0 0 0 .2rem rgba(56,189,248,.13)}
body[data-demo="1"] .demo-select-field select option{background:#0f172a;color:#f8fafc}
body[data-demo="1"] .demo-field,
body[data-demo="1"] .demo-presets button{
  border-color:rgba(148,163,184,.14)!important;
  background:rgba(255,255,255,.055)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
body[data-demo="1"] .demo-field-rain{background:linear-gradient(145deg,rgba(14,116,144,.16),rgba(255,255,255,.045))!important}
body[data-demo="1"] .demo-field-snow{background:linear-gradient(145deg,rgba(59,130,246,.12),rgba(255,255,255,.045))!important}
body[data-demo="1"] .demo-presets button{color:var(--demo-text)!important}
body[data-demo="1"] .demo-presets button:hover{background:rgba(125,211,252,.105)!important;border-color:rgba(125,211,252,.28)!important}
body[data-demo="1"] .demo-presets button.is-active,
body[data-demo="1"][data-period="night"] .demo-presets button.is-active{
  background:linear-gradient(135deg,#38bdf8,#2563eb)!important;
  color:#f8fafc!important;
  border-color:rgba(186,230,253,.50)!important;
  box-shadow:0 12px 30px rgba(37,99,235,.28);
}
body[data-demo="1"] .demo-play-button{
  border-color:rgba(125,211,252,.22);
  background:rgba(56,189,248,.10);
  color:#dff6ff;
}
body[data-demo="1"] .demo-play-button:hover{background:rgba(56,189,248,.18)}
body[data-demo="1"] .demo-field input[type="range"]::-webkit-slider-runnable-track,
body[data-demo="1"] .demo-time-range::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--demo-accent) 0 var(--fill),var(--demo-control-line) var(--fill) 100%)}
body[data-demo="1"] .demo-field input[type="range"]::-moz-range-track,
body[data-demo="1"] .demo-time-range::-moz-range-track{background:linear-gradient(90deg,var(--demo-accent) 0 var(--fill),var(--demo-control-line) var(--fill) 100%)}
body[data-demo="1"] .demo-field input[type="range"]::-webkit-slider-thumb,
body[data-demo="1"] .demo-time-range::-webkit-slider-thumb,
body[data-demo="1"] .demo-field input[type="range"]::-moz-range-thumb,
body[data-demo="1"] .demo-time-range::-moz-range-thumb{background:var(--demo-accent);border-color:#e0f2fe}

/* Der Pflegebereich bleibt unabhängig vom Wetter lesbar. */
.fill-page{color:#f8fafc}
.fill-page .hero-panel,
.fill-page .list-card{
  color:#f8fafc;
  border-color:rgba(148,163,184,.18);
  background:linear-gradient(155deg,rgba(12,21,37,.97),rgba(7,13,24,.95));
  box-shadow:0 28px 90px rgba(2,6,23,.34);
  backdrop-filter:blur(26px) saturate(1.05);
  -webkit-backdrop-filter:blur(26px) saturate(1.05);
}
.fill-page .eyebrow{color:#7dd3fc}
.fill-page .hero-panel p,
.fill-page .list-card p,
.fill-page .stack-form label,
.fill-page .manage-row span{color:#a9b8cc}
.fill-page .stack-form input,
.fill-page .stack-form textarea,
.fill-page .stack-form select{
  border-color:rgba(148,163,184,.20);
  background:#111c2f;
  color:#f8fafc;
  color-scheme:dark;
}
.fill-page .stack-form input:focus,
.fill-page .stack-form textarea:focus,
.fill-page .stack-form select:focus{border-color:rgba(125,211,252,.62);box-shadow:0 0 0 .2rem rgba(56,189,248,.12)}
.fill-page .ghost-button{border-color:rgba(148,163,184,.20);background:#162238;color:#f8fafc}
.fill-page .primary-button{background:#38bdf8;color:#082f49}
.fill-page .manage-row{border-top-color:rgba(148,163,184,.14)}

@media(max-width:620px){
  .demo-solar-grid{grid-template-columns:1fr}
  .demo-panel-badge{align-self:flex-start}
}
@media(prefers-reduced-motion:reduce){.stars i{animation:none!important}}

/* V12.0 – gekoppelte Atmosphären-, Licht- und Tiefen-Engine */
:root{
  --sun-diffuse:.18;
  --cloud-far-opacity:.10;
  --cloud-mid-opacity:.14;
  --cloud-near-opacity:.12;
  --cloud-light:rgba(255,255,255,.82);
  --cloud-mid-color:rgba(218,228,238,.72);
  --cloud-shadow:rgba(148,163,184,.50);
  --cloud-edge-warmth:0;
  --cloud-far-from-x:-7vw;
  --cloud-far-to-x:7vw;
  --cloud-far-from-y:0vh;
  --cloud-far-to-y:0vh;
  --cloud-mid-from-x:-13vw;
  --cloud-mid-to-x:13vw;
  --cloud-mid-from-y:0vh;
  --cloud-mid-to-y:0vh;
  --cloud-near-from-x:-20vw;
  --cloud-near-to-x:20vw;
  --cloud-near-from-y:0vh;
  --cloud-near-to-y:0vh;
  --cloud-far-speed:180s;
  --cloud-mid-speed:112s;
  --cloud-near-speed:72s;
  --scene-haze-opacity:0;
  --scene-softness:0px;
  --horizon-opacity:.05;
  --snow-ground-opacity:0;
  --content-veil-opacity:.035;
  --content-veil-dark:0;
  --transition-sky:58s;
  --transition-light:46s;
  --transition-cloud:25s;
  --transition-visibility:32s;
}
body[data-demo="1"]{
  --transition-sky:.34s;
  --transition-light:.30s;
  --transition-cloud:.42s;
  --transition-visibility:.48s;
}
body::before{
  transition:background var(--transition-sky) linear,filter var(--transition-visibility) linear!important;
}
body::after{
  transition:background var(--transition-light) linear,opacity var(--transition-light) linear!important;
}
.weather-scene{
  filter:saturate(var(--bg-saturation));
  transition:filter var(--transition-visibility) linear!important;
}
.weather-scene::before{
  transition:background var(--transition-light) linear,opacity var(--transition-light) linear!important;
}

.stars{z-index:0;transition:opacity 4s var(--ease)!important}
.stars i{
  background:var(--star-hue,rgba(255,255,255,.96));
  box-shadow:0 0 6px rgba(191,219,254,.48);
}
.sky-depth{
  position:absolute;
  inset:-6%;
  z-index:1;
  pointer-events:none;
  opacity:var(--scene-haze-opacity);
  background:
    linear-gradient(180deg,rgba(224,232,240,.12),rgba(226,232,240,.34) 58%,rgba(203,213,225,.54)),
    radial-gradient(ellipse at var(--orb-x) var(--orb-y),rgba(255,255,255,.20),transparent 48%);
  filter:blur(calc(8px + var(--scene-softness)));
  transition:opacity var(--transition-visibility) linear,filter var(--transition-visibility) linear;
}

.sun,.moon{z-index:3}
.sun{
  opacity:1!important;
  background:none!important;
  box-shadow:none!important;
  animation:none!important;
  overflow:visible;
}
.sun::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  opacity:var(--sun-opacity);
  background:radial-gradient(circle at 48% 48%,#fffef0 0 20%,var(--sun-core) 22% 43%,rgba(255,201,76,.34) 44% 61%,transparent 70%);
  box-shadow:0 0 4rem var(--sun-halo),0 0 9rem rgba(251,191,36,.14);
  filter:none;
  transition:opacity var(--transition-light) linear,background var(--transition-light) linear,box-shadow var(--transition-light) linear;
  animation:sunBreath 5.5s ease-in-out infinite alternate;
}
.sun::after{
  content:"";
  position:absolute;
  inset:-68%;
  border-radius:50%;
  opacity:var(--sun-diffuse);
  background:radial-gradient(circle,rgba(255,248,210,.42),rgba(255,221,145,.16) 38%,transparent 72%);
  filter:blur(15px);
  transition:opacity var(--transition-light) linear,filter var(--transition-visibility) linear;
}
body[data-demo="1"][data-period] .sun{opacity:1!important}

.moon{
  width:clamp(6.6rem,10.5vw,10.2rem);
  height:clamp(6.6rem,10.5vw,10.2rem);
  opacity:var(--moon-opacity);
  background:none!important;
  box-shadow:0 0 3.2rem var(--moon-glow),0 0 8rem rgba(59,130,246,.09)!important;
  overflow:visible!important;
  display:block!important;
  transition:left var(--transition-light) linear,top var(--transition-light) linear,opacity var(--transition-light) linear,box-shadow var(--transition-light) linear!important;
}
.moon::before,.moon::after{display:none!important}
.moon-canvas{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  filter:drop-shadow(.2rem .55rem .7rem rgba(15,23,42,.24));
}
body[data-demo="1"][data-period] .moon{display:block!important;opacity:var(--moon-opacity)!important}

.cloud-field{
  position:absolute;
  inset:-8%;
  pointer-events:none;
  overflow:hidden;
  transition:opacity var(--transition-cloud) linear,filter var(--transition-visibility) linear;
  will-change:opacity;
}
.cloud-field-far{z-index:2;opacity:var(--cloud-far-opacity);filter:blur(calc(.8px + var(--scene-softness)))}
.cloud-field-mid{z-index:4;opacity:var(--cloud-mid-opacity);filter:blur(calc(.35px + var(--scene-softness)))}
.cloud-field-near{z-index:5;opacity:var(--cloud-near-opacity);filter:blur(calc(.15px + var(--scene-softness)))}
.cloudlet{
  position:absolute;
  left:var(--cloud-left);
  top:var(--cloud-top);
  width:max(12rem,var(--cloud-width));
  aspect-ratio:2.65/1;
  opacity:var(--cloud-alpha);
  transform-origin:center;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 15% 68%,var(--cloud-mid-color) 0 24%,transparent 25%),
    radial-gradient(ellipse at 34% 55%,var(--cloud-light) 0 31%,transparent 32%),
    radial-gradient(ellipse at var(--cloud-shape-x) 42%,var(--cloud-light) 0 35%,transparent 36%),
    radial-gradient(ellipse at 76% 61%,var(--cloud-mid-color) 0 29%,transparent 30%),
    radial-gradient(ellipse at 53% 76%,var(--cloud-shadow) 0 42%,transparent 44%);
  filter:drop-shadow(0 .7rem 1.35rem rgba(71,85,105,.12));
  animation-name:cloudParallaxFar;
  animation-duration:var(--cloud-far-speed);
  animation-timing-function:ease-in-out;
  animation-delay:var(--cloud-delay);
  animation-iteration-count:infinite;
  animation-direction:alternate;
  will-change:transform;
}
.cloudlet::after{
  content:"";
  position:absolute;
  inset:12% 5% 0;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,216,168,var(--cloud-edge-warmth)),transparent 38%,var(--cloud-shadow) 92%);
  mix-blend-mode:soft-light;
  opacity:.62;
}
.cloud-field-far .cloudlet{
  aspect-ratio:3.4/1;
  filter:blur(2.8px);
  animation-name:cloudParallaxFar;
  animation-duration:var(--cloud-far-speed);
}
.cloud-field-mid .cloudlet{
  animation-name:cloudParallaxMid;
  animation-duration:var(--cloud-mid-speed);
}
.cloud-field-near .cloudlet{
  animation-name:cloudParallaxNear;
  animation-duration:var(--cloud-near-speed);
  filter:drop-shadow(0 1rem 1.8rem rgba(51,65,85,.16));
}
@keyframes cloudParallaxFar{
  from{transform:translate3d(var(--cloud-far-from-x),var(--cloud-far-from-y),0) scale(var(--cloud-scale))}
  to{transform:translate3d(var(--cloud-far-to-x),var(--cloud-far-to-y),0) scale(var(--cloud-scale))}
}
@keyframes cloudParallaxMid{
  from{transform:translate3d(var(--cloud-mid-from-x),var(--cloud-mid-from-y),0) scale(var(--cloud-scale))}
  to{transform:translate3d(var(--cloud-mid-to-x),var(--cloud-mid-to-y),0) scale(var(--cloud-scale))}
}
@keyframes cloudParallaxNear{
  from{transform:translate3d(var(--cloud-near-from-x),var(--cloud-near-from-y),0) scale(var(--cloud-scale))}
  to{transform:translate3d(var(--cloud-near-to-x),var(--cloud-near-to-y),0) scale(var(--cloud-scale))}
}

.horizon{
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:-2%;
  z-index:1;
  height:29vh;
  opacity:var(--horizon-opacity);
  color:color-mix(in srgb,var(--text) 72%,var(--sky-c));
  filter:blur(calc(.35px + var(--scene-softness)));
  transition:opacity var(--transition-visibility) linear,color var(--transition-sky) linear,filter var(--transition-visibility) linear;
}
.horizon::before{
  content:"";
  position:absolute;
  inset:4% 0 0;
  background:
    radial-gradient(ellipse at 9% 100%,currentColor 0 22%,transparent 23%),
    radial-gradient(ellipse at 36% 112%,currentColor 0 31%,transparent 32%),
    radial-gradient(ellipse at 67% 108%,currentColor 0 27%,transparent 28%),
    radial-gradient(ellipse at 94% 105%,currentColor 0 24%,transparent 25%);
}
.horizon::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:35%;
  background:linear-gradient(180deg,transparent,currentColor);
  opacity:.55;
}
.horizon i{
  position:absolute;
  inset:auto 0 15% 0;
  height:34%;
  background:currentColor;
  opacity:.36;
  clip-path:polygon(0 100%,0 86%,2% 80%,3% 90%,5% 72%,6% 91%,8% 78%,10% 92%,13% 68%,15% 92%,18% 79%,20% 90%,23% 73%,25% 92%,28% 82%,31% 91%,34% 70%,36% 91%,39% 77%,42% 93%,45% 69%,48% 92%,51% 80%,54% 91%,57% 72%,60% 93%,64% 76%,67% 91%,70% 67%,73% 92%,76% 78%,79% 91%,82% 70%,85% 93%,88% 77%,91% 91%,94% 68%,97% 91%,100% 80%,100% 100%);
}
.snow-ground{
  position:absolute;
  z-index:6;
  left:-8%;
  right:-8%;
  bottom:-5%;
  height:18vh;
  opacity:var(--snow-ground-opacity);
  background:linear-gradient(180deg,transparent 0,rgba(244,249,255,.45) 48%,rgba(248,252,255,.92) 100%);
  filter:blur(7px);
  transition:opacity 30s linear;
}

.weather-canvas{z-index:7}
.wind-lines{z-index:8}
.dust-layer{z-index:8}

body:not([data-demo="1"]) .minimal-hero{position:relative;isolation:isolate}
body:not([data-demo="1"]) .minimal-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-3.5rem -4.5rem;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 42% 48%,rgba(255,255,255,var(--content-veil-opacity)),transparent 70%),
    radial-gradient(ellipse at 42% 48%,rgba(15,23,42,var(--content-veil-dark)),transparent 72%);
  filter:blur(22px);
  transition:background var(--transition-visibility) linear,opacity var(--transition-visibility) linear;
}

body[data-weather="fog"] .cloud-field-far,
body[data-weather="fog"] .horizon{filter:blur(calc(2.4px + var(--scene-softness)))}
body[data-weather="storm"] .cloud-field-near .cloudlet{filter:drop-shadow(0 1.2rem 2.2rem rgba(15,23,42,.30))}
body[data-light-phase="golden-hour"] .cloudlet::after{opacity:.86}
body[data-light-phase="blue-hour"] .sky-depth{background:linear-gradient(180deg,rgba(160,184,218,.10),rgba(102,126,170,.22) 58%,rgba(70,87,125,.30))}
body[data-period="night"] .horizon{opacity:var(--horizon-opacity)}

body[data-scene-quality="low"] .cloudlet{filter:blur(1.8px)}
body[data-scene-quality="low"] .cloud-field-far .cloudlet:nth-child(n+5),
body[data-scene-quality="low"] .cloud-field-mid .cloudlet:nth-child(n+5),
body[data-scene-quality="low"] .cloud-field-near .cloudlet:nth-child(n+4){display:none}

@media(max-width:620px){
  .moon{width:clamp(5.8rem,24vw,8.2rem);height:clamp(5.8rem,24vw,8.2rem)}
  .cloud-field{inset:-10% -18%}
  .cloudlet{width:max(14rem,var(--cloud-width))}
  .horizon{height:24vh}
  body:not([data-demo="1"]) .minimal-hero::before{inset:-2.4rem -2.2rem}
}
@media(prefers-reduced-motion:reduce){
  .cloudlet,.sun::before,.moon{animation:none!important}
  .cloud-field{transform:none!important}
  .stars i{animation:none!important}
  .snow-ground{transition:none}
}

body[data-demo="1"] .demo-status::before{content:"V12.0 · "!important;opacity:.72}