/* ==========================================================================
   ft-a11y.css — Welle 5033 (Barrierefreiheit, Maßstab WCAG 2.2 AA / BITV / BFSG)
   Wird als LETZTES Stylesheet in allen Kopfzeilen geladen (includes/header.php, die fünf
   Saison-Header, login.php). Nur additive Regeln: Fokus, Sprunglink, Kontraste, Zielgrößen,
   reduzierte Bewegung, Umbruch bei 200/400 % Zoom. Keine Layout-Umbauten.
   Kontrastwerte (vorher → nachher) stehen im Bericht w5033/a11y_bericht.md.
   ========================================================================== */

/* ---------- 1. Farb-Token (hell) ---------- */
:root {
  --ft-a11y-focus: #004e63;          /* Fokusrahmen: 9,25:1 auf Weiß, 8,54:1 auf #f4f6f8 */
  --ft-a11y-focus-gap: #ffffff;      /* heller Innenring: trennt den Rahmen von dunklen Flächen */
  /* war nirgends definiert -> Links im Dunkelmodus fielen auf #006c87 zurück (2,77:1 auf #1e1e1e) */
  --friendstime-logo-outer-ring-light-blue: #66c7e0;   /* 8,58:1 auf #1e1e1e */
  --primary-color-hover: #00586e;    /* vorher #008db3: Weiß darauf 3,85:1 -> jetzt 8,01:1 */
  --border-color-input-light: #868e96; /* Feldrahmen vorher #ced4da 1,49:1 -> 3,32:1 */
  --border-color-input-dark: #8a8a8a;  /* vorher #555 1,93:1 auf #2a2a2a -> 4,16:1 */
}
/* ---------- Farb-Token (dunkel) ---------- */
html.ft-dark-pre, body.dark-mode, body.dark-theme, [data-theme="dark"] {
  --ft-a11y-focus: #7fe3ec;          /* 12,6:1 auf #121212, 11,2:1 auf #1e1e1e */
  --ft-a11y-focus-gap: #0b0f14;
}
html.a11y-contrast-high { --ft-a11y-focus: #ffff00; --ft-a11y-focus-gap: #000000; }

/* ---------- 2. Sprunglink „Zum Inhalt springen“ (WCAG 2.4.1) ---------- */
.skip-link, .ft-skip-link {
  position: absolute !important;
  left: 8px !important;
  top: -200px !important;
  z-index: 100000 !important;
  padding: 12px 18px !important;
  background: #004e63 !important;   /* Weiß darauf 9,25:1 */
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
  border-radius: 0 0 10px 10px !important;
  text-decoration: underline !important;
  transition: none !important;
  clip: auto !important;
  width: auto !important;
  height: auto !important;
  white-space: nowrap;
}
.skip-link:focus, .skip-link:focus-visible, .ft-skip-link:focus, .ft-skip-link:focus-visible {
  top: 0 !important;
  outline: 3px solid #ffffff !important;
  outline-offset: -6px !important;
  box-shadow: 0 0 0 3px #004e63, 0 6px 18px rgba(0, 0, 0, .35) !important;
}
#main-content, main, [role="main"] { scroll-margin-top: 80px; }
/* Fokus nicht verdeckt (WCAG 2.4.11): Tab-Sprünge halten Abstand zur festen Kopf- und unteren Leiste */
html:has(.navbar.fixed-top) { scroll-padding-top: 76px; }
@media (max-width: 991.98px) {
  html:has(.mobile-sub-nav) { scroll-padding-top: 132px; }
  html:has(#ftBottomNav) { scroll-padding-bottom: 84px; }
}
#main-content:focus, main[tabindex="-1"]:focus, [role="main"][tabindex="-1"]:focus,
h1[tabindex="-1"]:focus { outline: none; }

/* ---------- 3. Sichtbarer Fokus (WCAG 2.4.7, 1.4.11) ----------
   Zweifarbiger Rahmen: heller Innenring + dunkler Außenring -> ≥ 3:1 auf jedem Hintergrund.
   Nur Tastatur-Fokus (:focus-visible); Maus-Klicks bleiben ohne Rahmen. */
:is(a[href], area[href], button, input:not([type="hidden"]), select, textarea, summary, iframe,
    [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="menuitemradio"],
    [role="menuitemcheckbox"], [role="option"], [role="switch"], [role="checkbox"], [role="radio"],
    [role="slider"], [role="treeitem"], [contenteditable=""], [contenteditable="true"],
    [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--ft-a11y-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--ft-a11y-focus-gap) !important;
}
/* Einträge in Listen/Menüs: Rahmen nach innen, sonst schneidet der Container ihn ab */
:is(.dropdown-item, .list-group-item, .ft-bottom-item, .mobile-tab-btn, .nav-tabs .nav-link,
    .ftf-lang__link):focus-visible {
  outline-offset: -3px !important;
  box-shadow: none !important;
}
.skip-link:focus-visible { outline-offset: -6px !important; }
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px !important; }
}

