/* ═══════════════════════════════════════════════════════════════
   APA — Spielerberatung
   Dunkles Design, mobile first, kein Build-Step, kein Framework.
   Layout- und Animationssystem nach arche.eu.
   ═══════════════════════════════════════════════════════════════ */

/* ── Schriften, selbst gehostet ──────────────────────────────────
   Sieben Schnitte statt elf, nur latin. Vorher lagen sie bei Google:
   eine Fremdverbindung mehr beim Laden, ein DNS-Auflösen mehr, und
   ein Datenschutzthema (Abschnitt 8) obendrauf.

   Nicht geladen, weil nirgends benutzt: Cinzel 400, Cormorant 400
   und 600, Montserrat 700.

   font-display:swap zeigt sofort die Systemschrift und tauscht
   nach. So wartet der Besucher nie auf Text.                      */
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:300;
  font-display:swap;src:url('../fonts/montserrat-300.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400;
  font-display:swap;src:url('../fonts/montserrat-400.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:500;
  font-display:swap;src:url('../fonts/montserrat-500.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:600;
  font-display:swap;src:url('../fonts/montserrat-600.woff2') format('woff2');
}
@font-face{
  font-family:'Cinzel';font-style:normal;font-weight:600;
  font-display:swap;src:url('../fonts/cinzel-600.woff2') format('woff2');
}
@font-face{
  font-family:'Cinzel';font-style:normal;font-weight:700;
  font-display:swap;src:url('../fonts/cinzel-700.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:500;
  font-display:swap;src:url('../fonts/cormorant-garamond-500.woff2') format('woff2');
}

/* ── Tokens ─────────────────────────────────────────────────── */
:root{
  --black:#000; --ink:#1f1f1f; --white:#fff; --grey:#dbdbdb;
  --champagne:#beb0a8;
  --gold-100:#e7ded9; --gold-200:#d6c9c1; --gold-300:#c8b9b0;
  --gold-400:#beb0a8; --gold-500:#9c8e86; --gold-600:#6f635c;
  --panel:#121212; --panel-2:#0c0c0c;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);

  --neg:#7a0000;
  --neg-line:rgba(122,0,0,.62);
  --neg-aura:radial-gradient(ellipse 64% 64% at 50% 0%,rgba(122,0,0,.42) 0%,rgba(122,0,0,.16) 36%,rgba(122,0,0,.06) 60%,transparent 80%);

  --gold-grad:linear-gradient(135deg,#9c8e86 0%,#e7ded9 45%,#c8b9b0 70%,#9c8e86 100%);
  --gold-text:linear-gradient(100deg,#c8b9b0 0%,#e7ded9 50%,#beb0a8 100%);
  --card-grad:linear-gradient(155deg,rgba(190,176,168,.16) 0%,rgba(31,31,31,.55) 40%,rgba(8,8,8,.88) 100%);
  /* Lichtquelle sitzt im Element, nicht auf der Kante, und ist bei 72 %
     vollständig transparent. Sonst entsteht an der Sektionsgrenze eine
     sichtbare waagerechte Abrisskante. */
  --aura:radial-gradient(ellipse 62% 52% at 50% 38%,rgba(190,176,168,.34) 0%,rgba(190,176,168,.13) 38%,rgba(190,176,168,.04) 58%,transparent 74%);
  --aura-top:radial-gradient(ellipse 58% 60% at 50% 12%,rgba(190,176,168,.30) 0%,rgba(190,176,168,.11) 40%,rgba(190,176,168,.03) 60%,transparent 76%);

  --text-strong:var(--white);
  --text-body:var(--grey);
  --text-muted:rgba(219,219,219,.55);

  --font-sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Cinzel',Georgia,'Times New Roman',serif;
  --font-wordmark:'Cormorant Garamond',Georgia,serif;

  --track-sans:-.025em; --track-wide:.18em; --track-eyebrow:.24em;

  --fs-display:clamp(40px,5.4vw,76px);
  --fs-h1:clamp(32px,3.6vw,52px);
  --fs-h2:clamp(26px,2.6vw,38px);
  --fs-h3:24px;
  --fs-body-lg:20px; --fs-body:17px; --fs-small:14px; --fs-eyebrow:13px;

  --lh-tight:1.08; --lh-snug:1.3; --lh-body:1.6;

  --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --sp-10:140px;                     /* Abstand zwischen den Sektionen */
  --pad-x:clamp(20px,5vw,120px);
  --r-md:10px; --r-card:14px; --r-pill:999px;
  --line-soft:rgba(255,255,255,.07); /* ruhigere Kartenkante */

  --shadow-card:0 18px 50px -20px rgba(0,0,0,.8);
  --glow-gold:0 0 0 1px rgba(190,176,168,.35),0 8px 40px -10px rgba(190,176,168,.25);

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:160ms; --dur:280ms; --dur-slow:520ms;
}

/* ── Basis ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.is-smooth{scroll-behavior:auto}
body{
  margin:0;background:var(--black);color:var(--text-body);
  font-family:var(--font-sans);font-size:var(--fs-body);
  line-height:var(--lh-body);letter-spacing:var(--track-sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold-400);color:#000}

.skip{position:absolute;left:-9999px;top:0;padding:12px 18px;background:#fff;color:#000;z-index:210}
.skip:focus{left:8px;top:8px}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px;border-radius:4px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;color:var(--gold-300)}

.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--pad-x)}
.center{text-align:center}

/* ── Typo-Bausteine ─────────────────────────────────────────── */
.mono{
  font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#8a8a8a;
}
.eyebrow{
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  color:var(--gold-400);margin:0 0 var(--sp-4);
}
.h2{
  font-family:var(--font-sans);font-weight:300;
  font-size:var(--fs-h1);line-height:var(--lh-snug);
  letter-spacing:var(--track-sans);color:var(--text-strong);
  margin:0 0 var(--sp-5);
}
.h2 em,.serif-em{
  font-family:var(--font-serif);font-style:normal;font-weight:700;
  letter-spacing:.015em;text-transform:uppercase;
  background:var(--gold-text);-webkit-background-clip:text;
  background-clip:text;color:transparent;
}
.h2--center{text-align:center}
.h3{
  font-family:var(--font-sans);font-weight:500;font-size:var(--fs-h3);
  color:var(--text-strong);margin:0 0 var(--sp-4);letter-spacing:var(--track-sans);
}
.lead{font-size:var(--fs-body-lg);color:var(--text-muted);max-width:54ch;margin:0 0 var(--sp-8)}
.lead--center{margin-inline:auto;text-align:center}

.pill{
  display:inline-flex;align-items:center;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);padding:3px 10px;font-size:10px;font-weight:600;
  letter-spacing:.16em;color:var(--gold-200);
}
.pill--soon{border-color:var(--line);color:var(--text-muted)}

/* ── Buttons (mit Shine-Sweep) ──────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:14px 26px;border-radius:var(--r-md);overflow:hidden;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
  isolation:isolate;
}
.btn--light{background:var(--gold-grad);color:#0b0b0b;box-shadow:var(--glow-gold)}
.btn--outline{border:1px solid var(--line-strong);color:var(--text-strong)}
.btn--wide{min-width:min(420px,100%);padding-inline:40px}
.btn::after{
  content:"";position:absolute;top:-40%;left:0;width:32%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-160%) skewX(-18deg);pointer-events:none;z-index:2;
  animation:btnShine 5.5s var(--ease-in-out) infinite;
}
.btn--outline::after{background:linear-gradient(90deg,transparent,rgba(190,176,168,.28),transparent)}

/* ── Navigation ─────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:90;
  animation:navDrop 1.1s var(--ease-out) both;
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(6,6,6,.72);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line);
}
.nav__inner{
  max-width:1440px;margin:0 auto;padding:14px var(--pad-x);
  display:flex;align-items:center;gap:var(--sp-5);
}
.wordmark{display:flex;align-items:center;gap:12px}
.wordmark img{
  height:32px;width:auto;
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
}
.wordmark__text{
  font-family:var(--font-wordmark);font-size:27px;font-weight:500;
  letter-spacing:.01em;color:var(--white);line-height:1;
}
.nav__links{
  display:flex;gap:var(--sp-6);margin-inline:auto;
  font-size:15px;color:var(--text-body);
}
.nav__links a{position:relative;padding:4px 0;transition:color var(--dur) var(--ease-out)}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold-400);transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur-slow) var(--ease-out);
}
.nav__cta{padding:11px 22px;font-size:14px}

.burger{display:none;width:38px;height:38px;position:relative}
.burger span{
  position:absolute;left:9px;width:20px;height:1.5px;background:var(--white);
  transition:transform var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out);
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.is-open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* Overlay-Menü */
.menu{
  position:fixed;inset:0;z-index:80;background:rgba(4,4,4,.96);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;
  padding:120px var(--pad-x) 48px;
  opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease-out);
}
.menu[hidden]{display:none}
.menu.is-open{opacity:1;pointer-events:auto}
.menu__aura{position:absolute;inset:-20%;background:var(--aura-top);opacity:.55;pointer-events:none}
.menu__list{position:relative;display:flex;flex-direction:column;gap:6px}
.menu__list a{
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:14px 0;
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),color var(--dur) var(--ease-out);
}
.menu.is-open .menu__list a{opacity:1;transform:none}
.menu.is-open .menu__list a:nth-child(1){transition-delay:.08s}
.menu.is-open .menu__list a:nth-child(2){transition-delay:.14s}
.menu.is-open .menu__list a:nth-child(3){transition-delay:.20s}
.menu.is-open .menu__list a:nth-child(4){transition-delay:.26s}
.menu.is-open .menu__list a:nth-child(5){transition-delay:.32s}
.menu__list span{
  font-family:var(--font-serif);font-size:clamp(28px,7vw,44px);
  font-weight:600;color:var(--white);text-transform:uppercase;letter-spacing:.02em;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{height:200vh;position:relative}
.hero__sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:0}
/* Vollbild statt gerahmter Karte: keine Ränder, keine Rundung. Der
   Übergang nach unten macht allein der Verlauf in .hero__scrim. */
.hero__frame{
  position:relative;width:100%;margin:0;
  height:100vh;height:100svh;
  border-radius:0;overflow:hidden;background:#050505;
  transform-origin:50% 40%;will-change:transform,opacity;
}
@supports (height:100svh){ .hero__sticky{height:100svh} }
.hero__aura{
  position:absolute;inset:0;z-index:1;
  background:radial-gradient(64% 64% at 50% 0%,rgba(190,176,168,.30) 0%,rgba(190,176,168,.12) 36%,rgba(190,176,168,.04) 60%,transparent 80%);
}
/* konzentrische Bögen */
.arches{position:absolute;inset:0;z-index:2;pointer-events:none}
.arch{
  position:absolute;left:50%;top:-24%;border-radius:50%;
  border:1px solid rgba(190,176,168,.16);transform:translateX(-50%);
  opacity:0;animation:archIn 1.6s var(--ease-out) forwards;
}
.arch--1{width:900px;height:900px;animation-delay:.15s}
.arch--2{width:1280px;height:1280px;border-color:rgba(190,176,168,.11);animation-delay:.3s}
.arch--3{width:1660px;height:1660px;border-color:rgba(190,176,168,.07);animation-delay:.45s}

.hero__title{
  position:absolute;left:0;right:0;top:clamp(48px,11%,120px);z-index:6;
  margin:0;text-align:center;line-height:var(--lh-tight);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:.28em;padding-inline:24px;
}
.hero__title-sans,.hero__title-serif{
  display:inline-block;opacity:0;transform:translateY(38px);
  animation:titleIn 1.2s var(--ease-out) forwards;
}
.hero__title-sans{
  font-weight:300;font-size:var(--fs-display);letter-spacing:-.025em;
  background:linear-gradient(#fff 0%,#f2f0ee 34%,#6f635c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation-delay:.35s;
}
.hero__title-serif{
  font-family:var(--font-serif);font-weight:700;
  font-size:calc(var(--fs-display) * .92);text-transform:uppercase;
  letter-spacing:.015em;
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;animation-delay:.5s;
}

/* Foto füllt den Rahmen. Es liegt ganz unten, damit Aura und Bögen
   darüber sichtbar bleiben. */
.hero__media{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  opacity:0;transform:scale(1.06);
  animation:mediaIn 2.2s var(--ease-out) .35s forwards;
  will-change:transform;
}
/* Verdunkelt den Scheinwerfer-Glanz oben, damit die Headline lesbar bleibt */
.hero__topscrim{
  position:absolute;left:0;right:0;top:0;height:56%;z-index:4;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.72) 0%,rgba(0,0,0,.46) 38%,rgba(0,0,0,.12) 72%,transparent 100%);
}
/* Weicher Ausklang nach Schwarz. Viele Stützstellen entlang einer
   Ease-in-Kurve, sonst zeichnet sich im dunklen Verlauf eine Kante ab. */
.hero__scrim{
  position:absolute;left:0;right:0;bottom:0;height:60%;z-index:5;
  background:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.04) 14%,
    rgba(0,0,0,.11) 26%,
    rgba(0,0,0,.22) 37%,
    rgba(0,0,0,.36) 47%,
    rgba(0,0,0,.52) 57%,
    rgba(0,0,0,.68) 67%,
    rgba(0,0,0,.82) 77%,
    rgba(0,0,0,.92) 86%,
    rgba(0,0,0,.98) 94%,
    #000 100%);
}

