/* ═══════════════════════════════════════════════════════════════
   Games Bucket List — shared landing styles
   Used by index.html, index-de.html and the legal / support pages.

   Everything here is taken from the app's own design system:
   BrandIndigo  #4F46E5   SparkMagenta #D946EF   SparkCyan #22D3EE
   Surfaces mirror iOS systemBackground / secondarySystemBackground,
   type is rounded the way SF Rounded is in the app, and the page sits
   on the same slow ambient mesh the app paints behind every screen.
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --accent:#4F46E5; --accent-2:#7C6BFF; --accent-soft:#E8E7FD;
  --spark:#D946EF; --disco:#0E9FBC;
  --bg:#F4F4F9; --surface:#FFFFFF; --surf-muted:#EDEDF5; --surf-strong:#E2E2F1;
  --stroke:#E4E4EF;
  --text-pri:#101018; --text-sec:#54546B; --text-ter:#82829A;
  --success:#1E9E68; --warning:#C97A16;
  --shadow-accent:rgba(79,70,229,.28);

  /* status tints, exactly the mapping LibraryStatus uses */
  --st-planned:#4F46E5; --st-playing:#0E9FBC; --st-completed:#1E9E68;
  --st-paused:#C97A16; --st-dropped:#D946EF;

  /* the phone mock-ups run their own scale: iOS light appearance */
  --m-bg:#FFFFFF; --m-surf:#F2F2F7; --m-surf2:#E5E5EA; --m-stroke:rgba(0,0,0,.07);
  --m-txt:#000000; --m-txt2:#8A8A8E; --m-accent:#4F46E5;
  --m-planned:#4F46E5; --m-playing:#22D3EE; --m-completed:#34C759;
  --m-paused:#FF9500; --m-dropped:#D946EF;
  --m-glass:rgba(255,255,255,.72); --m-glass-stroke:rgba(0,0,0,.06);
}
.dark {
  --accent:#8B85FF; --accent-2:#A99FFF; --accent-soft:#272357;
  --spark:#EE87FF; --disco:#4FE0F5;
  --bg:#050509; --surface:#141419; --surf-muted:#0E0E14; --surf-strong:#22222C;
  --stroke:rgba(255,255,255,.07);
  --text-pri:#F2F2F8; --text-sec:#A3A3BC; --text-ter:#7E7E98;
  --success:#3FC58C; --warning:#E9A13B;
  --shadow-accent:rgba(79,70,229,.42);

  --st-planned:#8B85FF; --st-playing:#4FE0F5; --st-completed:#3FC58C;
  --st-paused:#E9A13B; --st-dropped:#EE87FF;

  /* iOS dark appearance: a pure black base with the ambient mesh on top */
  --m-bg:#000000; --m-surf:#12121A; --m-surf2:#1C1C1E; --m-stroke:rgba(255,255,255,.06);
  --m-txt:#FFFFFF; --m-txt2:#98989F; --m-accent:#6C63FF;
  --m-planned:#5E58F0; --m-playing:#22D3EE; --m-completed:#30D158;
  --m-paused:#FF9F0A; --m-dropped:#E879F9;
  --m-glass:rgba(28,28,34,.6); --m-glass-stroke:rgba(255,255,255,.1);
}

/* ── BASE ── */
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text-pri);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  transition:background 250ms, color 250ms;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--accent-soft); color:var(--text-pri); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }
a { color:inherit; text-decoration:none; }

/* ═══ AMBIENT MESH ═══
   The app's AmbientBackground: slow coloured light drifting behind an opaque
   base. Ambience only — never the contrast the text depends on, which is why
   it sits at a low opacity and is pinned behind everything. */
