/* Skip-Navigation (Barrierefreiheit) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--accent-color);
  color: #1a1918;
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 0 0 6px 6px;
  z-index: var(--z-skip-link);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
}

/* Reset und Basis-Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Globale Scrollbar-Styles in Akzentfarbe */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--primary-dark);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 10px;
  border: 2px solid var(--primary-dark);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
  opacity: 0.9;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-color) var(--primary-dark);
}

/* Screen-reader only – für SEO-relevante, visuell verborgene Elemente (z.B. h1) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Globaler Link-Reset - keine blauen Browser-Standard-Links */
a {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
}

/* Globale Text-Optimierung */
p,
li,
td,
th,
caption,
figcaption {
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: manual;
  hyphens: manual;
  hyphenate-limit-chars: 10 4 4;
}

/* Überschriften, Links, Buttons: nie automatisch trennen */
h1,
h2,
h3,
h4,
h5,
h6,
a,
button,
label,
input,
select,
textarea,
.nav-verknuepfung,
.team-nav-btn,
.obere-leiste-verknuepfung,
.nav-button-mitglied,
.bereich-mehr,
.termin-typ,
.neuigkeiten-kategorie,
.statistik-nummer,
.statistik-beschriftung {
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* manual statt none: automatisch wird nichts getrennt, aber ein gesetztes
     ­ wird geehrt. Mit "none" ignorierte der Browser auch die manuellen
     Trennstellen und brach lange Komposita ohne Trennstrich mitten im Wort. */
  hyphens: manual;
}

/* Sonstige Container – kein Trennen, aber Umbruch erlaubt */
span,
div {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ===================================================================
   DESIGN TOKENS
   Einzige Quelle der Wahrheit für Farben, Abstände, Schatten, Ebenen.
   Neue Regeln verwenden ausschliesslich var(--token) – keine rohen
   Hex-Werte, keine freien z-index-Zahlen.
   =================================================================== */
:root {
  /* --- CI-Palette (unveränderlich) --- */
  --primary-dark: #2a2927;
  --primary-color: #373635;
  --accent-color: #f5e826;
  --bg-light: #f2efe9;

  /* Text auf hellem Hintergrund */
  --text-on-light: #2a2927;
  --text-on-light-medium: #373635;

  /* Text auf dunklem Hintergrund */
  --text-on-dark: #fafafa;

  /* --- CI-Palette als RGB-Kanäle (für rgba()-Komposition) --- */
  --rgb-primary-dark: 42, 41, 39;
  --rgb-accent: 245, 232, 38;

  /* --- Elevation ---
     Zweilagige Schatten: enge Kontaktschatten + weiche Streuung.
     Das erzeugt Tiefe, ohne dass Kanten "schmutzig" wirken. */
  --shadow-sm:
    0 1px 2px rgba(var(--rgb-primary-dark), 0.06),
    0 1px 3px rgba(var(--rgb-primary-dark), 0.1);
  --shadow:
    0 2px 4px rgba(var(--rgb-primary-dark), 0.06),
    0 4px 12px rgba(var(--rgb-primary-dark), 0.1);
  --shadow-md:
    0 4px 8px rgba(var(--rgb-primary-dark), 0.06),
    0 8px 24px rgba(var(--rgb-primary-dark), 0.12);
  --shadow-lg:
    0 8px 16px rgba(var(--rgb-primary-dark), 0.08),
    0 24px 48px rgba(var(--rgb-primary-dark), 0.16);

  /* Akzent-Schatten */
  --shadow-accent: 0 4px 14px rgba(var(--rgb-accent), 0.35);

  /* --- Dunkle Flächen ---
     Einige Unterseiten (Events, Trainingszeiten, Sparte Fussball) laufen
     auf dunklem Grund. Wer .dunkle-seite setzt, bekommt automatisch die
     passenden Textfarben – siehe Regel unten. */
  --bg-dark: #1a1918;

  /* Sekundärtext auf dunklem Grund – 9,1:1 auf --bg-dark (WCAG AA) */
  --text-secondary: rgba(250, 250, 250, 0.72);

  /* Sekundärtext auf hellem Grund – 5,2:1 auf --bg-light (WCAG AA) */
  --text-muted: #6b6a67;

  /* --- Semantische Farben (ausserhalb der CI-Palette, bewusst) ---
     Werte so gewählt, dass weisser Text darauf WCAG AA erfüllt.
     --color-error-border ist nur für Ränder, nie als Textgrund. */
  --color-error: #c0392b; /* weisser Text: 5,2:1 */
  --color-error-border: #e74c3c;
  --color-success: #2d7a3e; /* weisser Text: 5,1:1 */

  /* --- Abgeleitete Farben (nur aus CI-Palette) --- */
  --bg-white: #f8f6f1;
  /* Kein reines Weiss mehr - das wirkte auf der Seite zu grell. */
  --pure-white: #f8f6f1;
  /* Echtes Weiss bleibt nur fuer Dateien, die ihr eigenes Weiss
     mitbringen - etwa das Bundeslogo, das unveraendert auf weissem
     Grund stehen muss. Nicht als Flaechenfarbe verwenden. */
  --weiss-rein: #ffffff;
  --text-dark: #2a2927;
  --text-medium: #373635;
  --text-light: #333333;
  --border-light: rgba(var(--rgb-primary-dark), 0.15);
  --border-medium: rgba(var(--rgb-primary-dark), 0.25);
  --card-bg: #fafafa;
  --accent-hover: #2a2927;
  --header-border: rgba(var(--rgb-primary-dark), 0.15);

  /* --- Radius --- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Bewegung ---
     Ein gemeinsames Easing hält Hover/Transitions über die ganze
     Seite konsistent; "ease-out"-Kurven wirken hochwertiger als linear. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition: 250ms var(--ease-out);
  /* Obergrenze nach Regel 2: nie mehr als 400 ms. */
  --transition-langsam: 400ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);

  /* --- Ebenen (z-index) ---
     Geschlossene Skala. Reihenfolge von unten nach oben.
     Keine neuen Zahlen erfinden – hier einen Token ergänzen. */
  /* Dekoschicht: liegt ueber dem Seitengrund, unter allem Bedienbaren. */
  --z-deko: 1;
  --z-nav-panel: 100;
  --z-tooltip: 200;
  --z-header: 400;
  --z-topbar: 500;
  --z-dropdown: 600;
  --z-banner: 700;
  --z-skip-link: 800;
  --z-modal: 850;
  --z-toast: 900;

  /* --- Typografie --- */
  --font-sans: 'Zalando Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ===================================================================
   SCHRIFT
   Zalando Sans als Variable Font: eine Datei deckt die Gewichte
   200–900 ab. Lokal ausgeliefert, kein Google-Fonts-CDN – damit
   fliesst keine Besucher-IP an Dritte (DSGVO).
   =================================================================== */
@font-face {
  font-family: 'Zalando Sans';
  src: url('/fonts/ZalandoSans.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-sans);
  line-height: 1.6;
  color: var(--text-on-light);
  overflow-x: hidden;
  background: var(--bg-light);
  margin: 0;
  position: relative;
  /* Kantenglättung: lässt die Schrift auf hellem Grund weniger fett wirken */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Überschriften: etwas engeres Tracking wirkt hochwertiger als das
   Default-Tracking der Schrift bei grossen Graden. */
h1,
h2,
h3 {
  letter-spacing: -0.02em;
}

/* ===================================================================
   DUNKLE SEITEN
   <body class="dunkle-seite"> für Seiten, die auf dunklem Grund laufen.
   Ohne diese Klasse rendern die hellen Textfarben dieser Seiten auf dem
   hellen Standard-Body – also praktisch unsichtbar. Genau das war auf
   zeiten.html und sparte-fussball.html der Fall.
   =================================================================== */
body.dunkle-seite {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

/* ===================================================================
   "DEMNÄCHST"-KENNZEICHNUNG
   Für Angaben und Fotos, die noch nicht feststehen – insbesondere zu
   Trainerinnen und Trainern. Nie CI-Gelb als Textfarbe verwenden:
   #f5e826 auf hellem Grund ergibt 1,2:1 und ist unlesbar.
   Diese Werte liegen bei 4,6:1 (hell) und 8,2:1 (dunkel).
   =================================================================== */
.demnaechst {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: var(--radius-pill);
  border: 1px dashed var(--border-light);
  background: rgba(var(--rgb-primary-dark), 0.06);
  color: var(--text-muted);
  font-size: 0.82em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Dunkle Karte auf heller Seite: dieselbe Behandlung wie auf dunkler Seite.
   Ohne diese Regel stand der graue Platzhaltertext mit 2,7:1 auf der Karte. */
.termin-karte .demnaechst,
.vorstand-mitglied .demnaechst,
.elastik-panel .demnaechst,
body.dunkle-seite .demnaechst {
  border-color: rgba(250, 250, 250, 0.18);
  background: rgba(250, 250, 250, 0.06);
  color: var(--text-secondary);
}

/* Medien laufen nie aus ihrem Container heraus. Ohne diese Regel
   sprengt ein einziges zu breites Bild das gesamte Mobil-Layout. */
img,
video {
  max-width: 100%;
  height: auto;
}

svg {
  max-width: 100%;
}

/* Breite Tabellen scrollen horizontal in sich selbst, statt die Seite
   zu sprengen oder (bei overflow:hidden am Container) abgeschnitten
   zu werden. Jede <table> gehört in einen solchen Wrapper. */
.tabelle-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sichtbarer Fokus-Ring in CI-Gelb – nur bei Tastaturnavigation.
   Ersetzt den Browser-Default, ohne Maus-Klicks zu "beringen". */
:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Nutzer mit reduzierter Bewegungspräferenz respektieren */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Helle Cards und Boxen auf dunklem Hintergrund */
.mannschaft-karte,
.neuigkeiten-karte,
.magazin-karte,
.termin-karte,
.erfolg-karte,
.kontakt-formular {
  color: var(--text-on-light);
  /* Sicherstellen dass Cards ausreichend Platz haben */
  min-width: 0; /* Wichtig für Grid/Flex-Items um Overflow zu verhindern */
}

/* ===================================================================
   VORSTANDSKARTE – DUNKLE Karte
   Achtung: .vorstand-mitglied hat einen DUNKLEN Hintergrund
   (background: var(--text-light) = #333333, siehe unten). Sie darf
   deshalb nicht in der Liste der hellen Cards stehen – sonst erben
   E-Mail und Telefon dunkle Schrift auf dunklem Grund (1,05:1 bzw.
   1,15:1, praktisch unsichtbar). Alle Werte hier sind gegen #333333
   geprüft.
   =================================================================== */
.vorstand-mitglied {
  min-width: 0;
  color: var(--text-on-dark); /* 12,1:1 */
}

.vorstand-mitglied h4 {
  color: var(--text-on-dark); /* 12,1:1 */
}

.vorstand-mitglied .mitglied-rolle {
  color: var(--accent-color); /* 9,9:1 */
}

.vorstand-mitglied .mitglied-kontakt {
  color: var(--text-on-dark); /* 12,1:1 */
}

.vorstand-mitglied .mitglied-telefon {
  color: var(--text-secondary); /* 7,4:1 */
}

.mannschaft-inhalt h3,
.neuigkeiten-inhalt h3,
.magazin-inhalt h3,
.termin-inhalt h3 {
  color: var(--text-on-light);
}

.mannschaft-inhalt p,
.mannschaft-info span,
.neuigkeiten-inhalt p,
.magazin-inhalt,
.termin-typ {
  color: var(--text-on-light-medium);
}

.behaelter {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* CSS Custom Properties - Layout-Konsistenz */
:root {
  --top-bar-height: 45px;
  --header-height: 90px;
  --total-fixed-height: calc(var(--top-bar-height) + var(--header-height));
}

/* Top Bar */
.obere-leiste {
  background: var(--primary-color);
  color: var(--bg-light);
  padding: 0.5rem 0;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--text-light);
  box-shadow: 0 2px 8px rgba(42, 41, 39, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--top-bar-height);
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
}

.obere-leiste .behaelter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  width: 100%;
}

.obere-leiste-links,
.obere-leiste-rechts {
  display: flex;
  gap: 0;
  align-items: center;
}

.obere-leiste-verknuepfung {
  color: var(--bg-light);
  text-decoration: none;
  transition: all var(--transition);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.4rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-right: 1px solid var(--text-light);
}

.obere-leiste-verknuepfung:last-child {
  border-right: none;
}

.obere-leiste-verknuepfung .icon {
  font-size: 1rem;
  opacity: 0.9;
}

.obere-leiste-verknuepfung:hover {
  color: var(--accent-color);
  background: var(--primary-dark);
}

.soziale-verknuepfungen-oben {
  display: flex;
  gap: 0;
  align-items: center;
}

.soziale-verknuepfung {
  color: var(--bg-light);
  padding: 0.4rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition);
  border-right: 1px solid var(--text-light);
}

.soziale-verknuepfung:hover {
  background: rgba(42, 41, 39, 0.5);
}

.soziale-verknuepfung svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.insta-text {
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--bg-light);
}

/* Instagram Icon Variations - Instagram CI Gradients */
.insta-herrenfussball:hover {
  transform: scale(1.03);
}

.insta-herrenfussball:hover .insta-text {
  color: #fcaf45;
}

.insta-jugend:hover {
  transform: scale(1.03);
}

.insta-jugend:hover .insta-text {
  color: #f77737;
}

.insta-volleyball:hover {
  transform: scale(1.03);
}

.insta-volleyball:hover .insta-text {
  color: #e1306c;
}

.insta-basketball:hover {
  transform: scale(1.03);
}

.insta-basketball:hover .insta-text {
  color: #fcaf45;
}

/* Footer Instagram Styles */
.fusszeile-sozial {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.fusszeile-sozial a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--bg-light);
  transition: all var(--transition);
  padding: 0.5rem;
  border-radius: 8px;
}

.footer-insta-label {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

.footer-insta-herrenfussball:hover {
  background: rgba(131, 58, 180, 0.1);
  transform: translateY(-3px);
}

.footer-insta-herrenfussball:hover svg path {
  filter: brightness(1.2);
}

.footer-insta-jugend:hover {
  background: rgba(64, 93, 230, 0.1);
  transform: translateY(-3px) rotate(-3deg);
}

.footer-insta-jugend:hover svg path {
  filter: brightness(1.2);
}

.footer-insta-volleyball:hover {
  background: rgba(225, 48, 108, 0.1);
  transform: translateY(-3px) scale(1.05);
}

.footer-insta-volleyball:hover svg path {
  filter: brightness(1.2);
}

.footer-insta-basketball:hover {
  background: rgba(252, 175, 69, 0.1);
  transform: translateY(-3px) scale(1.05);
}

.footer-insta-basketball:hover svg path {
  filter: brightness(1.2);
}

.trenner-vertikal {
  width: 1px;
  height: 20px;
  background: var(--bg-light);
  margin: 0 0.5rem;
}

.sprachen-wechsel {
  padding: 0.4rem 1rem;
  background: var(--primary-color);
  border-radius: 3px;
  color: var(--bg-light);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
}

.sprachen-wechsel:hover {
  background: var(--accent-color);
  color: var(--primary-dark);
}

.sprachen-wechsel svg {
  width: 14px;
  height: 14px;
  opacity: 0.9;
}

/* Navigation */
header {
  background: var(--primary-dark);
  box-shadow: 0 2px 8px rgba(42, 41, 39, 0.4);
  position: fixed;
  top: var(--top-bar-height);
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: var(--z-header);
  border-bottom: 1px solid var(--text-light);
}

.nav-leiste {
  padding: 0;
}

.nav-leiste .behaelter {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 0 2rem;
  max-width: 100%;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* 70px Bild + 2x 0.5rem passen in die 90px hohe Leiste; 0.75rem lief oben heraus. */
  padding: 0.5rem 0;
  text-decoration: none;
  cursor: pointer;
}

.logo-bild {
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-top: 1px;
}

.logo-symbol {
  width: 70px;
  height: 70px;
  background-image: url('/assets/logos/vereinslogo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 4px;
}

.logo-symbol svg {
  display: none;
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 4px;
}

.logo-haupt {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text-on-dark);
  letter-spacing: -0.5px;
  line-height: 1;
  /* Vereinsname ist ein fester Kurztext: die Navigation hatte die Logo-Spalte
     auf Wortbreite gedrueckt, wodurch der Name dreizeilig aus der Leiste lief. */
  white-space: nowrap;
}

.logo-unter {
  font-size: 0.75rem;
  color: var(--accent-color);
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Mobile Menu Toggle */
.mobil-menue-umschalter {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10;
}

.mobil-menue-umschalter .hamburger {
  width: 100%;
  height: 3px;
  background: var(--bg-light);
  border-radius: 10px;
  transition: all var(--transition);
  transform-origin: 1px;
}

.mobil-menue-umschalter.aktiv .hamburger:nth-child(1) {
  transform: rotate(45deg);
}

.mobil-menue-umschalter.aktiv .hamburger:nth-child(2) {
  opacity: 0;
  transform: translateX(20px);
}

.mobil-menue-umschalter.aktiv .hamburger:nth-child(3) {
  transform: rotate(-45deg);
}

/* Navigation Menu */
.nav-menue {
  display: flex;
  list-style: none;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
  width: 100%;
}

.nav-element {
  position: relative;
}

/* Mobile buttons hidden on desktop */
.nav-aktionen-mobil {
  display: none;
}

.nav-verknuepfung,
.nav-verknuepfung:link,
.nav-verknuepfung:visited {
  color: var(--text-on-dark);
}

.nav-verknuepfung {
  color: var(--text-on-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.3px;
  /* 0.75rem statt 1.25rem: acht Menuepunkte sparen so 128px und die Leiste
     passt auf deutlich schmalere Bildschirme, ohne abgeschnitten zu werden. */
  padding: 1.5rem 0.75rem;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition);
  border-bottom: 2px solid transparent;
  position: relative;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Dropdown-Pfeil */
.dropdown .nav-verknuepfung::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 0.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f5e826'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all var(--transition);
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.dropdown:hover .nav-verknuepfung::before {
  transform: scale(1.2) translateY(3px);
  filter: drop-shadow(0 2px 4px rgba(245, 232, 38, 0.4));
}

.nav-verknuepfung::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-color);
  transform: translateX(-50%);
  transition: width var(--transition);
}

.nav-verknuepfung:hover::after,
.nav-verknuepfung.aktiv::after {
  width: 80%;
}

.nav-verknuepfung:hover,
.nav-verknuepfung.aktiv {
  color: var(--accent-color);
}

/* CTA Button - Mitglied werden */
.nav-cta {
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
}

.nav-button-mitglied {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  margin-top: 5px;
  background: var(--accent-color);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--transition);
  box-shadow: 0 2px 8px rgba(245, 232, 38, 0.3);
}

.nav-button-mitglied:hover {
  background: var(--pure-white);
  color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 232, 38, 0.5);
}

