/* ===========================================================================
   IGNX — Founders & Executives. Dunkel, ruhig, exklusiv; das Logo als
   3D-Skulptur. Fast-Schwarz und Silber, ein gedämpftes Schiefer für
   Gewähltes. Kein Gelb, keine Verläufe als Schmuck, Listen statt Karten.
   Bewegung nach emil-design-eng: transform/opacity, ease-out
   cubic-bezier(.23,1,.32,1), Druck scale(.97) in 160 ms.
   =========================================================================== */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/archivo-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:dark;
  --grund:#08090B;
  --grund-2:#0F1114;
  --grund-3:#171A1F;
  --silber:#E6E8EC;
  --silber-2:#B9BEC7;     /* Nebentext: 10,4:1 auf Grund */
  --silber-3:#8D939D;     /* Hinweise: 6,3:1 auf Grund */
  --linie:rgba(230,232,236,.12);
  --feldrand:#5E646E;     /* Feldkante 3,1:1 gegen Grund-2 */
  --fehler:#FF8A80;
  /* Akzent je Variante: Fläche (mit weißer Schrift) und Text auf Grund. */
  --akzent:#4A5262;
  --akzent-text:#C9CFD8;
  --schrift:'Archivo',system-ui,sans-serif;
  --mono:var(--schrift);
  --aus:cubic-bezier(.23,1,.32,1);
  --rand:clamp(16px,4vw,40px);
  --breit:1120px;
  --leiste:52px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--leiste) + 12px)}
body{margin:0;background:var(--grund);color:var(--silber);font:400 1.0625rem/1.55 var(--schrift);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scrollbar-color:#2A2E35 var(--grund)}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
::selection{background:var(--silber);color:var(--grund)}
:focus-visible{outline:2px solid var(--silber);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--schrift);font-weight:560;letter-spacing:-.035em;line-height:1.04;margin:0;text-wrap:balance}
.nur-vorleser{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
p{margin:0;text-wrap:pretty}
.springen{position:absolute;left:var(--rand);top:-60px;z-index:50;background:var(--silber);color:var(--grund);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.springen:focus{top:8px}
.innen{max-width:var(--breit);margin:0 auto;padding:0 var(--rand)}

/* --- Knöpfe ----------------------------------------------------------------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 24px;border-radius:999px;border:0;background:var(--silber);color:var(--grund);font:600 1rem/1 var(--schrift);letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:transform 160ms var(--aus),background-color 200ms ease}
.knopf:active{transform:scale(.97)}
.knopf--klein{min-height:34px;padding:0 16px;font-size:.875rem}
.knopf--still{background:transparent;color:var(--silber);box-shadow:inset 0 0 0 1px var(--feldrand)}
.verweis{display:inline-flex;align-items:center;gap:6px;min-height:46px;font-weight:600;text-decoration:none}
.verweis svg{width:9px;height:14px;transition:transform 200ms var(--aus)}
@media (hover:hover) and (pointer:fine){
  .knopf:hover{background:#fff}
  .knopf--still:hover{background:var(--grund-3)}
  .verweis:hover{text-decoration:underline}
  .verweis:hover svg{transform:translateX(3px)}
}

/* --- Leiste ------------------------------------------------------------------- */
.leiste{position:sticky;top:0;z-index:20;height:var(--leiste);background:rgba(8,9,11,.92);border-bottom:1px solid var(--linie)}
.leiste .innen{height:100%;display:flex;align-items:center;gap:28px}
.marke{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:600 1rem/1 var(--schrift);letter-spacing:.14em}
.marke svg{width:auto;height:22px;display:block}
.zeile .wert,.zaehler,.karte-nr,.ablauf-nr,.ablauf .dauer,.pass-fuss,.pass-code-gross,.pass-schritte b{font-variant-numeric:tabular-nums}
.leiste nav{display:flex;gap:24px;margin-left:auto;font-size:.875rem;color:var(--silber-2)}
.leiste nav a{text-decoration:none;padding:14px 0}
@media (hover:hover) and (pointer:fine){.leiste nav a:hover{color:var(--silber)}}
@media (max-width:760px){.leiste nav{display:none}.leiste .knopf{margin-left:auto}}

/* --- Kopf: Logo oben im Hintergrund, Text darüber --------------------------- */
.kopf{position:relative;text-align:center}
.kopf-buehne{position:relative;height:calc(100svh - var(--leiste));display:grid;align-items:end;padding:0 0 clamp(40px,8vh,96px);overflow:hidden;isolation:isolate}
.kopf .objekt{position:absolute;inset:0;z-index:-2}
.kopf .objekt canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 700ms var(--aus)}
.kopf .objekt.ist-3d canvas{opacity:1}
/* Ruhiger Verlauf nur hinter dem Text: Lesbarkeit vor Wirkung. */
.kopf-buehne::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(8,9,11,0) 0%,rgba(8,9,11,.72) 38%,rgba(8,9,11,.94) 70%,var(--grund) 100%)}
.kopf-text{position:relative}
.kopf h1{font-size:clamp(2.75rem,1.3rem + 5vw,5.5rem);font-weight:520}
.kopf .unterzeile{margin-top:12px;font-size:clamp(1.25rem,1rem + 1.1vw,2rem);font-weight:460;letter-spacing:-.02em;color:var(--silber)}
.kopf .eine-zeile{max-width:48ch;margin:16px auto 0;font-size:clamp(1rem,.95rem + .3vw,1.1875rem);color:var(--silber-2)}
.aktionen{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;margin-top:30px}
/* Einblenden beim Laden: ein Moment, gestaffelt, nur Deckkraft und Weg. */
@media (prefers-reduced-motion:no-preference){
  .kopf-text>*{animation:auftauchen 600ms var(--aus) both}
  .kopf-text>:nth-child(2){animation-delay:50ms}
  .kopf-text>:nth-child(3){animation-delay:100ms}
  .kopf-text>:nth-child(4){animation-delay:150ms}
}
@keyframes auftauchen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* --- Abschnitte ----------------------------------------------------------------- */
.abschnitt{padding:clamp(64px,11vh,128px) 0}
.abschnitt h2{font-size:clamp(2.25rem,1.4rem + 3vw,4rem);font-weight:520}
.abschnitt .eine-zeile{margin-top:16px;max-width:52ch;font-size:1.1875rem;color:var(--silber-2)}
.mittig{text-align:center}
.mittig .eine-zeile{margin-left:auto;margin-right:auto}
.mit-linie{border-top:1px solid var(--linie)}

/* Haarlinien-Liste: Grundmuster für Phasen, Themen, Ablauf, Angebot. */
.liste{list-style:none;margin:clamp(32px,5vh,56px) 0 0;padding:0;border-top:1px solid var(--linie)}
.liste>li{border-bottom:1px solid var(--linie)}
.zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 5rem;align-items:baseline;gap:6px 32px;padding:24px 0}
.zeile h3{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);font-weight:520}
.zeile p{color:var(--silber-2);max-width:52ch}
.zeile .wert{font:400 1rem/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--silber-3);white-space:nowrap;text-align:right}
@media (max-width:760px){.zeile{grid-template-columns:1fr auto}.zeile p{grid-column:1/-1;grid-row:2}}