.ambient {
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  opacity:.24; transition:opacity 250ms;
}
.dark .ambient { opacity:.42; }
.amb {
  position:absolute; border-radius:50%; filter:blur(90px);
  animation:amb-drift 22s ease-in-out infinite;
  /* Ohne diesen Hinweis rastert der Compositor den 90px-Blur pro Frame neu. */
  will-change:transform;
}
.amb-1 { width:58vw; height:58vw; top:-18vw; right:-10vw;  background:radial-gradient(circle,#4F46E5 0%,transparent 70%); }
.amb-2 { width:52vw; height:52vw; top:6vw;   left:-14vw;   background:radial-gradient(circle,#D946EF 0%,transparent 70%); animation-delay:-7s; }
.amb-3 { width:46vw; height:46vw; top:52vh;  right:4vw;    background:radial-gradient(circle,#22D3EE 0%,transparent 70%); animation-delay:-13s; }
.amb-4 { width:60vw; height:60vw; bottom:-22vw; left:8vw;  background:radial-gradient(circle,#6D5CF6 0%,transparent 70%); animation-delay:-18s; }
/* On a narrow screen the vw-sized blobs shrink to nothing, so scale them up
   and the light stays as present as it is on the desktop. */
@media (max-width:640px) {
  .amb-1 { width:130vw; height:130vw; top:-30vw; right:-40vw; }
  .amb-2 { width:120vw; height:120vw; top:10vh;  left:-50vw; }
  .amb-3 { width:120vw; height:120vw; top:55vh;  right:-45vw; }
  .amb-4 { width:130vw; height:130vw; bottom:-30vw; left:-30vw; }
}
/* Reine Translation: ein skalierendes Element mit blur() muss in jedem Frame
   neu gerastert werden, ein verschobenes kann der Compositor umsonst bewegen.
   Die Amplitude ist etwas größer, damit die Drift ohne scale() gleich lebendig bleibt. */
@keyframes amb-drift {
  0%,100% { transform:translate3d(0,0,0); }
  33%     { transform:translate3d(6%,-4%,0); }
  66%     { transform:translate3d(-5%,5%,0); }
}

/* ── TYPOGRAPHY ──
   Nunito stands in for SF Rounded: the app sets its headline numbers and
   titles in `.rounded`, so the page should not suddenly turn geometric. */
.display, .headline, .title3, h1, h2, h3 {
  font-family:Nunito,-apple-system,BlinkMacSystemFont,Inter,sans-serif; text-wrap:balance;
}
.body-lg, p { text-wrap:pretty; }
.display  { font-size:clamp(2.5rem,5.8vw,4.5rem); font-weight:800; letter-spacing:-.032em; line-height:1.05; }
.headline { font-size:clamp(1.7rem,3.4vw,2.6rem);  font-weight:800; letter-spacing:-.026em; line-height:1.14; }
.title3   { font-size:1.075rem; font-weight:800; letter-spacing:-.012em; }
.eyebrow  { font-size:.675rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.body-lg  { font-size:clamp(1rem,1.35vw,1.1rem); line-height:1.72; color:var(--text-sec); }
.grad-text {
  background:linear-gradient(100deg,var(--accent) 0%,var(--spark) 52%,var(--disco) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ── LAYOUT ── */
.section    { padding:clamp(4.5rem,9vw,7.5rem) 0; }
/* Alternating bands stay translucent and blur what is behind them, so the
   ambient light carries through the whole page rather than stopping at the
   hero — the same material-over-mesh the app uses on every screen. */
.band-soft {
  background:color-mix(in srgb, var(--surface) 62%, transparent);
  backdrop-filter:blur(28px) saturate(1.3); -webkit-backdrop-filter:blur(28px) saturate(1.3);
  border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke);
}
.band-soft.alt { background:color-mix(in srgb, var(--surf-muted) 52%, transparent); }
.section-sm { padding:clamp(3rem,6vw,5rem) 0; }
.divider    { height:1px; background:var(--stroke); }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.reveal.in { opacity:1; transform:none; }
.d1{transition-delay:.07s} .d2{transition-delay:.14s} .d3{transition-delay:.21s}
.d4{transition-delay:.28s} .d5{transition-delay:.35s} .d6{transition-delay:.42s}

/* ── ICON SYSTEM ──
   One inline sprite, stroked with currentColor so every icon inherits the
   colour of whatever it sits in. Mirrors the SF Symbols look of the app. */
.gbl-icons, .gbl-defs { position:absolute; width:0; height:0; overflow:hidden; }
.ico {
  width:1em; height:1em; flex:none;
  fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-.14em;
}
.ico-fill { fill:currentColor; stroke:none; }
.chip .ico, .pbadge .ico, .btn-primary .ico, .btn-outline .ico,
.btn-ghost .ico, .btn-solid .ico, .btn-nav .ico { width:1.15em; height:1.15em; }
.ico-eyebrow { width:.875rem; height:.875rem; stroke-width:1.9; color:var(--accent); }
.ico-feat  { width:1.5625rem; height:1.5625rem; stroke-width:1.6; }
.ico-step  { width:1.625rem; height:1.625rem; stroke-width:1.55; }
.ico-cta   { width:1.875rem; height:1.875rem; stroke-width:1.55; }
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:2.125rem; height:2.125rem; border-radius:999px; color:var(--text-sec);
  transition:background .2s ease, color .2s ease;
}
.icon-btn .ico { width:1.125rem; height:1.125rem; }

/* ── NAV ── */
/* Messpunkt am Seitenanfang. `flex:none`, weil body ein Flex-Container ist und
   das Element sonst auf 0 schrumpft; die negative Margin hebt den 1px wieder auf. */
#nav-top { flex:none; height:1px; margin-bottom:-1px; }
.nav-blur {
  background:rgba(244,244,249,.72);
  backdrop-filter:blur(24px) saturate(1.7);
  -webkit-backdrop-filter:blur(24px) saturate(1.7);
}
/* Scroll-Edge statt Trennlinie: der weiche Auslauf erscheint erst, wenn
   tatsächlich Inhalt unter der Leiste durchläuft. */
.nav-blur::after {
  content:""; position:absolute; left:0; right:0; top:100%; height:18px;
  pointer-events:none; opacity:0; transition:opacity 220ms ease;
  background:linear-gradient(to bottom, rgba(16,16,32,.07), transparent);
}
.dark .nav-blur::after { background:linear-gradient(to bottom, rgba(0,0,0,.38), transparent); }
.nav-blur.scrolled::after { opacity:1; }
.dark .nav-blur { background:rgba(5,5,9,.66); }
.nav-link { font-size:.85rem; font-weight:600; color:var(--text-sec); transition:color .2s ease; }

/* ── BUTTONS ──
   The primary button is the app's quick-add button flattened into a pill:
   the same indigo→magenta diagonal, and the same soft light under it. */
.btn-primary {
  position:relative;
  display:inline-flex; align-items:center; gap:9px;
  padding:.875rem 1.625rem; border-radius:999px;
  background:linear-gradient(135deg,#4F46E5,#D946EF);
  color:#fff; font-size:.95rem; font-weight:700; letter-spacing:-.01em;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 26px var(--shadow-accent);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-outline {
  display:inline-flex; align-items:center; gap:9px;
  padding:.875rem 1.5rem; border-radius:999px;
  background:var(--surface); border:1px solid var(--stroke); color:var(--text-pri);
  font-size:.92rem; font-weight:600;
  transition:transform .2s ease, border-color .2s ease;
}
.btn-nav {
  display:inline-flex; align-items:center; gap:6px;
  padding:.5rem .9375rem; border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--spark));
  color:#fff; font-size:.78rem; font-weight:700;
  transition:transform .2s ease, filter .2s ease;
}
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  padding:.875rem 1.5rem; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  color:#fff; font-size:.9rem; font-weight:600;
  transition:background .2s ease;
}
.btn-solid {
  display:inline-flex; align-items:center; gap:9px;
  padding:.875rem 1.625rem; border-radius:999px;
  background:#fff; color:#1A1730; font-size:.95rem; font-weight:700;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .2s ease;
}

/* ── SURFACES ──
   The app floats opaque cards on the ambient light rather than outlining
   them, so the page uses the same hairline-and-fill treatment at radius 18
   (between the app's 16pt card and 20pt cover). */
.card {
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--stroke); border-radius:18px;
  box-shadow:0 1px 2px rgba(16,16,32,.04), 0 6px 20px rgba(16,16,32,.05);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dark .card { box-shadow:0 8px 30px rgba(0,0,0,.4); }
.card-muted {
  background:color-mix(in srgb, var(--surf-muted) 88%, transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--stroke); border-radius:18px;
}
/* Feature glyphs echo the app's badges: a tinted circle, a little light under
   it, and the tint carried by the symbol itself. */
.feat-icon {
  width:3.375rem; height:3.375rem; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 22%, transparent);
}
.feat-icon.spark {
  background:color-mix(in srgb, var(--spark) 13%, transparent); color:var(--spark);
  border-color:color-mix(in srgb, var(--spark) 24%, transparent);
  box-shadow:0 6px 18px color-mix(in srgb, var(--spark) 22%, transparent);
}
.feat-icon.disco {
  background:color-mix(in srgb, var(--disco) 13%, transparent); color:var(--disco);
  border-color:color-mix(in srgb, var(--disco) 24%, transparent);
  box-shadow:0 6px 18px color-mix(in srgb, var(--disco) 22%, transparent);
}
.step-num {
  width:1.875rem; height:1.875rem; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--spark)); color:#fff;
  font-size:.8rem; font-weight:800;
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 34%, transparent);
}

/* ── SMALL BITS ── */
.chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:.3125rem .6875rem; border-radius:999px;
  font-size:.66rem; font-weight:700; white-space:nowrap;
  background:var(--surf-muted); color:var(--text-sec);
}
/* Outlined capsule, the way an unselected status chip looks in the app. */
.pbadge {
  display:inline-flex; align-items:center; gap:7px;
  padding:.5625rem 1rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  background:transparent;
  font-size:.8rem; font-weight:600; color:var(--accent);
  transition:transform .2s ease, background .2s ease;
}
.stat-tile { background:var(--surface); border:1px solid var(--stroke); border-radius:16px; padding:1rem; text-align:center; }

/* ── DARK BAND (privacy / closing CTA) ── */
.band { background:#140F33; color:#fff; }
.dark .band { background:rgba(10,9,23,.62); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.band .band-sub { color:rgba(255,255,255,.72); }
.cta-glyph {
  width:4.125rem; height:4.125rem; margin:0 auto 1.375rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg,rgba(79,70,229,.55),rgba(217,70,239,.55));
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 10px 30px rgba(79,70,229,.35);
}

/* ═══ DEVICE FRAMES ═══
   Geometry ported from the Kids Bucket List page (Apple's 1470x3000 body
   ratio, 75/1470 bezel inset, 0.115x shell radius) so both sites render
   the same hardware. */
.hero-stage    { perspective:2200px; }
.hero-phone-3d {
  transform:rotateY(-14deg) rotateX(4deg) rotateZ(1.2deg);
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
@media (max-width:1023px) { .hero-phone-3d { transform:none; } }
.hero-float { animation:float-phone 6.5s ease-in-out infinite; }
@keyframes float-phone {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-15px); }
}

.device-phone {
  position:relative; aspect-ratio:1470/3000;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.34)) drop-shadow(0 10px 14px rgba(0,0,0,.26));
}
.dev-back, .dev-front { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.dev-back  { z-index:0; }
.dev-front { z-index:20; }
.dev-screen {
  position:absolute; inset:2.5% 5.102%; z-index:10;
  overflow:hidden; background:var(--m-bg); border-radius:var(--screen-r,20px);
  container-type:size;
}
.dev-label {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:14px; font-size:.78rem; font-weight:600; color:var(--text-sec);
}

/* Real screenshots from the app, 1206×2622 scaled to 720 wide. */
.dev-shot { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }

/* ── VIDEO ──
   A self-hosted poster with a play button; YouTube (nocookie) is only
   contacted once someone clicks, so a plain visit stays first-party. */
.yt {
  position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:18px;
  background:#050509; border:1px solid var(--stroke);
  box-shadow:0 18px 50px rgba(16,16,32,.16);
}
.dark .yt { box-shadow:0 18px 50px rgba(0,0,0,.55); }
.yt-play {
  position:absolute; inset:0; width:100%; height:100%; padding:0; border:0;
  background:none; cursor:pointer; color:#fff;
}
.yt-play img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .3s ease; }
.yt-play:hover img { transform:scale(1.015); filter:brightness(.9); }
.yt-btn {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,#4F46E5,#D946EF);
  box-shadow:0 10px 30px rgba(79,70,229,.45);
  transition:transform .2s ease;
}
.yt-btn .ico { width:30px; height:30px; margin-left:4px; fill:currentColor; }
.yt-play:hover .yt-btn { transform:translate(-50%,-50%) scale(1.06); }
.yt-play:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-note { margin-top:12px; font-size:.78rem; color:var(--text-ter); text-align:center; }
.yt-note a { text-decoration:underline; text-underline-offset:2px; }

