/* ===== Selbst gehostete Schriften (AP2-12) =====
 *
 * Die Schriften lagen frueher bei Google Fonts und wurden auf jeder Seite
 * unbedingt geladen - also auch, bevor eine Cookie-Einwilligung vorlag. Das
 * uebertrug die Besucher-IP an einen Drittanbieter. Selbst gehostet entsteht
 * dieser Request gar nicht mehr.
 *
 * Die Regeln bilden die Ausgabe der frueheren css2-Anfrage 1:1 nach: gleiche
 * Familien, gleiche Schnitte, gleiche unicode-range-Aufteilung, gleiche
 * WOFF2-Dateien. Deshalb stehen bei Newsreader und Source Sans 3 mehrere
 * Schnitte auf derselben Datei - das sind Variable Fonts, von denen Google
 * pro Subset genau eine Datei ausliefert. Ein zusammengefasster
 * font-weight-Bereich waere kuerzer, wuerde aber Zwischengewichte anders
 * aufloesen als bisher.
 *
 * Barlow Condensed fehlt hier absichtlich: es wurde bisher nur von
 * index.html geladen und liegt deshalb in
 * /embedded/core/fonts/barlow-condensed.css. Details und Herkunft der
 * Dateien: /embedded/core/fonts/README.md.
 */

/* Newsreader 500 - latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/embedded/core/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Newsreader 500 - latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/embedded/core/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Newsreader 700 - latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/embedded/core/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Newsreader 700 - latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/embedded/core/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Sans 3 400 - latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/embedded/core/fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Sans 3 400 - latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/embedded/core/fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Sans 3 500 - latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/embedded/core/fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Sans 3 500 - latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/embedded/core/fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Sans 3 600 - latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/embedded/core/fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Sans 3 600 - latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/embedded/core/fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Sans 3 700 - latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/embedded/core/fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Sans 3 700 - latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/embedded/core/fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== Global: Abstand vor/nach H2-Ueberschriften ===== */
h2 {
  margin-top: 2cm;
  margin-bottom: 1cm;
}

.section-panel.kachel-compact-top {
  padding-top: 10px !important;
}
.tva-ehrenamt-stats > .tva-ehrenamt-stat-card--transparent:first-of-type {
  margin-top: 0 !important;
}
.tva-ehrenamt-stats > .tva-ehrenamt-stat-card,
.tva-ehrenamt-stats > .tva-ehrenamt-stat-card--transparent {
  margin-top: 0;
}
.tva-ehrenamt-stats h2 {
  margin-bottom: 18px;
}
.tva-ehrenamt-stat-card,
.tva-ehrenamt-stat-card--transparent {
  margin-top: 0;
}
.tva-ehrenamt-stat-card--transparent {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* TVA: PDF-Embed volle Zeilenbreite */
.tva-pdf-fullwidth {
  display: block;
  width: 100% !important;
  max-width: 100vw;
  min-width: 0;
  border: none;
  border-radius: var(--radius-md, 5px);
  box-shadow: 0 2px 12px rgba(53,83,108,0.07);
  background: #fff;
}

.tva-organigramm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.tva-organigramm-heading h2 {
  margin-bottom: 16px;
}

.tva-vorstand-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 14px 0 18px;
}

.tva-vorstand-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 5px);
  background: var(--card-bg);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.tva-vorstand-card:hover {
  background: var(--accent-soft);
  box-shadow: 0 2px 8px rgba(53, 83, 108, 0.12);
}

[data-theme="dark"] .tva-vorstand-card:hover {
  background: var(--accent-soft);
}

.tva-vorstand-card--top {
  align-items: start;
}

.tva-vorstand-meta--top {
  align-self: start;
}

.tva-vorstand-meta--top h3 {
  margin-bottom: 0;
}

/* Foto neben dem Text: die sichtbare Oberkante der Ueberschrift liegt wegen des
   Zeilenabstands ca. 6 px unter der Box (Source Sans 3, 1.08rem, gemessen).
   Der Textblock rueckt um diesen Betrag nach oben, damit Foto und Schrift oben
   buendig abschliessen. Gestapelt (unter 641 px) bleibt der Abstand unveraendert. */
@media (min-width: 641px) {
  .tva-vorstand-meta--top {
    margin-top: -0.375rem;
  }
}

.tva-vorstand-photo-button {
  background: none;
  border: 0;
  border-radius: var(--radius-md, 5px);
  cursor: zoom-in;
  display: block;
  justify-self: start;
  line-height: 0;
  padding: 0;
}

.tva-vorstand-photo-button:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}

.tva-vorstand-photo {
  width: 110px;
  height: 110px;
  border-radius: var(--radius-md, 5px);
  object-fit: contain;
}

.tva-vorstand-meta h3 {
  margin: 0 0 6px;
  font-size: 1.08rem;
}

.tva-vorstand-meta p {
  margin: 0;
  line-height: 1.35;
}

.tva-vorstand-meta p + p {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .tva-vorstand-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .tva-vorstand-card {
    grid-template-columns: 1fr;
  }

  .tva-vorstand-photo {
    width: 100%;
    max-width: 220px;
    height: auto;
  }

  .tva-vorstand-photo-button {
    max-width: 220px;
    width: 100%;
  }
}

.tva-organigramm-panel {
  margin: 0;
  padding: clamp(16px, 2.4vw, 24px);
  background: transparent;
  border-radius: 1.2rem;
  padding: 1.5rem 1.5rem 1rem 1.5rem;
  margin: 0 auto 1.5rem auto;
  max-width: 100vw;
  overflow-x: auto;
  transition: background 0.3s;
}

.tva-organigramm-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  border-radius: var(--radius-md, 5px);
}

.tva-organigramm-scroll:focus-visible {
  outline: 2px solid var(--accent-solid, #0a84c1);
  outline-offset: 4px;
}

.tva-organigramm-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: transparent;
}

[data-theme="dark"] .tva-organigramm-image {
  filter: brightness(0.92) contrast(1.06);
}

.tva-organigramm-panel figcaption {
  margin-top: 14px;
}



@media (max-width: 900px) {
  .tva-pdf-fullwidth {
    height: 70vw !important;
    min-height: 340px;
    max-height: 90vw;
  }
}

@media (max-width: 600px) {
  .tva-pdf-fullwidth {
    height: 60vw !important;
    min-height: 220px;
    max-height: 80vw;
  }
}
.tva-membership-builder-actions #tva-trial-sync-signature-fields {
  margin-bottom: 1.2rem;
}
/* Immer untereinander für Gesundheits- und Einwilligungs-Abschnitt */
.tva-membership-builder-section:nth-of-type(4) .tva-membership-builder-toggle-grid,
.tva-membership-builder-section:nth-of-type(5) .tva-membership-builder-toggle-grid {
  grid-template-columns: 1fr !important;
}
.schedule-band-list article.is-active {
  background: linear-gradient(135deg, var(--accent-soft-strong), var(--card-bg));
  box-shadow: 0 6px 24px 0 rgba(53,83,108,0.13);
  border-color: var(--accent-solid);
  z-index: 3;
}
.schedule-band-list article:has(.schedule-band-time:hover),
.schedule-band-list article:has(.schedule-band-time:focus-visible) {
  background: linear-gradient(135deg, var(--accent-soft-strong), var(--card-bg));
  box-shadow: 0 6px 24px 0 rgba(53,83,108,0.13);
  border-color: var(--accent-solid);
  z-index: 3;
}
@media (max-width: 600px) {
  .tva-membership-builder-toggle-grid {
    grid-template-columns: 1fr;
  }
}
:root {
  color-scheme: light;
  /* Breitenvertrag, Typ 1 (kein Layout-Shell: Startseite, Seiten mit
     data-tva-modular-layout="false"): Obergrenze des Inhaltsblocks, zentriert.
     --tva-shell-inset ist der Grundabstand zum Rand, den auch der Layout-Shell
     (Typ 2 und 3, embedded/navigation/layout-shell.css) verwendet. Vertrag,
     Werte und Herleitung: .github/decision-records/content-width-layout-types.md */
  --tva-content-max-width: 1600px;
  --tva-shell-inset: clamp(14px, 2vw, 24px);
  --sky: #9fcff4;
  --sky-soft: #edf7ff;
  --navy: #35536c;
  --navy-soft: #6d8396;
  --ink: #203040;
  --muted: #60707d;
  --paper: #fff8f2;
  --white: #ffffff;
  --line: rgba(53, 83, 108, 0.12);
  --shadow: 0 20px 56px rgba(29, 47, 62, 0.08);
  --page-glow: rgba(159, 207, 244, 0.34);
  --page-bg-top: #fdfcff;
  --page-bg-mid: #fff8f2;
  --page-bg-bottom: #eef5f5;
  --panel-bg: rgba(255, 248, 242, 0.88);
  --panel-border: rgba(255, 255, 255, 0.86);
  --header-bg: rgba(255, 250, 246, 0.92);
  /* Deckende Variante fuer Flaechen ohne backdrop-filter (z.B. das mobile
     Navigations-Overlay) - dort wuerde die transluzente --header-bg sonst
     den Seiteninhalt dahinter leicht durchscheinen lassen. */
  --header-bg-solid: rgb(255, 250, 246);
  --brand-badge-bg: rgba(159, 207, 244, 0.2);
  --accent-soft: rgba(159, 207, 244, 0.16);
  --accent-soft-strong: rgba(159, 207, 244, 0.28);
  --accent-solid: #35536c;
  --accent-contrast: #ffffff;
  --menu-control-bg: rgba(53, 83, 108, 0.08);
  --menu-bg: rgba(255, 250, 246, 0.98);
  --glass-pill-bg: rgba(255, 255, 255, 0.7);
  --glass-pill-ring: rgba(53, 83, 108, 0.2);
  --glass-menu-bg: rgba(255, 252, 248, 0.92);
  --glass-menu-border: rgba(255, 255, 255, 0.7);
  --hero-overlay-start: rgba(255, 255, 255, 0.12);
  --hero-overlay-end: rgba(85, 119, 145, 0.42);
  --hero-gradient-start: rgba(222, 238, 248, 0.78);
  --hero-gradient-end: rgba(140, 175, 197, 0.92);
  --hero-text: #163246;
  --hero-text-soft: rgba(22, 50, 70, 0.78);
  --page-hero-bg: linear-gradient(180deg, rgba(237, 246, 252, 0.92), rgba(255, 255, 255, 0.98));
  --tinted-section-bg: linear-gradient(180deg, rgba(223, 238, 247, 0.92), rgba(206, 225, 236, 0.96));
  --tinted-section-alt-bg: linear-gradient(135deg, rgba(221, 238, 247, 0.95), rgba(195, 217, 230, 0.98));
  --tinted-section-text: #1d3445;
  --tinted-section-text-soft: rgba(29, 52, 69, 0.78);
  --card-bg: rgba(255, 255, 255, 0.78);
  --card-highlight-bg: linear-gradient(180deg, rgba(215, 235, 248, 0.78), rgba(255, 255, 255, 0.94));
  --topics-bg: linear-gradient(180deg, rgba(237, 246, 255, 0.84), rgba(255, 255, 255, 0.96));
  --chip-bg: rgba(53, 83, 108, 0.08);
  --events-card-bg: rgba(255, 255, 255, 0.28);
  --events-card-border: rgba(255, 255, 255, 0.34);
  --agenda-meta-bg: rgba(255, 255, 255, 0.32);
  --agenda-board-bg: rgba(255, 255, 255, 0.2);
  --agenda-board-border: rgba(255, 255, 255, 0.34);
  --agenda-head-text: rgba(29, 52, 69, 0.7);
  --agenda-row-border: rgba(29, 52, 69, 0.12);
  --agenda-date-bg: rgba(255, 255, 255, 0.52);
  --agenda-date-text: #173042;
  --tva-table-head-bg: #9fcff4;
  --tva-table-head-text: #163246;
  --tva-table-row1: #f6faff;
  --tva-table-row2: #fdf6fa;
  --tva-table-row-border: #e3eaf2;
  --agenda-time-bg: rgba(159, 207, 244, 0.38);
  --agenda-time-text: #173042;
  --agenda-time-empty-bg: rgba(255, 255, 255, 0.34);
  --agenda-time-empty-text: rgba(23, 48, 66, 0.7);
  --agenda-link-bg: rgba(53, 83, 108, 0.12);
  --agenda-link-hover-bg: rgba(53, 83, 108, 0.18);
  --history-link-bg: rgba(255, 255, 255, 0.36);
  --footer-pill-bg: rgba(53, 83, 108, 0.06);
  --toggle-track-bg: rgba(53, 83, 108, 0.16);
  --toggle-track-active-bg: #35536c;
  --toggle-thumb-bg: #ffffff;
  --membership-cta-bg: #cf4d5c;
  --membership-cta-bg-hover: #e1616f;
  --membership-cta-text: #fff3f5;
  --debug-control-border: #7f00ff;
  --debug-control-fill: #b163ff;
  --debug-control-text: #210637;
  --debug-control-shadow: rgba(127, 0, 255, 0.2);
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  /* Spacing-Skala (Phase 3, 4px-Raster) – Tokenname = Vielfaches von 4px. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  /* Glassmorphismus / Mac-Feeling: Frosted-Glass-Parameter (Phase 2). */
  --glass-blur: 20px;
  --glass-blur-strong: 30px;
  --glass-saturate: 145%;
  --glass-highlight: rgba(255, 255, 255, 0.55);
  --glass-hairline: rgba(255, 255, 255, 0.6);
  --glass-fill: rgba(255, 255, 255, 0.4);
  --glass-fill-strong: rgba(255, 255, 255, 0.62);
  --status-success: #3f906b;
  --glass-shadow-sm: 0 4px 14px rgba(29, 47, 62, 0.08), 0 1px 4px rgba(29, 47, 62, 0.05);
  --glass-shadow: 0 10px 30px rgba(29, 47, 62, 0.10), 0 2px 8px rgba(29, 47, 62, 0.06);
  --glass-shadow-lg: 0 24px 60px rgba(29, 47, 62, 0.14), 0 6px 16px rgba(29, 47, 62, 0.08);
  --glass-shadow-xl: 0 36px 84px rgba(29, 47, 62, 0.18), 0 10px 22px rgba(29, 47, 62, 0.10);
  --glass-ring: 0 0 0 1px rgba(255, 255, 255, 0.35);
  /* Footer: dunkler Navy-Anker, theme-abhängig (Phase 3). */
  --footer-bg: #1a1f2e;
  --footer-fg: #ffffff;
  --footer-fg-soft: #c8ccd8;
  --footer-fg-muted: #9aa0b0;
  --footer-fg-faint: #6b7280;
  --footer-fg-faintest: #4b5563;
  --footer-fg-mono: #374151;
  --footer-mail: #8ab4f8;
  --footer-bullet: #4b6cb7;
  --footer-hairline: rgba(255, 255, 255, 0.1);
  --footer-label: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] {
    --tva-table-head-bg: #2a4a60;
    --tva-table-head-text: #eaf6ff;
    --tva-table-row1: #1b2733;
    --tva-table-row2: #232f3a;
    --tva-table-row-border: #395a72;
  color-scheme: dark;
  --sky: #6eaed5;
  --sky-soft: #173042;
  --navy: #d7ebfa;
  --navy-soft: #9eb7c7;
  --ink: #eaf3f8;
  --muted: #adc1cf;
  --paper: #0f1b25;
  --line: rgba(215, 235, 250, 0.12);
  --shadow: 0 20px 56px rgba(0, 0, 0, 0.28);
  --page-glow: rgba(110, 174, 213, 0.18);
  --page-bg-top: #0d1821;
  --page-bg-mid: #101d27;
  --page-bg-bottom: #122531;
  --panel-bg: rgba(16, 28, 38, 0.82);
  --panel-border: rgba(215, 235, 250, 0.08);
  --header-bg: rgba(15, 27, 37, 0.92);
  --header-bg-solid: rgb(15, 27, 37);
  --brand-badge-bg: rgba(110, 174, 213, 0.16);
  --accent-soft: rgba(110, 174, 213, 0.18);
  --accent-soft-strong: rgba(110, 174, 213, 0.28);
  --accent-solid: #8ec6e8;
  --accent-contrast: #0f1b25;
  --menu-control-bg: rgba(215, 235, 250, 0.08);
  --menu-bg: rgba(14, 25, 34, 0.98);
  --glass-pill-bg: rgba(19, 32, 44, 0.55);
  --glass-pill-ring: rgba(215, 235, 250, 0.22);
  --glass-menu-bg: rgba(19, 32, 44, 0.86);
  --glass-menu-border: rgba(215, 235, 250, 0.14);
  --hero-overlay-start: rgba(8, 17, 24, 0.16);
  --hero-overlay-end: rgba(4, 11, 17, 0.56);
  --hero-gradient-start: rgba(40, 78, 102, 0.78);
  --hero-gradient-end: rgba(16, 31, 43, 0.94);
  --hero-text: #eef7fc;
  --hero-text-soft: rgba(238, 247, 252, 0.82);
  --page-hero-bg: linear-gradient(180deg, rgba(24, 45, 60, 0.84), rgba(15, 27, 37, 0.94));
  --tinted-section-bg: linear-gradient(180deg, rgba(24, 45, 60, 0.95), rgba(14, 28, 40, 0.98));
  --tinted-section-alt-bg: linear-gradient(135deg, rgba(23, 43, 57, 0.98), rgba(12, 24, 34, 0.98));
  --tinted-section-text: #eef7fc;
  --tinted-section-text-soft: rgba(238, 247, 252, 0.78);
  --card-bg: rgba(20, 35, 46, 0.82);
  --card-highlight-bg: linear-gradient(180deg, rgba(30, 56, 73, 0.88), rgba(18, 34, 45, 0.94));
  --topics-bg: linear-gradient(180deg, rgba(27, 49, 65, 0.88), rgba(17, 31, 42, 0.96));
  --chip-bg: rgba(215, 235, 250, 0.08);
  --events-card-bg: rgba(255, 255, 255, 0.06);
  --events-card-border: rgba(255, 255, 255, 0.08);
  --agenda-meta-bg: rgba(255, 255, 255, 0.08);
  --agenda-board-bg: rgba(255, 255, 255, 0.04);
  --agenda-board-border: rgba(255, 255, 255, 0.08);
  --agenda-head-text: rgba(238, 247, 252, 0.74);
  --agenda-row-border: rgba(255, 255, 255, 0.08);
  --agenda-date-bg: rgba(255, 255, 255, 0.1);
  --agenda-date-text: #eef7fc;
  --agenda-time-bg: rgba(110, 174, 213, 0.18);
  --agenda-time-text: #eef7fc;
  --agenda-time-empty-bg: rgba(255, 255, 255, 0.08);
  --agenda-time-empty-text: rgba(238, 247, 252, 0.72);
  --agenda-link-bg: rgba(110, 174, 213, 0.18);
  --agenda-link-hover-bg: rgba(110, 174, 213, 0.28);
  --history-link-bg: rgba(255, 255, 255, 0.14);
  --footer-pill-bg: rgba(215, 235, 250, 0.08);
  --toggle-track-bg: rgba(215, 235, 250, 0.14);
  --toggle-track-active-bg: #8ec6e8;
  --membership-cta-bg: #cf4d5c;
  --membership-cta-bg-hover: #e1616f;
  --membership-cta-text: #fff3f5;
  --debug-control-border: #7f00ff;
  --debug-control-fill: #b163ff;
  --debug-control-text: #210637;
  --debug-control-shadow: rgba(177, 99, 255, 0.32);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Source Sans 3", sans-serif;
  color: var(--ink);
  position: relative;
  background:
    radial-gradient(circle at top left, var(--page-glow), transparent 25%),
    linear-gradient(180deg, var(--page-bg-top) 0%, var(--page-bg-mid) 50%, var(--page-bg-bottom) 100%);
  background-repeat: no-repeat;
}

