/* ============================================================
   Semperion · WoW Forever DE
   Die Bronzetafel, ohne Bronze. Reine Graustufen.
   Masse aus der freigegebenen Vorlage, 1344 x 752.
   ============================================================ */

/* --- Schriften, selbst gehostet. Kein Google-CDN, DSGVO. ---- */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/cinzel-var-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:'Cinzel';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/cinzel-var-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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-var-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:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-var-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;}

/* --- Werte --------------------------------------------------- */
:root{
  /* HELL ist der Regelfall, so wie das Logo: schwarz auf weiss.
     Bronze ist am 15.09.2026 gestrichen, es gibt keine Akzentfarbe.
     Betonung entsteht durch Gewicht, Groesse und die eine gefuellte Flaeche. */
  --tiefe:#FFFFFF;         /* Grund */
  --stein:#F7F5F2;         /* Pergament, zweite Ebene */
  --kalk:#0F1113;          /* Schrift, 18,9 : 1 */
  --kalk-hell:#0F1113;     /* die eine gefuellte Flaeche */
  --knopf-hover:#000000;
  --prosa:#2A2824;         /* lange Abschnitte, 15,1 : 1 */
  --lesetext:#4F4C46;      /* Fliesstext, 8,6 : 1 */
  --asche:#6B6862;         /* nur kleine Beschriftungen, 5,6 : 1 */
  --rollbalken:#C8C4BC;
  --haarlinie:rgba(15,17,19,.16);
  --haarlinie-stark:rgba(15,17,19,.34);
  /* Fraktionen. Nur dort, wo konkret von Horde oder Allianz die Rede ist. */
  --allianz:#1D4ED8;
  --horde:#B91C1C;

  --cinzel:'Cinzel',Georgia,'Times New Roman',serif;
  --inter:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --masse:1160px;
  --rand:clamp(20px,5vw,72px);

  --ease:cubic-bezier(.16,1,.3,1);
}

/* --- Grundlagen ---------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  /* Glatter Grund. Die Koernung ist am 15.09.2026 auf Rickis Wunsch
     entfernt worden, weil sie das Lesen gestoert hat. */
  background-color:var(--tiefe);
  color:var(--kalk);
  font-family:var(--inter);
  font-size:16px;
  line-height:1.65;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
/* Kein Verlauf, keine Vignette. Die Vorlage hat beides nicht,
   und der Richtungsvertrag verbietet Verlaeufe ausdruecklich. */

img,svg{display:block;max-width:100%}
a{color:inherit}

/* Browser-Oberflaechen gehoeren zur Gestaltung. */
::selection{background:var(--kalk);color:var(--tiefe)}
:focus-visible{outline:2px solid var(--kalk);outline-offset:3px}
html{scrollbar-color:var(--asche) var(--tiefe)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--tiefe)}
::-webkit-scrollbar-thumb{background:var(--rollbalken)}
::-webkit-scrollbar-thumb:hover{background:var(--asche)}

.huelle{width:100%;max-width:var(--masse);margin-inline:auto;padding-inline:var(--rand)}
.huelle--breit{max-width:1344px;padding-inline:clamp(16px,2.5vw,34px)}
.dreiteilung{margin-inline:calc(clamp(16px,2.5vw,34px) * -1)}
.nur-fuer-screenreader{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --- Inschriften --------------------------------------------- */
.inschrift{
  font-family:var(--cinzel);font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;
  margin:0;
}

/* --- Kopfzeile ----------------------------------------------- */
.kopf{
  height:75px;display:flex;align-items:center;gap:32px;
  border-bottom:1px solid var(--haarlinie);
}
.kopf__marke{display:flex;align-items:center;gap:14px;text-decoration:none;flex:0 0 auto}
.kopf__zeichen{width:28px;height:28px;color:var(--kalk);flex:0 0 auto;transition:width .35s var(--ease),height .35s var(--ease)}
/* Die Wortmarke, nachgebaut wie im Logopaket: Zeichen, SEMPERION,
   darunter WOW FOREVER DE gesperrt. Als Markup, damit sie die Farbe
   erbt, scharf bleibt und als Text gelesen wird. */
.kopf__wortmarke{display:flex;flex-direction:column;gap:3px;line-height:1}
.kopf__wort{
  font-family:var(--cinzel);font-weight:600;font-size:15px;
  letter-spacing:.26em;text-transform:uppercase;line-height:1;
  transition:font-size .35s var(--ease);
}
.kopf__zusatz{
  font-family:var(--inter);font-weight:500;font-size:9px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--asche);
  line-height:1;transition:opacity .3s var(--ease),font-size .35s var(--ease);
}
.kopf__nav{display:flex;gap:34px;margin-inline:auto}
.kopf__nav a{
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--asche);text-decoration:none;padding-block:6px;
  border-bottom:1px solid transparent;transition:color .25s var(--ease),border-color .25s var(--ease);
}
.kopf__nav a:hover,.kopf__nav a[aria-current="page"]{color:var(--kalk);border-bottom-color:var(--haarlinie-stark)}

/* --- Knoepfe -------------------------------------------------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--inter);font-size:10px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  padding:7px 17px;border:1px solid var(--haarlinie-stark);
  color:var(--kalk);background:transparent;cursor:pointer;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.knopf:hover{border-color:var(--kalk);background:rgba(230,225,216,.08)}
.knopf--voll{
  background:var(--kalk-hell);color:var(--tiefe);border-color:var(--kalk-hell);
  padding:15px 40px;font-size:12px;letter-spacing:.26em;
  min-width:402px;max-width:100%;
}
.knopf--voll:hover{background:var(--knopf-hover);border-color:var(--knopf-hover)}
.knopf--gross{padding:15px 32px;font-size:12px}
.knopf[disabled],.knopf[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

/* --- Erstes Bild: der Countdown fuehrt ------------------------ */
.auftakt{padding-block:77px 0;text-align:center}
.auftakt__titel{
  font-family:var(--inter);font-weight:500;
  font-size:13px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--asche);margin:0 0 56px;
}
.auftakt__titel b{font-weight:500;color:var(--kalk)}

