/* ---
MS-BEAUTY LOUNGE
Design Relaunch 2025 - Premium
--- */

/* ======================================================= */
/* === GRUNDEINSTELLUNGEN & VARIABLEN === */
/* ======================================================= */

:root {
    --color-primary: #A16653; /* Terrakotta / Erdiger Ton */
    --color-primary-dark: #8A5645; /* Dunkler für Hover-Effekte */
    --color-primary-gradient: linear-gradient(45deg, #a16653, #b57d6b);
    --color-secondary: #F8F5F2; /* Heller Creme-Ton */
    --color-text: #343a40; /* Dunkles Grau für Text */
    --color-text-light: #555; /* Etwas heller für weniger wichtigen Text */
    --color-white: #FFFFFF;
    --color-border: #e0d9d3;
    --color-error: #d9534f;
    /* NEU: Farbe für die Highlight-Box */
    --color-highlight-bg: #fffaf0; /* Heller Pfirsich/Creme-Ton */
    --color-highlight-border: #fde68a; /* Hellgelb/Gold */

    --font-body: 'Montserrat', sans-serif;
    --font-heading: 'Bodoni Moda', serif;
    --border-radius: 12px;
    --shadow-soft: 0 5px 15px rgba(0,0,0,0.05);
    --shadow-medium: 0 8px 25px rgba(0,0,0,0.08);
    --transition-fast: all 0.2s ease-out;
    --transition-medium: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Schriftarten lokal einbinden (DSGVO-konform) --- */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400;
  src: url('fonts/montserrat-v30-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 600;
  src: url('fonts/montserrat-v30-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700;
  src: url('fonts/montserrat-v30-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda'; font-style: normal; font-weight: 700;
  src: url('fonts/bodoni-moda-v27-latin-700.woff2') format('woff2');
}

/* --- Basis-Reset & Globale Stile --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    margin: 0;
    line-height: 1.65;
    color: var(--color-text);
    background-color: var(--color-secondary);
    background: linear-gradient(180deg, #fdfaf7 0%, var(--color-secondary) 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word; /* Global: Lange Wörter umbrechen */
    word-break: break-word; /* Erweitert: Schrumpft/umbricht Text */
    hyphens: auto; /* Silbentrennung für Deutsch */
}

/* --- Container & Layout --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 80px 0; }
.page-content { display: flex; flex-direction: column; min-height: 100vh; }
main { flex-grow: 1; overflow-x: hidden; }

/* ======================================================= */
/* === TYPOGRAPHIE === */
/* ======================================================= */

h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--color-text);
    line-height: 1.3;
    font-weight: 700;
}
.page-title {
    text-align: center;
    /* MODERNISIERUNG (IV. A): Ersetzt statische Media Queries durch eine flüssige clamp()-Funktion */
    font-size: clamp(1.8rem, 1.2rem + 2.72vw, 3rem);
    margin-bottom: 15px;
}
.page-intro { text-align: center; max-width: 750px; margin: 0 auto 30px auto; font-size: 1.1rem; color: var(--color-text-light); }
.section-title {
    text-align: center;
    /* MODERNISIERUNG (IV. A): Ersetzt statische Regeln durch eine flüssige clamp()-Funktion (basierend auf Audit-Werten) */
    font-size: clamp(1.8rem, 1.28rem + 2.4vw, 2.8rem);
    color: var(--color-text);
    margin-bottom: 60px; position: relative; padding-bottom: 20px;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: var(--color-primary-gradient);
    border-radius: 2px;
}
.text-link { color: var(--color-primary); font-weight: 600; text-decoration: none; transition: var(--transition-fast); border-bottom: 2px solid transparent;}
.text-link:hover { border-bottom-color: var(--color-primary); }

/* --- Textseiten (Impressum, Datenschutz, AGB) --- */
/* NEUE REGELN: Sorgt für korrekten Zeilenumbruch bei langen URLs (z.B. Datenschutz) */
.text-page {
    /* MODERNISIERUNG (V. A): Veraltetes 'word-break' ersetzt durch 'overflow-wrap' */
    overflow-wrap: break-word; /* Lange URLs umbrechen */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; /* Silbentrennung für bessere Lesbarkeit */

    /* KORREKTUR:
      Auf diesen Seiten (Impressum, AGB, Datenschutz) ist die .container-Klasse
      auf demselben Element wie die .section-Klasse. Die .section-Klasse 
      überschreibt das horizontale Padding von .container (setzt es auf 0).
      Diese Regel fügt das horizontale Padding (vom .container) wieder hinzu.
      
      HINWEIS: Laut Audit (V. C) sollte dies durch eine HTML-Änderung behoben
      und dieser CSS-Patch entfernt werden. Da nur CSS bearbeitet wird, bleibt
      der Patch vorerst erhalten, um das Layout nicht zu zerstören.
    */
    padding-left: 20px;
    padding-right: 20px;
}
.text-page h3 { font-size: 1.6rem; margin-top: 40px; border-bottom: 2px solid var(--color-primary); padding-bottom: 10px; display: inline-block; }
.text-page p { line-height: 1.8; word-break: break-word; } /* FIX: Besserer Umbruch für Text */
.text-page ul { padding-left: 20px; } /* Etwas Einzug für Listen */
.text-page ul li { margin-bottom: 10px; word-break: break-word; } /* Abstand zwischen Listenpunkten und Umbruch */
.text-page a { word-break: break-all; } /* FIX: URLs brechen auf kleinen Screens */

/* ======================================================= */
/* === BUTTONS === */
/* ======================================================= */

.button-primary, .button-secondary {
    font-family: 'Montserrat', sans-serif;
    padding: 15px 35px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition-medium);
    display: inline-block;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
}

.button-primary {
    background: var(--color-primary-gradient);
    color: var(--color-white);
}
.button-primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 25px rgba(161, 102, 83, 0.4);
}

