/* ==========================================================================
   Tensor Study – Startseite mit Anmeldung
   Schriften liegen auf dem eigenen Server (keine Anfragen an Google).
   ========================================================================== */

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("fonts/bricolage-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("fonts/bricolage-latin-ext.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    src: url("fonts/inter-latin.woff2") format("woff2");
    font-weight: 300 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    src: url("fonts/inter-latin-ext.woff2") format("woff2");
    font-weight: 300 800;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Instrument Serif";
    src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Serif";
    src: url("fonts/instrument-serif-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Caveat";
    src: url("fonts/caveat-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}

:root {
    --ink: #16122e;
    --ink-2: #3d3858;
    --ink-3: #6e6989;
    --paper: #fbf8f3;
    --paper-2: #f3eee6;
    --card: #ffffff;
    --line: rgba(22, 18, 46, 0.09);
    --line-2: rgba(22, 18, 46, 0.14);
    --hover: rgba(22, 18, 46, 0.06);
    --l0: #f1ede6; --l1: #ffe3a3; --l2: #ffc23d; --l3: #ff9a3d; --l4: #ff6b5b;

    --coral: #ff6b5b;
    --sun: #ffc23d;
    --sky: #4aa8ff;
    --mint: #2fcf9f;
    --violet: #8c6bff;
    --pink: #ff7eb6;
    --violet-ink: #5a3ee6;
    --mint-ink: #0e8f6a;
    --coral-ink: #d63f2f;

    --night: #0d0a1f;
    --night-2: #161230;
    --night-3: #221c45;
    --on-night: #f4f1ff;
    --on-night-2: rgba(236, 232, 255, 0.72);
    --on-night-3: rgba(236, 232, 255, 0.5);

    --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
    --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

    --gutter: clamp(16px, 4vw, 40px);
    --radius-xl: 36px;
    --radius-lg: 28px;
    --radius: 20px;
    --radius-sm: 14px;

    --shadow-1: 0 1px 2px rgba(22, 18, 46, 0.06), 0 4px 14px -6px rgba(22, 18, 46, 0.12);
    --shadow-2: 0 1px 2px rgba(22, 18, 46, 0.05), 0 18px 44px -18px rgba(22, 18, 46, 0.28);
    --shadow-3: 0 0 0 1px rgba(22, 18, 46, 0.05), 0 30px 80px -28px rgba(58, 36, 150, 0.45), 0 10px 24px -14px rgba(22, 18, 46, 0.22);

    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
::selection { background: rgba(140, 107, 255, 0.28); }
:focus-visible { outline: 2.5px solid var(--violet); outline-offset: 3px; border-radius: 6px; }

.container { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
    position: fixed; left: 16px; top: -60px; z-index: 200;
    background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px;
    font-weight: 600; text-decoration: none; transition: top 0.2s;
}
.skip:focus { top: 16px; }

/* Die 3D-Leinwand liegt über allem Inhalt, lässt aber jeden Klick durch. */
.tensor {
    position: fixed; inset: 0; width: 100%; height: 100%;
    z-index: 40; pointer-events: none;
    opacity: 0; transition: opacity 0.8s ease;
}
.tensor.is-ready { opacity: 1; }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none; }
.progress span {
    display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--coral), var(--sun), var(--mint), var(--sky), var(--violet));
}

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--font-display); font-optical-sizing: auto; margin: 0; }
h2 {
    font-weight: 720;
    font-size: clamp(2.15rem, 1.25rem + 3.1vw, 3.85rem);
    line-height: 1.02;
    letter-spacing: -0.036em;
    margin: 18px 0 20px;
    text-wrap: balance;
}
h3 { font-weight: 680; font-size: 1.28rem; letter-spacing: -0.02em; line-height: 1.2; }
.accent, h1 em, h2 em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.012em;
    font-size: 1.07em;
    line-height: 0.9;
    padding-right: 0.06em;
    background: linear-gradient(100deg, var(--coral) 5%, #ff5f8f 40%, var(--violet) 85%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section--night h2 em {
    background: linear-gradient(100deg, var(--sun) 0%, #ff9c7a 45%, var(--pink) 90%);
    -webkit-background-clip: text; background-clip: text;
}
.lead {
    font-size: clamp(1.06rem, 0.99rem + 0.35vw, 1.26rem);
    line-height: 1.62;
    color: var(--ink-2);
    max-width: 34em;
    margin: 0;
    text-wrap: pretty;
}
.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font: 600 13.5px/1 var(--font-body); letter-spacing: 0.01em;
    color: var(--ink-2);
    padding: 8px 14px 8px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 0 0 1px var(--line), 0 8px 18px -12px rgba(22, 18, 46, 0.25);
    backdrop-filter: blur(8px);
}
.eyebrow__cube { width: 18px; height: 18px; }
.section--night .eyebrow { color: var(--on-night); background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }

/* --------------------------------------------------------------------------
   Knöpfe
   -------------------------------------------------------------------------- */
.btn {
    --h: 52px;
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: var(--h); padding: 0 24px;
    border: 0; border-radius: 999px;
    font: 650 16px/1 var(--font-display); letter-spacing: -0.01em;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: transform 0.35s var(--spring), translate 0.5s var(--smooth), box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 18px; height: 18px; transition: transform 0.35s var(--spring); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(0.97); }
.btn--primary {
    color: #fff;
    background: linear-gradient(180deg, #9f86ff 0%, #7c58ff 52%, #6b45f4 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(40, 14, 140, 0.25),
        0 12px 26px -10px rgba(107, 69, 244, 0.75), 0 2px 5px rgba(40, 20, 120, 0.2);
}
.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(40, 14, 140, 0.25),
        0 18px 34px -12px rgba(107, 69, 244, 0.85), 0 2px 5px rgba(40, 20, 120, 0.2);
}
.btn--dark { color: #fff; background: var(--ink); box-shadow: 0 10px 24px -12px rgba(22, 18, 46, 0.6); }
.btn--dark:hover { transform: translateY(-2px); background: #231d45; }
.btn--ghost { color: inherit; background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }
.btn--small { --h: 42px; padding: 0 18px; font-size: 15px; }

/* --------------------------------------------------------------------------
   Kopfleiste
   -------------------------------------------------------------------------- */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, backdrop-filter 0.35s ease;
}
.nav__inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.nav.is-scrolled {
    background: rgba(251, 248, 243, 0.76);
    backdrop-filter: saturate(1.6) blur(16px);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    box-shadow: 0 1px 0 var(--line);
}
.nav.is-night { color: var(--on-night); }
.nav.is-night.is-scrolled { background: rgba(13, 10, 31, 0.72); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }
.brand {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none;
    font: 720 21px/1 var(--font-display); letter-spacing: -0.03em;
}
.brand__mark { width: 30px; height: 30px; transition: transform 0.6s var(--spring); }
.brand:hover .brand__mark { transform: rotate(-12deg) scale(1.08); }
.brand__study { color: var(--violet-ink); transition: color 0.35s; }
.nav.is-night .brand__study, .footer .brand__study { color: #b7a6ff; }
.nav__links { display: flex; gap: 6px; margin-left: auto; }
.nav__links a {
    position: relative;
    padding: 9px 14px; border-radius: 999px;
    font: 550 15px/1 var(--font-body); text-decoration: none; color: inherit; opacity: 0.8;
    transition: opacity 0.2s, background-color 0.2s;
}
.nav__links a:hover { opacity: 1; background: rgba(22, 18, 46, 0.06); }
.nav.is-night .nav__links a:hover { background: rgba(255, 255, 255, 0.1); }
.nav__links a.is-active { opacity: 1; }
.nav__links .nav__app { display: inline-flex; align-items: center; gap: 7px; opacity: 1; }
.nav__neu { font: 800 10px/1 var(--font-body); letter-spacing: .06em; padding: 4px 7px; border-radius: 999px; color: #06291f; background: linear-gradient(180deg, #4fe3b6, #22c08f); }
.nav__links a.is-active::after {
    content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; border-radius: 2px;
    background: var(--violet); transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   Start: Überschrift, Anmeldung, 3D-Würfel
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100svh;
    padding: calc(72px + clamp(20px, 5vh, 60px)) 0 clamp(72px, 10vh, 120px);
    isolation: isolate;
    overflow: clip;
}
.hero__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__sky::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(55% 45% at 78% 38%, rgba(140, 107, 255, 0.18), transparent 70%),
        radial-gradient(40% 40% at 12% 10%, rgba(255, 194, 61, 0.2), transparent 70%),
        radial-gradient(45% 40% at 6% 85%, rgba(255, 107, 91, 0.12), transparent 70%),
        radial-gradient(45% 45% at 96% 92%, rgba(47, 207, 159, 0.14), transparent 70%);
}
/* Ein weicher Lichtschein folgt der Maus (nur am Rechner) */
.hero__sky::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(520px circle at var(--sx, 72%) var(--sy, 42%), rgba(140, 107, 255, 0.1), transparent 65%);
}
.blob {
    position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55;
    animation: drift 22s ease-in-out infinite alternate;
    will-change: transform;
}
.blob--a { width: 520px; height: 520px; left: 52%; top: 4%; background: #cbbcff; }
.blob--b { width: 380px; height: 380px; left: -6%; top: 48%; background: #ffd9b8; animation-duration: 26s; animation-delay: -6s; }
.blob--c { width: 300px; height: 300px; left: 78%; top: 62%; background: #b9f0dc; animation-duration: 19s; animation-delay: -12s; }
@keyframes drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(40px, -30px, 0) scale(1.08); }
    100% { transform: translate3d(-30px, 25px, 0) scale(0.96); }
}
.hero__dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(22, 18, 46, 0.16) 1.1px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(60% 55% at 74% 46%, #000 10%, transparent 72%);
    mask-image: radial-gradient(60% 55% at 74% 46%, #000 10%, transparent 72%);
    opacity: 0.8;
}
.grain {
    position: fixed; inset: -50%; z-index: 30; pointer-events: none; opacity: 0.05;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
}

.hero__top { position: relative; z-index: 2; }
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    margin-top: clamp(18px, 3vh, 34px);
}
.hero__copy { position: relative; z-index: 2; }
.hero__title {
    font-weight: 760;
    font-size: clamp(2.6rem, 0.7rem + 5.1vw, 5.6rem);
    line-height: 0.98;
    letter-spacing: -0.043em;
    margin: 20px 0 0;
    text-wrap: balance;
}
.hero__title .line { display: block; }
.hero__title .word { display: inline-block; }
.js .hero__title .word { opacity: 0; transform: translateY(0.55em) rotate(2deg); filter: blur(8px); }
.js .is-loaded .hero__title .word {
    opacity: 1; transform: none; filter: none;
    transition: opacity 0.7s var(--smooth), transform 0.9s var(--smooth), filter 0.7s var(--smooth);
    transition-delay: calc(var(--i) * 55ms + 120ms);
}
.hero .lead { max-width: 30em; }

.hero__stage { position: relative; align-self: start; height: clamp(420px, 58vh, 580px); touch-action: pan-y; cursor: grab; }
.hero__stage:active { cursor: grabbing; }
.stage-glow {
    position: absolute; left: 50%; top: 56%; width: 78%; height: 44%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(140, 107, 255, 0.24), transparent);
    filter: blur(20px); pointer-events: none;
}
.stage-hint {
    position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 13px/1 var(--font-body); color: var(--ink-3);
    padding: 9px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 1px var(--line);
    backdrop-filter: blur(8px);
    white-space: nowrap;
    transition: opacity 0.4s;
}
.stage-hint svg { width: 16px; height: 16px; color: var(--violet); }
.stage-word {
    position: absolute; left: 50%; top: 9%; transform: translate(-50%, 8px);
    font: 600 13px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
    opacity: 0; transition: opacity 0.4s, transform 0.4s var(--smooth);
}
.stage-word.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Kleine Karten schweben um den Würfel (Beispiele aus der Plattform) */
.chips { position: absolute; inset: 0; pointer-events: none; }
.chip {
    position: absolute;
    translate: calc(var(--px, 0) * var(--z) * -9px) calc(var(--py, 0) * var(--z) * -7px);
    transition: translate 1s var(--smooth);
}
.chip--a { left: 0; top: 11%; --n: 0; }
.chip--b { right: 0; top: 2%; --n: 1; }
.chip--c { left: 1%; bottom: 15%; --n: 2; }
.chip__in {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 16px 9px 9px; border-radius: 17px;
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: 0 0 0 1px rgba(22, 18, 46, 0.06), 0 20px 40px -20px rgba(40, 24, 110, 0.5), 0 4px 10px -6px rgba(22, 18, 46, 0.18);
}
.js .chip__in { opacity: 0; scale: 0.7; }
.chips-on .chip__in {
    animation: chip-in 0.8s var(--spring) both, chip-float 6.4s ease-in-out infinite;
    animation-delay: calc(var(--n) * 0.22s), calc(var(--n) * -2.1s);
}
.chip__icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); color: var(--fg); flex: none; }
.chip__icon svg { width: 19px; height: 19px; }
.chip__txt b { display: block; font: 720 15.5px/1.1 var(--font-display); letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; }
.chip__txt small { display: block; margin-top: 4px; font: 600 12px/1 var(--font-body); color: var(--ink-3); white-space: nowrap; }
@keyframes chip-in { from { opacity: 0; scale: 0.7; } to { opacity: 1; scale: 1; } }
@keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Ersatzbild, falls 3D nicht verfügbar ist */
.stage-fallback { position: absolute; inset: 0; display: none; place-items: center; }
.no-webgl .stage-fallback { display: grid; }
.no-webgl .stage-hint { display: none; }
.fallback-cube { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(300px, 70%); transform: rotate(-8deg); }
.fallback-cube span {
    aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center;
    font: 800 clamp(22px, 4vw, 38px)/1 var(--font-display); color: #fffbf4;
    background: var(--c); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12), inset 0 3px 0 rgba(255, 255, 255, 0.35), 0 14px 26px -14px rgba(22, 18, 46, 0.5);
}

