/* Selbsttest Runde 2: Inszenierung „Vom Bildschirm zur Sonne“.
   Nur Gestaltung. Die Logik des Tests liegt unverändert in scorecard.html.
   Grundregeln: Ohne JavaScript und bei „Bewegung reduzieren“ bleibt alles lesbar und bedienbar.
   .sfx         = selbsttest-fx.js läuft (Sonnenbogen, Ergebnis-Sonne, statisch auch bei reduzierter Bewegung)
   .sfx-motion  = zusätzlich Bewegung erlaubt und GSAP geladen
   Farben nur aus CI v3 Burgweiss, kein Blau. */

:root{--sx-night:#100A03;--sx-dusk:#3B2A1E;--sx-amber-deep:#9C6E2C;--sx-card:#FFFCF5;--sx-opt:#FBF5EC;--sx-line:#EADFCD;--sx-p:0}

/* ---------- Einstieg: Nacht zu Tag ---------- */
.sx-hero{position:relative;overflow:hidden;isolation:isolate;margin:-.75rem 0 1.25rem;padding:1.75rem 1.25rem 8.75rem;border-radius:1.75rem;background:var(--sx-night);color:#FFFCF5;box-shadow:0 24px 48px -20px rgba(16,10,3,.55)}
.sx-hero > .pill,.sx-hero > h1,.sx-hero > .lead{position:relative;z-index:2}
.sx-hero .pill{background:rgba(255,252,245,.06);border-color:rgba(231,219,200,.24);color:#E6A340;letter-spacing:.1em;white-space:nowrap;margin-bottom:1.25rem}
.sx-hero .pill::before{background:#E6A340;box-shadow:0 0 10px 2px rgba(230,163,64,.55)}
.start .sx-hero h1{color:#FFFCF5}
.start .sx-hero h1 em{color:#E6A340}
.sx-hero .lead{color:#E7DBC8;margin-bottom:0;font-size:1rem}
.sx-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.sx-sky span{position:absolute;display:block}
.sx-dawn{inset:0;background:linear-gradient(to top,#E6A340 7%,#C08A3E 13%,#9C6E2C 19%,#3B2A1E 33%,rgba(16,10,3,0) 56%)}
.sx-vignette{inset:0;background:radial-gradient(120% 70% at 50% 0%,rgba(16,10,3,0) 40%,rgba(16,10,3,.55) 100%)}
.sx-stars{inset:0 0 45% 0;opacity:.3;background-image:radial-gradient(1.6px 1.6px at 9% 22%,#E6A340 50%,transparent 51%),radial-gradient(1.4px 1.4px at 22% 64%,#E6A340 50%,transparent 51%),radial-gradient(1.8px 1.8px at 37% 12%,#E6A340 50%,transparent 51%),radial-gradient(1.3px 1.3px at 61% 30%,#E6A340 50%,transparent 51%),radial-gradient(1.7px 1.7px at 78% 16%,#E6A340 50%,transparent 51%),radial-gradient(1.4px 1.4px at 90% 52%,#E6A340 50%,transparent 51%),radial-gradient(1.2px 1.2px at 52% 74%,#E6A340 50%,transparent 51%)}
.sx-stars--night{opacity:0;background-image:radial-gradient(1.6px 1.6px at 9% 22%,#FFFCF5 50%,transparent 51%),radial-gradient(1.4px 1.4px at 22% 64%,#FFFCF5 50%,transparent 51%),radial-gradient(1.8px 1.8px at 37% 12%,#FFFCF5 50%,transparent 51%),radial-gradient(1.3px 1.3px at 61% 30%,#FFFCF5 50%,transparent 51%),radial-gradient(1.7px 1.7px at 78% 16%,#FFFCF5 50%,transparent 51%),radial-gradient(1.4px 1.4px at 90% 52%,#FFFCF5 50%,transparent 51%),radial-gradient(1.2px 1.2px at 52% 74%,#FFFCF5 50%,transparent 51%)}
.sx-rise{left:0;right:0;top:0;bottom:2.75rem;overflow:hidden}
.sx-sun{left:50%;bottom:0;width:7.5rem;height:7.5rem;margin-left:-3.75rem;border-radius:50%;background:radial-gradient(circle at 50% 42%,#FFFCF5 0%,#F8EEE1 16%,#E6A340 52%,#C08A3E 100%);box-shadow:0 0 50px 16px rgba(230,163,64,.42),0 0 140px 60px rgba(230,163,64,.2);transform:translateY(38%)}
.sx-ground{left:0;right:0;bottom:0;height:2.75rem;background:linear-gradient(to bottom,#2A1D12,var(--sx-night));box-shadow:0 -1px 0 rgba(230,163,64,.55),0 -10px 28px -6px rgba(230,163,64,.35)}
.sx-phone{left:50%;bottom:2.75rem;width:2.5rem;height:4.4rem;margin-left:-1.25rem;border-radius:.6rem;background:#1C140C;border:2px solid #3B2A1E;opacity:0;transform-origin:50% 100%}
.sx-phone i{position:absolute;inset:.25rem;border-radius:.38rem;background:linear-gradient(160deg,#FFFCF5 0%,#F8EEE1 60%,#E7DBC8 100%);box-shadow:0 0 26px 8px rgba(255,252,245,.3),0 0 90px 34px rgba(255,252,245,.12)}
.start #btnStart + .checks{margin-top:1.5rem}
.start #btnStart{min-height:3.75rem;font-size:1.125rem;background:linear-gradient(180deg,#E6A340,#C08A3E);box-shadow:0 16px 32px -10px rgba(192,138,62,.6),inset 0 1px 0 rgba(255,252,245,.45);position:relative;overflow:hidden}
.start #btnStart::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(90deg,rgba(255,252,245,0),rgba(255,252,245,.55),rgba(255,252,245,0));transform:skewX(-20deg) translateX(-100%);opacity:0;pointer-events:none}

@media (prefers-reduced-motion:no-preference){
  .sx-phone{animation:sxPhone 2.5s .1s both}
  .sx-phone i{animation:sxScreen 2.5s .1s both}
  .sx-stars--night{animation:sxNightStars 2.6s .1s both}
  .sx-stars{animation:sxDayStars 2.4s 1.2s ease both}
  .sx-dawn{animation:sxDawn 2.6s 1.05s ease both}
  .sx-sun{animation:sxSun 2.6s 1.05s cubic-bezier(.16,.75,.24,1) both,sxHalo 6s 3.8s ease-in-out infinite}
  .sx-ground{animation:sxGround 2.6s 1.05s ease both}
  .start #btnStart::after{animation:sxShine 1.1s 3.4s ease-out both}
}
@keyframes sxPhone{
  0%{opacity:1;transform:none}
  5%{transform:translateX(-2px) rotate(-5deg)}10%{transform:translateX(2px) rotate(5deg)}15%{transform:translateX(-2px) rotate(-4deg)}20%{transform:translateX(2px) rotate(3deg)}25%{transform:none}
  33%{transform:translateX(-2px) rotate(-4deg)}38%{transform:translateX(2px) rotate(4deg)}43%{transform:none}
  58%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(1.4rem) scale(.86)}
}
@keyframes sxScreen{0%,48%{opacity:1}64%,100%{opacity:0}}
@keyframes sxNightStars{0%,40%{opacity:.9}100%{opacity:0}}
@keyframes sxDayStars{from{opacity:0}}
@keyframes sxDawn{from{opacity:0}}
@keyframes sxSun{from{transform:translateY(112%)}}
@keyframes sxGround{from{box-shadow:0 -1px 0 rgba(230,163,64,0),0 -10px 28px -6px rgba(230,163,64,0)}}
@keyframes sxHalo{0%,100%{box-shadow:0 0 50px 16px rgba(230,163,64,.42),0 0 140px 60px rgba(230,163,64,.2)}50%{box-shadow:0 0 60px 22px rgba(230,163,64,.5),0 0 170px 70px rgba(230,163,64,.24)}}
@keyframes sxShine{0%{opacity:1;transform:skewX(-20deg) translateX(0)}100%{opacity:1;transform:skewX(-20deg) translateX(560%)}}

/* ---------- Karten ---------- */
.sx-card{position:relative;background:var(--sx-card);border:1px solid var(--sand);border-radius:1.5rem;padding:1.5rem 1.125rem 1.375rem;box-shadow:0 22px 44px -18px rgba(38,34,28,.22),0 3px 10px rgba(38,34,28,.04)}
/* Stapel der noch offenen Karten, als Schatten, damit er auch während der Flugbewegung hinter der Karte bleibt */
#questionScreen.sx-card{padding-bottom:0;box-shadow:0 9px 0 -5px #F3E8D7,0 9px 0 -4px var(--sand),0 18px 0 -10px #EEE1CC,0 18px 0 -9px #E3D3BC,0 30px 44px -18px rgba(38,34,28,.22)}
[data-sx-rest="1"] #questionScreen.sx-card{box-shadow:0 9px 0 -5px #F3E8D7,0 9px 0 -4px var(--sand),0 26px 40px -18px rgba(38,34,28,.22)}
[data-sx-rest="0"] #questionScreen.sx-card{box-shadow:0 22px 44px -18px rgba(38,34,28,.22),0 3px 10px rgba(38,34,28,.04)}
.sx-card .q-title{margin-bottom:1.25rem}
.sx-card .options{gap:.625rem}
.sx-card .opt{position:relative;overflow:hidden;min-height:3.875rem;background:var(--sx-opt);border-color:var(--sx-line);box-shadow:0 2px 0 var(--sx-line);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sx-card .opt .material-symbols-outlined{width:2.375rem;height:2.375rem;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#F3E6D3;transition:background .25s,color .25s,box-shadow .25s}
.sx-card .opt[aria-pressed="true"]{background:linear-gradient(180deg,#FCF1DF,#F8E6C8);border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber),0 8px 20px -10px rgba(192,138,62,.65)}
.sx-card .opt[aria-pressed="true"] .material-symbols-outlined{background:#E6A340;color:var(--ink-deep);box-shadow:0 0 0 5px rgba(230,163,64,.22)}
.sx-card .opt.is-locked{opacity:.5}
.sx-card .options--persona .opt{padding:1.25rem 1.125rem 1.375rem}
.sx-card .options--persona .material-symbols-outlined{width:3.5rem;height:3.5rem;font-size:2rem;margin-bottom:.375rem}
.sx-card .options--persona .opt__sub{color:var(--muted)}
@media (hover:hover){.sx-card .opt:hover{border-color:var(--brass);transform:translateY(-1px)}}
.sx-ripple{position:absolute;width:12rem;height:12rem;margin:-6rem 0 0 -6rem;border-radius:50%;background:radial-gradient(closest-side,rgba(230,163,64,.42),rgba(230,163,64,0));pointer-events:none;transform:scale(0);opacity:1;z-index:0}
.sx-card .opt > span:not(.sx-ripple){position:relative;z-index:1}
/* Navigation unten, im Daumenbereich */
.sx-card .nav{position:sticky;bottom:0;z-index:3;margin:.75rem -1.125rem 0;padding:.875rem 1.125rem calc(.75rem + env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,rgba(255,252,245,0),var(--sx-card) 26%);border-radius:0 0 1.5rem 1.5rem;pointer-events:none}
.sx-card .nav .btn{pointer-events:auto}
html.sfx{scroll-padding-bottom:5.5rem}
.sx-card .nav .btn{min-height:3.25rem}
.sx-card #btnNext{flex:1;max-width:16rem;margin-left:auto}
@media (max-width:359px){.sx-card .nav .btn{padding-left:1rem;padding-right:1rem;white-space:nowrap}}
.sx-card #btnNext:not([disabled]){background:linear-gradient(180deg,#E6A340,#C08A3E);box-shadow:0 12px 26px -10px rgba(192,138,62,.75),inset 0 1px 0 rgba(255,252,245,.45)}
.sx-card #btnNext.sx-ready{animation:sxReady 1.6s ease-out 1}
@media (prefers-reduced-motion:reduce){.sx-card #btnNext.sx-ready{animation:none}}
@keyframes sxReady{0%{box-shadow:0 0 0 0 rgba(230,163,64,.55),0 12px 26px -10px rgba(192,138,62,.75)}100%{box-shadow:0 0 0 14px rgba(230,163,64,0),0 12px 26px -10px rgba(192,138,62,.75)}}
.sx-card .hint{font-weight:700;color:var(--amber-text)}
/* Kontaktkarte */
#contactScreen.sx-card{padding:1.75rem 1.25rem 1.5rem}
.sx-card .form-head .material-symbols-outlined{width:4rem;height:4rem;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 50% 40%,#FFFCF5,#F8E6C8 55%,#E6A340);color:var(--ink-deep);box-shadow:0 0 0 8px rgba(230,163,64,.14),0 0 40px 6px rgba(230,163,64,.3);font-size:2rem}
.sx-card .field input{min-height:3.25rem;font-size:1.0625rem;background:var(--sx-opt)}
.sx-card .check{padding:.25rem 0}
.sx-card #submitBtn{min-height:3.5rem;background:linear-gradient(180deg,#E6A340,#C08A3E);box-shadow:0 14px 30px -10px rgba(192,138,62,.7),inset 0 1px 0 rgba(255,252,245,.45)}

/* ---------- Sonnenbogen (Fortschritt) ---------- */
.sfx .bars{display:none}
.sx-arc{position:relative;height:3.5rem;margin:.125rem .25rem 0}
.sx-arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sx-arc__h{stroke:var(--sand);stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}
.sx-arc__track{stroke:#D9C9B0;stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round;fill:none;vector-effect:non-scaling-stroke}
.sx-arc__fill{stroke:url(#sxArcGrad);stroke-width:3.5;stroke-linecap:round;fill:none;stroke-dasharray:1 1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.sx-arc__tick{position:absolute;width:.375rem;height:.375rem;margin:-.1875rem 0 0 -.1875rem;border-radius:50%;background:var(--sand);transition:background .4s,transform .4s}
.sx-arc__tick.on{background:var(--amber)}
.sx-arc__sun{position:absolute;left:0;top:100%;width:1.375rem;height:1.375rem;margin:-.6875rem 0 0 -.6875rem;border-radius:50%;background:radial-gradient(circle at 50% 40%,#FFFCF5 0%,#F8EEE1 20%,#E6A340 62%,#C08A3E 100%);box-shadow:0 0 0 4px rgba(230,163,64,.2),0 0 18px 6px rgba(230,163,64,.45);z-index:2}
.progress{position:relative}
.sfx .progress{margin-bottom:1.125rem}
/* Seite wird mit jeder Antwort etwas heller und wärmer */
.sfx body::before{content:"";position:fixed;top:-35vmax;right:-35vmax;width:90vmax;height:90vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(230,163,64,.26),rgba(230,163,64,0));opacity:var(--sx-p);pointer-events:none;z-index:-1;transition:opacity 1s ease}

/* ---------- Flugbewegung ---------- */
.sfx-motion body{overflow-x:clip}
.sfx-motion .screen.active{animation:none}
.sx-layer{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden}
.sx-ghost{display:block !important;pointer-events:none;will-change:transform,opacity}
.sx-ghost .nav{position:static}
.sx-fx-dot{position:fixed;width:.5rem;height:.5rem;margin:-.25rem 0 0 -.25rem;border-radius:50%;background:#E6A340;box-shadow:0 0 8px 2px rgba(230,163,64,.55);pointer-events:none;z-index:31}

/* ---------- Ergebnis: aufgehende Sonne mit Band-Anzeige ---------- */
.sx-res{overflow:hidden;padding-top:0}
.sx-res-sky{position:relative;overflow:hidden;height:11rem;margin:0 -1.375rem 1.375rem;background:linear-gradient(to bottom,#100A03 0%,#3B2A1E 34%,#9C6E2C 70%,#E6A340 100%)}
.sx-res-sky span{position:absolute;display:block}
.sx-res-night{inset:0;background:linear-gradient(to bottom,#100A03,#1C140C 70%,#2A1D12);opacity:0}
.sx-res-rays{left:50%;bottom:-9rem;width:26rem;height:26rem;margin-left:-13rem;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,252,245,.16) 0deg 5deg,rgba(255,252,245,0) 5deg 18deg);-webkit-mask:radial-gradient(closest-side,#000 30%,transparent 100%);mask:radial-gradient(closest-side,#000 30%,transparent 100%)}
.sx-res-sun{left:50%;bottom:1.125rem;width:7.25rem;height:7.25rem;margin-left:-3.625rem;border-radius:50%;display:flex !important;flex-direction:column;align-items:center;justify-content:center;padding-bottom:1.25rem;background:radial-gradient(circle at 50% 40%,#FFFCF5 0%,#FFFCF5 30%,#F8E6C8 52%,#E6A340 82%,#C08A3E 100%);box-shadow:0 0 44px 14px rgba(230,163,64,.5),0 0 120px 40px rgba(230,163,64,.25);color:var(--ink-deep)}
.sx-res-num{font-family:'Playfair Display',Georgia,serif;font-size:2.5rem;line-height:1;font-weight:700}
.sx-res-sun small{font-size:.75rem;font-weight:700;letter-spacing:.06em;color:#4A3A26;margin-top:.125rem}
.sx-res-ground{left:-12%;right:-12%;bottom:-1px;height:2.75rem;background:var(--sx-card);border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -8px 24px -6px rgba(230,163,64,.45)}
.sx-scale{position:relative;max-width:17rem;margin:1.5rem auto .625rem;height:1.25rem}
.sx-scale__track{position:absolute;left:0;right:0;top:50%;height:.5rem;margin-top:-.25rem;border-radius:9999px;overflow:hidden;background:linear-gradient(90deg,#3E5C50 0%,#7C8B6A 22%,#C08A3E 36%,#C08A3E 50%,#9C6E2C 62%,#5A4128 82%,#26221C 100%)}
.sx-scale__rest{position:absolute;top:0;bottom:0;right:0;background:var(--sand)}
.sx-scale__dot{position:absolute;top:50%;width:1.25rem;height:1.25rem;margin:-.625rem 0 0 -.625rem;border-radius:50%;background:radial-gradient(circle at 50% 40%,#FFFCF5 0%,#E6A340 60%,#C08A3E 100%);border:2px solid #FFFCF5;box-shadow:0 0 0 1px var(--brass),0 0 14px 4px rgba(230,163,64,.45)}
.sfx .sx-res .meter{display:none}
.sfx .sx-res .badge{position:relative}
@media (prefers-reduced-motion:no-preference){
  .sfx-motion .sx-res-rays{animation:sxSpin 60s linear infinite}
}
@keyframes sxSpin{to{transform:rotate(360deg)}}

/* ---------- Desktop ---------- */
@media (min-width:768px){
  .sx-hero{margin-top:0;padding:3rem 2.5rem 11.5rem}
  .sx-card{padding:2rem 2rem 1.75rem}
  #questionScreen.sx-card{padding-bottom:0}
  .sx-card .nav{margin:1.25rem -2rem 0;padding:1.125rem 2rem 1.5rem}
  #contactScreen.sx-card{padding:2.25rem 2rem 2rem}
  .sx-res-sky{height:12rem}
}