.button-secondary {
    background-color: transparent;
    border: 2px solid var(--color-border);
    color: var(--color-text);
    padding: 13px 28px; /* Slightly smaller padding */
}
.button-secondary:hover {
    background-color: var(--color-white);
    border-color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

/* ======================================================= */
/* === HEADER === */
/* ======================================================= */

/*
    HINWEIS (Audit III. B):
    Die folgende Sektion (Header & Responsive Anpassungen) enthält die
    im Audit als "brittle" (instabil) identifizierte 'position: fixed'-Logik
    für mobile Geräte.
    
    Die empfohlene, robuste Lösung (ein Flexbox-Container) erfordert eine
    ÄNDERUNG DER HTML-STRUKTUR (Einführung von '.mobile-ui-cluster').
    
    Da hier nur die CSS-Datei bearbeitet wird, bleiben die alten Regeln
    unverändert, um die Funktionalität der *aktuellen* HTML-Struktur
    nicht zu beeinträchtigen. Für die "Premium 2025"-Lösung muss
    das HTML laut Audit angepasst und diese CSS-Regeln umgeschrieben werden.
*/

header {
    background-color: rgba(248, 245, 242, 0.85);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    position: sticky; /* Das ist korrekt */
    top: 0;           /* Das MUSS bleiben, sonst klebt es nicht */
    z-index: 1000;
    border-bottom: 1px solid var(--color-border);
}

/* Hauptbereich des Headers */
.header-main {
    padding: 1rem 0; /* FESTES Padding, ändert sich nicht mehr */
    /* KEINE 'transition: padding' mehr! */
}

/* Container im Header (Bleibt wie es war) */
.header-main .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Logo --- */
.logo {
    flex-shrink: 0; /* Verhindert, dass das Logo schrumpft */
    margin-right: 20px;
}
.logo img {
    height: 60px; /* Standard-Höhe */
    width: auto;
    display: block;
}

/* --- Hauptnavigation (Desktop) --- */
nav {
    flex-grow: 1; /* Nimmt verfügbaren Platz in der Mitte ein */
    display: block; /* Standard: Sichtbar, aber Inhalt wird mobil gesteuert */
}
.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Standard: Links nebeneinander */
    justify-content: center; /* Zentriert die Links */
}
.nav-links li {
    margin: 0 20px; /* Abstand zwischen den Links */
}
.nav-links a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    transition: color 0.3s, border-bottom-color 0.3s;
    position: relative;
    padding: 5px 0;
    font-family: 'Montserrat', sans-serif;
}
/* Unterstrich-Effekt */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0; /* Startet unsichtbar */
    height: 2px;
    background: var(--color-primary-gradient);
    transition: width 0.3s;
    border-radius: 1px;
}
.nav-links a:hover::after,
.nav-links a.active-link::after {
    width: 100%; /* Wird sichtbar bei Hover oder Aktiv */
}
.nav-links a.active-link {
    color: var(--color-primary); /* Aktiven Link hervorheben */
}

/* --- Header Aktionen (Buttons rechts) --- */
.header-actions {
    display: flex;
    align-items: center; /* Vertikal zentrieren */
    gap: 15px; /* Abstand zwischen Buttons */
    margin-left: auto; /* Schiebt die Gruppe nach rechts */
}
/* "Termin vereinbaren"-Button im Header */
.header-button {
    /* Nimmt Stile von .button-primary an */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px; /* Standard Desktop */
    font-size: 1rem;
    white-space: nowrap;
    flex-shrink: 0; /* Verhindert Schrumpfen */
}

/* --- Burger-Menü (Mobil) --- */
.burger-menu {
    display: none; /* Auf Desktop versteckt */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--color-primary); /* Farbe der Striche */
    z-index: 1001; /* Über mobilen Buttons */
}
.burger-menu svg {
    display: block; /* Stellt sicher, dass SVG korrekt angezeigt wird */
    width: 30px;
    height: 30px;
}

/* ======================================================= */
/* === ZURÜCK-NACH-OBEN BUTTONS === */
/* ======================================================= */

/* --- Generelle Stile für beide Buttons --- */
.back-to-top-button {
    display: none; /* Standardmäßig versteckt */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s, transform 0.4s, background-color 0.3s, box-shadow 0.3s, top 0.3s ease, right 0.3s ease;
    text-decoration: none;
    cursor: pointer;
    z-index: 1000;
    border-radius: 50px;
    font-weight: 600;
    color: var(--color-white);
    background-color: var(--color-primary); /* Gleiche Grundfarbe */
}
.back-to-top-button.show {
    opacity: 1;
    visibility: visible;
}
.back-to-top-button:hover {
    background-color: var(--color-primary-dark);
    box-shadow: var(--shadow-soft);
}

/* --- Mobile Icon-Button (#mobileBackToTopBtn) --- */
#mobileBackToTopBtn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%) scale(0.8); /* Vertikal zentrieren & Start Animation */
    right: 84px; /* Position rechts (Burger + Abstand) */
    width: 40px;
    height: 40px;
    display: flex; /* Für Icon-Zentrierung (wird von .show überschrieben, wenn nötig) */
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-soft);
    border: none;
    font-size: 0; /* Versteckt Text */
    overflow: hidden;
}
#mobileBackToTopBtn.show {
    transform: translateY(-50%) scale(1); /* Endposition Animation */
    display: flex !important; /* Wichtig, um display:none zu überschreiben, falls es von woanders kommt */
}
/* Pfeil-Icon für mobilen Button */
#mobileBackToTopBtn::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-color: white; /* Icon Farbe */
    -webkit-mask: url(images/arrow-up-solid-full.svg) no-repeat center;
    mask: url(images/arrow-up-solid-full.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* NEU: Desktop-Button auf Mobilgeräten verstecken, da er im HTML (datenschutz.html) vorhanden ist */
@media (max-width: 992px) {
    #desktopBackToTopBtn {
        display: none !important;
    }
}
/* --- Puls-Animation (für beide) --- */
@keyframes pulse-once {
    0% { box-shadow: 0 0 0 0 rgba(161, 102, 83, 0.5); }
    50% { box-shadow: 0 0 0 15px rgba(161, 102, 83, 0); }
    100% { box-shadow: 0 0 0 0 rgba(161, 102, 83, 0); }
}
.back-to-top-button.pulsing {
    animation: pulse-once 1.5s ease-out;
}

/* ======================================================= */
/* === RESPONSIVE ANPASSUNGEN (Header & Buttons) === */
/* ======================================================= */