/* Feines Blaupausen-Raster ueber dem Seitenverlauf, analog zur entsprechenden body::after-Regel
   auf der separaten ThomasChristl-Website (nicht Teil dieses Repositories) - beide Seiten teilen
   dieselben --page-bg-*-Werte, hier ergaenzt nur die fehlende Gitter-/Noise-Ebene. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(32, 48, 64, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 48, 64, 0.12) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 44px 44px, 44px 44px, 140px 140px;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}

[data-theme="dark"] body::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.9;
}

html.mobile-nav-open,
body.mobile-nav-open {
  overscroll-behavior: none;
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

/* height: auto is the required companion of the width/height attributes AP4-04 (AR3-07)
   added to every <img>. Those attributes are presentational hints for the width AND the
   height property, so without this rule max-width: 100% would shrink the width on a narrow
   viewport while the height stayed at the attribute value - the image would be stretched.
   With height: auto the browser derives the height from the attributes' aspect ratio, which
   is exactly what reserves the correct space before the file arrives. A component that
   needs a fixed height (.sport-tile-media img and friends) overrides this by specificity. */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

.tva-logo {
  width: 120px;
  height: auto;
  max-width: 100%;
}

@media (max-width: 860px) {
  .tva-logo {
    display: none;
  }
}

p {
  line-height: 1.65;
}

.page-shell {
  width: 100%;
  margin: 0;
  padding: 0 0 1px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.page-shell > main {
  flex: 1 0 auto;
}


.section-panel.kachel-unsichtbar {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.content-card.kachel-unsichtbar {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.hero,
.news,
.teaser-row,
.link-panel,
.sport,
.events,
.service,
.history,
.site-footer,
.intro-panel,
.page-hero,
.content-section {
  padding: 30px;
}

/* Startseite: diese Panels sollen buendig mit "Der TVA in 4 Zahlen" /
   "Der TVA ist so vielseitig wie Dein Leben" fluchten (keine Kachel-Optik).
   Der seitliche Abstand bleibt trotzdem erhalten (wie bei .content-section),
   sonst kleben Ueberschriften/Text am Bildschirmrand, sobald die
   Breitengrenze von .tva-content-block nicht mehr greift (Tablet/Mobile). */
.tva-home-stats,
.tva-home-values,
.section-panel.tva-home-flush {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 30px;
  padding-right: 30px;
}

/* Der Abschluss-Aufruf "Dein Start beim TVA" fluchtet mit denselben
   seitlichen Abstaenden wie die uebrigen Startseiten-Panels; seine eigenen
   vertikalen Abstaende bleiben. */
.section-panel.tva-home-cta {
  padding-left: 30px;
  padding-right: 30px;
}

@media (max-width: 860px) {
  .tva-home-stats,
  .tva-home-values,
  .section-panel.tva-home-flush,
  .section-panel.tva-home-cta {
    padding-left: 22px;
    padding-right: 22px;
  }
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.78fr);
  gap: 18px;
}

.home-hero {
  grid-template-columns: 1fr;
}

.hero.home-hero {
  padding: 0;
}

.home-hero > .hero-media {
  width: 100%;
  border-radius: 0;
}

.home-hero + .tva-home-stats {
  margin-top: clamp(16px, 2vw, 24px);
}

.home-hero .hero-copy {
  width: min(1120px, calc(100% - 44px));
  max-width: calc(100% - 44px);
  margin: 22px 22px 22px 22px;
  border-radius: var(--radius-md);
  background: rgba(255, 248, 242, 0.88);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
}

/* Startseiten-Hero: Text links, TVA-Logo rechts.
   Logo-Breite und -Höhe können hier später zentral angepasst werden. */
.home-hero .hero-copy-layout {
  display: flex;
  align-items: center;
  gap: 44px;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.home-hero .hero-copy-main {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.home-hero .hero-copy-logo {
  flex: 0 0 330px;
  width: 330px;
  margin-left: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  align-self: stretch;
}

.home-hero .hero-copy-logo .tva-willkommen-logo {
  /* Desktop: Logo quadratisch auf 330px setzen (150% von 220px), ohne Verzerrung. */
  width: 330px;
  height: 330px;
  object-fit: contain;
  max-width: 100%;
}

.partner-hero-transparent {
  background: transparent !important;
  border-color: transparent;
  box-shadow: none;
}

.partner-hero-transparent .hero-copy {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

[data-theme="dark"] .home-hero .hero-copy {
  background: rgba(15, 27, 37, 0.84);
}

[data-theme="dark"] .home-hero .hero-copy-logo img {
  filter: brightness(1.02) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

.hero-media,
.hero-sidebar,
.sidebar-card,
.news-card,
.topics-box,
.teaser-card,
.category-card,
.offer-card,
.timeline-item,
.service-feature,
.service-item,
.site-footer,
.content-card {
  border: 1px solid var(--line);
}

.hero-media {
  min-height: 520px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, var(--hero-overlay-start), var(--hero-overlay-end)),
    linear-gradient(135deg, var(--hero-gradient-start), var(--hero-gradient-end));
  display: flex;
  align-items: flex-end;
}


.hero-copy {
  padding: 32px;
  color: var(--hero-text);
  max-width: 720px;
}

.page-hero {
  background: var(--page-hero-bg);
}

.page-hero.dark-hero,
.events {
  background: var(--tinted-section-bg);
}

.history {
  background: var(--tinted-section-alt-bg);
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--navy-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero .eyebrow,
.events .eyebrow,
.history .eyebrow,
.page-hero.dark-hero .eyebrow {
  color: var(--tinted-section-text-soft);
}

.hero h1,
.page-hero h1 {
  margin: 0;
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 0.95;
}

.hero h2 {
  margin: 8px 0 12px;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  font-weight: 500;
}

.page-hero p,
.content-card p,
.hero-copy p,
.section-heading p,
.news-card p,
.topics-box p,
.teaser-card p,
.category-card p,
.offer-card p,
.timeline-item p,
.service-feature p,
.service-item p,
.history p,
.footer-brand p,
.footer-meta {
  color: var(--muted);
  font-size: 1.03rem;
}

.page-hero.dark-hero h1,
.page-hero.dark-hero p,
.events .section-heading h2,
.events .section-heading p,
.events .timeline-item h3,
.events .timeline-item p,
.history h2,
.history p,
.history .history-link {
  color: var(--tinted-section-text);
}

.hero-copy p {
  color: var(--hero-text-soft);
}

.hero-actions,
.center-action {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.class-title-butten-active,
.class-title-butten-passiv {
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.class-title-butten-active {
  background: var(--accent-solid);
  color: var(--accent-contrast);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-contrast) 22%, transparent);
}

.class-title-butten-active:hover,
.class-title-butten-active:focus-visible {
  background: var(--accent-solid);
  color: var(--accent-contrast);
  border-color: color-mix(in srgb, var(--accent-contrast) 26%, transparent);
}

.class-title-butten-passiv {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--hero-text);
}

.class-title-butten-passiv:hover,
.class-title-butten-passiv:focus-visible {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--hero-text);
}

.home-hero .tva-home-logo-test {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.25);
  color: var(--hero-text);
}

.home-hero .tva-home-logo-test-label {
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.home-hero .tva-home-logo-test-input {
  flex: 1 1 170px;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--navy);
  font: inherit;
}

.home-hero .tva-home-logo-test-input:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 1px;
  border-color: var(--accent-solid);
  background: var(--white);
}

[data-theme="dark"] .home-hero .tva-home-logo-test {
  border-color: rgba(215, 235, 250, 0.24);
  background: rgba(15, 27, 37, 0.36);
}

[data-theme="dark"] .home-hero .tva-home-logo-test-input {
  border-color: rgba(215, 235, 250, 0.24);
  background: rgba(15, 27, 37, 0.94);
  color: var(--ink);
}

[data-theme="dark"] .home-hero .tva-home-logo-test-input:focus-visible {
  background: var(--paper);
}

.home-hero .tva-home-logo-test-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: 100%;
}

.home-hero .tva-home-logo-test-badge {
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--debug-control-fill);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-hero .tva-home-logo-test-stepper {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.home-hero .tva-home-logo-test-step.tva-debug-control {
  flex: 0 0 52px;
  min-height: 44px;
  padding: 0;
  font-size: 1.4rem;
  cursor: pointer;
}

.home-hero .tva-home-logo-test-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  background: rgba(15, 27, 37, 0.55);
  color: #fff;
}

.home-hero .tva-home-logo-test-name {
  font-size: 1.1rem;
  font-weight: 700;
}

.home-hero .tva-home-logo-test-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.home-hero .tva-home-logo-test-chip {
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.16);
}