/* Rauchschwaden */
.smoke{position:absolute;z-index:5;pointer-events:none;mix-blend-mode:screen}
.smoke--1{
  left:-12%;right:-12%;bottom:-6%;height:44%;
  background:radial-gradient(50% 64% at 50% 100%,rgba(170,168,166,.40) 0%,rgba(120,118,116,.16) 44%,transparent 76%);
  filter:blur(26px);animation:heroSmoke 16s var(--ease-in-out) infinite alternate;
}
.smoke--2{
  left:-8%;right:-8%;bottom:2%;height:32%;
  background:radial-gradient(44% 62% at 44% 100%,rgba(200,200,200,.30) 0%,rgba(140,140,140,.12) 46%,transparent 74%);
  filter:blur(34px);animation:heroSmoke 12s var(--ease-in-out) -5s infinite alternate-reverse;
}
/* Staubpartikel (per JS erzeugt) */
.dust{position:absolute;inset:0;z-index:6;pointer-events:none}
.dust span{
  position:absolute;border-radius:50%;background:rgba(231,222,217,.85);
  box-shadow:0 0 6px rgba(231,222,217,.55);opacity:0;
  animation-name:heroDust;animation-timing-function:linear;animation-iteration-count:infinite;
}

.hero__copy{
  position:absolute;left:0;right:0;bottom:76px;z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);
  padding-inline:clamp(20px,6vw,80px);text-align:center;
}
.hero__lead{margin:0;max-width:52ch;color:var(--grey);font-size:var(--fs-body)}

.hero__bar{
  position:absolute;left:0;right:0;bottom:22px;z-index:7;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:clamp(20px,3vw,34px);
}
.keepmoving{display:flex;align-items:center;gap:10px}
.keepmoving svg{animation:scrollWave 2.4s var(--ease-in-out) infinite}

