/* ===========================================================================
   Barrierefreiheits-Korrekturen
   ---------------------------------------------------------------------------
   Wird NACH webflow.css geladen und ueberschreibt sie gezielt.
   webflow.css selbst bleibt unberuehrt: es ist Webflows kompiliertes Original
   und wird von scripts/mirror.mjs jederzeit neu gezogen.

   Alle Kontrastwerte sind nach WCAG-Formel nachgerechnet, nicht geschaetzt.
   =========================================================================== */

:root {
  --a11y-kante: #767676;        /* 4,07:1 gegen Feldgrund, 4,54:1 gegen Weiss */
  --a11y-dunkel: #060201;       /* 20,65:1 gegen Weiss */
  --a11y-hell: #ffffff;         /*  8,20:1 gegen Footer-Gruen #0b5b34 */
}

/* ---------------------------------------------------------------------------
   1.4.7 / 2.4.7  Fokus muss sichtbar sein
   ---------------------------------------------------------------------------
   Webflow entfernt den Fokusring an mehreren Stellen ersatzlos:
     .w-input:focus, .w-select:focus { outline: 0 }
     .w-nav-button:focus            { outline: 0 }
     .w-tab-link:focus              { outline: 0 }
     .w-dropdown-toggle:focus       { outline: 0 }
     .w-dropdown-link:focus         { outline: 0 }
   Die einzige Ersatzregel des Projekts greift nur bei *[tabindex] und
   input[type=file] - Links, Buttons und Formularfelder ohne tabindex-Attribut
   bleiben also ohne Indikator.

   Loesung: zwei konzentrische Ringe. Auf hellem Grund traegt der dunkle Ring
   (#060201 auf Weiss = 20,65:1), auf dunklem Grund der helle
   (#fff auf Footer-Gruen #0b5b34 = 8,20:1). Damit ist immer mindestens einer
   deutlich sichtbar - Webflows #4d65ff schafft auf dem Footer nur 1,80:1.
   --------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"],
       .w-tab-link, .w-nav-button, .w-dropdown-toggle, .w-dropdown-link):focus-visible {
  outline: 2px solid var(--a11y-hell) !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 4px var(--a11y-dunkel) !important;
  border-radius: 2px;
}

/* Webflows outline:0-Regeln gezielt aushebeln - dieselbe Spezifitaet, aber
   spaeter geladen reicht nicht, weil einige mit :focus statt :focus-visible
   arbeiten. */
.w-input:focus-visible,
.w-select:focus-visible,
.w-nav-button:focus-visible,
.w-tab-link:focus-visible,
.w-dropdown-toggle:focus-visible,
.w-dropdown-link:focus-visible {
  outline: 2px solid var(--a11y-hell) !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 4px var(--a11y-dunkel) !important;
}

/* Die per opacity:0 versteckte Einwilligungs-Checkbox: Fokus am sichtbaren
   Ersatzelement anzeigen. */
.form_checkbox input[type="checkbox"]:focus-visible + .form_checkbox-icon,
.form_checkbox input[type="checkbox"]:focus-visible ~ .form_checkbox-icon,
.w-checkbox input[type="checkbox"]:focus-visible + .w-checkbox-input {
  outline: 2px solid var(--a11y-hell) !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 4px var(--a11y-dunkel) !important;
}

/* ---------------------------------------------------------------------------
   1.4.11  Kontrast von Bedienelementen
   ---------------------------------------------------------------------------
   .form_input hat border:1px solid transparent ueber #f3f2f2 -> 1,12:1.
   Gefordert sind 3:1. #767676 liefert 4,07:1 gegen das Feld und 4,54:1 gegen
   Weiss - erfuellt die Anforderung in beiden Umgebungen.
   --------------------------------------------------------------------------- */
.form_input,
.form_input.is-text-area,
.form_input.is-select-input {
  border-color: var(--a11y-kante);
}

/* Der sichtbare Ersatz der Pflicht-Checkbox braucht ebenfalls eine Kante. */
.form_checkbox-icon,
.w-checkbox-input--inputType-custom {
  border-color: var(--a11y-kante);
}

/* ---------------------------------------------------------------------------
   3.3.2  Beschriftungen
   ---------------------------------------------------------------------------
   Das Kontaktformular hatte nur Platzhalter statt Labels. Die Klasse
   .form_field-label bringt Webflow bereits mit (margin-bottom:.5rem;
   font-weight:400) - sie ist aber ein <label> und damit inline, weshalb der
   Abstand ohne display:block wirkungslos bliebe.
   --------------------------------------------------------------------------- */
.form_field-label {
  display: block;
}

/* Pflichtfeld-Hinweis: eigenes Grid-Item in .contact1_form, das bereits
   grid-row-gap:1.5rem setzt - deshalb kein eigener Aussenabstand. */
