/* site.css - Padel Verein Ollern. Welt: Padelplatz von oben (siehe .impeccable/surfaces/).
   Farben aus dem Logo gemessen: Navy #012d6c, Court-Blau #025fe2, Ball-Gelb #fed517 (nur fuer Jetzt/Live/Countdown). */

@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
/* Barlow Condensed nur fuer die Abfahrtstafel: schmal und hoch wie Fallblatt-Schrift (OFL, public/fonts/LICENSE-barlow.txt) */
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-800-latin.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --navy: #012d6c;
  --navy-tief: #011f4d;
  --court: #025fe2;
  --court-dunkel: #0150c2;
  --ball: #fed517;
  --gruen: #366146;
  --grund: #f3f6fb;
  --flaeche: #fbfcfe;
  --tinte: #0e2148;
  --tinte-leise: #44526e;
  --haarlinie: #d5dde9;
  --ueberschrift: var(--navy);
  --fokus: var(--court);
  --linie: 3px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --rand: clamp(1rem, 4vw, 2.5rem);
  --max: 72rem;
  --display: "Montserrat", "Segoe UI", sans-serif;
  --text: "Figtree", "Segoe UI", sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #061733;
    --flaeche: #0a1f42;
    --tinte: #e4ebf7;
    --tinte-leise: #a9b7d0;
    --haarlinie: #1d3561;
    --ueberschrift: #ffffff;
    --fokus: var(--ball);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--navy) var(--grund); scroll-padding-top: 5rem; }
a, button { touch-action: manipulation; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: 400 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); color: var(--ueberschrift); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
::selection { background: var(--ball); color: var(--navy); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

.icon { width: 1.15em; height: 1.15em; flex: none; }
.breite { width: min(100% - 2 * var(--rand), var(--max)); margin-inline: auto; }

.springen { position: absolute; left: 1rem; top: -4rem; z-index: 30; background: var(--ball); color: var(--navy); padding: 0.75rem 1rem; font-weight: 700; }
.springen:focus { top: 1rem; }

/* Knoepfe: eckig wie das Feld, Druck-Feedback (Emil: scale 0.97, 160ms ease-out) */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 2.75rem; padding: 0.6rem 1.25rem;
  font: 700 1rem/1 var(--display); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  border: 0; border-radius: 0; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.knopf:active { transform: scale(0.97); }
.knopf-court { background: var(--court); color: #fff; }
@media (hover: hover) and (pointer: fine) { .knopf-court:hover { background: var(--court-dunkel); } }

/* Kopf = hintere Glaswand: Navy, darunter die Grundlinie in Court-Blau */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--navy); color: #fff;
  border-bottom: var(--linie) solid var(--court);
  padding-top: env(safe-area-inset-top);
  --fokus: var(--ball);
}
.kopf-innen { width: min(100% - 2 * var(--rand), var(--max)); margin-inline: auto; height: 4rem; display: flex; align-items: center; gap: 0.75rem; }
.marke { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; }
.wortmarke { width: 3.6rem; height: auto; }
.marke-name { white-space: nowrap; font: 700 0.78rem/1.15 var(--display); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.92; }
.kopf-aktion { min-height: 2.5rem; padding-inline: 1rem; }
.marke .wortmarke { flex: none; }
/* Handy: Logo + Name in einer Zeile brauchen den Platz; Mitmachen steht im Menue und gross im Hero */
@media (max-width: 29.99rem) { .kopf-aktion { display: none; } }
.menue-auf, .menue-zu { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.5rem; }

