/* Schlaunauten Brand — Startseite, Logins, Onboarding */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  --sn-blue:#0066FF;
  --sn-sky:#00C2FF;
  --sn-yellow:#FFD200;
  --sn-orange:#FF8A00;
  --sn-dark:#0B1E3A;
  --sn-deep:#071526;
  --sn-light:#F7F9FC;
  --sn-text:#c7daf0;
  --sn-muted:#8ea6c4;
  --sn-line:#ffffff1f;
  --font-display:'Fredoka',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
}

.sn-root{display:block!important;padding:0!important}
.sn-landing,.sn-auth{
  min-height:100dvh;color:#fff;font-family:var(--font-body);position:relative;overflow:clip;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,#1a3a6e55,transparent 55%),
    linear-gradient(180deg,#02050d 0%,#071526 40%,#0b1e3a 100%);
}
.sn-landing *,.sn-auth *{box-sizing:border-box}
.sn-landing :is(h1,h2,h3,h4),.sn-auth :is(h1,h2,h3),.sn-btn{font-family:var(--font-display);letter-spacing:-.015em}
.sn-landing a,.sn-auth a{color:inherit}
.sn-landing svg:not(.sn-astro-svg),.sn-auth svg:not(.sn-astro-svg){width:1.15em;height:1.15em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.sn-stars{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:
    radial-gradient(1.4px 1.4px at 10% 14%,#fff,transparent),radial-gradient(1px 1px at 30% 40%,#FFD200aa,transparent),
    radial-gradient(1.2px 1.2px at 55% 20%,#fff,transparent),radial-gradient(1px 1px at 78% 55%,#7ef0ffaa,transparent),
    radial-gradient(1.3px 1.3px at 88% 18%,#fff,transparent),radial-gradient(1px 1px at 20% 75%,#fff,transparent);
  background-size:100% 1600px}

/* Kosmos nur im Hero — wie im Kinderportal */
.sn-cosmos{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:0 0 36px 36px;
  background:
    radial-gradient(ellipse 80% 60% at 50% -5%,#2a5a9ecc,transparent 58%),
    radial-gradient(ellipse 55% 45% at 90% 65%,#0a6a8a77,transparent 55%),
    radial-gradient(ellipse 50% 40% at 5% 75%,#1a3a7a88,transparent 50%),
    radial-gradient(120% 90% at 50% 100%,#0c1f3a,#02050d 70%)}
.sn-nebula{position:absolute;border-radius:50%;filter:blur(52px);opacity:.95;animation:sn-nebula 22s ease-in-out infinite alternate}
.sn-nebula-a{width:65vw;height:48vw;left:-12%;top:-16%;background:radial-gradient(circle,#3b7ef0dd,#0b1e3a00 70%)}
.sn-nebula-b{width:52vw;height:44vw;right:-14%;top:10%;background:radial-gradient(circle,#22d3ff99,#02050d00 68%);animation-delay:-7s}
.sn-nebula-c{width:58vw;height:40vw;left:16%;bottom:-12%;background:radial-gradient(circle,#5b8fd0aa,#02050d00 70%);animation-delay:-13s;opacity:.7}
.sn-starfield{position:absolute;inset:0;opacity:1;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 12%,#fff,transparent),radial-gradient(1px 1px at 18% 40%,#FFD200cc,transparent),
    radial-gradient(1.3px 1.3px at 28% 18%,#fff,transparent),radial-gradient(1px 1px at 42% 8%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 55% 28%,#7ef0ffcc,transparent),radial-gradient(1px 1px at 68% 14%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 78% 36%,#fff,transparent),radial-gradient(1px 1px at 88% 10%,#FFD200aa,transparent),
    radial-gradient(1.4px 1.4px at 12% 62%,#fff,transparent),radial-gradient(1px 1px at 33% 72%,#7ef0ff99,transparent),
    radial-gradient(1.2px 1.2px at 48% 58%,#fff,transparent),radial-gradient(1px 1px at 62% 78%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 74% 64%,#FFD20099,transparent),radial-gradient(1px 1px at 92% 70%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 6% 88%,#fff,transparent),radial-gradient(1px 1px at 40% 92%,#7ef0ff88,transparent);
  background-size:100% 100%;animation:sn-twinkle 8s ease-in-out infinite alternate}
.sn-planet{position:absolute;border-radius:50%;box-shadow:inset -12px -16px 28px #0008,0 0 40px #2ec8e022}
.sn-planet-gas{width:min(48vw,420px);height:min(48vw,420px);right:2%;top:12%;
  background:radial-gradient(circle at 32% 28%,#ffd9a0,#f0a14a 35%,#d9652a 62%,#7a2e12);
  animation:sn-drift 28s ease-in-out infinite alternate;opacity:.95}
.sn-planet-gas .sn-ring{position:absolute;left:50%;top:50%;width:148%;height:42%;
  border:3px solid #ffc95e88;border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg);
  box-shadow:0 0 20px #ffc95e33,inset 0 0 12px #ffc95e22}
.sn-planet-ice{width:min(14vw,110px);height:min(14vw,110px);left:8%;top:28%;
  background:radial-gradient(circle at 35% 30%,#e8ffff,#3ccf9a 45%,#1b7fb8 75%);
  animation:sn-drift 20s ease-in-out -4s infinite alternate}
.sn-planet-tiny{width:36px;height:36px;right:28%;bottom:22%;
  background:radial-gradient(circle at 35% 30%,#fff,#a78bfa 55%,#4c1d95);opacity:.9;
  animation:sn-drift 16s ease-in-out -8s infinite alternate}
.sn-belt{position:absolute;left:50%;top:52%;width:120%;height:38%;transform:translate(-50%,-50%) rotate(-12deg);
  background:radial-gradient(ellipse at center,transparent 42%,#ffffff08 48%,transparent 58%);opacity:.7}

/* Fliegende Astronauten */
.sn-astro{position:absolute;width:96px;height:114px;z-index:3;filter:drop-shadow(0 12px 22px #000c)}
.sn-astro-svg{width:100%;height:100%;display:block;overflow:visible}
.sn-astro-trail{position:absolute;left:50%;top:78%;width:5px;height:36px;margin-left:-2px;border-radius:999px;
  background:linear-gradient(#7ef0ffcc,transparent);opacity:.8;animation:sn-trail 1.4s ease-in-out infinite}
.sn-astro-a{left:4%;top:38%;animation:sn-fly-a 18s ease-in-out infinite}
.sn-astro-b{right:5%;top:22%;width:78px;height:94px;animation:sn-fly-b 21s ease-in-out infinite;animation-delay:-6s}
.sn-astro-auth{position:relative;left:auto;right:auto;top:auto;width:96px;height:114px;margin:8px auto 0;animation:sn-bob 5s ease-in-out infinite;z-index:2}

/* Buttons */
.sn-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:999px;cursor:pointer;
  text-decoration:none;font-weight:700;line-height:1;transition:transform .15s,box-shadow .15s,filter .15s,background .15s;white-space:nowrap}
.sn-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.sn-btn:active{transform:translateY(0)}
.sn-btn:focus-visible{outline:3px solid var(--sn-sky);outline-offset:3px}
.sn-btn-yellow{background:var(--sn-yellow);color:var(--sn-dark)!important;box-shadow:0 10px 28px #ffd20048;padding:13px 22px;font-size:16px}
.sn-btn-ghost{background:#ffffff0f;color:#fff!important;border:1.5px solid #ffffff3a;padding:12px 20px;font-size:15px;backdrop-filter:blur(6px)}
.sn-btn-ghost:hover{background:#ffffff1c;border-color:#ffffff66}
.sn-btn.large{padding:17px 28px;font-size:18px}
.sn-btn.full{width:100%}
.sn-btn-sm{padding:10px 14px;font-size:14px}

/* Navigation */
.sn-nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px clamp(18px,4vw,48px);max-width:1240px;margin:0 auto}
.sn-nav-brand{display:inline-flex;align-items:center}
.sn-logo{height:clamp(48px,6vw,64px);width:auto;display:block;filter:drop-shadow(0 6px 16px #0007)}
.sn-nav-links{display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
.sn-nav-links>a:not(.sn-btn){color:#d7e6f8;text-decoration:none;font-weight:700;font-size:15px}
.sn-nav-links>a:not(.sn-btn):hover{color:#fff}
.sn-nav-sep{width:1px;height:26px;background:#ffffff26}
.sn-nav-quick{display:none;align-items:center;gap:8px}
.sn-nav-toggle{border:0;background:#ffffff10;border-radius:12px;color:#fff;padding:9px;cursor:pointer;display:inline-grid}
.sn-nav-toggle svg{width:24px;height:24px}

/* Hero — echte 3D-Welt als Ambient-Hintergrund */
.sn-hero{position:relative;z-index:2;display:grid;place-items:center;text-align:center;overflow:hidden;
  min-height:min(88dvh,920px);width:100%;margin:0;isolation:isolate;
  padding:clamp(28px,5vw,64px) clamp(18px,4vw,48px) clamp(56px,8vw,96px);
  background:#02050d;box-shadow:inset 0 -48px 70px #02050dcc}
.sn-hero-space{position:absolute;inset:0;z-index:0;pointer-events:none}
.sn-hero-space .space-layer{position:absolute;inset:0}
.sn-hero-space .space-layer.is-ambient :is(.space-labels,.space-areas,.space-chips,.space-mission,.space-hint,.mission-card){display:none!important}
.sn-hero-space .space-layer.is-ambient .space-canvas{cursor:default;pointer-events:none!important}
.sn-hero-space .space-layer.is-ambient .space-vignette{opacity:.55}
.sn-hero.has-3d .sn-cosmos{opacity:0;visibility:hidden;transition:opacity .6s ease}
.sn-hero-fade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 50% at 50% 42%,#02050d55 0%,#02050d00 62%),
    linear-gradient(180deg,#02050d88 0%,transparent 28%,transparent 58%,#02050dee 92%,#02050d 100%)}
.sn-hero-copy{position:relative;z-index:2;max-width:40rem;display:grid;justify-items:center;
  padding:clamp(16px,2.4vw,28px) clamp(18px,3vw,32px);border-radius:28px;
  background:radial-gradient(ellipse at 50% 40%,#02050d99 0%,#02050d55 48%,#02050d00 72%)}
.sn-hero-brand{height:clamp(88px,14vw,148px);width:auto;display:block;margin-bottom:10px;
  filter:drop-shadow(0 12px 32px #000a);animation:sn-brand-in .9s ease both}
.sn-kicker{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--sn-yellow)}
.sn-kicker svg{width:15px;height:15px}
.sn-hero h1{margin:8px 0 14px;font-size:clamp(36px,5.8vw,68px);line-height:1.05;font-weight:700;text-wrap:balance;
  text-shadow:0 8px 40px #0008;animation:sn-brand-in .9s .08s ease both}
.sn-hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--sn-yellow),var(--sn-orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.sn-hero-copy>p{margin:0 0 26px;max-width:32rem;font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:var(--sn-text);font-weight:600;
  animation:sn-brand-in .9s .14s ease both}
.sn-hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;animation:sn-brand-in .9s .2s ease both}
.sn-hero-subcta{margin:14px 0 0;font-size:14px;font-weight:700;color:var(--sn-muted,#8fb6cc)}
.sn-hero-subcta a{color:#7ef0ff;text-decoration:none}
.sn-hero-subcta a:hover{text-decoration:underline}
.sn-trust{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 20px;color:#b9cde6;font-weight:700;font-size:14px}
.sn-trust li{display:inline-flex;align-items:center;gap:7px}
.sn-trust svg{color:#4ade80;width:17px;height:17px}

/* Strip */
.sn-strip{position:relative;z-index:2;max-width:1240px;margin:48px auto 24px;padding:0 clamp(18px,4vw,48px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sn-strip>div{padding:18px 20px;border-radius:20px;background:#ffffff0b;border:1px solid var(--sn-line)}
.sn-strip b{display:block;font-family:var(--font-display);font-size:34px;color:var(--sn-yellow);line-height:1}
.sn-strip span{display:block;margin-top:6px;color:var(--sn-text);font-weight:700;font-size:14px;line-height:1.35}

/* Sections */
.sn-section{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:clamp(56px,8vw,96px) clamp(18px,4vw,48px) 0;scroll-margin-top:12px}
.sn-section-head{max-width:46rem;margin-bottom:28px}
.sn-section-head h2{margin:10px 0 12px;font-size:clamp(30px,4.2vw,46px);line-height:1.08}
.sn-section-head p{margin:0 0 18px;color:var(--sn-text);font-size:17px;line-height:1.55;font-weight:600}

/* Echte 3D-Stations-Vorschau */
.sn-preview-section{max-width:1280px}
.sn-preview{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.85fr);gap:22px;align-items:stretch;position:relative}
.sn-preview-frame{
  position:relative;border-radius:28px;overflow:hidden;min-height:520px;height:min(62vh,640px);
  border:1px solid #7ef0ff44;background:#02050d;
  box-shadow:0 30px 80px #000a,0 0 0 1px #ffffff10,inset 0 1px 0 #ffffff14;
}
.sn-pv-space{position:absolute;inset:0;z-index:1}
.sn-pv-space .space-layer{position:absolute;inset:0}
.sn-pv-space .space-layer.is-preview .space-canvas{cursor:default;pointer-events:none!important}
.sn-pv-space .space-layer.is-preview .space-labels,
.sn-pv-space .space-layer.is-preview .space-areas,
.sn-pv-space .space-layer.is-preview .space-chips{pointer-events:none}
.sn-pv-space .space-layer.is-preview .mission-card,
.sn-pv-space .space-layer.is-preview .space-hint,
.sn-pv-space .space-layer.is-preview .sm-go{display:none!important}
.sn-pv-space .space-layer.is-preview .space-mission{bottom:72px;pointer-events:none}
.sn-pv-hud{
  position:absolute;top:0;left:0;right:0;z-index:4;
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;
  background:linear-gradient(180deg,#02050dee,#02050d00);pointer-events:none;
}
.sn-pv-hud>img{height:40px;width:auto;filter:drop-shadow(0 6px 14px #0008)}
.sn-pv-meters{display:flex;gap:8px;align-items:center}
.sn-pv-meters .hud-meter{min-height:42px;padding:6px 12px;border-radius:14px;transform:scale(.92);transform-origin:right center}
.sn-pv-dock{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;justify-content:center;gap:4px;padding:10px 10px 14px;
  background:linear-gradient(180deg,transparent,#02050df2 35%);pointer-events:none;
}
.sn-pv-dock>span{display:grid;justify-items:center;gap:2px;min-width:52px;padding:8px 6px;border-radius:14px;color:#9fbad4;font-size:10px;font-weight:800}
.sn-pv-dock .icon{width:18px;height:18px}
.sn-pv-dock>span.is-active{background:#ffffff14;color:#fff}
.sn-preview-aside{padding:22px 22px 20px;border-radius:24px;background:#0f2444ee;border:1px solid #ffffff1c;
  display:grid;align-content:start;gap:14px}
.sn-preview-aside h3{margin:0;font-size:22px;color:#fff}
.sn-preview-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sn-preview-list li{display:flex;gap:10px;align-items:flex-start;color:#c7daf0;font-weight:700;font-size:14.5px;line-height:1.4}
.sn-preview-list svg{width:18px;height:18px;color:#4ade80;flex-shrink:0;margin-top:2px}
.sn-preview-list b{display:block;color:#fff}
.sn-preview-cta{display:grid;gap:10px;margin-top:6px}
.sn-preview-note{margin:0;color:#8fb6cc;font-size:12.5px;font-weight:700;line-height:1.4}

.sn-subjects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sn-subject{padding:26px 24px;border-radius:26px;background:linear-gradient(165deg,#ffffff12,#ffffff06);border:1px solid var(--sn-line);position:relative;overflow:hidden}
.sn-subject:after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;opacity:.22;filter:blur(2px);pointer-events:none}
.sn-math:after{background:radial-gradient(circle,#ffc95e,transparent 70%)}
.sn-german:after{background:radial-gradient(circle,#ff8fd6,transparent 70%)}
.sn-english:after{background:radial-gradient(circle,#6fe3ff,transparent 70%)}
.sn-subject-orb{
  position:relative;z-index:1;display:grid;place-items:center;flex-shrink:0;
  width:58px;height:58px;margin:0 0 16px;border-radius:50%;
  color:var(--sn-dark);box-shadow:inset -6px -8px 0 #0002,0 10px 24px #0006;
}
.sn-subject-orb svg{width:26px;height:26px;display:block;stroke-width:2.1}
.sn-math .sn-subject-orb{background:linear-gradient(140deg,#ffe08a,#f0a640)}
.sn-german .sn-subject-orb{background:linear-gradient(140deg,#ffc2ea,#c45bd0)}
.sn-english .sn-subject-orb{background:linear-gradient(140deg,#b8f3ff,#3cb0e0)}
.sn-subject h3{position:relative;z-index:1;margin:0 0 8px;font-size:24px}
.sn-subject p{position:relative;z-index:1;margin:0 0 16px;color:var(--sn-text);font-weight:600;line-height:1.5}
.sn-subject ul{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sn-subject li{padding:6px 11px;border-radius:999px;background:#ffffff12;border:1px solid #ffffff1c;font-size:13px;font-weight:700;color:#e3eefc}

.sn-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.sn-steps li{padding:26px 24px;border-radius:26px;background:#ffffff0b;border:1px solid var(--sn-line);position:relative}
.sn-step-n{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--sn-yellow);color:var(--sn-dark);font-family:var(--font-display);font-weight:700;font-size:20px;margin-bottom:14px}
.sn-steps h3{margin:0 0 8px;font-size:21px}
.sn-steps p{margin:0;color:var(--sn-text);font-weight:600;line-height:1.5}

.sn-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,48px);align-items:start}
.sn-split.reverse{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.sn-split.reverse .sn-section-head{order:2}
.sn-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sn-feature-grid article{padding:22px;border-radius:22px;background:#ffffff0b;border:1px solid var(--sn-line)}
.sn-feature-grid article>svg{width:30px;height:30px;color:var(--sn-sky);margin-bottom:12px}
.sn-feature-grid h3{margin:0 0 6px;font-size:18px}
.sn-feature-grid p{margin:0;color:var(--sn-text);font-weight:600;font-size:14.5px;line-height:1.5}

.sn-faq{display:grid;gap:10px;max-width:52rem}
.sn-faq details{border-radius:18px;background:#ffffff0b;border:1px solid var(--sn-line);padding:4px 20px}
.sn-faq summary{cursor:pointer;list-style:none;padding:16px 0;font-family:var(--font-display);font-size:18px;font-weight:600;display:flex;justify-content:space-between;gap:12px}
.sn-faq summary::-webkit-details-marker{display:none}
.sn-faq summary:after{content:"+";color:var(--sn-yellow);font-size:22px;line-height:1}
.sn-faq details[open] summary:after{content:"–"}
.sn-faq p{margin:0 0 16px;color:var(--sn-text);font-weight:600;line-height:1.55}

.sn-cta-band{position:relative;z-index:2;width:min(1144px,calc(100% - 2 * clamp(18px,4vw,48px)));margin:clamp(56px,8vw,96px) auto 0;padding:clamp(28px,4vw,44px);
  border-radius:32px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  background:linear-gradient(120deg,#0066ff,#00a6e8);box-shadow:0 30px 80px #0066ff40}
.sn-cta-band h2{margin:0 0 6px;font-size:clamp(28px,3.6vw,40px)}
.sn-cta-band p{margin:0;color:#e3f1ff;font-weight:700}
.sn-cta-band .sn-btn-ghost{background:#ffffff22;border-color:#ffffff66}

.sn-footer{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:clamp(48px,6vw,72px) clamp(18px,4vw,48px) 28px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:28px;color:var(--sn-muted)}
.sn-footer-brand{display:flex;gap:12px;align-items:center}
.sn-footer-brand img{border-radius:12px}
.sn-footer-brand b{display:block;color:#fff;font-family:var(--font-display);font-size:18px}
.sn-footer-brand small{font-weight:700;font-size:13px}
.sn-footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sn-footer h4{margin:0 0 10px;color:#fff;font-size:15px}
.sn-footer-cols a{display:block;padding:4px 0;text-decoration:none;font-weight:700;font-size:14px;color:#a9bdd8}
.sn-footer-cols a:hover{color:#fff}
.sn-footer-note{grid-column:1/-1;margin:8px 0 0;padding-top:18px;border-top:1px solid var(--sn-line);font-size:13px;font-weight:700}

/* Auth-Seiten */
.sn-auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sn-auth-side{position:relative;padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;gap:28px;overflow:hidden;min-height:100dvh}
.sn-auth-brand img{height:52px;width:auto;filter:drop-shadow(0 6px 16px #0007)}
.sn-auth-side-copy{position:relative;z-index:2;max-width:30rem}
.sn-auth-side-copy h2{margin:12px 0 12px;font-size:clamp(32px,3.8vw,48px);line-height:1.06}
.sn-auth-side-copy>p{margin:0;color:var(--sn-text);font-size:17px;font-weight:600;line-height:1.55}
.sn-auth-side:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 70% 20%,#1a4fb866,transparent 55%),
    radial-gradient(ellipse 50% 40% at 20% 80%,#00c2ff33,transparent 50%),
    radial-gradient(120% 90% at 50% 100%,#0c1f3a,#02050d)}
.sn-auth-side:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 40% 30%,#FFD200aa,transparent),
    radial-gradient(1.2px 1.2px at 70% 14%,#7ef0ffcc,transparent),radial-gradient(1px 1px at 85% 48%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 22% 70%,#fff,transparent),radial-gradient(1px 1px at 58% 82%,#FFD20099,transparent)}
.sn-auth-cosmos{position:relative;z-index:2;margin-top:auto;display:grid;place-items:center;min-height:160px}
.sn-auth-main{position:relative;display:grid;place-items:center;padding:clamp(20px,4vw,48px);background:linear-gradient(180deg,#0b1e3a99,#071526cc)}
.sn-auth-back{position:absolute;top:20px;right:24px;display:inline-flex;align-items:center;gap:6px;color:#a9bdd8!important;text-decoration:none;font-weight:800;font-size:14px}
.sn-auth-back svg{transform:rotate(180deg)}
.sn-auth-back:hover{color:#fff!important}
.sn-auth-card{width:min(440px,100%);padding:clamp(24px,3vw,36px);border-radius:28px;background:var(--sn-light);color:var(--sn-dark);box-shadow:0 30px 80px #000a}
.sn-auth-card h1{margin:0 0 8px;font-size:32px;color:var(--sn-dark)}
.sn-auth-lead{margin:0 0 20px;color:#52657f;font-weight:600;line-height:1.5}
.sn-form{display:grid;gap:14px}
.sn-field{display:grid;gap:6px}
.sn-field>span{font-weight:800;font-size:14px;color:#24364f}
.sn-field small{font-weight:600;color:#7b8ca3}
.sn-field input,.sn-field select{width:100%;border:2px solid #d6e1ef;border-radius:14px;padding:14px 16px;font:inherit;font-size:16px;font-weight:700;color:var(--sn-dark);background:#fff;transition:border-color .15s,box-shadow .15s}
.sn-field input:focus,.sn-field select:focus{outline:none;border-color:var(--sn-blue);box-shadow:0 0 0 4px #0066ff22}
.sn-field-row{display:grid;grid-template-columns:1.3fr 1fr;gap:12px}
.sn-code-input{text-transform:uppercase;letter-spacing:.14em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;font-size:22px!important;text-align:center}
.sn-pin-input{letter-spacing:.6em;font-size:26px!important;text-align:center}
.sn-auth-card .sn-btn{margin-top:6px}
.sn-auth-help{margin-top:18px;padding:12px 14px;border-radius:14px;background:#e9f2ff;color:#2a4366;font-size:14px;font-weight:600;line-height:1.45}
.sn-auth-foot{margin:18px 0 0;text-align:center;font-weight:700;font-size:14px;color:#52657f}
.sn-auth-foot a{color:var(--sn-blue)!important}
.sn-auth-card .portal-hint{margin:-4px 0 0}
.sn-role-grid{display:grid;gap:10px;margin-top:16px}
.sn-role{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:16px;border-radius:18px;text-decoration:none;color:inherit;background:#fff;border:2px solid #d9e4f2;transition:border-color .15s,transform .15s}
.sn-role:hover{border-color:var(--sn-blue);transform:translateY(-1px)}
.sn-role-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#FFF4C2;color:#8a5a00}
.sn-role.parent .sn-role-ico{background:#E3EEFF;color:var(--sn-blue)}
.sn-role-ico svg{width:26px;height:26px}
.sn-role b{display:block;font-family:var(--font-display);font-size:19px}
.sn-role small{display:block;color:#64758c;font-weight:700;font-size:13px}
.sn-chev{color:var(--sn-blue)}

/* Portal-Hinweise in hellen Karten */
.sn-auth-card .portal-hint{background:#eef6ff;border:1px solid #cfe3ff;color:#2a4366;border-radius:12px;padding:10px 12px;font-size:13.5px;font-weight:600}
.sn-auth-card .portal-hint.ok{background:#ecfbf1;border-color:#bfe9cf;color:#1e5b36}
.sn-auth-card .portal-hint.err{background:#fff1f0;border-color:#ffd0cc;color:#8a2a22}

/* Admin-Login (alt, dunkel) */
.portal-app.space-ui.entry-mode .portal-auth h1{color:#fff;font-family:var(--font-display)}
.portal-app.space-ui.entry-mode .portal-auth p{color:#c7daf0}
.space-ui .portal-hint{background:#ffffff12;border-color:#ffffff2e;color:#d7e6f8}
.space-ui .portal-hint.ok{background:#1f8a4a33;border-color:#4ade8066;color:#d9fbe6}
.space-ui .portal-hint.err{background:#b4232333;border-color:#f8717166;color:#ffe1de}
.sn-auth-icon{display:block;width:56px;height:56px;border-radius:14px;margin:0 0 12px;object-fit:cover}

/* Welcome modal */
.welcome-card.sn-welcome{width:min(460px,100%);border-radius:28px;overflow:hidden;background:var(--sn-light);border:1px solid #ffffff44;font-family:var(--font-body)}
.welcome-card.sn-welcome .welcome-hero{background:linear-gradient(160deg,#0B1E3A,#0066FF);color:#fff;padding:28px 24px 22px;margin:0 0 8px;text-align:left}
.welcome-card.sn-welcome .welcome-hero .eyebrow{color:var(--sn-yellow)}
.welcome-card.sn-welcome .welcome-hero h2{font-family:var(--font-display);font-size:28px;margin:8px 0;color:#fff}
.welcome-card.sn-welcome .welcome-hero p{color:#d5e6fb;font-weight:600;margin:0}
.welcome-card.sn-welcome form{padding:8px 22px 22px}

@keyframes sn-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sn-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sn-nebula{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(2%,-2%)}}
@keyframes sn-twinkle{from{opacity:.55}to{opacity:.95}}
@keyframes sn-drift{from{transform:translate(0,0)}to{transform:translate(-12px,10px)}}
@keyframes sn-trail{0%,100%{opacity:.35;transform:scaleY(.7)}50%{opacity:.85;transform:scaleY(1.15)}}
@keyframes sn-fly-a{
  0%{transform:translate(0,0) rotate(-8deg)}
  25%{transform:translate(8vw,-10vh) rotate(6deg)}
  50%{transform:translate(4vw,8vh) rotate(-2deg)}
  75%{transform:translate(12vw,4vh) rotate(8deg)}
  100%{transform:translate(0,0) rotate(-8deg)}
}
@keyframes sn-fly-b{
  0%{transform:translate(0,0) rotate(10deg) scale(.9)}
  25%{transform:translate(-6vw,8vh) rotate(-6deg) scale(.9)}
  50%{transform:translate(-10vw,-6vh) rotate(4deg) scale(.9)}
  75%{transform:translate(-4vw,-12vh) rotate(-8deg) scale(.9)}
  100%{transform:translate(0,0) rotate(10deg) scale(.9)}
}
@keyframes sn-brand-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(max-width:1060px){
  .sn-nav-links>a:not(.sn-btn){display:none}
  .sn-nav-sep{display:none}
  .sn-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sn-preview{grid-template-columns:1fr}
  .sn-preview-frame{height:min(56vh,520px);min-height:420px}
}
@media(max-width:900px){
  .sn-nav-links{display:none}
  .sn-nav-quick{display:flex}
  .sn-nav-links.is-open{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:76px;left:14px;right:14px;
    background:#0B1E3Af5;border:1px solid #ffffff22;border-radius:22px;padding:16px;gap:10px;backdrop-filter:blur(14px);box-shadow:0 20px 50px #000a}
  .sn-nav-links.is-open>a:not(.sn-btn){display:block;padding:8px 6px}
  .sn-hero{min-height:min(72dvh,680px);padding-top:12px}
  .sn-planet-gas{right:-8%;top:22%;opacity:.85}
  .sn-astro-a{left:4%;top:62%}
  .sn-astro-b{right:4%;top:48%}
  .sn-subjects,.sn-steps{grid-template-columns:1fr}
  .sn-split,.sn-split.reverse{grid-template-columns:1fr}
  .sn-split.reverse .sn-section-head{order:0}
  .sn-footer{grid-template-columns:1fr}
  .sn-auth{grid-template-columns:1fr}
  .sn-auth-side{min-height:auto;padding-bottom:12px;gap:14px}
  .sn-auth-side-copy h2{font-size:28px}
  .sn-auth-side-copy>p,.sn-auth-side .sn-trust,.sn-auth-cosmos{display:none}
  .sn-auth-main{place-items:start center;padding-top:8px;background:none;position:static}
  .sn-auth-back{top:30px;right:18px}
}
@media(max-width:560px){
  .sn-hero h1{font-size:36px}
  .sn-hero-brand{height:72px}
  .sn-hero-cta .sn-btn{flex:1 1 100%}
  .sn-astro{width:48px;height:58px}
  .sn-astro-b{width:40px;height:48px}
  .sn-planet-tiny,.sn-belt{display:none}
  .sn-strip{grid-template-columns:1fr 1fr;gap:8px}
  .sn-pv-orbit{grid-template-columns:1fr 1fr}
  .sn-pv-hud{flex-wrap:wrap}
  .sn-pv-meters .hud-meter{transform:scale(.84)}
  .sn-pv-dock>span{min-width:44px;font-size:0}
  .sn-pv-dock .icon{width:20px;height:20px}
  .sn-pv-mission .sn-pv-go{display:none}
  .sn-strip>div{padding:14px}
  .sn-strip b{font-size:28px}
  .sn-feature-grid{grid-template-columns:1fr}
  .sn-footer-cols{grid-template-columns:1fr 1fr}
  .sn-field-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .sn-nebula,.sn-starfield,.sn-planet,.sn-astro,.sn-astro-trail,.sn-hero-brand,.sn-hero h1,.sn-hero-copy>p,.sn-hero-cta{animation:none}
}