/* Phasenwahl: dieselbe Liste, jede Zeile ein Knopf. */
.phase{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1.3fr);align-items:center;gap:6px 24px;width:100%;padding:24px 12px;margin:0 -12px;width:calc(100% + 24px);border:0;border-radius:14px;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;transition:transform 160ms var(--aus),background-color 200ms ease}
.phase:active{transform:scale(.985)}
.phase .punkt{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--feldrand);display:grid;place-items:center;transition:box-shadow 200ms ease,background-color 200ms ease}
.phase .punkt::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;opacity:0;transform:scale(.6);transition:opacity 160ms var(--aus),transform 160ms var(--aus)}
.phase h3{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);font-weight:600}
.phase p{color:var(--silber-2)}
.phase[aria-pressed="true"]{background:var(--grund-3)}
.phase[aria-pressed="true"] .punkt{background:var(--akzent);box-shadow:none}
.phase[aria-pressed="true"] .punkt::after{opacity:1;transform:scale(1)}
@media (hover:hover) and (pointer:fine){.phase:hover{background:var(--grund-2)}.phase[aria-pressed="true"]:hover{background:var(--grund-3)}}
@media (max-width:760px){.phase{grid-template-columns:28px 1fr}.phase p{grid-column:2}}
.stand{margin-top:18px;color:var(--silber-3);font-size:.9375rem;min-height:1.5em}

