/* 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.
   * Feste Hoehe statt min-height (Befund 04.10.): erst eine definite Hoehe
   * laesst height:100% am <video> greifen, sonst nimmt das Video seine
   * Eigenhoehe und darunter bleibt #140E0A als Band stehen (390px: 68px).
   * Die Box bleibt so hoch wie vorher: das Groessere aus 34svh und der
   * Videohoehe bei voller Breite (640/1138 = hero-mobile.mp4). */
  .hero__media { flex: 0 0 auto; height: max(34svh, calc(100vw * 640 / 1138)); }
  .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%;
}
/* 2026-10-19: Sehr breite, dichte Wortmarken (durchgehende Versalien in
 * Schwarz) wirken bei voller Kachelbreite schwerer als alle anderen Logos.
 * Breite gedeckelt, Wert per Tintenanteil gegen die übrigen Kacheln gemessen. */
.sponsor-tile img.is-wide {
  max-width: min(54%, 180px);
}
.sponsor-logo-container img.is-wide {
  max-width: min(84%, 180px);
}
/* 2026-10-19: Lange, helle Wortmarke (Bildmarke plus zweizeiliger Schriftzug,
 * Verhältnis 7:1). Im Logo-Kasten begrenzt die Breite, nicht die Höhe; mit
 * vollem Innenabstand wiegt sie nur zwei Drittel des Medians. Weniger seitlicher
 * Abstand gibt ihr die fehlende Breite. Auf der Startseite gedeckelt, weil sie
 * auf Kacheln ab etwa 380 px Breite sonst schwerer als die übrigen wirkt. Das sind die
 * Fensterbreiten 430 bis 560 und 860 bis 1024 px; außerhalb davon sind die
 * Kacheln schmaler und die Deckelung greift nicht. Beide Werte per Tintenanteil
 * gegen die übrigen Logos gemessen. */
.sponsor-logo-container.is-long {
  padding-inline: 8px;
}
.sponsor-logo-container.is-long img {
  max-width: min(100%, 270px);
}
.sponsor-tile img.is-long {
  max-width: min(74%, 250px);
}
.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); }
}

/* 2026-10-19: Sponsorenseite fest in drei Spalten ab 1024 px (auch iPad quer),
   zwei Spalten auf Tablet hoch, eine auf Mobil. Der Link sitzt am Kartenboden,
   damit er in jeder Reihe auf einer Linie steht, auch bei Karten ohne Text. */
.sponsors-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1023px) {
  .sponsors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .sponsors-grid { grid-template-columns: minmax(0, 1fr); }
}
.sponsor-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
/* Der Abstand zum Inhalt liegt im Fuß, nicht im Link: sonst umschließt der
   Fokusrahmen 14 px Leerraum über dem Text. Als Flex-Kind ist der Link so
   hoch wie seine Zeile. */
.sponsor-card-foot {
  display: flex;
  margin-top: auto;
  padding-top: 14px;
}

/* 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;
}
/* Formularkarte (Login, Passwort setzen und vergessen): keine automatische Silbentrennung.
   Die Texte sind kurz, die Karte ist hoechstens 400px breit; base.css trennt .text-body und
   .text-small sonst automatisch (dort fuer lange Fliesstexte auf 320px gedacht). */
.login-form .text-body,
.login-form .text-small,
.login-form p {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* 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;
}