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

.tva-vorstand-photo--push-down {
  margin-top: 19px;
}

.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-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;
}
.tva-zebra-table tbody tr:hover,
.tabelle-kurs-beschreibung tbody tr:hover {
  background: var(--tva-table-row-hover, #eaf3fb);
  transition: background 0.15s;
}

@media (prefers-color-scheme: dark), (data-theme: dark) {
  .tva-zebra-table tbody tr:hover,
  .tabelle-kurs-beschreibung tbody tr:hover {
    background: rgba(255,255,255,0.16) !important;
    transition: background 0.15s;
  }
}
/* TVA Tennis-Tabelle: Spalten 2 und 3 (th, td) rechtsbündig */
/* TVA Tennis-Tabelle: Spalten 2 und 3 (th, td) rechtsbündig, mit !important zur Überschreibung */
.table-einfache-preisliste-2preise th:nth-child(2),
.table-einfache-preisliste-2preise th:nth-child(3),
.table-einfache-preisliste-2preise td:nth-child(2),
.table-einfache-preisliste-2preise td:nth-child(3) {
  text-align: right !important;
}
.tabelle-beitraege th:nth-child(2) {
  white-space: nowrap;
}

/* ===== Canonical restore: table-einfache-preisliste ===== */
[data-theme="dark"] .table-einfache-preisliste td {
  border-bottom: 1px solid #3a4652;
}

.table-einfache-preisliste th:last-child,
.table-einfache-preisliste td:last-child {
  white-space: nowrap;
}

[data-theme="dark"] .table-einfache-preisliste th {
  color: #fff;
}

[data-theme="dark"] .table-einfache-preisliste tbody tr:nth-child(odd) {
  background: var(--tva-table-row1, #1b2733);
}

[data-theme="dark"] .table-einfache-preisliste tbody tr:nth-child(even) {
  background: var(--tva-table-row2, #232f3a);
}

[data-theme="dark"] .table-einfache-preisliste tbody tr:hover {
  background: var(--tva-table-row-hover, #263445);
}

[data-theme="dark"] .table-einfache-preisliste {
  color: #fff;
}

.table-einfache-preisliste {
  width: min(100%, 560px);
  border-collapse: collapse;
  margin-top: 8px;
}

.table-einfache-preisliste td {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.table-einfache-preisliste td:first-child {
  padding-right: 18px;
}

.table-einfache-preisliste tr:last-child td {
  border-bottom: 0;
}

.table-einfache-preisliste td:last-child {
  min-width: 140px;
  width: 1%;
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.table-einfache-preisliste {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.04em;
  background: var(--tva-table-bg, #fff);
  color: var(--tva-table-fg, #222);
  margin-bottom: 1.5em;
  border-radius: 0.5em;
  overflow: hidden;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.04);
}

.table-einfache-preisliste th,
.table-einfache-preisliste td {
  padding: 0.65em 1.1em;
  text-align: left;
  border-bottom: 1px solid var(--tva-table-row-divider, #e0e0e0);
}

.table-einfache-preisliste thead th {
  background: var(--tva-table-head-bg, #f5f5f5);
  color: var(--tva-table-head-fg, #222);
  font-weight: 600;
  font-size: 1.07em;
  border-bottom: 2px solid var(--tva-table-row-divider, #e0e0e0);
}

.table-einfache-preisliste tbody tr:nth-child(odd) {
  background: var(--tva-table-row1, #fafbfc);
}

.table-einfache-preisliste tbody tr:nth-child(even) {
  background: var(--tva-table-row2, #f5f5f5);
}

.table-einfache-preisliste tbody tr:hover {
  background: var(--tva-table-row-hover, #eaf3fb);
}

.table-einfache-preisliste td {
  font-size: 1em;
}

@media (max-width: 700px) {
  .table-einfache-preisliste,
  .table-einfache-preisliste thead,
  .table-einfache-preisliste tbody,
  .table-einfache-preisliste th,
  .table-einfache-preisliste td,
  .table-einfache-preisliste tr {
    display: block;
    width: 100%;
  }

  .table-einfache-preisliste thead {
    display: none;
  }

  .table-einfache-preisliste tr {
    margin-bottom: 1.1em;
    border-radius: 0.4em;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.03);
    background: var(--tva-table-row1, #fafbfc);
  }

  .table-einfache-preisliste td {
    border: none;
    position: relative;
    padding-left: 48%;
    min-height: 2.2em;
    font-size: 1em;
    background: none;
    box-shadow: none;
  }

  .table-einfache-preisliste td:before {
    position: absolute;
    top: 0;
    left: 0.7em;
    width: 45%;
    white-space: nowrap;
    font-weight: 600;
    color: var(--tva-table-head-fg, #222);
    content: attr(data-label);
    font-size: 0.98em;
    opacity: 0.95;
  }
}

/* TVA override: table-einfache-preisliste-2preise column alignment and weight */
.table-einfache-preisliste-2preise thead th:nth-child(2),
.table-einfache-preisliste-2preise thead th:nth-child(3) {
  text-align: center !important;
}

.table-einfache-preisliste-2preise tbody td:nth-child(2),
.table-einfache-preisliste-2preise tbody td:nth-child(3) {
  text-align: right !important;
  font-weight: 400 !important;
}

/* ===== Canonical copy: table-einfache-preisliste-2preise ===== */
[data-theme="dark"] .table-einfache-preisliste-2preise td {
  border-bottom: 1px solid #3a4652;
}

.table-einfache-preisliste-2preise th:last-child,
.table-einfache-preisliste-2preise td:last-child {
  white-space: nowrap;
}

[data-theme="dark"] .table-einfache-preisliste-2preise th {
  color: #fff;
}

[data-theme="dark"] .table-einfache-preisliste-2preise tbody tr:nth-child(odd) {
  background: var(--tva-table-row1, #1b2733);
}

[data-theme="dark"] .table-einfache-preisliste-2preise tbody tr:nth-child(even) {
  background: var(--tva-table-row2, #232f3a);
}

[data-theme="dark"] .table-einfache-preisliste-2preise tbody tr:hover {
  background: var(--tva-table-row-hover, #263445);
}

[data-theme="dark"] .table-einfache-preisliste-2preise {
  color: #fff;
}

.table-einfache-preisliste-2preise {
  width: min(100%, 560px);
  border-collapse: collapse;
  margin-top: 8px;
}

.table-einfache-preisliste-2preise td {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.table-einfache-preisliste-2preise td:first-child {
  padding-right: 18px;
}

.table-einfache-preisliste-2preise tr:last-child td {
  border-bottom: 0;
}

.table-einfache-preisliste-2preise td:last-child {
  min-width: 140px;
  width: 1%;
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.table-einfache-preisliste-2preise {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.04em;
  background: var(--tva-table-bg, #fff);
  color: var(--tva-table-fg, #222);
  margin-bottom: 1.5em;
  border-radius: 0.5em;
  overflow: hidden;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.04);
}

.table-einfache-preisliste-2preise th,
.table-einfache-preisliste-2preise td {
  padding: 0.65em 1.1em;
  text-align: left;
  border-bottom: 1px solid var(--tva-table-row-divider, #e0e0e0);
}

.table-einfache-preisliste-2preise thead th {
  background: var(--tva-table-head-bg, #f5f5f5);
  color: var(--tva-table-head-fg, #222);
  font-weight: 600;
  font-size: 1.07em;
  border-bottom: 2px solid var(--tva-table-row-divider, #e0e0e0);
}

.tabelle-beitraege th:nth-child(2),
.tabelle-beitraege td:nth-child(2) {
  min-width: 140px;
  width: 1%;
}

/* TVA: Abteilungsbeitrag-Tabellen – Kartenrahmen mit Kopfzeile und
   hervorgehobenem Monatsbeitrag ("Variante A") */
.tabelle-beitraege {
  width: min(100%, 560px);
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 8px;
  border-radius: var(--radius-md, 14px);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow), inset 0 3px 0 0 var(--accent-solid);
  font-variant-numeric: tabular-nums;
}

.tabelle-beitraege th {
  text-align: left;
  background: var(--chip-bg);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.tabelle-beitraege th:nth-child(2),
.tabelle-beitraege th:nth-child(3) {
  text-align: right;
}

.tabelle-beitraege td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.tabelle-beitraege td:first-child {
  padding-right: 18px;
}
.tabelle-beitraege tr:last-child td {
  border-bottom: 0;
}
.tabelle-beitraege td:nth-child(2) {
  text-align: right;
  color: var(--accent-solid);
  font-weight: 700;
}
.tabelle-beitraege td:last-child {
  min-width: 140px;
  width: 1%;
  text-align: right;
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}

/* Dezente Hover-Hervorhebung für .tabelle-beitraege */
.tabelle-beitraege tbody tr:hover {
  background: var(--accent-soft);
  transition: background 0.15s;
}
  /* TVA: Bankverbindung Tabelle (basiert auf fees-table, max-content) */
  .table-bankverbindung {
    width: max-content;
    border-collapse: collapse;
    font-size: 1.04em;
    background: transparent;
    color: var(--tva-table-fg, #222);
    margin-bottom: 1.5em;
    border-radius: 0.5em;
    overflow: hidden;
    box-shadow: none;
  }

  .table-bankverbindung th,
  .table-bankverbindung td {
    padding: 0.32em 1.1em;
    text-align: left;
    border-bottom: 1px solid transparent;
    font-weight: normal;
    background: transparent;
  }

  .table-bankverbindung thead th {
    background: transparent;
    color: var(--tva-table-head-fg, #222);
    font-weight: normal;
    font-size: 1.07em;
    border-bottom: 2px solid transparent;
  }

  .table-bankverbindung tbody tr {
    background: transparent !important;
  }

  .table-bankverbindung tbody tr:hover {
    background: transparent !important;
  }

  .table-bankverbindung td {
    font-size: 1em;
  }

  @media (max-width: 700px) {
    .table-bankverbindung,
    .table-bankverbindung thead,
    .table-bankverbindung tbody,
    .table-bankverbindung th,
    .table-bankverbindung td,
    .table-bankverbindung tr {
      display: block;
      width: 100%;
    }

    .table-bankverbindung thead {
      display: none;
    }

    .table-bankverbindung tr {
      margin-bottom: 1.1em;
      border-radius: 0.4em;
      box-shadow: 0 1px 2px 0 rgba(0,0,0,0.03);
      background: var(--tva-table-row1, #fafbfc);
    }

    .table-bankverbindung td {
      border: none;
      position: relative;
      padding-left: 48%;
      min-height: 2.2em;
      font-size: 1em;
      background: none;
      box-shadow: none;
    }

    .table-bankverbindung td:before {
      position: absolute;
      top: 0;
      left: 0.7em;
      width: 45%;
      white-space: nowrap;
      font-weight: 600;
      color: var(--tva-table-head-fg, #222);
      content: attr(data-label);
      font-size: 0.98em;
      opacity: 0.95;
    }
  }

  [data-theme="dark"] .table-bankverbindung th {
    color: #fff;
  }

  [data-theme="dark"] .table-bankverbindung {
    color: #fff;
  }

  [data-theme="dark"] .table-bankverbindung tbody tr:nth-child(odd) {
    background: var(--tva-table-row1, #1b2733);
  }

  [data-theme="dark"] .table-bankverbindung tbody tr:nth-child(even) {
    background: var(--tva-table-row2, #232f3a);
  }

  [data-theme="dark"] .table-bankverbindung tbody tr:hover {
    background: var(--tva-table-row-hover, #263445);
  }

  .fees-table th:last-child,
  .fees-table td:last-child {
    white-space: nowrap;
    min-width: 140px;
  }

  .fees-table th {
    font-size: 1.11em;
  }

  .fees-table th:first-child {
    text-align: left;
  }

  [data-theme="dark"] .table-einfache-preisliste td,
  [data-theme="dark"] .table-einfache-preisliste-2preise td {
    border-bottom: 1px solid #3a4652;
  }

  .table-einfache-preisliste th:last-child,
  .table-einfache-preisliste td:last-child,
  .table-einfache-preisliste-2preise th:last-child,
  .table-einfache-preisliste-2preise td:last-child {
    white-space: nowrap;
  }

  [data-theme="dark"] .table-einfache-preisliste th,
  [data-theme="dark"] .table-einfache-preisliste-2preise th {
    color: #fff;
  }

  [data-theme="dark"] .table-einfache-preisliste tbody tr:nth-child(odd),
  [data-theme="dark"] .table-einfache-preisliste-2preise tbody tr:nth-child(odd) {
    background: var(--tva-table-row1, #1b2733);
  }

  [data-theme="dark"] .table-einfache-preisliste tbody tr:nth-child(even),
  [data-theme="dark"] .table-einfache-preisliste-2preise tbody tr:nth-child(even) {
    background: var(--tva-table-row2, #232f3a);
  }

  [data-theme="dark"] .table-einfache-preisliste tbody tr:hover,
  [data-theme="dark"] .table-einfache-preisliste-2preise tbody tr:hover {
    background: var(--tva-table-row-hover, #263445);
  }

  /* TVA: Einfache Preisliste Tabellen Dark Mode */
  [data-theme="dark"] .table-einfache-preisliste,
  [data-theme="dark"] .table-einfache-preisliste-2preise {
    color: #fff;
  }

  /* TVA: Einfache Preislisten */
  .table-einfache-preisliste,
  .table-einfache-preisliste-2preise {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.04em;
    background: var(--tva-table-bg, #fff);
    color: var(--tva-table-fg, #222);
    margin-top: 8px;
    margin-bottom: 1.5em;
    border-radius: 0.5em;
    overflow: hidden;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.04);
  }

  .table-einfache-preisliste th,
  .table-einfache-preisliste td,
  .table-einfache-preisliste-2preise th,
  .table-einfache-preisliste-2preise td {
    padding: 0.65em 1.1em;
    text-align: left;
    border-bottom: 1px solid var(--tva-table-row-divider, #e0e0e0);
  }

  .table-einfache-preisliste thead th,
  .table-einfache-preisliste-2preise thead th {
    background: var(--tva-table-head-bg, #f5f5f5);
    color: var(--tva-table-head-fg, #222);
    font-weight: 600;
    font-size: 1.07em;
    border-bottom: 2px solid var(--tva-table-row-divider, #e0e0e0);
  }

  .table-einfache-preisliste tbody tr:nth-child(odd),
  .table-einfache-preisliste-2preise tbody tr:nth-child(odd) {
    background: var(--tva-table-row1, #fafbfc);
  }

  .table-einfache-preisliste tbody tr:nth-child(even),
  .table-einfache-preisliste-2preise tbody tr:nth-child(even) {
    background: var(--tva-table-row2, #f5f5f5);
  }

  .table-einfache-preisliste tbody tr:hover,
  .table-einfache-preisliste-2preise tbody tr:hover {
    background: var(--tva-table-row-hover, #eaf3fb);
  }

  .table-einfache-preisliste td,
  .table-einfache-preisliste-2preise td {
    font-size: 1em;
  }

  @media (max-width: 700px) {
    .table-einfache-preisliste,
    .table-einfache-preisliste thead,
    .table-einfache-preisliste tbody,
    .table-einfache-preisliste th,
    .table-einfache-preisliste td,
    .table-einfache-preisliste tr,
    .table-einfache-preisliste-2preise,
    .table-einfache-preisliste-2preise thead,
    .table-einfache-preisliste-2preise tbody,
    .table-einfache-preisliste-2preise th,
    .table-einfache-preisliste-2preise td,
    .table-einfache-preisliste-2preise tr {
      display: block;
      width: 100%;
    }

    .table-einfache-preisliste thead,
    .table-einfache-preisliste-2preise thead {
      display: none;
    }

    .table-einfache-preisliste tr,
    .table-einfache-preisliste-2preise tr {
      margin-bottom: 1.1em;
      border-radius: 0.4em;
      box-shadow: 0 1px 2px 0 rgba(0,0,0,0.03);
      background: var(--tva-table-row1, #fafbfc);
    }

    .table-einfache-preisliste td,
    .table-einfache-preisliste-2preise td {
      border: none;
      position: relative;
      padding-left: 48%;
      min-height: 2.2em;
      font-size: 1em;
      background: none;
      box-shadow: none;
    }

    .table-einfache-preisliste td:before,
    .table-einfache-preisliste-2preise td:before {
      position: absolute;
      top: 0;
      left: 0.7em;
      width: 45%;
      white-space: nowrap;
      font-weight: 600;
      color: var(--tva-table-head-fg, #222);
      content: attr(data-label);
      font-size: 0.98em;
      opacity: 0.95;
    }
  }
@media (max-width: 600px) {
  .tva-membership-builder-toggle-grid {
    grid-template-columns: 1fr;
  }
}
/* Service-Dropdown breiter (nur Desktop) */
@media (min-width: 769px) {
  #submenu-service.dropdown-menu.dropdown-menu-scroll {
    width: 440px;
    min-width: 340px;
    max-width: 600px;
  }
}
/* Verein-Dropdown: Kein Scrollbalken auf Desktop. Das eingeklappte
   Sportstätten-Flyout ist zwar unsichtbar (opacity/visibility), zählt
   aber wegen position:absolute trotzdem zum Scroll-Overflow des
   umgebenden .mega-menu-scroll – ohne diese Regel würde deshalb immer
   ein unnötiger Scrollbalken erscheinen, obwohl der sichtbare Inhalt passt. */
@media (min-width: 861px) {
  #submenu-verein .mega-menu-scroll {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}
@media (max-width: 860px) {
  .site-header {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .header-top {
    grid-template-rows: auto !important;
    padding-top: 0;
    padding-bottom: 0;
    min-height: unset;
  }
}
:root {
  color-scheme: light;
  --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);
  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;
}

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

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

img {
  display: block;
  max-width: 100%;
}

.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;
}


/* Verbesserter Stil für .tva-zebra-table und .tabelle-kurs-beschreibung */
.tva-zebra-table,
.tabelle-kurs-beschreibung {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.6em;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(53,83,108,0.07);
  margin: 18px 0 24px 0;
  font-size: 1.06em;
  background: transparent;
  transition: box-shadow 0.18s;
}
.tva-zebra-table th, .tva-zebra-table td,
.tabelle-kurs-beschreibung th, .tabelle-kurs-beschreibung td {
  padding: 0.85em 1.2em;
  text-align: left;
  border-bottom: 1.5px solid var(--tva-table-row-border);
}
.tva-zebra-table th,
.tabelle-kurs-beschreibung th {
  background: var(--tva-table-head-bg);
  color: var(--tva-table-head-text);
  font-weight: 700;
  font-size: 1.09em;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  border-bottom: 2.5px solid var(--tva-table-row-border);
}
.tva-zebra-table tbody tr:nth-child(even),
.tabelle-kurs-beschreibung tbody tr:nth-child(even) {
  background: var(--tva-table-row2);
}
.tva-zebra-table tbody tr:nth-child(odd),
.tabelle-kurs-beschreibung tbody tr:nth-child(odd) {
  background: var(--tva-table-row1);
}
.tva-zebra-table tbody tr:hover,
.tabelle-kurs-beschreibung tbody tr:hover {
  background: var(--tva-table-row-hover, #eaf3fb);
  transition: background 0.15s;
}
.tva-zebra-table tr:last-child td,
.tabelle-kurs-beschreibung tr:last-child td {
  border-bottom: none;
}
.tva-zebra-table td,
.tabelle-kurs-beschreibung td {
  font-size: 1em;
}
@media (max-width: 700px) {
  .tva-zebra-table,
  .tva-zebra-table thead,
  .tva-zebra-table tbody,
  .tva-zebra-table th,
  .tva-zebra-table td,
  .tva-zebra-table tr,
  .tabelle-kurs-beschreibung,
  .tabelle-kurs-beschreibung thead,
  .tabelle-kurs-beschreibung tbody,
  .tabelle-kurs-beschreibung th,
  .tabelle-kurs-beschreibung td,
  .tabelle-kurs-beschreibung tr {
    display: block;
    width: 100%;
  }
  .tva-zebra-table thead,
  .tabelle-kurs-beschreibung thead {
    display: none;
  }
  .tva-zebra-table tr,
  .tabelle-kurs-beschreibung tr {
    margin-bottom: 1.1em;
    border-radius: 0.4em;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.03);
    background: var(--tva-table-row1);
  }
  .tva-zebra-table td,
  .tabelle-kurs-beschreibung td {
    border: none;
    position: relative;
    padding-left: 48%;
    min-height: 2.2em;
    font-size: 1em;
    background: none;
    box-shadow: none;
  }
  .tva-zebra-table td:before,
  .tabelle-kurs-beschreibung td:before {
    position: absolute;
    top: 0;
    left: 0.7em;
    width: 45%;
    white-space: nowrap;
    font-weight: 600;
    color: var(--tva-table-head-text);
    content: attr(data-label);
    font-size: 0.98em;
    opacity: 0.95;
  }
}

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

#tva-footer-placeholder {
  min-height: 200px;
}

.tva-footer {
  background: var(--footer-bg);
  padding: 0.75rem 2rem 2rem;
  font-size: 14px;
  color: var(--footer-fg-soft);
  border-radius: 0;
  transition: background 220ms ease;
}

.tva-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.tva-footer__title {
  margin: 0 0 0.4rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--footer-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tva-footer__club {
  margin: 0 0 0.5rem;
  color: var(--footer-fg);
  font-weight: 500;
  font-size: 16px;
}

.tva-footer__address {
  margin: 0 0 0.75rem;
  color: var(--footer-fg-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.6;
}

.tva-footer__meta {
  margin: 0.2rem 0;
  color: var(--footer-fg-faint);
  font-size: 12px;
}

.tva-footer__links,
.tva-footer__bottom-links {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.tva-footer__links a,
.tva-footer__mail,
.tva-footer__bottom-links a {
  color: var(--footer-fg-muted);
  text-decoration: none;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 160ms ease;
}

.tva-footer__links a:hover,
.tva-footer__bottom-links a:hover {
  color: var(--footer-fg);
}

.tva-footer__mail {
  color: var(--footer-mail);
}

.tva-footer__bullet {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--footer-bullet);
  display: inline-block;
  flex-shrink: 0;
}

.tva-footer__phone {
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 12px;
}

.tva-footer__phone-label {
  margin: 0;
  font-size: 11px;
  color: var(--footer-fg-faint);
}

.tva-footer__phone-number {
  margin: 0.15rem 0;
  font-size: 14px;
  color: var(--footer-fg-soft);
}

.tva-footer__phone-time {
  margin: 0;
  font-size: 12px;
  color: var(--footer-fg-muted);
}

.tva-footer__bottom {
  border-top: 0.5px solid var(--footer-hairline);
  padding-top: 1rem;
  margin-top: 1rem;
}

.tva-footer__bottom-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tva-footer__copyright {
  margin: 0;
  font-size: 12px;
  color: var(--footer-fg-faintest);
}

.tva-footer__version {
  margin: 4px 0 0;
  font-family: monospace;
  font-size: 11px;
  color: var(--footer-fg-mono);
}

@media (min-width: 769px) {
  .tva-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr;
  }

  .tva-footer__bottom-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .tva-footer__bottom-links {
    flex-direction: row;
    gap: 1rem;
  }
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 10px 16px 8px;
  border-radius: 0;
  background: var(--header-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
}

#tva-nav-placeholder {
  display: block;
  width: 100%;
  min-height: 152px;
}

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

.header-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.header-start {
  display: flex;
  align-items: center;
  gap: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  transition: opacity 0.35s ease;
}

.brand img {
  width: 50px;
  height: 50px;
  padding: 3px;
  border-radius: 5px;
  background: transparent;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.tva-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.header-search-form {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.header-search-label {
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.5;
  background: transparent;
  transition: opacity 0.15s;
}

.header-actions.header-actions--compact .header-search-label {
  display: none;
}

.header-actions.header-actions--compact .header-search-form {
  flex-basis: 170px;
  max-width: 170px;
  overflow: hidden;
}

.header-actions.header-actions--compact .header-search-form .cir-search {
  transform: scale(0.56);
  transform-origin: left center;
}

.header-actions.header-actions--hide-search .header-search-form {
  display: none;
}

.cir-search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 260px;
  max-width: 100%;
  height: 44px;
  padding: 0 8px 0 16px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--glass-shadow-sm);
  transition:
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cir-search__icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
}

.cir-search__field {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}

.cir-search__field::placeholder {
  color: var(--muted);
}

.cir-search__kbd {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  background: var(--menu-control-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.cir-search:focus-within {
  border-color: var(--accent-solid);
  box-shadow:
    0 0 0 3px var(--accent-soft-strong),
    var(--glass-shadow-sm);
}

.header-actions a {
  padding: 8px 12px;
  font-size: 0.95rem;
  border-radius: 5px;
  color: var(--navy);
  background: var(--accent-soft);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.header-actions a.active-link {
  background: var(--accent-solid);
  color: var(--accent-contrast);
}

.header-actions a.membership-cta-link,
.header-actions a.membership-cta-link:link,
.header-actions a.membership-cta-link:visited {
  gap: 0;
  height: 45px;
  padding: 0 0 0 0.9em;
  border-radius: 999px;
  background: var(--membership-cta-bg);
  color: var(--membership-cta-text);
  box-shadow: 0 0 0.2em 0 var(--membership-cta-bg);
  transition: box-shadow 0.5s, background 0.5s, outline 0.5s;
}

.header-actions a.login-cta-link,
.header-actions a.login-cta-link:link,
.header-actions a.login-cta-link:visited {
  background: var(--accent-soft-strong);
  color: var(--navy);
}

.header-actions a.membership-cta-link:hover,
.header-actions a.membership-cta-link:focus-visible {
  background: var(--membership-cta-bg-hover);
  color: var(--membership-cta-text);
  outline: 0.1em solid transparent;
  outline-offset: 0.2em;
  box-shadow: 0 0 1em 0 var(--membership-cta-bg);
  animation: membership-cta-ripple 1s linear infinite, membership-cta-colorize 1s infinite;
}

.header-actions a.membership-cta-link:active {
  transform: scale(0.96);
}

.membership-cta-link span {
  margin-right: 0.3em;
  transition: 0.5s;
}

.membership-cta-link:hover span {
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
}

.membership-cta-link:active span {
  text-shadow: none;
}

.membership-cta-link svg {
  height: 0.8em;
  fill: var(--membership-cta-text);
  margin-right: -0.16em;
  position: relative;
  transition: 0.5s;
}

.membership-cta-link:hover svg {
  margin-right: 0.5em;
  transition: 0.5s;
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.25));
}

.membership-cta-link:active svg {
  filter: none;
}

.membership-cta-link svg polygon:nth-child(1) {
  transition: 0.4s;
  transform: translateX(-60%);
}

.membership-cta-link svg polygon:nth-child(2) {
  transition: 0.5s;
  transform: translateX(-30%);
}

.membership-cta-link:hover svg polygon:nth-child(1) {
  transform: translateX(0%);
  animation: membership-cta-opacity 1s infinite 0.6s;
}

.membership-cta-link:hover svg polygon:nth-child(2) {
  transform: translateX(0%);
  animation: membership-cta-opacity 1s infinite 0.4s;
}

.membership-cta-link:hover svg polygon:nth-child(3) {
  animation: membership-cta-opacity 1s infinite 0.2s;
}

@keyframes membership-cta-opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes membership-cta-colorize {
  0% {
    background: var(--membership-cta-bg);
  }
  50% {
    background: var(--membership-cta-bg-hover);
  }
  100% {
    background: var(--membership-cta-bg);
  }
}

@keyframes membership-cta-ripple {
  0% {
    outline: 0em solid transparent;
    outline-offset: -0.1em;
  }
  50% {
    outline: 0.2em solid color-mix(in srgb, var(--membership-cta-bg) 25%, transparent);
    outline-offset: 0.2em;
  }
  100% {
    outline: 0.4em solid transparent;
    outline-offset: 0.4em;
  }
}

/* Wiederverwendbare rote Mitglied-werden-Pille (gleiche Optik wie .membership-cta-link
   in der Kopfzeile), aber ohne deren Header-gebundene Sichtbarkeits-/Grid-Regeln. */
.tva-membership-cta,
.tva-membership-cta:link,
.tva-membership-cta:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 45px;
  padding: 0 0 0 0.9em;
  border-radius: 999px;
  background: var(--membership-cta-bg);
  color: var(--membership-cta-text);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 0 0.2em 0 var(--membership-cta-bg);
  transition: box-shadow 0.5s, background 0.5s, outline 0.5s;
}

.tva-membership-cta:hover,
.tva-membership-cta:focus-visible {
  background: var(--membership-cta-bg-hover);
  color: var(--membership-cta-text);
  outline: 0.1em solid transparent;
  outline-offset: 0.2em;
  box-shadow: 0 0 1em 0 var(--membership-cta-bg);
  animation: membership-cta-ripple 1s linear infinite, membership-cta-colorize 1s infinite;
}

.tva-membership-cta:active {
  transform: scale(0.96);
}

.tva-membership-cta span {
  margin-right: 0.3em;
  transition: 0.5s;
}

.tva-membership-cta:hover span {
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
}

.tva-membership-cta:active span {
  text-shadow: none;
}

.tva-membership-cta svg {
  height: 0.8em;
  fill: var(--membership-cta-text);
  margin-right: -0.16em;
  position: relative;
  transition: 0.5s;
}

.tva-membership-cta:hover svg {
  margin-right: 0.5em;
  transition: 0.5s;
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.25));
}

.tva-membership-cta:active svg {
  filter: none;
}

.tva-membership-cta svg polygon:nth-child(1) {
  transition: 0.4s;
  transform: translateX(-60%);
}

.tva-membership-cta svg polygon:nth-child(2) {
  transition: 0.5s;
  transform: translateX(-30%);
}

.tva-membership-cta:hover svg polygon:nth-child(1) {
  transform: translateX(0%);
  animation: membership-cta-opacity 1s infinite 0.6s;
}

.tva-membership-cta:hover svg polygon:nth-child(2) {
  transform: translateX(0%);
  animation: membership-cta-opacity 1s infinite 0.4s;
}

.tva-membership-cta:hover svg polygon:nth-child(3) {
  animation: membership-cta-opacity 1s infinite 0.2s;
}

.header-actions a.login-cta-link:hover,
.header-actions a.login-cta-link:focus-visible {
  background: var(--accent-soft);
  color: var(--navy);
}

.header-actions a.login-cta-link.is-logout,
.header-actions a.login-cta-link.is-logout:link,
.header-actions a.login-cta-link.is-logout:visited,
.header-actions a.login-cta-link.is-login,
.header-actions a.login-cta-link.is-login:link,
.header-actions a.login-cta-link.is-login:visited {
  width: 45px;
  height: 45px;
  padding: 0;
  border-radius: 50%;
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
  color: white;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  transition: width 0.3s, border-radius 0.3s;
}

.header-actions a.login-cta-link.is-logout,
.header-actions a.login-cta-link.is-logout:link,
.header-actions a.login-cta-link.is-logout:visited {
  background-color: rgb(255, 65, 65);
}

.header-actions a.login-cta-link.is-login,
.header-actions a.login-cta-link.is-login:link,
.header-actions a.login-cta-link.is-login:visited {
  background-color: #8EC6E8;
}

.header-actions a.login-cta-link.is-login {
  display: none !important;
}

.header-actions a.login-cta-link.is-logout .login-cta-icon,
.header-actions a.login-cta-link.is-login .login-cta-icon {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: padding-left 0.3s;
}

.header-actions a.login-cta-link.is-logout .login-cta-icon svg,
.header-actions a.login-cta-link.is-login .login-cta-icon svg {
  width: 17px;
  height: 17px;
}

.header-actions a.login-cta-link.is-logout .login-cta-icon svg path,
.header-actions a.login-cta-link.is-login .login-cta-icon svg path {
  fill: white;
}

.header-actions a.login-cta-link.is-logout .login-cta-text,
.header-actions a.login-cta-link.is-login .login-cta-text {
  position: absolute;
  right: 0;
  width: 0;
  opacity: 0;
  color: white;
  font-size: 1.2em;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.3s, width 0.3s, padding-right 0.3s;
}

.header-actions a.login-cta-link.is-logout:hover,
.header-actions a.login-cta-link.is-logout:focus-visible,
.header-actions a.login-cta-link.is-login:hover,
.header-actions a.login-cta-link.is-login:focus-visible {
  width: 125px;
  border-radius: 40px;
  color: white;
}

.header-actions a.login-cta-link.is-logout:hover .login-cta-icon,
.header-actions a.login-cta-link.is-logout:focus-visible .login-cta-icon,
.header-actions a.login-cta-link.is-login:hover .login-cta-icon,
.header-actions a.login-cta-link.is-login:focus-visible .login-cta-icon {
  width: 30%;
  padding-left: 20px;
}

.header-actions a.login-cta-link.is-logout:hover .login-cta-text,
.header-actions a.login-cta-link.is-logout:focus-visible .login-cta-text,
.header-actions a.login-cta-link.is-login:hover .login-cta-text,
.header-actions a.login-cta-link.is-login:focus-visible .login-cta-text {
  opacity: 1;
  width: 70%;
  padding-right: 10px;
}

.header-actions a.login-cta-link.is-logout:active,
.header-actions a.login-cta-link.is-login:active {
  transform: translate(2px, 2px);
}

/* Mobile-Media-Query entfernt: .header-search-form und .header-search-input verhalten sich jetzt überall wie auf Desktop */

/* Theme-Switch-Slider (From Uiverse.io by lenin55, Groesse an TVA-Header angepasst) */
.theme-switch {
  --toggle-size: 11.2px;
  /* the size is adjusted using font-size,
     this is not transform scale,
     so you can choose any size */
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  /* radius 0 - minecraft mode :) */
  --container-light-bg: #3D7EAE;
  --container-night-bg: #1D1F2C;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ECCA2F;
  --moon-bg: #C4C9D1;
  --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #F3FDFF;
  --back-clouds-color: #AACADF;
  --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  transition: var(--transition);
  position: relative;
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius)
}

.theme-switch__checkbox:focus-visible + .theme-switch__container {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}

.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: flex;
  transition: var(--circle-transition);
  pointer-events: none;
}

.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  transition: var(--transition);
}

.theme-switch__moon {
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  transition: var(--transition);
  position: relative;
}

.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}

.theme-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}

.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: -100%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  transition: var(--transition);
}

/* actions */

.theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-night-bg);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em)
}

.theme-switch__container:hover .theme-switch__circle-container {
  left: calc(var(--circle-container-offset) + 0.187em);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
  transform: translate(0);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
  bottom: -4.062em;
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  top: 50%;
  transform: translateY(-50%);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  background: var(--accent-solid);
  color: var(--accent-contrast);
  padding: 10px 16px;
  font: inherit;
}

.site-nav-toolbar {
  display: none;
}

.site-nav-toolbar a.login-cta-link {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background-color: rgb(255, 65, 65);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.site-nav-toolbar a.login-cta-link:hover,
.site-nav-toolbar a.login-cta-link:focus-visible {
  background-color: rgb(230, 48, 48);
  color: #fff;
}

.site-nav-toolbar a.login-cta-link .login-cta-icon {
  display: flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.site-nav-toolbar a.login-cta-link .login-cta-icon svg {
  width: 100%;
  height: 100%;
}

.site-nav-toolbar a.login-cta-link .login-cta-icon svg path {
  fill: currentColor;
}

.site-nav-toolbar a.login-cta-link.is-login {
  display: none !important;
}

.site-nav-install-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-soft-strong);
  color: var(--navy);
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.site-nav-install-button:hover,
.site-nav-install-button:focus-visible {
  background: var(--accent-solid);
  color: var(--accent-contrast);
}

.site-nav-install-button:active {
  transform: scale(0.97);
}

.site-nav-install-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.tva-install-hint {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  transform: translateX(-50%) translateY(12px);
  max-width: min(360px, calc(100vw - 32px));
  background: var(--menu-bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.4;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tva-install-hint.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.tva-install-hint strong {
  display: block;
  margin-bottom: 4px;
}

.tva-install-hint button {
  margin-top: 10px;
  border: 0;
  background: var(--accent-solid);
  color: var(--accent-contrast);
  font: inherit;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.header-actions-theme-toggle {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-toggle-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  width: clamp(16px, 5.5vw, 22px);
  height: clamp(16px, 5.5vw, 22px);
  flex-shrink: 0;
}

.nav-toggle-burger-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

.header-actions .nav-toggle[aria-expanded="true"] {
  background: var(--accent-soft);
  color: var(--accent-solid);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-burger-bar--top {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-burger-bar--middle {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-burger-bar--bottom {
  transform: translateY(-6px) rotate(-45deg);
}

.header-actions .tab-item {
  display: none;
}

.mobile-search-cancel {
  display: none;
}

.site-nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  overflow: visible;
}

.site-nav-slider {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: var(--radius-pill);
  background: var(--glass-pill-bg);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--glass-pill-ring), 0 6px 18px rgba(29, 47, 62, 0.12);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: left 0.4s cubic-bezier(0.33, 0.83, 0.99, 0.98),
              top 0.4s cubic-bezier(0.33, 0.83, 0.99, 0.98),
              width 0.4s cubic-bezier(0.33, 0.83, 0.99, 0.98),
              height 0.4s cubic-bezier(0.33, 0.83, 0.99, 0.98),
              opacity 0.25s ease,
              background-color 0.3s ease;
}

.site-nav.tva-slider-active .site-nav-slider {
  opacity: 1;
}

.site-nav a,
.nav-link {
  position: relative;
  z-index: 1;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  color: var(--navy);
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.site-nav a.active,
.site-nav a:focus-visible,
.nav-link.active,
.nav-link:focus-visible,
.header-actions a:hover,
.header-actions a:focus-visible {
  background: var(--accent-soft-strong);
}

.nav-item {
  position: relative;
  z-index: 1;
}

.nav-item-row {
  display: flex;
  align-items: center;
  min-width: 0;
}

.nav-item-row > .nav-link {
  min-width: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dropdown-item-row > .menu-direct-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.has-dropdown {
  display: flex;
  align-items: center;
}

.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 14px;
}

.nav-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: var(--navy-soft);
  transition: transform 0.25s ease;
}

.nav-chevron svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.has-dropdown:hover > .nav-item-row .nav-chevron,
.has-dropdown:focus-within > .nav-item-row .nav-chevron,
.has-dropdown.open > .nav-item-row .nav-chevron,
.dropdown-item.has-submenu:hover > .dropdown-item-row .nav-chevron,
.dropdown-item.has-submenu:focus-within > .dropdown-item-row .nav-chevron,
.dropdown-item.has-submenu.open > .dropdown-item-row .nav-chevron {
  transform: rotate(180deg);
}

.dropdown-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  margin-left: 4px;
  padding: 4px 4px 4px 14px;
  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;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 290px;
  padding: 10px;
  border-radius: 5px;
  background: var(--menu-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: none;
  z-index: 30;
}

.dropdown-menu a {
  display: block;
  border-radius: 5px;
}

.mega-menu {
  max-height: none;
  overflow: visible;
  width: min(700px, calc(100vw - 32px));
  border-radius: var(--radius-md);
}

.mega-menu-columns .menu-direct-link {
  border-radius: var(--radius-xs);
}

.mega-menu-columns .menu-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-section-icon {
  width: 15px;
  height: 15px;
  color: var(--accent-solid);
  flex-shrink: 0;
}

.mega-menu-scroll {
  max-height: var(--dropdown-available-height, min(78vh, 640px));
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

@media (min-width: 861px) {
  .mega-menu {
    width: fit-content;
    max-width: calc(100vw - 32px);
  }

  .mega-menu-scroll {
    overflow-x: visible;
  }

  .mega-menu-columns {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    column-gap: 20px;
  }

  .mega-menu-columns .menu-direct-link {
    white-space: nowrap;
  }

  .mega-menu-column:not(:first-child) {
    border-left: 1px solid var(--line);
    padding-left: 18px;
  }

  .mega-menu-column .menu-section-label:not(:first-child) {
    margin-top: 12px;
  }

  .mega-menu-column .menu-section-label.menu-section-label--align-individualsport {
    margin-top: 55px;
  }
}

.dropdown-menu-scroll {
  max-height: var(--dropdown-available-height, min(78vh, 640px));
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.menu-section-label {
  padding: 8px 10px 6px;
  color: var(--navy-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-divider {
  margin: 10px 0;
  border-top: 1px solid var(--line);
}

.menu-direct-link,
.dropdown-item > a,
.all-sports-list a,
.submenu-panel a {
  padding: 10px 12px;
}

.menu-direct-link:hover,
.dropdown-item > a:hover,
.all-sports-list a:hover,
.submenu-panel a:hover {
  background: var(--accent-soft);
}

.menu-direct-link.active,
.dropdown-item > a.active,
.all-sports-list a.active,
.submenu-panel a.active {
  background: var(--accent-solid);
  color: var(--accent-contrast);
}

.dropdown-item {
  position: relative;
}

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

.dropdown-item-row > a {
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.dropdown-item.has-submenu::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 14px;
  height: 100%;
}

.submenu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  padding: 4px 4px 4px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--menu-control-bg);
  color: var(--navy);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
}

.toggle-label {
  white-space: nowrap;
}

/* Icon-Badge im gleichen Stil wie .mobile-panel-back-icon-wrap, nur
   gespiegelt: Label links, Pfeil nach rechts zeigend rechts aussen -
   man navigiert hier hinein statt zurueck. */
.toggle-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;
}

.dropdown-toggle:active .toggle-icon-wrap,
.submenu-toggle:active .toggle-icon-wrap {
  transform: scale(0.88);
}

.submenu-toggle .toggle-icon,
.dropdown-toggle .toggle-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}


.submenu-panel {
  position: absolute;
  top: -10px;
  left: calc(100% + 10px);
  width: 340px;
  min-width: 280px;
  max-width: 420px;
  padding: 10px;
  border-radius: 5px;
  background: var(--menu-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: none;
  z-index: 40;
}

.dropdown-item.has-submenu.open > .submenu-panel {
  display: block;
}

/* Mobile Untermenues als eigene "Seite" (iOS-artiges Push-Navigation-Muster):
   Kopfzeile (Zurueck-Button + Titel) wird per JS (nav-toggle.js,
   setupMobileNavPanels) in jedes .dropdown-menu/.submenu-panel eingefuegt,
   der urspruengliche Inhalt landet in .mobile-panel-body. Auf Desktop
   bleibt das unsichtbar/wirkungslos ("display: contents" macht den
   Wrapper fuer das Grid-/Spalten-Layout transparent) - die eigentlichen
   Panel-Regeln folgen in der Mobile-Media-Query weiter unten. */
.mobile-panel-header {
  display: none;
}

.mobile-panel-body {
  display: contents;
}

/* Glas-Pill-Übergang (nur Desktop): sanftes Aufblenden statt hartem display-Wechsel.
   Mobile nutzt weiterhin den einfachen display:none/block-Wechsel weiter unten. */
@media (min-width: 861px) {
  .dropdown-menu,
  .submenu-panel {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    filter: blur(6px);
    pointer-events: none;
    transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.32s ease,
                visibility 0s linear 0.32s;
  }

  .dropdown-item.has-submenu:hover > .submenu-panel,
  .dropdown-item.has-submenu:focus-within > .submenu-panel,
  .dropdown-item.has-submenu.open > .submenu-panel,
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown:focus-within .dropdown-menu,
  .has-dropdown.open .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    filter: blur(0);
    pointer-events: auto;
    transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.32s ease,
                visibility 0s linear 0s;
  }
}

.all-sports-list {
  display: grid;
  gap: 2px;
}

.has-dropdown.open .dropdown-menu {
  display: block;
}

.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
   max-width:1200px von .legal-stack 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;
}

@media (max-width: 860px) {
  .tva-home-stats,
  .tva-home-values,
  .section-panel.tva-home-flush {
    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 220px;
  width: 220px;
  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 220px setzen, ohne Verzerrung. */
  width: 220px;
  height: 220px;
  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: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  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);
}

@media (min-width: 768px) {
  .home-hero .tva-home-logo-test {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    width: auto;
  }

  .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. */
  background: transparent;
  box-shadow: none;
  border-color: transparent;

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

.news-list-compact {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.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-list {
  border-top: 1px solid var(--line);
}

.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;
}

.fees-table {
  width: min(100%, 560px);
  border-collapse: collapse;
  margin-top: 8px;
}

.fees-table td {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.fees-table td:first-child {
  padding-right: 18px;
}

.fees-table tr:last-child td {
  border-bottom: 0;
}

 .fees-table td:last-child {
  min-width: 140px;
  width: 1%;
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.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;
}

.legal-stack.tva-sport-overview-wide {
  max-width: none;
  margin: 0;
}

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

.legal-stack {
  max-width: 1200px;
  margin: 0 auto;
}

.legal-stack h2 {
  margin: 24px 0 8px;
  font-size: 1.6rem;
}

.legal-stack.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);
}

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

.legal-stack p,
.legal-stack 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;
  }

  html.mobile-nav-open,
  body.mobile-nav-open {
    height: 100vh;
    height: 100dvh;
  }

  #tva-nav-placeholder {
    min-height: 92px;
  }

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

  .page-shell {
    width: 100%;
  }

  /* Verhindert, dass der elastische Overscroll-Bounce (iOS Rubber-Band bzw.
     Androids Stretch-Effekt) die fixierte Kopfzeile mitzieht: "position:
     fixed" allein reicht nicht, weil der Effekt auf Ebene des gesamten
     Dokuments/Viewports greift und dabei auch fixierte Ebenen verzerrt. Also
     wird html komplett eingefroren und "body" selbst zum tatsaechlichen,
     in sich geschlossenen Scroll-Container gemacht - dessen eigener Bounce
     bleibt auf seine eigene Box begrenzt und laesst Geschwister-Elemente wie
     den fixierten Header unberuehrt. window.scrollY/scrollTo funktionieren
     dann nicht mehr; siehe getPageScrollY()/setPageScrollY() in
     nav-toggle.js und layout-shell.js.
  */
  html {
    height: 100%;
    overflow: hidden;
  }

  body {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .site-header {
    position: fixed;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    padding: 8px 12px;
    /* Zusaetzlicher Sicherheitsabstand fuer das Home-Indicator-/Gesten-
       Gebiet am unteren Bildschirmrand (iOS Safe Area). Ohne env() wuerde
       die Leiste dort teilweise unter der Geste liegen. */
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
  }

  .page-shell > main {
    /* Header ist auf Mobile "position: fixed" am unteren Bildschirmrand
       (statt "sticky" oben), damit er beim Bounce-Overscroll nicht
       mitwackelt. Da er dadurch nicht mehr im Layout-Fluss steht, muss der
       Content-Bereich den Platz manuell reservieren; nav-toggle.js pflegt
       --tva-header-height. Zusaetzlich oben Platz fuer die separate
       Marken-Kachel (.brand, siehe oben) reservieren - --tva-brand-bar-height
       wird ebenfalls von nav-toggle.js gepflegt. */
    padding-top: var(--tva-brand-bar-height, 64px);
    padding-bottom: var(--tva-header-height, 110px);
  }

  /* Schwebt sonst unter der jetzt am unteren Rand fixierten Nav-Leiste. */
  .tva-install-hint {
    bottom: calc(var(--tva-header-height, 110px) + max(16px, env(safe-area-inset-bottom, 16px)));
  }

  .header-top {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
  }

  .header-start {
    display: contents;
  }

  /*
   * Eigene Kachel oben am Bildschirmrand: Logo, Vereinsname und Untertitel
   * stehen jetzt fixiert ueber dem Seiteninhalt, getrennt von der unteren
   * Tab-Leiste (die dadurch ohne Logo auskommt - .header-start hat wegen
   * "display: contents" oben keine eigene Box, also wird direkt .brand
   * fixiert; sie verlaesst dadurch automatisch den Flex-Fluss von
   * .header-top, .header-actions nimmt die volle Breite der unteren Leiste
   * ein). Braucht ein eigenes --tva-brand-bar-height (siehe
   * bindFixedBrandBarHeightVar() in nav-toggle.js), damit Seiteninhalt und
   * das Menue-Overlay (.site-nav) wissen, wo sie beginnen duerfen.
   */
  .brand {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex !important;
    width: auto !important;
    height: auto;
    margin: 0 !important;
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    padding: max(10px, env(safe-area-inset-top, 10px)) 16px 10px;
    /* Deckend statt transluzent: .brand bekommt nirgends einen
       backdrop-filter, die transluzente --header-bg wuerde den
       darunterliegenden Seiteninhalt beim Scrollen durchscheinen lassen. */
    background: var(--header-bg-solid);
    border-bottom: 1px solid var(--glass-hairline);
    box-shadow: var(--shadow);
  }

  .brand-text {
    max-height: none;
    opacity: 1;
    width: auto;
    max-width: none;
    overflow: visible;
  }

  .brand-text strong {
    display: block;
    font-size: 0.96rem;
    line-height: 1.25;
  }

  .brand-text br {
    display: none;
  }

  .brand-text span {
    display: block;
    font-size: 0.74rem;
    color: var(--muted);
    line-height: 1.3;
  }

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

  /* Reihenfolge auf Mobile getauscht: "Start" vor "Suchen". */
  .header-actions .quick-link-start {
    order: -2;
  }

  .header-actions .mobile-search-toggle {
    order: -1;
  }

  .site-header .header-actions a.tab-item,
  .site-header .header-actions button.tab-item {
    width: auto;
    min-height: 0;
    padding: 6px 2px 5px;
  }

  .site-header .login-cta-link {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .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;
  }

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

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

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

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

  .login-cta-link {
    flex-shrink: 0;
    margin: 0;
  }

  .header-actions .membership-cta-link {
    display: none;
  }

  .header-search-form {
    display: none;
    position: absolute;
    /* Oeffnet nach oben statt nach unten - die Leiste sitzt auf Mobile am
       unteren Bildschirmrand, "top: 100%" wuerde das Suchfeld also unter
       den sichtbaren Bereich schieben. */
    bottom: calc(100% + 6px);
    top: auto;
    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-mobile-search-open .header-search-form {
    display: flex;
  }

  .header-search-form .cir-search {
    flex: 1;
    min-width: 0;
    width: auto;
    max-width: 100%;
  }

  .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-mobile-search-open .mobile-search-cancel {
    display: inline-flex;
  }

  /* .brand-text bleibt sichtbar (siehe .brand-text weiter oben) - die
     Marken-Kachel zeigt jetzt Logo UND Text. */

  .brand img {
    width: 38px;
    height: 38px;
    padding: 2px;
  }

  /*
   * Die Leiste (.header-top) sitzt auf Mobile jetzt fixiert am unteren
   * Bildschirmrand (siehe .site-header oben). Das aufklappende Menue
   * (frueher: wuchs unterhalb der Leiste im normalen Layout-Fluss nach
   * unten - dort waere jetzt kein Platz mehr, es liefe unter den
   * Bildschirmrand) ist deshalb ein eigenstaendiges Vollflaechen-Overlay:
   * "position: fixed" von der Bildschirmoberkante bis knapp oberhalb der
   * Leiste (bottom: var(--tva-header-height)), unabhaengig vom normalen
   * Layout-Fluss der .site-header-Box. Ein "position: fixed"-Nachfahre
   * eines "position: fixed"-Vorfahren positioniert weiterhin relativ zum
   * Viewport (nicht zum Elternelement), solange kein transform/filter im
   * Elternzweig liegt - genau das nutzt dieser Aufbau aus.
   */
  .site-nav {
    position: fixed;
    /* Beginnt unterhalb der Marken-Kachel (.brand), statt bei 0 - sonst
       laege das Overlay unter ihr bzw. sie schwebte darueber. */
    top: var(--tva-brand-bar-height, 64px);
    left: 0;
    right: 0;
    bottom: var(--tva-header-height, 110px);
    z-index: 19;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Deckend statt der transluzenten --header-bg: das Overlay hat auf
       Mobile keinen backdrop-filter (siehe Kommentar bei .site-header
       weiter unten im File), sonst schiene der Seiteninhalt dahinter
       leicht durch. */
    background: var(--header-bg-solid);
    opacity: 0;
    transform: translateY(16px);
    overscroll-behavior: contain;
    /* Setzt die Desktop-Basisregel (embedded/general/styles.css, .site-nav
       weiter oben im File) zurueck: die setzt "margin-top: 14px" fuer den
       dort normal in-flow gerenderten Menue-Block - hier wuerde das den
       fixierten Overlay-Rahmen einfach 14px vom Bildschirmrand abruecken. */
    margin: 0;
    padding: 0 16px;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.3s ease,
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.3s;
  }

  .site-nav.open {
    overflow-y: auto;
    opacity: 1;
    transform: translateY(0);
    padding: 16px 16px max(16px, env(safe-area-inset-bottom, 16px));
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.35s ease 0.05s,
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0s;
  }

  .site-nav-slider {
    display: none;
  }

  .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);
  }

  .header-actions-theme-toggle {
    display: none;
  }

  .header-actions .login-cta-link {
    display: none !important;
  }

  /* .header-actions clippt (overflow: hidden) und hat auf Mobile keinen
     Rand oberhalb der Tab-Items, daher wuerde der Standard-Offset (-6px)
     die Bubble am oberen Rand abschneiden. */
  .header-actions .tab-item .tva-nav-counter {
    top: 0;
    right: -3px;
  }

  /* Im aufgeklappten Menue sind die Nav-Links auf voller Breite (width:
     100%), deren rechte Kante liegt also genau auf der Kante von .site-nav
     (overflow-x: hidden) - der Standard-Offset (right: -10px) wuerde die
     Bubble dort abschneiden. */
  .site-nav a .tva-nav-counter {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
  }

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

  .has-dropdown {
    display: block;
    width: 100%;
  }

  .has-dropdown::after {
    display: none;
  }

  .nav-item {
    width: 100%;
  }

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

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

  .dropdown-toggle {
    display: inline-flex;
    margin-left: 0;
  }

  .submenu-toggle {
    display: inline-flex;
  }

  .nav-chevron {
    display: none;
  }

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

  /* Untermenues (Sportangebot, Verein, Service, ... sowie verschachtelt
     z.B. Sportstaetten in Verein) oeffnen auf Mobile nicht mehr als
     Akkordeon in der Liste (das schob den Rest des Menues weit nach unten
     weg), sondern als eigene volle "Seite": fixiert genau ueber dem
     Menue-Bereich, per Transform von rechts eingeschoben. Kopfzeile
     (Zurueck-Button + Titel) kommt aus .mobile-panel-header, der
     urspruengliche Inhalt (Mega-Menu-Spalten bzw. flache Linkliste) steckt
     in .mobile-panel-body (siehe setupMobileNavPanels() in nav-toggle.js). */
  /* Containing Block fuer die Panels unten festlegen: .nav-item bzw.
     .dropdown-item sind auf Desktop "position: relative" (Anker fuer die
     dort schwebenden Dropdowns). Auf Mobile soll ein Panel aber die ganze
     Ebene darueber ausfuellen, nicht nur seinen - hier ohnehin
     ausgeblendeten - Listeneintrag. Ohne das kollabiert das Panel auf die
     Hoehe dieses Eintrags. */
  .nav-item,
  .dropdown-item {
    position: static;
  }

  .dropdown-menu,
  .submenu-panel {
    display: flex;
    flex-direction: column;
    /* Deckt exakt den sichtbaren Menuebereich ab: Containing Block ist
       damit .site-nav (selbst "position: fixed") bzw. fuer verschachtelte
       Panels das umgebende .dropdown-menu. */
    position: absolute;
    inset: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    /* Deckend, damit die darunterliegende Ebene nicht durchscheint. */
    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;
  }

  .submenu-panel {
    z-index: 40;
  }

  /* Solange ein Untermenue offen ist, ist die darunterliegende Ebene keine
     "eigene Seite" mehr, sondern nur noch Hintergrund: sie wird komplett
     ausgeblendet und darf auch nicht mehr scrollen - sonst scrollt weiter
     die alte Liste statt der sichtbaren Panel-Liste. */
  .site-nav.tva-panel-open {
    overflow: hidden;
  }

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

  /* Gleiches Prinzip eine Ebene tiefer: bei geoeffnetem verschachtelten
     Untermenue (z.B. Sportstaetten) darf der Mega-Menu-Inhalt darunter
     nicht mehr scrollen. Das .submenu-panel liegt per "inset: 0" ohnehin
     ueber der gesamten Flaeche inklusive Kopfzeile. */
  .dropdown-menu.tva-panel-open > .mobile-panel-body {
    overflow: hidden;
  }

  .nav-item.has-dropdown.open > .dropdown-menu,
  .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;
  }

  .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);
  }

  /* Titel-Chip zeigt farbig hervorgehoben, welches Menue gerade offen
     ist ("aaah, das ist jetzt offen") - links im Header, waechst per
     flex:1 und schiebt den Zurueck-Button dadurch automatisch an den
     rechten Rand, ohne dass dieser selbst positioniert werden muss. */
  .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;
  }

  .mobile-panel-title:active {
    opacity: 0.8;
  }

  .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);
  }

  /* Nach Uiverse.io by AKAspidey01 (Go-Back-Button): farbig hinterlegtes
     Icon-Badge in einer Pille. Die Hover-Text-Ausfahranimation des
     Vorbilds entfaellt hier bewusst - auf Touch gibt es kein Hover, und
     "Zurueck" muss ohnehin dauerhaft lesbar sein. Stattdessen gibt das
     Icon-Badge bei :active kurzes, tastenaehnliches Feedback. */
  .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;
  }

  .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;
  }

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

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

  .mobile-panel-back-label {
    white-space: nowrap;
  }

  .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;
  }

  .mega-menu-scroll,
  .dropdown-menu-scroll {
    max-height: none;
    overflow: visible;
  }

  .dropdown-menu a {
    margin-top: 6px;
    background: var(--accent-soft);
  }

  .dropdown-item-row {
    margin-top: 6px;
  }

  .dropdown-item-row > a {
    margin-top: 0;
  }

  .dropdown-item > a,
  .menu-direct-link {
    display: inline-flex;
    width: 100%;
  }

  .submenu-panel a {
    margin-top: 6px;
    background: var(--accent-soft);
  }

  .all-sports-list a {
    margin-top: 6px;
    background: var(--accent-soft);
  }

  .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: 160px;
    width: 160px;
  }
}

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

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

/* 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: kompakte 100px, damit Text und Logo sauber untereinander bleiben. */
    width: 100px;
    height: 100px;
  }
}

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

/* Chrome-Flächen: weichere Radien, Haarlinien-Rand, Tiefe + oberer Glaskante */
.site-header {
  border-radius: 0;
  border: 1px solid var(--glass-hairline);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}

.dropdown-menu {
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-hairline);
  box-shadow: var(--glass-shadow-lg), inset 0 1px 0 var(--glass-highlight);
}

.site-footer {
  border-radius: 0;
  border: 1px solid var(--glass-hairline);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}

.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);
}

/* =========================================================================
   TVA Modular 3-column layout shell (shared on subpages)
   ========================================================================= */
.tva-layout-shell--loading main {
  visibility: hidden;
}

/* Sprungmarken-Ziele (h2 mit id, ueber "Auf dieser Seite" verlinkt) duerfen
   nicht unter dem sticky Header landen - 2..3 Zeilen Puffer nach unten. */
.tva-layout-shell__content h2[id] {
  scroll-margin-top: calc(var(--tva-layout-header-height, 0px) + 56px);
}

.tva-layout-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

.tva-layout-shell__content {
  min-width: 0;
  min-height: calc(100vh - var(--tva-layout-header-height, 0px));
  display: grid;
  align-content: start;
  gap: clamp(14px, 2vw, 24px);
  padding: clamp(14px, 2vw, 24px);
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(53, 83, 108, 0.08);
  transition: opacity 160ms ease;
}

.tva-layout-shell__content > * {
  min-width: 0;
  max-width: 100%;
}

.tva-layout-shell__content > .tva-main-content-bleed {
  max-width: none;
  margin-inline: calc(clamp(14px, 2vw, 24px) * -1);
}

.tva-layout-shell__content > .tva-main-content-bleed:first-child {
  margin-top: calc(clamp(14px, 2vw, 24px) * -1);
}

.tva-layout-shell--partial-loading .tva-layout-shell__content {
  opacity: 0.55;
  pointer-events: none;
}

.tva-layout-shell__sidebar {
  min-width: 0;
}

.tva-layout-shell__sidebar--left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tva-layout-shell__resizer {
  display: none;
}

.tva-layout-card {
  position: static;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 5px);
  box-shadow: 0 6px 18px rgba(53, 83, 108, 0.08);
  overflow: hidden;
}

.tva-layout-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent-soft) 65%, var(--card-bg));
}

/* Navigationskachel hat zusaetzlich den Uebersicht-Link im (fest stehenden)
   Kopf, deshalb dort zweizeilig statt der sonst ueblichen einzeiligen
   Titel/Toggle-Reihe. */
.tva-layout-card--nav > .tva-layout-card__header {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.tva-layout-card__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tva-layout-card--nav > .tva-layout-card__header .tva-layout-card__subtitle {
  margin: 0;
}

.tva-layout-card__title {
  margin: 0;
  font-size: 0.98rem;
}

.tva-layout-card__subtitle {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--accent-solid);
}

.tva-layout-card__subtitle-link {
  display: block;
  text-decoration: none;
}

.tva-layout-card__subtitle-link:hover {
  text-decoration: underline;
}

.tva-layout-card__subtitle-link:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}

.tva-layout-card__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill, 999px);
  background: var(--card-bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}

.tva-layout-card__toggle:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}

.tva-layout-card__favorites-toggle,
.tva-layout-card__nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease;
}

.tva-layout-card__favorites-toggle:hover,
.tva-layout-card__favorites-toggle:focus-visible,
.tva-layout-card__nav-toggle:hover,
.tva-layout-card__nav-toggle:focus-visible {
  background: var(--accent-soft);
}

.tva-layout-card__favorites-toggle:focus-visible,
.tva-layout-card__nav-toggle:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}

.tva-layout-card__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: var(--navy-soft);
  transition: transform 0.25s ease;
}

.tva-layout-card__chevron svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.tva-layout-card__favorites-toggle[aria-expanded="true"] .tva-layout-card__chevron,
.tva-layout-card__nav-toggle[aria-expanded="true"] .tva-layout-card__chevron {
  transform: rotate(180deg);
}

.tva-layout-card__body {
  padding: 12px 14px 14px;
}

.tva-layout-shell__sidebar--left .tva-layout-card__body,
.tva-layout-shell__sidebar--right .tva-layout-card__body {
  padding-inline: 0;
}

.tva-layout-shell__sidebar--left .tva-layout-card__subtitle,
.tva-layout-shell__sidebar--left .tva-side-nav__empty,
.tva-layout-shell__sidebar--right .tva-toc-nav__empty {
  margin-inline: 14px;
}

/* Look & Feel der linken Navigationskachel (From Uiverse.io, Struktur an TVA angepasst) */
/* Struktur-Regeln (Layout/Groessen, theme-unabhaengig) */
.tva-layout-shell__sidebar--left .tva-layout-card {
  border: none;
}

.tva-layout-shell__sidebar--left .tva-layout-card__header {
  background: transparent;
}

.tva-layout-shell__sidebar--left .tva-layout-card__body {
  padding-inline: 10px;
}

.tva-layout-shell__sidebar--left .tva-layout-card__subtitle,
.tva-layout-shell__sidebar--left .tva-side-nav__empty {
  margin-inline: 4px;
}

/* Look & Feel der rechten Navigationskachel (gleiches Design wie links) */
.tva-layout-shell__sidebar--right .tva-layout-card {
  border: none;
}

.tva-layout-shell__sidebar--right .tva-layout-card__header {
  background: transparent;
}

.tva-layout-shell__sidebar--right .tva-layout-card__body {
  padding-inline: 10px;
}

.tva-layout-shell__sidebar--right .tva-toc-nav__empty {
  margin-inline: 4px;
}

.tva-side-nav__list,
.tva-toc-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.tva-side-nav__item,
.tva-toc-nav__item {
  margin: 0;
}

.tva-side-nav__row {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: 6px;
  transition: background-color 0.25s ease-out, transform 0.2s ease-out;
}

.tva-side-nav__row:hover {
  transform: translate(1px, -1px);
}

.tva-side-nav__row:active {
  transform: scale(0.99);
}

.tva-side-nav__link,
.tva-toc-nav__link {
  display: inline-block;
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--radius-sm, 4px);
  padding: 4px 6px;
}

.tva-side-nav__link {
  display: block;
  width: 100%;
  padding: 7px 8px;
  border-radius: 6px;
  font-weight: 600;
  transition: color 0.25s ease-out;
}

.tva-layout-shell__sidebar--right .tva-toc-nav__link {
  display: block;
  width: 100%;
  padding: 7px 8px;
  border-radius: 6px;
  font-weight: 600;
  transition: color 0.25s ease-out, background-color 0.25s ease-out, transform 0.2s ease-out;
}

.tva-layout-shell__sidebar--right .tva-toc-nav__link:hover {
  transform: translate(1px, -1px);
}

.tva-layout-shell__sidebar--right .tva-toc-nav__link:active {
  transform: scale(0.99);
}

.tva-side-nav__row .tva-side-nav__link {
  flex: 1 1 auto;
  min-width: 0;
}

.tva-side-nav__link:focus-visible {
  outline: none;
}

.tva-side-nav__toggle {
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: color 0.25s ease-out;
}

.tva-side-nav__toggle-icon {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.tva-side-nav__favorite-toggle {
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s ease-out;
}

@media (hover: hover) {
  .tva-side-nav__favorite-toggle:not(.is-active) {
    opacity: 0;
  }

  .tva-side-nav__row:hover .tva-side-nav__favorite-toggle,
  .tva-side-nav__favorite-toggle:focus-visible {
    opacity: 1;
  }
}

.tva-side-nav__drag-handle {
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  cursor: grab;
  touch-action: none;
  transition: color 0.25s ease-out;
}

.tva-side-nav__item.is-dragging {
  height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.tva-side-nav__item.is-dragging .tva-side-nav__drag-handle {
  cursor: grabbing;
}

.tva-side-nav__list--draggable.tva-side-nav__list--dragging {
  cursor: grabbing;
}

.tva-side-nav__item--placeholder {
  pointer-events: none;
}

.tva-side-nav__row--ghost {
  opacity: 0.5;
  outline: 1.5px dashed var(--accent-solid);
  outline-offset: -1.5px;
  background-color: var(--accent-soft);
}

.tva-side-nav__list--nested {
  gap: 4px;
  margin-left: 14px;
}

.tva-side-nav__list--nested[hidden] {
  display: none;
}

.tva-side-nav__list--nested .tva-side-nav__link {
  padding-left: 20px;
  font-size: 0.94rem;
}

.tva-side-nav__link[aria-current="page"] {
  font-weight: 700;
}

/* Dark-Mode Farbgebung (verifiziert, passend zu Footer-/Dark-Theme-Blautoenen) */
[data-theme="dark"] .tva-layout-shell__sidebar--left .tva-layout-card {
  background-color: rgba(16, 29, 39, 1);
  background-image: linear-gradient(139deg, rgba(16, 29, 39, 1) 0%, rgba(16, 29, 39, 1) 40%, rgba(13, 24, 33, 1) 100%);
  box-shadow: 0 6px 18px rgba(6, 14, 20, 0.4);
}

[data-theme="dark"] .tva-layout-shell__sidebar--left .tva-layout-card__header {
  border-bottom: 1.5px solid #2b3b4d;
}

[data-theme="dark"] .tva-layout-shell__sidebar--left .tva-layout-card__title {
  color: #ffffff;
}

[data-theme="dark"] .tva-layout-shell__sidebar--left .tva-layout-card__toggle {
  border-color: #2b3b4d;
  background: transparent;
  color: #7c93a6;
}

[data-theme="dark"] .tva-layout-shell__sidebar--left .tva-layout-card__toggle:hover {
  background: #4b6cb7;
  border-color: #4b6cb7;
  color: #ffffff;
}

[data-theme="dark"] .tva-layout-shell__sidebar--left .tva-layout-card__toggle:focus-visible {
  outline-color: #4b6cb7;
}

[data-theme="dark"] .tva-layout-shell__sidebar--left .tva-layout-card__subtitle-link {
  color: #8ab4f8;
}

[data-theme="dark"] .tva-layout-shell__sidebar--left .tva-layout-card__subtitle-link:hover {
  color: #ffffff;
}

[data-theme="dark"] .tva-layout-shell__sidebar--left .tva-layout-card__subtitle-link:focus-visible {
  outline-color: #4b6cb7;
}

[data-theme="dark"] .tva-side-nav__row:hover {
  background-color: #4b6cb7;
}

[data-theme="dark"] .tva-side-nav__row:has(:focus-visible) {
  background-color: #4b6cb7;
}

[data-theme="dark"] .tva-side-nav__link {
  color: #7c93a6;
}

[data-theme="dark"] .tva-side-nav__row:hover .tva-side-nav__link,
[data-theme="dark"] .tva-side-nav__row:has(:focus-visible) .tva-side-nav__link {
  color: #ffffff;
}

[data-theme="dark"] .tva-side-nav__toggle {
  color: #7c93a6;
}

[data-theme="dark"] .tva-side-nav__row:hover .tva-side-nav__toggle {
  color: #ffffff;
}

[data-theme="dark"] .tva-side-nav__toggle:focus-visible {
  outline: 2px solid #4b6cb7;
  outline-offset: -2px;
}

[data-theme="dark"] .tva-side-nav__drag-handle {
  color: #7c93a6;
}

[data-theme="dark"] .tva-side-nav__row:hover .tva-side-nav__drag-handle {
  color: #ffffff;
}

[data-theme="dark"] .tva-side-nav__drag-handle:focus-visible {
  outline: 2px solid #4b6cb7;
  outline-offset: -2px;
}

[data-theme="dark"] .tva-side-nav__favorite-toggle {
  color: #7c93a6;
}

[data-theme="dark"] .tva-side-nav__row:hover .tva-side-nav__favorite-toggle {
  color: #ffffff;
}

[data-theme="dark"] .tva-side-nav__favorite-toggle:focus-visible {
  outline: 2px solid #4b6cb7;
  outline-offset: -2px;
}

[data-theme="dark"] .tva-side-nav__favorite-toggle.is-active {
  color: #8ab4f8;
}

[data-theme="dark"] .tva-side-nav__row:hover .tva-side-nav__favorite-toggle.is-active {
  color: #ffffff;
}

[data-theme="dark"] .tva-side-nav__list--nested {
  border-left: 1.5px solid #2b3b4d;
}

[data-theme="dark"] .tva-side-nav__link[aria-current="page"] {
  color: #ffffff;
}

[data-theme="dark"] .tva-side-nav__row:has(.tva-side-nav__link[aria-current="page"]) {
  background-color: rgba(75, 108, 183, 0.35);
}

[data-theme="dark"] .tva-layout-shell__sidebar--left .tva-side-nav__empty {
  color: #7c93a6;
}

[data-theme="dark"] .tva-layout-shell__sidebar--right .tva-layout-card {
  background-color: rgba(16, 29, 39, 1);
  background-image: linear-gradient(139deg, rgba(16, 29, 39, 1) 0%, rgba(16, 29, 39, 1) 40%, rgba(13, 24, 33, 1) 100%);
  box-shadow: 0 6px 18px rgba(6, 14, 20, 0.4);
}

[data-theme="dark"] .tva-layout-shell__sidebar--right .tva-layout-card__header {
  border-bottom: 1.5px solid #2b3b4d;
}

[data-theme="dark"] .tva-layout-shell__sidebar--right .tva-layout-card__title {
  color: #ffffff;
}

[data-theme="dark"] .tva-layout-shell__sidebar--right .tva-layout-card__toggle {
  border-color: #2b3b4d;
  background: transparent;
  color: #7c93a6;
}

[data-theme="dark"] .tva-layout-shell__sidebar--right .tva-layout-card__toggle:hover {
  background: #4b6cb7;
  border-color: #4b6cb7;
  color: #ffffff;
}

[data-theme="dark"] .tva-layout-shell__sidebar--right .tva-layout-card__toggle:focus-visible {
  outline-color: #4b6cb7;
}

[data-theme="dark"] .tva-toc-nav__link {
  color: #7c93a6;
}

[data-theme="dark"] .tva-toc-nav__link:hover,
[data-theme="dark"] .tva-toc-nav__link:focus-visible {
  background-color: #4b6cb7;
  color: #ffffff;
}

[data-theme="dark"] .tva-toc-nav__link:focus-visible {
  outline: 2px solid #4b6cb7;
  outline-offset: -2px;
}

[data-theme="dark"] .tva-toc-nav__link[aria-current="location"] {
  background-color: rgba(75, 108, 183, 0.35);
  color: #ffffff;
  font-weight: 700;
}

[data-theme="dark"] .tva-layout-shell__sidebar--right .tva-toc-nav__empty {
  color: #7c93a6;
}

/* Hell-Mode Farbgebung (nutzt dieselben Design-Tokens wie der Rest der Seite) */
[data-theme="light"] .tva-layout-shell__sidebar--left .tva-layout-card {
  background-color: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(53, 83, 108, 0.08);
}

[data-theme="light"] .tva-layout-shell__sidebar--left .tva-layout-card__header {
  border-bottom: 1px solid var(--line);
}

[data-theme="light"] .tva-layout-shell__sidebar--left .tva-layout-card__title {
  color: var(--ink);
}

[data-theme="light"] .tva-layout-shell__sidebar--left .tva-layout-card__toggle {
  border-color: var(--line);
  background: var(--card-bg);
  color: var(--ink);
}

[data-theme="light"] .tva-layout-shell__sidebar--left .tva-layout-card__toggle:hover {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: var(--accent-contrast);
}

[data-theme="light"] .tva-layout-shell__sidebar--left .tva-layout-card__toggle:focus-visible {
  outline-color: var(--accent-solid);
}

[data-theme="light"] .tva-layout-shell__sidebar--left .tva-layout-card__subtitle-link {
  color: var(--accent-solid);
}

[data-theme="light"] .tva-layout-shell__sidebar--left .tva-layout-card__subtitle-link:hover {
  color: var(--navy);
}

[data-theme="light"] .tva-layout-shell__sidebar--left .tva-layout-card__subtitle-link:focus-visible {
  outline-color: var(--accent-solid);
}

[data-theme="light"] .tva-side-nav__row:hover {
  background-color: var(--accent-soft-strong);
}

[data-theme="light"] .tva-side-nav__row:has(:focus-visible) {
  background-color: var(--accent-soft-strong);
}

[data-theme="light"] .tva-side-nav__link {
  color: var(--muted);
}

[data-theme="light"] .tva-side-nav__row:hover .tva-side-nav__link,
[data-theme="light"] .tva-side-nav__row:has(:focus-visible) .tva-side-nav__link {
  color: var(--accent-solid);
}

[data-theme="light"] .tva-side-nav__toggle {
  color: var(--muted);
}

[data-theme="light"] .tva-side-nav__row:hover .tva-side-nav__toggle {
  color: var(--accent-solid);
}

[data-theme="light"] .tva-side-nav__toggle:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: -2px;
}

[data-theme="light"] .tva-side-nav__drag-handle {
  color: var(--muted);
}

[data-theme="light"] .tva-side-nav__row:hover .tva-side-nav__drag-handle {
  color: var(--accent-solid);
}

[data-theme="light"] .tva-side-nav__drag-handle:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: -2px;
}

[data-theme="light"] .tva-side-nav__favorite-toggle {
  color: var(--muted);
}

[data-theme="light"] .tva-side-nav__row:hover .tva-side-nav__favorite-toggle {
  color: var(--accent-solid);
}

[data-theme="light"] .tva-side-nav__favorite-toggle:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: -2px;
}

[data-theme="light"] .tva-side-nav__favorite-toggle.is-active {
  color: var(--accent-solid);
}

[data-theme="light"] .tva-side-nav__row:hover .tva-side-nav__favorite-toggle.is-active {
  color: var(--navy);
}

[data-theme="light"] .tva-side-nav__list--nested {
  border-left: 1.5px solid var(--line);
}

[data-theme="light"] .tva-side-nav__link[aria-current="page"] {
  color: var(--accent-solid);
}

[data-theme="light"] .tva-side-nav__row:has(.tva-side-nav__link[aria-current="page"]) {
  background-color: var(--accent-soft);
}

[data-theme="light"] .tva-layout-shell__sidebar--left .tva-side-nav__empty {
  color: var(--muted);
}

[data-theme="light"] .tva-layout-shell__sidebar--right .tva-layout-card {
  background-color: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(53, 83, 108, 0.08);
}

[data-theme="light"] .tva-layout-shell__sidebar--right .tva-layout-card__header {
  border-bottom: 1px solid var(--line);
}

[data-theme="light"] .tva-layout-shell__sidebar--right .tva-layout-card__title {
  color: var(--ink);
}

[data-theme="light"] .tva-layout-shell__sidebar--right .tva-layout-card__toggle {
  border-color: var(--line);
  background: var(--card-bg);
  color: var(--ink);
}

[data-theme="light"] .tva-layout-shell__sidebar--right .tva-layout-card__toggle:hover {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: var(--accent-contrast);
}

[data-theme="light"] .tva-layout-shell__sidebar--right .tva-layout-card__toggle:focus-visible {
  outline-color: var(--accent-solid);
}

[data-theme="light"] .tva-toc-nav__link {
  color: var(--muted);
}

[data-theme="light"] .tva-toc-nav__link:hover,
[data-theme="light"] .tva-toc-nav__link:focus-visible {
  background-color: var(--accent-soft-strong);
  color: var(--accent-solid);
}

[data-theme="light"] .tva-toc-nav__link:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: -2px;
}

[data-theme="light"] .tva-toc-nav__link[aria-current="location"] {
  background-color: var(--accent-soft);
  color: var(--accent-solid);
  font-weight: 700;
}

[data-theme="light"] .tva-layout-shell__sidebar--right .tva-toc-nav__empty {
  color: var(--muted);
}

.tva-side-nav__empty,
.tva-toc-nav__empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.tva-layout-shell__sidebar--left .tva-side-nav__empty {
  color: #7c93a6;
}

.tva-layout-shell__sidebar--left,
.tva-layout-shell__sidebar--right {
  margin-top: 0;
}

.tva-layout-shell__sidebar--left .tva-layout-card,
.tva-layout-shell__sidebar--right .tva-layout-card {
  position: static;
  top: auto;
}

.tva-layout-shell__sidebar--left .tva-layout-card,
.tva-layout-shell__sidebar--right .tva-layout-card {
  border-radius: 10px;
}

.tva-layout-shell__sidebar--left {
  order: 1;
}

.tva-layout-shell__content {
  order: 2;
}

.tva-layout-shell__sidebar--right {
  order: 3;
}

@media (min-width: 1024px) {
  .tva-layout-shell {
    grid-template-columns:
      var(--tva-layout-left-width, 340px)
      10px
      minmax(0, 1fr)
      10px
      var(--tva-layout-right-width, 280px);
    column-gap: 0;
  }

  .tva-layout-shell__resizer {
    display: block;
    position: relative;
    align-self: stretch;
    cursor: col-resize;
    touch-action: none;
  }

  .tva-layout-shell__resizer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: var(--line);
    transition: background-color 0.15s ease, width 0.15s ease;
  }

  .tva-layout-shell__resizer:hover::before,
  .tva-layout-shell__resizer.is-dragging::before {
    width: 3px;
    background: var(--accent-solid);
  }

  .tva-layout-shell__resizer:focus-visible {
    outline: none;
  }

  .tva-layout-shell__resizer:focus-visible::before {
    width: 3px;
    background: var(--accent-solid);
  }

  .tva-layout-shell--resizing {
    cursor: col-resize;
    user-select: none;
  }

  .tva-layout-shell--resizing .tva-layout-shell__content {
    pointer-events: none;
  }

  .tva-layout-card {
    position: sticky;
    top: 12px;
  }

  .tva-layout-shell__sidebar--left,
  .tva-layout-shell__sidebar--right {
    position: sticky;
    top: var(--tva-layout-header-height, 0);
    z-index: 10;
  }

  /* Die Hoehe beider Sidebars kommt per Scroll-Handler aus JS
     (--tva-layout-sidebar-height) und schrumpft, sobald der Footer beim
     Scrollen sichtbar wird, damit keine der beiden Sidebars ihn ueberdeckt.
     Die linke Spalte verteilt diese Hoehe per Flexbox auf ihre beiden
     Kacheln: Favoriten wachsen bis zu einem Anteil mit dem Inhalt, die
     Navigationskachel fuellt den Rest und scrollt intern; "overflow: hidden"
     verhindert, dass die Favoritenkachel (die selbst nicht schrumpft) im
     Randfall trotzdem ueber den Footer hinausragt. Rechts hat die TOC-Kachel
     nur sich selbst und bekommt die Hoehe direkt. */
  .tva-layout-shell__sidebar--left {
    height: var(--tva-layout-sidebar-height, calc(100vh - var(--tva-layout-header-height, 0px)));
    overflow: hidden;
  }

  .tva-layout-shell__sidebar--right .tva-layout-card {
    height: var(--tva-layout-sidebar-height, calc(100vh - var(--tva-layout-header-height, 0px)));
  }

  /* Waechst mit dem Inhalt bis genau 6 Favoriten ohne Scrollbalken
     (Kopfzeile 47px + Body-Padding 26px + 6 * 36px Zeile + 5 * 8px Listenabstand
     = 329px, plus etwas Puffer); ab dem 7. Favoriten greift der interne Scroll. */
  .tva-layout-shell__sidebar--left .tva-layout-card--favorites {
    flex: 0 0 auto;
    max-height: 333px;
  }

  .tva-layout-shell__sidebar--left .tva-layout-card--nav {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Kopfzeile (Titel/Toggle) bleibt beim Scrollen fest stehen: die Kachel
     wird intern in Kopf (fixe Groesse) und Body (scrollt) aufgeteilt, statt
     wie zuvor die ganze Kachel inklusive Titel zu scrollen. */
  .tva-layout-shell__sidebar--left .tva-layout-card--favorites,
  .tva-layout-shell__sidebar--left .tva-layout-card--nav,
  .tva-layout-shell__sidebar--right .tva-layout-card {
    display: flex;
    flex-direction: column;
  }

  .tva-layout-shell__sidebar--left .tva-layout-card--favorites > .tva-layout-card__header,
  .tva-layout-shell__sidebar--left .tva-layout-card--nav > .tva-layout-card__header,
  .tva-layout-shell__sidebar--right .tva-layout-card > .tva-layout-card__header {
    flex: 0 0 auto;
  }

  .tva-layout-shell__sidebar--left .tva-layout-card--favorites > .tva-layout-card__body,
  .tva-layout-shell__sidebar--left .tva-layout-card--nav > .tva-layout-card__body,
  .tva-layout-shell__sidebar--right .tva-layout-card > .tva-layout-card__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  /* Zusaetzlicher Scroll-Puffer, damit der letzte Eintrag nicht hinter dem
     fixierten Cookie-Einstellungen-Icon (unten links) verschwindet. */
  .tva-layout-shell__sidebar--left .tva-layout-card--nav .tva-side-nav {
    padding-bottom: 76px;
  }

  .tva-layout-card__toggle {
    display: none;
  }

  .tva-layout-shell__sidebar--left,
  .tva-layout-shell__content {
    order: initial;
  }

  .tva-layout-shell__sidebar--right {
    order: initial;
  }

  /* Weniger als PAGE_TOC_MIN_HEADINGS Ueberschriften: rechte TOC-Spalte und
     ihr Resizer sind per [hidden] ausgeblendet, daher hier auch die dafuer
     reservierten Grid-Spalten entfernen, sonst bleibt rechts eine Luecke. */
  .tva-layout-shell--no-toc {
    grid-template-columns:
      var(--tva-layout-left-width, 340px)
      10px
      minmax(0, 1fr);
  }
}

/* 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))) {
  .site-header,
  .site-footer,
  .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));
  }

  .dropdown-menu {
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur-strong)) 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));
  }
}

/*
 * "backdrop-filter" (auch ohne "position") erzeugt einen neuen Containing
 * Block fuer "position: fixed"-Nachfahren - siehe .site-nav weiter oben,
 * das jetzt als Vollflaechen-Overlay ueber "position: fixed; top:0;
 * bottom: var(--tva-header-height)" relativ zum Viewport verankert wird.
 * Mit dem Blur oben auf .site-header wuerde .site-nav stattdessen relativ
 * zur nur ~60px hohen Leiste selbst positioniert und auf einen winzigen
 * Streifen zusammengequetscht. Auf Mobile bleibt die Leiste deshalb ohne
 * Weichzeichner - der bereits vorgesehene Fallback-Look ohne Blur (siehe
 * "Ohne Unterstuetzung..." oben) ist genau dafuer gemacht und wirkt auch
 * so stimmig.
 */
@media (max-width: 860px) {
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Ohne den Weichzeichner oben wuerde die transluzente --header-bg
       (92% Deckkraft) den darunter durchscrollenden Seiteninhalt leicht
       durchscheinen lassen - hier deshalb deckend statt transluzent. */
    background: var(--header-bg-solid);
    /* Die Glassmorphismus-Schicht weiter oben setzt .site-header einen
       border via var(--glass-hairline) - auf der unten fixierten
       Tab-Leiste wirkt das wie ein unschoener heller Streifen an
       Ober-/Seitenkanten, deshalb hier (nach der Glass-Regel im Cascade)
       wieder entfernt. */
    border: none;
  }
}

/* ==========================================================================
   Lese-Tracking: "Neu"-Badges, Nav-Zähler-Bubbles
   (embedded/general/unread-tracking.js)
   ========================================================================== */

.tva-new-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--membership-cta-text);
  background: var(--membership-cta-bg);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 2px 8px rgba(207, 77, 92, 0.35);
  vertical-align: middle;
  white-space: nowrap;
}

.tva-item--is-new {
  position: relative;
}

/* Badge liegt absolut in der Ecke, damit es Grid-/Flex-Layouts der Karten
   (Agenda-Zeilen, Hinweise-Karten) nicht verschiebt. */
.tva-item--is-new > .tva-new-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  margin: 0;
  z-index: 5;
}

.tva-item--is-new.hinweise-item .hinweise-item-title,
.tva-item--is-new.news-item-compact--termin .agenda-item-title {
  position: relative;
}

/* Nav-Zähler-Bubbles an "Hinweise" / "Terminkalender" (Desktop) und den
   Quick-Tab-Icons im mobilen Header */
.tva-nav-counter {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  color: var(--membership-cta-text);
  background: var(--membership-cta-bg);
  box-shadow: 0 2px 6px rgba(29, 47, 62, 0.25);
  pointer-events: none;
  z-index: 30;
}

.site-nav > a,
.site-nav .nav-item-row > .nav-link {
  position: relative;
}

.header-actions .tab-item {
  position: relative;
}

/* ==========================================================================
   Push-Benachrichtigungen Opt-in (embedded/push/push-optin.js)
   ========================================================================== */

.tva-push-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--accent-solid, #35536c);
  background: transparent;
  color: var(--accent-solid, #35536c);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.tva-push-button:hover:not(:disabled),
.tva-push-button:focus-visible {
  outline: none;
  background: var(--accent-soft, rgba(159, 207, 244, 0.16));
}

.tva-push-button.is-active {
  background: var(--accent-solid, #35536c);
  color: var(--accent-contrast, #ffffff);
}

.tva-push-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.tva-push-hint {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--muted, #60707d);
}

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