:root {
  --club-green-900: #184d3b;
  --club-green-700: #2f7a5f;
  --club-green-500: #52a37d;
  --club-green-100: #e9f5ef;
  --club-white: #ffffff;
  --club-text: #1f332b;
  --club-muted: #516d61;
  --club-red: #d62828;
  --club-blue: #4d9bf5;
  --club-blue-strong: #2466cc;
  --club-blue-strong-dark: #1b4fa0;
  --club-nav: #2f3a34;
  --club-nav-active-bg: #b9d2c3;
  /* Warnfarbe für Markierungen – hebt sich vom vielen Grün ab. */
  --club-amber: #e8a317;
  --club-amber-strong: #b57708;
  --club-amber-soft: #fff6e2;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Zahlen laufen überall auf gleicher Breite – Q-TTR-Werte, Uhrzeiten,
   Datumsangaben und Countdown stehen dadurch sauber untereinander. */
body {
  margin: 0;
  font-family: "Public Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--club-text);
  background-color: var(--ed-paper);
}

.site-header {
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 24px rgba(24, 77, 59, 0.06);
}

.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.nav-link {
  color: var(--club-nav);
  font-weight: 600;
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  margin: 0 0.1rem;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--club-green-900);
  background-color: rgba(82, 163, 125, 0.14);
}

.nav-link.active {
  color: #15271e;
  background-color: var(--club-nav-active-bg);
}

.btn-join {
  color: var(--club-white);
  background-color: var(--club-blue-strong);
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  padding: 0.5rem 1.4rem;
  box-shadow: 0 8px 20px rgba(36, 102, 204, 0.32);
}

.btn-join:hover,
.btn-join:focus {
  color: var(--club-white);
  background-color: var(--club-blue-strong-dark);
  box-shadow: 0 10px 24px rgba(36, 102, 204, 0.4);
}

.hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  color: var(--club-white);
  padding: 4.5rem 0;
  min-height: 560px;
  display: flex;
  align-items: center;
  background-color: #103428;
  /* Nadelstreifen: auf kleinen Displays enger und kontrastreicher,
     sonst verschwindet die Textur im Hintergrund. */
  --hero-stripe-color: rgba(255, 255, 255, 0.05);
  --hero-stripe-width: 1px;
  --hero-stripe-gap: 44px;
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--hero-stripe-color) 0 var(--hero-stripe-width),
      transparent var(--hero-stripe-width) var(--hero-stripe-gap)
    ),
    linear-gradient(150deg, #15452f 0%, #0f3526 58%, #0b2a1f 100%);
}

@media (max-width: 767.98px) {
  .hero {
    --hero-stripe-color: rgba(255, 255, 255, 0.1);
    --hero-stripe-width: 2px;
    --hero-stripe-gap: 40px;
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-badge {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  margin: 0.65rem 0 0;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.72);
}

.hero-badge svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: var(--club-blue);
  flex: 0 0 auto;
}

.hero-badge strong {
  color: #ffffff;
  font-weight: 600;
}

.hero-badge-sep {
  margin: 0 0.35rem;
  opacity: 0.45;
}

.hero-badge-muted {
  color: rgba(255, 255, 255, 0.78);
}

.hero-title {
  font-size: clamp(2.6rem, 6vw, 4.7rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.hero-subtitle {
  max-width: 44ch;
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 2.1rem;
}

.hero-subtitle a {
  color: var(--club-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.hero-subtitle a:hover {
  text-decoration-color: currentColor;
}

.hero-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.75rem;
  font-size: 1.02rem;
}

.hero-actions .btn svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

.btn-hero-light {
  color: var(--club-green-900);
  background-color: #ffffff;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
}

.btn-hero-light:hover,
.btn-hero-light:focus {
  color: var(--club-green-900);
  background-color: #e9f2ec;
}

.kpi-band {
  width: 100%;
  padding: 2.4rem 0;
  color: var(--club-white);
  background: #0d2c20;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.kpi-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
}

.kpi-grid .hero-stat {
  position: relative;
  padding: 0.3rem 2.2rem;
}

.kpi-grid .hero-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 2.6rem;
  background: rgba(255, 255, 255, 0.14);
}

.hero-stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
}

.hero-stat-body {
  display: flex;
  flex-direction: column;
}

.hero-stat-icon {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-stat-icon svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: currentColor;
}

.hero-stat-num {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
}

.hero-stat-label {
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}

.hero-logo-wrap {
  position: relative;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.hero-logo-wrap::before {
  content: "";
  position: absolute;
  width: 118%;
  height: 118%;
  border-radius: 50%;
  opacity: 0.5;
  background: radial-gradient(circle, rgba(214, 40, 40, 0.55), transparent 62%);
  filter: blur(12px);
  z-index: 0;
}

.hero-logo {
  position: relative;
  z-index: 1;
  width: 300px;
  height: 300px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
}

.hero-trust {
  /* flex statt inline-flex: als Inline-Kasten säße die Zeile auf einer
     Textgrundlinie und bekäme darunter zusätzlichen Platz – der Abstand
     zur nächsten Zeile wäre dann größer als zwischen den übrigen. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.72);
}

.hero-trust svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: var(--club-blue);
  flex: 0 0 auto;
}

.hero-trust strong {
  color: #ffffff;
  font-weight: 600;
}

@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-badge,
.hero-title,
.hero-subtitle,
.hero-actions,
.hero-trust {
  animation: heroRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-logo-wrap {
  animation: heroFade 0.8s ease-out 0.15s both;
}

.hero-title {
  animation-delay: 0.08s;
}

.hero-subtitle {
  animation-delay: 0.2s;
}

.hero-actions {
  animation-delay: 0.36s;
}

.hero-trust {
  animation-delay: 0.5s;
}

.hero-badge {
  animation-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  .hero-badge,
  .hero-title,
  .hero-subtitle,
  .hero-actions,
  .hero-trust,
  .hero-logo-wrap,
  .hero-logo {
    animation: none;
  }
}

.page-main {
  position: relative;
}

.cta-band {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  background-color: #0e3325;
  background-image:
    radial-gradient(900px 420px at 82% 130%, rgba(82, 163, 125, 0.22), transparent 60%),
    linear-gradient(150deg, #154430, #0b2a1f);
}

.cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding: 3.4rem 0;
}

.cta-eyebrow {
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--club-green-500);
}

.cta-title {
  margin: 0 0 0.6rem;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  color: #ffffff;
}

.cta-sub {
  margin: 0;
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.78);
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
  font-size: 1.05rem;
  padding: 0.8rem 1.9rem;
}

.btn-cta svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

.cta-watermark {
  position: absolute;
  right: -36px;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  height: 260px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.reveal-enabled .content-section,
/* Abschnitte der Unterseiten gleiten beim Erscheinen sanft herein –
   dieselbe Bewegung wie beim Aufruf-Band der Startseite. */
.reveal-enabled .js-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal-enabled .js-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-enabled .cta-band {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal-enabled .content-section.is-visible,
.reveal-enabled .cta-band.is-visible {
  opacity: 1;
  transform: none;
}

.news-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* ---------------------------------------------------------------------
   Startseite: neueste Meldung als großer Aufmacher über die volle Breite,
   darunter die drei nächsten als kompakte Karten.
   --------------------------------------------------------------------- */
.news-lead {
  position: relative;
  display: block;
  min-height: 26rem;
  border-radius: 1.4rem;
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
  background: var(--club-green-900);
  box-shadow: 0 20px 46px rgba(24, 77, 59, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-lead:focus-visible {
  outline: 3px solid var(--club-green-500);
  outline-offset: 3px;
}

.news-lead-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

/* Hochformat vollständig zeigen – der Rahmen bleibt gleich groß. */
.news-lead-img.is-tall {
  object-fit: contain;
  background: var(--club-green-900);
}

/* Dunkler Verlauf, damit die Schrift auf jedem Foto lesbar bleibt. */
.news-lead-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  min-height: inherit;
  height: 100%;
  padding: 3.5rem clamp(1.25rem, 4vw, 3.5rem) clamp(1.4rem, 2.4vw, 2rem);
  text-align: center;
  /* Der Verlauf beginnt erst im unteren Drittel – so bleibt vom Foto
     möglichst viel frei und die Schrift trotzdem gut lesbar. */
  background: linear-gradient(
    180deg,
    rgba(8, 32, 23, 0) 0%,
    rgba(8, 32, 23, 0) 38%,
    rgba(8, 32, 23, 0.55) 68%,
    rgba(8, 32, 23, 0.9) 100%
  );
}

.news-lead-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.news-tag.is-onphoto {
  background: rgba(255, 255, 255, 0.92);
  color: var(--club-green-900);
}

.news-lead-date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.85rem;
  font-weight: 600;
}

.news-lead-date svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
}

/* Der Titel ist der Blickfang – er steht vollständig da, nutzt aber
   höchstens drei Zeilen, damit vom Foto genug frei bleibt. */
.news-lead-title {
  margin: 0.1rem 0 0;
  max-width: 30ch;
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-lead-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  padding: 0.52rem 1.35rem;
  border-radius: 999px;
  background: #ffffff;
  color: var(--club-green-900);
  font-weight: 700;
  font-size: 0.95rem;
}

.news-lead-cta svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
  transition: transform 0.18s ease;
}

/* ---------------------------------------------------------------------
   Maus-Effekte. Nur für Geräte mit echtem Zeiger – auf Touch würden sie
   nach dem Antippen „kleben" bleiben. Wer Animationen reduziert haben
   möchte, bekommt weiter unten die ruhige Variante.
   --------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  /* Aufmacher: anheben, Foto sanft heranfahren, Verlauf etwas kräftiger */
  .news-lead:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 62px rgba(24, 77, 59, 0.32);
  }

  .news-lead:hover .news-lead-img {
    transform: scale(1.06);
  }

  .news-lead-body {
    transition: background 0.35s ease;
  }

  .news-lead:hover .news-lead-body {
    background: linear-gradient(
      180deg,
      rgba(8, 32, 23, 0) 0%,
      rgba(8, 32, 23, 0.12) 34%,
      rgba(8, 32, 23, 0.62) 66%,
      rgba(8, 32, 23, 0.94) 100%
    );
  }

  .news-lead:hover .news-lead-cta {
    background: var(--club-green-700);
    color: #ffffff;
  }

  .news-lead:hover .news-lead-cta svg {
    transform: translateX(4px);
  }

  /* Die drei kleinen Karten: anheben, Bild heranfahren, Titel wird grün */
  .news-mini {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  /* Etwas deutlicher als die übrigen Karten – überschreibt .news-card:hover */
  .news-card.news-mini:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 48px rgba(24, 77, 59, 0.2);
  }

  .news-mini-img {
    transition: transform 0.45s ease;
  }

  .news-mini:hover .news-mini-img {
    transform: scale(1.06);
  }

  .news-mini-title {
    transition: color 0.18s ease;
  }

  .news-mini:hover .news-mini-title {
    color: var(--club-green-700);
  }

  /* Zeitstrahl: Bild leicht heranfahren, Punkt am Strahl wächst mit */
  .timeline-img {
    transition: transform 0.35s ease, box-shadow 0.2s ease;
  }

  .timeline-card:hover .timeline-img {
    transform: scale(1.03);
    box-shadow: 0 10px 24px rgba(24, 77, 59, 0.18);
  }

  .timeline-marker {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .timeline-item:hover .timeline-marker {
    transform: scale(1.35);
    box-shadow: 0 0 0 3px var(--club-green-100), 0 0 0 6px rgba(82, 163, 125, 0.25);
  }

  .timeline-text h2 {
    transition: color 0.18s ease;
  }

  .timeline-item:hover .timeline-text h2 {
    color: var(--club-green-700);
  }

  /* Filter- und Seiten-Schaltflächen heben sich leicht an */
  .news-chip:hover,
  .news-page-btn:hover:not(:disabled):not(.is-active),
  .news-all-btn:hover {
    transform: translateY(-2px);
  }

  .news-chip,
  .news-page-btn,
  .news-all-btn {
    transition: transform 0.16s ease, border-color 0.16s ease,
      background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
  }
}

/* Ruhige Variante: keine Bewegung, nur die Farbwechsel bleiben. */
@media (prefers-reduced-motion: reduce) {
  .news-lead,
  .news-lead-img,
  .news-mini,
  .news-mini-img,
  .timeline-img,
  .timeline-marker,
  .news-chip,
  .news-page-btn,
  .news-all-btn {
    transition: none;
  }

  .news-lead:hover,
  .news-lead:hover .news-lead-img,
  .news-mini:hover,
  .news-mini:hover .news-mini-img,
  .timeline-card:hover .timeline-img,
  .timeline-item:hover .timeline-marker,
  .news-chip:hover,
  .news-page-btn:hover:not(:disabled):not(.is-active),
  .news-all-btn:hover {
    transform: none;
  }
}

/* Die drei kleineren Karten darunter */
.news-mini-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #ffffff;
}

.news-mini-img.is-tall {
  object-fit: contain;
}

.news-mini-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--club-green-900);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.3rem 1.4rem 1.4rem;
}

.news-more {
  margin-top: auto;
  padding-top: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--club-green-700);
  font-weight: 700;
  font-size: 0.9rem;
}

.news-more svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
  transition: transform 0.18s ease;
}

.news-card:hover .news-more svg,
.news-card:focus-visible .news-more svg {
  transform: translateX(3px);
}

.news-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 1.4rem;
  border-radius: 999px;
  border: 1px solid #cfe3d8;
  background: #ffffff;
  color: var(--club-green-700);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.news-all-btn:hover,
.news-all-btn:focus-visible {
  border-color: var(--club-green-500);
  background: var(--club-green-100);
  color: var(--club-green-900);
  outline: none;
}

.news-all-btn svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

.news-filter[hidden] {
  display: none;
}

.news-filter-title {
  margin: 0 0 0.65rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--club-green-900);
}

.news-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.news-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.05rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid #cfe3d8;
  background: #f7fcf9;
  color: #2f5a48;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.news-chip:hover {
  border-color: #9cccb5;
}

.news-chip:focus-visible {
  outline: 2px solid var(--club-green-700);
  outline-offset: 2px;
}

.news-chip.is-active {
  border-color: var(--club-green-700);
  background: linear-gradient(145deg, var(--club-green-700), var(--club-green-900));
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(24, 77, 59, 0.22);
}

.news-chip-count {
  padding: 0.05rem 0.42rem;
  border-radius: 999px;
  background: rgba(24, 77, 59, 0.1);
  font-size: 0.76rem;
  font-weight: 700;
}

.news-chip.is-active .news-chip-count {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

/* Blättern unterhalb des Zeitstrahls */
#news-pager[hidden] {
  display: none;
}

.news-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 2rem;
}

.news-page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.news-page-btn {
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 0.7rem;
  border: 1px solid #cfe3d8;
  background: #ffffff;
  color: #2f5a48;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.18s ease;
}

.news-page-btn:hover:not(:disabled) {
  border-color: #9cccb5;
  background: #f7fcf9;
}

.news-page-btn:focus-visible {
  outline: 2px solid var(--club-green-700);
  outline-offset: 2px;
}

.news-page-btn.is-active {
  border-color: var(--club-green-700);
  background: linear-gradient(145deg, var(--club-green-700), var(--club-green-900));
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(24, 77, 59, 0.22);
  cursor: default;
}

.news-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.news-pagination-info {
  margin: 0.7rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: #5c7a6d;
}

.news-empty {
  list-style: none;
  padding: 1.6rem;
  border: 1px dashed #cfe3d8;
  border-radius: 1rem;
  background: #ffffff;
  color: #5c7a6d;
  text-align: center;
}

.timeline {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 44px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--club-green-500), #d7ebe1);
}

.timeline-item {
  position: relative;
  padding-left: 80px;
  padding-bottom: 2.2rem;
  scroll-margin-top: 92px;
}

.timeline-marker {
  position: absolute;
  left: 36px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--club-green-500);
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 2px var(--club-green-100);
}

.timeline-year {
  position: relative;
  height: 2rem;
  margin-bottom: 0.55rem;
}

.timeline-year span {
  position: absolute;
  left: 44px;
  top: 0;
  transform: translateX(-50%);
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--club-green-700);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 0 0 4px #ffffff;
}

.timeline-card {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  background: #ffffff;
  border: 1px solid #e2efe8;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 12px 30px rgba(24, 77, 59, 0.08);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.timeline-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(24, 77, 59, 0.13);
}

