/*
 * THE TOUCHLINE — Auftritt der Website.
 *
 * ── DAS KONZEPT IN EINEM SATZ ───────────────────────────────────────────────
 * Die Seitenlinie ist das Layout: Eine einzige goldene Linie läuft senkrecht
 * durch die Seite, und die Abschnitte hängen abwechselnd links und rechts daran
 * wie Markierungen an einem Spielfeldrand.
 *
 * ── WOHER DIE FARBEN UND SCHRIFTEN KOMMEN ───────────────────────────────────
 * Beides ist aus dem Spiel übernommen, nicht neu erfunden: `src/app/styles.css`
 * führt dieselben Werte, und Anton + Roboto Condensed sind für dieses Projekt
 * verbindlich. Eine Website, die anders aussieht als das Spiel, das sie
 * bewirbt, wäre eine Fremdwerbung.
 *
 * ── GOLD IST DIE AUSNAHME ───────────────────────────────────────────────────
 * Pro Bildschirmhöhe darf höchstens EIN goldenes Element auffallen: die Linie,
 * ein Kicker oder eine Zahl. Wo Gold überall ist, hebt es nichts mehr hervor.
 */

/*
 * SCHRIFTEN LIEGEN AUF DEM EIGENEN SERVER (schriften/), nicht bei Google.
 * Über Google Fonts ginge die IP-Adresse jedes Besuchers an Google — das
 * wurde in Deutschland bereits abgemahnt (LG München I, 20.01.2022). Die
 * Dateien stammen aus @fontsource (SIL Open Font License, siehe
 * schriften/LIZENZ-*.txt); je Schrift der lateinische Grundsatz plus die
 * Erweiterung für Sonderzeichen.
 */
@font-face {
  font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schriften/anton-latin-400-normal.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: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schriften/anton-latin-ext-400-normal.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: "Roboto Condensed"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("schriften/roboto-condensed-latin-wght-normal.woff2") format("woff2-variations");
  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: "Roboto Condensed"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("schriften/roboto-condensed-latin-ext-wght-normal.woff2") format("woff2-variations");
  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;
}

:root {
  --bg: #0e141b;
  --bg-tief: #0a0f14;
  --flaeche: #182430;
  --linie: #26333f;
  --schrift: #e7eef4;
  --leise: #9fb2c2;
  --gold: #f0b429;

  --anzeige: "Anton", "Roboto Condensed", system-ui, sans-serif;
  --text: "Roboto Condensed", system-ui, -apple-system, sans-serif;

  --spalte: min(1180px, 100% - 2.5rem);
  /*
   * Der Rand links und rechts der Spalte — die Strecke, um die ein Bild aus
   * dem Raster laufen darf.
   *
   * ACHTUNG, HIER STECKT EINE FALLE: `--spalte` enthält `100%`, und Prozent
   * beziehen sich immer auf das ELEMENT, das die Variable liest. In einem
   * schmalen Rasterfeld ergab `(100vw − --spalte) / 2` deshalb 285 statt 50
   * Pixel, und das Titelbild schob die ganze Seite 285 px nach rechts. Deshalb
   * rechnet dieser Wert ausschließlich mit Fensterbreiten.
   */
  --aussen: max(0px, (100vw - min(1180px, 100vw - 2.5rem)) / 2);
  --rand: clamp(4rem, 9vw, 8rem);
  --kopfhoehe: 4.2rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* Sicherung gegen Rundungsreste beim randlosen Bild — die eigentliche
     Ursache steht bei `--aussen`. */
  overflow-x: hidden;
  background: var(--bg);
  color: var(--schrift);
  font-family: var(--text);
  font-weight: 400;
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

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

/* Der Sprunglink für die Tastatur — sichtbar erst, wenn er gebraucht wird. */
.sprung {
  position: absolute; left: -999px; top: 0; z-index: 50;
  background: var(--gold); color: #14100a; padding: .7rem 1.1rem;
  font-weight: 800; text-decoration: none;
}
.sprung:focus { left: 0; }

/* ── Wiederkehrende Bausteine ─────────────────────────────────────────────── */

/* Abstand nach unten großzügig: Anton setzt Umlautpunkte (FÜNF) über die
   Zeilenhöhe hinaus, bei .6rem stießen sie an die Kickerzeile. */
.kicker {
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
}

h1, h2, h3 { font-family: var(--anzeige); font-weight: 400; letter-spacing: .5px; }
/*
 * Handy: Lange deutsche Wörter („DATENSCHUTZERKLÄRUNG", „deterministisch")
 * sind in großer Schrift breiter als ein 320-px-Bildschirm. Dann lieber
 * sauber mit Bindestrich trennen (lang="de") als seitlich hinausragen. Ab
 * 560 px ist Platz genug, dort wird nicht getrennt.
 */
h1, h2, h3, .zahlen dd { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (min-width: 560px) {
  h1, h2, h3, .zahlen dd { hyphens: manual; -webkit-hyphens: manual; }
}

h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.02;
  text-transform: uppercase;
}

.wortmarke {
  font-family: var(--anzeige); font-size: 1.05rem; letter-spacing: .18em;
  text-transform: uppercase;
}

.knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 0; }