/* Ohne JavaScript zeigt die Uhr feste Zahlen aus dem Quelltext, die
   ab morgen falsch waeren. Sie erscheint deshalb erst, wenn das Skript
   laeuft und sie wirklich rechnen kann. Ohne Skript steht dort das Datum. */
.uhr{display:none}
html.js .uhr{
  display:flex;justify-content:center;align-items:stretch;
  gap:0;margin:0 auto;max-width:1040px;
}
.uhr__feld{
  flex:1 1 0;padding-inline:clamp(4px,2.2vw,30px);
  display:flex;flex-direction:column;align-items:center;
}
.uhr__feld+.uhr__feld{border-left:1px solid var(--haarlinie)}
.uhr__zahl{
  font-family:var(--cinzel);font-weight:600;
  font-size:clamp(38px,16.5vw,148px);line-height:.76;padding-bottom:.07em;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
  display:flex;
}
/* Feste Ziffernstellen: der Countdown springt nie. */
.uhr__ziffer{display:inline-block;width:.48em;text-align:center}
.uhr__mass{
  font-family:var(--inter);font-size:12px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--asche);
  margin-top:5px;
}
.auftakt__tat{margin-top:16px}

/* --- Dreiteilung --------------------------------------------- */
.dreiteilung{
  position:relative;margin-top:48px;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.dreiteilung::before{
  content:'';position:absolute;top:0;left:3.5%;right:3.5%;height:1px;
  background:var(--haarlinie);
}
.saeule{padding:57px clamp(12px,2vw,28px) 40px;text-align:center}
.saeule+.saeule{border-left:1px solid var(--haarlinie)}
.saeule__titel{
  font-family:var(--cinzel);font-weight:600;font-size:15px;
  letter-spacing:.22em;text-transform:uppercase;margin:0 0 14px;
}
.saeule p{margin:0 auto;max-width:246px;font-size:14px;font-weight:400;color:var(--lesetext);line-height:1.8;letter-spacing:0}
.saeule__titel a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:4px;
  transition:border-color .25s var(--ease)}
.saeule__titel a:hover{border-bottom-color:var(--haarlinie-stark)}

/* --- Register, die Tabellenform der Seite --------------------- */
.abschnitt{padding-block:88px;border-top:1px solid var(--haarlinie)}
.abschnitt__schmutztitel{
  font-family:var(--cinzel);font-weight:600;
  font-size:clamp(20px,3vw,30px);letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 8px;
}
.abschnitt__lead{margin:0 0 44px;color:var(--lesetext);font-size:17px;line-height:1.7;max-width:62ch}

.register{width:100%;border-collapse:collapse;text-align:left}
.register caption{
  text-align:left;font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--asche);padding-bottom:14px;
}
.register th{
  font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--asche);padding:0 18px 12px 0;border-bottom:1px solid var(--haarlinie);
}
.register td{
  padding:17px 18px 17px 0;border-bottom:1px solid var(--haarlinie);
  font-size:15px;vertical-align:baseline;
}
.register td:first-child{font-variant-numeric:tabular-nums;color:var(--kalk);white-space:nowrap}
.register .ist-jetzt td{font-weight:600}
.register .ist-jetzt td::after{content:''}
.register__notiz{color:var(--lesetext);font-size:14px}

/* --- Leerzustand, bewusst gestaltet -------------------------- */
.lacuna{
  border-top:1px solid var(--haarlinie);border-bottom:1px solid var(--haarlinie);
  padding:74px clamp(20px,5vw,64px);text-align:center;
}
.lacuna__zeichen{
  font-family:var(--cinzel);font-size:46px;line-height:1;color:var(--asche);
  margin:0 0 26px;letter-spacing:.3em;
}
.lacuna__titel{
  font-family:var(--cinzel);font-weight:600;font-size:19px;
  letter-spacing:.2em;text-transform:uppercase;margin:0 0 14px;
}
.lacuna p{margin:0 auto;max-width:52ch;color:var(--lesetext);font-size:17px;line-height:1.75}

/* --- Prosa ---------------------------------------------------- */
.prosa{max-width:66ch}
.prosa p{margin:0 0 22px;font-size:17px;line-height:1.75;color:var(--prosa)}
.prosa h3{
  font-family:var(--cinzel);font-weight:600;font-size:15px;
  letter-spacing:.2em;text-transform:uppercase;margin:38px 0 12px;
}
.prosa ul{margin:0 0 20px;padding-left:0;list-style:none}
.prosa li{position:relative;padding-left:22px;margin-bottom:11px;color:var(--prosa);font-size:17px;line-height:1.7}
.prosa li::before{content:'';position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--asche)}

/* --- Formular ------------------------------------------------- */
.formular{max-width:620px}
/* Frage, Antwort, Hinweis. In dieser Reihenfolge, und in dieser
   Groessenordnung. Vorher war die Frage kleiner als der Hinweis
   darunter, dadurch las man zuerst das Unwichtige. */
.feld{margin-bottom:40px}
.feld:last-child{margin-bottom:0}
.feld>label,.feld>legend,.feld__label{
  display:block;padding:0;margin:0 0 4px;
  font-family:var(--inter);font-size:16px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--kalk);
}
.feld__hinweis{font-size:13px;line-height:1.55;color:var(--asche);margin:9px 0 0}
/* Das Antwortfeld hebt sich durch die Linie ab, nicht durch einen Kasten.
   Die Linie wird beim Ueberfahren deutlicher und bei Eingabe voll schwarz. */
