/* Sportabteilungen – zusammengefasste Seiten-CSS aller Abteilungen
   Basis/Referenz: aerobic.css. Jede Abteilung ist unten in einem eigenen,
   klar benannten Abschnitt aufgeführt; Selektoren sind je Abteilung
   eindeutig präfixt und kollidieren daher nicht. */


/* Page-specific styles for Aerobic */

.tva-sportabteilung-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.56)),
    url('/pages/sportabteilungen/aerobic/assets/aerobic-titelbild.webp');
}

.tva-aerobic-fees-wrap {
  width: 100%;
  overflow-x: auto;
}

@media (min-width: 768px) {
  .tva-aerobic-fees-wrap {
    max-width: 820px;
  }
}

.tva-aerobic-bank-wrap {
  width: 100%;
  max-width: 760px;
  overflow-x: auto;
}

.tva-aerobic-bank-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 251, 253, 0.96));
  box-shadow: var(--shadow);
}

[data-theme="dark"] .tva-aerobic-bank-table {
  background: linear-gradient(180deg, rgba(18, 34, 45, 0.94), rgba(14, 27, 37, 0.98));
}

.tva-aerobic-bank-table th,
.tva-aerobic-bank-table td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

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

.tva-aerobic-bank-table th {
  width: 140px;
  white-space: nowrap;
  text-align: left;
  color: color-mix(in srgb, var(--navy) 82%, var(--ink));
}

.tva-aerobic-bank-table td:last-child {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.tva-aerobic-bank-table__qr-cell {
  width: 168px;
  min-width: 168px;
  padding: 1rem;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--chip-bg) 78%, white 22%);
  text-align: center;
}

[data-theme="dark"] .tva-aerobic-bank-table__qr-cell {
  background: color-mix(in srgb, rgba(33, 53, 67, 0.92) 82%, transparent);
}

.tva-aerobic-bank-table__qr-image {
  display: block;
  width: min(100%, 128px);
  height: auto;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .tva-aerobic-bank-table th,
  .tva-aerobic-bank-table td {
    padding: 0.75rem 0.7rem;
  }

  .tva-aerobic-bank-table th {
    width: 92px;
  }

  .tva-aerobic-bank-table__qr-cell {
    width: 116px;
    min-width: 116px;
    padding: 0.75rem;
  }

  .tva-aerobic-bank-table__qr-image {
    width: min(100%, 92px);
  }
}


/* Page-specific styles for Bogensport */

.tva-bogensport-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/bogensport/assets/bogensport-titelbild.webp');
}

.tva-bogensport-fees-wrap {
  width: 100%;
  overflow-x: auto;
}

.tva-bogensport-fees-wrap .tabelle-beitraege {
  min-width: 620px;
}

@media (min-width: 768px) {
  .tva-bogensport-fees-wrap {
    max-width: 820px;
  }
}


/* Page-specific styles for Boxen */

.tva-boxen-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.1), rgba(8, 20, 31, 0.62)),
    url('/pages/sportabteilungen/boxen/assets/boxen-titelbild.webp');
}


/* Page-specific styles for Eltern-Kind Turnen */

.tva-eltern-kind-turnen-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.56)),
    url('/pages/sportabteilungen/eltern-kind-turnen/assets/eltern-kind-turnen-titelbild.webp');
}

.tva-eltern-kind-turnen-whatsapp {
  margin-top: 14px;
  border: none;
  border-radius: var(--radius-md, 5px);
  padding: 14px;
  background: transparent;
}

.tva-eltern-kind-turnen-whatsapp-layout {
  display: grid;
  gap: 14px;
}

.tva-eltern-kind-turnen-whatsapp-layout img {
  width: 100%;
  max-width: 180px;
  height: auto;
  border: none;
  border-radius: var(--radius-md, 5px);
  background: transparent;
  padding: 0;
}

.tva-eltern-kind-turnen-whatsapp-layout p {
  margin: 0;
}

.tva-eltern-kind-turnen-whatsapp-action {
  margin-top: 8px;
}

