/* CSS Variablen für zentrale Steuerung */
:root {
    --primary-color: #5D8BA0;
    --secondary-color: #FFEFD9; 
    --accent-color: #1D3556;
    --highlight-background-color: #FCEEE5; /* Heller, warmer Hintergrund für Header & Karten */
    --section-bg-light: #FCEEE5;
    --text-color: #333333;
    --light-text-color: #FFFFFF;
    --border-color: #DDDDDD;
    --hover-darken-primary: #4a7080;
    --hover-darken-accent: #936458;
    --primary-color-rgb: 93, 139, 160; /* Entspricht #5D8BA0 */

    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    /* --font-special: 'Merriweather', serif; */

    --header-height: 80px;
    --sticky-offset: 0px; /* Falls noch was über dem Header ist, sonst 0 */
}

/* Grundlegende Resets und Body-Styling */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--secondary-color); /* Hintergrundfarbe für die gesamte Seite */
    padding-top: var(--header-height); /* Platz für sticky Header */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    margin-bottom: 0.75em;
    color: var(--primary-color);
}

a {
    color: var(--accent-color);
    text-decoration: none;
}

a:hover {
    color: var(--hover-darken-accent);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

.section-padding {
    padding: 40px 0;
}

.text-center {
    text-align: center;
}

.section-title {
    text-align: center;
    font-size: 2em;
    margin-bottom: 30px;
}

/* Header Styling */
.site-header {
    background-color: var(--highlight-background-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.07);
    position: sticky;
    top: var(--sticky-offset);
    width: 100%;
    z-index: 1000;
    height: var(--header-height);
    display: flex; /* Für vertikale Zentrierung des Inhalts */
    align-items: center; /* Für vertikale Zentrierung des Inhalts */
}

.header-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%; /* Etwas breiter als normaler container */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.logo-container {
    flex-shrink: 0; /* Verhindert, dass das Logo schrumpft */
}

.logo img {
    max-height: 50px; /* Höhe des Logos anpassen */
}
.logo-text { /* Falls Text-Logo verwendet wird */
    font-family: var(--font-heading);
    font-size: 1.8em;
    color: var(--primary-color);
    font-weight: bold;
}

/* Header Styling - Anpassungen für Logo mit Text */
.logo-container {
    /* flex-shrink: 0; bleibt bestehen */
}

.logo-link {
    display: flex; /* Bild und Textgruppe nebeneinander */
    align-items: center; /* Vertikal zentrieren */
    text-decoration: none; /* Sicherstellen, dass kein Unterstrich vom Link kommt */
}

.logo-link img {
    max-height: 50px; /* Höhe des Logos anpassen, falls noch nicht geschehen */
    margin-right: 15px; /* Abstand zwischen Logo und Text */
}

.logo-text-group {
    display: flex;
    flex-direction: column; /* Name und Signatur untereinander */
    line-height: 1.2; /* Engerer Zeilenabstand für Name/Signatur */
}

.therapist-name {
    font-family: var(--font-heading);
    font-size: 1.3em; /* Größe anpassen nach Bedarf */
    font-weight: 600; /* Etwas fetter */
    color: var(--primary-color); /* Oder var(--text-color) */
    display: block; /* Stellt sicher, dass es eine eigene Zeile nimmt falls nötig */
}

.therapist-signature {
    font-family: var(--font-body);
    font-size: 0.85em; /* Kleiner als der Name */
    color: var(--text-color); /* Oder eine dezentere Farbe */
    font-style: italic; /* Optional: kursiv für Signatur-Charakter */
    display: block; /* Stellt sicher, dass es eine eigene Zeile nimmt falls nötig */
}

/* Anpassung für das alte .logo img, falls es spezifischer war */
/* .logo img { ... } -> ggf. zu .logo-link img { ... } anpassen, falls es Konflikte gibt */

/* Mobile Anpassungen für Logo Text */
@media (max-width: 768px) {
    .logo-link img {
        max-height: 40px; /* Logo etwas kleiner auf Mobilgeräten */
        margin-right: 10px;
    }

    .therapist-name {
        font-size: 1.1em; /* Name etwas kleiner */
    }

    .therapist-signature {
        font-size: 0.75em; /* Signatur noch kleiner */
        /* Optional: Signatur auf sehr kleinen Bildschirmen ausblenden, wenn Platz knapp wird */
        /* display: none; */
    }
}

@media (max-width: 480px) { /* Sehr kleine Bildschirme */
    .therapist-signature {
        /* Hier könnte man die Signatur ausblenden, falls sie den Header zu voll macht */
        /* display: none; */
        /* Oder nur den Namen anzeigen und Logo verkleinern */
    }
    /* .logo-text-group { margin-left: -5px; } // Beispiel, um es näher ans Logo zu rücken */
}

.main-navigation .nav-list {
    display: flex;
    align-items: center;
}

.main-navigation .nav-list li {
    margin-left: 20px;
}

.main-navigation .nav-list a.nav-link,
.main-navigation .nav-list a {
    color: var(--text-color);
    font-weight: 500;
    padding: 10px 5px;
    position: relative;
    text-decoration: none;
}
.main-navigation .nav-list a.nav-link:hover,
.main-navigation .nav-list a:hover,
.main-navigation .nav-list a.active {
    color: var(--primary-color);
}
.main-navigation .nav-list a.nav-link::after,
.main-navigation .nav-list a::after { /* Unterstrich-Effekt */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}
.main-navigation .nav-list a.nav-link:hover::after,
.main-navigation .nav-list a:hover::after,
.main-navigation .nav-list a.active::after {
    width: 100%;
}


/* Dropdown Menü */
.dropdown {
    position: relative;
}
/*.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 10px 0;
    min-width: 200px; /* Breite des Dropdowns 
    z-index: 1001;
}*/

/*
.dropdown:hover .dropdown-menu,
.dropdown .dropdown-toggle:focus + .dropdown-menu { /* Für Tastaturnavigation (vereinfacht) 
    display: block;
}
.dropdown-menu li {
    margin-left: 0;
}
.dropdown-menu li a {
    display: block;
    padding: 8px 15px;
    color: var(--text-color);
    white-space: nowrap;
}
.dropdown-menu li a:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}
.dropdown-menu li a::after { /* Unterstrich-Effekt im Dropdown entfernen 
    display: none;
}
.dropdown-toggle i { /* Pfeil Icon 
    font-size: 0.8em;
    margin-left: 5px;
}
*/

/* .dropdown-menu {
    display: none; /* Wird durch JS oder :hover/:focus-within gesteuert 
    position: absolute;
    top: calc(100% + 10px); /* Etwas Abstand zum Elternelement 
    left: 50%; /* Zentriert das Dropdown unter dem Parent 
    transform: translateX(-50%); /* Korrigiert die Zentrierung 
    background-color: var(--section-bg-light); /* Passend zum Header/Karten 
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 10px; /* Innenabstand für das gesamte Dropdown 
    min-width: 280px; /* Mindestbreite 
    max-width: 350px; /* Maximale Breite, um zu lange Zeilen zu vermeiden 
    z-index: 1001;
    opacity: 0; /* Für Animation 
    visibility: hidden; /* Für Animation 
    transform-origin: top center; /* Für Skalierungsanimation 
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Entferne translateX(-50%) vom transform hier, wenn es schon im left:50% + translateX(-50%) ist 
    /* Besser: transform: translate(-50%, 10px) scale(0.95); für Ausgangszustand Animation 
    transform: translate(-50%, 0px) scale(0.98); /* Start für Animation, 0px da top: calc(100% + 10px) schon Abstand macht 

}

/* Sichtbarkeit des Dropdowns 
.dropdown:hover .dropdown-menu,
.dropdown .dropdown-toggle:focus + .dropdown-menu, /* Für Tastatur 
.dropdown.open .dropdown-menu { /* Klasse .open wird durch JS gesetzt für Klick/Touch 
    display: block; /* Oder flex/grid, je nach Inhalt 
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0px) scale(1);
}


.dropdown-menu li {
    margin-left: 0; /* Reset, falls geerbt 
    list-style: none; /* Sicherstellen 
}
.dropdown-menu li:not(:last-child) {
    margin-bottom: 8px; /* Abstand zwischen den Items 
}

.dropdown-item {
    display: flex; /* Bild und Inhalt nebeneinander 
    align-items: center; /* Vertikal zentrieren 
    padding: 12px 15px;
    border-radius: 6px;
    color: var(--text-color);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--primary-color);
    color: var(--light-text-color);
    outline: none;
}
/* Wenn das Item einen Hover hat, sollen die Kinder auch die Hover-Farbe annehmen 
.dropdown-item:hover .dropdown-item-title,
.dropdown-item:hover .dropdown-item-desc,
.dropdown-item:focus .dropdown-item-title,
.dropdown-item:focus .dropdown-item-desc {
    color: var(--light-text-color);
}


.dropdown-item-image {
    width: 40px; /* Größe der Vorschaubilder 
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    margin-right: 12px;
    flex-shrink: 0; /* Verhindert, dass das Bild schrumpft 
}

.dropdown-item-content {
    display: flex;
    flex-direction: column;
}

.dropdown-item-title {
    font-family: var(--font-heading);
    font-size: 1em; /* Etwas größer als Beschreibung 
    font-weight: 500;
    color: var(--primary-color); /* Standardfarbe für Titel 
    margin-bottom: 2px;
    transition: color 0.2s ease;
}

.dropdown-item-desc {
    font-size: 0.85em;
    color: var(--text-color); /* Standardfarbe für Beschreibung 
    line-height: 1.3;
    transition: color 0.2s ease;
}

/* Pfeil-Icon im Hauptmenü-Link (falls noch nicht global gestylt) 
.dropdown-toggle i.fa-chevron-down {
    font-size: 0.8em;
    margin-left: 5px;
    transition: transform 0.3s ease;
}
.dropdown:hover .dropdown-toggle i.fa-chevron-down,
.dropdown.open .dropdown-toggle i.fa-chevron-down {
    transform: rotate(180deg); /* Pfeil dreht sich beim Öffnen 
}


/* Mobile Anpassungen für Dropdown im Hamburger Menü 
@media (max-width: 768px) {
    .main-navigation.nav-open .dropdown-menu { /* Wenn das mobile Menü offen ist 
        position: static; /* Nicht mehr absolut positioniert 
        box-shadow: none;
        border: none; /* Kein eigener Rahmen im mobilen Menü 
        border-top: 1px solid var(--border-color); /* Trennlinie oben 
        border-radius: 0;
        background-color: transparent; /* Hintergrund vom mobilen Menü erben oder leicht absetzen 
        /* background-color: rgba(0,0,0,0.03); /* Sehr dezenter Hintergrund 
        width: 100%;
        padding: 0; /* Reset, da Items eigenes Padding haben 
        opacity: 1; /* Keine Animation hier 
        visibility: visible;
        transform: none; /* Keine Animation hier 
        margin-top: 5px; /* Kleiner Abstand zum Parent-Link 
    }

    .main-navigation.nav-open .dropdown-menu li {
        /* Kein margin-bottom, da Trennlinien zwischen Items oft besser sind 
    }
    
    .main-navigation.nav-open .dropdown-item {
        padding: 12px 20px 12px 35px; /* Mehr Einrückung für Unterpunkte 
        /* Hintergrund bei Hover/Fokus anpassen für mobile Menüs 
    }
    .main-navigation.nav-open .dropdown-item:hover,
    .main-navigation.nav-open .dropdown-item:focus {
        background-color: var(--secondary-color); /* Passend zum Rest des mobilen Menüs 
    }

    .main-navigation.nav-open .dropdown-item-image {
        /* Bilder im mobilen Dropdown ausblenden, um Platz zu sparen 
        display: none; 
    }
    
    .main-navigation.nav-open .dropdown-item-title {
       /* Ggf. Schriftgröße anpassen 
    }
    .main-navigation.nav-open .dropdown-item-desc {
        /* Ggf. Beschreibung ausblenden, falls zu viel Text für mobil 
        /* display: none; 
    }

    /* Pfeil-Icon im mobilen Menü 
    .main-navigation.nav-open .dropdown-toggle i.fa-chevron-down {
        float: right; /* Positioniert den Pfeil rechts 
        margin-top: 4px; /* Vertikale Ausrichtung anpassen 
        /* Drehung bei .open .dropdown-toggle wird durch JS gehandhabt oder CSS .open 
    }
    .main-navigation.nav-open .dropdown.open .dropdown-toggle i.fa-chevron-down {
        transform: rotate(180deg);
    }
} */

.dropdown-menu.megamenu-style {
    display: none; /* Initial versteckt, JS/Hover steuert Sichtbarkeit */
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%); /* Zentriert das Dropdown */
    
    width: 550px; /* Breite anpassen, um Platz für Links und Bild zu haben */
    /* min-width: auto; /* Evtl. min-width entfernen oder anpassen */
    max-width: 90vw; /* Verhindert Überlaufen auf kleineren Desktops */
    
    background-color: var(--highlight-background-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border-radius: 8px;
    padding: 0; /* Kein globales Padding, da Spalten es handhaben */
    
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform-origin: top center;
    /* transform: translate(-50%, 10px) scale(0.95); /* Ausgangszustand Animation */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate(-50%, 0px) scale(0.98); /* Start für Animation */

    display: flex; /* Hauptänderung: Flexbox für Spaltenlayout */
}

/* Sichtbarkeit des Dropdowns (wie vorher, aber .megamenu-style beachten) */
.dropdown:hover .dropdown-menu.megamenu-style,
.dropdown .dropdown-toggle:focus + .dropdown-menu.megamenu-style,
.dropdown.open .dropdown-menu.megamenu-style {
    /* display: flex; /* Ist schon oben gesetzt, wird hier nur für Sichtbarkeit relevant */
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0px) scale(1);
}