@media (min-width: 768px) {
  .home-hero .tva-home-logo-test {
    flex: 0 1 auto;
    width: min(100%, 520px);
  }

  .home-hero .tva-home-logo-test-input {
    flex: 0 0 176px;
    width: 176px;
  }
}

.center-action {
  justify-content: center;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 5px;
  font-weight: 700;
}

.button-primary {
  background: var(--accent-solid);
  color: var(--accent-contrast);
}

.button-primary:active,
.button-primary:focus {
  background: var(--accent-solid);
  color: var(--accent-contrast);
  box-shadow: none;
  outline: none;
  border: none;
}

.button-secondary {
  background: rgba(255, 255, 255, 0.25);
  color: var(--hero-text);
  transition: all 200ms ease;
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.5);
  color: var(--hero-text);
}

/* From Uiverse.io by escannord, Farben an TVA-Design angepasst, dezenter skaliert */
.tva-arrow-button {
  --tva-arrow-color: var(--accent-solid);
  padding: 0.55rem 1.15rem;
  background-color: transparent;
  color: var(--tva-arrow-color);
  font-weight: 600;
  font-size: 0.88rem;
  text-transform: none;
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
  position: relative;
  border-radius: 5px;
  text-decoration: none;
}

.tva-arrow-button__arrow {
  display: inline-flex;
  position: relative;
  width: 22px;
  height: 12px;
  margin-left: 0.4rem;
}

.tva-arrow-button__arrow::after,
.tva-arrow-button__arrow::before {
  content: "";
  display: inline-block;
  position: absolute;
  border-color: var(--tva-arrow-color);
}

.tva-arrow-button__arrow::after {
  width: 8px;
  height: 0;
  border: 1.5px solid var(--tva-arrow-color);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.tva-arrow-button__arrow::before {
  width: 8px;
  height: 8px;
  border-top: 3px solid var(--tva-arrow-color);
  border-right: 3px solid var(--tva-arrow-color);
  left: 2px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.tva-arrow-button:hover {
  background-color: var(--tva-arrow-color);
  color: var(--accent-contrast);
}

.tva-arrow-button:hover .tva-arrow-button__arrow {
  transform: translateX(8px);
}

.tva-arrow-button:hover .tva-arrow-button__text {
  transform: translateX(8px);
}

.tva-arrow-button:hover .tva-arrow-button__arrow::after {
  width: 18px;
  border-color: var(--accent-contrast);
}

.tva-arrow-button:hover .tva-arrow-button__arrow::before {
  left: 11px;
  border-color: var(--accent-contrast);
}

.tva-arrow-button,
.tva-arrow-button__text,
.tva-arrow-button__arrow,
.tva-arrow-button__arrow::after,
.tva-arrow-button__arrow::before {
  transition: all 0.3s, box-shadow 0.2s;
}

.tva-arrow-button::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 7px;
  border-radius: 5px;
  border: solid 2px var(--tva-arrow-color);
  border-right-color: transparent;
  background-color: transparent;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.tva-arrow-button::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 7px;
  border-radius: 5px;
  border: solid 2px var(--tva-arrow-color);
  border-left-color: transparent;
  background-color: transparent;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.tva-arrow-button:hover::before,
.tva-arrow-button:hover::after {
  width: 50% !important;
}

.tva-arrow-button:active {
  box-shadow: 0px 0px 0px 4px var(--accent-soft);
}

.tva-hinweise-notification-button {
  margin-bottom: 1.5rem;
}

.button.tva-debug-control,
input.tva-debug-control,
.home-hero .tva-home-logo-test-input.tva-debug-control {
  border: 2px solid var(--debug-control-border);
  background: var(--debug-control-fill);
  color: #fff;
  box-shadow: 0 0 0 1px var(--debug-control-shadow);
}

.button.tva-debug-control:hover,
.button.tva-debug-control:focus-visible,
.button.tva-debug-control:active,
input.tva-debug-control:focus-visible,
.home-hero .tva-home-logo-test-input.tva-debug-control:focus-visible {
  border-color: var(--debug-control-border);
  background: var(--debug-control-fill);
  color: #fff;
  box-shadow: 0 0 0 3px var(--debug-control-shadow);
}

input.tva-debug-control,
.home-hero .tva-home-logo-test-input.tva-debug-control {
  caret-color: var(--debug-control-text);
}

input.tva-debug-control:focus-visible,
.home-hero .tva-home-logo-test-input.tva-debug-control:focus-visible {
  outline: 2px solid var(--debug-control-border);
  outline-offset: 2px;
}

.hero-sidebar {
  display: grid;
  gap: 14px;
}

.sidebar-card,
.news-card,
.topics-box,
.teaser-card,
.category-card,
.offer-card,
.timeline-item,
.service-feature,
.service-item,
.content-card {
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  padding: 22px;
}

.sidebar-card-highlight,
.news-card-featured,
.service-item-highlight,
.feature-card {
  background: var(--card-highlight-bg);
}

.content-card.feature-card.kachel-unsichtbar {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.card-label,
.offer-type,
.timeline-date {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 5px;
  background: transparent;
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.news-date {
  display: inline-flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sidebar-card h3,
.news-card h3,
.teaser-card h3,
.category-card h3,
.service-feature h3,
.history h2,
.content-card h3,
.agenda-title {
  margin: 14px 0 8px;
  font-size: 0.76rem;
}

.offer-card h3,
.timeline-item h3,
.service-item h3,
.topics-box h3 {
  margin: 12px 0 8px;
  font-size: 1.45rem;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 22px;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.02;
}

.section-heading h2.section-heading-medium {
  font-size: clamp(1.7rem, 2.4vw, 2.35rem);
}

.section-heading p {
  max-width: 50ch;
  margin: 0;
}

.section-heading .tva-sport-intro {
  max-width: none;
}

.section-heading.sponsor-heading-full > div {
  width: 100%;
}

.section-heading.sponsor-heading-full p {
  max-width: none;
}

.section-heading.sponsor-heading-full p:first-of-type {
  margin-top: 1rem;
}

.section-heading.sponsor-heading-full p + p {
  margin-top: 1rem;
}

.section-heading.sponsor-heading-full p:last-of-type {
  margin-bottom: 1rem;
}

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

.news-card-expandable {
  cursor: default;
}

.news-grid[data-news-feed] .news-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.news-grid[data-news-feed] .news-card:hover,
.news-grid[data-news-feed] .news-card:focus-within {
  border-color: color-mix(in srgb, var(--accent-solid) 30%, var(--line) 70%);
  background: color-mix(in srgb, var(--card-bg) 90%, var(--accent-soft) 10%);
  box-shadow: 0 10px 28px rgba(53, 83, 108, 0.14);
  transform: translateY(-2px);
}

.news-grid[data-news-feed] .news-card-featured:hover,
.news-grid[data-news-feed] .news-card-featured:focus-within {
  background: color-mix(in srgb, var(--card-bg) 90%, var(--accent-soft) 10%);
}

.news-grid[data-news-feed] .news-card-expandable {
  cursor: pointer;
}

#home-hinweise-grid .news-card,
#home-hinweise-grid .news-card *,
#common-news-grid .news-card,
#common-news-grid .news-card * {
  cursor: default;
}

.news-grid[data-news-feed] .news-card-expanded {
  border-color: color-mix(in srgb, var(--accent-solid) 30%, var(--line) 70%);
  background: color-mix(in srgb, var(--card-bg) 93%, var(--accent-soft-strong) 7%);
}

.news-grid[data-news-feed] .news-card-featured.news-card-expanded {
  background: color-mix(in srgb, var(--card-highlight-bg) 93%, var(--accent-soft-strong) 7%);
}

.news-grid[data-news-feed] .news-card-expanded:hover,
.news-grid[data-news-feed] .news-card-expanded:focus-within {
  border-color: color-mix(in srgb, var(--accent-solid) 30%, var(--line) 70%);
  background: color-mix(in srgb, var(--card-bg) 93%, var(--accent-soft-strong) 7%);
}

.news-grid[data-news-feed] .news-card-featured.news-card-expanded:hover,
.news-grid[data-news-feed] .news-card-featured.news-card-expanded:focus-within {
  background: color-mix(in srgb, var(--card-highlight-bg) 93%, var(--accent-soft-strong) 7%);
}

[data-theme="dark"] .news-grid[data-news-feed] .news-card:hover,
[data-theme="dark"] .news-grid[data-news-feed] .news-card:focus-within {
  border-color: color-mix(in srgb, var(--accent-soft-strong) 42%, var(--line) 58%);
  background: color-mix(in srgb, var(--card-bg) 84%, rgba(116, 168, 200, 0.16) 16%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .news-grid[data-news-feed] .news-card-featured:hover,
[data-theme="dark"] .news-grid[data-news-feed] .news-card-featured:focus-within {
  background: color-mix(in srgb, var(--card-bg) 84%, rgba(116, 168, 200, 0.16) 16%);
}

[data-theme="dark"] .news-grid[data-news-feed] .news-card-expanded {
  border-color: color-mix(in srgb, var(--accent-soft-strong) 34%, var(--line) 66%);
  background: color-mix(in srgb, var(--card-bg) 90%, rgba(116, 168, 200, 0.18) 10%);
}

[data-theme="dark"] .news-grid[data-news-feed] .news-card-featured.news-card-expanded {
  background: color-mix(in srgb, var(--card-highlight-bg) 90%, rgba(116, 168, 200, 0.18) 10%);
}

[data-theme="dark"] .news-grid[data-news-feed] .news-card-expanded:hover,
[data-theme="dark"] .news-grid[data-news-feed] .news-card-expanded:focus-within {
  border-color: color-mix(in srgb, var(--accent-soft-strong) 34%, var(--line) 66%);
  background: color-mix(in srgb, var(--card-bg) 90%, rgba(116, 168, 200, 0.18) 10%);
}

[data-theme="dark"] .news-grid[data-news-feed] .news-card-featured.news-card-expanded:hover,
[data-theme="dark"] .news-grid[data-news-feed] .news-card-featured.news-card-expanded:focus-within {
  background: color-mix(in srgb, var(--card-highlight-bg) 90%, rgba(116, 168, 200, 0.18) 10%);
}

.tva-search-page {
  display: grid;
  gap: 18px;
}

.tva-search-title {
  margin: 0;
}

.tva-search-form {
  display: grid;
  gap: 10px;
}

.tva-search-form label {
  font-weight: 700;
}

.tva-search-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.tva-search-form-row input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.tva-search-form-row input:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 1px;
  background: var(--white);
  border-color: var(--accent-solid);
}

[data-theme="dark"] .tva-search-form-row input {
  background: var(--panel-bg);
  color: var(--ink);
  border-color: var(--line);
}

[data-theme="dark"] .tva-search-form-row input:focus-visible {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--accent-solid);
}

.tva-search-status {
  margin: 0;
  color: var(--muted);
}

.tva-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.tva-search-result-item {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--card-bg);
}

.tva-search-result-link {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.tva-search-result-title {
  font-size: 1.05rem;
}

.tva-search-result-description {
  margin: 0;
  color: var(--muted);
}

.tva-search-result-path {
  font-size: 0.85rem;
  color: var(--navy-soft);
}

@media (min-width: 768px) {
  .tva-search-form-row {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.news-card-details {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: none;
}

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

.news-card:not([hidden]) .news-card-details {
  display: block;
}

.news-card-details h4 {
  margin: 16px 0 8px;
  font-size: 1rem;
  font-weight: 600;
}

.news-card-details h4:first-child {
  margin-top: 0;
}

.news-card-details ul {
  margin: 8px 0;
  padding-left: 20px;
}

.news-card-details li {
  margin-bottom: 6px;
}

.news-card-details p {
  margin: 8px 0;
}

.news-contact-table {
  border-collapse: collapse;
  margin: 12px 0;
}

.news-contact-table th,
.news-contact-table td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: bottom;
  border-bottom: 1px solid var(--line);
}

.news-contact-table th {
  font-weight: 600;
  width: 100px;
  white-space: nowrap;
  color: var(--navy-soft);
}

.news-contact-table td {
  font-weight: normal;
}

.news-contact-table td a,
.news-contact-table td span {
  vertical-align: middle;
}

.news-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 14px;
  min-width: 150px;
  border: 1px solid var(--navy-soft);
  border-radius: var(--radius);
  background: transparent;
  color: var(--navy-soft);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.news-expand-btn:not(.news-expand-btn--top) {
  display: none;
}

.news-card-expanded .news-expand-btn:not(.news-expand-btn--top) {
  display: inline-flex;
}

.news-expand-btn:hover {
  background: var(--navy-soft);
  color: white;
}

.news-grid[data-news-feed] .news-expand-btn:hover,
.news-grid[data-news-feed] .news-expand-btn:focus-visible {
  background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
  border-color: color-mix(in srgb, var(--accent-solid) 24%, var(--navy-soft) 76%);
  color: var(--navy);
}

[data-theme="dark"] .news-grid[data-news-feed] .news-expand-btn:hover,
[data-theme="dark"] .news-grid[data-news-feed] .news-expand-btn:focus-visible {
  background: color-mix(in srgb, rgba(116, 168, 200, 0.16) 72%, transparent);
  border-color: color-mix(in srgb, var(--accent-soft-strong) 34%, var(--navy-soft) 66%);
  color: var(--ink);
}

.news-expand-icon {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

.news-card-expanded .news-expand-icon {
  transform: rotate(180deg);
}

#tva-jobs-feed .news-card-expandable {
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

#tva-jobs-feed .news-card-expandable:hover,
#tva-jobs-feed .news-card-expandable:focus-within {
  border-color: color-mix(in srgb, var(--accent-solid) 30%, var(--line) 70%);
  background: color-mix(in srgb, var(--card-bg) 90%, var(--accent-soft) 10%);
  box-shadow: 0 10px 28px rgba(53, 83, 108, 0.14);
  transform: translateY(-2px);
}

#tva-jobs-feed .news-card-expanded {
  border-color: color-mix(in srgb, var(--accent-solid) 38%, var(--line) 62%);
  background: color-mix(in srgb, var(--card-bg) 88%, var(--accent-soft-strong) 12%);
}

[data-theme="dark"] #tva-jobs-feed .news-card-expandable:hover,
[data-theme="dark"] #tva-jobs-feed .news-card-expandable:focus-within {
  border-color: color-mix(in srgb, var(--accent-soft-strong) 42%, var(--line) 58%);
  background: color-mix(in srgb, var(--card-bg) 84%, rgba(116, 168, 200, 0.16) 16%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] #tva-jobs-feed .news-card-expanded {
  border-color: color-mix(in srgb, var(--accent-soft-strong) 46%, var(--line) 54%);
  background: color-mix(in srgb, var(--card-bg) 80%, rgba(116, 168, 200, 0.2) 20%);
}

.news-grid,
.teaser-grid,
.sport-categories,
.offer-grid,
.timeline,
.service-grid,
.card-grid,
.split-layout,
.contact-layout,
.sports-table {
  display: grid;
  gap: 14px;
}

.news-grid {
  grid-template-columns: 1.35fr 1fr 1fr;
}

.single-column-grid,
.single-column-grid.news-grid {
  grid-template-columns: 1fr !important;
}

/* Verein-Übersicht auf verein.html:
   große Bereichskacheln mit darunterliegenden klickbaren Unterkacheln. */
.verein-overview-groups {
  display: grid;
  gap: 18px;
}

.verein-overview-group {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: 0 8px 24px rgba(20, 40, 55, 0.08);
}

.verein-overview-group--transparent {
  /* Aktive Variante: transparenter Hintergrund komplett ohne sichtbaren Rahmen,
     ohne Aussenabstand nach unten und buendig mit der Ueberschrift (frueher
     als Inline-Style auf jeder Gruppe). */
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  margin-bottom: 0;
  padding-left: 0;

  /* Alternative: subtile gestrichelte Kontur für stärkere Gruppierung.
    border: 1px dashed color-mix(in srgb, var(--navy-soft) 42%, transparent); */

  /* Falls der Kontrast auf einem später geänderten Seitenhintergrund doch zu schwach wirkt:
    background: rgba(255, 255, 255, 0.05); */
}

.verein-overview-group-header h3 {
  margin: 0;
  font-size: 1.85rem;
}

.verein-subnav-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.verein-subnav-card {
  display: grid;
  gap: 12px;
  min-height: 100%;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  box-shadow: 0 4px 16px rgba(20, 40, 55, 0.10);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.verein-subnav-card:hover,
.verein-subnav-card:focus-visible {
  transform: translateY(-3px);
  background: var(--accent-soft);
  box-shadow: 0 12px 28px rgba(20, 40, 55, 0.16);
}

.verein-subnav-card-topline {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.verein-subnav-card h4 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--navy);
}

.verein-subnav-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

.verein-subnav-card-arrow {
  color: var(--navy);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}

[data-theme="dark"] .verein-overview-group {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .verein-overview-group--transparent {
  border-color: transparent;
  box-shadow: none;
}

[data-theme="dark"] .verein-subnav-card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.36);
}

[data-theme="dark"] .verein-subnav-card:hover,
[data-theme="dark"] .verein-subnav-card:focus-visible {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.56);
}

@media (max-width: 1023px) {
  .verein-subnav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .verein-overview-group {
    padding: 18px;
  }

  .verein-subnav-grid {
    grid-template-columns: 1fr;
  }
}

.sponsor-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.sponsor-logo-card {
  display: grid;
  place-items: center;
  min-height: 140px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 6px 18px rgba(20, 40, 55, 0.08);
}

.sponsor-logo-link {
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.sponsor-logo-link:hover,
.sponsor-logo-link:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(20, 40, 55, 0.14);
}

.sponsor-logo-card img {
  width: 100%;
  max-width: 220px;
  max-height: 92px;
  object-fit: contain;
}

[data-theme="dark"] .sponsor-logo-card {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

.news-card-featured a,
.teaser-card a {
  display: inline-flex;
  margin-top: 8px;
  color: var(--navy);
  font-weight: 700;
}

.topics-box {
  margin-top: 18px;
  background: var(--topics-bg);
}

.compact-box {
  margin-top: 0;
}

.chip-grid,
.filter-bar,
.footer-links,
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip,
.filter-chip {
  border: 0;
  border-radius: 5px;
  padding: 10px 14px;
  background: var(--chip-bg);
  color: var(--navy);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
}

.chip.active,
.filter-chip.active {
  background: var(--accent-solid);
  color: var(--accent-contrast);
}

.chip-output {
  margin-bottom: 0;
}

.teaser-grid,
.offer-grid,
.timeline,
.three-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sport-categories {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.compact-categories {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sport-start .section-heading h2,
.sport-tile-label {
  font-family: "Barlow Condensed", "Source Sans 3", sans-serif;
}

.sport-start .section-heading h2 {
  font-family: inherit;
  letter-spacing: 0.02em;
}

.sport-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}

.sport-tiles-grid--max-size {
  grid-template-columns: repeat(auto-fit, minmax(170px, 170px));
  justify-content: left;
}

.tva-sport-tiles-grid--max-size-180 {
  grid-template-columns: repeat(auto-fit, minmax(170px, 306px));
  justify-content: left;
}

.sport-tiles-grid--limit-40 {
  grid-template-columns: repeat(auto-fit, minmax(170px, 30%));
  justify-content: left;
}

.sport-tiles-grid + .button {
  margin-top: 20px;
}

.sport-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

.sport-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 100%;
  margin-bottom: 12px;
}

.sport-filter-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy);
  margin-right: 4px;
}