/* Anmeldung */
.login { position: relative; margin-top: 30px; max-width: 580px; }
.login__card {
    position: relative; z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border-radius: var(--radius-lg);
    padding: 22px 22px 20px;
    box-shadow: var(--shadow-3);
}
.login__head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px 4px; padding-right: 110px; }
.login__title { margin: 0; font: 720 1.4rem/1.1 var(--font-display); letter-spacing: -0.03em; }
.login__sub { margin: 0; font-size: 14px; color: var(--ink-3); }
.login__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.field { min-width: 0; }
.field__label { display: block; font: 600 13px/1 var(--font-body); color: var(--ink-2); margin: 0 0 7px 4px; }
.field__box {
    position: relative; display: flex; align-items: center;
    height: 56px; border-radius: 16px;
    background: #f5f2ec;
    box-shadow: inset 0 0 0 1.5px rgba(22, 18, 46, 0.06);
    transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
.field__box:hover { background: #f1ede6; }
.field__box:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--violet), 0 0 0 5px rgba(140, 107, 255, 0.16); }
.field__icon { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; transition: color 0.2s; }
.field__box:focus-within .field__icon { color: var(--violet-ink); }
.field__box input {
    flex: 1; min-width: 0; width: 100%; height: 100%;
    border: 0; background: transparent; outline: none;
    padding: 0 14px 0 44px;
    font: 500 16px var(--font-body); color: var(--ink);
    border-radius: 16px;
}
.field__box input::placeholder { color: #a39fb5; }
.field--pw input { padding-right: 48px; }
.field__eye {
    position: absolute; right: 6px; width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 0; border-radius: 12px; background: transparent; color: var(--ink-3); cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.field__eye:hover { background: rgba(22, 18, 46, 0.06); color: var(--ink); }
.field__eye svg { width: 20px; height: 20px; }
.field__eye .eye-off { display: none; }
.field__eye[aria-pressed="true"] .eye-on { display: none; }
.field__eye[aria-pressed="true"] .eye-off { display: block; }

.login__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 500 14.5px/1.2 var(--font-body); color: var(--ink-2); user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { position: relative; width: 42px; height: 26px; border-radius: 999px; background: #e3ded6; transition: background-color 0.3s; flex: none; }
.switch__track::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(22, 18, 46, 0.25);
    transition: transform 0.4s var(--spring);
}
.switch input:checked + .switch__track { background: var(--mint); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { outline: 2.5px solid var(--violet); outline-offset: 2px; }
.login__submit { --h: 54px; border-radius: 16px; padding: 0 26px 0 28px; min-width: 176px; }
.login__submit .spinner { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: spin 0.8s linear infinite; }
.login__submit.is-busy .spinner { display: block; }
.login__submit.is-busy .btn__arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.login__error {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 14px; padding: 11px 14px;
    border-radius: 14px; background: #fff0ee; color: #b3261e;
    font: 600 14.5px/1.35 var(--font-body);
    box-shadow: inset 0 0 0 1px rgba(214, 63, 47, 0.18);
}
.login__error svg { width: 18px; height: 18px; flex: none; }
.login.is-shaking .login__card { animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60% { transform: translateX(7px); }
}
.login__note { margin: 14px 4px 0; font-size: 14px; color: var(--ink-3); }
.login__note a { color: var(--violet-ink); font-weight: 600; text-decoration: none; }
.login__note a:hover { text-decoration: underline; }

/* Kubi, der Würfel mit Gesicht, schaut über den Rand der Anmeldung */
.kubi { position: absolute; right: 30px; top: -70px; width: 96px; height: 96px; pointer-events: none; }
.kubi--body { z-index: 1; }
.kubi--hands { z-index: 3; }
.kubi svg { width: 100%; height: 100%; overflow: visible; }
.kubi__bob { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.5s var(--spring); }
.kubi.is-jump .kubi__bob { animation: kubi-jump 0.7s var(--smooth); }
@keyframes kubi-jump { 0% { transform: translateY(0); } 35% { transform: translateY(-26px) rotate(-6deg); } 60% { transform: translateY(0) scaleY(0.9); } 80% { transform: translateY(-6px); } 100% { transform: none; } }
.kubi.is-sad .kubi__bob { animation: kubi-shake 0.6s ease 0.2s 2; }
@keyframes kubi-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
.kubi__pupil { transition: transform 0.12s ease-out; }
.kubi__lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform 0.09s ease; }
.kubi.is-blink .kubi__lid { transform: scaleY(1); }
.kubi__mouth path { transition: opacity 0.2s; }
.kubi__mouth .m-sad, .kubi__mouth .m-open { opacity: 0; }
.kubi.is-sad .m-smile, .kubi.is-happy .m-smile { opacity: 0; }
.kubi.is-sad .m-sad { opacity: 1; }
.kubi.is-happy .m-open { opacity: 1; }
/* Kubis Hände: kleine runde Pfoten an der Kante der Anmeldung. Beim Passwort
   wandern sie auf die Augen und werden dabei groß genug, um sie ganz zu decken. */
.kubi__hand { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 0.45s var(--spring); }
/* In Ruhe hält er sich an der Kante fest: Hände auf dem Kopf, die Finger hängen
   nach vorn über die Kante, die Daumen zeigen nach innen. Beim Augenzuhalten
   drehen sie sich hoch (Finger oben, Daumen außen). */
.kubi__hand--l { transform: translateY(-2px) rotate(180deg); }
.kubi__hand--r { transform: translateY(-2px) rotate(-180deg); }
.kubi.is-shy .kubi__hand--l { transform: translate(16px, -31px) scale(1.45) rotate(-6deg); }
.kubi.is-shy .kubi__hand--r { transform: translate(-16px, -31px) scale(1.45) rotate(6deg); }
/* Passwort sichtbar: die rechte Pfote rutscht ein Stück weg, ein Auge linst hervor. */
.kubi.is-shy.is-peek .kubi__hand--r { transform: translate(-8px, -17px) scale(1.3) rotate(18deg); }
.kubi-bubble {
    position: absolute; right: 132px; top: -58px; z-index: 3;
    max-width: 250px;
    padding: 9px 13px;
    border-radius: 16px 16px 4px 16px;
    background: var(--ink); color: #fff;
    font: 600 13.5px/1.3 var(--font-body);
    box-shadow: 0 12px 24px -12px rgba(22, 18, 46, 0.6);
    opacity: 0; transform: translateY(6px) scale(0.96); transform-origin: 100% 100%;
    transition: opacity 0.3s ease, transform 0.4s var(--spring);
    pointer-events: none;
}
.kubi-bubble.is-on { opacity: 1; transform: none; }

.hero__facts {
    display: flex; flex-wrap: wrap; gap: 10px 22px;
    list-style: none; padding: 0; margin: 24px 0 0 4px;
    font: 550 14.5px/1.2 var(--font-body); color: var(--ink-2);
}
.hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero__facts svg { width: 18px; height: 18px; color: var(--mint-ink); flex: none; }

.scroll-cue {
    /* über dem Laufband, das 75 px in den Hero ragt */
    position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
    display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
    font: 600 12.5px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-3); text-decoration: none;
}
.scroll-cue i { width: 22px; height: 34px; border-radius: 12px; box-shadow: inset 0 0 0 2px currentColor; position: relative; }
.scroll-cue i::after {
    content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px;
    border-radius: 2px; background: currentColor; animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* --------------------------------------------------------------------------
   Laufband
   -------------------------------------------------------------------------- */
.ticker { position: relative; z-index: 6; height: 150px; margin: -75px 0; pointer-events: none; }
.ticker__band {
    position: absolute; left: -4%; right: -4%; top: 50%;
    padding: 15px 0; overflow: hidden;
    transform: translateY(-50%) rotate(-2.2deg);
    background: var(--ink); color: #fff;
    box-shadow: 0 24px 40px -22px rgba(22, 18, 46, 0.6);
}
.ticker__band--b { z-index: -1; transform: translateY(-50%) rotate(1.8deg); background: var(--sun); color: var(--ink); }
.ticker__track {
    display: flex; gap: 34px; width: max-content;
    font: 680 19px/1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap;
    animation: marquee 48s linear infinite;
}
.ticker__band--b .ticker__track { animation-direction: reverse; animation-duration: 60s; opacity: 0.9; }
.ticker__item { display: inline-flex; align-items: center; gap: 14px; }
.ticker__item i { width: 13px; height: 13px; border-radius: 4px; background: var(--c); transform: rotate(12deg); }
@keyframes marquee { to { transform: translateX(-50%); } }
.ticker-js .ticker__track { animation: none; will-change: transform; }

/* --------------------------------------------------------------------------
   Abschnitte allgemein
   -------------------------------------------------------------------------- */
.section { position: relative; padding: clamp(96px, 12vw, 164px) 0; }
.section--night { background: var(--night); color: var(--on-night); }
.section--night .lead { color: var(--on-night-2); }
.section--round { border-radius: var(--radius-xl) var(--radius-xl) 0 0; margin-top: calc(-1 * var(--radius-xl)); z-index: 2; }

.js .reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); }
/* Oben auf der Startseite: beim Laden einblenden – die Anmeldung darf nie auf das Scrollen warten */
.js .hero-in { opacity: 0; transform: translateY(22px); filter: blur(6px); }
.js .is-loaded .hero-in {
    opacity: 1; transform: none; filter: none;
    transition: opacity 0.9s var(--smooth), transform 1s var(--smooth), filter 0.9s var(--smooth);
    transition-delay: calc(var(--d, 0) * 80ms + 120ms);
}
.js .reveal.is-in {
    opacity: 1; transform: none; filter: none;
    transition: opacity 0.9s var(--smooth), transform 1s var(--smooth), filter 0.9s var(--smooth);
    transition-delay: calc(var(--d, 0) * 90ms);
}

