/**
 * Schlossparkklinik Dirmstein - Custom Styles
 * Version: 1.0.0
 * Stand: Januar 2026
 *
 * Design-System für Relaunch 2026
 * Fonts: Manrope (Body), Cormorant Garamond (Headings)
 * Primary: #1B758D (Muted Teal)
 */

/* ==========================================================================
   CSS Variables / Design Tokens
   ========================================================================== */

:root {
    /* ===== Farben ===== */

    /* Primary - Muted Teal */
    --cm-primary: #1b758d;
    --cm-primary-90: rgba(27, 117, 141, 0.9);
    --cm-primary-20: rgba(27, 117, 141, 0.2);
    --cm-primary-05: rgba(27, 117, 141, 0.05);
    --cm-primary-rgb: 27, 117, 141;

    /* Secondary */
    --cm-secondary: #eae8e5;
    --cm-secondary-dark: #d9d6d2;

    /* Accent - Warm Brown */
    --cm-accent: #7d6b64;
    --cm-accent-light: #a0948e;

    /* Text Colors */
    --cm-heading-color: #0b2434;
    --cm-body-color: #526b7a;
    --cm-link-color: #1b758d;
    --cm-foreground: #0b2434;

    /* Muted / Neutral */
    --cm-muted: #e6e1d9;
    --cm-muted-foreground: #526b7a;

    /* Backgrounds */
    --cm-background: #fbfaf9;           /* BG Hell */
    --cm-bg-dark: #f5f4f2;             /* BG Dunkel */
    --cm-bg-tint: #e8f1f3;             /* Leichter Primary-Tint */

    /* Weiß & Card */
    --cm-white: #ffffff;
    --cm-card: #ffffff;
    --cm-black: #1a1a1a;

    /* Border */
    --cm-border: #e6e1d9;
    --cm-border-light: rgba(27, 117, 141, 0.2);


    /* ===== Typography ===== */

    --cm-font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cm-font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

    /* Font Sizes */
    --cm-text-xs: 0.75rem;      /* 12px */
    --cm-text-sm: 0.875rem;     /* 14px */
    --cm-text-base: 1rem;       /* 16px */
    --cm-text-lg: 1.125rem;     /* 18px */
    --cm-text-xl: 1.25rem;      /* 20px */
    --cm-text-2xl: 1.5rem;      /* 24px */
    --cm-text-3xl: 1.875rem;    /* 30px */
    --cm-text-4xl: 2.25rem;     /* 36px */
    --cm-text-5xl: 3rem;        /* 48px */
    --cm-text-6xl: 3.75rem;     /* 60px */

    /* Font Weights */
    --cm-font-light: 300;
    --cm-font-normal: 400;
    --cm-font-medium: 500;
    --cm-font-semibold: 600;
    --cm-font-bold: 700;

    /* Line Heights */
    --cm-leading-tight: 1.2;
    --cm-leading-snug: 1.35;
    --cm-leading-normal: 1.6;
    --cm-leading-relaxed: 1.8;

    /* Letter Spacing */
    --cm-tracking-tight: -0.01em;
    --cm-tracking-normal: 0;
    --cm-tracking-wide: 0.02em;
    --cm-tracking-wider: 0.1em;
    --cm-tracking-widest: 0.2em;


    /* ===== Spacing ===== */

    --cm-space-1: 0.25rem;      /* 4px */
    --cm-space-2: 0.5rem;       /* 8px */
    --cm-space-3: 0.75rem;      /* 12px */
    --cm-space-4: 1rem;         /* 16px */
    --cm-space-5: 1.25rem;      /* 20px */
    --cm-space-6: 1.5rem;       /* 24px */
    --cm-space-8: 2rem;         /* 32px */
    --cm-space-10: 2.5rem;      /* 40px */
    --cm-space-12: 3rem;        /* 48px */
    --cm-space-16: 4rem;        /* 64px */
    --cm-space-20: 5rem;        /* 80px */
    --cm-space-24: 6rem;        /* 96px */
    --cm-space-32: 8rem;        /* 128px */


    /* ===== Layout ===== */

    --cm-container-max: 1200px;
    --cm-container-padding: 1.5rem;


    /* ===== Border Radius ===== */

    --cm-radius-sm: 0.25rem;    /* 4px */
    --cm-radius: 0.5rem;        /* 8px */
    --cm-radius-md: 0.625rem;   /* 10px */
    --cm-radius-lg: 0.75rem;    /* 12px */
    --cm-radius-xl: 1rem;       /* 16px */
    --cm-radius-full: 9999px;


    /* ===== Shadows ===== */

    --cm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --cm-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --cm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --cm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --cm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --cm-shadow-primary: 0 10px 15px -3px rgba(27, 117, 141, 0.2);


    /* ===== Transitions ===== */

    --cm-transition-fast: 150ms ease;
    --cm-transition: 300ms ease;
    --cm-transition-slow: 500ms ease;
    --cm-transition-slower: 700ms ease;
}