#news-tag-filters {
  display: contents;
}

/* Zeilenlisten (Hinweise, Termine): dezente Flaeche mit Aussenlinie, damit
   die Liste schon im Ruhezustand als Tabelle erkennbar ist; Breite auf ein
   angenehmes Lesemass begrenzt (skaliert mit der Schriftgroesse), linksbuendig
   unter der Ueberschrift, in schmalen Spalten volle Breite. Die letzte Zeile
   gibt ihre Trennlinie an die Aussenlinie ab. Gilt auf jeder Seite, die die
   Komponente nutzt (Startseite, Hinweise, Terminkalender). */
.news-list-compact,
.hinweise-list {
  max-width: min(100%, 68rem);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card-bg);
}

.news-list-compact .news-item-compact:last-child,
.hinweise-list .hinweise-item:last-child {
  border-bottom: 0;
}

/* Hover/Fokus der Zeilen deutlich sichtbar: kraeftige Akzentflaeche plus
   Akzentstreifen links als Innenschatten (kein Layoutsprung). Seitenlokale
   Sonderfaelle wie termin-heute/termin-bald sind spezifischer und behalten
   ihre Farbe. */
.news-list-compact .news-item-compact:hover,
.news-list-compact .news-item-compact:focus-within,
.hinweise-list .hinweise-item:hover,
.hinweise-list .hinweise-item:focus-within {
  background: color-mix(in srgb, var(--card-bg) 62%, var(--accent-soft-strong) 38%);
  box-shadow: inset 3px 0 0 var(--accent-solid);
}

.news-list-compact {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.news-loading {
  padding: 16px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
}

.news-list-compact + .button {
  margin-top: 16px;
}

.news-item-compact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 140ms ease;
  text-decoration: none;
  color: inherit;
}

.news-item-compact:hover {
  background: color-mix(in srgb, var(--card-bg) 92%, var(--accent-soft) 8%);
  margin: 0 -8px;
  padding: 8px;
  border-radius: 4px;
}

a.news-item-compact:hover {
  text-decoration: none;
}

.news-date {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--muted);
  min-width: 80px;
}

.news-time {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 60px;
}

.news-headline {
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  flex-grow: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

.news-days {
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 100px;
  text-align: center;
  padding: 8px 12px;
  border-radius: 5px;
  background: var(--chip-bg);
  color: var(--tinted-section-text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.agenda-list-compact {
  width: 100%;
}

.agenda-list-compact .news-item-compact {
  cursor: default;
}

.news-item-compact--termin {
  position: relative;
}

.news-item-compact--termin.termin-hidden {
  display: none;
}

.news-item-compact--termin.termin-heute,
.news-item-compact--termin.termin-bald {
  margin: 0 -8px;
  padding: 10px 8px;
  border-radius: 5px;
  border-bottom-color: transparent;
}

.news-item-compact--termin.termin-heute {
  background: color-mix(in srgb, var(--accent-soft-strong) 55%, var(--card-bg) 45%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-solid) 30%, var(--line) 70%);
}

.news-item-compact--termin.termin-bald {
  background: color-mix(in srgb, var(--card-bg) 94%, rgba(214, 154, 45, 0.16) 6%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d69a2d 45%, var(--line) 55%);
}

.news-item-compact--termin.termin-vergangen {
  opacity: 0.62;
}

.news-item-compact--termin.termin-heute:hover,
.news-item-compact--termin.termin-heute:focus-within {
  background: color-mix(in srgb, var(--accent-soft-strong) 62%, var(--card-bg) 38%);
}

.news-item-compact--termin.termin-bald:hover,
.news-item-compact--termin.termin-bald:focus-within {
  background: color-mix(in srgb, var(--card-bg) 90%, rgba(214, 154, 45, 0.2) 10%);
}

.agenda-item-headline {
  display: grid;
  gap: 8px;
}

.agenda-item-title {
  min-width: 0;
}

.agenda-link--compact {
  width: fit-content;
  padding: 6px 10px;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}

[data-theme="dark"] .news-item-compact--termin.termin-heute {
  background: color-mix(in srgb, rgba(54, 125, 98, 0.42) 55%, rgba(255, 255, 255, 0.05) 45%);
}

[data-theme="dark"] .news-item-compact--termin.termin-bald {
  background: color-mix(in srgb, rgba(214, 154, 45, 0.16) 28%, rgba(255, 255, 255, 0.04) 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d69a2d 55%, rgba(255, 255, 255, 0.14) 45%);
}

@media (max-width: 767px) {
  .news-item-compact {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 8px;
  }

  .news-date,
  .news-time {
    flex-shrink: 1;
    min-width: 0;
  }

  .news-headline {
    order: 2;
    flex: 1 1 100%;
    width: 100%;
  }

  .news-days {
    order: 1;
    margin-left: auto;
    min-width: 0;
    max-width: 100%;
    padding: 6px 10px;
    white-space: normal;
    text-align: center;
  }
}

.news-header-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.news-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--sky-soft);
  color: var(--navy);
  border: 1px solid var(--line);
  white-space: nowrap;
}

[data-theme="dark"] .news-tag {
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.15);
}


.hinweise-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  grid-template-areas:
    "date title tag"
    "date desc   tag";
  column-gap: 18px;
  row-gap: 4px;
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  transition: background 140ms ease;
}

.hinweise-item:hover {
  background: color-mix(in srgb, var(--card-bg) 92%, var(--accent-soft) 8%);
  margin: 0;
  padding: 10px 10px;
  border-radius: 4px;
}

.hinweise-item-date {
  grid-area: date;
  align-self: start;
  padding-top: 2px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--navy-soft);
}

.hinweise-item--featured .hinweise-item-date {
  color: var(--accent-solid);
}

.hinweise-item .hinweise-item-title {
  grid-area: title;
  margin: 0;
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--ink);
}

.hinweise-item-desc {
  grid-area: desc;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hinweise-item-tags {
  grid-area: tag;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 200px;
}

@media (max-width: 767px) {
  .hinweise-item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date tag"
      "title title"
      "desc desc";
    row-gap: 6px;
  }

  .hinweise-item-date {
    padding-top: 0;
  }

  .hinweise-item-tags {
    max-width: none;
  }
}

.sport-filter-chip {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 10px 14px;
  background: var(--chip-bg);
  color: var(--navy);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.sport-filter-chip:hover,
.sport-filter-chip:focus-visible {
  background: var(--accent-soft-strong);
}

.sport-filter-chip.active {
  background: var(--accent-solid);
  color: var(--accent-contrast);
  border-color: transparent;
}

.sport-filter-chip--disabled,
.sport-filter-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.sport-filter-bar--panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
  justify-content: start;
  gap: 16px 40px;
  margin: 0 0 24px;
}

.sport-filter-bar--panel .sport-filter-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: unset;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.sport-filter-group-label {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 12px;
}

.sport-filter-bar--panel .sport-filter-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 7px 6px;
  text-align: left;
}

.sport-filter-chip-dot {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--navy-soft);
  position: relative;
}

.sport-filter-bar--panel .sport-filter-chip.active {
  background: transparent;
  color: var(--accent-solid);
  border-color: transparent;
}

.sport-filter-bar--panel .sport-filter-chip.active .sport-filter-chip-dot {
  border-color: var(--accent-solid);
}

.sport-filter-bar--panel .sport-filter-chip.active .sport-filter-chip-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent-solid);
}

.sport-filter-bar--panel .sport-filter-group--dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
  row-gap: 2px;
}

.sport-filter-bar--panel .sport-filter-group--dual .sport-filter-group-label,
.sport-filter-bar--panel .sport-filter-group--dual .sport-filter-chip[data-filter="alle"] {
  grid-column: 1 / -1;
}

.sport-filter-bar--panel .sport-filter-group--dual .sport-filter-chip {
  overflow-wrap: break-word;
}

.sport-filter-count {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.88rem;
}

.sport-tile {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-bg);
  box-shadow: 0 4px 16px rgba(20, 40, 55, 0.10);
  transform: translateY(0);
  transition: transform 180ms ease, box-shadow 180ms ease;
  text-decoration: none;
  color: inherit;
}

.sport-tile.hidden {
  display: none;
}

.sport-tile:hover,
.sport-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(20, 40, 55, 0.18);
}

.sport-tile-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--sky-soft);
}

.sport-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 220ms ease;
}

.sport-tile:hover .sport-tile-media img,
.sport-tile:focus-visible .sport-tile-media img {
  transform: scale(1.05);
}

.sport-tile-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 2.8em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.08rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--navy);
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.sport-tile-label--long {
  font-size: 0.96rem;
  letter-spacing: 0.04em;
}

