/**
 * Accessibility Fixes for MedUnit Theme
 * WCAG 2.1 AA Compliance
 * Created for BFSG compliance
 */

/* ==========================================================================
   1. Focus Indicators - WCAG 2.4.7
   ========================================================================== */

/* Remove the outline:none overrides and add visible focus states */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 3px solid #007693 !important;
    outline-offset: 2px !important;
    outline-style: solid !important;
}

/* Enhanced focus for navbar elements to ensure visibility on transparent backgrounds */
.navbar a:focus,
.navbar button:focus {
    outline: 3px solid #005570 !important;
    outline-offset: 2px !important;
    position: relative !important;
    z-index: 9999 !important;
}

/* Even stronger focus for transparent navbar */
.nav-transparent .navbar-nav a:focus,
.navbar-area.nav-transparent a:focus{
    outline: 3px solid #005570 !important;
    outline-offset: 2px !important;
    box-shadow: none!important;
    position: relative !important;
    z-index: 9999 !important;
}
.nav-transparent .navbar-nav .sub-menu a:focus,
.navbar-area.nav-transparent .sub-menu a:focus {
    outline: 3px solid white !important;
    outline-offset: 2px !important;
    box-shadow: none!important;
    position: relative !important;
    z-index: 9999 !important;
}


/* Focus styles for form elements */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    outline: 3px solid #0073aa !important;
    outline-offset: 0 !important;
    border-color: #0073aa !important;
}

/* Focus styles for buttons */
.btn:focus,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
    outline: 3px solid #0073aa !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.25) !important;
}

/* ==========================================================================
   2. Screen Reader Text - Already exists but ensuring it works
   ========================================================================== */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ==========================================================================
   3. Skip Links Enhancement
   ========================================================================== */

.skip-link {
    position: absolute;
    left: -9999rem;
    z-index: 999999999;
    text-decoration: none;
}

.skip-link:focus {
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    color: #fff;
    background-color: #000;
    padding: 1em;
    font-size: 1.2em;
    font-weight: bold;
}

/* ==========================================================================
   4. Form Accessibility
   ========================================================================== */

/* Ensure labels are visible and properly styled */
label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

/* Search form specific fixes */
.search-form {
    position: relative;
}

.search-form label {
    position: absolute;
    left: -9999px;
}

/* ==========================================================================
   5. Navigation Accessibility
   ========================================================================== */

/* Mobile menu toggle button enhancement */
.toggle-btn:focus {
    outline: 3px solid #ffcc00 !important;
    outline-offset: 2px !important;
}

/* Dropdown menu keyboard navigation */
.navbar-nav .dropdown-menu {
    display: none;
}

.navbar-nav .dropdown:hover .dropdown-menu,
.navbar-nav .dropdown:focus-within .dropdown-menu {
    display: block;
}

/* ==========================================================================
   6. Color Contrast Fixes - WCAG 2.1 AA Compliance
   ========================================================================== */

/* Override the global text color variable for better contrast */
:root {
    --e-global-color-text: #555555 !important; /* Was #7a7a7a - now 7.0:1 contrast */
}

/* Apply darker text color only where needed, not on dark backgrounds */
body {
    color: #555555;
}

/* Override body color for elements inside dark backgrounds */
.elementor-element-352e18a0 *,
[style*="background-color: #007693"] *,
[style*="background-color: rgb(0, 118, 147)"] * {
    color: #ffffff !important;
}

/* Target specific content areas that need contrast fixes */
/* Only apply to main content areas, not special sections */
main .elementor-widget-text-editor p,
main .elementor-widget-text-editor li,
.entry-content p:not([style*="color"]),
.entry-content li,
article.post p:not([style*="color"]),
article.post li {
    color: #555555 !important;
}

/* Fix inline styles using the CSS variable */
span[style*="--e-global-color-text"],
div[style*="--e-global-color-text"],
p[style*="--e-global-color-text"],
li span[style*="--e-global-color-text"] {
    color: #555555 !important;
}

/* Fix service boxes and similar components with light gray text */
/* Only target specific service/feature/icon boxes that need darker text */
.service-box p,
.feature-box p,
.icon-box p {
    color: #555555 !important;
}

/* Hinweis box should have white text on dark background - Desktop only */
@media (min-width: 769px) {
    .hinweis,
    .hinweis *,
    .hinweis p,
    .hinweis h1,
    .hinweis h2,
    .hinweis h3,
    .overlay-text .hinweis *,
    .video-container .hinweis *,
    div.hinweis p {
        color: #ffffff !important;
    }
    
    /* Style the "Neue Adresse" heading with Marcellus font */
    .hinweis-title,
    .hinweis h2,
    .hinweis h3 {
        font-family: 'Marcellus', serif !important;
        font-weight: 400 !important;
        font-size: 32px !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }
}