.tva-eltern-kind-turnen-whatsapp-action .button2 {
  display: inline-block;
  transition: all 0.2s ease-in;
  position: relative;
  overflow: hidden;
  z-index: 1;
  color: var(--ink);
  padding: 0.7em 3.3em 0.7em 1.7em;
  font-size: 18px;
  border-radius: var(--radius-md, 0.5em);
  background: var(--card-bg);
  border: 1px solid var(--line);
}

.tva-eltern-kind-turnen-whatsapp-action .button2 > svg {
  height: 30px;
  position: absolute;
  padding: 0px 5px;
  margin-top: -4px;
}

.tva-eltern-kind-turnen-whatsapp-action .button2:active {
  color: var(--ink);
  background: var(--accent-soft-strong);
}

.tva-eltern-kind-turnen-whatsapp-action .button2:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: var(--accent-soft);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.tva-eltern-kind-turnen-whatsapp-action .button2:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  background-color: var(--accent-solid);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.tva-eltern-kind-turnen-whatsapp-action .button2:hover {
  color: var(--accent-contrast);
  border: 1px solid var(--accent-solid);
}

.tva-eltern-kind-turnen-whatsapp-action .button2:hover:before {
  top: -35%;
  background-color: var(--accent-solid);
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.tva-eltern-kind-turnen-whatsapp-action .button2:hover:after {
  top: -45%;
  background-color: var(--accent-solid);
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

@media (min-width: 768px) {
  .tva-eltern-kind-turnen-info-card {
    grid-template-columns: minmax(0, 300px) 1fr;
    align-items: start;
  }

  .tva-eltern-kind-turnen-whatsapp-layout {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
}


/* Page-specific styles for Fussball */

.tva-fussball-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.62)),
    url('/pages/sportabteilungen/fussball/assets/fussball-titelbild.webp');
}

.tva-fussball-fees-wrap {
  width: 100%;
  overflow-x: auto;
}

@media (min-width: 768px) {
  .tva-fussball-fees-wrap {
    max-width: 820px;
  }
}


/* Page-specific styles for Geräteturnen */

.tva-geraeteturnen-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.6)),
    url('/pages/sportabteilungen/geraeteturnen/assets/geraeteturnen-titelbild.webp');
}


/* Page-specific styles for Gymnastik ehem. Fechtabteilung */

.tva-gymn-fechtabteilung-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/gymn-fechtabteilung/assets/gymn-fechtabteilung-titelbild.webp');
}


/* Page-specific styles for Gymnastik für Frauen im Alter ab 50 Jahre */

.tva-gymn-frauen-50-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/gymn-frauen-50/assets/gymn-frauen-50-titelbild.webp');
}


/* Page-specific styles for Gymnastik für Frauen und Männer im Alter ab 50 Jahre */

.tva-gymn-frauen-maenner-50-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/gymn-frauen-maenner-50/assets/gymn-frauen-maenner-50-titelbild.webp');
}


/* Page-specific styles for Jedermann Turnen für Männer */

.tva-jedermann-turnen-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/jedermann-turnen/assets/jedermann-turnen-titelbild.webp');
}


/* Page-specific styles for Karate */

.tva-karate-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/karate/assets/karate-titelbild.webp');
}

.tva-karate-fees-wrap {
  width: 100%;
  overflow-x: auto;
}

@media (min-width: 768px) {
  .tva-karate-fees-wrap {
    max-width: 820px;
  }
}


/* Page-specific styles for Kinderturnen */

.tva-kinderturnen-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/kinderturnen/assets/kinderturnen-titelbild.webp');
}


/* Page-specific styles for Laufgruppe Kinder */

.tva-laufgruppe-kinder-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/laufgruppe-kinder/assets/laufgruppe-kinder-titelbild.webp');
}


/* Page-specific styles for Leichtathletik Kinder 6-10 Jahre */

.tva-leichtathletik-6-10-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/leichtathletik-6-10/assets/leichtathletik-6-10-titelbild.webp');
}


/* Page-specific styles for Leichtathletik Kinder ab 10 Jahre */

.tva-leichtathletik-ab-10-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/leichtathletik-ab-10/assets/leichtathletik-ab-10-titelbild.webp');
}


/* Page-specific styles for Mädchenturnen am Talentstützpunkt */

.tva-maedchenturnen-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/maedchenturnen/assets/maedchenturnen-titelbild.webp');
}


/* Page-specific styles for Nordic Walking mit Gymnastik */