.nav-button-mitglied svg {
  width: 16px;
  height: 16px;
}

/* Dropdown Menu */
.dropdown-menue {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--text-light);
  min-width: 200px;
  box-shadow: 0 6px 20px rgba(42, 41, 39, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  border-top: 3px solid var(--primary-color);
  z-index: var(--z-dropdown);
  pointer-events: none;
}

.nav-element:hover .dropdown-menue,
.nav-element:focus-within .dropdown-menue {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-menue a {
  display: block;
  padding: 0.75rem 1.25rem;
  color: var(--bg-light);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--transition);
}

.dropdown-menue a:hover {
  background: var(--accent-color);
  color: var(--primary-color);
  padding-left: 1.5rem;
}

/* Navigation Actions */
.nav-aktionen {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.taste-shop,
.taste-admin {
  background: var(--primary-dark);
  color: var(--accent-color);
  padding: 0.65rem 1.25rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  transition: all var(--transition);
  box-shadow: 0 2px 8px rgba(42, 41, 39, 0.15);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.taste-admin {
  background: var(--primary-dark);
}

.taste-shop svg,
.taste-admin svg {
  flex-shrink: 0;
}

.taste-shop:hover,
.taste-admin:hover {
  background: var(--accent-color);
  color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(215, 226, 0, 0.3);
}

/* Burger Menu */

/* Hero Section - Interaktive Bildelemente */
/* ============================================
   FLIEGENDER BALL
   Ausnahme von der 400-ms-Grenze aus Regel 2 - ausdruecklich freigegeben.
   Selten, langsam und blass: Deko, kein Blickfang. Die Bewegung selbst
   steuert js/ball.js.
   ============================================ */

.ball-flug {
  position: fixed;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
  z-index: var(--z-deko);
  pointer-events: none;
  opacity: 0;
  /* Weicher Schatten, damit der Ball auch auf hellem Grund Kontur hat -
     ohne ihn verschwaemme er im Off-White. */
  filter: drop-shadow(0 2px 6px rgba(var(--rgb-primary-dark), 0.35));
  will-change: transform, opacity;
}

@media (max-width: 600px) {
  .ball-flug {
    width: 38px;
    height: 38px;
  }
}

/* Doppelt gesichert: Das Modul startet gar nicht erst, und falls doch
   jemand die Einstellung spaeter setzt, bleibt der Ball unsichtbar. */
@media (prefers-reduced-motion: reduce) {
  .ball-flug {
    display: none;
  }
}

/* ============================================
   VIDEO-HERO
   Das Video ist Dekoration. Es traegt keine Information, die nicht auch
   im Text steht - deshalb aria-hidden, kein Ton, keine Bedienelemente.
   ============================================ */

.video-held {
  position: relative;
  /* Der Ergebnis-Ticker ist entfernt - seine Hoehe darf nicht mehr
     eingerechnet werden, sonst klafft eine 60px-Luecke unter dem Kopf. */
  margin-top: calc(var(--top-bar-height) + var(--header-height));
  min-height: clamp(420px, 62vh, 640px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--primary-dark);
}

.video-held-buehne {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.video-held-medium {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Zwei Verlaeufe: seitlich dunkler fuer den Text, dazu eine Grundabdunklung.
   Ohne den Schleier stuende die Schrift stellenweise mit 1,9:1 auf dem Rasen. */
.video-held-schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(var(--rgb-primary-dark), 0.78) 0%,
      rgba(var(--rgb-primary-dark), 0.5) 50%,
      rgba(var(--rgb-primary-dark), 0.05) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(var(--rgb-primary-dark), 0.38) 0%,
      rgba(var(--rgb-primary-dark), 0.12) 40%,
      rgba(var(--rgb-primary-dark), 0.38) 100%
    );
}

.video-held-inhalt {
  position: relative;
  z-index: 1;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  max-width: 1900px;
  min-width: 0;
}

.video-held-marke {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-color);
}

.video-held-titel {
  margin: 0 0 1.25rem;
  max-width: 16ch;
  font-size: clamp(2rem, 5.2vw, 3.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
}

.video-held-text {
  margin: 0 0 2rem;
  max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.65;
  color: var(--text-on-dark);
}

.video-held-tasten {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.video-held-taste-primaer,
.video-held-taste-sekundaer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.9rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: all var(--transition);
}

.video-held-taste-primaer {
  background: var(--accent-color);
  color: var(--primary-dark);
  border: 2px solid var(--accent-color);
  box-shadow: var(--shadow-accent);
}

.video-held-taste-primaer:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Gefuellt statt Umriss: auf dem bewegten Video war der Rahmen kaum zu
   sehen und die Schrift lag mal auf Rasen, mal auf Flutlicht. Hell gefuellt
   statt gelb, damit die Haupttaste daneben die Haupttaste bleibt. */
.video-held-taste-sekundaer {
  background: var(--text-on-dark);
  color: var(--primary-dark);
  border: 2px solid var(--text-on-dark);
  box-shadow: var(--shadow-md);
}

.video-held-taste-sekundaer:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Wer keine Bewegung moechte, bekommt das Standbild. */
@media (prefers-reduced-motion: reduce) {
  .video-held-medium {
    display: none;
  }

  .video-held-buehne {
    background-image: url('/assets/hero/hero-poster.webp');
    background-size: cover;
    background-position: center;
  }
}

@media (max-width: 768px) {
  .video-held {
    min-height: clamp(380px, 70vh, 520px);
  }

  .video-held-inhalt {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .video-held-tasten {
    gap: 0.75rem;
  }

  .video-held-taste-primaer,
  .video-held-taste-sekundaer {
    padding: 0.8rem 1.4rem;
    font-size: 0.95rem;
  }
}

/* Das Kartenraster folgt direkt unter dem Video und braucht den
   Kopfabstand nicht mehr - der sitzt jetzt am Video-Hero. */* Hero Cards - Professional Overlay Style *.held-karte:hover /* Grid Areas - Main card stays large */* Hero Cards Grid-Zuweisung basierend auf Reihenfolge im DOM */* Laufender Ergebnisbanner */
/* ========================================
   ERGEBNIS-TICKER - MODERN CI DESIGN
   CI: var(--accent-color), var(--bg-light), var(--primary-dark), var(--text-light)
   ======================================== *@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.15);
  }
}@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}.punktzahl-trenner {
  opacity: 0.5;
  font-size: 0.9rem;
  color: var(--bg-light);
}@keyframes live-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(45, 122, 62, 0.7);
  }
  50% {
    opacity: 0.85;
    box-shadow: 0 0 8px 3px rgba(45, 122, 62, 0.4);
  }
}

/* News Section */* Category Filter */* News Grid */* News Cards - Professional FC Bayern Style */* Featured Card - Same size in 3-column grid */
.neuigkeiten-karte-hervorgehoben {
  min-height: 260px !important;
}/* Load More Button */
.neuigkeiten-mehr-laden {
  text-align: center;
  padding-top: 1rem;
}/* Mitgliedermagazin Section */
.magazin-bereich {
  background: var(--primary-dark);
  color: var(--bg-light);
  padding: 4rem 0;
  position: relative;
  box-shadow: inset 0 2px 20px rgba(42, 41, 39, 0.3);
}

.magazin-kopfzeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.magazin-kopfzeile h2 {
  color: var(--bg-light);
  text-align: left;
  margin-bottom: 0;
}

.magazin-kopfzeile h2::after {
  display: none;
}

.magazin-mehr {
  color: var(--bg-light);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: all var(--transition);
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

.magazin-mehr:hover {
  background: var(--accent-color);
  color: var(--primary-dark);
  gap: 0.5rem;
}

.magazin-schieber {
  position: relative;
  overflow: hidden;
  margin: 0 -1rem;
  padding: 0 3rem;
}

.magazin-spur {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 1rem 1rem;
}

.magazin-spur::-webkit-scrollbar {
  display: none;
}

/* Magazine Cards */
.magazin-karte {
  flex: 0 0 calc(25% - 1.125rem);
  min-width: 280px;
  background: var(--bg-light);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow:
    0 2px 8px rgba(42, 41, 39, 0.08),
    0 4px 16px rgba(42, 41, 39, 0.04);
}

.magazin-karte:hover {
  transform: translateY(-8px);
  box-shadow:
    0 8px 24px rgba(42, 41, 39, 0.12),
    0 16px 48px rgba(42, 41, 39, 0.08);
  background: var(--bg-light);
}

.magazin-bild {
  position: relative;
  width: 100%;
  aspect-ratio: 16/11;
  overflow: hidden;
}

.magazin-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.magazin-karte:hover .magazin-bild img {
  transform: scale(1.08);
}

.video-anzeige {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: var(--primary-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  border: 3px solid var(--bg-light);
  transition: all var(--transition);
}

.magazin-karte:hover .video-anzeige {
  background: var(--accent-color);
  border-color: var(--primary-dark);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(42, 41, 39, 0.3);
}

.video-anzeige svg {
  margin-left: 3px;
  color: var(--bg-light);
}

.magazin-kategorie {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: var(--primary-dark);
  color: var(--accent-color);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 2px 12px rgba(42, 41, 39, 0.2);
}

.magazin-inhalt {
  padding: 1.5rem;
}

.magazin-inhalt h3 {
  font-size: 1.1rem;
  color: var(--text-dark);
  line-height: 1.4;
  font-weight: 600;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: manual;
  white-space: normal;
  max-width: 100%;
}

/* Slider Navigation */
.schieber-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: var(--primary-dark);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  box-shadow: 0 4px 16px rgba(42, 41, 39, 0.15);
}

.schieber-nav svg {
  color: var(--accent-color);
}

.schieber-nav:hover {
  background: var(--accent-color);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 24px rgba(215, 226, 0, 0.3);
}

.schieber-nav:hover svg {
  color: var(--primary-dark);
}

.schieber-zurueck {
  left: 0.5rem;
}

.schieber-weiter {
  right: 0.5rem;
}

/* Slider Dots */
.schieber-punkte {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.punkt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-light);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
}

.punkt:hover {
  background: var(--bg-light);
}

.punkt.aktiv {
  background: var(--accent-color);
  width: 30px;
  border-radius: 5px;
}

/* Section Header */
.bereich-kopfzeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Events Section - Clean Professional Style */
.termine-bereich {
  padding: 5rem 2rem !important;
  background: var(--bg-light) !important;
}

.termine-bereich .behaelter {
  max-width: 1400px !important;
  margin: 0 auto !important;
}

.termine-bereich h2 {
  font-size: 2.5rem !important;
  text-align: center !important;
  margin-bottom: 3rem !important;
  color: var(--primary-dark) !important;
  font-weight: 700 !important;
}

.termine-bereich h2::after {
  display: none !important;
}/* ===== EVENT CARDS ===== */* Bildzone: feste Höhe, min-height:0 überschreibt wireframe-placeholder */
/* Ein Logo ist kein Foto: es wird nicht beschnitten, sondern mit Luft auf
   ruhigem Grund zentriert. Das Jahn-Rot (#e3000f) braucht eine helle
   Flaeche, sonst verliert es seine Wirkung. */
/* Ueber .termin-karte adressiert (0,2,0): .termin-bild setzt weiter unten
   display:block !important und wuerde sonst gewinnen - das Logo klebte links. */* Der Verlauf ueber Fotos gehoert nicht ueber ein Logo. */* :not() nimmt die Logokachel aus - ein Logo wird eingepasst, nicht
   beschnitten. Ein zweites !important dagegenzusetzen waere der falsche
   Weg (Regel 7). */* Content-Bereich: reine Spalte, 3-zonen (header → text → footer) */* Zeile 1: Datum-Badge links, Kategorie-Badge rechts */* Zeile 2: Titel (max. 2 Zeilen) */* Zeile 3: Beschreibung (max. 2 Zeilen, füllt freien Raum) */* Zeile 4: CTA – immer am unteren Rand */* Section More Link */
/* Prominentere Fassung des Abschnitts-Knopfes. Groesser und mit mehr Luft,
   aber in derselben CI-Sprache - kein zweiter Stil. */
.bereich-mehr-gross {
  padding: 1rem 2.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-accent);
}

.bereich-mehr-gross:hover {
  box-shadow: var(--shadow-lg);
}

@media (max-width: 480px) {
  .bereich-mehr-gross {
    padding: 0.9rem 1.4rem;
    font-size: 0.95rem;
  }
}


.bereich-mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary-dark);
  text-decoration: none;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  background: var(--accent-color);
  border-radius: 25px;
  transition: all var(--transition);
  border: 2px solid var(--accent-color);
}