/* Mobile: Hinweis box with light background and black text */
@media (max-width: 768px) {
    .hinweis {
        background-color: #fbf7f3 !important; /* Light beige background */
        padding: 15px !important;
        border-radius: 8px !important;
    }
    
    .hinweis,
    .hinweis *,
    .hinweis p,
    .hinweis h1,
    .hinweis h2,
    .hinweis h3 {
        color: #000000 !important; /* Black text for contrast */
    }
    
    /* Style the "Neue Adresse" heading specifically */
    .hinweis-title,
    .hinweis h2,
    .hinweis h3,
    .hinweis .heading {
        font-family: 'Marcellus', serif !important;
        font-weight: 400 !important;
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }
}

/* Overlay text should be white for contrast on dark background - Desktop only */
@media (min-width: 769px) {
    .overlay-text p,
    .overlay-text span,
    .overlay-text .text-inner p,
    .overlay-text .text-inner span,
    .video-container .overlay-text p,
    .video-container .text-inner p {
        color: #ffffff !important;
    }
}

/* Fix any remaining #777777 gray text */
[style*="color: #777"],
[style*="color:#777"],
[style*="color: #777777"],
[style*="color:#777777"],
[style*="color: rgb(119"],
[style*="color:rgb(119"] {
    color: #555555 !important;
}

/* Removed overly broad text editor rule - color is now handled by more specific selectors */

/* Footer text is handled in the consolidated rule below */

/* Preserve white text on dark backgrounds */
/* Simplified approach: target specific dark background areas */
footer,
footer *,
.site-footer,
.site-footer *,
#footer-table,
#footer-table * {
    color: #ffffff !important;
}

/* Elements with dark teal background */
[style*="background-color: #007693"] *,
[style*="background-color: rgb(0, 118, 147)"] * {
    color: #ffffff !important;
}

/* Keep existing white text styles */
.text-white,
.white-text,
[style*="color: white" i],
[style*="color: #ffffff" i] {
    color: #ffffff !important;
}

/* Ensure inline white color styles are respected */
[style*="color: white"],
[style*="color:white"],
p[style*="color: white"],
p[style*="color:white"] {
    color: #ffffff !important;
}

/* Targeted contrast fixes for specific elements that fail WCAG AA */

/* Fix grey text in specific areas - NOT globally */
.medunit-grey-text,
.post-meta time,
.post-meta span,
.entry-meta,
.posted-on,
.byline,
.comments-link,
.blog-date,
.blog-meta {
    color: #4a4a4a; /* Was #777777 - now 5.9:1 contrast */
}

/* Navbar specific fixes */
.navbar-top .navbar-text,
.navbar-top .text-muted {
    color: #4a4a4a;
}

/* Form placeholders - ensure they meet contrast requirements */
input::placeholder,
textarea::placeholder {
    color: #595959; /* Was #999999 - now 4.65:1 contrast */
    opacity: 1;
}

/* Form inputs text color - ensure proper contrast */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
select,
textarea,
.wpcf7-form-control {
    color: #555555 !important; /* Was #7a7a7a - now 7.0:1 contrast */
}

/* Breadcrumbs */
.breadcrumb-item,
.breadcrumb-item a {
    color: #4a4a4a; /* Was #777777 */
}

/* Ensure sufficient contrast for small/muted text */
small,
.small,
.text-muted {
    color: #4a4a4a;
}

/* Fix low contrast text in cards/boxes */
.card .text-muted,
.box .text-muted,
.service-box .text-muted {
    color: #4a4a4a;
}

/* Pagination contrast */
.pagination .page-link {
    color: #2d2d2d;
}

/* Fix inline styles with low contrast - more specific selectors */
.medunit-content [style*="color: #777"],
.medunit-content [style*="color:#777"],
.medunit-content [style*="color: #777777"],
.medunit-content [style*="color:#777777"] {
    color: #4a4a4a !important;
}

.medunit-content [style*="color: #999"],
.medunit-content [style*="color:#999"],
.medunit-content [style*="color: #999999"],
.medunit-content [style*="color:#999999"] {
    color: #595959 !important;
}

.medunit-content [style*="color: #666"],
.medunit-content [style*="color:#666"],
.medunit-content [style*="color: #666666"],
.medunit-content [style*="color:#666666"] {
    color: #4a4a4a !important;
}

/* ==========================================================================
   7. Text Readability Enhancement
   ========================================================================== */

/* Add semi-transparent background to text overlays for better readability - Desktop only */
@media (min-width: 769px) {
    .text-inner {
        background: #000000ba;
        padding: 1em;
        border-radius: 0.7em;
    }
}

/* Mobile styles - No background, black text */
@media (max-width: 768px) {
    .text-inner {
        background: transparent !important;
        padding: 0;
        border-radius: 0;
    }
    
    /* Override white text colors for mobile */
    .text-inner .welcome,
    .text-inner .welcome span,
    .text-inner p,
    .text-inner span,
    .overlay-text .text-inner p,
    .overlay-text .text-inner span,
    .video-container .overlay-text p,
    .video-container .text-inner p {
        color: #000000 !important;
    }
    
    /* Specifically target the welcome text */
    .text-inner span:contains("Herzlich Willkommen im"),
    .text-inner .welcome span {
        color: #000000 !important;
    }
    
    /* Target the service description text */
    .text-inner p,
    .overlay-text p {
        color: #000000 !important;
    }
}