.sport-tile-arrow {
  --tva-arrow-color: var(--accent-solid);
  display: inline-flex;
  position: relative;
  width: 22px;
  height: 12px;
  vertical-align: middle;
}

.sport-tile-arrow::after,
.sport-tile-arrow::before {
  content: "";
  display: inline-block;
  position: absolute;
  border-color: var(--tva-arrow-color);
}

.sport-tile-arrow::after {
  width: 8px;
  height: 0;
  border: 1.5px solid var(--tva-arrow-color);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.sport-tile-arrow::before {
  width: 8px;
  height: 8px;
  border-top: 3px solid var(--tva-arrow-color);
  border-right: 3px solid var(--tva-arrow-color);
  left: 2px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.sport-tile-arrow,
.sport-tile-arrow::after,
.sport-tile-arrow::before {
  transition: all 0.3s;
}

.sport-tile:hover .sport-tile-arrow,
.sport-tile:focus-visible .sport-tile-arrow {
  transform: translateX(8px);
}

.sport-tile:hover .sport-tile-arrow::after,
.sport-tile:focus-visible .sport-tile-arrow::after {
  width: 18px;
}

.sport-tile:hover .sport-tile-arrow::before,
.sport-tile:focus-visible .sport-tile-arrow::before {
  left: 11px;
}

.sport-tile--logo .sport-tile-media {
  display: grid;
  place-items: center;
  background: var(--sky-soft);
}

.sport-tile--logo .sport-tile-media img {
  width: min(74%, 140px);
  height: auto;
  object-fit: contain;
}

[data-theme="dark"] .sport-tile {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.40);
}

[data-theme="dark"] .sport-tile:hover,
[data-theme="dark"] .sport-tile:focus-visible {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.60);
}

[data-theme="dark"] .sport-filter-chip {
  border-color: rgba(215, 235, 250, 0.24);
}

.link-list {
  display: grid;
  gap: 12px;
}

.text-link-row {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.text-link-row:last-child {
  border-bottom: 0;
}

.text-link-row strong {
  font-size: 1.2rem;
  color: var(--navy);
}

.text-link-row span {
  color: var(--muted);
  font-size: 1rem;
}

.sports-table {
  gap: 0;
}

.sport-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.sport-row:last-child {
  border-bottom: 0;
}

.sport-row strong {
  font-size: 1.1rem;
  color: var(--navy);
}

.sport-row span {
  color: var(--muted);
}

.sport-row-description {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.45;
}

.sport-row-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.sport-row-media {
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--sky-soft);
  box-shadow: 0 8px 20px rgba(20, 40, 55, 0.08);
  transform: translateY(0);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.sport-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 220ms ease;
}

.sport-row-media:hover,
.sport-row:hover .sport-row-media {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(20, 40, 55, 0.18);
}

.sport-row-media:hover img,
.sport-row:hover .sport-row-media img {
  transform: scale(1.05);
}

.sport-row-title-link {
  color: inherit;
  text-decoration: none;
}

.sport-row-title-link:hover,
.sport-row-title-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

[data-theme="dark"] .sport-row-media {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.40);
}

[data-theme="dark"] .sport-row-media:hover,
[data-theme="dark"] .sport-row:hover .sport-row-media {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.60);
}

/* ── Sport-Kacheln-Liste (neue Kacheln auf sportangebot.html) ─────────── */

.sport-kacheln-liste {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sport-kachel {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transition: background 140ms ease;
}

.sport-kachel {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background 140ms ease;
}

.sport-kachel.tva-first-visible {
  border-top: 1px solid var(--line);
}

.sport-kachel:hover {
  background: var(--sky-soft);
}

[data-theme="dark"] .sport-kachel:hover {
  background: rgba(255, 255, 255, 0.04);
}

.sport-kachel-bild {
  width: 150px;
  min-height: 120px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--sky-soft);
}

.sport-kachel-bild {
  min-height: 110px;
  overflow: hidden;
  background: var(--sky-soft);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(20, 40, 55, 0.10);
}

.sport-kachel-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sport-kachel:hover {
  cursor: pointer;
}

.sport-kachel-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 220ms ease;
}

.sport-kachel:hover .sport-kachel-bild img {
  transform: scale(1.05);
}

.sport-kachel-inhalt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 16px 14px;
}

.sport-kacheln-liste .sport-kachel-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}

.sport-kachel-link {
  color: inherit;
  text-decoration: none;
}

.sport-kachel-link:hover,
.sport-kachel-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.sport-kachel-text {
  margin: 0;
  font-size: 0.93rem;
  color: var(--muted);
  line-height: 1.45;
}

.sport-kachel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.sport-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--sky-soft);
  color: var(--navy);
  border: 1px solid var(--line);
  white-space: nowrap;
}

[data-theme="dark"] .sport-tag {
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.15);
}

.sport-tag--active {
  background: var(--accent-solid);
  color: var(--accent-contrast);
  border-color: transparent;
}

[data-theme="dark"] .sport-tag--active {
  background: var(--accent-solid);
  color: var(--accent-contrast);
  border-color: transparent;
}

@media (max-width: 600px) {
  .sport-kachel {
    grid-template-columns: 1fr;
  }

  .sport-kachel-bild {
    width: 100%;
    height: 160px;
    min-height: unset;
  [data-theme="dark"] .sport-tag {
    background: rgba(255, 255, 255, 0.07);
    color: var(--muted);
    border-color: rgba(255, 255, 255, 0.15);
  }

  [data-theme="dark"] .sport-kachel-bild {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.40);
  }

  @media (max-width: 600px) {
    .sport-kachel {
      grid-template-columns: 1fr;
    }

    .sport-kachel-bild {
      height: 160px;
      min-height: unset;
    }
  }
  }
}

/* ── Ende Sport-Kacheln-Liste ─────────────────────────────────────────── */

/* ── Webseiten-Historie ───────────────────────────────────────────────── */

.website-history-list {
  display: grid;
  gap: 24px;
  margin-top: 26px;
}

.website-history-entry {
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

.website-history-entry > h1 {
  padding: 24px 26px 0;
  margin: 0;
}

.website-history-image {
  width: 75%;
  margin: 0 auto;
  background: transparent;
}

.website-history-image .lightbox-btn {
  display: block;
  width: 100%;
}

.website-history-image .lightbox-btn img {
  display: block;
  width: 100%;
  height: auto;
}

.website-history-copy {
  padding: 24px 26px 28px;
  background: transparent;
}

.website-history-copy h3 {
  margin: 0 0 18px;
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  color: var(--navy);
}

.website-history-copy p {
  margin: 0;
}

.website-history-copy p + p {
  margin-top: 16px;
}

@media (max-width: 767px) {
  .website-history-list {
    gap: 18px;
  }

  .website-history-image {
    width: 50%;
  }

  .website-history-copy {
    padding: 18px 18px 22px;
  }
}

/* ── Ende Webseiten-Historie ──────────────────────────────────────────── */

.offer-grid {
  margin-top: 18px;
}

.pdf-toggle-button {
  gap: 10px;
  margin-top: 10px;
  font-size: 1.0rem;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--chip-bg);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

a.pdf-toggle-button:link,
a.pdf-toggle-button:visited {
  background: var(--chip-bg);
  color: var(--ink);
}

.pdf-download-button {
  font-size: 0.9rem;
}

a.pdf-download-button,
a.pdf-download-button:link,
a.pdf-download-button:visited {
  background: var(--chip-bg);
  color: var(--ink);
  border-color: var(--line);
}

a.pdf-download-button:hover,
a.pdf-download-button:focus-visible {
  background: var(--accent-soft);
  color: var(--ink);
}

.pdf-toggle-button:hover,
.pdf-toggle-button:focus-visible {
  background: var(--accent-soft);
}

.pdf-toggle-button-icon {
  font-size: 0.95rem;
  transition: transform 0.25s ease;
}

.pdf-toggle-button[aria-expanded="true"] .pdf-toggle-button-icon {
  transform: rotate(180deg);
}

/* ===== Neue vereinte Button-Klasse: button-light-blue ===== */
.button-light-blue {
  gap: 10px;
  margin-top: 10px;
  font-size: 0.9rem;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--chip-bg);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: all 200ms ease;
}

.button-light-blue:hover,
.button-light-blue:focus-visible {
  background: var(--accent-soft);
  color: var(--ink);
}

a.button-light-blue,
a.button-light-blue:link,
a.button-light-blue:visited {
  background: var(--chip-bg);
  color: var(--ink);
  border-color: var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 5px;
  font-weight: 700;
}

a.button-light-blue:hover,
a.button-light-blue:focus-visible {
  background: var(--accent-soft);
  color: var(--ink);
}

.pdf-embed-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.25s ease;
}

.pdf-embed-panel.is-open {
  opacity: 1;
  margin-top: 16px;
}

.pdf-embed-inner {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 4px;
}

.pdf-embed-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
}

.offer-card.hidden {
  display: none;
}

.events .timeline-item,
.page-hero.dark-hero {
  background: var(--events-card-bg);
  border-color: var(--events-card-border);
}

.events .timeline-date {
  background: var(--agenda-meta-bg);
  color: var(--tinted-section-text);
}

.events--transparent {
  background: transparent !important;
  border-color: transparent;
  box-shadow: none;
}

.events--transparent .section-heading {
  justify-content: center;
}

.events--transparent .section-heading > div {
  text-align: center;
}

.events--transparent .agenda-shell {
  width: 100%;
}

.events--transparent .agenda-board {
  width: 100%;
  max-width: 100%;
}

.events--transparent .agenda-table {
  width: 100%;
}

.agenda-shell {
  display: grid;
  gap: 18px;
}

.agenda-filter-bar {
  margin-bottom: 18px;
}

.agenda-filter-button {
  background: var(--chip-bg);
  color: var(--navy);
}

.agenda-filter-button.active {
  background: var(--accent-solid);
  color: var(--accent-contrast);
}

.agenda-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.agenda-meta span,
.agenda-date,
.agenda-time-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.agenda-meta span {
  background: var(--agenda-meta-bg);
  color: var(--tinted-section-text);
}

.agenda-board {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 12px 18px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--agenda-board-border);
  background: var(--agenda-board-bg);
}

.agenda-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;
  table-layout: auto;
}

.agenda-table colgroup col:nth-child(1),
.agenda-table th:nth-child(1),
.agenda-table td:nth-child(1) {
  width: 1%;
  white-space: nowrap;
}

.agenda-table colgroup col:nth-child(2),
.agenda-table th:nth-child(2),
.agenda-table td:nth-child(2) {
  width: 1%;
  white-space: nowrap;
}

.agenda-table thead th {
  padding: 0 12px 12px;
  color: var(--agenda-head-text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--agenda-board-border);
  text-align: left;
}

.agenda-table thead th:nth-child(1),
.agenda-table thead th:nth-child(2) {
  padding-left: 24px;
}