/* ==========================================================================
   Base Overrides
   ========================================================================== */

body {
    font-family: var(--cm-font-sans);
    color: var(--cm-body-color);
    background-color: var(--cm-background);
    line-height: var(--cm-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Selection */
::selection {
    background-color: rgba(var(--cm-primary-rgb), 0.2);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
.et_pb_slide_title {
    font-family: var(--cm-font-serif);
    font-weight: var(--cm-font-normal);
    letter-spacing: var(--cm-tracking-wide);
    line-height: var(--cm-leading-tight);
    color: var(--cm-heading-color);
}

a {
    color: var(--cm-link-color);
}


/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Text Colors */
.cm-text-primary { color: var(--cm-primary) !important; }
.cm-text-muted { color: var(--cm-muted-foreground) !important; }
.cm-text-white { color: var(--cm-white) !important; }

/* Background Colors */
.cm-bg-primary { background-color: var(--cm-primary) !important; }
.cm-bg-secondary { background-color: var(--cm-secondary) !important; }
.cm-bg-white { background-color: var(--cm-white) !important; }

/* Font Families */
.cm-font-sans { font-family: var(--cm-font-sans) !important; }
.cm-font-serif { font-family: var(--cm-font-serif) !important; }

/* Font Weights */
.cm-font-light { font-weight: var(--cm-font-light) !important; }
.cm-font-normal { font-weight: var(--cm-font-normal) !important; }
.cm-font-medium { font-weight: var(--cm-font-medium) !important; }
.cm-font-semibold { font-weight: var(--cm-font-semibold) !important; }
.cm-font-bold { font-weight: var(--cm-font-bold) !important; }


/* ==========================================================================
   Button Styles
   ========================================================================== */

/* Primary Button */
.cm-btn-primary,
.et_pb_button.cm-btn-primary {
    background-color: var(--cm-primary) !important;
    color: var(--cm-white) !important;
    border: none !important;
    border-radius: var(--cm-radius-full) !important;
    padding: 1rem 2rem !important;
    font-family: var(--cm-font-sans) !important;
    font-weight: var(--cm-font-medium) !important;
    font-size: var(--cm-text-sm) !important;
    letter-spacing: var(--cm-tracking-wide) !important;
    box-shadow: var(--cm-shadow-primary) !important;
    transition: all var(--cm-transition) !important;
}

.cm-btn-primary:hover,
.et_pb_button.cm-btn-primary:hover {
    background-color: var(--cm-primary-light) !important;
    transform: translateY(-1px);
}

/* Outline Button */
.cm-btn-outline,
.et_pb_button.cm-btn-outline {
    background-color: transparent !important;
    color: var(--cm-foreground) !important;
    border: 1px solid rgba(var(--cm-primary-rgb), 0.2) !important;
    border-radius: var(--cm-radius-full) !important;
    padding: 1rem 2rem !important;
    font-family: var(--cm-font-sans) !important;
    font-weight: var(--cm-font-medium) !important;
    transition: all var(--cm-transition) !important;
}

.cm-btn-outline:hover,
.et_pb_button.cm-btn-outline:hover {
    background-color: rgba(var(--cm-primary-rgb), 0.05) !important;
    color: var(--cm-primary) !important;
}


/* ==========================================================================
   Section Styles
   ========================================================================== */

/* Secondary Background Section */
.cm-section-secondary,
.et_pb_section.cm-section-secondary {
    background-color: rgba(234, 232, 229, 0.3) !important;
}

/* Padding Variants */
.cm-section-lg {
    padding-top: var(--cm-space-24) !important;
    padding-bottom: var(--cm-space-24) !important;
}

@media (min-width: 768px) {
    .cm-section-lg {
        padding-top: var(--cm-space-32) !important;
        padding-bottom: var(--cm-space-32) !important;
    }
}


/* ==========================================================================
   ToggleNav - Tab-Navigation-Pattern
   Buttons: a[id^="but-{ziel}"] → Ziel-Rows: div[id="{ziel}"]
   Klassen "active"/"inactive" werden automatisch per JS gesetzt
   ========================================================================== */

a[id^="but-"] {
    cursor: pointer;
    transition: opacity var(--cm-transition, 300ms ease);
}

a[id^="but-"].active {
    opacity: 1;
}

a[id^="but-"].inactive, .et_pb_button.inactive {
    background: #faf9f7 !important;
    background-color: #faf9f7 !important;
    color: #526B7A !important;
}

a[id^="but-"].inactive:hover {
    opacity: 0.75;
}


/* ==========================================================================
   Dropdown Submenü Styling (Mobile Fallback)
   Gilt nur unter 980px - ab 981px übernehmen die Mega-Panels
   ========================================================================== */

@media (max-width: 980px) {
    /* Dropdown-Container */
    #top-menu .sub-menu {
        background: var(--cm-white) !important;
        border: none !important;
        border-radius: var(--cm-radius-md) !important;
        box-shadow: var(--cm-shadow-lg) !important;
        padding: var(--cm-space-3) !important;
        min-width: 220px;
    }

    /* Dropdown-Items */
    #top-menu .sub-menu li a {
        padding: var(--cm-space-3) var(--cm-space-4) !important;
        padding-right: calc(var(--cm-space-4) + 36px) !important;
        border-radius: var(--cm-radius) !important;
        font-family: var(--cm-font-sans) !important;
        font-size: var(--cm-text-sm) !important;
        font-weight: var(--cm-font-medium) !important;
        color: var(--cm-foreground) !important;
        background-color: var(--cm-secondary) !important;
        transition: all var(--cm-transition-fast) !important;
        border-bottom: none !important;
        position: relative;
        letter-spacing: 0px;
        width: 280px;
    }

    /* Pfeil-Icon rechts mit rundem Background */
    #top-menu .sub-menu li a::after {
        content: '\203A';
        position: absolute;
        right: var(--cm-space-3);
        top: 50%;
        transform: translateY(-50%);
        width: 26px;
        height: 26px;
        background-color: #dbe4e5;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
        color: #1b758d;
        transition: all var(--cm-transition-fast);
    }

    /* Hover auf Items */
    #top-menu .sub-menu li a:hover {
        background-color: var(--cm-secondary-dark) !important;
        color: #1b758d !important;
    }

    #top-menu .sub-menu li a:hover::after {
        background-color: var(--cm-primary);
        color: var(--cm-white);
    }

    /* Trennlinien zwischen Items entfernen */
    #top-menu .sub-menu li {
        border: none !important;
        padding: 0 !important;
        margin-bottom: 4px !important;
        width: 100% !important;
    }

    #top-menu .sub-menu li:last-child {
        margin-bottom: 0 !important;
    }
}