.feld input[type=text],.feld input[type=file],.feld select,.feld textarea{
  width:100%;background:transparent;color:var(--kalk);
  border:0;border-bottom:1px solid var(--haarlinie-stark);
  padding:12px 0;margin-top:6px;
  font-family:var(--inter);font-size:18px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.feld input[type=text]:hover,.feld select:hover,.feld textarea:hover{
  border-bottom-color:var(--lesetext);
}
.feld textarea{min-height:120px;resize:vertical;line-height:1.6}
.feld select{appearance:none;border-bottom:1px solid var(--haarlinie-stark);cursor:pointer}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:0;border-bottom-color:var(--kalk);
  box-shadow:0 1px 0 0 var(--kalk);   /* die Linie wird zweifach, ohne zu springen */
}
.feld input::placeholder,.feld textarea::placeholder{color:var(--asche);opacity:1}
.feld select option{background:var(--stein);color:var(--kalk)}
.wahl{display:flex;flex-wrap:wrap;gap:6px 30px;margin-top:10px}
.wahl label{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:11px 2px 10px;border-bottom:1px solid var(--haarlinie);
  font-size:16px;letter-spacing:.01em;color:var(--lesetext);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.wahl input{accent-color:var(--kalk);margin:0}
.wahl label:hover{color:var(--kalk)}
.wahl label:has(input:checked){border-bottom-color:var(--kalk);color:var(--kalk);font-weight:500}
.wahl label:has(input:focus-visible){outline:2px solid var(--kalk);outline-offset:3px}
.meldung{margin-top:22px;padding:16px 20px;border-left:1px solid var(--kalk);font-size:14px}
.meldung[data-art="fehler"]{border-left-color:var(--kalk);color:var(--kalk);font-weight:500}
.meldung[data-art="fehler"]::before{content:'Fehler. ';font-weight:600;letter-spacing:.04em}
.meldung[data-art="gut"]{border-left-color:var(--kalk)}
.meldung[hidden]{display:none}

/* --- Fusszeile ------------------------------------------------ */
.fuss{border-top:1px solid var(--haarlinie);padding-block:30px;margin-top:0}
.fuss__zeile{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:center;
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--asche);
}
.fuss__zeile a{text-decoration:none;transition:color .25s var(--ease)}
.fuss__zeile a:hover{color:var(--kalk)}
.fuss__trenner{opacity:.4}
.fuss__klein{
  text-align:center;margin:20px auto 0;max-width:70ch;
  font-size:13px;color:var(--asche);line-height:1.7;letter-spacing:0;text-transform:none;
}

/* --- Bewegung: ein einziger Moment ---------------------------- */
@keyframes einblenden{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.auftakt__titel{animation:einblenden .9s var(--ease) both}
html.js .uhr{animation:einblenden 1s var(--ease) .1s both}
.auftakt__tat{animation:einblenden 1s var(--ease) .2s both}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* --- Schmale Schirme ------------------------------------------ */
@media (max-width:900px){
  .kopf{height:auto;flex-wrap:wrap;padding-block:16px;gap:14px 24px}
  .kopf__wort{font-size:14px;letter-spacing:.22em}
  .kopf__zusatz{font-size:8px;letter-spacing:.22em}
  .kopf__zeichen{width:26px;height:26px}
  .kopf__nav{margin-inline:0;order:3;width:100%;gap:24px;justify-content:flex-start;overflow-x:auto}
  .kopf__knopf{margin-left:auto}
  .dreiteilung{grid-template-columns:1fr}
  .saeule+.saeule{border-left:0;border-top:1px solid var(--haarlinie)}
  .saeule{padding-block:40px}
}
@media (max-width:620px){
  .auftakt{padding-top:54px}
  .auftakt__titel{letter-spacing:.2em;margin-bottom:34px}
  .uhr__feld{padding-inline:3px}
  .uhr__mass{font-size:9px;letter-spacing:.12em}
  .knopf--voll{padding:17px 26px;font-size:12px;letter-spacing:.2em;width:100%;min-width:0}
  .abschnitt{padding-block:60px}
  .register td,.register th{font-size:14px}
  .register td:last-child,.register th:last-child{padding-right:0}
}

/* --- Hilfsklassen. Ersetzen eingebettete Stile, weil die
       Inhaltsrichtlinie in der .htaccess style="" verbietet. ---------- */
.ohne-linie{border-top:0}
.abstand-s{margin-top:14px}
.abstand-m{margin-top:16px}
.abstand-l{margin-top:22px}
.luft-oben{padding-top:60px}
.blank{border:0;margin-inline:0;padding:0}
.erbt{color:inherit}
.weit-weg{position:absolute;left:-9999px}
/* Platzhalter und Hinweiskasten bleiben in Graustufen.
   Ein warmer Ton waere hier Bronze durch die Hintertuer. */
.platzhalter{
  background:transparent;color:var(--kalk);
  padding:1px 0 2px;border-bottom:2px dotted var(--asche);
  font-variant-numeric:tabular-nums;
}
.hinweiskasten{
  border-left:2px solid var(--kalk);padding-left:18px;color:var(--kalk);
}

/* ============================================================
   Scrollverhalten
   Vier Bewegungen, alle aus derselben Haltung: die Seite baut
   sich auf wie eine Inschrift, die Zeile fuer Zeile geschlagen wird.
   ============================================================ */

html{scroll-behavior:smooth}

/* 1 · Die Leselinie ganz oben. Eine Haarlinie, die mitwaechst. */
.leselinie{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:80;
  background:var(--kalk);
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

/* 2 · Die Kopfzeile bleibt stehen und verdichtet sich. */
.kopfhalter{
  position:sticky;top:0;z-index:60;
  background:var(--tiefe);
  transition:box-shadow .4s var(--ease);
}
.kopf{transition:height .35s var(--ease)}
body.gescrollt .kopf{height:58px}
body.gescrollt .kopf__zeichen{width:23px;height:23px}
body.gescrollt .kopf__wort{font-size:13px}
body.gescrollt .kopf__zusatz{font-size:8px}
body.gescrollt .kopfhalter{box-shadow:0 1px 0 0 var(--haarlinie)}

/* 3 · Abschnitte treten ein, statt einfach dazuliegen. */
/* Verborgen wird nur, wenn JavaScript laeuft und es wieder zeigen kann. */
html.js .eintritt{
  opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  will-change:opacity,transform;
}
html.js .eintritt.da{opacity:1;transform:none}
/* Sofort sichtbar, ohne Uebergang: der erste Bildschirm flackert nicht. */
html.js .eintritt.sofort{transition:none}
html.js .abschnitt.sofort::before,html.js .dreiteilung.sofort::before{transition:none;transform:scaleX(1)}
.eintritt.verzug-1{transition-delay:.08s}
.eintritt.verzug-2{transition-delay:.16s}
.eintritt.verzug-3{transition-delay:.24s}

/* 4 · Die Haarlinie wird gezogen, nicht eingeblendet. */
.abschnitt{border-top:0;position:relative}
.abschnitt::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--haarlinie);
}
html.js .abschnitt::before{
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.1s var(--ease);
}
html.js .abschnitt.da::before{transform:scaleX(1)}
.abschnitt.ohne-linie::before{display:none}
html.js .dreiteilung::before{
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform 1.1s var(--ease);
}
html.js .dreiteilung.da::before{transform:scaleX(1)}

