.elementor-kit-6{--e-global-color-primary:#3B2A21;--e-global-color-secondary:#C49E64;--e-global-color-text:#30251D;--e-global-color-accent:#C49E64;--e-global-color-044b3d8:#78695E;--e-global-color-de8d421:#FAF8F5;--e-global-color-ff70686:#F2EAE3;--e-global-color-be70f33:#E7E0DA;--e-global-color-917b4ff:#4B362A;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Playfair Display";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;--e-global-typography-649d2e4-font-family:"Inter";--e-global-typography-649d2e4-font-size:12px;--e-global-typography-649d2e4-font-weight:500;--e-global-typography-649d2e4-text-transform:uppercase;--e-global-typography-649d2e4-letter-spacing:2px;color:#30251D;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;line-height:1.6em;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:#3B2A21;font-family:"Inter", Sans-serif;font-size:14px;font-weight:500;color:#FAF8F5;border-radius:9999px 9999px 9999px 9999px;padding:14px 28px 14px 28px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:#4B362A;color:#FAF8F5;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 h1{color:#30251D;font-family:"Playfair Display", Sans-serif;font-size:60px;font-weight:500;}.elementor-kit-6 h2{color:#30251D;font-family:"Playfair Display", Sans-serif;font-size:48px;font-weight:500;}.elementor-kit-6 h3{color:#30251D;font-family:"Playfair Display", Sans-serif;font-size:22px;font-weight:500;}.elementor-kit-6 h4{color:#30251D;font-family:"Playfair Display", Sans-serif;font-size:18px;font-weight:500;}.elementor-kit-6 label{font-family:"Inter", Sans-serif;font-size:13px;font-weight:500;}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{font-family:"Inter", Sans-serif;font-size:14px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:20px;--container-default-padding-bottom:0px;--container-default-padding-left:20px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* Salon Köster — Kit Custom CSS
   Wird per wp post meta update <kit_id> _elementor_page_settings '{"custom_css":"..."}' deployed.
   Deckt site-*-Klassen ab, die vom Elementor-v4-Atomic-Editor nicht mehr als Widget-Settings übernommen werden. */

/* ==== Buttons ==== */
.site-btn-primary-dark .elementor-button,
.elementor-widget .site-btn-primary-dark {
    background-color: #3B2A21 !important;
    color: #FAF8F5 !important;
    border-radius: 9999px !important;
    padding: 14px 28px !important;
    font-family: Inter, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 0 !important;
    transition: opacity .2s;
}
.site-btn-primary-dark .elementor-button:hover,
.elementor-widget .site-btn-primary-dark:hover {
    opacity: 0.9;
    background-color: #3B2A21 !important;
}

.site-btn-outline .elementor-button,
.elementor-widget .site-btn-outline {
    background-color: #FAF8F5 !important;
    color: #30251D !important;
    border-radius: 9999px !important;
    padding: 14px 28px !important;
    font-family: Inter, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid #E7E0DA !important;
    transition: background-color .2s;
}
.site-btn-outline .elementor-button:hover,
.elementor-widget .site-btn-outline:hover {
    background-color: #F2EAE3 !important;
    color: #30251D !important;
}

/* ==== Hero: Rating-Overlay (absolut positioniert auf Hero-Bild) ==== */
.site-overlay-parent {
    position: relative !important;
}
.site-rating-box {
    position: absolute !important;
    bottom: -24px !important;
    left: -24px !important;
    width: 224px !important;
    z-index: 2 !important;
}
@media (max-width: 767px) {
    .site-rating-box { display: none !important; }
}

/* ==== About: 15+ Jahre Stats-Badge (absolut auf About-Bild) ==== */
.site-stats-badge {
    position: absolute !important;
    right: -16px !important;
    bottom: 32px !important;
    z-index: 2 !important;
}
@media (max-width: 767px) {
    .site-stats-badge { display: none !important; }
}

/* ==== Hello-Elementor Page-Title verstecken ====
   Hello-Theme rendert default the_title() als h1.entry-title in .page-header oben auf jeder Page.
   Bei Theme-Builder-Header + eigenem Hero-H1 in der Page-Section ist das ein doppeltes H1.
   Versteckt — die echten H1 (Hero, Impressum, Datenschutz) sind in den Sections selbst. */
.page-header,
.entry-title {
    display: none !important;
}

/* ==== Sticky Navigation ====
   Theme-Builder-Header läuft als <header> Tag mit data-elementor-type="header".
   Sticky-Behavior wird vom Container-Setting sticky:'top' gesetzt. Background opaker für
   bessere Sichtbarkeit beim Scrollen. */
header[data-elementor-type="header"] {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}
header[data-elementor-type="header"] .site-header,
.site-header {
    background-color: rgba(250, 248, 245, 0.96) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(231, 224, 218, 0.6);
}

/* ==== Nav-Menu Widget — Link Colors überschreiben ====
   Elementor-Pro Nav-Menu rendert in v4 Atomic mit Default-Pink (#CC3366). Mein
   menu_item_color-Setting im Widget greift nicht. Hier explizit setzen für Header + Footer. */
.elementor-nav-menu a,
.elementor-nav-menu a:link,
.elementor-nav-menu a:visited {
    color: #30251D !important;          /* fg */
    font-family: Inter, sans-serif !important;
    text-decoration: none !important;
    transition: color .2s, opacity .2s;
}
header[data-elementor-type="header"] .elementor-nav-menu a {
    font-size: 14px !important;
    font-weight: 500 !important;
    opacity: 0.85;
}
header[data-elementor-type="header"] .elementor-nav-menu a:hover {
    color: #3B2A21 !important;          /* primary (espresso) */
    opacity: 1;
}
footer[data-elementor-type="footer"] .elementor-nav-menu a {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #78695E !important;          /* muted fg */
}
footer[data-elementor-type="footer"] .elementor-nav-menu a:hover {
    color: #30251D !important;          /* fg */
}

/* ==== Mobile-Hamburger: Toggle Color ==== */
.elementor-menu-toggle {
    color: #30251D !important;
}
.elementor-menu-toggle svg {
    fill: #30251D !important;
}

/* ==== Mobile: alte site-nav-links inline-HTML ist im Theme-Builder-Header nicht mehr vorhanden — Regel obsolet ====
   (Selektoren bleiben als no-op stehen, schaden nicht falls jemand inline-Nav wieder einsetzt) */
@media (max-width: 767px) {
    .site-header .site-nav-links,
    .site-header .site-phone-link {
        display: none !important;
    }
}

/* ==== Social-Icons im Footer ====
   Elementor-Default-Settings greifen in v4 nicht zuverlässig (Default-Grau #69727D, falsche
   Border + falsche Hover-States). Hier konkret stylen. */
footer[data-elementor-type="footer"] .elementor-widget-social-icons .elementor-social-icon,
.elementor-widget-social-icons .elementor-social-icon {
    background-color: transparent !important;
    color: #78695E !important;
    border: 1px solid #E7E0DA !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color .2s, color .2s, border-color .2s;
}
footer[data-elementor-type="footer"] .elementor-widget-social-icons .elementor-social-icon svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}
footer[data-elementor-type="footer"] .elementor-widget-social-icons .elementor-social-icon:hover {
    background-color: #F2EAE3 !important;     /* secondary */
    color: #30251D !important;                /* fg */
    border-color: #E7E0DA !important;
}