/* Drei Sätze: groß, ruhig, ohne Kästen. */
.saetze{list-style:none;margin:clamp(32px,5vh,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
.saetze h3{font-size:clamp(1.625rem,1.2rem + 1.4vw,2.375rem);font-weight:520;letter-spacing:-.03em}
.saetze p{margin-top:14px;color:var(--silber-2);max-width:34ch}
@media (max-width:860px){.saetze{grid-template-columns:1fr}}

/* Der Name: zwei Wörter, groß, mit ihrer Bedeutung. */
.namensteile{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);margin:clamp(32px,5vh,56px) 0 0}
.namensteile dt{font-size:clamp(3rem,1.6rem + 5vw,6rem);font-weight:500;letter-spacing:-.045em;line-height:1}
.namensteile dd{margin:18px 0 0;max-width:30ch;font-size:1.1875rem;color:var(--silber-2)}
@media (max-width:760px){.namensteile{grid-template-columns:1fr}}

/* Themen: zweispaltige Liste. */
.themen{list-style:none;margin:clamp(32px,5vh,56px) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;border-top:1px solid var(--linie)}
.themen li{display:grid;gap:4px;padding:20px 0;border-bottom:1px solid var(--linie)}
.themen strong{font-weight:600;font-size:1.1875rem;letter-spacing:-.015em}
.themen span{color:var(--silber-2);font-size:.9375rem}
@media (max-width:760px){.themen{grid-template-columns:1fr}}

.nicht-dabei{margin-top:28px;color:var(--silber-2)}
.nicht-dabei strong{color:var(--silber);font-weight:600}

/* Gründungsrunde */
.runde{background:var(--grund-2);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.runde .innen{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:end}
.runde h2{font-size:clamp(2.25rem,1.4rem + 3vw,4rem);font-weight:520}
.runde p{color:var(--silber-2);font-size:1.1875rem;max-width:40ch}
.runde .rechts{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
@media (max-width:860px){.runde .innen{grid-template-columns:1fr}}

/* Häufige Fragen */
.fragen{margin-top:clamp(28px,5vh,48px);border-top:1px solid var(--linie);max-width:820px}
.mittig .fragen{margin-left:auto;margin-right:auto;text-align:left}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-weight:600;font-size:1.1875rem;letter-spacing:-.015em;cursor:pointer;list-style:none}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary svg{flex:none;width:18px;height:18px;transition:transform 200ms var(--aus)}
.fragen details[open] summary svg{transform:rotate(45deg)}
.fragen details p{padding:0 0 24px;max-width:62ch;color:var(--silber-2)}

/* Schluss und Fuß */
.schluss{padding:clamp(96px,16vh,180px) 0;text-align:center;border-top:1px solid var(--linie)}
.schluss h2{font-size:clamp(2.5rem,1.4rem + 4vw,4.75rem);font-weight:520;max-width:18ch;margin:0 auto}
.schluss .aktionen{margin-top:34px}
.schluss-zeichen{margin:0 auto 36px;width:88px;height:88px}
.danke-zeichen{margin:0 auto 32px;width:120px;height:120px}
.fuss{border-top:1px solid var(--linie);padding:40px 0 48px;font-size:.8125rem;color:var(--silber-3)}
.fuss .innen{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.fuss h2{font:600 .8125rem/1.4 var(--schrift);letter-spacing:0;color:var(--silber);margin-bottom:10px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.fuss a{text-decoration:none}
.fuss li a{display:inline-block;padding:5px 0}
@media (hover:hover) and (pointer:fine){.fuss a:hover{color:var(--silber);text-decoration:underline}}
.fuss .marke{color:var(--silber);margin-bottom:10px;font-size:1rem}
.fuss .klein{margin-top:28px;grid-column:1/-1;border-top:1px solid var(--linie);padding-top:20px}
@media (max-width:760px){.fuss .innen{grid-template-columns:1fr 1fr}.fuss .innen>div:first-child{grid-column:1/-1}}

/* --- Lesen (Regeln, Impressum, Datenschutz) ---------------------------------------- */
.blatt{padding:clamp(56px,10vh,110px) 0 clamp(72px,12vh,140px)}
.blatt .innen{max-width:760px}
.blatt h1{font-size:clamp(2.75rem,1.8rem + 3.6vw,4.5rem)}
.blatt h2{font-size:clamp(1.5rem,1.25rem + 1vw,2rem);margin:48px 0 12px;font-weight:600}
.blatt p,.blatt li{color:var(--silber-2);max-width:68ch}
.blatt p+p{margin-top:14px}
.blatt ol,.blatt ul{padding-left:1.2em;display:grid;gap:10px}
.blatt .eine-zeile{margin-top:18px;font-size:1.1875rem}
.blatt address{font-style:normal;color:var(--silber-2)}
.blatt strong{color:var(--silber);font-weight:600}

/* --- Bewerbung ------------------------------------------------------------------------ */
.bewerbung{padding:clamp(48px,9vh,96px) 0 clamp(72px,12vh,140px)}
.bewerbung .innen{max-width:720px}
.bewerbung h1{font-size:clamp(2.75rem,1.8rem + 4vw,4.75rem)}
.bewerbung .eine-zeile{margin-top:16px;font-size:1.1875rem;color:var(--silber-2);max-width:46ch}
.meldung{margin-top:28px;padding:16px 18px;border-radius:14px;background:rgba(255,138,128,.1);box-shadow:inset 0 0 0 1px rgba(255,138,128,.45)}
.meldung[hidden]{display:none}
.meldung strong{color:var(--fehler)}
.schrittkopf{display:flex;align-items:center;gap:14px;margin:40px 0 0}
.schrittring{width:44px;height:44px;transform:rotate(-90deg)}
.schrittring circle{fill:none;stroke-width:2.5}
.schrittring .spur{stroke:var(--grund-3)}
.schrittring .fuellung{stroke:var(--silber);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:75;transition:stroke-dashoffset 420ms cubic-bezier(.77,0,.175,1)}
.schritt-text{font-size:.9375rem;color:var(--silber-2)}
.schritt-text b{color:var(--silber);font-weight:600}
.formular fieldset{border:0;margin:28px 0 0;padding:0;min-width:0}
.formular legend{padding:0;margin-bottom:22px;font-size:clamp(1.75rem,1.4rem + 1.2vw,2.25rem);font-weight:650;letter-spacing:-.03em}
.mit-schritten .formular fieldset.schritt:not(.ist-aktiv){display:none}
.zeilen{display:grid;gap:18px}
.zeilen--2{grid-template-columns:1fr 1fr}
.zeilen--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.zeilen--2,.zeilen--3{grid-template-columns:1fr}}
.schritt-hinweis{color:var(--silber-2)}
.wahlzeilen--2{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
@media (max-width:560px){.wahlzeilen--2{grid-template-columns:1fr}}
.feldzeile{display:grid;gap:8px;align-content:start}
.feldzeile label,.feldzeile .beschriftung{font-weight:600;font-size:.9375rem}
.hilfe{font-size:.8125rem;color:var(--silber-3);font-weight:400}
.formular input[type=text],.formular input[type=email],.formular input[type=tel],.formular input[type=number],.formular select,.formular textarea{width:100%;min-height:54px;padding:14px 16px;border-radius:14px;border:1px solid var(--feldrand);background:var(--grund-2);color:var(--silber);font:400 1rem/1.4 var(--schrift);caret-color:var(--akzent-text);transition:border-color 200ms ease}
.formular textarea{min-height:128px;resize:vertical}
.formular select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23E6E8EC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.formular ::placeholder{color:#868C96;opacity:1}
.formular input:focus-visible,.formular select:focus-visible,.formular textarea:focus-visible{outline:none;border-color:var(--silber);box-shadow:0 0 0 4px rgba(230,232,236,.12)}
.formular input:hover:not(:focus-visible),.formular select:hover:not(:focus-visible),.formular textarea:hover:not(:focus-visible){border-color:#7A818C}
.formular [aria-invalid="true"]{border-color:var(--fehler)}
.feldfehler{font-size:.8125rem;color:var(--fehler)}
.feldfehler:empty{display:none}
.zaehler{font:400 .8125rem/1 var(--mono);color:var(--silber-3);justify-self:end}
.zaehler.ist-genug{color:var(--akzent-text)}

/* Wahl-Zeilen (Phase, Themen) und Wahl-Pillen im Formular */
.wahlzeilen{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.wahlzeilen li{border-bottom:1px solid var(--linie)}
.wahlzeilen input,.wahlpillen input{position:absolute;opacity:0;pointer-events:none}
.wahlzeilen label{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:2px 16px;padding:16px 10px;margin:0 -10px;border-radius:12px;cursor:pointer;transition:background-color 200ms ease,transform 160ms var(--aus)}
.wahlzeilen label:active{transform:scale(.985)}
.wahlzeilen .punkt{grid-row:1/3;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--feldrand);display:grid;place-items:center;transition:background-color 200ms ease,box-shadow 200ms ease}
.wahlzeilen input[type=checkbox]+label .punkt{border-radius:6px}
.wahlzeilen .punkt::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;opacity:0;transform:scale(.6);transition:opacity 160ms var(--aus),transform 160ms var(--aus)}
.wahlzeilen input[type=checkbox]+label .punkt::after{width:10px;height:6px;border-radius:0;background:none;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg) scale(.6)}
.wahlzeilen strong{font-weight:600}
.wahlzeilen span.was{font-size:.875rem;color:var(--silber-2)}
.wahlzeilen input:checked+label{background:var(--grund-3)}
.wahlzeilen input:checked+label .punkt{background:var(--akzent);box-shadow:none}
.wahlzeilen input:checked+label .punkt::after{opacity:1;transform:scale(1)}
.wahlzeilen input[type=checkbox]:checked+label .punkt::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.wahlzeilen input:focus-visible+label,.wahlpillen input:focus-visible+label{outline:2px solid var(--silber);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.wahlzeilen label:hover{background:var(--grund-2)}}
.wahlpillen{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.wahlpillen label{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--feldrand);cursor:pointer;font-weight:550;transition:transform 160ms var(--aus),background-color 200ms ease,color 200ms ease}
.wahlpillen label:active{transform:scale(.97)}
.wahlpillen input:checked+label{background:var(--silber);color:var(--grund);box-shadow:none}

.haken{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:.9375rem;color:var(--silber-2);cursor:pointer}
.haken input{appearance:none;width:24px;height:24px;margin:0;border-radius:7px;border:1px solid var(--feldrand);background:var(--grund-2);display:grid;place-items:center;cursor:pointer;transition:background-color 200ms ease,border-color 200ms ease}
.haken input::after{content:"";width:12px;height:7px;border-left:2px solid var(--grund);border-bottom:2px solid var(--grund);transform:translateY(-1px) rotate(-45deg) scale(.6);opacity:0;transition:transform 160ms var(--aus),opacity 160ms var(--aus)}
.haken input:checked{background:var(--silber);border-color:var(--silber)}
.haken input:checked::after{opacity:1;transform:translateY(-1px) rotate(-45deg) scale(1)}
.haken a{color:var(--silber)}

.schrittknoepfe{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:36px}
.schrittknoepfe [hidden]{display:none}
.knopf .kreisel{display:none;width:18px;height:18px}
.knopf.sendet .kreisel{display:block;animation:drehen 800ms linear infinite}
.knopf.sendet{pointer-events:none}
@keyframes drehen{to{transform:rotate(360deg)}}
.erfolg{padding:clamp(24px,6vh,64px) 0 0;text-align:center}
.erfolg[hidden]{display:none}
.erfolg-zeichen{display:block;width:min(260px,62vw);height:auto;margin:0 auto 40px;overflow:visible}
.erfolg-zeichen circle{fill:none;stroke:var(--silber);stroke-width:12}
.erfolg-zeichen .e-ring{stroke-dasharray:100;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:500px 500px}
.erfolg-zeichen .e-puls{stroke-width:4;opacity:0;transform-origin:500px 500px}
.erfolg-zeichen .e-b{fill:var(--silber);stroke:var(--silber);stroke-width:7;stroke-dasharray:100;stroke-dashoffset:0}
.erfolg h2{font-size:clamp(2.75rem,1.8rem + 4vw,4.75rem);font-weight:520;outline:none}
.erfolg p{margin:18px auto 0;max-width:40ch;font-size:1.1875rem;color:var(--silber-2)}
.erfolg .knopf{margin-top:32px}
.feine-zeile{margin-top:18px;font-size:.8125rem;color:var(--silber-3);max-width:60ch}
.feld-zeit{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Danke / 404 */
.danke{min-height:calc(100vh - var(--leiste));display:grid;place-items:center;text-align:center;padding:64px 0}
.danke h1{font-size:clamp(3rem,1.8rem + 5vw,5.5rem)}
.danke p{margin:20px auto 0;max-width:42ch;font-size:1.1875rem;color:var(--silber-2)}
.danke .aktionen{margin-top:32px}

/* --- Vorschau-Regler (nur mit ?vorschau=1) ------------------------------------------------ */
.vorschau{position:fixed;left:50%;bottom:16px;z-index:40;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;max-width:calc(100% - 24px);padding:10px 14px;border-radius:18px;background:rgba(23,26,31,.96);box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 0 1px var(--linie);font-size:.8125rem}
.vorschau[hidden]{display:none}
.vorschau b{font-weight:600;color:var(--silber-3)}
.vorschau .gruppe{display:flex;gap:4px;align-items:center}
.vorschau a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;text-decoration:none;color:var(--silber-2);transition:background-color 200ms ease,color 200ms ease}
.vorschau a[aria-current]{background:var(--silber);color:var(--grund)}
@media (hover:hover) and (pointer:fine){.vorschau a:not([aria-current]):hover{background:var(--grund-3);color:var(--silber)}}

@media (prefers-reduced-motion:reduce){
  .knopf,.phase,.wahlzeilen label,.wahlpillen label,.verweis svg,.fragen summary svg{transition-property:background-color,color,opacity}
  .knopf:active,.phase:active,.wahlzeilen label:active,.wahlpillen label:active{transform:none}
  .kopf .objekt canvas{transition:opacity 200ms ease}
}


/* ===========================================================================
   SZENEN — jeder Abschnitt hat seine eigene Bewegung, gebunden ans Scrollen.
   Ohne JavaScript oder bei „Bewegung reduzieren“ stehen alle Endzustände.
   =========================================================================== */

/* Licht am Zeiger (nur feiner Zeiger) */
.licht{position:fixed;left:0;top:0;width:760px;height:760px;margin:-380px 0 0 -380px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(closest-side,rgba(205,214,232,.065),rgba(205,214,232,0));opacity:0;transition:opacity 700ms ease;will-change:transform}
.licht.an{opacity:1}
main{position:relative;z-index:1}

/* Lese-Ring in der Leiste: schließt sich, je weiter man liest */
.marke .lese-ring{stroke-dasharray:100;stroke-dashoffset:100}

/* Scroll-Hinweis im Kopf */
.scroll-hinweis{position:absolute;left:50%;bottom:18px;width:1px;height:44px;background:linear-gradient(rgba(230,232,236,0),rgba(230,232,236,.35));transform:translateX(-50%);overflow:hidden}
.scroll-hinweis span{position:absolute;left:0;top:-14px;width:1px;height:14px;background:var(--silber)}
@media (prefers-reduced-motion:no-preference){.scroll-hinweis span{animation:hinweis 1.8s linear infinite}}
@keyframes hinweis{to{transform:translateY(58px)}}
@media (max-width:760px){.scroll-hinweis{display:none}}

/* --- Manifest: drei Sätze nacheinander, Wort für Wort ------------------------ */
.manifest{position:relative}
.manifest-buehne{position:sticky;top:var(--leiste);height:calc(100svh - var(--leiste));display:grid;place-items:center;overflow:hidden}
.saetze-stapel{position:relative;width:min(1120px,92vw);height:min(62vh,560px)}
.satz{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;text-align:center;will-change:transform,opacity,filter}
.satz h3{font-size:clamp(2.75rem,1rem + 6.4vw,7.25rem);font-weight:520;letter-spacing:-.05em;line-height:.98;max-width:13ch}
.satz .w{color:rgba(230,232,236,.14);transition:color 200ms ease}
.satz .w.an{color:var(--silber)}
.satz p{margin-top:30px;max-width:40ch;font-size:clamp(1.0625rem,1rem + .45vw,1.4375rem);color:var(--silber-2)}
.manifest-ring{position:absolute;right:clamp(16px,4vw,56px);top:50%;width:72px;height:72px;transform:translateY(-50%) rotate(-90deg)}
.manifest-ring circle{fill:none;stroke-width:3}
.manifest-ring .spur{stroke:var(--grund-3)}
.manifest-ring .bogen{stroke:var(--silber);stroke-linecap:round;stroke-dasharray:0 300}
@media (max-width:760px){.manifest-ring{top:auto;bottom:24px;right:50%;width:48px;height:48px;transform:translateX(50%) rotate(-90deg)}}
/* Ohne Szene: Sätze untereinander, voll sichtbar. */
.manifest{height:auto}
.manifest .manifest-buehne{position:relative;top:0;height:auto;padding:clamp(80px,12vh,140px) 0}
.manifest .saetze-stapel{height:auto;display:grid;gap:72px}
.manifest .satz{position:relative}
.manifest .satz .w{color:var(--silber)}
.manifest .manifest-ring{display:none}

/* --- Der Name: Riesenwörter, ein Kreis zeichnet sich um „Circle“ ------------ */
.name-szene{padding:clamp(96px,16vh,200px) 0;overflow:hidden;border-top:1px solid var(--linie)}
.name-szene h2{font-size:clamp(2.25rem,1.4rem + 3vw,4rem);font-weight:520}
.namensteil{display:grid;gap:20px;margin-top:clamp(48px,8vh,96px)}
.namensteil.rechts{justify-items:end;text-align:right}
.riesenwort{position:relative;display:inline-block;font-size:clamp(4.5rem,.5rem + 15vw,16rem);font-weight:500;letter-spacing:-.065em;line-height:.88}
.deutung{max-width:32ch;font-size:clamp(1.0625rem,1rem + .45vw,1.4375rem);color:var(--silber-2)}
.umkreis{position:absolute;left:-7%;top:-16%;width:114%;height:132%;overflow:visible;pointer-events:none}
.umkreis ellipse{fill:none;stroke:var(--silber);stroke-width:2;vector-effect:non-scaling-stroke}

/* --- Für wen: die Zahl füllt sich ---------------------------------------- */
.fuer-wen{padding:clamp(96px,14vh,180px) 0;overflow:hidden;border-top:1px solid var(--linie)}
.fuer-wen .innen{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,5vw,88px);align-items:center}
.zahl-block{font-size:clamp(5.5rem,1.5rem + 13vw,17rem);font-weight:600;letter-spacing:-.065em;line-height:.85;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(230,232,236,.55)}
.fuer-wen h2{font-size:clamp(2.25rem,1.4rem + 3vw,4rem);font-weight:520}
.kriterien{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:30px}
.kriterien h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);font-weight:520}
.kriterien p{margin-top:8px;color:var(--silber-2)}
@media (max-width:900px){.fuer-wen .innen{grid-template-columns:1fr}}

/* --- Gastgeber: wer dahinter steht ------------------------------------------ */
.gastgeber{padding:clamp(80px,12vh,150px) 0;border-top:1px solid var(--linie)}
.gastgeber h2{font-size:clamp(2.25rem,1.4rem + 3vw,4rem);font-weight:520}
.gastgeber .eine-zeile{margin-top:14px;color:var(--silber-2);max-width:56ch}
.personen{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,32px)}
.person{display:grid;grid-template-columns:clamp(88px,10vw,120px) 1fr;gap:20px;align-items:center;padding:20px;border-radius:24px;background:var(--grund-2);box-shadow:inset 0 0 0 1px var(--linie)}
.person img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:18px;filter:grayscale(1) contrast(1.05)}
.person h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);font-weight:540}
.person p{margin-top:4px;color:var(--silber-3)}
.person .verweis{min-height:40px}
@media (max-width:700px){.personen{grid-template-columns:1fr}}