/* Alle Vorschaubilder haben dasselbe Format (4:3 – das Format der meisten
   Fotos) und dieselbe Breite, egal ob das Original hoch oder quer ist.
   Dadurch steht der Zeitstrahl ruhig, und die Bilder wirken nicht mehr
   klein neben dem Text. Angeschnitten wird mittig; das vollständige Bild
   gibt es per Klick in der Großansicht. */
.timeline-img {
  flex: 0 0 240px;
  width: 240px;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
  background: #ffffff;
  border-radius: 0.7rem;
  cursor: zoom-in;
}

/* Hochformat-Aufnahmen würden im querformatigen Rahmen oben und unten
   abgeschnitten – sie werden vollständig eingepasst. Der Rahmen bleibt
   gleich groß, dadurch bleibt die Liste trotzdem ruhig. */
.timeline-img.is-tall {
  object-fit: contain;
  background: #ffffff;
}

/* Mehrere Bilder in einem Beitrag: Galerie mit Pfeilen, Punkten und
   Wischgeste – alle Bilder liegen nebeneinander in einem Rahmen. */
.timeline-gallery {
  position: relative;
  flex: 0 0 240px;
  width: 240px;
}

.gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: 0.7rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery-track::-webkit-scrollbar {
  display: none;
}

.gallery-track .timeline-img {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
}

.gallery-nav {
  position: absolute;
  top: calc(50% - 0.6rem);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--club-green-900);
  box-shadow: 0 3px 10px rgba(24, 77, 59, 0.28);
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.16s ease, background-color 0.16s ease;
}

.gallery-nav svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: currentColor;
}

.gallery-nav.is-prev {
  left: 0.4rem;
}

.gallery-nav.is-next {
  right: 0.4rem;
}

.gallery-nav:hover,
.gallery-nav:focus-visible {
  opacity: 1;
  background: #ffffff;
  outline: none;
}

.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 0.32rem;
  margin-top: 0.45rem;
}

.gallery-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c3ddd0;
  cursor: pointer;
  transition: background-color 0.16s ease, transform 0.16s ease;
}

.gallery-dot.is-active {
  background: var(--club-green-700);
  transform: scale(1.25);
}

/* Großansicht (Lightbox) beim Anklicken eines News-Bildes */
.news-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(10, 30, 22, 0.85);
  cursor: zoom-out;
}

.news-lightbox[hidden] {
  display: none;
}

.news-lightbox-img {
  max-width: min(1100px, 100%);
  max-height: 100%;
  object-fit: contain;
  border-radius: 0.6rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.news-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--club-green-900);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.news-lightbox-close:hover,
.news-lightbox-close:focus-visible {
  background: #ffffff;
}

.timeline-text {
  min-width: 0;
}

.timeline-text a {
  color: var(--club-green-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}

.timeline-text a:hover,
.timeline-text a:focus-visible {
  color: var(--club-green-900);
}

.timeline-item:target .timeline-card {
  border-color: var(--club-green-500);
  box-shadow: 0 0 0 2px var(--club-green-500), 0 18px 38px rgba(24, 77, 59, 0.14);
}

.timeline-textbody {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.timeline-textbody.expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.news-toggle {
  margin-top: 0.55rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--club-green-700);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}

.news-toggle:hover,
.news-toggle:focus-visible {
  color: var(--club-green-900);
  text-decoration: underline;
  outline: none;
}

.news-card,
.info-card,
.staff-card,
.doc-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-card:hover,
.info-card:hover,
.staff-card:hover,
.doc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(24, 77, 59, 0.16);
}

.news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.news-tag {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--club-green-100);
  color: var(--club-green-900);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.news-date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--club-muted);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.news-date svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: var(--club-green-700);
}

.news-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.7rem;
}

.news-hashtag {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--club-green-700);
  background: var(--club-green-100);
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
}

.calendar-item {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.calendar-item:hover {
  transform: translateX(3px);
  box-shadow: 0 12px 26px rgba(24, 77, 59, 0.12);
}

.contact-hp {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-card .form-check-label a {
  color: var(--club-green-700);
  font-weight: 600;
}

.contact-card .form-check-input:checked {
  background-color: var(--club-green-700);
  border-color: var(--club-green-700);
}

.form-status {
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--club-muted);
}

.form-status.is-ok {
  color: var(--club-green-700);
}

.form-status.is-err {
  color: var(--club-red);
}

.contact-card {
  position: relative;
  overflow: hidden;
}

.info-card {
  position: relative;
}

.hall-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hall-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.hall-thumb {
  display: block;
  width: calc(100% + 3rem);
  height: 250px;
  margin: -1.5rem -1.5rem 1.25rem;
  object-fit: cover;
  border: 0;
  cursor: zoom-in;
  transition: transform 0.5s ease;
}

.hall-card:hover .hall-thumb {
  transform: scale(1.045);
}

.hall-thumb:focus-visible {
  outline: 3px solid var(--club-green-500);
  outline-offset: -3px;
}

.hall-address {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--club-muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.hall-address svg {
  width: 1rem;
  height: 1rem;
  fill: var(--club-green-700);
  flex: 0 0 auto;
  margin-top: 0.15rem;
}

/* Als eigener Block (statt inline-flex), damit der Abstand nach unten
   zur Zeile „Eingang auf der rechten Seite" zuverlässig greift. */
.hall-route {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  margin-bottom: 0.75rem;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  border: 1px solid #cfe3d8;
  background: #f4fbf7;
  color: var(--club-green-700);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.hall-route:hover,
.hall-route:focus-visible {
  border-color: var(--club-green-500);
  background: var(--club-green-100);
  color: var(--club-green-900);
  outline: none;
}

.hall-route svg {
  width: 0.92rem;
  height: 0.92rem;
  fill: currentColor;
}

.hall-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid #e6efe9;
}

.hall-group-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--club-green-900);
}

.hall-group.is-youth .hall-group-title svg {
  fill: #d99a1e;
}

.hall-group-title svg {
  width: 1rem;
  height: 1rem;
  fill: var(--club-green-700);
}

.hall-group-title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(24, 77, 59, 0.35);
  text-underline-offset: 2px;
}

.hall-group-title a:hover {
  text-decoration-color: currentColor;
}

.hall-days {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.hall-days li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
}

.hall-day {
  flex: 0 0 2.2rem;
  text-align: center;
  padding: 0.18rem 0;
  border-radius: 0.45rem;
  background: #ffffff;
  border: 1px solid #cfe6d9;
  color: var(--club-green-900);
  font-weight: 700;
  font-size: 0.76rem;
}

.hall-group.is-youth .hall-day {
  border-color: #f0d9a8;
  color: #9a6611;
}

.hall-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.95rem;
}

.hall-foot {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.34rem 0.7rem;
  border-radius: 999px;
  background: var(--club-green-100);
  border: 1px solid #d4e8dd;
  color: var(--club-green-900);
  font-weight: 600;
  font-size: 0.8rem;
  vertical-align: top;
}

.hall-foot svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: var(--club-green-700);
  flex: 0 0 auto;
}

/* Aufklappbare Team-Karten: Nachbarkarte nicht mitstrecken (sonst leeres Weiß) */
#mannschaften .row {
  align-items: flex-start;
}

.team-card-expandable {
  position: relative;
  overflow: hidden;
  border: 1px solid #d7e8df;
  box-shadow: 0 16px 34px rgba(24, 77, 59, 0.11);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-card-expandable:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(24, 77, 59, 0.14);
}

.team-num {
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  border-radius: 0.85rem;
  background: linear-gradient(145deg, var(--club-green-700), var(--club-green-900));
  color: #ffffff;
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: 0 6px 14px rgba(24, 77, 59, 0.25);
}

.team-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
}

/* Mannschaftskarte: Klappen über Pfeil-Button im Kopf (summary) */
summary.team-card-top {
  cursor: pointer;
  list-style: none;
  align-items: center;
}

summary.team-card-top::-webkit-details-marker {
  display: none;
}

.team-toggle {
  margin-left: auto;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--club-green-100);
  color: var(--club-green-700);
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.team-toggle svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

summary.team-card-top:hover .team-toggle {
  background: var(--club-green-500);
  color: #ffffff;
}

.team-card[open] .team-roster {
  margin-top: 0.85rem;
}

.team-roster-foot {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 1rem;
}

.team-link {
  color: var(--club-green-700);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.team-link:hover,
.team-link:focus {
  color: var(--club-green-900);
  text-decoration: underline;
}

.team-lineup li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.36rem 0;
  border-bottom: 1px solid #eef5f1;
  font-size: 0.92rem;
}

.team-lineup-head {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem !important;
  font-weight: 700;
  color: #6b8478;
}

.lineup-pos {
  flex: 0 0 2.1rem;
  font-weight: 700;
  color: var(--club-green-700);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.lineup-name {
  font-weight: 600;
  color: #2f4b40;
}

.team-lineup-head .lineup-name {
  color: #6b8478;
  font-weight: 700;
}

.lineup-ttr {
  margin-left: auto;
  color: var(--club-muted);
  font-weight: 600;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

.lineup-mf {
  color: var(--club-green-700);
  font-weight: 700;
  font-size: 0.78rem;
}

.team-lineup-foot strong {
  color: var(--club-green-700);
}

.calendar-list {
  display: grid;
  gap: 0.8rem;
  /* Hält die Höhe, wenn keine Teams ausgewählt sind – sonst klappt der
     ganze Abschnitt schlagartig zusammen. */
  align-content: start;
  min-height: 21rem;
}

/* Hinweiszeile („keine Spiele") mittig im reservierten Bereich statt
   als schmaler Streifen am oberen Rand. */
.calendar-list > .calendar-note:only-child {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 21rem;
  padding: 1.5rem;
  color: var(--club-muted);
  background: rgba(255, 255, 255, 0.75);
  border: 1px dashed #c4dbd0;
  border-left-width: 1px;
  border-radius: 0.9rem;
  box-shadow: none;
}

.calendar-list.has-scroll {
  max-height: 29rem;
  overflow-y: auto;
  padding-right: 0.35rem;
}

.calendar-list.has-scroll::-webkit-scrollbar {
  width: 8px;
}

.calendar-list.has-scroll::-webkit-scrollbar-thumb {
  background: #b5cec2;
  border-radius: 999px;
}

.calendar-list.has-scroll::-webkit-scrollbar-track {
  background: #edf5f0;
  border-radius: 999px;
}

.calendar-item {
  background: var(--club-white);
  border-left: 5px solid var(--club-green-500);
  border-radius: 0.8rem;
  padding: 1rem 1.1rem;
  box-shadow: 0 8px 20px rgba(24, 77, 59, 0.08);
}

.calendar-note {
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  text-align: center;
  color: var(--club-muted);
  font-weight: 600;
  border-left: 0;
  border: 1px dashed #cfe3d8;
  background: #f7fcf9;
  box-shadow: none;
  padding: 1.5rem 1.1rem;
}

/* Agenda-Karten für kommende Spieltage */
.agenda-day {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 1rem;
  background: #ffffff;
  border: 1px solid #e0ece6;
  border-radius: 0.95rem;
  padding: 0.9rem;
  box-shadow: 0 8px 20px rgba(24, 77, 59, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.agenda-day:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(24, 77, 59, 0.14);
}

/* Im Kalender angeklickter bzw. hier ausgewählter Spieltag */
.agenda-day.is-selected {
  border-color: var(--club-amber-strong);
  background: var(--club-amber-soft);
  box-shadow: 0 0 0 3px rgba(232, 163, 23, 0.55), 0 14px 28px rgba(24, 77, 59, 0.14);
}

.agenda-day:focus-visible {
  outline: 2px solid var(--club-green-700);
  outline-offset: 2px;
}

.agenda-date {
  flex: 0 0 3.7rem;
  width: 3.7rem;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0;
  border-radius: 0.75rem;
  background: linear-gradient(160deg, var(--club-green-700), var(--club-green-900));
  color: #ffffff;
  line-height: 1.05;
}

.agenda-date-mon {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.92;
}

.agenda-date-wd {
  font-size: 0.66rem;
  font-weight: 600;
  opacity: 0.72;
  margin-top: 0.18rem;
}

.agenda-matches {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.7rem;
}

.agenda-match {
  position: relative;
}

.agenda-match-head,
.agenda-fixture,
.agenda-meta {
  position: relative;
  z-index: 1;
}

.agenda-match-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.32rem;
}

.agenda-team {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--club-green-900);
  background: var(--club-green-100);
  padding: 0.14rem 0.6rem;
  border-radius: 999px;
}

.agenda-flag.is-home {
  background: #e4f6ea;
  color: #1f7a44;
}

.agenda-flag.is-away {
  background: #fff1e0;
  color: #b5660d;
}

.agenda-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  color: var(--club-muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.agenda-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

.agenda-ic {
  width: 0.92rem;
  height: 0.92rem;
  fill: var(--club-green-700);
  flex: 0 0 auto;
}

.next-match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.nm-pulse {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #7be0ad;
  animation: nmPulse 1.8s infinite;
}

@keyframes nmPulse {
  0% { box-shadow: 0 0 0 0 rgba(123, 224, 173, 0.55); }
  70% { box-shadow: 0 0 0 0.6rem rgba(123, 224, 173, 0); }
  100% { box-shadow: 0 0 0 0 rgba(123, 224, 173, 0); }
}

.next-match .nm-flag {
  position: relative;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.16rem 0.6rem;
  border-radius: 999px;
}

.next-match .nm-flag.is-home {
  background: rgba(123, 224, 173, 0.22);
  color: #d7f7e7;
}

.next-match .nm-flag.is-away {
  background: rgba(255, 209, 140, 0.2);
  color: #ffe6bf;
}

.nm-teams {
  position: relative;
  margin: 0 0 0.55rem;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.next-match-meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin-bottom: 1rem;
}

.next-match-meta span {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
}

.next-match-countdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.nm-unit {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  min-width: 3.1rem;
  padding: 0.5rem 0.4rem;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.1);
}

.nm-sep {
  font-size: 1.35rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
  padding-bottom: 0.7rem;
}

.team-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.team-chip {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.team-filter-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.team-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.05rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #cfe3d8;
  background: #f7fcf9;
  color: #2f5a48;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.18s ease;
}

.team-filter-input:checked + span {
  border-color: var(--club-green-700);
  background: linear-gradient(145deg, var(--club-green-700), var(--club-green-900));
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(24, 77, 59, 0.22);
}

.team-filter-input:focus-visible + span {
  outline: 2px solid var(--club-green-500);
  outline-offset: 2px;
}

.team-chip:hover span {
  border-color: #9cccb5;
}

.mini-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.mini-calendar-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--club-green-900);
}

.mini-calendar-controls {
  display: inline-flex;
  gap: 0.35rem;
}

