/* ==========================================================================
   SG Preußen Gladbeck – Stylesheet
   Farben und Schriften zentral in :root anpassbar.
   ========================================================================== */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Vereinsfarben (Gelb aus dem Wappen gemessen) */
  --schwarz: #000000;
  --gelb: #f9e241;
  --gelb-tief: #e9cd1e;
  --weiss: #ffffff;
  --kreide: #f3f3f1;
  --rasen: #1d4630;
  --rasen-tief: #163726;
  --grau: #595959;
  --linie: #d9d9d6;
  --linie-dunkel: rgba(255, 255, 255, 0.2);

  --schrift-titel: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --schrift-text: "Archivo", "Segoe UI", Roboto, Arial, sans-serif;

  --breite: 1200px;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --abstand: clamp(4.5rem, 10vw, 8.5rem);
  --kopf-hoehe: 4.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--kopf-hoehe); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--schwarz);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }
.bereich :focus-visible, .mitglied :focus-visible { outline-color: var(--schwarz); }
.training :focus-visible, .schiri :focus-visible, .fuss :focus-visible, .kopf :focus-visible, .start :focus-visible { outline-color: var(--gelb); }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--gelb); color: var(--schwarz); padding: .75rem 1rem; font-weight: 700;
}
.skip:focus { top: 1rem; }