/* --- Mobilgeräte (<= 992px) --- */
/* HINWEIS: Dies ist die im Audit (III. A) als "brittle" beschriebene Sektion. */
@media (max-width: 992px) {
    /* NEU: Logo auf Mobilgeräten verkleinern (50%) */
    .logo img {
        height: 30px !important;
    }

    /* Desktop-Navigation ausblenden */
    .nav-links { display: none !important; }

    /* Aufgeklapptes mobiles Menü */
    .nav-links.active {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        top: 100%; /* Direkt unter dem Header */
        left: 0;
        right: 0;
        background: var(--color-white);
        box-shadow: var(--shadow-medium);
        padding: 10px 0 20px 0;
        z-index: 999; /* Unter den fixed Buttons */
    }
    .nav-links.active li { margin: 15px 0; text-align: center; }

    /* Burger-Menü anzeigen und positionieren */
    .burger-menu {
        display: block !important;
        position: fixed !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: 18px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* "Termin vereinbaren"-Button anzeigen und positionieren */
    .header-button {
        display: block !important;
        position: fixed !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: 160px !important; /* Position links neben BTT (84px + 40px + 36px Abstand) */
        left: 130px !important; /* ERSETZT: 180px. Abstand vom Logo links (ca. 80px Logo + 20px padding + 20px margin + 10px Puffer) */
        width: auto !important; /* NEU: Erlaubt dem Button zu schrumpfen */
        background: var(--color-primary) !important; /* Feste Farbe */
        padding: 8px 15px !important;
        font-size: 0.85rem !important;
        white-space: normal !important; /* Erlaubt Umbruch */
        text-align: center !important;
        line-height: 1.3 !important;
        max-width: none !important; /* ERSETZT: max-width: 150px */
        margin-left: 0 !important;
        border-radius: 50px !important;
        color: var(--color-white) !important;
    }
    .header-button:hover {
        transform: translateY(-50%) scale(1.05) !important; /* Hover-Effekt angepasst */
        background: var(--color-primary-dark) !important;
    }

     /* Container für Aktionen - wird mobil nicht mehr für Layout gebraucht */
     .header-actions {
         display: block !important; /* Muss da sein, auch wenn Kinder fixed sind */
         /* Positionierung ist irrelevant */
     }
}

/* --- Kleinere Mobilgeräte (< 480px) --- */
/* HINWEIS: Dies ist der "Patch" für die "brittle" Logik. */
@media (max-width: 480px) {
    #mobileBackToTopBtn {
        width: 35px !important;
        height: 35px !important;
        right: 84px !important; /* Position beibehalten */
    }
    #mobileBackToTopBtn::before {
         width: 14px !important;
         height: 14px !important;
    }

    .header-button { /* Termin vereinbaren */
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
        max-width: none !important; /* ERSETZT: max-width: 120px */
        right: 155px !important; /* BTT (84+35) + 36px Abstand */
        left: 130px !important; /* ERSETZT: 180px. Abstand vom Logo links */
        width: auto !important; /* NEU: Erlaubt dem Button zu schrumpfen */
    }
}


/* ======================================================= */
/* === FOOTER === */
/* ======================================================= */

footer {
    background-color: #2b3035;
    overflow-x: hidden;
    color: rgba(255, 255, 255, 0.8);
    padding: 40px 0;
    font-size: 0.9em;
    text-align: center;
    margin-top: auto; /* Sorgt dafür, dass der Footer unten bleibt */
    font-family: 'Montserrat', sans-serif;
}
footer .container { display: flex; flex-direction: column; gap: 15px; }
footer p { margin: 0; }
footer a { color: var(--color-white); text-decoration: none; border-bottom: 1px solid transparent; transition: var(--transition-fast); }
footer a:hover { border-bottom-color: var(--color-primary); color: var(--color-primary); }

/* ======================================================= */
/* === MODALS (Cookie & Response) === */
/* ======================================================= */

/* --- NEUE REGELN FÜR RESPONSE MODAL (Feedback-Popup) --- */

/* Das Overlay (#response-modal) */
#response-modal {
    position: fixed; /* Bleibt an fester Position */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dunkler Hintergrund */
    display: flex; /* Zentriert den Inhalt */
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Ganz oben */
    opacity: 0; /* Standardmäßig unsichtbar */
    visibility: hidden; /* Standardmäßig versteckt */
    pointer-events: none; /* Keine Klicks durchlassen, wenn unsichtbar */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Übergang für Ein-/Ausblenden */
}

/* Sichtbarer Zustand des Overlays */
#response-modal.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Klicks zulassen, wenn sichtbar */
}

/* Der Inhalt des Modals (.modal-content innerhalb von #response-modal) */
#response-modal .modal-content {
    background-color: var(--color-white);
    padding: 30px;
    border-radius: var(--border-radius);
    max-width: 500px;
    width: 90%; /* Responsive Breite */
    text-align: center;
    box-shadow: var(--shadow-medium);
    transform: scale(0.95); /* Startet leicht verkleinert */
    transition: transform 0.3s ease; /* Übergang für Skalierung */
}

/* Sichtbarer Zustand des Inhalts */
#response-modal.visible .modal-content {
    transform: scale(1); /* Normale Größe, wenn sichtbar */
}

/* Stile für Titel, Text und Button im Modal */
#response-modal .modal-content h3 { margin-top: 0; }
#response-modal .modal-content p { margin-bottom: 20px; }
#response-modal #modal-close { cursor: pointer; } /* ID für den Button verwenden */
#response-modal .modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}
/* Optional: Fehler-Hervorhebung */
#response-modal .modal-content.error h3 { color: var(--color-error); }


/* --- Regeln für Cookie Banner & Settings Modal (unverändert) --- */
#cookie-banner-wrapper {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,.6);
    display: flex; justify-content: center; align-items: center;
    z-index: 9999; /* Etwas niedriger als Response Modal */
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    pointer-events: none;
}
#cookie-banner-wrapper.banner-visible {
    opacity: 1; visibility: visible; pointer-events: auto;
}
#cookie-banner {
    background-color: var(--color-white); padding: 30px; border-radius: var(--border-radius);
    max-width: 500px; width: 90%; text-align: center;
    transform: scale(.95); transition: transform .3s ease;
    box-shadow: var(--shadow-medium);
}
#cookie-banner-wrapper.banner-visible #cookie-banner {
    transform: scale(1);
}
#cookie-banner h3 { margin-top: 0; }
#cookie-banner p { margin-bottom: 20px; }
/* .modal-close-btn { cursor: pointer; } */ /* Generische Klasse entfernt, spezifische IDs verwenden */
#cookie-banner .modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}


/* --- Cookie Banner spezifisch --- */
#cookie-banner-wrapper { align-items: flex-end; /* Banner unten positionieren */ }
#cookie-banner {
    max-width: 100%; width: 100%; border-radius: 0; padding: 20px;
    position: absolute; bottom: 0;
}
#cookie-banner .cookie-banner-content { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 800px; margin: 0 auto; }
#cookie-banner .cookie-banner-buttons { display: flex; flex-direction: row; gap: 15px; align-items: center; justify-content: center; width: 100%; margin-top: 20px; }
#cookie-banner .cookie-banner-buttons .button-primary,
#cookie-banner .cookie-banner-buttons .button-secondary { width: auto; margin: 0; }
#cookie-banner .cookie-banner-buttons .button-primary { order: 3; } /* Alle akzeptieren */
#cookie-banner .cookie-banner-buttons #cookie-reject { order: 1; } /* Nur technisch notwendige */
#cookie-banner .cookie-banner-buttons #cookie-settings { order: 2; } /* Einstellungen */