.mini-calendar-nav {
  border: 1px solid #bfd9cc;
  background: #f6fbf8;
  color: var(--club-green-900);
  border-radius: 0.55rem;
  padding: 0.22rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.mini-calendar-nav:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mini-calendar-nav:hover:not(:disabled) {
  border-color: var(--club-green-700);
  color: var(--club-green-700);
}

.team-filter-card,
.mini-calendar {
  position: relative;
  overflow: hidden;
}

.mini-calendar-weekdays,
.mini-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.mini-calendar-weekdays {
  margin-bottom: 0.35rem;
}

.mini-calendar-weekday {
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
  color: #5f7a6e;
}

.mini-calendar-day {
  height: 2.1rem;
  border-radius: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #284438;
  background: #f8fcfa;
  border: 1px solid #e8f2ed;
}

.mini-calendar-day.is-empty {
  background: transparent;
  border-color: transparent;
}

.mini-calendar-day.is-today {
  background: #ffe8e8;
  border-color: #ffbcbc;
  color: #b52828;
  font-weight: 700;
}

.mini-calendar-day.has-match {
  background: #d2e2f9;
  border-color: #5d86bf;
  color: #173f73;
  font-weight: 700;
}

.mini-calendar-day.has-match-home {
  background: #cfeedd;
  border-color: #4da474;
  color: #144d32;
  font-weight: 800;
}

.mini-calendar-day.has-match-mixed {
  background: linear-gradient(90deg, #cfeedd 0 50%, #d2e2f9 50% 100%);
  border-color: #6fa88a;
  color: #173c31;
  font-weight: 800;
}

.mini-calendar-day.is-today.has-match {
  background: linear-gradient(180deg, #ffe8e8, #d2e2f9);
  border-color: #b7a6a6;
}

.mini-calendar-day.is-today.has-match-home {
  background: linear-gradient(180deg, #ffe8e8, #cfeedd);
  border-color: #af8f8f;
}

.mini-calendar-day.is-today.has-match-mixed {
  background: linear-gradient(180deg, #ffe8e8 0 28%, transparent 28%),
    linear-gradient(90deg, #cfeedd 0 50%, #d2e2f9 50% 100%);
  border-color: #af8f8f;
}

/* Tage mit Spielen sind Buttons – Button-Eigenheiten zurücksetzen, damit
   sie exakt wie die übrigen Zellen aussehen. */
button.mini-calendar-day {
  width: 100%;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}

button.mini-calendar-day:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(24, 77, 59, 0.18);
}

/* Markierter Tag: gelber Rahmen statt grün, damit er sich von den
   grünen Heimspiel-Tagen klar abhebt. */
.mini-calendar-day.is-selected {
  border-color: var(--club-amber-strong);
  box-shadow: 0 0 0 3px var(--club-amber);
  position: relative;
  z-index: 1;
}

button.mini-calendar-day:focus-visible {
  outline: 2px solid var(--club-green-700);
  outline-offset: 2px;
}

.mini-calendar-legend {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-size: 0.8rem;
  color: #597367;
}

.mini-calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Der Legendeneintrag „Heute" ist zugleich der Sprung zum aktuellen
   Monat – deshalb ein Button, der aber wie die übrigen Einträge aussieht. */
button.mini-calendar-legend-item {
  font: inherit;
  color: inherit;
  padding: 0.2rem 0.62rem;
  margin: -0.2rem 0;
  /* Dauerhaft als Pille sichtbar, damit man sieht, dass es klickbar ist. */
  border: 1px solid #bfd9cc;
  border-radius: 999px;
  background: #f6fbf8;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

button.mini-calendar-legend-item:hover:not(:disabled) {
  background: var(--club-green-100);
  border-color: var(--club-green-500);
}

/* Im aktuellen Monat gibt es nichts zu springen: kein Zeigefinger,
   aber voll lesbar – es bleibt ja die Legende. */
button.mini-calendar-legend-item:disabled {
  cursor: default;
  opacity: 1;
}

button.mini-calendar-legend-item:focus-visible {
  outline: 2px solid var(--club-green-700);
  outline-offset: 2px;
}

.mini-calendar-dot.today {
  background: #ffc8c8;
  border: 1px solid #ff9f9f;
}

.mini-calendar-dot.match {
  background: #9ebce8;
  border: 1px solid #5d86bf;
}

.mini-calendar-dot.home-match {
  background: #b7e5c9;
  border: 1px solid #7fc89f;
}

.documents-grid {
  justify-content: center;
}

.doc-card {
  border: 1px solid #d6e8de;
  border-radius: 1rem;
  background: #ffffff;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(24, 77, 59, 0.08);
}

.doc-card-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  color: var(--club-green-900);
  background: #e9f5ef;
}

.doc-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  width: 100%;
}

.doc-actions .btn {
  width: 100%;
  border-radius: 0.65rem;
  font-weight: 600;
}

/* FAQ-Akkordeon */
.faq-list {
  display: grid;
  gap: 0.85rem;
  max-width: 62rem;
}

.faq-item {
  border: 1px solid #d7e8df;
  border-radius: 0.9rem;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(24, 77, 59, 0.07);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--club-green-900);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--club-green-700);
}

.faq-chevron {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--club-green-100);
  color: var(--club-green-700);
  transition: transform 0.2s ease;
}

.faq-chevron svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
}

.faq-item[open] summary {
  border-bottom: 1px solid #eef5f1;
}

.faq-answer p {
  margin: 0;
}

.faq-answer p + p {
  margin-top: 0.7rem;
}

.faq-answer a {
  color: var(--club-green-700);
  font-weight: 600;
}

.fee-period {
  color: var(--club-muted);
  font-weight: 600;
}

.fee-note {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--club-green-100);
  border: 1px solid #d2e9dd;
  border-radius: 0.9rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 2.75rem;
  color: #2f5a48;
}

.fee-note-icon {
  flex: 0 0 auto;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border-radius: 0.65rem;
  background: #ffffff;
  color: var(--club-green-700);
}

.fee-note strong {
  color: var(--club-green-900);
}

/* Schritte-Verlauf (z.B. "So läuft das Probetraining ab") – größere Karten,
   durch eine vertikale Linie verbunden, wächst nach unten. */
.step-flow {
  list-style: none;
  margin: 2rem auto 0;
  padding: 0;
  max-width: 40rem;
  position: relative;
}

.step-flow::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: linear-gradient(180deg, var(--club-green-500), #d7ebe1);
}

.step-flow-item {
  position: relative;
  display: flex;
  gap: 1.35rem;
  padding-bottom: 2.5rem;
}

.step-flow-item:last-child {
  padding-bottom: 0;
}

.step-flow-marker {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--club-green-100);
  color: var(--club-green-700);
  box-shadow: 0 0 0 6px #ffffff;
  position: relative;
  z-index: 1;
}

.step-flow-marker svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

.step-flow-body {
  padding-top: 0.6rem;
}

.step-flow-title {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--club-green-900);
}

.step-flow-text {
  margin: 0;
  max-width: 34rem;
  color: var(--ed-ink-2);
  line-height: 1.6;
}

.step-flow-text a {
  color: var(--club-green-700);
  font-weight: 600;
}

.doc-ic {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  margin-right: 0.4rem;
  vertical-align: -0.15em;
}

.join-cta-watermark {
  position: absolute;
  right: -1.5rem;
  bottom: -2.75rem;
  width: 11rem;
  opacity: 0.08;
  pointer-events: none;
}

.join-cta-text {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--club-green-500);
  box-shadow: 0 0 0 0.2rem rgba(82, 163, 125, 0.24);
}

.btn-club:hover,
.btn-club:focus {
  color: var(--club-white);
  background-color: var(--club-green-900);
  border-color: var(--club-green-900);
}

.standort-card {
  position: relative;
  margin-top: 1.5rem;
  border: 1px solid #d6e8de;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(24, 77, 59, 0.12);
}

.standort-info {
  position: relative;
  isolation: isolate;
  height: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff, #f3faf6);
}

/* Die Düsseldorf-Karte rechtsbündig hinter den Standortangaben. Auf dem
   Handy ist sie im Seitenhintergrund kaum noch zu sehen – hier bekommt
   sie einen Platz, an dem sie inhaltlich auch passt.
   z-index -1 legt sie über den Verlauf des Kastens, aber unter den Text. */
.standort-info::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Helle Blende darüber, die zur Textseite hin dichter wird – so bleibt
     die Schrift links gut lesbar und die Karte rechts sichtbar. */
  background:
    linear-gradient(100deg, var(--ed-paper) 0%, rgba(250, 249, 246, 0.84) 30%, rgba(250, 249, 246, 0.1) 76%),
    url("../img/dus-map.svg") no-repeat right -30px center / auto 122%;
  pointer-events: none;
}

.standort-list {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.standort-list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #3e5b4f;
  font-weight: 600;
  line-height: 1.4;
}

.standort-list a {
  color: #3e5b4f;
  text-decoration: none;
  word-break: break-word;
}

.standort-list a:hover,
.standort-list a:focus {
  color: var(--club-green-700);
  text-decoration: underline;
}

.standort-icon {
  flex: 0 0 2.3rem;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--club-green-100);
  color: var(--club-green-700);
}

.standort-btn {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.standort-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

.staff-group-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.85rem 0 1rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--club-green-900);
}

.staff-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f3faf6 100%);
  border: 1px solid #d7e8df;
  border-radius: 1rem;
  padding: 1.5rem 1rem 1.3rem;
  box-shadow: 0 10px 22px rgba(24, 77, 59, 0.08);
  text-align: center;
}

.staff-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.staff-text {
  min-width: 0;
}

.staff-photo {
  order: -1;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 999px;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 3px var(--club-green-100), 0 8px 16px rgba(24, 77, 59, 0.16);
  flex: 0 0 96px;
}

.staff-avatar {
  order: -1;
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--club-green-700), var(--club-green-900));
  color: #ffffff;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: 0.02em;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 3px var(--club-green-100), 0 8px 16px rgba(24, 77, 59, 0.16);
  user-select: none;
}

.footer {
  margin-top: 0;
  padding: 3.25rem 0 1.75rem;
  background: #103428;
  color: rgba(255, 255, 255, 0.72);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.footer-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.footer-name {
  margin: 0;
  font-weight: 800;
  font-size: 1.1rem;
  color: #ffffff;
}

.footer-tag {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.58);
}

.footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 150px;
}

.footer-head {
  margin: 0 0 0.35rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}

.footer-col a,
.footer-col span {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.92rem;
}

.footer-col a:hover,
.footer-col a:focus {
  color: #ffffff;
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.5rem;
  font-size: 0.88rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: 600;
  margin-left: 1rem;
}

.footer-links a:hover,
.footer-links a:focus {
  color: #ffffff;
  text-decoration: underline;
}

.legal-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 3.5rem 0;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(8, 28, 20, 0.86);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.lightbox.is-open {
  display: flex;
  animation: lightboxIn 0.2s ease;
}

@keyframes lightboxIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.lightbox-img {
  max-width: 94vw;
  max-height: 86vh;
  border-radius: 0.8rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: max(0.9rem, env(safe-area-inset-top));
  right: 1rem;
  width: 2.9rem;
  height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.3);
  outline: none;
}

/* Unterhalb von 1200px passt die Flex-Zeile mit den Trennstrichen nicht
   mehr in den Container – sie bräche als 3+1 um. Deshalb ab hier ein
   festes Raster aus vier gleich breiten Kacheln, das nie umbricht. */
@media (max-width: 1199.98px) {
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .kpi-grid .hero-stat {
    gap: 0.6rem;
    padding: 0.85rem 0.8rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .kpi-grid .hero-stat:not(:last-child)::after {
    display: none;
  }

  .kpi-grid .hero-stat-icon {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.65rem;
  }

  .kpi-grid .hero-stat-icon svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .kpi-grid .hero-stat-num {
    font-size: 1.7rem;
  }

  .kpi-grid .hero-stat-label {
    margin-top: 0.25rem;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }
}

@media (max-width: 991.98px) {
  .hero {
    min-height: auto;
    padding: 3.25rem 0;
  }

  .hero-logo {
    width: 230px;
    height: 230px;
  }
}

@media (max-width: 767.98px) {
  /* Kennzahlen als 2x2-Kacheln – gestapelt wirkte das Band wie ein
     einziger großer grüner Kasten. */
  .kpi-band {
    padding: 1.7rem 0;
  }

  /* Etwas schmalerer Außenrand, damit die Kacheln mehr Breite bekommen. */
  .kpi-band > .container {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .kpi-grid .hero-stat {
    gap: 0.7rem;
    padding: 0.95rem 0.9rem;
  }

  .kpi-grid .hero-stat-icon {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.6rem;
  }

  .kpi-grid .hero-stat-icon svg {
    width: 1.05rem;
    height: 1.05rem;
  }

  .kpi-grid .hero-stat-num {
    font-size: 1.6rem;
  }

  .kpi-grid .hero-stat-label {
    margin-top: 0.25rem;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }

  .agenda-date {
    flex-basis: 3.1rem;
    width: 3.1rem;
  }

  .calendar-list {
    min-height: 12rem;
  }

  /* Der Hinweis „keine Spiele" hält annähernd die Höhe der gekürzten
     Liste, damit der Abschnitt beim Abwählen nicht zusammenschnappt. */
  .calendar-list > .calendar-note:only-child {
    min-height: 18rem;
  }

  .calendar-list.has-scroll {
    max-height: 32rem;
  }

  .nm-unit {
    min-width: 0;
    flex: 1 1 0;
    padding: 0.5rem 0.2rem;
  }

  .nm-sep {
    display: none;
  }

  .brand-logo {
    width: 38px;
    height: 38px;
  }

  .hero {
    padding: 2.6rem 0;
    min-height: auto;
  }

  .hero-logo {
    width: 180px;
    height: 180px;
  }

  .footer-links a {
    margin-left: 0;
    margin-right: 1rem;
    display: inline-block;
    margin-top: 0.5rem;
  }

  .hall-groups {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .timeline-card {
    flex-direction: column;
  }

  .timeline-img {
    flex: none;
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
  }

  .news-rest-head span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--club-green-700);
  }

  .news-card.news-mini {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }

  .news-mini-img {
    flex: 0 0 7rem;
    width: 7rem;
    aspect-ratio: 1 / 1;
    align-self: center;
    margin: 0.7rem 0 0.7rem 0.7rem;
    border-radius: 0.7rem;
  }

  /* min-width: 0 – sonst schrumpft der Textblock nicht unter die Breite
     des längsten Wortes und schiebt die Karte auf. Lange Komposita wie
     „Jahreshauptversammlung" werden zusätzlich getrennt. */
  .news-mini .news-body {
    justify-content: center;
    min-width: 0;
    padding: 0.8rem 0.9rem;
  }

  .news-mini .news-mini-title {
    hyphens: auto;
    overflow-wrap: break-word;
  }

  /* In der schmalen Zeile ist wenig Platz: Kategorie und Datum dürfen
     umbrechen, statt über den Rand hinauszulaufen. */
  .news-mini .news-meta {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.3rem 0.55rem;
    margin-bottom: 0.4rem;
  }

  .news-mini-title {
    font-size: 0.97rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  /* In der schmalen Zeile wäre der Link doppelt – die ganze Karte ist
     bereits klickbar. */
  .news-mini .news-more {
    display: none;
  }

  /* Auf dem Handy sind die Pfeile größer – Daumenbedienung. */
  .gallery-nav {
    width: 2.4rem;
    height: 2.4rem;
  }

  .doc-actions {
    grid-template-columns: 1fr;
  }

  .staff-photo,
  .staff-avatar {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
  }
}

/* Vorstand & Trainerteam auf dem Handy: statt sieben hohen Karten
   untereinander kompakte Zeilen mit Avatar links. Das kürzt den
   Abschnitt etwa um die Hälfte und lässt die langen Rollenbezeichnungen
   ordentlich umbrechen. */
@media (max-width: 575.98px) {
  .staff-card {
    padding: 0.8rem 0.95rem;
    text-align: left;
    border-radius: 0.85rem;
  }

  /* Der Akzentstreifen wandert von oben an die linke Kante. */
  .staff-card::before {
    right: auto;
    bottom: 0;
    width: 4px;
    height: auto;
    background: linear-gradient(180deg, var(--club-green-700), var(--club-green-500));
  }

  .staff-card-content {
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
  }

  .staff-photo,
  .staff-avatar {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .staff-avatar {
    font-size: 1.15rem;
  }

  .staff-text h4 {
    font-size: 0.98rem;
    margin-bottom: 0.1rem !important;
  }

  .staff-role {
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .staff-group-title {
    margin: 1.35rem 0 0.75rem;
  }
}

/* =====================================================================
   Mannschaften: Bewegung
   1) Die Karten laufen beim Hereinscrollen versetzt ein, statt alle
      gleichzeitig zu erscheinen.
   2) Die Aufstellung blendet sich beim Aufklappen ein. Die Höhe selbst
      wird bewusst nicht animiert – <details> rendert den Inhalt im
      geschlossenen Zustand gar nicht, eine Höhenanimation bräuchte
      deshalb JavaScript und wäre anfällig.
   ===================================================================== */
@keyframes teamCardIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.reveal-enabled #mannschaften.is-visible .team-card-expandable {
  animation: teamCardIn 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.reveal-enabled #mannschaften.is-visible .row > div:nth-child(1) .team-card-expandable { animation-delay: 0.06s; }
.reveal-enabled #mannschaften.is-visible .row > div:nth-child(2) .team-card-expandable { animation-delay: 0.12s; }
.reveal-enabled #mannschaften.is-visible .row > div:nth-child(3) .team-card-expandable { animation-delay: 0.18s; }
.reveal-enabled #mannschaften.is-visible .row > div:nth-child(4) .team-card-expandable { animation-delay: 0.24s; }
.reveal-enabled #mannschaften.is-visible .row > div:nth-child(5) .team-card-expandable { animation-delay: 0.30s; }
.reveal-enabled #mannschaften.is-visible .row > div:nth-child(6) .team-card-expandable { animation-delay: 0.36s; }
.reveal-enabled #mannschaften.is-visible .row > div:nth-child(7) .team-card-expandable { animation-delay: 0.42s; }

@keyframes rosterIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rosterRowIn {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

#mannschaften .team-card[open] .team-roster {
  animation: rosterIn 0.28s ease-out both;
}

/* Leichter Versatz für die ersten Zeilen – danach laufen alle mit, damit
   lange Aufstellungen nicht spürbar verzögert erscheinen. */
#mannschaften .team-card[open] .team-lineup li {
  animation: rosterRowIn 0.3s ease-out both;
  animation-delay: 0.12s;
}

#mannschaften .team-card[open] .team-lineup li:nth-child(1) { animation-delay: 0.05s; }
#mannschaften .team-card[open] .team-lineup li:nth-child(2) { animation-delay: 0.07s; }
#mannschaften .team-card[open] .team-lineup li:nth-child(3) { animation-delay: 0.09s; }
#mannschaften .team-card[open] .team-lineup li:nth-child(4) { animation-delay: 0.11s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-enabled #mannschaften.is-visible .team-card-expandable,
  #mannschaften .team-card[open] .team-roster,
  #mannschaften .team-card[open] .team-lineup li {
    animation: none;
  }
}

/* =====================================================================
   REDAKTIONELLER LAYER
   Ruhiges Magazin-Layout für die Abschnitte 02–06: Papierton statt Grün,
   schwere Schlagzeile, Kicker mit Nummer, Haarlinien statt Karten.
   Die Spieltage stehen als einziger Abschnitt auf Dunkel.
   Bewusst über `.ed-section` gekapselt, damit die übrigen Abschnitte
   (News, Kontakt) unberührt bleiben.
   ===================================================================== */

/* Beide Schriften liegen lokal im Projekt – kein Aufruf an Google beim
   Seitenaufruf, damit keine IP-Adressen der Besucher übertragen werden
   (siehe Datenschutzerklärung). Je eine variable Datei deckt alle
   benötigten Schnitte ab. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/publicsans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ed-paper: #faf9f6;
  --ed-ink: #14201b;
  --ed-green: #184d3b;
  --ed-green-hover: #0f3527;
  --ed-accent: #c8622a;
  --ed-ink-2: #4a5a52;
  --ed-ink-3: #6b7a73;
  --ed-ink-4: #9aa69f;
  --ed-rule: #e2dfd6;
  --ed-rule-soft: #edebe4;
  --ed-dark: #14201b;
  /* Verlauf der Aufruf-Bänder: links das tiefe Vereinsgrün, zur rechten
     Seite hin – dort, wo das Wappen sitzt – deutlich heller. Beide Bänder
     (Startseite und Beitragsseite) nutzen denselben Verlauf. */
  --ed-band-verlauf: linear-gradient(
    100deg,
    #14201b 0%,
    #14201b 44%,
    #1d2e26 66%,
    #2a3e34 85%,
    #334b3e 100%
  );
  --ed-dark-ink: #faf9f6;
  --ed-dark-ink-2: #9baaa2;
  --ed-dark-accent: #e08a52;
  --ed-dark-rule: #2a3831;
}