.tva-nordic-walking-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/nordic-walking/assets/nordic-walking-titelbild.webp');
}


/* Page-specific styles for Parcour und Freerunning */

.tva-parcour-freerunning-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/parcour-freerunning/assets/parcour-freerunning-titelbild.webp');
}

.tva-parcour-freerunning-fees-wrap {
  width: 100%;
  overflow-x: auto;
}

@media (min-width: 768px) {
  .tva-parcour-freerunning-fees-wrap {
    max-width: 820px;
  }
}


/* Page-specific styles for Pilates */

.tva-pilates-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/pilates/assets/pilates-titelbild.webp');
}

.tva-pilates-fees-wrap {
  width: 100%;
  overflow-x: auto;
}

@media (min-width: 768px) {
  .tva-pilates-fees-wrap {
    max-width: 820px;
  }
}


/* Page-specific styles for QiGong */

.tva-qigong-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/qigong/assets/qigong-titelbild.webp');
}


/* Page-specific styles for Sportabzeichen */

.tva-sportabzeichen-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/sportabzeichen/assets/sportabzeichen-titelbild.webp');
}


/* Page-specific styles for Tennis */

.tva-tennis-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/tennis/assets/tennis-titelbild.webp');
}

.tva-tennis-fees-wrap {
  width: 100%;
  overflow-x: auto;
}

.tva-tennis-fees-wrap .table-einfache-preisliste-2preise {
  min-width: 620px;
}

@media (min-width: 768px) {
  .tva-tennis-fees-wrap {
    max-width: 820px;
  }
}


/* Page-specific styles for Trampolin */

.tva-trampolin-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/trampolin/assets/trampolin-titelbild.webp');
}


/* Page-specific styles for Volleyball */

.tva-volleyball-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/volleyball/assets/volleyball-titelbild.webp');
}


/* Page-specific styles for Körper in Balance */

.tva-koerper-in-balance-hero-media {
  background-image:
    linear-gradient(180deg, rgba(14, 30, 42, 0.08), rgba(8, 20, 31, 0.58)),
    url('/pages/sportabteilungen/koerper-in-balance/assets/koerper-in-balance-titelbild.webp');
}

/* Gesamtbeitrag = Mitgliedsbeitrag + Abteilungsbeitrag (Abschnitt "Abteilungsbeitrag") */

/* Aeussere Huelle ist der Container der Abfrage unten: ob die drei Boxen samt + und =
   nebeneinander passen, haengt an der tatsaechlichen Spaltenbreite (Seitenleisten,
   Inhaltsbreite), nicht an der Fensterbreite. */
.tva-fee-composition {
  container-type: inline-size;
  margin: 1rem 0 1.25rem;
}

.tva-fee-composition-frame {
  align-items: center;
  border: 1px solid var(--muted);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  justify-content: center;
  padding: 1rem;
}

.tva-fee-composition-item {
  background: var(--card-bg);
  border: 1px solid var(--muted);
  border-radius: var(--radius-xs);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.9rem;
  text-align: center;
  width: 100%;
}

.tva-fee-composition-item strong {
  font-size: 1.1rem;
}

.tva-fee-composition-note {
  color: var(--muted);
  font-size: 0.85rem;
}

.tva-fee-composition-operator {
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

/* Nur fuer Screenreader: liest "plus" und "ergibt", waehrend + und = optisch stehen. */
.tva-fee-composition-sr {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Drei Boxen plus zwei Operatoren passen gemessen ab ca. 40 rem ohne Ueberlauf;
   42 rem laesst Reserve. Schmaler bleibt die gestapelte Darstellung, ebenso in
   Browsern ohne Container-Abfrage. rem statt px, damit der Schwellenwert bei
   groesserer Schrifteinstellung mitwaechst. */
@container (min-width: 42rem) {
  .tva-fee-composition-frame {
    align-items: stretch;
    flex-direction: row;
    gap: 0.9rem;
  }

  /* Gleich hohe Boxen; die Zeichen + und = stehen mittig dazwischen. */
  .tva-fee-composition-item {
    flex: 1 1 0;
    justify-content: center;
    width: auto;
  }

  .tva-fee-composition-operator {
    align-self: center;
  }
}