.knopf {
  display: inline-block;
  padding: .85rem 1.6rem;
  background: var(--gold); color: #14100a;
  font-family: var(--anzeige); font-size: 1rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--gold); border-radius: 2px;
  transition: filter .15s ease;
}
.knopf:hover { filter: brightness(1.12); }

/* Der zweite Knopf tritt zurück — zwei gleich laute Aufforderungen sind keine. */
.knopf.still {
  background: transparent; color: var(--schrift);
  border-color: var(--linie);
}
.knopf.still:hover { border-color: var(--leise); filter: none; }
.knopf.still[aria-disabled="true"] { color: var(--leise); cursor: default; }

/* ── Kopfzeile ────────────────────────────────────────────────────────────── */

/*
 * MOBILE FIRST: Alle Grundregeln in dieser Datei gelten für das Handy.
 * Größere Bildschirme bekommen ihre Erweiterungen über `@media (min-width)`
 * — nie umgekehrt. Tippflächen mindestens 44 px, Eingabefelder 16 px Schrift
 * (sonst zoomt iOS beim Antippen hinein).
 *
 * Kopfzeile auf dem Handy: Wortmarke + Knopf „Menü", die Links klappen als
 * Liste darunter auf. Ohne Skript (keine Klasse `js` am <html>) stehen die
 * Links einfach umbrochen unter der Wortmarke — erreichbar bleibt alles.
 */
.kopf {
  position: relative; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem;
  width: var(--spalte); margin-inline: auto;
  min-height: var(--kopfhoehe);
}
.kopf nav { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.kopf nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .85rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--leise); text-decoration: none;
  transition: color .15s ease;
}
.kopf nav a:hover { color: var(--schrift); }

.menue-knopf { display: none; }
.js .menue-knopf {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: 0 .9rem;
  font-family: var(--anzeige); font-size: .95rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--schrift); background: transparent;
  border: 1px solid var(--linie); border-radius: 2px; cursor: pointer;
}
/* Drei Striche, die beim Öffnen zum Kreuz werden. */
.menue-knopf i, .menue-knopf i::before, .menue-knopf i::after {
  display: block; width: 16px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease;
}
.menue-knopf i { position: relative; }
.menue-knopf i::before, .menue-knopf i::after { content: ""; position: absolute; left: 0; }
.menue-knopf i::before { top: -5px; }
.menue-knopf i::after { top: 5px; }
.kopf.offen .menue-knopf i { background: transparent; }
.kopf.offen .menue-knopf i::before { transform: translateY(5px) rotate(45deg); }
.kopf.offen .menue-knopf i::after { transform: translateY(-5px) rotate(-45deg); }

