@media (min-width: 992px) {
    /* 1. Header erzwingen als einzeilige Flexbox */
    header.header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        
        width: 100% !important;
        max-width: 1320px !important;
        height: 90px !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
        overflow: visible !important;
        transition: height 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
    }

    /* Scroll-Zustand */
    header.header.is-scrolled {
        height: 60px !important;
        background-color: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    }

    /* 2. Cassiopeia Standard-Breiten überschreiben */
    header.header > div {
        width: auto !important;
        min-width: 0 !important;
    }

    /* 3. Logo-Container (Links) */
    header.header .container-header {
        flex: 0 1 auto !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. Menü-Container (Mitte) */
    header.header .container-nav {
        flex: 1 1 auto !important; /* Dehnt sich aus und drückt den Button nach rechts */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 20px !important; 
        padding: 0 !important;
    }

    header.header .container-nav ul.mod-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* 5. Button-Container (Rechts) - Hier ist die Lösung! */
    header.header .container-search {
        flex: 0 0 auto !important; 
        display: flex !important;
        justify-content: flex-end !important; /* Richtet den Inhalt rechts aus */
        align-items: center !important;
        margin: 0 !important;
        margin-left: auto !important; /* Der Magnet: Zieht den Block ganz nach rechts! */
        padding: 0 !important;
        text-align: right !important;
    }

    /* 6. Logo Skalierung */
    header.header img {
        height: 160px !important;
        width: auto !important;
        padding-top: 15px !Important;
        max-width: 100% !important;
        object-fit: contain !important;
        transition: height 0.3s ease-in-out !important; 
    }

    header.header.is-scrolled img {
        height: 90px !important;
    }

    /* 7. Suchfelder restlos verstecken */
    header.header .container-search .mod-finder,
    header.header .container-search .search,
    header.header .container-search form {
        display: none !important;
    }
}

