/* HOME — HERO (Variante D, festgelegt 2026-08-13)
 *
 * Grundgeruest: Video-Bereich + weisses Text-Band = zusammen exakt 100svh
 * minus Sticky-Header, als flex-column. Video fuellt Resthoehe per flex:1,
 * object-fit:cover. Text-Band ist Teil des Stacks (kein Overlay-Eindruck).
 *
 * Desktop: Text-Band ist zweispaltig zentriert — Eyebrow+H1 links,
 * Subline+CTAs rechts, Baseline unten buendig. Mobile: einspaltig gestapelt,
 * CTAs full-width vertikal.
 *
 * Poster-Fallback: CSS-Background auf .hero__media greift, wenn iOS im
 * Energiesparmodus weder Autoplay noch <video>-poster rendert.
 */
.hero {
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--site-header-h, 72px));
  min-height: 520px;
  color: var(--c-ink);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  z-index: 0;
  /* Ohne Media-Query wuerde poster.webp (360 KB) auf jedem Viewport
   * geladen — auch auf Mobile, wo poster-mobile.jpg (178 KB) via <video>
   * greift und das Background-Bild nie sichtbar wird. Prüfbefund W4 2026-08-14.
   * Ab 768px: Desktop-Poster als Background-Fallback, wenn Video noch nicht
   * spielt oder <video> blockiert ist. Darunter: solide Farbe, sichtbarer
   * Poster kommt aus dem <video poster> Attribut selbst. */
  background: #140E0A;
}
@media (min-width: 768px) {
  .hero__media {
    background: url(/assets/hero-video/poster.jpg) center/cover no-repeat #140E0A;
  }
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.hero__stack {
  flex: 0 0 auto;
  background: var(--c-bg);
  padding: clamp(20px, 4vw, 40px) clamp(20px, 5vw, 56px) clamp(28px, 6vw, 56px);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;      /* H1-Oberkante + Sub-Oberkante bündig */
  gap: clamp(40px, 5vw, 80px);
  animation: fadeUp .7s ease-out both;
}
.hero__stack-left  { flex: 0 1 auto; max-width: 620px; }
.hero__stack-right {
  flex: 0 1 auto; max-width: 540px;
  display: flex; flex-direction: column;
  /* Rechte Spalte startet auf H1-Oberkante (nicht auf Eyebrow-Oberkante).
   * Padding = Eyebrow-Hoehe (~12px) + H1-margin-top (0.5em vom Titel).
   * clamp folgt der Titel-Groesse clamp(32, 6.2vw, 64) → 0.5em davon ≈
   * clamp(16, 3.1vw, 32); plus 12 fuer Eyebrow. */
  padding-top: clamp(28px, calc(3.1vw + 12px), 44px);
}
.hero__eyebrow {
  font: 500 12px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0;
}
.hero__title {
  font: 500 clamp(32px, 6.2vw, 64px)/1.02 var(--font-display);
  letter-spacing: -0.018em;
  color: var(--c-ink);
  text-indent: -0.03em; /* optischer Randausgleich */
  margin-top: 0.5em;    /* Proximity zum Eyebrow */
  text-wrap: balance;   /* verhindert Orphans, ergaenzt vom NBSP im HTML */
}
.hero__sub {
  font: 400 clamp(15px, 1.9vw, 18px)/1.55 var(--font-body);
  color: var(--c-ink);
  opacity: 0.72;
  max-width: 56ch;
  margin: 0 0 22px;
}
.hero__cta {
  display: flex;
  flex-wrap: nowrap;   /* Primary + Outline immer auf einer Zeile im Desktop-Zweispalter */
  gap: 14px;
  justify-content: flex-start;
}
.hero__cta .btn { white-space: nowrap; }
/* Screenshot-Befund 2026-08-19: btn--outline-red erbt globale 14px + 10/18 padding
 * (font-shorthand ueberschreibt .btn). Neben btn--primary im Hero-Zweispalter
 * wirken die zwei CTAs dann verschieden gross. Nur der Hero-Kontext wird
 * gleichgezogen — sekundaere outline-Buttons (Mehr News, Alle Foerderer,
 * Stornieren) bleiben ihre kleinere Groesse. */
.hero__cta .btn--outline-red {
  font-size: 16px;
  padding: 15px 30px;
  border-radius: var(--r-lg);
}

/* Bis 899px einspaltig gestapelt — die Zweispalter-Breite (620+540+80gap)
 * braucht ~1240px Container-Platz, drunter clippt der Inhalt (Prüfbefund B1
 * 2026-08-18: 641-784px verstecken CTA "Mitglied werden" hinter dem
 * .hero{overflow:hidden}, ScrollWidth-Check greift nicht). */
@media (max-width: 899px) {
  .hero {
    /* Kein starres min-height auf Mobile — Hoehe folgt Content. Vorher stand
     * min-height:560px hier: das schnitt auf iPhone SE (667px) und aehnlichen
     * kleinen Viewports den zweiten CTA "Mitglied werden" ab, weil Media +
     * Stack + Buttons mehr Platz brauchen als das ueberschriebene Minimum
     * ihnen zugesteht (Befund 08.09.). Ohne min-height packt der Fold
     * genau den natuerlichen Inhalt. */
    height: auto;
    min-height: 0;
  }
  /* Media-Anteil auf Mobile knapper: 34svh gibt der Hero-Bild-Sektion knapp
   * ein Drittel des Viewports, damit Eyebrow + Titel + Subline + zwei CTAs
   * garantiert in den Fold passen (auch auf 375x667). Vorher 44svh, was auf
   * kleinen iPhones den letzten Button unter die Fold-Kante drueckte. */
  .hero__media { flex: 0 0 auto; min-height: 34svh; }
  .hero__stack {
    padding: 18px 20px 24px;
    flex-direction: column;
    gap: 0;
  }
  .hero__stack-left,
  .hero__stack-right { max-width: none; padding-bottom: 0; }
  .hero__stack-right { margin-top: 14px; padding-top: 0; }
  .hero__cta { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .hero__title { font-size: 30px; line-height: 1.05; margin-top: 6px; }
  .hero__sub { font-size: 14px; margin-bottom: 16px; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}

/* HOME — GALLERY (Plätze) */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 44px;
}
.gallery-card {
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  background: linear-gradient(135deg, #c79066, #9a6240);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.gallery-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Sichtbare Bild-Labels ausgeblendet 2026-08-13 (Vorstands-
 * Call). alt-Attribut auf <img> bleibt fuer Screenreader + SEO. Wird der
 * Editor spaeter das Feld wieder brauchen, hier display:none entfernen. */
.gallery-card__label { display: none; }

/* HOME — SCHNUPPER BAND */
.schnupper-band {
  background:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0/4px 4px,
    linear-gradient(135deg, var(--c-red), var(--c-red-hover));
  padding-block: var(--section-pad-y);
  color: var(--c-bg);
}
.schnupper-band__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  /* 2026-07-08 (iPad): top-aligned, damit das Formular rechts nicht über
   * dem Copy-Block links anfängt, wenn die Höhen unterschiedlich sind. */
  align-items: start;
}
.schnupper-band h2 {
  font: 500 clamp(30px, 4.5vw, 52px)/1.1 var(--font-display);
  letter-spacing: -0.015em;
}
.schnupper-band__lead {
  font: 400 18px/1.55 var(--font-body);
  color: rgba(250, 246, 240, 0.9);
  max-width: 520px;
  margin-top: 20px;
}
.schnupper-band form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.schnupper-band .btn--invert { font-size: 16px; padding: 15px; }

/* NEWS-Grid */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 44px;
}
.news-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.news-card__date {
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 14px;
}
.news-card h3 {
  font: 500 22px/1.25 var(--font-display);
  letter-spacing: -0.005em;
}
.news-card p { margin-top: 12px; flex: 1; font: 400 16px/1.55 var(--font-body); color: rgba(26, 26, 26, 0.72); }
/* R5-G2-7: Card-Text auf 3 Zeilen kürzen mit „…". Detail-Seite zeigt Volltext. */
.news-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: none !important;
}
.news-card a {
  font: 500 15px var(--font-body);
  color: var(--c-red);
  margin-top: 18px;
}
.news-card a:hover { text-decoration: underline; }
/* R5-G2-8: Bild-Wrapper-Anchor (erster Child) darf KEIN margin-top vom
 * Weiterlesen-Link-Style erben — sonst 18px Lücke über dem Titelbild. */
