/* ===========================================================================
   MMC — Machbar Maxout Competition
   Design-Richtung 1a „Hexenkessel" und 1d „Anmeldeflow"

   Aufbau: Mobile First. Die Werte aus dem 1440px-Mockup sind die Obergrenze
   der clamp()-Angaben, die kleinen Werte gelten ab 375px.
   =========================================================================== */

/* --- Grundwerte ---------------------------------------------------------- */

:root {
  --rot:          #e8112d;
  --rot-hell:     #ff2b42;
  --rot-matt:     rgba(232, 17, 45, .1);

  --schwarz:      #0a0a0b;
  --schwarz-kopf: #08080a;
  --schwarz-alt:  #0f0f11;
  --schwarz-feld: #111113;
  --schwarz-chip: #1a1a1d;

  --weiss:        #f2f2f4;
  --grau-hell:    #b8b8c0;
  --grau:         #8b8b93;
  --grau-dunkel:  #6a6a72;
  --grau-tief:    #7c7c86;

  --rahmen:       #232326;
  --rahmen-hell:  #2a2a30;
  --rahmen-aktiv: #4a4a54;

  --anton:  'Anton', Impact, 'Haettenschweiler', sans-serif;
  --chakra: 'Chakra Petch', system-ui, sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --oswald: 'Oswald', system-ui, sans-serif;

  --rand:   clamp(1.25rem, 4vw, 2.75rem);   /* Seitenabstand, 20px → 44px */
  --luft:   clamp(2.75rem, 7vw, 4rem);      /* Abstand zwischen Sektionen */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--schwarz);
  color: var(--weiss);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Muss vor allen display-Regeln stehen und braucht !important: Eine
   Autoren-Regel wie .zeitplan__liste { display: grid } schlägt sonst das
   [hidden] des Browsers, und ausgeblendete Elemente bleiben sichtbar. */
[hidden] { display: none !important; }

img { max-width: 100%; display: block; }

a { color: var(--rot); text-decoration: none; }
a:hover { color: var(--rot-hell); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--rot-hell);
  outline-offset: 2px;
}

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprunglink für Tastaturnutzer */
.sprunglink {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--rot); color: var(--schwarz);
  padding: 1rem 1.5rem;
  font: 700 .8125rem/1 var(--chakra); letter-spacing: .14em;
}
.sprunglink:focus { left: 0; }

/* --- Wiederkehrende Bausteine -------------------------------------------- */

.plakat-titel {
  font-family: var(--anton);
  font-weight: 400;
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
}

.label {
  font: 700 .625rem/1 var(--mono);
  letter-spacing: .18em;
  color: var(--rot);
  text-transform: uppercase;
}

.korn {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url('../img/grain-dark.png');
  background-size: 200px 200px;
  opacity: .35;
  mix-blend-mode: overlay;
}
.korn--papier {
  background-image: url('../img/grain-paper.png');
  opacity: .4;
  mix-blend-mode: multiply;
}

/* Schaltflächen */
.knopf {
  display: inline-block;
  font: 700 clamp(.8125rem, 2.6vw, .9375rem)/1 var(--chakra);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  padding: 1.1875rem 2.25rem;
  border: 1px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s;
}
.knopf--rot {
  background: var(--rot);
  color: var(--schwarz);
}
.knopf--rot:hover { background: var(--rot-hell); color: var(--schwarz); }

.knopf--linie {
  border-color: var(--rahmen-aktiv);
  color: var(--weiss);
}
.knopf--linie:hover { border-color: var(--rot); color: var(--rot); }

.knopf--schwarz {
  background: var(--schwarz);
  color: var(--weiss);
  font-family: var(--anton);
  font-weight: 400;
  font-size: clamp(1.25rem, 4vw, 1.875rem);
  letter-spacing: .05em;
  padding: 1.25rem 2rem 1rem;
}
.knopf--schwarz:hover { background: #1a1a1d; color: var(--weiss); }

.knopf--breit { display: block; width: 100%; }

/* Steht anstelle des Anmeldeknopfs, solange die Anmeldung noch nicht offen ist.
   Bewusst kein Knopf und kein Link: es gibt nichts zu klicken. */
.knopf--wartet {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--schwarz);
  cursor: default;
  margin: 0;
}

.wartet {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: center;
  border: 2px solid var(--rot);
  padding: 1.125rem 1.75rem;
  margin: 0;
}
.wartet__label {
  font: 700 clamp(.625rem, 2.2vw, .6875rem)/1 var(--mono);
  letter-spacing: .22em;
  color: var(--rot);
  text-transform: uppercase;
}
.wartet__zeit {
  font: 400 clamp(1.125rem, 4.5vw, 1.625rem)/1.1 var(--anton);
  color: var(--weiss);
  text-transform: uppercase;
  text-align: center;
}

.kopf__cta--wartet {
  background: transparent;
  border: 1px solid var(--rot);
  color: var(--rot);
  cursor: default;
}

/* Die Schaltflächen im Anmeldeflow stehen im Mockup 1d in Anton, nicht in
   Chakra Petch wie die Schaltflächen im Kopfbereich der Landingpage. */
.karte .knopf {
  font-family: var(--anton);
  font-weight: 400;
  font-size: clamp(1.125rem, 5vw, 1.25rem);
  letter-spacing: .06em;
  padding: 1.0625rem 1.25rem;
}
.karte .knopf--schwarz { font-size: clamp(1rem, 4.5vw, 1.125rem); }

/* Platzhalterfläche für noch fehlende Fotos */
.platzhalter {
  background: repeating-linear-gradient(135deg, #17171a 0 7px, #101012 7px 14px);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  font: 700 .625rem/1.4 var(--mono);
  letter-spacing: .14em;
  color: var(--grau-dunkel);
  text-transform: uppercase;
}

/* --- Kopfzeile ----------------------------------------------------------- */

.oberkante { height: 6px; background: var(--rot); }

/* Navigation */
.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem var(--rand);
  background: var(--schwarz-kopf);
  border-bottom: 1px solid #1d1d22;
}

.kopf__marke {
  display: flex;
  align-items: center;
  gap: .6875rem;
  flex: none;
}
.kopf__marke img { height: 28px; width: auto; }
.kopf__marke span {
  font: 700 .75rem/1 var(--chakra);
  letter-spacing: .24em;
  color: var(--weiss);
  text-transform: uppercase;
}
.kopf__marke-lang { display: none; }