.rahmen { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.bereich { padding-block: var(--abstand); }
.bereich[hidden] { display: none; }

/* ---------- Typografie ---------------------------------------------------- */
.titel {
  font-family: var(--schrift-titel);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: .88;
  letter-spacing: .005em;
  margin-bottom: 1.25rem;
}
.einleitung {
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  max-width: 38em;
  color: var(--grau);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- Buttons ------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 3.25rem; padding: .8rem 1.5rem;
  font: 700 1rem/1.2 var(--schrift-text);
  text-decoration: none;
  border: 2px solid currentColor;
  transition: background-color .2s, color .2s, border-color .2s;
}
.knopf--gelb { background: var(--gelb); border-color: var(--gelb); color: var(--schwarz); }
.knopf--gelb:hover { background: var(--weiss); border-color: var(--weiss); }
.knopf--hell { color: var(--weiss); }
.knopf--hell:hover { background: var(--weiss); color: var(--schwarz); border-color: var(--weiss); }
.knopf--schwarz { background: var(--schwarz); border-color: var(--schwarz); color: var(--weiss); }
.knopf--schwarz:hover { background: transparent; color: var(--schwarz); }
.knopf svg { width: 1.1em; height: 1.1em; flex: none; }

.textlink {
  font-weight: 700; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: .2em;
}
.textlink:hover { text-decoration-color: var(--gelb-tief); }

/* ---------- Kopfzeile ----------------------------------------------------- */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--kopf-hoehe);
  color: var(--weiss);
  transition: background-color .3s;
}
.kopf.ist-gescrollt, .kopf.ist-offen { background: var(--schwarz); }
.kopf__innen {
  height: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marke { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.marke img { width: 3rem; height: 3rem; }
.marke__name {
  font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase;
  font-size: 1.45rem; line-height: 1; letter-spacing: .01em;
}
.navigation ul { display: flex; gap: clamp(.75rem, 2vw, 1.75rem); }
.navigation a {
  text-decoration: none; font-weight: 600; font-size: .95rem;
  padding-block: .4rem; border-bottom: 3px solid transparent;
}
.navigation a:hover, .navigation a.ist-aktiv { border-bottom-color: var(--gelb); }
.menue-knopf { display: none; }

@media (max-width: 1080px) {
  .menue-knopf {
    display: inline-flex; align-items: center; gap: .6rem;
    background: none; border: 0; color: inherit; font: 600 1rem var(--schrift-text);
    padding: .75rem 0 .75rem .75rem; cursor: pointer;
  }
  .menue-knopf__striche, .menue-knopf__striche::before, .menue-knopf__striche::after {
    display: block; width: 22px; height: 2px; background: currentColor; position: relative;
    transition: transform .25s, background-color .25s;
  }
  .menue-knopf__striche::before, .menue-knopf__striche::after { content: ""; position: absolute; left: 0; }
  .menue-knopf__striche::before { top: -7px; }
  .menue-knopf__striche::after { top: 7px; }
  .kopf.ist-offen .menue-knopf__striche { background: transparent; }
  .kopf.ist-offen .menue-knopf__striche::before { transform: translateY(7px) rotate(45deg); }
  .kopf.ist-offen .menue-knopf__striche::after { transform: translateY(-7px) rotate(-45deg); }

  .navigation {
    position: fixed; inset: var(--kopf-hoehe) 0 auto; background: var(--schwarz);
    padding: 1rem var(--rand) 2rem; border-top: 1px solid var(--linie-dunkel);
    transform: translateY(-.5rem); opacity: 0; visibility: hidden;
    transition: opacity .2s, transform .2s, visibility 0s .2s;
  }
  .kopf.ist-offen .navigation { opacity: 1; transform: none; visibility: visible; transition: opacity .2s, transform .2s; }
  .navigation ul { flex-direction: column; gap: 0; }
  .navigation a {
    display: block; padding: .9rem 0; border-bottom: 1px solid var(--linie-dunkel);
    font-family: var(--schrift-titel); font-weight: 700; text-transform: uppercase; font-size: 1.75rem; line-height: 1;
  }
}
@media (max-width: 420px) { .marke__name { font-size: 1.2rem; } }

/* ---------- Startbereich -------------------------------------------------- */
.start {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; min-height: max(100svh, 40rem);
  display: flex; align-items: flex-end;
  color: var(--weiss); background: var(--schwarz);
}
.start__bild {
  position: absolute; inset: 0; z-index: -2;
  background-image: url("../img/hero-1400.jpg");
  background-image: image-set(url("../img/hero-1400.webp") type("image/webp"), url("../img/hero-1400.jpg") type("image/jpeg"));
  background-size: cover; background-position: 50% 70%;
  animation: bild-ein 1.6s cubic-bezier(.2,.7,.2,1) both;
}
@media (min-width: 1500px) {
  .start__bild { background-image: image-set(url("../img/hero-2400.webp") type("image/webp"), url("../img/hero-2400.jpg") type("image/jpeg")); }
}
@media (max-width: 700px) {
  .start__bild { background-image: image-set(url("../img/hero-800.webp") type("image/webp"), url("../img/hero-800.jpg") type("image/jpeg")); background-position: 40% 80%; }
}
.start::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 38%, rgba(0,0,0,.15) 70%, rgba(0,0,0,.45) 100%);
}
.start__inhalt {
  width: 100%; max-width: var(--breite); margin-inline: auto;
  padding: calc(var(--kopf-hoehe) + 3rem) var(--rand) clamp(3.5rem, 9vh, 6rem);
}
.start__logo img { width: clamp(6.5rem, 12vw, 10.5rem); height: auto; margin-bottom: clamp(1.25rem, 3vh, 2rem); filter: drop-shadow(0 6px 24px rgba(0,0,0,.5)); }
.start__titel { font-family: var(--schrift-titel); text-transform: uppercase; line-height: .82; }
.start__zeile {
  display: block; font-weight: 900;
  font-size: clamp(4.5rem, 17vw, 13.5rem);
  letter-spacing: -.005em;
}
.start__unterzeile {
  display: block; color: var(--gelb); font-weight: 700;
  font-size: clamp(1.9rem, 5.2vw, 4rem);
  margin-top: .35em; line-height: 1;
}
.start__text { font-size: clamp(1.125rem, 2vw, 1.4rem); max-width: 30em; margin-top: 1.5rem; }
.start__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Die Seitenlinie: einmalige Lade-Animation */
.start__linie {
  position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--gelb);
  transform-origin: left; animation: linie-ziehen 1.1s .5s cubic-bezier(.65,0,.35,1) both;
}
.start__logo, .start__zeile, .start__unterzeile, .start__text, .start__knoepfe {
  animation: hoch 0.9s cubic-bezier(.2,.7,.2,1) both;
}
.start__zeile { animation-delay: .15s; }
.start__unterzeile { animation-delay: .3s; }
.start__text { animation-delay: .45s; }
.start__knoepfe { animation-delay: .55s; }