.bereich-mehr:hover {
  background: var(--accent-color);
  color: var(--primary-color);
  transform: translateX(5px);
}

.bereich-mehr svg {
  transition: transform var(--transition);
}

.bereich-mehr:hover svg {
  transform: translateX(3px);
}

/* Achievements Section */
.erfolge-bereich {
  padding: 5rem 2rem;
  background: var(--primary-dark);
  position: relative;
  overflow: hidden;
}

.erfolge-bereich h2 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 3rem;
  color: var(--bg-light);
  font-weight: 700;
}

.erfolge-schieber {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

.erfolge-spur {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 1rem 0;
}

.erfolge-spur::-webkit-scrollbar {
  display: none;
}

.erfolg-karte {
  min-width: 280px;
  min-height: 200px;
  height: auto;
  background: var(--bg-light);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  text-align: center;
  border: 2px solid rgba(215, 226, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  flex-shrink: 0;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  box-shadow:
    0 2px 8px rgba(42, 41, 39, 0.08),
    0 4px 16px rgba(42, 41, 39, 0.04);
}

.erfolg-karte::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  padding: 2px;
  background: transparent;
  -webkit-mask:
    linear-gradient(var(--bg-light) 0 0) content-box,
    linear-gradient(var(--bg-light) 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(var(--bg-light) 0 0) content-box,
    linear-gradient(var(--bg-light) 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.erfolg-karte:hover::before {
  opacity: 1;
}

.erfolg-karte:hover {
  transform: translateY(-15px) scale(1.03);
  border-color: var(--accent-color);
  box-shadow:
    0 8px 24px rgba(42, 41, 39, 0.12),
    0 16px 48px rgba(42, 41, 39, 0.08);
  background: var(--primary-dark);
}

.erfolg-karte:hover .erfolg-zaehler {
  color: var(--accent-color);
}

.erfolg-karte:hover h3 {
  color: var(--bg-light);
}

.erfolg-karte:hover .erfolg-jahr {
  color: var(--bg-light);
}

.erfolg-zaehler {
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary-dark);
  margin-bottom: 0.5rem;
  display: block;
}

.erfolg-karte h3 {
  font-size: 1.3rem;
  color: var(--primary-dark);
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: manual;
  white-space: normal;
  max-width: 100%;
}

.erfolg-jahr {
  font-size: 0.9rem;
  color: var(--primary-color);
  margin: 0;
  font-weight: 500;
  font-style: italic;
}

.schieber-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(51, 51, 51, 0.95);
  border: 2px solid rgba(245, 232, 38, 0.3);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.schieber-nav:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 6px 20px rgba(245, 232, 38, 0.4);
}

.schieber-zurueck {
  left: -25px;
}

.schieber-weiter {
  right: -25px;
}

.schieber-nav svg {
  width: 26px;
  height: 26px;
  fill: var(--accent-color);
  transition: fill 0.3s ease;
}

.schieber-nav:hover svg {
  fill: var(--primary-dark);
}

.schieber-punkte {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.schieber-punkte .punkt {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(250, 250, 250, 0.3);
  border: 2px solid rgba(250, 250, 250, 0.5);
  cursor: pointer;
  transition: all var(--transition);
  padding: 0;
}

.schieber-punkte .punkt:hover {
  background: rgba(245, 232, 38, 0.6);
  border-color: var(--accent-color);
  transform: scale(1.2);
}

.schieber-punkte .punkt.aktiv {
  background: var(--accent-color);
  border-color: var(--accent-color);
  width: 32px;
  border-radius: 6px;
}

/* Buttons */
.taste {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all var(--transition);
  cursor: pointer;
  border: none;
  font-size: 1rem;
}

.taste-primaer {
  background: var(--primary-dark);
  color: var(--accent-color);
  box-shadow: 0 3px 10px rgba(42, 41, 39, 0.2);
}

.taste-primaer:hover {
  background: var(--accent-color);
  color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(215, 226, 0, 0.3);
}

.taste-sekundaer {
  background: transparent;
  color: var(--primary-dark);
  border: 2px solid var(--primary-dark);
}

.taste-sekundaer:hover {
  background: var(--accent-color);
  color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 232, 38, 0.3);
}

/* Sections */
section {
  padding: 5rem 0;
}

section h2 {
  text-align: center;
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 3rem;
  position: relative;
}

section h2::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: var(--accent-color);
  margin: 1rem auto 0;
  border-radius: 2px;
}

/* Info Section */
.ueber-uns {
  background: var(--bg-light);
  box-shadow: inset 0 0 40px rgba(42, 41, 39, 0.15);
}

.ueber-uns-inhalt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.ueber-uns-text {
  background: var(--bg-light);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(42, 41, 39, 0.15);
}

.ueber-uns-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-light);
  margin-bottom: 1rem;
}

.ueber-uns-statistiken {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.statistik-element {
  text-align: center;
  padding: 2rem;
  background: var(--bg-light);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(42, 41, 39, 0.15);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.statistik-element:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(42, 41, 39, 0.2);
}

.statistik-element h3 {
  font-size: 3rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.statistik-element p {
  color: var(--text-medium);
  font-size: 1rem;
}

/* Mannschaften Section */
.mannschaften {
  box-shadow: inset 0 0 40px rgba(42, 41, 39, 0.15);
}.mannschaft-symbol {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  color: var(--primary-color);
}

.mannschaft-symbol svg {
  width: 100%;
  height: 100%;
}/* News Section (Legacy - verwendet modernen .neuigkeiten-bereich) */
.news {
  background: var(--bg-light);
}

.mehr-lesen {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition);
}

.mehr-lesen:hover {
  color: var(--primary-dark);
}

/* Kontakt Section */
.kontakt {
  box-shadow: inset 0 0 40px rgba(42, 41, 39, 0.15);
}

.kontakt-inhalt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}.kontakt-formular {
  background: var(--bg-light);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(42, 41, 39, 0.15);
}

.kontakt-formular form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kontakt-formular input,
.kontakt-formular textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  border: 2px solid var(--border-light);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  background: var(--bg-light);
  box-shadow: 0 2px 6px rgba(42, 41, 39, 0.1);
}

.kontakt-formular input:focus,
.kontakt-formular textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 4px 12px rgba(215, 226, 0, 0.2);
}

.kontakt-formular textarea {
  resize: vertical;
}

/* Footer */
footer {
  background: var(--primary-dark);
  color: var(--bg-light);
}

/* Partners Section */
.partner-bereich {
  background: #1a1918;
  padding: 3.5rem 2rem;
  border-bottom: 3px solid var(--accent-color);
  position: relative;
}

.partner-bereich h2 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 2.5rem;
  color: var(--accent-color);
  text-transform: uppercase;
}