.kopf__nav {
  display: none;
  gap: 1.5rem;
  font: 600 .6875rem/1 var(--chakra);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.kopf__nav a { color: var(--grau-tief); }
.kopf__nav a:hover, .kopf__nav a.ist-aktiv { color: var(--weiss); }

.kopf__rechts {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  flex: none;
}

.kopf__status {
  display: none;
  align-items: center;
  gap: .5625rem;
  font: 600 .6875rem/1 var(--chakra);
  letter-spacing: .16em;
  color: var(--rot);
  text-transform: uppercase;
}
.punkt {
  width: 8px; height: 8px;
  background: var(--rot);
  border-radius: 50%;
  animation: pulsieren 1.4s ease-in-out infinite;
}
@keyframes pulsieren {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .4; transform: scale(.8); }
}

.kopf__cta {
  background: var(--rot);
  color: var(--schwarz);
  font: 700 .75rem/1 var(--chakra);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .8125rem 1.25rem;
  white-space: nowrap;
}
.kopf__cta:hover { background: var(--rot-hell); color: var(--schwarz); }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 7vw, 4rem) var(--rand) 2.5rem;
  background: radial-gradient(120% 90% at 50% -10%, #3a0410 0%, #12040a 42%, #08080a 78%);
}
.hero__linien {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px);
}
.hero__scanner {
  position: absolute; left: 0; right: 0; top: 0; height: 120px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(232,17,45,.16), transparent);
  animation: scannen 7s linear infinite;
}
@keyframes scannen {
  from { transform: translateY(-120px); }
  to   { transform: translateY(100vh); }
}

.hero__inhalt { position: relative; text-align: center; }

.hero__zeile {
  font: 600 clamp(.625rem, 2.4vw, .75rem)/1.5 var(--chakra);
  letter-spacing: .3em;
  color: var(--rot);
  text-transform: uppercase;
  margin: 0 0 1.375rem;
  animation: flackern 5s linear infinite;
}
@keyframes flackern {
  0%, 96%, 100% { opacity: 1; }
  97%           { opacity: .35; }
  98%           { opacity: 1; }
  99%           { opacity: .55; }
}

/* Im Mockup: font:700 132px/.86 'Chakra Petch'. Bewusst nicht Anton — die
   Kopfzeile ist die einzige große Überschrift in Chakra Petch, alle
   Sektionsüberschriften stehen in Anton. */
.hero__titel {
  font-family: var(--chakra);
  font-weight: 700;
  font-size: clamp(2.5rem, 9.5vw, 8.25rem);
  line-height: .86;
  letter-spacing: -.02em;
  color: var(--weiss);
  text-transform: uppercase;
  text-shadow: 0 0 60px rgba(232, 17, 45, .5);
  margin: 0;
}

.hero__unter {
  font: 300 clamp(.875rem, 2.6vw, 1.25rem)/1.5 var(--oswald);
  letter-spacing: .1em;
  color: #9a9aa4;
  text-transform: uppercase;
  margin: 1.25rem 0 0;
}

/* Countdown */
.countdown {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: clamp(2rem, 6vw, 3.25rem);
}
.countdown__feld {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--rahmen-hell);
  padding: clamp(.75rem, 3vw, 1.25rem) .25rem clamp(.625rem, 2.5vw, 1rem);
  text-align: center;
}
.countdown__feld:last-child {
  background: var(--rot);
  border-color: var(--rot);
}
.countdown__zahl {
  font: 700 clamp(1.75rem, 8vw, 4.25rem)/1 var(--chakra);
  color: var(--weiss);
  font-variant-numeric: tabular-nums;
}
.countdown__feld:last-child .countdown__zahl { color: var(--schwarz-kopf); }
.countdown__wort {
  font: 600 clamp(.5rem, 1.8vw, .625rem)/1 var(--chakra);
  letter-spacing: .2em;
  color: var(--grau-tief);
  text-transform: uppercase;
  margin-top: .625rem;
}
.countdown__feld:last-child .countdown__wort { color: var(--schwarz-kopf); }

.hero__knoepfe {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  margin-top: 2.5rem;
}

/* --- Bilderreihe --------------------------------------------------------- */

.bilder {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 0 var(--rand) var(--luft);
}
.bilder__feld { min-width: 0; height: 220px; overflow: hidden; }
.bilder__feld img { width: 100%; height: 100%; object-fit: cover; }

/* --- Gewichtsklassen -----------------------------------------------------
   Übernimmt die rote Plakat-Behandlung, die vorher die vier Übungen hatten:
   Rot als Fläche, Papierkorn darüber, alles Schwarz statt Weiß.            */

.klassen {
  position: relative;
  overflow: hidden;
  background: var(--rot);
  padding: var(--luft) var(--rand);
}
.klassen__kopf {
  position: relative;
  border-bottom: 3px solid var(--schwarz);
  padding-bottom: 1rem;
  margin-bottom: 2.125rem;
}
.klassen__kopf h2 {
  font-size: clamp(2.5rem, 10vw, 5.75rem);
  color: var(--schwarz);
  hyphens: manual;
}
.klassen__kopf p {
  font: 700 clamp(.6875rem, 2.2vw, .75rem)/1.7 var(--mono);
  letter-spacing: .13em;
  color: var(--schwarz);
  text-transform: uppercase;
  margin: 1rem 0 0;
}

.klassen__gruppen {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.klassen__gruppe > h3 {
  font: 700 .6875rem/1 var(--mono);
  letter-spacing: .2em;
  color: var(--schwarz);
  text-transform: uppercase;
  margin: 0 0 1rem;
}

/* --spalten setzt main.js aus der Anzahl der Klassen. Ab 34rem gilt der Wert,
   darunter bleibt es bei drei Spalten — deshalb steht er als Variable hier und
   nicht als fertige Regel im style-Attribut. */
.klassen__liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  list-style: none;
  margin: 0; padding: 0;
}
.klassen__liste li {
  font: 400 clamp(1.375rem, 5.5vw, 2.125rem)/1 var(--anton);
  color: var(--schwarz);
  background: var(--rot);
  border: 2px solid var(--schwarz);
  padding: .8125rem .5rem .625rem;
  text-align: center;
}

/* --- Rekorde ------------------------------------------------------------- */