/* --- Cookie Settings Modal --- */
#cookie-settings-modal {
     position: fixed; top: 0; left: 0; width: 100%; height: 100%;
     background-color: rgba(0,0,0,.6);
     display: flex; justify-content: center; align-items: center;
     z-index: 10001; /* Über dem Banner & Response Modal */
     opacity: 0; visibility: hidden;
     transition: opacity .3s ease, visibility .3s ease;
     pointer-events: none;
}
#cookie-settings-modal.visible {
    opacity: 1; visibility: visible; pointer-events: auto;
}
#cookie-settings-modal .modal-content {
    background-color: var(--color-white); padding: 30px; border-radius: var(--border-radius);
    display: flex; flex-direction: column; text-align: left;
    max-width: 600px; width: 90%;
    transform: scale(.95); transition: transform .3s ease;
    box-shadow: var(--shadow-medium);
}
#cookie-settings-modal.visible .modal-content {
    transform: scale(1);
}
#cookie-settings-modal .cookie-category { margin-top: 20px; padding: 15px; border: 1px solid var(--color-border); border-radius: 8px; }
#cookie-settings-modal .category-header { display: flex; align-items: center; }
#cookie-settings-modal .category-header input { margin-right: 10px; width: 18px; height: 18px; accent-color: var(--color-primary); }
#cookie-settings-modal .category-description { font-size: 0.9rem; color: var(--color-text-light); margin-top: 5px; padding-left: 28px; }
#cookie-settings-modal .modal-buttons { margin-top: 30px; display: flex; justify-content: flex-end; gap: 10px; }
#cookie-settings-modal #cookie-save-settings { order: 2; }
#cookie-settings-modal #modal-close-settings { cursor: pointer; } /* Spezifische ID für Schließen-Button */



/* ======================================================= */
/* === SONSTIGE ELEMENTE & HILFSKLASSEN === */
/* ======================================================= */

/* --- Scroll-Animationen --- */
.fade-in-section {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* --- Scroll-Anker Offset --- */
#fusspflege-anker, #augen-anker, #waxing-anker, #sugaring-anker, #gesichtsbehandlungen-anker, #treatment-selection-anchor, #pakete-anker, #date-time-anchor {
    scroll-margin-top: 140px; /* Höhe des Headers + Puffer */
}

/* --- Honeypot für Formulare --- */
.honeypot-field {
    position: absolute;
    left: -5000px;
    top: -5000px;
}

/* --- Karten-Highlight (Leistungen) --- */
@keyframes highlight-fade {
    0% { box-shadow: 0 0 0 4px rgba(161, 102, 83, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(161, 102, 83, 0); }
}
.leistung-card.highlight-target { animation: highlight-fade 2.5s ease-out; }

/* --- Loader-Animation --- */
.loader-dual-ring { display: inline-block; width: 60px; height: 60px; }
.loader-dual-ring:after {
  content: " "; display: block; width: 46px; height: 46px; margin: 8px;
  border-radius: 50%; border: 6px solid;
  border-color: var(--color-primary) transparent var(--color-primary) transparent;
  animation: loader-dual-ring 1.2s linear infinite;
}
@keyframes loader-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#treatment-loader { text-align: center; padding: 40px; }

/* --- Vacation Notice --- */
.vacation-notice {
    background-color: #fffaf0; border-left: 4px solid #fdbf71; border-radius: 8px;
    padding: 15px 20px; text-align: left; color: #8a6d3b; margin-bottom: 30px;
    display: none; /* Standardmäßig versteckt, wird per JS eingeblendet */
    align-items: center; gap: 15px;
    box-shadow: 0 4px 10px rgba(253, 191, 113, 0.1);
}
.vacation-notice strong { color: #d97706; display: block; margin-bottom: 5px; }
.vacation-notice > div { line-height: 1.5; }
.vacation-notice svg { width: 24px; height: 24px; color: #fdbf71; flex-shrink: 0; }
.vacation-notice svg path { fill: currentColor; }

/* === NEU: Graustufen für Bild === */
.grayscale img {
    filter: grayscale(100%);
    opacity: 0.7; /* Optional: Etwas transparenter machen */
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.grayscale:hover img {
    filter: grayscale(80%); /* Leicht Farbe zurückgeben bei Hover */
    opacity: 0.8;
}


/* ======================================================= */
/* === SEITENSPEZIFISCHE STYLES === */
/* ======================================================= */

/* --- Startseite (index.html) --- */
.welcome-hero { padding: 80px 0; text-align: center; }
.welcome-hero-logo { display: block; margin: 0 auto 30px auto; height: 150px; width: auto; }
.welcome-hero h1.page-title { font-size: 3.2rem; margin-bottom: 15px; }
.welcome-hero .welcome-hero-text { max-width: 750px; margin: 0 auto 40px auto; font-size: 1.1rem; }
.services-highlight-grid { display: grid; gap: 30px; }
.services-highlight-grid.top-row { grid-template-columns: repeat(2, 1fr); margin-bottom: 30px; }
.services-highlight-grid.bottom-row { grid-template-columns: repeat(3, 1fr); }
.service-highlight-card { position: relative; border-radius: var(--border-radius); overflow: hidden; height: 400px; text-decoration: none; display: block; transition: var(--transition-medium); box-shadow: var(--shadow-soft); }
.service-highlight-card:hover { transform: translateY(-8px) scale(1.03); box-shadow: var(--shadow-medium); }
.service-highlight-card img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-medium); }
.service-highlight-card:hover img { transform: scale(1.1); filter: brightness(0.9); }
.card-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); padding: 50px 25px 25px 25px; color: var(--color-white); }
.card-overlay h3 { text-shadow: 0 2px 10px rgba(0,0,0,0.5); color: var(--color-white) !important; }
.usp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; text-align: center; }
.usp-item { display: flex; flex-direction: column; align-items: center; transition: var(--transition-fast); }
.usp-item:hover { transform: translateY(-5px); }
.usp-icon { width: 50px; height: 50px; color: var(--color-primary); margin-bottom: 20px; fill: currentColor; }
.usp-item h3 { margin-top: 0; margin-bottom: 10px; }
.testimonial-section { background-color: var(--color-white); border-radius: var(--border-radius); }
.review-slider-wrapper { position: relative; max-width: 900px; margin: 0 auto; padding: 0 40px; }
.slider-window { width: 100%; overflow: hidden; }
.slider-track { display: flex; transition: transform 0.5s ease-in-out; }
.review-slide { min-width: 50%; box-sizing: border-box; padding: 30px; display: flex; flex-direction: column; text-align: center; }
.testimonial-quote { font-style: italic; color: var(--color-text-light); position: relative; flex-grow: 1; margin: 0 0 20px 0; font-size: 1.1rem; }
.testimonial-author { font-weight: 700; color: var(--color-primary); font-family: 'Montserrat', sans-serif;}
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background-color: var(--color-primary); color: var(--color-white); border: none; font-size: 20px; cursor: pointer; z-index: 10; transition: var(--transition-fast); width: 45px; height: 45px; border-radius: 50%; box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; }
.slider-arrow:hover { transform: translateY(-50%) scale(1.1); box-shadow: var(--shadow-medium); }
.slider-arrow svg { width: 1em; height: 1em; fill: currentColor; }
.slider-arrow.prev { left: -20px; }
.slider-arrow.next { right: -20px; }
.slider-progress { width: 200px; height: 4px; background-color: var(--color-border); border-radius: 2px; margin: 30px auto 0 auto; overflow: hidden; }
.slider-progress-bar { width: 0%; height: 100%; background: var(--color-primary-gradient); border-radius: 2px; transition: width 0.5s ease-in-out; }
.cta-section { background: var(--color-white); border-radius: var(--border-radius); padding: 60px 0; }
.cta-section .container { text-align: center; }
.cta-section h2 { font-size: 2.5rem; }

