/* Nightdeck – Website. Nachtblau mit Bernstein wie die App, Schriften lokal (OFL), keine fremden Anfragen. */

@font-face {font-family:"Plus Jakarta Sans";font-weight:400;font-display:swap;src:url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2");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: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-ext-400-normal.woff2") format("woff2"); 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: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); 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: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-ext-600-normal.woff2") format("woff2"); 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: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); 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: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-ext-800-normal.woff2") format("woff2"); 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; }
/* Kyrillisch und Griechisch: Inter (Plus Jakarta Sans hat diese Schriften nicht) */
@font-face {font-family:"Inter";font-weight:400;font-display:swap;src:url("fonts/inter-cyrillic-400-normal.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/inter-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-weight: 800; font-display: swap; src: url("fonts/inter-cyrillic-800-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/inter-cyrillic-ext-400-normal.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/inter-cyrillic-ext-600-normal.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-weight: 800; font-display: swap; src: url("fonts/inter-cyrillic-ext-800-normal.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/inter-greek-400-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/inter-greek-600-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Inter"; font-weight: 800; font-display: swap; src: url("fonts/inter-greek-800-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

:root {
  --bg: #080a1c;
  --night: #0d1030;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.1);
  --text: #f4f1ea;
  --muted: #a9abc6;
  --accent: #ffb547;
  --accent-soft: rgba(255, 181, 71, 0.14);
  --ink: #1a1204;
  --radius: 18px;
  --wrap: 1120px;color-scheme:dark;
}

* {box-sizing:border-box; }
html {background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%; }
body {margin:0;color:var(--text);font:400 17px/1.6 "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;background:radial-gradient(1100px 620px at 22% -8%, rgba(255, 181, 71, 0.11), transparent 62%),
    radial-gradient(900px 700px at 92% 2%, rgba(84, 92, 214, 0.2), transparent 62%),
    linear-gradient(180deg, var(--night) 0, var(--bg) 900px);background-repeat:no-repeat;background-color:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce) { html {scroll-behavior:auto; } }

a {color:var(--accent);text-decoration:none; }
a:hover {text-decoration:underline;text-underline-offset:3px; }
a:focus-visible, summary:focus-visible, .btn:focus-visible {outline:2px solid var(--accent);outline-offset:3px;border-radius:8px; }
img {max-width:100%;height:auto;display:block; }
h1, h2, h3 {line-height:1.15;letter-spacing:-0.02em;margin:0 0 0.5em; }
h1 {font-size:clamp(38px, 6.4vw, 72px);font-weight:800; }
h2 {font-size:clamp(28px, 3.6vw, 40px);font-weight:800; }
h3 {font-size:19px;font-weight:600;letter-spacing:-0.01em; }
p {margin:0 0 1em; }
strong {font-weight:600; }

.wrap {max-width:var(--wrap);margin:0 auto;padding:0 24px; }
.wrap.narrow {max-width:780px; }
.sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }
.skip {position:absolute;right:-9999px;top:8px;background:var(--accent);color:var(--ink);padding:8px 14px;border-radius:10px;z-index:30; }
.skip:focus {right:16px; }
.ico {width:1em;height:1em;flex:none; }
.fine {color:var(--muted);font-size:14.5px; }
.fine .ico {vertical-align:-0.15em;margin-left:8px;color:var(--accent); }

/* Kopf */
.top {position:sticky;top:0;z-index:20;background:rgba(8, 10, 28, 0.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line); }
.bar {display:flex;align-items:center;gap:28px;height:64px; }
.brand {display:inline-flex;align-items:center;gap:10px;color:var(--text);font-weight:800;font-size:19px;letter-spacing:-0.01em; }
.brand:hover {text-decoration:none; }
.top nav {display:flex;gap:22px;margin-right:auto; }
.top nav a {color:var(--muted);font-size:15px;font-weight:600; }
.top nav a:hover {color:var(--text);text-decoration:none; }

/* Sprachwahl ohne Skript */
.lang {position:relative; }
.lang summary {list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-size:14.5px;font-weight:600;color:var(--text);background:var(--surface); }
.lang summary::-webkit-details-marker {display:none; }
.lang summary .ico {color:var(--accent);font-size:17px; }
.lang ul {position:absolute;left:0;top:calc(100% + 8px);margin:0;padding:8px;list-style:none;background:#11142e;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0, 0, 0, 0.5);columns:2;column-gap:4px;width:330px;max-height:70vh;overflow:auto; }
.lang li {break-inside:avoid; }
.lang li a {display:block;padding:7px 10px;border-radius:8px;color:var(--text);font-size:15px; }
.lang li a:hover {background:var(--surface-2);text-decoration:none; }
.lang li a[aria-current] {color:var(--accent);font-weight:600; }

/* Knöpfe */
.btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font-weight:600;font-size:16px;color:var(--text);background:var(--surface-2);border:1px solid var(--line); }
.btn:hover {text-decoration:none;background:rgba(255, 255, 255, 0.12); }
.btn.primary {background:var(--accent);color:var(--ink);border-color:transparent; }
.btn.primary:hover {background:#ffc46b; }
.btn.disabled {color:var(--muted);background:transparent;border-style:dashed;cursor:default; }

.kicker {display:inline-block;color:var(--accent);font-weight:600;font-size:14px;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:18px; }
.lead {font-size:clamp(18px, 2vw, 21px);color:#d9d8e6;max-width:40em; }
.cta {display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 18px; }
.note {display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:15px;max-width:44em; }
.note .ico {margin-top:4px;color:var(--accent); }

/* Start: Nachthimmel, Mond, Fernseher mit der laufenden App */
.hero {position:relative;padding:96px 0 24px;overflow:hidden;isolation:isolate; --mx: 72%; --my: 18%; }
.sky {position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px 380px at var(--mx) var(--my), rgba(255, 181, 71, 0.10), transparent 70%),
    url("stars.svg") 0 0 / 600px 600px,
    radial-gradient(1200px 700px at 50% 110%, rgba(84, 92, 214, 0.28), transparent 65%),
    linear-gradient(180deg, #05061a 0, var(--night) 55%, var(--bg) 100%);-webkit-mask-image:linear-gradient(180deg, #000 70%, transparent);mask-image:linear-gradient(180deg, #000 70%, transparent); }
.sky::after {content:"";position:absolute;inset:0;background:url("stars.svg") 300px 180px / 900px 900px;opacity:0.45;animation:twinkle 7s ease-in-out infinite alternate; }
@keyframes twinkle { from {opacity:0.15; } to {opacity:0.55; } }
.moon {position:absolute;left:5%;top:28px;width:104px;height:104px;border-radius:50%;background:radial-gradient(circle at 64% 34%, #ffe2ad, #ffb547 60%, #e89528);box-shadow:0 0 60px 18px rgba(255, 181, 71, 0.28),0 0 220px 90px rgba(255, 181, 71, 0.12);-webkit-mask-image:radial-gradient(circle at 22% 30%, transparent 44%, #000 45%);mask-image:radial-gradient(circle at 22% 30%, transparent 44%, #000 45%);animation:moonrise 1.6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes moonrise { from {transform:translateY(40px);opacity:0; } to {transform:none;opacity:1; } }
.hero-copy {text-align:center; }
.hero .kicker {display:inline-flex;align-items:center;gap:10px;padding:7px 12px 7px 16px;border:1px solid rgba(255, 181, 71, 0.3);border-radius:999px;background:rgba(255, 181, 71, 0.08);letter-spacing:0.06em; }
.hero .kicker .logo {flex:none; }
.hero h1 {max-width:16ch;margin:0 auto 0.35em;font-size:clamp(44px, 8vw, 104px);line-height:1;letter-spacing:-0.04em;background:linear-gradient(180deg, #fff 30%, #d9d4ea 100%);-webkit-background-clip:text;background-clip:text;color:transparent; }
.hero .lead {margin:0 auto; }
.hero .cta {justify-content:center; }
.btn.big {min-height:56px;padding:0 28px;font-size:17px; }
.btn.primary.big {box-shadow:0 10px 40px rgba(255, 181, 71, 0.35); }
.hero .note {justify-content:center;margin:28px auto 0;text-align:right; }

.stage {position:relative;margin:48px auto 0;max-width:1180px;padding:0 24px;perspective:1800px; }
.tv3d {position:relative;padding:12px 12px 14px;border-radius:26px;background:linear-gradient(180deg, #2a2d48, #0f1124 60%);border:1px solid rgba(255, 255, 255, 0.09);box-shadow:0 60px 140px rgba(0, 0, 0, 0.65),0 0 0 1px rgba(0, 0, 0, 0.5) inset,0 -1px 0 rgba(255, 255, 255, 0.12) inset,0 0 160px rgba(255, 181, 71, 0.10);transform:rotateX(8deg) scale(0.96);transform-origin:50% 100%;animation:tvin 1.4s .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tvin { from {transform:rotateX(22deg) translateY(60px) scale(0.9);opacity:0; } to {transform:rotateX(8deg) scale(0.96);opacity:1; } }
.screen {position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16 / 9; }
.screen video, .screen img {width:100%;height:100%;object-fit:cover;display:block; }
.screen::after {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(245deg, rgba(255, 255, 255, 0.07), transparent 38%); }
.floor {height:90px;margin:-30px 8% 0;border-radius:50%;background:radial-gradient(closest-side, rgba(255, 181, 71, 0.18), transparent);filter:blur(18px); }

/* Sprachband */
.langs-band {padding:40px 0 56px;position:relative; }
.band-label {display:flex;justify-content:center;align-items:center;gap:10px;color:var(--muted);font-weight:600;font-size:14px;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:22px; }
.band-label .ico {color:var(--accent);font-size:18px; }
.marquee {overflow:hidden;-webkit-mask-image:linear-gradient(270deg, transparent, #000 12%, #000 88%, transparent);mask-image:linear-gradient(270deg, transparent, #000 12%, #000 88%, transparent); }
.marquee + .marquee {margin-top:12px; }
.track {display:flex;gap:12px;width:max-content;animation:slide 60s linear infinite; }
.marquee.rev .track {animation-direction:reverse;animation-duration:72s; }
.track span {display:inline-flex;align-items:baseline;gap:10px;padding:12px 20px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:20px;font-weight:600;white-space:nowrap; }
.track small {color:var(--muted);font-size:13px;font-weight:400; }
@keyframes slide { to {transform:translateX(50%); } }

section {padding:88px 0; }
section h2 {margin-bottom:28px; }
section h2 .ico {color:var(--accent);margin-left:12px;vertical-align:-0.12em; }
h2 {font-size:clamp(32px, 4.6vw, 56px);letter-spacing:-0.03em; }

/* Funktionen als Geschichte */
.story h2 {text-align:center;max-width:18ch;margin:0 auto 72px; }
.chapter {display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:center;margin-bottom:96px; }
.chapter.flip {grid-template-columns:1fr 1.35fr; }
.chapter.flip .frame {order:2; }
.frame {margin:0;padding:8px;border-radius:20px;background:linear-gradient(180deg, #23263f, #121427);border:1px solid var(--line);box-shadow:0 40px 100px rgba(0, 0, 0, 0.5); }
.frame img {border-radius:13px;width:100%; }
.copy .num {display:block;font-size:15px;font-weight:800;letter-spacing:0.1em;color:var(--accent);margin-bottom:14px; }
.copy .num::after {content:"";display:inline-block;width:44px;height:2px;background:var(--accent);opacity:0.5;margin-right:12px;vertical-align:middle; }
.copy h3 {font-size:clamp(26px, 3vw, 38px);font-weight:800;letter-spacing:-0.03em; }
.copy p {color:#cfcfe0;font-size:18px; }
.more-title {text-align:center;font-size:clamp(22px, 2.4vw, 28px);font-weight:800;margin:24px 0 26px; }
.grid {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3, 1fr);gap:16px; }
.grid li {background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 20px;transition:border-color .3s, background .3s, transform .3s; }
.grid li:hover {border-color:rgba(255, 181, 71, 0.35);background:rgba(255, 181, 71, 0.05);transform:translateY(-3px); }
.grid li > .ico {font-size:26px;color:var(--accent);margin-bottom:14px; }
.grid h4 {font-size:18px;font-weight:600;margin:0 0 6px;letter-spacing:-0.01em; }
.grid p {color:var(--muted);font-size:15.5px;margin:0; }
.credit {text-align:center;margin-top:28px; }

/* Mondphasen als Trenner */
.phases {height:20px;background:url("phases.svg") center / auto 20px no-repeat;opacity:0.8; }

/* Reiner Player */
.player .wrap {background:radial-gradient(600px 240px at 0 0, rgba(255, 181, 71, 0.16), transparent 70%), var(--surface);border:1px solid rgba(255, 181, 71, 0.25);border-radius:28px;padding:44px; }
.player h2 {font-size:clamp(26px, 3vw, 36px); }

/* Geräte */
.get .kicker, .get h2 {text-align:center;display:block; }
.get h2 {max-width:20ch;margin:0 auto 44px; }
.devices {display:grid;grid-template-columns:repeat(5, 1fr);gap:14px;margin-bottom:24px; }
.device {display:flex;flex-direction:column;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;transition:border-color .3s, transform .3s, background .3s; }
.device:hover {border-color:rgba(255, 181, 71, 0.4);background:rgba(255, 181, 71, 0.05);transform:translateY(-4px); }
.device .dev {width:96px;height:64px;color:#cfd0e6;margin-bottom:16px;transition:color .3s; }
.device .dev .lit {fill:rgba(255, 181, 71, 0.0);transition:fill .4s; }
.device:hover .dev {color:var(--text); }
.device:hover .dev .lit {fill:rgba(255, 181, 71, 0.35); }
.device h3 {font-size:17px;margin-bottom:6px; }
.device p {color:var(--muted);font-size:14.5px; }
.device .btn, .device .soon {margin-top:auto; }
.device .fine {margin:12px 0 0;font-size:13px; }
.soon {display:inline-flex;min-height:40px;align-items:center;padding:0 16px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:14px; }

/* Preise */
.pricing h2 {text-align:center; }
.trial {display:flex;justify-content:center;align-items:center;gap:10px;max-width:760px;margin:0 auto 36px;padding:14px 22px;border-radius:999px;background:rgba(255, 181, 71, 0.1);border:1px solid rgba(255, 181, 71, 0.3);color:#ffe2ad;font-weight:600;text-align:center; }
.trial .ico {color:var(--accent);font-size:20px; }
.plans {display:grid;grid-template-columns:repeat(2, 1fr);gap:18px;max-width:880px;margin:0 auto 28px; }
.plan {position:relative;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:34px;display:flex;flex-direction:column;align-items:flex-start; }
.plan p {color:var(--muted); }
.plan .price {color:var(--text);font-size:clamp(32px, 4vw, 44px);font-weight:800;letter-spacing:-0.03em;margin-bottom:12px; }
.plan .btn {margin-top:auto; }
.plan.best {background:radial-gradient(420px 220px at 0% 0, rgba(255, 181, 71, 0.18), transparent 70%), var(--surface-2);border-color:rgba(255, 181, 71, 0.45);box-shadow:0 30px 90px rgba(255, 181, 71, 0.08); }
.badge {position:absolute;top:-13px;left:24px;padding:5px 14px;border-radius:999px;background:var(--accent);color:var(--ink);font-size:13px;font-weight:800;letter-spacing:0.04em;text-transform:uppercase; }
.trust {list-style:none;margin:0 auto 26px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px; }
.trust li {display:inline-flex;align-items:center;gap:8px;color:#d9d8e6;font-size:15px;font-weight:600; }
.trust .ico {color:var(--accent); }
.pricing .fine {text-align:center;max-width:760px;margin-right:auto;margin-left:auto; }

/* Einblenden beim Scrollen (nur mit Skript, siehe site.js) */
.js .reveal {opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1); }
.js .reveal.in {opacity:1;transform:none; }
.js .chapter.reveal .frame {transition:transform 1.1s cubic-bezier(.2, .8, .2, 1);transform:perspective(1400px) rotateY(-6deg) scale(0.96); }
.js .chapter.flip.reveal .frame {transform:perspective(1400px) rotateY(6deg) scale(0.96); }
.js .chapter.reveal.in .frame {transform:none; }

/* Filmkorn über allem, ganz leise */
body::after {content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:url("grain.svg");opacity:0.05; }

@media (prefers-reduced-motion: reduce) {
  .sky::after, .moon, .tv3d, .track {animation:none; }
  .tv3d {transform:none; }
  .track {flex-wrap:wrap;justify-content:center;width:auto; }
  .marquee + .marquee {display:none; }
}

/* Fragen */
.faq details {border-bottom:1px solid var(--line);padding:4px 0; }
.faq summary {cursor:pointer;list-style:none;padding:16px 0 16px 36px;font-weight:600;font-size:18px;position:relative; }
.faq summary::-webkit-details-marker {display:none; }
.faq summary::after {content:"+";position:absolute;left:4px;top:12px;font-size:26px;font-weight:400;color:var(--accent); }
.faq details[open] summary::after {content:"–"; }
.faq details p {color:var(--muted);margin:0 0 18px; }

/* Rechtstexte */
.legal {padding:56px 0 72px; }
.legal h1 {font-size:clamp(32px, 4.4vw, 48px); }
.legal h2 {font-size:22px;margin-top:1.6em; }
.legal p {color:#d9d8e6; }

/* Kontaktformular */
[hidden] {display:none!important; }
button.btn {font-family:inherit;cursor:pointer; }
button.btn:disabled {opacity:0.6;cursor:progress; }
.contact .lead {margin-bottom:8px; }
.contact-form {display:flex;flex-direction:column;gap:6px;margin:28px 0 22px; }
.contact-form label {font-weight:600;font-size:15px;margin-top:12px; }
.contact-form input, .contact-form textarea {width:100%;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px; }
.contact-form textarea {min-height:220px;resize:vertical;line-height:1.5; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible {outline:2px solid var(--accent);outline-offset:1px;border-color:transparent; }
.contact-form .hint {display:flex;justify-content:space-between;gap:12px;margin:0;color:var(--muted);font-size:14px; }
.contact-form .count {font-variant-numeric:tabular-nums; }
.contact-form .count.near {color:var(--accent); }
.contact-form .hp {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }
.contact-form .form-msg {margin:12px 0 0;padding:12px 16px;border-radius:12px;color:#ffd2c9;background:rgba(255, 99, 71, 0.12);border:1px solid rgba(255, 99, 71, 0.35); }
.contact-form .btn {margin-top:14px; }
.contact-done {margin:28px 0 22px; }
.contact-done h1 .ico, .contact-done h2 .ico {color:var(--accent);margin-left:12px;vertical-align:-0.12em; }
.contact-done:focus {outline:none; }

/* Fuß */
.foot {border-top:1px solid var(--line);padding:40px 0 56px;color:var(--muted);font-size:15px; }
.foot-top {display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-bottom:18px; }
.foot nav {display:flex;flex-wrap:wrap;gap:8px 22px; }
.foot nav a {color:var(--text); }
.foot .langs a {color:var(--muted);margin-left:10px;white-space:nowrap; }
.foot .langs a:hover {color:var(--text); }

@media (max-width: 1100px) {
  .devices {grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .grid {grid-template-columns:repeat(2, 1fr); }
  .top nav {display:none; }
  .lang {margin-right:auto; }
  .chapter, .chapter.flip {grid-template-columns:1fr;gap:24px;margin-bottom:64px; }
  .chapter.flip .frame {order:0; }
  .devices {grid-template-columns:repeat(2, 1fr); }
  .moon {width:80px;height:80px;left:6%;top:40px; }
}
@media (max-width: 620px) {
  body {font-size:16px; }
  .wrap {padding:0 16px; }
  .hero {padding:64px 0 16px; }
  .stage {padding:0 12px;margin-top:32px; }
  .tv3d {padding:6px;border-radius:14px; }
  .screen {border-radius:9px; }
  .grid, .plans, .devices {grid-template-columns:1fr; }
  .grid li {display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:18px; }
  .grid li > .ico {grid-row:span 2;margin:2px 0 0;font-size:22px; }
  section {padding:60px 0; }
  .player .wrap {padding:26px 20px;border-radius:18px;margin:0 16px; }
  .trial {border-radius:18px; }
  .track span {font-size:17px;padding:10px 16px; }
  .lang ul {width:min(330px, calc(100vw - 32px)); }
  .moon {width:44px;height:44px;top:12px;left:14px; }
  .hero {padding-top:80px; }
  .hero .kicker {font-size:12px;letter-spacing:0.04em; }
}
.center {text-align:center; }

/* Anleitungen und Pressematerial */
.guide {padding:40px 0 80px; }
.guide .crumbs {color:var(--muted);font-size:14.5px;margin-bottom:26px; }
.guide .crumbs a {color:var(--muted); }
.guide h1 {font-size:clamp(34px, 5.2vw, 58px);letter-spacing:-0.035em;margin-bottom:0.4em; }
.guide h2 {font-size:clamp(24px, 3vw, 32px);letter-spacing:-0.02em;margin:1.9em 0 0.6em; }
.guide h3 {margin:0 0 4px; }
.guide p, .guide li {color:#d9d8e6; }
.guide .lead {color:#e4e3ee;margin-bottom:26px; }
.guide code {font-size:0.92em;background:var(--surface-2);border:1px solid var(--line);padding:1px 6px;border-radius:6px; }
.callout {display:flex;gap:12px;align-items:flex-start;margin:28px 0 8px;padding:18px 22px;border-radius:var(--radius);background:rgba(255, 181, 71, 0.08);border:1px solid rgba(255, 181, 71, 0.3);color:#ffe2ad;font-size:15.5px; }
.callout .ico {color:var(--accent);font-size:20px;margin-top:2px; }
.callout span {color:#ffe2ad; }
ul.checks {list-style:none;padding:0;margin:0 0 1.2em; }
ul.checks li {position:relative;padding-right:28px;margin-bottom:10px; }
ul.checks li::before {content:"";position:absolute;right:4px;top:0.62em;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(255, 181, 71, 0.5); }
ol.steps {list-style:none;counter-reset:step;padding:0;margin:0 0 1.6em;display:grid;gap:12px; }
ol.steps li {counter-increment:step;position:relative;padding:18px 74px 18px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); }
ol.steps li::before {content:counter(step);position:absolute;right:20px;top:17px;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--ink);font-weight:800;display:grid;place-items:center; }
ol.steps h3 {font-size:18px; }
ol.steps p {margin:0;color:var(--muted); }
.guide .cta {margin:28px 0 8px; }
.guide .faq h2 {margin-bottom:12px; }
.related {list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:repeat(2, 1fr);gap:12px; }
.related a {display:block;height:100%;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);font-weight:600;transition:border-color .3s, background .3s; }
.related a:hover {text-decoration:none;border-color:rgba(255, 181, 71, 0.4);background:rgba(255, 181, 71, 0.05); }
.foot .guides a {color:var(--muted);margin-left:14px;white-space:nowrap; }
.foot .guides a:hover {color:var(--text); }

.press .kicker {display:inline-flex;align-items:center;gap:10px; }
.press-cols {display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:12px; }
.press-card {background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:30px; }
.press-card h2 {margin-top:0; }
dl.facts {display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:20px 0;font-size:15.5px; }
dl.facts dt {color:var(--muted); }
dl.facts dd {margin:0;color:var(--text); }
.dl-grid {list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4, 1fr);gap:14px; }
.dl-grid li {display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden; }
.dl-grid .tile {position:relative;aspect-ratio:16 / 9;overflow:hidden;background:#0d1030; }
.dl-grid .tile.light {background:#f4f1ea; }
.dl-grid .tile img {position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain; }
.dl-grid.shots img {aspect-ratio:16 / 9;object-fit:cover;width:100%; }
.files {display:flex;flex-wrap:wrap;gap:4px 16px;padding:12px 14px;margin:0; }
.files .file {display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600; }
.press-video {max-width:880px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#000; }
.press-video video {display:block;width:100%;height:auto;aspect-ratio:16 / 9; }
.press .files:not(.dl-grid .files) {padding-right:0; }

@media (max-width: 900px) {
  .press-cols {grid-template-columns:1fr; }
  .dl-grid {grid-template-columns:repeat(2, 1fr); }
  .related {grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .guide {padding:28px 0 56px; }
  ol.steps li {padding:16px 62px 16px 16px; }
  ol.steps li::before {right:14px;top:15px;width:32px;height:32px; }
  .press-card {padding:22px 18px; }
  dl.facts {grid-template-columns:1fr;gap:2px; }
  dl.facts dd {margin-bottom:10px; }
  .dl-grid {grid-template-columns:1fr 1fr;gap:10px; }
  .files {padding:10px; }
}