.rekorde {
  position: relative;
  overflow: hidden;
  background: var(--schwarz-alt);
  border-top: 1px solid var(--rahmen);
  padding: var(--luft) var(--rand);
}
.rekorde__kopf { position: relative; margin-bottom: 1.75rem; }
.rekorde__kopf h2 { font-size: clamp(2.25rem, 9vw, 4.125rem); color: var(--weiss); }
.rekorde__kopf p {
  font: 700 clamp(.6875rem, 2.2vw, .75rem)/1.7 var(--mono);
  letter-spacing: .13em; color: var(--rot); text-transform: uppercase; margin: 1rem 0 0;
}

/* Auswahl je Klasse — erst mit JavaScript sichtbar */
.rekorde__wahl { position: relative; margin-bottom: 2rem; }
.rwahl__gruppe + .rwahl__gruppe { margin-top: 1.125rem; }
.rwahl__label {
  display: block; font: 700 .625rem/1 var(--mono); letter-spacing: .2em;
  color: var(--grau); text-transform: uppercase; margin-bottom: .625rem;
}
.rwahl__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.rchip {
  font: 400 clamp(1.125rem, 4.5vw, 1.5rem)/1 var(--anton);
  color: var(--weiss); background: var(--schwarz-feld);
  border: 2px solid var(--rahmen-hell); padding: .5rem .8125rem .375rem;
  transition: border-color .12s, background-color .12s, color .12s, transform .12s;
}
.rchip:hover { border-color: var(--rot); color: var(--rot); }
.rchip.ist-aktiv {
  background: var(--rot); border-color: var(--rot); color: var(--schwarz);
  transform: rotate(-1.5deg); box-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
}

/* Rekord-Tafel. Ohne JavaScript stehen alle untereinander (lesbarer Rückfall),
   mit JavaScript wird immer nur die gewählte gezeigt. */
.rekorde__tafeln { position: relative; }
.rtafel { position: relative; }
.rtafel + .rtafel { margin-top: 2.25rem; }
.rtafel__kopf {
  display: flex; align-items: baseline; gap: .875rem;
  border-bottom: 3px solid var(--rot); padding-bottom: .625rem; margin-bottom: 1.125rem;
}
.rtafel__klasse {
  font: 400 clamp(2.5rem, 11vw, 4rem)/.85 var(--anton); color: var(--weiss);
  text-transform: uppercase; text-shadow: 3px 3px 0 rgba(232, 17, 45, .55);
}
.rtafel__klasse i { font-style: normal; font-size: .34em; color: var(--grau-dunkel); margin-left: .18em; }
.rtafel__gruppe {
  font: 700 .6875rem/1 var(--mono); letter-spacing: .2em; color: var(--grau); text-transform: uppercase;
}
.rtafel__gitter { display: grid; grid-template-columns: 1fr; gap: 3px; }
.rlift {
  position: relative; background: var(--schwarz-feld); border: 1px solid var(--rahmen);
  padding: 1rem 1.25rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem 1rem;
}
.rlift__name {
  grid-column: 1; font: 700 .6875rem/1 var(--mono); letter-spacing: .14em;
  color: var(--rot); text-transform: uppercase;
}
.rlift__wert {
  grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center;
  font: 400 clamp(1.875rem, 7vw, 2.75rem)/1 var(--anton); color: var(--weiss); font-variant-numeric: tabular-nums;
}
.rlift__wert i { font-style: normal; font-size: .34em; color: var(--grau-dunkel); margin-left: .15em; }
.rlift__held { grid-column: 1; font: 500 .8125rem/1.3 var(--mono); color: var(--grau-hell); }
.rlift__held em { font-style: normal; color: var(--grau-dunkel); margin-left: .5rem; letter-spacing: .05em; }
.rlift--total { background: var(--rot); border-color: var(--rot); }
.rlift--total .rlift__name { color: var(--schwarz); }
.rlift--total .rlift__wert { color: var(--schwarz); }
.rlift--total .rlift__wert i { color: rgba(10, 10, 11, .5); }
.rlift--total .rlift__held { color: var(--schwarz); font-weight: 700; }
.rlift--total .rlift__held em { color: rgba(10, 10, 11, .65); }

@media (min-width: 40rem) {
  .rtafel__gitter { grid-template-columns: 1fr 1fr; }
  .rlift--total { grid-column: 1 / -1; }
}

/* --- Das MMC ------------------------------------------------------------- */

.ueber {
  background: var(--schwarz-alt);
  border-top: 1px solid var(--rahmen);
  padding: var(--luft) var(--rand);
}
.ueber__inhalt { max-width: 52rem; }

.ueber__bild {
  margin: 2rem 0 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  max-height: 32rem;
}
.ueber__bild img { width: 100%; height: 100%; object-fit: cover; }
.ueber h2 {
  font-size: clamp(2.25rem, 9vw, 4.125rem);
  color: var(--weiss);
  margin-bottom: 1.5rem;
}
.ueber p {
  font: 400 clamp(.9375rem, 2.6vw, 1.0625rem)/1.8 var(--mono);
  color: var(--grau-hell);
  margin: 0 0 1.125rem;
}
.ueber .ueber__adresse {
  font: 700 .75rem/1.9 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grau);
  border-left: 3px solid var(--rot);
  padding-left: 1rem;
  margin: 2rem 0 0;
}
.ueber .ueber__adresse a { color: var(--rot); }

/* --- Häufige Fragen ------------------------------------------------------ */

.faq {
  background: var(--schwarz);
  border-top: 1px solid var(--rahmen);
  padding: var(--luft) var(--rand);
}
.faq h2 {
  font-size: clamp(2.25rem, 9vw, 4.125rem);
  color: var(--weiss);
  margin-bottom: 1.5rem;
}
.faq__liste { max-width: 52rem; }
.faq__punkt { border-bottom: 1px solid var(--rahmen); }
.faq__punkt summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 0;
  cursor: pointer;
  list-style: none;
  font: 400 clamp(1.0625rem, 4vw, 1.5rem)/1.2 var(--anton);
  color: var(--weiss);
  text-transform: uppercase;
}
.faq__punkt summary::-webkit-details-marker { display: none; }
.faq__punkt summary::after {
  content: '+';
  flex: none;
  color: var(--rot);
  font-size: 1.4em;
  line-height: .7;
}
.faq__punkt[open] summary::after { content: '−'; }
.faq__punkt summary:hover { color: var(--rot); }
.faq__punkt p {
  font: 400 .875rem/1.8 var(--mono);
  color: var(--grau-hell);
  margin: 0 0 1.25rem;
  max-width: 44rem;
}

