/* =============================================================
   MONIKA FLECK-HÖHNEL – Globales Design-System
   Systemische Therapie & Traumafachberatung
   ============================================================= */

/* --- CSS-Variablen (Design-Tokens) --- */
:root {
    --color-primary:     #7B42B0;   /* Violett mittel – Buttons, Links, Icons */
    --color-secondary:   #5A2485;   /* Violett dunkel – H1, Footer, Quotes   */
    --color-tint:        #C5A8E4;   /* Violett hell – Rahmen, Dekoration      */
    --color-bg-warm:     #F7F3FC;   /* Sektionshintergrund hell               */
    --color-text:        #2D2D2D;   /* Fließtext                              */
    --color-white:       #FFFFFF;
    --color-grey-light:  #F5F5F5;

    --font-base:         'Lato', sans-serif;

    --container-width:   1100px;
    --radius-btn:        4px;

    --spacing-section:   80px;
    --spacing-section-sm: 50px;
}

/* --- Reset & Basis --- */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--color-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
}

/* --- Typografie --- */
h1, .elementor-widget-heading .elementor-heading-title.elementor-size-xxl,
h1.elementor-heading-title {
    font-family: var(--font-base);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 300;
    line-height: 1.2;
    color: var(--color-secondary);
    letter-spacing: -0.3px;
}

h2, .elementor-widget-heading .elementor-heading-title.elementor-size-xl {
    font-family: var(--font-base);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-secondary);
}

h3, .elementor-widget-heading .elementor-heading-title.elementor-size-large {
    font-family: var(--font-base);
    font-size: clamp(18px, 2vw, 20px);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-primary);
}

p {
    margin-bottom: 1.2em;
    font-weight: 300;
}

p:last-child { margin-bottom: 0; }

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--color-secondary); }

ul, ol {
    padding-left: 1.4em;
    margin-bottom: 1.2em;
}
li { margin-bottom: 0.4em; }

/* --- Label / Kicker über Überschriften --- */
.monika-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 16px;
}

/* --- Elementor Container-Breite --- */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: var(--container-width);
}

/* --- Sektions-Abstände --- */
.elementor-section {
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
}
@media (max-width: 768px) {
    .elementor-section {
        padding-top: var(--spacing-section-sm);
        padding-bottom: var(--spacing-section-sm);
    }
}

/* --- Buttons --- */
.elementor-button,
.elementor-widget-button .elementor-button {
    font-family: var(--font-base) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    border-radius: var(--radius-btn) !important;
    padding: 14px 32px !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
    text-decoration: none !important;
}

/* Primär-Button */
.elementor-button.monika-btn-primary,
.monika-btn-primary .elementor-button {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: 1.5px solid var(--color-primary) !important;
}
.elementor-button.monika-btn-primary:hover,
.monika-btn-primary .elementor-button:hover {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

/* Sekundär-Button (Ghost) */
.elementor-button.monika-btn-secondary,
.monika-btn-secondary .elementor-button {
    background-color: transparent !important;
    color: var(--color-primary) !important;
    border: 1.5px solid var(--color-primary) !important;
}
.elementor-button.monika-btn-secondary:hover,
.monika-btn-secondary .elementor-button:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

/* Weißer Button (auf lila Hintergrund) */
.elementor-button.monika-btn-white,
.monika-btn-white .elementor-button {
    background-color: transparent !important;
    color: var(--color-white) !important;
    border: 1.5px solid var(--color-white) !important;
}
.elementor-button.monika-btn-white:hover,
.monika-btn-white .elementor-button:hover {
    background-color: var(--color-white) !important;
    color: var(--color-primary) !important;
}

/* --- Karten (Icon-Box / Feature-Boxes) --- */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
    background: var(--color-white);
    border-radius: 8px;
    padding: 32px 28px;
    box-shadow: 0 2px 16px rgba(91, 36, 133, 0.07);
    transition: box-shadow 0.2s ease;
    height: 100%;
}
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
    box-shadow: 0 4px 24px rgba(91, 36, 133, 0.13);
}
.elementor-widget-icon-box .elementor-icon-box-icon { margin-bottom: 16px; }
.elementor-widget-icon-box .elementor-icon { color: var(--color-primary) !important; }
.elementor-widget-icon-box .elementor-icon-box-title {
    color: var(--color-secondary) !important;
    font-weight: 600 !important;
}

/* --- Akkordeon (FAQ) --- */
.elementor-widget-accordion .elementor-accordion-item {
    border-bottom: 1px solid var(--color-tint) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}
.elementor-widget-accordion .elementor-tab-title {
    font-family: var(--font-base) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--color-secondary) !important;
    padding: 18px 0 !important;
    background: transparent !important;
}
.elementor-widget-accordion .elementor-tab-title.elementor-active {
    color: var(--color-primary) !important;
}
.elementor-widget-accordion .elementor-tab-content {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--color-text);
    padding: 0 0 20px 0 !important;
    background: transparent !important;
}
.elementor-widget-accordion .elementor-accordion-icon {
    color: var(--color-primary) !important;
}

/* --- CTA-Sektionen (lila Hintergrund) --- */
.monika-section-cta {
    background-color: var(--color-primary) !important;
}
.monika-section-cta h2,
.monika-section-cta .elementor-heading-title {
    color: var(--color-white) !important;
}
.monika-section-cta p,
.monika-section-cta .elementor-text-editor {
    color: rgba(255,255,255,0.92) !important;
}

/* --- Zitat-Sektion (Kernaussage) --- */
.monika-section-quote {
    background-color: var(--color-secondary) !important;
}
.monika-section-quote .elementor-heading-title,
.monika-section-quote p {
    color: var(--color-white) !important;
    font-style: italic;
    font-size: clamp(20px, 2.5vw, 26px) !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
}

/* --- Trennlinie --- */
.monika-divider { height: 1px; background: var(--color-tint); margin: 0; }

/* --- Kontaktformular --- */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea,
.wpforms-field input,
.wpforms-field textarea {
    font-family: var(--font-base) !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    border: 1px solid var(--color-tint) !important;
    border-radius: var(--radius-btn) !important;
    padding: 12px 16px !important;
    width: 100% !important;
    transition: border-color 0.2s ease !important;
    background: var(--color-white) !important;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpforms-field input:focus,
.wpforms-field textarea:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
}
.wpcf7-submit,
.wpforms-submit {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: var(--radius-btn) !important;
    padding: 14px 32px !important;
    font-family: var(--font-base) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}
.wpcf7-submit:hover,
.wpforms-submit:hover {
    background-color: var(--color-secondary) !important;
}

/* --- Impressum & Datenschutz (reiner Text) --- */
.monika-legal-content h2 { font-size: 20px; margin-top: 2.5em; }
.monika-legal-content h3 { font-size: 17px; margin-top: 1.8em; }
.monika-legal-content p, .monika-legal-content li { font-size: 15px; }
.monika-legal-content hr { border: none; border-top: 1px solid var(--color-tint); margin: 2em 0; }

/* --- Footer --- */
.site-footer,
.elementor-location-footer {
    background-color: #2D2D2D !important;
    color: #E8E0F5 !important;
}
.elementor-location-footer a {
    color: var(--color-tint) !important;
}
.elementor-location-footer a:hover {
    color: var(--color-white) !important;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    :root { --container-width: 90%; }
}
@media (max-width: 768px) {
    .elementor-col-50 { width: 100% !important; }
    .elementor-col-33, .elementor-col-25 { width: 100% !important; }
}