/* --- "Über Mich" Seite (ueber-mich.html) --- */
.about-me-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center; }
.about-me-image img { width: 100%; border-radius: var(--border-radius); box-shadow: var(--shadow-medium); }
.about-me-text ul { list-style: none; padding-left: 0; }
.about-me-text ul li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.about-me-text ul li::before { content: '✓'; color: var(--color-primary); position: absolute; left: 0; font-weight: bold; font-size: 1.2rem; }
.personal-quote { font-size: 1.5rem; font-style: italic; margin: 40px 0; padding: 30px; border-left: 5px solid; border-image: var(--color-primary-gradient) 1; background-color: var(--color-white); border-radius: 0 var(--border-radius) var(--border-radius) 0; box-shadow: var(--shadow-soft); }

/* --- Leistungen Seite (leistungen.html) --- */
.category-filters-wrapper { text-align: center; margin-bottom: 40px; }
.category-filters-wrapper p { margin-top: 0; margin-bottom: 20px; color: var(--color-text-light); }
.category-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 60px; }
.category-filters .button-secondary { border-color: var(--color-primary); color: var(--color-primary); }
.category-filters .button-secondary:hover, .category-filters .button-secondary.active { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.treatment-details-container { max-width: 1100px; margin: 0 auto; }
.category-section { margin-bottom: 80px; }
.category-section:last-child { margin-bottom: 0; }
.leistungen-grid {
    display: grid;
    gap: 50px;
    align-items: start;
    /* MODERNISIERUNG (IV. B): Ersetzt Media Query durch ein 'Intrinsic Grid' */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
/* ENTFERNT (IV. B): Veraltete Media Query für .leistungen-grid */
.leistung-card { position: relative; border-radius: 20px; border: 2px solid var(--color-primary); padding: 25px 25px 50px; margin-bottom: 25px; background-color: var(--color-white); box-shadow: var(--shadow-soft); transition: var(--transition-medium), min-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); cursor: pointer; display: flex; flex-direction: column; width: 100%; }
.leistung-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); }
.leistung-card .card-header { text-align: center; padding: 15px 0 0 0; }
.leistung-card h3 { margin: 0; font-size: 2.1rem; }
.leistung-card h3::after { content: ''; display: block; width: 80px; height: 3px; background: var(--color-primary); margin: 10px auto 0; }
.price-tag { position: static; transform: none; margin-top: 15px; background: var(--color-primary-gradient); color: white; padding: 10px 25px; border-radius: var(--border-radius); font-size: 1.05rem; font-weight: 700; box-shadow: var(--shadow-soft); display: inline-flex; align-items: center; z-index: 2; white-space: nowrap; }
.price-tag .ca-prefix { font-size: 0.7em; font-weight: 400; margin-right: 4px; opacity: 0.9; }
.price-tag-separator { width: 5px; height: 5px; background-color: white; border-radius: 50%; margin: 0 10px; }
.leistung-card .short-desc { text-align: center; padding: 15px 0; color: var(--color-text); flex-grow: 1; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.card-content-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
.leistung-card.is-open .card-content-wrapper { max-height: 1000px; }
.card-content { padding-top: 20px; }
.card-content .long-desc { margin: 0 0 25px 0; text-align: center; font-weight: 600; }
.card-content .ideal-fuer { text-align: center; margin-top: 25px; padding-bottom: 25px; font-weight: 600; }
.card-content .ideal-fuer strong { font-weight: 700; display: block; }
.leistung-card .card-footer { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.leistung-card .card-toggle-icon { width: 50px; height: 50px; background: var(--color-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 300; line-height: 1; box-shadow: var(--shadow-medium); transition: transform 0.3s ease; }
.leistung-card.is-open .card-toggle-icon { transform: rotate(45deg); }
.service-details-list { margin-top: 0; padding: 0; font-size: 1rem; text-align: center; }
.service-details-list ul { list-style: none; padding: 20px 0; margin: 20px auto 0; display: block; text-align: left; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.service-details-list li { margin-bottom: 8px; line-height: 1.5; font-weight: 600; display: flex; justify-content: space-between; }
.service-details-list li:last-child { margin-bottom: 0; }
.service-details-list li strong { color: var(--color-text); display: inline-block; width: auto; margin-right: 15px; font-weight: 700; }
.service-details-list li span { color: var(--color-text); text-align: right; }
.book-now-wrapper { text-align: center; margin-top: 35px; }
.service-footnote { text-align: center; font-size: 0.85rem; color: #888; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--color-border); line-height: 1.5; }
.card-content .book-now-btn { margin-top: 0; font-size: 1rem; padding: 12px 30px; }
.card-content .book-now-btn:hover { box-shadow: 0 6px 20px rgba(161, 102, 83, 0.35); }
.cta-box { text-align: center; background: linear-gradient(135deg, #fdfaf7, var(--color-white)); padding: 50px; border-radius: var(--border-radius); margin-top: 60px; box-shadow: var(--shadow-soft); border: 1px solid var(--color-white); }
.cta-box h2 { font-size: 2.2rem; margin-top: 0; }

/* --- Kontakt Seite (kontakt.html) --- */
.contact-page-header { margin-bottom: 50px; }
/* CTA Box für Termin (Gelber Container) - JETZT AUCH info-box */
.termin-cta-box {
    text-align: center;
    /* Nimmt grundlegende info-box Stile an */
    margin: 20px auto 40px auto; /* Eigener Margin */
    max-width: 600px; /* Eigene Max-Breite */
}
/* Spezifische Anpassungen für Highlight-Box */
.termin-cta-box--highlight {
     background-color: var(--color-highlight-bg); /* Heller Hintergrund */
     border: 1px solid var(--color-highlight-border); /* Hellerer Rand */
}
.termin-cta-box p {
    font-size: 1.1rem;
    color: var(--color-text); /* Standard-Textfarbe */
    margin-bottom: 20px;
}
.termin-cta-box .button-primary {
    background: var(--color-primary-gradient); /* Button-Stil bleibt */
    display: inline-block;
    padding: 12px 30px;
    font-size: 1.1rem;
}
@media (max-width: 768px) {
    .termin-cta-box {
        padding: 20px; /* Eigener Padding mobil */
    }
    .termin-cta-box .button-primary {
        padding: 10px 25px;
        font-size: 1rem;
    }
}

/* Layout Wrapper */
.kontakt-page .kontakt-layout-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}
.kontakt-page .kontakt-obere-reihe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: stretch;
}
/* Generische Info-Box (Rote Container) */
.kontakt-page .info-box {
    background: var(--color-white);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
}
.kontakt-page .info-box {
    height: 100%;
    box-sizing: border-box;
}
.kontakt-page .info-box .info-box-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.kontakt-page .info-box .info-box-content .social-media {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Spezifisch für Öffnungszeiten-Box */
.kontakt-page .kontakt-obere-reihe .info-box-content p {
    font-weight: 600;
    line-height: 1.7;
    margin: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.kontakt-page .kontakt-obere-reihe .info-box-content p small {
    font-size: 0.9em;
    font-weight: 400;
    opacity: 0.9;
    color: var(--color-text-light);
}
.info-box h3 {
    margin-top: 0;
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text); /* Geändert: Schwarz */
}
.card-icon, .social-svg {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    color: var(--color-primary);
    flex-shrink: 0;
}
.card-icon path, .social-svg path { fill: currentColor; }
.social-media {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.social-icon {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    transition: var(--transition-fast);
}
.social-icon:hover {
    color: var(--color-primary);
    transform: translateX(4px);
}
.social-icon span {
    word-break: break-all;
}

/* Google Maps Platzhalter */
.map-placeholder-clickable {
    width: 100%;
    height: 350px;
    max-width: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--color-border);
    cursor: pointer;
    margin-top: 20px;
    background-color: var(--color-secondary);
}
.map-blur-background {
    width: 100%;
    height: 100%;
    background-image: url('images/maps-screenshot-ms-beauty-lounge.png');
    background-size: cover;
    background-position: center;
    filter: blur(5px);
    transform: scale(1.1);
    transition: filter 0.3s ease, transform 0.3s ease;
}
.map-placeholder-clickable:hover .map-blur-background {
    filter: blur(8px);
    transform: scale(1.15);
}
.consent-message-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(2px);
    transition: background-color 0.3s ease;
}
.map-placeholder-clickable:hover .consent-message-box {
    background-color: rgba(0,0,0,0.6);
}
/* Neuer weißer Container für Text */
.consent-text-container {
    background-color: var(--color-white);
    color: var(--color-text); /* Text schwarz */
    padding: 25px;
    border-radius: var(--border-radius);
    max-width: 90%;
    box-shadow: var(--shadow-medium);
    overflow-wrap: break-word; /* NEU: Erzwingt Zeilenumbruch bei langen Wörtern/Links */

}
.consent-text-container h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-text); /* Text schwarz */
}
.consent-text-container p {
    font-size: 0.9em;
    margin-bottom: 15px;
    color: var(--color-text-light); /* Hellerer Text */
    overflow-wrap: break-word; /* Sicherstellung für moderne Browser */
}
/* Linkfarbe im Container anpassen */
.consent-text-container a {
    color: var(--color-primary); /* Braun */
    font-weight: 600;
    text-decoration: underline;
}
.consent-text-container a:hover {
    color: var(--color-primary-dark);
}
.consent-text-container small {
     font-size: 0.8em;
     color: #777; /* Grauer Text für Small */
}
.consent-text-container small a {
    color: #777; /* Grau für die Links in Small */
}
.consent-text-container small a:hover {
    color: var(--color-text);
}


/* --- Terminanfrage Seite (terminanfrage.html) --- */
.termin-page .contact-wrapper { display: block; max-width: 850px; margin: 0 auto 50px auto; gap: 0; }
.termin-page .contact-form-column { width: 100%; padding: 0; margin: 0; }
.termin-page .contact-form { padding: 40px; border: 1px solid var(--color-border); box-shadow: 0 10px 30px rgba(0,0,0,0.08); height: auto; }
.termin-page .form-legend { font-size: 1.8rem; color: var(--color-primary); border-bottom: 2px solid var(--color-primary); padding-bottom: 15px; margin-bottom: 40px; gap: 20px; }
.termin-page .submit-button { max-width: 400px; font-size: 1.2rem; }

/* --- Stile für beide Formulare --- */
.contact-form { display: flex; flex-direction: column; gap: 30px; background: var(--color-white); padding: 30px; border-radius: var(--border-radius); box-shadow: var(--shadow-soft); height: 100%; box-sizing: border-box; }
.contact-form fieldset { border: none; padding: 0; margin: 0; }
.form-legend { font-size: 1.5rem; color: var(--color-text); display: flex; align-items: center; gap: 15px; padding-bottom: 10px; width: 100%; margin-bottom: 25px; border-bottom: 1px solid var(--color-border); }
.step-number { background: var(--color-primary-gradient); color: var(--color-white); border-radius: 50%; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1rem; }
.form-group { position: relative; display: flex; flex-direction: column; }
.form-group label { margin-bottom: 8px; font-weight: 600; font-family: 'Montserrat', sans-serif; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 15px 20px; border: 2px solid #f0f0f0; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 1rem; background-color: #fdfdfd; transition: border-color 0.3s, box-shadow 0.3s; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 5px rgba(161, 102, 83, 0.25); }
.select-wrapper { position: relative; }
.select-wrapper select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.select-wrapper::after { content: '▼'; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); pointer-events: none; font-size: 0.8em; color: var(--color-text-light); }
.form-row-flex { display: flex; gap: 20px; align-items: flex-start; }
.form-row-flex .form-group { flex: 1; }
.submit-button { align-self: center; width: 100%; max-width: 300px; font-size: 1.1rem; }
.form-disclaimer { text-align: center; font-size: 0.9em; color: var(--color-text-light); margin-top: -10px; }

/* Behandlungs-Auswahl */
.treatment-category-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; }
.treatment-category-filters .button-secondary { border-color: var(--color-primary); color: var(--color-primary); padding: 10px 20px; }
.treatment-category-filters .button-secondary.active, .treatment-category-filters .button-secondary:hover { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
#treatment-list-container { margin-top: 20px; max-height: 400px; overflow-y: auto; padding-right: 10px; }
.treatment-list-item { display: flex; align-items: center; justify-content: space-between; padding: 15px 5px; border-bottom: 1px solid var(--color-border); }
.treatment-list-item:last-child { border-bottom: none; }
.treatment-info { flex-grow: 1; padding-right: 15px; }
.treatment-info .title { font-weight: 600; display: block; }
.treatment-info .meta { font-size: 0.9em; color: #777; }
.treatment-add-btn { padding: 8px 18px; font-size: 0.9rem; flex-shrink: 0; }

/* Warenkorb im Formular */
.cart-title { font-family: var(--font-heading); font-size: 1.2rem; margin-top: 30px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
#cart-wrapper { margin-top: 20px; display: none; }
#cart-header { font-weight: 600; border-bottom: 2px solid var(--color-border); padding-bottom: 10px; font-family: 'Montserrat', sans-serif; }
.cart-grid { display: grid; grid-template-columns: 1fr auto auto 40px; gap: 15px; align-items: center; padding: 10px 0; }
.cart-item { border-bottom: 1px solid var(--color-border); }
.cart-item:last-child { border-bottom: none; }
.cart-item .price, .cart-item .duration, .cart-header .price, .cart-header .duration { text-align: right; color: var(--color-text-light); }
.cart-item button { justify-self: center; background: none; border: none; color: var(--color-error); cursor: pointer; font-weight: bold; font-size: 1.5rem; line-height: 1; padding: 0; width: 30px; height: 30px; border-radius: 50%; transition: background-color 0.2s; }
.cart-item button:hover { background-color: #fbebeb; }
.totals-display { margin-top: 15px; padding-top: 15px; border-top: 2px solid var(--color-primary); text-align: right; font-family: 'Montserrat', sans-serif; display: none; }
.totals-display p { display: flex; justify-content: space-between; font-size: 1.1rem; margin: 5px 0; }
.totals-display p strong { font-weight: 700; }
.totals-display small { display: block; color: var(--color-text-light); }

/* Datums/Zeitauswahl */
#date-time-selector { padding-top: 0; margin-top: 0; }
#date-time-info-text { text-align: center; color: #777; margin-top: -15px; margin-bottom: 20px; }
.date-carousel { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.carousel-arrow { background: none; border: 1px solid var(--color-border); color: var(--color-primary); cursor: pointer; width: 35px; height: 35px; border-radius: 50%; font-size: 1.2rem; transition: var(--transition-fast); flex-shrink: 0; }
.carousel-arrow:hover { background-color: var(--color-primary); color: var(--color-white); }
.carousel-arrow:disabled { opacity: 0.5; cursor: not-allowed; }
.date-strip-wrapper { overflow: hidden; flex-grow: 1; margin: 0 10px; }
.date-strip { display: flex; gap: 10px; }
.date-day { flex: 1; min-width: 0; padding: 10px 5px; border: 1px solid var(--color-border); border-radius: var(--border-radius); text-align: center; cursor: pointer; transition: var(--transition-fast); background-color: var(--color-white); color: var(--color-text); }
.date-day:hover { background-color: #fdfaf7; border-color: var(--color-primary); }
.date-day.selected { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); font-weight: 700; }
.date-day.disabled { opacity: 0.5; cursor: not-allowed; background-color: #f9f9f9; }
.date-day.disabled.selected { background: #e0d9d3; color: var(--color-text); opacity: 0.9; border-color: #c9c1ba; }
.day-name { font-size: 0.8em; }
.day-number { font-size: 1.2em; font-weight: 600; display: block; }
.time-slots-container { max-height: 200px; overflow-y: auto; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: #fdfaf7; }
.time-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.time-slot-btn { padding: 10px; border: 1px solid var(--color-primary); background-color: var(--color-white); color: var(--color-primary); border-radius: 8px; cursor: pointer; transition: var(--transition-fast); font-weight: 600; }
.time-slot-btn:hover { background-color: var(--color-primary); color: var(--color-white); }
.time-slot-btn.selected { background: var(--color-primary-gradient); color: var(--color-white); border-color: var(--color-primary); }
.time-slots-placeholder { text-align: center; color: #777; padding: 20px 0; }

/* Formular-Validierung */
.form-group.invalid input, .form-group.invalid textarea, .form-group.invalid select { border-color: var(--color-error); background-color: #fff0f0; }
.form-group-checkbox.invalid label { color: var(--color-error); }
/* NEU: Invalid-Styling für Datums/Zeitauswahl */
#date-time-selector.invalid .date-carousel,
#date-time-selector.invalid .time-slots-container {
     border: 1px solid var(--color-error); /* Roter Rahmen um den Bereich */
     box-shadow: 0 0 0 4px rgba(217, 83, 79, 0.2); /* Leichter roter Schatten */
}
#date-time-selector.invalid {
    border-radius: var(--border-radius); /* Runde Ecken für den Rahmen */
    padding: 5px; /* Kleiner Innenabstand für den Rahmen */
    margin-bottom: 10px; /* Abstand nach unten, falls Fehlertext darunter ist */
}

.error-message { display: none; color: var(--color-error); font-size: 0.9em; margin-top: 5px; font-family: 'Montserrat', sans-serif;}
.form-group.invalid .error-message, .form-group-checkbox.invalid .error-message { display: block; }
#time-error-message { color: var(--color-error); font-size: 0.9em; margin-top: 10px; font-family: 'Montserrat', sans-serif; display: none; text-align: center; }
#time-error-message.visible { display: block; }
.form-group-checkbox { display: flex; flex-direction: column; }
.form-group-checkbox .checkbox-wrapper { display: flex; align-items: flex-start; gap: 12px; }
.form-group-checkbox input[type="checkbox"] { width: 1.2em; height: 1.2em; margin-top: 5px; flex-shrink: 0; accent-color: var(--color-primary); }
.form-group-checkbox label { font-weight: 400; line-height: 1.5; margin-bottom: 0; }
.form-group-checkbox label a { color: var(--color-primary); font-weight: 600; text-decoration: underline; }

/* ======================================================= */
/* === ALLGEMEINE RESPONSIVE ANPASSUNGEN === */
/* ======================================================= */

@media (max-width: 992px) {
    .section { padding: 50px 0; }
    /* Kontakt-Seite mobil anpassen */
    .kontakt-page .contact-wrapper { grid-template-columns: 1fr; gap: 30px; max-width: 100%; margin: 0 auto 30px auto; padding: 0 20px; display: grid; }
    .kontakt-page .contact-form-column { order: 0; max-width: none; }
    .kontakt-page .contact-info-column { order: 1; margin-top: 0; padding-top: 0; }
    /* Termin-Seite mobil anpassen */
    .termin-page .contact-wrapper { grid-template-columns: 1fr; max-width: 100%; margin: 0 auto 30px auto; padding: 0 20px; display: grid; }
    .about-me-grid { grid-template-columns: 1fr; text-align: center; }
    .about-me-image { max-width: 350px; margin: 0 auto; }
}

@media (max-width: 768px) {
    .section { padding: 40px 0; }
    /* ENTFERNT (IV. A): Veraltete statische Regel für .page-title */
    .welcome-hero h1.page-title { font-size: 2.2rem; } /* Behält die spezifische Hero-Regel bei, aber die Basis .page-title ist jetzt flüssig */
    .page-intro, .welcome-hero .welcome-hero-text { font-size: 1rem; }
    .services-highlight-grid.top-row, .services-highlight-grid.bottom-row { grid-template-columns: 1fr; }
    .service-highlight-card { height: 300px; }
    .review-slider-wrapper { padding: 0; }
    .review-slide { min-width: 100%; padding: 20px; }
    .slider-arrow { display: none; }
    .form-row-flex { flex-direction: column; gap: 0; }
    .form-row-flex .form-group { margin-bottom: 20px; width: 100%; }
    .form-row-flex .form-group:last-child { margin-bottom: 0; }
    .about-me-text ul { text-align: left; }
    .personal-quote { font-size: 1.2rem; padding: 20px; }
    .date-day { font-size: 0.9em; }
    .day-number { font-size: 1.1em; }
    .date-strip { gap: 5px; }
    .carousel-arrow { width: 30px; height: 30px; font-size: 1rem; }
    #cookie-banner .cookie-banner-buttons { flex-direction: column; align-items: stretch; }
    .kontakt-page .kontakt-obere-reihe { grid-template-columns: 1fr; }
    .termin-page .contact-form { padding: 25px; }
    .termin-page .contact-form fieldset { margin-bottom: 20px; }

    /* KORREKTUR:
       Die .section-Regel (weiter oben in dieser Media Query) setzt
       padding: 40px 0; und überschreibt damit das horizontale Padding.
       Diese Regel erzwingt das horizontale Padding von 20px
       speziell für die Textseiten auf Mobilgeräten.
       
       HINWEIS: Siehe Audit (V. C) - dieser Patch sollte nach einer
       HTML-Änderung entfernt werden.
    */
    .text-page {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 480px) {
    .section { padding: 30px 0; }
    /* ENTFERNT (IV. B): .leistungen-grid ist jetzt auto-fit */
    .leistung-card { padding: 20px 20px 40px; }
    .leistung-card h3 { font-size: 1.8rem; }
    .service-details-list li { flex-direction: column; align-items: flex-start; }
    .service-details-list li strong { margin-bottom: 4px; }
    .date-strip-wrapper { margin: 0 5px; }

    /* NEU: Padding für Textseiten auch bei sehr kleinen Geräten */
    /* HINWEIS: Siehe Audit (V. C) - dieser Patch sollte nach einer
       HTML-Änderung entfernt werden.
    */
    .text-page {
        padding-left: 20px;
        padding-right: 20px;
    }

    .date-day .day-name { font-size: 0.75em; }
    .date-day .day-number { font-size: 1em; }
}

/* FIX: Neue Media Query für sehr kleine Screens (z.B. 346px wie in deinem Screenshot) */
@media (max-width: 400px) {
    .container { padding: 0 10px; } /* Reduziertes Padding, um Abschneiden zu vermeiden */
    .section { padding: 20px 0; } /* Weniger vertikales Padding */
    .text-page { padding-left: 10px 15px; padding-right: 10px 15px; font-size: clamp(0.75rem, 2.5vw, 0.9rem); word-break: break-all; } /* Anpassung für Textseiten: Schrumpfende Schrift + starker Break */
    .termin-page .contact-wrapper { padding: 0 10px; }
    .termin-page .contact-form { padding: 15px; }
    .date-strip-wrapper { margin: 0; width: 100%; overflow: hidden; overflow-x: auto; } /* Kein Scroll, hidden für Cutoff-Prävention */
    .date-day { min-width: 40px; width: calc(100% / 7); height: auto; font-size: clamp(0.7em, 2vw, 0.8em); padding: 5px 2px; } /* Schrumpfende Tage, auto-Breite */
    .day-number { font-size: clamp(0.9em, 2.5vw, 1em); }
    .day-name { font-size: clamp(0.6em, 2vw, 0.7em); word-break: break-all; display: none; }
    .carousel-arrow { width: 20px; height: 20px; font-size: clamp(0.7rem, 2vw, 0.8rem); }
    .time-slots-grid { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); } /* Kleinere Slots, fit statt fill */
    .time-slot-btn { min-width: 44px; padding: 6px; font-size: clamp(0.7rem, 2vw, 0.9rem); word-break: break-word; } /* Schrumpfende Btns + Break */
    .burger-menu { right: calc(10px + 5vw); }
    .header-button { max-width: 120px; font-size: clamp(0.7rem, 2.5vw, 0.85rem); overflow: hidden; text-overflow: ellipsis; }
    .error-message { word-break: break-word; hyphens: auto; }
    #cookie-banner, #response-modal .modal-content { padding: 15px; font-size: 0.9rem; max-height: 80vh; overflow-y: auto; }
    .service-highlight-card { height: auto; aspect-ratio: 16/9; }
    .map-placeholder-clickable { height: clamp(200px, 50vw, 350px); }
    .button-primary { padding: clamp(10px, 4vw, 15px) clamp(20px, 8vw, 35px); }
    .usp-icon { width: clamp(30px, 10vw, 50px); height: clamp(30px, 10vw, 50px); }
}