.megamenu-links {
    flex: 0 0 55%; /* Linke Spalte nimmt ca. 55% der Breite ein */
    padding: 20px;
    border-right: 1px solid var(--border-color); /* Trennlinie */
    max-height: 300px; /* Höhe begrenzen und scrollbar machen, falls viele Links */
    overflow-y: auto;
}

.angebot-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.angebot-links-list li:not(:last-child) {
    margin-bottom: 5px;
}

.megamenu-links .dropdown-item { /* Erbt von den allgemeinen .dropdown-item Styles */
    display: block; /* Nicht mehr flex, da Bild jetzt separat ist */
    padding: 10px 12px; /* Ggf. Padding anpassen */
    /* .dropdown-item-image wird hier nicht mehr direkt verwendet */
}
/* .dropdown-item-content, .dropdown-item-title, .dropdown-item-desc Styles bleiben wie zuvor */

.dropdown-item-content {
    display: flex;
    flex-direction: column;
}

.dropdown-item-title {
    font-family: var(--font-heading);
    font-size: 1em; /* Etwas größer als Beschreibung */
    font-weight: 500;
    color: var(--primary-color); /* Standardfarbe für Titel */
    margin-bottom: 2px;
    transition: color 0.2s ease;
}

.dropdown-item-desc {
    font-size: 0.85em;
    color: var(--text-color); /* Standardfarbe für Beschreibung */
    line-height: 1.3;
    transition: color 0.2s ease;
}

