/* =========================================================================
   Tennisplatzbau Marcel Hochmuth – Designsystem „Baustelle groß“
   Ein Stylesheet, keine Abhängigkeiten. Reihenfolge:
   1 Tokens · 2 Reset · 3 Typografie · 4 Layout · 5 Bausteine · 6 Formular
   7 Bewegung · 8 Tennis-Look
   Haltung: Werkstatt, nicht Agentur. Große Fotos, kondensierte Schlagzeilen,
   Tennisasche-Rot als Fläche, Ballgelb als sparsamer Zweitakzent.
   ========================================================================= */

/* 1 Tokens ---------------------------------------------------------------- */
:root {
  --asche:        #b4442a;   /* Primär: CTA, Vollflächen, Akzentlinien */
  --asche-dunkel: #8a3220;
  --asche-hell:   #fbf1ed;
  --sand:         #ece6dc;   /* warme helle Fläche */
  --linie:        var(--sand);
  --nacht:        #141815;   /* dunkler Grundton: Kopf, Ablauf, Fuß, Foto-Verläufe */
  --platz:        #2f3a32;   /* Zwischenton auf dunklem Grund */
  --platz-hell:   #3c4a3f;
  --text:         #1c1a18;
  --text-leise:   #5a544e;
  --text-hell:    #e8e4dd;   /* Fließtext auf dunklem Grund */
  --text-hell-leise: #b9c1bb;
  --rand:         #d9d2c8;
  --weiss:        #ffffff;
  --ball:         #d7df3c;   /* Ballgelb: nur Dekor und Akzent auf dunklem Grund, nie Text auf Weiß */

  --breite:   1180px;
  --gasse:    clamp(1rem, 4vw, 2rem);
  --radius:   3px;
  --kopf-hoehe: 72px;
  --schatten: 0 1px 2px rgb(20 24 21 / .08), 0 12px 32px rgb(20 24 21 / .12);

  --schrift: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-display: "Barlow Condensed", "Barlow Condensed Fallback", "Barlow Condensed Fallback 2", "Barlow Condensed Fallback 3", sans-serif;
}

/* Schriften: selbst gehostet, Latin-Subset, kein Google-Fonts-Request.
   Die Fallback-Deklarationen gleichen die Metriken der Systemschrift an,
   damit der Schrifttausch keinen Layout-Shift erzeugt. */
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/barlow-condensed-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/assets/fonts/barlow-condensed-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed Fallback"; font-weight: 700;
  src: local("Arial Narrow Bold"), local("ArialNarrow-Bold");
  size-adjust: 83.2%; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%;
}
@font-face {
  font-family: "Barlow Condensed Fallback"; font-weight: 800;
  src: local("Arial Narrow Bold"), local("ArialNarrow-Bold");
  size-adjust: 84.7%; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%;
}
@font-face {
  font-family: "Barlow Condensed Fallback 2"; font-weight: 700 800;
  src: local("Roboto Condensed Bold"), local("RobotoCondensed-Bold");
  size-adjust: 76%; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%;
}
@font-face {
  font-family: "Barlow Condensed Fallback 3"; font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Helvetica-Bold");
  size-adjust: 68.2%; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%;
}
@font-face {
  font-family: "Barlow Condensed Fallback 3"; font-weight: 800;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Helvetica-Bold");
  size-adjust: 69.5%; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, 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: 600; font-display: swap;
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Fallback"; font-weight: 400;
  src: local("Arial"), local("ArialMT"), local("Roboto"), local("Helvetica");
  size-adjust: 105.8%; ascent-override: 96.9%; descent-override: 24.1%; line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback"; font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Helvetica-Bold");
  size-adjust: 101.5%; ascent-override: 96.9%; descent-override: 24.1%; line-gap-override: 0%;
}

