/* ==========================================================================
   1. ROOT & VARIABLEN
   ========================================================================== */
:root {
    --gallery-gap: 0.7rem;
    --gallery-columns: 1;
    --frame-color: inherit;
    --frame-link-color: #265b7b;
    --frame-link-hover-color: #265b7b;
}
/* Greift auf alle Links im Hauptbereich, schließt aber Buttons, Navis etc. aus */
#page-content a:not(.btn):not([class*="sticky"]):not(.nav-link) , #page-content li > strong{
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: all 0.3s ease;
    font-weight: 400 !important;
    color: #262626;
}
/* ==========================================================================
   2. BASIS & TYPOGRAFIE
   ========================================================================== */
html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    text-rendering: optimizeLegibility;
}

body {
    font-size: 1.1rem;
    font-family: 'Source Sans 3';
    line-height: 1.5;
    color: #262626;
}
@media (min-width: 1400px) {
    .frame-container-default {
        max-width: 1140px;
    }
}
@media (min-width: 1400px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        max-width: 1140px;
    }
}
body, h1, h2, h3, h4, h5, h6, p, a, .btn {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    -webkit-text-size-adjust: 100%;
}

p {
    -webkit-hyphens: auto; 
    hyphens: auto;         
    color: #262626;
    overflow-wrap: break-word; 
}

h1, .h1, 
h2, .h2, 
h3, .h3 {
    font-family: 'Figtree',sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.04em;
    color: #262626;
}

h1, .h1 {
    margin-bottom: 0rem;
    font-size: 2.8rem !important;
}

h1, h2 {
    text-wrap: balance;
}

h1.element-header.h5 { 
    font-size: 1rem !important; 
    margin-bottom: 0.2rem;
    font-weight: 500; 
    color: #585858; 
    filter: drop-shadow(0px 0px 0px rgb(0 0 0 / 0)); 
    text-transform: uppercase !important; 
    font-family: 'Figtree', sans-serif;
    font-style: normal; 
    line-height: 1.2rem; 
    letter-spacing: 0.05rem; 
}

h1.element-header.text-center {
    font-size: 2.8rem;
    font-weight: 500;
    text-transform: none;
}

h2.element-subheader.h1{ 
    font-size: 2rem !important; 
    font-weight: 500;
    color: #262626;
    text-transform: none;
    letter-spacing: 0.05em; 
}

h2.element-subheader {
    font-size: 1.5rem;
}

h2.element-subheader,
.textpic-text h2.element-subheader {
    font-size: 1rem !important;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2.5rem !important;
    letter-spacing: 0.04em;
    color: #265b7b;
}

b, strong {
    font-weight: 500;
}

.small, small {
    color: #6b6b6b;
}

.text-uppercase {
    text-transform: uppercase !important;
    letter-spacing: 0.05em;
}

.text-tertiary {
    --bs-text-opacity: 1;
    color: #265b7b !important;
}

.text-center.lead {
    font-size: 1.3rem;
    line-height: 1.3;
    color: #262626;
    font-weight: 400;
    letter-spacing: 0.03em;
}

.textpic-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #262626;
    column-count: 1;
}

.textpic-text h1 {
    font-size: clamp(3.5rem, 8vw, 6rem) !important;
    font-weight: 500 !important; /* Gemäß Hero Italic Fix auf 500 korrigiert */
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: #262626;
    margin-bottom: 0.5rem;
    font-family: 'Figtree', sans-serif;
    font-style: normal !important;
}

/* Listen */
.list-info, .list-check, .list-warning, .list-ban, .list-chevron { list-style: none; padding: 0; font-weight: 400; }
.list-info > li, .list-check > li, .list-warning > li, .list-ban > li, .list-chevron > li {
    clear: both;
    position: relative;
    padding-left: 1.35em;
    font-size: 1.1rem;
}
.list-check > li:before { 
    background-color: #265b7b !important; 
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='%233A833A'%3e%3cpath d='M13.3 4.8l-.7-.7c-.2-.2-.5-.2-.7 0L6.5 9.5 4 6.9c-.2-.2-.5-.2-.7 0l-.6.7c-.2.2-.2.5 0 .7l3.6 3.6c.2.2.5.2.7 0l6.4-6.4c.1-.2.1-.5-.1-.7z'/%3e%3c/g%3e%3c/svg%3e"); 
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='%233A833A'%3e%3cpath d='M13.3 4.8l-.7-.7c-.2-.2-.5-.2-.7 0L6.5 9.5 4 6.9c-.2-.2-.5-.2-.7 0l-.6.7c-.2.2-.2.5 0 .7l3.6 3.6c.2.2.5.2.7 0l6.4-6.4c.1-.2.1-.5-.1-.7z'/%3e%3c/g%3e%3c/svg%3e"); 
    background-image: none; 
}
.list-chevron > li:before {
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) brightness(15%) contrast(90%) !important;
}
ul.list-normal { padding-left: 1rem; }

.einz { margin-right: 10px; }

/* ==========================================================================
   3. GLOBALES LAYOUT & HEADER
   ========================================================================== */
#page-header {
    padding-top: 1.8rem !important;
    padding-bottom: 1.8rem !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 auto !important;
}

#page-header.navbar-default {
    box-shadow: none !important;
    transition: all 0.4s ease-in-out;
}

#page-header.navbar-scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 0 30px rgb(0 0 0 / 20%) !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

#page-header.navbar-scrolled .navbar-brand-image img {
    max-height: 45px;
}

#page-header .container,
#page-header .container-fluid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1320px;
    margin: 0 auto !important;
}

.bg-white, 
.navbar-default, 
.navbar-default-transition, 
.navbar-default-transition.navbar-transition {
    box-shadow: 0 0 30px rgb(0 0 0 / 20%) !important;
}

.breadcrumb-section { background-color: transparent; font-size: 0.8rem; }
.breadcrumb-section .breadcrumb { display: none; }

body .ce-container.container, 
body .ce-container.container-fluid,
body .container {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ==========================================================================
   4. NAVIGATION & DROPDOWN (Inkl. Sprachmenü)
   ========================================================================== */
.navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0.5rem;
    --bs-navbar-color: #262626;
    --bs-navbar-hover-color: #262626;
}

.navbar-mainnavigation {
    --mainnavigation-hightlight: #262626;
    box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0.15);
}

.nav-link {
    display: block;
    font-size: 0.99rem !important;
    font-family: 'Figtree', sans-serif;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-weight: 500;
    color: #262626;
    text-decoration: none;
    background: none;
    border: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    letter-spacing: 0.03em;
}

.navbar-mainnavigation .nav-link:not(.nav-link-toggle).show:before, 
.navbar-mainnavigation .nav-link:not(.nav-link-toggle).active:before,
.navbar-mainnavigation .nav-link:not(.nav-link-toggle):hover:before, 
.navbar-mainnavigation .nav-link:not(.nav-link-toggle):focus-visible:before {
    opacity: 1 !important;
}

.dropdown-menu {
    --bs-dropdown-zindex: 1000;
    --bs-dropdown-min-width: 10rem;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-spacer: 1rem !important;
    --bs-dropdown-font-size: 1rem;
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-bg: var(--bs-body-bg);
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-border-width: 0rem;
    --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

.dropdown-menu .nav-link:not(.nav-link-toggle):before {
    display: none;
}

.dropdown-menu .nav-link {
    transition: color 0.2s ease-in-out !important;
    background-color: transparent !important;
    padding-bottom: 0.3rem;
}

.dropdown-menu .nav-link:hover,
.dropdown-menu .nav-link.active,
.dropdown-menu .active > .nav-link,
.dropdown-menu .nav-link[aria-current="page"] {
    color: #265b7b !important;
    background-color: transparent !important;
}

/* Sprachmenü Dropdown */
.navbar-mainnavigation .navbar-nav.language-navigation {
    width: auto !important;
    flex: 0 1 auto !important;
    display: flex !important;
    flex-direction: row !important;
}

.language-navigation .nav-link,
.language-navigation .dropdown-toggle {
    display: flex !important;
    align-items: center;
    padding: 0.5rem!important;
    color: #333 !important;
    font-weight: 500;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    gap: 0rem!important;
}

.language-navigation .lang-globe-icon { margin-right: 6px; vertical-align: middle; }
.language-navigation li { list-style: none !important; }
.language-navigation .nav-item::before,
.language-navigation .dropdown-toggle::before,
.language-navigation .dropdown-toggle::after { display: none !important; content: none !important; }

.custom-lang-dropdown {
    min-width: 230px !important;
    width: auto !important;
    border-radius: 0px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    padding: 8px !important;
    margin-top: 12px !important;
    border: none !important;
    background: #fff !important;
}

.custom-lang-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    white-space: nowrap !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    color: #262626 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-family: 'Figtree', sans-serif;
    font-weight: 500!important;
}

.custom-lang-item:hover {
    background-color: #f8f9fa !important;
    transform: translateX(4px);
}

.custom-lang-dropdown li .custom-lang-item::before {
    content: "" !important;
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    margin-right: 14px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
}

.custom-lang-dropdown li:nth-child(1) .custom-lang-item::before { background-image: url('../Icons/de.svg') !important; }
.custom-lang-dropdown li:nth-child(2) .custom-lang-item::before { background-image: url('../Icons/en.svg') !important; }
.custom-lang-dropdown li:nth-child(3) .custom-lang-item::before { background-image: url('../Icons/leichte.svg') !important; }
.custom-lang-dropdown li:nth-child(3) { border-top: 1px solid #eee; margin-top: 6px; padding-top: 6px; }
.custom-lang-item.text-muted::before { opacity: 0.5; }

/* ==========================================================================
   5. BUTTONS & FORMULARE
   ========================================================================== */
.btn, 
.btn-primary, 
.btn-secondary, 
.btn-quaternary, 
#nav-item-8, 
.carousel-item .btn,
.tx-powermail input[type="submit"],
.frame-type-felogin_login input[type="submit"], 
.cc-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative !important;
    z-index: 1;
    cursor: pointer;
    border: none !important;
    --bs-border-radius: 0.375rem;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    min-width: 180px;
    font-family: 'Figtree', sans-serif !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    text-align: center;
    text-decoration: none !important;
    background-size: 200% 100% !important;
    background-position: right bottom !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    --bs-btn-box-shadow: none !important;
    --bs-btn-border-width: 0px !important
}