/* ── Fit-Check ──────────────────────────────────────────────── */
.fit{position:relative;padding:var(--sp-10) 0;overflow:hidden}
.fit__glow{
  position:absolute;width:52vw;height:52vw;border-radius:50%;left:0;top:0;
  background:radial-gradient(circle,rgba(190,176,168,.16) 0%,transparent 68%);
  filter:blur(40px);pointer-events:none;
  animation:fitWander 26s var(--ease-in-out) infinite;
}
.fit__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin-top:var(--sp-7)}
.fitcard{
  position:relative;padding:var(--sp-7) var(--sp-6);border-radius:var(--r-card);
  border:1px solid var(--line);background:var(--card-grad);overflow:hidden;
  transition:transform var(--dur-slow) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.fitcard::before{
  content:"";position:absolute;inset:0;background:var(--aura);opacity:.35;
  pointer-events:none;transition:opacity var(--dur-slow) var(--ease-out);
}
.fitcard--no::before{background:var(--neg-aura);opacity:.5}
.fitcard--no{border-color:var(--neg-line)}
.fitcard>*{position:relative}
.fitcard--no .eyebrow{color:#c46a6a}
.fitlist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fitlist li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-body)}
.tick{
  flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;border:1px solid var(--line-strong);color:var(--gold-200);margin-top:2px;
}
.fitcard--no .tick{border-color:var(--neg-line);color:#c46a6a}

/* ── Features ───────────────────────────────────────────────── */
.features{padding:var(--sp-10) 0}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.chips li{
  border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px;
  font-size:12px;color:var(--text-body);
  transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}

.dnagrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.dna{
  position:relative;padding:var(--sp-6);border-radius:var(--r-card);
  border:1px solid var(--line);background:var(--panel);overflow:hidden;
  transition:transform var(--dur-slow) var(--ease-out),border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out);
}
.dna::before{
  content:"";position:absolute;inset:0;background:var(--aura);opacity:0;
  transition:opacity var(--dur-slow) var(--ease-out);pointer-events:none;
}
.dna>*{position:relative}
.dna__i{
  position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-strong);font-size:12px;font-style:italic;
  color:var(--text-muted);display:grid;place-items:center;z-index:2;
  transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
}
.dna__i[aria-expanded="true"]{transform:rotate(180deg);border-color:var(--gold-400);color:var(--gold-200)}
.dna__no{color:var(--gold-500);margin:0 0 var(--sp-5)}
.dna__title{font-size:19px;font-weight:500;color:var(--text-strong);margin:0 0 8px}
.dna__text{margin:0;font-size:var(--fs-small);color:var(--text-muted)}
.dna__more{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out),margin var(--dur-slow) var(--ease-out);
  font-size:var(--fs-small);color:var(--text-body);overflow:hidden;
}
.dna__more>*{overflow:hidden}
.dna.is-open .dna__more{grid-template-rows:1fr;opacity:1;margin-top:14px}

.soon{
  list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-5);
  margin:var(--sp-7) 0 0;padding:0;justify-content:center;
  font-size:var(--fs-small);color:var(--text-muted);
}
.soon li{display:flex;align-items:center;gap:10px}

/* ── Cases ──────────────────────────────────────────────────── */
.cases{padding:var(--sp-10) 0}
.caseslot{
  display:grid;place-items:center;min-height:260px;border-radius:var(--r-card);
  border:1px dashed var(--line-strong);background:var(--panel-2);
  transition:border-color var(--dur) var(--ease-out);
}

/* ── CTA ────────────────────────────────────────────────────── */
.cta{position:relative;padding:var(--sp-10) 0;overflow:hidden}
.cta__aura{
  position:absolute;inset:-30% -15%;background:var(--aura);
  opacity:.6;pointer-events:none;filter:blur(20px);
}
.cta .wrap{position:relative}
.cta .btn{margin-top:var(--sp-6)}

/* ── Footer ─────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:var(--sp-6) 0}
.foot__inner{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap}
.foot__links{margin-left:auto;display:flex;gap:var(--sp-5);font-size:var(--fs-small);color:var(--text-muted)}

/* ═══════════════════════════════════════════════════════════════
   AGENTUR-KOMPONENTEN
   ═══════════════════════════════════════════════════════════════ */

/* ── Ladeanimation ──────────────────────────────────────────────
   Rein CSS-getrieben: blendet sich auch ohne JS selbst aus, damit
   Inhalte nie von einer Animation abhängen.                       */
.loader{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:#000;pointer-events:none;
  animation:loaderOut .7s var(--ease-out) 1.1s forwards;
}
.loader__mark{position:relative;display:grid;place-items:center}
.loader__mark img{width:clamp(110px,20vw,150px);height:auto;opacity:.96}
.loader__bar{
  position:absolute;left:0;right:0;bottom:-28px;height:1px;
  background:var(--line-strong);overflow:hidden;
}
.loader__bar::after{
  content:"";position:absolute;inset:0;background:var(--gold-grad);
  transform:translateX(-100%);animation:loaderBar 1.1s var(--ease-in-out) forwards;
}
.loader.is-done{display:none}

/* ── Kopfbereich der Unterseiten ────────────────────────────── */
.phero{position:relative;padding:calc(var(--sp-9) + 90px) 0 var(--sp-9);overflow:hidden}
.phero__aura{
  position:absolute;inset:-40% -15% -20%;background:var(--aura-top);
  opacity:.5;pointer-events:none;filter:blur(18px);
}
/* Logo als großes, sehr leises Wasserzeichen im Seitenkopf */
/* Leiser Markenakzent im freien Raum rechts. Bewusst klein: als großes
   Wasserzeichen kollidiert das quadratische Lockup mit der Überschrift. */
.phero__mark{
  position:absolute;right:var(--pad-x);top:50%;transform:translateY(-46%);
  width:190px;height:auto;opacity:.07;pointer-events:none;user-select:none;
}
@media (max-width:1100px){ .phero__mark{display:none} }
.phero .wrap{position:relative}
.phero h1{
  font-weight:300;font-size:var(--fs-h1);line-height:var(--lh-snug);
  color:var(--text-strong);margin:0 0 var(--sp-5);letter-spacing:var(--track-sans);
}
.phero h1 em{
  font-family:var(--font-serif);font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:.015em;
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.phero__lead{font-size:var(--fs-body-lg);color:var(--text-muted);max-width:50ch;margin:0}

/* ── Brotkrumen ─────────────────────────────────────────────── */
.crumbs{font-size:12px;color:var(--text-muted);margin:0 0 var(--sp-5)}
.crumbs a{color:var(--gold-400)}
.crumbs span{margin:0 8px;opacity:.5}

/* ── Zahlencounter ──────────────────────────────────────────── */
.stats{padding:var(--sp-9) 0;border-block:1px solid var(--line-soft)}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.stat{text-align:center;padding:var(--sp-5) var(--sp-4)}
.stat__num{
  display:block;font-family:var(--font-serif);font-weight:700;
  font-size:clamp(44px,6vw,78px);line-height:1;
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;font-variant-numeric:tabular-nums;
}
.stat__label{
  display:block;margin-top:12px;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);
}

/* ── Bento ──────────────────────────────────────────────────────
   Sechs Spalten, Zellen belegen unterschiedlich viele davon. Der
   Punkt sind nicht die Größen, sondern die vier Zellcharaktere:
   `--hero` trägt die Sektion, `--row` liest sich als Zeile,
   `--quiet` ist nur eine Haarlinie, Standard ist eine Kachel.
   Neun gleiche Kästen sind ausdrücklich nicht das Ziel.          */
.bento{
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(136px,auto);
  gap:clamp(10px,1.1vw,16px);
}

.bento__cell{
  position:relative;overflow:hidden;isolation:isolate;
  grid-column:span 2;
  display:flex;flex-direction:column;justify-content:flex-end;gap:9px;
  padding:clamp(20px,2.2vw,30px);
  border:1px solid var(--line-soft);border-radius:var(--r-card);
  background:var(--panel);
  transition:transform var(--dur-slow) var(--ease-out),
             border-color var(--dur) var(--ease-out),
             background var(--dur) var(--ease-out);
}

/* Lichtkegel folgt dem Zeiger. --mx/--my setzt main.js, ohne JS
   bleibt der Standardwert stehen und die Zelle sieht normal aus. */
.bento__cell::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),
             rgba(190,176,168,.17),transparent 72%);
  opacity:0;transition:opacity var(--dur-slow) var(--ease-out);
}

/* Riesenziffer als Wasserzeichen, sitzt hinter dem Text */
.bento__cell[data-no]::after{
  content:attr(data-no);position:absolute;right:-.04em;bottom:-.3em;z-index:-1;
  font-family:var(--font-serif);font-weight:700;line-height:.78;
  font-size:clamp(88px,10vw,164px);color:rgba(255,255,255,.03);
  font-variant-numeric:tabular-nums;pointer-events:none;
  transition:color var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}