.partner-gitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  align-items: stretch;
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  color: var(--bg-light);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  opacity: 0.5;
  transition: all var(--transition);
  padding: 1.75rem 1.5rem;
  cursor: pointer;
  border: 1px solid rgba(245, 232, 38, 0.15);
  border-radius: 12px;
  background: rgba(250, 250, 250, 0.04);
}

.partner-logo:hover {
  opacity: 1;
  color: var(--accent-color);
  transform: translateY(-3px);
  border-color: rgba(245, 232, 38, 0.6);
  background: rgba(245, 232, 38, 0.07);
  box-shadow: 0 6px 24px rgba(245, 232, 38, 0.15);
}

/* fusszeile Content */
.fusszeile-inhalt {
  background: var(--primary-dark);
  padding: 5rem 2rem 3rem;
  position: relative;
}

.fusszeile-gitter {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4rem;
  max-width: 1400px;
  margin: 0 auto 5rem;
}

.fusszeile-spalte h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
  padding-bottom: 0.75rem;
}

.fusszeile-spalte h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--accent-color);
  border-radius: 2px;
}

.fusszeile-spalte ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fusszeile-spalte ul li {
  margin-bottom: 1rem;
}

.fusszeile-spalte a {
  color: var(--bg-light);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all var(--transition);
  display: inline-block;
  opacity: 0.8;
  position: relative;
  padding-left: 0;
}

.fusszeile-spalte a::before {
  content: '→';
  position: absolute;
  left: -20px;
  opacity: 0;
  transition: all var(--transition);
  color: var(--accent-color);
}

.fusszeile-spalte a:hover {
  color: var(--accent-color);
  opacity: 1;
  padding-left: 20px;
}

.fusszeile-spalte a:hover::before {
  left: 0;
  opacity: 1;
}

/* fusszeile Center */
.fusszeile-mitte {
  text-align: center;
  padding: 2.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 2rem;
  background: transparent;
}

.fusszeile-logo {
  margin-bottom: 2rem;
}

.fusszeile-logo img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 4px 16px rgba(245, 232, 38, 0.15));
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: block;
  margin: 0 auto;
}

.fusszeile-logo:hover img {
  transform: scale(1.06);
  opacity: 1;
}

.fusszeile-logo svg {
  color: var(--primary-dark);
  filter: drop-shadow(0 4px 12px rgba(42, 41, 39, 0.15));
  transition: transform var(--transition);
}

.fusszeile-logo:hover svg {
  transform: scale(1.05);
}

.fusszeile-verknuepfungen-horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.95rem;
}

.fusszeile-verknuepfungen-horizontal a {
  color: var(--bg-light);
  text-decoration: none;
  transition: all var(--transition);
  padding: 0.25rem 0;
  opacity: 0.8;
  font-weight: 500;
}

.fusszeile-verknuepfungen-horizontal a:hover {
  color: var(--accent-color);
  opacity: 1;
  font-weight: 600;
}

.fusszeile-verknuepfungen-horizontal .trenner {
  color: var(--accent-color);
  font-size: 0.7rem;
  opacity: 0.4;
}

/* fusszeile Social */
.fusszeile-sozial {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}

.fusszeile-sozial a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--bg-light);
  transition: all var(--transition);
  padding: 0.5rem;
  border-radius: 8px;
}

.fusszeile-sozial a svg {
  transition: all var(--transition);
}

.fusszeile-sozial .footer-insta-label {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
  text-align: center;
}

.fusszeile-sozial a:hover {
  transform: translateY(-5px);
}

.fusszeile-sozial a:hover svg path {
  filter: brightness(1.3);
}

.fusszeile-sozial a:hover .footer-insta-label {
  opacity: 1;
}

/* fusszeile Legal */
/* Footer Spalten (Unterseiten) */
.fusszeile-spalten {
  display: flex;
  gap: 3rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.fusszeile-spalten .fusszeile-spalte {
  flex: 1;
  min-width: 180px;
}

/* Footer Rechtlich (Unterseiten) */
/* Umsetzungshinweis in der Fusszeile - steht als letzte Zeile unter den
   rechtlichen Verknuepfungen und bleibt bewusst leise. Der Abstand nach oben
   trennt ihn von den Links, ohne eine eigene Zeile Weissraum zu erzwingen. */
.umsetzung-hinweis {
  margin: 1.25rem 0 0;
  font-size: 0.8rem;
  /* 5,2:1 auf dem dunklen Fusszeilengrund */
  color: var(--text-secondary);
}

.umsetzung-hinweis a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.umsetzung-hinweis a:hover {
  color: var(--accent-color);
}

.fusszeile-rechtlich-inhalt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 0;
}

.fusszeile-copyright {
  font-size: 0.82rem;
  color: rgba(250, 250, 250, 0.55);
  margin: 0;
}

.fusszeile-rechtlich {
  text-align: center;
  padding-bottom: 2rem;
}

.fusszeile-rechtlich .urheberrecht {
  color: var(--bg-light);
  font-size: 0.9rem;
  margin-bottom: 2rem;
  font-weight: 500;
  opacity: 0.85;
}

.rechtlich-verknuepfungen {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.rechtlich-verknuepfungen a {
  color: var(--bg-light);
  text-decoration: none;
  font-size: 0.85rem;
  transition: all var(--transition);
  position: relative;
  opacity: 0.85;
}

.rechtlich-verknuepfungen a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-color);
  transition: width var(--transition);
}

.rechtlich-verknuepfungen a:hover {
  color: var(--accent-color);
  opacity: 1;
}

.rechtlich-verknuepfungen a:hover::after {
  width: 100%;
}

/* Responsive Design */
@media (max-width: 968px) {
  :root {
    --top-bar-height: 0px;
    --header-height: 70px;
    --total-header-height: var(--header-height);
  }

  .behaelter,
  .content-container {
    padding: 0 1rem;
  }

  .obere-leiste {
    display: none;
  }

  header {
    top: 0;
  }

  /* Die Navigation ist hier ein eingeblendetes Panel (position: fixed) und
     belegt keine Spalte mehr. Das Desktop-Raster liess trotzdem eine mittlere
     Spalte samt zweimal 3rem Abstand stehen - dadurch wurde der Menue-Knopf
     bei 320px aus dem Bildschirm geschoben. */
  .nav-leiste .behaelter {
    grid-template-columns: 1fr auto;
    gap: 1rem;
  }

  /* Mobile Menu Toggle */
  .mobil-menue-umschalter {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 26px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    min-height: auto;
    z-index: 10;
    flex-shrink: 0;
    margin-left: auto;
  }

  .mobil-menue-umschalter .hamburger {
    width: 100%;
    height: 3px;
    background: var(--bg-light);
    border-radius: 10px;
    transition: all var(--transition);
    transform-origin: 1px;
  }

  .nav-leiste .behaelter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 100%;
  }

  .logo {
    flex-shrink: 0;
  }

  .logo-bild {
    width: 50px;
    height: 50px;
  }

  .logo-symbol {
    font-size: 2.5rem;
  }

  .logo-haupt {
    font-size: 1.1rem;
  }

  .logo-unter {
    font-size: 0.65rem;
  }

  .nav-menue {
    position: fixed;
    left: -100%;
    top: var(--header-height);
    flex-direction: column;
    background-color: var(--bg-light);
    width: 100%;
    text-align: left;
    transition: left var(--transition);
    box-shadow: var(--shadow-lg);
    padding: 0;
    gap: 0;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    z-index: var(--z-nav-panel);
  }

  .nav-menue.aktiv {
    left: 0;
  }

  /* Mobile Buttons im Menu anzeigen */
  .nav-aktionen-mobil {
    display: block;
    border-bottom: none;
    list-style: none;
  }

  .nav-aktionen-mobil:first-of-type {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--primary-color);
  }

  .nav-aktionen-mobil a {
    width: calc(100% - 3rem);
    margin: 0 1.5rem 0.75rem 1.5rem;
    border-radius: 6px;
    display: flex;
    padding: 1rem 1.5rem;
    box-shadow: 0 2px 12px rgba(42, 41, 39, 0.15);
  }

  .nav-aktionen-mobil:last-of-type a {
    margin-bottom: 1.5rem;
  }

  /* Desktop Buttons verstecken */
  .nav-aktionen-desktop {
    display: none;
  }

  .nav-verknuepfung,
  .nav-verknuepfung:link,
  .nav-verknuepfung:visited {
    border-bottom: 1px solid var(--header-border);
    border-left: 3px solid transparent;
    padding: 1rem 1.5rem;
    color: var(--text-on-light);
    margin-top: 0;
  }

  .nav-verknuepfung.aktiv,
  .nav-verknuepfung:hover {
    border-left-color: var(--accent-color);
    border-bottom-color: var(--header-border);
    background: var(--bg-light);
    color: var(--text-on-light);
  }

  .nav-verknuepfung::after {
    display: none;
  }

  /* Mobile CTA Button Styling */
  .nav-cta {
    margin-left: 0;
    padding: 0 1.5rem 1rem 1.5rem;
  }

  .nav-button-mitglied {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
  }

  .dropdown-menue {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(42, 41, 39, 0.05);
    display: none;
  }

  .nav-element:hover .dropdown-menue,
  .nav-element.aktiv .dropdown-menue {
    display: block;
  }

  .dropdown-menue a {
    padding: 0.75rem 2.5rem;
    font-size: 0.85rem;
    color: var(--text-on-light);
    display: block;
    border-bottom: 1px solid var(--header-border);
  }

  .dropdown-menue a:hover {
    background: rgba(245, 232, 38, 0.1);
    color: var(--primary-dark);
  }

  .taste-shop,
  .taste-admin {
    width: 100%;
    text-align: center;
    justify-content: center;
  }  /* Hero-Cards auf Tablet horizontal mit kleinerem Bild *  .held-inhalt h1 {
    font-size: 2.5rem;
  }

  .held-inhalt p {
    font-size: 1.2rem;
  }

  .ueber-uns-inhalt,
  .kontakt-inhalt {
    grid-template-columns: 1fr;
  }

  .ueber-uns-statistiken {
    grid-template-columns: 1fr;
  }  /* Grid-Elemente haben min-width: auto und werden sonst von der laengsten
     E-Mail-Adresse breiter gehalten als der Bildschirm. Das gilt auch fuer die
     Karten selbst, die ihrerseits Rasterelemente sind. */
  .kontakt-info,
  .kontakt-formular,
  .kontakt-element {
    min-width: 0;
  }

  .kontakt-info,
  .kontakt-formular {
    padding: 1.5rem;
  }  section h2 {
    font-size: 2rem;
  }

  /* News Section - Tablet *  .neuigkeiten-karte-hervorgehoben {
    grid-column: 1 / -1;
  }  /* Events Section - Tablet *  /* Achievements Section - Tablet */
  .erfolg-karte {
    min-width: 220px;
    padding: 2rem 1.75rem;
  }

  .schieber-nav.prev {
    left: -20px;
  }

  .schieber-nav.next {
    right: -20px;
  }

  /* Magazine Section - Tablet */
  .magazin-karte {
    flex: 0 0 calc(33.333% - 1rem);
    min-width: 250px;
  }

  .magazin-schieber {
    padding: 0 2.5rem;
  }

  .schieber-nav {
    width: 42px;
    height: 42px;
  }  /* fusszeile - Tablet */
  .partner-gitter {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .fusszeile-gitter {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
  }

  .fusszeile-verknuepfungen-horizontal {
    gap: 0.75rem;
  }

  .rechtlich-verknuepfungen {
    gap: 1.5rem;
  }
}

/* Ab der waagerechten Leiste sitzt "Mitglied werden" am rechten Rand.
   Die Liste fuellt die Restbreite, packt ihre Punkte aber links - ohne
   margin-left blieb rechts vom Knopf eine Luecke stehen. */
@media (min-width: 1280px) {
  .nav-menue .nav-cta {
    margin-left: auto;
  }
}

/* 1280-1439px: die Leiste passt, aber knapp. Etwas engere Polsterung, damit
   sie nicht an den Logo-Block stoesst. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .nav-verknuepfung {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }

  .nav-button-mitglied {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Tablet & schmale Laptops: Navigation passt nicht horizontal rein → Hamburger.
   Seit alle Sparten in einem Dropdown liegen, sind es statt acht nur noch
   sechs Punkte. Gemessen brauchen sie neben dem Logo 1313px - der Umschaltpunkt
   liegt deshalb bei 1280px und nicht mehr bei 1500px. Damit bekommen die
   verbreiteten 1366er- und 1440er-Laptops wieder die waagerechte Leiste. */