/* ==========================================================================
   Mega-Menu (Desktop ab 981px)
   Panels aus dem Footer werden per JS in #top-menu-nav verschoben.
   Positionierung: linksbündig am #top-menu-nav, 500px breit.
   ========================================================================== */

@media (min-width: 981px) {
    /* Schritt 1: Standard-Submenüs ausblenden */
    .menu-item-14444 > .sub-menu,
    .menu-item-14451 > .sub-menu,
    .menu-item-14473 > .sub-menu {
        display: none !important;
    }
    

    /* Parent-Sektion: unsichtbar aber im DOM aktiv (kein display:none!) */
    /* Nicht im Builder (body.et-fb) */
    body:not(.et-fb) #home-of-navi {
        display: block !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        overflow: visible !important;
        visibility: hidden;
    }

    /* Schritt 2: Panels (bleiben im Footer, werden per JS fixed positioniert) */
    body:not(.et-fb) .cm-mega-panel {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 200ms ease, visibility 200ms ease;
    }

    body:not(.et-fb) .cm-mega-panel.cm-mega-panel--open {
        opacity: 1;
        visibility: visible !important;
        pointer-events: auto;
    }
}

/* Unter 980px: Mega-Panels verstecken */
@media (max-width: 980px) {
    .cm-mega-panel {
        display: none !important;
    }
}