.bento__no{
  margin:0;font-family:var(--font-serif);font-weight:700;font-size:12px;
  letter-spacing:.2em;color:var(--gold-600);font-variant-numeric:tabular-nums;
  transition:color var(--dur) var(--ease-out);
}
.bento__title{
  margin:0;font-size:clamp(17px,1.5vw,21px);font-weight:500;
  color:var(--text-strong);letter-spacing:var(--track-sans);line-height:1.25;
}
.bento__text{margin:0;font-size:var(--fs-small);color:var(--text-muted)}

/* Spannweiten */
.bento__cell--w3{grid-column:span 3}
.bento__cell--w6{grid-column:span 6}
.bento__cell--h2{grid-row:span 2}

/* Trägerzelle: goldener Verlauf, große Kursivschrift, Lichtwisch */
.bento__cell--hero{
  gap:var(--sp-4);
  border-color:rgba(190,176,168,.26);background:var(--card-grad);
  box-shadow:var(--shadow-card);
}
.bento__cell--hero .bento__title{
  font-family:var(--font-wordmark);font-weight:500;letter-spacing:.005em;
  font-size:clamp(29px,3.3vw,46px);line-height:1.02;
}
.bento__cell--hero .bento__title em{
  font-family:var(--font-serif);font-style:normal;font-weight:700;
  font-size:.6em;letter-spacing:.06em;text-transform:uppercase;
  background:var(--gold-text);-webkit-background-clip:text;
  background-clip:text;color:transparent;
}
.bento__cell--hero .bento__text{max-width:46ch}
.bento__shine{
  position:absolute;top:0;left:0;z-index:-1;width:22%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(231,222,217,.15),transparent);
  transform:skewX(-14deg);pointer-events:none;
  animation:leShine 6s var(--ease-in-out) infinite;
}

/* Zeilenzelle: liest sich waagerecht, Pfeil rechts */
.bento__cell--row{
  flex-direction:row;align-items:center;gap:clamp(14px,2.2vw,36px);
  min-height:0;
}
.bento__cell--row .bento__no{
  flex:0 0 auto;font-size:clamp(22px,2.6vw,38px);letter-spacing:.02em;line-height:1;
}
.bento__cell--row .bento__title{flex:0 0 auto}
.bento__cell--row .bento__text{margin-left:auto;text-align:right;max-width:46ch}
.bento__arrow{
  flex:0 0 22px;width:22px;height:22px;color:var(--gold-500);
  opacity:0;transform:translateX(-8px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}

/* Stille Zelle: keine Kachel, nur eine Haarlinie */
.bento__cell--quiet{
  border:0;border-top:1px solid var(--line-soft);border-radius:0;
  background:transparent;padding-inline:clamp(2px,.5vw,8px);
}

@media (max-width:960px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .bento__cell--w3,.bento__cell--w6{grid-column:span 4}
  .bento__cell--h2{grid-row:span 1}
  .bento__cell--row{flex-wrap:wrap;gap:10px 20px}
  .bento__cell--row .bento__text{margin-left:0;text-align:left;flex:1 1 100%}
  .bento__cell--row .bento__arrow{display:none}
}
@media (max-width:600px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(0,auto);gap:9px}
  .bento__cell{grid-column:span 2;padding:18px 20px}
  /* Kurze Zellen bleiben halbbreit, sonst wird das Bento auf dem
     Handy zu einem simplen Stapel. */
  .bento__cell--m1{grid-column:span 1}
  .bento__cell[data-no]::after{font-size:78px}
}

/* ── Leistungs-Index ────────────────────────────────────────────
   Redaktionelle Zeilen mit Haarlinien. Startseite und Bento auf
   der Leistungsseite zeigen dieselben neun Bereiche — zweimal
   dasselbe Raster wäre eine Wiederholung ohne Zweck.            */
.idx{border-top:1px solid var(--line-soft)}
.idx__row{
  position:relative;display:grid;
  grid-template-columns:clamp(56px,7vw,92px) minmax(0,1fr) minmax(0,1.15fr) 34px;
  align-items:baseline;gap:clamp(16px,3vw,40px);
  padding:clamp(22px,2.6vw,34px) 0;
  border-bottom:1px solid var(--line-soft);
  transition:border-color var(--dur) var(--ease-out);
}
/* Lichtwisch beim Überfahren, läuft von links ein */
.idx__row::before{
  content:"";position:absolute;inset:0 calc(-1 * var(--sp-5));
  background:linear-gradient(90deg,rgba(190,176,168,.10),rgba(190,176,168,.02) 55%,transparent);
  opacity:0;transform:translateX(-14px);pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}
.idx__row>*{position:relative}
.idx__no{
  font-family:var(--font-serif);font-weight:700;
  font-size:clamp(24px,3.4vw,44px);line-height:.9;
  color:var(--gold-600);font-variant-numeric:tabular-nums;
  transition:color var(--dur-slow) var(--ease-out);
}
.idx__title{
  font-size:clamp(19px,2vw,26px);font-weight:400;
  color:var(--text-strong);margin:0;letter-spacing:var(--track-sans);
}
.idx__text{margin:0;font-size:var(--fs-small);color:var(--text-muted)}
.idx__arrow{
  align-self:center;justify-self:end;width:22px;height:22px;
  color:var(--gold-500);opacity:0;transform:translateX(-8px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}
@media (max-width:820px){
  .idx__row{
    grid-template-columns:clamp(44px,12vw,64px) 1fr;
    align-items:start;gap:14px var(--sp-5);
  }
  .idx__no{grid-row:1 / span 2}
  .idx__text{grid-column:2}
  .idx__arrow{display:none}
}

/* ── Einlaufliste ───────────────────────────────────────────────
   Aussage links, Erklärung rechts, dazwischen nichts. Für
   Abschnitte aus vier kurzen Sätzen — die tragen keine vier
   Kästen. Beim Überfahren zieht die Haarlinie in Gold durch.    */
.runin{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft)}
.runin li{
  position:relative;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px clamp(14px,2.6vw,36px);
  padding:clamp(15px,1.9vw,21px) 0;
  border-bottom:1px solid var(--line-soft);
}
.runin li::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--gold-400);pointer-events:none;
  transition:width var(--dur-slow) var(--ease-out);
}
.runin b{
  flex:0 0 clamp(190px,28%,300px);font-weight:500;
  font-size:var(--fs-body);color:var(--text-strong);letter-spacing:var(--track-sans);
}
.runin span{flex:1 1 300px;font-size:var(--fs-small);color:var(--text-muted)}
@media (max-width:600px){
  .runin b{flex-basis:100%}
  .runin span{flex-basis:100%}
}

/* ── Randziffern ────────────────────────────────────────────────
   Große Ziffer hängt im Seitenrand, Text steht in einer ruhigen
   Spalte daneben. Kein Kasten, keine Fläche.                    */
.marginum{list-style:none;margin:0;padding:0;display:grid;gap:clamp(26px,3.6vw,44px)}
.marginum li{
  display:grid;grid-template-columns:clamp(52px,7vw,104px) minmax(0,1fr);
  gap:clamp(14px,3vw,36px);align-items:start;
}
.marginum__no{
  font-family:var(--font-serif);font-weight:700;line-height:.82;
  font-size:clamp(36px,5.4vw,80px);font-variant-numeric:tabular-nums;
  background:linear-gradient(160deg,#e7ded9 0%,#9c8e86 62%,#6f635c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.marginum h3{
  font-size:clamp(18px,1.7vw,22px);font-weight:500;color:var(--text-strong);
  margin:0 0 8px;letter-spacing:var(--track-sans);
}
.marginum p{margin:0;font-size:var(--fs-small);color:var(--text-muted);max-width:58ch}

/* ── Redaktioneller Doppelseiter ────────────────────────────────
   Zwei Absätze nebeneinander, getrennt durch eine Haarlinie.    */
.spread{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,68px)}
.spread>*+*{
  border-left:1px solid var(--line-soft);
  padding-left:clamp(26px,4.5vw,68px);
}
.spread h3{
  font-family:var(--font-serif);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.14em;margin:0 0 var(--sp-4);
  background:var(--gold-text);-webkit-background-clip:text;
  background-clip:text;color:transparent;
}
.spread p{
  margin:0;font-family:var(--font-wordmark);line-height:1.45;
  font-size:clamp(19px,1.9vw,26px);color:var(--text-body);
}
@media (max-width:760px){
  .spread{grid-template-columns:1fr;gap:var(--sp-6)}
  .spread>*+*{
    border-left:0;border-top:1px solid var(--line-soft);
    padding-left:0;padding-top:var(--sp-6);
  }
}