/* 8. Button Styling */
.btn-termin {
    background-color: #ffffff !important;
    color: #00C3B9 !important;
    border: 1px solid #00C3B9 !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    display: inline-flex !important;
    align-items: center !important; 
    justify-content: center !important; 
    font-weight: 600 !important;
    text-decoration: none !important;
    margin: 0 !important; 
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.btn-termin:hover {
    background-color: #00C3B9 !important;
    color: #ffffff !important;
}

.btn-termin svg,
.btn-termin i {
    margin-right: 8px !important;
}

/* ====================================================
   MOBILES LAYOUT: Logo zentriert (160px) & Burger nach unten versetzt
   ==================================================== */

@media (max-width: 991.98px) {
    /* 1. Header als Referenzrahmen für absolute Elemente */
    header.header {
        position: relative !important;
    }

    /* 2. Logo-Container über die volle Breite zentrieren */
    header.header .container-header,
    header.header .navbar-brand,
    header.header .brand-logo {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        position: static !important;
    }

    /* 3. Logo auf PC-Größe (160px) zentriert */
    header.header img {
        height: 160px !important; 
        width: auto !important;
        max-width: 100% !important;
        padding-top: 15px !important; /* Abstand des Logos nach oben */
        padding-bottom: 5px !important;
        margin: 0 auto !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* 4. Burger-Icon (Canvas-Button) nach rechts und nach unten setzen */
    header.header .container-nav,
    .offcanvas-toggle-btn,
    .burger-icon-btn {
        position: absolute !important;
        right: 15px !important;
        top: 35px !important;         /* Verschiebt das Icon vertikal nach unten */
        padding-top: 10px !important;  /* Zusätzlicher Innenabstand nach oben */
        transform: none !important;    /* Hebt alte Zentrierungs-Konflikte auf */
        margin: 0 !important;
        z-index: 1050 !important;
        display: flex !important;
    }
}

/* Zwingt den JCE Mediabox Titel/Caption-Bereich nach oben */
.wf-mediabox-container {
    display: flex !important;
    flex-direction: column !important;
}
.wf-mediabox-caption {
    order: 1 !important; /* Setzt den Titel/Text nach oben */
}
.wf-mediabox-content {
    order: 2 !important; /* Setzt das Bild oder den Inhalt darunter */
}
.wf-mediabox-nav {
    order: 3 !important;
}

/* JCE Mediabox Titel in h2-Größe und Wunschfarbe (#9a8464) umwandeln */
#jce-mediabox-caption, 
.wf-mediabox-caption {
    font-size: 1.5rem !important; /* Entspricht der typischen h2-Größe */
    font-weight: 700 !important;
    color: #9a8464 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.container-header .container-search {
  margin-top: 0.1em !Important;
  }

/* ==========================================================================
   JCE HINTERGRUND FÜR POPUP (Daten-Attribut & Cassiopeia Extended Fix)
   ========================================================================== */

/* 1. Hintergrundbild direkt über das JCE 2 Daten-Attribut erzwingen */
div[data-mediabox-css="meinbgvitae"] .wf-mediabox-content,
div[data-mediabox-css="meinbgvitae"] .jcemediabox-content,
.wf-mediabox-container.meinbgvitae .wf-mediabox-content {
    background-image: url('/images/section/home_medic2_sectionbg1.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
}

/* 2. Den äußeren Container und das iFrame selbst unsichtbar/transparent schalten */
div[data-mediabox-css="meinbgvitae"],
div[data-mediabox-css="meinbgvitae"] iframe,
.wf-mediabox-container.meinbgvitae iframe {
    background-color: transparent !important;
    background: transparent !important;
}

/* 3. Cassiopeia Extended Core-Variablen INNERHALB des Popups komplett aufheben */
div[data-mediabox-css="meinbgvitae"] iframe,
.wf-mediabox-container.meinbgvitae iframe {
    --body-bg: transparent !important;
    --cassiopeia-color-primary: transparent !important;
    --aw-bg-color: transparent !important; /* Spezifische Cassiopeia Extended Variable */
}

/* 4. Den versteckten, weißen Content-Hintergrund von Cassiopeia im iFrame auflösen */
.wf-mediabox-iframe-body,
.wf-mediabox-iframe-body body,
.wf-mediabox-iframe-body .site-grid,
.wf-mediabox-iframe-body main,
.wf-mediabox-iframe-body .com-content-article {
    background-color: transparent !important;
    background: transparent !important;
}

/* Entfernt Rahmen und Hintergrund von Bootstrap-Karten/Modulen im Hauptbereich */
.card, 
.container-market .card,
.body-innerwrapper .card {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Falls der Rahmen vom Haupt-Container (Site-Wrapper) kommt */
.site-grid {
    background-color: transparent !important;
    border: none !important;
}

/* "Nach oben"-Button: Standard-Zustand (optional anpassbar) */
.back-to-top-link {
    color: #9a8464 !important; /* Text-/Icon-Farbe */
    background-color: #f0f0f0 !important; /* Hintergrundfarbe */
}

/* "Nach oben"-Button: Hover-Farbe (wenn man mit der Maus darüber fährt) */
.back-to-top-link:hover,
.back-to-top-link:focus {
    color: #ffffff !important; /* Neue Text-/Icon-Farbe beim Hover */
    background-color: #00C3B9 !important; /* Neue Hintergrundfarbe beim Hover */
}


/* ==========================================
   OFF-CANVAS MENÜ & BURGER-ICON STYLING
   ========================================== */

/* 1. Responsive Steuerung: Auf Desktop ausblenden, Desktop-Nav auf Mobilgeräten verbergen */
.offcanvas-toggle-btn {
    display: none !important;
}

@media (max-width: 991.98px) {
    header.header .container-nav {
        display: none !important;
    }

    /* Burger-Icon: Absolut nach rechts geheftet und mit Padding-Top nach unten versetzt */
    .offcanvas-toggle-btn,
    .burger-icon-btn {
        position: absolute !important;
        right: 15px !important;
        top: 35px !important;         /* Grundabstand von oben */
        padding-top: 10px !important;  /* Zusätzlicher oberer Innenabstand */
        transform: none !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 1050 !important;
    }
}

/* 2. Off-Canvas Schublade: Öffnet sich unter dem Logo und klappt nach unten auf */
@media (max-width: 991.98px) {
    .offcanvas.offcanvas-end {
        position: fixed !important;
        top: 200px !important; /* Exakt unter dem 160px Logo + Header-Abstand */
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 200px) !important;
        transform: translateY(-15px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
        background-color: #ffffff !important;
        color: #9a8464 !important;
        border-radius: 0 0 16px 16px !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
        z-index: 1056 !important;
    }

    .offcanvas.offcanvas-end.show {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        right: 0 !important;
    }
}

/* 3. Hintergrund-Abblendung (Backdrop) */
.offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1050;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.offcanvas-backdrop.show {
    opacity: 1;
}

/* 4. Burger-Icon Button Styling */
.burger-icon-btn {
    background: transparent !important;
    border: none !important;
    padding: 5px !important;
    cursor: pointer !important;
    color: #333333 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s ease-in-out !important;
}

.burger-icon-btn:hover {
    color: #00C3B9 !important;
}

/* 5. Mobiles Custom-Menü */
.mobile-custom-menu {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mobile-custom-menu li {
    list-style: none !important;
    list-style-type: none !important;
    border-bottom: 1px solid #eee !important;
    width: 100% !important;
}

.mobile-custom-menu li a {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-align: center !important;
    display: block !important;
    padding: 15px !important;
    color: #9a8464 !important;
    text-decoration: none !important;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out !important;
}

.mobile-custom-menu li a:hover {
    color: #00C3B9 !important;
    background-color: #f8f9fa !important;
}

/* ==========================================
   WEITERE SEITEN-MODULE & ALLGEMEINE FIXES
   ========================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 40px;
}

.meine-modulfarbe {
    background-color: rgba(154, 132, 100, 0.1);
    padding: 25px;
    border-radius: 0px;
}

header.header .container-search .mod-finder,
header.header .container-search .search,
header.header .container-search form {
    display: none !important;
}

/* ====================================================
   Popup-Modus für Zertifikate (KORRIGIERT)
   ==================================================== */

/* 1. Header, Banner, Footer und Breadcrumbs restlos ausblenden */
body:has(.is-popup) header.header,
body:has(.is-popup) .container-header,
body:has(.is-popup) .container-banner,
body:has(.is-popup) footer,
body:has(.is-popup) .container-bottom,
body:has(.is-popup) .mod-breadcrumbs {
    display: none !important;
}

/* 2. Überschreibt DEINE alten Transparenz-Regeln (Erzwingt weißen Hintergrund) */
body:has(.is-popup),
body.wf-mediabox-iframe-body:has(.is-popup),
body:has(.is-popup) main,
body:has(.is-popup) .site-grid,
body:has(.is-popup) .sp-page-builder {
    background-color: #ffffff !important;
    background: #ffffff !important;
    overflow-x: hidden !important;
}

/* Zieht den SP Page Builder Inhalt sauber nach oben */
body:has(.is-popup) main {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* 3. Bild-Container & SPPB-Wrapper rigoros zentrieren */
body:has(.is-popup) .sppb-addon-image,
body:has(.is-popup) .sppb-addon-image .sppb-addon-content {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 0 !important; 
    margin: 0 0 15px 0 !important; /* Nur Abstand nach unten zum Text */
    width: 100% !important;
    display: block !important;
    text-align: center !important; /* Der stärkste Befehl, um Inhalte mittig zu zwingen */
}

/* Link-Wrapper zentrieren (falls Lightbox aktiv ist) */
body:has(.is-popup) .sppb-addon-image a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

/* 4. Bild scharf, einheitlich und zentriert skalieren */
body:has(.is-popup) .sppb-addon-image img {
    display: inline-block !important; /* Zwingt das Bild, auf das text-align: center des Parents zu hören */
    margin: 0 auto !important; /* Sicherheits-Zentrierung */
    width: 100% !important; /* Zwingt ALLE Zertifikate auf exakt die gleiche Breite in der Karte! */
    max-width: 100% !important;
    height: auto !important; /* Hält die A4-Proportionen gestochen scharf bei */
    box-sizing: border-box !important;
    border-radius: 2px !important;
}

/* 5. Der eiserne Rahmen um Bild + Text (Die Karte) */
body:has(.is-popup) .sppb-column > .sppb-column-addons,
body:has(.is-popup) .sppb-column-inner {
    border: 1px solid #e1e5eb !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    background-color: #ffffff !important;
    border-radius: 8px !important;
    padding: 20px !important; /* 20px sauberer Innenabstand zu allen Seiten */
    
    height: 100% !important; /* Zieht alle 3 Karten einer Reihe auf exakt dieselbe Höhe */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Zentriert den kompletten Inhalt der Karte horizontal */
    
    overflow: hidden !important; /* Schneidet ab, was den Rahmen sprengen will */
    box-sizing: border-box !important;
}

/* Den Text im Rahmen sauber anordnen */
body:has(.is-popup) .sppb-addon-text {
    text-align: center !important;
    margin-top: auto !important; /* Drückt den Text immer sauber nach unten, auch wenn Bilder variieren */
    width: 100% !important;
}

/* ====================================================
   Popup-Modus: Globale Widgets radikal ausblenden (Hardcoded)
   ==================================================== */

/* GTranslate (Erfolgreich ausgeblendet) */
body:has(.is-popup) #gtranslate_wrapper,
body:has(.is-popup) .gtranslate_wrapper,
body:has(.is-popup) .gt_float_switcher,
body:has(.is-popup) .gt-float-switcher,

/* GDPR / Cookie Consent (Inklusive cc-revoke Button!) */
body:has(.is-popup) .cc-revoke,
body:has(.is-popup) .cc-window,
body:has(.is-popup) .cc-floating,
body:has(.is-popup) .cc-banner,
body:has(.is-popup) #gdpr-cookie-message,
body:has(.is-popup) .gdpr-cookie-banner,
body:has(.is-popup) #j-gdpr-cookie-message,
body:has(.is-popup) div[id*="gdpr"],
body:has(.is-popup) div[class*="gdpr"],

/* Weitere Standard Cookie-Consent Container (als Backup) */
body:has(.is-popup) #cookiehint,
body:has(.is-popup) .cookiehint,
body:has(.is-popup) #usercentrics-root,
body:has(.is-popup) #CybotCookiebotDialog,
body:has(.is-popup) #ccm19-wrapper,
body:has(.is-popup) #sp-cookie-consent,

/* Fängt Elemente ab, die extrem weit vorne schweben (Popups, Banner) */
body:has(.is-popup) > div[style*="z-index: 999"],
body:has(.is-popup) > div[style*="z-index:999"],
body:has(.is-popup) > div[style*="z-index: 2147483647"],
body:has(.is-popup) > div[style*="position: fixed"],
body:has(.is-popup) > div[style*="position:fixed"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    z-index: -99999 !important;
}

/* Verhindert Scroll-Sperren durch das GDPR-Tool */
body:has(.is-popup) {
    overflow-y: auto !important;
}
/* ====================================================
   JCE Mediabox: Rahmen entfernen & Fluid-Breite (FÜR ZERTIFIKATE & VITA)
   ==================================================== */

/* 1. Entfernt den JCE-Rahmen tief im DOM (wenn das iFrame 'zertifikate' oder 'vitae' aufruft) */
.wf-mediabox-container:has(iframe[src*="zertifikate" i], iframe[src*="vitae" i]),
.wf-mediabox-container:has(iframe[src*="zertifikate" i], iframe[src*="vitae" i]) .wf-mediabox-body,
.wf-mediabox-container:has(iframe[src*="zertifikate" i], iframe[src*="vitae" i]) .wf-mediabox-content {
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important; 
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Positioniert das "X" (Schließen) neu */
.wf-mediabox-container:has(iframe[src*="zertifikate" i], iframe[src*="vitae" i]) .wf-mediabox-close {
    top: 5px !important;
    right: 5px !important;
    z-index: 9999 !important;
}

/* 2. Zwingt das iFrame auf absolute 100% Breite */
.wf-mediabox-container:has(iframe[src*="zertifikate" i], iframe[src*="vitae" i]) iframe {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    display: block !important;
}

/* ====================================================
   JCE Mediabox: Rahmen entfernen & Fluid-Breite (FÜR ZERTIFIKATE & VITA)
   ==================================================== */

/* 1. Entfernt den JCE-Rahmen tief im DOM (wenn das iFrame 'zertifikate' oder 'vitae' aufruft) */
.wf-mediabox-container:has(iframe[src*="zertifikate" i], iframe[src*="vitae" i]),
.wf-mediabox-container:has(iframe[src*="zertifikate" i], iframe[src*="vitae" i]) .wf-mediabox-body,
.wf-mediabox-container:has(iframe[src*="zertifikate" i], iframe[src*="vitae" i]) .wf-mediabox-content {
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important; 
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Positioniert das "X" (Schließen) neu */
.wf-mediabox-container:has(iframe[src*="zertifikate" i], iframe[src*="vitae" i]) .wf-mediabox-close {
    top: 5px !important;
    right: 5px !important;
    z-index: 9999 !important;
}

/* 2. Zwingt das iFrame auf absolute 100% Breite */
.wf-mediabox-container:has(iframe[src*="zertifikate" i], iframe[src*="vitae" i]) iframe {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    display: block !important;
}

/* 3. Cassiopeia CSS-Grid aufbrechen für echtes Fluid-Layout IM iFrame (Greift nur bei Zertifikaten dank .is-popup) */
body:has(.is-popup) .site-grid,
body:has(.is-popup) .container,
body:has(.is-popup) .container-component,
body:has(.is-popup) .wrapper {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* 4. Den SP Page Builder in die nun freien 100% ausdehnen */
body:has(.is-popup) .sp-page-builder,
body:has(.is-popup) .sppb-row-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* 5. SICHERHEITS-FIX: Weißer Hintergrund für Datenschutz & Impressum */
/* Falls deine alten CSS-Regeln die Textbereiche transparent machen, erzwingen wir hier Weiß */
.wf-mediabox-iframe-body:not(:has(.is-popup)) {
    background-color: #ffffff !important;
}

/* 5. SICHERHEITS-FIX: Weißer Hintergrund für Datenschutz & Impressum */
/* Greift nur bei normalen Joomla-Beiträgen ohne SP Page Builder (wie Impressum) */
.wf-mediabox-iframe-body:not(:has(.sp-page-builder)) {
    background-color: #ffffff !important;
}

/* 5. SICHERHEITS-FIX: Weißer Hintergrund für Datenschutz & Impressum */
/* Falls deine alten CSS-Regeln die Textbereiche transparent machen, erzwingen wir hier Weiß */
.wf-mediabox-iframe-body:not(:has(.is-popup)) {
    background-color: #ffffff !important;
}

/* ====================================================
   Button Vita Jochen und Isa
   ==================================================== */
.btn-vita {
    background-color: #00C3B9 !important;
    color: #ffffff !important;
    border: 1px solid #00C3B9 !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-family: 'Roboto', sans-serif !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

.btn-vita:hover {
    background-color: #ffffff !important;
    color: #00C3B9 !important;
    border-color: #00C3B9 !important;
}

/* ====================================================
   SMART SLIDER 3: Text-Sichtbarkeit für Popups & #jochen-Anker
   Zwingt Schrift zur Anzeige, lässt X/Y-Koordinaten (transform) unberührt!
   ==================================================== */

/* 1. Verhindert das Abschneiden des Sliders im Page Builder Container */
.n2-section-smartslider,
.n2-ss-slider,
.sppb-addon-module:has(.n2-section-smartslider) {
    overflow: visible !important;
    height: auto !important;
}

/* 2. Zwingt Text- und Inhalts-Layer zur sofortigen Anzeige */
.n2-section-smartslider .n2-ss-layer,
.n2-section-smartslider .n2-ss-layer-wrapper,
.n2-section-smartslider .n2-ss-item,
.n2-section-smartslider .n2-ss-item-content {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Verschiebt den Anker-Sprungpunkt 60px weiter nach unten */
#jochen {
    scroll-margin-top: 120px !important;
}