/* Grundlegende Variablen sind jetzt primär in <style> in layout.html für leichtere Anpassung via CSS-Variablen */

html, body {
    height: 100%; /* Wichtig für 100vh und Snapping */
    margin: 0; /* Standard-Margin entfernen */
    padding: 0; /* Standard-Padding entfernen */
    overflow-x: hidden; /* Verhindert horizontale Scrollbars durch Spiegelung */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    color: var(--main-text-color); /* Globale Textfarbe */
    /* background-color wird von den Sektionen bestimmt */

    /* Scroll Snapping */
    scroll-snap-type: y mandatory;
    overflow-y: scroll; /* Ermöglicht vertikales Scrolling und Snapping */
    opacity: 0; /* Initially transparent */
    transition: opacity 0.3s ease-in-out;
}

/* Scroll Snapping Rules */
body {
    scroll-snap-type: none; /* Default: kein Scroll-Snapping für alle Seiten */
    /* overflow-y: scroll; */ /* Should be present if scroll-snap or general scrolling is desired */
    transition: opacity 0.3s ease-in-out; /* General transition for opacity changes */
}

body.is-landing-page {
    scroll-snap-type: y mandatory;
    overflow-y: scroll; /* Ensure scrolling is enabled for snap */
    opacity: 1; /* Landingpage ist sofort sichtbar und nicht transparent */
}

/* Default state for pages that will have transitions */
body:not(.is-landing-page) {
    opacity: 1; /* Sichtbar standardmäßig - kein fade-in erforderlich */
}

/* States for fade effects on non-landing pages */
body.fade-in-page:not(.is-landing-page) {
    opacity: 1;
}

body.fade-out-page:not(.is-landing-page) {
    opacity: 0;
}

/* Navbar Anpassungen */
#mainNavbar {
    background-color: var(--main-navbar-bg) !important; /* Solide Farbe via CSS Variable */
    transition: background-color 0.3s ease;
    position: sticky; /* Bleibt oben beim Scrollen */
    top: 0;
    z-index: 1020; /* Über den Sektionen und Divinern */
}

/* Hero Section Anpassung */
.hero-section {
    min-height: calc(100vh - var(--navbar-height)); /* Hero füllt den Raum unter der Navbar */
    display: flex; /* Für vertikale Zentrierung des Inhalts */
    flex-direction: column; /* Falls mehrere Elemente im Hero sind */
    align-items: center; /* Horizontale Zentrierung */
    justify-content: center; /* Vertikale Zentrierung */
    position: relative;
    overflow: hidden; /* Wichtig, damit absolute positioned SVGs innerhalb bleiben */
    scroll-snap-align: start; /* Am Anfang der Sektion einrasten */

    /* Hintergrundfarben werden direkt im <header> Tag via style gesetzt für komplexere Verläufe,
       oder hier, falls es eine einfache Farbe sein soll, die sich mit dem Theme ändert:
       background-color: var(--section-bg-even); z.B.
    */
}
/* Beispiel für einen festen Farbverlauf, der sich im Theme nicht ändert,
   falls das gewünscht ist. Andernfalls Farben via CSS-Variablen für Theme-Anpassung */