.js .kopf nav { display: none; }
.js .kopf.offen nav {
  display: flex; flex-direction: column;
  position: absolute; top: 100%; left: 0; right: 0;
  padding: .4rem 0;
  background: var(--bg-tief); border: 1px solid var(--linie); border-top: 2px solid var(--gold);
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.js .kopf.offen nav a { padding: 0 1.1rem; min-height: 50px; font-size: .95rem; color: var(--schrift); }
.js .kopf.offen nav a + a { border-top: 1px solid var(--linie); }

@media (min-width: 760px) {
  .kopf { flex-wrap: nowrap; }
  .js .menue-knopf { display: none; }
  .kopf nav, .js .kopf nav { display: flex; flex-wrap: nowrap; gap: 1.4rem; }
}

/* ── Titel: randlos über die ganze Breite ─────────────────────────────────── */

/*
 * Der Titel läuft von Kante zu Kante — kein Raster, keine Ränder. Der Film
 * liegt darunter, ein Verlauf darüber, und der Text steht in der linken
 * Hälfte. Damit ist die Startfläche das Bild und nicht ein Kasten neben Text.
 */
/*
 * HANDY (Nutzervorgabe: „Stadion besser sichtbar, Headline weiter nach
 * unten, Video kleiner"): Oben ein eigener, niedriger Filmstreifen, der das
 * ganze Stadion samt Skyline zeigt — im Bild liegt es rechts, etwa bei
 * 47–99 % der Breite (am Standbild bilder/titel.webp abgelesen), daher sitzt
 * der Ausschnitt ganz rechts — gemessen sichtbar bei 320–414 px: ~42–100 %. Überschrift und Text stehen darunter auf dem
 * Seitengrund statt über dem Stadion. Ab 900 px wie gehabt: Film randlos
 * hinter dem Text.
 */
.titel {
  --titel-film-h: calc(var(--kopfhoehe) + clamp(220px, 40svh, 360px));
  position: relative;
  margin: 0 0 var(--rand);
  padding: 0 0 .5rem;
  overflow: hidden;
  /* Die Kopfzeile liegt über dem oberen Rand des Films. */
  margin-top: calc(-1 * var(--kopfhoehe));
}

.titel-film {
  position: relative; display: block;
  width: 100%; height: var(--titel-film-h);
  object-fit: cover; object-position: 100% 55%;
  /* Kein Zeigerziel: Der Film ist Kulisse und soll keine Klicks abfangen. */
  pointer-events: none;
}

/*
 * Der Schleier macht die Schrift lesbar, ohne das Bild zu ersäufen. Handy:
 * von oben nach unten dunkler, weil der Text unter dem Motiv steht. Ab
 * Tablet-Quer: links dunkel, nach rechts durchsichtig, plus ein Abschluss
 * nach unten, damit der Titel in die Seite übergeht statt abzureißen.
 */
.titel-schleier {
  position: absolute; left: 0; right: 0; top: 0; height: var(--titel-film-h);
  /* Oben dunkel genug für Wortmarke und Menü, unten weich in den Seitengrund. */
  background:
    linear-gradient(180deg, rgba(14,20,27,.7) 0%, rgba(14,20,27,0) 30%, rgba(14,20,27,0) 70%, var(--bg) 100%);
  pointer-events: none;
}

.titel-text { position: relative; width: var(--spalte); margin-inline: auto; }

.titel h1 {
  margin: 0;
  font-size: clamp(3.4rem, 9.5vw, 7.4rem);
  line-height: .9;
  text-transform: uppercase;
}
/* Handy: beide Knöpfe gleich breit untereinander — leichter zu treffen. */
.titel .knopf { flex: 1 1 100%; text-align: center; }

@media (min-width: 560px) {
  .titel .knopf { flex: 0 0 auto; }
}
@media (min-width: 900px) {
  .titel {
    display: flex; align-items: flex-end;
    min-height: min(88vh, 780px);
    padding: calc(var(--kopfhoehe) + clamp(3rem, 9vh, 7rem)) 0 clamp(2.5rem, 7vh, 5rem);
  }
  .titel-film { position: absolute; inset: 0; height: 100%; object-position: 50% 50%; }
  .titel h1 { line-height: .84; }
  .titel-schleier {
    inset: 0; height: auto;
    background:
      linear-gradient(90deg, rgba(14,20,27,.94) 0%, rgba(14,20,27,.72) 38%, rgba(14,20,27,.15) 68%, rgba(14,20,27,0) 100%),
      linear-gradient(180deg, rgba(14,20,27,.75) 0%, rgba(14,20,27,0) 28%, rgba(14,20,27,0) 62%, var(--bg) 100%);
  }
}
/* Der Trennstrich gehört zum Wort, soll aber nicht mitschreien. */
.titel h1 .trenn { color: var(--gold); }

.tagline {
  margin: 1.4rem 0 0;
  font-family: var(--anzeige); font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  letter-spacing: .04em; color: var(--schrift);
}
.lead { margin: 1rem 0 0; max-width: 46ch; color: var(--leise); }

/* ── Zahlenband ───────────────────────────────────────────────────────────── */

.zahlen {
  width: var(--spalte); margin: 0 auto var(--rand);
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.zahlen dl {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  margin: 0; background: var(--linie);
}
.zahlen dl > div { background: var(--bg); padding: 1.2rem .9rem; }
.zahlen dt {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--leise);
}
@media (min-width: 900px) {
  .zahlen dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zahlen dl > div { padding: 1.6rem 1.2rem; }
  .zahlen dt { font-size: .72rem; letter-spacing: .18em; }
}
.zahlen dd {
  margin: .35rem 0 0;
  font-family: var(--anzeige); font-size: clamp(1.4rem, 3vw, 2.4rem);
  line-height: 1;
}

/* ── Torszene: randlos, wie die Übertragung im Spiel ──────────────────────── */

/*
 * Die Torszene ist das Herzstück der Seite (Nutzervorgabe) und läuft deshalb
 * von Kante zu Kante wie der Titel. Oben links die Spielstands-Einblendung der
 * Übertragung, unten links der Text auf einem Verlauf.
 */
/*
 * Handy: Das Band ist so hoch wie sein Inhalt. Oben Platz für Spielstand und
 * „TOR!", darunter der Text im normalen Fluss — er kann also nie in die
 * Einblendung laufen, egal wie lang er umbricht. Ab 900 px liegt der Text
 * frei über dem Film, das Band hat dann das 16:9 des Films.
 */
/*
 * HANDY (Nutzervorgabe: „Spielszene besser sichtbar, Text weiter nach unten"):
 * Oben der Film allein und groß, nur Spielstand und „TOR!" liegen darauf;
 * darunter Überschrift und Text auf dem Seitengrund. Der Ausschnitt zielt auf
 * die Torszene — Tor und Spieler liegen im Film bei etwa 40 % Breite und im
 * unteren Drittel (am Standbild bilder/tor.webp abgelesen).
 */
.torband {
  --film-h: clamp(340px, 60svh, 520px);
  position: relative;
  width: 100%;
  margin: 0 0 var(--rand);
  padding: 0 0 .5rem;
  overflow: hidden;
  background: var(--bg);
}
.torband .tor-film {
  position: relative; display: block;
  width: 100%; height: var(--film-h);
  object-fit: cover; object-position: 40% 72%;
}
/* Nur über dem Film: oben leicht dunkel für die Einblendungen, unten weicher
   Übergang in den Seitengrund, auf dem der Text steht. */
.torband::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: var(--film-h);
  background: linear-gradient(180deg, rgba(14,20,27,.5) 0%, rgba(14,20,27,0) 24%, rgba(14,20,27,0) 72%, var(--bg) 100%);
  pointer-events: none;
}
@media (min-width: 900px) {
  .torband {
    padding: 0; background: var(--bg-tief);
    /* 16:9 wie der Film — aber nie so flach, dass der Text in die Einblendung
       oben läuft; dann schneidet `cover` lieber links und rechts etwas ab. */
    height: clamp(600px, 56.25vw, 88vh);
  }
  .torband .tor-film { position: absolute; inset: 0; height: 100%; object-position: 50% 50%; }
  .torband::after {
    inset: 0; height: auto;
    background:
      linear-gradient(180deg, rgba(14,20,27,.55) 0%, rgba(14,20,27,0) 22%, rgba(14,20,27,0) 48%, rgba(14,20,27,.88) 86%, var(--bg) 100%),
      linear-gradient(90deg, rgba(14,20,27,.6) 0%, rgba(14,20,27,0) 55%);
  }
}

