/* LAZ Rhein-Sieg – Stylesheet */

:root {
  --rot: #E30613;
  --rot-text: #B0040F;
  --rot-dunkel: #7A0209;
  --gold: #F5B700;
  --schwarz: #111111;
  --dunkel: #1E1E1E;
  --dunkel-2: #2A2A2A;
  --dunkel-3: #3A3A3A;
  --linie-dunkel: #333333;
  --grau-text: #555555;
  --grau-hell: #BDBDBD;
  --grau-hell-2: #CFCFCF;
  --flaeche: #F4F4F4;
  --linie: #E2E2E2;
  --weiss: #FFFFFF;
  --breite: 1280px;
  --schrift: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titel: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--weiss); color: var(--schwarz);
  font-family: var(--schrift); font-size: 1.0625rem; line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }
a { color: var(--rot-text); text-decoration: none; }
a:hover { color: var(--rot-dunkel); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { margin: 0; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
p { margin: 0; }

.innen { max-width: var(--breite); margin: 0 auto; }
.abschnitt { padding: 88px 24px; }
.titel-xl, .titel-l, .titel-m {
  font-family: var(--titel); font-weight: 800; text-transform: uppercase; line-height: 1;
}
.titel-xl { letter-spacing: -0.01em; font-size: clamp(2.375rem, 6vw, 4.75rem); line-height: 0.95; overflow-wrap: anywhere; hyphens: auto; }
.titel-l { font-size: clamp(2.5rem, 5vw, 3.5rem); }
.titel-m { font-size: clamp(2.125rem, 4vw, 3.25rem); }
.kennzeile {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--titel); font-weight: 700; font-size: 0.9375rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--rot-text);
}
.kennzeile::before { content: ""; width: 40px; height: 3px; background: var(--rot); flex: none; }
.kennzeile.mitte::after { content: ""; width: 40px; height: 3px; background: var(--rot); flex: none; }
.kennzeile.gold { color: var(--gold); }
.kennzeile.gold::before { background: var(--gold); }
.kennzeile.hell { color: var(--weiss); }
.kennzeile.hell::before { background: var(--weiss); }
.grau { color: var(--grau-text); }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: 1.0625rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  font-family: inherit; transition: background-color .15s, color .15s, border-color .15s;
}
.knopf:hover { text-decoration: none; }
.knopf-rot { background: var(--rot); color: var(--weiss); }
.knopf-rot:hover { background: var(--rot-text); color: var(--weiss); }
.knopf-schwarz { background: var(--schwarz); color: var(--weiss); }
.knopf-schwarz:hover { background: #333; color: var(--weiss); }
.knopf-rand { border-color: currentColor; color: var(--weiss); background: transparent; }
.knopf-rand:hover { background: var(--weiss); color: var(--schwarz); border-color: var(--weiss); }
.knopf-rand-dunkel { border-color: var(--schwarz); color: var(--schwarz); }
.knopf-rand-dunkel:hover { background: var(--schwarz); color: var(--weiss); }
.knopf-folgt { background: #e6e6e6; color: #555; cursor: default; }
.knopf-folgt.hell { background: rgba(255,255,255,.18); color: var(--weiss); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; }
.pfeil-link { font-weight: 700; }

/* ---------------------------------------------------------------- Kopfzeile */
.kopfzeile { position: sticky; top: 0; z-index: 50; background: var(--weiss); box-shadow: 0 1px 0 #E6E6E6; transition: box-shadow .2s ease, background-color .2s ease; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopfzeile { background: rgba(255,255,255,.82); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); box-shadow: none; }
}
.kopfzeile.gescrollt { box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.07); }
.kopfzeile.nav-offen { background: var(--weiss); }
@media (prefers-reduced-transparency: reduce) { .kopfzeile { background: var(--weiss); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-contrast: more) { .kopfzeile { background: var(--weiss); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 2px 0 var(--schwarz); } }
.kopfzeile .innen { padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; flex-direction: column; color: var(--schwarz); line-height: 1; }
.logo:hover { text-decoration: none; color: var(--schwarz); }
.logo svg { width: 84px; height: 16px; }
.logo-laz { font-family: var(--titel); font-weight: 800; font-size: 2.125rem; }
.logo-ort { font-family: var(--titel); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.18em; }

.hauptnav { display: flex; align-items: center; gap: 2px; }
.hauptnav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.hauptnav li { position: relative; }
.nav-punkt {
  background: none; border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 1rem;
  color: var(--schwarz); padding: 10px 12px; min-height: 44px; display: flex; align-items: center; gap: 6px;
  border-radius: 8px;
}
.nav-punkt:hover { color: var(--rot-text); text-decoration: none; }
.nav-punkt[aria-current="page"] { color: var(--rot-text); }
.nav-punkt svg { width: 12px; height: 12px; transition: transform .15s; }
.nav-punkt[aria-expanded="true"] svg { transform: rotate(180deg); }
.untermenue {
  display: none; list-style: none; margin: 0; position: absolute; top: 100%; left: 0; min-width: 250px;
  background: var(--weiss); border-top: 3px solid var(--rot); border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 8px; flex-direction: column;
}
.untermenue a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--schwarz); font-weight: 600; }
.untermenue a:hover { background: var(--flaeche); text-decoration: none; color: var(--rot-text); }
.hat-menue.offen > .untermenue { display: flex; animation: aufklappen .18s cubic-bezier(.2,.8,.2,1); }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } }
@media (hover: hover) and (min-width: 1021px) {
  .hat-menue:hover > .untermenue { display: flex; animation: aufklappen .18s cubic-bezier(.2,.8,.2,1); }
}
.nav-cta { margin-left: 10px; min-height: 44px; padding: 10px 20px; font-size: 1rem; }
.menue-knopf {
  display: none; background: none; border: 0; cursor: pointer; width: 48px; height: 48px;
  align-items: center; justify-content: center; color: var(--schwarz); border-radius: 8px;
}
.menue-knopf svg { width: 28px; height: 28px; }

