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

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

/* Skip-Link (WCAG 2.4.1). Bis zum Fokus visuell verborgen, aber im
   Accessibility-Tree und in der Tab-Reihenfolge - deshalb die
   Clip-Technik von .tva-visually-hidden statt display/visibility. */
.tva-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Bewusst :focus statt :focus-visible: Der Link muss auch dann sichtbar
   werden, wenn der Fokus programmatisch oder per Zeiger gesetzt wird -
   ein unsichtbarer, aber fokussierter Link waere 2.4.7-widrig.
   position: fixed haelt ihn ueber dem sticky .site-header (z-index 20),
   ohne beim Einblenden Layout zu verschieben (CLS). */
.tva-skip-link:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 18px;
  overflow: visible;
  clip: auto;
  border-radius: 5px;
  background: var(--accent-solid);
  color: var(--accent-contrast);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow);
  outline: 3px solid var(--accent-contrast);
  outline-offset: -6px;
}

/* WCAG 2.4.11: Der sticky .site-header darf das per Skip-Link angesprungene
   #tva-main nicht verdecken. --tva-header-height wird von
   embedded/navigation/nav-toggle.js auf dem Wurzelelement gesetzt;
   der Fallback entspricht dem bereits an anderer Stelle verwendeten Wert. */
#tva-main {
  scroll-margin-top: calc(var(--tva-header-height, 110px) + 16px);
}

.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) {
  /* Dritte Ebene (z.B. Vereinszentrum in Sportstaetten): sitzt bereits in
     der rechten Spalte, ein weiteres 340px-Flyout liefe aus dem Viewport.
     Schmaler und leicht ueberlappend statt daneben. */
  .submenu-panel .submenu-panel {
    top: 0;
    left: calc(100% - 6px);
    width: 220px;
    min-width: 0;
  }

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

@media (max-width: 860px) {
  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)));
  }

  /* Die Fusszeile ist der letzte Seiteninhalt und liegt ausserhalb von
     .page-shell > main, bekommt also nicht dessen padding-bottom fuer die
     jetzt am unteren Rand fixierte Tab-Leiste (.site-header). Ohne
     eigenen Ausgleich verdeckt die Leiste beim Scrollen ans Ende die
     letzten Zeilen (z. B. den Versionshinweis). */
  .tva-footer {
    padding-bottom: calc(2rem + 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/core/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,
  .submenu-panel.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);
  }

}

/* Late chrome overrides remain after the navigation base rules. */
  .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);
  }

  @supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .site-header,
    .site-footer {
      -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));
    }
  }

  @media (max-width: 860px) {
    .site-header {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: var(--header-bg-solid);
      border: none;
    }
  }