/* ═══════════════════════════════════════════════════════════════
   TSV AMPFING — ZENTRALES MENÜ- & DROPDOWN-THEME
   Eine einzige, projektweite Lösung für ALLE Auswahlfelder, Dropdowns,
   Kontext-/Aktionsmenüs, Popover, Combobox/Command, Autocomplete,
   MultiSelect sowie native Datums-/Zeitauswahlen.

   Diese Datei wird auf JEDER Seite (öffentliche Website + Adminbereich)
   eingebunden. Neue Selects/Menüs erben das Theme automatisch — ohne
   zusätzliche Klassen.

   Ziel: nie wieder weißer Text auf weißem Hintergrund. Dunkles Menü,
   heller Text, Hover/Fokus im Vereinsblau, klarer aktiver Eintrag,
   abgeschwächte (aber lesbare) deaktivierte Einträge.

   Browser: Chrome, Edge, Firefox, Safari.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Zentrale Menü-Tokens. Fallbacks sind eingebacken, damit die Datei
     auch auf Seiten ohne eigene Tokens vollständig funktioniert. */
  --menu-bg:      #1a1a1a;   /* Menü-Hintergrund (dunkel) */
  --menu-bg-2:    #252525;   /* alternierender/hover-neutraler Ton */
  --menu-fg:      #f5f5f5;   /* Optionstext (sehr helles Grau/Weiß) */
  --menu-fg-dim:  rgba(245,245,245,.45); /* deaktiviert, aber lesbar */
  --menu-hover:   var(--blue, #1535c8);  /* Hover/Fokus im Vereinsblau */
  --menu-border:  rgba(255,255,255,.12);
  --menu-radius:  6px;
  --menu-shadow:  0 12px 32px rgba(0,0,0,.45);
}

/* ── Native Auswahlfelder + Optionslisten ───────────────────────── */
select{
  color-scheme:dark;                 /* dunkle native Popup-Liste + Pfeil, alle Browser */
}
/* Die aufgeklappte Optionsliste. Firefox/Safari respektieren dies
   vollständig; Chrome/Edge ab v120 ebenfalls. color-scheme:dark deckt
   ältere Versionen ab, sodass NIE weiß-auf-weiß entsteht. */
select option,
select optgroup{
  background-color:var(--menu-bg);
  color:var(--menu-fg);
}
select option:hover,
select option:focus{
  background-color:var(--menu-hover);
  color:#fff;
}
/* Ausgewählter/aktiver Eintrag klar markiert */
select option:checked,
select option[selected]{
  background:var(--menu-hover);
  color:#fff;
  font-weight:600;
}
/* Deaktivierte Optionen: abgeschwächt, aber ausreichend kontrastreich */
select option:disabled,
select:disabled{
  color:var(--menu-fg-dim);
  background-color:var(--menu-bg);
}
/* Sichtbarer Fokus-Ring für Tastaturbedienung im Vereinsblau */
select:focus,
select:focus-visible{
  outline:2px solid var(--blue, #1535c8);
  outline-offset:1px;
  border-color:var(--blue, #1535c8);
}

/* ── Native Datums-/Zeitauswahl (Kalender-/Uhr-Popups) ──────────── */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"]{
  color-scheme:dark;                 /* dunkles Kalender-/Uhr-Popup in allen Browsern */
}

/* ── Wiederverwendbare Komponente für BENUTZERDEFINIERTE Menüs ─────
   Für JS-gebaute Dropdowns, Kontext-/Aktionsmenüs, Popover, Combobox,
   Command, Autocomplete, MultiSelect und Tabellenfilter.
   Einfach class="menu-dark" auf das Popup-Panel und class="menu-dark__item"
   auf die Einträge setzen — künftige Menüs sind damit automatisch korrekt. */
.menu-dark,
[role="menu"],
[role="listbox"]{
  background-color:var(--menu-bg);
  color:var(--menu-fg);
  border:1px solid var(--menu-border);
  border-radius:var(--menu-radius);
  box-shadow:var(--menu-shadow);
}
.menu-dark__item,
[role="menuitem"],
[role="option"]{
  color:var(--menu-fg);
  background:transparent;
  white-space:normal;               /* lange Bezeichnungen nicht abschneiden */
  overflow-wrap:anywhere;
}
.menu-dark__item:hover,
.menu-dark__item:focus,
[role="menuitem"]:hover,
[role="menuitem"]:focus,
[role="option"]:hover,
[role="option"]:focus{
  background-color:var(--menu-hover);
  color:#fff;
}
/* Aktiver/ausgewählter Eintrag klar erkennbar */
.menu-dark__item[aria-selected="true"],
.menu-dark__item.is-active,
[role="option"][aria-selected="true"]{
  background-color:var(--menu-hover);
  color:#fff;
  font-weight:600;
}
/* Deaktivierte Einträge: abgeschwächt, aber lesbar */
.menu-dark__item[aria-disabled="true"],
.menu-dark__item:disabled,
[role="menuitem"][aria-disabled="true"],
[role="option"][aria-disabled="true"]{
  color:var(--menu-fg-dim);
  pointer-events:none;
}
/* Tastatur-Fokus deutlich sichtbar */
.menu-dark:focus-visible,
.menu-dark__item:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible{
  outline:2px solid var(--blue, #1535c8);
  outline-offset:-2px;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE KOPFZEILE — kein Mitglied-Aufruf bis 767px

   Bis 767px teilten sich Logo, zweizeiliger Markenschriftzug, der
   Aufruf „Mitglied werden" und der Hamburger eine 64px hohe Zeile.
   Der Untertitel „SCHWEPPERMÄNNER · 1927" braucht einzeilig 173px und
   bekam auf einem 360px-Telefon nur 114 — er brach um und wirkte
   abgeschnitten. Der Aufruf selbst brauchte 205px und brach ebenfalls.

   Ohne ihn steht der Schriftzug ab 320px einzeilig, und der Hamburger
   bekommt statt 23–26px seine vollen 34px Klickfläche zurück. Logo,
   Schriftgrößen und Kopfzeilenhöhe bleiben unverändert — sie mussten
   nach der Messung nicht verkleinert werden.

   Der Aufruf bleibt im Markup und auf Tablet (768–1199px) sowie
   Desktop unverändert sichtbar. Mobil ist er weiterhin über das
   Hamburger-Menü, den Fußbereich und den Mitgliedschaftsbereich
   erreichbar.

   Diese Datei ist der einzige Ort, den alle Seiten mit Kopfzeile
   gemeinsam und als LETZTES Stilblatt laden — eine Regel statt
   sechzehn gleichlautender.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:767px){
  #nav .nav-cta{display:none;}
}