/* ==========================================================================
   8. Image Accessibility
   ========================================================================== */

/* Ensure images without alt text are marked */
img:not([alt]) {
    border: 3px solid red !important;
}

/* ==========================================================================
   8. ARIA Live Regions
   ========================================================================== */

.aria-live-polite {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   9. High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline-width: 4px !important;
    }
}

/* ==========================================================================
   10. Reduced Motion Support
   ========================================================================== */

@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;
    }
}

/* ==========================================================================
   11. Keyboard Navigation Enhancements
   ========================================================================== */

/* Show focus only for keyboard users - Make it bold and teal like the default */
body.keyboard-navigation *:focus {
    outline: 3px solid #007693 !important;
    outline-offset: 2px !important;
    outline-style: solid !important;
    opacity: 1 !important;
    box-shadow: 0 0 0 5px rgba(0, 118, 147, 0.3) !important;
}

/* Extra specificity for common elements during keyboard navigation */
body.keyboard-navigation a:focus,
body.keyboard-navigation button:focus,
body.keyboard-navigation input:focus,
body.keyboard-navigation select:focus,
body.keyboard-navigation textarea:focus,
body.keyboard-navigation [tabindex]:focus {
    outline: 3px solid #007693 !important;
    outline-offset: 2px !important;
    outline-style: solid !important;
    opacity: 1 !important;
}

/* Enhanced keyboard focus indicator */
.keyboard-focus {
    outline: 3px solid #0073aa !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.25) !important;
}

/* Dropdown menu keyboard navigation */
.navbar-nav li.focus > .dropdown-menu {
    display: block;
}

/* ==========================================================================
   12. Error Message Styling
   ========================================================================== */

.error-message {
    color: #d00;
    font-size: 0.875em;
    margin-top: 0.25em;
    display: block;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: #d00 !important;
}

/* ==========================================================================
   13. Button Accessibility Enhancement - Keyboard Focus Only
   ========================================================================== */

/* Focus state with white outline for keyboard navigation only */
.keyboard-navigation .btn:focus,
.keyboard-navigation button:focus,
.keyboard-navigation input[type="button"]:focus,
.keyboard-navigation input[type="reset"]:focus,
.keyboard-navigation input[type="submit"]:focus,
.keyboard-navigation .termin-button:focus,
.keyboard-navigation .mgbutton:focus,
.keyboard-navigation a[role="button"]:focus,
body.keyboard-navigation .btn:focus,
body.keyboard-navigation button:focus,
body.keyboard-navigation input[type="button"]:focus,
body.keyboard-navigation input[type="reset"]:focus,
body.keyboard-navigation input[type="submit"]:focus,
body.keyboard-navigation .termin-button:focus,
body.keyboard-navigation .mgbutton:focus,
body.keyboard-navigation a[role="button"]:focus {
    outline: 3px solid #fff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(255, 255, 255, 0.5) !important;
}

/* Alternative: Use focus-visible for modern browsers */
.btn:focus-visible,
button:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="submit"]:focus-visible,
.termin-button:focus-visible,
.mgbutton:focus-visible,
a[role="button"]:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(255, 255, 255, 0.5) !important;
}

/* Special focus for dark background buttons */
.keyboard-navigation .btn-primary:focus,
.keyboard-navigation .termin-button:focus,
.keyboard-navigation .mgbutton:focus,
.keyboard-navigation button[style*="background-color: #007693"]:focus,
.keyboard-navigation button[style*="background-color: #0C4DA2"]:focus,
.keyboard-navigation a[style*="background-color: #007693"]:focus,
.keyboard-navigation a[style*="background-color: #0C4DA2"]:focus,
body.keyboard-navigation .btn-primary:focus,
body.keyboard-navigation .termin-button:focus,
body.keyboard-navigation .mgbutton:focus {
    outline: 3px solid #fff !important;
    outline-offset: 3px !important;
}

/* GDPR buttons keyboard focus */
body.keyboard-navigation #moove_gdpr_cookie_info_bar .mgbutton:focus,
body.keyboard-navigation #moove_gdpr_cookie_modal .mgbutton:focus {
    outline: 3px solid #fff !important;
    outline-offset: 2px !important;
}

/* Special styling for carousel controls - keyboard focus only */
.keyboard-navigation .carousel-control-prev:focus,
.keyboard-navigation .carousel-control-next:focus,
body.keyboard-navigation .carousel-control-prev:focus,
body.keyboard-navigation .carousel-control-next:focus,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 2px !important;
    background-color: rgba(0, 0, 0, 0.7);
}

/* Close button enhancement */
.close-button,
button.close,
[aria-label*="close"],
[aria-label*="Close"],
[aria-label*="schließen"],
[aria-label*="Schließen"] {
    padding: 0.5rem;
    min-width: 44px;
    min-height: 44px;
}

/* Close button keyboard focus only */
.keyboard-navigation .close-button:focus,
.keyboard-navigation button.close:focus,
body.keyboard-navigation .close-button:focus,
body.keyboard-navigation button.close:focus,
.close-button:focus-visible,
button.close:focus-visible,
[aria-label*="close"]:focus-visible,
[aria-label*="Close"]:focus-visible,
[aria-label*="schließen"]:focus-visible,
[aria-label*="Schließen"]:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   14. Footer Links Keyboard Focus
   ========================================================================== */

/* Footer links white outline on keyboard focus */
.keyboard-navigation footer a:focus,
.keyboard-navigation .footer-area a:focus,
.keyboard-navigation .footer-bottom a:focus,
.keyboard-navigation [class*="footer"] a:focus,
body.keyboard-navigation footer a:focus,
body.keyboard-navigation .footer-area a:focus,
body.keyboard-navigation .footer-bottom a:focus,
body.keyboard-navigation [class*="footer"] a:focus,
footer a:focus-visible,
.footer-area a:focus-visible,
.footer-bottom a:focus-visible,
[class*="footer"] a:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 2px !important;
    text-decoration: underline !important;
}

/* Special handling for Elementor footer links */
/* .keyboard-navigation .elementor-element a:focus,
body.keyboard-navigation .elementor-element a:focus,
.elementor-element a:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 2px !important;
} */

/* GDPR footer links */
.keyboard-navigation .moove-gdpr-branding:focus,
.keyboard-navigation #moove-gdpr-menu a:focus,
.keyboard-navigation #moove-gdpr-menu button:focus,
body.keyboard-navigation .moove-gdpr-branding:focus,
body.keyboard-navigation #moove-gdpr-menu a:focus,
body.keyboard-navigation #moove-gdpr-menu button:focus,
.moove-gdpr-branding:focus-visible,
#moove-gdpr-menu a:focus-visible,
#moove-gdpr-menu button:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   15. Service Box Heading Styles (H5 changed to H2 for proper hierarchy)
   ========================================================================== */

.service-type-box h2 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.4 !important;
    /* Match original H5 styling from theme */
}

/* Make all service boxes equal height with proper spacing */
.index3-service-con {
    display: flex;
    height: 100%;
    margin-bottom: 30px !important; /* Add space between rows */
}

.service-type-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 320px; /* Ensures minimum height for consistency */
    padding-top: 30px !important; /* Add top padding */
    padding-bottom: 30px !important; /* Add bottom padding */
}

/* Add margin to the columns to create gaps between boxes */
.index3-service-section .col-lg-4 {
    margin-bottom: 30px !important;
}

.service-type-box p {
    flex-grow: 1; /* This makes the paragraph expand to fill available space */
    margin-bottom: 20px; /* Add some space before the link */
    color: #555555 !important; /* Override #777777 for better contrast (7:1 ratio) */
}

/* Ensure the link stays at the bottom */
.service-type-box > a {
    margin-top: auto; /* Pushes the link to the bottom */
}

/* ==========================================================================
   16. Table Accessibility Styles
   ========================================================================== */

/* Left-align table headers and improve styling */
.patienteninformationen th {
    text-align: left !important;
    background-color: #007693;
    color: #ffffff;
    padding: 12px !important;
    font-weight: 600;
}

/* Style the emergency heading above table to match other section headings */
.patienteninformationen-heading,
h2 + table.patienteninformationen {
    margin-top: 0;
}

.patienteninformationen-heading,
table.patienteninformationen {
    font-family: Mulish, sans-serif;
}

/* Make the h2 before the table look like other section headings */
h2:has(+ table.patienteninformationen),
.notfall-heading {
    color: #007693 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 15px !important;
    font-family: Mulish, sans-serif !important;
    line-height: 1.4;
}

/* Improve table styling */
.patienteninformationen td {
    padding: 10px 12px !important;
}

.patienteninformationen tr:nth-child(even) {
    background-color: #f8f9fa;
}

/* ==========================================================================
   17. Contact Form 7 Button Contrast Fix
   ========================================================================== */

/* Style Contact Form 7 submit button */
.wpcf7-form input[type="submit"],
.wpcf7-submit {
    background-color: #007693 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 15px 40px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: Mulish, sans-serif !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hover state */
.wpcf7-form input[type="submit"]:hover:not(:disabled),
.wpcf7-submit:hover:not(:disabled) {
    background-color: #005570 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Active/pressed state */
.wpcf7-form input[type="submit"]:active:not(:disabled),
.wpcf7-submit:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Disabled state */
.wpcf7-form input[type="submit"]:disabled,
.wpcf7-submit:disabled {
    background-color: #007693 !important;
    color: #ffffff !important;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Style the GDPR checkbox container - simple inline approach */
.dsgvo-container {
    margin: 20px 0;
    line-height: 1.6;
}

/* Make all checkbox wrappers inline to keep text on same line */
.dsgvo-container .wpcf7-form-control-wrap,
.dsgvo-container .wpcf7-acceptance,
.dsgvo-container .wpcf7-list-item {
    display: inline !important;
}

/* Make the label inline too */
.dsgvo-container label[for="dsgvo"] {
    display: inline !important;
    cursor: pointer;
}

/* Style the checkbox itself */
.dsgvo-container input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    cursor: pointer;
}

/* Smaller checkbox on mobile for better proportions */
@media (max-width: 768px) {
    .dsgvo-container input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
        margin-right: 6px !important;
    }
}

/* Remove any default p margins that might break layout */
.dsgvo-container p {
    margin: 0 0 20px 0 !important;
    display: block !important;
}

/* ==========================================================================
   18. Blog Post Title Heading Hierarchy Fix (Neuigkeiten page)
   ========================================================================== */

/* Style H2.blog-item-title to maintain original H5 appearance */
h2.blog-item-title {
    /* Keep the original H5 appearance but with proper semantic hierarchy */
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 10px 0 !important;
    font-family: Mulish, sans-serif !important;
}

/* Ensure the link inside maintains proper styling */
h2.blog-item-title a {
    color: #007693 !important;
    text-decoration: none !important;
}

h2.blog-item-title a:hover {
    color: #005570 !important;
}

/* ==========================================================================
   19. Read More Button Visibility Fix
   ========================================================================== */

/* Fix for read-more buttons being hidden and unfocusable */
.read-more-btn {
    visibility: visible !important;
    display: inline-block !important;
}

/* Ensure the blog button container is visible */
.blog-btn {
    visibility: visible !important;
    display: block !important;
}

/* ==========================================================================
   20. Modern Carousel Control Positioning (No Transform Hacks)
   ========================================================================== */

/* Use modern CSS for vertical centering instead of transform */
.testimonial-inner-sec .carousel-control-prev,
.testimonial-inner-sec .carousel-control-next {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    height: auto !important;
}

/* Remove any transform-based positioning */
.testimonial-inner-sec .carousel-control-prev:hover,
.testimonial-inner-sec .carousel-control-next:hover {
    transform: none !important;
}

/* ==========================================================================
   21. Testimonial Carousel Pause/Play Controls
   ========================================================================== */

/* Bootstrap carousel pause button */
.carousel-pause-button {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    background: #007693;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
}

.carousel-pause-button:hover,
.carousel-pause-button:focus {
    background: #005570;
    color: white !important;
    outline: 3px solid #ffcc00 !important;
    outline-offset: 2px !important;
}

.carousel-pause-button i {
    font-size: 14px;
}

.carousel-pause-button .pause-text {
    font-weight: 500;
}

/* Owl carousel pause button */
.owl-pause-button {
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    background: #007693;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
}

.owl-pause-button:hover,
.owl-pause-button:focus {
    background: #005570;
    color: white !important;
    outline: 3px solid #ffcc00 !important;
    outline-offset: 2px !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .carousel-pause-button,
    .owl-pause-button {
        bottom: 10px;
        padding: 8px 16px;
        font-size: 14px;
    }
}

/* ==========================================================================
   22. Additional WCAG Compliance Styles
   ========================================================================== */

/* Ensure links have underlines in high contrast mode */
@media (prefers-contrast: high) {
    a:not(.btn) {
        text-decoration: underline !important;
    }
    
    /* Even stronger button borders in high contrast mode */
    .btn,
    button,
    .termin-button,
    .mgbutton {
        border-width: 3px !important;
        border-color: #fff !important;
    }
}

/* Ensure sufficient tap target size for mobile */
@media (max-width: 768px) {
    a, button, input, select, textarea, [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    .navbar-nav a {
        padding: 12px 15px;
    }
}

/* Print styles for better accessibility */
@media print {
    .screen-reader-text,
    .skip-link,
    #aria-live-region {
        display: none !important;
    }
    
    /* Show URLs for links in print */
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    /* But not for internal links */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }
}

/* ==========================================================================
   21. Button Visual Indicators - WCAG 2.1 AA (3:1 contrast for UI elements)
   ========================================================================== */

/* 1. Mobile Menu Toggle Button - Bolder hamburger with MENÜ text */
.s7t-header-menu.toggle-btn {
    border: none !important;
    background-color: transparent !important;
    padding: 5px !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    transition: all 0.3s ease !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 10px !important;
}

/* Only apply flex display on smaller screens where button is visible */
@media (max-width: 991px) {
    .s7t-header-menu.toggle-btn {
        display: flex !important;
    }
}

/* Hide original spans and create new hamburger lines */
.s7t-header-menu.toggle-btn span {
    display: none !important;
}

.s7t-header-menu.toggle-btn::before {
    content: "☰";
    font-size: 28px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    color: #333333 !important;
    display: block !important;
}

.s7t-header-menu.toggle-btn::after {
    content: "MENÜ";
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: #333333 !important;
    display: block !important;
    margin-top: 5px !important;
}

.s7t-header-menu.toggle-btn:hover::before,
.s7t-header-menu.toggle-btn:hover::after {
    color: #007693 !important;
}

/* Dark background version for scrolled header */
.sticky-header .s7t-header-menu.toggle-btn::before,
.sticky-header .s7t-header-menu.toggle-btn::after,
.is-sticky .s7t-header-menu.toggle-btn::before,
.is-sticky .s7t-header-menu.toggle-btn::after {
    color: #ffffff !important;
}

.sticky-header .s7t-header-menu.toggle-btn:hover::before,
.sticky-header .s7t-header-menu.toggle-btn:hover::after,
.is-sticky .s7t-header-menu.toggle-btn:hover::before,
.is-sticky .s7t-header-menu.toggle-btn:hover::after {
    color: #ccc !important;
}

/* 2. & 3. Carousel Control Buttons - Bold custom styling */

/* Make carousel control icons much bolder */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 30px !important;
    height: 30px !important;
    background-size: 100% !important;
    position: relative !important;
}

/* Remove theme's custom slider images */
.testimonial-inner-sec .carousel-control-prev,
.testimonial-inner-sec .carousel-control-next {
    background-image: none !important;
}

/* Override Bootstrap's default chevrons with blue arrows */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23007693' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z' stroke='%23007693' stroke-width='0.2'/%3e%3c/svg%3e") !important;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23007693' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z' stroke='%23007693' stroke-width='0.2'/%3e%3c/svg%3e") !important;
}

/* Make the control buttons themselves larger and more visible */
.carousel-control-prev,
.carousel-control-next {
    width: 60px !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1 !important;
}


/* 4. GDPR Cookie Settings Button - Add visible styling */
.change-settings-button,
button.change-settings-button,
#moove_gdpr_cookie_modal .change-settings-button {
    border: 2px solid #333333 !important;
    background-color: #f8f9fa !important;
    color: #333333 !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.change-settings-button:hover,
button.change-settings-button:hover,
#moove_gdpr_cookie_modal .change-settings-button:hover {
    background-color: #e9ecef !important;
    border-color: #000000 !important;
    color: #000000 !important;
}

/* Ensure GDPR buttons in dark backgrounds have proper contrast */
#moove_gdpr_cookie_info_bar .change-settings-button {
    border-color: #000000 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    /* color: #ffffff !important; */
}

/* Fix: GDPR settings link in cookie banner should have dark text on light background */
.moove-gdpr-info-bar-container a,
#moove_gdpr_cookie_info_bar a:not(.mgbutton) {
    color: #333333 !important; /* Dark text for contrast */
}
/* Additional UI elements that might need contrast fixes */
/* Search button if it exists */
.search-submit,
button[type="search"] {
    border: 2px solid #333333 !important;
    background-color: #007693 !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
}

.search-submit:hover,
button[type="search"]:hover {
    background-color: #005570 !important;
    border-color: #005570 !important;
}

/* ==========================================================================
   22. Mobile Logo Size Enhancement
   ========================================================================== */

/* Increase logo size on mobile devices */
@media (max-width: 767px) {
    .responsive-mobile-menu .logo,
    .navbar-brand,
    .site-logo {
        max-height: none !important;
        height: auto !important;
    }
    
    .responsive-mobile-menu .logo img,
    .navbar-brand img,
    .site-logo img,
    .logo img {
        max-height: 60px !important; /* Increased significantly */
        height: 60px !important;
        width: auto !important;
        object-fit: contain !important;
    }
    
    /* Ensure container has enough space */
    .responsive-mobile-menu {
        min-height: 70px !important;
        padding: 10px 0 !important;
    }
}

/* Tablet size adjustment */
@media (min-width: 768px) and (max-width: 991px) {
    .responsive-mobile-menu .logo,
    .navbar-brand,
    .site-logo {
        max-height: none !important;
        height: auto !important;
    }
    
    .responsive-mobile-menu .logo img,
    .navbar-brand img,
    .site-logo img,
    .logo img {
        max-height: 65px !important;
        height: 65px !important;
        width: auto !important;
        object-fit: contain !important;
    }
}

/* Very small screens (under 420px) - smaller logo */
@media (max-width: 419px) {
    .responsive-mobile-menu .logo img,
    .navbar-brand img,
    .site-logo img,
    .logo img {
        max-height: 45px !important;
        height: 45px !important;
    }
    
    /* Adjust container height accordingly */
    .responsive-mobile-menu {
        min-height: 60px !important;
        padding: 7px 0 !important;
    }
    
    /* Make sure menu button stays centered */
    .s7t-header-menu.toggle-btn {
        right: 5px !important;
    }
}

/* Medium screens (420px - 992px) - even larger logo */
@media (min-width: 420px) and (max-width: 992px) {
    .responsive-mobile-menu .logo img {
        max-width: 390px !important;
    }
}

/* Large screens (above 1280px) - ensure minimum logo width */
@media (min-width: 1281px) {
    .responsive-mobile-menu .logo img,
    .navbar-brand img,
    .site-logo img,
    .logo img {
        min-width: 400px !important;
    }
}

/* ==========================================================================
   23. Page Title Area Fixes - Separated Banner from Text
   ========================================================================== */

/* Remove overlay styling from page title area */
.page-title-area:not(.overlay-bg) {
    background: #ffffff !important;
    padding: 40px 0;
    color: #232323;
}

/* Ensure dark text on white background for page titles and breadcrumbs */
.page-title-area h1,
.page-title-area h2,
.page-title-area h3,
.page-title-area .breadcrumb,
.page-title-area .breadcrumb a,
.page-title-area .breadcrumb-list,
.page-title-area .breadcrumb-list a {
    color: #232323 !important;
}

/* Breadcrumb styling */
.page-title-area .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.page-title-area .breadcrumb-list {
    color: #555555 !important;
}

.page-title-area .breadcrumb-list a {
    color: #007693 !important;
    text-decoration: none;
}

.page-title-area .breadcrumb-list a:hover {
    color: #005570 !important;
    text-decoration: underline;
}

/* Active breadcrumb item */
.page-title-area .breadcrumb li.active {
    color: #232323 !important;
}

/* Banner image styling */
.page-banner-image {
    width: 100%;
    height: 270px;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    margin-top: 6em;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .page-banner-image {
        height: 180px;
        margin-top: 4em; /* Smaller margin on mobile */
    }
}

/* Blog page padding adjustment */
.medunit-blog-page,
.medunit-blog-details {
    padding-top: 0 !important;
}

/* Remove margin-top for pages without banner */
body:not(.blog):not(.single-post):not(.archive) .page-banner-image {
    display: none;
}

/* ==========================================================================
   24. Blog Post Title Styling
   ========================================================================== */

/* Make blog post h1 smaller to match other pages */
.blog-item-info h1 {
    font-size: 30px !important;
    font-weight: 400 !important;
    font-family: 'Marcellus', serif !important;
    line-height: 1.1 !important;
    color: #232323 !important;
    margin-bottom: 15px !important;
}

/* Remove hardcoded padding from blog post container */
.blog-post-container {
    padding: 0 !important;
}

/* ==========================================================================
   25. Link Accessibility Indicators
   ========================================================================== */

/* File type indicators - visible to all users */
.file-type-indicator {
    font-size: 0.9em;
    color: #666666;
    font-weight: normal;
    margin-left: 0.25em;
}

/* Make file type indicators inherit link colors on hover */
a:hover .file-type-indicator {
    color: inherit;
}

/* External link icon for visual users (optional - using Unicode arrow) */
a[target="_blank"]::after {
    content: " ↗";
    font-size: 0.8em;
    vertical-align: baseline;
    margin-left: 0.1em;
    display: inline-block;
    white-space: nowrap;
    position: relative;
    top: -0.2em;
}

/* Remove arrow from buttons by default to prevent layout issues */
a[target="_blank"].btn::after,
a[target="_blank"].button::after,
a[target="_blank"][role="button"]::after,
a[target="_blank"].termin-button::after,
a[target="_blank"].mgbutton::after,
a[target="_blank"].elementor-button::after {
    content: none;
}

/* Special class to force show arrow on buttons that can handle it */
a[target="_blank"].show-external-icon::after {
    content: " ↗" !important;
    font-size: 0.8em;
    vertical-align: baseline;
    margin-left: 0.3em;
    display: inline-block;
    white-space: nowrap;
    position: relative;
    top: -0.2em;
}

/* For buttons with this class, ensure proper inline layout */
a[target="_blank"].button.show-external-icon,
a[target="_blank"].btn.show-external-icon,
a[target="_blank"][role="button"].show-external-icon {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
}

/* Ensure links with indicators don't break */
a[target="_blank"] {
    display: inline;
    white-space: normal;
}

/* Don't add icon to images and specific UI elements */
a[target="_blank"] img::after,
.social-icons a[target="_blank"]::after,
.elementor-social-icon[target="_blank"]::after,
.logo a[target="_blank"]::after,
.carousel-control-prev[target="_blank"]::after,
.carousel-control-next[target="_blank"]::after {
    content: none;
}

/* ==========================================================================
   26. External Link Tooltip Styles
   ========================================================================== */

#da-new-tab-tooltip {
    position: absolute;
    z-index: 99999;
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

#da-new-tab-tooltip > div {
    display: inline-block;
}

/* Tooltip arrow pointing down (when tooltip is above) */
#da-new-tab-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #333;
}

/* ==========================================================================
   27. Navigation Dropdown Arrow - Screen Reader Accessibility
   ========================================================================== */

/* Note: The arrow icon is purely decorative and should be hidden from screen readers.
   Since it's added via CSS ::before pseudo-element, we cannot add aria-hidden attribute.
   The JavaScript in keyboard-navigation.js adds proper aria-label to provide context. */

/* ==========================================================================
   28. Testimonial Section Contrast Fix (Preserving Stars)
   ========================================================================== */