.tor-bug {
  position: absolute; z-index: 1;
  top: clamp(1rem, 3vw, 2.2rem); left: var(--aussen);
  /* Handy: bündig mit „TOR!" und dem Text darunter; ab 760 px leicht eingerückt. */
  margin-left: 0; max-width: calc(100% - 2 * var(--aussen));
  display: flex; align-items: stretch;
  font-family: var(--anzeige); font-size: clamp(.7rem, 3.3vw, 1.1rem);
  letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
.tor-bug span { display: flex; align-items: center; padding: .45em .6em; }
@media (min-width: 560px) { .tor-bug span { padding: .45em .8em; } }
.tor-live { background: #d7263d; color: #fff; gap: .45em; }
.tor-live::before {
  content: ""; width: .5em; height: .5em; border-radius: 50%; background: #fff;
  animation: tor-blinkt 1.2s ease-in-out infinite;
}
.tor-min { background: var(--bg-tief); color: var(--gold); }
.tor-team { background: rgba(14,20,27,.88); color: var(--schrift); }
.tor-stand { background: var(--schrift); color: var(--bg-tief); font-size: 1.15em; }

/* Handy: „TOR!" steht unter der Spielstand-Leiste; ab 760 px oben rechts. */
.tor-ruf {
  position: absolute; z-index: 1;
  top: calc(clamp(1rem, 3vw, 2.2rem) + 3.1rem); left: var(--aussen);
  margin: 0;
  padding: .1em .45em;
  font-family: var(--anzeige); font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  background: var(--gold); color: #14100a;
  animation: tor-pocht 1.6s ease-in-out infinite;
}

.torband-text {
  position: relative; z-index: 1;
  width: var(--spalte); margin-inline: auto;
}
.torband-text h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: .92; }
.torband-text p { margin: 0; color: var(--schrift); max-width: 52ch; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.torband-text .knoepfe { margin-top: 1.4rem; }
.tor-ton-knopf { cursor: pointer; background: rgba(14,20,27,.55) !important; }
.tor-ton-knopf[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }

@media (min-width: 760px) {
  .tor-bug { margin-left: 1.25rem; }
  .tor-ruf { top: clamp(1rem, 3vw, 2.2rem); left: auto; right: var(--aussen); margin: 0 1.25rem 0 0; }
}
@media (min-width: 900px) {
  .torband-text { position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 5vw, 4rem); }
}

@keyframes tor-blinkt { 50% { opacity: .25; } }
@keyframes tor-pocht { 50% { transform: scale(1.06); } }

/* ── Wege ins Spiel: Manager-Karriere und Verein gründen ─────────────────── */

.wege { width: var(--spalte); margin: 0 auto var(--rand); }
.wege > h2 { max-width: 22ch; }
.wege-lead { margin: 0; color: var(--leise); max-width: 60ch; }

.wege-karten {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: 2rem;
}
@media (min-width: 900px) {
  .wege-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.4rem; }
}
.weg {
  display: flex; flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 2px;
  overflow: hidden;
}
.weg img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.weg-text { padding: 1.3rem 1.2rem 1.5rem; border-top: 2px solid var(--gold); }
@media (min-width: 560px) { .weg-text { padding: 1.6rem 1.6rem 1.8rem; } }