.agenda-table tbody td {
  vertical-align: middle;
  padding: 16px 12px;
  border-top: 1px solid var(--agenda-row-border);
  border-bottom: 1px solid var(--agenda-row-border);
  background: color-mix(in srgb, var(--card-bg) 88%, var(--agenda-board-bg) 12%);
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.agenda-table tbody td:first-child {
  text-align: center;
  border-left: 1px solid var(--agenda-row-border);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.agenda-table tbody td:last-child {
  border-right: 1px solid var(--agenda-row-border);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.agenda-table tbody tr:not(.termin-hidden):hover td,
.agenda-table tbody tr:not(.termin-hidden):focus-within td {
  background: color-mix(in srgb, var(--card-bg) 96%, var(--accent-soft) 4%);
}

.agenda-table tbody tr.termin-hidden {
  display: none;
}

.agenda-table tbody tr.termin-vergangen td {
  background: color-mix(in srgb, var(--agenda-board-bg) 65%, transparent 35%);
  border-color: color-mix(in srgb, var(--agenda-row-border) 75%, transparent 25%);
  opacity: 0.5;
}

.agenda-table tbody tr.termin-heute td {
  background: color-mix(in srgb, var(--accent-soft-strong) 55%, var(--card-bg) 45%);
  border-color: color-mix(in srgb, var(--accent-solid) 30%, var(--agenda-row-border) 70%);
}

.agenda-table tbody tr.termin-bald td {
  border-color: color-mix(in srgb, #d69a2d 45%, var(--agenda-row-border) 55%);
}

.agenda-table tbody tr.termin-zukunft td {
  background: color-mix(in srgb, var(--card-bg) 88%, var(--agenda-board-bg) 12%);
}

.agenda-table td[data-label] {
  min-width: 0;
}

.agenda-date {
  background: transparent;
  color: var(--agenda-date-text);
  white-space: nowrap;
}

.agenda-date-range {
  display: inline-grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-items: center;
  gap: 2px;
}

.agenda-date-separator {
  color: var(--agenda-head-text);
  line-height: 1;
}

.agenda-time-pill {
  background: transparent;
  color: var(--agenda-time-text);
  white-space: nowrap;
}

.agenda-time-empty {
  background: transparent;
  color: var(--agenda-time-empty-text);
}

.agenda-event {
  display: grid;
  gap: 6px;
}

.agenda-title {
  margin: 0;
  color: var(--tinted-section-text);
  font-size: 1.45rem;
  line-height: 1.08;
}

.agenda-link {
  display: inline-flex;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 5px;
  background: var(--agenda-link-bg);
  color: var(--tinted-section-text);
  font-weight: 700;
}

.agenda-link:hover,
.agenda-link:focus-visible {
  background: var(--agenda-link-hover-bg);
}

.agenda-countdown-cell {
  white-space: nowrap;
}

.agenda-countdown {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 5px;
  background: var(--chip-bg);
  color: var(--tinted-section-text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.termin-vergangen .agenda-countdown {
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  border: 1px solid var(--line);
  opacity: 0.78;
}

.termin-heute .agenda-countdown {
  background: color-mix(in srgb, #2f9d65 18%, transparent);
  color: #2f9d65;
}

.termin-bald .agenda-countdown {
  background: color-mix(in srgb, #d69a2d 18%, transparent);
  color: #d69a2d;
}

.termin-zukunft .agenda-countdown {
  background: var(--chip-bg);
  color: var(--tinted-section-text);
}

[data-theme="dark"] .agenda-table tbody tr.termin-vergangen td {
  background: rgba(255, 255, 255, 0.035);
}

[data-theme="dark"] .agenda-table tbody tr.termin-heute td {
  background: color-mix(in srgb, rgba(54, 125, 98, 0.42) 55%, rgba(255, 255, 255, 0.05) 45%);
}

[data-theme="dark"] .agenda-table tbody tr.termin-bald td {
  border-color: color-mix(in srgb, #d69a2d 55%, rgba(255, 255, 255, 0.14) 45%);
}

[data-theme="dark"] .termin-heute .agenda-countdown {
  color: #8fe0b7;
}

[data-theme="dark"] .termin-bald .agenda-countdown {
  color: #f2c266;
}

[data-theme="dark"] .termin-zukunft .agenda-countdown {
  color: var(--ink);
}

.service-layout,
.split-layout,
.contact-layout {
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.35fr);
}

.service-feature {
  background: var(--card-highlight-bg);
}

.service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stack-list {
  display: grid;
  gap: 14px;
}

.history-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr) auto;
  gap: 22px;
  align-items: center;
}

.history-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 5px;
  background: var(--history-link-bg);
  font-weight: 700;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) auto;
  gap: 18px;
  border: 1px solid var(--line);
}

.footer-brand strong {
  display: block;
  margin-bottom: 8px;
}

.footer-brand a,
.footer-links a {
  display: inline-flex;
  padding: 6px 0;
  color: var(--navy-soft);
}

.footer-meta span,
.footer-meta a {
  padding: 8px 12px;
  border-radius: 5px;
  background: var(--footer-pill-bg);
  color: var(--navy-soft);
  font-size: 0.84rem;
}

.footer-meta a.footer-legal-link {
  background: transparent;
  padding: 8px 0;
}

.tva-content-block.tva-sport-overview-wide {
  max-width: none;
  margin: 0;
}

.tva-sport-overview-wide .section-heading > div {
  flex: 1 1 auto;
  min-width: 0;
}

.tva-content-block {
  max-width: var(--tva-content-max-width);
  margin: 0 auto;
}

/* Typ 1 ab Desktopbreite: der Block haelt zum Fensterrand mindestens den
   Grundabstand, statt bei einem Fenster unterhalb der Obergrenze am Rand zu
   kleben. Im Layout-Shell gilt stattdessen dessen eigene Regel (Spalte minus
   Abstand), die diese hier durch die spaetere Ladereihenfolge ueberschreibt. */
@media (min-width: 1024px) {
  .tva-content-block {
    max-width: min(calc(100% - 2 * var(--tva-shell-inset)), var(--tva-content-max-width));
  }
}

/* Typografie des Inhaltsblocks, bewusst von der Breite getrennt: eine Seite
   kann den Breitenvertrag uebernehmen, ohne dass ihr Text gedaempft und ihre
   Ueberschriften enger werden (z. B. Rechtstexte wie die Satzung).
   Hintergrund: .github/decision-records/content-width-layout-types.md */
.tva-prose h2 {
  margin: 24px 0 8px;
  font-size: 1.6rem;
}

.tva-prose.tva-sportabteilung-content h2 {
  margin-top: 2cm;
  margin-bottom: 1cm;
}

.tva-sport-overview-wide .section-heading h2 {
  margin-top: 2cm;
  margin-bottom: 1cm;
}

.history-content-narrow {
  width: min(100%, 72ch);
  margin-inline: auto;
}

.history-content-narrow.section-panel,
.section-panel.history-content-narrow {
  padding-inline: clamp(22px, 4vw, 30px);
}

.tva-prose h3 {
  margin: 18px 0 8px;
  font-size: 1.2rem;
}

.tva-prose p,
.tva-prose li {
  color: var(--muted);
  line-height: 1.65;
}

.satzung-accordion {
  margin-top: 14px;
}

.satzung-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 4px;
}

.satzung-details {
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  padding: 12px 14px;
}

.satzung-details + .satzung-details {
  margin-top: 10px;
}

.satzung-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
}

.satzung-details-content {
  margin-top: 10px;
}

.satzung-details-content h3 {
  margin-top: 14px;
}

.faq-list details {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--card-bg);
  padding: 12px 14px;
}

.faq-list--transparent {
  background: transparent !important;
  border-color: transparent;
  box-shadow: none;
}

.faq-list--transparent details {
  background: transparent;
  border: none;
}

.faq-list details + details {
  margin-top: 10px;
}

.faq-list summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
}

.tva-ehrenamt-hero {
  position: relative;
  overflow: hidden;
}

.tva-ehrenamt-hero::after {
  content: "";
  position: absolute;
  inset: auto -120px -160px auto;
  width: clamp(260px, 28vw, 380px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

.tva-ehrenamt-story h2,
.tva-ehrenamt-stats h2,
.tva-ehrenamt-double h2,
.tva-ehrenamt-contact h2 {
  margin-top: 0;
}

.tva-ehrenamt-list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 10px;
}

.tva-ehrenamt-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tva-ehrenamt-stat-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--card-bg) 92%, var(--accent-soft) 8%);
  padding: 20px;
}

.tva-ehrenamt-stat-card h3 {
  margin: 8px 0;
  font-size: 1.25rem;
}

.tva-ehrenamt-stat-card p {
  margin: 0;
}

.tva-ehrenamt-stat-keyword {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent-soft-strong) 65%, var(--card-bg) 35%);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
}

.tva-ehrenamt-double {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.tva-ehrenamt-double article {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  padding: 22px;
}

.tva-ehrenamt-cta {
  margin-top: 16px;
}

.tva-ehrenamt-contact .contact-layout {
  gap: 16px;
}

[data-theme="dark"] .tva-ehrenamt-stat-card {
  background: color-mix(in srgb, var(--card-bg) 90%, rgba(116, 168, 200, 0.16) 10%);
}

[data-theme="dark"] .tva-ehrenamt-stat-keyword {
  color: var(--ink);
}

@media (max-width: 1140px) {
  .tva-ehrenamt-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero,
  .service-layout,
  .history-layout,
  .site-footer,
  .split-layout,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .news-grid,
  .teaser-grid,
  .sport-categories,
  .offer-grid,
  .timeline,
  .three-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agenda-table th:nth-child(1),
  .agenda-table td:nth-child(1) {
    width: 1%;
  }

  .agenda-table th:nth-child(2),
  .agenda-table td:nth-child(2) {
    width: 1%;
  }
}

@media (max-width: 860px) {
  .tva-ehrenamt-stat-grid,
  .tva-ehrenamt-double {
    grid-template-columns: 1fr;
  }

  .section-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero,
  .news,
  .teaser-row,
  .sport,
  .events,
  .service,
  .history,
  .site-footer,
  .intro-panel,
  .page-hero,
  .content-section {
    padding: 22px;
  }

  .hero-media {
    min-height: 460px;
  }

  .news-grid,
  .teaser-grid,
  .sport-categories,
  .compact-categories,
  .offer-grid,
  .timeline,
  .service-grid,
  .two-columns,
  .three-columns {
    grid-template-columns: 1fr;
  }

  .sport-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sport-row-content {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .home-hero .hero-copy-layout {
    gap: 28px;
  }

  .home-hero .hero-copy-logo {
    flex-basis: 240px;
    width: 240px;
  }
}

@media (max-width: 1023px) {
  .home-hero .hero-copy-logo {
    flex-basis: 240px;
    width: 240px;
  }

  .home-hero .hero-copy-logo .tva-willkommen-logo {
    /* Tablet: Logo auf 240px reduzieren (150% von 160px), Layout bleibt stabil. */
    width: 240px;
    height: 240px;
  }
}

/* Termin-Agenda: Mobiles Kartenlayout erst unterhalb von 768px aktivieren.
   Diesen Wert bei Bedarf hier zentral anpassen. */
@media (max-width: 767px) {
  .agenda-board {
    width: 100%;
    padding: 14px;
    overflow: hidden;
  }

  .agenda-table {
    border-spacing: 0 12px;
  }

  .agenda-table thead {
    display: none;
  }

  .agenda-table,
  .agenda-table tbody,
  .agenda-table td {
    display: block;
    width: 100%;
  }

  .agenda-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--agenda-row-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--card-bg) 88%, var(--agenda-board-bg) 12%);
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  }

  .agenda-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .agenda-table tbody tr.termin-vergangen {
    background: color-mix(in srgb, var(--agenda-board-bg) 65%, transparent 35%);
    border-color: color-mix(in srgb, var(--agenda-row-border) 75%, transparent 25%);
    opacity: 0.5;
  }

  .agenda-table tbody tr.termin-heute {
    background: color-mix(in srgb, var(--accent-soft-strong) 55%, var(--card-bg) 45%);
    border-color: color-mix(in srgb, var(--accent-solid) 30%, var(--agenda-row-border) 70%);
  }

  .agenda-table tbody tr.termin-bald {
    border-color: color-mix(in srgb, #d69a2d 45%, var(--agenda-row-border) 55%);
  }

  .agenda-table tbody td {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
  }

  .agenda-table tbody td:first-child,
  .agenda-table tbody td:last-child {
    border-left: 0;
    border-right: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .agenda-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--tinted-section-text-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Block 1: Datum, Zeit, Verbleibende Tage immer in derselben Meta-Zeile. */
  .agenda-table tbody tr > td[data-label="Datum"],
  .agenda-table tbody tr > td[data-label="Zeit"],
  .agenda-table tbody tr > td[data-label="Verbleibende Tage"] {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 24px) / 3);
    width: calc((100% - 24px) / 3);
    min-width: 0;
    flex-shrink: 0;
  }

  .agenda-table tbody tr > td[data-label="Datum"] {
    order: 1;
  }

  .agenda-table tbody tr > td[data-label="Zeit"] {
    order: 2;
  }

  .agenda-table tbody tr > td[data-label="Verbleibende Tage"] {
    order: 3;
  }

  /* Block 2: Terminname immer über die volle Breite unterhalb der Meta-Zeile. */
  .agenda-table tbody tr > td[data-label="Termin"] {
    order: 4;
    flex: 0 0 100%;
    width: 100%;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 0;
  }

  .agenda-table tbody tr > td[data-label="Datum"] .agenda-date,
  .agenda-table tbody tr > td[data-label="Zeit"] .agenda-time-pill,
  .agenda-table tbody tr > td[data-label="Verbleibende Tage"] .agenda-countdown {
    width: 100%;
    min-height: 48px;
    align-items: flex-start;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--agenda-row-border) 85%, transparent);
    border-radius: 8px;
  }

  .agenda-table tbody tr > td[data-label="Datum"] .agenda-date {
    white-space: normal;
  }

  .agenda-date-range {
    justify-items: center;
  }

  .agenda-table tbody tr > td[data-label="Termin"] .agenda-event {
    gap: 8px;
  }

  .agenda-table tbody tr > td[data-label="Termin"] .agenda-title {
    font-size: 1.2rem;
    line-height: 1.15;
  }

  .agenda-link {
    max-width: 100%;
  }
}

@media (max-width: 520px) {
  .agenda-table tbody tr {
    gap: 8px;
    padding: 12px;
  }

  .agenda-table tbody tr > td[data-label="Datum"],
  .agenda-table tbody tr > td[data-label="Zeit"],
  .agenda-table tbody tr > td[data-label="Verbleibende Tage"] {
    flex-basis: calc((100% - 16px) / 3);
    width: calc((100% - 16px) / 3);
  }

  .agenda-table tbody tr > td[data-label="Datum"] .agenda-date,
  .agenda-table tbody tr > td[data-label="Zeit"] .agenda-time-pill,
  .agenda-table tbody tr > td[data-label="Verbleibende Tage"] .agenda-countdown {
    padding: 8px 10px;
    font-size: 0.76rem;
    letter-spacing: 0.03em;
  }

  .agenda-table tbody td::before {
    font-size: 10px;
  }
}

@media (max-width: 560px) {
  .hero,
  .news,
  .teaser-row,
  .sport,
  .events,
  .service,
  .history,
  .site-footer,
  .intro-panel,
  .page-hero,
  .content-section {
    padding: 18px;
  }

  .hero-copy,
  .sidebar-card,
  .news-card,
  .topics-box,
  .teaser-card,
  .category-card,
  .offer-card,
  .timeline-item,
  .service-feature,
  .service-item,
  .content-card {
    padding: 18px;
  }

  .home-hero .hero-copy {
    margin: 12px;
  }

  .header-actions {
    flex-wrap: wrap;
  }

  .header-actions a,
  .button {
    width: 100%;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
  }
}

.department-hero {
  overflow: hidden;
  padding: 0;
}