/* Menue: am Handy ein Popover (nativ, ohne JS) als blaues Spielfeld */
.menue { inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: 1rem var(--rand); background: var(--court); color: #fff; overscroll-behavior: contain; overflow-y: auto; }
.menue:popover-open { display: flex; flex-direction: column; }
.menue::backdrop { background: rgb(1 45 108 / 0.4); }
.menue-zu { align-self: flex-end; }
.menue ul { list-style: none; margin: 2rem 0 0; padding: 0; border-top: var(--linie) solid #fff; }
.menue li { border-bottom: var(--linie) solid #fff; }
.menue a { display: block; padding: 1.1rem 0; font: 800 clamp(2rem, 9vw, 3rem)/1 var(--display); letter-spacing: -0.03em; text-decoration: none; }
.menue a[aria-current="page"] { color: var(--ball); }
/* Menue (Handy): rein 260ms, raus 160ms (Antwort schnappt), unterbrechbar per Transition; Punkte 40ms gestaffelt */
@media (prefers-reduced-motion: no-preference) and (max-width: 55.99rem) {
  .menue { opacity: 0; transform: translateY(-0.75rem); transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), overlay 160ms allow-discrete, display 160ms allow-discrete; }
  .menue:popover-open { opacity: 1; transform: none; transition-duration: 260ms; }
  @starting-style { .menue:popover-open { opacity: 0; transform: translateY(-0.75rem); } }
  .menue:popover-open li { animation: menue-punkt 300ms var(--ease-out) both; }
  .menue:popover-open li:nth-child(2) { animation-delay: 40ms; }
  .menue:popover-open li:nth-child(3) { animation-delay: 80ms; }
  .menue:popover-open li:nth-child(4) { animation-delay: 120ms; }
  @keyframes menue-punkt { from { opacity: 0; transform: translateX(-1rem); } }
}

@media (min-width: 56rem) {
  .menue-auf, .menue-zu { display: none; }
  .menue { all: unset; display: block; }
  .menue ul { display: flex; gap: 0.25rem; margin: 0; border: 0; }
  .menue li { border: 0; }
  .menue .nur-handy { display: none; }
  .menue a { padding: 0.5rem 0.9rem; font: 600 1rem/1 var(--display); letter-spacing: 0; position: relative; }
  .menue a::after { content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0; height: var(--linie); background: var(--ball); transform: scaleX(0); transition: transform 200ms var(--ease-out); }
  .menue a[aria-current="page"] { color: #fff; }
  .menue a[aria-current="page"]::after { transform: scaleX(1); }
  .kopf-aktion { margin-left: 0.75rem; }
}
@media (min-width: 56rem) and (hover: hover) and (pointer: fine) { .menue a:hover::after { transform: scaleX(1); } }

/* Seitenkopf der Unterseiten: ein Stueck Spielfeld mit Seitenlinien und Mittellinie */
.seitenkopf { background: var(--court); color: #fff; padding: clamp(2.5rem, 8vw, 4.5rem) 0 0; overflow: hidden; }
.seitenkopf .breite { position: relative; border: var(--linie) solid #fff; border-bottom: 0; padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2rem, 6vw, 3.5rem); }
.seitenkopf .breite::after { content: ""; position: absolute; left: 50%; bottom: 0; width: var(--linie); height: 40%; background: #fff; transform: translateX(-50%); }
.seitenkopf h1 { color: #fff; font-weight: 800; font-size: clamp(2.4rem, 8vw, 4.5rem); letter-spacing: -0.035em; }

/* Lesetext (Impressum, Datenschutz, Verein) */
.text { padding-block: clamp(2rem, 6vw, 3.5rem) clamp(3rem, 8vw, 5rem); }
.text > * { max-width: 68ch; }
.text h2 { font-size: clamp(1.2rem, 3.5vw, 1.45rem); font-weight: 750; margin: 2.2em 0 0.6em; }
.text h2:first-child, .text .vorspann + h2 { margin-top: 1.4em; }
.text .vorspann { font-size: 1.2rem; line-height: 1.5; color: var(--ueberschrift); }
.text a:not(.knopf) { color: var(--court); }
@media (prefers-color-scheme: dark) { .text a:not(.knopf) { color: #8cb6ff; } }

/* Fuss = gegenueberliegende Glaswand */
.fuss { background: var(--navy-tief); color: #dfe7f5; border-top: var(--linie) solid var(--court); padding-bottom: env(safe-area-inset-bottom); --fokus: var(--ball); }
.fuss-innen { width: min(100% - 2 * var(--rand), var(--max)); margin-inline: auto; padding-block: 3rem 1.5rem; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.fuss h2 { font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: 0.75rem; }
.fuss p { margin: 0 0 0.4rem; }
.fuss a { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; padding-block: 0.3rem; }
@media (hover: hover) and (pointer: fine) { .fuss a:hover { color: #fff; text-decoration: underline; } }
.fuss-marke { color: #fff; }
.fuss-marke .wortmarke { width: 4.5rem; margin-bottom: 0.9rem; }
.fuss-recht { grid-column: 1 / -1; list-style: none; margin: 0; padding: 1.25rem 0 0; border-top: 2px solid rgb(255 255 255 / 0.18); display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-size: 0.92rem; color: #b9c6de; align-items: center; }
.fuss-recht a { padding-block: 0; }

/* ---------- Knoepfe auf Court-Blau ---------- */
.knopf-weiss { background: #fff; color: var(--navy); }
.knopf-linie { background: transparent; color: #fff; box-shadow: inset 0 0 0 var(--linie) #fff; }
@media (hover: hover) and (pointer: fine) {
  .knopf-weiss:hover { background: #e3edff; }
  .knopf-linie:hover { background: rgb(255 255 255 / 0.12); }
}
.knopf .icon { width: 1.2em; height: 1.2em; }
.pfeil-link { display: inline-flex; align-items: center; gap: 0.4em; font: 700 1rem/1.2 var(--display); color: var(--court); text-decoration: none; padding-block: 0.4rem; }
.pfeil-link .icon { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pfeil-link:hover .icon { transform: translateX(4px); } }
@media (prefers-color-scheme: dark) { .pfeil-link { color: #8cb6ff; } }

/* ---------- Hero: die Halle am Abend, darin die Abfahrtstafel "Naechster Anpfiff" ---------- */
.hero { position: relative; background: radial-gradient(120% 70% at 50% -10%, rgb(2 95 226 / 0.55), transparent 70%), var(--navy-tief); color: #fff; padding-block: clamp(2rem, 6vw, 4.5rem) clamp(2.5rem, 7vw, 5rem); --fokus: var(--ball); }
.hero-innen { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.hero h1 { color: #fff; font-weight: 800; font-size: clamp(2.6rem, 11vw, 5.6rem); line-height: 0.95; letter-spacing: -0.04em; }
.hero-unter { font-size: clamp(1.05rem, 2.6vw, 1.25rem); line-height: 1.45; max-width: 34ch; margin: 0.75rem 0 1.5rem; color: #d7e3fa; }
.ohne-umbruch { white-space: nowrap; }
.hero-aktionen { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 64rem) {
  .hero-text { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-areas: "titel text" "titel aktionen"; column-gap: 3rem; align-items: end; }
  .hero h1 { grid-area: titel; }
  .hero-unter { grid-area: text; }
  .hero-aktionen { grid-area: aktionen; }
}

/* Die Tafel: fast schwarz, Fallblaetter mit oberer und unterer Haelfte, Scharnier in der Mitte, gelbe Ziffern */
.tafel {
  --fw: calc((100vw - 2 * var(--rand) - 2.5rem) / 9.4);
  --fh: calc(var(--fw) * 1.5);
  --tafel: #0b0e13;
  position: relative; background: var(--tafel); color: #fff;
  padding: clamp(1rem, 3vw, 2rem) clamp(0.9rem, 3vw, 2rem) clamp(1.1rem, 3vw, 1.75rem);
  border-top: 4px solid var(--ball);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.7);
  font-family: "Barlow Condensed", var(--display);
}
.tafel-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 clamp(0.9rem, 2.5vw, 1.5rem); font: 600 clamp(1rem, 3.4vw, 1.5rem)/1 "Barlow Condensed", var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: #c3cad6; }
.tafel-uhr { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.tafel-zaehler { display: flex; align-items: flex-start; justify-content: space-between; }
.tafel-gruppe { display: grid; justify-items: center; gap: 0.55rem; }
.tafel-ziffern { display: flex; gap: clamp(2px, 0.6vw, 6px); }
.tafel-einheit { font: 600 clamp(0.8rem, 2.4vw, 1.05rem)/1 "Barlow Condensed", var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: #8b94a3; }
.tafel-doppelpunkt { font: 800 calc(var(--fh) * 0.6)/var(--fh) "Barlow Condensed", var(--display); color: var(--ball); opacity: 0.8; }
.flap { position: relative; width: var(--fw); height: var(--fh); perspective: calc(var(--fh) * 5); font: 800 calc(var(--fh) * 0.86)/1 "Barlow Condensed", var(--display); color: var(--ball); font-variant-numeric: tabular-nums; }
.flap .h { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden; }
.flap .o { top: 0; transform-origin: bottom; background: #222a36; border-radius: 3px 3px 0 0; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07); }
.flap .u { bottom: 0; transform-origin: top; background: #1a212c; border-radius: 0 0 3px 3px; }
.flap b { display: block; height: var(--fh); line-height: var(--fh); text-align: center; }
.flap .u b { transform: translateY(-50%); }
.flap::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: var(--tafel); } /* Scharnier */
.tafel-jetzt, .tafel-vorbei { margin: 0.25rem 0 0; font: 800 clamp(1.8rem, 6vw, 3rem)/1.1 "Barlow Condensed", var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.tafel-jetzt a { color: var(--ball); display: inline-flex; align-items: center; gap: 0.3em; }
.tafel[data-zustand="jetzt"] .tafel-zaehler, .tafel[data-zustand="vorbei"] .tafel-zaehler { display: none; }
/* Abfahrtszeile wie unter der Uhr am Bahnsteig */
.tafel-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; margin: clamp(1.1rem, 3vw, 1.75rem) 0 0; padding-top: clamp(0.9rem, 2.5vw, 1.25rem); border-top: 2px solid #232b37; }
.tafel-zeile dt { font: 600 clamp(0.85rem, 2.4vw, 1rem)/1 "Barlow Condensed", var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: #8b94a3; }
.tafel-zeile dd { margin: 0.3rem 0 0; font: 800 clamp(1.15rem, 4vw, 1.6rem)/1.1 "Barlow Condensed", var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 48rem) { .tafel-zeile { grid-template-columns: auto auto auto auto; justify-content: space-between; } }
@media (min-width: 72rem) { .tafel { --fw: 6.6rem; } }

/* Der Ball liegt oben auf der Tafel */
.ball { position: absolute; z-index: 4; right: clamp(1rem, 4vw, 2.5rem); top: calc(-1.6rem - 4px); width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ball); box-shadow: 0 4px 10px rgb(0 0 0 / 0.45); }
.ball::before, .ball::after { content: ""; position: absolute; top: 18%; bottom: 18%; width: 45%; border: 1.5px solid #fff; border-radius: 50%; }
.ball::before { left: -22%; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.ball::after { right: -22%; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }

/* Signatur-Moment "Anpfiff" (einmal beim Laden): die Tafel klappt herunter, die Fallblaetter rattern
   auf die Restzeit (start.js), der Ball rollt ueber die Tafelkante und bleibt liegen. Titel und Knoepfe sind sofort da. */
@media (prefers-reduced-motion: no-preference) {
  .tafel { transform-origin: top; animation: tafel-auf 600ms cubic-bezier(0.23, 1, 0.32, 1) 100ms both; }
  @keyframes tafel-auf { from { opacity: 0; transform: perspective(70rem) rotateX(-12deg) translateY(-1rem); } }
  .ball { animation: ball-rollt 1000ms 1300ms both; }
  @keyframes ball-rollt {
    from { transform: translateX(-60vw) rotate(-900deg); opacity: 0; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
    10% { opacity: 1; }
    80% { transform: translateX(0.4rem) rotate(25deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
    to { transform: none; }
  }
}

/* ---------- Abschnitte der Startseite ---------- */
.extras { padding-block: clamp(3rem, 8vw, 5.5rem); }
/* Startseite: Extras als Navy-Band, die vier Punkte als Aufschlagfelder mit weissen Feldlinien */
main > .extras { background: var(--court); color: #fff; --fokus: var(--ball); }
main > .extras h2 { color: #fff; }
main > .extras .extras-liste { grid-template-columns: 1fr 1fr; border: var(--linie) solid #fff; margin-top: 2rem; }
main > .extras .extras-liste li { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 1rem; min-height: 9.5rem; padding: 1.25rem; border: 0; color: #fff; font-size: clamp(1.05rem, 3.6vw, 1.3rem); font-weight: 700; }
main > .extras .extras-liste li:nth-child(odd) { border-right: var(--linie) solid #fff; }
main > .extras .extras-liste li:nth-child(-n+2) { border-bottom: var(--linie) solid #fff; }
main > .extras .extras-liste .icon { width: 2.6rem; height: 2.6rem; color: #fff; }
@media (min-width: 56rem) {
  main > .extras .extras-liste { grid-template-columns: repeat(4, 1fr); }
  main > .extras .extras-liste li { min-height: 12rem; padding: 1.5rem; }
  main > .extras .extras-liste li:nth-child(-n+2) { border-bottom: 0; }
  main > .extras .extras-liste li:not(:last-child) { border-right: var(--linie) solid #fff; }
}
.extras h2, .sponsoren h2 { font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; max-width: 20ch; }
.extras-liste { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); border-top: var(--linie) solid var(--court); }
.extras-liste li { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 0.25rem; border-bottom: 2px solid var(--haarlinie); font: 600 1.1rem/1.3 var(--display); color: var(--ueberschrift); }
.extras-liste .icon { width: 1.6rem; height: 1.6rem; color: var(--court); }
@media (prefers-color-scheme: dark) { .extras-liste .icon { color: var(--ball); } }

.verein-kurz { background: var(--flaeche); border-block: 2px solid var(--court); padding-block: clamp(3rem, 8vw, 5.5rem); }
.verein-kurz-innen { display: grid; gap: clamp(1.75rem, 5vw, 4rem); align-items: center; }
.verein-logo { width: min(17rem, 70vw); height: auto; justify-self: center; }
.verein-kurz h2 { font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 1rem; max-width: 18ch; }
.verein-kurz p { max-width: 58ch; }
@media (min-width: 48rem) { .verein-kurz-innen { grid-template-columns: auto 1fr; } .verein-logo { width: 19rem; } }

/* Sponsorenwand: weisses Band ueber die volle Breite (auch nachts, die Logos sind 1:1 vom Plakat),
   Logos frei ohne Kaesten, optisch gleich gross, zentriert. */
.sponsoren { background: #fff; padding-block: clamp(3rem, 8vw, 5rem); text-align: center; --fokus: var(--court); }
.sponsoren h2 { color: var(--navy); margin-inline: auto; }
.sponsoren-liste { list-style: none; margin: clamp(2rem, 5vw, 3rem) auto 0; padding: 0; max-width: 60rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.75rem, 5vw, 3rem) clamp(2rem, 6vw, 4rem); }
.sponsoren-liste li { display: grid; place-items: center; height: 5.5rem; }
.sponsoren-liste a { display: grid; place-items: center; height: 100%; transition: transform 160ms var(--ease-out); }
.sponsoren-liste a:active { transform: scale(0.97); }
.sponsoren-liste img { max-height: 3.75rem; max-width: min(11rem, 38vw); width: auto; height: auto; }
.sponsoren-liste .kompakt img { max-height: 4.75rem; } /* runde und quadratische Logos wirken sonst zu klein */
.sponsoren-liste .breit { flex-basis: 100%; }
.sponsoren-liste .breit img { max-width: min(19rem, 80vw); max-height: 4.5rem; }
@media (min-width: 48rem) { .sponsoren-liste .breit { flex-basis: auto; } }
.sponsor-name { font: 800 1.15rem/1.1 var(--display); color: var(--ueberschrift); text-align: center; letter-spacing: -0.01em; }

.insta { background: var(--navy); color: #fff; padding-block: clamp(2.5rem, 7vw, 4rem); --fokus: var(--ball); }
.insta-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.insta h2 { color: #fff; font-size: clamp(1.5rem, 4.5vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; max-width: 22ch; }

/* ---------- Galerie ---------- */
.galerie { padding-block: clamp(2rem, 6vw, 3rem) clamp(3rem, 8vw, 5rem); }
.galerie-intro { font-size: 1.2rem; line-height: 1.5; color: var(--ueberschrift); max-width: 40ch; margin: 0 0 1.75rem; }
.galerie-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (min-width: 48rem) { .galerie-raster { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } }
.galerie-raster figure { margin: 0; }
.galerie-raster img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galerie-raster figcaption { font-size: 0.95rem; color: var(--tinte-leise); padding-top: 0.4rem; }
/* Platzhalter: ein kleiner Padelplatz von oben (Netz in der Mitte, Aufschlaglinien), bis echte Fotos da sind */
.platzhalter { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; background:
    linear-gradient(#fff, #fff) center / 2px 100% no-repeat,
    linear-gradient(#fff, #fff) 22% 50% / 2px 100% no-repeat,
    linear-gradient(#fff, #fff) 78% 50% / 2px 100% no-repeat,
    linear-gradient(#fff, #fff) 50% 50% / 56% 2px no-repeat,
    color-mix(in srgb, var(--court) 30%, var(--grund));
  outline: 2px solid #fff; outline-offset: -0.4rem; }
.platzhalter:nth-child(3n+2) { background-color: color-mix(in srgb, var(--court) 18%, var(--grund)); }
.platzhalter span { font: 700 0.75rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); background: #fff; padding: 0.45rem 0.6rem; }
.galerie-insta { margin: 2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; font-size: 1.1rem; }

/* ---------- Turniere ----------
   Ticket: Hauptteil mit Datum gross + Fakten, Abriss (gestrichelte Perforation) mit Startgeld und Flyer,
   bei "ausgebucht" ein schraeger Stempel. Eckig, flach, 3px Court-Oberkante wie jede Liste. */
.turnier { padding-block: clamp(2.5rem, 7vw, 4.5rem); display: grid; gap: 2rem; }
.turnier-kopf h2 { font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 800; letter-spacing: -0.035em; }
.turnier-kurz { font-size: 1.15rem; margin: 0.75rem 0 0; max-width: 50ch; }
.ticket { position: relative; display: grid; background: var(--flaeche); border: 2px solid var(--haarlinie); border-top: var(--linie) solid var(--court); }
.ticket-abriss { position: relative; }
.ticket-haupt, .ticket-abriss { padding: clamp(1.25rem, 4vw, 2.25rem); display: grid; gap: 1.25rem; align-content: start; }
.ticket-abriss { border-top: 2px dashed var(--feldrand, #8796b0); background: color-mix(in srgb, var(--court) 6%, var(--flaeche)); }
.ticket-tag { margin: 0; display: grid; }
.ticket-wochentag { font: 700 1rem/1 var(--display); color: var(--tinte-leise); text-transform: none; }
.ticket-datum { font: 800 clamp(3rem, 14vw, 5.5rem)/0.95 var(--display); letter-spacing: -0.05em; color: var(--court); font-variant-numeric: tabular-nums; margin-top: 0.25rem; }
.ticket-jahr { font-size: 0.32em; letter-spacing: -0.02em; color: var(--ueberschrift); margin-left: 0.3em; }
.ticket-fakten { margin: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 1rem clamp(1.5rem, 5vw, 3rem); }
.ticket-fakten dt { font: 700 0.85rem/1 var(--display); color: var(--tinte-leise); margin-bottom: 0.35rem; }
.ticket-fakten dd { margin: 0; font: 800 clamp(1.2rem, 4.5vw, 1.6rem)/1.1 var(--display); letter-spacing: -0.02em; color: var(--ueberschrift); font-variant-numeric: tabular-nums; }
.ticket-ort { grid-column: 1 / -1; }
.ticket-ort a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.15em; text-decoration-color: var(--court); }
.ticket-ort small { display: block; font: 400 1rem/1.4 var(--text); color: var(--tinte); margin-top: 0.3rem; letter-spacing: 0; }
.ticket-preis { margin: 0; display: grid; color: var(--tinte-leise); font-weight: 600; }
.ticket-preis span { font: 800 clamp(3rem, 12vw, 4.5rem)/1 var(--display); letter-spacing: -0.04em; color: var(--ueberschrift); }
.ticket-anmeldung { margin: 0; max-width: 34ch; }
.ticket-anmeldung a { color: var(--court); }
.ticket .knopf { justify-self: start; }
.ticket-stempel { position: absolute; top: clamp(1rem, 4vw, 2rem); right: clamp(1rem, 4vw, 2rem); margin: 0; padding: 0.35rem 0.8rem; font: 800 clamp(1rem, 3.6vw, 1.5rem)/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); box-shadow: inset 0 0 0 var(--linie) var(--navy); rotate: -9deg; opacity: 0.85; pointer-events: none; }
@media (prefers-color-scheme: dark) { .ticket-datum { color: #8cb6ff; } .ticket-stempel { color: #fff; box-shadow: inset 0 0 0 var(--linie) #fff; } .ticket-ort a, .ticket-anmeldung a { color: #8cb6ff; } }
@media (min-width: 56rem) {
  .ticket { grid-template-columns: 1fr 22rem; }
  .ticket-abriss { border-top: 0; border-left: 2px dashed var(--feldrand, #8796b0); }
  .ticket-abriss:has(.ticket-stempel) { padding-bottom: 6rem; }
  .ticket-stempel { top: auto; bottom: 1.75rem; right: 1.75rem; }
}
/* Ablauf: Linie mit Stationen, Handy senkrecht, ab 48rem waagrecht; die letzte Station (Finale) ist navy gefuellt */
.ablauf { padding-block: clamp(3rem, 8vw, 5.5rem); }
.ablauf h2 { font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 2rem; }
.ablauf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; position: relative; }
.ablauf-liste::before { content: ""; position: absolute; left: 0.6rem; top: 0.6rem; bottom: 3.2rem; width: var(--linie); background: var(--court); transform-origin: top; }
.ablauf-liste li { position: relative; padding-left: 2.6rem; display: grid; gap: 0.2rem; }
.ablauf-liste li::before { content: ""; position: absolute; left: 0; top: 0.15rem; width: 1.35rem; height: 1.35rem; background: var(--grund); box-shadow: inset 0 0 0 var(--linie) var(--court); }
.ablauf-liste li:last-child::before { background: var(--navy); box-shadow: none; }
.ablauf-liste b { font: 800 clamp(1.3rem, 4.5vw, 1.7rem)/1.1 var(--display); letter-spacing: -0.02em; color: var(--ueberschrift); }
.ablauf-liste span { color: var(--tinte-leise); }
@media (prefers-color-scheme: dark) { .ablauf-liste li:last-child::before { background: #fff; } }
@media (min-width: 48rem) {
  .ablauf-liste { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .ablauf-liste::before { left: 0.6rem; right: calc(25% - 0.4rem); top: 0.6rem; bottom: auto; width: auto; height: var(--linie); transform-origin: left; }
  .ablauf-liste li { padding: 2.4rem 0 0; }
}
.spielplan-hinweis { background: var(--navy); color: #fff; --fokus: var(--ball); padding-block: clamp(2.5rem, 7vw, 4rem); }
.spielplan-hinweis h2 { color: #fff; font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.75rem; }
.spielplan-hinweis p { max-width: 55ch; font-size: 1.1rem; margin: 0 0 1.5rem; }

/* ---------- Verein / Mitmachen ---------- */
/* Verein: Seitenkopf mit Vorspann, Ueber uns + Steckbrief, Doppel-Platz, Beitritt auf Navy, Halle */
.seitenkopf-vorspann p { color: #fff; font-size: clamp(1.15rem, 3vw, 1.45rem); line-height: 1.45; max-width: 34ch; margin: 1.25rem 0 0; position: relative; z-index: 1; }
.seitenkopf-vorspann .breite::after { height: 22%; }
.ueber { display: grid; gap: 2.5rem 4rem; padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.ueber h2, .vorstand-band h2, .beitritt h2, .halle-band h2 { font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 1rem; }
.ueber-text p { max-width: 58ch; font-size: 1.1rem; }
.steckbrief dd { font: 800 clamp(1.2rem, 4vw, 1.45rem)/1.15 var(--display); letter-spacing: -0.02em; color: var(--ueberschrift); font-variant-numeric: tabular-nums; }
@media (min-width: 56rem) { .ueber { grid-template-columns: 3fr 2fr; align-items: start; } .steckbrief > div { grid-template-columns: 1fr; } }

/* Vorstand als Trikot-Ruecken: Silhouette per clip-path (Schultern, Aermel), Nachname in Versalien, Initialen als
   Rueckennummer. Erstes Trikot Court-Blau, zweites Navy; darunter Name und Funktion als echter Text. */
.vorstand-band { padding-block: clamp(3rem, 8vw, 5.5rem); border-top: var(--linie) solid var(--court); text-align: center; }
.trikots { list-style: none; margin: 2rem auto 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 4vw, 3rem); max-width: 46rem; }
.trikots li { text-align: center; align-items: center; }
.trikot { width: 100%; }
.trikot-voll { align-self: stretch; }
.trikots li { display: flex; flex-direction: column; gap: 0.3rem; }
.trikot { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; aspect-ratio: 1 / 1.05; padding-top: 22%; margin-bottom: 0.9rem; background: var(--court); color: #fff;
  clip-path: polygon(20% 0, 37% 0, 50% 7%, 63% 0, 80% 0, 100% 16%, 90% 34%, 80% 28%, 80% 100%, 20% 100%, 20% 28%, 10% 34%, 0 16%); }
.trikots li:nth-child(2) .trikot { background: var(--navy); }
.trikot-nachname { font: 800 clamp(0.7rem, 2.6vw, 1.15rem)/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; max-width: 56%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trikot-nr { font: 800 clamp(4rem, 19vw, 9rem)/1 var(--display); letter-spacing: -0.05em; margin-top: 0.35em; font-variant-numeric: tabular-nums; }
.trikot-voll { font: 800 clamp(1.2rem, 4.2vw, 1.7rem)/1.15 var(--display); letter-spacing: -0.02em; color: var(--ueberschrift); text-wrap: balance; border-top: var(--linie) solid var(--court); padding-top: 0.8rem; }
.trikot-funktion { color: var(--tinte-leise); }
@media (prefers-color-scheme: dark) { .trikots li:nth-child(2) .trikot { background: #0b3a85; } }

/* Beitritt: Navy-Glaswand, Betrag gross in Weiss, drei Schritte zwischen weissen Linien */
.beitritt { background: var(--navy); color: #fff; padding-block: clamp(3rem, 8vw, 5.5rem); border-bottom: var(--linie) solid var(--court); --fokus: var(--ball); }
.beitritt h2 { color: #fff; }
.beitritt-innen { display: grid; gap: 2rem 4rem; align-items: start; }
.beitritt-betrag { font: 800 clamp(3.5rem, 15vw, 6rem)/1 var(--display); letter-spacing: -0.04em; margin: 0; font-variant-numeric: tabular-nums; }
.beitritt-zeile { margin: 0.5rem 0 0; color: #c9d6ee; }
.beitritt-schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; border-top: var(--linie) solid #fff; }
.beitritt-schritte li { counter-increment: schritt; display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.15rem 1rem; padding: 1.1rem 0.25rem; border-bottom: 2px solid rgb(255 255 255 / 0.25); }
.beitritt-schritte li::before { content: counter(schritt); grid-row: span 2; font: 800 1.9rem/1 var(--display); color: #8cb6ff; font-variant-numeric: tabular-nums; }
.beitritt-schritte b { font: 800 1.2rem/1.2 var(--display); }
.beitritt-schritte span { color: #c9d6ee; }
.beitritt .knopf { justify-self: start; }
@media (min-width: 56rem) { .beitritt-innen { grid-template-columns: 2fr 3fr; } .beitritt .knopf { grid-column: 2; } }

.halle-band { padding-block: clamp(3rem, 8vw, 5rem); }
.halle-band p { margin: 0; font-size: 1.1rem; }
.halle-name { font: 800 clamp(1.4rem, 4.5vw, 2rem)/1.15 var(--display) !important; letter-spacing: -0.02em; color: var(--ueberschrift); border-top: var(--linie) solid var(--court); padding-top: 1rem; margin-bottom: 0.35rem !important; }
.halle-links { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 1rem !important; }
@media (prefers-color-scheme: dark) { .halle-band .pfeil-link { color: #8cb6ff; } }

.mitmachen { display: grid; gap: 2.5rem; padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(3rem, 8vw, 5rem); }
.mitmachen section { border-top: var(--linie) solid var(--court); padding-top: 1.5rem; }
.mitmachen p { max-width: 55ch; }
@media (min-width: 56rem) { .mitmachen { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* ---------- Formulare (Mitmachen) ---------- */
.formular { display: grid; gap: 1.1rem; margin-top: 1.5rem; max-width: 34rem; }
.feld-zeile { display: grid; gap: 0.35rem; }
.feld-zeile label { font: 700 0.98rem/1.3 var(--display); color: var(--ueberschrift); }
.freiwillig { font: 500 0.85rem var(--text); color: var(--tinte-leise); }
.formular input:not([type="checkbox"]), .formular textarea {
  font: 400 1rem/1.4 var(--text); color: var(--tinte); background: var(--flaeche);
  border: 2px solid #8796b0; border-radius: 0; padding: 0.7rem 0.8rem; min-height: 2.9rem; width: 100%;
  transition: border-color 160ms ease;
}
.formular textarea { resize: vertical; min-height: 6rem; }
.formular ::placeholder { color: #66748f; }
.formular input:focus-visible, .formular textarea:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; border-color: var(--court); }
.formular [aria-invalid="true"] { border-color: #c2261f; }
.hilfe { font-size: 0.9rem; color: var(--tinte-leise); margin: 0; }
.fehler { font-size: 0.92rem; font-weight: 600; color: #b3201a; margin: 0; }
.feld-haken label { display: flex; gap: 0.7rem; align-items: flex-start; font: 400 0.98rem/1.45 var(--text); color: var(--tinte); cursor: pointer; }
.feld-haken input { width: 1.35rem; height: 1.35rem; margin: 0.1rem 0 0; flex: none; accent-color: var(--court); }
.feld-haken a { color: var(--court); }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular .knopf { justify-self: start; min-width: 12rem; }
.formular .knopf:disabled { opacity: 0.6; cursor: not-allowed; }
.formular-danke { border-top: var(--linie) solid var(--court); padding-top: 1.25rem; margin-top: 1.5rem; outline: none; }
.formular-danke h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: 0.5rem; }
@media (prefers-reduced-motion: no-preference) { .formular-danke { animation: danke 280ms var(--ease-out); } @keyframes danke { from { opacity: 0; transform: translateY(0.5rem); } } }
@media (prefers-color-scheme: dark) {
  .formular input:not([type="checkbox"]), .formular textarea { border-color: #5a6c8f; }
  .formular ::placeholder { color: #8d9bb6; }
  .fehler { color: #ff8f88; }
  .formular [aria-invalid="true"] { border-color: #ff8f88; }
  .feld-haken a { color: #8cb6ff; }
}
.hinweis-box { background: var(--ball); color: var(--navy); padding: 1rem 1.1rem; font-weight: 600; margin-bottom: 1.5rem; }
.hinweis-box code { font-size: 0.9em; }

/* ---------- Intern ---------- */
.intern { display: grid; gap: 2.5rem; padding-block: clamp(2rem, 6vw, 3.5rem) clamp(3rem, 8vw, 5rem); }
.intern h2 { font-size: clamp(1.3rem, 4vw, 1.7rem); font-weight: 800; margin-bottom: 0.75rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.anzahl { font: 700 0.85rem/1 var(--display); background: var(--navy); color: #fff; padding: 0.35rem 0.55rem; }
.intern-links, .intern-push-knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.intern-push-knoepfe { margin-bottom: 0.75rem; }
.knopf-rahmen { background: transparent; color: var(--ueberschrift); box-shadow: inset 0 0 0 2px currentColor; }
@media (hover: hover) and (pointer: fine) { .knopf-rahmen:hover { background: rgb(2 95 226 / 0.08); } }
.intern-push { border-top: var(--linie) solid var(--court); padding-top: 1.25rem; }
.eintraege { list-style: none; margin: 0; padding: 0; border-top: var(--linie) solid var(--court); }
.eintrag { padding: 1rem 0.25rem; border-bottom: 2px solid var(--haarlinie); display: grid; gap: 0.35rem; scroll-margin-top: 5rem; }
.eintrag:target { background: rgb(254 213 23 / 0.18); }
.eintrag-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.eintrag-kopf strong { font: 800 1.1rem/1.3 var(--display); color: var(--ueberschrift); }
.eintrag p { margin: 0; }
.eintrag a { color: var(--court); }
.eintrag-nachricht { white-space: pre-line; max-width: 65ch; }
.eintrag-zeit { font-size: 0.88rem; color: var(--tinte-leise); }
.eintrag-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.knopf-klein { font: 700 0.9rem/1 var(--display); min-height: 2.5rem; padding: 0.5rem 0.85rem; border: 2px solid var(--court); background: transparent; color: var(--court); cursor: pointer; transition: transform 160ms var(--ease-out); }
.knopf-klein:active { transform: scale(0.97); }
.knopf-rot { border-color: #b3201a; color: #b3201a; }
.status { font: 700 0.8rem/1 var(--display); padding: 0.3rem 0.5rem; }
.status-neu { background: var(--ball); color: var(--navy); }
.status-bestaetigt { background: #e3ece0; color: var(--gruen); }
.status-warteliste { background: var(--haarlinie); color: var(--tinte); }
.leer { color: var(--tinte-leise); }
@media (prefers-color-scheme: dark) { .eintrag a, .knopf-klein { color: #8cb6ff; border-color: #8cb6ff; } .knopf-rot { color: #ff8f88; border-color: #ff8f88; } }

/* ---------- Login und Mitgliederbereich ---------- */
.login { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(3rem, 8vw, 5rem); max-width: 34rem; margin-left: max(var(--rand), (100% - var(--max)) / 2); }
.login .formular { margin-top: 1rem; }
.login .hilfe { margin-top: 1.5rem; }
.mitglieder { display: grid; gap: 2.5rem; padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(3rem, 8vw, 5rem); }
.mitglieder-haupt { display: grid; gap: 3rem; align-content: start; }
.mitglieder-haupt > section { border-top: var(--linie) solid var(--court); padding-top: 1.25rem; }
.mitteilungen { list-style: none; margin: 0; padding: 0; }
.mitteilungen li { padding: 1.1rem 0; border-bottom: 2px solid var(--haarlinie); }
.mitteilungen h3 { font: 800 1.2rem/1.25 var(--display); color: var(--ueberschrift); margin: 0.2rem 0 0.4rem; }
.mitteilungen p { margin: 0; }
.mitteilung-datum { font: 600 0.9rem/1.2 var(--display); color: var(--tinte-leise); }
.mitglieder-seite { display: grid; gap: 1.75rem; align-content: start; }
.mitglieder-seite section { border-top: var(--linie) solid var(--court); padding-top: 1.25rem; }
.mitglieder-seite h2 { margin-bottom: 0.6rem; }
.mitglieder-seite p { margin: 0 0 0.5rem; }
/* Login: Formular links, rechts ein Court-Feld mit Logo und dem, was Mitglieder davon haben */
.login-zweispaltig { max-width: var(--max); display: grid; gap: 2.5rem; }
.login-zweispaltig > section { max-width: 34rem; }
.login-feld { background: var(--court); color: #fff; padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: inset 0 0 0 0.6rem var(--court), inset 0 0 0 calc(0.6rem + var(--linie)) #fff; display: grid; gap: 1.5rem; align-content: start; --fokus: var(--ball); }
.login-logo { width: 5.5rem; height: 5.5rem; border-radius: 50%; margin: 0.4rem 0 0 0.4rem; }
.login-feld ul { list-style: none; margin: 0 0.4rem; padding: 0; border-top: var(--linie) solid #fff; }
.login-feld li { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 2px solid rgb(255 255 255 / 0.3); }
.login-feld .icon { width: 1.8rem; height: 1.8rem; flex: none; }
.login-feld li div { display: grid; gap: 0.15rem; }
.login-feld b { font: 800 1.15rem/1.2 var(--display); }
.login-feld li span { color: #e3edff; }
.login-feld > p { margin: 0 0.4rem 0.4rem; }
.login-feld a { color: #fff; font-weight: 700; text-underline-offset: 0.2em; }
@media (min-width: 56rem) { .login-zweispaltig { grid-template-columns: minmax(0, 34rem) minmax(0, 26rem); justify-content: space-between; align-items: start; } }

/* Mitgliedsausweis: Navy-Karte, Wortmarke mit Ball im O, Name gross, Daten als Zeilen */
.mitglieder-seite .ausweis { background: var(--navy); color: #fff; border-top: 0; padding: 1.5rem; display: grid; gap: 0.9rem; border-bottom: 4px solid var(--court); }
.ausweis-marke .wortmarke { width: 4rem; display: block; }
/* Handy: nur der Ausweis vor die Vereinszeiten, der Rest der Seitenspalte bleibt darunter */
@media (max-width: 55.99rem) { .mitglieder-seite { display: contents; } .mitglieder-seite .ausweis { order: -1; } .mitglieder-seite > .knopf, .mitglieder-seite > form { justify-self: start; } }
.ausweis h2 { color: #fff; font-size: clamp(1.5rem, 4.5vw, 2rem); margin: 0 !important; }
.ausweis dl { margin: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0.5rem 1.75rem; }
.ausweis dt { font: 700 0.8rem/1 var(--display); color: #a9b7d0; margin-bottom: 0.3rem; }
.ausweis dd { margin: 0; font: 800 1.05rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.ausweis-mail { margin: 0 !important; color: #c9d6ee; font-size: 0.95rem; overflow-wrap: anywhere; }
/* Naechstes Turnier mit Tage-Zahl */
.naechstes-tage { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.75rem !important; }
.naechstes-tage b { font: 800 clamp(3rem, 10vw, 4rem)/1 var(--display); letter-spacing: -0.04em; color: var(--court); font-variant-numeric: tabular-nums; }
.naechstes-tage span { font: 700 1.1rem/1 var(--display); color: var(--tinte-leise); }
@media (prefers-color-scheme: dark) { .naechstes-tage b { color: #8cb6ff; } }
/* Vereinszeit: Kalenderblatt links neben Titel und Zeit */
.vereinszeit-kopf { grid-template-columns: auto 1fr; column-gap: 1rem; }
.vereinszeit-kopf > :not(.kalenderblatt) { grid-column: 2; }
.kalenderblatt { grid-row: 1 / span 2; margin: 0; width: 4.2rem; display: grid; justify-items: center; align-content: center; padding: 0.4rem 0; background: var(--flaeche); box-shadow: inset 0 0 0 2px var(--haarlinie); border-top: 6px solid var(--court); font-variant-numeric: tabular-nums; }
.kalenderblatt span { font: 700 0.75rem/1.2 var(--display); color: var(--tinte-leise); }
.kalenderblatt b { font: 800 1.9rem/1 var(--display); letter-spacing: -0.03em; color: var(--ueberschrift); }
.vereinszeit-kopf .austragen, .vereinszeit-kopf .hinweis-box { grid-column: 1 / -1; }
.vereinszeit-bald { color: var(--court); }
@media (prefers-color-scheme: dark) { .vereinszeit-bald { color: #8cb6ff; } }
.mitglieder-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.mitglieder-seite form { margin: 0; }
.mitglieder-seite > .knopf { justify-self: start; }
@media (min-width: 56rem) { .mitglieder { grid-template-columns: 3fr 2fr; gap: 4rem; } }

main { overflow-x: clip; } /* hereinschiebende Elemente duerfen keine seitliche Scrollleiste erzeugen */

@property --zahl { syntax: "<integer>"; inherits: true; initial-value: 0; }

/* ---------- Startseite: Uebergaenge beim Scrollen ----------
   Scroll-gesteuert (animation-timeline), laeuft also mit dem Finger vor und zurueck, ohne JS.
   Jeder Bereich hat seine eigene Bewegung. Animiert werden translate/scale/rotate (nicht transform),
   damit das Druck-Feedback der Knoepfe weiter funktioniert. Ohne Unterstuetzung oder mit
   reduzierter Bewegung steht alles einfach da. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Hero: die Tafel tritt beim Wegscrollen zurueck */
    .hero { view-timeline: --hero block; }
    .hero-innen { animation: hero-zurueck linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    @keyframes hero-zurueck { to { scale: 0.92; translate: 0 10vh; opacity: 0.25; } }

    /* Extras: das blaue Spielfeld schiebt sich mit schraeger Kante hoch, die Felder kommen nacheinander */
    main > .extras { animation: feld-schieben linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes feld-schieben { from { clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
    main > .extras .extras-liste li { animation: feld-kommt cubic-bezier(0.23, 1, 0.32, 1) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    main > .extras .extras-liste li:nth-child(2) { animation-range: entry 8% cover 34%; }
    main > .extras .extras-liste li:nth-child(3) { animation-range: entry 16% cover 38%; }
    main > .extras .extras-liste li:nth-child(4) { animation-range: entry 24% cover 42%; }
    @keyframes feld-kommt { from { opacity: 0; translate: 0 2.5rem; } }

    /* Verein: das Logo rollt herein wie ein Ball, der Text gleitet nach */
    .verein-logo { animation: logo-rollt cubic-bezier(0.23, 1, 0.32, 1) both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    @keyframes logo-rollt { from { opacity: 0; translate: -40vw 0; rotate: -200deg; } }
    .verein-kurz-innen > div { animation: text-gleitet cubic-bezier(0.23, 1, 0.32, 1) both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
    @keyframes text-gleitet { from { opacity: 0; translate: 3rem 0; } }

    /* Verein-Seite: jeder Bereich mit eigener Bewegung, alles am Scrollen festgemacht */
    .seitenkopf-vorspann h1 { animation: titel-kommt var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    .seitenkopf-vorspann p { animation: text-gleitet var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes titel-kommt { from { opacity: 0; translate: 0 1.5rem; letter-spacing: 0.04em; } }
    .ueber-text { animation: text-gleitet var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .steckbrief { animation: linie-waechst linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    @keyframes linie-waechst { from { border-top-color: transparent; } }
    .steckbrief > div { animation: zeile-kommt var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    .steckbrief > div:nth-child(2) { animation-range: entry 8% cover 30%; }
    .steckbrief > div:nth-child(3) { animation-range: entry 16% cover 35%; }
    .steckbrief > div:nth-child(4) { animation-range: entry 24% cover 40%; }
    @keyframes zeile-kommt { from { opacity: 0; translate: 2rem 0; } }
    /* Trikots: werden wie aus der Tasche hochgezogen und drehen sich dabei nach vorn */
    .trikot { animation: trikot-hoch var(--ease-out) both; animation-timeline: view(); animation-range: entry 5% cover 40%; }
    .trikots li:nth-child(2) .trikot { animation-range: entry 15% cover 48%; }
    @keyframes trikot-hoch { from { opacity: 0; translate: 0 4rem; rotate: -8deg; scale: 0.85; } }
    .trikots li:nth-child(2) .trikot { animation-name: trikot-hoch-2; }
    @keyframes trikot-hoch-2 { from { opacity: 0; translate: 0 4rem; rotate: 8deg; scale: 0.85; } }
    .trikot-voll, .trikot-funktion { animation: text-gleitet var(--ease-out) both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    /* Beitritt: das Band schiebt sich schraeg hoch, der Betrag zaehlt auf 20, die Schritte kommen nacheinander */
    .beitritt { animation: feld-schieben linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .beitritt-betrag span { counter-reset: betrag var(--zahl); animation: zaehlt linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .beitritt-betrag span { font-size: 0; }
    .beitritt-betrag span::after { content: counter(betrag); font-size: clamp(3.5rem, 15vw, 6rem); }
    @keyframes zaehlt { from { --zahl: 0; } to { --zahl: var(--betrag); } }
    .beitritt-schritte { animation: linie-waechst linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    .beitritt-schritte li { animation: zeile-kommt var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    .beitritt-schritte li:nth-child(2) { animation-range: entry 10% cover 32%; }
    .beitritt-schritte li:nth-child(3) { animation-range: entry 20% cover 40%; }
    .beitritt .knopf { animation: knopf-kommt var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes knopf-kommt { from { opacity: 0; scale: 0.8; } }
    /* Halle: Linie zieht sich von links auf, Name und Links folgen */
    .halle-name { animation: halle-linie var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes halle-linie { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    .halle-band h2, .halle-links { animation: text-gleitet var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }

    /* Turniere: Ticket kommt schraeg herein und legt sich gerade, der Stempel knallt drauf, der Abriss gleitet nach */
    .ticket { animation: ticket-kommt var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes ticket-kommt { from { opacity: 0; translate: 0 3rem; rotate: 2.5deg; } }
    .ticket-datum { animation: titel-kommt var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .ticket-fakten > div { animation: zeile-kommt var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .ticket-fakten > div:nth-child(2) { animation-range: entry 6% cover 34%; }
    .ticket-fakten > div:nth-child(3) { animation-range: entry 12% cover 38%; }
    .ticket-fakten > div:nth-child(4) { animation-range: entry 18% cover 42%; }
    .ticket-abriss { animation: abriss-kommt var(--ease-out) both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    @keyframes abriss-kommt { from { opacity: 0; translate: 2rem 0; } }
    .ticket-stempel { animation: stempel linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
    @keyframes stempel { 0% { opacity: 0; scale: 2.4; rotate: -20deg; } 70% { opacity: 0.85; scale: 0.95; rotate: -9deg; } 100% { opacity: 0.85; scale: 1; rotate: -9deg; } }
    /* Ablauf: die Linie zieht sich durch, die Stationen kommen der Reihe nach */
    .ablauf-liste::before { animation: linie-zieht linear both; animation-timeline: --ablauf; animation-range: entry 20% cover 55%; }
    .ablauf-liste { view-timeline: --ablauf block; }
    @keyframes linie-zieht { from { scale: 1 0; } }
    @media (min-width: 48rem) { @keyframes linie-zieht { from { scale: 0 1; } } }
    .ablauf-liste li { animation: station-kommt var(--ease-out) both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
    .ablauf-liste li:nth-child(2) { animation-range: entry 18% cover 42%; }
    .ablauf-liste li:nth-child(3) { animation-range: entry 26% cover 49%; }
    .ablauf-liste li:nth-child(4) { animation-range: entry 34% cover 56%; }
    @keyframes station-kommt { from { opacity: 0; translate: 0 1.5rem; } }
    .spielplan-hinweis { animation: feld-schieben linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }

    /* Mitglieder: Ausweis schiebt sich herein, Vereinszeiten und Courts kommen nacheinander, Login-Feld gleitet nach */
    .ausweis { animation: ticket-kommt var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    .vereinszeit { animation: station-kommt var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    .court-feld { animation: station-kommt var(--ease-out) both; animation-timeline: view(); animation-range: entry 5% cover 30%; }
    .court-feld:nth-child(2) { animation-range: entry 12% cover 36%; }
    .court-feld:nth-child(3) { animation-range: entry 19% cover 42%; }
    .naechstes-tage b { animation: titel-kommt var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .login-feld { animation: abriss-kommt var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    .login-feld li { animation: zeile-kommt var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    .login-feld li:nth-child(2) { animation-range: entry 8% cover 30%; }
    .login-feld li:nth-child(3) { animation-range: entry 16% cover 35%; }

    /* Sponsoren: Logos tauchen nacheinander aus der Unschaerfe auf */
    .sponsoren-liste li { animation: logo-scharf cubic-bezier(0.23, 1, 0.32, 1) both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    .sponsoren-liste li:nth-child(2) { animation-range: entry 5% cover 28%; }
    .sponsoren-liste li:nth-child(3) { animation-range: entry 10% cover 31%; }
    .sponsoren-liste li:nth-child(4) { animation-range: entry 15% cover 34%; }
    .sponsoren-liste li:nth-child(5) { animation-range: entry 20% cover 37%; }
    .sponsoren-liste li:nth-child(6) { animation-range: entry 25% cover 40%; }
    .sponsoren-liste li:nth-child(7) { animation-range: entry 30% cover 43%; }
    @keyframes logo-scharf { from { opacity: 0; scale: 0.85; filter: blur(8px); } }

    /* Instagram: Ueberschrift und Knopf schieben von beiden Seiten zusammen */
    .insta h2 { animation: von-links cubic-bezier(0.23, 1, 0.32, 1) both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .insta .knopf { animation: von-rechts cubic-bezier(0.23, 1, 0.32, 1) both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes von-links { from { opacity: 0; translate: -4rem 0; } }
    @keyframes von-rechts { from { opacity: 0; translate: 4rem 0; } }
  }
}

/* Vereinszeiten im Mitgliederbereich: jede Zeit ein Block, jeder Court ein kleines Spielfeld (Court-Blau, weisse Linie) */
.vereinszeiten { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 2.25rem; }
.vereinszeit { scroll-margin-top: 5rem; }
.vereinszeit-kopf { display: grid; gap: 0.35rem; margin-bottom: 0.9rem; }
.vereinszeit-kopf h3 { font: 800 1.35rem/1.15 var(--display); color: var(--ueberschrift); margin: 0; }
.vereinszeit-wann { margin: 0; font: 600 1rem/1.3 var(--display); color: var(--tinte-leise); display: flex; flex-wrap: wrap; gap: 0 0.75rem; font-variant-numeric: tabular-nums; }
.austragen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0.25rem 0 0; }
.courts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.75rem; }
.court-feld { background: var(--court); color: #fff; padding: 1rem; box-shadow: inset 0 0 0 0.35rem var(--court), inset 0 0 0 calc(0.35rem + 2px) #fff; display: grid; gap: 0.75rem; align-content: start; --fokus: var(--ball); }
.court-feld h4 { margin: 0.2rem 0.3rem 0; font: 800 1.05rem/1.2 var(--display); display: flex; justify-content: space-between; gap: 0.5rem; }
.belegung { font-variant-numeric: tabular-nums; }
.court-feld ul { list-style: none; margin: 0 0.3rem; padding: 0; display: grid; gap: 0.35rem; }
.court-feld li { padding: 0.45rem 0.6rem; font: 600 0.98rem/1.2 var(--display); }
.court-feld .spieler { background: var(--navy); }
.court-feld .spieler.ich { background: #fff; color: var(--navy); }
.court-feld .du { font-weight: 500; opacity: 0.75; }
.court-feld .frei { border: 2px dashed rgb(255 255 255 / 0.45); color: #dce8ff; font-weight: 500; }
.court-feld form { margin: 0 0.3rem 0.2rem; }
.court-feld .knopf { width: 100%; justify-content: center; }
.court-feld .voll { margin: 0 0.3rem 0.2rem; font: 700 0.95rem/1 var(--display); color: #dce8ff; }

/* Vorstand: frisch erzeugter Link, kompakte Formulare */
.link-hinweis { background: var(--flaeche); border: var(--linie) solid var(--court); padding: 1.25rem; display: grid; gap: 0.75rem; }
.link-hinweis p { margin: 0; }
.link-feld { width: 100%; font: 400 0.95rem/1.4 ui-monospace, monospace; padding: 0.6rem 0.7rem; border: 2px solid var(--haarlinie); background: #fff; color: var(--tinte); border-radius: 0; }
.intern-unter { font: 800 1.15rem/1.2 var(--display); color: var(--ueberschrift); margin: 1.75rem 0 0; }
.formular-kompakt { max-width: 30rem; }
.formular select { font: inherit; padding: 0.65rem 0.7rem; border: 2px solid #8796b0; background: var(--flaeche); color: var(--tinte); border-radius: 0; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.formular fieldset { border: 0; margin: 0; padding: 0; }
.formular legend { font: 700 0.98rem/1.3 var(--display); color: var(--ueberschrift); padding: 0; margin-bottom: 0.35rem; }
.haken { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; font: 400 1rem/1.3 var(--text); color: var(--tinte); }
.haken input { width: 1.25rem; height: 1.25rem; accent-color: var(--court); margin: 0; }