.megamenu-image-preview {
    flex: 0 0 45%; /* Rechte Spalte für das Bild */
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dropdownPreviewImage {
    max-width: 100%;
    max-height: 200px; /* Höhe des Bildes begrenzen, anpassen an Kartengröße */
    height: auto;
    border-radius: 6px;
    object-fit: cover; /* Stellt sicher, dass das Bild gut aussieht */
    transition: opacity 0.3s ease; /* Sanfter Übergang beim Bildwechsel */
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .dropdown-menu.megamenu-style {
        /* Auf Mobilgeräten wird das Megamenü wieder zu einem normalen Dropdown */
        width: 100%; /* Volle Breite im mobilen Menü */
        display: none; /* Initial versteckt, .open steuert es */
        flex-direction: column; /* Spalten untereinander, aber wir blenden Bild aus */
        position: static;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--border-color);
        border-radius: 0;
        background-color: transparent;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        margin-top: 5px;
    }

    /* Sichtbarkeit im mobilen Menü, wenn .nav-open und .dropdown.open */
    .main-navigation.nav-open .dropdown.open .dropdown-menu.megamenu-style {
        display: block; /* Oder flex mit column, je nachdem */
        /* Stelle sicher, dass Desktop-Positionierungen hier explizit zurückgesetzt/überschrieben werden, falls nötig: */
        left: auto; /* oder 0 */
        transform: none; /* Wichtig, um Desktop-Transforms zu entfernen */
        /* width: 100%; ist schon da */
        /* position: static; ist schon da */
        /* ... andere mobile Styles ... */
    }
    
    .megamenu-links {
        flex-basis: auto; /* Nimmt volle Breite ein */
        border-right: none;
        max-height: none; /* Keine Scrollbegrenzung im mobilen Menü */
        overflow-y: visible;
        padding: 0; /* Reset, da Items Padding haben */
    }

    .megamenu-links .dropdown-item {
        padding: 12px 20px 12px 35px; /* Einrückung wie bei normalen mobilen Dropdowns */
    }
    /* .dropdown-item-content, .dropdown-item-title, .dropdown-item-desc Styles erben oder anpassen */

    .megamenu-image-preview {
        display: none; /* Bildbereich auf Mobilgeräten komplett ausblenden */
    }
}

