/**
 * High-Contrast / Barrierefreiheits-Modus
 * Stadt Dorsten WordPress Theme
 *
 * Professioneller Hoher-Kontrast-Modus nach WCAG 2.1 AAA Richtlinien.
 * Ziel: Maximale Lesbarkeit für Menschen mit Sehbeeinträchtigungen.
 *
 * Farbschema:
 *   - Hintergrund:     #1a1a2e (weiches Dunkelblau – weniger hart als reines Schwarz)
 *   - Text:            #f0f0f0 (Weiß mit leicht warmem Ton – weniger grell)
 *   - Links:           #ffd700 (Gold – WCAG AAA konform auf dunklem Hintergrund)
 *   - Akzent/Buttons:  #00d4ff (Cyan – hoher Kontrast, gut unterscheidbar von Links)
 *   - Bordüren:        #4a4a6a (dezentes helles Grau-Blau für Strukturierung)
 *   - Fehler/Warnung:  #ff6b6b (Rot-Orange für wichtige Hinweise)
 *   - Erfolg:          #51cf66 (Grün für positive Elemente)
 */

/* =======================================================
   1. CSS-VARIABLEN ÜBERSCHREIBUNG
   ======================================================= */
body.high-contrast {
    --hc-bg:             #1a1a2e;
    --hc-bg-elevated:    #232342;
    --hc-bg-surface:     #2a2a4a;
    --hc-bg-input:       #16213e;
    --hc-text:           #f0f0f0;
    --hc-text-muted:     #b0b0cc;
    --hc-link:           #ffd700;
    --hc-link-hover:     #ffe44d;
    --hc-accent:         #00d4ff;
    --hc-accent-hover:   #33dfff;
    --hc-border:         #4a4a6a;
    --hc-border-strong:  #7a7a9a;
    --hc-success:        #51cf66;
    --hc-error:          #ff6b6b;
    --hc-focus:          #00d4ff;
    --hc-overlay:        rgba(0, 0, 0, 0.7);

    /* Dorsten-Variablen überschreiben */
    --farbe-dorsten-gruen:        #51cf66;
    --farbe-dorsten-grau:         #f0f0f0;
    --farbe-dorsten-hellgrau:     #b0b0cc;
    --farbe-dorsten-sehr-hellgrau:#4a4a6a;
    --farbe-dorsten-blau:         #00d4ff;
    --farbe-dorsten-andgrau:      #4a4a6a;
    --farbe-verlinkung:           #ffd700;
    --dorsten-color-green:        #51cf66;
    --dorsten-color-blue:         #00d4ff;
    --dorsten-color-gray:         #f0f0f0;
    --dorsten-color-lightgray:    #b0b0cc;
}

/* =======================================================
   2. GRUNDLEGENDE STYLES
   ======================================================= */
body.high-contrast {
    background-color: var(--hc-bg) !important;
    color: var(--hc-text) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.high-contrast *:not(.fas):not(.fa):not(.fab):not(.far):not(.fal):not(.fad):not([class*="fa-"]) {
    text-shadow: none !important;
}

body.high-contrast main,
body.high-contrast #primary,
body.high-contrast .site-main,
body.high-contrast .content-area,
body.high-contrast .entry-content,
body.high-contrast article {
    background-color: var(--hc-bg) !important;
    color: var(--hc-text) !important;
}

body.high-contrast p,
body.high-contrast span:not(.fas):not(.fa):not(.fab):not(.far):not([class*="fa-"]),
body.high-contrast li,
body.high-contrast td,
body.high-contrast th,
body.high-contrast dd,
body.high-contrast dt,
body.high-contrast label,
body.high-contrast figcaption {
    color: var(--hc-text) !important;
}

/* =======================================================
   3. ÜBERSCHRIFTEN
   ======================================================= */
body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast h6 {
    color: #ffffff !important;
}

/* =======================================================
   4. LINKS
   ======================================================= */
body.high-contrast a:not(.wp-block-button__link):not(.btn):not(.button):not(.change-contrast) {
    color: var(--hc-link) !important;
    background-image: none !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 215, 0, 0.4) !important;
    text-underline-offset: 3px !important;
    transition: color 0.2s ease, text-decoration-color 0.2s ease !important;
}