/* Stadion-Skins: gestapelt, das aktive blendet ein. Die Bilder sind wie im
   Spiel zusammengesetzt (Gelände + Straßen + Skin) und randlos. */
.wechsel { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--flaeche); }
/* Im Abschnitt (nicht in der Karte) bekommt der Rahmen dieselbe Kante wie die Bilder daneben. */
.block-bild .wechsel { border: 1px solid var(--linie); border-radius: 2px; }
.wechsel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.03);
  transition: opacity 1.1s ease, transform 3.5s ease-out;
}
.wechsel img.an { opacity: 1; transform: scale(1); }
.skin-schild {
  position: absolute; z-index: 1; left: .75rem; bottom: .75rem; margin: 0;
  display: flex; align-items: stretch;
  font-family: var(--anzeige); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
}
@media (min-width: 560px) { .skin-schild { left: 1rem; bottom: 1rem; font-size: .9rem; } }
.skin-schild span, .skin-schild b { padding: .35em .7em; font-weight: 400; }
.skin-schild span { background: var(--gold); color: #14100a; }
.skin-schild b { background: rgba(10,15,20,.85); color: var(--schrift); }
/* Drei Punkte für die Ausbaustufe — der aktive ist golden und breiter. */
.stufen-punkte {
  position: absolute; z-index: 1; right: 1rem; bottom: 1.25rem; margin: 0; padding: 0;
  display: flex; gap: .4rem; list-style: none;
}
.stufen-punkte li { width: .55rem; height: .55rem; border-radius: 99px; background: rgba(231,238,244,.55); transition: width .4s ease, background .4s ease; }
.stufen-punkte li.an { width: 1.6rem; background: var(--gold); }
@media (prefers-reduced-motion: reduce) { .wechsel img { transition: none; transform: none; } }
.weg-text h3 {
  margin: 0 0 .8rem;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.05;
  text-transform: uppercase;
}
.weg-text p:not(.kicker) { margin: 0; color: var(--leise); }

/* ── Die Seitenlinie: der eine goldene Faden durch die Seite ──────────────── */

.strecke {
  position: relative;
  width: var(--spalte); margin: 0 auto var(--rand);
}
/* Handy: die Seitenlinie läuft links neben den Abschnitten; ab 900 px in der Mitte. */
.strecke::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold) 8%, var(--gold) 92%, transparent);
  opacity: .5;
}