.department-hero-media {
  min-height: 560px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

.department-hero-copy {
  width: min(760px, 100% - 48px);
  margin: 0 24px 24px;
  padding: 28px 30px;
  border-radius: 5px;
  background: rgba(255, 248, 242, 0.88);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
}

[data-theme="dark"] .department-hero-copy {
  background: rgba(15, 27, 37, 0.84);
}

.department-hero-copy h1 {
  margin: 0 0 10px;
  font-size: clamp(2.7rem, 5vw, 4.8rem);
  line-height: 0.94;
}

.department-hero-copy p:last-of-type {
  margin-bottom: 0;
}

.tva-tennis-hero-actions .button {
  width: auto;
}

.tva-fussball-hero-actions .button {
  width: auto;
}

@media (min-width: 1024px) {
  .tva-tennis-hero .department-hero-copy {
    width: min(1056px, 100% - 48px);
  }

  .tva-tennis-hero-actions {
    flex-wrap: nowrap;
  }

  .tva-tennis-hero-actions .button {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .tva-fussball-hero .department-hero-copy {
    width: min(1056px, 100% - 48px);
  }

  .tva-fussball-hero-actions {
    flex-wrap: nowrap;
  }

  .tva-fussball-hero-actions .button {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

.department-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.department-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 5px;
  background: var(--chip-bg);
  color: var(--navy);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tva-sportstaette-page-grid {
  display: grid;
  gap: 18px;
}

.tva-sportstaette-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.tva-sportstaette-gallery-card {
  margin: 0;
  overflow: hidden;
  border: none;
  border-radius: var(--radius-md, 5px);
  background: transparent !important;
  box-shadow: none !important;
}

.tva-sportstaette-gallery-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--panel-bg);
}

.tva-sportstaette-gallery-card figcaption {
  padding: 12px 14px;
  color: var(--muted);
  font-size: 0.96rem;
}

@media (min-width: 1024px) {
  .tva-sportstaette-page-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    align-items: start;
  }
}

.news-cta-card {
  display: grid;
  align-content: start;
  gap: 10px;
}

.news-cta-card h3 {
  margin-top: 0;
}

.schedule-showcase {
  display: grid;
  gap: 18px;
}

.weekplan-variant {
  padding: 18px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.weekplan-label {
  margin: 0 0 14px;
  color: var(--navy-soft);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-day-grid,
.schedule-week-grid,
.schedule-spotlight {
  display: grid;
  gap: 12px;
}

.schedule-day-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.schedule-day-card,
.schedule-week-grid article,
.schedule-spotlight article,
.schedule-stack-list article {
  padding: 16px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--panel-bg);
}

.schedule-day-card h3,
.schedule-week-grid h3,
.schedule-spotlight h3,
.schedule-stack-list h3 {
  margin: 0 0 10px;
  font-size: 1.25rem;
}

.schedule-day-card p,
.schedule-week-grid p,
.schedule-spotlight p,
.schedule-stack-list p,
.schedule-timeline p,
.schedule-band-list span,
.schedule-minimal-list em {
  margin: 0;
  color: var(--muted);
}

.schedule-table-wrap {
  overflow-x: auto;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
}

.schedule-table th,
.schedule-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.schedule-table th {
  color: var(--navy);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-timeline {
  display: grid;
  gap: 12px;
}

.schedule-timeline article {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 0 12px 14px;
  border-left: 3px solid var(--accent-solid);
}

.schedule-timeline span,
.schedule-minimal-list span {
  color: var(--navy);
  font-weight: 700;
}

.schedule-week-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.weekplan-variant--bands {
  background: transparent;
  padding: 0;
  border: 0;
  width: 100%;
}

.schedule-band-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  align-items: start;
  width: 100%;
}

.schedule-band-list article {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-content: start;
  min-width: 0;
  min-height: 190px;
  padding: 16px 18px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--accent-soft), var(--card-bg));
  border: 1px solid var(--line);
  overflow: hidden;
  transition: box-shadow 0.18s, background 0.18s;
}

.schedule-band-list article:hover,
.schedule-band-list article:focus-within {
  background: linear-gradient(135deg, var(--accent-soft-strong), var(--card-bg));
  box-shadow: 0 6px 24px 0 rgba(53,83,108,0.13);
  border-color: var(--accent-solid);
  z-index: 3;
}

.schedule-band-list strong {
  display: block;
  text-align: center;
  color: var(--navy);
  font-size: 1.08rem;
}

.schedule-band-times {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.schedule-band-time {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
}

/* Home page: spacing and hover effects for news/calendar grids */
.tva-grid-action-button {
  margin-top: 2.5rem !important;
}

/* General hover effects for news cards (all news grids, not just data-news-feed) */
.news-grid .news-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
  cursor: pointer;
}

.news-grid .news-card:hover,
.news-grid .news-card:focus-within {
  border-color: color-mix(in srgb, var(--accent-solid) 30%, var(--line) 70%);
  background: color-mix(in srgb, var(--card-bg) 90%, var(--accent-soft) 10%);
  box-shadow: 0 10px 28px rgba(53, 83, 108, 0.14);
  transform: translateY(-2px);
}

.news-grid .news-card-featured:hover,
.news-grid .news-card-featured:focus-within {
  background: color-mix(in srgb, var(--card-bg) 90%, var(--accent-soft) 10%);
}

[data-theme="dark"] .news-grid .news-card:hover,
[data-theme="dark"] .news-grid .news-card:focus-within {
  border-color: color-mix(in srgb, var(--accent-soft-strong) 42%, var(--line) 58%);
  background: color-mix(in srgb, var(--card-bg) 84%, rgba(116, 168, 200, 0.16) 16%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

[data-theme="dark"] .news-grid .news-card-featured:hover,
[data-theme="dark"] .news-grid .news-card-featured:focus-within {
  background: color-mix(in srgb, var(--card-highlight-bg) 85%, rgba(116, 168, 200, 0.15) 15%);
}

.schedule-band-time {
  align-items: center;
  padding: 10px 12px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--panel-bg);
  width: 100%;
  min-height: 72px;
  max-width: 100%;
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(.4,1.4,.6,1), box-shadow 0.18s;
}

.schedule-band-time:hover {
  transform: scale(1.045);
  z-index: 2;
  box-shadow: 0 4px 18px 0 rgba(53,83,108,0.10);
}

.schedule-slot-time {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-items: center;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.1;
}

.schedule-slot-start,
.schedule-slot-end {
  font-variant-numeric: tabular-nums;
}

.schedule-slot-divider {
  color: var(--navy-soft);
  font-weight: 700;
}

.schedule-slot-title {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.94rem;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.schedule-band-time--free {
  grid-template-columns: 1fr;
}

.schedule-band-time--free .schedule-slot-title {
  color: var(--muted);
  font-style: italic;
  font-weight: 500;
}

/*
 * "force-mobile" (Inhalt umgebrochen, siehe hasWrappedItems() in
 * nav-toggle.js) kann auch bei tatsaechlich schmaler Bildschirmbreite
 * zusaetzlich zur echten "@media (max-width: 860px)" oben ausgeloest
 * werden - beide Zustaende sind voneinander unabhaengig und schliessen
 * sich nicht gegenseitig aus. Ohne "min-width: 861px" hier wuerden die
 * folgenden Regeln (fuer den schmalen *Desktop-Fenster*-Fallback gedacht,
 * z.B. Logo/Marken-Kachel oben statt unten, Menue waechst nach unten statt
 * als Vollflaechen-Overlay) mit den echten Mobile-Regeln oben kollidieren
 * und sie durch hoehere Selektor-Spezifitaet (body + 2 Klassen) im
 * kombinierten Fall ueberschreiben - genau das riss zuvor z.B. die Leiste
 * durch ein widerspruechliches "top: 0" auf volle Bildschirmhoehe auf.
 * Dieser Guard hier sorgt dafuer, dass der Fallback ausschliesslich beim
 * echten Anwendungsfall greift: einem breiten Fenster mit umgebrochenem
 * Inhalt, nicht bei echten schmalen Geraeten.
 */
@media (min-width: 861px) {
body.tva-nav-force-mobile #tva-nav-placeholder {
  min-height: 92px;
}

body.tva-nav-force-mobile #tva-nav-placeholder.tva-nav-placeholder--loaded,
body.tva-nav-force-mobile #tva-nav-placeholder.tva-nav-placeholder--failed {
  min-height: 0;
}

body.tva-nav-force-mobile .site-header {
  /*
   * Kein "top: 0" mehr: Das war frueher rein redundant (die Basisregel
   * .site-header liefert bereits "position: sticky; top: 0"), kollidiert
   * aber jetzt mit der echten Mobile-Media-Query (max-width: 860px) weiter
   * oben, die .site-header stattdessen "bottom: 0; top: auto" gibt. Auf
   * einem echten schmalen Geraet koennen "force-mobile" (Inhalt umgebrochen)
   * und die Media-Query gleichzeitig aktiv sein - stand hier noch "top: 0",
   * gewann das wegen gleicher Spezifitaet und spaeterer Position im File und
   * riss die Leiste (durch "top: 0" UND "bottom: 0" gleichzeitig) auf volle
   * Bildschirmhoehe auseinander.
   */
  padding: 8px 12px;
}

body.tva-nav-force-mobile .header-top {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

body.tva-nav-force-mobile .header-start {
  display: contents;
}

body.tva-nav-force-mobile .brand {
  display: flex !important;
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px;
  margin: 0 !important;
  gap: 0;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

body.tva-nav-force-mobile .header-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

body.tva-nav-force-mobile .header-actions .quick-link-start {
  order: -2;
}

body.tva-nav-force-mobile .header-actions .mobile-search-toggle {
  order: -1;
}

body.tva-nav-force-mobile .header-actions a.tab-item,
body.tva-nav-force-mobile .header-actions button.tab-item {
  width: auto;
  min-height: 0;
  padding: 6px 2px 5px;
}

body.tva-nav-force-mobile .login-cta-link {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

body.tva-nav-force-mobile .header-actions .tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  gap: 3px;
  padding: 6px 2px 5px;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: none;
  box-sizing: border-box;
  white-space: normal;
  font-weight: normal;
}

body.tva-nav-force-mobile .tab-item-icon {
  width: clamp(16px, 5.5vw, 22px);
  height: clamp(16px, 5.5vw, 22px);
  flex-shrink: 0;
}

body.tva-nav-force-mobile .tab-item-label {
  font-size: clamp(8px, 2.4vw, 10px);
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
}

body.tva-nav-force-mobile .header-actions a.tab-item.is-active,
body.tva-nav-force-mobile .header-actions button.tab-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-solid);
}

body.tva-nav-force-mobile.tva-mobile-search-open .mobile-search-toggle {
  background: var(--accent-solid);
  color: var(--accent-contrast);
}

body.tva-nav-force-mobile .login-cta-link {
  flex-shrink: 0;
  margin: 0;
}

body.tva-nav-force-mobile .header-actions .membership-cta-link {
  display: none;
}

body.tva-nav-force-mobile .header-search-form {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--menu-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  z-index: 5;
  box-sizing: border-box;
}

body.tva-nav-force-mobile.tva-mobile-search-open .header-search-form {
  display: flex;
}

body.tva-nav-force-mobile .header-search-form .cir-search {
  flex: 1;
  min-width: 0;
  width: auto;
  max-width: 100%;
}

body.tva-nav-force-mobile .mobile-search-cancel {
  display: none;
  flex-shrink: 0;
  border: 0;
  background: none;
  color: var(--accent-solid);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 0 2px;
}

body.tva-nav-force-mobile.tva-mobile-search-open .mobile-search-cancel {
  display: inline-flex;
}

body.tva-nav-force-mobile .brand-text {
  max-height: 0;
  opacity: 0;
  width: 0;
  max-width: 0;
  overflow: hidden;
}

body.tva-nav-force-mobile .brand img {
  width: 38px;
  height: 38px;
  padding: 2px;
}

body.tva-nav-force-mobile .site-nav {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--header-bg-solid);
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  overscroll-behavior: contain;
  margin-top: 0;
  padding-top: 0;
  pointer-events: none;
  visibility: hidden;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease,
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              padding-top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.45s;
}

body.tva-nav-force-mobile .site-nav.open {
  overflow-y: auto;
  max-height: 100vh;
  max-height: 100dvh;
  max-height: min(100dvh, var(--mobile-nav-available-height, 100dvh));
  opacity: 1;
  transform: translateY(0);
  margin-top: 8px;
  padding-top: 8px;
  pointer-events: auto;
  visibility: visible;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.35s ease 0.05s,
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              padding-top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0s;
}

body.tva-nav-force-mobile .site-nav-slider {
  display: none;
}

body.tva-nav-force-mobile .site-nav-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

body.tva-nav-force-mobile .header-actions-theme-toggle {
  display: none;
}

body.tva-nav-force-mobile .header-actions .login-cta-link {
  display: none !important;
}

body.tva-nav-force-mobile .header-actions .tab-item .tva-nav-counter {
  top: 0;
  right: -3px;
}

body.tva-nav-force-mobile .site-nav a .tva-nav-counter {
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

body.tva-nav-force-mobile .site-nav a {
  width: 100%;
  background: var(--accent-soft);
}

body.tva-nav-force-mobile .has-dropdown {
  display: block;
  width: 100%;
}

body.tva-nav-force-mobile .has-dropdown::after {
  display: none;
}

body.tva-nav-force-mobile .nav-item {
  width: 100%;
}

body.tva-nav-force-mobile .nav-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  align-items: center;
}

body.tva-nav-force-mobile .nav-link {
  display: inline-flex;
  width: 100%;
  align-items: center;
  min-height: 42px;
}

body.tva-nav-force-mobile .dropdown-toggle,
body.tva-nav-force-mobile .submenu-toggle {
  display: inline-flex;
  margin-left: 0;
}

body.tva-nav-force-mobile .nav-chevron {
  display: none;
}

body.tva-nav-force-mobile .has-dropdown.open > .nav-item-row .dropdown-toggle {
  background: var(--accent-solid);
  color: var(--accent-contrast);
}

/* Siehe Kommentar bei der gleichen Regel in der @media(max-width:860px)
   weiter oben - sonst kollabiert das Panel auf die Hoehe seines
   Listeneintrags. */
body.tva-nav-force-mobile .nav-item,
body.tva-nav-force-mobile .dropdown-item {
  position: static;
}

body.tva-nav-force-mobile .dropdown-menu,
body.tva-nav-force-mobile .submenu-panel {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: var(--header-bg-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  z-index: 30;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.32s;
}

body.tva-nav-force-mobile .submenu-panel {
  z-index: 40;
}

body.tva-nav-force-mobile .site-nav.tva-panel-open {
  overflow: hidden;
}

body.tva-nav-force-mobile .site-nav.tva-panel-open > .site-nav-toolbar,
body.tva-nav-force-mobile .site-nav.tva-panel-open > a,
body.tva-nav-force-mobile .site-nav.tva-panel-open > .nav-item:not(.has-dropdown.open),
body.tva-nav-force-mobile .nav-item.has-dropdown.open > .nav-item-row {
  display: none;
}

body.tva-nav-force-mobile .dropdown-menu.tva-panel-open > .mobile-panel-body {
  overflow: hidden;
}

body.tva-nav-force-mobile .nav-item.has-dropdown.open > .dropdown-menu,
body.tva-nav-force-mobile .dropdown-item.has-submenu.open > .submenu-panel {
  display: flex;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0s;
}

body.tva-nav-force-mobile .mobile-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 5px 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

body.tva-nav-force-mobile .mobile-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--accent-solid);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

body.tva-nav-force-mobile .mobile-panel-title:active {
  opacity: 0.8;
}

body.tva-nav-force-mobile .mobile-panel-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent-contrast);
}