/* ── DOCUMENT PAGES (privacy / support / legal notice) ── */
.doc { max-width:46rem; margin:0 auto; padding:clamp(2.5rem,6vw,4.5rem) 1.5rem 4rem; }
.doc h1 { font-size:clamp(2rem,4vw,2.75rem); font-weight:800; letter-spacing:-.028em; margin-bottom:.5rem; }
.doc .doc-meta { font-size:.83rem; color:var(--text-ter); margin-bottom:2.5rem; }
.doc section {
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--stroke); border-radius:18px; padding:1.5rem 1.6rem; margin-bottom:1rem;
}
.doc h2 { font-size:1.15rem; font-weight:800; letter-spacing:-.012em; margin-bottom:.7rem; display:flex; align-items:center; gap:.55rem; }
.doc h2 .ico { width:1.1875rem; height:1.1875rem; color:var(--accent); }
.doc h3 { font-size:.98rem; font-weight:800; margin:1.1rem 0 .4rem; }
.doc p, .doc li { color:var(--text-sec); line-height:1.72; font-size:.94rem; }
.doc p + p { margin-top:.8rem; }
.doc ul { list-style:none; margin:.7rem 0 0; padding:0; }
.doc ul li { position:relative; padding-left:1.1rem; margin-bottom:.45rem; }
.doc ul li::before { content:""; position:absolute; left:0; top:.62em; width:.3125rem; height:.3125rem; border-radius:50%; background:var(--accent); }
.doc a { color:var(--accent); font-weight:600; }
.doc strong { color:var(--text-pri); font-weight:700; }
.doc .kv { display:grid; grid-template-columns:auto 1fr; gap:.35rem 1.1rem; font-size:.94rem; color:var(--text-sec); }
.doc .kv dt { font-weight:700; color:var(--text-pri); }
.doc .kv + p { margin-top:1rem; }
.doc ul + p { margin-top:1rem; }