@media (min-width: 969px) and (max-width: 1279px) {
  :root {
    --header-height: 70px;
    --total-header-height: var(--header-height);
    --top-bar-height: 0px;
  }

  .obere-leiste {
    display: none;
  }

  header {
    top: 0;
  }

  .nav-leiste .behaelter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 100%;
  }

  .logo-bild {
    width: 50px;
    height: 50px;
  }

  .logo-haupt {
    font-size: 1.1rem;
  }

  .mobil-menue-umschalter {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 26px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    min-height: auto;
    z-index: 10;
    flex-shrink: 0;
    margin-left: auto;
  }

  .nav-menue {
    position: fixed;
    left: -100%;
    top: var(--header-height);
    flex-direction: column;
    background-color: var(--bg-light);
    width: 100%;
    text-align: left;
    transition: left var(--transition);
    box-shadow: var(--shadow-lg);
    padding: 0;
    gap: 0;
    justify-content: flex-start;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    z-index: var(--z-nav-panel);
  }

  .nav-menue.aktiv {
    left: 0;
  }

  .nav-aktionen-mobil {
    display: block;
    border-bottom: none;
    list-style: none;
  }

  .nav-aktionen-desktop {
    display: none;
  }

  .nav-verknuepfung,
  .nav-verknuepfung:link,
  .nav-verknuepfung:visited {
    border-bottom: 1px solid var(--header-border);
    border-left: 3px solid transparent;
    padding: 1rem 1.5rem;
    font-size: 0.85rem;
    margin-top: 0;
    color: var(--text-on-light);
    white-space: normal;
  }

  .nav-verknuepfung.aktiv,
  .nav-verknuepfung:hover {
    border-left-color: var(--accent-color);
    border-bottom-color: var(--header-border);
    background: var(--bg-light);
    color: var(--text-on-light);
  }

  .nav-verknuepfung::after {
    display: none;
  }

  .dropdown-menue {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(42, 41, 39, 0.05);
    display: none;
  }

  .nav-element:hover .dropdown-menue,
  .nav-element.aktiv .dropdown-menue {
    display: block;
  }

  .dropdown-menue a {
    padding: 0.75rem 2.5rem;
    font-size: 0.85rem;
    color: var(--text-on-light);
    display: block;
    border-bottom: 1px solid var(--header-border);
  }

  .nav-cta {
    margin-left: 0;
    padding: 0 1.5rem 1rem 1.5rem;
  }

  .nav-button-mitglied {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  /* Nur 480px-spezifische Styles, die NICHT im neuen 768px-Block stehen */

  .held-tasten {
    flex-direction: column;
  }

  .taste {
    width: 100%;
  }

  .neuigkeiten-karte-hervorgehoben {
    grid-column: span 1;
  }  .termine-bereich h2 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
  }

  .erfolge-bereich h2 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
  }

  .trophy-icon {
    width: 60px;
    height: 60px;
  }

  .schieber-nav {
    width: 40px;
    height: 40px;
  }

  .schieber-nav.prev {
    left: -15px;
  }

  .schieber-nav.next {
    right: -15px;
  }

  .mannschaften-bereich h2 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
  }

  .ueber-uns-text h3 {
    font-size: 1.6rem;
  }

  .ueber-uns-text p {
    font-size: 0.95rem;
  }

  .ueber-uns-statistiken {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .statistik-karte {
    padding: 1.75rem 1.25rem;
  }

  .statistik-nummer {
    font-size: 2.5rem;
  }

  .statistik-beschriftung {
    font-size: 0.85rem;
  }

  .vorstand-bereich {
    padding: 2rem 1.5rem;
    margin-top: 3rem;
  }

  .vorstand-bereich h3 {
    font-size: 1.6rem;
    margin-bottom: 2rem;
  }

  .vorstand-gitter {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .vorstand-mitglied {
    padding: 2rem 1.5rem;
  }

  /* Contact Section - Mobile */
  .kontakt-bereich {
    padding: 3rem 1rem;
  }

  .kontakt-bereich .bereich-kopfzeile h2 {
    font-size: 1.8rem;
  }

  .kontakt-gitter {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }  .kontakt-formular {
    padding: 2rem 1.5rem;
  }

  .kontakt-formular h3 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
  }

  .formular-gruppe {
    margin-bottom: 1.25rem;
  }

  .formular-gruppe label {
    font-size: 0.95rem;
  }

  .formular-gruppe input,
  .formular-gruppe textarea {
    padding: 0.75rem;
    font-size: 0.95rem;
  }

  /* fusszeile - Mobile */
  .partner-bereich {
    padding: 3rem 1.5rem;
  }

  .partner-bereich h2 {
    font-size: 1rem;
    margin-bottom: 2.5rem;
  }

  .partner-gitter {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }

  .partner-logo {
    font-size: 0.85rem;
    padding: 0.75rem;
  }

  .fusszeile-inhalt {
    padding: 3rem 1.5rem 2rem;
  }

  .fusszeile-gitter {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
  }

  .fusszeile-spalte h4 {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }

  .fusszeile-spalte a {
    font-size: 0.9rem;
  }

  .fusszeile-mitte {
    padding: 3rem 0;
  }

  .fusszeile-logo {
    margin-bottom: 2rem;
  }

  .fusszeile-logo svg {
    width: 80px;
    height: 80px;
  }

  .fusszeile-verknuepfungen-horizontal {
    flex-direction: column;
    gap: 0.5rem;
  }

  .fusszeile-verknuepfungen-horizontal .trenner {
    display: none;
  }

  .fusszeile-sozial {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
  }

  .fusszeile-sozial a {
    width: auto;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 0.5rem 0.5rem;
    max-width: 90px;
    text-align: center;
  }

  .fusszeile-sozial .footer-insta-label {
    text-transform: none;
    font-size: 0.65rem;
    letter-spacing: 0;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }

  .fusszeile-spalten {
    flex-direction: column;
    gap: 1.5rem;
  }

  .fusszeile-rechtlich-inhalt {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }

  .rechtlich-verknuepfungen {
    flex-direction: column;
    gap: 1rem;
  }

  .rechtlich-verknuepfungen a {
    font-size: 0.8rem;
  }

  .fusszeile-rechtlich .urheberrecht {
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
  }
}/* Magazine Section - Mobile */
.magazin-karte {
  flex: 0 0 calc(80% - 0.75rem);
  min-width: 260px;
}

.magazin-schieber {
  padding: 0 2rem;
  margin: 0;
}

.schieber-nav {
  width: 36px;
  height: 36px;
}

.schieber-zurueck {
  left: 0;
}

.schieber-weiter {
  right: 0;
}

.magazin-inhalt h3 {
  font-size: 1rem;
}

.magazin-kopfzeile h2 {
  font-size: 1.5rem;
}

@keyframes iconSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  /* Mobile Typography verbessern (nur Section-Headings, nicht Card-Inhalte) */
  body {
    font-size: 16px !important;
  }

  /* Auf sehr schmalen Geraeten passen einteilige Ueberschriften wie
     "Jugendfussball" oder "Veranstaltungen" bei 1,6rem nicht mehr in ihre
     Spalte und wuerden mitten im Wort brechen. Statt sie zu trennen, wird
     die Schrift kleiner - Regel 6b. clamp() erledigt das stufenlos und
     kommt ohne zusaetzlichen Haltepunkt aus. */
  section > .behaelter > h2,
  .bereich-kopfzeile h2 {
    font-size: clamp(1.35rem, 6.6vw, 1.6rem) !important;
    line-height: 1.3 !important;
  }

  /* Buttons generell auf mobil größer (Hamburger ausgenommen) */
  button:not(.mobil-menue-umschalter):not(.kategorie-taste),
  .button,
  .btn {
    min-height: 48px !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
  }

  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Tablet Landscape Optimierung */