/* Schlagzeilen in der Display-Schrift, eng gesetzt. */
h1,
h2,
h3,
.ed-title,
.hero h1,
.cta-title,
.section-title,
.team-name,
.hall-name,
.staff-text h4,
.news-lead-title {
  font-family: "Bricolage Grotesque", "Public Sans", "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.ed-section .faq-item summary,
.ed-section .team-count,
.ed-section .lineup-name,
.ed-section .lineup-ttr {
  font-family: "Public Sans", "Segoe UI", Arial, sans-serif;
}

/* --- Grundfläche eines Abschnitts ------------------------------------ */
.ed-section {
  position: relative;
  padding: 5.5rem 0 5rem;
  color: var(--ed-ink);
  background: var(--ed-paper);
}

.ed-section > .container {
  max-width: 1040px;
}

.ed-section.is-dark {
  color: var(--ed-dark-ink);
  background: var(--ed-dark);
}

/* --- Kopf: Kicker, Schlagzeile, Einleitung, Linie -------------------- */
.ed-head {
  margin-bottom: 2.4rem;
}

.ed-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ed-ink-2);
}

.ed-eyebrow .ed-num {
  font-weight: 700;
  color: var(--ed-accent);
}

.ed-section.is-dark .ed-eyebrow {
  color: var(--ed-dark-ink-2);
}

.ed-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: end;
  gap: 0.9rem 3rem;
  margin-top: 1.1rem;
}

.ed-title {
  margin: 0;
  font-size: clamp(2.3rem, 4.3vw, 3.5rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: inherit;
}

.ed-intro {
  margin: 0 0 0.45rem;
  max-width: 44ch;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ed-ink-2);
}

.ed-section.is-dark .ed-intro {
  color: var(--ed-dark-ink-2);
}

/* Fließtext-Absatz unterhalb eines ed-head – .ed-intro ist für die kurze
   Zeile neben der Überschrift gedacht (44ch) und dafür zu schmal für einen
   ganzen Absatz. */
.section-lead {
  max-width: 60ch;
  margin: 1.75rem 0 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ed-ink-2);
}

.ed-section.is-dark .section-lead {
  color: var(--ed-dark-ink-2);
}

/* Zwei aufeinanderfolgende Absätze brauchen weniger Abstand zueinander als
   der erste zur Kopfzeile darüber. */
.section-lead + .section-lead {
  margin-top: 1rem;
}

/* Jugend-Sektion auf der Startseite: Zahlenreihe als Blickfang – dieselbe
   Zähl-Animation wie im Kennzahlen-Band der Startseite (siehe
   .hero-stat-num), nur in der hellen Editorial-Palette statt auf dunklem
   Grund. */
.jugend-stats {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4rem;
  row-gap: 1.5rem;
  margin: 2.25rem 0;
}

.jugend-stat {
  display: flex;
  flex-direction: column;
}

.jugend-stat-num {
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ed-green);
}

.jugend-stat-label {
  margin-top: 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
}

.ed-rule {
  height: 2px;
  margin-top: 1.5rem;
  background: var(--ed-ink);
}

.ed-section.is-dark .ed-rule {
  background: var(--ed-dark-ink);
}

@media (max-width: 767.98px) {
  .ed-section {
    padding: 3.5rem 0 3.25rem;
  }

  .ed-head-row {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    align-items: start;
  }

  .ed-intro {
    margin-bottom: 0;
  }
}

/* --- 02 Mannschaften: Zeilenliste statt Kartenraster ----------------- */
#mannschaften .row {
  --bs-gutter-y: 0;
}

#mannschaften .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Hallen und Porträts liegen im Raster statt im Bootstrap-Grid. */
.ed-section .hall-grid,
.ed-section .staff-grid {
  margin: 0;
}

.ed-section .hall-grid > [class*="col-"],
.ed-section .staff-grid > [class*="col-"] {
  flex: none;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.ed-section .team-card {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--ed-rule);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ed-section .team-card::before,
.ed-section .team-card::after {
  content: none;
}

.ed-section .team-card-top {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0 1rem;
  padding: 1.1rem 0;
  background: none;
}

.ed-section .team-num {
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ed-accent);
  font-size: 1.15rem;
  font-weight: 800;
}

.ed-section .team-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.85rem;
  min-width: 0;
}

.ed-section .team-name {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ed-ink);
}

.ed-section .team-league-badge {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ed-ink-2);
  font-size: 0.95rem;
  font-weight: 400;
}

/* Spielerzahl rechts – wird beim Laden aus der Aufstellung ermittelt. */
.ed-section .team-count {
  color: var(--ed-ink-2);
  font-size: 0.85rem;
  white-space: nowrap;
}

.ed-section .team-toggle {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.9rem;
  border: 0;
  background: none;
  color: var(--ed-ink);
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

.ed-section .team-card[open] .team-toggle {
  transform: rotate(0deg);
}

.ed-section .team-roster {
  padding: 0 0 1.5rem 3.4rem;
  border: 0;
  background: none;
}

.ed-section .team-lineup {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ed-section .team-lineup li.team-lineup-head {
  display: none;
}

.ed-section .team-lineup li {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--ed-rule);
  background: none;
}

.ed-section .lineup-pos {
  color: var(--ed-ink-3);
  font-size: 0.78rem;
  font-weight: 500;
}

.ed-section .lineup-name {
  color: var(--ed-ink);
  font-size: 0.95rem;
}

.ed-section .lineup-ttr {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ed-ink);
}

.ed-section .team-roster-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
  margin-top: 1rem;
  padding: 0;
  border: 0;
  background: none;
}

.ed-section .team-lineup-foot {
  margin: 0;
  color: var(--ed-ink-2);
  font-size: 0.82rem;
}

.ed-section .team-lineup-foot strong {
  font-weight: 600;
}

.ed-section .team-profile-link {
  color: var(--ed-accent);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

@media (max-width: 575.98px) {

  .ed-section .team-name {
    font-size: 1.1rem;
  }

  .ed-section .team-count {
    display: none;
  }
}

/* --- 03 Hallen: Foto, Adresse, Zeiten als Haarlinien-Tabelle ---------- */
.ed-section .hall-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
}

.ed-section .hall-card {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.ed-section .hall-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
  margin-bottom: 1.4rem;
}

.ed-section .hall-head {
  display: block;
  padding: 0;
  border: 0;
  background: none;
}

.ed-section .hall-name {
  margin: 0 0 0.45rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ed-ink);
}

/* Symbole entfallen – die Zeilen tragen sich selbst. */
.ed-section .hall-address svg,
.ed-section .hall-group-title svg,
.ed-section .hall-foot svg {
  display: none;
}

.ed-section .hall-address {
  margin: 0 0 0.2rem;
  color: var(--ed-ink-2);
  font-size: 0.95rem;
  line-height: 1.5;
}

.ed-section .hall-entrance {
  margin-bottom: 1.2rem;
}

.ed-section .hall-groups {
  display: block;
  margin: 0;
}

.ed-section .hall-group {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  margin-bottom: 1.6rem;
}

.ed-section .hall-group-title {
  margin: 0 0 0.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ed-rule);
  color: var(--ed-ink-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.ed-section .hall-group.is-youth .hall-group-title {
  color: var(--ed-accent);
}

.ed-section .hall-days li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border: 0;
  background: none;
}

.ed-section .hall-day {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ed-ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.ed-section .hall-time {
  color: var(--ed-ink);
  font-size: 0.95rem;
  font-weight: 400;
}

.ed-section .hall-empty {
  display: block;
  padding: 0.45rem 0;
  color: var(--ed-ink-2);
  font-size: 0.93rem;
  font-style: normal;
}

.ed-section .hall-foot {
  display: block;
  margin: 0 0 0.15rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ed-ink-2);
  font-size: 0.86rem;
}

.ed-section .hall-route {
  display: inline-block;
  margin-top: 1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--ed-accent);
  font-size: 0.92rem;
  font-weight: 600;
}

.ed-section .hall-route svg {
  display: none;
}

@media (max-width: 767.98px) {
  .ed-section .hall-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* --- 05 Vorstand & Trainerteam: Porträtraster ohne Karten ------------- */
.ed-section .staff-group-title {
  margin: 2.2rem 0 1.1rem;
  color: var(--ed-ink-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.ed-section .staff-group-title:first-of-type {
  margin-top: 0.4rem;
}

.ed-section .staff-group-title::before {
  content: none;
}

.ed-section .staff-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.6rem;
}

.ed-section .staff-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.ed-section .staff-card-content {
  display: flex;
  flex-direction: column;
  /* Ohne stretch zentriert der Flexkasten den Textblock unter dem Bild –
     Name und Funktion stünden dann eingerückt statt an der Bildkante. */
  align-items: stretch;
  gap: 0.9rem;
  padding: 0;
}

.ed-section .staff-photo {
  order: -1;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #efece5;
}

/* Ohne dieses Gegenstück bleibt das Avatar-Ersatzbild (siehe
   renderStaffAvatars in main.js) bei der kleinen 96px-Kreisgröße der
   Basisregel, während echte Fotos hier auf Kartenbreite wachsen. Der Sprung
   von klein auf groß beim Nachladen verschiebt das ganze Layout – daher
   müssen Foto und Avatar hier exakt gleich groß sein. */
.ed-section .staff-avatar {
  order: -1;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: clamp(2rem, 6vw, 3.2rem);
}

.ed-section .staff-text h4 {
  margin: 0 0 0.15rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ed-ink);
}

.ed-section .staff-role {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ed-ink-2);
  font-size: 0.9rem;
  font-weight: 400;
}

/* Herausgehobene Ansprechperson-Karte (z.B. Jugendseite): Eyebrow-Label
   über dem Namen, kurzer Beschreibungstext unter der Rolle. */
.staff-eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ed-accent);
}

.staff-desc {
  margin: 0.6rem 0 0;
  color: var(--ed-ink-2);
  font-size: 0.92rem;
  line-height: 1.55;
}

.staff-contact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}

.staff-contact svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: var(--ed-green);
}

.staff-contact a {
  color: var(--ed-green);
  font-weight: 600;
}

/* Kompakte Namensliste mit Haarlinien, z.B. "Trainerteam Nachwuchs"
   neben der Ansprechperson-Karte. */
.trainer-list-head {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
}

.trainer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trainer-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--ed-rule);
}

.trainer-list li:first-child {
  padding-top: 0;
}

.trainer-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ed-ink);
}

.trainer-role {
  color: var(--ed-ink-2);
  font-size: 0.88rem;
}

.trainer-list-link {
  display: inline-block;
  margin-top: 1.1rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ed-green);
  text-decoration: underline;
  text-decoration-color: rgba(24, 77, 59, 0.35);
  text-underline-offset: 2px;
}

.trainer-list-link:hover {
  text-decoration-color: currentColor;
}

/* Trainingszeiten-Tabelle (z.B. Jugendseite): Tag/Zeit/Gruppe. */
.zeiten-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.zeiten-table thead th {
  padding: 0.7rem 0.9rem;
  background: var(--ed-rule-soft);
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
}

.zeiten-table thead th:first-child {
  border-radius: 0.5rem 0 0 0;
}

.zeiten-table thead th:last-child {
  border-radius: 0 0.5rem 0 0;
}

.zeiten-table tbody th,
.zeiten-table tbody td {
  padding: 0.9rem;
  border-bottom: 1px solid var(--ed-rule);
  text-align: left;
  font-weight: 400;
  color: var(--ed-ink-2);
}

.zeiten-table tbody th {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ed-ink);
}

.zeiten-table tbody tr:last-child th,
.zeiten-table tbody tr:last-child td {
  border-bottom: 0;
}

.zeiten-note {
  margin: 1rem 0 0;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--ed-ink-3);
}

/* --- 06 Häufige Fragen: Zeilen mit Haarlinie -------------------------- */
.ed-section .faq-list {
  display: block;
}

.ed-section .faq-item {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--ed-rule);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ed-section .faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ed-ink);
}

.ed-section .faq-chevron {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  background: none;
  color: var(--ed-ink);
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

.ed-section .faq-item[open] .faq-chevron {
  transform: rotate(0deg);
}

.ed-section .faq-answer {
  padding: 0 0 1.3rem;
  color: var(--ed-ink-2);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* --- Kontakt: Formular und Standort nebeneinander -------------------- */
@media (min-width: 992px) {
  #kontakt > .container {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: start;
    gap: 0 3.4rem;
  }

  #kontakt > .container > .ed-head {
    grid-column: 1 / -1;
  }

  /* Standort daneben: Angaben oben, Kartenfreigabe darunter */
  #kontakt .standort-card {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  #kontakt .standort-card .row > [class*="col-"] {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
}

.ed-section .standort-info {
  padding: 1.6rem 1.5rem 1.7rem 0;
}

.ed-section .standort-sub {
  color: var(--ed-ink-3);
}

/* Auf schmalen Geräten galten für die Porträts noch die Regeln des alten
   Kartenlayouts (Zeile mit Avatar links). Im Raster des neuen Designs
   sprengte das die Spaltenbreite – hier zurückgesetzt. */
@media (max-width: 575.98px) {
  .ed-section .staff-card {
    padding: 0;
    border-radius: 0;
  }

  .ed-section .staff-card-content {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }

  .ed-section .staff-photo,
  .ed-section .staff-avatar {
    width: 100%;
    height: auto;
    flex-basis: auto;
    aspect-ratio: 1 / 1;
  }

  .ed-section .staff-avatar {
    font-size: 1.9rem;
  }

  .ed-section .staff-text {
    min-width: 0;
  }

  .ed-section .staff-text h4 {
    font-size: 0.95rem;
  }

  .ed-section .staff-role {
    font-size: 0.84rem;
  }
}

.ed-section .staff-role {
  display: block;
  overflow-wrap: break-word;
}