@media (max-width: 1020px) {
  .menue-knopf { display: inline-flex; }
  .hauptnav {
    display: flex; visibility: hidden; opacity: 0; transform: translateY(-12px); pointer-events: none;
    transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s linear .25s;
    position: absolute; left: 0; right: 0; top: 100%; background: var(--weiss);
    border-bottom: 4px solid var(--rot); box-shadow: 0 16px 32px rgba(0,0,0,.15);
    flex-direction: column; align-items: stretch; padding: 8px 16px 20px; max-height: calc(100vh - 80px); overflow-y: auto;
  }
  .kopfzeile.nav-offen .hauptnav { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
  .hauptnav > ul { flex-direction: column; align-items: stretch; }
  .nav-punkt { width: 100%; justify-content: space-between; font-size: 1.1875rem; padding: 14px 8px; border-bottom: 1px solid #EEE; border-radius: 0; }
  .untermenue { position: static; box-shadow: none; border: 0; border-radius: 0; padding: 4px 0 8px 12px; min-width: 0; }
  .untermenue a { font-size: 1.0625rem; }
  .nav-cta { margin: 16px 0 0; width: 100%; }
}

/* ---------------------------------------------------------------- Bühne */
.buehne { position: relative; background: #2B2B2B; color: var(--weiss); overflow: hidden; }
.buehne-medien { position: absolute; inset: 0; }
.buehne-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 0; transition: opacity 1.4s ease; }
.buehne-bild.aktiv { opacity: 1; }
.buehne-pause { position: absolute; z-index: 2; left: 16px; bottom: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.35); color: var(--weiss); display: grid; place-items: center; cursor: pointer; padding: 0; }
.buehne-pause:hover, .buehne-pause:focus-visible { background: rgba(0,0,0,.65); }
.buehne-pause svg { width: 16px; height: 16px; }
.buehne-pause .symbol-start, .buehne-pause[aria-pressed="true"] .symbol-pause { display: none; }
.buehne-pause[aria-pressed="true"] .symbol-start { display: block; }
@media (prefers-reduced-motion: reduce) { .buehne-bild { transition: none; } }
.buehne::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.82) 40%, rgba(10,10,10,.45) 75%, rgba(10,10,10,.3) 100%);
}
.buehne .innen { position: relative; z-index: 1; padding: 130px 24px 140px; display: flex; flex-direction: column; gap: 22px; }
.buehne h1 {
  font-family: var(--titel); font-weight: 800; font-size: clamp(3.375rem, 8vw, 6.5rem);
  line-height: .96; text-transform: uppercase; letter-spacing: -0.01em;
}
.buehne h1 span { color: var(--rot); }
.buehne h1, .buehne p { text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.buehne p { font-size: 1.25rem; max-width: 600px; color: #E6E6E6; }
.bildnachweis { position: absolute; z-index: 1; right: 16px; bottom: 12px; font-size: 0.75rem; color: var(--grau-hell); }
@media (max-width: 640px) {
  .buehne .innen { padding: 80px 20px 96px; }
  .buehne::after { background: linear-gradient(90deg, rgba(10,10,10,.9), rgba(10,10,10,.72)); }
  .buehne p { font-size: 1.125rem; }
}

/* ---------------------------------------------------------------- Mitmachen */
.mitmachen { background: var(--rot); color: var(--weiss); padding: 80px 24px; }
.mitmachen .innen { display: flex; flex-direction: column; gap: 36px; }
.zeile-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.mitmachen .zeile-kopf p { font-size: 1.1875rem; max-width: 480px; }
.gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.gruppe { background: var(--weiss); color: var(--schwarz); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 8px; }
.gruppe h3 { font-family: var(--titel); font-weight: 800; font-size: 1.875rem; text-transform: uppercase; line-height: 1.1; }
.gruppe .alter { font-weight: 700; color: var(--rot-text); }
.gruppe p { color: var(--grau-text); }

/* ---------------------------------------------------------------- Eltern & Shop */
/* Startseite: jeder Abschnitt hebt sich vom vorherigen ab (Rot → Hellgrau → Weiß → Schwarz → Weiß → Shop → Hellgrau → Weiß) */
.eltern-abschnitt { background: var(--flaeche); padding-top: 72px; padding-bottom: 72px; }
.shop-abschnitt { padding: 0 24px 88px; }
.shop-abschnitt .shop { margin-top: 0; }
.eltern-raster { display: flex; flex-wrap: wrap; gap: 48px; }
.eltern-text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.eltern-text .titel-m { font-size: clamp(2.375rem, 4.5vw, 3.25rem); }
.eltern-fragen { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; }
.eltern-fragen a {
  display: flex; justify-content: space-between; gap: 12px; padding: 18px 0; border-bottom: 1px solid rgba(0, 0, 0, .12);
  color: var(--schwarz); font-weight: 700; font-size: 1.1875rem;
}
.eltern-fragen a:last-child { border-bottom: 0; }
.eltern-fragen a span { color: var(--rot-text); }
.eltern-fragen a:hover { color: var(--rot-text); text-decoration: none; }
.kleine-zeile { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 0.875rem; color: var(--rot-text); }

.shop {
  margin-top: 56px; background: var(--schwarz); color: var(--weiss); border-radius: 16px; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: stretch;
}
.shop-text { flex: 2 1 460px; min-width: 0; padding: 44px 48px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.shop-text p { color: var(--grau-hell-2); max-width: 480px; }
.shop-text h2 { font-size: clamp(2.25rem, 4.5vw, 3rem); }
.shop-text h2 span { color: var(--rot); }
.shop-text .knopf { align-self: flex-start; }
.shop-bild { flex: 1 1 320px; min-height: 280px; background: var(--dunkel-3); display: flex; align-items: center; justify-content: center; color: #A8A8A8; font-weight: 700; text-align: center; padding: 24px; }
.shop-bild { position: relative; overflow: hidden; }
.shop-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 45%; }
@media (max-width: 640px) { .shop-text { padding: 32px 24px; } }

/* ---------------------------------------------------------------- Leistungszentrum */
.leistung { background: var(--schwarz); color: var(--weiss); }
.leistung .innen { display: flex; flex-direction: column; gap: 40px; }
.leistung .kleine-zeile { color: var(--gold); }
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--linie-dunkel); border-bottom: 1px solid var(--linie-dunkel); }
.zahl { padding: 28px 24px 28px 0; display: flex; flex-direction: column; }
.zahl strong { font-family: var(--titel); font-weight: 800; font-size: 4.5rem; line-height: 1; color: var(--gold); }
@media (max-width: 640px) {
  .zahlen { grid-template-columns: 1fr 1fr; }
  .zahl { padding: 20px 12px 20px 0; }
  .zahl strong { font-size: 3.25rem; }
  .zahl span { font-size: .9375rem; line-height: 1.35; }
}
.zahl span { color: var(--grau-hell); }

.team { display: flex; flex-wrap: wrap; gap: 20px; }
.fokus { flex: 2 1 520px; min-width: 0; background: var(--dunkel); border-radius: 20px; overflow: hidden; display: flex; flex-wrap: wrap; position: relative; }
.fokus-spur { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fokus-spur::-webkit-scrollbar { display: none; }
.fokus-folie { display: flex; flex-wrap: wrap; flex: 0 0 100%; width: 100%; color: inherit; scroll-snap-align: start; scroll-snap-stop: always; }
.fokus-folie:hover { text-decoration: none; color: inherit; }
.fokus-folie:hover .fokus-name { color: var(--gold); }
.fokus-bild { position: relative; overflow: hidden; flex: 1 1 260px; min-height: 360px; background: var(--dunkel-3); display: flex; align-items: center; justify-content: center; color: #A8A8A8; font-weight: 700; text-align: center; padding: 16px; }
.fokus-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; z-index: 1; }
.fokus-initialen { font-family: var(--titel); font-weight: 800; font-size: 6rem; color: #5A5A5A; }
.fokus-text { flex: 1 1 260px; padding: 32px 32px 56px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.fokus-text .marke { font-size: 0.8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.fokus-name { font-family: var(--titel); font-weight: 800; font-size: 2.75rem; line-height: 1; text-transform: uppercase; }
.fokus-info { color: var(--grau-hell); }
.fokus .punkte { position: absolute; right: 24px; bottom: 8px; z-index: 2; }
.punkte { display: flex; gap: 0; padding-top: 4px; }
.punkte button { position: relative; width: 24px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .2s; }
.punkte button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 5px; background: #555; transform: translate(-50%, -50%); transition: width .2s, background-color .2s; }
.punkte button[aria-current="true"] { width: 40px; }
.punkte button[aria-current="true"]::after { width: 28px; background: var(--rot); }
.team-seite { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.team-kachel {
  flex: 1 1 auto; background: var(--dunkel); border: 0; border-radius: 20px; padding: 24px; color: var(--weiss);
  cursor: pointer; text-align: left; font-family: inherit; font-size: inherit; display: flex; gap: 16px; align-items: center;
}
.team-kachel:hover { background: var(--dunkel-2); color: var(--weiss); text-decoration: none; }
.rund { width: 84px; height: 84px; flex: none; border-radius: 50%; background: var(--dunkel-3); object-fit: cover; }
.team-kachel .klein { font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grau-hell); }
.team-kachel strong { display: block; font-family: var(--titel); font-weight: 800; font-size: 1.625rem; text-transform: uppercase; line-height: 1.1; }
.team-kachel .unter { color: var(--grau-hell); font-size: 0.9375rem; }
.kreis-pfeil { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--rot); display: flex; align-items: center; justify-content: center; margin-left: auto; }
.kreis-pfeil svg { width: 16px; height: 16px; }

.trainer { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; border-top: 1px solid var(--linie-dunkel); padding-top: 32px; }
.trainer-kopf { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; }
.trainer-kopf strong { font-family: var(--titel); font-weight: 800; font-size: 1.875rem; text-transform: uppercase; }
.trainer-kopf span { color: var(--grau-hell); }
.trainer-liste { display: flex; gap: 16px; align-items: center; min-width: 0; flex: 1 1 520px; justify-content: flex-end; }
.trainer-spur { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; max-width: 620px; min-width: 0; padding: 4px 0; }
.trainer-spur::-webkit-scrollbar { display: none; }
.trainer-spur .trainer-person { flex: 0 0 auto; scroll-snap-align: start; }
@media (max-width: 760px) {
  .trainer-liste { flex-wrap: wrap; justify-content: flex-start; }
  .trainer-spur { max-width: none; width: 100%; margin-right: -24px; padding-right: 24px; }
  .trainer-liste .rund-knopf { display: none; }
}
.trainer-person { display: flex; align-items: center; gap: 10px; min-width: 170px; font-size: 0.9375rem; }
.trainer-person[hidden] { display: none; }
.trainer-person .bild { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--dunkel-3); }
.trainer-person span { display: flex; flex-direction: column; }
.trainer-person em { font-style: normal; color: var(--grau-hell); }
.rund-knopf { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--weiss); background: none; color: var(--weiss); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rund-knopf:hover { background: var(--weiss); color: var(--schwarz); }
.rund-knopf svg { width: 16px; height: 16px; }
.leistung a.hell { color: var(--weiss); font-weight: 700; }

/* ---------------------------------------------------------------- News */
.news-abschnitt { padding: 88px 24px; }
.kopf-mit-link { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 32px; }
.news-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; }
.news-karte { display: flex; flex-direction: column; gap: 14px; color: var(--schwarz); }
.news-karte:hover { text-decoration: none; color: var(--schwarz); }
.news-karte:hover h3 { color: var(--rot-text); }
.news-bild { height: 230px; border-radius: 18px; background: #D9D9D9; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--grau-text); font-weight: 700; }
.news-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform .3s; }
.news-karte:hover .news-bild img { transform: scale(1.03); }
.meta { font-size: 0.875rem; font-weight: 700; color: var(--rot-text); }
.news-karte h3 { font-family: var(--titel); font-weight: 700; font-size: 1.75rem; line-height: 1.1; }
.news-karte p { color: var(--grau-text); }

/* ---------------------------------------------------------------- Events */
.events-abschnitt { padding: 88px 24px 56px; }
.event-gross { border-radius: 16px; overflow: hidden; display: flex; flex-wrap: wrap; box-shadow: 0 4px 20px rgba(0,0,0,.12); margin-bottom: 24px; }
.event-bild { position: relative; flex: 1 1 420px; min-height: 280px; background: var(--grau-hell); display: flex; align-items: center; justify-content: center; color: #222; font-weight: 700; padding: 24px; text-align: center; }
/* Das Bild richtet sich nach der Höhe des roten Textfelds, nicht umgekehrt */
.event-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-bild.ist-logo { background: var(--weiss); }
.event-bild.ist-logo img { object-fit: contain; padding: 28px; }
.event-text { flex: 1 1 420px; min-width: 0; background: var(--rot); color: var(--weiss); padding: 48px; display: flex; flex-direction: column; gap: 18px; }
.event-text h3 { font-family: var(--titel); font-weight: 800; font-size: clamp(1.875rem, 4vw, 3rem); overflow-wrap: anywhere; hyphens: auto; line-height: 1.05; text-transform: uppercase; }
@media (max-width: 640px) { .event-text { padding: 32px 24px; } .event-bild { min-height: 220px; } .event-bild.ist-logo img { padding: 20px; } }
.termine { display: flex; flex-direction: column; gap: 10px; }
.termin { border: 1px solid var(--linie); border-radius: 14px; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; color: var(--schwarz); }
.termin:hover { border-color: var(--rot); text-decoration: none; color: var(--schwarz); }
.kalender { background: var(--schwarz); color: var(--weiss); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; align-items: center; min-width: 74px; }
.kalender b { font-family: var(--titel); font-weight: 800; font-size: 1.625rem; line-height: 1; }
.kalender small { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.termin-text { flex: 1 1 240px; display: flex; flex-direction: column; }
.termin-text b { font-family: var(--titel); font-weight: 700; font-size: 1.625rem; line-height: 1.1; }
.termin-text small { color: var(--grau-text); font-size: 0.9375rem; }
.termin .pfeil-link { color: var(--rot-text); }

/* ---------------------------------------------------------------- Partner */
.partner { background: var(--flaeche); }
.partner .innen { display: flex; flex-direction: column; gap: 40px; }
.mitte-kopf { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.logos a { background: var(--weiss); border-radius: 12px; height: 130px; display: flex; align-items: center; justify-content: center; color: var(--schwarz); font-weight: 700; padding: 20px; }
.logos a:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); text-decoration: none; }
.logos img { max-height: 80px; width: auto; }
.partner-werden { background: var(--schwarz); color: var(--weiss); border-radius: 16px; padding: 48px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.partner-werden > div { flex: 1 1 380px; min-width: 0; }
.partner-werden .links { display: flex; flex-direction: column; gap: 14px; }
.partner-werden h3 { font-family: var(--titel); font-weight: 800; font-size: 2.5rem; line-height: 1; text-transform: uppercase; }
.partner-werden p { color: var(--grau-hell-2); }
.vorteile { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.vorteil { border-left: 3px solid var(--rot); padding: 4px 0 4px 16px; display: flex; flex-direction: column; }
.vorteil span { color: var(--grau-hell); font-size: 0.9375rem; }
@media (max-width: 640px) { .partner-werden { padding: 32px 24px; } }
.traeger { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.traeger > span { font-family: var(--titel); font-weight: 700; font-size: 0.875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grau-text); margin-right: 8px; }
.traeger a { background: var(--weiss); border-radius: 8px; padding: 12px 16px; color: var(--schwarz); font-weight: 700; }

/* ---------------------------------------------------------------- Kontakt */
.kontakt-raster { display: flex; flex-wrap: wrap; gap: 48px; }
.kontakt-raster > div { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.karte-platz { height: 260px; border-radius: 16px; background: #E4E4E4; display: flex; align-items: center; justify-content: center; color: var(--grau-text); font-weight: 700; text-align: center; padding: 16px; }
.orte { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.ort { border: 1px solid var(--linie); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; color: var(--schwarz); }
a.ort:hover { border-color: var(--schwarz); text-decoration: none; }
.karte-platz.mit-foto { padding: 0; position: relative; overflow: hidden; }
.karte-platz.mit-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ort span { color: var(--grau-text); font-size: 0.9375rem; }
.personen { display: flex; flex-direction: column; gap: 12px; }
.personen-mehr { display: none; align-self: flex-start; }
@media (max-width: 640px) {
  .personen:not(.alle) .person:not(.dunkel) { display: none; }
  .personen .person.dunkel { order: -1; }
  .personen-mehr { display: inline-flex; }
}
.person { background: var(--flaeche); border-radius: 14px; padding: 18px 20px; display: flex; align-items: center; gap: 16px; }
.person .bild { width: 56px; height: 56px; flex: none; border-radius: 50%; background: #D9D9D9; position: relative; overflow: hidden; display: grid; place-items: center; font-weight: 700; color: #6B6B6B; }
.person .bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person .person-name { font-size: inherit; color: inherit; }
.person .person-name:hover { color: var(--rot-text); }
.person > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.person small { font-size: 0.8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rot-text); }
.person a { font-size: 0.9375rem; overflow-wrap: anywhere; }
.person.dunkel { background: var(--schwarz); color: var(--weiss); flex-wrap: wrap; justify-content: space-between; }
.person.dunkel small { color: var(--gold); }

/* ---------------------------------------------------------------- Fußzeile */
.fusszeile { background: var(--schwarz); color: var(--grau-hell-2); padding: 64px 24px 28px; font-size: 0.9375rem; border-top: 6px solid var(--rot); }
.fusszeile .innen { display: flex; flex-direction: column; gap: 40px; }
.fuss-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 32px; }
.fuss-spalten > * { display: flex; flex-direction: column; gap: 6px; }
.fuss-titel { font-family: var(--titel); font-weight: 800; font-size: 1.125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--weiss); border-bottom: 2px solid var(--rot); padding-bottom: 8px; margin-bottom: 4px; }
.fusszeile a { color: var(--grau-hell-2); }
.fusszeile a:hover { color: var(--weiss); }
.sozial { display: flex; gap: 10px; padding-top: 8px; }
.sozial a { width: 44px; height: 44px; border-radius: 50%; background: var(--dunkel-2); color: var(--weiss); display: flex; align-items: center; justify-content: center; }
.sozial a:hover { background: var(--rot); }
.sozial svg { width: 20px; height: 20px; }
.fuss-unten { border-top: 1px solid #2E2E2E; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* ---------------------------------------------------------------- Unterseiten */
.seitenkopf { background: var(--schwarz); color: var(--weiss); padding: 72px 24px 64px; border-bottom: 6px solid var(--rot); }
.seitenkopf .innen { display: flex; flex-direction: column; gap: 16px; }
.seitenkopf h1 { letter-spacing: -0.01em; font-family: var(--titel); font-weight: 800; font-size: clamp(2.375rem, 8.5vw, 5.5rem); line-height: .95; text-transform: uppercase; }
.seitenkopf p { color: var(--grau-hell-2); max-width: 640px; font-size: 1.1875rem; }
.brotkrumen { font-size: 0.875rem; color: var(--grau-hell); }
.brotkrumen a { color: var(--grau-hell); }

/* Artikel */
.artikel { max-width: 760px; margin: 0 auto; padding: 56px 24px 24px; }
.artikel-bild { margin: 0 0 32px; }
.artikel-bild img { width: 100%; border-radius: 18px; max-height: 520px; object-fit: cover; object-position: 50% 15%; }
.artikel-bild figcaption { font-size: 0.875rem; color: var(--grau-text); margin-top: 8px; }
.artikel-inhalt { font-size: 1.1875rem; line-height: 1.65; }
.artikel-inhalt p { margin: 0 0 1.1em; }
.artikel-inhalt h2, .artikel-inhalt h3 { font-family: var(--titel); text-transform: uppercase; margin: 1.4em 0 .5em; }
.zurueck { display: inline-block; margin-top: 16px; font-weight: 700; }

/* Rekorde */
.rekord-steuerung { position: sticky; top: var(--kopf-h, 77px); z-index: 30; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.rekord-steuerung .innen { padding: 14px 24px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.umschalter { display: inline-flex; background: var(--flaeche); border-radius: 999px; padding: 4px; gap: 4px; }
.umschalter button { border: 0; background: none; font-family: inherit; font-weight: 700; font-size: 1rem; padding: 8px 18px; min-height: 40px; border-radius: 999px; cursor: pointer; color: var(--schwarz); }
.umschalter button[aria-pressed="true"] { background: var(--schwarz); color: var(--weiss); }
.umschalter button:hover:not([aria-pressed="true"]) { background: #E6E6E6; }
.ak-sprung { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ak-sprung a { font-weight: 700; font-size: 0.9375rem; padding: 6px 12px; border: 1px solid var(--linie); border-radius: 999px; color: var(--schwarz); }
.ak-sprung a:hover { border-color: var(--rot); text-decoration: none; }
@media (max-width: 1020px) { .ak-sprung { margin-left: 0; } }

.rekorde-inhalt { padding: 40px 24px 88px; }
.rekord-liste[hidden] { display: none; }
.rekord-liste > h2 { margin-bottom: 8px; }
.ak-block { margin-top: 40px; }
.ak-block h3 { font-family: var(--titel); font-weight: 800; font-size: 2.125rem; text-transform: uppercase; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ak-block h3::before { content: ""; width: 6px; height: 28px; background: var(--rot); border-radius: 2px; }
.tabelle-rahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: 14px; }
table.rekorde { width: 100%; border-collapse: collapse; font-size: 1rem; }
table.rekorde th { text-align: left; font-size: 0.8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grau-text); background: var(--flaeche); padding: 10px 14px; white-space: nowrap; }
table.rekorde td { padding: 12px 14px; border-top: 1px solid var(--linie); vertical-align: top; }
table.rekorde td.wert { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.rekorde td.disziplin { font-weight: 700; white-space: nowrap; }
table.rekorde tr.leer td { color: #9A9A9A; }
table.rekorde td .staffel { display: block; }
table.rekorde td.datum, table.rekorde td.jg { white-space: nowrap; font-variant-numeric: tabular-nums; }
.neu { display: inline-block; margin-left: 8px; background: var(--gold); color: var(--schwarz); font-size: 0.6875rem; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 4px; vertical-align: 2px; }
@media (max-width: 720px) {
  table.rekorde thead { display: none; }
  table.rekorde, table.rekorde tbody { display: block; }
  table.rekorde tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 14px; border-top: 1px solid var(--linie); }
  table.rekorde tr:first-child { border-top: 0; }
  table.rekorde td { display: block; padding: 0; border: 0; }
  table.rekorde td.disziplin { order: 1; }
  table.rekorde td.wert { order: 2; margin-left: auto; }
  table.rekorde td.name { order: 3; flex-basis: 100%; }
  table.rekorde td.jg, table.rekorde td.wo, table.rekorde td.datum { order: 4; color: var(--grau-text); font-size: 0.875rem; }
  table.rekorde td.jg::before { content: "Jg. "; }
  table.rekorde tr.leer td.name, table.rekorde tr.leer td.jg, table.rekorde tr.leer td.wo, table.rekorde tr.leer td.datum { display: none; }
}
.neu-leiste { background: var(--flaeche); border-radius: 16px; padding: 24px; margin-bottom: 8px; }
.neu-leiste h2 { font-family: var(--titel); font-weight: 800; font-size: 1.75rem; text-transform: uppercase; margin-bottom: 12px; }
.neu-leiste ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 24px; }
.neu-leiste li { display: flex; flex-direction: column; border-left: 3px solid var(--gold); padding-left: 12px; }
.neu-leiste li b { font-variant-numeric: tabular-nums; }
.neu-leiste li small { color: var(--grau-text); font-size: 0.875rem; }
.hinweis-text { color: var(--grau-text); font-size: 0.9375rem; margin-top: 32px; }

.nur-ohne-js { }
.js .nur-ohne-js { display: none; }

.sprungmarke { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--schwarz); color: var(--weiss); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.sprungmarke:focus { left: 8px; color: var(--weiss); }
[hidden] { display: none !important; }
.neu-leiste details { margin-top: 12px; }
.neu-leiste summary { cursor: pointer; font-weight: 700; color: var(--rot-text); min-height: 44px; display: flex; align-items: center; }
.neu-leiste details ul { margin-top: 8px; }

/* ---------------------------------------------------------------- Logo */
.logo-text { display: flex; flex-direction: column; }
.logo.mit-bild .logo-text { display: none; }
.logo-bild { height: 54px; width: auto; }
.fuss-logo { width: 130px; height: auto; margin-bottom: 8px; }
@media (max-width: 640px) { .logo-bild { height: 46px; } }

/* ---------------------------------------------------------------- Porträts */
.portraet { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--dunkel-3); flex: none; }
.portraet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; z-index: 1; }
.portraet .initialen { font-family: var(--titel); font-weight: 800; color: #6A6A6A; font-size: 1.75rem; letter-spacing: .02em; }
.portraet.rund { width: 84px; height: 84px; border-radius: 50%; }
.portraet.rund.klein48 { width: 48px; height: 48px; }
.portraet.rund.klein48 .initialen { font-size: 1.0625rem; }
.portraet.hoch { width: 100%; aspect-ratio: 4 / 5; border-radius: 16px; }
.portraet.hoch .initialen { font-size: 5.5rem; }
.portraet.quer { width: 100%; aspect-ratio: 3 / 2; }
.portraet.quer .initialen { font-size: 4rem; }
.team-stapel { display: flex; flex: none; }
.team-stapel .portraet.rund { width: 56px; height: 56px; border: 3px solid var(--dunkel); margin-left: -18px; }
.team-stapel .portraet.rund:first-child { margin-left: 0; }
.team-stapel .initialen { font-size: 1.125rem; }
.team-kachel:hover .team-stapel .portraet { border-color: var(--dunkel-2); }
.trainer-person { color: var(--weiss); }
.trainer-person:hover { color: var(--gold); text-decoration: none; }

/* ---------------------------------------------------------------- Schnellwahl */
.schnellwahl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.schnellwahl a { font-weight: 700; font-size: 0.9375rem; padding: 8px 14px; border: 1px solid var(--linie); border-radius: 999px; color: var(--schwarz); }
.schnellwahl a:hover { border-color: var(--rot); color: var(--rot-text); text-decoration: none; }
.abzeichen { display: inline-block; background: var(--gold); color: var(--schwarz); font-size: 0.8125rem; font-weight: 800; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; }
.abzeichen.hell { background: var(--flaeche); font-weight: 700; letter-spacing: 0; }

/* ---------------------------------------------------------------- Top-Team */
.profile { display: flex; flex-direction: column; gap: 32px; }
.profil { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 40px; padding: 32px; border: 1px solid var(--linie); border-radius: 20px; }
.profil:target { border-color: var(--rot); box-shadow: 0 0 0 3px rgba(227,6,19,.15); }
.profil-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.profil-text .profil-name { font-family: var(--titel); font-weight: 800; font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1; text-transform: uppercase; }
.profil-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 1.1875rem; font-weight: 600; }
.fakten { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; }
.fakten div { display: flex; flex-direction: column; min-width: 0; }
.fakten dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grau-text); }
.fakten dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.fakten .zeile { display: block; font-variant-numeric: tabular-nums; }
.fakten.klein { grid-template-columns: 1fr; gap: 8px; font-size: 0.9375rem; }
.fakten.klein dt { font-size: 0.75rem; }
.block h4 { margin: 0 0 8px; } .block h3, .block h4 { font-family: var(--titel); font-weight: 800; font-size: 1.375rem; text-transform: uppercase; margin-bottom: 8px; }
.liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.liste li { padding-left: 18px; position: relative; }
.liste li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 3px; background: var(--rot); }
.rekord-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.rekord-chips li { background: var(--flaeche); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.rekord-chips small { color: var(--grau-text); font-size: 0.8125rem; }
@media (max-width: 760px) {
  .profil { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
  .profil .portraet.hoch { max-width: 320px; }
}

/* ---------------------------------------------------------------- Trainer-Seite */
.trainer-gruppe { margin-bottom: 64px; }
.trainer-gruppe > h2 { margin-bottom: 24px; }
.trainer-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.trainer-karte { border: 1px solid var(--linie); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.trainer-karte:target { border-color: var(--rot); box-shadow: 0 0 0 3px rgba(227,6,19,.15); }
.trainer-karte-text { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.trainer-karte h3 { font-family: var(--titel); font-weight: 800; font-size: 1.75rem; line-height: 1.05; text-transform: uppercase; }
.gruppen-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------------------------------------------------------------- Partner-Seite */
.partner-gruppe { display: flex; flex-direction: column; gap: 18px; }
.logos .partner-kachel { border: 1px solid var(--linie); }
.partner .logos .partner-kachel { border-color: transparent; }
.logos img { max-height: 80px; max-width: 100%; width: auto; object-fit: contain; }
.logos.gross .partner-kachel { height: 170px; }
.logos.gross img { max-height: 110px; }
.logos.klein { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.logos.klein .partner-kachel { height: 110px; }
.logos.klein img { max-height: 64px; }
.partner-kachel span { text-align: center; overflow-wrap: anywhere; hyphens: auto; }
.titel-xl span, .titel-l span, .titel-m span { color: var(--rot); }
.leistung .titel-xl span, .seitenkopf h1 span { color: var(--gold); }

/* ---------------------------------------------------------------- Shop-Seite */
.shop-seite { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.shop-infos { display: flex; flex-direction: column; gap: 40px; }
.shop-hinweis { border-left: 6px solid var(--rot); background: var(--flaeche); border-radius: 0 14px 14px 0; padding: 24px 28px; display: flex; flex-direction: column; gap: 8px; }
.shop-hinweis h2 { font-family: var(--titel); font-weight: 800; font-size: 1.75rem; text-transform: uppercase; }
.schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.schritte li { counter-increment: schritt; position: relative; padding-left: 64px; min-height: 44px; display: flex; align-items: center; font-size: 1.125rem; }
.schritte li::before { content: counter(schritt); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--schwarz); color: var(--weiss); font-family: var(--titel); font-weight: 800; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; }
.shop-karte { background: var(--schwarz); color: var(--weiss); border-radius: 16px; overflow: hidden; position: sticky; top: 100px; }
.shop-karte .shop-bild { min-height: 0; aspect-ratio: 3 / 2; }
.shop-karte-text { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.shop-adresse { font-family: var(--titel); font-size: 1.75rem; font-weight: 700; overflow-wrap: anywhere; }
.shop-karte .knopf { align-self: flex-start; }
@media (max-width: 860px) { .shop-seite { grid-template-columns: 1fr; } .shop-karte { position: static; } }
.athleten-gruppe { margin-bottom: 56px; }
.gruppen-titel { margin-bottom: 20px; }
.schnellwahl small { font-weight: 600; color: var(--grau-text); }

/* ---------------------------------------------------------------- Trainingszeiten */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gruppe-details { font-size: 0.9375rem; color: var(--grau-text); border-top: 1px solid var(--linie); padding-top: 10px; margin-top: 4px; }
.gruppe-details strong { color: var(--schwarz); font-weight: 600; }
.standort { margin-top: 48px; }
.standort > h2 { margin-bottom: 20px; }
.trainingsgruppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 20px; }
.tgruppe { border: 1px solid var(--linie); border-radius: 18px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.tgruppe:target { border-color: var(--rot); box-shadow: 0 0 0 3px rgba(227,6,19,.15); }
.tgruppe header { display: flex; flex-direction: column; gap: 4px; }
.tgruppe h3 { font-family: var(--titel); font-weight: 800; font-size: 1.75rem; line-height: 1.05; text-transform: uppercase; }
.tzeiten table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tzeiten th { text-align: left; font-weight: 700; padding: 8px 10px 8px 0; vertical-align: top; }
.tzeiten td { padding: 8px 10px 8px 0; vertical-align: top; }
.tzeiten tr + tr th, .tzeiten tr + tr td { border-top: 1px solid var(--linie); }
.tzeiten .zeit { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.tzeiten .zeit-zusatz { display: block; white-space: normal; font-weight: 400; font-size: 0.8125rem; color: var(--grau-text); }
@media (max-width: 520px) {
  .tzeiten tr { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; padding: 8px 0; }
  .tzeiten tr + tr { border-top: 1px solid var(--linie); }
  .tzeiten th, .tzeiten td { padding: 0; border: 0 !important; }
  .tzeiten td:last-child { grid-column: 1 / -1; color: var(--grau-text); font-size: 0.9375rem; }
}

/* ---------------------------------------------------------------- Events-Seite */
.ev-bereich { margin-top: 56px; }
.ev-bereich > h2 { margin-bottom: 24px; }
.ev-liste { display: flex; flex-direction: column; gap: 20px; }
.ev-karte { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); border: 1px solid var(--linie); border-radius: 18px; overflow: hidden; }
.ev-karte:target { border-color: var(--rot); box-shadow: 0 0 0 3px rgba(227,6,19,.15); }
.ev-bild { position: relative; background: var(--flaeche); min-height: 200px; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ev-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 20px; background: var(--weiss); z-index: 1; }
.ev-bild .kalender.gross { position: relative; min-width: 96px; padding: 12px 16px; }
.ev-bild .kalender.gross b { font-size: 2.25rem; }
.ev-bild img + .kalender, .ev-bild img + .kalender.gross { position: absolute; left: 16px; top: 16px; z-index: 2; min-width: 74px; padding: 8px 12px; }
.ev-bild img + .kalender b, .ev-bild img + .kalender.gross b { font-size: 1.625rem; }
.ev-text { padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ev-text h3 { font-family: var(--titel); font-weight: 800; font-size: clamp(1.75rem, 3.5vw, 2.375rem); line-height: 1.05; text-transform: uppercase; }
.ev-ort { font-weight: 600; }
@media (max-width: 760px) { .ev-karte { grid-template-columns: 1fr; } .ev-bild { min-height: 180px; } }
.archiv-jahr { margin-top: 28px; }
.archiv-jahr h3 { font-family: var(--titel); font-weight: 800; font-size: 1.625rem; margin-bottom: 8px; color: var(--rot-text); }
.archiv { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.archiv li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 20px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.archiv li > span:first-child { font-weight: 600; min-width: 0; }
.archiv-links { display: flex; gap: 16px; }
.archiv-links a { font-weight: 700; white-space: nowrap; min-height: 32px; display: inline-flex; align-items: center; }

abbr[title] { text-decoration: none; }

/* Saison-Stand bei den Trainingszeiten */
.saison-stand { margin: 0 0 6px; padding: 12px 16px; border-left: 4px solid var(--schwarz); background: #F4F4F4; font-size: 1rem; }
.saison-stand.veraltet { border-left-color: var(--rot); background: #FDECEC; }
.umschalter button small { font-weight: 500; opacity: .7; font-size: 0.8125rem; }
.profil-seit { margin: 2px 0 0; font-size: 0.875rem; font-weight: 700; color: var(--rot-text); text-transform: uppercase; letter-spacing: .04em; }

/* Verlinkte Personen (Trainingszeiten → Trainerporträts) */
.person-link { color: inherit; text-decoration: underline; text-decoration-color: var(--rot); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.person-link:hover { color: var(--rot-text); }

/* Infos für Eltern: aufklappbare Fragen */
.faq-innen { max-width: 880px; }
.faq-werkzeuge { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.faq-werkzeuge .schnellwahl { margin-bottom: 24px; }
.knopf-text { border: 0; background: none; font: inherit; font-weight: 700; font-size: 0.9375rem; color: var(--rot-text); cursor: pointer; padding: 8px 0; min-height: 40px; }
.knopf-text:hover { text-decoration: underline; }
.faq-gruppe { margin-top: 32px; }
.faq-gruppe .titel-l { margin-bottom: 12px; }
.faq { border-bottom: 1px solid var(--linie); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; font-weight: 700; font-size: 1.1875rem; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--rot-text); }
.faq summary svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--rot); transition: transform .2s ease; }
.faq[open] summary svg { transform: rotate(180deg); }
.faq-antwort { padding: 0 0 22px; max-width: 70ch; color: #333; font-size: 1.0625rem; }
.faq-antwort p + p { margin-top: 10px; }
.faq-antwort a { color: var(--rot-text); text-decoration: underline; }
.faq:target summary, .faq.hervorgehoben summary { color: var(--rot-text); }
.noch-fragen { margin-top: 56px; padding: 32px; background: #F4F4F4; border-left: 4px solid var(--rot); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.noch-fragen a:not(.knopf) { color: var(--rot-text); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .faq summary svg { transition: none; } }

/* Sportstätten & Anfahrt */
.staetten { display: flex; flex-direction: column; gap: 28px; }
.staette { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; }
.staette-bild { position: relative; min-height: 220px; background: var(--schwarz); display: grid; place-items: center; }
.staette-bild span { font-family: var(--titel); font-weight: 800; font-size: clamp(1.75rem, 4vw, 2.75rem); text-transform: uppercase; color: var(--rot); letter-spacing: .02em; padding: 16px; text-align: center; }
.staette-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.staette-text { padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.staette-text h2 { font-family: var(--titel); font-weight: 800; font-size: clamp(1.75rem, 3.4vw, 2.375rem); line-height: 1.05; text-transform: uppercase; }
.staette-adresse { font-size: 1.1875rem; font-weight: 600; }
.staette .fakten { width: 100%; grid-template-columns: 1fr; }
.staette .fakten dd { font-weight: 400; }
@media (max-width: 760px) { .staette { grid-template-columns: 1fr; } .staette-bild { min-height: 160px; } .staette-text { padding: 22px 20px; } }

/* Impressum & Datenschutz */
.rechtstext { max-width: 760px; font-size: 1.0625rem; }
.rechtstext h2 { font-family: var(--titel); font-weight: 800; font-size: 1.625rem; text-transform: uppercase; margin: 36px 0 10px; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p, .rechtstext ul { margin: 0 0 12px; }
.rechtstext ul { padding-left: 22px; }
.rechtstext a { color: var(--rot-text); text-decoration: underline; overflow-wrap: anywhere; }

/* Runde Porträts aus Querformat-Fotos: auf das Gesicht zoomen */
.portraet.rund img, .person .bild img { transform: scale(1.7); transform-origin: 50% 22%; }

/* Hinweisbalken nur in der Testversion (python build.py --test) */
.testhinweis { background: var(--gold, #F2B705); color: #111; text-align: center; font-weight: 700; font-size: 0.875rem; padding: 6px 16px; }

/* Fehlerseite 404 */
.fehler-links { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.fehler-links a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 20px; border: 1px solid #e2e2e2; border-left: 4px solid var(--rot); background: var(--weiss); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.fehler-links a:hover, .fehler-links a:focus-visible { border-color: var(--rot); transform: translateY(-2px); }
.fehler-links strong { font-family: var(--titel); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; line-height: 1.05; }
.fehler-links span { color: #666; font-size: 0.9375rem; }

/* ---------------------------------------------------------------- Feste Filterleisten
   Kopfzeile und Filterleiste bleiben oben stehen. Die Höhen misst seite.js (--kopf-h, --filter-h),
   damit Sprungziele nicht unter den Leisten verschwinden. */
html { scroll-padding-top: calc(var(--kopf-h, 77px) + var(--filter-h, 0px) + 16px); }
.filterleiste {
  position: sticky; top: var(--kopf-h, 77px); z-index: 30;
  background: var(--weiss); padding-block: 12px;
  box-shadow: 0 0 0 100vmax var(--weiss); clip-path: inset(0 -100vmax);
}
.filterleiste.steht { box-shadow: 0 0 0 100vmax var(--weiss), 0 1px 0 100vmax var(--linie); clip-path: inset(0 -100vmax -1px); }
.schnellwahl.filterleiste { margin-bottom: 32px; }
.faq-werkzeuge.filterleiste { margin-bottom: 16px; }
.faq-werkzeuge.filterleiste .schnellwahl { margin-bottom: 0; }
.schnellwahl a.aktiv, .ak-sprung a.aktiv { background: var(--schwarz); border-color: var(--schwarz); color: var(--weiss); }
.schnellwahl a.aktiv small { color: inherit; }

/* Auf dem Handy: Leisten in einer Zeile, seitlich wischen statt umbrechen */
@media (max-width: 760px) {
  .filterleiste .schnellwahl, .schnellwahl.filterleiste, .rekord-steuerung .ak-sprung {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .filterleiste .schnellwahl::-webkit-scrollbar, .schnellwahl.filterleiste::-webkit-scrollbar,
  .rekord-steuerung .ak-sprung::-webkit-scrollbar { display: none; }
  .rekord-steuerung .ak-sprung { width: 100%; }
  .schnellwahl a, .ak-sprung a { white-space: nowrap; flex: none; font-size: 0.875rem; padding: 6px 12px; }
  .rekord-steuerung .innen { padding: 10px 16px; gap: 8px; }
  .rekord-steuerung .umschalter { flex: none; }
  .umschalter button { font-size: 0.875rem; padding: 6px 11px; min-height: 36px; white-space: nowrap; }
  .faq-werkzeuge.filterleiste { flex-direction: column; align-items: stretch; gap: 6px; }
}

/* Prävention & Kinderschutz */
.pv-oben { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: start; }
.pv-text p { margin: 16px 0 0; font-size: 1.125rem; max-width: 62ch; }
.pv-person { background: var(--schwarz); color: var(--weiss); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 10px; border-top: 6px solid var(--rot); }
.pv-person .kleine-zeile { color: var(--gold); }
.pv-name { font-family: var(--titel); font-weight: 800; font-size: 2.125rem; text-transform: uppercase; line-height: 1; }
.pv-kontakt { margin: 6px 0; display: grid; gap: 8px; }
.pv-kontakt dt { font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grau-hell); }
.pv-kontakt dd { margin: 0; font-size: 1.125rem; font-weight: 700; }
.pv-kontakt a { color: var(--weiss); overflow-wrap: anywhere; }
.pv-person p { margin: 6px 0 0; color: var(--grau-hell-2); font-size: 0.9375rem; }
.pv-block { margin-top: 64px; }
.pv-block > p { margin: 8px 0 0; }
.pv-hilfe { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pv-hilfe li { border: 1px solid var(--linie); border-left: 4px solid var(--rot); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.pv-hilfe-name { font-weight: 700; }
.pv-nummer { font-family: var(--titel); font-weight: 800; font-size: 2rem; line-height: 1.05; color: var(--schwarz); letter-spacing: .01em; }
.pv-nummer:hover { color: var(--rot-text); text-decoration: none; }
.pv-hilfe .grau { font-size: 0.9375rem; }
.pv-notfall { margin-top: 16px; font-weight: 700; }
.pv-haltung, .pv-dokumente { margin: 16px 0 0; padding-left: 1.2em; display: grid; gap: 10px; max-width: 70ch; font-size: 1.0625rem; }
.pv-haltung li::marker { color: var(--rot); }
@media (max-width: 860px) { .pv-oben { grid-template-columns: 1fr; gap: 28px; } .pv-block { margin-top: 48px; } }

/* News-Filter */
.news-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-bottom: 32px; }
.filter-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-titel { font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grau-text); margin-right: 4px; }
.filter-gruppe button { font: inherit; font-weight: 700; font-size: 0.9375rem; padding: 7px 14px; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); color: var(--schwarz); cursor: pointer; }
.filter-gruppe button:hover { border-color: var(--rot); }
.filter-gruppe button[aria-pressed="true"] { background: var(--schwarz); border-color: var(--schwarz); color: var(--weiss); }
.filter-gruppe button:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }
/* „Ältere“: natives Auswahlmenü im Look der Filterknöpfe (am Handy öffnet sich die gewohnte Auswahl des Systems) */
.filter-mehr { position: relative; flex: none; display: inline-flex; }
.filter-mehr select { -webkit-appearance: none; appearance: none; font: inherit; font-weight: 700; font-size: 0.9375rem; padding: 7px 34px 7px 14px; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); color: var(--schwarz); cursor: pointer; }
.filter-mehr::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); pointer-events: none; color: var(--schwarz); }
.filter-mehr select:hover { border-color: var(--rot); }
.filter-mehr select:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }
.filter-mehr.ist-aktiv select { background: var(--schwarz); border-color: var(--schwarz); color: var(--weiss); }
.filter-mehr.ist-aktiv::after { color: var(--weiss); }
.filter-mehr select option { color: var(--schwarz); background: var(--weiss); }
.filter-anzahl { margin-left: auto; font-size: 0.875rem; font-weight: 600; color: var(--grau-text); font-variant-numeric: tabular-nums; }
.news-leer { font-size: 1.125rem; margin: 8px 0 40px; }
@media (max-width: 760px) {
  .news-filter { gap: 8px; }
  .filter-gruppe { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .filter-gruppe::-webkit-scrollbar { display: none; }
  .filter-gruppe button { flex: none; font-size: 0.875rem; padding: 6px 12px; }
  .filter-mehr select { font-size: 1rem; padding: 5px 32px 5px 12px; } /* 16 px: iOS zoomt sonst beim Antippen */
  .filter-anzahl { margin-left: 0; }
}

/* News-Seite: Aufmacher, Karten, schlanke Liste */
.filter-gruppe button small { font-weight: 600; opacity: .6; margin-left: 2px; }
.news-archiv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.news-eintrag { color: var(--schwarz); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.news-eintrag[hidden] { display: none; }
.news-eintrag:hover { text-decoration: none; color: var(--schwarz); }
.news-eintrag:hover h3 { color: var(--rot-text); }
.news-eintrag:hover .news-bild img { transform: scale(1.03); }
.news-eintrag .news-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.news-eintrag h3 { font-family: var(--titel); font-weight: 700; font-size: 1.75rem; line-height: 1.1; }
.news-eintrag p { color: var(--grau-text); }
.news-pfeil { display: none; }
/* Aufmacher: über die ganze Breite, Foto links groß */
.news-eintrag.ist-aufmacher { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: center; }
.ist-aufmacher .news-bild { height: 420px; }
.ist-aufmacher h3 { font-size: clamp(2rem, 3.4vw, 2.875rem); line-height: 1.02; text-transform: uppercase; font-weight: 800; }
.ist-aufmacher p { font-size: 1.125rem; }
/* Liste: schlanke Zeilen ohne Foto */
.news-liste-titel { grid-column: 1 / -1; font-family: var(--titel); font-weight: 800; font-size: 1.75rem; text-transform: uppercase; margin-top: 24px; padding-bottom: 8px; border-bottom: 2px solid var(--schwarz); }
.news-liste-titel[hidden] { display: none; }
.news-eintrag.ist-zeile { grid-column: 1 / -1; display: grid; grid-template-columns: 190px minmax(0, 1fr) 24px; align-items: baseline; gap: 16px; padding: 14px 4px; margin-top: -32px; border-bottom: 1px solid var(--linie); }
.news-liste-titel + .news-eintrag.ist-zeile { margin-top: -24px; }
.ist-zeile .news-bild, .ist-zeile p { display: none; }
.ist-zeile .news-text { display: contents; }
.ist-zeile .meta { grid-column: 1; }
.ist-zeile h3 { grid-column: 2; font-size: 1.3125rem; line-height: 1.2; }
.ist-zeile .news-pfeil { display: block; grid-column: 3; color: var(--rot); font-weight: 700; justify-self: end; }
.ist-zeile:hover { background: var(--flaeche); }
@media (max-width: 1020px) {
  .news-archiv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-eintrag.ist-aufmacher { grid-template-columns: 1fr; gap: 16px; }
  .ist-aufmacher .news-bild { height: 320px; }
}
@media (max-width: 640px) {
  .news-archiv { grid-template-columns: 1fr; gap: 28px; }
  .ist-aufmacher .news-bild { height: 240px; }
  .news-eintrag.ist-zeile { grid-template-columns: minmax(0, 1fr) 20px; gap: 4px 12px; margin-top: -28px; }
  .ist-zeile .meta { grid-column: 1; grid-row: 1; }
  .ist-zeile h3 { grid-column: 1; grid-row: 2; font-size: 1.1875rem; }
  .ist-zeile .news-pfeil { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* Header-Knöpfe und Probetraining je Gruppe */
.buehne-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.knopf-hell { background: rgba(255,255,255,.12); color: var(--weiss); box-shadow: inset 0 0 0 2px var(--weiss); backdrop-filter: blur(2px); }
.knopf-hell:hover { background: var(--weiss); color: var(--schwarz); text-decoration: none; }
.tgruppe-knopf { align-self: flex-start; margin-top: auto; }
.knopf-klein { padding: 10px 18px; font-size: 0.9375rem; min-height: 0; }

/* Porträt: aktuelle News */
.profil-news { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.profil-news a { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linie); color: var(--schwarz); font-weight: 600; line-height: 1.3; }
.profil-news a:hover { color: var(--rot-text); text-decoration: none; }
.profil-news small { font-size: 0.8125rem; font-weight: 700; color: var(--rot-text); }
.klein-text { font-size: 0.875rem; margin-top: 8px; }

/* News teilen */
.teilen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 32px 0 8px; padding-top: 24px; border-top: 1px solid var(--linie); }
.teilen-titel { font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grau-text); margin-right: 4px; }
.knopf-whatsapp { background: #1FA855; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.knopf-whatsapp:hover { background: #178a45; color: #fff; text-decoration: none; }
.knopf-umriss { background: var(--weiss); color: var(--schwarz); box-shadow: inset 0 0 0 1.5px var(--linie); border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.knopf-umriss:hover { box-shadow: inset 0 0 0 1.5px var(--schwarz); }
.teilen-meldung { font-size: 0.875rem; font-weight: 600; color: var(--grau-text); }

/* ---------- Probetraining-Formular (Pop-up) ---------- */
.pt-dialog { border: 0; padding: 0; border-radius: 18px; width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  box-shadow: 0 24px 80px rgba(0,0,0,.35); color: var(--schwarz); background: var(--weiss); }
.pt-dialog::backdrop { background: rgba(17,17,17,.6); }
.pt-form { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.pt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px 14px; border-bottom: 1px solid var(--linie); }
.pt-kopf h2 { font-family: var(--titel); font-weight: 800; text-transform: uppercase; font-size: 1.75rem; line-height: 1; margin: 0; }
.pt-zu { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--flaeche); cursor: pointer; display: grid; place-items: center; flex: none; }
.pt-zu svg { width: 20px; height: 20px; }
.pt-zu:hover { background: var(--linie); }
.pt-inhalt { padding: 18px 24px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.pt-einleitung { margin: 0; color: var(--grau-text); }
.pt-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pt-form legend { font-weight: 700; font-size: 0.9375rem; margin-bottom: 8px; padding: 0; }
.pt-reihe { display: flex; gap: 12px; }
.pt-reihe > label { flex: 1; min-width: 0; }
.pt-reihe > .pt-schmal { flex: 0 0 140px; }
.pt-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.875rem; font-weight: 600; color: var(--grau-text); }
.pt-form input, .pt-form select, .pt-form textarea { font: inherit; font-size: 1rem; font-weight: 400; color: var(--schwarz);
  border: 1px solid var(--grau-hell-2); border-radius: 10px; padding: 10px 12px; background: var(--weiss); width: 100%; }
.pt-form textarea { resize: vertical; min-height: 96px; }
.pt-form input:focus, .pt-form select:focus, .pt-form textarea:focus { outline: 2px solid var(--rot); outline-offset: 0; border-color: var(--rot); }
.pt-optional { font-weight: 400; color: var(--grau-text); }
.pt-hinweis { margin: 0; font-size: 0.875rem; background: #FFF6D6; border-radius: 10px; padding: 8px 12px; }
.pt-check { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 400 !important; }
.pt-check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--rot); }
.pt-falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pt-fehler { margin: 0; color: var(--rot-text); font-weight: 600; }
.pt-fuss { display: flex; justify-content: flex-end; }
.pt-fertig h3 { font-family: var(--titel); font-weight: 800; text-transform: uppercase; font-size: 1.625rem; margin: 8px 0 0; }
.pt-fertig .knopf { align-self: flex-start; }
button.knopf { cursor: pointer; font: inherit; }
@media (max-width: 560px) {
  .pt-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .pt-form { max-height: 100dvh; height: 100%; }
  .pt-reihe { flex-direction: column; }
  .pt-reihe > .pt-schmal { flex: 1; }
  .pt-fuss .knopf { width: 100%; }
}
.pt-wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-wahl label { flex-direction: row !important; align-items: center; gap: 8px !important; padding: 8px 14px; border: 1px solid var(--grau-hell-2);
  border-radius: 999px; color: var(--schwarz) !important; cursor: pointer; }
.pt-wahl label:has(input:checked) { border-color: var(--schwarz); background: var(--flaeche); }
.pt-wahl input { width: auto; accent-color: var(--rot); margin: 0; }
.pt-aus { opacity: .45; }
.pt-aus input { background: var(--flaeche); }

/* ---------------------------------------------------------------- Druck-Feedback
   Sofort beim Berühren/Drücken sichtbar – wichtig am Handy, wo es kein „Überfahren“ gibt. */
.knopf, .knopf-text, .rund-knopf, .team-kachel, .news-karte, .news-eintrag, .termin, .ort, .partner-kachel,
.trainer-person, .filter-gruppe button, .umschalter button, .nav-punkt, .menue-knopf, .pt-zu, .punkte button,
.fehler-links a, .traeger a, .person.dunkel .knopf {
  -webkit-tap-highlight-color: transparent;
}
.knopf, .rund-knopf, .team-kachel, .news-karte, .news-eintrag, .termin, .ort, .partner-kachel, .trainer-person,
.filter-gruppe button, .umschalter button, .pt-zu, .traeger a, .fehler-links a {
  transition-property: background-color, color, border-color, transform;
  transition-duration: .15s, .15s, .15s, .1s;
  transition-timing-function: ease-out;
}
.knopf:active, .rund-knopf:active, .filter-gruppe button:active, .umschalter button:active, .pt-zu:active,
.traeger a:active, .menue-knopf:active { transform: scale(.97); }
.knopf-rot:active { background: var(--rot-dunkel); }
.knopf-schwarz:active { background: #000; }
.team-kachel:active, .news-karte:active, .news-eintrag:active, .termin:active, .ort:active, .partner-kachel:active,
.fehler-links a:active { transform: scale(.985); }
.trainer-person:active { transform: scale(.97); }
.knopf-text:active, .nav-punkt:active { opacity: .7; }
.knopf-folgt:active { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hauptnav { transition: opacity .15s ease, visibility 0s linear .15s; transform: none !important; }
  .hat-menue.offen > .untermenue, .hat-menue:hover > .untermenue { animation-name: einblenden; }
  @keyframes einblenden { from { opacity: 0; } }
  .knopf:active, .rund-knopf:active, .team-kachel:active, .news-karte:active, .news-eintrag:active, .termin:active,
  .ort:active, .partner-kachel:active, .trainer-person:active, .fehler-links a:active { transform: none; }
}

/* Ergebnisse: Jahre als aufklappbare Zeilen, kompakte Liste */
.erg { border-top: 1px solid var(--linie); margin-top: 16px; }
.erg-jahr { border-bottom: 1px solid var(--linie); }
.erg-jahr summary { list-style: none; display: flex; align-items: baseline; gap: 14px; min-height: 52px; padding: 10px 0; cursor: pointer; }
.erg-jahr summary::-webkit-details-marker { display: none; }
.erg-zahl { font-family: var(--titel); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--schwarz); }
.erg-jahr[open] .erg-zahl, .erg-jahr summary:hover .erg-zahl { color: var(--rot-text); }
.erg-anzahl { font-size: 0.875rem; color: var(--grau-text); }
.erg-pfeil { margin-left: auto; align-self: center; width: 9px; height: 9px; border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot); transform: rotate(45deg); transition: transform .2s ease; margin-right: 6px; }
.erg-jahr[open] .erg-pfeil { transform: rotate(-135deg); }
.erg-liste { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.erg-liste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--flaeche); font-size: 0.9375rem; }
.erg-name { min-width: 0; }
.erg-links { display: flex; gap: 6px; flex: 0 0 auto; }
.erg-links a { font-size: 0.8125rem; font-weight: 700; padding: 3px 10px; border: 1px solid var(--linie); border-radius: 999px; color: var(--rot-text); white-space: nowrap; }
.erg-links a:hover { border-color: var(--rot); background: var(--rot); color: var(--weiss); }
@media (max-width: 760px) {
  .erg-liste { grid-template-columns: 1fr; }
  .erg-links a { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) { .erg-pfeil { transition: none; } }