@media (min-width: 481px) and (max-width: 968px) and (orientation: landscape) {  .fusszeile-gitter {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Smartphone Portrait Extra Small */
@media (max-width: 375px) {
  .behaelter,
  .content-container {
    padding: 0 1rem;
  }

  .logo-haupt {
    font-size: 1rem;
  }

  .logo-unter {
    font-size: 0.6rem;
  }

  section h2 {
    font-size: 1.5rem;
  }  .erfolg-karte {
    min-width: 180px;
  }

  .erfolg-zaehler {
    font-size: 2rem;
  }
}

/* Touch-optimized button sizes */
@media (max-width: 968px) {
  .taste {
    min-height: 44px;
    padding: 0.75rem 1.5rem;
  }  .schieber-zurueck,
  .schieber-weiter {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ===================================
   About Section Styles
   =================================== */
/* Slide-in Animation */
html:not(.js) .slide-rein,
html:not(.js) .slide-rein-links,
html:not(.js) .slide-rein-rechts {
  opacity: 1;
  transform: none;
}

.slide-rein {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.slide-rein.sichtbar {
  opacity: 1;
  transform: translateY(0);
}
.slide-rein-links {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.slide-rein-links.sichtbar {
  opacity: 1;
  transform: translateX(0);
}
.slide-rein-rechts {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.slide-rein-rechts.sichtbar {
  opacity: 1;
  transform: translateX(0);
}
/* Auf schmalen Bildschirmen wuerde der seitliche Versatz von 40px die Seite
   waehrend der Einblendung ueber den Rand schieben. Dort blendet alles von
   unten ein - gleiche Wirkung, kein horizontaler Ueberlauf. */
@media (max-width: 768px) {
  .slide-rein-links,
  .slide-rein-rechts {
    transform: translateY(32px);
  }

  .slide-rein-links.sichtbar,
  .slide-rein-rechts.sichtbar {
    transform: translateY(0);
  }
}

.verzoegert-1 { transition-delay: 0.1s; }
.verzoegert-2 { transition-delay: 0.2s; }
.verzoegert-3 { transition-delay: 0.3s; }
.verzoegert-4 { transition-delay: 0.4s; }

.ueber-uns-bereich {
  background: var(--bg-light);
  padding: 4rem 0;
  /* Die Statistiken fahren um 40px von rechts ein. Ohne diese Kappung entsteht
     waehrend der Einblendung kurz ein waagerechter Scrollbalken.
     clip statt hidden: erzeugt keinen Scroll-Container. */
  overflow-x: clip;
}

.ueber-uns-inhalt {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
  align-items: start;
}

.ueber-uns-text h3 {
  color: var(--primary-dark);
  margin-bottom: 1.5rem;
  font-size: 2rem;
  font-weight: 700;
}

.ueber-uns-text p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
  color: var(--text-light);
  font-size: 1rem;
}

.ueber-uns-text p strong {
  color: var(--primary-dark);
  font-weight: 700;
}

.ueber-uns-statistiken {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.statistik-karte {
  background: var(--text-light);
  padding: 2rem 1.5rem;
  border-radius: 12px;
  text-align: center;
  color: var(--bg-light);
  box-shadow:
    0 4px 12px rgba(42, 41, 39, 0.15),
    0 8px 24px rgba(42, 41, 39, 0.1);
  transition: all var(--transition);
}

.statistik-karte:hover {
  transform: translateY(-4px);
  box-shadow:
    0 8px 20px rgba(42, 41, 39, 0.2),
    0 12px 36px rgba(42, 41, 39, 0.15);
}

.statistik-nummer {
  display: block;
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: var(--accent-color);
  /* Kein tabular-nums: Zalando Sans setzt die Eins dort ohne Fahne, "1960"
     las sich dann wie "i960". Die Zahlen stehen ohnehin in eigenen Kacheln
     und muessen nicht spaltenweise fluchten. */
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.statistik-beschriftung {
  display: block;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  color: var(--bg-light);
}

/* Board Section */
.vorstand-bereich {
  margin-top: 4rem;
  padding: 3rem;
  background: rgba(245, 232, 38, 0.05);
  border-radius: 12px;
  border: 2px solid rgba(245, 232, 38, 0.2);
}

.vorstand-bereich h3 {
  color: var(--primary-dark);
  margin-bottom: 2.5rem;
  font-size: 2rem;
  text-align: center;
  font-weight: 700;
}

/* Sieben Mitglieder in 250px-Kacheln ergaben 4+3 mit einer angebrochenen
   zweiten Reihe - und der Inhalt war nur 186px breit. Die laengste Mailadresse
   misst 275px, der laengste Name 285px: beides brach um, die Mails an
   Bindestrichen zu "t-/online.de".
   Jetzt liegen Bild und Text nebeneinander. Zwei Spalten ab 1000px geben
   jeder Karte rund 690px - Name und Mail stehen dort einzeilig. */
/* Sieben Mitglieder gehen in keinem Raster glatt auf. Zwei Spalten liessen
   die Karten zu breit fuer ihren Inhalt wirken und die siebte allein links
   stehen. Drei Spalten passen zum Inhalt (Name braucht 285px), und die
   Restzeile steht durch justify-content mittig statt angebrochen. */
.vorstand-gitter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

/* flex-grow bleibt 0. Mit grow:1 waechst eine allein stehende Karte in der
   letzten Zeile auf ihre max-width und ist dann breiter als alle anderen -
   genau das war bei Guenther Zeindl zu sehen. Die Zeile wird stattdessen
   ueber justify-content: center mittig gestellt. */
.vorstand-mitglied {
  flex: 0 1 calc(50% - 0.625rem);
  min-width: 300px;
}

@media (min-width: 1100px) {
  .vorstand-mitglied {
    flex-basis: calc(33.333% - 0.84rem);
  }
}

@media (max-width: 640px) {
  .vorstand-mitglied {
    flex-basis: 100%;
    min-width: 0;
  }
}

.vorstand-mitglied {
  display: flex;
  align-items: center;
  /* Knapp gerechnet: die laengste Mailadresse misst 275px. Bei 64px-Bild
     und 1.75rem Polsterung blieben nur 269px - sie brach an "t-". */
  gap: 1rem;
  min-width: 0;
  background: var(--text-light);
  padding: 1.4rem 1.5rem;
  border-radius: 16px;
  text-align: left;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow:
    0 4px 12px rgba(42, 41, 39, 0.15),
    0 8px 24px rgba(42, 41, 39, 0.1);
}

.mitglied-text {
  min-width: 0;
}

.vorstand-mitglied:hover {
  transform: translateY(-8px);
  box-shadow:
    0 12px 32px rgba(42, 41, 39, 0.2),
    0 16px 48px rgba(42, 41, 39, 0.15);
}

.mitglied-bild {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  margin: 0;
  background: rgba(245, 232, 38, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  border: 3px solid var(--accent-color);
}

.vorstand-mitglied h4 {
  color: var(--bg-light);
  margin-bottom: 0.15rem;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  /* Eigennamen werden nicht mitten im Wort getrennt. */
  overflow-wrap: normal;
  word-break: normal;
}

.mitglied-rolle {
  display: block;
  color: var(--accent-color);
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mitglied-kontakt {
  display: inline-block;
  max-width: 100%;
  color: var(--bg-light);
  text-decoration: none;
  font-size: 0.85rem;
  opacity: 0.85;
  transition: all var(--transition);
}

/* Unter 480px nimmt das runde Bild dem Text zu viel Breite: "Aschenbrenner"
   und "Schriftfuehrerin" brachen mitten im Wort. Deshalb dort untereinander -
   der Text bekommt die volle Kartenbreite. */
@media (max-width: 480px) {
  .vorstand-mitglied {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.25rem 1.4rem;
  }

  .mitglied-kontakt {
    font-size: 0.78rem;
  }
}

.mitglied-kontakt:hover {
  color: var(--accent-color);
  opacity: 1;
}

/* Der Platzhalter bringt seinen eigenen Kontrast mit - die Deckkraft der
   Mailzeile wuerde ihn zusaetzlich herunterdruecken (gemessen 2,34:1). */
.mitglied-kontakt:has(.demnaechst) {
  opacity: 1;
}

/* ============================================
   SPARTENLEITUNG
   Vorher eine aufklappbare Tabelle - fast reiner Text. Jetzt Karten:
   Sparte als CI-Marke, Name gross, Mailadresse darunter.
   ============================================ */

.leitung-bereich {
  margin-top: 3rem;
}

.leitung-titel {
  margin: 0 0 1.5rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.leitung-gitter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.leitung-karte {
  /* wie beim Vorstand: kein grow, sonst faellt die letzte Karte aus der Reihe */
  flex: 0 1 calc(50% - 0.5rem);
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.4rem 1.5rem;
  border-radius: 16px;
  background: var(--primary-dark);
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.leitung-karte:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.leitung-sparte {
  align-self: flex-start;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  /* 11,4:1 */
  color: var(--primary-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.leitung-name {
  margin-top: 0.3rem;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  /* 13,9:1 auf --primary-dark */
  color: var(--text-on-dark);
}

/* Gleiche Behandlung wie die Mailadressen im Vorstand: helle Schrift,
   kein Unterstrich, erst beim Zeigen CI-gelb. */
.leitung-mail {
  display: inline-block;
  max-width: 100%;
  font-size: 0.85rem;
  /* 11,8:1 auf --primary-dark */
  color: var(--bg-light);
  text-decoration: none;
  opacity: 0.85;
  overflow-wrap: break-word;
  min-width: 0;
  transition: all var(--transition);
}

.leitung-mail:hover {
  color: var(--accent-color);
  opacity: 1;
}

@media (min-width: 1100px) {
  .leitung-karte {
    flex-basis: calc(33.333% - 0.667rem);
  }
}

@media (max-width: 640px) {
  .leitung-karte {
    flex-basis: 100%;
    min-width: 0;
  }
}

/* ============================================
   ELASTISCHE GALERIE
   Ein Panel offen, die uebrigen schmal daneben. Reines Flexbox, der Zustand
   haengt an der Klasse .aktiv. Kein Framework - die Seite hat keinen Build.
   ============================================ */

.elastik-galerie {
  display: flex;
  gap: 0.75rem;
  height: clamp(380px, 48vh, 520px);
  max-width: 1400px;
  margin: 0 auto;
  min-width: 0;
}

.elastik-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--primary-dark);
  cursor: pointer;
  transition:
    flex-grow var(--transition),
    filter var(--transition);
  filter: brightness(0.55);
}

.elastik-panel.aktiv {
  flex-grow: 5;
  filter: brightness(1);
}

.elastik-panel:hover {
  filter: brightness(0.75);
}

.elastik-panel.aktiv:hover {
  filter: brightness(1);
}

.elastik-panel:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 3px;
}

.elastik-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform var(--transition-langsam);
}

.elastik-panel.aktiv .elastik-bild {
  transform: scale(1);
}

/* Ein Logo wird eingepasst, nicht beschnitten - und braucht eine helle
   Flaeche, damit es wirkt. */
.elastik-bild-logo {
  object-fit: contain;
  padding: 3rem 1.5rem 7rem;
  background: var(--bg-light);
  transform: none;
}

.elastik-panel.aktiv .elastik-bild-logo {
  transform: none;
}

/* Panels ohne Foto: ruhige CI-Flaeche statt eines leeren Kastens */
.elastik-panel-ohne-bild {
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      rgba(var(--rgb-accent), 0.14) 0%,
      transparent 60%
    ),
    var(--primary-dark);
}

.elastik-schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(var(--rgb-primary-dark), 0.92) 0%,
    rgba(var(--rgb-primary-dark), 0.55) 45%,
    rgba(var(--rgb-primary-dark), 0.25) 100%
  );
}

/* Titel des geschlossenen Panels: senkrecht, damit er in die schmale
   Spalte passt, ohne mitten im Wort zu brechen. */
.elastik-quer {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  transition: opacity var(--transition);
}

.elastik-panel.aktiv .elastik-quer {
  opacity: 0;
}

.elastik-inhalt {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 2rem;
  min-width: 0;
  /* Geschlossen: unsichtbar UND nicht fokussierbar - sonst landet die
     Tabulatortaste auf Links, die niemand sieht. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity var(--transition-langsam),
    transform var(--transition-langsam),
    visibility 0s linear 400ms;
}

.elastik-panel.aktiv .elastik-inhalt {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 120ms, 120ms, 0s;
}

.elastik-marke {
  align-self: flex-start;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--primary-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.elastik-titel {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-on-dark);
}

.elastik-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-on-dark);
  min-width: 0;
}

.elastik-text a {
  color: var(--accent-color);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: break-word;
}

/* Schmale Schirme: untereinander statt nebeneinander, Titel waagerecht. */
@media (max-width: 768px) {
  .elastik-galerie {
    flex-direction: column;
    height: auto;
    gap: 0.6rem;
  }

  .elastik-panel {
    flex: 0 0 auto;
    height: 78px;
    transition:
      height var(--transition-langsam),
      filter var(--transition);
  }

  .elastik-panel.aktiv {
    height: 340px;
  }

  .elastik-quer {
    writing-mode: horizontal-tb;
    left: 1.5rem;
    bottom: 50%;
    transform: translateY(50%);
    font-size: 0.95rem;
  }

  .elastik-inhalt {
    padding: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elastik-panel,
  .elastik-bild,
  .elastik-inhalt {
    transition-duration: 1ms;
  }
}

/* ===================================
   Teams Section Styles
   =================================== */
.mannschaften-bereich {
  background: var(--bg-light) !important;
  padding: 5rem 2rem !important;
}

.mannschaften-bereich h2 {
  color: var(--primary-dark) !important;
  /* ohne !important: sonst schlaegt diese Basisregel alle responsiven Groessen
     und "Jugendfussball" lief bei 320px ueber den Bildschirmrand */
  font-size: 2.5rem;
  text-align: center !important;
  margin-bottom: 3rem !important;
  font-weight: 700 !important;
}/* Grundfall: drei Spalten. Die Karte waechst nicht ueber ihre Spalte
   hinaus, damit eine allein stehende Karte nicht die halbe Zeile fuellt. */* Ungerade Anzahlen: statt einer angebrochenen Zeile die Spaltenzahl so
   waehlen, dass die Zeilen aufgehen.
   4 Karten -> 2x2, 2 Karten -> 2 nebeneinander. Bei 5 oder 7 bleibt eine
   Restzeile, die durch justify-content: center mittig steht. */* ===================================
   Contact Section Styles
   =================================== */
.kontakt-bereich {
  background: var(--pure-white);
  padding: 4rem 0;
}

.kontakt-bereich .bereich-kopfzeile h2 {
  color: var(--primary-dark);
}

/* Kontaktdaten als saubere Beschriftung-Wert-Liste statt einer
   Aufzaehlung mit <br>. Zwei ruhige Karten, rechts das Formular. */
.kontakt-spalte {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.kontakt-karte {
  padding: 1.75rem;
  border-radius: 16px;
  background: var(--bg-light);
  border: 1px solid rgba(var(--rgb-primary-dark), 0.1);
  font-style: normal;
  min-width: 0;
}

.kontakt-karte h3 {
  margin: 0 0 1.1rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--primary-dark);
}

.kontakt-liste {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.kontakt-zeile {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.kontakt-zeile dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* 5,2:1 auf --bg-light */
  color: var(--text-on-light-medium);
  padding-top: 0.15rem;
}

.kontakt-zeile dd {
  margin: 0;
  min-width: 0;
  line-height: 1.55;
  color: var(--text-on-light);
}

.kontakt-zeile a {
  color: var(--text-on-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--rgb-primary-dark), 0.35);
}

.kontakt-zeile a:hover {
  text-decoration-color: var(--primary-dark);
}

.kontakt-formular-status {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-light);
}

@media (max-width: 560px) {
  .kontakt-zeile {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }
}

.kontakt-gitter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;
}

.kontakt-info,
.kontakt-formular {
  height: 100%;
  box-sizing: border-box;
}.kontakt-formular {
  background: var(--pure-white);
  padding: 2.5rem;
  border-radius: 12px;
  box-shadow:
    0 4px 12px rgba(42, 41, 39, 0.1),
    0 8px 24px rgba(42, 41, 39, 0.08);
  border: 1px solid rgba(42, 41, 39, 0.1);
}

.kontakt-formular h3 {
  color: var(--primary-dark);
  margin-bottom: 2rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.formular-gruppe {
  margin-bottom: 1.5rem;
}

.formular-gruppe label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--primary-dark);
  font-weight: 600;
}

.formular-gruppe {
  width: 100%;
}

.formular-gruppe input,
.formular-gruppe textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.875rem;
  border: 2px solid rgba(42, 41, 39, 0.15);
  background: var(--bg-light);
  color: var(--primary-dark);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  transition: all var(--transition);
}

.formular-gruppe input::placeholder,
.formular-gruppe textarea::placeholder {
  color: rgba(42, 41, 39, 0.4);
}

.formular-gruppe input:focus,
.formular-gruppe textarea:focus {
  outline: none;
  border-color: var(--primary-dark);
  background: var(--pure-white);
  box-shadow: 0 0 0 3px rgba(42, 41, 39, 0.08);
}

.taste-absenden {
  background: var(--primary-dark);
  color: var(--accent-color);
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.3s ease,
    transform 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  display: block;
  margin-left: 0;
}

.taste-absenden:hover {
  background: var(--accent-color);
  color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 232, 38, 0.3);
}

/* Responsive Styles for New Sections */
@media (max-width: 768px) {
  .ueber-uns-inhalt {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ueber-uns-statistiken {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .statistik-karte {
    padding: 1.5rem 1rem;
  }

  .statistik-nummer {
    font-size: 2rem;
  }

  .vorstand-bereich {
    padding: 2rem 1.5rem;
  }

  .vorstand-gitter {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .vorstand-mitglied {
    padding: 1.5rem 1rem;
  }

  .mitglied-bild {
    width: 70px;
    height: 70px;
  }  .kontakt-gitter {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .kontakt-formular {
    padding: 1.5rem;
  }

  .bereich-kopfzeile {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  section h2 {
    font-size: 1.75rem;
  }

  section {
    padding: 3rem 0;
  }
}

@media (max-width: 480px) {
  .ueber-uns-statistiken {
    grid-template-columns: 1fr;
  }

  .vorstand-gitter {
    grid-template-columns: 1fr;
  }

  .statistik-nummer {
    font-size: 1.75rem;
  }

  section h2 {
    font-size: 1.5rem;
  }

  section {
    padding: 2rem 0;
  }
}

/* ===================================
   Background Slider Specific Styles
   =================================== */
/* ===================================
   Legal Pages Styles (Impressum, Datenschutz)
   =================================== */
.rechtlich-seite {
  max-width: 900px;
  margin: 0 auto;
  padding: 6rem 2rem 4rem;
  background: var(--bg-white);
  min-height: 100vh;
}

.rechtlich-seite h1 {
  color: var(--primary-dark);
  margin-bottom: 2rem;
  font-size: 2.5rem;
}

.rechtlich-seite h2 {
  color: var(--primary-dark);
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.rechtlich-seite h3 {
  color: var(--text-dark);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
}

/* Rechtstexte enthalten lange deutsche Komposita. Bei 2.5rem passt
   "Datenschutzerklaerung" auf 320px in keine Zeile und wuerde mitten im
   Wort umbrechen. */
@media (max-width: 480px) {
  .rechtlich-seite h1 {
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
  }

  .rechtlich-seite h2 {
    font-size: 1.25rem;
  }

  .rechtlich-seite h3 {
    font-size: 1.05rem;
  }

  /* Eigennamen werden nicht getrennt. "Dietmar Aschenbrenner" braucht bei
     1.25rem mehr Platz als die Karte hat - lieber die Schrift anpassen und
     die Polsterung etwas zuruecknehmen. */
  .vorstand-mitglied {
    padding: 1.75rem 1.25rem;
  }

  .vorstand-mitglied h4 {
    font-size: 1.1rem;
  }
}

.legal-fusszeile {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--primary-color);
  font-size: 0.9rem;
  color: var(--text-on-light-medium);
}

.rechtlich-seite p,
.rechtlich-seite ul {
  margin-bottom: 1rem;
  line-height: 1.8;
  color: var(--text-medium);
}

.rechtlich-seite ul {
  padding-left: 2rem;
}

.rechtlich-seite li {
  margin-bottom: 0.5rem;
}

.rechtlich-seite strong {
  color: var(--text-dark);
}

.rechtlich-seite a {
  color: var(--primary-dark);
  text-decoration: underline;
  font-weight: 600;
  transition: color var(--transition);
}

.rechtlich-seite a:hover {
  color: var(--primary-color);
}

.zurueck-verknuepfung {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--primary-dark);
  text-decoration: none;
  font-weight: 600;
  transition: all var(--transition);
  padding: 0.5rem 1rem;
  background: var(--accent-color);
  border-radius: 6px;
}

.zurueck-verknuepfung:hover {
  background: var(--primary-dark);
  color: var(--accent-color);
}

/* Contact Section Spacing Utilities */
.kontakt-info h3 + p,
.kontakt-bereich h3 {
  margin-top: 2rem;
}

/* ========================================
   COOKIE CONSENT BANNER - FC 1960 INDLING
   CI: var(--primary-dark), var(--accent-color), var(--bg-light), var(--text-light)
   ======================================== */

#cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--text-light) 100%);
  color: var(--bg-light);
  padding: 1.5rem;
  box-shadow: 0 -4px 20px rgba(42, 41, 39, 0.4);
  z-index: var(--z-banner);
  animation: slideUp 0.4s ease-out;
  border-top: 3px solid var(--accent-color);
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.cookie-consent-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.cookie-consent-text {
  flex: 1;
  min-width: 300px;
}

.cookie-consent-text h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1.25rem;
  color: var(--accent-color);
}

.cookie-consent-text p {
  margin: 0 0 0.5rem 0;
  line-height: 1.6;
  color: var(--bg-light);
  font-size: 0.9375rem;
}

.cookie-consent-links {
  font-size: 0.875rem;
  color: rgba(250, 250, 250, 0.7);
}

.cookie-consent-links a {
  color: var(--accent-color);
  text-decoration: underline;
  transition: color 0.2s;
}

.cookie-consent-links a:hover {
  color: var(--bg-light);
}

.cookie-consent-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cookie-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.cookie-btn-accept {
  background: var(--accent-color);
  color: var(--primary-dark);
  box-shadow: 0 4px 12px rgba(245, 232, 38, 0.3);
}

.cookie-btn-accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 232, 38, 0.5);
  background: var(--bg-light);
}

.cookie-btn-essential {
  background: rgba(250, 250, 250, 0.1);
  color: var(--bg-light);
  border: 1px solid rgba(250, 250, 250, 0.3);
}

.cookie-btn-essential:hover {
  background: rgba(250, 250, 250, 0.15);
  border-color: var(--accent-color);
}

.cookie-btn-settings {
  background: transparent;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
}

.cookie-btn-settings:hover {
  background: rgba(245, 232, 38, 0.1);
}

/* Cookie Settings View */
.cookie-settings-view {
  flex-direction: column;
  align-items: stretch;
}

.cookie-settings-view .cookie-consent-text {
  width: 100%;
}

.cookie-category {
  background: rgba(51, 51, 51, 0.5);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(245, 232, 38, 0.2);
}

.cookie-category-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.cookie-category h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: var(--bg-light);
}

.cookie-category p {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(250, 250, 250, 0.7);
}

/* Toggle Switch */
.cookie-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
  flex-shrink: 0;
  margin-top: 2px;
}

.cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(51, 51, 51, 0.8);
  transition: 0.3s;
  border-radius: 26px;
}

.cookie-slider:before {
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: var(--bg-light);
  transition: 0.3s;
  border-radius: 50%;
}

.cookie-switch input:checked + .cookie-slider {
  background-color: var(--accent-color);
}

.cookie-switch input:checked + .cookie-slider:before {
  transform: translateX(24px);
  background-color: var(--primary-dark);
}

.cookie-switch input:disabled + .cookie-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Notification */
.cookie-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--primary-dark);
  color: var(--bg-light);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(42, 41, 39, 0.4);
  border-left: 4px solid var(--accent-color);
  z-index: var(--z-toast);
  opacity: 0;
  transform: translateX(400px);
  transition: all var(--transition);
}