/* =====================================================================
   Ein Dunkelton für alle dunklen Flächen. Vorher liefen drei leicht
   verschiedene Grüntöne nebeneinander (Spieltage #14201B, CTA-Band
   #0E3325, Footer #103428) – nebeneinander gesehen wirkte das wie ein
   Druckfehler. Jetzt tragen alle die Tinte aus der Palette.
   ===================================================================== */
.cta-band {
  color: var(--ed-dark-ink);
  background-color: var(--ed-dark);
  background-image: none;
}

.cta-title {
  color: var(--ed-dark-ink);
}

.cta-sub {
  color: var(--ed-dark-ink-2);
}

.footer {
  background: var(--ed-dark);
  color: var(--ed-dark-ink-2);
}

.footer-name,
.footer-col a:hover,
.footer-links a:hover {
  color: var(--ed-dark-ink);
}

.footer-head {
  color: var(--ed-dark-ink-2);
}

.footer-tag,
.footer-col a,
.footer-col span,
.footer-links a,
.footer-bottom {
  color: var(--ed-dark-ink-2);
}

.footer-bottom,
.footer-top {
  border-color: var(--ed-dark-rule) !important;
}

/* --- CTA-Band: Wappen in Originalfarben, rechte Seite aufgehellt ------ */
.cta-band {
  background-image: var(--ed-band-verlauf);
}

.cta-watermark {
  filter: none;
  opacity: 0.22;
}

/* --- Kontakt: ruhigere Karte, engere Standortangaben ----------------- */
.ed-section .standort-list {
  display: grid;
  gap: 0.5rem;
  margin: 0.9rem 0 1.1rem;
}

.ed-section .standort-list li {
  align-items: start;
  gap: 0.6rem;
  color: var(--ed-ink);
  font-weight: 400;
  line-height: 1.35;
}

.ed-section .standort-list a {
  color: var(--ed-ink);
}

.ed-section .standort-list a:hover {
  color: var(--ed-green);
}

.ed-section .standort-icon svg {
  width: 1rem;
  height: 1rem;
  fill: var(--ed-ink-4);
}

.ed-section .standort-title {
  margin-bottom: 0.1rem;
  font-size: 1.25rem;
  line-height: 1.15;
}

.ed-section .standort-sub {
  margin: 0 0 0.9rem;
  line-height: 1.35;
}

.ed-section .standort-btn:hover,
.ed-section #mapConsentBtn:hover,
.ed-section .standort-btn:focus-visible,
.ed-section #mapConsentBtn:focus-visible {
  background: none;
  color: var(--ed-green-hover);
}

/* --- Zeilenabstände im gesamten redaktionellen Bereich --------------- */
.ed-section p,
.ed-section li,
.ed-section .form-check-label {
  line-height: 1.45;
}

.ed-section .ed-intro {
  line-height: 1.5;
}

.ed-section .hall-address,
.ed-section .hall-time,
.ed-section .hall-day,
.ed-section .staff-role,
.ed-section .news-mini-title,
.ed-section .lineup-name {
  line-height: 1.35;
}

.ed-section .team-name,
.ed-section .hall-name,
.ed-section .standort-title {
  line-height: 1.15;
}

/* Auf dem Handy waren die Porträts über die halbe Bildschirmbreite hoch.
   Drei statt zwei Spalten, quadratisch – das reicht zum Erkennen. */
@media (max-width: 767.98px) {
  .ed-section .staff-grid,
  .ed-section .staff-grid.is-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.3rem 0.9rem;
  }

  .ed-section .staff-avatar {
    font-size: 1.3rem;
  }

  .ed-section .staff-text h4 {
    font-size: 0.88rem;
    line-height: 1.25;
  }

  .ed-section .staff-role {
    font-size: 0.78rem;
    line-height: 1.3;
  }
}

/* Aufstellung als eine Spalte – die Reihenfolge 1.1 bis 1.6 liest sich
   untereinander klarer als im Dreispalter. */
.ed-section .team-lineup {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 34rem;
}

/* Der Studio-Hintergrund der Trikot-Fotos ist direkt in der Bilddatei
   auf den Papierton gesetzt – kein Überblenden mehr nötig. */
.ed-section .news-mini-img.is-tall,
.ed-section .news-lead-img.is-tall,
.timeline-img.is-tall {
  background: var(--ed-paper);
}

/* =====================================================================
   Unterseiten (News, Mitgliedsbeiträge, Impressum, Datenschutz) im
   gleichen Layout: Papierfläche, redaktioneller Kopf, keine Karten.
   ===================================================================== */
.ed-page {
  background: var(--ed-paper);
  padding: 3.5rem 0 4.5rem;
}

.ed-section.is-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 1rem;
  background: none;
}



.ed-page .legal-card,
.ed-page .doc-card,
.ed-page .join-cta {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ed-page .legal-card {
  padding: 0;
}

/* Zwischenüberschriften im Fließtext der Unterseiten. Sektionstitel sind
   davon ausgenommen – die tragen .ed-title und ihre eigene Größe.
   Das :where() hält die Spezifität bei 0,1,1; ein blankes :not(.ed-title)
   würde sie anheben und andere Regeln überholen. */
.ed-page h2:not(:where(.ed-title)),
.ed-page h3:not(:where(.ed-title)) {
  margin-top: 2.2rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ed-ink);
}

.ed-page p,
.ed-page li {
  color: var(--ed-ink-2);
  font-size: 0.97rem;
  line-height: 1.55;
}

.ed-page a {
  color: var(--ed-green);
}

.ed-page a:hover {
  color: var(--ed-green-hover);
}

.ed-page .fee-amount {
  font-family: "Bricolage Grotesque", "Public Sans", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ed-ink);
}

.ed-page .btn-join {
  border: 0;
  border-radius: 999px;
  background: var(--ed-green);
  color: #ffffff;
  font-weight: 600;
  box-shadow: none;
}

.ed-page .btn-join:hover {
  background: var(--ed-green-hover);
  color: #ffffff;
}

/* --- News-Seite: Zeitstrahl im redaktionellen Layout ------------------ */
.ed-page .news-filter {
  padding: 0 0 1.2rem;
  margin: 0 0 0.6rem;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ed-page .news-filter-title {
  color: var(--ed-ink-3);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ed-page .news-chip {
  border: 1px solid var(--ed-rule);
  background: none;
  color: var(--ed-ink-2);
  font-weight: 500;
}

.ed-page .news-chip:hover {
  border-color: var(--ed-ink-4);
  transform: none;
}

.ed-page .news-chip.is-active {
  border-color: var(--ed-ink);
  background: var(--ed-ink);
  color: var(--ed-paper);
  box-shadow: none;
}

.ed-page .news-chip-count {
  background: none;
  color: inherit;
  opacity: 0.65;
}

.ed-page .timeline-item {
  padding-left: 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--ed-rule);
}

.ed-page .timeline-year {
  height: auto;
  margin: 2.4rem 0 0.4rem;
}

.ed-page .timeline-year span {
  position: static;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ed-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  box-shadow: none;
}

.ed-page .timeline-card {
  gap: 1.6rem;
  padding: 1.6rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ed-page .timeline-card:hover {
  transform: none;
  box-shadow: none;
}

.ed-page .timeline-img {
  border-radius: 0;
  background: var(--ed-paper);
}

.ed-page .timeline-card:hover .timeline-img {
  transform: none;
  box-shadow: none;
}

.ed-page .timeline-text h2 {
  font-family: "Bricolage Grotesque", "Public Sans", Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ed-ink);
}

.ed-page .timeline-item:hover .timeline-text h2 {
  color: var(--ed-ink);
}

.ed-page .news-meta {
  margin-bottom: 0.5rem;
}

.ed-page .news-hashtag {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ed-ink-4);
  font-size: 0.78rem;
}

.ed-page .news-hashtags {
  gap: 0.15rem 0.8rem;
}

.ed-page .news-toggle,
.ed-page .timeline-text a {
  color: var(--ed-green);
}

.ed-page .gallery-nav {
  background: rgba(250, 249, 246, 0.94);
  color: var(--ed-ink);
  box-shadow: 0 2px 8px rgba(20, 32, 27, 0.2);
}

.ed-page .gallery-dot {
  background: var(--ed-rule);
}

.ed-page .gallery-dot.is-active {
  background: var(--ed-ink);
}

.ed-page .news-page-btn {
  border-color: var(--ed-rule);
  background: none;
  color: var(--ed-ink-2);
}

.ed-page .news-page-btn.is-active {
  border-color: var(--ed-ink);
  background: var(--ed-ink);
  color: var(--ed-paper);
  box-shadow: none;
}

.ed-page .news-pagination-info {
  color: var(--ed-ink-3);
}

/* Angesprungener Beitrag (Weiterlesen auf der Startseite): keine getönte
   Fläche – die biss sich mit dem Papierton hinter Hochformat-Fotos.
   Stattdessen bekommt der Zeitstrahl-Punkt einen Ring. */
.ed-page .timeline-item:target .timeline-card {
  border: 0;
  box-shadow: none;
  background: none;
}

.ed-page .timeline-item:target .timeline-marker {
  box-shadow: 0 0 0 4px rgba(200, 98, 42, 0.28);
}

.ed-page .fee-note,
.ed-page .doc-card {
  border: 0;
  border-radius: 0;
  background: none;
}

.ed-page .fee-note {
  padding: 0.9rem 0;
  border-top: 1px solid var(--ed-rule);
  border-bottom: 1px solid var(--ed-rule);
}

.ed-page .fee-note-icon {
  background: none;
  color: var(--ed-ink-4);
}

/* Nur der Download bleibt gefüllt, „Ansehen" tritt zurück */
.ed-page .doc-actions .btn-outline-success {
  border-color: var(--ed-rule);
  color: var(--ed-ink-2);
}

.ed-page .doc-actions .btn-outline-success:hover {
  border-color: var(--ed-ink);
  background: none;
  color: var(--ed-ink);
}

/* Lange Komposita wie „Datenschutzbestimmungen" passen in der großen
   Schlagzeilengröße nicht in schmale Displays – daher Silbentrennung. */
.ed-title {
  hyphens: auto;
  overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
  .ed-title {
    font-size: clamp(1.85rem, 8vw, 2.4rem);
  }
}

/* Aufmacher der News: Der dunkle Verlauf und der Bildzoom stammen aus dem
   alten Layout, in dem der Text auf dem Bild lag. Jetzt steht er darunter
   – der Verlauf machte den unteren Bildrand nur matschig. */
@media (hover: hover) and (pointer: fine) {
  .ed-section .news-lead:hover {
    transform: none;
    box-shadow: none;
  }

  .ed-section .news-lead:hover .news-lead-img {
    transform: none;
  }

  .ed-section .news-lead:hover .news-lead-body,
  .ed-section .news-lead .news-lead-body {
    background: none;
  }

  .ed-section .news-lead:hover .news-lead-title {
    color: var(--ed-green);
  }

  .ed-section .news-lead-title {
    transition: color 0.18s ease;
  }
}

/* Lange URLs in den Rechtstexten dürfen umbrechen. */
.ed-page a,
.ed-page p {
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .ed-title {
    font-size: clamp(1.85rem, 8vw, 2.4rem);
  }
}

/* Aufmacher der News: Der dunkle Verlauf und der Bildzoom stammen aus dem
   alten Layout, in dem der Text auf dem Bild lag. Jetzt steht er darunter
   – der Verlauf machte den unteren Bildrand nur matschig. */
@media (hover: hover) and (pointer: fine) {
  .ed-section .news-lead:hover {
    transform: none;
    box-shadow: none;
  }

  .ed-section .news-lead:hover .news-lead-img {
    transform: none;
  }

  .ed-section .news-lead:hover .news-lead-body,
  .ed-section .news-lead .news-lead-body {
    background: none;
  }

  .ed-section .news-lead:hover .news-lead-title {
    color: var(--ed-green);
  }

  .ed-section .news-lead-title {
    transition: color 0.18s ease;
  }
}

/* Standort-Symbole: ohne Kachel schrumpfen sie auf Textgröße und sitzen
   auf der ersten Zeile – vorher hielten sie noch die 2,3rem-Kachelbreite. */
.ed-section .standort-icon {
  flex: 0 0 1.1rem;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.18rem;
  align-items: flex-start;
}

.ed-section .standort-list li {
  gap: 0.7rem;
}

/* Karte im Standortblock wieder in Originalfarben */

/* Vorschaubilder auf der News-Seite größer */
.ed-page .timeline-img,
.ed-page .timeline-gallery {
  flex-basis: 320px;
  width: 320px;
}

@media (max-width: 767.98px) {
  .ed-page .timeline-img,
  .ed-page .timeline-gallery {
    flex-basis: auto;
    width: 100%;
  }
}

/* --- News-Seite: Zeitstrahl wieder mit Linie und Punkten ------------- */
.ed-page .timeline {
  position: relative;
  margin-top: 2rem;
}

.ed-page .timeline::before {
  display: block;
  left: 5px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--ed-rule);
}

.ed-page .timeline-item {
  position: relative;
  padding-left: 2.4rem;
}

.ed-page .timeline-marker {
  display: block;
  left: 0;
  top: 2.1rem;
  width: 11px;
  height: 11px;
  border: 2px solid var(--ed-paper);
  background: var(--ed-accent);
  box-shadow: none;
}

.ed-page .timeline-year {
  margin-left: 0;
  padding-left: 2.4rem;
}

.ed-page .timeline-year span {
  left: auto;
}

@media (max-width: 575.98px) {
  .ed-page .timeline-item,
  .ed-page .timeline-year {
    padding-left: 1.6rem;
  }

  .ed-page .timeline::before {
    left: 4px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .ed-section .news-lead-img,
  .ed-section .news-mini-img {
    transition: transform 0.45s ease;
  }

  .ed-section .news-lead:hover .news-lead-img,
  .ed-section .news-card.news-mini:hover .news-mini-img {
    transform: scale(1.045);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ed-section .news-lead:hover .news-lead-img,
  .ed-section .news-card.news-mini:hover .news-mini-img {
    transform: none;
  }
}

/* --- Beitragsseite: Abschluss-Aufruf und Dokumente -------------------- */
.ed-page .join-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-top: 3.5rem;
  padding: 2.4rem clamp(1.4rem, 4vw, 2.8rem);
  border: 0;
  border-radius: 0;
  background: var(--ed-dark);
  background-image: var(--ed-band-verlauf);
  color: var(--ed-dark-ink);
}

.ed-page .join-cta-watermark {
  position: absolute;
  right: -60px;
  top: 50%;
  width: 220px;
  height: 220px;
  transform: translateY(-50%);
  opacity: 0.18;
  pointer-events: none;
}

.ed-page .join-cta-text {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.ed-page .join-cta-eyebrow {
  margin: 0 0 0.45rem;
  color: var(--ed-dark-accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.ed-page .join-cta-title {
  margin: 0 0 0.4rem;
  font-family: "Bricolage Grotesque", "Public Sans", Arial, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ed-dark-ink);
}

.ed-page .join-cta-sub {
  margin: 0;
  color: var(--ed-dark-ink-2);
  font-size: 0.97rem;
}

.ed-page .join-cta .btn-cta {
  position: relative;
  z-index: 1;
  flex: none;
  background: var(--club-blue-strong);
  color: #ffffff;
}

.ed-page .join-cta .btn-cta:hover {
  background: var(--club-blue-strong-dark);
  color: #ffffff;
}

.ed-page .documents-grid {
  --bs-gutter-y: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem;
  margin: 1.4rem 0 0;
}

.ed-page .documents-grid > [class*="col-"] {
  width: 100%;
  max-width: none;
  padding: 0;
}

.ed-page .doc-card-icon svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: var(--ed-ink-4);
}

.ed-page .doc-card h3 {
  margin: 0;
  font-family: "Bricolage Grotesque", "Public Sans", Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ed-ink);
}

.ed-page .doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-start;
}

.ed-page .doc-actions .btn {
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  font-size: 0.88rem;
}

@media (max-width: 767.98px) {

  .ed-page .join-cta {
    padding: 1.8rem 1.3rem;
  }
}

.ed-page .btn-club {
  border: 0;
  border-radius: 999px;
  background: var(--ed-green);
  color: #ffffff;
  font-weight: 600;
}

.ed-page .btn-club:hover {
  background: var(--ed-green-hover);
  color: #ffffff;
}

.ed-page .doc-ic {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
  margin-right: 0.35rem;
}