[data-bs-theme="light"] .hero-section {
     background: linear-gradient(135deg, #007abd 0%, #f49600 100%);
     color: #333;
}
[data-bs-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #007abd 0%, #f49600 100%);
    color: #f8f9fa;
}

/* Remove direct background from booking-page container */
[data-bs-theme="dark"] .booking-page {
    /* background: linear-gradient(135deg, #23074d 0%, #000000 70%); */ /* Removed */
    color: #f8f9fa; /* Ensures text directly in this container is light */
}

/* Apply a lighter hero gradient to the main page cards within booking pages for dark theme */
[data-bs-theme="dark"] .booking-page > .row > [class*="col-"] > .card {
    background: linear-gradient(135deg, #3c1f8c 0%, #2c2c2c 70%); /* Lighter gradient */
    /* color: #f8f9fa; */ /* Text color should be inherited or set by card-body if needed */
}

/* Ensure nested cards (like selection cards in step2, accordion cards in step3)
   within booking pages revert to their standard card background in dark theme */
[data-bs-theme="dark"] .booking-page > .row > [class*="col-"] > .card .card {
    background: var(--bs-card-bg); /* Revert to standard Bootstrap card background */
}

/* SVG Divider for Footer Top */
.bottom-footer-wave {
    position: relative; /* Adjust if it should be absolute to a section */
    bottom: 0; /* Align to bottom of its container if relative, or section if absolute */
    left: 0;
    width: 100%;
    line-height: 0; /* Prevent extra space */
    z-index: 5; /* Ensure it's above content below it, but below footer if overlapping */
}

.bottom-footer-wave svg.footer-top-svg {
    display: block;
    width: 100%;
    height: 100%; /* SVG soll die volle Höhe des Wrappers einnehmen */
    /* No transform needed if the SVG is designed to point upwards */
}

.bottom-footer-wave svg.footer-top-svg path {
    fill: var(--main-footer-bg); /* Fill with the footer background color */
}

/* Adjust footer padding if SVG is outside and above */
.footer-custom {
    /* padding-top: 0; */ /* Remove top padding if SVG acts as visual top */
    position: relative; /* For z-index stacking if needed */
    z-index: 4; /* Below the SVG wave */
}


.hero-section .container { /* Stellt sicher, dass der Container innerhalb des Flex-Layouts ist */
    position: relative; /* Für z-index Stapelkontext, falls nötig */
    z-index: 2;
}

.hero-section h1 {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Allgemeine Sektionsstile */
.section {
    min-height: 100vh; /* Jede Sektion füllt die volle Viewport-Höhe */
    padding: 80px 0; /* Etwas mehr Padding */
    position: relative; /* Wichtig für absolute positioned SVGs */
    overflow: hidden; /* Wichtig, damit absolute positioned SVGs innerhalb bleiben */
    color: var(--main-text-color);
    scroll-snap-align: start; /* Am Anfang der Sektion einrasten */
    display: flex; /* Inhalt zentrieren */
    flex-direction: column; /* Inhalt zentrieren */
    justify-content: center; /* Vertikale Zentrierung des Inhalts */
}

.section-odd {
    background-color: var(--section-bg-odd);
}
.section-even {
    background-color: var(--section-bg-even);
}

/* SVG Divider Basisstile - nun absolut positioniert INNERHALB der Sektion */
.wave-divider-wrapper {
    position: absolute;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 1; /* Unter dem Sektionsinhalt */
    /* Höhe wird in den HTML-Partials festgelegt */
}

.wave-divider-wrapper.bottom {
    bottom: 0;
}

.wave-divider-wrapper.top {
    top: 0;
    /* Transformation wird direkt auf das SVG angewendet */
}

.wave-divider-wrapper svg {
    display: block;
    width: 100%;
    height: 100%; /* SVG soll die volle Höhe des Wrappers einnehmen */
    position: relative; /* Relative innerhalb des absoluten Wrappers kann nützlich sein */
    /* Standard: Nur horizontale Spiegelung für untere Wellen, die NICHT gedreht sind */
    transform: scaleX(-1);
    transform-origin: 50% 50%; /* Transformationen von der Mitte aus */
}

/* Transformation für obere (gedrehte) Wellen */
.wave-divider-wrapper.top svg {
    transform: rotate(180deg) scaleX(-1); /* Drehen und dann horizontal spiegeln */
}

/* SPEZIELLE REGEL: SVG im unteren Divider der Hero-Sektion drehen UND spiegeln */
#hero .wave-divider-wrapper.bottom svg {
    transform: rotate(180deg) scaleX(-1); /* Drehen und dann horizontal spiegeln */
}

/* SPEZIELLE REGEL: SVG im unteren Divider der Services-Sektion drehen UND spiegeln */
#services .wave-divider-wrapper.bottom svg {
    transform: rotate(180deg) scaleX(-1); /* Drehen und dann horizontal spiegeln */
}

/* SPEZIELLE REGEL: SVG im unteren Divider der Addiction Support-Sektion drehen UND spiegeln */
#addiction-support .wave-divider-wrapper.bottom svg {
    transform: rotate(180deg) scaleX(-1); /* Drehen und dann horizontal spiegeln */
}

/* SPEZIELLE REGEL: SVG im unteren Divider der Contact-Sektion spiegeln */
#contact-cta .wave-divider-wrapper.top svg {
    transform: scaleX(-1); /* Horizontal spiegeln */
}


/* Füllfarben der SVGs - jetzt basierend auf der Farbe der NACHFOLGENDEN Sektion für Bottom-Divider,
   oder der VORHERIGEN Sektion für Top-Divider */