/* 2 Reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--asche); text-underline-offset: .18em; }
a:hover { color: var(--asche-dunkel); }
:focus-visible { outline: 3px solid var(--ball); outline-offset: 3px; border-radius: 2px; }
b, strong { font-weight: 600; }

/* 3 Typografie ------------------------------------------------------------ */
h1, h2, h3 {
  font-family: var(--schrift-display); font-weight: 700; text-transform: uppercase;
  line-height: .95; letter-spacing: .01em; margin: 0 0 .5em;
  text-wrap: balance; hyphens: manual; overflow-wrap: anywhere;
}
h1 { font-size: clamp(2.75rem, 1.5rem + 7vw, 7.5rem); font-weight: 800; }
h2 { font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4.5rem); }
h3 { font-size: clamp(1.375rem, 1.2rem + 1vw, 2rem); }
p  { margin: 0 0 1rem; max-width: 68ch; }
.vorspann { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); color: var(--text-leise); }
.augenbraue {
  font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--asche); margin: 0 0 1rem;
}
.leise { color: var(--text-leise); }
.zahl { font-variant-numeric: tabular-nums; }
.hinweis { font-size: .8125rem; color: var(--text-leise); }

/* 4 Layout ---------------------------------------------------------------- */
.huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--gasse); }
.sektion { padding-block: clamp(3rem, 2rem + 5vw, 7rem); }
.sektion--linie { background: var(--sand); }
.sektion--linie a:not(.knopf), .sektion--linie .augenbraue { color: var(--asche-dunkel); }
.sektion--dunkel { background: var(--nacht); color: var(--text-hell); }
.sektion--dunkel h2, .sektion--dunkel h3 { color: var(--weiss); }
.sektion--dunkel .leise, .sektion--dunkel .vorspann, .sektion--dunkel p { color: var(--text-hell-leise); }
.sektion--dunkel .augenbraue { color: var(--ball); }
.sektion--dunkel a:not(.knopf) { color: var(--weiss); }
.sektion--asche { background: var(--asche); color: var(--weiss); }
.sektion--asche h2, .sektion--asche h3 { color: var(--weiss); }
.sektion--asche .augenbraue { color: var(--ball); }
.sektion--asche .vorspann, .sektion--asche p { color: #fdeee9; }
.sektion__kopf { max-width: 62ch; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.raster { display: grid; gap: clamp(.75rem, .5rem + 1vw, 1.25rem); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(1.5rem, 1rem + 3vw, 4rem); }
.zum-inhalt {
  position: absolute; left: -9999px; top: 0; background: var(--asche); color: #fff;
  padding: .75rem 1rem; z-index: 100;
}
.zum-inhalt:focus { left: .5rem; top: .5rem; }

/* 5 Bausteine ------------------------------------------------------------- */

/* 5.1 Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: .75rem 1.5rem;
  font-family: var(--schrift-display); font-size: 1.1875rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1;
  text-decoration: none; border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.knopf--haupt   { background: var(--asche); color: var(--weiss); }
.knopf--haupt:hover { background: var(--asche-dunkel); color: var(--weiss); }
.knopf--rand    { background: transparent; color: inherit; border-color: currentColor; }
.knopf--rand:hover { border-color: var(--asche); color: var(--asche-dunkel); }
.hero .knopf--rand:hover, .sektion--dunkel .knopf--rand:hover, .sektion--asche .knopf--rand:hover, .bildband .knopf--rand:hover {
  background: var(--weiss); color: var(--nacht); border-color: var(--weiss);
}
.knopf--hell    { background: var(--weiss); color: var(--asche-dunkel); }
.knopf--hell:hover { background: var(--ball); color: var(--nacht); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* 5.2 Kopfbereich – dunkel; auf der Startseite transparent über dem Foto */
.kopf { position: relative; z-index: 30; background: var(--nacht); color: var(--weiss); transition: background-color .25s, box-shadow .25s; }
.kopf__inhalt { display: flex; align-items: center; gap: 1rem; min-height: var(--kopf-hoehe); }
.marke { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; margin-right: auto; }
.marke__zeichen {
  width: 40px; height: 40px; border-radius: 2px; background: var(--weiss); flex: none;
  display: grid; place-items: center; color: var(--asche); font-family: var(--schrift-display);
  font-weight: 800; font-size: 1.25rem; letter-spacing: .02em;
}
.marke__name { font-family: var(--schrift-display); font-weight: 700; font-size: 1.375rem; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.marke__zusatz { display: block; font-family: var(--schrift); font-size: .75rem; font-weight: 400; color: var(--text-hell-leise); letter-spacing: .04em; text-transform: none; margin-top: .25rem; }

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav a { color: inherit; text-decoration: none; font-weight: 600; font-size: .9375rem; padding-block: .5rem; }
.nav a:hover { color: var(--ball); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ball); }
.kopf__telefon {
  display: none; font-family: var(--schrift-display); font-weight: 700; font-size: 1.125rem; letter-spacing: .04em;
  text-decoration: none; white-space: nowrap; color: var(--weiss); background: var(--asche);
  padding: .5rem 1.125rem; border-radius: 999px; min-height: 44px; align-items: center;
}
.kopf__telefon:hover { background: var(--asche-dunkel); color: var(--weiss); }
.nav-schalter {
  margin-left: auto; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .5rem .875rem; font: inherit; font-weight: 600; color: inherit;
  background: transparent; border: 1px solid rgb(255 255 255 / .45); border-radius: var(--radius); cursor: pointer;
}
@media (min-width: 62em) {
  .nav { display: block; }
  .kopf__telefon { display: inline-flex; margin-left: 1rem; }
  .nav-schalter { display: none; }
  .kopf { position: sticky; top: 0; }
  .kopf[data-gescrollt="true"] { box-shadow: 0 1px 12px rgb(0 0 0 / .25); }
}
/* Ohne JavaScript bleibt die Navigation im Klapp-Zustand erreichbar */
.nav[data-offen="true"] { display: block; position: absolute; inset: var(--kopf-hoehe) 0 auto; background: var(--nacht);
  border-bottom: 1px solid var(--platz-hell); box-shadow: var(--schatten); padding: .5rem var(--gasse) 1rem; z-index: 40; }
.nav[data-offen="true"] ul { flex-direction: column; align-items: stretch; gap: 0; }
.nav[data-offen="true"] a { display: block; padding: .875rem 0; border-bottom: 1px solid var(--platz-hell); font-size: 1.0625rem; }

/* Transparente Variante über dem Hero-Foto. Nur mit JavaScript, weil das
   Skript beim Scrollen den dunklen Grund wieder einschaltet; ohne Skript
   bleibt der Kopf dunkel und immer lesbar. */
.js .kopf--transparent { background: linear-gradient(to bottom, rgb(20 24 21 / .72), rgb(20 24 21 / 0)); }
.js .kopf--transparent[data-gescrollt="true"] { background: var(--nacht); }
.js .kopf--transparent { position: absolute; inset: 0 0 auto; }
@media (min-width: 62em) {
  .js .kopf--transparent { position: sticky; top: 0; margin-bottom: calc(-1 * var(--kopf-hoehe)); }
}

/* 5.3 Hero – dunkler Grund; mit Foto vollflächig, ohne Foto ein kräftiger Block */
.hero { position: relative; background: var(--nacht); color: var(--weiss); overflow: hidden; isolation: isolate; }
.hero h1 { color: var(--weiss); margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--ball); }
.hero h1 small { display: block; font-size: .42em; font-weight: 700; letter-spacing: .04em; color: var(--text-hell); margin-top: .35em; }
.hero .vorspann { color: var(--text-hell); max-width: 46ch; }
.hero .augenbraue { color: var(--ball); }
.hero a:not(.knopf) { color: var(--weiss); }
.hero__ort { color: var(--ball); font-weight: 700; }
.hero__foto { position: absolute; inset: 0; z-index: -1; margin: 0; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero__foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgb(20 24 21 / .92) 0%, rgb(20 24 21 / .55) 40%, rgb(20 24 21 / .12) 75%, rgb(20 24 21 / .35) 100%),
    linear-gradient(105deg, rgb(20 24 21 / .75) 0%, rgb(20 24 21 / .25) 55%, rgb(20 24 21 / 0) 100%);
}
.hero--foto { min-height: min(92vh, 60rem); display: grid; align-items: end; }
.hero--foto.hero--klein { min-height: min(64vh, 42rem); }
.hero__inhalt { position: relative; min-width: 0; padding-block: calc(var(--kopf-hoehe) + clamp(3rem, 8vh, 6rem)) clamp(2.5rem, 6vh, 4.5rem); }
.hero__inhalt .knopf-reihe { margin-top: 2.25rem; }
.hero__bildtext {
  position: absolute; right: var(--gasse); bottom: 1rem; font-size: .75rem; color: var(--text-hell-leise);
  display: none; align-items: center; gap: .5rem;
}
.hero__linie { display: none; }
@media (min-width: 62em) {
  .hero__bildtext { display: flex; }
  .hero__linie { display: block; position: absolute; top: 0; bottom: 0; left: 62%; width: 2px; background: rgb(255 255 255 / .5); pointer-events: none; }
}
/* Textvariante (Unterseiten): dunkler Block mit roter Kante */
.hero--text, .hero:not(.hero--foto) { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) 0; }
.hero:not(.hero--foto) h1 { font-size: clamp(2.75rem, 1.75rem + 5vw, 5.5rem); }
.hero::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--asche) 0 35%, var(--ball) 35% 42%, var(--asche) 42% 100%);
}
/* Alte Hero-Bildfigur (Unterseiten, falls noch vorhanden) */
.hero__bild { border-radius: var(--radius); overflow: hidden; margin-bottom: 2rem; }
.hero__bild figcaption { font-size: .875rem; color: var(--text-hell-leise); padding: .625rem .25rem 0; }