/* Bootstrap zentriert die Dokumentkarten per !important – hier links. */
.ed-page .doc-card.text-center,
.ed-page .doc-card.text-center h3,
.ed-page .doc-card.text-center p {
  text-align: left !important;
}

.ed-page .doc-actions .btn {
  flex: 0 0 auto;
  width: auto;
}

/* Kicker über dem Probetraining-Aufruf in Terrakotta – wie auf der
   Beitragsseite. */
.cta-eyebrow {
  color: var(--ed-dark-accent);
  font-weight: 600;
  letter-spacing: 0.19em;
}

/* Dokumente als kleine Tabelle: zwei Zeilen, Titel links, Beschreibung
   in der Mitte, Aktionen rechts. */
.ed-page .documents-grid {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--ed-rule);
  margin-top: 1.2rem;
}

.ed-page .doc-card {
  display: grid;
  grid-template-columns: 1.4rem minmax(9rem, 0.9fr) minmax(0, 1.5fr) auto;
  align-items: center;
  gap: 0 1rem;
  padding: 0.9rem 0;
  border-top: 0;
  border-bottom: 1px solid var(--ed-rule);
}

.ed-page .doc-card-icon {
  grid-row: auto;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
}

.ed-page .doc-card-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.ed-page .doc-card h3 {
  margin: 0;
  font-size: 1.02rem;
}

.ed-page .doc-card > p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ed-ink-3);
}

.ed-page .doc-actions {
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (max-width: 767.98px) {
  .ed-page .doc-card {
    grid-template-columns: 1.4rem minmax(0, 1fr);
    gap: 0.3rem 0.8rem;
    padding: 1rem 0;
  }

  .ed-page .doc-card > p,
  .ed-page .doc-actions {
    grid-column: 2;
  }

  .ed-page .doc-actions {
    justify-content: flex-start;
    margin-top: 0.5rem;
  }
}

/* --- Beiträge als Tabelle -------------------------------------------- */
.ed-page .fee-table {
  width: 100%;
  margin: 1.4rem 0 2rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ed-page .fee-table th,
.ed-page .fee-table td {
  padding: 0.85rem 1rem 0.85rem 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--ed-rule);
}

.ed-page .fee-table thead th {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--ed-ink);
  color: var(--ed-ink-3);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ed-page .fee-table tbody th {
  color: var(--ed-ink);
  font-weight: 500;
  font-size: 0.97rem;
}

.ed-page .fee-table tbody tr:first-child td {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.ed-page .fee-table .fee-amount {
  font-size: 1.6rem;
  line-height: 1;
}

.ed-page .fee-table .fee-period {
  color: var(--ed-ink-3);
  font-size: 0.85rem;
}

.ed-page .fee-table tbody tr:last-child th,
.ed-page .fee-table tbody tr:last-child td {
  border-bottom: 0;
}

.ed-page .fee-note {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0;
}

.ed-page .fee-note-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: var(--ed-ink-4);
}

/* Beträge stehen rechtsbündig unter ihrer Spaltenüberschrift; die erste
   Spalte bleibt linksbündig. */
.ed-page .fee-table thead th:not(:first-child),
.ed-page .fee-table td {
  text-align: right;
}

.ed-page .fee-table tbody th .fee-row-text {
  font-weight: 600;
}

/* Symbol oben ausrichten, damit die Erläuterung darunter am Namen
   beginnt und nicht am Symbol. */
.ed-page .fee-table tbody th .fee-row-icon {
  align-items: flex-start;
}

.ed-page .fee-table tbody th .fee-row-icon svg {
  margin-top: 0.2rem;
}

/* Strich für „gibt es nicht" – zurückhaltend, aber auf Höhe der Beträge */
.ed-page .fee-table .fee-strich {
  color: var(--ed-ink-4);
  font-size: 1.6rem;
  line-height: 1;
}

/* Erläuterung unter dem Namen der Mitgliedschaft */
.ed-page .fee-table .fee-sub {
  display: block;
  margin-top: 0.15rem;
  color: var(--ed-ink-3);
  font-size: 0.85rem;
  font-weight: 400;
}

/* Linie auch unter der letzten Zeile: sie trennt die Tabelle von den
   Hinweisen darunter. */
.ed-page .fee-table tbody tr:last-child th,
.ed-page .fee-table tbody tr:last-child td {
  border-bottom: 1px solid var(--ed-rule);
}

/* Hinweise unter der Tabelle: schlichte Liste mit Symbol statt Kästen. */
.ed-page .fee-notes {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ed-page .fee-notes .fee-note {
  margin: 0;
  padding: 0;
  border: 0;
  align-items: flex-start;
}

/* Ohne das setzt .ed-page p einen Absatzabstand und die Zeilen stehen
   viel zu weit auseinander. */
.ed-page .fee-notes p {
  margin: 0;
  line-height: 1.55;
}

.ed-page .fee-notes .fee-note-icon {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
}

/* Probetraining-Aufruf in der Textbreite der Seite */
/* Das Band läuft über die volle Fensterbreite; sein Inhalt beginnt und
   endet trotzdem genau an den Kanten der Textspalte darüber. */
.ed-page .ed-cta {
  max-width: none;
  padding-left: max(clamp(1.4rem, 4vw, 2.8rem), calc((100% - 1040px) / 2 + 1rem));
  padding-right: max(clamp(1.4rem, 4vw, 2.8rem), calc((100% - 1040px) / 2 + 1rem));
}

/* --- Bestätigung nach dem Absenden ------------------------------------ */
/* Der Haken macht auf einen Blick klar, dass die Nachricht raus ist. */
.danke-haken {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  background: rgba(24, 77, 59, 0.1);
  color: var(--ed-green);
}

.danke-haken svg {
  width: 2.3rem;
  height: 2.3rem;
  fill: currentColor;
}

.ed-page .danke-lead {
  max-width: 48ch;
  margin: 1.3rem 0 0;
  color: var(--ed-ink-2);
  font-size: 1.15rem;
  line-height: 1.6;
}

/* --- Kopfbereich einer Unterseite ------------------------------------ */
/* Gibt der Seite oben Luft, statt direkt mit dem ersten Abschnitt zu
   beginnen. Das Wappen liegt als blasses Zeichen dahinter. */
.ed-page .page-hero {
  position: relative;
  overflow: hidden;
  padding-top: 2.2rem;
  padding-bottom: 1.4rem;
}

/* Ausschnitt aus Düsseldorf-Unterrath als blasses Zeichen im Hintergrund,
   nach rechts hin ausgeblendet, damit der Text lesbar bleibt. */
.page-hero-karte {
  position: absolute;
  top: 50%;
  right: -6%;
  width: clamp(260px, 46%, 560px);
  height: auto;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 45%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000 100%);
}

/* Zweite Zeile der Überschrift im Vereinsgrün */
.page-hero-akzent {
  color: var(--ed-green);
}

/* Auf schmalen Anzeigen liegt die Karte sonst mitten im Text. */
@media (max-width: 767.98px) {
  .page-hero-karte {
    right: -24%;
    width: 80%;
    opacity: 0.26;
  }
}

.ed-page .page-hero-title {
  margin-bottom: 1.2rem;
}

.ed-page .page-hero-lead {
  position: relative;
  max-width: 52ch;
  margin: 0 0 1.8rem;
  color: var(--ed-ink-2);
  font-size: 1.06rem;
  line-height: 1.6;
}

.page-hero-fakten {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--ed-rule);
  list-style: none;
}

.page-hero-fakten li {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(24, 77, 59, 0.09);
  color: var(--ed-green);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Nach dem Kopfbereich reicht eine kleinere Lücke als zwischen zwei
   gleichrangigen Abschnitten. */
.ed-page .page-hero + .ed-section.is-page {
  margin-top: 5rem;
}

@media (max-width: 991.98px) {
  .ed-page .page-hero + .ed-section.is-page {
    margin-top: 3.5rem;
  }
}

/* Lücke zwischen den Abschnitten einer Unterseite – dieselbe wie auf der
   Startseite (dort 168 px, im schmalen Band 108 px). .is-page hat keine
   senkrechte Polsterung, deshalb steht sie hier als Außenabstand. */
.ed-page .ed-cta,
.ed-page .ed-cta + .ed-section.is-page,
.ed-page .ed-section.is-page + .ed-section.is-page {
  margin-top: 10.5rem;
}

@media (max-width: 991.98px) {
  .ed-page .ed-cta,
  .ed-page .ed-cta + .ed-section.is-page,
  .ed-page .ed-section.is-page + .ed-section.is-page {
    margin-top: 6.75rem;
  }
}

@media (max-width: 575.98px) {
  .ed-page .fee-table th,
  .ed-page .fee-table td {
    padding: 0.7rem 0.5rem 0.7rem 0;
    font-size: 0.92rem;
  }

  .ed-page .fee-table .fee-amount,
  .ed-page .fee-table .fee-strich {
    font-size: 1.25rem;
  }

  /* Gestapelt braucht die erste Zeile keine Extra-Polsterung mehr –
     sonst steht sie luftiger da als die zweite. */
  .ed-page .fee-table tbody tr:first-child td {
    padding: 0.1rem 0;
  }

  /* Den Strich zeichnet gestapelt die Zeile selbst. Die Regel für die
     letzte Tabellenzeile würde sonst zusätzlich unter Name und beiden
     Beträgen je eine Linie ziehen. */
  .ed-page .fee-table tbody tr:last-child th,
  .ed-page .fee-table tbody tr:last-child td {
    border-bottom: 0;
  }

  /* Schmale Anzeige: Die Tabelle wird gestapelt. Sonst muesste man
     seitlich scrollen, um die Betraege ueberhaupt zu sehen. */
  .ed-page .fee-table,
  .ed-page .fee-table tbody,
  .ed-page .fee-table tr,
  .ed-page .fee-table tbody th,
  .ed-page .fee-table td {
    display: block;
    width: 100%;
  }

  .ed-page .fee-table thead {
    display: none;
  }

  .ed-page .fee-table tbody tr {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--ed-rule);
  }

  .ed-page .fee-table tbody th {
    padding: 0 0 0.45rem;
    border: 0;
  }

  .ed-page .fee-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.1rem 0;
    border: 0;
  }

  .ed-page .fee-table td::before {
    content: attr(data-label);
    color: var(--ed-ink-3);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
}

/* Mehr Luft zwischen Frage und aufgeklappter Antwort */
.ed-section .faq-answer {
  padding: 0.9rem 0 1.6rem;
}

/* Auf sehr schmalen Geräten darf die Beitragstabelle seitlich scrollen,
   statt die Seite aufzuschieben. */
@media (max-width: 419.98px) {

  .ed-page .fee-table th,
  .ed-page .fee-table td {
    padding-right: 1rem;
  }
}

/* Beitragstabelle: Symbole in den Spaltenköpfen */
.ed-page .fee-table thead th {
  vertical-align: bottom;
}

.ed-page .fee-col {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.ed-page .fee-col svg {
  width: 1rem;
  height: 1rem;
  fill: var(--ed-ink-4);
}

.ed-page .fee-row-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.ed-page .fee-row-icon svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  fill: var(--ed-ink-4);
}

.ed-page .join-cta .btn-cta:hover,
.ed-page .join-cta .btn-cta:focus-visible {
  background: var(--club-blue-strong-dark);
  color: #ffffff;
}

/* Aktuelle Seite in der Kopfleiste: der Knopf steht in Vereinsgrün,
   damit sichtbar ist, wo man gerade ist. */
.btn-join.active,
.btn-join.active:hover,
.btn-join.active:focus-visible {
  background: var(--ed-green);
  border-color: var(--ed-green);
  color: #ffffff;
  box-shadow: none;
}

/* --- Kopfleiste in den neuen Schriften -------------------------------- */
.navbar-brand {
  font-family: "Bricolage Grotesque", "Public Sans", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 1.15rem;
  color: var(--ed-ink);
}

.navbar-nav .nav-link {
  font-family: "Public Sans", Arial, sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: var(--ed-ink-2);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible {
  color: var(--ed-ink);
}

.navbar-nav .nav-link.active {
  font-weight: 600;
  color: var(--ed-ink);
}

.btn-join,
.btn-cta,
.navbar .btn {
  font-family: "Public Sans", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Kopfleiste auf dem Papierton statt reinweiß */
.site-header {
  background: rgba(250, 249, 246, 0.94);
}

/* --- 404 und Danke: Linkliste statt Knopfreihe ----------------------- */
.ed-links {
  display: grid;
  margin-top: 0.4rem;
  border-top: 1px solid var(--ed-rule);
}

.ed-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ed-rule);
  color: var(--ed-ink);
  font-family: "Bricolage Grotesque", "Public Sans", Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.ed-links a::after {
  content: "→";
  color: var(--ed-accent);
  font-family: "Public Sans", Arial, sans-serif;
  font-weight: 500;
  transition: transform 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ed-links a:hover {
    color: var(--ed-green);
  }

  .ed-links a:hover::after {
    transform: translateX(4px);
  }
}

/* =====================================================================
   04 SPIELTAGE – dunkler Abschnitt, komplett neu gefasst.

   Regeln für die Farbgebung, damit es eine gerade Linie gibt:
   · Fläche      #14201B  (Tinte)
   · Flächen 2   #1E2B25  (abgesetzte Kästen)
   · Linien      #2A3831
   · Text        #FAF9F6, Sekundärtext #9BAAA2
   · Akzent      #E08A52  – ausschließlich für: Countdown, Heimspiel-
                 Markierung, „heute" und aktive Zustände
   · Heim/Auswärts unterscheiden sich über gefüllt vs. umrandet, nicht
     über zwei zusätzliche Farben.
   ===================================================================== */
.ed-section.is-dark {
  --band-flaeche: #1e2b25;
  --band-linie: #2a3831;
  --band-linie-hell: #3a4a41;
  /* Drei klar unterscheidbare Zustände im Kalender:
     heute = neutral (creme), Heimspiel = terrakotta, Auswärtsspiel =
     salbeigrün. Alle drei liegen bei mindestens 6,3:1 Kontrast auf dem
     dunklen Band, dunkler Text darauf ebenso. */
  --band-heute: #faf9f6;
  --band-heim: #e08a52;
  --band-auswaerts: #86b39b;
}

/* --- Nächstes Spiel ---------------------------------------------------- */
.ed-section.is-dark .next-match {
  position: relative;
  overflow: hidden;
  padding: 1.4rem 1.5rem;
  margin: 0 0 2rem;
  border: 1px solid var(--band-linie);
  border-radius: 0;
  background: var(--band-flaeche);
  box-shadow: none;
  color: var(--ed-dark-ink);
}

.ed-section.is-dark .next-match::after {
  content: none;
}

.ed-section.is-dark .nm-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ed-dark-ink-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.ed-section.is-dark .nm-pulse {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--ed-dark-accent);
}

.ed-section.is-dark .nm-teams {
  margin: 0 0 0.7rem;
  font-family: "Bricolage Grotesque", "Public Sans", Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--ed-dark-ink);
}

.ed-section.is-dark .next-match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin-bottom: 1.1rem;
  color: var(--ed-dark-ink-2);
  font-size: 0.88rem;
}

.ed-section.is-dark .next-match-meta > * {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

.ed-section.is-dark .next-match-countdown {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.ed-section.is-dark .nm-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 3rem;
  padding: 0;
  border: 0;
  background: none;
}

.ed-section.is-dark .nm-num {
  font-family: "Bricolage Grotesque", "Public Sans", Arial, sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ed-dark-accent);
}