/* Force proper contrast for testimonial text but NOT stars */
.testimonial-main-sec p,
.testimonial-main-sec h1,
.testimonial-main-sec h2,
.testimonial-main-sec h3,
.testimonial-main-sec h4,
.testimonial-main-sec h5,
.testimonial-main-sec h6,
.testimonial-main-sec .elementor-testimonial-content,
.testimonial-main-sec .elementor-testimonial-name,
.testimonial-main-sec .elementor-testimonial-job,
.testimonial-main-sec .elementor-testimonial-meta,
.testimonial-main-sec .carousel-item p,
.testimonial-main-sec .carousel-item h1,
.testimonial-main-sec .carousel-item h2,
.testimonial-main-sec .carousel-item h3,
.testimonial-main-sec .carousel-item h4,
.testimonial-main-sec .carousel-item h5,
.testimonial-main-sec .carousel-item h6,
.testimonial-main-sec .carousel-item span:not(.fa):not(.fas):not(.fa-star):not(.fa-solid):not(.pause-text),
.testimonial-main-sec span:not(.fa):not(.fas):not(.fa-star):not(.fa-solid):not(.pause-text) {
    color: #333333 !important;
}

/* Note: Star icons (.fa-star) are excluded from the color changes above
   using :not() selectors, so they will keep their original colors */

.blog-item .thumb a img {
    border: 5px solid #007693;
}
.single-blog-wrap .blog-details {
    border: 5px solid #007693;
    border-top: none;
}
.single-blog-wrap {
    background: #ffffff!important;
}
.single-blog-wrap:hover .thumb img {
    transform:none!important;
}
.read-more-btn:hover, .blog-item .blog-item-title a:hover,.widget ul li a:hover, a:hover, a:focus, a:active, .patienteninformationen a:hover{
    color: #005570 !important;
    text-decoration: underline !important;
    opacity:1
}
footer table>thead>tr>th, #footer-table>tbody>tr>td, #footer-table>tbody>tr{
    /* border:1px solid white!important;
    border-bottom:1px solid white!important; */
    border:none!important;
    border-bottom:none!important;}
.menu-item a:hover, .menu-item a:focus, .menu-item a:active, .elementor-icon-list-item a:focus, #colophon a:focus, #colophon a:hover, #colophon a:active, .termin-wrapper a:focus{color:white!important; text-decoration-color: white!important;text-decoration: underline!important;}

/* ==========================================================================
   30. Logo Visibility Fix - Show logo on all viewport sizes
   ========================================================================== */

/* Override the problematic rule that hides logo below 1425px */
@media screen and (max-width: 1424px) {
    .standard-logo img {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 50px !important; /* Ensure minimum height */
    }
    
    /* Force the logo container to have proper dimensions */
    .logo, .standard-logo {
        display: block !important;
        width: auto !important;
        min-width: 150px !important;
    }
}

/* ==========================================================================
   31. Mobile Navigation Improvements - Clean, accessible solution
   ========================================================================== */

/* Mobile navigation layout using modern CSS Grid for stability */
@media screen and (max-width: 991px) {
    /* Main container: Use CSS Grid for predictable layout */
    .responsive-mobile-menu {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        align-items: center !important;
        gap: 1rem !important;
        padding: 0.75rem 1rem !important;
        width: 100% !important;
    }
    
    /* Logo section: Natural sizing */
    .responsive-mobile-menu .logo {
        justify-self: start !important;
    }
    
    /* Logo link: Only as wide as content */
    .standard-logo {
        display: inline-block !important;
        width: auto !important;
    }
    
    /* Logo image: Responsive sizing */
    .standard-logo img {
        display: block !important;
        width: auto !important;
        max-width: 200px !important;
        height: auto !important;
        max-height: 50px !important;
    }
    
    /* Hamburger button: Fixed position in grid, proper touch target */
    .toggle-btn {
        grid-column: 2 !important;
        justify-self: end !important;
        position: relative !important; /* Not absolute - stays in flow */
        min-width: 44px !important; /* WCAG touch target */
        min-height: 44px !important;
        padding: 0.5rem !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: transparent !important;
        border: 2px solid transparent !important;
        border-radius: 4px !important;
        transition: background-color 0.2s ease, border-color 0.2s ease !important;
    }
    
    /* Visual feedback without position changes */
    .toggle-btn:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }
    
    .toggle-btn:focus {
        outline: 2px solid var(--e-global-color-blue) !important;
        outline-offset: 2px !important;
        background-color: rgba(0, 0, 0, 0.05) !important;
    }
    
    /* Ensure button doesn't move when classes change */
    .toggle-btn.open,
    .toggle-btn.collapsed,
    .toggle-btn:active {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
}

/* Fix termin-wrapper button backgrounds on mobile */
@media (max-width: 768px) {
    .termin-wrapper a.termin-button {
        background-color: #005570 !important;
        color: #ffffff !important;
    }
    
    .termin-wrapper a.termin-button:hover,
    .termin-wrapper a.termin-button:focus {
        background-color: #003d5c !important;
        color: #ffffff !important;
        text-decoration: underline !important;
    }
}
a.go-back-btnn:hover,
a.go-back-btnn:focus {
    color:white!important;
}