/* CTA Button Basis */
.cta-button {
    background-color: var(--accent-color);
    color: var(--light-text-color) !important; /* Wichtig um Link-Farbe zu überschreiben */
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none !important; /* Wichtig um Link-Unterstreichung zu überschreiben */
    font-weight: bold;
    transition: background-color 0.3s ease;
    display: inline-block; /* Damit Padding wirkt */
}

.cta-button:hover {
    background-color: var(--hover-darken-accent);
    color: var(--light-text-color) !important;
}

.header-cta {
    margin-left: 25px; /* Abstand zur Navigation */
}

.menu-toggle {
    display: none; /* Standardmäßig versteckt auf Desktop */
    background: none;
    border: none;
    font-size: 1.8em;
    color: var(--primary-color);
    cursor: pointer;
}

/* Footer Styling */
.site-footer-main {
    background-color: #333; /* Dunkler Footer */
    color: #ccc;
    padding: 40px 0 0; /* Oben mehr Padding, unten weniger, da .footer-bottom kommt */
    font-size: 0.9em;
}
.site-footer-main a {
    color: #ddd;
}
.site-footer-main a:hover {
    color: #fff;
}
.site-footer-main h4 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 1.2em;
}
.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
    margin-bottom: 30px;
}
.footer-column {
    flex: 1;
    min-width: 200px; /* Mindestbreite für Spalten */
}
.footer-column ul li {
    margin-bottom: 8px;
}
.cta-button-footer {
    background-color: var(--accent-color);
    color: var(--light-text-color) !important;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none !important;
    font-weight: bold;
    display: inline-block;
    margin-top: 10px;
}
.cta-button-footer:hover {
    background-color: var(--hover-darken-accent);
}
.footer-bottom {
    border-top: 1px solid #555;
    padding: 20px 0;
    font-size: 0.85em;
}