.ed-section.is-dark .nm-cap {
  color: var(--ed-dark-ink-2);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ed-section.is-dark .nm-sep {
  color: var(--band-linie-hell);
  font-size: 1.4rem;
}

/* Heim/Auswärts: gefüllt = Heim, umrandet = Auswärts */
.ed-section.is-dark .nm-flag,
.ed-section.is-dark .agenda-flag {
  padding: 0.22rem 0.7rem;
  border: 1px solid var(--ed-dark-accent);
  border-radius: 999px;
  background: none;
  color: var(--ed-dark-accent);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ed-section.is-dark .nm-flag.is-home,
.ed-section.is-dark .agenda-flag.is-home {
  background: var(--ed-dark-accent);
  color: var(--ed-dark);
}

/* Leerer Zustand: Ist keine Mannschaft ausgewählt (oder steht nichts an),
   bleibt der Kasten stehen und behält seine Höhe – er wird nur ruhig
   gestellt. Verschwände er, rutschte alles darunter (Mannschaftsfilter,
   Kalender, Liste) auf dem Handy ruckartig nach oben, genau während man
   die Haken setzt. */
.ed-section.is-dark .next-match.is-leer .nm-flag {
  visibility: hidden;
}

.ed-section.is-dark .next-match.is-leer .nm-pulse {
  animation: none;
  background: var(--band-linie-hell);
}

.ed-section.is-dark .next-match.is-leer .nm-teams {
  color: var(--ed-dark-ink-2);
}

.ed-section.is-dark .next-match.is-leer .nm-num,
.ed-section.is-dark .next-match.is-leer .nm-sep {
  color: var(--band-linie-hell);
}

/* --- Teamauswahl ------------------------------------------------------- */
.ed-section.is-dark .team-filter-card {
  padding: 0;
  margin-bottom: 1.6rem;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.ed-section.is-dark .team-filter-title {
  color: var(--ed-dark-ink-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.ed-section.is-dark .team-chip span {
  min-height: 2.1rem;
  padding: 0.35rem 0.95rem;
  border: 1px solid var(--band-linie-hell);
  border-radius: 999px;
  background: none;
  color: var(--ed-dark-ink-2);
  font-size: 0.86rem;
  font-weight: 500;
  box-shadow: none;
}

.ed-section.is-dark .team-filter-input:checked + span {
  border-color: var(--band-heim);
  background: var(--band-heim);
  color: var(--ed-dark);
  font-weight: 600;
}

.ed-section.is-dark .team-filter-input:focus-visible + span {
  outline: 2px solid var(--band-heute);
  outline-offset: 2px;
}

/* --- Monatskalender ---------------------------------------------------- */
.ed-section.is-dark .mini-calendar {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  color: var(--ed-dark-ink);
}

.ed-section.is-dark .mini-calendar-title {
  color: var(--ed-dark-ink);
  font-family: "Bricolage Grotesque", "Public Sans", Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ed-section.is-dark .mini-calendar-nav {
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--band-linie-hell);
  border-radius: 999px;
  background: none;
  color: var(--ed-dark-ink-2);
  font-size: 0.78rem;
}

.ed-section.is-dark .mini-calendar-nav:hover:not(:disabled) {
  border-color: var(--ed-dark-ink);
  color: var(--ed-dark-ink);
}

.ed-section.is-dark .mini-calendar-nav:disabled {
  opacity: 0.4;
}

.ed-section.is-dark .mini-calendar-weekday {
  color: var(--ed-dark-ink-2);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.ed-section.is-dark .mini-calendar-day {
  border: 0;
  border-radius: 0.35rem;
  background: none;
  color: var(--ed-dark-ink-2);
  font-size: 0.86rem;
  font-weight: 500;
}

/* Spieltage: Die Zelle ist nur dezent hinterlegt („hier ist was los“).
   Wer spielt und ob heim oder auswärts, zeigen die Mannschaftsmarken
   unter dem Datum. (Klassennamen stammen aus main.js: has-match =
   auswärts, has-match-home = heim, has-match-mixed = beides.) */
.ed-section.is-dark .mini-calendar-day.has-match,
.ed-section.is-dark .mini-calendar-day.has-match-home,
.ed-section.is-dark .mini-calendar-day.has-match-mixed {
  flex-direction: column;
  gap: 0.2rem;
  padding-bottom: 0;
  background: var(--band-linie);
  color: var(--ed-dark-ink);
  font-weight: 700;
}

.ed-section.is-dark .mini-calendar-num {
  line-height: 1;
}

/* Mannschaftsmarken: Nummer 1–6 bzw. D, gefüllt in Heim- oder
   Auswärtsfarbe – dieselbe Logik wie die Punkte in der Legende. */
.ed-section.is-dark .mini-calendar-teams {
  display: flex;
  justify-content: center;
  gap: 1px;
  max-width: 100%;
}

.ed-section.is-dark .mini-calendar-team {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.56rem;
  height: 0.8rem;
  padding: 0 0.1rem;
  border-radius: 0.15rem;
  color: var(--ed-dark);
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ed-section.is-dark .mini-calendar-team.is-home {
  background: var(--band-heim);
}

.ed-section.is-dark .mini-calendar-team.is-away {
  background: var(--band-auswaerts);
}

.ed-section.is-dark .mini-calendar-team.is-more {
  padding: 0;
  background: none;
  color: var(--ed-dark-ink-2);
}

.ed-section.is-dark .mini-calendar-team.is-legend {
  margin-right: 0.15rem;
  background: var(--ed-dark-ink-2);
}

/* „Heute" ist kein Spielzustand, sondern eine Ortsmarke – deshalb kein
   weiterer Rahmen, sondern ein Punkt unter der Zahl. So konkurriert die
   Markierung nicht mit den gefüllten Spieltagen. */
.ed-section.is-dark .mini-calendar-day.is-today {
  position: relative;
  box-shadow: none;
  color: var(--band-heute);
  font-weight: 700;
}

.ed-section.is-dark .mini-calendar-day.is-today::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.2rem;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--band-heute);
  transform: translateX(-50%);
}

/* Fällt heute auf einen Spieltag, belegen unten die Mannschaftsmarken
   den Platz – der Punkt rückt in die obere rechte Ecke. */
.ed-section.is-dark .mini-calendar-day.is-today.has-match,
.ed-section.is-dark .mini-calendar-day.is-today.has-match-home,
.ed-section.is-dark .mini-calendar-day.is-today.has-match-mixed {
  color: var(--band-heute);
}

.ed-section.is-dark .mini-calendar-day.is-today.has-match::after,
.ed-section.is-dark .mini-calendar-day.is-today.has-match-home::after,
.ed-section.is-dark .mini-calendar-day.is-today.has-match-mixed::after {
  top: 0.22rem;
  right: 0.22rem;
  bottom: auto;
  left: auto;
  transform: none;
}

/* Auswahl ändert die Farbe nicht – die Marken sagen weiterhin, ob heim
   oder auswärts gespielt wird. Hervorgehoben wird nur der Rahmen. */
.ed-section.is-dark .mini-calendar-day.is-selected {
  box-shadow: inset 0 0 0 2px var(--band-heute);
  font-weight: 700;
}

.ed-section.is-dark .mini-calendar-day:disabled,
.ed-section.is-dark .mini-calendar-day.is-empty {
  opacity: 0.28;
}

/* Legende: die Punkte tragen dieselbe Logik wie die Kalendertage */
.ed-section.is-dark .mini-calendar-legend {
  gap: 0.5rem 1rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--band-linie);
  color: var(--ed-dark-ink-2);
  font-size: 0.76rem;
}

.ed-section.is-dark .mini-calendar-legend-item,
.ed-section.is-dark button.mini-calendar-legend-item {
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--ed-dark-ink-2);
}

.ed-section.is-dark button.mini-calendar-legend-item:hover {
  border-bottom-color: var(--ed-dark-accent);
  color: var(--ed-dark-accent);
}

/* Die Legendenpunkte zeigen exakt dieselbe Logik wie die Kalendertage. */
.ed-section.is-dark .mini-calendar-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 0.16rem;
  background: none;
}

.ed-section.is-dark .mini-calendar-dot.today {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--band-heute);
  box-shadow: none;
}

.ed-section.is-dark .mini-calendar-dot.home-match {
  background: var(--band-heim);
}

.ed-section.is-dark .mini-calendar-dot.match {
  background: var(--band-auswaerts);
}

.ed-section.is-dark #calendarMeta,
.ed-section.is-dark #calendarMeta a {
  color: var(--ed-dark-ink-2);
  font-size: 0.78rem;
}

/* --- Terminliste ------------------------------------------------------- */
.ed-section.is-dark .calendar-list {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  /* Statt einer endlos langen Liste ein eigener Scrollbereich mit rund
     sechs sichtbaren Terminen – die Seite bleibt dadurch kompakt. */
  max-height: 30rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--band-linie-hell) transparent;
}

.ed-section.is-dark .calendar-list::-webkit-scrollbar {
  width: 6px;
}

.ed-section.is-dark .calendar-list::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--band-linie-hell);
}

.ed-section.is-dark .agenda-day {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0 1.4rem;
  padding: 1.35rem 0.6rem;
  border: 0;
  border-bottom: 1px solid var(--band-linie);
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  transition: background-color 0.16s ease;
}

.ed-section.is-dark .agenda-day:hover {
  transform: none;
  box-shadow: none;
  background: rgba(250, 249, 246, 0.035);
}

.ed-section.is-dark .agenda-day.is-selected {
  border-color: var(--ed-dark-accent);
  background: rgba(224, 138, 82, 0.1);
  box-shadow: none;
}

.ed-section.is-dark .agenda-date {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.ed-section.is-dark .agenda-date-day {
  display: block;
  font-family: "Bricolage Grotesque", "Public Sans", Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ed-dark-ink);
}

.ed-section.is-dark .agenda-date-mon {
  display: block;
  margin-top: 0.15rem;
  color: var(--ed-dark-ink-2);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ed-section.is-dark .agenda-date-wd {
  display: none;
}

/* Das Vereinswappen hinter jeder Zeile war weder erkennbar noch
   informativ – es macht die Liste nur unruhig. */
.ed-section.is-dark .agenda-match + .agenda-match {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--band-linie);
}

.ed-section.is-dark .agenda-match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ed-section.is-dark .agenda-team {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ed-dark-ink-2);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ed-section.is-dark .agenda-fixture {
  margin: 0.3rem 0 0.2rem;
  font-family: "Bricolage Grotesque", "Public Sans", Arial, sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ed-dark-ink);
}

.ed-section.is-dark .agenda-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  color: var(--ed-dark-ink-2);
  font-size: 0.86rem;
}

.ed-section.is-dark .agenda-ic {
  display: none;
}

.ed-section.is-dark .agenda-meta span + span::before {
  content: "·";
  margin-right: 0.6rem;
  color: var(--band-linie-hell);
}

.ed-section.is-dark .calendar-note,
.ed-section.is-dark .calendar-item {
  padding: 1.4rem 0;
  border: 0;
  border-bottom: 1px solid var(--band-linie);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ed-dark-ink-2);
  font-size: 0.92rem;
}

.ed-section.is-dark .calendar-item:hover {
  transform: none;
  box-shadow: none;
}

.ed-section.is-dark #calendarMeta a {
  color: var(--ed-dark-accent) !important;
}

/* --- 01 News: Aufmacher mit Bild, Titel darunter --------------------- */
.ed-section .news-lead {
  min-height: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ed-ink);
}

.ed-section .news-lead-img {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Hochformat füllt den Rahmen ebenfalls, aber mit Blick nach oben:
   Mittig gerahmt wären bei Personenfotos die Köpfe ab. */
.ed-section .news-lead-img.is-tall {
  object-fit: cover;
  object-position: 50% 8%;
}

.ed-section .news-lead-body {
  display: block;
  min-height: 0;
  height: auto;
  padding: 1.4rem 0 0;
  text-align: left;
  background: none;
}

.ed-section .news-lead-meta {
  justify-content: flex-start;
  gap: 0.9rem;
}

.ed-section .news-tag,
.ed-section .news-tag.is-onphoto {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ed-accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.ed-section .news-lead-date,
.ed-section .news-date {
  color: var(--ed-ink-3);
  font-size: 0.84rem;
  font-weight: 500;
}

.ed-section .news-lead-date svg,
.ed-section .news-date svg {
  display: none;
}

.ed-section .news-lead-title {
  max-width: 24ch;
  margin: 0.7rem 0 0;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ed-ink);
  text-shadow: none;
}

.ed-section .news-lead-cta {
  margin-top: 1rem;
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--ed-green);
  font-size: 0.92rem;
  font-weight: 600;
}

.ed-section .news-lead:hover {
  transform: none;
  box-shadow: none;
}

.ed-section .news-lead:hover .news-lead-cta {
  background: none;
  color: var(--ed-green-hover);
}

.ed-section .news-rest-head {
  display: block;
  margin: 1.6rem 0 0.3rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ed-rule);
}

.ed-section .news-rest-head span {
  display: inline-block;
  color: var(--ed-ink-3);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.ed-section .news-rest-head span::after {
  content: none;
}

.ed-section #news-grid {
  --bs-gutter-y: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 1.8rem;
  margin: 0;
}

.ed-section #news-grid > .col-12 {
  grid-column: 1 / -1;
}

.ed-section #news-grid > [class*="col-"] {
  width: 100%;
  max-width: none;
  padding: 0;
}

.ed-section .news-card.news-mini {
  display: block;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ed-section .news-mini-img {
  aspect-ratio: 16 / 10;
  border-radius: 0;
  background: var(--ed-paper);
}

.ed-section .news-mini .news-body {
  padding: 0.9rem 0 0;
}

.ed-section .news-mini-title {
  font-family: "Bricolage Grotesque", "Public Sans", Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ed-ink);
}

.ed-section .news-more {
  padding-top: 0.6rem;
  color: var(--ed-green);
  font-size: 0.86rem;
}

.ed-section .news-card.news-mini:hover {
  transform: none;
  box-shadow: none;
}

.ed-section .news-all {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ed-rule);
  text-align: left;
}

.ed-section .news-all-btn {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: none;
  color: var(--ed-green);
  font-weight: 600;
}

.ed-section .news-all-btn:hover {
  background: none;
  color: var(--ed-green-hover);
}

.ed-section .news-lead-media,
.ed-section .news-mini-media {
  display: block;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .ed-section .news-lead-img,
  .ed-section .news-mini-img {
    transition: transform 0.45s ease;
  }

  .ed-section .news-lead:hover .news-lead-img,
  .ed-section .news-card.news-mini:hover .news-mini-img {
    transform: scale(1.045);
  }

  .ed-section .news-lead:hover .news-lead-title {
    color: var(--ed-green);
  }

  .ed-section .news-lead-title {
    transition: color 0.18s ease;
  }
}

@media (max-width: 767.98px) {
  .ed-section .news-lead-img {
    aspect-ratio: 4 / 3;
  }

  .ed-section #news-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .ed-section .news-card.news-mini {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0 1rem;
    align-items: center;
  }

  .ed-section .news-mini-img {
    margin: 0;
    aspect-ratio: 1 / 1;
  }

  .ed-section .news-mini .news-body {
    padding: 0;
  }
}

/* --- 07 Kontakt: flaches Formular ------------------------------------ */
.ed-section .contact-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ed-section .contact-card::before {
  content: none;
}

.ed-section .form-label {
  margin-bottom: 0.35rem;
  color: var(--ed-ink-3);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ed-section .form-control,
.ed-section .form-select {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ed-rule);
  border-radius: 0.2rem;
  background-color: #ffffff;
  color: var(--ed-ink);
  font-size: 0.97rem;
  box-shadow: none;
}

.ed-section .form-control::placeholder {
  color: var(--ed-ink-4);
}

.ed-section .form-control:focus,
.ed-section .form-select:focus {
  border-color: var(--ed-green);
  box-shadow: 0 0 0 3px rgba(24, 77, 59, 0.12);
}

.ed-section .form-check-label {
  color: var(--ed-ink-2);
  font-size: 0.9rem;
}

.ed-section .form-check-label a {
  color: var(--ed-green);
}

.ed-section .form-check-input:checked {
  background-color: var(--ed-green);
  border-color: var(--ed-green);
}

.ed-section .btn-join {
  border: 0;
  border-radius: 999px;
  background: var(--ed-green);
  color: #ffffff;
  font-weight: 600;
  box-shadow: none;
}

.ed-section .btn-join:hover,
.ed-section .btn-join:focus-visible {
  background: var(--ed-green-hover);
  color: #ffffff;
}

.ed-section .form-status {
  color: var(--ed-ink-3);
  font-size: 0.9rem;
}

.ed-section .standort-card::before,
.ed-section .standort::before {
  content: none;
}

.ed-section .standort,
.ed-section .standort-card,
.ed-section .standort-info {
  border: 0;
  border-radius: 0;
  background-image: none;
  box-shadow: none;
}

.ed-section .standort-card {
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ed-rule);
  background-color: transparent;
}

.ed-section .standort-icon {
  border-radius: 0;
  background: none;
  color: var(--ed-green);
}

.ed-section .standort-eyebrow {
  margin-bottom: 0.5rem;
  color: var(--ed-ink-3);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ed-section .standort-title {
  font-family: "Bricolage Grotesque", "Public Sans", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ed-ink);
}

/* --- Hallen: Feinschliff --------------------------------------------- */
.ed-section .hall-thumb {
  margin: 0 0 1.3rem;
  aspect-ratio: 4 / 3;
}

.ed-section .hall-groups {
  border: 0;
  padding: 0;
}

.ed-section .hall-group {
  margin-bottom: 1.1rem;
}