/* Wer Bewegung reduziert hat, bekommt die fertige Seite ohne Umstand. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .leselinie{display:none}
  html.js .eintritt{opacity:1;transform:none;transition:none}
  html.js .abschnitt::before,html.js .dreiteilung::before{transform:scaleX(1);transition:none}
  .kopf{transition:none}
  body.gescrollt .kopf{height:75px}
}
@media (max-width:900px){
  body.gescrollt .kopf{height:auto}
}

/* ============================================================
   Dunkle Fassung. Dieselbe Welt, Grund und Schrift getauscht.
   Wird ueber data-farbe="dunkel" am <html> gesetzt, per /?dunkel.
   Alle Kontraste nachgerechnet, alle ueber AA.
   ============================================================ */
:root[data-farbe="dunkel"]{
  --tiefe:#0F1113;
  --stein:#1A1D21;
  --kalk:#E6E1D8;          /* 15,9 : 1 */
  --kalk-hell:#F4F1EB;
  --knopf-hover:#FFFFFF;
  --prosa:#D4CFC5;         /* 12,9 : 1 */
  --lesetext:#BDB8AD;      /* 9,6 : 1 */
  --asche:#8A8578;         /* 5,2 : 1 */
  --rollbalken:#33363a;
  --haarlinie:rgba(230,225,216,.15);
  --haarlinie-stark:rgba(230,225,216,.30);
  --allianz:#5B8DEF;
  --horde:#E06C6C;
}

/* ============================================================
   Bewegung
   Alles folgt einer Vorstellung: die Seite wird in Stein
   geschlagen. Nichts blendet weich ein, alles wird gezogen,
   gewischt oder geschlagen.
   ============================================================ */

/* 1 · Der Ziffernwechsel. Das Herzstueck.
       Die neue Ziffer wird von oben nach unten aufgedeckt,
       wie ein mechanischer Zaehler, der umspringt. */
/* Kein overflow:hidden. Das Kastenmass der Ziffer ist wegen der
   Zeilenhoehe .76 kleiner als die Ziffer selbst, ein Beschnitt wuerde
   ihr die Unterlaenge abschneiden. Die Bewegung macht clip-path allein,
   mit negativen Einzuegen, damit nie etwas abgeschnitten wird. */
.uhr__ziffer{position:relative}
/* backwards statt both: nach der Bewegung faellt die Ziffer in ihren
   normalen Zustand zurueck, ohne clip-path. Mit both blieb der Endwert
   stehen und schnitt die Ziffer an der Kastenkante ab, weil die
   Cinzel-Ziffern breiter sind als ihr Kasten von .48em.
   Auch waehrend der Bewegung sind die seitlichen Werte negativ,
   damit nie etwas beschnitten wird. */
html.js .uhr__ziffer.frisch{animation:ziffer-schlag .42s var(--ease) backwards}
@keyframes ziffer-schlag{
  0%  {opacity:0;transform:translateY(-.22em);clip-path:inset(-40% -30% 140% -30%)}
  55% {opacity:1}
  100%{opacity:1;transform:none;clip-path:inset(-40% -30% -40% -30%)}
}
/* Die Sekunden springen jede Sekunde, die bleiben dezenter. */
html.js #uhr-sek .uhr__ziffer.frisch{animation-duration:.3s}

/* 2 · Inschriften treten aus der Unschaerfe hervor.
       Bis zum 25.09.2026 lief hier ein Meissel von links nach rechts
       durch die Zeile. Ricki fand die Richtung zu unruhig, weil das
       Auge der Bewegung folgen muss. Jetzt schaerft sich die Zeile
       an Ort und Stelle, das Auge bleibt liegen. */
html.js .abschnitt__schmutztitel{
  filter:blur(11px);
  opacity:0;
  transform:scale(1.012);
  transition:filter 1.1s var(--ease) .1s,
             opacity .85s var(--ease) .1s,
             transform 1.1s var(--ease) .1s;
  will-change:filter,opacity,transform;
}
html.js .abschnitt.da .abschnitt__schmutztitel{
  filter:blur(0);
  opacity:1;
  transform:none;
}

/* 3 · Registerzeilen kommen nacheinander, nicht als Block. */
html.js .register tbody tr{
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
html.js .abschnitt.da .register tbody tr{opacity:1;transform:none}
html.js .abschnitt.da .register tbody tr:nth-child(1){transition-delay:.30s}
html.js .abschnitt.da .register tbody tr:nth-child(2){transition-delay:.42s}
html.js .abschnitt.da .register tbody tr:nth-child(3){transition-delay:.54s}
html.js .abschnitt.da .register tbody tr:nth-child(4){transition-delay:.66s}

/* 4 · Knoepfe fuellen sich von links, statt die Farbe zu wechseln. */
.knopf{position:relative;overflow:hidden;isolation:isolate}
/* z-index:-1 statt 0: die Beschriftung ist ein reiner Textknoten und
   laesst sich nicht anheben, also muss die Fuellung darunter. Das
   isolation:isolate oben haelt die negative Ebene im Knopf. */
.knopf::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--kalk);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .42s var(--ease);
}
.knopf:hover::before,.knopf:focus-visible::before{transform:scaleX(1)}
.knopf:hover,.knopf:focus-visible{color:var(--tiefe);border-color:var(--kalk);background:transparent}
.knopf--voll::before{background:var(--knopf-hover)}
.knopf--voll:hover,.knopf--voll:focus-visible{color:var(--tiefe);border-color:var(--knopf-hover)}
.knopf--voll:hover{background:var(--kalk-hell)}