/* --- Globales Scrollbar Styling (WebKit-Browser) --- */

/* Gilt für alle Scrollbalken auf der Seite */
::-webkit-scrollbar {
    width: 10px;  /* Breite des vertikalen Scrollbalkens */
    height: 10px; /* Höhe des horizontalen Scrollbalkens */
}

/* Der "Track" (die Leiste, auf der der Scrollbalken läuft) */
::-webkit-scrollbar-track {
    background: var(--secondary-color); /* Hintergrund der Leiste, z.B. dein helles Beige */
    border-radius: 5px; /* Abgerundete Ecken für den Track */
}

/* Der "Thumb" (der eigentliche Scrollbalken-Griff, den man zieht) */
::-webkit-scrollbar-thumb {
    background-color: var(--primary-color); /* Deine Hauptfarbe (Blau) */
    border-radius: 5px; /* Abgerundete Ecken für den Griff */
    border: 2px solid var(--secondary-color); /* Ein kleiner Rand in der Track-Farbe, erzeugt einen "inset"-Effekt */
}

/* Thumb beim Hovern (optional) */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--hover-darken-primary); /* Deine abgedunkelte Hauptfarbe */
}

/* Die Ecken, wo sich vertikale und horizontale Scrollbalken treffen (selten sichtbar) */
::-webkit-scrollbar-corner {
    background: var(--secondary-color);
}


/* --- Spezifisches Styling für die Scrollbar im Megamenü-Dropdown --- */
/* Wenn du sie anders als die globalen Scrollbalken stylen willst */

.megamenu-links::-webkit-scrollbar {
    width: 8px; /* Etwas schmaler für das Dropdown */
}