/* --- Timetable ----------------------------------------------------------- */

.zeitplan {
  background: var(--schwarz-alt);
  border-top: 1px solid var(--rahmen);
  padding: var(--luft) var(--rand);
}
.zeitplan h2 {
  font-size: clamp(2.25rem, 9vw, 4.125rem);
  color: var(--weiss);
  margin-bottom: .75rem;
}
.zeitplan__unter {
  font: 700 .6875rem/1 var(--mono);
  letter-spacing: .18em;
  color: var(--rot);
  text-transform: uppercase;
  margin: 0 0 1.875rem;
}
.zeitplan__liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 3.5rem;
  list-style: none;
  margin: 0; padding: 0;
}
.zeitplan__punkt {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  padding: .9375rem 0;
  border-bottom: 1px solid var(--rahmen);
}
.zeitplan__zeit {
  font: 700 .8125rem/1 var(--mono);
  letter-spacing: .08em;
  color: var(--rot);
  width: 4.125rem;
  flex: none;
}
.zeitplan__was {
  font: 400 clamp(1.125rem, 4.5vw, 1.625rem)/1.1 var(--anton);
  color: var(--weiss);
  text-transform: uppercase;
}
.zeitplan__punkt--letzt { border-bottom-color: var(--rot); }
.zeitplan__punkt--letzt .zeitplan__was { color: var(--rot); }

/* Steht in config.js zeitplanTBA auf true, ersetzt dieser Block die Liste. */
.tba {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--rot);
  padding: clamp(2rem, 7vw, 3.75rem) 1.25rem clamp(1.5rem, 5vw, 2.25rem);
  text-align: center;
}
.tba__streifen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(135deg,
      rgba(232, 17, 45, .16) 0 14px,
      transparent 14px 28px);
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 78%);
}
.tba__wort {
  position: relative;
  margin: 0;
  font: 400 clamp(4rem, 21vw, 12.5rem)/.82 var(--anton);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--rot);
  text-shadow: 0 0 70px rgba(232, 17, 45, .45);
}
/* Konturschrift, wo der Browser sie kann. Sonst bleibt es gefülltes Rot. */
@supports (-webkit-text-stroke: 2px red) {
  .tba__wort {
    color: transparent;
    -webkit-text-stroke: clamp(2px, .55vw, 4px) var(--rot);
  }
}
.tba__text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  margin: clamp(1rem, 3vw, 1.5rem) 0 0;
  font: 700 clamp(.625rem, 2.2vw, .75rem)/1.5 var(--mono);
  letter-spacing: .2em;
  color: var(--grau);
  text-transform: uppercase;
}
.tba__text .punkt { flex: none; }

/* --- Aufruf zur Anmeldung ------------------------------------------------ */

.aufruf {
  position: relative;
  overflow: hidden;
  background: var(--rot);
  padding: var(--luft) var(--rand);
}
.aufruf__inhalt { position: relative; }
.aufruf__zeile {
  font: 700 clamp(.625rem, 2.4vw, .75rem)/1.5 var(--mono);
  letter-spacing: .2em;
  color: var(--schwarz);
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.aufruf h2 {
  font-size: clamp(2.75rem, 11.5vw, 6.5rem);
  color: var(--schwarz);
  margin-bottom: 2rem;
}
.aufruf__hinweis {
  font: 700 .6875rem/1.6 var(--mono);
  letter-spacing: .13em;
  color: var(--schwarz);
  text-transform: uppercase;
  margin: .75rem 0 0;
}

/* --- Partner und Fuß ----------------------------------------------------- */

.fuss {
  background: var(--schwarz);
  border-top: 1px solid var(--rahmen);
  padding: 3rem var(--rand);
}
.fuss__label {
  font: 700 .6875rem/1 var(--mono);
  letter-spacing: .2em;
  color: var(--grau);
  text-transform: uppercase;
  margin: 0 0 1.375rem;
}
.partner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  list-style: none;
  margin: 0; padding: 0;
}
.partner li {
  height: 76px;
  background: repeating-linear-gradient(135deg, #17171a 0 7px, #101012 7px 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 .625rem/1.3 var(--mono);
  letter-spacing: .14em;
  color: var(--grau-dunkel);
  text-transform: uppercase;
  text-align: center;
  padding: .5rem;
}
/* Alle Logos werden in dieselbe Box gerechnet. Die Dateien sind freigestellt,
   also ohne durchsichtigen Rand, sonst wirkt eines davon kleiner als die
   anderen. Freistellen geht mit: node tools/png.js trim datei.png datei.png */
.partner li img {
  width: 100%;
  height: 100%;
  max-width: 130px;
  max-height: 46px;
  object-fit: contain;
}

.fuss__unten {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2.375rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rahmen);
}
.fuss__marke { display: flex; align-items: center; gap: .875rem; }
.fuss__marke img { height: 44px; width: auto; opacity: .85; }
.fuss__marke p {
  font: 700 .625rem/1.6 var(--mono);
  letter-spacing: .14em;
  color: var(--grau-dunkel);
  text-transform: uppercase;
  margin: 0;
}
.fuss__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  font: 700 .625rem/1.6 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fuss__links a { color: var(--grau-dunkel); }
.fuss__links a:hover { color: var(--rot); }

/* ===========================================================================
   Anmeldeflow (anmeldung.html)
   =========================================================================== */

.flow {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(1rem, 4vw, 3rem) var(--rand) 4rem;
  background: radial-gradient(120% 80% at 50% -20%, #26030b 0%, #0f0408 45%, var(--schwarz) 80%);
}

.karte {
  width: 100%;
  max-width: 30rem;
  background: var(--schwarz);
  border: 1px solid var(--rahmen);
}

.karte__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--rahmen);
}

/* Karte, die vor dem Anmeldestart an der Stelle des Formulars steht */
.wartet__gross {
  font: 400 clamp(1.5rem, 6.5vw, 2.25rem)/1.05 var(--anton);
  color: var(--rot);
  text-transform: uppercase;
  border-left: 4px solid var(--rot);
  padding-left: 1rem;
  margin: 0 0 1.375rem;
}
.karte--wartet .karte__unter { margin-bottom: 1.125rem; }
.karte__kopf img { height: 22px; width: auto; }
.karte__schritt {
  font: 700 .5625rem/1 var(--mono);
  letter-spacing: .18em;
  color: var(--grau);
  text-transform: uppercase;
}