body.tva-nav-force-mobile .mobile-panel-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 4px 14px 4px 4px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--menu-control-bg);
  color: var(--navy);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}

body.tva-nav-force-mobile .mobile-panel-back-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-solid);
  color: var(--accent-contrast);
  transition: transform 0.2s ease;
}

body.tva-nav-force-mobile .mobile-panel-back:active .mobile-panel-back-icon-wrap {
  transform: scale(0.88);
}

body.tva-nav-force-mobile .mobile-panel-back-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

body.tva-nav-force-mobile .mobile-panel-back-label {
  white-space: nowrap;
}

body.tva-nav-force-mobile .mobile-panel-body {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 4px max(16px, env(safe-area-inset-bottom, 16px)) 16px;
}

body.tva-nav-force-mobile .mega-menu-scroll,
body.tva-nav-force-mobile .dropdown-menu-scroll {
  max-height: none;
  overflow: visible;
}

body.tva-nav-force-mobile .dropdown-menu a,
body.tva-nav-force-mobile .submenu-panel a,
body.tva-nav-force-mobile .all-sports-list a {
  margin-top: 6px;
  background: var(--accent-soft);
}

body.tva-nav-force-mobile .dropdown-item-row {
  margin-top: 6px;
}

body.tva-nav-force-mobile .dropdown-item-row > a {
  margin-top: 0;
}

body.tva-nav-force-mobile .dropdown-item > a,
body.tva-nav-force-mobile .menu-direct-link {
  display: inline-flex;
  width: 100%;
}
} /* Ende @media (min-width: 861px) - siehe Kommentar vor #tva-nav-placeholder oben */

.schedule-stack-list,
.schedule-minimal-list {
  display: grid;
  gap: 12px;
}

.schedule-minimal-list article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.schedule-minimal-list article:last-child {
  border-bottom: 0;
}

.schedule-minimal-list strong {
  color: var(--ink);
}

.schedule-spotlight {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.weekplan-variant--spotlight article {
  background: var(--card-highlight-bg);
}

@media (max-width: 860px) {
  .department-hero-media {
    min-height: 460px;
  }

  .department-hero-copy {
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    padding: 22px;
  }

  .schedule-minimal-list article,
  .schedule-timeline article {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .schedule-band-list {
    grid-template-columns: 1fr;
  }

  .schedule-band-list article {
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .home-hero .hero-copy-layout {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-hero .hero-copy-logo {
    width: 100%;
    flex: 0 0 auto;
    margin-left: 0;
    align-self: center;
    justify-content: center;
  }

  .home-hero .hero-copy-logo .tva-willkommen-logo {
    /* Mobile: 300px (150% von 200px), Text und Logo bleiben sauber untereinander. */
    width: 300px;
    height: 300px;
  }
}

/* Lightbox Styles */
.lightbox-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: zoom-in;
  display: block;
  width: 100%;
}

.lightbox-btn img {
  transition: opacity 0.2s;
}

.lightbox-btn:hover img {
  opacity: 0.85;
}

.lightbox-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  z-index: 9999;
}

.lightbox-dialog[open] {
  display: block;
}

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

.lightbox-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fadeIn 0.2s ease-out;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  cursor: zoom-out;
}

.lightbox-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #333;
  font-size: 1.5rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 10000;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 1);
}

.tva-membership-builder {
  display: grid;
  gap: 22px;
}

.tva-membership-builder-form {
  display: grid;
  gap: 22px;
}

.tva-membership-builder-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .tva-membership-builder-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tva-membership-builder-section {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--card-bg);
}

.tva-membership-builder-section legend {
  padding: 0 8px;
  font-family: "Newsreader", serif;
  font-size: 1.35rem;
  font-weight: 700;
}



.tva-membership-builder-family-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}


.tva-membership-builder-toggle-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 14px;
}

/* Immer untereinander für Gesundheits-Abschnitt */

/* Immer untereinander für Familienangehörige (Abschnitt 3) */
.tva-membership-builder-section:nth-of-type(3) .tva-membership-builder-toggle-grid {
  grid-template-columns: 1fr !important;
}

@media (max-width: 600px) {
  .tva-membership-builder-toggle-grid {
    grid-template-columns: 1fr;
  }
}

.tva-membership-builder-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  font-weight: 700;
}

.tva-membership-builder-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.tva-membership-builder-subcard {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.22);
}

.tva-membership-builder-subcard h2,
.tva-membership-builder-sport-block h2,
.tva-signature-pad__title {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.tva-membership-builder-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.tva-membership-builder-field span {
  font-weight: 600;
  color: var(--ink);
  min-width: 160px;
  max-width: 220px;
  width: 180px;
  flex-shrink: 0;
  display: inline-block;
  padding-left: 2px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.tva-membership-builder-field input,
.tva-membership-builder-field select,
.tva-membership-builder-field textarea {
  flex: 1 1 180px;
  min-width: 120px;
  max-width: 320px;
  min-height: 36px;
  max-height: 42px;
  height: 42px;
  padding: 6px 12px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.95);
  color: #203040;
  font: inherit;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: break-word;
}



[data-theme="dark"] .tva-membership-builder-field input,
[data-theme="dark"] .tva-membership-builder-field select,
[data-theme="dark"] .tva-membership-builder-field textarea {
  background: rgba(15, 27, 37, 0.94);
  color: var(--ink);
}

.tva-membership-builder-field input:focus-visible,
.tva-membership-builder-field select:focus-visible,
.tva-membership-builder-field textarea:focus-visible,
.tva-signature-pad__canvas:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}

.tva-membership-builder-hint {
  margin-top: 0;
  color: var(--muted);
}

.tva-membership-fee-overview {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.18);
}

.tva-membership-fee-overview h2 {
  margin: 0;
  font-size: 1.05rem;
}

.tva-membership-fee-list {
  display: grid;
  gap: 10px;
}

.tva-membership-fee-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.tva-membership-fee-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.tva-membership-fee-row strong {
  white-space: nowrap;
}

.tva-membership-builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tva-membership-builder-radio-group,
.tva-membership-sport-options {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.tva-membership-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.24);
  cursor: pointer;
}

.tva-membership-checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.tva-membership-checkbox.is-disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.tva-membership-builder-sport-block + .tva-membership-builder-sport-block {
  margin-top: 22px;
}

.tva-membership-sport-list {
  display: grid;
  gap: 12px;
}

.tva-membership-sport-row {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.18);
}

.tva-membership-sport-name {
  font-weight: 700;
}

.tva-membership-sport-row--extra {
  padding: 0;
  overflow: hidden;
}

.tva-membership-sport-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.tva-membership-sport-summary::-webkit-details-marker {
  display: none;
}

.tva-membership-sport-summary-copy {
  display: grid;
  gap: 4px;
}

.tva-membership-sport-fee-summary,
.tva-membership-sport-summary-toggle {
  color: var(--muted);
}

.tva-membership-sport-summary-toggle {
  font-weight: 700;
  text-align: right;
}

.tva-membership-sport-row--extra[open] .tva-membership-sport-summary-toggle {
  color: var(--accent-solid);
}

.tva-membership-sport-panel {
  display: grid;
  gap: 14px;
  padding: 0 14px 14px;
  border-top: 1px solid var(--line);
}

.tva-membership-extra-fee-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tva-membership-extra-fee-field[hidden] {
  display: none;
}

.tva-signature-pad {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.tva-signature-pad__canvas {
  width: 100%;
  min-height: 220px;
  border: 2px dashed var(--accent-soft-strong);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.96);
  touch-action: none;
}

.tva-membership-builder-status {
  min-height: 24px;
  padding: 10px 12px;
  border-radius: 5px;
  font-weight: 600;
}

.tva-membership-builder-status.is-success {
  background: rgba(53, 140, 86, 0.16);
  color: #1e6a3a;
}

.tva-membership-builder-status.is-error {
  background: rgba(207, 77, 92, 0.16);
  color: #9b2331;
}

@media (min-width: 768px) {
  .tva-membership-sport-row {
    grid-template-columns: minmax(0, 250px) 1fr;
    align-items: start;
  }
}

@media (max-width: 767px) {
  .tva-membership-builder-field {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .tva-membership-builder-field span {
    min-width: unset;
    max-width: 100%;
    width: 100%;
    flex-shrink: 1;
    padding-left: 0;
    font-size: 0.95rem;
  }

  .tva-membership-builder-field input,
  .tva-membership-builder-field select,
  .tva-membership-builder-field textarea {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    min-height: 36px;
    max-height: 42px;
    height: 42px;
  }

  .tva-membership-builder-section {
    padding: 14px;
    margin: 0 -8px;
  }

  .tva-membership-builder-subcard {
    padding: 12px;
  }

  .tva-membership-builder-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tva-membership-builder-actions .button {
    width: 100%;
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.95rem;
  }

  .tva-membership-checkbox {
    width: 100%;
  }

  .tva-membership-fee-row,
  .tva-membership-sport-summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .tva-membership-fee-row strong,
  .tva-membership-sport-summary-toggle {
    white-space: normal;
    text-align: left;
  }
}

/* =========================================================================
   PHASE 2 — Glassmorphismus / modernes Mac-Feeling (additive Schicht)
   -------------------------------------------------------------------------
   Frostet die bereits transluzenten Flächen ein (backdrop-filter), verfeinert
   Ränder/Schatten und rundet Kanten über die Design-Tokens. Rein visuell und
   additiv – keine Layout- oder Strukturänderung. Bezieht sich nur auf zuver-
   lässig transluzente Chrome-Flächen und generische Karten; die datengetriebenen
   tva-*-Karten werden in ihren eigenen Komponenten-CSS-Dateien veredelt.
   ========================================================================= */

[data-theme="dark"] {
  --glass-highlight: rgba(255, 255, 255, 0.10);
  --glass-hairline: rgba(255, 255, 255, 0.12);
  --glass-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.32), 0 1px 4px rgba(0, 0, 0, 0.22);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.28);
  --glass-shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.52), 0 6px 16px rgba(0, 0, 0, 0.34);
  --glass-shadow-xl: 0 40px 90px rgba(0, 0, 0, 0.60), 0 12px 26px rgba(0, 0, 0, 0.40);
  --glass-ring: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --glass-fill: rgba(20, 35, 46, 0.4);
  --glass-fill-strong: rgba(20, 35, 46, 0.62);
  /* Footer bleibt dunkel, rückt aber näher an den bereits sehr dunklen Seitenhintergrund
     heran, statt als unabhängige Insel zu wirken. Werte sind vorhandene Dark-Theme-Tokens. */
  --footer-bg: #0d1821;
  --footer-hairline: rgba(255, 255, 255, 0.08);
  --footer-label: rgba(255, 255, 255, 0.32);
  --footer-bullet: #6eaed5;
  --footer-mail: #8ec6e8;
}

.home-hero .hero-copy {
  border: 1px solid var(--glass-hairline);
  box-shadow: var(--glass-shadow-lg), inset 0 1px 0 var(--glass-highlight);
}

/* Generische Karten: weichere Kanten, konsistente Tiefe, sanfte Schwebe */
.news-card,
.offer-card,
.sidebar-card,
.topics-box,
.teaser-card,
.category-card,
.timeline-item,
.service-feature,
.service-item,
.content-card {
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.news-card:hover,
.offer-card:hover,
.teaser-card:hover,
.category-card:hover,
.content-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-lg), inset 0 1px 0 var(--glass-highlight);
}

/* Buttons: Mac-typische weiche Kanten, Tiefe und dezenter Sheen */
.button {
  border-radius: var(--radius-md);
}

.button-primary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  box-shadow: 0 6px 16px rgba(53, 83, 108, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 160ms ease, box-shadow 200ms ease, filter 200ms ease;
}

.button-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 10px 24px rgba(53, 83, 108, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.button-primary:active {
  transform: translateY(0);
  filter: none;
}

/* Ghost-Button: reine Haarlinien-Kontur, für ruhige/zurückhaltende Aktionen (Phase 3). */
.button-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--accent-solid);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.button-ghost:hover,
.button-ghost:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent-solid);
  transform: translateY(-1px);
}

.button-ghost:active {
  transform: translateY(0);
  background: var(--accent-soft-strong);
}

/* Badge: kompaktes Uppercase-Label für Kategorien, News-Tags und Status (Phase 3).
   Varianten: neutral (Default) / blue / solid (Navy-Füllung) / red / success / glass. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--chip-bg);
  color: var(--navy-soft);
  white-space: nowrap;
}

.badge--sm {
  padding: 2px 8px;
  font-size: 10px;
}

.badge--blue {
  background: var(--accent-soft-strong);
  color: var(--accent-solid);
}

.badge--solid {
  background: var(--accent-solid);
  color: var(--accent-contrast);
}

.badge--red {
  background: color-mix(in srgb, var(--membership-cta-bg) 16%, transparent);
  color: var(--membership-cta-bg);
}

.badge--success {
  background: color-mix(in srgb, var(--status-success) 16%, transparent);
  color: var(--status-success);
}

.badge--glass {
  background: var(--glass-fill);
  border: 1px solid var(--glass-hairline);
  color: var(--ink);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}


/* Der eigentliche Frosted-Glass-Effekt – nur wo backdrop-filter unterstützt wird.
   Ohne Unterstützung bleiben die (bereits transluzenten) Flächen als Fallback. */
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .home-hero .hero-copy {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  }

  .news-card,
  .offer-card,
  .sidebar-card,
  .topics-box,
  .teaser-card,
  .category-card,
  .content-card,
  .button-secondary,
  .tva-department-news-card,
  .tva-department-jobs-card,
  .tva-trainer-card,
  .tva-weekly-plan,
  .badge--glass {
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.55)) saturate(var(--glass-saturate));
    backdrop-filter: blur(calc(var(--glass-blur) * 0.55)) saturate(var(--glass-saturate));
  }
}

/* Abteilungs-News im Stil der zentralen Hinweise-Seite: Autor unter dem
   Datum und die News-Tags innerhalb der Tag-Spalte ausrichten. */
.hinweise-item-author {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted);
}

.hinweise-item-tags .news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.hinweise-item-tags .hinweise-item-tags-inner {
  display: contents;
}