.form_pflichthinweis {
  margin: 0;
  color: var(--_primitives---colors--neutral-darkest, #060201);
}

/* ---------------------------------------------------------------------------
   1.4.3  Kontrast (Minimum)
   ---------------------------------------------------------------------------
   .error-text{color:#e23939} auf #fef3f2 = 3,96:1, gefordert 4,5:1.
   Ohne diese Ueberschreibung greift die Containerfarbe
   .form_message-error{color:#b42318} = 6,05:1.
   --------------------------------------------------------------------------- */
.error-text {
  color: inherit;
}

/* ---------------------------------------------------------------------------
   1.4.1  Benutzung von Farbe
   ---------------------------------------------------------------------------
   Links im Fliesstext (Impressum, Datenschutz) unterscheiden sich weder in der
   Farbe noch durch eine Unterstreichung vom umgebenden Text. Ausgenommen sind
   Bereiche, in denen Links ohnehin als Flaeche oder Button erkennbar sind.
   --------------------------------------------------------------------------- */
.w-richtext a,
.text-style-link {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---------------------------------------------------------------------------
   1.4.1  Aktive Seite in der Navigation
   ---------------------------------------------------------------------------
   Die aktuelle Seite war allein ueber eine Farbnuance markiert (1,12:1) - im
   Footer und im mobilen Menue gar nicht. Eine Unterstreichung ergaenzt das
   nicht-farbliche Merkmal.
   --------------------------------------------------------------------------- */
.navbar2_link.w--current,
.footer4_link.w--current,
.footer4_legal-link.w--current {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------------
   2.3.3  Bewegung durch Interaktion
   ---------------------------------------------------------------------------
   Die 16 Zeitleisten des Projekts werten prefers-reduced-motion nirgends aus.
   Das Abschalten der GSAP-Animationen selbst passiert in A11yScript.astro;
   hier wird nur sichergestellt, dass Inhalte, die sonst erst per Animation
   eingeblendet werden, sofort sichtbar sind und CSS-Uebergaenge entfallen.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.w-mod-js :is(
    .hero, .hero-sub, .header5_background-image-wrapper.hero-background,
    .navbar2_container, .layout1_image, .layout1_content-left > *,
    .gallery23_component > *, .fussball-de-news, .cta19-animation > *,
    .faq3_content-left, .faq3_list > *, .section_layout238,
    .footer4_top-wrapper, .footer4_bottom-wrapper > *,
    .header50-animation > *, .header50_background-image,
    .layout102_content-left, .layout102_content-right,
    .layout194_content-right > *, .layout194_image,
    .layout3_content-left > *, .layout3_image, .team-header-animation,
    .team2_list > *, .layout239-animation > *, .layout239_list > *,
    .gallery-8-heading, .gallery8_list > *, .header65-animation > *,
    .header65_background-image-wrapper, .contact18_grid-list > *
  ) {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   2.4.1  Bloecke umgehen - Sprunglink zum Hauptinhalt
   ---------------------------------------------------------------------------
   Wird erst bei Tastaturfokus sichtbar und liegt dann ueber allem.
   --------------------------------------------------------------------------- */
.a11y-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: #0e7241;              /* Vereinsgruen, Weiss darauf = 6,00:1 */
  color: #fff;
  font-family: "Inter Variablefont", Arial, sans-serif;
  font-size: 1rem;
  text-decoration: underline;
  border-radius: 0 0 8px 0;
}
.a11y-skip-link:focus {
  left: 0;
}

/* Nur fuer Hilfsmittel sichtbar - fuer Beschriftungen, die optisch nichts
   veraendern sollen. */
.a11y-nur-screenreader {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---------------------------------------------------------------------------
   1.4.3  Hero-Overlay auf der Startseite
   ---------------------------------------------------------------------------
   .image-overlay-layer-no-borders (#00000080) kommt nur auf /index vor; alle
   zehn anderen Seiten nutzen ...-darker-copy (#0009). Der weisse Hero-Text
   erreicht ueber dem helleren Overlay im schlechtesten Fall nur 3,98:1.
     vorher  weiss ueber #00000080 = 3,98:1
     nachher weiss ueber #0009     = 5,74:1
   Die Klasse ist in keinem Webflow-Chunk als Animationsziel referenziert -
   kein Konflikt mit der Runtime.
   --------------------------------------------------------------------------- */
.image-overlay-layer-no-borders {
  background-color: #0009;
}

/* ---------------------------------------------------------------------------
   Robustheit: Navigation und Footer haengen nicht mehr an der Animations-Runtime
   ---------------------------------------------------------------------------
   Im <head>-Gatter
     html.w-mod-js:not(.w-mod-ix3) :is(...) { visibility: hidden !important }
   sind .navbar2_container, .footer4_top-wrapper und .footer4_bottom-wrapper > *
   jetzt gestrichen (scripts/port.mjs). Damit sind Hauptnavigation und Footer
   inklusive der einzigen Impressum- und Datenschutz-Links ab dem ersten Rendern
   da - auch wenn einer der JS-Chunks nie ankommt.

   Beide Bereiche haben in webflow.achunk.7542435847da3567.js aber weiterhin
   eine Einblende-Zeitleiste (opacity 0 -> 100%, Verschiebung von oben bzw.
   unten). Ohne diese Regel waeren sie erst sichtbar, wuerden dann von GSAP auf
   opacity:0 gesetzt und erneut eingeblendet - ein sichtbares Flackern.

   GSAP schreibt Inline-Styles ohne !important; eine !important-Regel aus dem
   Stylesheet gewinnt also. Preis: die Einblende-Animation von Navigation und
   Footer entfaellt. Das ist die bewusste Gegenleistung dafuer, dass beide
   Bereiche nicht mehr an einer fremden Runtime haengen.
   --------------------------------------------------------------------------- */
.navbar2_container,
.footer4_top-wrapper,
.footer4_bottom-wrapper > * {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------------------------------------------------------------------------
   Spamschutz: Honigtopf-Feld
   ---------------------------------------------------------------------------
   Bewusst NICHT display:none - manche Automaten ueberspringen solche Felder,
   und der Beschriftungstext soll fuer Screenreader lesbar bleiben. Das Feld
   traegt tabindex="-1" und liegt damit nicht in der Tab-Reihenfolge.
   --------------------------------------------------------------------------- */
.form_honigtopf {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}