/* --- Was Mitglieder erwartet: vier Karten, ruhig im Raster ----------------- */
.angebot{padding:clamp(96px,14vh,160px) 0;border-top:1px solid var(--linie)}
.angebot h2{font-size:clamp(2.25rem,1.4rem + 3vw,4rem);font-weight:520}
.karten{margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.karte{position:relative;overflow:hidden;min-height:clamp(260px,34vh,340px);border-radius:28px;padding:clamp(24px,3vw,36px);display:grid;grid-template-rows:auto 1fr;background:linear-gradient(155deg,#181B21 0%,#0E1014 62%,#0B0C0F 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.05)}
.karte-ring{position:absolute;right:-22%;top:-38%;width:78%;aspect-ratio:1;height:auto;pointer-events:none}
.karte-ring circle{fill:none;stroke:rgba(230,232,236,.1);stroke-width:.5}
.karte-nr{position:relative;font:400 .875rem/1 var(--mono);color:var(--silber-3)}
.karte-text{position:relative;align-self:end}
.karte h3{font-size:clamp(1.875rem,1.3rem + 1.8vw,2.75rem);font-weight:520;letter-spacing:-.04em}
.karte p{margin-top:12px;max-width:36ch;color:var(--silber-2)}
.karte-kopf{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px}
.karte .marke-klein{padding:5px 11px;font-size:.75rem;background:rgba(8,9,11,.6)}
.marke-klein{display:inline-block;padding:7px 13px;border-radius:999px;font-size:.8125rem;color:var(--silber-2);box-shadow:inset 0 0 0 1px rgba(230,232,236,.16)}
@media (max-width:1000px){.karten{grid-template-columns:1fr}}

/* --- Aufnahme: drei Schritte nebeneinander ------------------------------- */
.ablauf-szene{padding:clamp(96px,14vh,160px) 0;border-top:1px solid var(--linie)}
.ablauf-kopf{max-width:760px}
.ablauf-kopf h2{font-size:clamp(2.25rem,1.4rem + 3vw,4rem);font-weight:520}
.ablauf-kopf .eine-zeile{margin-top:16px;font-size:1.1875rem;color:var(--silber-2)}
.ablauf{list-style:none;margin:clamp(40px,7vh,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);border-top:1px solid var(--linie)}
.ablauf li{position:relative;display:grid;gap:10px;padding-top:28px}
.ablauf li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--silber)}
.ablauf-nr{font:400 .875rem/1 var(--mono);color:var(--silber-3)}
.ablauf .dauer{font:400 .875rem/1 var(--mono);color:var(--silber-2)}
.ablauf h3{font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);font-weight:520}
.ablauf p{max-width:32ch;color:var(--silber-2)}
@media (max-width:760px){.ablauf{grid-template-columns:1fr}}