body.high-contrast a:not(.wp-block-button__link):not(.btn):not(.button):not(.change-contrast):hover,
body.high-contrast a:not(.wp-block-button__link):not(.btn):not(.button):not(.change-contrast):focus {
    color: var(--hc-link-hover) !important;
    text-decoration-color: var(--hc-link-hover) !important;
}

body.high-contrast a:focus-visible {
    outline: 3px solid var(--hc-focus) !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

/* =======================================================
   5. TOP HEADER BAR
   ======================================================= */
body.high-contrast .top-header-bar {
    background-color: var(--hc-bg) !important;
    border-bottom: 1px solid var(--hc-border) !important;
    color: var(--hc-text) !important;
}

body.high-contrast .header-links a,
body.high-contrast .header-links .squares span a {
    color: var(--hc-text) !important;
    background-color: var(--hc-bg-surface) !important;
    border: 1px solid var(--hc-border) !important;
}

body.high-contrast .header-links a:hover,
body.high-contrast .header-links a:focus {
    background-color: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
    border-color: var(--hc-accent) !important;
}

/* Barrierefreiheits-Toggle Button */
body.high-contrast .accessibility a.change-contrast {
    background-color: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
    outline: 2px solid var(--hc-accent) !important;
    text-decoration: none !important;
}

/* Farbige Quadrate */
body.high-contrast .color-square {
    border: 1px solid var(--hc-border-strong) !important;
}

body.high-contrast .color-square.green {
    background-color: var(--hc-success) !important;
}

body.high-contrast .color-square.blue {
    background-color: var(--hc-accent) !important;
}

body.high-contrast .color-square.gray {
    background-color: var(--hc-border-strong) !important;
}

/* =======================================================
   6. HEADER & NAVIGATION
   ======================================================= */
body.high-contrast .header-wrapper {
    background: var(--hc-bg-elevated) !important;
}

body.high-contrast .header-wrapper.sticky {
    background: var(--hc-bg-elevated) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

body.high-contrast .site-header,
body.high-contrast #masthead {
    background-color: var(--hc-bg-elevated) !important;
    border-bottom: 2px solid var(--hc-border) !important;
}

/* Logo */
body.high-contrast .custom-logo-link img,
body.high-contrast .default-logo-link img,
body.high-contrast .site-branding img {
    filter: brightness(0) invert(1) !important;
}

/* Hauptnavigation */
body.high-contrast #primary-menu > li > a,
body.high-contrast .main-navigation a {
    color: var(--hc-text) !important;
    text-decoration: none !important;
}

body.high-contrast #primary-menu > li > a:hover,
body.high-contrast #primary-menu > li > a:focus,
body.high-contrast .main-navigation a:hover {
    color: var(--hc-link) !important;
}

body.high-contrast #primary-menu > li.current-menu-item > a,
body.high-contrast #primary-menu > li.current-menu-ancestor > a {
    color: var(--hc-accent) !important;
}

/* Submenu / Dropdown */
body.high-contrast #primary-menu li li,
body.high-contrast #primary-menu .sub-menu {
    background-color: var(--hc-bg-surface) !important;
    border: 1px solid var(--hc-border) !important;
}

body.high-contrast #primary-menu li li a {
    color: var(--hc-text) !important;
    border-bottom: 1px solid var(--hc-border) !important;
}

body.high-contrast #primary-menu li li a:hover,
body.high-contrast #primary-menu li li a:focus {
    color: var(--hc-link) !important;
    background-color: var(--hc-bg-elevated) !important;
}

/* Nav &-Kästchen */
body.high-contrast .nav-and {
    background-color: var(--hc-border) !important;
    color: var(--hc-text) !important;
}

/* =======================================================
   7. HERO / SLIDER
   ======================================================= */
body.high-contrast .hero {
    border-bottom: 3px solid var(--hc-accent) !important;
}

