/* Startseite (Vertrag §9.13), eine Datei für / und /en. Farbwelt wie site.css.
   Effekte hängen an html.fx (setzt /home.js nur ohne reduzierte Bewegung); ohne JS ist alles
   sichtbar. Der Einstieg im Hero ist reines CSS, damit nichts aufblitzt. */
:root {
  --night: #06100b; --felt: #0d251b; --felt-light: #1a4a33; --gold: #d7ac50;
  --gold-hi: #f6dc9a; --gold-dim: #786333; --cream: #f5edda; --muted: #c6c1b1;
  --ink: #101b13; --line: #786a4433; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); color-scheme: dark;
  --hop: cubic-bezier(0.65, 0, 0.35, 1);
  font-family: system-ui, sans-serif; background: var(--night); color: var(--cream); }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --k { syntax: "<number>"; inherits: true; initial-value: 0; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Georgia, serif; font-weight: 500; letter-spacing: -0.02em; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--gold); padding-right: 0.06em; }
[id] { scroll-margin-top: 84px; }
.fx-only { display: none; }
.fx .fx-only { display: block; }

.skip-link {
  position: absolute; top: -80px; left: 16px; z-index: 50; padding: 12px 18px;
  background: var(--cream); color: var(--ink); border-radius: 12px; font-weight: 600; }
.skip-link:focus { top: 12px; }

/* Kopf: Glasleiste, die mitfährt */
.site-header {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px;
  padding: 16px clamp(20px, 5vw, 80px); border-bottom: 1px solid var(--line);
  background: #06100bb8; -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4); transition: box-shadow 0.4s, background-color 0.4s; }
.site-header.is-stuck { background: #06100be0; box-shadow: 0 12px 30px #0009; }
.brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: Georgia, serif; font-size: 20px; white-space: nowrap; }
.brand img { border-radius: 10px; border: 1px solid var(--gold-dim); }
.site-nav { display: flex; gap: 28px; margin-left: auto; font-size: 14px; }
.site-nav a, .site-footer a { text-decoration: none; color: var(--muted); }
.site-nav a:hover, .site-footer a:hover { color: var(--gold); }
.lang {
  margin-left: 8px; padding: 8px 14px; border: 1px solid var(--gold-dim); border-radius: 20px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-decoration: none;
  color: var(--gold); }
.lang:hover { border-color: var(--gold); }

/* Gemeinsame Bausteine */
.eyebrow {
  margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold); }
.lead {
  max-width: 540px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--muted); }