.megamenu-links::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05); /* Sehr dezenter Hintergrund im Dropdown */
    /* Oder var(--highlight-background-color) wenn es zum Menü passt */
    border-radius: 4px;
}

.megamenu-links::-webkit-scrollbar-thumb {
    background-color: var(--accent-color); /* Deine Akzentfarbe (Terrakotta) */
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.05); /* Oder border: none; */
}

.megamenu-links::-webkit-scrollbar-thumb:hover {
    background-color: var(--hover-darken-accent); /* Abgedunkelte Akzentfarbe */
}

/* --- Globales Scrollbar Styling (Firefox) --- */

/* Gilt für Elemente, die scrollen, z.B. body oder spezifische Divs */
/* Für den gesamten Viewport (wenn body scrollt): */
html {
    scrollbar-width: thin; /* Optionen: 'auto', 'thin', 'none' */
    scrollbar-color: var(--primary-color) var(--secondary-color); /* Farbe des Thumbs, Farbe des Tracks */
}

/* Für spezifische scrollbare Elemente, wie dein Megamenü */
.megamenu-links {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) rgba(0,0,0,0.05); /* Thumb-Farbe, Track-Farbe */
    /* Wenn du hier 'auto' willst, um die html-Einstellung zu erben, oder 'none' zum Ausblenden: */
    /* scrollbar-width: auto; */
}


/* Mobile Styles / Responsive Design */
@media (max-width: 992px) { /* Tablet und darunter */

}


@media (max-width: 768px) { /* Mobile Geräte */
    body {
      padding-top: calc(var(--header-height) - 10px); /* Header ist etwas kleiner */
    }
    .site-header {
        height: calc(var(--header-height) - 10px);
    }
    .header-content-wrapper {
        position: relative; /* Wichtig für absolute Positionierung des Menüs */
    }

    .menu-toggle {
        display: block; /* Hamburger-Icon anzeigen */
        order: 3; /* Nach rechts verschieben */
        margin-left: 15px;
    }

    .main-navigation {
        order: 2; /* Zwischen Logo und Button */
    }

    .main-navigation .nav-list {
        display: none; /* Menü standardmäßig versteckt */
        flex-direction: column;
        position: absolute;
        top: calc(var(--header-height) - 10px - var(--sticky-offset)); /* Unter dem Header */
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        padding: 10px 0;
        z-index: 999; /* Unter dem Header, aber über dem Inhalt */
    }

    .main-navigation.nav-open .nav-list {
        display: flex; /* Menü anzeigen, wenn Klasse gesetzt */
    }

    .main-navigation .nav-list li {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    .main-navigation .nav-list a.nav-link,
    .main-navigation .nav-list a {
        display: block;
        padding: 12px 20px;
        border-bottom: 1px solid var(--border-color);
    }
    .main-navigation .nav-list li:last-child a {
        border-bottom: none;
    }
    .main-navigation .nav-list a.nav-link::after, /* Unterstrich-Effekt mobil entfernen */
    .main-navigation .nav-list a::after {
        display:none;
    }
    .dropdown .dropdown-toggle i { /* Pfeil Icon etwas anpassen für mobile Ansicht */
       float: right;
       margin-top: 4px;
    }
    .dropdown-menu { /* Dropdown im mobilen Menü */
        position: static; /* Nicht mehr absolut */
        box-shadow: none;
        border-top: 1px solid var(--border-color);
        border-radius: 0;
        background-color: #f9f9f9; /* Leicht anderer Hintergrund zur Abgrenzung */
        width: 100%;
        padding-left: 20px; /* Einrücken der Unterpunkte */
    }
    .dropdown:hover .dropdown-menu {
        /* Hover-Verhalten für Desktop beibehalten, mobil via JS oder :focus-within */
        /* Für Einfachheit: Dropdown wird bei Klick auf .dropdown-toggle per JS geöffnet */
    }


    .header-cta {
        font-size: 0.85em; /* Button etwas kleiner */
        padding: 8px 12px;
        /* Optional: Header CTA auf Mobilgeräten ausblenden, wenn zu voll
           display: none;
        */
    }
    .logo img {
        max-height: 40px;
    }
    .logo-text {
        font-size: 1.5em;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    .footer-column {
        margin-bottom: 20px;
    }
    .footer-column:last-child {
        margin-bottom: 0;
    }
}