.news-card > a:first-child {
  margin-top: 0;
  display: block;
}

/* NEWS-Page (list) */
.news-list { display: flex; flex-direction: column; gap: 20px; margin-top: 48px; }
.news-list__link {
  color: inherit;
  text-decoration: none;
  display: block;
  border-radius: var(--r-lg);
  transition: transform .12s ease, box-shadow .18s ease;
}
.news-list__link:hover .news-list__item {
  box-shadow: 0 8px 24px rgba(26, 26, 26, 0.08);
  border-color: var(--c-input-border, rgba(26, 26, 26, 0.14));
}
.news-list__link:hover .news-list__cta { color: var(--c-red-hover, #a52415); text-decoration: underline; }
.news-list__link:active .news-list__item { transform: translateY(1px); }
.news-list__link:focus-visible { outline: 2px solid var(--c-red); outline-offset: 3px; }
.news-list__cta {
  display: inline-block;
  margin-top: 14px;
  font: 500 15px var(--font-body);
  color: var(--c-red);
  transition: color .12s ease;
}
.news-list__item {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  box-shadow: var(--shadow-card);
}
.news-list__media {
  flex: none;
  width: min(320px, 40%);
  /* 2026-07-08 (iPad): Bild füllt die VOLLE Card-Höhe (align-self:stretch
   * statt des früheren flex-start). Der Body bestimmt die Höhe, das Bild zieht
   * mit — object-fit:cover croppt bewusst, damit keine Leerfläche entsteht. */
  align-self: stretch;
  min-height: 190px;
  background: linear-gradient(135deg, #c79066, #9a6240);
  position: relative;
  overflow: hidden;
}
.news-list__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Rueckfall-Titelbild fuer Beitraege ohne Foto (2026-08-25):
 * Vereinslogo auf hellem Grund, Ton ableitbar aus der Artikel-ID
 * (--t0/t1/t2 → 3 helle Werte aus der Palette). Container-agnostisch:
 * greift in .news-list__media und im Detail-Titelbild-Wrap. */
.news-logofallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12%;
  background: var(--c-card);
}
.news-logofallback--t0 { background: var(--c-card); }
.news-logofallback--t1 { background: var(--c-bg); }
.news-logofallback--t2 { background: var(--c-border-soft); }
.news-logofallback img {
  position: static;
  width: auto; max-width: 55%;
  height: auto; max-height: 55%;
  object-fit: contain;
  opacity: 0.9;
}
.news-list__body { flex: 1; min-width: 240px; padding: 24px; display: flex; flex-direction: column; justify-content: center; }
/* 2026-07-08 (iPhone): unter 640px stapeln, Bild füllt die VOLLE Card-Breite. */
@media (max-width: 640px) {
  .news-list__item { flex-direction: column; flex-wrap: nowrap; }
  .news-list__media { width: 100%; align-self: stretch; aspect-ratio: 16/9; min-height: 0; }
}

/* SPONSOREN-Logos */
.sponsors-bar {
  display: grid;
  /* minmax(0,1fr) statt 1fr: verhindert, dass eine Kachel über den Container
   * hinauswächst (Safari nutzt sonst die aspect-ratio-Breite als min-content
   * und sprengt die Spalte über den Bildschirmrand). 2026-07-08. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}
.sponsor-tile {
  /* Kürzere, breitere Kachel (2,5:1) statt 16/9 — Logo-Leiste statt großer
   * Banner-Boxen. 2026-07-08: nur den Container ausfüllen, nicht zu groß. */
  aspect-ratio: 5 / 2;
  min-width: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  /* A-R3-4: explizit weiß statt creme (--c-card), damit unterschiedliche
   * Logo-Hintergründe (transparent, weiß, farbig) einheitlich wirken. */
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-shadow: var(--shadow-card);
  transition: border-color .18s var(--ease-quick), box-shadow .18s var(--ease-quick), transform .18s var(--ease-quick);
}
/* 2026-07-08: Hover-States für Sponsoren-Cards (Home + Detail). */
a.sponsor-tile:hover {
  border-color: var(--c-red);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10);
  transform: translateY(-3px);
}

/* A-R3-4: Logo-Container für die Sponsoren-Detail-Seite. */
.sponsor-logo-container {
  width: 100%;
  height: 120px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
  padding: 18px;
}
.sponsor-logo-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.sponsor-logo-container span {
  font: 500 11px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a948c;
}
/* 2026-07-08: Einheitliches Erscheinungsbild. Logos werden auf eine
 * feste Höhe + Breiten-Cap gedeckelt (NICHT bis zum Kachelrand gefüllt), damit
 * kein Logo die anderen dominiert. Formate, die nicht ins Kachel-Verhältnis
 * passen, bekommen dadurch automatisch mehr Weißraum statt hochskaliert zu
 * werden. Höhe in px = gleiche optische Zeilenhöhe über alle Logos = uniform. */
.sponsor-tile img {
  max-height: 46px;
  max-width: 74%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* 2026-07-08: Hoch-/quadratische Lockups (A.F. Hausbau/Gewerbebau,
 * Albert Fischer, KreisSportBund) dürfen höher werden, damit sie neben den
 * breiten Wortmarken nicht untergehen. Höhe getunt statt Breite. */
.sponsor-tile img.is-tall {
  max-height: 70px;
  max-width: 60%;
}
.sponsor-tile span {
  font: 500 15px/1.3 var(--font-body);
  color: var(--c-muted);
  text-align: center;
}

/* 2026-07-08: Tablet 2 Spalten (via minmax(0,1fr) → füllen exakt den
 * Container, kein Überlauf mehr). */
@media (max-width: 1024px) {
  .sponsors-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}
/* 2026-07-08: Phone genau 1 Spalte, volle Container-Breite. */
@media (max-width: 560px) {
  .sponsors-bar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* MITGLIEDSCHAFT — Modelle
   Immer genau 4 Karten. Explizite Breakpoints statt auto-fit, sonst
   entsteht bei mittleren Breiten eine 3+1-Aufteilung mit verwaister
   vierter Karte (Befund 08.09.). Mobile 1, Tablet 2, Desktop 4.
   minmax(0, 1fr) verhindert Overflow bei sehr langen Kartenlabels. */
.models-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (min-width: 640px) {
  .models-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .models-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.model-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.model-card__price {
  font: 500 clamp(36px, 4vw, 48px)/1 var(--font-body);
  color: var(--c-red);
  margin-top: 18px;
}
/* Offener Beitrag. Haelt exakt die Hoehe der Preiszeile, damit die Karte im selben
   Rhythmus beurteilbar bleibt, sieht aber bewusst nicht wie ein Preis aus:
   kein Court-Red (das ist hier das Preis-Signal), kleinere Stufe, offene Unterkante.
   Eine Zahl darf hier nicht stehen, auch keine 0: In einer Preiskarte waere eine
   gerenderte Null selbst eine Aussage, naemlich "kostenlos". */
.model-card__price--offen {
  font: 500 clamp(17px, 1.5vw, 19px)/1 var(--font-body);
  color: var(--c-muted);            /* 5,25:1 auf --c-card, gemessen 16.08. */
  min-height: clamp(36px, 4vw, 48px);
  display: flex;
  align-items: center;
  border-bottom: 1px dashed var(--c-input-border);
  padding-bottom: 6px;
}
.model-card__elig {
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 8px;
}
.model-card__body {
  font: 400 16px/1.55 var(--font-body);
  color: rgba(26, 26, 26, 0.75);
  margin-top: 16px;
  flex: 1;
}

/* Freitext-Slot: nur sichtbar wenn befüllt (Live) oder im Edit-Modus (Vorstand).
   Prüfung 03.09.: „bitte hier ergänzen"-Placeholder darf nicht öffentlich stehen. */
.model-card__freitext:empty { display: none; }
body.edit-mode-on .model-card__freitext:empty {
  display: block;
  min-height: 40px;
  border: 1px dashed rgba(217, 19, 20, 0.4);
  padding: 8px 12px;
  color: rgba(26, 26, 26, 0.45);
}
body.edit-mode-on .model-card__freitext:empty::before {
  content: 'Weitere Informationen ergänzen';
  font-size: 12px;
}

/* MANNSCHAFTEN Grid: variable Kartenzahl (aktuell 4 Mannschaften). auto-fit
   mit minmax 240px, sodass 4 Karten in eine Reihe passen wenn Container
   mindestens ~1040px breit ist. Schmalere Breiten: 2 Spalten oder 1 Spalte.
   Befund 08.09. */
.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 44px;
}
@media (max-width: 639px) {
  .teams-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Doku-Karten "Rund um die Mitgliedschaft" — genau vier Karten, Vorgabe
   11.09.: 2x2 auf Desktop, 2 Spalten auf Tablet, 1 Spalte auf Mobile.
   Ausserdem overflow-wrap:anywhere + hyphens:auto auf den Card-H3, damit
   "Datenschutzerklärung" nie mehr aus der Karte laeuft (lang="de" am
   Container-Element setzt die Sprache fuer die deutsche Silbentrennung). */
.dokumente-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 44px;
}
@media (min-width: 640px) {
  .dokumente-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dokumente-grid > .card h3 {
  overflow-wrap: anywhere;
  hyphens: auto;
}
.team-card { padding: 32px; }
.team-card h3 {
  font: 500 26px/1.2 var(--font-display);
  letter-spacing: -0.005em;
}
.team-card__season {
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 10px;
}
.team-card__photo {
  margin-top: 22px;
  aspect-ratio: 16/9;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: linear-gradient(135deg, #c79066, #9a6240);
  position: relative;
  overflow: hidden;
}
.team-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* PLATZHALTER für noch fehlende Vorstands-/Mannschafts-Fotos.
   Dezent, im Vereins-Rot (faded), Text zentriert. Blockiert Go-Live nicht. */
.photo-placeholder {
  position: relative;
  background:
    linear-gradient(135deg, rgba(217, 19, 20, 0.06), rgba(217, 19, 20, 0.14)),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(217, 19, 20, 0.04) 12px 13px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(217, 19, 20, 0.62);
  padding: 20px;
  overflow: hidden;
}
.photo-placeholder__icon {
  width: 32px;
  height: 32px;
  opacity: 0.55;
}
.photo-placeholder__label {
  font: 500 12px/1.35 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
/* Overrides mit doppelter Spezifitaet, damit die Card-Base-Regeln
   (.trainer-card__portrait / .team-card__photo mit braunem Gradient)
   nicht durchbrechen. */
.trainer-card__portrait.photo-placeholder,
.team-card__photo.photo-placeholder {
  background:
    linear-gradient(135deg, rgba(217, 19, 20, 0.06), rgba(217, 19, 20, 0.14)),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(217, 19, 20, 0.04) 12px 13px);
}
/* Portrait-Slot (Vorstand) hat kleineres Aspect — Text muss noch lesbar sein */
.trainer-card__portrait.photo-placeholder .photo-placeholder__icon { width: 28px; height: 28px; }
.trainer-card__portrait.photo-placeholder .photo-placeholder__label { font-size: 11px; }
/* Team-Photo (16:9) darf ein bisschen groesser */
.team-card__photo.photo-placeholder .photo-placeholder__icon { width: 32px; height: 32px; }
.team-card__photo.photo-placeholder .photo-placeholder__label { font-size: 12px; }

@media (max-width: 480px) {
  .photo-placeholder__icon { width: 26px; height: 26px; }
  .photo-placeholder__label { font-size: 10.5px; letter-spacing: 0.06em; }
}

/* A-R3-5: Person-Placeholder (Trainer, Vorstand ohne Foto).
 * Ersetzt Initialen-Kacheln (in DE problematisch).
 * Silhouette-Icon im Vereins-Stil, gleiche Optik wie photo-placeholder aber
 * mit Person-Icon statt Kamera. */
.person-placeholder {
  position: relative;
  background:
    linear-gradient(135deg, rgba(217, 19, 20, 0.06), rgba(217, 19, 20, 0.14)),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(217, 19, 20, 0.04) 12px 13px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(217, 19, 20, 0.62);
  padding: 20px;
  overflow: hidden;
}
.person-placeholder__icon {
  width: 44px;
  height: 44px;
  opacity: 0.6;
}
.person-placeholder__label {
  font: 500 11px/1.35 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
/* Override, damit Card-Base-Gradient (braun) nicht durchschlägt */
.trainer-card__portrait.person-placeholder {
  background:
    linear-gradient(135deg, rgba(217, 19, 20, 0.06), rgba(217, 19, 20, 0.14)),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(217, 19, 20, 0.04) 12px 13px);
}
.trainer-card__portrait.person-placeholder .person-placeholder__icon { width: 40px; height: 40px; }
.trainer-card__portrait.person-placeholder .person-placeholder__label { font-size: 10.5px; }

@media (max-width: 480px) {
  .person-placeholder__icon { width: 36px; height: 36px; }
  .person-placeholder__label { font-size: 10px; letter-spacing: 0.06em; }
}

/* TRAINER */
.trainers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.trainer-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.trainer-card__portrait {
  aspect-ratio: 7/8;
  background: linear-gradient(135deg, #d4a574, #a87a4d);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.trainer-card__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Leere Personen-Textfelder (z. B. Trainer ohne Zeiten) stehen im DOM, damit der
   Vorstand sie im Cockpit anklicken kann. Für Besucher ausblenden, sonst bleibt
   ihr margin als Lücke stehen. Im Bearbeiten-Modus greift edit.css mit Hinweistext. */
body:not(.edit-mode-on) .trainer-card__body [data-edit]:empty { display: none; }
.trainer-card__initials {
  font: 500 64px/1 var(--font-display);
  color: rgba(250, 246, 240, 0.7);
}
.trainer-card__body { padding: 22px; }
.trainer-card__body h3 { font: 500 22px/1.2 var(--font-display); }
.trainer-card__role {
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-top: 8px;
}
.trainer-card__contact {
  font: 400 15px/1.6 var(--font-body);
  color: rgba(26, 26, 26, 0.78);
  margin-top: 14px;
}

/* PLATZE - List */
.platz-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.platz-list li {
  font: 400 18px/1.4 var(--font-body);
  display: flex;
  gap: 12px;
}
.platz-list li::before {
  content: "–";
  color: var(--c-red);
  font-weight: 500;
}

/* Trainingszeiten- + Heimspiele-Tabelle
 *
 * Scroll-Affordance (iPhone-Test 2026-08-13):
 *   Beide Tabellen scrollen horizontal auf Mobile/Tablet ohne dass man es
 *   ihnen ansieht. Loesung in drei Stufen, alle non-JS-tolerant:
 *   1) Fade-Kante rechts bei Bedarf (JS setzt data-scroll-end="false" wenn
 *      noch nach rechts zu scrollen ist; ohne JS bleibt der Wrap ruhig).
 *   2) Wisch-Chevron am rechten Rand, verschwindet nach erster Scroll.
 *   3) Erste Spalte sticky, damit der Kontext-Anker (Datum/Mannschaft) beim
 *      Scrollen der uebrigen Spalten sichtbar bleibt.
 * Desktop hat oft genug Platz — dann greift keine der drei Stufen. */
.training-table-wrap {
  margin-top: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-card);
  position: relative;
  scroll-behavior: smooth;
  /* -webkit-overflow-scrolling: touch; ist iOS-default in aktuellen Versionen */
}
.training-table-wrap::-webkit-scrollbar { height: 6px; }
.training-table-wrap::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }
.training-table-wrap[data-scrollable="true"]::after {
  content: "";
  position: sticky;
  top: 0; right: 0;
  float: right;
  width: 56px;
  height: 100%;
  margin-left: -56px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--c-card) 85%);
  opacity: 1;
  transition: opacity .18s ease;
}
.training-table-wrap[data-scroll-end="true"]::after { opacity: 0; }
.training-table-wrap__hint {
  position: absolute;
  bottom: 12px; right: 14px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font: 500 12px/1 var(--font-body);
  color: var(--c-muted);
  background: color-mix(in srgb, var(--c-card) 88%, transparent);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.training-table-wrap[data-scrollable="true"] .training-table-wrap__hint {
  opacity: 1;
  animation: table-hint-bob 2.4s ease-in-out 1.5 both;
}
.training-table-wrap[data-scrolled="true"] .training-table-wrap__hint { opacity: 0; }
.training-table-wrap__hint svg { width: 14px; height: 14px; display: block; }
@keyframes table-hint-bob {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .training-table-wrap[data-scrollable="true"] .training-table-wrap__hint { animation: none; }
}

.training-table thead th:first-child,
.training-table tbody td:first-child {
  position: sticky;
  left: 0;
  background: var(--c-card);
  z-index: 1;
}
.training-table thead th:first-child {
  z-index: 2;
}
.training-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.training-table th,
.training-table td {
  text-align: left;
  padding: 16px 20px;
}
.training-table thead tr { border-bottom: 1px solid var(--c-border); }
.training-table tbody tr { border-bottom: 1px solid var(--c-border-soft); }
.training-table tbody tr:last-child { border-bottom: 0; }
.training-table th {
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.training-table td {
  font: 400 16px var(--font-body);
  color: rgba(26, 26, 26, 0.78);
}
.training-table td:first-child {
  font-weight: 500;
  color: var(--c-ink);
}

/* CTA-Band */
.cta-band {
  margin-top: 72px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0/4px 4px,
    linear-gradient(135deg, var(--c-red), var(--c-red-hover));
  padding: clamp(32px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.cta-band h3 {
  font: 500 clamp(22px, 3vw, 30px)/1.2 var(--font-display);
  color: var(--c-bg);
}
.cta-band p {
  font: 400 17px/1.55 var(--font-body);
  color: rgba(250, 246, 240, 0.9);
  margin-top: 12px;
}

/* MITGLIEDSCHAFT — Schnupperjahr */
.schnupperjahr {
  margin-top: 40px;
  max-width: 820px;
  padding: clamp(28px, 4vw, 40px);
}
.schnupperjahr h3 {
  font: 500 clamp(22px, 3vw, 28px)/1.25 var(--font-display);
}

/* MITGLIEDSCHAFT — Antrag */
.antrag-section {
  margin-top: 96px;
  scroll-margin-top: 90px;
}
.antrag-form {
  margin-top: 32px;
  max-width: 720px;
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.antrag-pdf {
  margin-top: 32px;
  max-width: 720px;
  padding: 24px;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.antrag-pdf__icon {
  width: 46px;
  height: 56px;
  border: 1.5px solid var(--c-input-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font: 600 10px var(--font-body);
  color: var(--c-muted);
}
.antrag-pdf p {
  font: 400 16px/1.55 var(--font-body);
  color: rgba(26, 26, 26, 0.8);
  flex: 1;
  min-width: 200px;
}
.antrag-pdf a {
  font: 500 15px var(--font-body);
  color: var(--c-red);
}
.antrag-pdf a:hover { text-decoration: underline; }

/* KONTAKT */
.kontakt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px;
  margin-top: 48px;
}
.kontakt-info p {
  font: 400 17px/1.7 var(--font-body);
  color: rgba(26, 26, 26, 0.85);
}
.kontakt-form {
  padding: clamp(24px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kontakt-map {
  aspect-ratio: 16/7;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  background: linear-gradient(135deg, #cdb89a, #a89576);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kontakt-map span {
  font: 500 12px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
}

/* LOGIN */
.login-screen {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 40px;
}
/* Login-Logo 3x (96px) — 2026-07-08. Fokaler Brand-Moment auf sparsamem Login. */
.login-brand svg,
.login-brand img {
  width: 96px;
  height: 96px;
}
.login-brand-name {
  font: 500 18px/1 var(--font-display);
  letter-spacing: -0.01em;
}
.login-form {
  margin-top: 32px;
  width: 100%;
  max-width: 400px;
  padding: clamp(24px, 5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

/* BUCHUNG-Dashboard */
.dash-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-header);
  background: rgba(250, 246, 240, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border);
}
.dash-header__bar {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-content {
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) var(--container-pad) 80px;
  flex: 1;
}

/* Buchungs-Grid Desktop */
.grid-week {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 22px;
}
.day-chip {
  flex: none;
  min-width: 58px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  border: 1px solid var(--c-input-border);
  background: var(--c-card);
  color: var(--c-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.day-chip__short {
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}
.day-chip__num { font: 500 18px/1 var(--font-body); }
.day-chip[aria-pressed="true"] {
  background: var(--c-red);
  color: var(--c-bg);
  border-color: var(--c-red);
}

.slot-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-card);
}
.slot-grid {
  min-width: 760px;
}
.slot-grid__row {
  display: grid;
  grid-template-columns: 130px repeat(14, 1fr);
  border-bottom: 1px solid var(--c-border-soft);
}
.slot-grid__row:last-child { border-bottom: 0; }
.slot-grid__row--head { border-bottom: 1px solid var(--c-border); }
.slot-grid__hour-label {
  padding: 10px 2px;
  text-align: center;
  font: 500 10px/1 var(--font-body);
  color: var(--c-muted);
  border-left: 1px solid var(--c-border-soft);
}
.slot-grid__court-label {
  padding: 12px 10px;
  font: 500 12px/1.3 var(--font-body);
  display: flex;
  align-items: center;
}
.slot-grid__cell {
  border-left: 1px solid var(--c-border-soft);
  padding: 4px;
  min-height: 48px;
  display: flex;
}
.slot-grid__cell-inner {
  flex: 1;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 9px/1.1 var(--font-body);
  text-align: center;
  padding: 2px;
  border: 1px solid transparent;
}
.slot-grid__cell-inner--free {
  background: #FFFFFF;
  border-color: var(--c-border);
  color: #9a948c;
  cursor: pointer;
  transition: all .15s;
}
.slot-grid__cell-inner--free:hover {
  border-color: var(--c-red);
  color: var(--c-red);
}
.slot-grid__cell-inner--me {
  background: var(--c-red);
  color: var(--c-bg);
  font: 500 9px/1.1 var(--font-body);
}
.slot-grid__cell-inner--other {
  background: var(--c-input-border);
}
.slot-grid__cell-inner--block {
  background: repeating-linear-gradient(45deg, var(--c-block-stripe-a), var(--c-block-stripe-a) 4px, var(--c-block-stripe-b) 4px, var(--c-block-stripe-b) 8px);
  color: var(--c-red-hover);
  font-weight: 500;
}

.slot-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.slot-legend__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 400 13px var(--font-body);
  color: var(--c-muted);
}
.slot-legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex: none;
}

/* Buchungs-Liste (Mobile day-view) */
.slot-list { display: flex; flex-direction: column; gap: 24px; }
.slot-list__court h3 { font: 600 16px var(--font-body); margin-bottom: 10px; }
.slot-list__items { display: flex; flex-direction: column; gap: 6px; }
.slot-list__row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--r-sm);
  padding: 13px 16px;
  font: 400 15px var(--font-body);
  text-align: left;
}
.slot-list__row--free {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  cursor: pointer;
}
.slot-list__row--me {
  background: var(--c-red);
  color: var(--c-bg);
  font-weight: 500;
}
.slot-list__row--other {
  background: var(--c-input-border);
  color: var(--c-muted);
}
.slot-list__row--block {
  background: repeating-linear-gradient(45deg, var(--c-block-stripe-a), var(--c-block-stripe-a) 5px, var(--c-block-stripe-b) 5px, var(--c-block-stripe-b) 10px);
  color: var(--c-red-hover);
  font-weight: 500;
}

/* Meine Buchungen */
.bookings-list { display: flex; flex-direction: column; gap: 12px; }
.booking-row {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.booking-row__date {
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 8px;
}
.booking-row__title { font: 600 20px var(--font-body); }
.booking-row__sub {
  font: 400 15px var(--font-body);
  color: var(--c-muted);
  margin-top: 4px;
}

/* Mein Konto */
.konto-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.konto-card { padding: 32px; }
.konto-card__label {
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.konto-card__label--accent { color: var(--c-red); }
.konto-card__value {
  font: 500 clamp(48px, 6vw, 64px)/1 var(--font-body);
  color: var(--c-red);
  margin: 16px 0 12px;
}
.konto-card__value--saldo {
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1.05;
}
.konto-card__caption {
  font: 400 14px/1.5 var(--font-body);
  color: var(--c-muted);
}

.konto-hist { margin-top: 48px; }
.konto-hist__list {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.konto-hist__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--c-border-soft);
  flex-wrap: wrap;
}
.konto-hist__row:last-child { border-bottom: 0; }
.konto-hist__date {
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-red);
  min-width: 88px;
}
.konto-hist__label { font: 500 16px var(--font-body); }
.konto-hist__guest {
  font: 400 14px var(--font-body);
  color: var(--c-muted);
}

/* Empty-State */
.empty {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 40px;
  text-align: center;
}
.empty p {
  font: 400 17px var(--font-body);
  color: rgba(26, 26, 26, 0.75);
}

/* Pagination */
.pager {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 48px;
}
.pager span,
.pager a {
  font: 500 13px var(--font-body);
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pager span[aria-current="page"] {
  background: var(--c-red);
  color: var(--c-bg);
}
.pager a {
  color: var(--c-muted);
  border: 1px solid var(--c-border);
}

/* Vorstands-Karte */
.vorstand-card {
  margin-top: 28px;
  max-width: 420px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.vorstand-card__portrait {
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, #d4a574, #a87a4d);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vorstand-card__initials {
  font: 500 96px/1 var(--font-display);
  color: rgba(250, 246, 240, 0.7);
}
.vorstand-card__body { padding: 24px; }
.vorstand-card__body h3 { font: 500 24px/1.2 var(--font-display); }

/* Schutzkonzept */
.protect-card {
  margin-top: 64px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 32px;
  max-width: 760px;
}

/* About-Split */
.about-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 44px;
  align-items: center;
  margin-top: 72px;
}
.about-split__media {
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  background: linear-gradient(135deg, #c79066, #8f5a39);
  position: relative;
  overflow: hidden;
}
.about-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ─────────────────────────────────────────────────
   RECHTS- UND DOKU-SEITEN (Satzung, Schutzkonzept, DSE, Impressum)
   Renderer: renderMarkdown() → whitelisted Tag-Set (h2-h4, p, ul/ol, code, em, strong, a, hr).
   Styling neutral, lesbar, max-width für lange Sätze.
   ───────────────────────────────────────────────── */
.doc {
  max-width: 720px;
  font: 400 17px/1.7 var(--font-body);
  color: rgba(26, 26, 26, 0.88);
}
.doc__p {
  margin: 14px 0;
}
.doc__h {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.doc__h--1 { font-size: 26px; margin: 44px 0 12px; }
.doc__h--2 { font-size: 21px; margin: 32px 0 10px; }
.doc__h--3 { font-size: 18px; margin: 24px 0 8px; }
.doc__h--4 { font-size: 16px; margin: 20px 0 6px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); }
.doc__list {
  margin: 12px 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.doc__list li { padding-left: 4px; }
.doc__hr {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: 32px 0;
}
.doc a {
  color: var(--c-red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.2px;
}
.doc a:hover { color: var(--c-red-hover); }
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  background: var(--c-bg);
  padding: 1px 6px;
  border-radius: 4px;
}