/* Kabine — Landingpage
 *
 * Gestaltung: Spieltagsprogramm. Papierweiß, Druckerschwärze, Signalrot.
 * Riesige verdichtete Versalien wie auf einem Hallenaushang, dazu eine warme
 * Lese-Serife für den Fließtext.
 *
 * Schriften liegen lokal unter fonts/ — bewusst nicht von Google geladen,
 * sonst ginge die IP jedes Besuchers an einen Dritten, und genau das
 * verneint die Datenschutzseite.
 */

@font-face {
  font-family: 'Kabine Display';
  src: url('fonts/big-shoulders-display-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Kabine Display';
  src: url('fonts/big-shoulders-display-900.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Kabine Text';
  src: url('fonts/newsreader.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --papier: #f6f5f3;
  --papier-tief: #ecebe7;
  --tinte: #16151a;
  --tinte-weich: #5c5964;
  --rot: #e1000a;
  --rot-tief: #a8000a;
  --nacht: #0d0c0f;
  --linie: #dedbd5;

  --breite: 1180px;
  --rand: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Kabine Text', Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .versal {
  font-family: 'Kabine Display', 'Arial Narrow', Impact, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.005em;
  margin: 0;
}

a { color: inherit; }

.huelle {
  max-width: var(--breite);
  margin: 0 auto;
  padding-inline: var(--rand);
}

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

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopf .huelle {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 68px;
}
.marke {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-right: auto;
}
.marke .wappen {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2.5px solid var(--rot);
  background: #fff;
  display: grid;
  place-items: center;
  font-family: 'Kabine Display', sans-serif;
  font-weight: 900;
  font-size: 17px;
  color: var(--rot);
  line-height: 1;
}
.marke .wort {
  font-family: 'Kabine Display', sans-serif;
  font-weight: 900;
  font-size: 25px;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.kopf-nav {
  display: none;
  gap: 26px;
  font-size: 14px;
  letter-spacing: .02em;
}
.kopf-nav a { text-decoration: none; color: var(--tinte-weich); transition: color .18s; }
.kopf-nav a:hover { color: var(--rot); }
@media (min-width: 760px) { .kopf-nav { display: flex; } }

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border: 2px solid var(--tinte);
  background: var(--tinte);
  color: var(--papier);
  text-decoration: none;
  font-family: 'Kabine Display', sans-serif;
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: transform .16s cubic-bezier(.2, .8, .3, 1), background .16s, border-color .16s;
}
.knopf:hover { transform: translateY(-2px); background: var(--rot); border-color: var(--rot); }
.knopf.rot { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf.rot:hover { background: var(--tinte); border-color: var(--tinte); }
.knopf.leer { background: transparent; color: var(--tinte); }
.knopf.leer:hover { background: var(--tinte); color: var(--papier); }
.knopf.klein { padding: 9px 16px; font-size: 15px; }

/* ---------- Aufmacher ---------- */

.aufmacher {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 11vw, 116px) clamp(48px, 9vw, 96px);
}
/* Taktiktafel-Raster im Hintergrund */
.aufmacher::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 90% at 78% 8%, #000 0%, transparent 68%);
  opacity: .75;
  pointer-events: none;
}
.aufmacher .huelle { position: relative; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Kabine Display', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 14px;
  color: var(--rot);
  margin-bottom: 22px;
}
.kicker::before {
  content: '';
  width: 34px;
  height: 3px;
  background: var(--rot);
}

h1 {
  font-size: clamp(52px, 12.5vw, 148px);
  max-width: 13ch;
}
h1 .rot { color: var(--rot); }
h1 .zeile { display: block; }
/* Zweite Zeile leicht eingerückt — bricht das starre Raster auf */
h1 .zeile:nth-child(2) { margin-left: clamp(0px, 4vw, 62px); }

.vorspann {
  margin: 30px 0 0;
  max-width: 46ch;
  font-size: clamp(17px, 2.1vw, 21px);
  color: var(--tinte-weich);
}
/* Freiplatz-Zähler — das Werbeversprechen, also bewusst laut. */
.freiplaetze {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  padding: 18px 22px;
  background: var(--tinte);
  color: var(--papier);
  max-width: 520px;
}
.freiplaetze .zahl {
  font-family: 'Kabine Display', sans-serif;
  font-weight: 900;
  font-size: clamp(46px, 9vw, 68px);
  line-height: .85;
  color: #fff;
  background: var(--rot);
  padding: 8px 14px 10px;
  min-width: 1.6em;
  text-align: center;
}
.freiplaetze .text {
  font-size: 14.5px;
  line-height: 1.4;
}
.freiplaetze strong { color: #fff; }

.aufmacher-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.beisatz {
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--tinte-weich);
}

/* Auftritt beim Laden, gestaffelt */
.auftritt { animation: heben .7s cubic-bezier(.2, .8, .3, 1) backwards; }
.auftritt:nth-child(1) { animation-delay: .04s; }
.auftritt:nth-child(2) { animation-delay: .12s; }
.auftritt:nth-child(3) { animation-delay: .2s; }
.auftritt:nth-child(4) { animation-delay: .28s; }
.auftritt:nth-child(5) { animation-delay: .36s; }
@keyframes heben {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Laufband ---------- */

.band {
  background: var(--rot);
  color: #fff;
  padding: 13px 0;
  overflow: hidden;
  border-block: 2px solid var(--tinte);
}
.band-inhalt {
  display: flex;
  gap: 44px;
  white-space: nowrap;
  font-family: 'Kabine Display', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 17px;
  animation: laufen 34s linear infinite;
}
.band-inhalt span { display: inline-flex; align-items: center; gap: 44px; }
.band-inhalt span::after { content: '●'; font-size: 9px; opacity: .65; }
@keyframes laufen {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .band-inhalt { animation: none; }
  .auftritt { animation: none; }
}

/* ---------- Abschnitte ---------- */

.abschnitt { padding-block: clamp(56px, 9vw, 104px); }
.abschnitt.getoent { background: var(--papier-tief); border-block: 1px solid var(--linie); }

.abschnitt-kopf { max-width: 44ch; margin-bottom: clamp(34px, 5vw, 56px); }
.abschnitt-kopf h2 { font-size: clamp(34px, 5.6vw, 62px); }
.abschnitt-kopf p { color: var(--tinte-weich); margin: 16px 0 0; }

/* ---------- Aufstellung (Funktionen) ---------- */

.aufstellung {
  display: grid;
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}
@media (min-width: 700px) { .aufstellung { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .aufstellung { grid-template-columns: repeat(3, 1fr); } }

.posten {
  background: var(--papier);
  padding: 30px 26px 34px;
  position: relative;
  transition: background .2s;
}
.abschnitt.getoent .posten { background: var(--papier-tief); }
.posten:hover, .abschnitt.getoent .posten:hover { background: #fff; }
.posten .nummer {
  font-family: 'Kabine Display', sans-serif;
  font-weight: 900;
  font-size: 46px;
  line-height: 1;
  color: var(--rot);
  opacity: .22;
  transition: opacity .2s;
}
.posten:hover .nummer { opacity: 1; }
.posten h3 { font-size: 27px; margin: 12px 0 9px; }
.posten p { margin: 0; color: var(--tinte-weich); font-size: 15.5px; }

/* ---------- Sportarten ---------- */

.sportarten {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .sportarten { grid-template-columns: 1fr 1fr; } }

.sportkarte {
  border: 2px solid var(--tinte);
  padding: 28px 26px;
  background: var(--papier);
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.sportkarte .zeichen { font-size: 40px; line-height: 1; }
.sportkarte h3 { font-size: 26px; margin-bottom: 8px; }
.sportkarte p { margin: 0; font-size: 15.5px; color: var(--tinte-weich); }
.sportkarte .positionen {
  margin-top: 14px;
  font-family: 'Kabine Display', sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 14px;
  color: var(--tinte);
}

/* ---------- Ablauf ---------- */

.ablauf { display: grid; gap: 26px; counter-reset: schritt; }
@media (min-width: 800px) { .ablauf { grid-template-columns: repeat(3, 1fr); gap: 34px; } }

.schritt { padding-top: 20px; border-top: 3px solid var(--tinte); }
.schritt::before {
  counter-increment: schritt;
  content: counter(schritt, decimal-leading-zero);
  display: block;
  font-family: 'Kabine Display', sans-serif;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--rot);
  margin-bottom: 10px;
}
.schritt h3 { font-size: 25px; margin-bottom: 8px; }
.schritt p { margin: 0; color: var(--tinte-weich); font-size: 15.5px; }

/* ---------- Schlussruf ---------- */

.schluss {
  background: var(--nacht);
  color: var(--papier);
  padding-block: clamp(60px, 9vw, 104px);
  position: relative;
  overflow: hidden;
}
.schluss::after {
  content: '';
  position: absolute;
  right: -8%;
  top: -40%;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rot) 55%, transparent), transparent 62%);
  pointer-events: none;
}
.schluss .huelle { position: relative; }
.schluss h2 { font-size: clamp(38px, 7vw, 82px); max-width: 15ch; }
.schluss p { color: #b6b2bb; max-width: 46ch; margin: 20px 0 30px; }
.schluss .knopf { border-color: var(--papier); background: var(--papier); color: var(--nacht); }
.schluss .knopf:hover { background: var(--rot); border-color: var(--rot); color: #fff; }

/* ---------- Fußzeile ---------- */

.fuss {
  background: var(--nacht);
  color: #8e8a96;
  border-top: 1px solid #26232b;
  padding-block: 40px;
  font-size: 14.5px;
}
.fuss .huelle {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  align-items: center;
}
.fuss a { color: #cfcbd4; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s, color .18s; }
.fuss a:hover { color: #fff; border-color: var(--rot); }
.fuss .rechts { margin-left: auto; display: flex; gap: 24px; flex-wrap: wrap; }

/* ---------- Rechtstexte ---------- */

.rechtstext { padding-block: clamp(44px, 7vw, 84px); }
.rechtstext .huelle { max-width: 760px; }
.rechtstext h1 { font-size: clamp(40px, 8vw, 76px); margin-bottom: 10px; }
.rechtstext h2 { font-size: 27px; margin: 40px 0 12px; }
.rechtstext h3 { font-size: 20px; margin: 26px 0 8px; }
.rechtstext p, .rechtstext li { color: #3b3945; }
.rechtstext ul { padding-left: 22px; }
.rechtstext li { margin-bottom: 7px; }
.rechtstext a { color: var(--rot); }

.entwurf {
  border: 2px solid var(--rot);
  background: color-mix(in srgb, var(--rot) 7%, var(--papier));
  padding: 18px 20px;
  margin: 26px 0 34px;
}
.entwurf strong {
  font-family: 'Kabine Display', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 17px;
  color: var(--rot);
  display: block;
  margin-bottom: 6px;
}
.entwurf p { margin: 0; font-size: 15.5px; }
.luecke {
  background: color-mix(in srgb, var(--rot) 16%, transparent);
  border-bottom: 2px solid var(--rot);
  padding: 0 4px;
  font-weight: 600;
}

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  text-decoration: none;
  color: var(--tinte-weich);
  font-size: 15px;
}
.zurueck:hover { color: var(--rot); }