/* ── FOOTER ── */
.footer { background:color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-top:1px solid var(--stroke); }
.footer a { color:var(--text-sec); font-size:.86rem; font-weight:600; transition:color .2s ease; }

/* ═══════════════════════════════════════════════════════════════
   INTERAKTION & ZUGÄNGLICHKEIT
   Steht bewusst am Dateiende: die Regeln hier müssen die Basis-
   deklarationen weiter oben überschreiben können.
   ═══════════════════════════════════════════════════════════════ */

/* ── MATERIAL: KEIN GLAS AUF GLAS ──
   Eine durchscheinende Karte auf einem durchscheinenden Band ist zwei Lagen
   Milchglas übereinander — innerhalb der Bänder werden die Karten deshalb fest.
   In `#features` (kein Band) bleiben sie durchscheinend: dort ist es eine Lage. */
.band-soft .card,
.band-soft .card-muted {
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.band-soft .card       { background:var(--surface); }
.band-soft .card-muted { background:var(--surf-muted); }

/* ── TAP-ZIELE ──
   Alles unter 44x44 bekommt seine Trefferfläche über ein Pseudo-Element,
   damit die Optik unverändert bleibt. Horizontal jeweils höchstens die halbe
   Lücke zum Nachbarn, sonst überlappen sich die Flächen. */
.nav-link, .icon-btn, .btn-nav, .nav-brand { position:relative; }
.nav-link::after  { content:""; position:absolute; inset:-12px -4px; }
.icon-btn::after  { content:""; position:absolute; inset:-.3125rem; }
.btn-nav::after   { content:""; position:absolute; inset:-5px 0; }
.nav-brand::after { content:""; position:absolute; inset:-6px -4px; }
@media (min-width:640px) {
  .nav-link::after { inset:-12px -10px; }
}
/* Die Footer-Links haben keine Nachbarn in der Breite: echte Höhe statt Pseudo. */
.footer a { display:inline-flex; align-items:center; min-height:44px; }

/* ── HOVER ──
   Nur dort, wo es einen echten Zeiger gibt. Auf iPhone und iPad feuert
   :hover entweder gar nicht oder klebt nach dem Tap am Element fest. */
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover     { background:var(--surf-muted); color:var(--text-pri); }
  .nav-link:hover     { color:var(--text-pri); }
  .btn-primary:hover  { transform:translateY(-2px); box-shadow:0 14px 34px var(--shadow-accent); filter:brightness(1.06); }
  .btn-outline:hover  { transform:translateY(-2px); border-color:var(--accent); }
  .btn-nav:hover      { transform:translateY(-1px); filter:brightness(1.08); }
  .btn-ghost:hover    { background:rgba(255,255,255,.24); }
  .btn-solid:hover    { transform:translateY(-2px); }
  .pbadge:hover       { transform:translateY(-1px); background:color-mix(in srgb, var(--accent) 10%, transparent); }
  .card:hover         { transform:translateY(-3px); box-shadow:0 2px 4px rgba(16,16,32,.05), 0 16px 36px rgba(16,16,32,.10); }
  .dark .card:hover   { border-color:rgba(139,133,255,.28); box-shadow:0 14px 40px rgba(0,0,0,.5); }
  .hero-phone-3d:hover{ transform:rotateY(-7deg) rotateX(2deg) rotateZ(.5deg); }
  .doc a:hover        { text-decoration:underline; }
  .footer a:hover     { color:var(--accent); }
}