.wave-divider-wrapper.fill-odd svg path {
    fill: var(--section-bg-odd); /* Füllt mit der "ungeraden" Sektionsfarbe */
}
.wave-divider-wrapper.fill-even svg path {
    fill: var(--section-bg-even); /* Füllt mit der "geraden" Sektionsfarbe */
}


/* Card Anpassungen */
.card {
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-card-bg);
}

.card-title i {
    font-size: 1.5rem;
}

.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: var(--bs-light);
}

/* Contact CTA Anpassungen */
#contact-cta {
    background-color: var(--contact-bg) !important;
    color: var(--contact-text) !important;
}
#contact-cta a {
    color: var(--contact-text) !important; /* Sicherstellen, dass Links im CTA die Textfarbe haben */
    text-decoration: underline;
}
#contact-cta a:hover {
     color: var(--contact-text) !important;
     opacity: 0.8;
}


/* Footer Anpassungen */
.footer-custom {
    background-color: var(--main-footer-bg);
    color: var(--main-footer-text);
    scroll-snap-align: start; /* Am Anfang der Sektion einrasten */
    scroll-snap-type: y mandatory; /* Deaktiviert Snapping für den Footer */
}
.footer-custom .text-warning {
    color: #f49600 !important;
}
.footer-link, .social-icon {
    color: var(--main-footer-link) !important;
    text-decoration: none;
}
.footer-link:hover, .social-icon:hover {
    color: #f49600 !important;
    text-decoration: underline !important;
}
.footer-link-bold strong {
    color: #f49600 !important;
}
.hr-custom {
    border-top: 1px solid rgba(255,255,255,0.2); /* Muss ggf. auch an Theme angepasst werden */
}
[data-bs-theme="dark"] .hr-custom {
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Sicherstellen, dass der Inhalt im Flex-Container der Sektionen nicht überläuft */
.section .container {
    flex-grow: 1; /* Container darf wachsen */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Inhalt im Container vertikal zentrieren */
    /* Optional: min-height: 0; or overflow: auto; if content overflows */
}

/* Responsive Anpassungen für Mobilgeräte und Tablets */
@media (max-width: 768px) {
    body, body.is-landing-page {
        scroll-snap-type: none; /* Scroll-Snapping auf kleinen Geräten deaktivieren */
        scroll-behavior: auto; /* Scrollverhalten auf auto setzen */
        overflow-y: auto; /* Scrollen auf Mobilgeräten aktivieren */
        opacity: 1; /* Landingpage ist sofort sichtbar und nicht transparent */
        scroll-snap-align: none; /* Deaktiviert Snapping */
    }

    .section {
        min-height: auto; /* Höhe an Inhalt anpassen */
        padding: 50px 15px; /* Padding für kleinere Bildschirme reduzieren */
    }

    .hero-section {
        min-height: auto; /* Höhe an Inhalt anpassen, statt 100vh - navbar */
        padding: 60px 15px; /* Angepasstes Padding für Hero auf Mobilgeräten */
    }

    .wave-divider-wrapper {
        max-height: 75px; /* Maximale Höhe der SVG-Divider begrenzen */
    }

    /* Ggf. Schriftgrößen anpassen, falls Text immer noch zu groß ist */
    /*
    h1, .h1 {
        font-size: 2rem;
    }
    h2, .h2 {
        font-size: 1.75rem;
    }
    p, .p {
        font-size: 0.9rem;
    }
    */
}

.btn-primary {
    background-color: #007abd;
    border-color: #f49600;
    color: #ffffff;
}

.card-title i, i {
    color: #007abd !important;
}

.icon-circle i {
    color: #f49600 !important;/
}
.icon-circle {
    background-color: #007abd !important;
}

.btn-warning {
    background-color: #f49600 !important;
    border-color: #f49600 !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #005f8c !important;
    border-color: #f49600 !important;
}

.btn-warning:hover {
    background-color: #c57a00 !important;
    border-color: #007abd !important;
    color: #ffffff !important;
}

.orange {
    color: #f49600 !important;
}

.btn-outline-warning:hover {
    background-color: #f49600 !important;
}

/* Icons sollen auf allen Seiten (außer Landingpage) weiß sein */
body:not(.is-landing-page) i[class*="bi-"],
body:not(.is-landing-page) .bi {
    color: white !important;
}