/* 5 · Die Navigation zieht ihre Linie, statt sie einzublenden. */
.kopf__nav a{position:relative;border-bottom:0}
.kopf__nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--kalk);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s var(--ease);
}
.kopf__nav a:hover::after,.kopf__nav a[aria-current="page"]::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  html.js .uhr__ziffer.frisch{animation:none}
  html.js .abschnitt__schmutztitel{filter:none;opacity:1;transform:none;transition:none}
  html.js .register tbody tr{opacity:1;transform:none;transition:none}
  .knopf::before,.kopf__nav a::after{transition:none}
}

/* 6 · Die Wortmarke beim Ueberfahren.
       Der Ring zieht sich neu, der feste Punkt in der Mitte bleibt
       vollkommen still. Genau das bedeutet semper: die Zeit laeuft,
       der Kern bleibt. Gedreht, verzerrt oder gespiegelt wird nichts,
       der Endzustand ist das unveraenderte Zeichen. */
.kopf__zeichen path{stroke-dasharray:100;stroke-dashoffset:0}
html.js .kopf__marke:hover .kopf__zeichen path:nth-of-type(1),
html.js .kopf__marke:focus-visible .kopf__zeichen path:nth-of-type(1){
  animation:ring-ziehen .85s var(--ease);
}
html.js .kopf__marke:hover .kopf__zeichen path:nth-of-type(2),
html.js .kopf__marke:focus-visible .kopf__zeichen path:nth-of-type(2){
  animation:ring-ziehen .85s var(--ease) .12s;
}
@keyframes ring-ziehen{
  from{stroke-dashoffset:100}
  to  {stroke-dashoffset:0}
}
/* Der Zusatz oeffnet sich leicht, die Wortmarke selbst bleibt ruhig. */
.kopf__zusatz{transition:letter-spacing .5s var(--ease),color .35s var(--ease)}
.kopf__marke:hover .kopf__zusatz,.kopf__marke:focus-visible .kopf__zusatz{
  letter-spacing:.34em;color:var(--kalk);
}
.kopf__marke{text-decoration:none;color:var(--kalk)}

@media (prefers-reduced-motion:reduce){
  html.js .kopf__marke:hover .kopf__zeichen path,
  html.js .kopf__marke:focus-visible .kopf__zeichen path{animation:none}
  .kopf__zusatz{transition:none}
}

/* --- Gerade im Discord ----------------------------------------
   Discords eigenes Widget, auf Rickis ausdruecklichen Wunsch als
   iframe eingebettet. Es bringt seinen eigenen Kasten und seine
   eigenen Farben mit, deshalb bekommt es links Text als Gegengewicht
   und wird nicht in die Seitenwelt hineingezwungen. */
.live{
  display:grid;grid-template-columns:1fr 350px;gap:clamp(30px,5vw,72px);
  align-items:start;
}
.live__text p{margin:0 0 18px;font-size:17px;line-height:1.75;color:var(--prosa);max-width:46ch}
.live__widget{
  width:350px;max-width:100%;
  /* Das Widget ist dunkel, die Seite hell. Eine Haarlinie fasst es,
     damit es als bewusst gesetzter Fremdkoerper liest und nicht als Fehler. */
  border:1px solid var(--haarlinie-stark);
}
.live__widget iframe{display:block;width:100%;height:500px;border:0}

@media (max-width:900px){
  .live{grid-template-columns:1fr;gap:34px}
  .live__widget{width:350px;margin-inline:auto}
}

/* --- Formular in Abschnitten ---------------------------------- */
.block{border:0;padding:0;margin:0 0 66px}
.block:last-of-type{margin-bottom:0}
.block__titel{
  display:block;width:100%;padding:0 0 16px;margin:0 0 36px;
  border-bottom:1px solid var(--haarlinie);
  font-family:var(--cinzel);font-weight:600;font-size:14px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--kalk);
}
/* .feld__label wird oben gemeinsam mit label und legend gesetzt,
   damit jede Frage gleich aussieht. */

/* Tage: sieben gleich breite Felder, Zustand durch Gewicht und Linie */
.tage{display:grid;grid-template-columns:repeat(7,1fr);gap:0;max-width:440px;margin-top:12px}
.tage label{
  display:flex;align-items:center;justify-content:center;
  padding:13px 0 11px;cursor:pointer;
  border-bottom:1px solid var(--haarlinie);
  font-size:13px;font-weight:500;letter-spacing:.08em;
  color:var(--asche);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.tage label+label{border-left:1px solid var(--haarlinie)}
.tage input{position:absolute;opacity:0;width:0;height:0}
.tage label:hover{color:var(--kalk)}
.tage label:has(input:checked){
  color:var(--kalk);font-weight:600;
  border-bottom:2px solid var(--kalk);
}
.tage label:has(input:focus-visible){outline:2px solid var(--kalk);outline-offset:2px}

/* Zeitfenster: von und bis nebeneinander */
.zeit{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:12px}
.zeit label{
  font-size:13px;color:var(--asche);letter-spacing:.04em;margin:0;
  text-transform:none;font-weight:400;
}
.zeit select{
  width:auto;min-width:104px;
  font-family:var(--inter);font-size:19px;font-variant-numeric:tabular-nums;
  background:transparent;color:var(--kalk);
  border:0;border-bottom:1px solid var(--haarlinie-stark);
  padding:8px 0;cursor:pointer;
}
.zeit select:focus{outline:0;border-bottom-color:var(--kalk)}

@media (max-width:620px){
  .tage{max-width:100%}
  .tage label{font-size:12px;padding:12px 0 10px}
  .block{margin-bottom:42px}
}

.auftakt__ersatz{
  font-family:var(--inter);font-size:19px;color:var(--prosa);
  margin:0 0 34px;
}
.auftakt__ersatz b{font-weight:600;color:var(--kalk)}

/* ============================================================
   Bewerbung als Stufen. Ergaenzt am 25.09.2026.
   Ohne JavaScript bleibt alles sichtbar, dann ist es ein
   ganz normales langes Formular. Die Klasse stufen-an setzt
   bewerbung.js, erst danach wird etwas versteckt.
   ============================================================ */

/* Zahlenfeld wie die uebrigen Felder behandeln */
.feld input[type=number]{
  width:100%;max-width:160px;background:transparent;color:var(--kalk);
  font-family:var(--inter);font-size:18px;padding:10px 0;
  border:0;border-bottom:1px solid var(--haarlinie-stark);border-radius:0;
  appearance:textfield;
}
.feld input[type=number]:hover{border-bottom-color:var(--kalk)}
.feld input[type=number]::-webkit-outer-spin-button,
.feld input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}