.fortschritt {
  display: flex;
  gap: 3px;
  padding: 0 1.25rem;
  margin-top: 1rem;
}
.fortschritt__teil {
  flex: 1;
  height: 4px;
  background: var(--rahmen);
  transition: background-color .2s;
}
.fortschritt__teil.ist-voll { background: var(--rot); }

.karte__koerper { padding: 1.5rem 1.25rem 1.75rem; }

.karte__titel {
  font: 400 clamp(1.875rem, 8vw, 2.5rem)/.95 var(--anton);
  color: var(--weiss);
  text-transform: uppercase;
  margin: 0 0 .5rem;
}
/* Beim Schrittwechsel bekommt die Überschrift programmatisch den Fokus (für
   Screenreader). Sie ist nie per Tab erreichbar, deshalb braucht sie keinen
   sichtbaren Fokusrahmen — der sah aus wie eine Vormarkierung. */
.karte__titel:focus { outline: none; }
.karte__unter {
  font: 500 .6875rem/1.6 var(--mono);
  color: var(--grau);
  margin: 0 0 1.375rem;
}

/* Rollen- und Auswahlkacheln */
.wahl {
  display: block;
  width: 100%;
  text-align: left;
  border: 2px solid var(--rahmen);
  padding: 1.25rem;
  margin-bottom: .625rem;
  transition: border-color .15s, background-color .15s;
}
.wahl:hover { border-color: var(--rahmen-aktiv); }
.wahl__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.wahl__name {
  font: 400 clamp(1.375rem, 6vw, 1.875rem)/1 var(--anton);
  color: var(--weiss);
  text-transform: uppercase;
}
.wahl__haken {
  width: 20px; height: 20px;
  border: 2px solid var(--rahmen-aktiv);
  flex: none;
}
.wahl[aria-pressed="true"] {
  border-color: var(--rot);
  background: rgba(232, 17, 45, .08);
}
.wahl[aria-pressed="true"]:hover { background: rgba(232, 17, 45, .16); }
.wahl[aria-pressed="true"] .wahl__haken { background: var(--rot); border-color: var(--rot); }

/* Feldgruppen */
.gruppe { margin-bottom: 1.5rem; }
.gruppe > .label { display: block; margin-bottom: .75rem; }

.schalter { display: flex; gap: 3px; }
.schalter button {
  flex: 1;
  border: 1px solid var(--rahmen);
  color: var(--grau);
  font: 400 clamp(1rem, 4.5vw, 1.25rem)/1 var(--anton);
  text-transform: uppercase;
  text-align: center;
  padding: .8125rem .25rem .625rem;
  transition: background-color .15s, color .15s, border-color .15s;
}
.schalter button:hover { border-color: var(--rahmen-aktiv); color: var(--weiss); }
.schalter button[aria-pressed="true"] {
  background: var(--rot);
  border-color: var(--rot);
  color: var(--schwarz);
}

/* Die Bereichsauswahl trägt längere Beschriftungen als die Klassenkacheln
   und braucht deshalb mehr Luft als deren 3px aus dem Mockup. */
[data-bereich-auswahl] { gap: .5rem; }
[data-bereich-auswahl] button { padding: 1rem .75rem; }

.raster3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }

.merker {
  background: var(--rot-matt);
  border-left: 3px solid var(--rot);
  padding: .8125rem .875rem;
  font: 500 .625rem/1.6 var(--mono);
  color: var(--grau-hell);
  margin-bottom: 1.5rem;
}

.chips { display: flex; flex-wrap: wrap; gap: 3px; }
.chips span {
  background: var(--schwarz-chip);
  color: var(--weiss);
  font: 500 .625rem/1 var(--mono);
  letter-spacing: .1em;
  padding: .625rem .75rem;
  text-transform: uppercase;
}

/* Eingabefelder */
.feld { margin-bottom: .875rem; }
.feld label,
.feld .feld__name {
  display: block;
  font: 700 .5625rem/1 var(--mono);
  letter-spacing: .18em;
  color: var(--grau);
  text-transform: uppercase;
  margin-bottom: .4375rem;
}
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  border: 1px solid var(--rahmen);
  background: var(--schwarz-feld);
  color: var(--weiss);
  font: 500 .875rem/1.3 var(--mono);
  padding: .8125rem;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s;
}
.feld select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238b8b93' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8125rem center;
  background-size: 12px 8px;
  padding-right: 2.25rem;
}
.feld input::placeholder, .feld textarea::placeholder { color: var(--grau-dunkel); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--rot);
  outline: none;
}
.feld--paar { display: flex; gap: .625rem; }
.feld--paar > .feld { flex: 1; min-width: 0; }

.feld textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.6;
}

.feldhinweis {
  font: 500 .625rem/1.6 var(--mono);
  color: var(--grau-dunkel);
  margin: .4375rem 0 0;
}

/* Datei-Auswahl. Das echte input bleibt bedienbar, liegt aber unsichtbar
   über dem Label, damit die Optik zum Rest passt. */
.upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 1px solid var(--rahmen);
  background: var(--schwarz-feld);
  padding: .5rem .5rem .5rem .5rem;
  cursor: pointer;
  transition: border-color .15s;
}
.upload:hover { border-color: var(--rahmen-aktiv); }
.upload:focus-within { border-color: var(--rot); }
.upload__knopf {
  flex: none;
  background: var(--rahmen);
  color: var(--weiss);
  font: 700 .625rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .75rem .875rem;
}
.upload:hover .upload__knopf { background: var(--rot); color: var(--schwarz); }
.upload__name {
  min-width: 0;
  font: 500 .6875rem/1.4 var(--mono);
  color: var(--grau);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload__vorschau {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  margin-top: .625rem;
}
.upload__vorschau img {
  width: 5.5rem;
  height: 7rem;
  object-fit: cover;
  border: 1px solid var(--rahmen);
  flex: none;
}
.upload__weg {
  font: 700 .625rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grau);
  border-bottom: 1px solid var(--rahmen-aktiv);
  padding-bottom: .25rem;
}
.upload__weg:hover { color: var(--rot); border-bottom-color: var(--rot); }