.ed-section .hall-group-title {
  margin-bottom: 0.15rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--ed-rule);
}

.ed-section .hall-days li {
  padding: 0.18rem 0;
  border-bottom: 0;
}

.ed-section .hall-day {
  justify-self: start;
  font-size: 0.86rem;
}

.ed-section .hall-time {
  font-size: 0.92rem;
}

.ed-section .hall-days li.hall-empty {
  display: block;
  padding: 0.22rem 0;
  color: var(--ed-ink-3);
  font-size: 0.9rem;
}

.ed-section .hall-group.is-youth .hall-day,
.ed-section .hall-group.is-youth .hall-time {
  color: var(--ed-ink);
}

.ed-section .hall-perks {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--ed-rule);
}

.ed-section .hall-foot {
  display: grid;
  grid-template-columns: 1.05rem minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--ed-ink-3);
  font-size: 0.88rem;
}

.ed-section .hall-foot svg {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  fill: var(--ed-ink-4);
}

.ed-section .hall-route {
  margin-top: 1.1rem;
  color: var(--ed-green);
}

.ed-section .hall-route:hover {
  color: var(--ed-green-hover);
}

/* --- Vorstand: alle Porträts in einer Größe -------------------------- */
.ed-section .staff-grid,
.ed-section .staff-grid.is-board {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.9rem 1.6rem;
}

.ed-section .staff-card::before {
  content: none;
}

/* --- Farben der Vorlage in den Bausteinen ---------------------------- */
.ed-section .lineup-ttr,
.ed-section .team-profile-link,
.ed-section .faq-answer a {
  color: var(--ed-green);
}

.ed-section .team-profile-link:hover,
.ed-section .faq-answer a:hover {
  color: var(--ed-green-hover);
}

.ed-section .team-lineup li {
  border-bottom-color: var(--ed-rule-soft);
}

.ed-section .lineup-mf {
  color: var(--ed-ink-4);
}

.ed-section .info-card::before,
.ed-section .team-filter-card::before,
.ed-section .mini-calendar::before {
  content: none;
}

@media (max-width: 767.98px) {
  .ed-section .staff-grid,
  .ed-section .staff-grid.is-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.3rem 0.9rem;
  }
}

@media (max-width: 359.98px) {
  .ed-section .staff-grid,
  .ed-section .staff-grid.is-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Muss nach der Button-Regel stehen: Im Kontaktbereich ist nur das
   Absenden eine gefüllte Aktion, „Route planen" bleibt ein Textlink. */
.ed-section .standort-btn,
.ed-section .btn-join.standort-btn {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: none;
  color: var(--ed-green);
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: none;
}

.ed-section .standort-btn:hover,
.ed-section .btn-join.standort-btn:hover {
  background: none;
  color: var(--ed-green-hover);
}

.ed-section .standort-btn svg {
  display: none;
}

/* Ersatz-Porträts (Initialen) füllen dieselbe quadratische Fläche wie
   echte Fotos – sonst erscheinen sie als runde Kreise aus dem alten
   Kartenlayout und das Raster reißt auseinander. */
.ed-section .staff-avatar {
  order: -1;
  width: 100%;
  height: auto;
  flex: none;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: #efece5;
  color: var(--ed-ink-3);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ed-section .staff-card,
.ed-section .staff-card .staff-text h4,
.ed-section .staff-card .staff-role,
.ed-section .staff-card-content,
.ed-section .staff-text {
  text-align: left;
}

/* Der „Heute"-Eintrag der Legende ist zugleich der Sprung zum aktuellen
   Monat. Als reiner Text war er nicht als Schaltfläche erkennbar –
   deshalb eine deutliche Pille in der Akzentfarbe. */
.ed-section.is-dark button.mini-calendar-legend-item {
  padding: 0.25rem 0.8rem;
  border: 1px solid var(--band-heute);
  border-radius: 999px;
  background: none;
  color: var(--band-heute);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.ed-section.is-dark button.mini-calendar-legend-item:hover,
.ed-section.is-dark button.mini-calendar-legend-item:focus-visible {
  background: var(--band-heute);
  border-color: var(--band-heute);
  color: var(--ed-dark);
  outline: none;
}

.ed-section.is-dark button.mini-calendar-legend-item:hover .mini-calendar-dot.today,
.ed-section.is-dark button.mini-calendar-legend-item:focus-visible .mini-calendar-dot.today {
  box-shadow: inset 0 0 0 2px var(--ed-dark);
}

/* Die Markierungen in der Terminliste sprechen dieselbe Farbsprache wie
   der Kalender: Heim terrakotta, Auswärts salbeigrün. */
.ed-section.is-dark .agenda-flag,
.ed-section.is-dark .nm-flag {
  border-color: var(--band-auswaerts);
  color: var(--band-auswaerts);
  background: none;
}

.ed-section.is-dark .agenda-flag.is-home,
.ed-section.is-dark .nm-flag.is-home {
  border-color: var(--band-heim);
  background: var(--band-heim);
  color: var(--ed-dark);
}

/* Etwas mehr Höhe, damit unter der Zahl der Heute-Punkt bzw. die
   Mannschaftsmarken Platz haben */
.ed-section.is-dark .mini-calendar-day {
  height: 2.85rem;
  padding-bottom: 0.35rem;
}

/* Zeilen etwas voneinander absetzen */
.ed-section.is-dark .agenda-fixture {
  margin: 0.4rem 0 0.3rem;
}

/* Auf dem Handy steht die Liga immer unter dem Mannschaftsnamen –
   nebeneinander wurde die Zeile sonst je nach Namenslänge umbrochen. */
@media (max-width: 767.98px) {
  .ed-section .team-head {
    display: block;
  }

  .ed-section .team-name {
    display: block;
    margin-bottom: 0.15rem;
  }

  .ed-section .team-meta-row {
    display: block;
  }

  .ed-section .team-league-badge {
    display: block;
    font-size: 0.88rem;
    line-height: 1.3;
  }
}

/* --- Spieltage auf dem Handy: kompakter und gedeckelt ----------------- */
@media (max-width: 767.98px) {
  /* Die Liste war unbegrenzt hoch und schob die Seite auf. Jetzt ein
     eigener Scrollbereich wie auf dem Rechner, nur flacher. */
  .ed-section.is-dark .calendar-list {
    max-height: 22rem;
    overflow-y: auto;
  }

  .ed-section.is-dark .agenda-day {
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 0 0.85rem;
    padding: 0.85rem 0.3rem;
  }

  .ed-section.is-dark .agenda-date-day {
    font-size: 1.15rem;
  }

  .ed-section.is-dark .agenda-date-mon {
    font-size: 0.58rem;
  }

  .ed-section.is-dark .agenda-fixture {
    margin: 0.25rem 0 0.15rem;
    font-size: 0.94rem;
    line-height: 1.2;
  }

  .ed-section.is-dark .agenda-team {
    font-size: 0.62rem;
  }

  .ed-section.is-dark .agenda-meta {
    font-size: 0.8rem;
  }

  .ed-section.is-dark .agenda-match + .agenda-match {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
  }

  /* Rechtsseiten haben keinen Begleittext neben der Überschrift – dort
   nimmt sie die volle Breite ein. Sonst müsste ein Wort wie
   „Datenschutzbestimmungen" in einer halben Spalte getrennt werden. */
.ed-head-row.is-einspaltig {
  grid-template-columns: minmax(0, 1fr);
}

.ed-head-row.is-einspaltig .ed-title {
  hyphens: manual;
}

@media (max-width: 575.98px) {
  .ed-head-row.is-einspaltig .ed-title {
    hyphens: auto;
  }
}

/* „Kontakt aufnehmen" ist der bekannte blaue Aktionsknopf – muss nach
   der hellen Variante stehen, um sie zu überschreiben. */
.ed-page .join-cta .btn-cta,
.ed-page .join-cta .btn-join.btn-cta {
  background: var(--club-blue-strong);
  color: #ffffff;
}

.ed-page .join-cta .btn-cta:hover,
.ed-page .join-cta .btn-join.btn-cta:hover,
.ed-page .join-cta .btn-cta:focus-visible {
  background: var(--club-blue-strong-dark);
  color: #ffffff;
}

/* Der Textblock unter dem Porträt wurde vom alten Kartenlayout als Ganzes
   zentriert (align-items: center). Je nach Länge der Rollenbezeichnung
   wirkte er dadurch mal mittig, mal linksbündig. Jetzt füllt er die
   Spaltenbreite und steht überall links. */
.ed-section .staff-card-content {
  align-items: stretch;
}

.ed-section .staff-text {
  width: 100%;
}

}

.ed-section.is-dark .calendar-list-toggle {
  display: block;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--band-linie-hell);
  border-radius: 999px;
  background: none;
  color: var(--ed-dark-ink);
  font-family: "Public Sans", Arial, sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.ed-section.is-dark .calendar-list-toggle:hover {
  border-color: var(--ed-dark-ink);
  background: rgba(250, 249, 246, 0.06);
}

/* Auf dem Rechner bleibt der gewohnte Scrollbereich, dort stört er nicht. */
@media (min-width: 768px) {
  .ed-section.is-dark .calendar-list.is-collapsed .agenda-day {
    display: grid;
  }

  .ed-section.is-dark .calendar-list-toggle {
    display: none;
  }
}

/* --- Handy: nichts mehr scrollt innerhalb der Box ------------------- */
@media (max-width: 767.98px) {
  .ed-section.is-dark .calendar-list {
    max-height: none;
    overflow: visible;
  }

  /* Gekürzte Liste: nur vier Spieltage, der Rest per Schaltfläche. Welche
     vier das sind, setzt main.js über .is-ausserhalb – beim Antippen eines
     Kalendertags schiebt sich das Fenster auf diesen Tag, statt die ganze
     Liste aufzuklappen. */
  .ed-section.is-dark .calendar-list.is-collapsed .agenda-day.is-ausserhalb {
    display: none;
  }

  /* Kalender kompakter */
  .ed-section.is-dark .mini-calendar-day {
    height: 2.5rem;
    padding-bottom: 0.25rem;
    font-size: 0.74rem;
    border-radius: 0.25rem;
  }

  .ed-section.is-dark .mini-calendar-day.is-today::after {
    bottom: 0.12rem;
    width: 0.24rem;
    height: 0.24rem;
  }

  .ed-section.is-dark .mini-calendar-grid,
  .ed-section.is-dark .mini-calendar-weekdays {
    gap: 0.14rem;
  }

  .ed-section.is-dark .mini-calendar-header {
    margin-bottom: 0.5rem;
  }

  .ed-section.is-dark .mini-calendar-title {
    font-size: 0.88rem;
  }

  .ed-section.is-dark .mini-calendar-nav {
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
  }

  /* Teamauswahl kompakter */
  .ed-section.is-dark .team-chip span {
    min-height: 1.85rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.78rem;
  }

  .ed-section.is-dark .team-filter-card {
    margin-bottom: 1.2rem;
  }

  /* Nächstes Spiel kompakter */
  .ed-section.is-dark .next-match {
    padding: 0.95rem 0.9rem;
    margin-bottom: 1.2rem;
  }

  .ed-section.is-dark .nm-teams {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
  }

  .ed-section.is-dark .next-match-meta {
    margin-bottom: 0.8rem;
    font-size: 0.82rem;
  }

  .ed-section.is-dark .nm-num {
    font-size: 1.35rem;
  }

  .ed-section.is-dark .nm-cap {
    font-size: 0.55rem;
  }

  .ed-section.is-dark .nm-unit {
    min-width: 2.1rem;
  }

  
}
/* Das Vereinswappen hinter jeder Spielzeile stammt aus dem alten Design
   und wird hier nicht gezeigt – die Zeile trägt rechts die Heim/Auswärts-
   Markierung. */
.ed-section.is-dark .agenda-match::after {
  content: none;
}

/* Aktualisierungs- und Quellenangabe steht jetzt als Fußnote unter dem
   ganzen Abschnitt statt unter dem Kalender – dadurch beginnt die
   Terminliste weiter oben. */
.ed-section.is-dark .calendar-meta {
  margin-top: 1.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--band-linie);
  color: var(--ed-dark-ink-2);
  font-size: 0.76rem;
}

@media (max-width: 767.98px) {
  /* Noch kompakter: Zeilen, Kalender und Abstände weiter gestrafft. */
  .ed-section.is-dark .agenda-day {
    padding: 0.7rem 0.25rem;
  }

  .ed-section.is-dark .agenda-fixture {
    margin: 0.18rem 0 0.1rem;
    font-size: 0.9rem;
  }

  .ed-section.is-dark .agenda-meta {
    font-size: 0.76rem;
  }

  .ed-section.is-dark .agenda-team {
    font-size: 0.58rem;
  }

  .ed-section.is-dark .agenda-flag {
    padding: 0.15rem 0.5rem;
    font-size: 0.58rem;
  }

  .ed-section.is-dark .agenda-date-day {
    font-size: 1.05rem;
  }

  .ed-section.is-dark .mini-calendar {
    margin-bottom: 0.4rem;
  }

  .ed-section.is-dark .mini-calendar-legend {
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    font-size: 0.68rem;
  }

  .ed-section.is-dark .calendar-meta {
    margin-top: 1rem;
    padding-top: 0.7rem;
    font-size: 0.7rem;
  }

  .ed-section.is-dark .calendar-list-toggle {
    margin-top: 0.7rem;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
  }

  /* Der Abschnitt selbst braucht weniger Luft. */
  .ed-section.is-dark {
    padding: 2.6rem 0 2.4rem;
  }
}

/* Auf dem Rechner beginnt die Aufstellung bündig unter dem
   Mannschaftsnamen. Auf schmalen Geräten wäre das zu weit rechts – dort
   nur ein leichter, auf beiden Seiten gleicher Abstand zum Rand. */
.ed-section .team-roster {
  padding-left: 3.4rem;
  padding-right: 0.6rem;
}

@media (max-width: 767.98px) {
  .ed-section .team-roster {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Der Kalender lässt sich wischen – waagerechte Gesten gehören ihm, das
   senkrechte Scrollen der Seite bleibt unberührt. */
.ed-section.is-dark .mini-calendar {
  touch-action: pan-y;
}

@media (max-width: 767.98px) {
  .ed-section .team-roster {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Der Kalender lässt sich wischen – waagerechte Gesten gehören ihm, das
   senkrechte Scrollen der Seite bleibt unberührt. */
.ed-section.is-dark .mini-calendar {
  touch-action: pan-y;
}

.ed-section.is-dark .mini-calendar-grid {
  user-select: none;
}

@media (max-width: 767.98px) {
  .ed-section .team-roster {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* --- Mannschaftsfoto in der aufgeklappten Karte ----------------------- */
/* Liegt im <details>, wird also erst beim Aufklappen geladen. Gleiche
   Bildsprache wie die Hallenfotos: volle Spaltenbreite, scharfe Ecken,
   16:9. Die feste aspect-ratio haelt das Layout ruhig, auch wenn spaeter
   Fotos mit abweichendem Seitenverhaeltnis dazukommen. */
.ed-section .team-photo {
  margin: 0 0 1.4rem;
}

/* Der Rahmen schneidet den Hover-Zoom ab. Ohne ihn waechst das Bild ueber
   seinen Platz hinaus und schiebt sich ueber die Bildunterschrift. */
.ed-section .team-photo-frame {
  overflow: hidden;
}

.ed-section .team-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ed-rule-soft);
  cursor: zoom-in;
  transition: transform 0.5s ease;
}

.ed-section .team-photo-frame:hover img {
  transform: scale(1.045);
}

/* Ausnahme vom festen 16:9: Das Bild behaelt sein eigenes Seitenverhaeltnis
   (aus width/height im HTML). Fuer Gruppenfotos, bei denen die ganze
   Mannschaft samt Schuhen drauf sein soll – in 16:9 waeren die Fuesse ab. */
.ed-section .team-photo--eigenes-format img {
  aspect-ratio: auto;
}

/* setupImageLightbox in main.js macht das Bild per role/tabindex bedienbar,
   also braucht es auch einen sichtbaren Fokusring wie die Hallenbilder. */
.ed-section .team-photo img:focus-visible {
  outline: 3px solid var(--club-green-500);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .hall-thumb,
  .ed-section .team-photo img {
    transition: none;
  }

  .hall-card:hover .hall-thumb,
  .ed-section .team-photo-frame:hover img {
    transform: none;
  }
}

.ed-section .team-photo figcaption {
  margin-top: 0.5rem;
  color: var(--ed-ink-3);
  font-size: 0.82rem;
}