/* ── Wege (Karriereseite) ───────────────────────────────────────
   Drei Spalten, nur durch senkrechte Haarlinien getrennt.       */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.2vw,48px)}
.paths>*{display:flex;flex-direction:column}
.paths>*+*{
  border-left:1px solid var(--line-soft);
  padding-left:clamp(22px,3.2vw,48px);
}
.paths .mono{color:var(--gold-500);margin:0 0 var(--sp-4)}
.paths h2{
  font-family:var(--font-wordmark);font-weight:500;line-height:1;
  font-size:clamp(28px,3vw,40px);color:var(--white);margin:0 0 12px;
}
.paths>*>p{margin:0 0 var(--sp-5);font-size:var(--fs-small);color:var(--text-muted)}
.paths ul{list-style:none;margin:0 0 var(--sp-5);padding:0;display:grid;gap:9px}
.paths li{display:flex;gap:10px;font-size:var(--fs-small);color:var(--text-muted)}
.paths li::before{content:"—";color:var(--gold-600);flex:0 0 auto}
.paths .hint{margin:0 0 var(--sp-5)}
.paths .btn{margin-top:auto;align-self:flex-start}
@media (max-width:900px){
  .paths{grid-template-columns:1fr;gap:var(--sp-7)}
  .paths>*+*{
    border-left:0;border-top:1px solid var(--line-soft);
    padding-left:0;padding-top:var(--sp-7);
  }
}

/* ── Begriffsliste ──────────────────────────────────────────────
   Zwei Spalten, Haarlinie oben, sonst nichts.                   */
.deflist{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-6) clamp(26px,4.5vw,68px);margin:0;
}
.deflist>div{border-top:1px solid var(--line-soft);padding-top:var(--sp-4)}
.deflist dt{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-400);margin:0 0 8px;
}
.deflist dd{margin:0;font-size:var(--fs-small);color:var(--text-muted)}
@media (max-width:600px){
  .deflist{grid-template-columns:1fr;gap:var(--sp-5)}
}

/* ── Zeitleiste ─────────────────────────────────────────────── */
.tl{list-style:none;margin:0;padding:0 0 0 var(--sp-6);position:relative}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:var(--line-strong)}
.tl li{position:relative;padding-bottom:var(--sp-6)}
.tl li::before{
  content:"";position:absolute;left:calc(-1 * var(--sp-6) + 2px);top:7px;
  width:9px;height:9px;border-radius:50%;background:var(--gold-400);
  box-shadow:0 0 0 4px rgba(190,176,168,.14);
}
.tl__year{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--gold-400);text-transform:uppercase}
.tl h3{font-size:18px;font-weight:500;color:var(--text-strong);margin:6px 0 6px}
.tl p{margin:0;font-size:var(--fs-small);color:var(--text-muted);max-width:60ch}

/* ── Partnervereine: Filter ─────────────────────────────────── */
.filters{
  display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:flex-end;
  margin:var(--sp-7) 0 var(--sp-6);padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--line);
}
.field{display:flex;flex-direction:column;gap:8px;min-width:200px}
.field label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.field select,.field input,.field textarea{
  width:100%;padding:12px 14px;border-radius:var(--r-md);
  border:1px solid var(--line-strong);background:var(--panel);
  color:var(--text-strong);font:inherit;font-size:15px;
  transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out);
}
.field select:focus,.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-400);background:var(--panel-2);
}
.field textarea{min-height:150px;resize:vertical}
.filters__count{margin-left:auto;font-size:12px;color:var(--text-muted);padding-bottom:12px}

/* ── Partnervereine: Raster ─────────────────────────────────── */
.clubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.club{
  display:flex;flex-direction:column;gap:var(--sp-5);
  padding:var(--sp-6);border-radius:var(--r-card);
  border:1px solid var(--line-soft);background:var(--panel);
  transition:transform var(--dur-slow) var(--ease-out),border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out);
}
.club[hidden]{display:none}
.club__top{display:flex;align-items:center;gap:var(--sp-4)}
/* Wappen-Platzhalter, rein CSS — bis echte Logos freigegeben sind */
.crest{
  flex:0 0 52px;width:52px;height:60px;display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(190,176,168,.20),rgba(10,10,10,.9));
  border:1px solid var(--line-strong);
  border-radius:6px 6px 26px 26px/6px 6px 34px 34px;
  font-family:var(--font-serif);font-weight:700;font-size:15px;
  color:var(--gold-200);letter-spacing:.02em;
}
.club__name{font-size:17px;font-weight:500;color:var(--text-strong);margin:0;letter-spacing:var(--track-sans)}
.club__meta{margin:4px 0 0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-500)}
.club__text{margin:0;font-size:var(--fs-small);color:var(--text-muted)}
.club__tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0;padding:0}
.club__tags li{
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:5px 11px;font-size:11px;color:var(--text-body);
}
.emptystate{
  grid-column:1/-1;padding:var(--sp-8);text-align:center;
  border:1px dashed var(--line-strong);border-radius:var(--r-card);color:var(--text-muted);
}

/* ── Spielerkarten ──────────────────────────────────────────── */
.player .club__meta{color:var(--gold-500)}
.player dl{
  display:grid;grid-template-columns:auto 1fr;gap:8px 16px;
  margin:0;font-size:var(--fs-small);
}
.player dt{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);align-self:center;
}
.player dd{margin:0;color:var(--text-body)}

/* Monogramm statt Foto — bis eigene Bilder mit Einwilligung vorliegen */
.avatar{
  flex:0 0 56px;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(190,176,168,.24),rgba(10,10,10,.9));
  border:1px solid var(--line-strong);
  font-family:var(--font-serif);font-weight:700;font-size:18px;
  color:var(--gold-200);letter-spacing:.02em;
}
.avatar--lg{flex-basis:76px;width:76px;height:76px;font-size:24px}

/* ── Teamkarten ─────────────────────────────────────────────── */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.member{
  position:relative;overflow:hidden;padding:var(--sp-7) var(--sp-6);
  border-radius:var(--r-card);border:1px solid var(--line-soft);
  background:var(--panel);
  transition:transform var(--dur-slow) var(--ease-out),border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out);
}
.member::before{
  content:"";position:absolute;inset:0;background:var(--aura);opacity:0;
  transition:opacity var(--dur-slow) var(--ease-out);pointer-events:none;
}
.member>*{position:relative}
.member__top{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.member__name{font-size:18px;font-weight:500;color:var(--text-strong);margin:0;letter-spacing:var(--track-sans)}
.member__role{margin:4px 0 0;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400)}
.member__text{margin:0 0 var(--sp-5);font-size:var(--fs-small);color:var(--text-muted)}
.member__links{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--fs-small)}
.member__links a{color:var(--gold-300)}
.member--open{border-style:dashed;display:grid;place-items:center;text-align:center;min-height:220px}
.member--open .member__text{margin:0}