/* ── PRESS ──
   Feedback gehört auf pointer-down, nicht auf den Klick. Steht nach dem
   Hover-Block, damit der Druck am Desktop den Lift überschreibt. */
.btn-primary:active, .btn-outline:active, .btn-solid:active,
.btn-ghost:active, .btn-nav:active, .pbadge:active {
  transform:scale(.97);
  transition:transform 100ms ease-out;
}
.icon-btn:active { transform:scale(.92); transition:transform 100ms ease-out; }
.nav-link:active, .footer a:active, .doc a:active { color:var(--accent); }
/* Kein grauer Tap-Kasten über dem eigenen Feedback. */
a, button { -webkit-tap-highlight-color:transparent; }

/* ── OHNE JAVASCRIPT ──
   Ohne diese Regel bleiben die .reveal-Blöcke dauerhaft auf opacity:0,
   wenn der IntersectionObserver nie läuft. */
.no-js .reveal { opacity:1; transform:none; }

/* ── REDUZIERTE BEWEGUNG ──
   Kein Totalausfall, sondern die sanftere Variante: Slides werden zu
   Überblendungen, Dauerschleifen halten an. Der Theme-Wechsel behält
   bewusst seine 250ms — abrupte Helligkeitssprünge sind genau das,
   wovor diese Einstellung schützen soll. */
@media (prefers-reduced-motion: reduce) {
  .amb, .hero-float          { animation:none; }
  .hero-phone-3d             { transition:none; }
  .reveal                    { transition:opacity 200ms ease; transform:none; }
  .reveal:not(.in)           { transform:none; }
  .card, .btn-primary, .btn-outline, .btn-nav, .btn-solid, .pbadge {
    transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .btn-primary:active, .btn-outline:active, .btn-solid:active,
  .btn-ghost:active, .btn-nav:active, .pbadge:active, .icon-btn:active {
    transform:none; background-color:var(--surf-strong);
  }
  html { scroll-behavior:auto; }
}

/* ── REDUZIERTE TRANSPARENZ ──
   24 Flächen auf der Seite tragen backdrop-filter; hier werden sie fest. */
@media (prefers-reduced-transparency: reduce) {
  .nav-blur, .band-soft, .band-soft.alt, .card, .card-muted,
  .footer, .doc section {
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .nav-blur, .card, .footer, .doc section { background:var(--surface); }
  .band-soft     { background:var(--surface); }
  .band-soft.alt { background:var(--surf-muted); }
  .card-muted    { background:var(--surf-muted); }
  .ambient       { opacity:.10; }
  .dark .ambient { opacity:.16; }
}

/* ── ERHÖHTER KONTRAST ── */
@media (prefers-contrast: more) {
  .card, .card-muted, .doc section, .stat-tile {
    background:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none;
    border-color:var(--text-ter);
  }
  .ambient  { opacity:.08; }
  .nav-blur { background:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .body-lg, .nav-link, .footer a, .doc p, .doc li { color:var(--text-pri); }
}