/* --- Erster Jahrgang ----------------------------------------------------- */
.jahrgang{padding:clamp(96px,16vh,180px) 0;background:var(--grund-2);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);text-align:center}
.jahrgang h2{font-size:clamp(2.75rem,1.6rem + 4vw,5.25rem);font-weight:520}
.jahrgang p{margin:18px auto 0;max-width:36ch;font-size:clamp(1.0625rem,1rem + .45vw,1.375rem);color:var(--silber-2)}
.jahrgang .knopf{margin-top:34px}

/* --- Antworten gleiten auf -------------------------------------------- */
.fragen .antwort{overflow:hidden}
.fragen .antwort p{padding:0 0 24px;max-width:62ch;color:var(--silber-2)}

/* --- Schluss: das Zeichen zeichnet sich ------------------------------- */
.schluss-zeichen{display:block;width:min(200px,46vw);height:auto;margin:0 auto 44px;overflow:visible}
.schluss-zeichen circle{fill:none;stroke:var(--silber);stroke-width:12}
.schluss-zeichen .e-ring{stroke-dasharray:100;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:500px 500px}
.schluss-zeichen .e-puls{stroke-width:4;opacity:0;transform-origin:500px 500px}
.schluss-zeichen .e-b{fill:var(--silber);stroke:var(--silber);stroke-width:7;stroke-dasharray:100;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .js .schluss-zeichen .e-ring{stroke-dashoffset:100;transition:stroke-dashoffset 900ms cubic-bezier(.77,0,.175,1)}
  .js .schluss-zeichen .e-b{stroke-dashoffset:100;fill-opacity:0;transition:stroke-dashoffset 700ms cubic-bezier(.77,0,.175,1),fill-opacity 300ms ease}
  .js .schluss-zeichen .e-b:nth-of-type(1){transition-delay:150ms,750ms}
  .js .schluss-zeichen .e-b:nth-of-type(2){transition-delay:230ms,830ms}
  .js .schluss-zeichen .e-b:nth-of-type(3){transition-delay:310ms,910ms}
  .js .schluss.ist-da .schluss-zeichen .e-ring,.js .schluss.ist-da .schluss-zeichen .e-b{stroke-dashoffset:0;fill-opacity:1}
}

/* --- Einblenden beim Erreichen (Elemente mit data-auf) ------------------- */
/* (Fassung 2: Einblend-Arten stehen am Ende der Datei.) */

/* --- Magnetische Knöpfe ------------------------------------------------ */
.magnet{transition:transform 420ms var(--aus),background-color 200ms ease}

/* ===========================================================================
   ANFRAGE — Formular links, der eigene Pass rechts
   =========================================================================== */