/* Der Bildfehler steht außerhalb von .hat-fehler und wird per JS gesetzt */
.feld > .feld__fehler[data-foto-fehler] { display: none; }

.feld.hat-fehler input,
.feld.hat-fehler select { border-color: var(--rot); }
.feld__fehler {
  display: none;
  font: 500 .625rem/1.5 var(--mono);
  color: var(--rot-hell);
  margin-top: .375rem;
}
.feld.hat-fehler .feld__fehler { display: block; }

/* Erstversuche */
.versuche { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.versuch {
  border: 1px solid var(--rahmen);
  background: var(--schwarz-feld);
  padding: .625rem .25rem;
  text-align: center;
}
.versuch span {
  display: block;
  font: 700 .5rem/1 var(--mono);
  color: var(--grau-dunkel);
  margin-bottom: .375rem;
  text-transform: uppercase;
}
.versuch input {
  width: 100%;
  border: 0;
  background: none;
  color: var(--weiss);
  font: 400 1.25rem/1 var(--anton);
  text-align: center;
  padding: 0;
  -moz-appearance: textfield;
}
.versuch input::-webkit-outer-spin-button,
.versuch input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.versuch input:focus { outline: none; color: var(--rot-hell); }
.versuch:focus-within { border-color: var(--rot); }

/* Ankreuzfeld */
.haken {
  display: flex;
  gap: .625rem;
  align-items: flex-start;
  margin-top: 1rem;
  cursor: pointer;
}
.haken input {
  width: 18px; height: 18px;
  flex: none;
  margin: 1px 0 0;
  accent-color: var(--rot);
}
.haken span {
  font: 500 .625rem/1.6 var(--mono);
  color: var(--grau);
}
.haken a { color: var(--rot); text-decoration: underline; }
.haken.hat-fehler span { color: var(--rot-hell); }
.haken.hat-fehler input { outline: 2px solid var(--rot); outline-offset: 2px; }

/* Übersicht */
.uebersicht {
  border: 1px solid var(--rahmen);
  margin-bottom: 1.125rem;
}
.uebersicht div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .8125rem 1rem;
  border-bottom: 1px solid var(--rahmen);
}
.uebersicht div:last-child { border-bottom: 0; }
.uebersicht dt {
  font: 500 .625rem/1.3 var(--mono);
  letter-spacing: .12em;
  color: var(--grau);
  text-transform: uppercase;
  margin: 0;
}
.uebersicht dd {
  font: 500 .6875rem/1.3 var(--mono);
  color: var(--weiss);
  margin: 0;
  text-align: right;
}

.gebuehr {
  border: 2px solid var(--rahmen);
  padding: 1.125rem;
  margin-bottom: 1.125rem;
}
.gebuehr__label {
  font: 700 .625rem/1 var(--mono);
  letter-spacing: .18em;
  color: var(--weiss);
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.gebuehr__zahl {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .625rem;
}
/* Betrag und Zusatz stehen in derselben Schriftgröße, damit das Eurozeichen
   nicht größer wirkt als der Text daneben. Die Klassen greifen absichtlich
   nicht über b/span: sonst erwischt die span-Regel auch das <span> mit dem
   Betrag, das im <b> steckt. */
.gebuehr__betrag,
.gebuehr__je {
  font: 500 .6875rem/1.4 var(--mono);
  letter-spacing: .1em;
  color: var(--weiss);
  text-transform: uppercase;
}
.gebuehr__betrag { font-weight: 700; }
.gebuehr__leistungen {
  list-style: none;
  display: grid;
  gap: .375rem;
  margin: 0 0 .875rem;
  padding: 0;
}
.gebuehr__leistungen li {
  position: relative;
  padding-left: 1rem;
  font: 500 .6875rem/1.4 var(--mono);
  color: var(--weiss);
}
.gebuehr__leistungen li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: .375rem;
  height: .375rem;
  background: var(--rot);
}
.gebuehr p {
  font: 500 .625rem/1.6 var(--mono);
  color: var(--weiss);
  margin: 0;
}

.klein {
  font: 500 .625rem/1.6 var(--mono);
  color: var(--grau-dunkel);
  text-align: center;
  margin: .875rem 0 0;
}

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font: 700 .625rem/1 var(--mono);
  letter-spacing: .14em;
  color: var(--grau);
  text-transform: uppercase;
  margin-top: 1.25rem;
}
.zurueck:hover { color: var(--weiss); }

.flow__rechtliches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.25rem;
  width: 100%;
  max-width: 30rem;
  margin-top: 1.75rem;
  font: 700 .625rem/1.6 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.flow__rechtliches a { color: var(--grau); }
.flow__rechtliches a:hover { color: var(--rot); }

/* Ladezustand beim Absenden */
.knopf[aria-busy="true"] { opacity: .6; pointer-events: none; }

.sendefehler {
  display: none;
  border: 2px solid var(--rot);
  background: var(--rot-matt);
  padding: .875rem;
  font: 500 .6875rem/1.6 var(--mono);
  color: var(--grau-hell);
  margin-top: 1rem;
}
.sendefehler.ist-sichtbar { display: block; }
.sendefehler a { color: var(--rot-hell); text-decoration: underline; }

/* Honigtopf gegen Spam-Roboter, für Menschen unsichtbar */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

/* --- Bestätigungsseite --------------------------------------------------- */

.karte--fertig {
  position: relative;
  overflow: hidden;
  background: var(--rot);
  border-color: var(--rot);
}
.karte--fertig .karte__kopf { border-bottom-color: rgba(10, 10, 11, .25); }
.karte--fertig .karte__kopf img { filter: brightness(0); }
.karte--fertig .karte__schritt { color: var(--schwarz); }
.karte--fertig .karte__titel { color: var(--schwarz); }
.karte--fertig .karte__unter { color: var(--schwarz); }
/* Hebt den Inhalt über die Korn-Textur. Die Textur selbst muss absolut
   positioniert bleiben, sonst legt sie sich nicht mehr über die Karte. */
.karte--fertig > *:not(.korn) { position: relative; }