/* 5.4 Vertrauensband – Asche-Rot als Vollfläche, Wortlaut identisch mit den Anzeigen */
.vertrauen { background: var(--asche); color: var(--weiss); }
.vertrauen ul {
  list-style: none; margin: 0; padding: 1rem 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem 0; font-family: var(--schrift-display); font-size: 1.125rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1.2;
}
.vertrauen li { display: flex; align-items: center; }
.vertrauen li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ball); margin-inline: 0 .75rem; flex: none; }
@media (max-width: 47.99em) {
  .vertrauen ul { flex-direction: column; align-items: flex-start; gap: .375rem; font-size: 1rem; }
}
@media (min-width: 48em) {
  .vertrauen li::before { margin-inline: 1.25rem; }
  .vertrauen li:first-child::before { display: none; }
}
.vertrauen svg { display: none; }

/* 5.5 Kacheln – mit Foto: Bildkachel; ohne Foto: ruhige Rahmenkachel */
.kachel {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 18rem; aspect-ratio: 16 / 10; padding: 1.5rem;
  background: var(--nacht); color: var(--weiss); border-radius: var(--radius); overflow: hidden;
  text-decoration: none; isolation: isolate; min-width: 0;
}
.kachel picture, .kachel > img { position: absolute; inset: 0; z-index: -2; margin: 0; }
.kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.kachel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(20 24 21 / .94) 0%, rgb(20 24 21 / .6) 42%, rgb(20 24 21 / .08) 100%);
  transition: opacity .3s;
}
.kachel h3 { color: var(--weiss); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 800; margin-bottom: .35rem; }
.kachel p { font-size: .9375rem; color: var(--text-hell); margin-bottom: 1rem; max-width: 42ch; }
.kachel__mehr { font-family: var(--schrift-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ball); }
a.kachel:hover img { transform: scale(1.05); }
a.kachel:hover .kachel__mehr { color: var(--weiss); }
.kachel--text { background: var(--asche); justify-content: center; aspect-ratio: auto; min-height: 14rem; }
.kachel--text::before { display: none; }
.kachel--text .augenbraue { color: var(--weiss); }
.kachel__nachsatz { margin: 1rem 0 0; }
.kachel--text .kachel__telefon { font-family: var(--schrift-display); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 800; color: var(--weiss); text-decoration: none; line-height: 1; }
.kachel--text .kachel__telefon:hover { color: var(--ball); }
.kachel:not(:has(img)):not(.kachel--text) {
  background: var(--weiss); color: var(--text); border: 1px solid var(--rand); aspect-ratio: auto; min-height: 0;
  justify-content: flex-start; transition: border-color .15s;
}
.kachel:not(:has(img)):not(.kachel--text)::before { display: none; }
.kachel:not(:has(img)):not(.kachel--text) h3 { color: var(--text); font-size: clamp(1.375rem, 1.2rem + 1vw, 1.75rem); }
.kachel:not(:has(img)):not(.kachel--text) p { color: var(--text-leise); }
.kachel:not(:has(img)):not(.kachel--text) .kachel__mehr { color: var(--asche); margin-top: auto; }
a.kachel:not(:has(img)):hover { border-color: var(--asche); }
/* Bento-Raster: Frühjahrsinstandsetzung und Sportplatzbau als große Kacheln */
@media (min-width: 62em) {
  .raster--bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 24rem; }
  .raster--bento .kachel { aspect-ratio: auto; min-height: 0; padding: 2rem; }
  .raster--bento .kachel--gross { grid-column: span 2; }
  .raster--bento .kachel--gross h3 { font-size: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }
}