.btn-primary, 
.carousel-item-button .btn-primary {
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1.0) !important;
}

.btn:not(#nav-item-8):not(.carousel-item .btn), 
.btn-primary, 
.btn-secondary, 
.btn-quaternary, 
.tx-powermail input[type="submit"] {
    background-image: linear-gradient(to right, #31565e 50%, #3e7280 50%) !important;
    color: #ffffff !important;
    background-color: #000 !important;
}

#nav-item-8 {
    min-width: auto !important;
    height: auto !important;
    background-image: linear-gradient(to right, #31565e 50%, #3e7280 50%) !important;
    background-color: #262626 !important;
    color: #ffffff !important;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
   border-radius: 0.375rem;
}

#nav-item-8::before, #nav-item-8::after { display: none !important; }

a.btn-quaternary, button.btn-quaternary {
    padding: 0.9rem 2rem !important;
    line-height: 1.5 !important;
    border-radius: 6px !important;
}

.form-control, 
.form-group input[type="file"], 
.frame-type-felogin_login input[type="text"], 
.frame-type-felogin_login input[type="password"] {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 2;
    color: var(--bs-body-color);
    appearance: none;
    background-color: #f5f4f4;
    background-clip: padding-box;
    border: 0px solid #959595;
    border-radius: 0px;
    box-shadow: none;
}

.tx-powermail .form-control {
    background-color: #f4f4f4 !important;
    border: 0px solid #999999 !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    color: #262626 !important;
    padding: 0.6rem 1rem !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.tx-powermail .form-control:focus {
    border-color: #265b7b !important;
    box-shadow: 0 0 0 3px rgba(38, 91, 123, 0.25) !important; 
    outline: none !important;
}

.tx-powermail .form-control::placeholder { color: #777777 !important; opacity: 1 !important; }
.tx-powermail input[type="submit"] { margin-top: 0.5rem; }
.tx-powermail .row+.row { margin-block-start: 0.6rem; }
.powermail_fieldwrap_type_file{
   margin-top: 1rem;
}
.powermail_radiowrap {
    margin-top:0.5rem;
    font-size:1rem;
}
.form-label .powermail_label .powermail_field_datenupload{
    margin-top:0.5rem;
    font-size:1rem!important;
}
/* ==========================================================================
   6. KOMPONENTEN (Karten, Icongroups, Tabs, Accordion)
   ========================================================================== */

/* Karten */
.card { 
    border: 0rem;
    --bs-card-border-radius:12px!important;
    box-shadow: 0px 0px 20px rgb(92 111 139 / 22%) !important;
    color: #212121;
    background: var(--bs-body-bg);
}
.card a:not(.btn) { color: #577760; }
.card a:not(.btn):hover { color: #465f4d; text-decoration: none; }
.card a:not(.btn), .card a:not(.btn):hover { color: #fff; text-decoration: none; }
/* Erzwingt den Umbruch für 2-spaltige Card-Groups auf Mobile (< 768px) */
@media (max-width: 767.98px) {
    .card-group-element.card-group-element-columns-2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem; /* Abstand zwischen den Karten auf Mobile */
    }
    
    /* Stellt sicher, dass die einzelnen Karten den vollen Platz nutzen */
    .card-group-element.card-group-element-columns-2 > * {
        width: 100%;
        max-width: 100%;
    }
}
.card-img-top { overflow: hidden; position: relative; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.card-subtitle { color:#585858!important; font-size: 1rem; margin-bottom: 0.5rem; font-weight: 400; }
.card-body { flex: none; padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); color: var(--bs-card-color); }
.card-body>*:first-child { margin-top: 0; }
.card-body>*:last-child { margin-bottom: 0; }
.card-title { font-size: 1.25rem; margin-bottom: 0.5rem; font-weight: 600; color: #262626!important;  font-family: 'Figtree', sans-serif; letter-spacing: 0.02em;}
.card-img-overlay { position: absolute; top: auto; right: 0; bottom: 0; left: 0; padding: var(--bs-card-img-overlay-padding); border-radius: var(--bs-card-inner-border-radius); }
.card-img, .card-img-top, .card-img-bottom { width: 100%; height: auto; }
.gallery-row { display: flex; flex-wrap: wrap; }
.card-img-top img, .gallery-item img, .textmedia-item img { transform: scale(1); transition: .3s ease-in-out; }
.textmedia-item img { border-radius: 12px; }

.card-group-element {
    display: flex;
    gap: 2rem;
    flex-wrap: nowrap;
}

/* Icongroups */
.icongroup { display: flex; flex-wrap: wrap!important; gap: 2rem; align-content: space-between; margin-top: 4rem;}
.icongroup-item {
    --icongroup-space: calc(var(--icongroup-gap) / 2);
    --icongroup-icon-size: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    width: 100%;
    padding: 2rem;
    background-color: #ffffff !important; 
    border-radius: 10px;
    box-shadow: 0px 0px 20px rgb(92 111 139 / 25%) !important;
    transform: scale(1.0) translateY(0); 
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, background-color 0.3s ease !important;
}
.icongroup-iconposition-above .icongroup-item-icon, 
.icongroup-iconposition-below .icongroup-item-icon {
    fill: #ffffff !important;margin-left: 0rem; background: #3C717E; padding: 0.2rem; width: 40px; height: 40px; border-radius: 8px;display: flex; align-items: center; justify-content: center;
}
.icongroup-iconposition-above .icongroup-item-text, 
.icongroup-iconposition-below .icongroup-item-text { text-align: left; }
.icongroup-item h1, .icongroup-item h2, .icongroup-item h3 { 
    font-style: normal; margin-bottom: 0rem;text-transform: none!important; 
    word-wrap: break-word; hyphens: auto; -webkit-hyphens: auto;font-weight:600;color: #262626;margin-bottom: 0.5rem !important;font-size:1.25rem;
}
.icongroup-item .stretched-link::after { z-index: 10; pointer-events: auto; }
.icongroup-item-text-header a.stretched-link { color: inherit; text-decoration: none; }
.icongroup-align-left { justify-content: space-between; }
.icongroup-item-icon svg { stroke: #ffffff !important; color: #ffffff !important; transition: all 0.3s ease; stroke-width: 1.5px !important; }

/* Tabs */
.tab-navigation { margin-bottom: 0rem; background: #f4f4f4; }
.tab-navigation .nav-link {
    display: block; font-size: 0.9rem !important; font-family: 'Figtree', sans-serif;
    --bs-nav-link-padding-y: 0.8rem; --bs-nav-link-padding-x: 2rem;
    font-weight: 500; color: #262626; text-decoration: none; background: none; border: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.tab-content { 
    background: #fff; 
    padding: 2rem; 
    box-shadow: 0px 0px 20px rgb(92 111 139 / 25%) !important; 
    border-bottom-left-radius: 12px; 
    border-bottom-right-radius: 12px; 
}
.nav-tabs { 
    --bs-nav-tabs-border-width: 0px; 
    box-shadow: 0px 0px 20px rgb(92 111 139 / 25%); 
    border-top-left-radius: 12px; 
    border-top-right-radius: 12px; 
    border-bottom: 0px solid transparent; 
}
.nav-tabs .nav-link { border: 0px solid transparent; border-top-left-radius: 12px; border-top-right-radius: 12px; margin-bottom: 0; }
.nav-tabs .nav-link.active { color: var(--bs-emphasis-color); background-color: #fff; }
.tab-content .list-chevron > li { font-size: 1.1rem !important; font-weight: 400;margin-bottom: 0.8rem; }

/* Accordion */
.accordion { --bs-accordion-border-width: 0px; padding-top:0rem;}
#p16 .accordion{ padding-top: 4rem; }
.accordion-item {
    margin-bottom: 0rem !important; 
    color: var(--bs-accordion-color); 
    border: none !important;
    border-bottom: 1px solid #D8D8DB !important;
    border-radius: 0px !important; 
    font-size: 1rem; 
    background-color: transparent !important;
    overflow: hidden !important; 
    transition: background-color 0.3s ease !important;
}
.accordion-button {
    background-color: transparent !important; 
    color: #191717 !important;
    border: 0px solid !important;
    border-radius: 0px !important; 
    font-weight: 500 !important; 
    font-family: 'Figtree', sans-serif!important;
    font-size: 1.1rem!important; 
    padding: 1.3rem 1rem !important; 
    box-shadow: none !important;
    position: relative;
    letter-spacing: 0.04em;
}
.accordion-header .accordion-button { padding-left: 1rem !important; padding-right:1rem !important; font-weight: 600 !important; letter-spacing: 0.04em; }
.accordion-button:not(.collapsed) {
    background-color:transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    color: #262626 !important;
    padding-bottom: 1rem !important;
}
.accordion-button:focus { z-index: 3; outline: none !important; box-shadow: none !important; }
.accordion-button::after { background-image: none !important; }
.accordion-button::before {
    content: "" !important; position: absolute !important; right: 1rem !important; top: 50% !important; transform: translateY(-50%) !important;
    width: 16px !important; 
    height: 1px !important; /* Feiner: 1px statt 1.5px */
    background-color: #A3A3A3 !important; /* Helleres Grau */
    z-index: 2; transition: background-color 0.3s ease;
}

.accordion-button::after {
    content: "" !important; position: absolute !important; right: calc(1rem + 7.5px) !important; top: calc(50% - 8px) !important;
    width: 1px !important; /* Feiner: 1px statt 1.5px */
    height: 16px !important; 
    background-color: #A3A3A3 !important; /* Helleres Grau */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s ease !important; display: block !important;
}
.accordion-button:not(.collapsed)::after { transform: rotate(90deg) !important; opacity: 0 !important; }
.accordion-body {
    background-color: transparent!important; 
    border-bottom-left-radius: 12px !important; 
    border-bottom-right-radius: 12px !important; 
    padding-top: 1.8rem!important;
    padding-bottom: 2.8rem!important;
    padding-right: 1rem!important;
    padding-left: 0rem!important;
    font-family: 'Figtree', sans-serif !important;
    font-size: 1.1rem !important;
    line-height: 1.7;
    color: #262626 !important;
}
.accordion-item .accordion-body { border-top: none !important; }
.accordion-content-item .accordion-content-media { margin-top: 1rem; }
.accordion-body .list-chevron { padding-left: 0rem; }
.accordion-body .list-chevron > li { font-size: 1.1rem !important; font-weight: 400;margin-bottom: 0.8rem; }
.accordion-body > * { padding:0rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }

/* Sonstige */
.link-arrow::after { background: url(../Icons/arrow_right.svg); height: 1.4rem; width: 1.4rem; }

/* ==========================================================================
   7. SLIDER & CAROUSEL
   ========================================================================== */
.carousel-item-layout-secondary {
    --carousel-item-color: #ffffff;
    --carousel-item-background: transparent;
    --carousel-item-link-color: #ffffff;
    --carousel-item-link-hover-color: #ffffff
}
.carousel { container-type: inline-size; overflow: hidden; max-width: 1500px; margin: auto; }
.carousel-item { border-radius:12px; }
.item { padding: 0 10px; }
.carousel-item-type-image .carousel-image img { margin: 0 auto; max-width: 100%; display: block; height: auto; border-radius: 12px; }
.carousel-item-type-text .carousel-text-inner { margin: 0; }
.carousel .carousel-item p { font-size: 1.15rem; font-weight: 400; line-height: 1.6; letter-spacing: 0.01em; }
.carousel .carousel-item h1 { font-weight: 500; letter-spacing: -0.03em; }
.carousel-item-header { color: #ffffff !important; text-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; }
.carousel-item-layout-dark .carousel-item-type-text { color: #ffffff; }

#carousel.carousel .carousel-backgroundimage {
    position: absolute; top: 0; left: 0; height: 100%; width: 100%;
    background-position: center; background-size: cover;
    filter: brightness(1.1) contrast(1.05) saturate(0.9);
}

.carousel-item .btn, 
.carousel-item .btn-quaternary,
#carousel .carousel-item .btn {
    background-image: linear-gradient(to right, #31565e 50%, #3e7280 50%) !important;
    color: #fff !important;
    margin-top: 1.6rem!important;
    --bs-btn-box-shadow: none !important;
    font-size:1rem !important;
    letter-spacing: 0.12em !important;
    font-weight: 500 !important;
}

.carousel-item-type-call_to_action .carousel-box {
    color: #262626; background-color: transparent!important; padding: 0rem;
}

.hero-video-container, 
.carousel-backgroundimage { width: 100%; height: 750px !important; position: relative; overflow: hidden; background: #000; }
.hero-video-element { width: 100%; height: 100%; object-fit: cover; }
.video-overlay, .carousel-backgroundimage::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; }
.carousel-backgroundimage .carousel-caption, .carousel-backgroundimage .container { position: relative; z-index: 2; }

.carousel-item-backgroundimage-container img, 
.carousel-item-backgroundimage-container video {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(1.15) contrast(1.05) saturate(0.9) !important; 
    image-rendering: -webkit-optimize-contrast;
    transition: filter 0.5s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.carousel-backgroundimage-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
/* ==========================================================================
   SAFARI ANTI-ZUCKEN FIX FÜR CAROUSEL
   ========================================================================== */
.carousel-item img,
.carousel-backgroundimage,
.hero-video-element {
    /* Zwingt Safari dauerhaft in den Hardware-Beschleunigungs-Modus (GPU) */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    
    /* Verhindert das Neu-Berechnen der Pixelkanten beim Hover */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    /* Stabilisiert den 3D-Raum für die Filter-Animation */
    -webkit-perspective: 1000px;
    perspective: 1000px;
    
    /* Sagt dem Browser vorab, was sich ändern wird */
    will-change: filter, transform;
}

/* Fixiert zusätzlich den Container, damit der Rand radius nicht flimmert */
.carousel-item,
.carousel-inner {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
/* ==========================================================================
   CAROUSEL OVERLAY (PORSCHE-STYLE VERLAUF)
   ========================================================================== */
.carousel-item::after {
    content: "" !important; 
    position: absolute !important; 
    inset: 0 !important;
    /* Der edle Verlauf: Links 40% Schwarz, zur Mitte hin sanft transparent */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 40%, transparent 100%) !important;
    z-index: 2 !important; /* Liegt exakt ZWISCHEN dem Bild und dem Text */
    pointer-events: none !important; /* Extrem wichtig: Blockiert keine Klicks auf den Button! */
}
.carousel-item.active .carousel-backgroundimage[style*="background-image"] { background-image: none !important; }
.carousel-content { position: relative !important; z-index: 10 !important; }


.carousel .carousel-item h1, 
.carousel .carousel-item h2 {
    /* Deine bestehenden Regeln */
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);

    /* DIE ENTSCHEIDENDEN ERGÄNZUNGEN FÜR SAFARI: */
    
    /* 1. Isolation verhindert, dass Filter vom Hintergrund die Vektoren "aufbrechen" */
    isolation: isolate; 

    /* 2. Erzwingt geometrische Präzision beim Zeichnen der Pfade */
    text-rendering: geometricPrecision;

    /* 3. Manchmal erzeugt Safari "Geister-Outlines", das hier schaltet sie ab */
    -webkit-text-stroke: 0px transparent !important;
    
    /* 4. Verhindert, dass Safari Ligaturen falsch berechnet (oft die Ursache für Linien im 'e') */
    font-variant-ligatures: no-common-ligatures;
}


/* ==========================================================================
   8. INHALTSELEMENTE & CONTENT-CONTAINER
   ========================================================================== */
.ce-card {
    border-radius: 0px !important; overflow: hidden !important; position: relative;
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.ce-card img, .icongroup-item img {
    width: 100%; height: 320px; object-fit: cover;
    filter: brightness(0.95) contrast(1.15) saturate(0.75);
    image-rendering: -webkit-optimize-contrast;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
    will-change: transform, filter;
}

.ce-card .card-img-overlay {
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.5rem 2rem !important; z-index: 2; pointer-events: none;
}
.ce-card .card-img-overlay .cec-content-wrap .frame {
    position: relative !important; bottom: 0 !important; left: 0 !important; padding: 0 !important; pointer-events: auto;
}

.contentcontainer[data-container-identifier="container_2_columns"] {
    display: grid !important; 
    grid-template-columns: 1fr 1fr; 
    width: 100% !important; 
    height: auto !important;
    min-height: 310px !important;
    background: #ffffff; 
    border-radius: 0px; 
    box-shadow: 0px 0px 20px rgb(92 111 139 / 22%) !important; 
    overflow: visible !important; 
    align-items: stretch !important;
    border: 1px solid #f0f0f0; 
    transition: box-shadow 0.3s ease;
    margin-left: 0 !important; 
    margin-right: 0 !important;
}
.contentcontainer[data-container-identifier="container_2_columns"] .frame-header { margin-bottom: 1rem; }

.contentcontainer-column[data-container-column="left"] {
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: center !important; 
    align-self: stretch !important; 
    height: auto !important;
    min-height: 100% !important; 
    padding: 2rem !important; 
    box-sizing: border-box !important;  
}
.contentcontainer-column[data-container-column="left"] .frame,
.contentcontainer-column[data-container-column="left"] .frame-inner {
    padding-top: 0 !important; 
    padding-bottom: 0 !important; 
    margin: 0 !important;
}

.contentcontainer-column[data-container-column="right"] {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 10px 10px 0 !important;
    align-self: stretch !important;
    min-height: 100% !important;
    margin: 0 !important;
}

.contentcontainer-column[data-container-column="right"] .frame,
.contentcontainer-column[data-container-column="right"] .frame-group-container,
.contentcontainer-column[data-container-column="right"] .frame-container,
.contentcontainer-column[data-container-column="right"] .frame-inner,
.contentcontainer-column[data-container-column="right"] .gallery-row,
.contentcontainer-column[data-container-column="right"] .gallery-item,
.contentcontainer-column[data-container-column="right"] figure {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    width: 100% !important;
    border: none !important;
    display: block !important;
}

.contentcontainer-column[data-container-column="right"] img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    filter: brightness(0.95) contrast(1.15) saturate(0.75);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease !important;
    will-change: transform, filter; 
}

#page-content img {
    filter: brightness(0.95) contrast(1.15) saturate(0.75) !important;
    image-rendering: -webkit-optimize-contrast !important;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease !important;
}

/* Spezifische IDs */
.frame-background-light { --frame-color: #212121; --frame-background: #f4f4f4; background: #f4f4f4; --frame-link-color: #212121; --frame-link-hover-color: #212121; }
.frame-background-secondary { --frame-color: #ffffff; --frame-background: #265b7b; --frame-link-color: #ffffff; --frame-link-hover-color: #ffffff; }
.frame-background-tertiary { background: linear-gradient(180deg,rgba(29, 78, 104, 1) 0%, rgba(38, 91, 123, 1) 25%, rgba(42, 157, 143, 1) 100%); padding-top: 6rem; padding-bottom: 6rem; }
.frame-space-before-extra-small{ padding-top:2rem!important; }
.frame-space-after-extra-small { padding-bottom: 0rem !important; }
.frame-space-after-small { padding-bottom:3rem!important; }
#page-content .frame-background-light, .frame-type-icon_group { padding-bottom: 8rem; padding-top: 8rem; }

/* Kontaktseite Spezifika */
#p15 .contentcontainer[data-container-identifier="container_2_columns"] { background: transparent !important; box-shadow: none !important; border: none !important; height: auto !important; display: grid !important; grid-template-columns: 1fr 1fr; }
#p15 .contentcontainer-column[data-container-column="left"], #p15 .contentcontainer-column[data-container-column="right"] { height: auto !important; }
#p15 .contentcontainer-column[data-container-column="left"] { display: flex !important; flex-direction: column; justify-content: flex-start !important; align-self: stretch !important; padding: 0rem 0px!important; }
.contentcontainer-column[data-container-column="left"] p.lead { font-size: 1.15rem!important; line-height: 1.65; color: #262626; font-weight: 400;letter-spacing: 0.03em; }
/* Umbruch für die Kontaktseite auf Mobile & Tablet */
@media (max-width: 991.98px) {
    #p15 .contentcontainer[data-container-identifier="container_2_columns"] {
        grid-template-columns: 1fr !important; /* Erzwingt 1 Spalte (Umbruch) */
        gap: 3rem !important; /* Sorgt für einen sauberen Abstand zwischen Adresse und Formular */
    }
    
    /* Nimmt das Padding raus, damit das Formular auf Mobile den Platz gut nutzt */
    #p15 .contentcontainer-column[data-container-column="right"] {
        padding-top: 1rem !important; 
    }
}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.footer-section-meta .frame { padding-top: 0rem; padding-bottom: 0rem; }
.footer-meta a{text-decoration: none;}
.footer-section-content {
    background: #3C717E; --frame-color: #ffffff!important; --frame-background: #3C717E;
    --frame-link-color: #fff; --frame-link-hover-color: #fff; font-size: 1rem; font-weight: 400; letter-spacing: 0.04rem;padding-bottom:3rem;
}
.footer-section-content .frame-layout-default { padding-top: 3rem !important; padding-bottom: 1rem !important; }
.footer-section-content .frame-header { margin-bottom: 1em!important; }
.footer-section-content .element-header{ color:#ffffff; font-size:1.25rem!important; letter-spacing:0.01rem !important; }
.footer-section-meta { background: #31555D; font-size: 0.9rem; }
.sociallinks a { color: #fff !important; }
.footer-copyright { border-top: 0.5px solid #555555; text-align: right; padding-top: 0.75rem; font-weight: 300; letter-spacing: 0.08rem; font-size: 0.8rem; }
.footer-section-content a {text-decoration: none;}
.footer-section-content p { color:#fff; }
.footer-menu-section+.footer-info-section { margin-top: 10px;margin-bottom:10px; }

.footer-meta .meta-menu { margin-left: -0.5em; margin-right: -0.5em; text-align: right; }
.meta-menu a{ color: #fff !important; }

.footer-section table { width: auto !important; }
.footer-section table td:first-child { padding-right: 2rem !important; }

.table>:not(caption)>*>* {
    padding: 0rem!important; color: #ffffff!important; background-color: transparent!important; border-bottom-width: 0px!important; border-top-width: 0px !important; box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}
.footer-language{
    display:none
}
/* Zieht die Footer-Links über eventuelle unsichtbare Container */
.footer-section-content a {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
}

 .footer-section h3{
    font-size: 0.8rem;
    color: #ffffff!important;
    margin-top: -1.7rem;
    font-weight: 300;
 }
/* ==========================================================================
   10. STICKY ACTION BAR & PHOTOSWIPE
   ========================================================================== */
/* ==========================================================================
   10. STICKY ACTION BAR & PHOTOSWIPE (Hervorgehoben)
   ========================================================================== */

/* 1. Schatten zur gesamten Bar hinzufügen, um sie prominenter abzuheben */
.sticky-action-bar {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    filter: drop-shadow(-3px 3px 6px rgba(0,0,0,0.2)); /* Dezenter, schwebender Schatten */
}

.sticky-action-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.sticky-action-item {
    position: relative;
}

.sticky-action-item:not(:last-child) {
    border-bottom: 1px solid #E6E6E6;
}

/* 2. Links etwas vergrößern für mehr Klickfläche und Prominenz */
.sticky-action-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; /* Von 42px auf 50px erhöht */
    height: 50px;
    background-color: #3C717E; /* Standard-Hintergrundfarbe */
    color: #FFFFFF;
    text-decoration: none;
    transition: background-color 0.3s ease;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 26px; /* Von 18px auf 26px erhöht für Sichtbarkeit */
}

/* Eckenradius beibehalten */
.sticky-action-item:first-child .sticky-action-link {
    border-top-left-radius: 8px;
}

/* Der letzte Link (Notfall) ist bereits rot im Hintergrund */
.sticky-action-item:last-child .sticky-action-link {
    border-bottom-left-radius: 8px;
    background-color: #DA3E52; /* Das Rot für Notfall */
}

/* Hover-Zustand für Standard-Links (Dunkleres Blau) */
.sticky-action-link:hover {
    background-color: #31555D;
}

/* Label-Positionierung für die breiteren Buttons anpassen */
.sticky-action-label {
    position: absolute;
    right: 80px; /* Von 70px auf 80px erhöht, um Platz für breiteren Button zu schaffen */
    top: 50%;
    transform: translateY(-50%);
    background-color: #31555D; /* Standard-Hover-Farbe */
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 15px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Standard-Label-Pfeil (Dunkleres Blau) */
.sticky-action-label::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent #31555D;
}

/* Label anzeigen bei Hover */
.sticky-action-link:hover .sticky-action-label {
    opacity: 1;
    visibility: visible;
    right: 70px; /* Von 60px auf 70px erhöht */
}

/* --- 3. SPEZIFISCHES ROTES POPUP FÜR NOTFALL --- */
/* Dieser neue Block spricht das Label *innerhalb des letzten Elements* (des roten Notfall-Buttons) an */
.sticky-action-item:last-child .sticky-action-label {
    background-color: #DA3E52 !important; /* Roter Hintergrund für das Notfall-Popup */
}

/* Pfeilfarbe für das Notfall-Popup ebenfalls anpassen */
.sticky-action-item:last-child .sticky-action-label::after {
    border-color: transparent transparent transparent #DA3E52 !important; /* Roter Pfeil */
}

/* --- ICONS (Vergrößert) --- */
/* Icons passend zu den größeren Buttons vergrößern */
.icon-20 { background-image: url('../Icons/notfall.svg'); background-size: 22px; background-position: center; background-repeat: no-repeat; }
.icon-21 { background-image: url('../Icons/maps.svg'); background-size: 22px; background-position: center; background-repeat: no-repeat; }
.icon-22 { background-image: url('../Icons/calendar.svg'); background-size: 22px; background-position: center; background-repeat: no-repeat; }
.icon-23 { background-image: url('../Icons/call.svg'); background-size: 22px; background-position: center; background-repeat: no-repeat; }
.icon-37 { background-image: url('../Icons/mail.svg'); background-size: 22px; background-position: center; background-repeat: no-repeat; }

/* PhotoSwipe */
.pswp {
    --pswp-bg: #262626; --pswp-placeholder-bg: #262626; --pswp-root-z-index: 100000;
    --pswp-preloader-color: rgba(79, 79, 79, 0.4); --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
    --pswp-icon-color: #fff; --pswp-icon-color-secondary: #585858; --pswp-icon-stroke-color: #585858;
    --pswp-icon-stroke-width: 2px; --pswp-error-text-color: var(--pswp-icon-color)
}

/* ==========================================================================
   11. HOVER EFFEKTE (VALIDIERT & SAUBER)
   ========================================================================== */
@media (hover: hover) {

    /* --- BUTTONS --- */
    .btn:not(#nav-item-8):hover, 
    .btn-primary:hover, 
    .btn-secondary:hover, 
    .btn-quaternary:hover, 
    .tx-powermail input[type="submit"]:hover { 
        background-position: left bottom !important; 
        color: #ffffff !important; 
    }
    
    #nav-item-8:hover { 
        background-position: left bottom !important; 
        color: #ffffff !important; 
    }
    
    .carousel-item .btn:hover, 
    #carousel .carousel-item .btn:hover,
    .carousel-item-layout-dark .carousel-content .btn:hover,
    .carousel-item-layout-secondary .carousel-content .btn:hover { 
        background-image: linear-gradient(to right, #31565e 50%, #3e7280 50%) !important;
        background-size: 200% 100% !important;
        background-position: left bottom !important; 
        color: #ffffff !important; 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; 
    }

    /* --- BILDER & CARDS HOVER --- */
    
    /* Standard-Bilder (Gleichmäßiger, dezenten Zoom) */
    .card-img-top img:hover, 
    .textmedia-item img:hover, 
    .gallery-item img:hover { 
        transform: scale(1.03) !important; /* Von 1.2 auf unaufgeregte 1.03 korrigiert */
    }
    
    #page-content img:hover { 
        filter: brightness(1) contrast(1.05) saturate(0.95) !important; 
        transform: scale(1.025) !important; 
    }
    
    .ce-card:hover img, 
    .icongroup-item:hover img { 
        filter: brightness(1.02) contrast(1.05) saturate(0.95) !important; 
        transform: scale(1.03) !important; 
    }
    
    /* Container & Teaser */
    .contentcontainer[data-container-identifier="container_2_columns"]:hover { 
        box-shadow: 0 20px 40px rgba(29, 78, 104, 0.15); 
    }
    
    .contentcontainer[data-container-identifier="container_2_columns"]:hover img { 
        transform: scale(1.03) !important; 
        filter: brightness(1.02) contrast(1.05) saturate(0.95) !important; 
    }
    
    .link-arrow:hover::after { 
        opacity: 1; 
        transform: translateX(3px); 
    }
    
    .nav-tabs:hover, 
    .tab-content:hover { 
        box-shadow: 0px 0px 20px rgb(92 111 139 / 32%); 
    }
    
    /* --- CAROUSEL HOVER (Syntaxfehler korrigiert!) --- */
    .carousel-item:hover img,
    .carousel-item:hover .carousel-backgroundimage { 
        /* 'filter: brightness' wieder hinzugefügt & Wert auf natürliche 1.02 gesenkt */
        filter: brightness(1.02) contrast(1.05) saturate(0.95) !important; 
        -webkit-transform: translateZ(0) scale(1.02) !important;
        transform: translateZ(0) scale(1.02) !important;
    }

    .carousel-backgroundimage {
        transition: filter 0.5s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* --- UI KOMPONENTEN --- */
    .icongroup-item:hover { 
        transform: scale(1.02) translateY(-6px) !important; 
        box-shadow: 0 20px 40px rgba(29, 78, 104, 0.15) !important; 
        z-index: 2; 
    }

    /* Accordion Hover */
    .accordion-item:hover {
        background-color: rgba(38, 91, 123, 0.06) !important;
    }
    
    .accordion-item:hover .accordion-button {
        color: #3C717E !important;
        transition: color 0.3s ease;
    }

    .accordion-item:hover .accordion-button::before,
    .accordion-item:hover .accordion-button::after {
        background-color: #3C717E !important;
    }

    .btn-primary:hover, 
    .carousel-item-button .btn-primary:hover {
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1.0) !important; 
    }
}

@keyframes fadeInAccordion {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
.carousel-item h1, 
.carousel-item h2,
.hero-subtitle {
    filter: none !important;
    -webkit-filter: none !important;
    text-shadow: none !important; /* Testweise deaktivieren, falls aktiv */
}

.carousel .carousel-item h1, 
.carousel .carousel-item h2 {
    opacity: 0.99; 
}


@media (min-width: 421px) { 
    .carousel .item { 
        height: 230px; 
    }
    .carousel .carousel-item-layout-dark.carousel-item h1, 
    .carousel .carousel-item-layout-dark.carousel-item h2, .carousel .carousel-item-layout-dark.carousel-item h4 { 
        color: #ffffff !important; filter:drop-shadow(1px 2px 1px rgb(0 0 0 / 0.4))
    }
}
@media (min-width: 768px) {
    .carousel .item { height: 320px; }
    .textmedia-right .textmedia-gallery, .gallery-item { order: 2; overflow: hidden; border-radius: 12px; }
    .contentcontainer-column[data-container-column="right"] .gallery-item { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; overflow: hidden !important; }
    .carousel .carousel-item h1, .carousel .carousel-item h2 {font-size: 2.8rem!important;line-height: 2.8rem;font-weight: 500;font-family: 'Figtree', sans-serif;color: #262626!important;text-transform: none!important;}
    .carousel .carousel-item h2 { text-transform: none; }
    .carousel .carousel-item h4 { font-size: 1.2rem !important; font-weight: 500; color: #262626!important; filter: drop-shadow(0px 0px 0px rgb(0 0 0 / 0)); text-transform: uppercase; font-family: 'Figtree', sans-serif; font-style: normal; line-height: 2rem; letter-spacing: 0.2rem; }
}

@media (min-width: 991px) {
    .navbar-mainnavigation .navbar-brand-image img { max-height: calc(var(--mainnavigation-nav-height) * .45); }
    .navbar-transition { --mainnavigation-nav-height: 110px; }
}

@media (min-width: 992px) {
    .navbar-mainnavigation { --mainnavigation-dropdown-spacer: 1.4rem; }
    .navbar-mainnavigation .navbar-nav { padding-top: 0; }
    .navbar-mainnavigation .navbar-nav:before { display: none; }
    .navbar-mainnavigation .nav-link.nav-link-main:before { border: none; transform: unset; inset: auto var(--mainnavigation-link-padding-x) calc(var(--mainnavigation-link-padding-y) / 2) var(--mainnavigation-link-padding-x); background: #3e7280 !important; height: 2px; width: auto; transform: scaleX(0); transition: transform .3375s cubic-bezier(.05,1,.8,1) 0ms; }
    .nav-link.nav-link-main:hover:before, .navbar-nav .nav-link.active:before { transform: scale(1); }
    .navbar-mainnavigation .nav-style-simple .dropdown-menu { width: auto; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
    .navbar-mainnavigation .dropdown-menu { position: absolute; }
    .carousel .carousel-item h1, .carousel .carousel-item h2 {font-size: 2.8rem!important;line-height: 2.8rem;font-weight: 500;font-family: 'Figtree', sans-serif;color: #262626!important;text-transform: none!important;}
    .carousel .carousel-item h2 { text-transform: none; }
    .carousel .carousel-item h4 { font-size: 1.2rem !important; font-weight: 500; color: #262626!important; filter: drop-shadow(0px 0px 0px rgb(0 0 0 / 0)); text-transform: uppercase; font-family: 'Figtree', sans-serif; font-style: normal; line-height: 2rem; letter-spacing: 0.2rem; }
}

/* Tablet / Kleine Desktops (unter 1200px): 2 Spalten */
@media (max-width: 1199.98px) {
    .icongroup.icongroup-columns-3 > div {
        flex: 0 0 calc(50% - 1rem) !important;
        max-width: calc(50% - 1rem) !important;
    }
}

/* Smartphone (unter 768px): 1 Spalte */
@media (max-width: 767.98px) {
    .icongroup.icongroup-columns-3 > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 1200px) {
    h3, .h3 { font-size: 1.125rem; color: #585858 !important; font-style: 500; }
    h1, .h1 { font-size: 4rem; }
    h2, .h2 { font-size: 2rem; }
    .contentcontainer-column h2, .textpic-text h2 { font-size: 2rem !important; font-weight: 500; }
    .frame-layout-default { padding-top: 8rem; padding-bottom: 8rem; }
    .carousel { border-radius: 12px; }
    .carousel .item { height: 750px; }
    #c54 .carousel .item { height: auto; }
    .carousel .carousel-item h1, .carousel .carousel-item h2 {font-size: 2.8rem;line-height: 2.8rem;font-weight: 500;font-family: 'Figtree', sans-serif;color: #000!important;text-transform: none!important;}
    .carousel .carousel-item h2 { text-transform: none; }
    .carousel .carousel-item h4 { font-size: 1.2rem !important; font-weight: 500; color: #000!important; filter: drop-shadow(0px 0px 0px rgb(0 0 0 / 0)); text-transform: uppercase; font-family: 'Figtree', sans-serif; font-style: normal; line-height: 2rem; letter-spacing: 0.2rem; }
}

@media (min-width: 1500px) {
    .carousel, .carousel-inner, .carousel-item, .carousel-item-type-html, .hero-video-container, .carousel-backgroundimage, .carousel-item figure.video, .carousel-item .embed-responsive, .carousel-item video { border-radius: 12px !important; overflow: hidden !important; }
    .carousel-inner, .hero-video-container, .carousel-item { -webkit-mask-image: -webkit-radial-gradient(white, black); isolation: isolate; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); }
    .carousel { box-shadow: 0 25px 50px -12px rgba(22, 21, 21, 0.2) !important; } 
}

@media (max-width: 1599px) {
    .carousel, .carousel-inner, .carousel-item, .carousel-item-type-html, .hero-video-container, .hero-video-element, .carousel-backgroundimage, .carousel-item-backgroundimage-container img, .carousel-item figure.video, .carousel-item video { border-radius: 12px !important; }
}

@media (max-width: 1199px) {
    h1, .h1 { font-size: 3.2rem; }
    h2, .h2 { font-size: 1.8rem; }
    .contentcontainer-column h2, .textpic-text h2 { font-size: 1.8rem !important; font-weight: 500; }
    #page-content > .frame:first-of-type { padding-top: 4.5rem !important; }
    .frame-layout-default { padding-top: 6rem; padding-bottom: 6rem; }
    .carousel { border-radius: 12px; }
    .carousel .item { height: 520px; }
}

@media (max-width: 991px) {
    .carousel .carousel-item h2 { text-transform: none; }
    .carousel .carousel-item h4 { font-size: 1.2rem !important; font-weight: 500; color: #262626!important; filter: drop-shadow(0px 0px 0px rgb(0 0 0 / 0)); text-transform: uppercase; font-family: 'Figtree', sans-serif; font-style: normal; line-height: 2rem; letter-spacing: 0.2rem; }
    .navbar-mainnavigation .navbar-brand-image img { position: relative; top: 50%; transform: translate(0, -50%); width: auto; max-height: calc(var(--mainnavigation-nav-height) - 25px); }
    li.nav-item { text-transform: uppercase; line-height: 28px; font-size: 14px; font-family: 'Figtree', sans-serif;; font-weight: 500; color: #262626; display: block; padding-left: 0px !important; border-bottom: 0.1px solid #999999; }
    .navbar-mainnavigation .dropdown-menu-simple .dropdown-nav li, .navbar-mainnavigation .dropdown-menu-mega .dropdown-nav { --mainnavigation-dropdown-column-spacing: 1px; border-bottom: 0px solid !important; }
    .language-navigation li.nav-item { text-transform: uppercase; border-bottom: 0px solid #999999!important; }
  

    /* MOBILE NAV BÜNDIGKEIT */
    .navbar-mainnavigation .navbar-nav .dropdown-menu { --bs-dropdown-padding-x: 0px !important; --bs-dropdown-padding-y: 0px !important; --bs-dropdown-spacer: 0px !important; padding: 0 !important; margin: 0 !important; }
    .navbar-mainnavigation .dropdown-menu .dropdown-nav { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; width: 100% !important; padding-left: 0 !important; margin-left: 0 !important; }
    .navbar-mainnavigation .dropdown-menu .dropdown-nav > li.nav-item { width: 100% !important; display: block !important; border-bottom: 0.1px solid #999999; }
    .navbar-mainnavigation .dropdown-menu .nav-link { padding-left:0.75rem !important; margin-left: 0 !important; text-align: left !important; font-weight: 400; text-transform: uppercase; }
    .navbar-mainnavigation .nav-link:not(.nav-link-toggle):before { display: none !important; }
    .nav-item.dropdown.show { margin-bottom: 0 !important; }
    
    .contentcontainer[data-container-identifier="container_2_columns"] { grid-template-columns: 1fr; height: auto !important; overflow: hidden !important; }
    .contentcontainer-column[data-container-column="right"] { height: 250px; border-radius: 0 0 10px 10px; }
    .frame-background-tertiary { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}

@media (max-width: 767px) {
    .carousel .carousel-item h1, .carousel .carousel-item h2 {font-size: 2.2rem!important;line-height: 2.2rem!important;font-weight: 500;font-family: 'Figtree', sans-serif;color: #262626!important;text-transform: none!important;}
    .carousel .carousel-item h2 { text-transform: none; }
    .carousel .carousel-item h4 { font-size: 1rem !important; font-weight: 500; color: #262626!important; filter: drop-shadow(0px 0px 0px rgb(0 0 0 / 0)); text-transform: uppercase; font-family: 'Figtree', sans-serif; font-style: normal; line-height: 2rem; letter-spacing: 0.2rem; }
    h1, .h1 { font-size: 2.2rem !important; line-height: 1.2 !important; }
    h2, .h2 { font-size: 1.1rem !important; }
    .contentcontainer-column h2, .textpic-text h2{ font-size: 1.6rem !important; }
    .btn, .btn-primary, .btn-secondary, .btn-quaternary, #nav-item-8, .carousel-item .btn, .tx-powermail input[type="submit"] { padding: 0.9rem 1.8rem !important; min-width: 150px; font-size: 0.75rem !important; }
    #nav-item-8 { padding: 10px 20px !important; }
    .nav-tabs, .tab-navigation { flex-direction: column !important; width: 100% !important; }
    .nav-tabs .nav-item, .tab-navigation .nav-item, .nav-tabs .nav-link, .tab-navigation .nav-link { width: 100% !important; display: block !important; text-align: left !important; }
    .nav-tabs .nav-link.active { border-radius: 10px !important; }
   
    .carousel .carousel-item p { margin-bottom: 0 !important; }
    .carousel .carousel-item a.btn, .carousel .carousel-item a.btn-quaternary { color: #262626 !important; padding: 12px 20px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; backdrop-filter: none !important; }
    .frame-background-tertiary { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .ce-card .card-img-overlay{ padding: 1.5rem !important; }
    .icongroup-item { width: 100% !important; }
    .tab-navigation .nav-link, .accordion-button, .accordion-body { padding-left: 1rem !important; padding-right: 1rem !important; }
    .hero-video-container, .carousel-backgroundimage { height: 300px !important; }
    .ce-card img, .icongroup-item img, .contentcontainer-column[data-container-column="right"] img{ height: 250px !important; max-height: 250px !important; }
    .carousel-item-type-html .carousel-content { padding-left: 0 !important; padding-right: 0 !important; }
    .hero-video-container, .hero-video-element { width: 100% !important; border-radius: 12px !important; }
    .footer-copyright { text-align: center; padding-top: 0.5rem; }
    #page-content > .frame:first-of-type { padding-top: 3rem !important; }
    .text-center.lead { font-size: 1.1rem; line-height: 1.6; color: #262626; margin-bottom: 1.5rem; margin-top: 2.5rem; font-weight: 400; letter-spacing: 0.03em;}
    .carousel { border-radius: 12px !important; }
    .carousel .item { height: 300px; }

    /* Mobile Sticky Action Bar */
    .sticky-action-bar {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none; 
        width: 100%;
        box-shadow: 0 -4px 15px rgba(33, 53, 59, 0.15);
    }
    .sticky-action-menu {
        flex-direction: row; 
        width: 100%;
    }
    .sticky-action-item {
        flex: 1; 
    }
    .sticky-action-link {
        width: 100%;
        height: 60px; 
        border-radius: 0 !important; 
    }
    .sticky-action-item:not(:last-child) {
        border-bottom: none; 
        border-right: 1px solid #E6E6E6; 
    }
    .sticky-action-label {
        display: none !important;
    }
    .scroll-top {
        bottom: 80px !important; 
        z-index: 9998; 
    }
}

@media (max-width: 576px) { 
    .carousel .carousel-item { padding-left: 0rem; padding-right: 0rem; } 
    .carousel .carousel-item h1, .carousel .carousel-item h2 {font-size: 2.2rem!important;line-height: 2.2rem!important;font-weight: 500;font-family: 'Figtree', sans-serif;color: #262626!important;text-transform: none!important;}
    .carousel .carousel-item h2 { text-transform: none; }
    .carousel .carousel-item h4 { font-size: 1rem !important; font-weight: 500; color: #262626!important; filter: drop-shadow(0px 0px 0px rgb(0 0 0 / 0)); text-transform: uppercase; font-family: 'Figtree', sans-serif; font-style: normal; line-height: 2rem; letter-spacing: 0.2rem; }
}

@media (max-width: 420px) { .carousel .item { height: 180px; } }

@media (min-width: 1400px) {
    #c14 .frame-container-default {
        max-width: 1140px;
    }
}
#c14 .frame-header{
    margin-bottom:3rem!important;
}
.frame-header {
    margin-bottom: 2rem;
}
.footer-info-section>*:not(:first-child) {
    margin-top: 0.4rem;
}
.sociallinks-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 0.4rem;
}
.footer-sociallinks .sociallinks-link {
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    color: inherit;
    opacity: 0.75;
    transition: all ease-in-out 0.3s;
    background-color: rgba(255, 255, 255, 0.05);
}
/* ==========================================================================
   LARGE MODAL - FONT ADJUSTMENTS
   ========================================================================== */

.custom-modal-apple {
    background-color: #f5f5f7 !important;
    border-radius: 24px !important;
    padding: 15px;
}

/* Überschrift (Poppins) */
.modal-headline-large {
    font-family: 'Figtree', sans-serif !important;
    font-size: 2rem !important; /* Deutlich größer */
    font-weight: 500 !important;
    color: #262626 !important;
    letter-spacing: 0em;
}

/* Subline (Monsterrat) */
.modal-subline-large {
    font-family: 'Figtree', sans-serif !important;
    font-size: 1.25rem !important;
    line-height: 1.5 !important;
    color: #585858 !important;
}

/* Badge */
.badge-apple {
    background: #e8e8ed;
    color: #86868b;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Vertretungs-Card */
.representation-card-apple {
    background: #ffffff;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.card-label-large {
    font-family: 'Figtree', sans-serif;
    font-size: 0.85rem !important;
    color: #265b7b !important;
    letter-spacing: 0.12em !important;
    font-weight: 700 !important;
}

.practitioner-name-large {
    font-family: 'Figtree', sans-serif!important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    color: #262626;
}

.practitioner-address-large {
    font-family: 'Figtree', sans-serif!important;
    font-size: 1rem !important;
    font-weight: 400;
}

/* Button */
.btn-apple-primary {
    background: #0071e3 !important;
    border-radius: 16px !important;
    padding: 16px !important;
    font-weight: 500 !important;
    font-family: 'Figtree', sans-serif!important;
    font-size: 1.1rem !important;
    color: white !important;
    transition: all 0.3s ease !important;
}

.btn-apple-primary:hover {
    background: #0077ed !important;
    transform: translateY(-1px);
}

.modal-backdrop.show {
    
    /* Etwas dunklerer Grauton für mehr Kontrast zum Modal */
     background-color: rgb(26 26 26 / 96%) !important; 
    
    transition: opacity 0.3s ease-in-out !important;
}

/* Optional: Damit das Modal selbst auf dem dunklen Grund noch cleaner wirkt */
.custom-modal-apple {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important; /* Tieferer, weicherer Schatten */
}
#c26.frame-layout-default {
    padding-top: 4rem !important;
}
#c48 .frame-group-inner {
    background-color: #DA3E52;
    color: #fff!important;
}
@media (max-width: 1599px) {
    .carousel, .carousel-inner, .carousel-item, .carousel-item-type-html, .hero-video-container, .hero-video-element, .carousel-backgroundimage, .carousel-item-backgroundimage-container img, .carousel-item figure.video, .carousel-item video{
        border-radius: 0 !important;
    }
}
/* ==========================================
   NOTFALL MODAL STYLING
   ========================================== */

/* Rundungen für das gesamte Modal */
.emergency-modal-content {
    border-radius: 16px;
    overflow: hidden;
}

/* Header Hintergrund (Dein Rot) */
.emergency-header {
    background-color: #DA3E52;
    padding: 1.5rem 2rem;
}

/* Schriftfarbe für die Nummern und Pfeile */
.emergency-text-primary {
    color: #DA3E52 !important;
}

/* Responsive Anpassungen für kleine Smartphones */
@media (max-width: 575.98px) {
    #emergencyModal .display-3 {
        font-size: 4rem; /* 112 etwas kleiner auf dem Handy */
    }
    #emergencyModal .display-5 {
        font-size: 2.5rem; /* 116 117 etwas kleiner auf dem Handy */
    }
}

/* Maps Links mit Icon (Sticky-Bar wird ignoriert!) */
a[href*="maps.app.goo.gl"]:not(.sticky-action-link) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;

    
    /* --- DER MODERNE UNTERSTRICH --- */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: all 0.3s ease;
}

/* Beim Hovern */
a[href*="maps.app.goo.gl"]:not(.sticky-action-link):hover {
    color: #3C717E; 
    text-decoration-color: #3C717E; 
}

/* Setzt das Icon vor die Links und färbt es ein */
a[href*="maps.app.goo.gl"]:not(.sticky-action-link)::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    
    background-color: #ffffff; 
    
    -webkit-mask-image: url('../Icons/maps.svg');
    mask-image: url('../Icons/maps.svg');
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.carousel-small.carousel .item{ height: 450px; }
.carousel-small .carousel-backgroundimage{
    width: 100%;
    height: 450px!important;
    position: relative;
    overflow: hidden;
    background: #000;
}


/* Vergrößert die Klickfläche für den Text und den Pfeil */
.nav-link-main, 
.nav-link-toggle {
    padding-left: 10px;
    padding-right: 10px;
    min-height: 24px; /* Stellt die Mindesthöhe für Touch-Geräte sicher */
}

/* Sorgt für etwas Abstand zwischen Text und Pfeil */
.nav-link-toggle {
    margin-left: 4px;
}

/* ==========================================================================
   MOBILER SPRACHUMSCHALTER – FIXES
   Einfügen am Ende von styles-final.css (Sektion 15 / nach den Page-Overrides)
   ========================================================================== */

@media (max-width: 991px) {

    /* 1. Uppercase-Vererbung vom li.nav-item-Block aufheben */
    .language-navigation .custom-lang-item {
        text-transform: none !important;
        letter-spacing: normal !important;
        font-size: 1rem !important;
    }

    /* 2. Sprachmenü ans Ende der Navbar schieben, nicht in den Nav-Flow eingebettet */
    .navbar-mainnavigation .navbar-nav.language-navigation {
        order: 99;                    /* Immer ganz unten */
        width: 100% !important;
        padding: 0.75rem 0 !important;
        border-top: 0px solid #e0e0e0;
        margin-top: 0.5rem !important;
        justify-content: flex-start !important;
    }

    /* 3. Globe-Button auf Mobile wie ein normaler Nav-Link aussehen lassen */
    .language-navigation .nav-link,
    .language-navigation .dropdown-toggle {
        font-size: 0.95rem !important;
        letter-spacing: 0.08em !important;
        text-transform: none !important;
        padding: 0.6rem 0 !important;
        color: var(--color-text) !important;
        gap: 6px !important;
    }

    /* 4. Dropdown bleibt im normalen Dokumentfluss (kein absolute-Overflow) */
    .language-navigation .dropdown-menu.custom-lang-dropdown {
        position: static !important;   /* Kein absolute → kein Overflow über Nav */
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        background: transparent !important;
    }

    /* 5. Einzelne Sprachoptionen: schlank, linksbündig, kein Transform-Effekt */
    .language-navigation .custom-lang-item {
        padding: 0.5rem 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--color-text) !important;
    }

    .language-navigation .custom-lang-item:hover {
        background: transparent !important;
        transform: none !important;     /* Kein seitliches Verschieben auf Mobile */
        color: var(--color-brand) !important;
    }

    /* 6. Flaggen-Icon etwas kleiner */
    .language-navigation .custom-lang-dropdown li .custom-lang-item::before {
        width: 20px !important;
        height: 20px !important;
        margin-right: 10px !important;
    }

    /* 7. Trennlinie vor "Leichte Sprache" erhalten */
    .language-navigation .custom-lang-dropdown li:nth-child(3) {
        border-top: 0px solid #e0e0e0 !important;
        margin-top: 4px !important;
        padding-top: 4px !important;
    }
}


/* Container: Muss 'relative' sein, damit die absoluten Kinder darin bleiben */
.hero-video-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Nimmt die volle Bildschirmhöhe ein. Anpassen falls nötig. */
    overflow: hidden;
    margin: 0;
}

/* Video: Füllt den gesamten Container aus */
.hero-video-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Verhindert Verzerrungen */
    z-index: 1;
}

/* Overlay: Leichter schwarzer Schleier für besseren Kontrast */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Transparenz anpassen (0.0 bis 1.0) */
    z-index: 2;
}

/* Content-Container: Positionierung des Textes links mittig */
.hero-content {
    position: absolute;
    top: 50%; /* Vertikal mittig ansetzen */
    transform: translateY(-50%); /* Exakt in die Mitte verschieben */
    left: 10%; /* Abstand vom linken Rand (wie im Bild) */
    z-index: 3; /* Liegt über Video (1) und Overlay (2) */
    color: #ffffff!important; /* Weißer Text */
    font-family: sans-serif;
    max-width: 800px;
}

/* Typografie und Styling angelehnt an deinen Screenshot */
.hero-title {
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #fff !important; /* Weißer Text */
}

.hero-subtitle {
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 2rem;
    margin-top: 0;
}

/* Button-Styling */
.hero-btn {
    display: inline-block;
    background-color: #315c61; /* Die blau/grüne Farbe aus dem Screenshot */
    color: #ffffff;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.hero-btn:hover {
    background-color: #234448; /* Etwas dunkler beim Hover */
    color: #ffffff;
}

/* Responsive Anpassung für kleinere Bildschirme (Smartphones) */
@media (max-width: 768px) {
    .hero-content {
        left: 5%; /* Etwas weniger Abstand am Handy */
        right: 5%;
    }
    .hero-subtitle {
        font-size: 2.5rem;
    }
}
/* Zwingt den Video-Container, sich an die responsiven Höhen des Sliders anzupassen */
.carousel .item .hero-video-container {
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
}

/* ==========================================================================
   MOBILE OPTIMIERUNG FÜR DEN VIDEO-HEADER (Smartphones < 768px)
   ========================================================================== */
@media (max-width: 767px) {
    
    /* 1. Container etwas mehr in die Mitte rücken */
    .hero-content {
        left: 5% !important;
        right: 5% !important;
        width: 90% !important;
    }

    /* 2. Farben zwingend auf Weiß setzen & Schriftgrößen drastisch reduzieren */
    .hero-content .hero-title {
        color: #ffffff !important; /* Überschreibt das dunkle Grau */
        font-size: 0.8rem !important;
        margin-bottom: 0.3rem !important;
    }

    .hero-content .hero-subtitle {
        color: #ffffff !important; /* Überschreibt das dunkle Grau */
        font-size: 1.6rem !important; /* Vorher viel zu groß für 300px Höhe */
        line-height: 1.2 !important;
        margin-bottom: 1.2rem !important; /* Zieht den Button näher ran */
    }

    /* 3. Button etwas kompakter machen, damit er sicher reinpasst */
    .hero-content .hero-btn {
        padding: 10px 20px !important;
        font-size: 0.8rem !important;
    }
}
@media (max-width: 767px) {
    /* Flexibler Hero-Slider: 75% der dynamischen Bildschirmhöhe auf Mobile */
    .carousel .item,
    .hero-video-container, 
    .carousel-backgroundimage {
        max-height: 45svh !important; 
    }
}
.carousel .carousel-content-inner {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 1rem;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.carousel-item-layout-dark.carousel-item h4.hero-title, .carousel-item-layout-dark.carousel-item h2.hero-subtitle{
    color:#fff!important;
}

/* Verhindert Layout-Sprünge, wenn der Header auf fixed/scrolled wechselt */
#page-header {
    /* MUSS eine feste Höhe haben oder über Sticky gelöst werden */
    position: sticky !important; 
    top: 0;
    z-index: 1030;
    /* Deine bestehenden Paddings beibehalten, damit die Box-Größe gleich bleibt */
    padding-top: 1.8rem !important;
    padding-bottom: 1.8rem !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Deaktiviert den Schatten im CSS-Grundzustand hart, falls JS verzögert */
#page-header:not(.navbar-scrolled) {
    box-shadow: none !important;
}

/* Verhindert, dass der Inhalt beim Scrollen 'unter' den Header springt */
body {
    scroll-padding-top: 120px; /* Höhe deines Headers */
}
/* ==========================================================================
   CAROUSEL FULL COVER & CENTER FIX
   ========================================================================== */

/* 1. Karussell-Rahmen festlegen */
.carousel-small.carousel,
.carousel-small.carousel .item,
.carousel-small .carousel-item {
    position: relative !important;
    width: 100% !important;
    height: 450px !important; /* Feste, saubere Bannerhöhe auf Desktop */
    overflow: hidden !important;
    background-color: transparent !important;
}

/* 2. Absolute Hintergrund-Container erzwingen */
.carousel-small .carousel-backgroundimage-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

/* 3. Bild zwingen, den vollen Raum LÜCKENLOS zu füllen (Kein schwarzer Balken!) */
.carousel-small .carousel-backgroundimage-container img,
.carousel-small img.carousel-backgroundimage {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    /* Zentriert das Motiv vertikal exakt mittig */
    object-position: center center !important; 
}

/* 4. Fallback für CSS-Backgrounds */
.carousel-small .carousel-backgroundimage-container[style*="background-image"] {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    height: 100% !important;
}

/* 5. Inhaltsbereich vertikal zentrieren */
.carousel-small .carousel-content {
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* ==========================================================================
   CAROUSEL HERO FULL-HEIGHT & FOCAL POINT FIX
   ========================================================================== */

/* 1. Karussell-Elemente auf feste Desktop-Höhe zwingen */
.carousel-small.carousel,
.carousel-small.carousel .item,
.carousel-small .carousel-item {
    position: relative !important;
    width: 100% !important;
    height: 450px !important;
    overflow: hidden !important;
}

/* 2. Den Hintergrund-Container zwingen, die vollen 450px auszufüllen */
.carousel-small .carousel-backgroundimage-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

/* 3. Das Bild lückenlos einpassen & den vertikalen Fokus korrigieren */
.carousel-small .carousel-backgroundimage-container img,
.carousel-small img.carousel-backgroundimage {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Vertikaler Fokus: 35% hält Motive/Personen perfekt im Bild, statt nur Decke zu zeigen */
    object-position: center 35% !important; 
}

/* Fallback für Inline-Backgrounds */
.carousel-small .carousel-backgroundimage-container[style*="background-image"] {
    background-size: cover !important;
    background-position: center 35% !important;
    height: 100% !important;
}

/* 4. Text-Content sauber zentrieren */
.carousel-small .carousel-content {
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* 5. Mobile (< 768px): Höhe dynamisch halten, damit nichts gequetscht wird */
@media (max-width: 767.98px) {
    .carousel-small.carousel,
    .carousel-small.carousel .item,
    .carousel-small .carousel-item {
        height: auto !important;
        min-height: 0 !important;
    }

    .carousel-small .carousel-content {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
}
/* ==========================================================================
   NEUROPOLI - CAROUSEL HERO HEIGHT & FOCAL POINT FIX
   ========================================================================== */

/* 1. Karussell-Container als relativer Bezugsrahmen auf Desktop (>= 768px) */
@media (min-width: 768px) {
    .carousel-small.carousel,
    .carousel-small.carousel .item,
    .carousel-small .carousel-item {
        position: relative !important;
        width: 100% !important;
        height: 450px !important;
        min-height: 450px !important;
        overflow: hidden !important;
    }
}

/* 2. Absolute Einpassung des Bild-Containers (100% Höhe & Breite) */
.carousel-small .carousel-backgroundimage-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

/* 3. Fall A: Das Bild ist als <img> im DOM eingebunden */
.carousel-small .carousel-backgroundimage-container img,
.carousel-small img.carousel-backgroundimage {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Vertikaler Fokus bei 30-35% schiebt das Bild nach oben, sodass die Decke verschwindet */
    object-position: center 32% !important; 
}

/* 4. Fall B: Das Bild ist als CSS background-image im inline-style eingebunden */
.carousel-small .carousel-backgroundimage,
.carousel-small .carousel-backgroundimage-container[style*="background-image"] {
    background-size: cover !important;
    /* Vertikaler Fokus für CSS-Hintergrundbilder */
    background-position: center 32% !important; 
    background-repeat: no-repeat !important;
    width: 100% !important;
    height: 100% !important;
}

/* 5. Text & CTA-Button vertikal zentrieren */
.carousel-small .carousel-content {
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* 6. Mobile Viewport (< 768px): Dynamische Höhe über Content-Padding */
@media (max-width: 767.98px) {
    .carousel-small.carousel,
    .carousel-small.carousel .item,
    .carousel-small .carousel-item {
        height: auto !important;
        min-height: 320px !important;
    }

    .carousel-small .carousel-content {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}

/* ==========================================================================
   CAROUSEL SMALL - CONTAINER-ANPASSUNG EXAKT WIE HOME
   ========================================================================== */

/* Base Styles für den inneren Content-Container */
.carousel-small .carousel-content-inner {
    display: flex !important;
    height: 100% !important;
    align-items: center !important;
    gap: 1rem !important;
    margin: 0 auto !important; /* Zentriert den Inhaltsbereich im Banner */
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    width: 100% !important;
}

/* Identische Bootstrap-Grid Breakpoints wie auf der Home-Seite */
@media (min-width: 576px) {
    .carousel-small .carousel-content-inner {
        max-width: 500px !important;
    }
}

@media (min-width: 768px) {
    .carousel-small .carousel-content-inner {
        max-width: 680px !important;
    }
}

@media (min-width: 992px) {
    .carousel-small .carousel-content-inner {
        max-width: 920px !important;
    }
}

@media (min-width: 1200px) {
    .carousel-small .carousel-content-inner {
        max-width: 1100px !important;
    }
}

@media (min-width: 1400px) {
    .carousel-small .carousel-content-inner {
        max-width: 1280px !important;
    }
}

/* ==========================================================================
   CAROUSEL TEXT COLOR FIX (NUR FÜR DARK LAYOUT)
   ========================================================================== */

/* Erzwingt leuchtendes Weiß nur bei dunklen Slide-Layouts */
.carousel .carousel-item-layout-dark h1,
.carousel .carousel-item-layout-dark h2,
.carousel .carousel-item-layout-dark h3,
.carousel .carousel-item-layout-dark h4,
.carousel .carousel-item-layout-dark .carousel-item-header,
.carousel .carousel-item-layout-dark .carousel-item-subheader,
.carousel .carousel-item-layout-dark .carousel-item-bodytext,
.carousel .carousel-item-layout-dark .carousel-item-bodytext p {
    color: #ffffff !important;
}
/* ==========================================================================
   CAROUSEL TEXT COLOR FIX - SPECIFIC OVERRIDE FOR DARK LAYOUT
   ========================================================================== */

.carousel .carousel-item.carousel-item-layout-dark .carousel-item-header,
.carousel .carousel-item.carousel-item-layout-dark .carousel-item-subheader,
.carousel .carousel-item.carousel-item-layout-dark .carousel-item-bodytext,
.carousel .carousel-item.carousel-item-layout-dark .carousel-item-bodytext *,
.carousel .carousel-item.carousel-item-layout-dark h1,
.carousel .carousel-item.carousel-item-layout-dark h2,
.carousel .carousel-item.carousel-item-layout-dark h3,
.carousel .carousel-item.carousel-item-layout-dark h4 {
    color: #ffffff !important;
}

/* ==========================================================================
   CAROUSEL OVERLAY & TEXT BRIGHTNESS FIX
   ========================================================================== */

/* 1. Stellt sicher, dass das Text-Element sauber VOR dem Verlauf liegt */
.carousel .carousel-content {
    position: relative !important;
    z-index: 10 !important; /* Holt den Text nach ganz vorne */
    filter: none !important; /* Hebt eventuelle Abdunkelungs-Filter auf */
    backdrop-filter: none !important;
}

/* 2. Fixiert den leuchtend weißen Text */
.carousel .carousel-content-inner,
.carousel .carousel-content-inner * {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Erhöht die Lesbarkeit auf hellem Hintergrund */
}

/* 3. Der Verlauf/Overlay gehört strikt in den Hintergrund-Container */
.carousel .carousel-backgroundimage-container::after,
.carousel .carousel-backgroundimage::after {
    z-index: 1 !important; /* Verlauf bleibt hinter dem Content (z-index: 10) */
}

/* ==========================================================================
   NEUROPOLI - BRIGHTNESS & HOVER FILTER COMPLETE REMOVAL
   ========================================================================== */

/* 1. Reset aller Filter auf Bildern im Normal- und Hover-Zustand */
.card-img-top img,
.textmedia-item img,
.gallery-item img,
#page-content img,
.ce-card img,
.icongroup-item img,
.contentcontainer[data-container-identifier="container_2_columns"] img {
    filter: none !important;
    -webkit-filter: none !important;
}

/* 2. Entfernt Filter explizit beim Hover */
.card-img-top img:hover,
.textmedia-item img:hover,
.gallery-item img:hover,
#page-content img:hover,
.ce-card:hover img,
.icongroup-item:hover img,
.card-group-element-item .card:hover .card-img-top img,
.contentcontainer[data-container-identifier="container_2_columns"]:hover img {
    filter: none !important;
    -webkit-filter: none !important;
}

/* ==========================================================================
   MOBILE NAV - REMOVE BORDER BOTTOM ON KONTAKT
   ========================================================================== */

@media (max-width: 991.98px) {
    /* Direkt über die ID des Kontakt-Links */
    #nav-item-15,
    /* Alternativ: Auf dem li-Container des Kontakt-Links */
    #mainnavigation .navbar-nav > li:has(#nav-item-15) {
        border-bottom: none !important;
    }

    /* Entfernt den Border auch, falls er direkt auf dem Link-Element (.nav-link) liegt */
    #nav-item-15.nav-link {
        border-bottom: none !important;
    }
}

/* ==========================================================================
   FINALE MOBILE TYPOGRAFIE (Proportion 1:2 wie Desktop, nur kleiner)
   ========================================================================== */
@media (max-width: 767.98px) {

  /* 1. Dachzeile ("DIE ÄRZTE") – Desktop 1rem → 0.9rem */
  h1.element-header.h5 {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.3rem !important;
    font-weight: 500 !important;
    color: #585858 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05rem !important;
  }

  /* 2. Hauptüberschrift ("Expertise & Menschlichkeit") – Desktop 2rem → 1.8rem */
  h2.element-subheader.h1 {
    font-size: 1.6rem !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    color: #262626 !important;
    text-transform: none !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 1.5rem !important;
  }

  /* 3. Normale Seitenüberschriften – WICHTIG: :not(.h5) schützt die Dachzeile */
  h1:not(.h5),
  h1.element-header.text-center:not(.h5),
  .textpic-text h1,
  .carousel .carousel-item h1,
  .carousel .carousel-item h2 {
    font-size: 1.6rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.6rem !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
  }

  .textpic-text {
    margin-bottom: 1.5rem !important;
  }
}

@media (max-width: 767px) {
    /* Erhöht die Höhe des Sliders auf allen Smartphones */
    .carousel .item,
    .hero-video-container, 
    .carousel-backgroundimage {
        height: 440px !important;
        max-height: 45svh !important;
    }
}

.carousel .carousel-item-layout-dark .carousel-backgroundimage-container::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.1) 45%, transparent 80%) !important;
    z-index: 2 !important;
  }

  /* Weißer Text */
  .carousel .carousel-item-layout-dark .carousel-item-header,
  .carousel .carousel-item-layout-dark .carousel-item-subheader,
  .carousel .carousel-item-layout-dark h1,
  .carousel .carousel-item-layout-dark h2,
  .carousel .carousel-item-layout-dark h4 {
    color: #ffffff !important;
    text-shadow: none !important;
    filter:drop-shadow(1px 2px 1px rgb(0 0 0 / 0.4))!important;
  }
@media (max-width: 767.98px) {
  /* 1. Das Slide-Element muss die volle Höhe einnehmen */
  .carousel-small .carousel-item,
  .carousel-small .item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 250px !important; /* Passt sich an deine Slider-Höhe an */
  }

  /* 2. Der Content-Container zentriert sich vertikal */
  .carousel-small .carousel-content {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  /* 3. Der innere Wrapper zentriert den Inhalt ebenfalls */
  .carousel-small .carousel-content-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
  }
}
/* ==========================================================================
   DESKTOP (>= 992px): Alles sauber in einer Zeile
   ========================================================================== */
@media (min-width: 992px) {
  #page-header .navbar-nav > li,
  .navbar-mainnavigation .navbar-nav > li {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
  }

  .navbar-mainnavigation .nav-link-toggle {
    margin-left: 2px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* ==========================================================================
   MOBILE (< 992px): Text & Pfeil nebeneinander, Menü darunter
   ========================================================================== */
@media (max-width: 991.98px) {
  /* 1. Das Haupt-li erlaubt das Umbrechen des Dropdown-Menus nach unten */
  .navbar-mainnavigation .navbar-nav > li {
    display: flex !important;
    flex-wrap: wrap !important; /* WICHTIG: Erlaubt dem Dropdown-Menü, in die 2. Zeile zu rutschen */
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* 2. Haupt-Link nimmt den Platz links ein */
  .navbar-mainnavigation .nav-link-main {
    flex: 1 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* 3. Pfeil-Button bleibt rechts auf EXAKT derselben Zeile */
  .navbar-mainnavigation .nav-link-toggle {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
  }

  /* 4. Das aufgeklappte Untermenü bricht in eine neue Zeile (100% Breite) aus */
  .navbar-mainnavigation .dropdown-menu {
    flex: 0 0 100% !important; /* Nimmt volle 100% unterhalb von Link+Pfeil ein */
    position: static !important;
    float: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding-left: 1rem !important; /* Dezentes Einrücken der Unterpunkte */
  }
}