.quittung {
  background: var(--schwarz);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.quittung__label {
  font: 700 .5625rem/1 var(--mono);
  letter-spacing: .2em;
  color: var(--rot);
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.quittung__zeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.quittung__nr {
  font: 400 3.875rem/1 var(--anton);
  color: var(--weiss);
}
.quittung__daten {
  font: 500 .6875rem/1.7 var(--mono);
  color: var(--grau);
  margin: .625rem 0 0;
  text-transform: uppercase;
}
.quittung__status {
  width: 6rem;
  flex: none;
  border: 1px solid var(--rot);
  padding: .75rem .625rem;
  text-align: center;
}
.quittung__status span {
  display: block;
  font: 700 .5rem/1 var(--mono);
  letter-spacing: .14em;
  color: var(--rot);
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.quittung__status b {
  font: 400 1.25rem/1 var(--anton);
  color: var(--weiss);
  text-transform: uppercase;
}

.naechstes {
  border: 2px solid var(--schwarz);
  padding: 1rem;
  margin-bottom: .625rem;
}
.naechstes h3 {
  font: 400 1.25rem/1 var(--anton);
  color: var(--schwarz);
  text-transform: uppercase;
  margin: 0 0 .5rem;
}
.naechstes ol {
  list-style: none;
  margin: 0; padding: 0;
  font: 500 .625rem/1.7 var(--mono);
  color: var(--schwarz);
  counter-reset: schritt;
}
.naechstes li::before {
  counter-increment: schritt;
  content: '0' counter(schritt) ' — ';
}

/* ===========================================================================
   Textseiten (Impressum, Datenschutz)
   =========================================================================== */

.text {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--luft) var(--rand) 4rem;
}
.text h1 {
  font: 400 clamp(2.25rem, 9vw, 4rem)/.9 var(--anton);
  color: var(--weiss);
  text-transform: uppercase;
  margin: 0 0 2rem;
}
.text h2 {
  font: 400 clamp(1.375rem, 5vw, 1.875rem)/1.1 var(--anton);
  color: var(--rot);
  text-transform: uppercase;
  margin: 2.5rem 0 .875rem;
}
.text h3 {
  font: 700 .875rem/1.4 var(--mono);
  letter-spacing: .06em;
  color: var(--weiss);
  margin: 1.75rem 0 .5rem;
}
.text p, .text li {
  font: 400 .875rem/1.8 var(--mono);
  color: var(--grau-hell);
}
.text ul { padding-left: 1.25rem; }
.text a { text-decoration: underline; }
.text .platzhalter-text {
  background: var(--rot-matt);
  border-left: 3px solid var(--rot);
  padding: .875rem 1rem;
  color: var(--weiss);
}

/* ===========================================================================
   Riso-Punk-Verstärkung — die neuen Design-Sachen aus Mockup 1a
   Risskanten, Halbtonraster, Kippung, harte Plakat-Schatten, Fehldruck.
   Reines CSS, nur Landingpage. Inhalt und Struktur bleiben unberührt.
   =========================================================================== */

:root {
  /* Ausgefranste Ränder aus dem Mockup: einmal nur unten (Hero, Oberkante),
     einmal oben und unten (die roten Blöcke). */
  --riss-unten: polygon(0 0,100% 0,100% calc(100% - 9px),96.5% 100%,93% calc(100% - 7px),88% calc(100% - 1px),83.5% calc(100% - 10px),79% calc(100% - 3px),74% calc(100% - 9px),69% 100%,64% calc(100% - 5px),59% calc(100% - 11px),54% calc(100% - 2px),49% calc(100% - 8px),44% calc(100% - 1px),39% calc(100% - 10px),34% calc(100% - 4px),29% 100%,24% calc(100% - 7px),19% calc(100% - 2px),14% calc(100% - 10px),9% calc(100% - 5px),4% calc(100% - 1px),0 calc(100% - 8px));
  --riss-block: polygon(0 8px,5% 2px,10% 9px,15% 1px,20% 7px,25% 0,30% 8px,35% 3px,40% 10px,45% 1px,50% 6px,55% 0,60% 9px,65% 4px,70% 10px,75% 2px,80% 7px,85% 0,90% 8px,95% 3px,100% 9px,100% calc(100% - 8px),95% 100%,90% calc(100% - 7px),85% calc(100% - 1px),80% calc(100% - 10px),75% calc(100% - 3px),70% calc(100% - 8px),65% 100%,60% calc(100% - 5px),55% calc(100% - 11px),50% calc(100% - 2px),45% calc(100% - 9px),40% calc(100% - 1px),35% calc(100% - 10px),30% calc(100% - 4px),25% 100%,20% calc(100% - 7px),15% calc(100% - 2px),10% calc(100% - 10px),5% calc(100% - 5px),0 calc(100% - 1px));
  --halbton-rot:     radial-gradient(var(--rot) 1.2px, transparent 1.4px);
  --halbton-schwarz: radial-gradient(var(--schwarz) 1.3px, transparent 1.5px);
}

/* Risskanten */
.oberkante { height: 9px; clip-path: var(--riss-unten); }
.hero { clip-path: var(--riss-unten); }
.klassen, .aufruf { clip-path: var(--riss-block); }

/* Schwere Grunge-Texturen aus dem Design, als Pseudo-Ebenen ohne zusätzliches
   Markup. Auf den roten Flächen sitzt die Tinte (grunge-ink, Multiply, kräftig),
   auf dem Hero das grobe Korn (grunge-heavy, Overlay). Der Inhalt wird weiter
   unten per z-index über die Texturen gehoben, damit die Schrift lesbar bleibt. */
.klassen::before,
.aufruf::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('../img/grunge-ink.png');
  background-size: 300px 300px;
  opacity: .8;
  mix-blend-mode: multiply;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('../img/grunge-heavy.png');
  background-size: 300px 300px;
  opacity: .45;
  mix-blend-mode: overlay;
}

/* Halbtonraster darüber: rot auf dem Hero, schwarz auf den roten Flächen. */
.hero::before,
.klassen::after,
.aufruf::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero::before {
  background-image: var(--halbton-rot);
  background-size: 8px 8px;
  opacity: .14;
  mix-blend-mode: screen;
}
.klassen::after,
.aufruf::after {
  background-image: var(--halbton-schwarz);
  background-size: 10px 10px;
  opacity: .16;
}

/* Der Inhalt liegt über allen Texturebenen. */
.hero__inhalt,
.klassen__kopf,
.klassen__gruppen,
.aufruf__inhalt { z-index: 1; }

/* Die Datumszeile wird zum gekippten roten Stempel wie im Mockup. */
.hero__zeile {
  display: inline-block;
  background: var(--rot);
  color: var(--schwarz-kopf);
  letter-spacing: .2em;
  padding: .5rem 1rem;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .55);
  transform: rotate(-1.4deg);
}