body.high-contrast .hero::before {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

body.high-contrast .hero::after {
    background: none !important;
    display: none !important;
}

body.high-contrast .hero-content p.hero-title,
body.high-contrast .hero-content h6.hero-subtitle,
body.high-contrast .hero-content .hero-title,
body.high-contrast .hero-content .hero-subtitle {
    color: #ffffff !important;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9) !important;
}

/* Slider Controls */
body.high-contrast .hero-slider-prev,
body.high-contrast .hero-slider-next {
    background: rgba(0, 0, 0, 0.7) !important;
    border: 2px solid var(--hc-text) !important;
    color: var(--hc-text) !important;
}

body.high-contrast .hero-slider-prev:hover,
body.high-contrast .hero-slider-next:hover {
    background: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
    border-color: var(--hc-accent) !important;
}

body.high-contrast .hero-slider-dot {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 2px solid var(--hc-text) !important;
}

body.high-contrast .hero-slider-dot.active,
body.high-contrast .hero-slider-dot:hover {
    background: var(--hc-accent) !important;
    border-color: var(--hc-accent) !important;
}

/* Subpage Header */
body.high-contrast .subpage-header::before {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

body.high-contrast .subpage-header::after {
    background: none !important;
    display: none !important;
}

body.high-contrast .subpage-header-content .subpage-title {
    color: #ffffff !important;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9) !important;
}

/* =======================================================
   8. BUTTONS
   ======================================================= */
body.high-contrast .btn,
body.high-contrast button:not(.hero-slider-prev):not(.hero-slider-next):not(.hero-slider-dot):not(.mobile-menu-toggle):not(.search-toggle),
body.high-contrast input[type="submit"],
body.high-contrast input[type="button"],
body.high-contrast .wp-block-button__link,
body.high-contrast .wp-block-button .wp-block-button__link {
    background: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
    border: 2px solid var(--hc-accent) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

body.high-contrast .btn:hover,
body.high-contrast .btn:focus,
body.high-contrast button:not(.hero-slider-prev):not(.hero-slider-next):not(.hero-slider-dot):not(.mobile-menu-toggle):not(.search-toggle):hover,
body.high-contrast input[type="submit"]:hover,
body.high-contrast input[type="button"]:hover,
body.high-contrast .wp-block-button__link:hover,
body.high-contrast .wp-block-button .wp-block-button__link:hover {
    background: var(--hc-bg) !important;
    color: var(--hc-accent) !important;
    border-color: var(--hc-accent) !important;
}

/* Dorsten Button Style */
body.high-contrast .wp-block-button.is-style-dorsten-button .wp-block-button__link {
    background: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

body.high-contrast .wp-block-button.is-style-dorsten-button .wp-block-button__link::after {
    background-color: var(--hc-bg-surface) !important;
}

body.high-contrast .wp-block-button.is-style-dorsten-button .wp-block-button__link:hover {
    background: var(--hc-accent-hover) !important;
}

/* =======================================================
   9. FORMULARE & INPUTS
   ======================================================= */
body.high-contrast input[type="text"],
body.high-contrast input[type="email"],
body.high-contrast input[type="url"],
body.high-contrast input[type="password"],
body.high-contrast input[type="search"],
body.high-contrast input[type="number"],
body.high-contrast input[type="tel"],
body.high-contrast input[type="date"],
body.high-contrast textarea,
body.high-contrast select {
    background-color: var(--hc-bg-input) !important;
    color: var(--hc-text) !important;
    border: 2px solid var(--hc-border-strong) !important;
    border-radius: 4px !important;
}

body.high-contrast input:focus,
body.high-contrast textarea:focus,
body.high-contrast select:focus {
    border-color: var(--hc-focus) !important;
    outline: 2px solid var(--hc-focus) !important;
    outline-offset: 1px !important;
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.2) !important;
}

body.high-contrast input::placeholder,
body.high-contrast textarea::placeholder {
    color: var(--hc-text-muted) !important;
    opacity: 1 !important;
}

/* =======================================================
   10. SUCHBEREICH
   ======================================================= */
body.high-contrast .search-toggle {
    background-color: var(--hc-bg-surface) !important;
    color: var(--hc-text) !important;
    border: 1px solid var(--hc-border) !important;
}

body.high-contrast .search-toggle:hover {
    background-color: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

body.high-contrast .search-overlay,
body.high-contrast .search-form-container {
    background-color: var(--hc-bg-elevated) !important;
    border: 1px solid var(--hc-border) !important;
}

body.high-contrast .search-input,
body.high-contrast .search-field {
    background-color: var(--hc-bg-input) !important;
    color: var(--hc-text) !important;
    border: 2px solid var(--hc-border-strong) !important;
}

body.high-contrast .search-submit {
    background-color: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
    border: 2px solid var(--hc-accent) !important;
}

body.high-contrast .search-submit:hover {
    background-color: var(--hc-bg) !important;
    color: var(--hc-accent) !important;
}

body.high-contrast .search-close {
    background-color: var(--hc-bg-surface) !important;
    color: var(--hc-text) !important;
    border: 1px solid var(--hc-border) !important;
}

body.high-contrast .search-close:hover {
    background-color: var(--hc-error) !important;
    color: #fff !important;
}

body.high-contrast .search-results .current {
    background-color: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

/* =======================================================
   11. DORSTEN ICON-BOX WIDGET
   ======================================================= */
body.high-contrast .dorsten-icon-box {
    background-color: var(--hc-bg-surface) !important;
    color: var(--hc-text) !important;
    border: 2px solid var(--hc-border) !important;
    transition: all 0.3s ease !important;
}

body.high-contrast .dorsten-icon-box:hover {
    background-color: var(--hc-accent) !important;
    border-color: var(--hc-accent) !important;
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.3) !important;
}

body.high-contrast .dorsten-icon-box-title {
    color: var(--hc-text) !important;
}

body.high-contrast .dorsten-icon-box:hover .dorsten-icon-box-title,
body.high-contrast .dorsten-icon-box:hover .dorsten-icon-box-description {
    color: var(--hc-bg) !important;
}

body.high-contrast .dorsten-icon-box i,
body.high-contrast .dorsten-icon-box svg {
    color: var(--hc-accent) !important;
    fill: var(--hc-accent) !important;
}

body.high-contrast .dorsten-icon-box:hover i,
body.high-contrast .dorsten-icon-box:hover svg {
    color: var(--hc-bg) !important;
    fill: var(--hc-bg) !important;
}

body.high-contrast .dorsten-icon-box-image {
    opacity: 0.15 !important;
}

/* =======================================================
   12. DORSTEN CONTACT-BOX WIDGET
   ======================================================= */
body.high-contrast .dorsten-contact-box {
    background-color: var(--hc-bg-surface) !important;
    color: var(--hc-text) !important;
    border: 2px solid var(--hc-border) !important;
}

body.high-contrast .dorsten-contact-box::after {
    opacity: 0.05 !important;
}

body.high-contrast .dorsten-contact-footer {
    background: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

body.high-contrast .dorsten-contact-box a,
body.high-contrast .dorsten-contact-text a {
    color: var(--hc-link) !important;
}

body.high-contrast .dorsten-contact-box h3,
body.high-contrast .dorsten-contact-box h4,
body.high-contrast .dorsten-contact-box .dorsten-contact-title {
    color: #ffffff !important;
}

body.high-contrast .dorsten-contact-box .dorsten-contact-emergency {
    color: var(--hc-error) !important;
    font-weight: 700 !important;
}

/* =======================================================
   13. DORSTEN RECENT-POSTS WIDGET
   ======================================================= */
body.high-contrast .dorsten-recent-posts .pageteaser-teaser {
    background: var(--hc-bg-surface) !important;
    border: 2px solid var(--hc-border) !important;
}

body.high-contrast .dorsten-recent-posts .pageteaser-text-content > ul {
    background: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

body.high-contrast .dorsten-recent-posts .pageteaser-text-content p {
    color: var(--hc-text) !important;
}

body.high-contrast .dorsten-recent-posts .pageteaser-text-content p::after {
    color: var(--hc-link) !important;
}

body.high-contrast .dorsten-recent-posts .pageteaser-text-content p a,
body.high-contrast .dorsten-recent-posts a {
    color: var(--hc-link) !important;
}

body.high-contrast .dorsten-recent-posts h3 a,
body.high-contrast .dorsten-recent-posts .pageteaser-text-content h3 a {
    color: #ffffff !important;
    text-decoration: none !important;
}

body.high-contrast .dorsten-recent-posts h3 a:hover {
    color: var(--hc-link) !important;
}

body.high-contrast .dorsten-recent-posts .button .button-content > i {
    background: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

body.high-contrast .dorsten-recent-posts .button .button-content > span {
    background: var(--hc-bg-surface) !important;
    color: var(--hc-text) !important;
    border: 2px solid var(--hc-border) !important;
}

body.high-contrast .dorsten-recent-posts .button .button-content:hover > span {
    background: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

body.high-contrast .dorsten-recent-posts .button .button-content:hover > i {
    background: var(--hc-bg-surface) !important;
    color: var(--hc-accent) !important;
}

body.high-contrast .dorsten-recent-posts .no-posts {
    color: var(--hc-text-muted) !important;
    background: var(--hc-bg-surface) !important;
}

/* =======================================================
   14. DORSTEN NAVIGATION-MENÜ (SIDEBAR)
   ======================================================= */
body.high-contrast .dorsten-sidebar-nav {
    background-color: var(--hc-bg-surface) !important;
    color: var(--hc-text) !important;
    border: 2px solid var(--hc-border) !important;
}

body.high-contrast .dorsten-menu-link {
    color: var(--hc-text) !important;
}

body.high-contrast .dorsten-menu-link:hover,
body.high-contrast .dorsten-menu-link:focus {
    color: var(--hc-link) !important;
}

body.high-contrast .dorsten-menu-item--active > .dorsten-menu-link {
    color: var(--hc-accent) !important;
}

body.high-contrast .dorsten-toggle-icon {
    background-color: var(--hc-bg-elevated) !important;
    color: var(--hc-text) !important;
    border: 1px solid var(--hc-border) !important;
}

body.high-contrast .dorsten-toggle-icon.is-active {
    background-color: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

body.high-contrast .dorsten-submenu {
    background-color: var(--hc-bg-elevated) !important;
    border-left: 3px solid var(--hc-accent) !important;
}

body.high-contrast .dorsten-menu-item--level-2,
body.high-contrast .dorsten-menu-item--level-3 {
    background-color: var(--hc-bg-elevated) !important;
}

body.high-contrast .dorsten-menu-item--level-1 + .dorsten-menu-item--level-1,
body.high-contrast .dorsten-menu-item--level-2 + .dorsten-menu-item--level-2 {
    border-top: 1px solid var(--hc-border) !important;
}

/* =======================================================
   15. FULL-WIDTH CONTAINER
   ======================================================= */
body.high-contrast .dorsten-full-width-container {
    border-top: 1px solid var(--hc-border) !important;
    border-bottom: 1px solid var(--hc-border) !important;
}

body.high-contrast .dorsten-full-width-container.dorsten-section-primary {
    background-color: var(--hc-bg-surface) !important;
}

body.high-contrast .dorsten-full-width-container.dorsten-section-secondary {
    background-color: var(--hc-bg-elevated) !important;
}

body.high-contrast .dorsten-inner-container-shadow {
    background: var(--hc-bg-elevated) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--hc-border) !important;
}

/* =======================================================
   16. FOOTER
   ======================================================= */
body.high-contrast .site-footer {
    background-color: var(--hc-bg-elevated) !important;
    color: var(--hc-text) !important;
    border-top: 3px solid var(--hc-accent) !important;
}

body.high-contrast .site-footer::before {
    opacity: 0.03 !important;
}

body.high-contrast .site-footer .widget-title,
body.high-contrast .site-footer h4,
body.high-contrast .site-footer h5 {
    color: #ffffff !important;
}

body.high-contrast .footer-column,
body.high-contrast .footer-column *,
body.high-contrast .footer-column p,
body.high-contrast .footer-column span,
body.high-contrast .footer-column li {
    color: var(--hc-text) !important;
}

body.high-contrast .footer-column a {
    color: var(--hc-link) !important;
    text-decoration: underline !important;
}

body.high-contrast .footer-column a:hover {
    color: var(--hc-link-hover) !important;
}

body.high-contrast .footer-column::before {
    background-color: var(--hc-border) !important;
}

body.high-contrast .site-footer .footer-logo-img {
    filter: brightness(0) invert(1) !important;
}

body.high-contrast .site-footer a[href^="tel:"]::before {
    background-color: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

body.high-contrast .site-footer .footer-bottom,
body.high-contrast .site-footer .site-info {
    background-color: var(--hc-bg) !important;
    border-top: 1px solid var(--hc-border) !important;
    color: var(--hc-text-muted) !important;
}

/* =======================================================
   17. BLOCKQUOTES & GUTENBERG BLÖCKE
   ======================================================= */
body.high-contrast blockquote,
body.high-contrast .wp-block-quote {
    background-color: var(--hc-bg-elevated) !important;
    border-left: 4px solid var(--hc-accent) !important;
    color: var(--hc-text) !important;
}

body.high-contrast blockquote cite,
body.high-contrast .wp-block-quote cite {
    color: var(--hc-text-muted) !important;
}

body.high-contrast .wp-block-quote.is-style-dorsten-quote {
    background-color: var(--hc-bg-elevated) !important;
    border-left: 6px solid var(--hc-accent) !important;
}

body.high-contrast .wp-block-quote.is-style-dorsten-quote::before {
    color: var(--hc-accent) !important;
    opacity: 0.3 !important;
}

body.high-contrast .wp-block-group.is-style-dorsten-highlight {
    background-color: var(--hc-bg-elevated) !important;
    border: 2px solid var(--hc-accent) !important;
}

body.high-contrast .wp-block-group.is-style-dorsten-highlight::before {
    background-color: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

body.high-contrast .wp-block-group.is-style-dorsten-highlight h1,
body.high-contrast .wp-block-group.is-style-dorsten-highlight h2,
body.high-contrast .wp-block-group.is-style-dorsten-highlight h3,
body.high-contrast .wp-block-group.is-style-dorsten-highlight h4,
body.high-contrast .wp-block-group.is-style-dorsten-highlight h5,
body.high-contrast .wp-block-group.is-style-dorsten-highlight h6 {
    color: var(--hc-accent) !important;
}

/* Tabellen */
body.high-contrast table {
    border-color: var(--hc-border) !important;
}

body.high-contrast th {
    background-color: var(--hc-bg-surface) !important;
    color: #ffffff !important;
    border-color: var(--hc-border) !important;
}

body.high-contrast td {
    border-color: var(--hc-border) !important;
}

body.high-contrast tr:nth-child(even) {
    background-color: var(--hc-bg-elevated) !important;
}

/* =======================================================
   18. KOMMENTARE
   ======================================================= */
body.high-contrast .comments-title::after {
    background-color: var(--hc-accent) !important;
}

body.high-contrast .comment-body {
    background-color: var(--hc-bg-surface) !important;
    box-shadow: none !important;
    border: 1px solid var(--hc-border) !important;
}

body.high-contrast .bypostauthor > .comment-body {
    border-left: 4px solid var(--hc-accent) !important;
    background-color: var(--hc-bg-elevated) !important;
}

body.high-contrast .comment-author img {
    border: 2px solid var(--hc-accent) !important;
}

body.high-contrast .author-badge {
    background-color: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

body.high-contrast .comment-reply-link {
    background-color: var(--hc-bg-elevated) !important;
    color: var(--hc-accent) !important;
    border: 1px solid var(--hc-accent) !important;
    text-decoration: none !important;
}

body.high-contrast .comment-reply-link:hover {
    background-color: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

body.high-contrast .comment-respond {
    background-color: var(--hc-bg-surface) !important;
    box-shadow: none !important;
    border: 1px solid var(--hc-border) !important;
}

body.high-contrast .comment-reply-title::after {
    background-color: var(--hc-accent) !important;
}

body.high-contrast .comment-form-field input,
body.high-contrast .comment-form-field textarea {
    background-color: var(--hc-bg-input) !important;
    border: 2px solid var(--hc-border-strong) !important;
    color: var(--hc-text) !important;
}

/* =======================================================
   19. PAGINATION
   ======================================================= */
body.high-contrast .page-links,
body.high-contrast .pagination,
body.high-contrast .nav-links {
    background-color: transparent !important;
}

body.high-contrast .page-links a,
body.high-contrast .pagination a,
body.high-contrast .nav-links a {
    background-color: var(--hc-bg-surface) !important;
    color: var(--hc-text) !important;
    border: 2px solid var(--hc-border) !important;
    text-decoration: none !important;
}

body.high-contrast .page-links a:hover,
body.high-contrast .pagination a:hover,
body.high-contrast .nav-links a:hover {
    background-color: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
    border-color: var(--hc-accent) !important;
}

body.high-contrast .page-links .current,
body.high-contrast .page-links .page-number,
body.high-contrast .pagination .current,
body.high-contrast .nav-links .current {
    background-color: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
    border: 2px solid var(--hc-accent) !important;
}

/* =======================================================
   20. MOBILE NAVIGATION
   ======================================================= */
body.high-contrast .mobile-menu-toggle {
    background: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
    border: 2px solid var(--hc-accent) !important;
}

body.high-contrast .mobile-menu-toggle:hover {
    background: var(--hc-bg) !important;
    color: var(--hc-accent) !important;
}

body.high-contrast .mobile-navigation {
    background: var(--hc-bg-elevated) !important;
    border-left: 3px solid var(--hc-accent) !important;
}

body.high-contrast .mobile-nav-close-top {
    background: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

body.high-contrast .mobile-navigation a {
    color: var(--hc-text) !important;
    border-bottom: 1px solid var(--hc-border) !important;
    text-decoration: none !important;
}

body.high-contrast .mobile-navigation a:hover,
body.high-contrast .mobile-navigation a:focus {
    color: var(--hc-link) !important;
    background-color: var(--hc-bg-surface) !important;
}

body.high-contrast .mobile-navigation .toggle-submenu {
    background: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

body.high-contrast .mobile-navigation .sub-menu {
    background: var(--hc-bg) !important;
    border-left: 4px solid var(--hc-accent) !important;
}

body.high-contrast .mobile-navigation .current-menu-item > a {
    background: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

/* =======================================================
   21. MENU-BOXES (Navigation Kästchen)
   ======================================================= */
body.high-contrast .navigation-item--level-1 > .navigation-link::before {
    background-color: var(--hc-accent) !important;
}

body.high-contrast .navigation-item--level-1.navigation-item--state-active > .navigation-link::before {
    background-color: var(--hc-link) !important;
}

/* =======================================================
   22. 404+FEHLERSEITE
   ======================================================= */
body.high-contrast .error-404-container,
body.high-contrast .error-404-content {
    background: var(--hc-bg) !important;
}

body.high-contrast .error-message h1 {
    color: var(--hc-accent) !important;
}

body.high-contrast .error-message h2,
body.high-contrast .error-message p {
    color: var(--hc-text) !important;
}

body.high-contrast .helpful-links h3:after {
    background: var(--hc-accent) !important;
}

body.high-contrast .contact-suggestion {
    border-top-color: var(--hc-border) !important;
}

/* =======================================================
   23. ELEMENTOR-SPEZIFISCH
   ======================================================= */
body.high-contrast .elementor,
body.high-contrast .elementor-element,
body.high-contrast .elementor-section,
body.high-contrast .elementor-container,
body.high-contrast .elementor-column,
body.high-contrast .elementor-widget-wrap,
body.high-contrast .elementor-column-wrap,
body.high-contrast .e-con,
body.high-contrast .e-con-inner,
body.high-contrast .e-con-full,
body.high-contrast .e-parent,
body.high-contrast .e-child {
    background-color: var(--hc-bg) !important;
}

/* Elementor Sektionen mit spezifischen Hintergründen → dunkle Variante */
body.high-contrast .elementor-section[data-settings],
body.high-contrast .e-con[data-settings] {
    background-color: var(--hc-bg) !important;
    border: 1px solid var(--hc-border) !important;
}

/* Full-Width Container in Elementor */
body.high-contrast .dorsten-full-width-container.e-con,
body.high-contrast .e-con.dorsten-full-width-container {
    background-color: var(--hc-bg-elevated) !important;
}

body.high-contrast .elementor-widget-container {
    color: var(--hc-text) !important;
}

body.high-contrast .elementor-heading-title {
    color: #ffffff !important;
}

body.high-contrast .elementor-text-editor {
    color: var(--hc-text) !important;
}

body.high-contrast .elementor-icon {
    color: var(--hc-accent) !important;
}

body.high-contrast .elementor-icon-box-title {
    color: #ffffff !important;
}

body.high-contrast .elementor-icon-box-description {
    color: var(--hc-text) !important;
}

body.high-contrast .elementor-counter-number-wrapper,
body.high-contrast .elementor-counter-title {
    color: var(--hc-accent) !important;
}

body.high-contrast .elementor-section[data-settings] {
    border: 1px solid var(--hc-border) !important;
}

body.high-contrast .elementor-button {
    background-color: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
    border: 2px solid var(--hc-accent) !important;
}

body.high-contrast .elementor-button:hover {
    background-color: var(--hc-bg) !important;
    color: var(--hc-accent) !important;
}

/* =======================================================
   24. BILDER & MEDIEN
   ======================================================= */
body.high-contrast img {
    opacity: 0.9 !important;
    border: 1px solid var(--hc-border) !important;
}

body.high-contrast .hero img,
body.high-contrast .hero-slider-slide img,
body.high-contrast .subpage-header img,
body.high-contrast .custom-logo-link img,
body.high-contrast .default-logo-link img,
body.high-contrast .site-branding img,
body.high-contrast .footer-logo-img,
body.high-contrast .site-footer img {
    border: none !important;
    opacity: 1 !important;
}

body.high-contrast .wp-caption-text,
body.high-contrast .gallery-caption,
body.high-contrast figcaption {
    color: var(--hc-text-muted) !important;
}

/* =======================================================
   25. SCROLLBAR
   ======================================================= */
body.high-contrast::-webkit-scrollbar {
    width: 12px;
    background-color: var(--hc-bg);
}

body.high-contrast::-webkit-scrollbar-thumb {
    background-color: var(--hc-border-strong);
    border-radius: 6px;
    border: 3px solid var(--hc-bg);
}

body.high-contrast::-webkit-scrollbar-thumb:hover {
    background-color: var(--hc-accent);
}

/* =======================================================
   26. EVENTS CALENDAR (falls aktiv)
   ======================================================= */
body.high-contrast .tribe-events,
body.high-contrast .tribe-common {
    color: var(--hc-text) !important;
}

body.high-contrast .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event {
    background-color: var(--hc-bg-surface) !important;
    border: 1px solid var(--hc-border) !important;
}

body.high-contrast .tribe-events-calendar-list__event-title a {
    color: var(--hc-link) !important;
}

body.high-contrast .tribe-events-c-small-cta__link {
    color: var(--hc-accent) !important;
}

/* =======================================================
   27. SELECTION / MARKIERUNG
   ======================================================= */
body.high-contrast ::selection {
    background-color: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

body.high-contrast ::-moz-selection {
    background-color: var(--hc-accent) !important;
    color: var(--hc-bg) !important;
}

/* =======================================================
   28. DRUCKSTILE (Kontrast bei Druck zurücksetzen)
   ======================================================= */
@media print {
    body.high-contrast,
    body.high-contrast * {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
}

/* =======================================================
   29. SMOOTH TRANSITION (Sanfter Wechsel)
   ======================================================= */
body.high-contrast-transition,
body.high-contrast-transition *,
body.high-contrast-transition *::before,
body.high-contrast-transition *::after {
    transition: background-color 0.4s ease, 
                color 0.4s ease, 
                border-color 0.4s ease,
                box-shadow 0.3s ease,
                opacity 0.3s ease !important;
}