.bewerbung .innen{max-width:1160px}
.anfrage-raster{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(40px,6vw,104px);align-items:start;margin-top:8px}
.formular{max-width:640px;min-width:0}
/* --- Member Card: Vorder- und Rückseite, Holo-Folie, wendbar ------------- */
.pass-spalte{position:sticky;top:calc(var(--leiste) + 40px);perspective:1400px;display:grid;justify-items:center}
.pass{position:relative;width:100%;aspect-ratio:.63;transform-style:preserve-3d;will-change:transform}
.pass-dreher{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 700ms cubic-bezier(.77,0,.175,1)}
.pass.gewendet .pass-dreher{transform:rotateY(180deg)}
.pass-seite{position:absolute;inset:0;border-radius:30px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;color:var(--silber);background:radial-gradient(130% 90% at 18% 0%,#2E333C 0%,#16181D 52%,#0B0C0F 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08),0 50px 90px -34px rgba(0,0,0,.85),0 12px 30px -12px rgba(0,0,0,.6)}
.pass-seite::before{content:"";position:absolute;inset:0;opacity:.3;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23b)'/%3E%3C/svg%3E")}
.pass-vorne{display:grid;grid-template-rows:auto auto 1fr auto auto auto auto;gap:14px;padding:26px}
.pass-hinten{transform:rotateY(180deg)}
/* Holo-Folie: kühle Spektralfarben, wandern mit der Neigung. */
.pass-folie{position:absolute;inset:-40%;pointer-events:none;opacity:.5;mix-blend-mode:color-dodge;background:conic-gradient(from 210deg at 50% 50%,rgba(90,120,200,0) 0deg,rgba(90,130,230,.28) 60deg,rgba(150,110,230,.22) 120deg,rgba(80,200,215,.24) 180deg,rgba(200,210,230,.14) 240deg,rgba(90,120,200,0) 300deg);-webkit-mask-image:repeating-linear-gradient(115deg,#000 0 2px,rgba(0,0,0,.55) 2px 5px);mask-image:repeating-linear-gradient(115deg,#000 0 2px,rgba(0,0,0,.55) 2px 5px);will-change:transform}
.pass-glanz{position:absolute;inset:-60%;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.12) 50%,transparent 58%);mix-blend-mode:screen;will-change:transform}
.pass-kopf{position:relative;display:flex;justify-content:space-between;align-items:flex-start}
.pass-zeichen{width:64px;height:64px;overflow:visible}
.pass-zeichen circle{fill:none;stroke-width:16}
.pass-zeichen .p-spur{stroke:rgba(230,232,236,.16)}
.pass-zeichen .p-ring{stroke:var(--silber);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:500px 500px;transition:stroke-dashoffset 500ms cubic-bezier(.77,0,.175,1)}
.pass-zeichen path{fill:var(--silber)}
.pass-jahrgang{font-size:.6875rem;line-height:1.45;color:var(--silber-2);text-align:right;letter-spacing:.02em}
.pass-chip{position:relative;width:44px;height:34px}
.pass-chip rect{fill:rgba(230,232,236,.14);stroke:rgba(230,232,236,.45)}
.pass-chip path{fill:none;stroke:rgba(230,232,236,.38)}
.pass-mitte{position:relative;align-self:end}
.pass-name{font-size:1.75rem;font-weight:560;letter-spacing:-.035em;line-height:1.08;overflow-wrap:anywhere}
.pass-firma{margin-top:6px;font-size:.9375rem;color:var(--silber-2);overflow-wrap:anywhere}
.pass-daten{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin:0;padding-top:14px;border-top:1px solid rgba(230,232,236,.12)}
.pass-daten dt{font-size:.6875rem;color:var(--silber-3)}
.pass-daten dd{margin:2px 0 0;font-size:.875rem}
.pass-nachweis{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;font-size:.6875rem;color:var(--silber-3)}
.pass-nachweis ol{display:flex;flex-wrap:wrap;gap:5px;list-style:none;margin:0;padding:0}
.pass-nachweis li{padding:4px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(230,232,236,.16);transition:background-color 200ms ease,color 200ms ease,box-shadow 200ms ease}
.pass-nachweis li.ist-da{background:var(--silber);color:var(--grund);box-shadow:none}
.pass-themen{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px;min-height:24px}
.pass-themen li{font-size:.6875rem;padding:4px 9px;border-radius:999px;background:rgba(230,232,236,.07);box-shadow:inset 0 0 0 1px rgba(230,232,236,.14)}
.pass-fuss{position:relative;display:flex;justify-content:space-between;font:400 .75rem/1 var(--mono);color:var(--silber-3);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.pass .leer{color:var(--silber-3)}
@keyframes aufleuchten{from{text-shadow:0 0 22px rgba(255,255,255,.75);color:#fff}to{text-shadow:0 0 0 rgba(255,255,255,0)}}
.pass .leuchtet{animation:aufleuchten 600ms var(--aus)}
/* Rückseite */
.pass-streifen{position:absolute;left:0;right:0;top:34px;height:46px;background:linear-gradient(180deg,#050506,#111317)}
.pass-hinten-inhalt{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;padding:112px 26px 26px}
.pass-etikett{font-size:.6875rem;color:var(--silber-3)}
.pass-code-gross{font:400 1.375rem/1.1 var(--mono);letter-spacing:.06em}
.pass-schritte{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid rgba(230,232,236,.12);display:grid;gap:12px;font-size:.875rem;color:var(--silber-3)}
.pass-schritte b{font:400 .75rem/1 var(--mono);margin-right:8px}
.pass-schritte .ist-fertig{color:var(--silber)}
.pass-unten{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.pass-klein{font-size:.6875rem;line-height:1.5;color:var(--silber-3)}
.pass-wasserzeichen{width:72px;height:72px;flex:none}
.pass-wasserzeichen circle{fill:none;stroke:rgba(230,232,236,.22);stroke-width:14}
.pass-wasserzeichen path{fill:rgba(230,232,236,.22)}
.pass-wenden{margin-top:14px;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--silber-3);font:500 .8125rem/1 var(--schrift);cursor:pointer;transition:transform 160ms var(--aus),color 200ms ease}
.pass-wenden:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.pass-wenden:hover{color:var(--silber)}}
@media (max-width:1000px){
  .anfrage-raster{grid-template-columns:1fr}
  .pass-spalte{position:relative;top:0;order:-1;max-width:440px;width:100%;justify-self:center}
  .pass{aspect-ratio:1.62}
  .pass-vorne{grid-template-rows:auto 1fr auto;padding:20px;gap:8px}
  .pass-chip,.pass-daten,.pass-nachweis,.pass-themen{display:none}
  .pass-name{font-size:1.375rem}
  .pass-zeichen{width:46px;height:46px}
  .pass-streifen{top:20px;height:34px}
  .pass-hinten-inhalt{padding:68px 20px 18px;gap:6px}
  .pass-schritte{margin-top:6px;padding-top:8px;gap:4px;font-size:.75rem}
  .pass-unten{display:none}
}
@media (prefers-reduced-motion:reduce){.pass-dreher{transition:none}}

/* Haken an fertigen Feldern */
.ok{display:inline-block;width:16px;height:16px;margin-left:8px;vertical-align:-3px}
.ok path{fill:none;stroke:var(--silber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 300ms var(--aus)}
.ist-ok>.ok path,.ist-ok .ok path{stroke-dashoffset:0}

/* Fertig: der Pass rückt in die Mitte */
.anfrage-raster.fertig{grid-template-columns:1fr;justify-items:center}
.anfrage-raster.fertig .formular{display:none}
.anfrage-raster.fertig .pass-spalte{position:relative;top:0;width:min(380px,86vw);order:0}
.anfrage-raster.fertig .pass{aspect-ratio:.63}
.anfrage-raster.fertig .pass-vorne{grid-template-rows:auto auto 1fr auto auto auto auto;padding:26px}
.anfrage-raster.fertig .pass-daten,.anfrage-raster.fertig .pass-nachweis{display:grid}.anfrage-raster.fertig .pass-themen{display:flex}

@media (prefers-reduced-motion:reduce){
  .kopf{height:auto}
  .kopf-buehne{position:relative;top:0;min-height:calc(100svh - var(--leiste))}
  .js [data-auf]{opacity:1;transform:none;filter:none}
  .licht{display:none}
}

/* Lichtpuls um den Pass beim Abschluss */
.pass-puls{position:absolute;inset:0;border-radius:30px;box-shadow:0 0 0 2px var(--silber);pointer-events:none}
.anfrage-raster.fertig .pass-spalte{perspective:none}




/* ===========================================================================
   FASSUNG 2 — dichter am Telefon, mehr Inhalt, jede Szene mit eigener Bewegung.
   Alle Bewegungen nur über transform/opacity; ease-out (.23,1,.32,1).
   =========================================================================== */

.augenbraue{font-size:.8125rem;font-weight:600;letter-spacing:.14em;color:var(--silber-3);margin-bottom:14px}

/* --- Kopf am Telefon: Logo oben im eigenen Feld, Text direkt darunter ------- */
@media (max-width:760px){
  .kopf-buehne{height:auto;min-height:0;display:block;padding:0 0 36px}
  .kopf .objekt{position:relative;inset:auto;z-index:0;width:100%;height:min(88vw,46svh);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 72%,transparent 100%)}
  .kopf-buehne::after{display:none}
  .kopf-text{margin-top:-18px}
  .kopf h1{font-size:clamp(2.5rem,9.6vw,3rem)}
  .kopf .unterzeile{font-size:1.25rem;margin-top:10px}
  .kopf .eine-zeile{font-size:1rem;margin-top:12px}
  .aktionen{margin-top:24px}
}

/* --- Zahlen-Leiste ------------------------------------------------------------ */
.fakten{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);background:var(--grund-2)}
.fakten-liste{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fakten-liste li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px;padding:28px 0 28px 24px;border-left:1px solid var(--linie)}
.fakten-liste li:first-child{border-left:0;padding-left:0}
.fakt-zahl{font-size:clamp(2.5rem,1.6rem + 2.6vw,3.75rem);font-weight:560;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.fakt-wort{font-weight:600;font-size:1.0625rem}
.fakt-was{grid-column:1/-1;margin-top:6px;font-size:.875rem;color:var(--silber-3)}
@media (max-width:760px){
  .fakten-liste{grid-template-columns:1fr 1fr}
  .fakten-liste li{padding:20px 0 20px 16px}
  .fakten-liste li:nth-child(odd){border-left:0;padding-left:0}
  .fakten-liste li:nth-child(n+3){border-top:1px solid var(--linie)}
}

/* --- Manifest: drei Sätze, Wort für Wort ------------------------------------- */
.manifest{padding:clamp(64px,12vh,150px) 0}
.manifest .saetze-stapel{width:auto;height:auto;display:grid;gap:clamp(44px,8vh,96px)}
.manifest .satz{position:relative;inset:auto;display:block;text-align:left;justify-items:start}
.manifest .satz h3{font-size:clamp(2.375rem,1rem + 5.4vw,6rem);max-width:14ch}
.manifest .satz p{margin-top:18px;max-width:46ch;font-size:clamp(1.0625rem,1rem + .4vw,1.375rem)}
.manifest .satz:nth-child(2){justify-self:end;text-align:right}
.manifest .satz:nth-child(2) h3,.manifest .satz:nth-child(2) p{margin-left:auto}
@media (max-width:760px){.manifest .satz:nth-child(2){text-align:left}.manifest .satz:nth-child(2) h3,.manifest .satz:nth-child(2) p{margin-left:0}}

/* --- Was Mitglieder erwartet: Raster mit sechs Karten ------------------------ */
.angebot{padding:clamp(64px,12vh,150px) 0}
.karten{grid-template-columns:repeat(3,minmax(0,1fr));perspective:1400px}
.karte{min-height:clamp(240px,30vh,300px);transform-style:preserve-3d;transition:transform 300ms var(--aus)}
.karte--gross,.karte--breit{grid-column:span 2}
.karte--gross h3{font-size:clamp(2.25rem,1.4rem + 2.6vw,3.5rem)}
.karte--gross p{font-size:1.125rem;max-width:44ch}
/* Drei Ringe drehen sich im Raum: der Kreis, in den man aufgenommen wird. */
.karte-kreise{position:absolute;right:clamp(12px,5%,56px);top:50%;width:clamp(140px,22vw,250px);aspect-ratio:1;transform:translateY(-50%);transform-style:preserve-3d;pointer-events:none}
.karte-kreise i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(230,232,236,.34)}
.karte-kreise i:nth-child(2){inset:12%;border-color:rgba(230,232,236,.24)}
.karte-kreise i:nth-child(3){inset:26%;border-color:rgba(230,232,236,.5)}
@media (prefers-reduced-motion:no-preference){
  .karte-kreise i{animation:kreisen 14s linear infinite}
  .karte-kreise i:nth-child(2){animation-duration:19s;animation-direction:reverse}
  .karte-kreise i:nth-child(3){animation-duration:11s}
  .ruht .karte-kreise i{animation-play-state:paused}
}
@keyframes kreisen{from{transform:rotateX(64deg) rotateZ(0)}to{transform:rotateX(64deg) rotateZ(360deg)}}
.karte--gross .karte-text{max-width:60%}
@media (max-width:1000px){
  .karten{grid-template-columns:1fr 1fr}
  .karte--gross{grid-column:1/-1}
  .karte--breit{grid-column:auto}
}
@media (max-width:640px){
  .karten{grid-template-columns:1fr;gap:12px}
  .karte{min-height:0;padding:22px;gap:28px;border-radius:22px}
  .karte--gross .karte-text{max-width:none}
  .karte--gross{padding-top:150px}
  .karte-kreise{top:22px;right:22px;width:120px;transform:none}
  .karte h3{font-size:1.75rem}
  .karte--gross h3{font-size:2.125rem}
}

/* --- Themen-Laufband: zwei Spuren, gegenläufig, im Raum gekippt -------------- */
.themen-band{padding:clamp(64px,12vh,140px) 0;border-top:1px solid var(--linie);overflow:hidden}
.themen-band h2{font-size:clamp(2.25rem,1.4rem + 3vw,4rem);font-weight:520}
.themen-band .eine-zeile{margin-top:14px;font-size:1.1875rem;color:var(--silber-2)}
.band{margin-top:clamp(36px,6vh,64px);display:grid;gap:14px;transform:perspective(900px) rotateX(18deg) rotateZ(-3deg);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.band-spur{display:flex;width:max-content}
.band-inhalt{display:flex;gap:14px;padding-right:14px}
.band-inhalt span{white-space:nowrap;padding:16px 26px;border-radius:999px;font-size:clamp(1.0625rem,1rem + .6vw,1.5rem);font-weight:500;letter-spacing:-.02em;background:linear-gradient(180deg,#191C22,#101216);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.06)}
.band-spur:nth-child(2) .band-inhalt span{color:var(--silber-2);background:transparent;box-shadow:inset 0 0 0 1px rgba(230,232,236,.14)}
@media (prefers-reduced-motion:no-preference){
  .band-spur{animation:laufen 46s linear infinite}
  .band-spur:nth-child(2){animation-duration:54s;animation-direction:reverse}
  .ruht .band-spur{animation-play-state:paused}
}
@keyframes laufen{to{transform:translateX(-50%)}}

/* --- Der Ort: Server-Fenster in 3D, daneben der Wochenrhythmus --------------- */
.kreis-ansicht{padding:clamp(64px,12vh,150px) 0;border-top:1px solid var(--linie);overflow:hidden}
.ansicht-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:center}
.kreis-ansicht h2{font-size:clamp(2.25rem,1.4rem + 3vw,4rem);font-weight:520}
.kreis-ansicht .eine-zeile{margin-top:16px;font-size:1.125rem;color:var(--silber-2);max-width:48ch}
.rhythmus{list-style:none;margin:36px 0 0;padding:0 0 0 26px;display:grid;gap:22px;position:relative}
.rhythmus::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:var(--linie)}
.rhythmus li{position:relative}
.rhythmus li::before{content:"";position:absolute;left:-26px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--silber);box-shadow:0 0 0 5px var(--grund)}
.rhythmus .tag{font-size:.8125rem;font-weight:600;letter-spacing:.06em;color:var(--silber-3)}
.rhythmus h3{margin-top:4px;font-size:1.375rem;font-weight:560}
.rhythmus p{margin-top:4px;color:var(--silber-2);max-width:44ch}
.ansicht-buehne{perspective:1300px;perspective-origin:50% 40%}
.fenster{position:relative;display:grid;grid-template-columns:200px 1fr;min-height:400px;border-radius:22px;background:#0D0F12;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.06),0 60px 120px -40px rgba(0,0,0,.9);
  transform-style:preserve-3d;transform:rotateX(14deg) rotateY(-16deg) rotateZ(2deg);will-change:transform}
.fenster-leiste{padding:18px 14px;border-right:1px solid var(--linie);background:#0A0B0E;border-radius:22px 0 0 22px;font-size:.8125rem;overflow:hidden}
.kanal-gruppe{margin:14px 0 6px;font-size:.6875rem;font-weight:600;letter-spacing:.08em;color:var(--silber-3)}
.kanal-gruppe:first-child{margin-top:0}
.kanal{padding:4px 8px;border-radius:7px;color:var(--silber-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kanal b,.fenster-titel b,.schwebe b{font-weight:400;color:var(--silber-3);margin-right:4px}
.kanal.ist-aktiv{background:var(--grund-3);color:var(--silber)}
.fenster-inhalt{padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.fenster-titel{font-weight:600;font-size:1.0625rem}
.fenster-thema{font-size:.875rem;color:var(--silber-3);padding-bottom:14px;border-bottom:1px solid var(--linie)}
.fenster-zeilen{display:grid;gap:16px;margin-top:6px}
.fenster-zeilen i{display:block;height:10px;border-radius:6px;background:linear-gradient(90deg,rgba(230,232,236,.14),rgba(230,232,236,.05))}
.fenster-zeilen i:nth-child(1){width:72%}.fenster-zeilen i:nth-child(2){width:88%}.fenster-zeilen i:nth-child(3){width:54%}.fenster-zeilen i:nth-child(4){width:80%}.fenster-zeilen i:nth-child(5){width:40%}
.schwebe{position:absolute;padding:10px 16px;border-radius:999px;font-size:.875rem;font-weight:600;white-space:nowrap;background:linear-gradient(180deg,#22262D,#14161A);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 40px -18px rgba(0,0,0,.9)}
.schwebe.s1{right:-18px;top:16%;transform:translateZ(90px)}
.schwebe.s2{left:30%;bottom:-18px;transform:translateZ(130px)}
.schwebe.s3{left:-24px;top:58%;transform:translateZ(60px)}
@media (prefers-reduced-motion:no-preference){
  .schwebe{animation:schweben 6s ease-in-out infinite alternate}
  .schwebe.s2{animation-duration:7.5s;animation-delay:-2s}
  .schwebe.s3{animation-duration:5.2s;animation-delay:-4s}
  .ruht .schwebe{animation-play-state:paused}
}
@keyframes schweben{from{translate:0 -6px}to{translate:0 6px}}
@media (max-width:900px){
  .ansicht-raster{grid-template-columns:1fr}
  .ansicht-buehne{order:-1;margin:0 8px}
  .fenster{grid-template-columns:150px 1fr;min-height:320px;font-size:.9em}
  .fenster-leiste{font-size:.75rem;padding:14px 10px}
  .fenster-inhalt{padding:18px}
  .schwebe{font-size:.75rem;padding:8px 12px}
  .schwebe.s1{right:-6px}.schwebe.s3{left:-6px}
}

/* --- Für wen: die Kontur füllt sich --------------------------------------- */
.fuer-wen{padding:clamp(64px,12vh,160px) 0}
.zahl-block{position:relative;-webkit-text-stroke:0;color:inherit}
.zahl-kontur{display:block;color:transparent;-webkit-text-stroke:1.5px rgba(230,232,236,.55)}
.zahl-voll{position:absolute;inset:0;color:var(--silber);background:linear-gradient(180deg,#fff 0%,#C9CED6 48%,#8E949E 54%,#E4E7EC 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media (max-width:900px){.zahl-block{font-size:clamp(5rem,30vw,9rem)}}

/* --- Der Name, Aufnahme, Jahrgang, Fragen, Schluss: dichter am Telefon ------ */
.name-szene{padding:clamp(64px,13vh,200px) 0}
.namensteil{margin-top:clamp(32px,7vh,96px)}
.riesenwort>span{display:block}
.ablauf-szene,.jahrgang,.schluss{padding:clamp(64px,12vh,170px) 0}
#fragen{padding:clamp(56px,10vh,128px) 0}
@media (max-width:760px){
  .riesenwort{font-size:clamp(3.5rem,19vw,6rem)}
  .ablauf{gap:0;border-top:0;border-left:1px solid var(--linie);padding-left:24px;margin-left:4px}
  .ablauf li{padding:0 0 26px}
  .ablauf li::before{left:-29px;top:4px}
  .fragen summary{font-size:1.0625rem;padding:18px 0}
}

/* ===========================================================================
   EINBLENDEN — sieben Arten, damit nicht jede Szene gleich kommt.
   data-auf          aufsteigen mit leichter Unschärfe (Überschriften)
   data-auf=links    von links hereingleiten (Listen)
   data-auf=rechts   von rechts hereingleiten (Fragen)
   data-auf=kippen   aus der Tiefe nach vorn klappen (Karten, 3D)
   data-auf=skala    aus 92 % wachsen, Zahl zählt hoch (Zahlen)
   data-auf=woerter  Wort für Wort aufleuchten (Manifest)
   data-auf=maske    aus einer Kante herausschieben (Riesenwörter)
   data-auf=fuellen  Kontur füllt sich von unten (IGNX)
   data-auf=linie    Zeitleiste zieht sich, Punkte folgen (Aufnahme)
   =========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js [data-auf]{opacity:0;transform:translateY(18px);filter:blur(4px);transition:opacity 560ms var(--aus),transform 560ms var(--aus),filter 560ms var(--aus)}
  .js [data-auf="links"]{transform:translateX(-32px);filter:none}
  .js [data-auf="rechts"]{transform:translateX(32px);filter:none}
  .js [data-auf="kippen"]{transform:translateY(48px) rotateX(-22deg) scale(.96);transform-origin:50% 100%;filter:none;transition-duration:800ms}
  .js [data-auf="skala"]{transform:scale(.92);filter:none}
  .js [data-auf].ist-da{opacity:1;transform:none;filter:none}

  .js [data-auf="woerter"]{opacity:1;transform:none;filter:none}
  .js [data-auf="woerter"] .w{display:inline-block;opacity:.12;transform:translateY(.18em);transition:opacity 500ms var(--aus),transform 600ms var(--aus);transition-delay:calc(var(--i,0) * 70ms)}
  .js [data-auf="woerter"] p{opacity:0;transform:translateY(10px);transition:opacity 500ms var(--aus) 300ms,transform 600ms var(--aus) 300ms}
  .js [data-auf="woerter"].ist-da .w,.js [data-auf="woerter"].ist-da p{opacity:1;transform:none}

  .js [data-auf="maske"]{opacity:1;transform:none;filter:none;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
  .js .circle-wort[data-auf="maske"]{overflow:visible;clip-path:inset(-40% -10% -0.06em -10%)}
  .js [data-auf="maske"]>span{transform:translateY(105%);transition:transform 900ms var(--aus)}
  .js [data-auf="maske"].ist-da>span{transform:none}

  .js [data-auf="fuellen"]{opacity:1;transform:none;filter:none}
  .js [data-auf="fuellen"] .zahl-voll{clip-path:inset(100% 0 0 0);transition:clip-path 1400ms cubic-bezier(.77,0,.175,1) 200ms}
  .js [data-auf="fuellen"].ist-da .zahl-voll{clip-path:inset(0 0 0 0)}

  .js [data-auf="linie"]{opacity:1;transform:none;filter:none}
  .js [data-auf="linie"] li{opacity:0;transform:translateY(14px);transition:opacity 500ms var(--aus),transform 500ms var(--aus)}
  .js [data-auf="linie"] li::before{transform:scale(.4);transition:transform 400ms var(--aus)}
  .js [data-auf="linie"] li:nth-child(2),.js [data-auf="linie"] li:nth-child(2)::before{transition-delay:220ms}
  .js [data-auf="linie"] li:nth-child(3),.js [data-auf="linie"] li:nth-child(3)::before{transition-delay:440ms}
  .js [data-auf="linie"].ist-da li{opacity:1;transform:none}
  .js [data-auf="linie"].ist-da li::before{transform:none}

  /* Umkreis um „Executives“ zeichnet sich, nachdem das Wort steht. */
  .js .circle-wort .umkreis ellipse{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1100ms cubic-bezier(.77,0,.175,1) 500ms}
  .js .circle-wort.ist-da .umkreis ellipse{stroke-dashoffset:0}
}
@media (prefers-reduced-motion:reduce){
  .js [data-auf],.js [data-auf] .w,.js [data-auf] p,.js [data-auf] li,.js [data-auf]>span{opacity:1!important;transform:none!important;filter:none!important}
  .js [data-auf="fuellen"] .zahl-voll{clip-path:none}
  .fenster{transform:rotateX(8deg) rotateY(-10deg)}
}

/* Karten neigen sich zur Maus (nur feiner Zeiger) */
@media (hover:hover) and (pointer:fine){
  .karte.ist-da:hover{transition:transform 160ms ease-out}
}
.karte h3{font-size:clamp(1.625rem,1.1rem + 1.1vw,2.25rem);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.karte--gross h3{font-size:clamp(2.25rem,1.4rem + 2.6vw,3.5rem)}
@media (max-width:640px){.karte h3{font-size:1.75rem}.karte--gross h3{font-size:2.125rem}}