.stage { position: relative; }
.tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 999px;
    font: 650 12px/1 var(--font-body); letter-spacing: 0.02em;
    background: rgba(22, 18, 46, 0.06); color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Lernmotor (dunkel)
   -------------------------------------------------------------------------- */
.motor {
    padding-top: clamp(150px, 16vw, 210px);
    background:
        radial-gradient(50% 45% at 78% 36%, rgba(140, 107, 255, 0.3), transparent 70%),
        radial-gradient(40% 40% at 6% 92%, rgba(255, 107, 91, 0.16), transparent 70%),
        radial-gradient(30% 30% at 50% 0%, rgba(74, 168, 255, 0.12), transparent 70%),
        var(--night);
    overflow: clip;
}
.motor::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
    background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(70% 60% at 70% 45%, #000 20%, transparent 75%);
    mask-image: radial-gradient(70% 60% at 70% 45%, #000 20%, transparent 75%);
}
.motor__grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.points { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 18px; }
.points li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.points__icon {
    width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
    background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.points__icon svg { width: 22px; height: 22px; }
.points b { display: block; font: 680 1.08rem/1.3 var(--font-display); letter-spacing: -0.01em; color: #fff; margin-bottom: 3px; }
.points span { color: var(--on-night-2); font-size: 15.5px; line-height: 1.55; }
.motor__lrs {
    display: flex; align-items: center; gap: 12px; margin: 30px 0 0; padding: 14px 16px;
    border-radius: 16px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    color: var(--on-night-2); font-size: 14.5px; line-height: 1.45;
}
.motor__lrs .tag { background: rgba(255, 194, 61, 0.16); color: var(--sun); flex: none; }

.motor__visual { position: relative; }
.motor__stage { height: clamp(360px, 36vw, 470px); }
.bins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; text-align: center; }
.bin { padding: 10px 4px 0; border-top: 2px solid var(--c); }
.bin__n { display: block; font: 740 30px/1 var(--font-display); letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; transition: transform 0.3s var(--spring); }
.bin__n.is-bump { transform: scale(1.18); }
.bin__l { display: block; margin-top: 6px; font: 600 13px/1.2 var(--font-body); color: var(--on-night-2); }

.demo {
    margin-top: 30px; padding: 20px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -30px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
}
.demo__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.demo__label { font: 650 12.5px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sun); }
.demo__streak { font: 600 13px/1 var(--font-body); color: var(--on-night-3); font-variant-numeric: tabular-nums; }
.demo__q { font: 650 clamp(1.15rem, 1rem + 0.6vw, 1.45rem)/1.25 var(--font-display); letter-spacing: -0.02em; color: #fff; margin: 0 0 14px; }
.demo__q b { color: var(--sun); font-weight: 700; }
.demo__opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.demo__opt {
    height: 50px; border: 0; border-radius: 14px; cursor: pointer;
    background: rgba(255, 255, 255, 0.08); color: #fff;
    font: 600 15.5px/1 var(--font-body);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -3px 0 rgba(0, 0, 0, 0.25);
    transition: transform 0.25s var(--spring), background-color 0.2s, box-shadow 0.2s;
}
.demo__opt:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); }
.demo__opt:active { transform: translateY(1px); }
.demo__opt.is-right { background: var(--mint); color: #05382a; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 0 0 4px rgba(47, 207, 159, 0.25); }
.demo__opt.is-wrong { background: var(--coral); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); animation: shake 0.45s both; }
.demo__opt:disabled { cursor: default; }
.demo__fb { min-height: 1.5em; margin: 12px 0 0; font-size: 14.5px; color: var(--on-night-2); }
.demo__fb b { color: #fff; }

/* --------------------------------------------------------------------------
   Spielwelten
   -------------------------------------------------------------------------- */
.worlds { background: var(--paper); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: 40px; align-items: center; }
.worlds__stage { height: 320px; }
.bento {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(250px, auto);
    gap: 18px; margin-top: 40px;
}
.tile {
    --mx: 50%; --my: 50%;
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-2);
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.6s var(--smooth), box-shadow 0.4s ease;
    min-height: 250px;
}
.tile:hover { box-shadow: 0 1px 2px rgba(22, 18, 46, 0.05), 0 30px 60px -24px rgba(22, 18, 46, 0.4); }
.tile::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.4s;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.28), transparent 45%);
}
.tile:hover::after { opacity: 1; }
.tile__media { position: absolute; inset: 0; z-index: 0; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--smooth); }
.tile:hover .tile__media img { transform: scale(1.045); }
.tile__body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 70px 26px 22px;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(12, 9, 30, 0.55) 38%, rgba(12, 9, 30, 0.86));
}
.tile__body h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem); margin: 8px 0 6px; }
.tile__body p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.84); max-width: 36em; }
.tile__body .tag { background: rgba(255, 255, 255, 0.18); color: #fff; backdrop-filter: blur(6px); }
.tile--race { grid-column: span 7; grid-row: span 2; min-height: 540px; }
.tile--eggs { grid-column: span 5; }
.tile--ducks { grid-column: span 5; }
.tile--room { grid-column: span 7; grid-row: span 2; min-height: 540px; background: #1d1640; }
.tile--moles { grid-column: span 5; }
.tile--speed { grid-column: span 5; background: linear-gradient(160deg, #221b4d, #120d2c); }
.tile--shop { grid-column: span 6; background: linear-gradient(160deg, #fff6e5, #ffe9ef); }
.tile--more { grid-column: span 6; background: var(--ink); color: #fff; }
.tile--light .tile__body { position: relative; padding: 24px 26px; background: none; color: var(--ink); }
.tile--light .tile__body p { color: var(--ink-2); }
.tile--light .tile__body .tag { background: rgba(22, 18, 46, 0.07); color: var(--ink-2); backdrop-filter: none; }

/* Zimmer: kleine Bühne aus echten Spielbildern */
.room { position: absolute; inset: 0; }
.room__bg { position: absolute; inset: 0; background: url("img/raum_weltraum.webp") center 35% / cover no-repeat; }
.room__item { position: absolute; bottom: 21%; transform-origin: 50% 100%; animation: float 5s ease-in-out infinite; }
.room__item img { width: 100%; height: auto; filter: drop-shadow(0 16px 12px rgba(10, 6, 40, 0.35)); }
.room__item--mia { left: 38%; width: 18%; bottom: 17%; animation-duration: 6s; }
.room__item--robot { left: 12%; width: 15%; animation-delay: -1.2s; }
.room__item--rocket { left: 66%; width: 13%; bottom: 25%; animation: rocket 4.2s ease-in-out infinite; }
.room__item--telescope { left: 81%; width: 14%; animation-delay: -2.6s; }
.room__item--globe { left: 26%; width: 11%; bottom: 20%; animation-delay: -3.4s; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-1.5deg); } }
@keyframes rocket { 0%, 100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(-22px) rotate(-3deg); } }
.word-tag {
    position: absolute; left: 50%; top: -12px; transform: translate(-50%, -100%);
    padding: 6px 10px 6px 26px; border-radius: 999px;
    background: #fff; color: var(--ink);
    font: 700 13px/1 var(--font-body); white-space: nowrap;
    box-shadow: 0 8px 18px -8px rgba(10, 6, 40, 0.5);
}
.word-tag::before {
    content: ""; position: absolute; left: 8px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
    background: var(--violet); border-radius: 3px;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 10v4h4l5 5V5L7 10H3zm13.5 2A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 10v4h4l5 5V5L7 10H3zm13.5 2A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z'/></svg>") center / contain no-repeat;
}
.word-tag::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: #fff; transform: rotate(45deg); border-radius: 2px; }

/* Speed-Lesen: nachgebaute Spielszene */
.speed { position: absolute; inset: 0; display: grid; place-items: center; padding: 26px 26px 120px; }
.speed__card { width: min(100%, 360px); text-align: center; }
.speed__timer { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin-bottom: 22px; }
.speed__timer span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--sun), var(--coral)); transform-origin: 0 50%; }
.speed__word { font: 760 clamp(2rem, 1.5rem + 2vw, 2.8rem)/1 var(--font-display); letter-spacing: -0.03em; color: #fff; height: 1.2em; transition: opacity 0.2s, filter 0.2s; }
.speed__word.is-hidden { opacity: 0; filter: blur(8px); }
.speed__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.speed__opts span {
    padding: 10px 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.86);
    font: 600 13.5px/1.1 var(--font-body); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s, color 0.3s, transform 0.3s var(--spring);
}
.speed__opts span.is-right { background: var(--mint); color: #05382a; transform: scale(1.05); }

/* Belohnungen: nachgebauter Shop */
.shop { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 26px 26px 0; }
.reward { border-radius: 18px; background: #fff; padding: 14px; box-shadow: 0 1px 2px rgba(22, 18, 46, 0.06), 0 12px 24px -16px rgba(22, 18, 46, 0.35); }
.reward__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); color: var(--fg); margin-bottom: 10px; }
.reward__icon svg { width: 22px; height: 22px; }
.reward b { display: block; font: 680 15px/1.2 var(--font-display); letter-spacing: -0.01em; }
.reward small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.reward__bar { height: 6px; border-radius: 3px; background: #f0ebe3; margin-top: 10px; overflow: hidden; }
.reward__bar span { display: block; height: 100%; border-radius: 3px; background: var(--c); width: 0; transition: width 1.6s var(--smooth); }
.is-in .reward__bar span { width: var(--w); }
.reward__ok { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font: 650 11.5px/1 var(--font-body); color: var(--mint-ink); }
.reward__ok svg { width: 13px; height: 13px; }

.more { padding: 30px 28px; display: flex; flex-direction: column; height: 100%; }
.more h3 { font-size: 1.45rem; margin: 10px 0 16px; }
.more__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.more__list li {
    padding: 9px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); font: 600 14px/1 var(--font-body);
}
.more .tag { align-self: flex-start; background: rgba(255, 255, 255, 0.12); color: #fff; }
.more p { margin: auto 0 0; padding-top: 18px; color: rgba(255, 255, 255, 0.65); font-size: 14.5px; }

/* Zahlen: was schon drinsteckt */
.stats {
    list-style: none; margin: 18px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
    border-radius: var(--radius-lg); overflow: hidden;
    background: var(--line); box-shadow: var(--shadow-2);
}
.stat { display: flex; flex-direction: column; padding: 26px 26px 24px; background: #fff; }
.stat b {
    font: 780 clamp(2.5rem, 1.9rem + 2vw, 3.5rem)/0.95 var(--font-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
    background: linear-gradient(120deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent;
    padding-bottom: 4px;
}
.stat span { margin-top: 10px; font: 680 1.05rem/1.25 var(--font-display); letter-spacing: -0.01em; }
.stat small { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   KI-Korrektur
   -------------------------------------------------------------------------- */
.ki { background: linear-gradient(180deg, var(--paper) 0%, #f2eeff 55%, var(--paper) 100%); overflow: clip; }
.ki__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.ki__demo { position: relative; padding: 20px 0 40px; }
.paper {
    position: relative; width: min(100%, 470px); margin-inline: auto;
    aspect-ratio: 0.8;
    padding: 34px 34px 30px 58px;
    border-radius: 6px;
    background:
        linear-gradient(90deg, transparent 44px, rgba(255, 107, 91, 0.45) 44px, rgba(255, 107, 91, 0.45) 46px, transparent 46px),
        repeating-linear-gradient(180deg, transparent 0 37px, rgba(74, 168, 255, 0.28) 37px 38px),
        #fffdf7;
    background-position: 0 0, 0 62px, 0 0;
    box-shadow: 0 1px 1px rgba(22, 18, 46, 0.08), 0 30px 60px -26px rgba(22, 18, 46, 0.45), 0 10px 20px -12px rgba(22, 18, 46, 0.18);
    transform: rotate(-2.4deg);
    font-family: var(--font-hand);
    color: #2a3a8f;
    overflow: hidden;
}
.paper__head { font-size: 28px; font-weight: 700; line-height: 1; margin-bottom: 20px; display: flex; justify-content: space-between; }
.paper__head span:last-child { font-size: 22px; font-weight: 600; opacity: 0.85; }
.paper__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.paper__row { position: relative; height: 38px; display: flex; align-items: flex-end; gap: 12px; font-size: 27px; font-weight: 600; line-height: 1; padding-bottom: 5px; }
.paper__row .n { width: 22px; opacity: 0.7; font-size: 22px; }
.paper__row .mark {
    position: absolute; right: -6px; bottom: 4px; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    transform: scale(0); transition: transform 0.45s var(--spring);
}
.paper__row .mark svg { width: 17px; height: 17px; }
.paper__row .mark--ok { background: var(--mint); color: #fff; }
.paper__row .mark--no { background: var(--coral); color: #fff; }
.paper__row.is-checked .mark { transform: scale(1); }
.paper__row .fix {
    position: absolute; left: 52%; bottom: 26px;
    font-size: 21px; color: var(--coral-ink); font-weight: 700;
    opacity: 0; transform: translateY(4px) rotate(-3deg); transition: opacity 0.4s, transform 0.4s var(--spring);
}
.paper__row.is-checked .fix { opacity: 1; transform: rotate(-3deg); }
.paper__row .hl {
    position: absolute; left: 30px; right: 30px; bottom: 2px; height: 32px; border-radius: 6px;
    background: rgba(140, 107, 255, 0.14); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 0.35s var(--smooth);
}
.paper__row.is-reading .hl { transform: scaleX(1); }
.scan {
    position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(140, 107, 255, 0.18) 70%, rgba(140, 107, 255, 0.7) 98%, transparent);
    transform: translateY(-100%); opacity: 0;
}
.scan.is-on { animation: scan 2.2s var(--smooth) forwards; }
@keyframes scan { 0% { transform: translateY(-100%); opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(640px); opacity: 0; } }
.phone-frame {
    position: absolute; left: 50%; top: 50%; width: min(78%, 360px); aspect-ratio: 0.72;
    transform: translate(-50%, -50%) rotate(-2.4deg);
    border-radius: 28px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 9999px rgba(22, 18, 46, 0);
    pointer-events: none; opacity: 0; transition: opacity 0.4s;
}
.phone-frame.is-on { opacity: 1; }
.phone-frame::before, .phone-frame::after { content: ""; position: absolute; width: 30px; height: 30px; border: 4px solid #fff; }
.phone-frame::before { left: -3px; top: -3px; border-right: 0; border-bottom: 0; border-radius: 16px 0 0 0; }
.phone-frame::after { right: -3px; bottom: -3px; border-left: 0; border-top: 0; border-radius: 0 0 16px 0; }
.flash { position: absolute; inset: -40px; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }
.flash.is-on { animation: flash 0.5s ease-out; }
@keyframes flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }

.ai-card {
    position: absolute; right: max(-10px, calc(50% - 330px)); bottom: 6px; z-index: 4;
    width: min(320px, 78%);
    padding: 16px 16px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-3);
    opacity: 0; transform: translateY(18px) scale(0.96);
    transition: opacity 0.5s var(--smooth), transform 0.6s var(--spring);
}
.ai-card.is-on { opacity: 1; transform: none; }
.ai-card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ai-card__badge { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--violet), var(--pink)); color: #fff; flex: none; }
.ai-card__badge svg { width: 18px; height: 18px; }
/* Kubi als Absender der Heftkorrektur: sein Gesicht statt des Funkens */
.ai-card__badge--kubi { background: none; }
.ai-card__badge--kubi svg { width: 34px; height: 34px; }
.ai-card__top b { font: 700 15px/1.1 var(--font-display); display: block; }
.ai-card__top small { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.ai-card__score { margin-left: auto; font: 760 24px/1 var(--font-display); letter-spacing: -0.03em; color: var(--mint-ink); font-variant-numeric: tabular-nums; }
.ai-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ai-card p b { color: var(--coral-ink); }
.ki__stage { height: 230px; margin: -10px 0 8px; }
.checks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--ink-2); }
.checks svg { width: 22px; height: 22px; flex: none; color: var(--mint-ink); margin-top: 1px; }
.checks b { color: var(--ink); }

/* --------------------------------------------------------------------------
   Für Eltern: Beispiel-Übersicht
   -------------------------------------------------------------------------- */
.parents { background: var(--paper); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.dash {
    position: relative; margin-top: 56px;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(22, 18, 46, 0.06), 0 50px 100px -40px rgba(40, 24, 110, 0.35), 0 16px 34px -20px rgba(22, 18, 46, 0.25);
    overflow: hidden;
}
.dash__bar { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.avatar { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--sun), var(--coral)); color: #fff; font: 760 18px/1 var(--font-display); }
.dash__who b { display: block; font: 700 16px/1.1 var(--font-display); letter-spacing: -0.01em; }
.dash__who small { color: var(--ink-3); font-size: 13px; }
.seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--paper-2); margin-left: 8px; }
.seg button { border: 0; background: none; padding: 7px 12px; border-radius: 9px; font: 600 13px/1 var(--font-body); color: var(--ink-3); cursor: pointer; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(22, 18, 46, 0.12); }
.dash__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pill-demo { font: 650 12px/1 var(--font-body); padding: 7px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-3); letter-spacing: 0.02em; }
.pill-live { display: inline-flex; align-items: center; gap: 7px; font: 700 12.5px/1 var(--font-body); padding: 7px 11px; border-radius: 999px; background: #e9fbf4; color: var(--mint-ink); }
.pill-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(47, 207, 159, 0.6); animation: ping 1.8s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(47, 207, 159, 0.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(47, 207, 159, 0); } }
.dash__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding: 20px; background: #faf8f4; }
.dcard { grid-column: span 3; padding: 18px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(22, 18, 46, 0.05), 0 6px 18px -12px rgba(22, 18, 46, 0.25); }
.dcard__label { font: 600 13px/1.2 var(--font-body); color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.dcard__label svg { width: 16px; height: 16px; }
.dcard__value { margin-top: 10px; font: 760 clamp(1.7rem, 1.3rem + 1vw, 2.2rem)/1 var(--font-display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.dcard__value small { font-size: 0.5em; font-weight: 650; letter-spacing: -0.01em; color: var(--ink-3); margin-left: 3px; }
.dcard__delta { margin-top: 8px; font: 650 12.5px/1 var(--font-body); color: var(--mint-ink); display: inline-flex; align-items: center; gap: 4px; }
.dcard--chart { grid-column: span 7; grid-row: span 2; display: flex; flex-direction: column; }
.dcard--chart .stage { flex: 1; min-height: 300px; }
.dcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dcard__head h3 { font-size: 1.05rem; }
.dcard__head small { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.dcard--live { grid-column: span 5; }
.dcard--cal { grid-column: span 5; }
.dcard--words { grid-column: span 6; }
.dcard--level { grid-column: span 6; }
.live { margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--paper); }
.live__q { font: 600 14px/1.35 var(--font-body); color: var(--ink-2); }
.live__q b { color: var(--ink); }
.live__typing { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.live__input { flex: 1; height: 44px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--violet); display: flex; align-items: center; padding: 0 12px; font: 600 16px/1 var(--font-body); }
.live__input .caret { display: inline-block; width: 2px; height: 20px; background: var(--violet); margin-left: 1px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.live__meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font: 600 12.5px/1.2 var(--font-body); color: var(--ink-3); }
.live__meta span:first-child { color: var(--violet-ink); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 14px; max-width: 340px; }
.cal b { font: 650 11px/1 var(--font-body); color: var(--ink-3); text-align: center; padding-bottom: 3px; }
.cal i {
    aspect-ratio: 1; border-radius: 7px; background: var(--l0); position: relative;
    transform: scale(0.6); opacity: 0; transition: transform 0.5s var(--spring), opacity 0.4s;
    transition-delay: calc(var(--k) * 18ms);
}
.is-in .cal i { transform: none; opacity: 1; }
.cal i[data-l="1"] { background: var(--l1); }
.cal i[data-l="2"] { background: var(--l2); }
.cal i[data-l="3"] { background: var(--l3); }
.cal i[data-l="4"] { background: var(--l4); }
.cal i.is-today { box-shadow: 0 0 0 2px var(--violet); }
.cal__legend { display: flex; align-items: center; gap: 6px; margin-top: 12px; font: 600 12px/1 var(--font-body); color: var(--ink-3); }
.cal__legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.words { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.words li { display: grid; grid-template-columns: 1fr 120px 42px; gap: 12px; align-items: center; font-size: 14.5px; }
.words li b { font-weight: 650; }
.words li small { color: var(--ink-3); font-weight: 500; margin-left: 6px; }
.meter { display: block; height: 8px; border-radius: 4px; background: #f1ede6; overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 4px; background: var(--c); width: 0; transition: width 1.4s var(--smooth); }
.is-in .meter span { width: var(--w); }
.words li em { font-style: normal; font: 700 12.5px/1 var(--font-body); text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.level-row { display: flex; align-items: flex-end; gap: 16px; margin-top: 12px; }
.level-badge { font: 780 44px/0.9 var(--font-display); letter-spacing: -0.04em; background: linear-gradient(135deg, var(--sky), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.level-row div { flex: 1; }
.level-row small { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 12.5px; font-weight: 600; margin-bottom: 7px; }
.level-row .meter { height: 12px; border-radius: 6px; }
.level-note { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); }

.pfeatures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.pfeature { padding: 24px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-1); transition: transform 0.4s var(--smooth), box-shadow 0.4s; }
.pfeature:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.pfeature__icon { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--bg); color: var(--fg); margin-bottom: 16px; }
.pfeature__icon svg { width: 23px; height: 23px; }
.pfeature h3 { font-size: 1.12rem; margin-bottom: 6px; }
.pfeature p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }

/* --------------------------------------------------------------------------
   Sprachniveau
   -------------------------------------------------------------------------- */
.levels { background: linear-gradient(180deg, var(--paper) 0%, #e9f4ff 45%, #eef8f3 100%); overflow: clip; }
.levels__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.levels__stage { height: clamp(380px, 40vw, 520px); }
.ladder { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ladder li { padding: 13px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 1px var(--line); }
.ladder b { display: block; font: 760 22px/1 var(--font-display); letter-spacing: -0.03em; color: var(--c); }
.ladder span { display: block; margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fine { margin: 18px 0 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }

/* --------------------------------------------------------------------------
   Sicherheit
   -------------------------------------------------------------------------- */
.trust { background: var(--paper); }
.trust__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.tcard { position: relative; padding: 26px; border-radius: 26px; background: #fff; box-shadow: var(--shadow-1); overflow: hidden; }
.tcard__icon { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--bg); color: var(--fg); margin-bottom: 18px; }
.tcard__icon svg { width: 25px; height: 25px; }
.tcard h3 { font-size: 1.16rem; margin-bottom: 8px; }
.tcard p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.tcard--probe { grid-column: span 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; background: var(--ink); color: #fff; }
.tcard--probe p { color: rgba(255, 255, 255, 0.72); }
.tcard--probe h3 { color: #fff; }
.probe { text-align: right; }
.probe__n { font: 780 clamp(3.6rem, 2.8rem + 3vw, 5.4rem)/0.9 var(--font-display); letter-spacing: -0.05em; color: var(--mint); font-variant-numeric: tabular-nums; }
.probe__l { display: block; margin-top: 8px; font: 600 13.5px/1.3 var(--font-body); color: rgba(255, 255, 255, 0.7); }
.probe__own { display: block; margin-top: 4px; font: 500 12.5px/1.3 var(--font-body); color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Schluss
   -------------------------------------------------------------------------- */
.finale {
    background:
        radial-gradient(45% 55% at 25% 50%, rgba(140, 107, 255, 0.35), transparent 70%),
        radial-gradient(35% 45% at 85% 20%, rgba(255, 126, 182, 0.18), transparent 70%),
        var(--night);
    overflow: clip;
}
.finale::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.5px);
    background-size: 90px 90px; opacity: 0.18;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.finale__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.finale__stage { height: clamp(340px, 36vw, 480px); }
.finale__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.finale__note { margin: 20px 0 0; color: var(--on-night-3); font-size: 14.5px; }

.footer { background: #08061a; color: var(--on-night-2); padding: 56px 0 40px; font-size: 14.5px; }
.footer__grid { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer .brand { color: #fff; }
.footer__tag { margin: 8px 0 0; color: var(--on-night-3); }
.soon { display: flex; align-items: center; gap: 10px; margin: 30px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12.5px; color: var(--on-night-3); flex-wrap: wrap; }
.soon__tag { font: 700 10.5px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--on-night-2); }
.footer__copy { margin: 0; color: var(--on-night-3); font-size: 13px; }

/* --------------------------------------------------------------------------
   Anpassung an kleinere Bildschirme
   -------------------------------------------------------------------------- */
@media (max-height: 940px) and (min-width: 1000px) {
    .hero__title { font-size: clamp(2.4rem, 0.6rem + 4.3vw, 4.6rem); margin-top: 14px; }
    .hero { padding-top: calc(72px + 18px); }
    .login { margin-top: 24px; }
    .hero__facts { margin-top: 16px; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
    /* schmale Zweispalter: Kubi braucht Platz über der Karte, unten links ist der Würfel */
    .login { margin-top: 74px; }
    .chip--c { display: none; }
}
@media (max-width: 1099px) {
    .nav__links { display: none; }
    .nav__actions { margin-left: auto; }
    .tile--race, .tile--room { grid-column: span 12; min-height: 460px; }
    .tile--eggs, .tile--ducks, .tile--moles, .tile--speed { grid-column: span 6; }
    .tile--shop, .tile--more { grid-column: span 12; }
    .dcard { grid-column: span 6; }
    .dcard--chart, .dcard--live, .dcard--cal, .dcard--words, .dcard--level { grid-column: span 12; }
    .pfeatures, .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tcard--probe { grid-column: span 2; }
}
@media (max-width: 999px) {
    .hero { min-height: 0; padding-top: 84px; }
    .hero__grid { grid-template-columns: 1fr; gap: 8px; }
    .hero__stage { order: -1; height: clamp(260px, 46vw, 380px); margin: 0 calc(-1 * var(--gutter)); }
    .stage-hint { bottom: 2%; }
    .chip--a { left: 5%; top: 8%; }
    .chip--b { right: 4%; top: 13%; }
    .chip--c { left: 7%; bottom: 17%; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__title { margin-top: 14px; }
    .motor__grid, .ki__grid, .levels__grid, .finale__grid, .section-head { grid-template-columns: 1fr; }
    .worlds__stage { height: 260px; order: -1; }
    .section-head > div:first-child { order: 0; }
    .ki__demo { order: 1; }
    .levels__stage { order: -1; }
    .finale__stage { order: -1; }
    .scroll-cue { display: none; }
}
@media (max-width: 640px) {
    body { font-size: 16px; }
    .nav__inner { height: 64px; }
    .brand { font-size: 19px; }
    .hero { padding-top: 72px; }
    .hero__stage { order: 0; height: 300px; margin-top: 18px; }
    .login { margin-top: 64px; }
    .login__head { padding-right: 96px; flex-direction: column; gap: 4px; }
    .login__fields { grid-template-columns: 1fr; }
    .login__row { flex-direction: column; align-items: stretch; }
    .login__submit { width: 100%; }
    .kubi { right: 16px; top: -64px; width: 84px; height: 84px; }
    .kubi-bubble { right: 110px; top: -50px; max-width: 180px; }
    .bento { grid-auto-rows: minmax(230px, auto); gap: 14px; }
    .tile--eggs, .tile--ducks, .tile--moles, .tile--speed { grid-column: span 12; }
    .tile--race, .tile--room { min-height: 400px; }
    .shop { grid-template-columns: 1fr 1fr; }
    .shop .reward:nth-child(3) { display: none; }
    .demo__opts { grid-template-columns: 1fr 1fr; }
    .dash__grid { padding: 12px; gap: 12px; }
    .dcard { grid-column: span 6; padding: 14px; }
    .dcard--chart, .dcard--live, .dcard--cal, .dcard--words, .dcard--level { grid-column: span 12; padding: 16px; }
    .dcard__delta { font-size: 12px; line-height: 1.3; }
    .pfeatures, .trust__grid { grid-template-columns: 1fr; }
    .tcard--probe { grid-column: span 1; grid-template-columns: 1fr; }
    .probe { text-align: left; }
    .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-card { right: 0; }
    .paper { padding: 26px 22px 22px 50px; }
    .paper__row { font-size: 24px; }
    .ticker { height: 120px; margin: -60px 0; }
    .chips { display: none; }
    .stat { padding: 20px 18px 18px; }
    .stat span { font-size: 0.98rem; }
    .stat small { font-size: 13px; }
    .ticker__track { font-size: 16px; }
    .words li { grid-template-columns: 1fr 80px 38px; }
}

/* ==========================================================================
   Dunkles Design – der Standard. Hell nur mit data-theme="light" am <html>.
   ========================================================================== */
.nav__actions { display: flex; align-items: center; gap: 10px; }
/* Handy: Sprachwahl, Design-Knopf und ein längeres „Se connecter“ passen nebeneinander in die Kopfzeile */
@media (max-width: 430px) { .nav__actions { gap: 6px; } .nav__actions .nav__cta { padding-left: 12px; padding-right: 12px; white-space: nowrap; } .nav__language select { padding: 6px 2px !important; } }
@media (max-width: 380px) { .nav__actions { gap: 4px; } .nav__actions .nav__cta { padding-left: 9px; padding-right: 9px; font-size: 0.8rem; } .nav__actions .theme-toggle { width: 34px; height: 34px; } }
.theme-toggle {
    position: relative; width: 42px; height: 42px; flex: none;
    display: grid; place-items: center;
    border: 0; border-radius: 999px; cursor: pointer;
    background: transparent; color: inherit;
    box-shadow: inset 0 0 0 1.5px var(--line-2);
    transition: background-color 0.2s, transform 0.35s var(--spring);
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { background: var(--hover); }
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity 0.3s ease, transform 0.55s var(--spring); }
.theme-toggle .i-moon { opacity: 0; transform: rotate(-70deg) scale(0.5); }
:root[data-theme="light"] .theme-toggle .i-sun { opacity: 0; transform: rotate(70deg) scale(0.5); }
:root[data-theme="light"] .theme-toggle .i-moon { opacity: 1; transform: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

:root[data-theme="light"] { color-scheme: light; }
:root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #f4f1ff;
    --ink-2: rgba(236, 232, 255, 0.78);
    --ink-3: rgba(236, 232, 255, 0.56);
    --paper: #0e0c20;
    --paper-2: #151231;
    --card: #17142f;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.16);
    --hover: rgba(255, 255, 255, 0.08);
    --l0: rgba(255, 255, 255, 0.07); --l1: rgba(255, 194, 61, 0.34);
    --violet-ink: #b8a4ff;
    --mint-ink: #43e0b2;
    --coral-ink: #ff8f82;
    --night: #08071a;
    --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 30px -16px rgba(0, 0, 0, 0.8);
    --shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 26px 60px -26px rgba(0, 0, 0, 0.85);
    --shadow-3: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 40px 90px -32px rgba(0, 0, 0, 0.9), 0 0 80px -34px rgba(140, 107, 255, 0.45);
}
:where(:root:not([data-theme="light"])) .grain { mix-blend-mode: overlay; opacity: 0.08; }
:where(:root:not([data-theme="light"])) .skip { background: #fff; color: #16122e; }
:where(:root:not([data-theme="light"])) .eyebrow { background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 24px -14px rgba(0, 0, 0, 0.7); }
:where(:root:not([data-theme="light"])) .btn--dark { background: #fff; color: #16122e; box-shadow: 0 10px 30px -12px rgba(140, 107, 255, 0.6); }
:where(:root:not([data-theme="light"])) .btn--dark:hover { background: #ebe6ff; }
:where(:root:not([data-theme="light"])) .btn--primary {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(40, 14, 140, 0.25),
        0 14px 36px -10px rgba(124, 88, 255, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
:where(:root:not([data-theme="light"])) .nav.is-scrolled { background: rgba(14, 12, 32, 0.72); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07); }
:where(:root:not([data-theme="light"])) .nav__links a:hover { background: rgba(255, 255, 255, 0.08); }
:where(:root:not([data-theme="light"])) .brand__study { color: #b7a6ff; }

/* Start */
:where(:root:not([data-theme="light"])) .hero__sky::before {
    background:
        radial-gradient(55% 48% at 76% 42%, rgba(140, 107, 255, 0.28), transparent 70%),
        radial-gradient(40% 40% at 10% 6%, rgba(255, 194, 61, 0.09), transparent 70%),
        radial-gradient(45% 40% at 4% 90%, rgba(255, 107, 91, 0.1), transparent 70%),
        radial-gradient(45% 45% at 96% 96%, rgba(47, 207, 159, 0.12), transparent 70%);
}
:where(:root:not([data-theme="light"])) .hero__sky::after { background: radial-gradient(560px circle at var(--sx, 72%) var(--sy, 42%), rgba(160, 130, 255, 0.17), transparent 65%); }
:where(:root:not([data-theme="light"])) .blob { opacity: 0.3; }
:where(:root:not([data-theme="light"])) .blob--a { background: #6a4bff; }
:where(:root:not([data-theme="light"])) .blob--b { background: #ff6b5b; opacity: 0.14; }
:where(:root:not([data-theme="light"])) .blob--c { background: #2fcf9f; opacity: 0.14; }
:where(:root:not([data-theme="light"])) .hero__dots { background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.1px, transparent 1.4px); }
:where(:root:not([data-theme="light"])) .stage-glow { background: radial-gradient(closest-side, rgba(140, 107, 255, 0.36), transparent); }
:where(:root:not([data-theme="light"])) .stage-hint { background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
:where(:root:not([data-theme="light"])) .chip__in { background: rgba(28, 24, 58, 0.72); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 48px -22px rgba(0, 0, 0, 0.85); }
:where(:root:not([data-theme="light"])) :is(.chip__icon, .pfeature__icon, .tcard__icon, .reward__icon) {
    background: color-mix(in srgb, var(--fg) 20%, transparent);
    color: color-mix(in srgb, var(--fg) 50%, #fff);
}
:where(:root:not([data-theme="light"])) .login__card {
    background: rgba(24, 20, 50, 0.78);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 100px -30px rgba(140, 107, 255, 0.45);
}
:where(:root:not([data-theme="light"])) .field__box { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.08); }
:where(:root:not([data-theme="light"])) .field__box:hover { background: rgba(255, 255, 255, 0.09); }
:where(:root:not([data-theme="light"])) .field__box:focus-within { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 2px var(--violet), 0 0 0 5px rgba(140, 107, 255, 0.24); }
:where(:root:not([data-theme="light"])) .field__box input::placeholder { color: rgba(236, 232, 255, 0.38); }
:where(:root:not([data-theme="light"])) .field__eye:hover { background: rgba(255, 255, 255, 0.08); }
:where(:root:not([data-theme="light"])) .switch__track { background: rgba(255, 255, 255, 0.16); }
:where(:root:not([data-theme="light"])) .login__error { background: rgba(255, 107, 91, 0.12); color: #ffa196; box-shadow: inset 0 0 0 1px rgba(255, 107, 91, 0.32); }
:where(:root:not([data-theme="light"])) .kubi-bubble { background: #fff; color: #16122e; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.7); }
:where(:root:not([data-theme="light"])) .ticker__band--a { background: linear-gradient(90deg, #5a3de0, #7c58ff 50%, #5a3de0); box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.8); }
:where(:root:not([data-theme="light"])) .tag { background: rgba(255, 255, 255, 0.08); }

/* Spielwelten */
:where(:root:not([data-theme="light"])) .section--round { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
:where(:root:not([data-theme="light"])) .tile { background: var(--card); }
:where(:root:not([data-theme="light"])) .tile:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 70px -24px rgba(0, 0, 0, 0.9); }
:where(:root:not([data-theme="light"])) .tile--shop { background: linear-gradient(160deg, #281d45, #2a1532); }
:where(:root:not([data-theme="light"])) .tile--more { background: #1a1637; }
:where(:root:not([data-theme="light"])) .tile--room { background: #1d1640; }
:where(:root:not([data-theme="light"])) .tile--speed { background: linear-gradient(160deg, #221b4d, #120d2c); }
:where(:root:not([data-theme="light"])) .word-tag { color: #16122e; }
:where(:root:not([data-theme="light"])) .reward { background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
:where(:root:not([data-theme="light"])) .reward__bar { background: rgba(255, 255, 255, 0.1); }
:where(:root:not([data-theme="light"])) .stat { background: var(--card); }

/* KI, Eltern, Niveau, Sicherheit */
:where(:root:not([data-theme="light"])) .ki { background: linear-gradient(180deg, var(--paper) 0%, #171239 55%, var(--paper) 100%); }
:where(:root:not([data-theme="light"])) .ai-card { background: rgba(28, 24, 58, 0.95); }
:where(:root:not([data-theme="light"])) .dash {
    background: #141130;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 60px 120px -40px rgba(0, 0, 0, 0.9), 0 0 140px -60px rgba(140, 107, 255, 0.5);
}
:where(:root:not([data-theme="light"])) .dash__grid { background: #0f0c25; }
:where(:root:not([data-theme="light"])) .dcard { background: #1a1739; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
:where(:root:not([data-theme="light"])) .seg { background: rgba(255, 255, 255, 0.06); }
:where(:root:not([data-theme="light"])) .seg button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); box-shadow: none; }
:where(:root:not([data-theme="light"])) .pill-demo { background: rgba(255, 255, 255, 0.07); }
:where(:root:not([data-theme="light"])) .pill-live { background: rgba(47, 207, 159, 0.14); }
:where(:root:not([data-theme="light"])) .live { background: rgba(255, 255, 255, 0.04); }
:where(:root:not([data-theme="light"])) .live__input { background: rgba(255, 255, 255, 0.06); }
:where(:root:not([data-theme="light"])) .meter { background: rgba(255, 255, 255, 0.08); }
:where(:root:not([data-theme="light"])) :is(.pfeature, .tcard) { background: var(--card); }
:where(:root:not([data-theme="light"])) .levels { background: linear-gradient(180deg, var(--paper) 0%, #0e1634 42%, #0c1b22 78%, var(--paper) 100%); }
:where(:root:not([data-theme="light"])) .ladder li { background: rgba(255, 255, 255, 0.05); }
:where(:root:not([data-theme="light"])) .tcard--probe { background: linear-gradient(135deg, #231b52, #131030); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), var(--shadow-2); }
:where(:root:not([data-theme="light"])) .footer { background: #07061a; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .js .reveal, .js .hero-in, .js .hero__title .word, .js .chip__in { opacity: 1; transform: none; filter: none; scale: 1; }
    .ticker__track { animation: none; }
}

/* ==========================================================================
   Start, Stufe 2 (nur dunkles Design): Sternenhimmel mit Planetenbogen,
   leuchtende Überschrift mit Schwung, Handschrift-Notiz, Boden unter dem
   Würfel, farbig leuchtende Karten. Lesbarkeit geht vor Deko.
   ========================================================================== */
:where(:root:not([data-theme="light"])) .hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(1.4px 1.4px at 8% 14%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 22% 62%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1.6px 1.6px at 37% 28%, rgba(210,200,255,0.8), transparent),
        radial-gradient(1px 1px at 55% 86%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.8px 1.8px at 68% 9%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 83% 44%, rgba(190,210,255,0.75), transparent),
        radial-gradient(1.3px 1.3px at 93% 71%, rgba(255,255,255,0.65), transparent),
        radial-gradient(1px 1px at 4% 91%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 47% 4%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 30% 97%, rgba(210,200,255,0.6), transparent);
    background-size: 560px 560px;
    animation: lp-twinkle 7s ease-in-out infinite alternate;
}
@keyframes lp-twinkle { to { opacity: 0.55; } }
/* Planetenbogen oben rechts: nur ein leuchtender Rand, kein Bild */
:where(:root:not([data-theme="light"])) .hero::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    width: min(760px, 62vw); aspect-ratio: 1; right: max(-260px, -18vw); top: -14%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 70%, rgba(120, 96, 255, 0.16), rgba(40, 28, 110, 0.12) 45%, transparent 66%);
    box-shadow: inset 10px -8px 0 -6px rgba(190, 170, 255, 0.35), inset 26px -22px 60px -30px rgba(160, 130, 255, 0.55), 0 0 80px -30px rgba(140, 107, 255, 0.6);
    opacity: 0.85;
}

/* Überschrift: sanftes Leuchten, ein Schwung unter „siehst." */
:where(:root:not([data-theme="light"])) .hero__title { text-shadow: 0 0 42px rgba(140, 107, 255, 0.32); }
:where(:root:not([data-theme="light"])) .hero__title em { filter: drop-shadow(0 0 16px rgba(255, 126, 182, 0.35)); }
.hero__title .line:last-child em.word:last-child { position: relative; }
.hero__title .line:last-child em.word:last-child::after {
    content: ""; position: absolute; left: -4%; right: -8%; bottom: -0.16em; height: 0.26em; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23FF6B5B' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23FF7EB6'/%3E%3Cstop offset='1' stop-color='%238C6BFF' stop-opacity='.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 22C80 8 190 4 296 14' fill='none' stroke='url(%23g)' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    clip-path: inset(0 100% 0 0); animation: lp-swoosh 1.1s cubic-bezier(.22,1,.36,1) 1.6s forwards;
}
@keyframes lp-swoosh { to { clip-path: inset(0 0 0 0); } }

/* Handschrift-Notiz neben dem Würfel */
.hand-note { display: none; }
:where(:root:not([data-theme="light"])) .hand-note {
    display: block; position: absolute; right: 4%; top: -24%; z-index: 2; margin: 0;
    font: 600 clamp(1.25rem, 1.6vw, 1.6rem)/1.05 var(--font-hand); color: #b9a8ff;
    transform: rotate(-9deg); text-shadow: 0 0 18px rgba(140, 107, 255, 0.55); pointer-events: none;
}
.hand-note::after {
    content: ""; display: block; width: 72%; height: 12px; margin: 4px 0 0 18%;
    border-bottom: 1.5px solid rgba(183, 166, 255, 0.55); border-radius: 0 0 50% 50%;
}

/* Boden unter dem Würfel: weicher Lichtfleck mit Horizontlinie */
:where(:root:not([data-theme="light"])) .stage-glow::after {
    content: ""; position: absolute; left: 8%; right: 8%; bottom: 4%; height: 22%; pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, rgba(140, 107, 255, 0.42), rgba(74, 168, 255, 0.12) 55%, transparent 72%);
    filter: blur(6px);
}
:where(:root:not([data-theme="light"])) .stage-glow::before {
    content: ""; position: absolute; left: 12%; right: 12%; bottom: 14%; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(183, 166, 255, 0.5), transparent);
}

/* Karten um den Würfel: dunkles Glas mit farbigem Rand */
:where(:root:not([data-theme="light"])) .chip--a .chip__in { box-shadow: 0 0 0 1px rgba(255, 107, 91, 0.45), 0 0 26px -6px rgba(255, 107, 91, 0.55), 0 20px 40px -20px rgba(0, 0, 0, 0.8); }
:where(:root:not([data-theme="light"])) .chip--b .chip__in { box-shadow: 0 0 0 1px rgba(47, 207, 159, 0.45), 0 0 26px -6px rgba(47, 207, 159, 0.55), 0 20px 40px -20px rgba(0, 0, 0, 0.8); }
:where(:root:not([data-theme="light"])) .chip--c .chip__in { box-shadow: 0 0 0 1px rgba(140, 107, 255, 0.5), 0 0 26px -6px rgba(140, 107, 255, 0.6), 0 20px 40px -20px rgba(0, 0, 0, 0.8); }


@media (max-width: 900px) {
    .hand-note { display: none !important; }
    :where(:root:not([data-theme="light"])) .hero::after { width: 300px; right: -170px; top: 40px; opacity: 1; background: radial-gradient(circle at 30% 70%, rgba(130, 100, 255, 0.34), rgba(50, 34, 130, 0.3) 45%, rgba(20, 14, 60, 0.2) 66%, transparent 71%); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__title .line:last-child em.word:last-child::after { clip-path: none; animation: none; }
}

/* Erster Bildschirm am Rechner: etwas weniger Luft oben, damit die Vorteile sichtbar bleiben */
@media (min-width: 901px) and (max-height: 1000px) {
    .hero { padding-top: calc(72px + clamp(8px, 2.4vh, 28px)); }
}

/* Rechner: Kubis Sprechblase rechts neben Kubi, nicht über dem Einleitungstext */
@media (min-width: 1101px) {
    .kubi-bubble { right: auto; left: calc(100% + 14px); top: -38px; width: max-content; max-width: 185px; border-radius: 16px 16px 16px 4px; transform-origin: 0 100%; }
}

/* Handy: kürzerer Einstieg, damit die Anmeldung früher kommt */
@media (max-width: 600px) {
    .lead-more { display: none; }
    .kubi-bubble { display: none !important; }
}

/* Sprechblase und Anmeldung liegen immer vor den fliegenden Würfeln */
.hero__copy { z-index: 41; }

/* Handy: Anmeldung direkt unter der Überschrift, Text danach */
@media (max-width: 600px) {
    .hero__copy { display: flex; flex-direction: column; }
    .hero__copy .lead { order: 2; margin-top: 22px; }
    .hero__copy .login { order: 1; }
    .hero__copy > :not(.lead):not(.login) { order: 3; }
}
/* Mehr Tiefe im dunklen Himmel: farbige Nebel */
:where(:root:not([data-theme="light"])) .hero__sky {
    background:
        radial-gradient(30% 34% at 70% 58%, rgba(140, 90, 255, 0.22), transparent 70%),
        radial-gradient(26% 30% at 92% 30%, rgba(63, 160, 255, 0.16), transparent 70%),
        radial-gradient(34% 30% at 8% 88%, rgba(255, 107, 150, 0.14), transparent 70%),
        radial-gradient(24% 26% at 45% 12%, rgba(63, 224, 197, 0.08), transparent 70%);
}

/* Astra-Runde 2: kürzerer Einstieg, mehr Kontrast bei Kleingedrucktem, kleinere Lücke am Handy */
.lead-more { display: none; }
:where(:root:not([data-theme="light"])) .login__note { color: #c3bce6; }
:where(:root:not([data-theme="light"])) .chip__txt small { color: #c9c2ee; opacity: 1; }
:where(:root:not([data-theme="light"])) .hero__facts { color: #e4dfff; }
@media (max-width: 600px) {
    .hero__copy .login { margin-top: 56px; }
    .hero__top { padding-bottom: 0; }
}
@media (min-width: 1101px) { .hero__copy .login { margin-top: 64px; } }

/* Astra-Runde 3: Karten um den Würfel liegen vor der 3D-Ebene und sind deckender */
.chips { position: absolute; inset: 0; z-index: 41; pointer-events: none; }
.chip { pointer-events: auto; }
:where(:root:not([data-theme="light"])) .chip__in { background: rgba(34, 28, 72, 0.94); }
/* Handy: kurzer Nutzen-Satz vor dem Formular */
@media (max-width: 600px) {
    .hero__copy .lead { order: 0; margin: 14px 0 0; font-size: 1rem; line-height: 1.5; }
    .hero__copy .lead .lead-tail { display: none; }
    .hero__copy .login { margin-top: 64px; }
}

/* Sichtbare Sprechblase: direkt im <body>, über der 3D-Leinwand (z 40) */
.kubi-bubble.kubi-bubble--front { position: fixed; z-index: 45; right: auto; bottom: auto; margin: 0; max-width: none; box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Handy: Kopfleiste unter Statusleiste und URL-Leiste
   --------------------------------------------------------------------------
   Die Seite zeichnet mit viewport-fit=cover bis unter die Statusleiste (Chrome
   Android zieht die Seite beim Scrollen randlos hoch). Ohne diesen Abstand
   rutschte die Kopfleiste darunter. landing.js schiebt sie zusaetzlich mit,
   wenn der sichtbare Ausschnitt gegen die Seite versetzt ist (URL-Leiste,
   Tastatur). */
.nav { padding-top: env(safe-area-inset-top, 0px); }
.progress { top: env(safe-area-inset-top, 0px); }
html { scroll-padding-top: calc(88px + env(safe-area-inset-top, 0px)); }
.nav, .progress { will-change: transform; }

/* Die schraegen Baender ragen links und rechts 4 % ueber den Rand. Auf dem
   Handy machte das die Seite breiter als den Bildschirm (412 -> 429 px), und
   rechts blieb ein schwarzer Streifen. Seitlich abschneiden, oben und unten
   nicht. */
.ticker { overflow-x: clip; }

/* Rechtliches im Fuss */
.footer__copy a { color: inherit; text-decoration: none; }
.footer__copy a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Handy: Karten und Notiz rund um den Würfel – oben und unten, ruhig (ohne Schweben) */
@media (max-width: 640px) {
    .hero__stage { height: 460px; }
    .chips { display: block; }
    .chip { translate: none; }
    .chip__in { gap: 9px; padding: 7px 13px 7px 7px; border-radius: 15px; }
    .chips-on .chip__in { animation: chip-in 0.8s var(--spring) both; animation-delay: calc(var(--n) * 0.22s); }
    .chip__icon { width: 31px; height: 31px; border-radius: 10px; }
    .chip__icon svg { width: 17px; height: 17px; }
    .chip__txt b { font-size: 14px; }
    .chip__txt small { font-size: 11px; margin-top: 3px; }
    .chip--b { left: auto; right: 16px; top: 8px; }
    .chip--a { left: 16px; right: auto; top: auto; bottom: 64px; }
    .chip--c { left: auto; right: 16px; top: auto; bottom: 64px; }
    .stage-hint { bottom: 8px; }
    :where(:root:not([data-theme="light"])) .hand-note {
        display: block !important; left: 18px; right: auto; top: 10px; font-size: 1.2rem;
    }
}
@media (max-width: 380px) {
    .chip--c .chip__txt small { display: none; }
}

/* Ebene für Karten und Hinweis über der 3D-Leinwand (landing.js legt sie über die Bühne) */
.stage-front { position: absolute; z-index: 41; pointer-events: none; }

/* ==========================================================================
 * Leichter Modus (html.leicht) für schwache Geräte, seit 2026-09-28.
 * landing.js misst beim ersten Scrollen; ist mehr als ein Drittel der Bilder zu langsam, schaltet es hierher
 * und merkt es sich 7 Tage (login.php setzt die Klasse dann vor dem ersten Bild). Gemessen auf einem
 * Galaxy A33 (Mali-G68, 90 Hz, warm): normal 37 fps, ohne Glas und Filter 54–59, dazu ohne Würfel 67–68.
 * Darum: kein Glas (fast deckende Flächen statt Unschärfe, gleich gut lesbar), keine blur-Filter (Lichtflecken
 * als Verlauf, Einblenden ohne Unschärfe), und der Würfel spart (tensor.js). Starke Geräte sehen das nie.
 * ======================================================================== */
html.leicht .eyebrow, html.leicht .nav.is-scrolled, html.leicht .stage-hint, html.leicht .chip__in,
html.leicht .login__card, html.leicht .demo, html.leicht .ai-card, html.leicht .tile__body .tag {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* hell */
html.leicht[data-theme="light"] .nav.is-scrolled { background: rgb(251, 248, 243); }   /* ganz deckend: ohne Unschärfe schiene Text durch */
html.leicht[data-theme="light"] .eyebrow, html.leicht[data-theme="light"] .stage-hint { background: rgba(255, 255, 255, 0.94); }
html.leicht[data-theme="light"] .chip__in, html.leicht[data-theme="light"] .login__card, html.leicht[data-theme="light"] .ai-card { background: rgba(255, 255, 255, 0.98); }
/* dunkel (Standard) */
html.leicht:not([data-theme="light"]) .nav.is-scrolled { background: rgb(14, 12, 32); }
html.leicht:not([data-theme="light"]) .nav.is-night.is-scrolled { background: rgb(13, 10, 31); }
html.leicht:not([data-theme="light"]) .eyebrow, html.leicht:not([data-theme="light"]) .stage-hint { background: rgba(26, 22, 56, 0.9); }
html.leicht:not([data-theme="light"]) .chip__in { background: rgba(34, 28, 72, 0.99); }
html.leicht:not([data-theme="light"]) .login__card { background: rgba(24, 20, 50, 0.97); }
html.leicht:not([data-theme="light"]) .ai-card { background: rgb(28, 24, 58); }
/* Lichtflecken: Verlauf statt blur(70px); die Fläche wächst um den Rand, den die Unschärfe ausfranste */
html.leicht .blob { filter: none; margin: -70px; padding: 70px; box-sizing: content-box; background: radial-gradient(closest-side, currentColor, transparent) !important; }
html.leicht .blob--a { color: #cbbcff; } html.leicht .blob--b { color: #ffd9b8; } html.leicht .blob--c { color: #b9f0dc; }
html.leicht:not([data-theme="light"]) .blob--a { color: #6a4bff; }
html.leicht:not([data-theme="light"]) .blob--b { color: #ff6b5b; }
html.leicht:not([data-theme="light"]) .blob--c { color: #2fcf9f; }
/* Bühnenlicht ist schon ein Verlauf (seine kleine Horizontlinie behält den Filter: klein und still, also billig);
   Einblenden nur mit Deckkraft und Bewegung; schwebende Bilder ohne Schlagschatten */
html.leicht .stage-glow,
html.leicht.js .reveal, html.leicht.js .hero-in, html.leicht.js .hero__title .word,
html.leicht .speed__word.is-hidden, html.leicht .room__item img { filter: none !important; }