/* ==== Feature Cards — subtle hover lift ==== */
.site-feature-card {
    transition: border-color .25s, box-shadow .25s;
}
.site-feature-card:hover {
    border-color: rgba(59, 42, 33, 0.3) !important;
    box-shadow: 0 6px 16px -6px rgba(59, 42, 33, 0.12);
}

/* ==== Price-List ====
   Preise-Layout ist jetzt ein strukturiertes <ul> in einem text-editor Widget (inline-HTML mit
   Tailwind-ähnlichen styles — matcht Lovable Pricing.tsx 1:1). Kein Kit-CSS nötig, alle Styles
   sind inline im generierten HTML. Der alte Block mit .elementor-price-list-* Regeln war obsolet. */

/* ==== FAQ Toggle styling ==== */
.site-faq .elementor-toggle-item {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #E7E0DA !important;
}
.site-faq .elementor-tab-title {
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #30251D !important;
    padding: 20px 0 !important;
}
.site-faq .elementor-tab-content {
    color: #78695E !important;
    line-height: 1.7 !important;
    font-size: 15px !important;
    padding: 0 0 20px !important;
    border-top: 0 !important;
}

/* ==== Testimonials on dark background ==== */
.site-testimonial-dark {
    color: rgba(250, 248, 245, 0.9);
}

/* ==== Map-Container: Höhe 100% durch text-editor-Wrapper propagieren ====
   Damit das Map-Bild auf Desktop die gleiche Höhe wie der left-Stack bekommt,
   müssen alle Wrappers ZWISCHEN dem Container und dem map-Inner-Div height:100% durchreichen.
   WICHTIG: Den Container selbst NICHT mit height:100% setzen — das würde flex_align_items:stretch
   im Parent überschreiben und das Stretching kaputt machen.

   Alternativer Pfad: das outer text-editor div bekommt display:flex, sodass das innere div in den
   verfügbaren Raum wächst. */
.site-map-container > .elementor-widget-text-editor,
.site-map-container > .elementor-widget-text-editor > .elementor-widget-container {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
.site-map-container .elementor-widget-text-editor > .elementor-widget-container > div {
    flex: 1 1 auto !important;
}

/* ==== Booking + Contact Forms — großzügigere Felder (Elementor-Default ist zu eng) ==== */
.site-booking-form .elementor-form .elementor-field,
.site-contact-form .elementor-form .elementor-field {
    padding: 14px 16px !important;
    height: auto !important;
    min-height: 48px !important;
    font-size: 14px !important;
}
.site-booking-form .elementor-form .elementor-field-textual,
.site-contact-form .elementor-form .elementor-field-textual {
    padding: 14px 16px !important;
    line-height: 1.4;
}
.site-booking-form .elementor-form,
.site-contact-form .elementor-form {
    row-gap: 20px !important;
}
.site-booking-form .elementor-field-group,
.site-contact-form .elementor-field-group {
    margin-bottom: 8px;
}
.site-booking-form .elementor-field-group textarea,
.site-contact-form .elementor-field-group textarea {
    min-height: 120px !important;
}

/* ==== Testimonial cards — innere Struktur für uniforme Trennlinie ====
   Der Flex-Container macht die Cards gleich hoch (via parent flex_align_items:stretch),
   das .elementor-widget-text-editor mit der Quote bekommt flex:1, damit die Caption unten sitzt. */
.site-testimonial-dark .elementor-widget-text-editor:nth-child(2) {
    flex-grow: 1;
}

/* ==== Section anchor offset for sticky nav ==== */
section[id], [id="leistungen"], [id="ueber-uns"], [id="stimmen"], [id="preise"], [id="termin"], [id="faq"], [id="kontakt"] {
    scroll-margin-top: 80px;
}/* End custom CSS */