/* 5.6 Ablaufplan – die Reihenfolge ist Information, deshalb Nummern */
.ablauf { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ablauf--eins { grid-template-columns: 1fr; gap: 1.5rem; }
.ablauf li { counter-increment: schritt; position: relative; padding: 0; }
.ablauf li::before {
  content: counter(schritt, decimal-leading-zero); display: block;
  font-family: var(--schrift-display); font-weight: 800; font-size: clamp(3.5rem, 3rem + 2vw, 5rem); line-height: .9;
  color: var(--asche); font-variant-numeric: tabular-nums; margin-bottom: .75rem;
}
.ablauf h3 { position: relative; padding-top: .875rem; margin-bottom: .375rem; font-size: 1.5rem; }
.ablauf h3::before { content: ""; position: absolute; top: 0; left: 0; width: 3rem; height: 2px; background: var(--ball); }
.ablauf p { font-size: .9375rem; margin: 0; }
.sektion:not(.sektion--dunkel) .ablauf h3::before { background: var(--asche); }
.sektion:not(.sektion--dunkel) .ablauf p { color: var(--text-leise); }

/* 5.7 Zahlenband */
.zahlen { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.zahlen b { display: block; font-family: var(--schrift-display); font-weight: 800; font-size: clamp(4rem, 3rem + 5vw, 8rem); line-height: .9;
  font-variant-numeric: tabular-nums; position: relative; padding-bottom: .625rem; margin-bottom: .625rem; }
.zahlen b::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 3rem; height: 3px; background: var(--ball); }
.zahlen span { font-size: .9375rem; display: block; max-width: 22ch; }
.sektion--asche .zahlen span { color: #fdeee9; }

/* 5.8 Referenzen – echter Text in Listenzeilen: Verein, Ort, Region, Jahr, Leistung, Plätze */
.filter-bereich { position: relative; }
.filter-bereich > input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.filter label {
  display: inline-flex; min-height: 44px; align-items: center; padding: .5rem 1.125rem;
  border: 1px solid var(--rand); border-radius: 999px; cursor: pointer;
  font-family: var(--schrift-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.filter label:hover { border-color: var(--asche); color: var(--asche-dunkel); }
#f-alle:focus-visible ~ .filter label[for="f-alle"],
#f-ruhrgebiet:focus-visible ~ .filter label[for="f-ruhrgebiet"],
#f-rheinland:focus-visible ~ .filter label[for="f-rheinland"],
#f-muensterland:focus-visible ~ .filter label[for="f-muensterland"],
#f-bergisches:focus-visible ~ .filter label[for="f-bergisches"] { outline: 3px solid var(--asche); outline-offset: 2px; }
#f-alle:checked ~ .filter label[for="f-alle"],
#f-ruhrgebiet:checked ~ .filter label[for="f-ruhrgebiet"],
#f-rheinland:checked ~ .filter label[for="f-rheinland"],
#f-muensterland:checked ~ .filter label[for="f-muensterland"],
#f-bergisches:checked ~ .filter label[for="f-bergisches"] { background: var(--asche); border-color: var(--asche); color: #fff; }

.referenzen { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--asche); }
.referenz {
  display: grid; gap: .25rem 2rem; padding: 1.375rem 0; border-bottom: 1px solid var(--rand);
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "ort" "daten" "marker";
}
.referenz h3 { grid-area: name; margin: 0; font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem); }
.referenz__ort { grid-area: ort; font-size: .9375rem; color: var(--text-leise); margin: 0; }
.referenz dl { grid-area: daten; display: grid; grid-auto-flow: column; grid-template-rows: auto auto; gap: 0 2rem; margin: .75rem 0 0; font-size: .9375rem; }
.referenz dt { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); }
.referenz dd { margin: 0; font-weight: 600; font-family: var(--schrift-display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .03em; }
.marker { grid-area: marker; justify-self: start; display: inline-block; margin-top: .75rem; padding: .1875rem .625rem; border-radius: 999px;
  background: var(--asche-hell); color: var(--asche-dunkel); font-size: .8125rem; font-weight: 600; }
@media (min-width: 48em) {
  .referenz { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center;
    grid-template-areas: "name daten marker" "ort daten marker"; }
  .referenz dl { margin: 0; }
  .marker { margin-top: 0; }
}

/* Filter ohne JavaScript: das gewählte Radio blendet die anderen Regionen aus */
#f-alle:checked        ~ .referenzen > li { display: grid; }
#f-ruhrgebiet:checked  ~ .referenzen > li:not([data-region="ruhrgebiet"]),
#f-rheinland:checked   ~ .referenzen > li:not([data-region="rheinland"]),
#f-muensterland:checked ~ .referenzen > li:not([data-region="muensterland"]),
#f-bergisches:checked   ~ .referenzen > li:not([data-region="bergisches"]) { display: none; }

/* 5.9 Projektbericht */
.bericht { border-left: 3px solid var(--asche); padding-left: 1.5rem; }
.bericht blockquote { margin: 1.25rem 0 0; font-size: 1.0625rem; }
.bericht blockquote p { font-style: italic; }
.bericht cite { display: block; font-style: normal; font-size: .9375rem; color: var(--text-leise); }

/* 5.10 FAQ */
.faq { border-top: 3px solid var(--asche); max-width: 74ch; }
.faq details { border-bottom: 1px solid var(--rand); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.125rem 0; cursor: pointer; list-style: none; min-height: 56px;
  font-family: var(--schrift-display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--asche); font-size: 2rem; line-height: 1; flex: none; font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding-bottom: 1.25rem; margin: 0; }

/* 5.11 Fußbereich */
.fuss { background: var(--nacht); color: var(--text-hell-leise); padding-block: clamp(2rem, 1.5rem + 2vw, 3rem) 1.5rem; overflow: hidden; }
.fuss__marke {
  font-family: var(--schrift-display); font-weight: 800; font-size: clamp(4.5rem, 16vw, 13rem); line-height: 1; text-transform: uppercase;
  letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1px rgb(255 255 255 / .16); white-space: nowrap;
  user-select: none; margin: 0 0 1.5rem -.04em;
}
.fuss h2, .fuss h3 { color: var(--weiss); font-size: 1.125rem; letter-spacing: .06em; margin-bottom: .875rem; }
.fuss a { color: var(--weiss); }
.fuss a:hover { color: var(--ball); }
.fuss .leise { color: var(--text-hell-leise); }
.fuss p, .fuss a { overflow-wrap: anywhere; }
.fuss__raster { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); font-size: .9375rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fuss li a { display: inline-block; padding-block: .375rem; min-height: 44px; }
.fuss__unten { border-top: 1px solid var(--platz-hell); margin-top: 2.5rem; padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .875rem; align-items: center; }
.fuss__unten a { padding-block: .5rem; }

/* 5.12 Anrufleiste mobil */
.anrufleiste {
  position: fixed; inset: auto 0 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--platz-hell);
  padding-bottom: env(safe-area-inset-bottom);
}
.anrufleiste a {
  display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 56px;
  background: var(--nacht); font-family: var(--schrift-display); font-size: 1.25rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; color: var(--weiss);
}
.anrufleiste a:first-child { background: var(--asche); color: #fff; }
@media (min-width: 62em) { .anrufleiste { display: none; } }
@media (max-width: 61.99em) { body { padding-bottom: 56px; } }

/* 5.13 Kontaktblock */
.kontakt__telefon {
  display: inline-block; font-family: var(--schrift-display); font-weight: 800; font-size: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  line-height: 1; text-decoration: none; color: var(--text); margin: .5rem 0 1rem; letter-spacing: .01em;
}
.kontakt__telefon:hover { color: var(--asche); }

/* 6 Formular -------------------------------------------------------------- */
.formular { display: grid; gap: 1.125rem; max-width: 34rem; }
.feld { display: grid; gap: .375rem; }
.feld label { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.feld .hinweis { font-size: .8125rem; color: var(--text-leise); font-weight: 400; letter-spacing: 0; text-transform: none; }
.feld input, .feld textarea, .feld select {
  font: inherit; color: var(--text); background: var(--weiss);
  border: 2px solid var(--text); border-radius: var(--radius); padding: .75rem .875rem; min-height: 52px;
}
.feld input:focus, .feld textarea:focus, .feld select:focus { border-color: var(--asche); outline: none; box-shadow: 0 0 0 3px rgb(180 68 42 / .2); }
.feld textarea { min-height: 8rem; resize: vertical; }
.honigtopf { position: absolute; left: -9999px; }

/* Druck ------------------------------------------------------------------- */
@media print {
  .kopf, .anrufleiste, .knopf-reihe, .filter, .fuss__marke, .hero__foto { display: none !important; }
  body { padding: 0; font-size: 11pt; }
  .hero, .sektion--dunkel, .sektion--asche { background: none; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* 7 Bewegung ---------------------------------------------------------------
   Die Klasse "anim" setzt das Skript selbst auf <html>. Ohne JavaScript wird
   deshalb nichts versteckt – die Seite ist dann einfach statisch.
   Hero und Kopfbereich bleiben bewusst ausgenommen: Sie tragen den LCP und
   dürfen nicht auf ein Skript warten.                                        */
.anim [data-anim] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--verzoegerung, 0ms);
}
.anim [data-anim].sichtbar { opacity: 1; transform: none; }

/* Hero-Text fährt beim Laden hoch – reines CSS, kein Skript, kein LCP-Risiko */
@media (prefers-reduced-motion: no-preference) {
  .hero--foto .hero__inhalt > * { animation: hero-auf .8s cubic-bezier(.22, .61, .36, 1) both; }
  .hero--foto .hero__inhalt > :nth-child(2) { animation-delay: .08s; }
  .hero--foto .hero__inhalt > :nth-child(3) { animation-delay: .16s; }
  .hero--foto .hero__inhalt > :nth-child(4) { animation-delay: .24s; }
}
@keyframes hero-auf { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Fortschrittsbalken – rein deklarativ über die Scroll-Timeline, ohne Ereignis-Handler */
.fortschritt {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 60;
  background: var(--ball); transform: scaleX(0); transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
  .fortschritt { animation: fortschritt linear both; animation-timeline: scroll(root block); }
}
@keyframes fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .anim [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fortschritt { display: none; }
  a.kachel:hover img { transform: none; }
}

/* 8 Tennis-Look -------------------------------------------------------------
   Zwei Motive tragen den Wiedererkennungswert: die weiße Platzlinie als
   Trennelement und das Ballgelb als sparsamer Zweitakzent. Beides ist Dekor -
   keine Information hängt daran, nichts davon muss ein Screenreader kennen. */

/* Augenbrauen bekommen einen kurzen Strich davor - Linienzieher-Motiv */
.augenbraue { display: flex; align-items: center; gap: .625rem; }
.augenbraue::before { content: ""; width: 2rem; height: 2px; background: currentColor; flex: none; }

/* Fotos: einheitliche Behandlung statt beliebiger Schnappschüsse */
.bild { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--sand); }
.bild img { width: 100%; height: 100%; object-fit: cover; }
.bild--hoch { aspect-ratio: 3 / 4; }
.bild--breit { aspect-ratio: 3 / 2; }
figure { margin: 0; }
figure figcaption { font-size: .875rem; color: var(--text-leise); padding-top: .625rem; }
.sektion--dunkel figcaption { color: var(--text-hell-leise); }

/* Bildband über die volle Breite, mit Text darauf */
.bildband { position: relative; min-height: clamp(24rem, 60vh, 40rem); display: grid;
  align-items: end; overflow: hidden; background: var(--nacht); color: var(--weiss); }
.bildband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bildband::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(20 24 21 / .9) 0%, rgb(20 24 21 / .5) 45%, rgb(20 24 21 / .1) 100%);
}
.bildband__text { position: relative; z-index: 1; padding-block: clamp(2rem, 1.5rem + 3vw, 4rem); max-width: 46ch; }
.bildband__text h2, .bildband__text p { color: var(--weiss); }
.bildband__text p { color: var(--text-hell); }
.bildband__text .augenbraue { color: var(--ball); }

/* Ruhige Zoomfahrt auf Bildbändern - nur wo Bewegung erwünscht ist */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bildband img { animation: langsam-zoom linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes langsam-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }