/* =========================================================
   GLOBALE BARRIEREFREIHEIT (Fokus-Rahmen & Menü-Funktionen)
   ========================================================= */

/* 1. Fokus-Rahmen: Standard-Fokus bei Maus-Klick verstecken... */
:focus:not(:focus-visible) {
    outline: none !important;
}

/* ...aber dicken Rahmen für Tastatur-Nutzer (Tab-Taste) anzeigen! */
:focus-visible {
    outline: 3px solid #0056b3 !important;
    outline-offset: 2px !important;
}

/* 2. Menü-Funktion: Links hervorheben */
body.a11y-highlight-links a {
    text-decoration: underline !important;
    text-decoration-thickness: 3px !important;
    background-color: #ffcc00 !important;
    color: #000 !important;
}

/* 3. Menü-Funktion: Animationen stoppen */
body.a11y-reduced-motion *,
body.a11y-reduced-motion *::before,
body.a11y-reduced-motion *::after {
    /* Setzt Dauer auf fast null, statt "none", da manche JS-Skripte auf Transitions warten */
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; 
}


/* =========================================================
   STYLING DES MENÜS (Sidebar, Button, Overlay)
   ========================================================= */

/* Der Toggle-Button - ANGEPASST AUF 40x40px UND 70% HÖHE */
.a11y-toggle {
    position: fixed;
    top: 70%; /* Geändert von 50% */
    right: 0;
    transform: translateY(-50%);
    width: 40px;  /* Geändert von 50px */
    height: 40px; /* Geändert von 50px */
    background-color: #0056b3;
    color: white;
    border: none;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
    font-size: 20px; /* Leicht verkleinert für den 40px Button */
    z-index: 100000000000; 
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -4px 0 15px rgba(0,0,0,0.15);
    transition: background-color 0.2s;
}

.a11y-toggle:hover {
    background-color: #004085;
}

/* Die Sidebar (Das Menü) */
.a11y-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    height: 100vh;
    background-color: #f4f4f4; /* Wieder das ursprüngliche helle Grau */
    box-shadow: -5px 0 25px rgba(0,0,0,0.2);
    /* padding-top auf 5vh (5% der Fensterhöhe) gesetzt für den Abstand der Überschrift */
    padding: 10vh 20px 30px 20px; 
    box-sizing: border-box;
    z-index: 999999999;
    overflow-y: auto;
    transform: translateX(100%);
    opacity: 1;
    /*transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);*/
    transition: all 0.3s ease-in-out;
    visibility: hidden;
}

.a11y-sidebar.is-open {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
}
.a11y-sidebar h2 {
    margin-top: 0;
    font-size: 24px !important;
    padding-bottom: 10px;
    /* Alle ungefragten Styles (Farbe und Rahmen) wurden hier entfernt */
}

.a11y-sidebar {padding: 30px !important;}
.a11y-sidebar h2 {margin-top: 0 !important; margin-bottom: 25px !important; line-height: 1.2 !important;}
.a11y-sidebar p {margin-top: 0 !important; margin-bottom: 25px !important; line-height: 1.2 !important;}

.a11y-option-group {
    margin-bottom: 25px;
}

.a11y-option-label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
}

/* Das Layout des Buttons */
.a11y-switch-btn {
    width: 100%;
    padding: 12px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    font-size: 16px !important;
    color: #333;
    transition: all 0.2s;
    
    /* NEU: Flexbox für die Anordnung von Text und Schalter */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Text links, Schalter rechts */
}

.a11y-switch-btn:hover {
    background-color: #f0f0f0;
}

/* Wir entfernen das alte blaue Highlight beim gesamten Button, 
   da nun der Schalter selbst die Farbe wechselt.
*/
.a11y-switch-btn[aria-pressed="true"] {
    background-color: #fff;
    border-color: #ccc;
}

/* --- DAS NEUE SCHALTER-DESIGN (Pille & Kreis) --- */

/* Die Pille (Hintergrund-Spur) */
.a11y-switch-track {
    position: relative;
    width: 44px; /* Breite der Pille */
    height: 24px; /* Höhe der Pille */
    background-color: #ccc; /* Grauer Hintergrund, wenn inaktiv */
    border-radius: 12px; /* Macht die Form zur runden Pille */
    transition: background-color 0.3s ease;
    flex-shrink: 0; /* Verhindert, dass die Pille zusammengequetscht wird */
}

/* Der weiße Kreis */
.a11y-switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    /* Die gleiche sanfte Kurve wie beim Menü selbst */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Leichter Schatten für 3D-Look */
}

/* Wenn der Button aktiv ist (aria-pressed="true"), ändert sich die Pille */
.a11y-switch-btn[aria-pressed="true"] .a11y-switch-track {
    background-color: #0056b3; /* Dunkelblau, wenn aktiv */
}

/* Der weiße Kreis gleitet nach rechts */
.a11y-switch-btn[aria-pressed="true"] .a11y-switch-track::after {
    transform: translateX(20px); /* Bewegt den Kreis um 20px nach rechts */
}

/* RUNDE BUTTONS für Plus/Minus */
.a11y-button-row {
    display: flex;
    gap: 15px;
}

.a11y-button-row button {
    width: 48px;
    height: 48px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    color: #333;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.a11y-button-row button:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* =========================================================
   4. Menü-Funktion: Hoher Kontrast
   ========================================================= */
body.a11y-high-contrast,
body.a11y-high-contrast main,
body.a11y-high-contrast header,
body.a11y-high-contrast footer,
body.a11y-high-contrast section,
body.a11y-high-contrast div {
    background-color: #121212 !important; /* Sehr dunkles Grau (besser als reines Schwarz) */
    color: #ffffff !important; /* Weißer Text */
    border-color: #444 !important;
}

body.a11y-high-contrast h1,
body.a11y-high-contrast h2,
body.a11y-high-contrast h3,
body.a11y-high-contrast h4,
body.a11y-high-contrast p,
body.a11y-high-contrast span,
body.a11y-high-contrast li {
    color: #ffffff !important;
}

/* Links im Kontrastmodus (oft in knalligem Gelb für beste Lesbarkeit) */
body.a11y-high-contrast a {
    color: #ffff00 !important;
    text-decoration: underline !important;
}

/* Optional: Bilder leicht abdunkeln, damit sie nicht blenden */
body.a11y-high-contrast img {
    filter: brightness(0.8) contrast(1.2) !important;
}

/* WICHTIG: Unser Menü selbst vom Kontrastmodus ausnehmen, 
   damit es sein schönes weiß/graues Design behält! */
body.a11y-high-contrast .a11y-sidebar,
body.a11y-high-contrast .a11y-sidebar * {
    background-color: initial;
    color: initial;
}
.a11y-sidebar {
    background-color: #f4f4f4 !important;
}

/* =========================================================
   DIVI-THEME OVERRIDE FÜR DEN KONTRASTMODUS
   ========================================================= */
/* Die ID #page-container schlägt die langen Divi-Klassenketten */
body.a11y-high-contrast #page-container .et_pb_section,
body.a11y-high-contrast #page-container .et_pb_row,
body.a11y-high-contrast #page-container .et_pb_column,
body.a11y-high-contrast #page-container .et_pb_module,
body.a11y-high-contrast #page-container .et_builder_inner_content,
body.a11y-high-contrast #et-boc .et_pb_section,
body.a11y-high-contrast #et-boc .et_pb_row,
body.a11y-high-contrast #et-boc .et_pb_module {
    background-color: #121212 !important;
    background-image: none !important; /* Zwingend nötig, da Divi oft Farbverläufe nutzt! */
}

/* Fallback für alle harten Div-Hintergründe im Divi-Content */
body.a11y-high-contrast .et_builder_inner_content div[style*="background"] {
    background-color: #121212 !important;
    background-image: none !important;
}

/* Menü Dropdowns schwarz färben */
body.a11y-high-contrast #main-header .nav li ul {
    background-color: #161616 !important;
    border: 1px solid white;
}

body.a11y-high-contrast #main-header {
    border-bottom: 2px solid white;
}

body.a11y-high-contrast .et_pb_blog_0 .et_grid_module .et_pb_post {
    background-color: #121212 !important;
}

/* body.a11y-high-contrast .et_pb_button {
    background-color: yellow !important;
    color: black !important;
}*/

/* Übergangsblöcke ausblenden */
body.a11y-high-contrast .et_pb_top_inside_divider, body.a11y-high-contrast .et_pb_bottom_inside_divider {
    display: none;
}

/* Links in der fixierten Navigationsbar */
body.a11y-high-contrast .et-fixed-header #top-menu a,
body.a11y-high-contrast .et-fixed-header #top-menu .current-menu-item a,
body.a11y-high-contrast .et-fixed-header #top-menu li.current-menu-ancestor > a,
body.a11y-high-contrast .et-fixed-header #top-menu li.current-menu-ancestor * { 
color: yellow !important;}

/* Formulare */
body.a11y-high-contrast input,
body.a11y-high-contrast select,
body.a11y-high-contrast textarea {
	background-color: #121212 !important;
	border: 2px solid yellow !important;
    font-size: 1rem;
}

/* Icon Sidebar -> ID muss vergeben werden */
body.a11y-high-contrast #icon-sidebar .et_pb_icon {background-color: yellow !important;}
body.a11y-high-contrast #icon-sidebar .et_pb_icon .et_pb_icon_wrap span {color: black !important;}



/* =========================================================
   MENÜ-ISOLATION: Das Menü vor dem Kontrastmodus schützen
   ========================================================= */

/* Sidebar-Hintergrund wieder hellgrau machen */
body.a11y-high-contrast .a11y-sidebar {
    background-color: #f4f4f4 !important;
}

/* Texte im Menü wieder dunkel machen */
body.a11y-high-contrast .a11y-sidebar h2,
body.a11y-high-contrast .a11y-sidebar p,
body.a11y-high-contrast .a11y-sidebar span,
body.a11y-high-contrast .a11y-sidebar button {
    color: #000 !important;
    line-height: 14px !important;
}

/* Normale Schalter wieder weiß machen */
body.a11y-high-contrast .a11y-switch-btn {
    background-color: #fff !important;
    border: 1px solid #ccc !important;
}

/* Plus/Minus Buttons wieder hell machen */
body.a11y-high-contrast .a11y-button-row button {
    background-color: #f8f9fa !important;
    border: 1px solid #ddd !important;
}

/* Die Pillen-Hintergründe im Schalter schützen (Grau = aus, Blau = an) */
body.a11y-high-contrast .a11y-switch-track {
    background-color: #ccc !important;
}

body.a11y-high-contrast .a11y-switch-btn[aria-pressed="true"] .a11y-switch-track {
    background-color: #0056b3 !important;
}

/* Den kleinen weißen Schalter-Kreis schützen */
body.a11y-high-contrast .a11y-switch-track::after {
    background-color: #fff !important;
}

body.a11y-high-contrast .a11y-sidebar .a11y-option-group,
body.a11y-high-contrast .a11y-sidebar .a11y-button-row {
    background-color: transparent !important;
}

/* =========================================================
   KOMBINATION: Kontrastmodus + Links hervorheben
   ========================================================= */
body.a11y-high-contrast.a11y-highlight-links a {
    background-color: transparent !important; /* Entfernt den gelben Hintergrund */
    color: #ffff00 !important; /* Macht den Text knallgelb für perfekten Kontrast */
    text-decoration: underline !important; /* Behält die dicke Unterstreichung bei */
    text-decoration-thickness: 3px !important;
}

/* =========================================================
   SPEZIELLE ELEMENTE NUR IM KONTRASTMODUS ANZEIGEN (.hc)
   ========================================================= */

/* 1. Standardmäßig: Alle Elemente mit der Klasse .hc komplett verstecken */
.hc {
    display: none !important;
}

/* 2. Wenn Kontrastmodus aktiv: Elemente mit .hc wieder einblenden */
body.a11y-high-contrast .hc {
    display: block !important; 
}

/* Fallback: Falls du die Klasse .hc auf ein <span> oder <a> (also einen Textblock mitten im Satz) legst,
   soll es kein Block werden, der einen Zeilenumbruch erzwingt. */
body.a11y-high-contrast span.hc,
body.a11y-high-contrast a.hc {
    display: inline !important;
}

/* Alle Elemente mit der Klasse .hc-no im normalmodus anzeigen */
.hc-no {
    display: block !important; 
}

/* Wenn Kontrastmodus aktiv: Elemente mit .hc-no ausblenden */
body.a11y-high-contrast .hc-no {
    display: none !important;
}


/* =========================================================
   MENÜ-TOGGLE-BUTTON IM KONTRASTMODUS
   ========================================================= */
body.a11y-high-contrast #a11y-toggle-btn {
    background-color: yellow !important;
    /* Falls dein Button einen Rahmen hat, passen wir den auch an: */
    border-color: yellow !important; 
}

/* Das SVG-Icon im Button schwarz färben */
body.a11y-high-contrast #a11y-toggle-btn svg {
    fill: black !important;
}


/* =========================================================
   Icons am rechten Rand
   ========================================================= */

/* Social Media Icons Rechts*/
/* Zwingt alle inneren Tags (wie i oder span) UND Pseudo-Elemente (::before) zur schwarzen Farbe */
body.a11y-high-contrast a.icon *,
body.a11y-high-contrast a.icon::before,
body.a11y-high-contrast a.icon::after {
    color: black !important;
    background-color: yellow !important;
    border-radius: 3px;
}

/* =========================================================
   AUSNAHME: Moove GDPR Cookie Modal schützen
   ========================================================= */
html body.a11y-high-contrast #moove_gdpr_cookie_modal,
html body.a11y-high-contrast #moove_gdpr_cookie_modal * {
    background-color: revert !important;
    color: revert !important;
    border-color: revert !important;
    background-image: revert !important;
    text-decoration: revert !important;
}

/* Fallback-Sicherheit: Falls das Plugin selbst keinen festen 
   Hintergrund für den Hauptcontainer definiert hat, erzwingen 
   wir hier ein sauberes Weiß, damit es nicht transparent wird. */
html body.a11y-high-contrast #moove_gdpr_cookie_modal .moove-gdpr-modal-content {
    background-color: #ffffff !important;
}

#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme {
    background-color: #121212 !important;
}

body.a11y-high-contrast #moove_gdpr_cookie_info_bar > div > div > div.moove-gdpr-button-holder > button {
    background-color: yellow !important;
    color: black !important;
}


/* =========================================================
   DIVI BUTTONS IM KONTRASTMODUS (Übertrumpft das schwarze Modul)
   ========================================================= */

/* 1. Den Button selbst zwingend gelb machen */
html body.a11y-high-contrast #page-container .et_pb_button,
html body.a11y-high-contrast #et-boc .et_pb_button {
    background-color: yellow !important;
    background-image: none !important; /* Wichtig bei Divi-Verläufen */
    border-color: yellow !important;
    color: black !important;
}

/* 2. Sicherstellen, dass auch der Text im Button schwarz bleibt (überschreibt Link-Farben) */
html body.a11y-high-contrast #page-container .et_pb_button *,
html body.a11y-high-contrast #et-boc .et_pb_button * {
    color: black !important;
}

/* 3. Ein optionaler, aber schicker Hover-Effekt für den Kontrastmodus */
html body.a11y-high-contrast #page-container .et_pb_button:hover,
html body.a11y-high-contrast #et-boc .et_pb_button:hover {
    background-color: white !important;
    border-color: white !important;
    color: black !important;
}

/* 4. Verhindern, dass die "Links hervorheben"-Regel den Button kaputt macht */
html body.a11y-high-contrast.a11y-highlight-links #page-container .et_pb_button {
    text-decoration: none !important;
}

/* =========================================================
   DIVI BLOG GRID BEITRÄGE IM KONTRASTMODUS
   ========================================================= */

/* 1. Hintergrund der Blog-Karten zwingend auf Gelb setzen */
html body.a11y-high-contrast #page-container .et_pb_blog_0 .et_pb_post,
html body.a11y-high-contrast #et-boc .et_pb_blog_0 .et_pb_post {
    background-color: #181818 !important;
    background-image: none !important; /* Wichtig, falls Divi ein unsichtbares Bild drüberlegt */
    border: 0px;
}

/* 2. Sicherstellen, dass Text, Titel und Meta-Daten im gelben Kasten schwarz sind */
html body.a11y-high-contrast #page-container .et_pb_blog_0 .et_pb_post *,
html body.a11y-high-contrast #et-boc .et_pb_blog_0 .et_pb_post * {
    color: yellow !important;
}

/* 3. Link-Unterstreichungen im Blog-Kasten aufräumen */
html body.a11y-high-contrast #page-container .et_pb_blog_0 .et_pb_post a {
    text-decoration: underline !important;
}