.block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 1.6rem;
  padding: 2.5rem 0 2.5rem 1.2rem;
}
.block-text p { margin: 0; color: var(--leise); max-width: 44ch; }
/* Die Regel darüber nahm auch der Kickerzeile ihren Abstand — daher stieß
   „VORSTAND" an die Umlautpunkte von „FÜNF". Hier bekommt sie ihn zurück. */
.block-text .kicker, .torband-text .kicker { margin: 0 0 1rem; color: var(--gold); }

.block-bild { margin: 0; }
.block-bild img, .block-bild video {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--linie); border-radius: 2px;
}

/* Ab 900 px zweispaltig; jeder zweite Abschnitt kippt — Bild links, Text rechts. */
@media (min-width: 900px) {
  .strecke::before { left: 50%; }
  .block {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    padding: clamp(2.5rem, 6vw, 5rem) 0;
  }
  .block-text { padding-right: clamp(0rem, 2vw, 2rem); }
  .block.kehrt .block-text { order: 2; padding-right: 0; padding-left: clamp(0rem, 2vw, 2rem); }
  .block.kehrt .block-bild { order: 1; }
}

/* ── Kachelraster ─────────────────────────────────────────────────────────── */

.bereiche { width: var(--spalte); margin: 0 auto var(--rand); }
.bereiche > h2 { max-width: 20ch; }

.kacheln {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  /* min(270px, 100%): auf sehr schmalen Handys (320 px) nie breiter als der Bildschirm. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 1px; background: var(--linie);
  border: 1px solid var(--linie);
}
.kacheln li { background: var(--flaeche); padding: 0 0 1.4rem; }
.kacheln img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.kacheln h3 {
  margin: 1.1rem 1.2rem .4rem;
  font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em;
}
.kacheln p { margin: 0 1.2rem; color: var(--leise); font-size: .95rem; }

/* ── Tester-Anmeldung ─────────────────────────────────────────────────────── */

/* Handy: eine Spalte, schmaler Innenrand. Ab 560 px Felder paarweise, ab
   900 px Einleitung links und Formular rechts. */
.tester {
  width: var(--spalte); margin: 0 auto var(--rand);
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.8rem;
  padding: 1.6rem 1.1rem 1.8rem;
  background: var(--bg-tief);
  border: 1px solid var(--linie); border-top: 3px solid var(--gold);
  border-radius: 2px;
}
.tester-kopf p:not(.kicker) { margin: 0; color: var(--leise); max-width: 42ch; }

.tester-form {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem 1.2rem;
}
.feld { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: 0; border: 0; min-width: 0; }

@media (min-width: 560px) {
  .tester { padding: clamp(2rem, 5vw, 4rem); }
  .tester-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feld.breit { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .tester { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); }
  .tester-kopf { align-self: start; position: sticky; top: 2rem; }
}
.feld > label, .feld > legend {
  padding: 0;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--leise);
}
.feld > legend { margin-bottom: .5rem; }
.feld small { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--leise); opacity: .8; }
.feld label span[aria-hidden], .zustimmung > span > span[aria-hidden] { color: var(--gold); }

.tester-form input[type=text], .tester-form input[type=email], .tester-form select, .tester-form textarea {
  width: 100%; min-height: 48px;
  padding: .7rem .85rem;
  /* 16 px — darunter zoomt Safari auf dem iPhone beim Antippen hinein. */
  font: inherit; font-size: max(16px, 1rem); color: var(--schrift);
  background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 2px;
  transition: border-color .15s ease;
}
.tester-form textarea { resize: vertical; min-height: 5.5rem; }
.tester-form select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--leise) 50%), linear-gradient(135deg, var(--leise) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - .75rem) 55%;
  background-size: .35rem .35rem; background-repeat: no-repeat;
}
.tester-form input:focus, .tester-form select:focus, .tester-form textarea:focus {
  outline: none; border-color: var(--gold);
}
.tester-form .andere { margin-top: .7rem; }