/* Fehldruck-Schatten: rot plus türkis versetzt. Beide Zeilen bleiben weiß —
   so von Robin gewünscht —, der Versatz macht den Riso-Look. */
.hero__titel {
  text-shadow:
    5px 4px 0 rgba(232, 17, 45, .85),
    -4px -3px 0 rgba(40, 180, 190, .26),
    0 0 70px rgba(232, 17, 45, .4);
  transform: rotate(-.7deg);
}

/* Countdown-Kacheln bekommen Tiefe wie im Mockup. */
.countdown__feld { box-shadow: inset 0 0 26px rgba(0, 0, 0, .6); }

/* Hero-Knopf gekippt, harter Plakat-Schatten. */
.hero__knoepfe .knopf--rot {
  transform: rotate(-.9deg);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .7);
}

/* Kopf-CTA leicht schräg mit hartem Schatten. */
.kopf__cta {
  transform: rotate(-1.2deg);
  box-shadow: 3px 3px 0 var(--schwarz-kopf);
}

/* Bilderreihe: jede Kachel anders gekippt, roter Plakat-Schatten. */
.bilder__feld {
  box-shadow: 0 0 0 1px var(--rahmen-hell), 7px 7px 0 rgba(232, 17, 45, .28);
}
.bilder__feld:nth-child(1) { transform: rotate(-1.1deg); }
.bilder__feld:nth-child(2) { transform: rotate(1.3deg); }
.bilder__feld:nth-child(3) { transform: rotate(-.8deg); }

/* Sektionsüberschriften auf Dunkel: gekippt mit rotem Schlagschatten. */
.ueber h2,
.faq h2,
.zeitplan h2,
.rekorde__kopf h2 {
  text-shadow: 3px 3px 0 rgba(232, 17, 45, .55);
  transform: rotate(-.5deg);
}
/* Schwarz auf Rot: heller Schlagschatten statt rot. */
.klassen__kopf h2,
.aufruf h2 { text-shadow: 4px 4px 0 rgba(255, 255, 255, .16); }
.klassen__kopf h2 { transform: rotate(-.6deg); }
.aufruf h2 { transform: rotate(-1.3deg); }

/* Gewichtsklassen-Kacheln gekippt mit hartem Schatten. Farbe und Fläche
   bleiben unverändert (Rot mit schwarzer Kante), nur Kippung und Schatten
   kommen dazu. */
.klassen__liste li { box-shadow: 4px 4px 0 rgba(0, 0, 0, .5); }
.klassen__liste li:nth-child(6n+1) { transform: rotate(-1.3deg); }
.klassen__liste li:nth-child(6n+2) { transform: rotate(.9deg); }
.klassen__liste li:nth-child(6n+3) { transform: rotate(-1.6deg); }
.klassen__liste li:nth-child(6n+4) { transform: rotate(-.6deg); }
.klassen__liste li:nth-child(6n+5) { transform: rotate(1.4deg); }
.klassen__liste li:nth-child(6n)   { transform: rotate(-1.1deg); }

/* Aufruf-Knopf gekippt mit hartem Schatten. */
.aufruf .knopf--schwarz {
  transform: rotate(1.4deg);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, .45);
}

/* Wer Bewegung reduziert, bekommt trotzdem die Kippung — das ist keine
   Animation. Aber die Halbton-Ebenen dürfen ruhig bleiben. */

/* ===========================================================================
   Breakpoints
   =========================================================================== */

@media (min-width: 34rem) {          /* 544px */
  .hero__knoepfe { flex-direction: row; justify-content: center; }
  .hero__knoepfe .knopf { flex: 0 1 auto; }
  .bilder { grid-template-columns: 1fr 1fr; }
  .bilder__feld:first-child { grid-column: 1 / -1; }
  .klassen__liste { grid-template-columns: repeat(var(--spalten, 6), 1fr); }
  .partner { grid-template-columns: repeat(3, 1fr); }
  .versuche { gap: 3px; }
}

@media (min-width: 48rem) {          /* 768px */
  .kopf__marke-lang { display: inline; }
  .kopf__status { display: flex; }
  .klassen__gruppen { grid-template-columns: 1fr 1fr; gap: 2.75rem; }
  .zeitplan__liste { grid-template-columns: 1fr 1fr; }
  /* Text und Bild nebeneinander, sobald Platz da ist */
  .ueber {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }
  .ueber__bild { margin: 0; }
  .bilder { grid-template-columns: 1.4fr 1fr 1fr; }
  .bilder__feld { height: 330px; }
  .bilder__feld:first-child { grid-column: auto; }
  .partner { grid-template-columns: repeat(3, 1fr); }
  .fuss__unten { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .klassen__kopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }
  .klassen__kopf p { margin: 0; }
  .aufruf__inhalt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
  }
  .aufruf h2 { margin-bottom: 0; }
  .aufruf__rechts { text-align: right; flex: none; }
  .aufruf__hinweis { margin-top: .75rem; }
}

@media (min-width: 64rem) {          /* 1024px */
  .kopf__nav { display: flex; }
}

/* --- Bewegung reduzieren -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__scanner,
  .hero__zeile,
  .punkt { animation: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
  }
}

/* --- Druck ---------------------------------------------------------------- */

@media print {
  .kopf, .hero__scanner, .korn, .sprunglink { display: none; }

  /* Browser drucken Hintergrundfarben nicht mit. Ohne diese Umkehr stünde
     weiße Schrift auf weißem Papier — besonders bitter beim Impressum und der
     Datenschutzerklärung, den beiden Seiten, die Leute tatsächlich ausdrucken. */
  body, .text, .text p, .text li, .text h1, .text h2, .text h3,
  .plakat-titel, .klassen__liste li, .zeitplan__was, .faq__punkt summary,
  .ueber p, .klassen__liste li, .klassen__gruppe h3 {
    background: #fff !important;
    color: #000 !important;
  }
  .text a, .faq__punkt summary::after { color: #000 !important; }
  .text .platzhalter-text { border-left: 3px solid #000; }
}