/* ---------- 4. Kontraste Text + Bedienelemente (WCAG 1.4.3, 1.4.11) ---------- */
/* Feldrahmen (Bootstrap-Standard #dee2e6/#ced4da = 1,3–1,5:1) */
.form-control, .form-select { border-color: var(--current-input-border-color, #868e96); }
.form-check-input { border-color: #6c757d; }                       /* 4,69:1 */
body.dark-mode .form-check-input { border-color: #adb5bd; }
body.dark-mode .form-control::placeholder,
body.dark-mode .form-panel textarea::placeholder { color: #9aa1a8; } /* vorher #868e96 4,32:1 -> 5,49:1 */
/* Suchfeld in der Kopfzeile */
.navbar-custom #search_input { border-color: #868e96; }
.navbar-custom #search_input::placeholder,
.ft-search-wrap-mobile #search_input_mobile::placeholder { color: #5a6168; } /* vorher #6b7280 auf #f2f2f2 4,32:1 */
.ft-search-wrap::before { color: #6b7280 !important; }              /* Lupe vorher #9ca3af 2,27:1 */
body.dark-mode .ft-search-wrap::before { color: #c5cad1 !important; }
#mobileSearchClose { color: #4b5563 !important; }                   /* vorher #9ca3af 2,54:1 -> 7,56:1 */
body.dark-mode #mobileSearchClose { color: #d4d6d8 !important; }
/* Untere Leiste: aktiver Eintrag #00A0C6 auf Weiß = 3,07:1 */
.ft-bottom-item.active, .ft-bottom-item:hover { color: #006c87 !important; }   /* 6,01:1 */
.ft-bottom-item.active::before { background: #006c87 !important; }
body.dark-mode .ft-bottom-item.active, body.dark-mode .ft-bottom-item:hover { color: #56ccf2 !important; }
body.dark-mode .ft-bottom-item.active::before { background: #56ccf2 !important; }
/* Dunkelmodus: Bootstrap-Textfarben sind für helle Flächen gemacht */
body.dark-mode .text-muted, body.dark-mode .text-body-secondary { color: #adb5bd !important; }   /* 8,0:1 */
body.dark-mode .text-primary { color: #6ea8fe !important; }   /* vorher #0d6efd 3,70:1 -> 6,90:1 */
body.dark-mode .text-danger  { color: #ea868f !important; }   /* vorher #dc3545 3,68:1 -> 6,59:1 */
body.dark-mode .text-success { color: #75b798 !important; }   /* 7,13:1 */
body.dark-mode .form-panel h1, body.dark-mode .form-panel h2 { color: #66c7e0; } /* vorher #006c87 2,77:1 */

/* ---------- 5. Zielgröße mindestens 24 × 24 px (WCAG 2.5.8) ---------- */
:where(button, [role="button"], .btn, a.nav-link, .dropdown-item, summary,
       .btn-close, .ft-icon-btn, .ftf-icon-btn):not(.visually-hidden):not(.sr-only) {
  min-height: 24px;
}
:where(button, [role="button"], .btn-close):not(.visually-hidden):not(.sr-only) { min-width: 24px; }

/* ---------- 6. Bewegung reduzieren (WCAG 2.3.3, 2.2.2) ---------- */
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Saison-Effekte (fallende Symbole, Feuerwerk, Konfetti) laufen endlos -> bei reduzierter Bewegung
   bzw. Schalter „Bewegung aus“ der Barrierefreiheits-Leiste ganz ausblenden. */
@media (prefers-reduced-motion: reduce) {
  #halloweenFalling, #halloweenFlicker, #christmasSnowfall, #carnivalConfetti, #streamersContainer,
  #fireworksCanvas, #rocketsContainer, #confettiContainer, #easterEggs, .hopping-bunny,
  .falling-item, .snowflake, .ft-season-fx, .ft-season-deco { display: none !important; }
}
html.a11y-no-motion :is(#halloweenFalling, #halloweenFlicker, #christmasSnowfall, #carnivalConfetti,
  #streamersContainer, #fireworksCanvas, #rocketsContainer, #confettiContainer, #easterEggs,
  .hopping-bunny, .falling-item, .snowflake, .ft-season-fx, .ft-season-deco) { display: none !important; }

/* Saison-Gruß auf index.php: weißer Text auf heller Akzentfarbe (z. B. Orange #ff7518 ≈ 2,9:1).
   Dunkle Lasur über dem Verlauf (unter dem Text) -> Weiß ≥ 4,5:1 auch bei Gelb. */
.ft-holiday-banner { box-shadow: 0 6px 20px rgba(0, 0, 0, .18) !important; } /* W5073: Farbe wird in index.php per ft_season_safe_bg auf >= 7:1 (AAA) gedunkelt, Lasur entfaellt */
.ft-holiday-banner p { opacity: 1 !important; }

/* ---------- 7. Umbruch bei 200/400 % Zoom (WCAG 1.4.10) ---------- */
@media (max-width: 359.98px) {
  /* 320 px CSS-Breite (= 1280 px bei 400 %): Schriftzug im Logo ausblenden, Bild mit alt bleibt */
  .navbar-custom .navbar-brand .logo-friends, .navbar-custom .navbar-brand .logo-time { display: none; }
  .navbar-custom .ft-iconbar .nav-link { padding: .45rem .4rem !important; }
  .ft-preview-menu { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; }
}
.navbar-custom .dropdown-menu { max-width: calc(100vw - 16px); }
.navbar-custom .dropdown-menu .dropdown-item { white-space: normal; }

/* Kopfzeilen der drei Vorschau-Menüs: <h6> -> <p class="h6"> (Überschrift vor der h1 brach die
   Gliederung). Aussehen wie bisher (Regeln aus header.php für h6 übernommen). */
:is(#notificationsDropdown, #friendsDropdown, #messagesDropdown) + .dropdown-menu > li:first-child p.h6 {
  font-weight: 700; letter-spacing: -0.01em; color: #1f2937;
}
body.dark-mode :is(#notificationsDropdown, #friendsDropdown, #messagesDropdown) + .dropdown-menu > li:first-child p.h6 { color: #f3f4f6; }

/* Cookie-Hinweis (includes/footer.php): Text rgba(255,255,255,.8) auf #667eea = 2,92:1,
   „Einstellungen“ Weiß auf Glas = 2,72:1, Dunkel-Verlauf endet auf #928dab (3,17:1) */
#cookieConsentBanner.cookie-banner { background: linear-gradient(135deg, #4c51bf 0%, #5b3a8c 100%) !important; } /* 6,49 / 8,65:1 */
#cookieConsentBanner .cookie-banner-text p, #cookieConsentBanner .cookie-banner-text h3,
#cookieConsentBanner .text-muted { color: #ffffff !important; }
#cookieConsentBanner a:not(.btn) { color: #ffffff !important; text-decoration: underline; }
#cookieConsentBanner .btn-light { background: rgba(0, 0, 0, .22) !important; border-color: rgba(255, 255, 255, .75) !important; color: #ffffff !important; } /* ≈ 8,7:1 */
@media (prefers-color-scheme: dark) {
  #cookieConsentBanner.cookie-banner { background: linear-gradient(135deg, #1f1c2c 0%, #4a4569 100%) !important; } /* 8,95:1 */
}

/* ---------- 8. Hilfsklasse: nur für Screenreader ---------- */
.ft-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ---------- 9. Anmeldeseite login.php (eigener Kopf, Verlauf-Hintergrund) ---------- */
/* Weißer Text lag auf #f093fb (2,04:1) bzw. #667eea (3,66:1) -> dunkle Unterlage / dunklerer Verlauf */
.login-wrapper .login-hero { background: rgba(30, 27, 75, .62) !important; }       /* Weiß ≥ 9:1 */
.login-wrapper .login-btn { background: linear-gradient(135deg, #4c51bf, #6b3fa0) !important; } /* 6,49 / 7,38:1 */
.login-wrapper .login-btn:hover { background: linear-gradient(135deg, #3c3fa3, #57307f) !important; }
.login-wrapper .login-btn:disabled { background: #6c757d !important; }
.login-wrapper .trust-badge { color: #4b5563 !important; }                          /* vorher 4,45:1 -> 7,3:1 */
.login-wrapper .trust-badge i { color: #047857 !important; }                         /* Symbol vorher 2,41:1 */
.login-wrapper .attempts-warn { color: #b45309 !important; }                         /* vorher 3,19:1 -> 5,02:1 */
.login-wrapper .footer-links { background: rgba(17, 24, 39, .72); border-radius: 12px; padding: 8px 10px; }
.login-wrapper .footer-links a { opacity: 1 !important; display: inline-block; padding: 4px 2px; text-decoration: underline; }

/* (Welle 5033, 29.10.2026) Bootstrap-slim-Luecke: bootstrap.slim.min.css enthaelt KEINE .row-cols-*-Regeln. Ohne sie standen
   z. B. auf friendsbot.php vier Karten auf dem Handy nebeneinander (Woerter mitten im Wort umgebrochen). Regeln 1:1 aus
   Bootstrap 5.3.2 (bootstrap.min.css): Handy = row-cols-1 untereinander, ab sm/md/lg/xl wie angegeben. */
.row-cols-auto>*{flex:0 0 auto;width:auto}
.row-cols-1>*{flex:0 0 auto;width:100%}
.row-cols-2>*{flex:0 0 auto;width:50%}
.row-cols-3>*{flex:0 0 auto;width:33.33333333%}
.row-cols-4>*{flex:0 0 auto;width:25%}
.row-cols-5>*{flex:0 0 auto;width:20%}
.row-cols-6>*{flex:0 0 auto;width:16.66666667%}
@media (min-width:576px){.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.66666667%}}
@media (min-width:768px){.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.66666667%}}
@media (min-width:992px){.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.66666667%}}
@media (min-width:1200px){.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.66666667%}}
@media (min-width:1400px){.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.66666667%}}

/* Lange Woerter in schmalen Karten sauber umbrechen statt abschneiden */
.card,.card-body{overflow-wrap:break-word;word-break:normal;hyphens:auto}

/* ---------- 10. (Welle 5060) Hoher Kontrast Schwarz/Gelb: Lücken geschlossen ----------
   Grundregel steht in includes/a11y_toolbar.php (alle Elemente: #000 / #ffff00 / Rahmen #ffff00 = 19,6:1).
   Hier: Verläufe/Hintergrundbilder unter Text, Bootstrap-Variablen der Themes (ft-pwa, ftui, m2, admin-nav),
   Formular-Grafiken (Häkchen, Schalter, Select-Pfeil), Zustände (aktiv/gewählt/deaktiviert), Chat-Blasen, Fokus,
   Platzhalter, Markierung, Tabellen, Modals/Dropdowns/Karten mit sichtbarer Kante. Werte: Gelb #ffff00 auf #000 = 19,6:1,
   Schwarz auf Gelb = 19,6:1, Cyan #00ffff auf #000 = 16,7:1, Weiß auf #000 = 21:1 (alle ≥ 7:1, WCAG AAA). */
html.a11y-contrast-high {
  --ft-a11y-focus: #ffffff; --ft-a11y-focus-gap: #000000;
  --bs-body-bg: #000; --bs-body-color: #ffff00; --bs-link-color: #00ffff; --bs-link-hover-color: #ffffff;
  --bs-border-color: #ffff00; --bs-secondary-color: #ffff00; --bs-tertiary-color: #ffff00;
  --bs-heading-color: #ffff00; --bs-emphasis-color: #ffff00; --bs-secondary-bg: #000; --bs-tertiary-bg: #000;
  --bs-form-control-bg: #000; --bs-form-control-color: #ffff00; --bs-form-check-bg: #000;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffff00'/%3e%3c/svg%3e");
  --bs-dropdown-bg: #000; --bs-dropdown-color: #ffff00; --bs-dropdown-link-color: #00ffff; --bs-dropdown-link-hover-bg: #ffff00; --bs-dropdown-link-hover-color: #000;
  --bs-modal-bg: #000; --bs-modal-color: #ffff00; --bs-card-bg: #000; --bs-card-color: #ffff00; --bs-card-border-color: #ffff00;
  --bs-list-group-bg: #000; --bs-list-group-color: #ffff00; --bs-list-group-border-color: #ffff00;
  --bs-table-bg: #000; --bs-table-color: #ffff00; --bs-table-border-color: #ffff00; --bs-table-striped-bg: #000; --bs-table-hover-bg: #1a1a00;
  --bs-nav-link-color: #00ffff; --bs-nav-tabs-link-active-bg: #ffff00; --bs-nav-tabs-link-active-color: #000;
  --bs-btn-bg: #000; --bs-btn-color: #ffff00; --bs-btn-border-color: #ffff00; --bs-btn-hover-bg: #ffff00; --bs-btn-hover-color: #000;
  --bs-toast-bg: #000; --bs-toast-color: #ffff00; --bs-popover-bg: #000; --bs-popover-body-color: #ffff00; --bs-offcanvas-bg: #000; --bs-offcanvas-color: #ffff00;
  --bs-accordion-bg: #000; --bs-accordion-color: #ffff00; --bs-accordion-btn-bg: #000; --bs-accordion-btn-color: #ffff00; --bs-accordion-active-bg: #000; --bs-accordion-active-color: #ffff00;
  --bs-progress-bg: #000; --bs-progress-bar-bg: #ffff00; --bs-progress-bar-color: #000;
  --bs-pagination-bg: #000; --bs-pagination-color: #00ffff; --bs-pagination-active-bg: #ffff00; --bs-pagination-active-color: #000; --bs-pagination-border-color: #ffff00;
  --bs-alert-bg: #000; --bs-alert-color: #ffff00; --bs-alert-border-color: #ffff00;
  --bs-placeholder-opacity: 1; --bs-highlight-bg: #ffff00; --bs-highlight-color: #000; --bs-code-color: #ffff00;
  /* Eigene Theme-Variablen (ft-pwa/ftui/m2/admin-nav/header): alles auf Schwarz/Gelb */
  --primary-color: #ffff00; --primary-color-hover: #ffffff; --secondary-color: #ffff00; --accent-color: #ffff00;
  --text-color: #ffff00; --text-muted: #ffff00; --bg-color: #000; --bg-secondary: #000; --card-bg: #000; --border-color: #ffff00;
  --current-input-border-color: #ffff00; --friendstime-logo-outer-ring-light-blue: #ffff00;
  --ft-bg: #000; --ft-surface: #000; --ft-surface-2: #000; --ft-text: #ffff00; --ft-muted: #ffff00; --ft-border: #ffff00; --ft-primary: #ffff00; --ft-accent: #ffff00;
  --m2-bg: #000; --m2-surface: #000; --m2-text: #ffff00; --m2-muted: #ffff00; --m2-border: #ffff00; --m2-accent: #ffff00;
  --ftui-bg: #000; --ftui-surface: #000; --ftui-text: #ffff00; --ftui-muted: #ffff00; --ftui-border: #ffff00; --ftui-accent: #ffff00;
  --admin-nav-bg: #000; --admin-nav-text: #ffff00; --admin-nav-border: #ffff00; --admin-nav-hover: #1a1a00; --admin-nav-active: #ffff00;
  color-scheme: dark;
  scrollbar-color: #ffff00 #000;
}
/* Verläufe und Hintergrundbilder unter Text entfernen (Gelb auf Verlauf wäre nicht messbar) */
html.a11y-contrast-high body :is(.btn, .navbar, .navbar-custom, nav, header, footer, .card, .card-header, .card-footer, .modal-content, .modal-header,
  .dropdown-menu, .list-group-item, .hero, .banner, .jumbotron, .page-header, .cover, .profile-cover, .login-hero, .login-wrapper, .login-btn,
  .ft-holiday-banner, .ft-bottom-nav, #ftBottomNav, .mobile-sub-nav, .admin-nav, .sidebar, .offcanvas, .toast, .alert, .badge-pill, .progress, .progress-bar,
  .a11y-toggle, .a11y-panel, .a11y-head, [class*="gradient"], [class*="hero"], [class*="-banner"], [class*="bg-"], [class*="btn-"], [style*="gradient"]) {
  background-image: none !important;
}
html.a11y-contrast-high body [class*="bg-"], html.a11y-contrast-high body [class*="text-"] { background-color: #000 !important; color: #ffff00 !important; }
html.a11y-contrast-high body *::before, html.a11y-contrast-high body *::after { color: inherit; border-color: #ffff00; }
html.a11y-contrast-high body *::placeholder { color: #ffff00 !important; opacity: .85 !important; }     /* ≈ #d9d900 auf #000 = 14,6:1 */
html.a11y-contrast-high ::selection { background: #ffff00 !important; color: #000 !important; }
html.a11y-contrast-high body mark, html.a11y-contrast-high body .mark { background-color: #ffff00 !important; color: #000 !important; }
/* Sichtbare Kante für schwebende Flächen (Schatten tragen nicht) */
html.a11y-contrast-high body :is(.modal-content, .dropdown-menu, .card, .toast, .popover, .offcanvas, .list-group, .alert, .a11y-panel, .ft-preview-menu,
  .navbar-custom, #ftBottomNav, .mobile-sub-nav, .tooltip-inner, .chat-container, .form-control, .form-select, .input-group, table, th, td) {
  border: 2px solid #ffff00 !important; box-shadow: none !important;
}
html.a11y-contrast-high body :is(th, td) { border-width: 1px !important; }
html.a11y-contrast-high body .modal-backdrop { background-color: #000 !important; opacity: .85 !important; }
/* Zustände: aktiv/gewählt/aktuell = umgekehrt (Schwarz auf Gelb 19,6:1) */
html.a11y-contrast-high body :is(.active, [aria-pressed="true"], [aria-selected="true"], [aria-current], .selected, .is-active, .nav-link.active,
  .btn.active, .btn:hover, .btn-check:checked + .btn, .list-group-item.active, .dropdown-item.active, .dropdown-item:hover, .dropdown-item:focus, .page-item.active .page-link,
  .nav-tabs .nav-link.active, .mobile-tab-btn.active-tab, .ft-bottom-item.active, .a11y-btn[aria-pressed="true"], .btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info):not(.a11y-keep-color) {
  background-color: #ffff00 !important; color: #000 !important; border-color: #ffffff !important;
}
html.a11y-contrast-high body :is(.active, [aria-pressed="true"], [aria-selected="true"], [aria-current], .btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn:hover, .dropdown-item:hover) :is(i, span, small, b, strong, em):not(.badge) { color: #000 !important; background-color: transparent !important; }
html.a11y-contrast-high body a:hover, html.a11y-contrast-high body a:focus-visible { color: #ffffff !important; }
/* Deaktiviert: gestrichelt + gedimmt, bleibt lesbar (Gelb 60 % ≈ #999900 auf #000 = 7,2:1) */
html.a11y-contrast-high body :is(:disabled, .disabled, [aria-disabled="true"]) { opacity: .6 !important; border-style: dashed !important; cursor: not-allowed; }
/* Formular-Grafiken: Häkchen/Punkt/Schalter/Select-Pfeil in Gelb bzw. Schwarz auf Gelb */
html.a11y-contrast-high body input.form-check-input { background-color: #000 !important; border: 2px solid #ffff00 !important; }
html.a11y-contrast-high body input.form-check-input:checked { background-color: #ffff00 !important; border-color: #ffffff !important; }
html.a11y-contrast-high body input.form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
html.a11y-contrast-high body input.form-check-input:checked[type="radio"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e"); }
html.a11y-contrast-high body .form-switch .form-check-input:checked { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e"); }
html.a11y-contrast-high body .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffff00' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-image: var(--bs-form-select-bg-img) !important; }
html.a11y-contrast-high body :is(input, select, textarea, button) { accent-color: #ffff00; }
html.a11y-contrast-high body .a11y-switch span { background-color: #000 !important; border: 2px solid #ffff00 !important; }
html.a11y-contrast-high body .a11y-switch input:checked + span { background-color: #ffff00 !important; }
html.a11y-contrast-high body .a11y-switch span::before { background-color: #ffff00 !important; }
html.a11y-contrast-high body .a11y-switch input:checked + span::before { background-color: #000 !important; }
/* Chat-Blasen: eigene Nachrichten umgekehrt (Schwarz auf Gelb), fremde Gelb auf Schwarz mit Rahmen */
html.a11y-contrast-high body :is(.message-bubble, .chat-message, .chat-bubble, .msg-bubble, .ftg-bubble) { border: 2px solid #ffff00 !important; background-image: none !important; }
html.a11y-contrast-high body :is(.message-bubble.outgoing, .chat-message.outgoing, .chat-message.sent, .chat-message.own, .msg-out, .bubble-out, .ftg-bubble--me) { background-color: #ffff00 !important; color: #000 !important; border-color: #ffffff !important; }
html.a11y-contrast-high body :is(.message-bubble.outgoing, .chat-message.outgoing, .chat-message.sent, .chat-message.own, .msg-out, .bubble-out, .ftg-bubble--me) :is(*:not(a):not(img):not(.badge)) { color: #000 !important; background-color: transparent !important; }
html.a11y-contrast-high body :is(.message-bubble.outgoing, .chat-message.outgoing, .chat-message.sent, .chat-message.own) a { color: #000080 !important; } /* Navy auf Gelb 15,3:1 */
/* Symbole/SVG folgen der Textfarbe; Bilder behalten Entsättigung (Toolbar); Status-Punkte bleiben (a11y_toolbar.php) */
html.a11y-contrast-high body svg:not(.a11y-keep-color):not([class*="logo"]) { fill: currentColor; color: inherit; }
html.a11y-contrast-high body :is(i, .fa, .fas, .far, .fab, .bi) { color: inherit !important; }
/* Fokus-Ring: Weiß mit schwarzem Innenring (21:1), klar von gelben Rahmen unterscheidbar */
html.a11y-contrast-high :focus-visible { outline: 3px solid #ffffff !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #000000 !important; }
html.a11y-contrast-high .skip-link, html.a11y-contrast-high .ft-skip-link { background: #ffff00 !important; color: #000 !important; }
/* Tabellen: Zebra/Hover über Schatten-Trick abschalten */
html.a11y-contrast-high body .table > :not(caption) > * > * { box-shadow: none !important; background-color: #000 !important; color: #ffff00 !important; }
/* Links im hohen Kontrast immer unterstrichen (auch .btn-link, .nav-link) */
html.a11y-contrast-high body :is(a, .btn-link, .nav-link) { text-decoration: underline !important; text-underline-offset: 2px; }
html.a11y-contrast-high body :is(.btn, .ft-bottom-item, .mobile-tab-btn, .a11y-link, .navbar-brand) { text-decoration: none !important; }
/* Bild-Beschriftungen/Overlays auf Bildern: dunkle Unterlage, damit Gelb lesbar bleibt */
html.a11y-contrast-high body :is(.carousel-caption, .card-img-overlay, .overlay, .cover-text) { background-color: rgba(0, 0, 0, .9) !important; }

/* ---------- 11. (Welle 5073, 05.11.2026) Kopfzeilen: Text-Kontrast AAA (>= 7:1), Symbole >= 4,5:1, Touch-Ziele 44 px ----------
   Messung vorher/nachher: scratchpad w5073/header_kontrast.md. Frei waehlbare Akzent-/Pride-Farben: includes/a11y_color.php
   (ft_contrast_safe / ft_contrast_safe_bg) bzw. ft_apw_css (Mindestkontrast 7:1). */
/* Suchfeld */
.navbar-custom #search_input::placeholder, .ft-search-wrap-mobile #search_input_mobile::placeholder { color: #48525f; }   /* 7,0:1 auf #f0f1f1 */
.ft-search-wrap::before { color: #48525f !important; }
body.dark-mode .navbar-custom #search_input::placeholder, body.dark-mode .ft-search-wrap-mobile #search_input_mobile::placeholder { color: #c5cad1; } /* vorher #9ca3af 5,6:1 */
/* Menues: Hover/Fokus in Akzentfarbe (vorher #00A0C6 auf Tint 2,9:1) */
.navbar-custom .dropdown-item:hover, .navbar-custom .dropdown-item:focus-visible { color: #00566c; }
body.dark-mode .navbar-custom .dropdown-item:hover, body.dark-mode .navbar-custom .dropdown-item:focus-visible { color: #4fd0ee; }
.navbar-custom .dropdown-item.text-danger, .navbar-custom .dropdown-item.text-danger:hover { color: #9b1b27 !important; }
body.dark-mode .navbar-custom .dropdown-item.text-danger, body.dark-mode .navbar-custom .dropdown-item.text-danger:hover { color: #ff9aa5 !important; }
#messages-preview-list .dropdown-item .small { color: #374151; }
/* Zaehler-Badges (weisse Zahl auf Rot/Gruen/Pink war 3,6-4,5:1) */
.navbar-custom .badge.bg-danger, .ft-iconbar .badge.bg-danger, .navbar .badge.bg-danger, .badge-notify.bg-danger { background-color: #a5202d !important; color: #fff !important; }
.navbar-custom .badge.bg-success, .navbar .badge.bg-success { background-color: #13653f !important; color: #fff !important; }
.navbar-custom .badge, .ft-iconbar .badge { font-size: .7rem; }
.ft-live-nav-badge, .ft-live-side-badge { background: #b3002d !important; color: #fff !important; }
#ftLiveNavLink i { color: #d6324d; }                                  /* Symbol 4,5:1+ (vorher #ff3b5c 3,6:1) */
body.dark-mode #ftLiveNavLink i { color: #ff6b85; }
/* Untere Leiste + Drawer-Tabs */
.ft-bottom-item { color: #374151; }
.ft-bottom-item.active, .ft-bottom-item:hover { color: #00566c !important; }
.ft-bottom-item.active::before { background: #00566c !important; }
.ft-drawer-tabs .nav-link { color: #4b5563; }
.ft-drawer-tabs .nav-link.active { color: #fff; background: linear-gradient(135deg, #006077, #00566c); }
/* Stoerungs-Hinweisleiste, Admin-Vorschau-Leiste */
.ft-svc-bar__x { min-width: 44px; min-height: 44px; }
.ft-svc-bar__x:focus-visible { outline: 3px solid var(--ft-a11y-focus) !important; outline-offset: 2px; }
.ft-imp-banner { background: #8a3f06 !important; }
/* Admin-Kopf/Seitenleiste */
.sidebar .nav-link.active { background: #2f48c9 !important; color: #fff !important; }
.sidebar .btn-toggle-nav a { color: #d5dae6; }
.sidebar .btn-toggle-nav a.active { color: #ffffff; }
/* Touch-Ziele >= 44 x 44 px (WCAG 2.5.5, Kopfzeile + untere Leiste) */
.navbar-custom .ft-iconbar .nav-link, .navbar-custom .navbar-toggler, #mobileProfileToggle, #mobileSearchClose, #mobileSearchToggle,
.ft-bottom-item { min-width: 44px; min-height: 44px; }
.navbar-custom .ft-iconbar .nav-link, #mobileProfileToggle, #mobileSearchToggle { display: inline-flex; align-items: center; justify-content: center; }
/* Windows-Kontrastmodus (forced-colors): Flaechen verschwinden -> Kanten/Rahmen erhalten */
@media (forced-colors: active) {
  .navbar-custom { border-bottom: 1px solid CanvasText; }
  .navbar-custom .badge, .ft-iconbar .badge, .ft-live-nav-badge { border: 1px solid CanvasText; forced-color-adjust: none; background: Canvas !important; color: CanvasText !important; }
  .ft-svc-bar, .ft-imp-banner { border: 1px solid CanvasText; forced-color-adjust: auto; }
  .ft-bottom-item.active, .navbar-custom .nav-link[aria-current] { outline: 2px solid Highlight; }
  .ft-bottom-nav { border-top: 1px solid CanvasText; }
}

/* ---------- 12. (Welle 5073, Betreiber-Zusatz) Hoher Kontrast: Dekor neutralisieren ---------- */
html.a11y-contrast-high :is(.ft-season-deco, .ft-season-fx, .falling-item, .snowflake, .hopping-bunny, #halloweenFalling, #halloweenFlicker,
  #christmasSnowfall, #carnivalConfetti, #streamersContainer, #fireworksCanvas, #rocketsContainer, #confettiContainer, #easterEggs) { display: none !important; }
html.a11y-contrast-high body .navbar-custom::after { background: #ffff00 !important; background-image: none !important; height: 2px !important; box-shadow: none !important; animation: none !important; }
html.a11y-contrast-high body :is(.navbar-custom, .navbar, header, .ft-site-header, .lp-hero, .ft-holiday-banner, .ft-svc-bar, .ft-imp-banner, .cookie-banner,
  .ft-bottom-nav, #ftBottomNav, .mobile-sub-nav, .hero, .page-header) { background-image: none !important; box-shadow: none !important; text-shadow: none !important; }
html.a11y-contrast-high body :is(.navbar-custom, .navbar, header, .ft-site-header, .lp-hero, .ft-holiday-banner, .hero, .page-header) :is(*, *::before, *::after):not(img):not(video):not(picture):not(svg) { background-image: none !important; box-shadow: none !important; text-shadow: none !important; }
html.a11y-contrast-high body :is(.lp-hero, .hero, .page-header, .ft-holiday-banner)::before, html.a11y-contrast-high body :is(.lp-hero, .hero, .page-header, .ft-holiday-banner)::after { background: none !important; background-image: none !important; display: none !important; }
html.a11y-contrast-high body .lp-content-card h2::after, html.a11y-contrast-high body h2::after { background: #ffff00 !important; background-image: none !important; }
html.a11y-contrast-high body #ftToTop { background: #000 !important; background-image: none !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; box-shadow: none !important; }
html.a11y-contrast-high body #ftToTop :is(i, svg, span) { color: #ffff00 !important; fill: #ffff00 !important; }
/* Barrierefreiheits-Lasche: bei offenem Panel nicht ausfahren (ueberdeckte das Panel) */
html body .a11y-toggle[aria-expanded="true"] .a11y-toggle-label, html body .a11y-toggle[aria-expanded="true"]:hover .a11y-toggle-label,
html body .a11y-toggle[aria-expanded="true"]:focus-visible .a11y-toggle-label { max-width: 0 !important; opacity: 0 !important; padding: 0 !important; }