@keyframes bild-ein { from { transform: scale(1.06); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes hoch { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes linie-ziehen { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Mannschaften -------------------------------------------------- */
.gruppe {
  display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; gap: 1rem 3rem;
  border-top: 4px solid var(--schwarz); padding-top: 1.5rem;
}
.gruppe + .gruppe { margin-top: clamp(3rem, 6vw, 4.5rem); }
.gruppe__titel {
  font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase;
  font-size: 2rem; line-height: 1; align-self: start; position: sticky; top: calc(var(--kopf-hoehe) + 1.5rem);
}
.team {
  display: grid;
  grid-template-columns: minmax(11rem, 1.1fr) 1.3fr 1fr auto;
  gap: .5rem 2rem; align-items: start;
  padding-block: 1.4rem; border-bottom: 1px solid var(--linie);
}
.team:first-child { padding-top: 0; }
.team:last-child { border-bottom: 0; }
.team__name {
  font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: .95;
}
.team__liga {
  display: inline-block; margin-top: .5rem; padding: .15rem .55rem;
  background: var(--gelb); font-size: .85rem; font-weight: 700; line-height: 1.5;
}
.team__personen li { line-height: 1.4; }
.team__personen li + li { margin-top: .35rem; }
.team__personen span, .team__zeiten span.team__klein { display: block; font-size: .85rem; color: var(--grau); }
.team__personen strong { font-weight: 600; }
.team__zeiten li { font-variant-numeric: tabular-nums; font-weight: 600; }
.team__zeiten li + li { margin-top: .2rem; }
.team__zeiten b { display: inline-block; width: 2.2em; font-weight: 800; }
.team__hinweis { grid-column: 2 / -1; color: var(--grau); font-style: italic; max-width: 34em; }
.team__link { font-size: .9rem; white-space: nowrap; }

@media (max-width: 1000px) {
  .team { grid-template-columns: 1fr 1fr; }
  .team__kopf { grid-column: 1 / -1; }
  .team__hinweis { grid-column: 1 / -1; }
  .team__link { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .gruppe { grid-template-columns: 1fr; }
  .gruppe__titel { position: static; font-size: 1.5rem; color: var(--grau); margin-bottom: .5rem; }
}
@media (max-width: 480px) {
  .team { grid-template-columns: 1fr; }
}

/* ---------- Trainingswoche ------------------------------------------------ */
.training { background: var(--schwarz); color: var(--weiss); }
.training .einleitung { color: rgba(255,255,255,.75); }
.plan {
  --zeile: 2.6rem;
  display: grid; grid-template-columns: 4rem repeat(var(--tage), 1fr);
  border-top: 1px solid var(--linie-dunkel);
}
.plan__tag {
  font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase; font-size: 1.6rem;
  padding: .75rem .5rem; border-left: 1px solid var(--linie-dunkel); line-height: 1;
}
.plan__ecke { border-bottom: 1px solid var(--linie-dunkel); }
.plan__tag { border-bottom: 1px solid var(--linie-dunkel); }
.plan__achse { position: relative; }
.plan__uhr {
  position: absolute; left: 0; transform: translateY(-50%);
  font-size: .8rem; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums;
}
.plan__spalte {
  position: relative; border-left: 1px solid var(--linie-dunkel);
  display: grid; grid-template-rows: repeat(var(--slots), calc(var(--zeile) / 2));
  grid-template-columns: repeat(var(--bahnen), 1fr); gap: 0 4px; padding-inline: 4px;
  background-image: repeating-linear-gradient(to bottom, var(--linie-dunkel) 0 1px, transparent 1px var(--zeile));
}
.plan__block {
  background: var(--gelb); color: var(--schwarz);
  padding: .35rem .5rem; margin-block: 2px; overflow: hidden;
  border-left: 4px solid var(--weiss);
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 0;
}
.plan__block strong { font-weight: 800; font-size: .9rem; line-height: 1.15; }
.plan__block span { font-size: .75rem; font-variant-numeric: tabular-nums; line-height: 1.3; }
.plan__block--jugend { background: var(--weiss); border-left-color: var(--gelb); }
.plan__block--altherren { background: #b9a72e; background: color-mix(in srgb, var(--gelb) 70%, var(--schwarz)); }
.plan__legende { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.25rem; font-size: .9rem; color: rgba(255,255,255,.8); }
.plan__legende span::before {
  content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .45em; vertical-align: -.1em; background: var(--gelb);
}
.plan__legende .l-altherren::before { background: color-mix(in srgb, var(--gelb) 70%, var(--schwarz)); }
.plan__legende .l-jugend::before { background: var(--weiss); }
.training__hinweis {
  margin-top: 2rem; padding: 1rem 1.25rem; border-left: 6px solid var(--gelb);
  background: rgba(255,255,255,.07); max-width: 44em;
}
.liste-tage { display: none; }

@media (max-width: 760px) {
  .plan, .plan__legende { display: none; }
  .liste-tage { display: block; border-top: 1px solid var(--linie-dunkel); }
  .liste-tage__tag { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linie-dunkel); }
  .liste-tage__name { font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase; font-size: 1.8rem; line-height: 1; }
  .liste-tage li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .2rem; }
  .liste-tage li span { font-variant-numeric: tabular-nums; color: var(--gelb); white-space: nowrap; }
}

/* ---------- Mitglied werden ----------------------------------------------- */
.mitglied { background: var(--gelb); }
.mitglied__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem clamp(3rem, 7vw, 6rem); align-items: start; }
.beitrag { border-top: 4px solid var(--schwarz); padding-top: 1rem; margin-top: 2rem; }
.beitrag__gruppe { font-weight: 700; font-size: 1.1rem; }
.beitrag__betrag {
  font-family: var(--schrift-titel); font-weight: 900; line-height: .85;
  font-size: clamp(6rem, 14vw, 10rem); letter-spacing: -.01em;
}
.beitrag__zeitraum { font-family: var(--schrift-titel); font-weight: 700; text-transform: uppercase; font-size: 1.6rem; line-height: 1; margin-top: .25rem; }
.beitrag__hinweis { margin-top: .5rem; }
.beitrag--klein .beitrag__hinweis { font-size: 1.2rem; font-weight: 600; margin-top: .25rem; }

.schritte { counter-reset: schritt; }
.schritte li {
  counter-increment: schritt;
  display: grid; grid-template-columns: 4rem 1fr; gap: 0 1rem;
  padding-block: 1.25rem; border-bottom: 2px solid var(--schwarz);
}
.schritte li:first-child { border-top: 2px solid var(--schwarz); }
.schritte li::before {
  content: counter(schritt); grid-row: span 2;
  font-family: var(--schrift-titel); font-weight: 900; font-size: 3.5rem; line-height: .85;
}
.schritte strong { font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; line-height: 1.05; }
.schritte p { margin-top: .35rem; }
.antrag { margin-top: 2rem; }
.antrag p { font-weight: 600; }

@media (max-width: 860px) { .mitglied__raster { grid-template-columns: 1fr; } }

/* ---------- Platz --------------------------------------------------------- */
.platz { background: var(--rasen); color: var(--weiss); position: relative; overflow: hidden; }
.platz .einleitung { color: rgba(255,255,255,.8); }
.platz__raster { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.merkmale { display: grid; gap: 0; margin-bottom: 2rem; border-top: 1px solid rgba(255,255,255,.3); }
.merkmale li { padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.3); display: grid; grid-template-columns: 11rem 1fr; gap: .25rem 1rem; }
.merkmale strong { font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: 1.1; color: var(--gelb); }
.platz__adresse { font-size: 1.15rem; font-weight: 600; margin-bottom: 1.5rem; }
.platz__links { display: flex; flex-wrap: wrap; gap: .75rem; }
.platz__grafik {
  color: rgba(255,255,255,.85);
  background: repeating-linear-gradient(90deg, var(--rasen-tief) 0 10%, var(--rasen) 10% 20%);
  padding: clamp(.75rem, 2vw, 1.5rem);
  transform: perspective(1400px) rotateX(28deg) rotateZ(-4deg);
  transform-origin: center 60%;
  box-shadow: 0 40px 60px -30px rgba(0,0,0,.6);
}
@media (max-width: 860px) {
  .platz__raster { grid-template-columns: 1fr; }
  .platz__grafik { order: -1; max-width: 32rem; }
}
@media (max-width: 480px) { .merkmale li { grid-template-columns: 1fr; } }

/* ---------- Schiedsrichter ------------------------------------------------ */
.schiri { background: var(--schwarz); color: var(--weiss); }
.schiri .titel { color: var(--gelb); }
.schiri__raster { display: grid; grid-template-columns: auto 1fr; gap: 2rem clamp(2rem, 6vw, 5rem); align-items: center; }
.schiri__pfeife { width: clamp(7rem, 15vw, 12rem); color: var(--gelb); transform: rotate(-12deg); }
.schiri__text { font-size: clamp(1.1rem, 1.7vw, 1.3rem); max-width: 36em; }
.schiri__aktion { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
@media (max-width: 640px) { .schiri__raster { grid-template-columns: 1fr; } }

/* ---------- Vorstand ------------------------------------------------------ */
.personen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.5rem 1.5rem; }
@media (max-width: 1000px) { .personen { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .personen { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } }
.person__bild { aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; background: var(--kreide); }
.person__name { font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1; margin-top: .9rem; }
.person__amt { color: var(--grau); margin-top: .3rem; }

/* ---------- Kontakt ------------------------------------------------------- */
.kontakt { background: var(--kreide); }
.kontakt__raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; margin-top: 1rem; }
.kontakt h3 { font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: 1; margin-bottom: 1rem; }
.kontakt__mail {
  display: inline-block; font-family: var(--schrift-titel); font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.05; text-decoration: none;
  border-bottom: 5px solid var(--gelb); word-break: break-word; margin-bottom: 1.5rem;
}
.kontakt__mail:hover { background: var(--gelb); }
.kontakt__haupt p + p { margin-top: .9rem; }
.kontakt__personen li + li { margin-top: 1.25rem; }
.kontakt__personen span { display: block; color: var(--grau); font-size: .95rem; }
.kontakt__personen a, .kontakt__haupt a.tel { font-weight: 700; font-variant-numeric: tabular-nums; }
.kontakt__zeiten dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0 0 1.25rem; }
.kontakt__zeiten dt { font-weight: 700; }
.kontakt__zeiten dd { margin: 0; font-variant-numeric: tabular-nums; }
.kontakt__zeiten p { color: var(--grau); font-size: .95rem; }
.social { display: flex; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }
@media (max-width: 960px) { .kontakt__raster { grid-template-columns: 1fr 1fr; } .kontakt__haupt { grid-column: 1 / -1; } }
@media (max-width: 600px) { .kontakt__raster { grid-template-columns: 1fr; } }

/* ---------- Footer -------------------------------------------------------- */
.fuss { background: var(--schwarz); color: var(--weiss); padding-block: 3rem; border-top: 10px solid var(--gelb); }
.fuss__raster { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 2rem; align-items: center; }
.fuss__marke { display: flex; align-items: center; gap: 1rem; }
.fuss__marke img { width: 4rem; height: 4rem; }
.fuss__marke strong { display: block; font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase; font-size: 1.4rem; line-height: 1.05; }
.fuss__marke span { color: rgba(255,255,255,.7); font-size: .95rem; }
.fuss__links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.fuss__links a { text-decoration: none; font-weight: 600; border-bottom: 2px solid var(--gelb); }
.fuss__copy { grid-column: 1 / -1; color: rgba(255,255,255,.55); font-size: .85rem; }
@media (max-width: 640px) { .fuss__raster { grid-template-columns: 1fr; } }

/* ---------- Unterseiten (Impressum, Datenschutz) ------------------------- */
.unterseite .kopf { background: var(--schwarz); }
.recht { padding-top: calc(var(--kopf-hoehe) + clamp(3rem, 8vw, 6rem)); padding-bottom: var(--abstand); }
.recht__text { max-width: 44rem; }
.recht__text h2 { font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase; font-size: 2rem; line-height: 1; margin: 2.75rem 0 .9rem; }
.recht__text h3 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; }
.recht__text p, .recht__text ul { margin-bottom: 1rem; }
.recht__text ul { list-style: disc; padding-left: 1.25rem; }
.recht__text li + li { margin-top: .35rem; }
.recht__stand { color: var(--grau); margin-top: 3rem; font-size: .95rem; }
.zurueck { display: inline-block; margin-bottom: 2rem; }

/* ---------- Fehlerhinweis bei kaputter config.js -------------------------- */
.konfig-fehler {
  position: fixed; inset: auto 1rem 1rem; z-index: 200; background: #b00020; color: #fff;
  padding: 1rem 1.25rem; font-weight: 600; max-width: 40rem;
}
.noscript { background: var(--gelb); padding: 1rem var(--rand); margin: 0; font-weight: 600; }

/* ---------- Bewegung reduzieren ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}


/* ---------- Startbereich mobil: zentriert -------------------------------- */
@media (max-width: 700px) {
  .start__inhalt { text-align: center; }
  .start__logo img { margin-inline: auto; }
  .start__text { margin-inline: auto; }
  .start__knoepfe { justify-content: center; }
}

/* ---------- Kacheln Senioren / Jugend (Startseite) ----------------------- */
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); }
.kachel {
  position: relative; display: flex; flex-direction: column;
  min-height: clamp(22rem, 38vw, 30rem);
  padding: clamp(1.5rem, 3.5vw, 3rem);
  text-decoration: none; overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.kachel--schwarz { background: var(--schwarz); color: var(--weiss); }
.kachel--gelb { background: var(--gelb); color: var(--schwarz); }
.kachel__zahl { font-weight: 700; font-size: 1rem; }
.kachel--schwarz .kachel__zahl { color: var(--gelb); }
.kachel__titel {
  font-family: var(--schrift-titel); font-weight: 900; text-transform: uppercase;
  font-size: clamp(4rem, 9vw, 7.5rem); line-height: .82; margin-top: .5rem;
}
.kachel__text { font-size: 1.15rem; margin-top: .75rem; }
.kachel__teams {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: 2rem;
}
.kachel__teams li {
  font-family: var(--schrift-titel); font-weight: 700; text-transform: uppercase; font-size: 1.15rem; line-height: 1;
  padding: .45rem .6rem; border: 2px solid currentColor;
}
.kachel__link {
  display: inline-block; margin-top: 1.5rem; font-weight: 700; font-size: 1.05rem;
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .25em;
}
.kachel--schwarz .kachel__link { text-decoration-color: var(--gelb); }
.kachel:hover { transform: translateY(-4px); }
.kachel:hover .kachel__link { text-decoration-thickness: 5px; }
.kachel:focus-visible { outline: 4px solid var(--schwarz); outline-offset: 4px; }
.kachel--schwarz:focus-visible { outline-color: var(--gelb); }
@media (max-width: 760px) { .kacheln { grid-template-columns: 1fr; } .kachel { min-height: 0; } }

/* ---------- Seitenkopf der Bereichsseiten -------------------------------- */
.seitenkopf {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(26rem, 62svh, 40rem);
  display: flex; align-items: flex-end;
  background: var(--schwarz); color: var(--weiss);
}
.seitenkopf__bild {
  position: absolute; inset: 0; z-index: -2;
  background-image: url("../img/hero-1400.jpg");
  background-image: image-set(url("../img/hero-1400.webp") type("image/webp"), url("../img/hero-1400.jpg") type("image/jpeg"));
  background-size: cover; background-position: 50% 75%;
}
.bereichsseite--jugend .seitenkopf__bild { background-position: 70% 40%; }
.seitenkopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.7) 45%, rgba(0,0,0,.45) 100%);
}
.seitenkopf__inhalt { padding-top: calc(var(--kopf-hoehe) + 3rem); padding-bottom: clamp(3rem, 7vh, 4.5rem); }
.seitenkopf__zurueck { display: inline-block; margin-bottom: 1.25rem; text-decoration-color: var(--gelb); }
.seitenkopf__titel {
  font-family: var(--schrift-titel); font-weight: 900; text-transform: uppercase;
  font-size: clamp(4.5rem, 16vw, 12rem); line-height: .82;
  animation: hoch .9s cubic-bezier(.2,.7,.2,1) both;
}
.seitenkopf__text { font-size: clamp(1.1rem, 1.8vw, 1.3rem); max-width: 34em; margin-top: 1.25rem; color: rgba(255,255,255,.88); }
.sprungmarken { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.sprungmarken a {
  display: inline-block; padding: .55rem .9rem; text-decoration: none;
  font-weight: 700; font-size: .95rem; border: 2px solid var(--gelb); color: var(--gelb);
  transition: background-color .2s, color .2s;
}
.sprungmarken a:hover { background: var(--gelb); color: var(--schwarz); }
.bereichsseite .mannschaften .gruppe__titel { font-size: 2.25rem; }
.bereichsseite .gruppe { scroll-margin-top: calc(var(--kopf-hoehe) + 1rem); }

/* Trainingsplan: enge Spalten (3+ Teams gleichzeitig) */
.plan__spalte--eng .plan__block { padding: .3rem .35rem; }
.plan__spalte--eng .plan__block strong { font-size: .8rem; }
.plan__spalte--eng .plan__block span { font-size: .68rem; }

/* ---------- Kontakt-Band der Bereichsseiten ------------------------------ */
.bereich-kontakt { background: var(--gelb); }
.bereich-kontakt__raster { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem clamp(2rem, 6vw, 5rem); align-items: end; }
.bereich-kontakt__intro { font-size: clamp(1.1rem, 1.6vw, 1.25rem); max-width: 32em; }
.bereich-kontakt__weiter { margin-top: 1.25rem; }
.bereich-kontakt__karte { border-top: 4px solid var(--schwarz); padding-top: 1.25rem; }
.bereich-kontakt__thema { font-weight: 600; }
.bereich-kontakt__name { font-family: var(--schrift-titel); font-weight: 900; text-transform: uppercase; font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: .9; margin-top: .35rem; }
.bereich-kontakt__aktion { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.knopf--rand { color: var(--schwarz); }
.knopf--rand:hover { background: var(--schwarz); color: var(--gelb); }
@media (max-width: 860px) { .bereich-kontakt__raster { grid-template-columns: 1fr; } }

/* ---------- Querverweis am Seitenende ------------------------------------ */
.quer { padding-block: clamp(3rem, 7vw, 5rem); }
.quer__link {
  display: inline-block; font-family: var(--schrift-titel); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.5rem, 7vw, 5rem); line-height: .95; text-decoration: none;
  border-bottom: 8px solid var(--gelb); transition: background-color .2s;
}
.quer__link:hover { background: var(--gelb); }

/* Bildschirmleser-only */
.nur-vorleser { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 1001px) { .team--einzeln { grid-template-columns: minmax(11rem, 1.1fr) 1.3fr 1fr auto; } }
.plan__block strong { overflow-wrap: anywhere; hyphens: manual; }

/* ---------- Beiträge: mehrere Beträge als Liste ------------------------- */
.beitraege { margin-top: 2rem; border-top: 4px solid var(--schwarz); }
.beitraege .beitrag {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "gruppe betrag" "hinweis zeitraum";
  gap: 0 1.5rem; align-items: end; margin-top: 0; padding: 1.1rem 0; border-top: 0; border-bottom: 2px solid var(--schwarz);
}
.beitraege .beitrag__gruppe { grid-area: gruppe; font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1; }
.beitraege .beitrag__betrag { grid-area: betrag; font-size: clamp(3.5rem, 7vw, 5.5rem); text-align: right; }
.beitraege .beitrag__zeitraum { grid-area: zeitraum; font-size: 1.1rem; text-align: right; margin-top: .2rem; }
.beitraege .beitrag__hinweis { grid-area: hinweis; margin-top: .35rem; font-size: .95rem; max-width: 22em; }
.beitraege .beitrag--klein { grid-template-areas: "gruppe gruppe" "hinweis hinweis"; }
.antrag__hinweis { font-weight: 400 !important; font-size: .95rem; margin-top: .9rem; max-width: 34em; }

/* ---------- Spielgemeinschaft (Damen): Wappen + Wasserzeichen ------------ */
.gruppe--sg { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding-bottom: 1.5rem; }
.gruppe__wasserzeichen {
  position: absolute; z-index: -1; pointer-events: none;
  right: -2rem; top: 50%; transform: translateY(-50%) rotate(-8deg);
  width: clamp(14rem, 32vw, 26rem); height: auto; max-height: 120%; object-fit: contain;
  opacity: .09; filter: grayscale(1) contrast(1.2);
}
.team--sg .team__kopf { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
.team__sg-logo { grid-row: span 4; width: clamp(4rem, 7vw, 5.5rem); height: clamp(4rem, 7vw, 5.5rem); object-fit: contain; }
.team--sg .team__liga { justify-self: start; }
.team__sg-text { font-size: .9rem; font-weight: 600; margin-top: .35rem; line-height: 1.3; }
.team__ort { display: block; font-size: .8rem; font-weight: 600; color: var(--grau); margin: -.05rem 0 .2rem 2.2em; }
.team__zeit--extern b { box-shadow: inset 0 -3px 0 var(--gelb); }

/* Trainingsplan: Damen + Einheiten außerhalb des Jahnplatzes */
.plan__block--damen { background: #fbee8f; background: color-mix(in srgb, var(--gelb) 55%, var(--weiss)); border-left-color: var(--gelb-tief); }
.plan__legende .l-damen::before { background: color-mix(in srgb, var(--gelb) 55%, var(--weiss)); }
.plan__block--extern {
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.09) 0 6px, transparent 6px 12px);
  outline: 2px dashed var(--weiss); outline-offset: -2px;
}
.plan__ort { font-style: normal; font-weight: 700; font-size: .7rem; line-height: 1.2; margin-top: .15rem; }
.liste-tage__team { display: flex; flex-direction: column; color: inherit !important; white-space: normal !important; }
.liste-tage__ort { font-style: normal; font-size: .8rem; color: rgba(255,255,255,.7); }
@media (max-width: 760px) { .gruppe__wasserzeichen { width: 14rem; right: -3rem; top: 2rem; transform: rotate(-8deg); } }