.shimmer {
  color: var(--gold);
  background: linear-gradient(100deg, var(--gold) 0 42%, #fff1c9 50%, var(--gold) 58% 100%)
    100% 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 54px; padding: 14px 26px; border-radius: 28px; border: 1px solid var(--gold);
  font-size: 16px; font-weight: 600; text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.button-primary {
  color: var(--ink); border-color: #f1cf80;
  background: linear-gradient(180deg, #f2d184, var(--gold) 55%, #b98c35);
  box-shadow: 0 12px 34px #d7ac5038, inset 0 1px 0 #fff7; }
.button-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(circle at var(--bx, 50%) var(--by, 50%), #fff9 0, transparent 55%);
  transition: opacity 0.3s; }
.button-primary:hover::after { opacity: 0.7; }
.button-primary:hover { box-shadow: 0 18px 44px #d7ac505c, inset 0 1px 0 #fff7; }
.button-soon {
  border: 1px dashed var(--gold-dim); color: var(--muted); background: #0d251b80;
  cursor: default; font-weight: 500; }
.button-soon::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px #d7ac5026; }
.phone {
  width: min(300px, 74vw); padding: 9px; border-radius: 46px; background: #020604;
  border: 1px solid var(--gold-dim); box-shadow: 0 30px 70px #000a, 0 0 0 6px #0b1d15; }
.phone img { border-radius: 37px; }
.checks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 12px; align-items: baseline; line-height: 1.45; }
.checks li::before {
  content: ""; flex: none; width: 12px; height: 7px; border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold); transform: translateY(-3px) rotate(-45deg); }

/* Chips der Beispielrunde (Farben wie in der App) */
.chip {
  --c: #7a1420; display: grid; place-items: center; width: 52px; aspect-ratio: 1;
  border-radius: 50%; font-family: Georgia, serif; font-size: 22px; color: var(--cream);
  background:
    radial-gradient(circle, var(--c) 0 50%, #e6c374 51% 54%, var(--c) 55% 66%, transparent 67%),
    repeating-conic-gradient(from -7.5deg, #f1e7d0 0 15deg, var(--c) 15deg 45deg);
  box-shadow: inset 0 -4px 8px #0006, 0 10px 20px #0009; }
.chip-d { --c: #7a1420; } .chip-b { --c: #c4521a; } .chip-c { --c: #1f5a3a; }
.chip-e { --c: #5a2a6e; } .chip-a { --c: #1f3f8a; }
.chip-f { --c: #9fb59a; color: #1b2a1f; }

/* Einstieg: Pokertisch bei Nacht */
.hero {
  --lx: 72%; --ly: 36%; position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 40px; align-items: center;
  padding: clamp(40px, 7vw, 96px) clamp(20px, 7vw, 120px) clamp(56px, 7vw, 96px);
  background: radial-gradient(ellipse 80% 70% at 70% 45%, var(--felt-light) 0, var(--felt) 45%,
    var(--night) 85%); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 45%, #000b 100%); }
.hero-light {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle 380px at var(--lx) var(--ly), #f3d58a26, transparent 70%),
    radial-gradient(circle 240px at var(--lx) var(--ly), #2d7a5270, transparent 70%),
    repeating-radial-gradient(circle at 30% 20%, #ffffff06 0 1px, transparent 1px 3px); }
.hero-light::before {
  content: ""; position: absolute; top: -5%; left: calc(var(--lx) - 300px); width: 600px;
  height: 115%; filter: blur(24px);
  background: conic-gradient(from 180deg at 50% 0, #f6dc9a24 0deg, transparent 20deg 340deg,
    #f6dc9a24 360deg); }
@media (max-width: 959px) { .hero { --lx: 62%; --ly: 82%; } }
.hero h1 { font-size: clamp(42px, 6vw, 84px); line-height: 1.04; margin-bottom: 22px; }
.trust-line {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0;
  list-style: none; font-size: 14px; color: var(--muted); }
.trust-line li { display: flex; align-items: center; gap: 9px; }
.trust-line li::before {
  content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.hero-visual {
  --pw: min(320px, 66vw); position: relative; display: grid; place-items: center;
  padding: 28px 0 40px; }
.tilt { position: relative; z-index: 2; perspective: 1300px; }
.phone-hero {
  position: relative; width: var(--pw);
  transform: rotateY(calc(-9deg + var(--ry, 0deg))) rotateX(calc(4deg + var(--rx, 0deg)));
  box-shadow: 0 50px 90px #000c, 0 0 0 6px #0b1d15, 0 0 120px #d7ac501f; }
.glare {
  position: absolute; inset: 9px; border-radius: 37px; pointer-events: none;
  background:
    radial-gradient(circle at var(--gx, 25%) var(--gy, 12%), #ffffff2e, transparent 45%),
    linear-gradient(115deg, #ffffff14, transparent 38%); }
.glass-card {
  position: absolute; z-index: 4; bottom: 3%; right: max(0px, calc(50% - var(--pw) / 2 - 56px));
  display: grid; gap: 2px; padding: 14px 20px; border-radius: 18px;
  border: 1px solid #d7ac5055; background: #0d251b99; box-shadow: 0 24px 50px #0009;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  font-size: 13px; color: var(--muted); }
.glass-card strong { font-family: Georgia, serif; font-weight: 500; font-size: 24px; color: var(--cream); }
.glass-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); }

/* Chip-Stapel in CSS: Fläche (::before) über Rand (::after) */
.stack { position: absolute; z-index: 3; width: 118px; height: 160px; pointer-events: none; }
.stack-a { left: max(0px, calc(50% - var(--pw) / 2 - 76px)); bottom: 6%; }
.stack-b { right: max(0px, calc(50% - var(--pw) / 2 - 70px)); bottom: 40%; width: 86px; z-index: 1; }
.disc {
  --c: #1f3f8a; --i: 0; position: absolute; left: 0; right: 0; aspect-ratio: 2.7;
  bottom: calc(var(--i) * 11px); }
.disc::before, .disc::after { content: ""; position: absolute; border-radius: 50%; }
.disc::before {
  inset: 0; z-index: 1; box-shadow: inset 0 0 0 1px #0004;
  background:
    radial-gradient(closest-side, var(--c) 0 56%, #e6c374 58% 63%, var(--c) 65% 76%, transparent 78%),
    repeating-conic-gradient(from -7.5deg, #f1e7d0 0 15deg, var(--c) 15deg 45deg); }
.disc::after {
  inset: 9px 0 -9px; filter: brightness(0.6); box-shadow: 0 12px 20px #000b;
  background: repeating-linear-gradient(90deg, var(--c) 0 13px, #e9dfc6 13px 19px); }
.disc:nth-child(2) { --i: 1; --c: #9fb59a; } .disc:nth-child(3) { --i: 2; --c: #5a2a6e; }
.disc:nth-child(4) { --i: 3; --c: #1f5a3a; } .disc:nth-child(5) { --i: 4; --c: #c4521a; }
.disc:nth-child(6) { --i: 5; --c: #7a1420; } .disc:nth-child(7) { --i: 6; --c: #c99a3e; }
.stack-b .disc:nth-child(1) { --c: #1f5a3a; } .stack-b .disc:nth-child(2) { --c: #7a1420; }
.stack-b .disc:nth-child(3) { --c: #1f3f8a; }

/* Laufband; hält an per Knopf, Zeiger und Fokus (WCAG 2.2.2) */
.marquee { padding: 16px 0; border-block: 1px solid var(--line); background: #0a1a12; }
.marquee-view { overflow: hidden; }
.marquee ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; margin: 0;
  padding: 0 12px; list-style: none; }
.marquee ul + ul { display: none; }
.marquee li {
  display: flex; align-items: center; gap: 24px; padding: 0 12px; white-space: nowrap;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); }
.marquee li::after {
  content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.fx .marquee { display: flex; align-items: center; gap: 4px; padding: 8px 12px 8px 0; }
.fx .marquee-view {
  flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fx .marquee-track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:is(:hover, :focus-within, .is-paused) .marquee-track { animation-play-state: paused; }
.fx .marquee ul { flex-wrap: nowrap; padding: 0; }
.fx .marquee ul + ul { display: flex; }
.fx .marquee-toggle {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--gold-dim); border-radius: 50%; background: var(--night);
  color: var(--gold); cursor: pointer; }
.marquee-toggle:hover { border-color: var(--gold); }
.marquee-toggle::before { content: ""; width: 12px; height: 12px; border-inline: 4px solid; }
.marquee-toggle[aria-pressed="true"]::before {
  width: 11px; margin-left: 3px; border: 0; background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* Abschnitte */
.section { padding: clamp(64px, 9vw, 120px) clamp(20px, 7vw, 120px); }
.section-head { max-width: 700px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.1; margin-bottom: 16px; }
.section-head p:not(.eyebrow) { color: var(--muted); line-height: 1.6; font-size: 17px; }
figure { margin: 0; }
figcaption {
  margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); }

/* Problem → Lösung: Gruppenchat neben dem Gastgeber-Ring */
.versus { display: grid; gap: 24px; max-width: 980px; margin: 0 auto; align-items: start; }
.chat {
  display: grid; gap: 12px; padding: 26px 22px; border-radius: 28px; background: #0b1712;
  border: 1px solid #ffffff14; }
.bubble {
  max-width: 86%; margin: 0; padding: 10px 14px; border-radius: 18px 18px 18px 6px;
  background: #1b2a22; line-height: 1.4; font-size: 15px; }
.bubble b { display: block; margin-bottom: 2px; font-size: 12px; color: var(--gold); }
.bubble-right { justify-self: end; border-radius: 18px 18px 6px 18px; background: #24382c; }
.solution {
  padding: 26px 22px 30px; border-radius: 28px; text-align: center;
  border: 1px solid var(--gold-dim);
  background: radial-gradient(ellipse at 50% 0, var(--felt-light), var(--felt) 70%);
  box-shadow: 0 30px 60px #0009, 0 0 60px #d7ac5014; }
.solution figcaption { color: var(--gold); }
.solution > p { max-width: 400px; margin: 0 auto; color: var(--muted); line-height: 1.6; }
.solution .checks { width: fit-content; margin-inline: auto; text-align: left; }
/* Ring: eine Runde läuft per /home.js; --k treibt Krone und Bogen, Chip und Name blenden mit
   derselben Dauer und Kurve über, damit alles zugleich ankommt */
.ring-wrap {
  --size: min(340px, 72vw); --chip: calc(var(--size) * 0.2);
  --r: calc(var(--size) / 2 - var(--chip) / 2 - 4px);
  position: relative; width: var(--size); aspect-ratio: 1; margin: 40px auto 36px;
  transition: --k 0.45s var(--hop); }
.is-reset, .is-reset * { transition: none !important; }
.ring { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.ring::before, .ring::after {
  content: ""; position: absolute; inset: calc(var(--chip) / 2 + 4px); border-radius: 50%; }
.ring::before { border: 1px dashed #786333aa; }
.ring::after {
  background: conic-gradient(var(--gold) calc(var(--k) / 6 * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); }
.ring li {
  --a: 0deg; position: absolute; z-index: 1; left: 50%; top: 50%; width: var(--chip);
  margin: calc(var(--chip) / -2) 0 0 calc(var(--chip) / -2);
  display: grid; justify-items: center; gap: 10px; font-family: Georgia, serif;
  font-size: 15px; color: var(--muted); transition: color 0.45s var(--hop);
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)); }
.seat { padding: 1px 7px; border-radius: 8px; background: #09180f; }
.ring li:nth-child(2) { --a: 60deg; } .ring li:nth-child(3) { --a: 120deg; }
.ring li:nth-child(4) { --a: 180deg; } .ring li:nth-child(5) { --a: 240deg; }
.ring li:nth-child(6) { --a: 300deg; }
.ring .chip {
  width: 100%; font-size: calc(var(--chip) * 0.4);
  transition: transform 0.45s var(--hop), box-shadow 0.45s var(--hop); }
.ring li.is-host { color: var(--cream); }
.ring li.is-host .chip {
  transform: scale(1.16); box-shadow: 0 0 0 3px var(--gold), 0 0 34px #d7ac5099, 0 10px 20px #0009; }
.ring-center {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  text-align: center; pointer-events: none; }
.ring-label { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.ring-names { display: grid; margin: 2px 0; }
.ring-names b {
  grid-area: 1 / 1; font-family: Georgia, serif; font-weight: 500;
  font-size: calc(var(--size) * 0.11); opacity: 0; transform: translateY(10px);
  transition: opacity 0.45s var(--hop), transform 0.45s var(--hop); }
.ring-names b.is-on { opacity: 1; transform: none; }
.ring-night { font-size: 13px; color: var(--muted); }
.crown-orbit {
  position: absolute; inset: 0; pointer-events: none; transform: rotate(calc(var(--k) * 60deg)); }
.crown {
  position: absolute; left: 50%; top: calc(50% - var(--r)); width: 30px; height: 22px;
  margin: -11px 0 0 -15px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, #a67c2e);
  clip-path: polygon(0 100%, 0 22%, 26% 58%, 50% 0, 74% 58%, 100% 22%, 100% 100%);
  transform: rotate(calc(var(--k) * -60deg)) translateY(calc(var(--chip) * -0.5 - 24px)); }

/* Funktionen */
.insights { background: linear-gradient(180deg, var(--night), var(--felt) 45%, var(--night)); }
.feature {
  display: grid; gap: 36px; align-items: center; max-width: 1080px; margin: 0 auto; padding: 48px 0; }
.feature + .feature { border-top: 1px solid var(--line); }
.feature h3 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; margin-bottom: 16px; }
.feature .phone {
  justify-self: center; width: min(280px, 70vw);
  box-shadow: 0 40px 80px #000c, 0 0 0 6px #0b1d15, 0 0 90px #d7ac5014; }
.steps p, .feature p, .facts p, .extras p { line-height: 1.6; color: var(--muted); margin-bottom: 0; }
.proof { display: flex; gap: 10px; align-items: baseline; margin-top: 20px; font-size: 14px; color: var(--cream) !important; }
.proof::before { content: "\2660\FE0E"; color: var(--gold); }
.extras, .facts, .steps {
  display: grid; gap: 18px; max-width: 1080px; margin: 0 auto; padding: 0; list-style: none; }
.extras { margin-top: 48px; }
.extras li, .facts li {
  padding: 26px 24px; border-radius: 22px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #0f2a1f, #0a1912); }
.extras li { border-top: 2px solid var(--gold); }
.extras h3, .facts h3 { font-size: 22px; margin-bottom: 8px; }

/* So geht's */
.steps { position: relative; }
.steps li {
  position: relative; padding: 28px 24px; border: 1px solid var(--gold-dim); border-radius: 24px;
  background: var(--felt); }
.step-number {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px;
  border-radius: 50%; border: 2px dashed var(--gold); color: var(--gold);
  font: 600 18px system-ui, sans-serif; font-variant-numeric: lining-nums; }
.steps h3 { font-size: 24px; margin-bottom: 10px; }

/* Datenschutz */
.facts li::before {
  display: block; margin-bottom: 12px; font-family: Georgia, serif; font-size: 26px;
  color: var(--gold); content: "\2660\FE0E"; }
.facts li:nth-child(2)::before { content: "\2665\FE0E"; }
.facts li:nth-child(3)::before { content: "\2666\FE0E"; }
.facts li:nth-child(4)::before { content: "\2663\FE0E"; }
.facts-link { margin: 32px 0 0; text-align: center; color: var(--muted); }
.facts-link a, .faq a { color: var(--gold); }

/* Preis */
.pricing { background: radial-gradient(ellipse at 50% 60%, #12392a 0, var(--night) 65%); }
.price-card {
  position: relative; isolation: isolate; max-width: 440px; margin: 0 auto;
  padding: 44px 32px 34px; border-radius: 32px; text-align: center;
  background: radial-gradient(ellipse at 50% 0, var(--felt-light), #0b1c14 70%);
  box-shadow: 0 40px 90px #000b, 0 0 90px #d7ac501c; }
.price-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit;
  background: conic-gradient(from var(--ang), var(--gold-dim), var(--gold-hi), var(--gold-dim) 30%
    70%, var(--gold-hi) 85%, var(--gold-dim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.price {
  margin: 0; font: 500 clamp(64px, 9vw, 92px) / 1 system-ui, sans-serif; letter-spacing: -0.04em;
  font-variant-numeric: lining-nums tabular-nums; }
.price-term {
  margin: 8px 0 0; font-size: 13px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold); }
.price-card .checks { width: fit-content; margin: 26px auto 30px; text-align: left; }
.price-card .button { width: 100%; }
.price-note { margin: 16px 0 0; font-size: 14px; color: var(--muted); }

/* FAQ */
.faq-list { display: grid; gap: 12px; max-width: 780px; margin: 0 auto; }
details {
  border: 1px solid #786a4455; border-radius: 18px; background: #0b1a13;
  transition: border-color 0.3s, background-color 0.3s; }
details[open] { border-color: var(--gold-dim); background: var(--felt); }
summary {
  position: relative; padding: 20px 56px 20px 22px; list-style: none; cursor: pointer;
  font-family: Georgia, serif; font-size: 19px; line-height: 1.35; }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.3s var(--ease); }
details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
details p { margin: 0; padding: 0 22px 22px; line-height: 1.6; color: var(--muted); }

/* Schluss */
.finale {
  text-align: center;
  background: radial-gradient(ellipse at 50% 30%, var(--felt-light) 0, var(--felt) 45%,
    var(--night) 85%); }
.finale .lockup { width: min(420px, 86vw); margin: 0 auto 28px; filter: drop-shadow(0 0 40px #d7ac5033); }
.finale h2 { font-size: clamp(36px, 4.8vw, 64px); line-height: 1.1; margin-bottom: 16px; }
.finale p { max-width: 520px; margin: 0 auto; line-height: 1.6; color: var(--muted); }
.finale .actions { justify-content: center; }

/* Fuß */
.site-footer {
  display: grid; gap: 20px; padding: 40px clamp(20px, 7vw, 120px);
  border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.footer-brand { font-family: Georgia, serif; font-size: 20px; color: var(--cream); margin: 0; }
.footer-tagline { margin: 4px 0 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.site-footer small { font-size: 13px; }

/* Effekte, die /home.js einschaltet */
.fx [data-reveal] {
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); }
.fx [data-reveal]:not(.in) { opacity: 0; transform: translateY(32px); }
.fx [data-reveal]:focus-within { opacity: 1; transform: none; transition: none; }
.fx .steps[data-reveal]:not(.in) { opacity: 1; transform: none; }
.fx .steps li { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.fx .steps:not(.in) li { opacity: 0; transform: translateY(28px); }
.fx .facts li:nth-child(2), .fx .extras li:nth-child(2) { --d: 0.12s; }
.fx .facts li:nth-child(3), .fx .extras li:nth-child(3) { --d: 0.24s; }
.fx .facts li:nth-child(4) { --d: 0.36s; }
.fx .steps li:nth-child(2) { transition-delay: 0.15s; }
.fx .steps li:nth-child(3) { transition-delay: 0.3s; }
.fx .chat .bubble { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.fx .chat:not(.in) .bubble { opacity: 0; transform: translateY(14px) scale(0.96); }
.fx .chat .bubble:nth-of-type(2) { transition-delay: 0.15s; }
.fx .chat .bubble:nth-of-type(3) { transition-delay: 0.3s; }
.fx .chat .bubble:nth-of-type(4) { transition-delay: 0.45s; }
.fx .solution { --d: 0.15s; }
.fx [data-parallax] { transform: translate3d(0, var(--py, 0px), 0); }
.fx .shimmer { animation: shimmer 5.5s ease-in-out 1.4s infinite; }
.fx .price-card::before { animation: spin 7s linear infinite; }
.fx .glass-card { animation: glass-in 0.8s 1.5s both, floaty 7s ease-in-out 2.4s infinite; }
.fx .button-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 35%, #ffffffa0 50%, transparent 65%);
  animation: sheen 5s ease-in-out 2.5s infinite; }
.fx-pointer .magnetic { transform: translate(var(--mx, 0px), var(--my, 0px)); }
.fx-pointer .magnetic:hover { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 2px)); }

@media (max-width: 759px) {
  .site-nav { display: none; }
  .lang { margin-left: auto; } }
@media (max-width: 640px) {
  .actions .button { width: 100%; }
  .stack { transform: scale(0.8); transform-origin: bottom left; }
  .stack-b { transform-origin: bottom right; } }
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps::before {
    content: ""; position: absolute; top: 50px; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform-origin: left; transition: transform 1.2s var(--ease) 0.4s; }
  .fx .steps:not(.in)::before { transform: scaleX(0); }
  .extras { grid-template-columns: repeat(3, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .feature { grid-template-columns: 1fr 1fr; gap: 64px; }
  .feature:nth-of-type(even) .phone { order: -1; }
  .site-footer { grid-template-columns: 1fr auto; align-items: center; }
  .site-footer small { grid-column: 1 / -1; } }
@media (min-width: 960px) {
  .hero {
    grid-template-columns: 1.05fr 0.95fr; min-height: min(860px, calc(100vh - 74px));
    padding-block: 32px; }
  .hero-visual { --pw: min(310px, calc((100vh - 200px) * 0.46)); padding-block: 24px; }
  .stack-a { width: 140px; bottom: 10%; }
  .versus { grid-template-columns: 1fr 1fr; gap: 40px; }
  .facts { grid-template-columns: repeat(4, 1fr); } }

/* Einstieg nur mit erlaubter Bewegung; reines CSS, damit nichts aufblitzt */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-light { animation: lamp-on 1.8s 0.1s both; }
  .hero-copy > * { animation: rise 0.9s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: 0.1s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.22s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.34s; }
  .hero-copy > :nth-child(5) { animation-delay: 0.46s; }
  .tilt { animation: phone-in 1.3s 0.25s var(--ease) both; }
  .disc { animation: drop 0.85s both; animation-delay: calc(0.7s + var(--i) * 0.12s); }
  .stack-b .disc { animation-delay: calc(1.5s + var(--i) * 0.12s); }
  .glass-card { animation: glass-in 0.8s 1.5s both; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; } }

@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes phone-in { from { opacity: 0; transform: translateY(70px) rotateX(16deg) scale(0.94); } }
@keyframes glass-in { from { opacity: 0; transform: translateX(24px) scale(0.96); } }
@keyframes floaty { 50% { transform: translateY(-9px); } }
@keyframes lamp-on { 0% { opacity: 0; } 18% { opacity: 0.7; } 22% { opacity: 0.15; }
  30% { opacity: 0.9; } 34% { opacity: 0.45; } 50%, 100% { opacity: 1; } }
@keyframes drop {
  0% { opacity: 0; transform: translateY(-560px); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
  15% { opacity: 1; } 74% { transform: none; animation-timing-function: ease-out; }
  86% { transform: translateY(-9px); animation-timing-function: ease-in; } 100% { transform: none; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes shimmer { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0 0; } }
@keyframes spin { to { --ang: 360deg; } }
@keyframes sheen { 0% { transform: translateX(-120%); } 28%, 100% { transform: translateX(120%); } }