/* ── Formular ───────────────────────────────────────────────── */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.field--full{grid-column:1/-1}
.check{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-small);color:var(--text-muted)}
.check input{flex:0 0 auto;width:18px;height:18px;margin-top:3px;accent-color:var(--gold-400)}
.check a{color:var(--gold-300);text-decoration:underline;text-underline-offset:3px}
.hint{font-size:12px;color:var(--text-muted);margin:6px 0 0}
.err{font-size:12px;color:#e08a8a;margin:6px 0 0;display:none}
.field.is-invalid .err{display:block}
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{border-color:var(--neg-line)}
.formnote{
  margin-top:var(--sp-6);padding:var(--sp-5);border-radius:var(--r-card);
  border:1px solid var(--line);background:var(--panel-2);
  font-size:var(--fs-small);color:var(--text-muted);
}
.formstatus{margin-top:var(--sp-5);font-size:var(--fs-small);color:var(--gold-200);display:none}
.formstatus.is-shown{display:block}
/* Honeypot gegen Bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Kontakt-Layout ─────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--sp-8);align-items:start}
.infocard{
  padding:var(--sp-6);border-radius:var(--r-card);
  border:1px solid var(--line);background:var(--panel);
}
.infocard h3{font-size:17px;font-weight:500;color:var(--text-strong);margin:0 0 var(--sp-4)}
.infolist{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:var(--fs-small)}
.infolist .mono{display:block;margin-bottom:2px}
.mapframe{
  margin-top:var(--sp-5);border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line);background:var(--panel-2);
  aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:var(--sp-5);
}
.mapframe iframe{width:100%;height:100%;border:0;display:block}

/* ── Social ─────────────────────────────────────────────────── */
.socialrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sbtn{
  display:inline-flex;align-items:center;gap:9px;padding:10px 16px;
  border-radius:var(--r-pill);border:1px solid var(--line-strong);
  font-size:13px;font-weight:600;color:var(--text-body);
  transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
}
.sbtn svg{flex:0 0 16px}
.sbtn--ig{
  border-color:transparent;color:#fff;
  background:linear-gradient(120deg,#8134af 0%,#dd2a7b 48%,#f58529 100%);
}
.nav__ig{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(120deg,#8134af 0%,#dd2a7b 48%,#f58529 100%);
  color:#fff;flex:0 0 auto;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}

/* ── CTA-Band ───────────────────────────────────────────────── */
.band{
  position:relative;overflow:hidden;margin:var(--sp-9) 0 0;
  padding:var(--sp-8) var(--sp-7);border-radius:var(--r-card);
  border:1px solid rgba(190,176,168,.28);background:var(--card-grad);
  box-shadow:var(--shadow-card);text-align:center;
}
.band__shine{
  position:absolute;top:0;left:0;width:22%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(231,222,217,.14),transparent);
  transform:skewX(-14deg);animation:leShine 6s var(--ease-in-out) infinite;pointer-events:none;
}
.band>*{position:relative}
.band h2{margin-bottom:var(--sp-4)}
.band p{color:var(--text-muted);max-width:56ch;margin:0 auto var(--sp-6)}

/* ── Fließtext (Rechtsseiten) ───────────────────────────────── */
.prose{max-width:80ch;color:var(--text-body)}
.prose h2{
  font-size:22px;font-weight:500;color:var(--text-strong);
  margin:var(--sp-8) 0 var(--sp-4);letter-spacing:var(--track-sans);
}
.prose h3{font-size:17px;font-weight:500;color:var(--text-strong);margin:var(--sp-6) 0 10px}
.prose p,.prose li{font-size:var(--fs-small);line-height:1.75;color:var(--text-muted)}
.prose p{margin:0 0 var(--sp-4)}
.prose ul,.prose ol{margin:0 0 var(--sp-4);padding-left:22px;display:grid;gap:8px}
.prose a{color:var(--gold-300);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--text-body);font-weight:600}
.prose table{width:100%;border-collapse:collapse;margin:0 0 var(--sp-5);font-size:var(--fs-small)}
.prose th,.prose td{text-align:left;padding:10px 12px;border:1px solid var(--line);vertical-align:top}
.prose th{color:var(--text-strong);font-weight:600;background:var(--panel-2)}
.todo{
  margin:var(--sp-5) 0;padding:var(--sp-5);border-radius:var(--r-card);
  border:1px solid var(--neg-line);background:rgba(122,0,0,.10);
}
.todo p{color:#e8b4b4;margin:0}
.todo strong{color:#f3d2d2}

/* ── Footer (erweitert) ─────────────────────────────────────── */
.foot__cols{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:var(--sp-7);padding:var(--sp-9) 0 var(--sp-7);
}
.foot__logo{width:108px;height:auto;margin-bottom:var(--sp-5);opacity:.9}
.foot__col h3{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-400);margin:0 0 var(--sp-4);
}
.foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:var(--fs-small)}
.foot__col a{color:var(--text-muted);transition:color var(--dur) var(--ease-out)}
.foot__about{font-size:var(--fs-small);color:var(--text-muted);margin:var(--sp-4) 0 var(--sp-5);max-width:38ch}
.foot__bottom{
  border-top:1px solid var(--line);padding:var(--sp-5) 0;
  display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;
}
/* Gestalterkennung */
.foot__credit{font-size:12px;color:var(--text-muted)}
.foot__credit a{
  color:var(--gold-400);
  border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}

/* ── Scroll-Reveals ─────────────────────────────────────────── */
/* Nur versteckt, wenn das Script übernommen hat. Ohne JS ist jeder
   Inhalt von Anfang an sichtbar. */
.js-anim [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);
}
[data-reveal="2"]{transition-delay:.12s}
[data-reveal="3"]{transition-delay:.24s}
[data-reveal="4"]{transition-delay:.36s}
.js-anim [data-reveal].is-in{opacity:1;transform:none}

/* Wort-für-Wort-Reveal */
.js-anim [data-rv]{
  display:inline-block;opacity:0;transform:translateY(.55em);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
.js-anim [data-rv].is-in{opacity:1;transform:none}

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes navDrop{
  0%{transform:translateY(-96px);opacity:0}
  42%{opacity:1}
  100%{transform:translateY(0);opacity:1}
}
@keyframes btnShine{
  0%{transform:translateX(-160%) skewX(-18deg)}
  11%{transform:translateX(460%) skewX(-18deg)}
  100%{transform:translateX(460%) skewX(-18deg)}
}
@keyframes leShine{
  0%{transform:translateX(0) skewX(-14deg)}
  100%{transform:translateX(640%) skewX(-14deg)}
}
@keyframes flowY{
  0%{background-position:0 0}
  100%{background-position:0 96px}
}
@keyframes heroSmoke{
  0%{transform:translateX(-2vw) scaleX(1);opacity:.85}
  100%{transform:translateX(2vw) scaleX(1.08);opacity:1}
}
@keyframes heroDust{
  0%{transform:translate(0,0);opacity:0}
  10%{opacity:.9}
  85%{opacity:.25}
  100%{transform:translate(3vw,-34vh);opacity:0}
}
@keyframes fitWander{
  0%{transform:translate(-10%,-8%) scale(1);opacity:.6}
  25%{transform:translate(58%,8%) scale(1.08);opacity:.95}
  50%{transform:translate(48%,58%) scale(.98);opacity:1}
  75%{transform:translate(-6%,48%) scale(1.1);opacity:.85}
  100%{transform:translate(-10%,-8%) scale(1);opacity:.6}
}
@keyframes vslRing{
  0%{transform:scale(1);opacity:.45}
  100%{transform:scale(1.9);opacity:0}
}
@keyframes scrollWave{
  0%{opacity:.12}
  22%{opacity:1}
  48%{opacity:.12}
  100%{opacity:.12}
}
@keyframes archIn{
  0%{opacity:0;transform:translateX(-50%) scale(.94)}
  100%{opacity:1;transform:translateX(-50%) scale(1)}
}
@keyframes titleIn{
  0%{opacity:0;transform:translateY(38px)}
  100%{opacity:1;transform:none}
}
@keyframes mediaIn{
  0%{opacity:0;transform:scale(1.12)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes loaderBar{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(0)}
}
@keyframes loaderOut{
  0%{opacity:1;visibility:visible}
  100%{opacity:0;visibility:hidden}
}

/* ── Responsive ─────────────────────────────────────────────── */
/* Sieben Navigationspunkte brauchen ab hier engere Abstände */
@media (max-width:1240px){
  .nav__links{gap:var(--sp-5);font-size:14px}
  .nav__inner{gap:var(--sp-4)}
}
@media (max-width:1080px){
  .nav__cta{display:none}
}
@media (max-width:960px){
  .nav__links,.nav__cta{display:none}
  .burger{display:block;margin-left:auto}

  /* Instagram wandert ins Menü. In der Leiste konkurriert der
     bunte Kreis mit dem Logo und dem Menüknopf um dieselbe
     Aufmerksamkeit — auf 375 px ist das eine Sache zu viel. */
  .nav__ig{display:none}

  /* ── Leiste ───────────────────────────────────────────────────
     Flach halten. 52 statt 72 Pixel, weil die Leiste fest steht
     und die 20 Pixel auf jedem Bildschirm dauerhaft fehlen.      */
  .nav__inner{padding-block:4px}
  .wordmark img{height:26px}
  .wordmark{padding-block:9px}

  /* Fingerkuppen sind rund 44 px breit. Ein 38-px-Knopf wird
     danebengetippt, und zwar reproduzierbar. */
  .burger{width:44px;height:44px}
  .burger span{left:12px;width:20px}
  .burger span:nth-child(1){top:19px}
  .burger span:nth-child(2){top:25px}

  /* Einfahren beim Runterscrollen, sofort zurück beim Hoch.
     Beim Lesen gehört der Bildschirm dem Text, und wer nach oben
     wischt, will ohnehin zur Navigation.

     Die Einflug-Animation muss dafür weg: eine laufende Animation
     mit fill-mode überschreibt jede Transform-Transition. */
  .nav{
    animation:none;
    transition:transform .3s var(--ease-out),
               background var(--dur) var(--ease-out),
               border-color var(--dur) var(--ease-out);
  }
  .nav.is-hidden{transform:translateY(-101%)}

  /* ── Menü ─────────────────────────────────────────────────── */
  .menu__list a{padding:16px 0;min-height:56px;align-items:center}
  /* Staffelung lief nur bis 05 — die letzten beiden Einträge
     sprangen ohne Verzögerung mit hinein. */
  .menu.is-open .menu__list a:nth-child(6){transition-delay:.38s}
  .menu.is-open .menu__list a:nth-child(7){transition-delay:.44s}

  /* Aktuelle Seite kenntlich machen. Ohne das weiß im Menü
     niemand, wo er gerade steht. */
  .menu__list a.is-current{border-bottom-color:rgba(190,176,168,.5)}
  .menu__list a.is-current span{
    background:var(--gold-text);-webkit-background-clip:text;
    background-clip:text;color:transparent;
  }
  .fit__cols,.phases,.dnagrid,.about__grid{grid-template-columns:1fr}
  .hero{height:auto}
  .hero__sticky{position:static;height:auto;padding:0}
  .hero__frame{height:100vh;height:100svh}
  .hero__title{position:static;padding-top:clamp(88px,16vh,150px)}
  .hero__copy{position:static;margin-top:auto;padding-bottom:70px}
  .hero__frame{display:flex;flex-direction:column}
  .hero__media{z-index:0}
  .quotewrap{height:auto}
  .quotewrap__sticky{position:static;height:auto;padding:var(--sp-9) 0}
  .dnagrid{gap:var(--sp-4)}

  .clubgrid,.tgrid{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr;gap:var(--sp-7)}
  .foot__cols{grid-template-columns:1fr 1fr;gap:var(--sp-6);padding:var(--sp-7) 0 var(--sp-6)}

  /* Hochformat: der Text steht tiefer im Bild, deshalb muss der
     Verlauf weiter hochreichen, damit er auf dunklem Grund sitzt. */
  .hero__scrim{
    height:72%;
    background:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.06) 12%,
      rgba(0,0,0,.16) 23%,
      rgba(0,0,0,.30) 33%,
      rgba(0,0,0,.46) 43%,
      rgba(0,0,0,.62) 53%,
      rgba(0,0,0,.76) 63%,
      rgba(0,0,0,.88) 73%,
      rgba(0,0,0,.96) 83%,
      #000 92%);
  }
  .hero__topscrim{height:46%}
}
@media (max-width:600px){
  .btn--wide{min-width:100%}
  .phasetabs{gap:var(--sp-5)}

  .stats__grid{grid-template-columns:1fr;gap:0}
  .stat{padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:0}
  .clubgrid,.tgrid,.formgrid{grid-template-columns:1fr}
  .filters{flex-direction:column;align-items:stretch}
  .filters__count{margin-left:0;padding-bottom:0}
  .field{min-width:0}
  .band{padding:var(--sp-7) var(--sp-5)}
  .prose table{display:block;overflow-x:auto}

  /* Deutsche Komposita werden breiter als die Spalte: „zusammenarbeiten"
     misst bei 390 px Gerätebreite 375 px, verfügbar sind 350 px.

     Bewusst ohne hyphens:auto — das trennt eifrig auch dort, wo der
     Platz reicht, und macht aus „ENTSTANDEN" in der Versal-Serife ein
     „ENTSTAN-DEN". overflow-wrap greift nur, wenn ein Wort sonst
     wirklich über den Rand liefe. */
  .h2,.phero h1,.hero__title,.idx__title,.bento__title,
  .runin b,.marginum h3,.paths h2,.spread h3,.member__name{
    overflow-wrap:break-word;
  }

  /* Der Seitenkopf hielt 186 px Abstand nach oben frei — bemessen für
     die alte, 72 px hohe Leiste. Bei 53 px ist das tote Fläche, und
     auf dem Handy ist Fläche über der Falz das Teuerste, was es gibt. */
  .phero{padding-top:calc(var(--sp-7) + 62px)}

  /* Footer bleibt vollständig, wird aber flach: zwei Spalten statt
     vier gestapelter Blöcke, Logo klein, Beschreibungstext raus.
     Er steht auf jeder Seite und darf das Handy nicht zuschütten. */
  .foot{padding:var(--sp-4) 0}
  .foot__cols{
    grid-template-columns:1fr 1fr;align-items:start;
    gap:var(--sp-5) var(--sp-4);padding:var(--sp-5) 0 var(--sp-4);
  }
  /* Zwei Zeilen: Logo mit Social, darunter Rechtliches neben Kontakt.

     Die Navigationsspalte ist auf dem Handy ausgeblendet. Sie
     wiederholt exakt die sieben Einträge, die einen Fingertipp
     entfernt im Menü stehen — mit fingergroßen Zeilen kostet diese
     Wiederholung 190 Pixel, die niemand braucht. Sie bleibt im
     Quelltext stehen und damit für Suchmaschinen erreichbar, sie
     wird nur nicht angezeigt.

     Im Footer bleibt, was man wirklich am Seitenende sucht:
     Rechtliches und Kontakt. */
  .foot__col:first-child{grid-column:1 / -1}
  .foot__col:nth-child(2){display:none}

  /* Vier Knöpfe brechen auf 350 px ohnehin um. Enger gesetzt
     bleiben es zwei Zeilen statt drei. */
  .socialrow{gap:6px}
  .foot__logo{width:58px;margin-bottom:var(--sp-4)}
  .foot__about{display:none}
  .foot__col h3{font-size:10px;margin-bottom:10px}
  /* Zeilenabstand plus Innenabstand ergibt rund 36 px Trefferfläche
     je Verweis. Ohne den Innenabstand wären es 27 px, und zwischen
     zwei Zeilen mit 13-px-Schrift trifft man dann regelmäßig die
     falsche. */
  .foot__col ul{gap:2px;font-size:13px}
  .foot__col li a{display:inline-block;padding:9px 0}
  .sbtn{padding:9px 14px;font-size:12px;gap:7px}
  .crumbs a,.foot__links a{display:inline-block;padding:4px 0}
  /* Einzeilig, wo es passt. Umbruch bleibt erlaubt: bei 360 px Breite
     reicht der Platz sonst nicht und der Text würde abgeschnitten. */
  .foot__bottom{padding:var(--sp-4) 0 0;gap:8px var(--sp-4);font-size:12px}
  .foot__links{margin-left:auto;width:auto;gap:var(--sp-4);font-size:12px}
}


/* ── Hover nur, wo es Hover gibt ─────────────────────────────────
   Auf einem Touchscreen gibt es kein Überfahren. Ein Tipp löst
   dort :hover aus, und der Zustand bleibt hängen, bis woanders
   hingetippt wird — Karten, die angehoben bleiben, Linien, die
   golden stehen bleiben. Diese 38 Regeln laufen deshalb nur auf
   Geräten mit echtem Zeiger.                                     */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn--light:hover{box-shadow:0 0 0 1px rgba(190,176,168,.55),0 14px 46px -12px rgba(190,176,168,.45)}
  .btn--outline:hover{border-color:var(--gold-400);background:rgba(190,176,168,.07)}
  .wordmark:hover img{opacity:.82;transform:translateY(-1px)}
  .nav__links a:hover,.nav__links a.is-current{color:var(--white)}
  .nav__links a:hover::after,.nav__links a.is-current::after{transform:scaleX(1);transform-origin:left}
  .menu__list a:hover span{color:var(--gold-200)}
  .fitcard:hover{transform:translateY(-6px);border-color:var(--line-strong)}
  .fitcard:hover::before{opacity:.7}
  .chips li:hover{border-color:var(--gold-400);color:var(--white)}
  .dna:hover{transform:translateY(-6px);border-color:var(--line-strong);background:var(--card-grad)}
  .dna:hover::before{opacity:.45}
  .dna__i:hover{border-color:var(--gold-400);color:var(--gold-200)}
  .caseslot:hover{border-color:var(--gold-500)}
  .foot__links a:hover{color:var(--white)}
  .crumbs a:hover{color:var(--gold-200)}
  .bento__cell:hover{transform:translateY(-4px);border-color:var(--line-strong);background:var(--card-grad)}
  .bento__cell:hover::before{opacity:1}
  .bento__cell[data-no]:hover::after{color:rgba(190,176,168,.10);transform:translateY(-5px)}
  .bento__cell:hover .bento__no{color:var(--gold-300)}
  .bento__cell--hero:hover{border-color:rgba(190,176,168,.45)}
  .bento__cell--row:hover .bento__arrow{opacity:1;transform:none}
  .bento__cell--quiet:hover{
    background:transparent;transform:none;border-top-color:rgba(190,176,168,.42);
  }
  .idx__row:hover::before{opacity:1;transform:none}
  .idx__row:hover{border-bottom-color:rgba(190,176,168,.34)}
  .idx__row:hover .idx__no{color:var(--gold-300)}
  .idx__row:hover .idx__arrow{opacity:1;transform:none}
  .runin li:hover::after{width:100%}
  .club:hover{transform:translateY(-5px);border-color:var(--line-strong);background:var(--card-grad)}
  .member:hover{transform:translateY(-6px);border-color:var(--line-strong);background:var(--card-grad)}
  .member:hover::before{opacity:.4}
  .member__links a:hover{color:var(--gold-100)}
  .infolist a:hover{color:var(--gold-200)}
  .sbtn:hover{border-color:var(--gold-400);color:var(--white);transform:translateY(-2px)}
  .sbtn--ig:hover{border-color:transparent;color:#fff}
  .nav__ig:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 26px -8px rgba(221,42,123,.7)}
  .foot__col a:hover{color:var(--white)}
  .foot__credit a:hover{color:var(--gold-200);border-bottom-color:currentColor}
}

/* ── Touch-Geräte ────────────────────────────────────────────────
   Handy ist der Hauptfall. Was hier abgeschaltet wird, kostet dort
   dauerhaft Rechenzeit, ohne dass jemand es vermisst.

   Zwei Bedingungen, weil weder eine allein reicht: (hover:none)
   trifft jedes Touchgerät, auch große Tablets. Die Breitengrenze
   trifft zusätzlich schmale Fenster ohne Touch — und macht die
   Regel im Desktop-Browser überhaupt prüfbar.                    */
@media (hover:none),(max-width:640px){

  /* Endlosschleifen aus. Der Rauch läuft mit 26 und 34 Pixel Blur
     plus Screen-Blending, der Staub mit bis zu neun Elementen —
     beides hält die Grafikeinheit dauerhaft wach und leert den
     Akku, sichtbar ist es auf dem Handy kaum. */
  .smoke,.dust{display:none}
  .bento__shine,.band__shine{display:none}
  .btn::after{animation:none}
  .fit__glow{animation:none}

  /* Zwei Dinge auf einmal.

     Milchglas raus: Es heißt, bei jedem Scrollschritt einen
     Weichzeichner über die volle Leistenbreite zu rechnen.

     Und keine Kante. Vorher war die Leiste ein Kasten mit deckender
     Fläche und einer 1-px-Linie darunter — beim Scrollen schob sich
     der Inhalt sichtbar unter einem Balken durch. Jetzt ist es ein
     Verlauf, der nach unten in nichts ausläuft: oben deckend genug,
     dass Logo und Knopf auf jedem Grund lesbar bleiben, unten
     transparent. Damit gibt es weder oben noch unten einen Rand. */
  .nav{border-bottom:0}
  .nav.is-stuck{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom-color:transparent;
    background:linear-gradient(to bottom,
      rgba(6,6,6,.97) 0%,
      rgba(6,6,6,.93) 45%,
      rgba(6,6,6,.72) 74%,
      rgba(6,6,6,0) 100%);
  }
  /* Etwas mehr Höhe, damit der Verlauf Platz zum Auslaufen hat,
     ohne dass die deckende Zone kleiner wird. */
  .nav__inner{padding-bottom:12px}
  .menu{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(4,4,4,.985);
  }

  /* Der Hero-Parallax läuft erst ab 960 px. Ohne ihn hält
     will-change nur eine Ebene im Speicher, die niemand nutzt. */
  .hero__frame{will-change:auto}

  /* Ladeanimation kürzer: Sie liegt vor dem Inhalt, und auf dem
     Handy zählt jede Zehntelsekunde bis zum ersten Bild. */
  .loader{animation:loaderOut .5s var(--ease-out) .55s forwards}

  /* Freistehende Verweise auf Fingergröße. Verweise mitten im
     Fließtext bleiben unangetastet — die aufzublasen zerreißt den
     Zeilenrhythmus, und dort erwartet niemand einen Knopf. */
  .crumbs a,
  .foot__links a,
  .foot__credit a,
  .infolist a,
  .member__links a{display:inline-block;padding-block:8px}
  .infolist,.member__links{gap:6px}

  /* Kästchen größer: Tappbar ist die ganze Beschriftung, aber wer
     aufs Kästchen zielt, soll es auch treffen. */
  .check input{width:22px;height:22px;margin-top:1px}
}

/* ── Touch-Bedienung ─────────────────────────────────────────── */
a,button,select,input,textarea,label{
  -webkit-tap-highlight-color:rgba(190,176,168,.20);
}
a,button,.btn,select,summary{touch-action:manipulation}

/* ── Sicherer Bereich (Notch, Home-Leiste) ───────────────────────
   Ohne das klebt Text im Querformat unter der Kamerainsel und die
   untere Leiste des Heros unter dem Home-Balken.                 */
.wrap,.nav__inner,.menu{
  padding-left:max(var(--pad-x),env(safe-area-inset-left,0px));
  padding-right:max(var(--pad-x),env(safe-area-inset-right,0px));
}
.menu{
  padding-top:120px;
  padding-bottom:max(48px,calc(env(safe-area-inset-bottom,0px) + 24px));
}
.hero__bar{bottom:max(22px,calc(env(safe-area-inset-bottom,0px) + 10px))}
.foot__bottom{padding-bottom:max(var(--sp-5),env(safe-area-inset-bottom,0px))}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal],[data-rv]{opacity:1 !important;transform:none !important}
  .hero__title-sans,.hero__title-serif,.hero__media img,.arch{opacity:1 !important;transform:none !important}
  .hero__title-serif,.hero__title-sans{transform:none !important}
  .arch{transform:translateX(-50%) !important}
  .dust{display:none}
  .loader{display:none}
}