/* Kleine Kennzeichnung fuer freiwillige Felder */
.feld__frei{
  font-family:var(--inter);font-size:11px;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;color:var(--asche);margin-left:10px;
}

.block__lead{
  font-size:15px;line-height:1.7;color:var(--lesetext);
  margin:0 0 34px;max-width:52ch;
}

/* --- Fortschritt --------------------------------------------- */
.fortschritt{margin:0 0 44px}
.fortschritt[hidden]{display:none}
.fortschritt__balken{
  height:1px;background:var(--haarlinie);position:relative;overflow:hidden;
}
.fortschritt__fuellung{
  display:block;height:100%;width:20%;background:var(--kalk);
  transform-origin:left center;
  transition:width .5s var(--ease);
}
.fortschritt__text{
  font-family:var(--inter);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--asche);margin:12px 0 0;
}

/* --- Stufen --------------------------------------------------- */
.formular.stufen-an .stufe{display:none}
.formular.stufen-an .stufe--aktiv{display:block;animation:stufe-ein .45s var(--ease) both}

@keyframes stufe-ein{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.stufen-nav{display:none;gap:14px;align-items:center;flex-wrap:wrap;margin-top:44px}
.formular.stufen-an .stufen-nav{display:flex}

@media (prefers-reduced-motion:reduce){
  .formular.stufen-an .stufe--aktiv{animation:none}
  .fortschritt__fuellung{transition:none}
}

/* Breite des Fortschritts ueber Datenattribut statt Inline-Stil,
   damit die Inhaltsrichtlinie ohne unsafe-inline auskommt. */
.fortschritt__fuellung[data-schritt="1"]{width:20%}
.fortschritt__fuellung[data-schritt="2"]{width:40%}
.fortschritt__fuellung[data-schritt="3"]{width:60%}
.fortschritt__fuellung[data-schritt="4"]{width:80%}
.fortschritt__fuellung[data-schritt="5"]{width:100%}

/* ============================================================
   Kontrast im Formular. Nachgebessert am 25.09.2026.
   Ricki konnte Frage und Antwortfeld nicht auseinanderhalten.

   Die Loesung bleibt innerhalb der Marke: Betonung entsteht durch
   gefuellte Flaeche, nicht durch Farbe und nicht durch Rahmen.
   Das Antwortfeld bekommt Pergament als Grund, die Frage bleibt
   auf Weiss stehen. Damit ist ohne Kasten klar, wo man tippt.
   ============================================================ */

.feld{margin-bottom:52px}

/* Die Frage tritt vor: schwerer, mehr Luft darueber, eng an ihrem Feld */
.feld>label,.feld>legend,.feld__label{
  font-size:17px;font-weight:600;margin:0 0 10px;line-height:1.45;
}

/* Das Antwortfeld ist eine gefuellte Flaeche */
.feld input[type=text],
.feld input[type=number],
.feld select,
.feld textarea{
  background:var(--stein);
  border-bottom:2px solid var(--haarlinie-stark);
  padding:15px 16px;
  margin-top:0;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.feld input[type=number]{max-width:200px}

.feld input[type=text]:hover,
.feld input[type=number]:hover,
.feld select:hover,
.feld textarea:hover{
  background:#F1EEE9;border-bottom-color:var(--lesetext);
}

.feld input[type=text]:focus,
.feld input[type=number]:focus,
.feld select:focus,
.feld textarea:focus{
  background:var(--tiefe);
  border-bottom-color:var(--kalk);
  box-shadow:0 2px 0 0 var(--kalk);
}

/* Auswahlfelder als Flaeche mit sichtbarem Pfeil */
.feld select{
  padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--kalk) 50%),
                   linear-gradient(135deg,var(--kalk) 50%,transparent 50%);
  background-position:calc(100% - 22px) calc(50% + 2px),calc(100% - 16px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
.feld select:hover,.feld select:focus{
  background-image:linear-gradient(45deg,transparent 50%,var(--kalk) 50%),
                   linear-gradient(135deg,var(--kalk) 50%,transparent 50%);
  background-position:calc(100% - 22px) calc(50% + 2px),calc(100% - 16px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
.feld select:hover{background-color:#F1EEE9}
.feld select:focus{background-color:var(--tiefe)}

.feld__hinweis{margin:10px 0 0}

/* Ankreuzfelder: ungewaehlt Pergament, gewaehlt die gefuellte Flaeche */
.wahl{gap:10px 10px;margin-top:0}
.wahl label{
  background:var(--stein);
  border:0;border-bottom:2px solid transparent;
  padding:13px 18px;color:var(--lesetext);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.wahl label:hover{background:#F1EEE9;color:var(--kalk)}
.wahl label:has(input:checked){
  background:var(--kalk-hell);color:var(--tiefe);font-weight:500;border-bottom-color:transparent;
}
.wahl label:has(input:checked) input{accent-color:var(--tiefe)}

/* Die Einwilligung ist ein Satz, kein Knopf. Sie bleibt schlicht. */
.wahl label:has(input[name="einwilligung"]){
  background:transparent;padding:0;align-items:flex-start;
  font-size:15px;line-height:1.6;color:var(--lesetext);
}
.wahl label:has(input[name="einwilligung"]):hover{background:transparent}
.wahl label:has(input[name="einwilligung"]:checked){background:transparent;color:var(--kalk)}
.wahl label:has(input[name="einwilligung"]) input{margin-top:4px;accent-color:var(--kalk)}

/* Tagesfelder wie die uebrigen Auswahlflaechen */
.tage label{background:var(--stein)}
.tage label:has(input:checked){background:var(--kalk-hell);color:var(--tiefe)}

/* --- Der Funnel soll als Funnel erkennbar sein ---------------- */
.fortschritt{margin:0 0 48px}
.fortschritt__balken{height:3px;background:rgba(15,17,19,.10)}
.fortschritt__text{
  font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--kalk);margin:14px 0 0;
}

/* ============================================================
   Der Funnel als eigene Flaeche. Ergaenzt am 25.09.2026.

   Hinter dem Formular liegt ein sehr weicher Grauverlauf, das
   Formular selbst steht auf milchigem Weiss und verwischt, was
   darunter liegt. Dadurch hebt sich der Bereich ab, ohne dass
   ein Kasten oder ein Schatten noetig waere.
   ============================================================ */

.abschnitt:has(> .formular){position:relative;isolation:isolate}
.abschnitt:has(> .formular)::before{
  content:'';position:absolute;z-index:-1;
  inset:-40px calc(var(--rand) * -1) -80px;
  background:
    radial-gradient(110% 62% at 14% 2%, rgba(15,17,19,.115) 0%, rgba(15,17,19,0) 60%),
    radial-gradient(85% 55% at 94% 34%, rgba(15,17,19,.085) 0%, rgba(15,17,19,0) 56%),
    radial-gradient(70% 45% at 50% 100%, rgba(15,17,19,.06) 0%, rgba(15,17,19,0) 60%),
    linear-gradient(180deg, rgba(15,17,19,.045) 0%, rgba(15,17,19,0) 42%);
  pointer-events:none;
}

.formular{
  max-width:680px;
  padding:clamp(24px,4vw,44px);
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(18px) saturate(115%);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  border:1px solid rgba(15,17,19,.07);
}

/* Auf der milchigen Flaeche brauchen die Antwortfelder etwas
   mehr Zeichnung, sonst verschwinden sie im Grund. */
/* background-color, nicht die Kurzform background. Die Kurzform
   wuerde das Pfeil-Bild der Auswahlfelder mitloeschen. */
.formular .feld input[type=text],
.formular .feld input[type=number],
.formular .feld select,
.formular .feld textarea{
  background-color:rgba(15,17,19,.045);
  border-bottom-color:rgba(15,17,19,.28);
}
.formular .feld input[type=text]:hover,
.formular .feld input[type=number]:hover,
.formular .feld select:hover,
.formular .feld textarea:hover{background-color:rgba(15,17,19,.075)}
.formular .feld input[type=text]:focus,
.formular .feld input[type=number]:focus,
.formular .feld select:focus,
.formular .feld textarea:focus{background-color:#fff}
.formular .feld select:hover{background-color:rgba(15,17,19,.075)}
.formular .feld select:focus{background-color:#fff}

.formular .wahl label{background:rgba(15,17,19,.045)}
.formular .wahl label:hover{background:rgba(15,17,19,.085)}
.formular .wahl label:has(input:checked){background:var(--kalk-hell)}
.formular .tage label{background:rgba(15,17,19,.045)}
.formular .tage label:has(input:checked){background:var(--kalk-hell)}
.formular .wahl label:has(input[name="einwilligung"]),
.formular .wahl label:has(input[name="einwilligung"]):hover,
.formular .wahl label:has(input[name="einwilligung"]:checked){background:transparent}

@media (max-width:640px){
  .abschnitt:has(> .formular)::before{inset:-24px calc(var(--rand) * -1) -60px}
}

/* Der Bewerbungsblock steht mittig auf der Seite. Ueberschrift,
   Einleitung und Formular teilen sich dieselbe Spalte, damit die
   linke Kante durchgeht. Der Text bleibt linksbuendig, zentrierte
   Fliesstexte lesen sich schlechter. */
.abschnitt:has(> .formular) > .abschnitt__schmutztitel,
.abschnitt:has(> .formular) > .abschnitt__lead{
  max-width:680px;margin-left:auto;margin-right:auto;
}
.formular{margin-left:auto;margin-right:auto}

/* --- Abschluss nach dem Absenden ------------------------------
   Nach fuenf Schritten braucht es einen Schlusspunkt, nicht nur
   eine Zeile unter einem leeren Formular. Die Flaeche uebernimmt
   den Platz des Formulars. */
.danke{
  max-width:680px;margin:0 auto;
  padding:clamp(28px,4vw,52px);
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(18px) saturate(115%);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  border:1px solid rgba(15,17,19,.07);
  animation:stufe-ein .5s var(--ease) both;
}
.danke[hidden]{display:none}
.danke__marke{margin:0 0 22px;color:var(--kalk);line-height:0}
.danke__titel{
  font-family:var(--cinzel);font-size:clamp(26px,4vw,36px);font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px;outline:0;
}
.danke__lead{font-size:18px;line-height:1.6;color:var(--prosa);margin:0 0 36px}
.danke__schritte{
  list-style:none;counter-reset:danke;margin:0 0 32px;padding:0;
}
.danke__schritte li{
  counter-increment:danke;position:relative;
  padding:18px 0 18px 46px;border-top:1px solid var(--haarlinie);
  font-size:15px;line-height:1.65;color:var(--lesetext);
}
.danke__schritte li:last-child{border-bottom:1px solid var(--haarlinie)}
.danke__schritte li::before{
  content:counter(danke);position:absolute;left:0;top:18px;
  font-family:var(--cinzel);font-size:15px;color:var(--kalk);
}
.danke__schritte strong{color:var(--kalk);font-weight:600}
.danke__hinweis{font-size:14px;line-height:1.65;color:var(--asche);margin:0 0 32px}

@media (prefers-reduced-motion:reduce){.danke{animation:none}}

/* ============================================================
   Zeilenumbrueche. Ergaenzt am 25.09.2026.

   Statt Zeilen von Hand zu brechen, was bei jeder Bildschirm-
   breite anders faellt, uebernimmt das der Browser:

   balance  verteilt Ueberschriften gleichmaessig auf die Zeilen,
            statt drei Worte oben und eines unten zu lassen.
   pretty   verhindert einzelne Schusterjungen am Absatzende.
   hyphens  trennt lange deutsche Woerter, die sonst die Zeile
            sprengen. Greift nur, weil im html-Tag lang="de" steht.
   ============================================================ */

h1,h2,h3,h4,
.abschnitt__schmutztitel,
.block__titel,
.danke__titel,
.kopf__wortmarke{
  text-wrap:balance;
}

p,li,figcaption,
.abschnitt__lead,
.block__lead,
.feld__hinweis,
.danke__lead,
.fuss__klein{
  text-wrap:pretty;
  hyphens:auto;
  -webkit-hyphens:auto;
  overflow-wrap:break-word;
}

/* In Formularbeschriftungen und Knoepfen wird nicht getrennt,
   dort sind die Texte kurz und eine Trennung wirkt wie ein Fehler. */
.feld>label,.feld>legend,.feld__label,.wahl label,.knopf,.kopf__nav a{
  hyphens:none;-webkit-hyphens:none;
}

/* Lange Absaetze duerfen nicht zu breit werden, sonst verliert
   das Auge beim Zeilenwechsel den Anschluss. 70 Zeichen sind die
   uebliche Obergrenze fuer angenehmes Lesen. */
.prosa p,.prosa li{max-width:68ch}

/* --- Reddit neben dem Discord-Knopf --------------------------
   Reddit steht als schlichter Verweis daneben, nicht als zweiter
   Knopf. Zwei gleich starke Knoepfe wuerden sich gegenseitig die
   Aufmerksamkeit nehmen, und der Discord bleibt der Hauptweg. */
.kopf__wege{display:flex;align-items:center;gap:22px;flex:0 0 auto}
.kopf__reddit{
  font-family:var(--inter);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--asche);text-decoration:none;white-space:nowrap;
  transition:color .25s var(--ease);
}
.kopf__reddit:hover{color:var(--kalk)}

@media (max-width:760px){
  .kopf__wege{gap:14px}
  .kopf__reddit{font-size:11px;letter-spacing:.1em}
}
@media (max-width:360px){
  .kopf__reddit{display:none}   /* nur auf sehr schmalen Geraeten weichen */
}

/* Die Ueberschrift steht seit dem 25.09.2026 in der linken Spalte,
   nicht mehr darueber. Dadurch beginnen Text und Widget auf
   derselben Hoehe, statt dass das Widget nach unten abrutscht. */
.live__text .abschnitt__schmutztitel{margin-top:0}

/* Seit dem 25.09.2026 hat das Menue sechs Punkte. Auf schmalen
   Bildschirmen lief es vorher seitlich aus dem Bild, dadurch waren
   Reddit und Bewerbung nicht mehr zu sehen. Waagerechtes Scrollen
   uebersieht fast jeder, deshalb bricht das Menue jetzt um. */
@media (max-width:900px){
  .kopf__nav{
    overflow-x:visible;
    flex-wrap:wrap;
    gap:14px 22px;
  }
}
@media (max-width:420px){
  .kopf__nav{gap:12px 18px}
  .kopf__nav a{font-size:11px;letter-spacing:.12em}
}

/* --- Häufige Fragen, aufklappbar ------------------------------
   Natives details-Element. Braucht kein JavaScript, funktioniert
   mit Tastatur und Screenreader von allein, und Google liest den
   Inhalt auch dann, wenn er zugeklappt ist. */
.fragen{max-width:68ch}
.frage{border-top:1px solid var(--haarlinie)}
.frage:last-of-type{border-bottom:1px solid var(--haarlinie)}

.frage__kopf{
  display:flex;align-items:baseline;gap:18px;
  padding:22px 0;cursor:pointer;list-style:none;
  transition:color .25s var(--ease);
}
.frage__kopf::-webkit-details-marker{display:none}
.frage__kopf:hover{color:var(--kalk)}
.frage__kopf:focus-visible{outline:2px solid var(--kalk);outline-offset:4px}

.frage__titel{
  display:inline;margin:0;flex:1 1 auto;
  font-family:var(--cinzel);font-size:15px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.5;
  color:var(--kalk);
}

/* Das Zeichen rechts: ein Kreuz, das sich beim Aufklappen zum
   Strich dreht. Zwei Haarlinien, kein Bild, keine Schriftart. */
.frage__kopf::after{
  content:'';flex:0 0 auto;position:relative;
  width:13px;height:13px;margin-top:3px;
  background:
    linear-gradient(var(--kalk),var(--kalk)) center/13px 1px no-repeat,
    linear-gradient(var(--kalk),var(--kalk)) center/1px 13px no-repeat;
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.frage[open] .frage__kopf::after{transform:rotate(135deg)}

.frage__text{padding:0 31px 26px 0}
.frage__text p{margin:0}
.frage[open] .frage__text{animation:frage-auf .4s var(--ease) both}

@keyframes frage-auf{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .frage__kopf::after{transition:none}
  .frage[open] .frage__text{animation:none}
}