.cookie-notification.show {
  opacity: 1;
  transform: translateX(0);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  #cookie-consent-banner {
    padding: 1rem;
  }

  .cookie-consent-content {
    flex-direction: column;
    gap: 1rem;
  }

  .cookie-consent-text {
    min-width: 100%;
  }

  .cookie-consent-actions {
    width: 100%;
    flex-direction: column;
  }

  .cookie-btn {
    width: 100%;
    justify-content: center;
  }

  .cookie-notification {
    right: 10px;
    left: 10px;
    bottom: 10px;
  }
}

/* ========================================
   MITGLIEDSANTRAG SEITE
   CI: var(--primary-dark), var(--accent-color), var(--bg-light), var(--text-light)
   ======================================== */

.mitgliedsantrag-seite {
  padding-top: calc(var(--top-bar-height) + var(--header-height) + 3rem);
  padding-bottom: 4rem;
  background: var(--bg-light);
  min-height: 100vh;
}

.mitgliedsantrag-seite .behaelter {
  max-width: 900px;
}

/* Header Section */
.antrag-header {
  text-align: center;
  margin-bottom: 3rem;
}

.antrag-header h1 {
  color: var(--primary-dark);
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.antrag-untertitel {
  color: var(--text-light);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.pflichtfeld-hinweis {
  color: var(--text-light);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Progress Steps */
.fortschritt-schritte {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3rem;
  position: relative;
  padding: 0 2rem;
}

.fortschritt-schritte::before {
  content: '';
  position: absolute;
  top: 25px;
  left: 2rem;
  right: 2rem;
  height: 2px;
  background: var(--text-light);
  z-index: 0;
}

.schritt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: all var(--transition);
}

.schritt-nummer {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--bg-light);
  border: 3px solid var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-light);
  transition: all var(--transition);
}

.schritt-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-light);
  text-align: center;
  max-width: 120px;
}

.schritt.aktiv .schritt-nummer {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--primary-dark);
  transform: scale(1.1);
}

.schritt.aktiv .schritt-label {
  color: var(--primary-dark);
}

.schritt.abgeschlossen .schritt-nummer {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--accent-color);
}

.schritt.abgeschlossen .schritt-nummer::after {
  content: '✓';
}

/* Form Styling */
.antrag-formular {
  background: var(--bg-light);
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow:
    0 2px 8px rgba(42, 41, 39, 0.08),
    0 4px 16px rgba(42, 41, 39, 0.04);
}

.formular-schritt {
  display: none;
}

.formular-schritt.aktiv {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.formular-schritt h2 {
  color: var(--primary-dark);
  font-size: 1.75rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid var(--accent-color);
}

.formular-schritt h3 {
  color: var(--primary-dark);
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* Honeypot Field - Hidden */
.honeypot-feld {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form Groups */
.formular-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Spezifisches Layout: Straße (75%) + Hausnummer (25%) */
.formular-zeile.strasse-hausnummer {
  grid-template-columns: 3fr 1fr;
}

/* Spezifisches Layout: PLZ (25%) + Ort (75%) */
.formular-zeile.plz-ort {
  grid-template-columns: 1fr 3fr;
}

.formular-gruppe {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.formular-gruppe-25 {
  /* Hausnummer - 25% der Grid-Breite */
}

.formular-gruppe-33 {
  /* 33% der Grid-Breite */
}

.formular-gruppe-67 {
  /* 67% der Grid-Breite */
}

.formular-gruppe-75 {
  /* Straße - 75% der Grid-Breite */
}

.antrag-formular .formular-gruppe label,
.formular-label-haupt {
  font-weight: 600;
  color: var(--primary-dark);
  font-size: 0.95rem;
}

.antrag-formular .formular-gruppe input,
.antrag-formular .formular-gruppe select,
.antrag-formular .formular-gruppe textarea {
  padding: 0.75rem;
  border: 2px solid var(--text-light);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--bg-light);
  color: var(--primary-dark);
  transition: all var(--transition);
}

.antrag-formular .formular-gruppe input:focus,
.antrag-formular .formular-gruppe select:focus,
.antrag-formular .formular-gruppe textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(245, 232, 38, 0.2);
}

.antrag-formular .formular-gruppe input.fehler,
.antrag-formular .formular-gruppe select.fehler,
.antrag-formular .formular-gruppe textarea.fehler {
  border-color: var(--color-error-border);
}

.antrag-formular .formular-gruppe textarea {
  resize: vertical;
  min-height: 100px;
}

/* Checkbox and Radio Groups */
.checkbox-gruppe,
.radio-gruppe {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.checkbox-label,
.radio-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 2px solid var(--text-light);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg-light);
}

.checkbox-gruppe.fehler .checkbox-label,
.radio-gruppe.fehler .radio-label {
  border-color: var(--color-error-border);
}

.checkbox-label:hover,
.radio-label:hover {
  border-color: var(--accent-color);
  background: rgba(245, 232, 38, 0.05);
}

.checkbox-label input[type='checkbox'],
.radio-label input[type='radio'] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--accent-color);
}

.checkbox-label input[type='checkbox']:checked,
.radio-label input[type='radio']:checked {
  + span {
    font-weight: 600;
    color: var(--primary-dark);
  }
}

.checkbox-label span,
.radio-label span {
  flex: 1;
  color: var(--primary-dark);
}

.checkbox-label-gross {
  padding: 1rem;
  font-size: 1rem;
}