.wahl { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Die ganze Kachel ist die Tippfläche, nicht nur das Kästchen: mind. 44 px hoch. */
.wahl label {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px; padding: .45rem .85rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 2px;
  font-size: .95rem; cursor: pointer;
  transition: border-color .15s ease;
}
.wahl label:hover { border-color: var(--leise); }
.wahl label:has(input:checked) { border-color: var(--gold); }
.wahl label small { opacity: .7; }
.wahl input, .zustimmung input { accent-color: var(--gold); width: 1.2rem; height: 1.2rem; margin: 0; flex: none; }

.zustimmung {
  flex-direction: row; align-items: flex-start; gap: .8rem;
  padding: .8rem .9rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 2px;
  font-size: .9rem; color: var(--leise); cursor: pointer;
}
.zustimmung input { margin-top: .15rem; }
.zustimmung a { color: var(--schrift); }

/* Handy: Absenden über die volle Breite, die Antwort darunter. */
.absenden { flex-direction: column; align-items: stretch; gap: 1rem; margin-top: .4rem; }
.absenden .knopf { cursor: pointer; text-align: center; min-height: 52px; }
@media (min-width: 560px) {
  .absenden { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 1.2rem; }
}
.absenden .knopf:disabled { opacity: .5; cursor: default; }
.tester-antwort { margin: 0; color: var(--gold); font-weight: 700; }
.tester-antwort.fehler { color: #ff7a7a; }

/* Die Falle für Spam-Roboter: aus dem Blick, aber nicht `display:none`
   (manche Roboter überspringen versteckte Felder bewusst). */
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Rechtstexte (impressum.html, datenschutz.html) ──────────────────────── */

a.wortmarke { text-decoration: none; }
.recht {
  width: min(760px, 100% - 2.5rem); margin: clamp(2rem, 6vw, 4rem) auto var(--rand);
}
.recht h1 {
  margin: 0 0 1.2rem;
  font-size: clamp(2rem, 8vw, 3.6rem); line-height: 1; text-transform: uppercase;
}
.recht h2 {
  margin: 2.6rem 0 .8rem;
  font-size: clamp(1.25rem, 2vw, 1.55rem); letter-spacing: .04em;
}
.recht p, .recht li, .recht address { color: var(--leise); }
.recht p { margin: 0 0 1rem; }
.recht strong { color: var(--schrift); font-weight: 700; }
.recht ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.recht li { margin: .25rem 0; }
.recht li::marker { color: var(--gold); }
.recht address {
  margin: 0 0 1rem; padding: 1rem 1.2rem;
  font-style: normal; line-height: 1.7;
  background: var(--flaeche); border-left: 3px solid var(--gold);
}
.recht a { color: var(--schrift); }
.recht code { font-size: .9em; color: var(--schrift); }
.recht-lead { font-size: 1.08rem; }
.recht-stand { margin-top: 2.6rem !important; font-size: .9rem; opacity: .8; }
/* Noch auszufüllende Stellen — absichtlich grell, damit keine übersehen wird. */
mark.ausfuellen { background: #ffe066; color: #14100a; padding: 0 .25em; border-radius: 2px; font-weight: 700; }
.fuss a[aria-current="page"] { color: var(--gold); text-decoration: none; }

/* ── Fuß ──────────────────────────────────────────────────────────────────── */

.fuss {
  width: var(--spalte); margin-inline: auto;
  padding: 2.5rem 0 3.5rem;
  border-top: 1px solid var(--linie);
}
.fuss .klein { margin: .6rem 0 0; font-size: .85rem; color: var(--leise); max-width: 60ch; }
.fuss a { color: var(--leise); }
.fuss a:hover { color: var(--schrift); }

/* ── Bewegung: einmaliges Einblenden, sonst nichts ────────────────────────── */

.kommt { opacity: 0; transform: translateY(14px); }
.kommt.da { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .kommt, .kommt.da { opacity: 1; transform: none; transition: none; }
  /* Kein laufender Film für Besucher, die Bewegung abbestellt haben. Statt
     ihn auszublenden (dann verschwände auch das Bild) wird er angehalten —
     das Standbild bleibt stehen. */
  .titel-film { animation: none; }
  .tor-live::before, .tor-ruf { animation: none; }
}