.checkbox-gruppe-vertikal {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Info Boxes */
/* Zahlungsempfaenger im SEPA-Mandat. Ruhige Flaeche, kein zweiter
   Gelb-Akzent neben der info-box darueber. */
.sepa-glaeubiger {
  padding: 1.25rem;
  margin-bottom: 2rem;
  background: var(--bg-light);
  border: 1px solid rgba(42, 41, 39, 0.14);
  border-radius: 8px;
  min-width: 0;
}

.sepa-glaeubiger-titel {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.sepa-glaeubiger p {
  margin: 0;
  color: var(--text-light);
  line-height: 1.7;
}

.info-box {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(245, 232, 38, 0.1);
  border-left: 4px solid var(--accent-color);
  border-radius: 8px;
  margin-bottom: 2rem;
}

.info-box svg {
  flex-shrink: 0;
  color: var(--accent-color);
}

.info-box strong {
  display: block;
  color: var(--primary-dark);
  margin-bottom: 0.5rem;
}

.info-box p {
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
}

.info-text {
  color: var(--text-light);
  font-size: 0.9rem;
  font-style: italic;
  margin-bottom: 1rem;
}

/* Eltern Container */
.eltern-container {
  background: rgba(51, 51, 51, 0.05);
  padding: 1.5rem;
  border-radius: 8px;
  margin-top: 2rem;
  border: 1px solid var(--text-light);
}

/* Datenschutz Box */
.datenschutz-box {
  background: var(--bg-light);
  border: 2px solid var(--text-light);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.datenschutz-box h3 {
  color: var(--primary-dark);
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

.datenschutz-box p {
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.datenschutz-box a {
  color: var(--primary-dark);
  text-decoration: underline;
  font-weight: 600;
}

.datenschutz-box a:hover {
  color: var(--primary-color);
}

.wichtig-text {
  background: rgba(245, 232, 38, 0.2);
  padding: 0.75rem;
  border-radius: 6px;
  margin-top: 1rem;
}

/* Form Navigation */
.formular-navigation {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--text-light);
}

.taste-zurueck,
.taste-weiter,
.taste-absenden {
  padding: 0.875rem 2rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
}

.taste-zurueck {
  background: var(--text-light);
  color: var(--bg-light);
}

.taste-zurueck:hover {
  background: var(--primary-dark);
  transform: translateX(-3px);
}

.taste-weiter,
.taste-absenden {
  background: var(--accent-color);
  color: var(--primary-dark);
  margin-left: auto;
}

.taste-weiter:hover,
.taste-absenden:hover {
  background: var(--primary-dark);
  color: var(--accent-color);
  transform: translateX(3px);
}

.taste-absenden:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Success Message */
.erfolg-meldung {
  background: var(--bg-light);
  border-radius: 12px;
  padding: 3rem;
  text-align: center;
  box-shadow:
    0 2px 8px rgba(42, 41, 39, 0.08),
    0 4px 16px rgba(42, 41, 39, 0.04);
}

.erfolg-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.erfolg-icon svg {
  color: var(--primary-dark);
}

.erfolg-meldung h2 {
  color: var(--primary-dark);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.erfolg-meldung p {
  color: var(--text-light);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.taste-startseite {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 1rem 2.5rem;
  background: var(--primary-dark);
  color: var(--accent-color);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
  transition: all var(--transition);
}

.taste-startseite:hover {
  background: var(--accent-color);
  color: var(--primary-dark);
  transform: translateY(-2px);
}

/* Error Message */
.fehler-nachricht {
  background: var(--color-error);
  color: var(--bg-light);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-weight: 600;
  text-align: center;
}

/* Loading Spinner */
.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .mitgliedsantrag-seite {
    padding-top: calc(var(--top-bar-height) + var(--header-height) + 2rem);
  }

  .antrag-header h1 {
    font-size: 1.75rem;
  }

  .antrag-untertitel {
    font-size: 1rem;
  }

  .fortschritt-schritte {
    padding: 0 0.5rem;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 1rem;
  }

  .fortschritt-schritte::before {
    display: none;
  }

  .schritt-nummer {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .schritt-label {
    font-size: 0.75rem;
    max-width: 80px;
  }

  .antrag-formular {
    padding: 1.5rem;
  }

  .formular-schritt h2 {
    font-size: 1.5rem;
  }

  .formular-zeile {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .formular-gruppe-25,
  .formular-gruppe-33,
  .formular-gruppe-67,
  .formular-gruppe-75 {
    max-width: 100%;
    grid-column: span 1;
  }

  .formular-navigation {
    flex-direction: column-reverse;
  }

  .taste-zurueck,
  .taste-weiter,
  .taste-absenden {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .taste-zurueck:hover,
  .taste-weiter:hover,
  .taste-absenden:hover {
    transform: translateY(-2px);
  }

  .erfolg-meldung {
    padding: 2rem 1.5rem;
  }

  .erfolg-meldung h2 {
    font-size: 1.5rem;
  }

  .erfolg-meldung p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .schritt {
    min-width: 70px;
  }

  .checkbox-label,
  .radio-label {
    padding: 0.5rem;
  }

  .datenschutz-box {
    padding: 1rem;
  }

  .datenschutz-box p {
    font-size: 0.85rem;
  }
}

/* ===================================
   MOBILE OPTIMIERUNG - Vollständige Sichtbarkeit
   Alle Karteninhalte ohne Scrollbalken sichtbar
   =================================== */

/* --- Mobile: Cards als Flow-Layout (kein Overlay-Abschneiden) --- */
@media (max-width: 768px) {
  /* Hero Section *    /* --- News Cards Flow-Layout --- *  /* --- Event Cards Flow-Layout --- */
  .termine-bereich {
    padding: 2.5rem 0 !important;
  }  /* --- Team Cards --- */
  .mannschaften-bereich {
    padding: 2.5rem 1rem !important;
  }  /* --- Achievements Slider --- */
  .erfolge-bereich {
    padding: 2.5rem 1rem !important;
  }

  .erfolg-karte {
    min-width: 180px !important;
    padding: 1.5rem 1.25rem !important;
  }

  .erfolg-karte h3 {
    font-size: 0.95rem !important;
  }

  .erfolg-zaehler {
    font-size: 2.25rem !important;
  }

  /* --- About / Info Section --- */
  .ueber-uns-bereich {
    padding: 2.5rem 0 !important;
  }

  .ueber-uns-inhalt {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    margin-bottom: 2.5rem !important;
  }

  .ueber-uns-statistiken {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .statistik-karte {
    padding: 1.5rem 1rem !important;
  }

  .statistik-nummer {
    font-size: 2rem !important;
  }

  .vorstand-bereich {
    padding: 1.5rem !important;
    margin-top: 2rem !important;
  }

  .vorstand-gitter {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .vorstand-mitglied {
    padding: 1.5rem !important;
  }

  /* --- Contact Section --- */
  .kontakt-bereich {
    padding: 2.5rem 0 !important;
  }

  .kontakt-gitter {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .kontakt-formular {
    padding: 1.5rem !important;
  }  /* --- Footer --- */
  .fusszeile-gitter {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .fusszeile-verknuepfungen-horizontal {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .fusszeile-verknuepfungen-horizontal .trenner {
    display: none !important;
  }

  .rechtlich-verknuepfungen {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* --- Sections general spacing --- */
  .bereich-kopfzeile {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
  }

  .bereich-mehr {
    align-self: center !important;
    font-size: 0.85rem !important;
    padding: 0.6rem 1.25rem !important;
  }

  /* --- Sponsors Section --- */
  .sponsor-karte {
    padding: 1rem !important;
  }

  .sponsor-karte img {
    max-height: 60px !important;
  }

  /* --- Burger Menu Reset (überschreibt generische button-Styles) --- */
  .mobil-menue-umschalter {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-around !important;
    width: 32px !important;
    height: 26px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    min-height: auto !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  .mobil-menue-umschalter .hamburger {
    width: 100% !important;
    height: 3px !important;
    background: var(--bg-light) !important;
    border-radius: 10px !important;
    display: block !important;
  }
}

/* Extra small screens */
@media (max-width: 400px) {  .termin-details h3 {
    font-size: 0.95rem !important;
  }

  .ueber-uns-statistiken {
    grid-template-columns: 1fr !important;
  }

  .vorstand-gitter {
    grid-template-columns: 1fr !important;
  }

  .logo-haupt {
    font-size: 1rem !important;
  }

  .logo-unter {
    font-size: 0.55rem !important;
  }

  .logo-bild {
    width: 45px !important;
    height: 45px !important;
  }
}

/* Tooltip Styles - CI-gerecht */
[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--primary-dark);
  color: var(--accent-color);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all var(--transition);
  border: 1px solid var(--accent-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: var(--z-tooltip);
}

[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  border: 6px solid transparent;
  border-top-color: var(--accent-color);
  opacity: 0;
  pointer-events: none;
  transition: all var(--transition);
  z-index: var(--z-tooltip);
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
}

/* Tooltip für obere Leiste spezifisch */
.obere-leiste-verknuepfung[data-tooltip]::after {
  bottom: auto;
  top: 100%;
  transform: translateX(-50%) translateY(8px);
}

.obere-leiste-verknuepfung[data-tooltip]::before {
  bottom: auto;
  top: 100%;
  transform: translateX(-50%) translateY(2px);
  border-top-color: transparent;
  border-bottom-color: var(--accent-color);
}

/* Spartenleitung Details/Summary */
@media (max-width: 600px) {
  }

/* Partner-Tiles (Partnervereine) */
.sponsor-tile-partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  cursor: default;
}
.sponsor-tile-partner span { display: block; }

/* ===== Förderhinweis Nationale Klimaschutzinitiative ===== */
/* Partnerlogo im Foerderhinweis. Das Hudson-SVG ist 500x68 - ohne feste
   Obergrenze wuerde es die Textspalte sprengen. */
.foerderhinweis-partner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

/* Die Klasse .partner-logo gehoert eigentlich zur Sponsorenwand: dunkler
   Grund, Rahmen, min-height 110px und opacity 0.5. Im Foerderhinweis steht
   das Logo aber in einer hellen Textzeile - dort riss die Kachelhoehe eine
   Luecke von 110px auf, und die halbe Deckkraft liess das Logo verblassen.
   Hier zaehlt nur das Bild. */
.foerderhinweis-partner .partner-logo {
  display: block;
  /* Feste Breite statt 100%: Das Bild ist Flex-Kind eines Ankers ohne eigene
     Breite - eine Prozentangabe haette keinen Bezug und liesse es auf null
     zusammenfallen. */
  width: 190px;
  max-width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  opacity: 1;
  cursor: inherit;
}

/* Das Bundeslogo wird unveraendert und auf weissem Grund gezeigt - so
   verlangt es die Gestaltungsrichtlinie. Die Datei bringt ihr Weiss mit,
   deshalb eine bewusst weisse Karte statt eines Farbstichs auf dem
   Off-White der Sektion. */
.foerderhinweis-logo {
  /* block statt inline-block: sonst laeuft der Link zur Kommunalrichtlinie
     neben der Karte hoch und wirkt wie ein Versehen. */
  display: block;
  width: fit-content;
  margin: 1.5rem auto;
  /* Die Datei bringt selbst schon Rand mit - hier reicht wenig. */
  padding: 0.5rem 0.6rem;
  background: var(--weiss-rein);
  border: 1px solid rgba(var(--rgb-primary-dark), 0.12);
  border-radius: var(--radius);
  max-width: 100%;
}

.foerderhinweis-logo img {
  display: block;
  width: 100%;
  max-width: 250px;
  height: auto;
}

.foerderhinweis-sektion {
  background: rgba(var(--rgb-primary-dark), 0.05);
  color: #1a1918;
  padding: 3rem 0 2.5rem;
  border-top: 4px solid var(--accent-color);
}
/* Die Ueberschrift stand mittig, alles darunter linksbuendig ueber die volle
   Breite - Karte, Bundeslogo und Link hingen am linken Rand. Der Abschnitt
   steht jetzt als eine mittige Spalte. Nur die Projektangaben bleiben
   linksbuendig: das ist eine Liste aus Bezeichnung und Wert, zentriert waere
   sie schlechter zu lesen, und der gelbe Balken sitzt links. */
.foerderhinweis-inhalt {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  align-items: flex-start;
}
.foerderhinweis-text {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.foerderhinweis-text h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #1a1918;
}
.foerderhinweis-projekt {
  text-align: left;
  background: rgba(var(--rgb-primary-dark), 0.09);
  border-left: 4px solid var(--accent-color);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  border-radius: 0 4px 4px 0;
}
.foerderhinweis-projekt p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0.3rem;
}
.foerderhinweis-projekt p:last-child { margin-bottom: 0; }
.foerderhinweis-projekt a {
  color: #1a4f9a;
  text-decoration: underline;
}
.foerderhinweis-text > p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-light);
  margin-bottom: 0.75rem;
}
.foerderhinweis-abschluss {
  font-weight: 600;
  font-style: italic;
  color: #1a1918 !important;
}
.foerderhinweis-text > a,
.foerderhinweis-klimalink {
  display: inline-block;
  font-size: 0.85rem;
  color: #1a4f9a;
  text-decoration: underline;
}
.foerderhinweis-platzhalter-hinweis {
  display: inline-block;
  background: #fff3cd;
  border: 1px solid #f0c040;
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  font-size: 0.8rem;
  font-style: italic;
  color: #7a5200;
}
@media (max-width: 768px) {
  .foerderhinweis-inhalt {
    flex-direction: column;
    gap: 1.5rem;
  }
}