/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain: Avada
*/

/* =========================================================
   AVADA CHILD THEME – CENTRAL CUSTOM CSS (2026-02)
   Clean + consolidated version

   Requires (already set by you):
   - JS adds body.is-scrolled when scrollY > 20
========================================================= */


/* -----------------------------
   0) Minimal base reset
----------------------------- */
html, body{
  margin: 0;
  padding: 0;
}


/* -----------------------------
   1) HEADER – Global fixed + layout safety
----------------------------- */

/* Fixed header (global) */
.fusion-tb-header{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
}

/* Admin Bar Offset */
body.admin-bar .fusion-tb-header{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .fusion-tb-header{ top: 46px; }
}

/* Header row sizing / vertical alignment */
.fusion-tb-header .fusion-builder-row{
  min-height: 90px;
  padding-top: 10px;
  padding-bottom: 10px;
  align-items: center;
}

/* Avoid clipping dropdowns / mobile menu */
.fusion-tb-header,
.fusion-tb-header .fusion-fullwidth,
.fusion-tb-header .fusion-builder-row,
.fusion-tb-header .fusion-layout-column,
.fusion-tb-header .fusion-column-wrapper{
  overflow: visible;
}

/* Background base:
   - Home starts transparent (overlay feel)
   - Subpages stay white
*/
body.home .fusion-tb-header .fusion-fullwidth,
body.home .fusion-tb-header .fusion-builder-row{
  background: transparent;
  box-shadow: none;
}

body:not(.home) .fusion-tb-header .fusion-fullwidth,
body:not(.home) .fusion-tb-header .fusion-builder-row{
  background: #fff;
  box-shadow: none;
}

/* Home: remove reserved bar behind header wrapper (keeps overlay feel) */
@media (min-width: 801px){
  body.home .fusion-header-wrapper{
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
  }

  body.home #wrapper,
  body.home #main,
  body.home #content,
  body.home #sliders-container{
    margin-top: 0;
    padding-top: 0;
  }
}


/* -----------------------------
   1b) HEADER – Smoke on scroll (JS: body.is-scrolled)
   Home: dark smoke (white nav)
   Subpages: light glass (black nav)
----------------------------- */

/* Prepare overlay layer on scroll */
body.is-scrolled .fusion-tb-header .fusion-fullwidth,
body.is-scrolled .fusion-tb-header .fusion-builder-row{
  position: relative;
}

/* Base overlay element */
body.is-scrolled .fusion-tb-header .fusion-fullwidth::before,
body.is-scrolled .fusion-tb-header .fusion-builder-row::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
}

/* Keep header content above overlay */
body.is-scrolled .fusion-tb-header .fusion-column-wrapper,
body.is-scrolled .fusion-tb-header .fusion-builder-row-content,
body.is-scrolled .fusion-tb-header .fusion-row{
  position: relative;
  z-index: 1;
}

/* Home: dark smoke */
@media (min-width: 801px){
  body.home.is-scrolled .fusion-tb-header .fusion-fullwidth::before,
  body.home.is-scrolled .fusion-tb-header .fusion-builder-row::before{
    background: rgba(0,0,0,0.62);
  }
}

/* Subpages: light glass */
body:not(.home).is-scrolled .fusion-tb-header .fusion-fullwidth::before,
body:not(.home).is-scrolled .fusion-tb-header .fusion-builder-row::before{
  background: rgba(255,255,255,0.78);
}

/* Shadow (both) */
body.is-scrolled .fusion-tb-header{
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

/* =========================================================
   AWB Navigation – aktiver Menüpunkt auf Unterseiten lesbar
   (GLOBAL FIX)
   ========================================================= */

.awb-menu__li{
  position: relative;
}

.awb-menu__li > .awb-menu__main-background-default,
.awb-menu__li > .awb-menu__main-background-active{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.awb-menu__li > a.awb-menu__main-a{
  position: relative;
  z-index: 2;
}

body:not(.home) .awb-menu__main-a .menu-text{
  color: #1a1a1a !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

/* =========================================================
   Navigation: externer Shop-Link nur auf Desktop ausblenden
   ========================================================= */

@media (min-width: 1025px){
  .awb-menu__main-a[href*="marelli-hairshop.de"]{
    display: none;
  }
}

/* =========================================================
   Navigation: Telefon-Link nur auf Desktop ausblenden
   (Icon bleibt sichtbar)
   ========================================================= */

@media (min-width: 1025px){
  .awb-menu__main-a[href^="tel:"]{
    display: none;
  }
}


/* -----------------------------
   2) Logo switch + color system
   (expects .logo-white and .logo-black wrappers)
----------------------------- */
.fusion-tb-header .logo-white img,
.fusion-tb-header .logo-black img{
  display: block;
  max-height: 70px;
  height: auto;
  width: auto;
}

/* show correct logo */
body.home .fusion-tb-header .logo-white{ display: block; }
body.home .fusion-tb-header .logo-black{ display: none; }

body:not(.home) .fusion-tb-header .logo-white{ display: none; }
body:not(.home) .fusion-tb-header .logo-black{ display: block; }

/* Base colors (default state) */
body.home .fusion-tb-header{ color: #fff; }
body:not(.home) .fusion-tb-header{ color: #000; }

/* Icons default via currentColor */
.fusion-tb-header i,
.fusion-tb-header .fusion-icon{
  color: currentColor;
}
.fusion-tb-header svg,
.fusion-tb-header svg *{
  fill: currentColor;
  stroke: currentColor;
}

/* Home: phone/icon must be white (robust for inline SVG) */
body.home .fusion-tb-header .fusion-icon,
body.home .fusion-tb-header .fusion-icon-element,
body.home .fusion-tb-header .fusion-icon i,
body.home .fusion-tb-header .fusion-icon svg,
body.home .fusion-tb-header .fusion-icon svg *,
body.home .fusion-tb-header .fusion-icon-element svg,
body.home .fusion-tb-header .fusion-icon-element svg *{
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* HOME – Top-level nav: white normal, black on hover */
body.home .fusion-tb-header .fusion-main-menu > ul > li > a,
body.home .fusion-tb-header .fusion-menu > ul > li > a{
  color: #fff !important;
  transition: color .2s ease, opacity .2s ease;
}

/* Avada Hover-Trigger */
body.home .fusion-tb-header .fusion-main-menu > ul > li:hover > a,
body.home .fusion-tb-header .fusion-menu > ul > li:hover > a,
body.home .fusion-tb-header .fusion-main-menu > ul > li > a:hover,
body.home .fusion-tb-header .fusion-menu > ul > li > a:hover{
  color: #000 !important;
}

/* Falls Text in SPAN liegt */
body.home .fusion-tb-header .fusion-main-menu > ul > li > a span,
body.home .fusion-tb-header .fusion-menu > ul > li > a span{
  color: inherit !important;
}


/* Subpages: force black (robust against menu element link colors) */
body:not(.home) .fusion-tb-header,
body:not(.home) .fusion-tb-header a,
body:not(.home) .fusion-tb-header .fusion-icon,
body:not(.home) .fusion-tb-header .fusion-icon-element,
body:not(.home) .fusion-tb-header svg,
body:not(.home) .fusion-tb-header svg *{
  color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
}


/* -----------------------------
   2b) Navigation behavior
   - Home: top-level white, hover black
   - Subpages: top-level black, hover stays black
----------------------------- */

/* HOME – Top-level only (do NOT touch dropdown here) */
body.home .fusion-tb-header .fusion-main-menu > ul > li > a,
body.home .fusion-tb-header .fusion-menu > ul > li > a{
  color: #fff !important;
  transition: color .2s ease, opacity .2s ease;
}
body.home .fusion-tb-header .fusion-main-menu > ul > li:hover > a,
body.home .fusion-tb-header .fusion-menu > ul > li:hover > a{
  color: #000 !important;
}

/* SUBPAGES – Top-level stays black even on hover */
body:not(.home) .fusion-tb-header .fusion-main-menu > ul > li > a,
body:not(.home) .fusion-tb-header .fusion-menu > ul > li > a{
  color: #000 !important;
}
body:not(.home) .fusion-tb-header .fusion-main-menu > ul > li:hover > a,
body:not(.home) .fusion-tb-header .fusion-menu > ul > li:hover > a,
body:not(.home) .fusion-tb-header nav li:hover > a{
  color: #000 !important;
}


/* -----------------------------
   2c) Dropdown menus – always readable
   (white background + black text)
----------------------------- */

/* Dropdown panels */
.fusion-tb-header .fusion-main-menu ul.sub-menu,
.fusion-tb-header .fusion-menu ul.sub-menu,
.fusion-tb-header ul.sub-menu,
.fusion-tb-header .fusion-megamenu-wrapper,
.fusion-tb-header .fusion-megamenu-holder{
  background: #fff !important;
}

/* Dropdown links */
.fusion-tb-header .fusion-main-menu ul.sub-menu a,
.fusion-tb-header .fusion-menu ul.sub-menu a,
.fusion-tb-header ul.sub-menu a,
.fusion-tb-header .fusion-megamenu-wrapper a,
.fusion-tb-header .fusion-megamenu-holder a{
  color: #000 !important;
}

/* Dropdown hover */
.fusion-tb-header .fusion-main-menu ul.sub-menu li:hover > a,
.fusion-tb-header .fusion-menu ul.sub-menu li:hover > a,
.fusion-tb-header ul.sub-menu li:hover > a,
.fusion-tb-header .fusion-megamenu-wrapper li:hover > a{
  color: #000 !important;
  background: rgba(0,0,0,0.06) !important;
}

/* Safety: spans */
.fusion-tb-header ul.sub-menu a span,
.fusion-tb-header .fusion-megamenu-wrapper a span{
  color: inherit !important;
}


/* -----------------------------
   3) Mobile menu panel placement + hide header icons (mobile)
----------------------------- */
@media (max-width: 800px){
  .fusion-tb-header .fusion-mobile-nav-holder{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999999;
  }
}

@media (max-width: 800px){
  .fusion-tb-header .fusion-icon,
  .fusion-tb-header .fusion-icon-element,
  .fusion-tb-header .fusion-social-networks,
  .fusion-tb-header .fusion-woo-cart,
  .fusion-tb-header .fusion-woo-cart-icon{
    display: none !important;
  }
}


/* -----------------------------
   4) Hero: soft panel + mobile positioning (.hero-copy)
----------------------------- */
.hero-copy{
  position: relative;
  isolation: isolate;
}
.hero-copy::before{
  content:"";
  position:absolute;
  inset:-4vh -4vw;
  z-index:0;
  pointer-events:none;
  background: radial-gradient(
    ellipse at 30% 35%,
    rgba(0,0,0,0.38) 0%,
    rgba(0,0,0,0.18) 38%,
    rgba(0,0,0,0.00) 72%
  );
  filter: blur(14px);
  transform: translateZ(0);
}
.hero-copy *{
  position: relative;
  z-index: 1;
}

/* HOME Mobile hero: H1 tiefer (untere Bildmitte) + centered subline */
@media (max-width: 800px){
  .hero-copy > .fusion-column-wrapper{
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    align-items: center;
    text-align: center;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 38vh !important; /* your final tuning */
    padding-bottom: 0 !important;
    box-sizing: border-box;
  }

  .hero-copy h1{
    margin: 0 0 0.5em;
    font-size: clamp(3rem, 9vw, 3.6rem);
    line-height: 1.02;
  }

  .hero-copy .fusion-text,
  .hero-copy p{
    font-size: clamp(0.9rem, 2.9vw, 1.0rem);
    line-height: 1.45;
    opacity: 0.92;
    margin: 0;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    max-width: 32ch;
  }
}


/* -----------------------------
   5) Editorial blocks (Section 3 + shared pattern)
----------------------------- */
.precision-editorial{
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}
.precision-editorial h2{ margin: 0 0 0.6em; }
.precision-editorial p{ margin: 0 0 0.9em; }
.precision-editorial p:last-child{ margin-bottom: 0; }

.fusion-body .precision-editorial{
  padding-left: 18px;
  padding-right: 18px;
  box-sizing: border-box;
}
@media (min-width: 768px){
  .fusion-body .precision-editorial{
    padding-left: 0;
    padding-right: 0;
  }
}


/* -----------------------------
   6) Section 2: DOM mobile-first (Bild -> Text), Desktop reverse
----------------------------- */
@media (min-width: 801px){
  .s2-scope .fusion-row,
  .s2-scope .fusion-builder-row-content{
    display: flex !important;
    flex-direction: row-reverse !important;
  }

  .s2-scope .fusion-layout-column{
    float: none !important;
  }
}


/* -----------------------------
   7) Section 4 (Spezialisierung) – FINAL
----------------------------- */

/* Keep Avada grid width; do not shrink the column itself */
.s4-head,
.s4-copy,
.s4-media{
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Constrain only inner content wrapper (editorial width) */
.s4-head > .fusion-column-wrapper,
.s4-copy > .fusion-column-wrapper{
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Headline + subline */
.s4-head h2{ margin: 0 0 0.35em; }
.s4-subline{
  margin: 0;
  opacity: 0.7;
  font-size: 0.95em;
}

/* Copy rhythm */
.s4-copy{ line-height: 1.55; }
.s4-copy h2,
.s4-copy h3{ margin: 0 0 0.6em; }
.s4-copy p{ margin: 0 0 0.9em; }
.s4-copy p:last-child{ margin-bottom: 0; }

/* Images */
.s4-media img{
  width: 100%;
  height: auto;
  display: block;
}

/* Editorial link */
.s4-copy a{
  color: currentColor;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.s4-copy a:hover{ opacity: 0.7; }

/* Mobile engine */
@media (max-width: 800px){
  .s4-item{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
    margin-bottom: 26px;
  }

  .s4-item .fusion-layout-column{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    clear: none !important;
  }

  .s4-media{ order: 1 !important; }
  .s4-copy{  order: 2 !important; }

  /* Safe padding inside editorial wrappers */
  .s4-head > .fusion-column-wrapper,
  .s4-copy > .fusion-column-wrapper{
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Extensions spacing */
  .s4-item.s4-reverse{ gap: 28px !important; }
  .s4-item.s4-reverse .s4-copy > .fusion-column-wrapper{
    padding-top: 22px !important;
  }

  /* Home mobile: prevent "right shift" in S4 copy (your working fix) */
  body.home .s4-copy,
  body.home .s4-head{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.home .s4-copy > .fusion-column-wrapper,
  body.home .s4-head > .fusion-column-wrapper{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box;
  }

  body.home .s4-copy .fusion-text,
  body.home .s4-copy h2,
  body.home .s4-copy h3,
  body.home .s4-copy p{
    max-width: 36ch;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  .s4-item:last-of-type{ margin-bottom: 0; }
}

/* Desktop engine */
@media (min-width: 801px){
  .s4-item{
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
    margin-bottom: 48px;
  }

  .s4-item .fusion-layout-column{
    float: none !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin: 0 !important;
    clear: none !important;
  }

  .s4-item.s4-reverse{ flex-direction: row-reverse !important; }

  .s4-head > .fusion-column-wrapper,
  .s4-copy > .fusion-column-wrapper{
    padding-left: 0;
    padding-right: 0;
  }

  .s4-item:last-of-type{ margin-bottom: 0; }
}

/* FORCE reverse (fallback) */
@media (min-width: 801px){
  .s4-item.s4-reverse{ flex-direction: row-reverse !important; }
  .s4-item.s4-reverse .fusion-row,
  .s4-item.s4-reverse .fusion-builder-row-content{
    display: flex !important;
    flex-direction: row-reverse !important;
  }
}


/* -----------------------------
   8) Mobile: safe padding for text blocks (Hero excluded)
----------------------------- */
@media (max-width: 800px){
  body.home #main .fusion-text{
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
    box-sizing: border-box;
  }

  body.home #main .hero-copy .fusion-text{
    padding-left: 0;
    padding-right: 0;
  }
}


/* -----------------------------
   9) COOKIE NOTICE – Mobile Slim (SAFE) – FINAL
----------------------------- */
@media (max-width: 800px){

  .cookie-notice-container::before{
    content: none !important;
  }

  .cookie-notice-container{
    display: block !important;

    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;

    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    padding: 10px 12px !important;
    border-radius: 12px !important;

    background: rgba(0,0,0,0.70) !important;
    color: #fff !important;

    box-shadow: 0 10px 30px rgba(0,0,0,0.18) !important;
    z-index: 999999 !important;

    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .cookie-notice-container .container-fluid{
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  .cookie-notice-container .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  .cookie-notice-container [class*="col"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .cookie-notice-container p,
  .cookie-notice-container .cookie-notice-message,
  .cookie-notice-container .cn-text-container{
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  .cookie-notice-container .cn-button,
  .cookie-notice-container button,
  .cookie-notice-container a{
    display: inline-block !important;
    width: auto !important;

    margin-top: 8px !important;
    padding: 7px 10px !important;

    min-height: 34px !important;
    font-size: 12.5px !important;
    border-radius: 10px !important;

    white-space: nowrap !important;
  }

  .cookie-notice-container *{
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
}


/* -----------------------------
   10) HOME – Global Spacing Rhythmus (Sections)
----------------------------- */
@media (min-width: 801px){
  body.home .home-section{
    padding-top: clamp(64px, 6vw, 110px);
    padding-bottom: clamp(64px, 6vw, 110px);
  }
}
@media (max-width: 800px){
  body.home .home-section{
    padding-top: clamp(44px, 7vw, 72px);
    padding-bottom: clamp(44px, 7vw, 72px);
  }
}

/* Extra breathing room before footer (last section only) */
body.home .home-last{
  padding-bottom: clamp(80px, 8vw, 140px) !important;
}

/* HOME – Section 4 internal tightening */
body.home .s4-specialties.home-section{ padding-bottom: 0 !important; }
body.home .s4-item.home-section{ padding-top: 0 !important; }
body.home .s4-item.home-section + .s4-item.home-section{ padding-top: 0 !important; }


/* -----------------------------
   11) HOME – Mobile micro spacing fixes
----------------------------- */
@media (max-width: 800px){
  body.home .s3-scope.home-section{
    padding-top: 36px !important;
  }

  body.home .s3-scope h2{
    clear: both;
    position: relative;
    z-index: 2;
    margin-top: 18px !important;
  }

  body.home .s3-scope .fusion-imageframe,
  body.home .s3-scope .fusion-image-element{
    margin-bottom: 14px !important;
  }
}


/* -----------------------------
   12) Subpages: spacing under fixed header (FINAL)
   - robuster für Avada Flex Containers
   - verhindert Header-Overlap auf Unterseiten
----------------------------- */
body:not(.home) #main > *:first-child{
  padding-top: clamp(120px, 14vw, 180px);
}

/* Mobile: etwas kompakter, aber sicher genug */
@media (max-width: 1024px){
  body:not(.home) #main > *:first-child{
    padding-top: 120px;
  }
}


/* -----------------------------
   13) BALAYAGE – Hero + Images (editorial) [FINAL]
----------------------------- */

.balayage-hero-image{
  margin-top: clamp(34px, 4vw, 54px);
  margin-bottom: clamp(44px, 6vw, 76px);
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Zentrierung + Editorial-Width auf Avada-Row-Ebene */
.balayage-hero-image .fusion-row,
.balayage-hero-image .fusion-builder-row-content{
  max-width: 1020px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Balayage – Hero Image entkoppeln von Row-Padding */
.balayage-hero-image .fusion-imageframe{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Portrait-Hero korrekt darstellen */
.balayage-hero-image .fusion-imageframe{
  width: 100%;
  max-width: 720px;
  aspect-ratio: 4 / 5;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.balayage-hero-image .fusion-imageframe img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Desktop: Hero schmaler für Editorial-Balance */
@media (min-width: 1200px){
  .balayage-hero-image .fusion-row,
  .balayage-hero-image .fusion-builder-row-content{
    max-width: 940px;
  }
}

/* Wrapper-Padding neutral halten */
.balayage-hero-image .fusion-column-wrapper{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Bild sauber */
.balayage-hero-image .fusion-imageframe{
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

.balayage-hero-image img{
  width: 100%;
  height: auto;
  max-height: 72vh;
  display: block;
}

/* Mobile: Rhythmus straffen (damit H3 näher ans Bild rückt) */
@media (max-width: 1024px){
  .balayage-hero-image{
    margin-top: 18px;
    margin-bottom: 26px;
  }
}


/* Balayage – Image 2 insert */
.balayage-image-2{
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 40px);
  margin-bottom: clamp(56px, 7vw, 88px);
}

.balayage-image-2 .fusion-imageframe,
.balayage-image-2 .fusion-image-element{
  max-width: 520px;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 1200px){
  .balayage-image-2 .fusion-imageframe,
  .balayage-image-2 .fusion-image-element{
    max-width: 480px;
  }
}

.balayage-image-2 img{
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 800px){
  .balayage-image-2 .fusion-imageframe,
  .balayage-image-2 .fusion-image-element{
    max-width: none;
    padding-left: 18px;
    padding-right: 18px;
    box-sizing: border-box;
  }
}


/* Balayage – Detail figure */
.balayage-detail-figure{
  padding-top: clamp(18px, 3vw, 34px);
  padding-bottom: clamp(34px, 5vw, 64px);
}

.balayage-detail-figure .fusion-row,
.balayage-detail-figure .fusion-builder-row-content{
  justify-content: center !important;
}

.balayage-detail-figure .fusion-imageframe{
  display: block !important;
  width: 100% !important;
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.balayage-detail-figure img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

@media (min-width: 1200px){
  .balayage-detail-figure .fusion-imageframe{
    max-width: 480px !important;
  }
}

@media (max-width: 800px){
  .balayage-detail-figure .fusion-imageframe{
    max-width: none !important;
    width: calc(100% - 36px) !important;
  }
}


/* -----------------------------
   13b) BALAYAGE – Editorial Copy (H2/H3) [FINAL]
   - KEIN extra Mobile padding-top mehr (kommt aus Sektion 12)
   - H3 näher ans Hero auf Mobile
----------------------------- */

/* Desktop: Editorial Copy auf Hero-Breite */
@media (min-width: 1025px){
  .precision-editorial{
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
}

/* Desktop: Copy auch auf 940px, wenn Hero 940px ist */
@media (min-width: 1200px){
  .precision-editorial{
    max-width: 940px;
  }
}

/* Desktop: H3 Rhythmus */
@media (min-width: 1025px){
  .precision-editorial h3{
    margin-top: 32px;
    margin-bottom: 16px;
  }

  .precision-editorial h3 + p,
  .precision-editorial h3 + .fusion-text{
    margin-top: 0;
  }
}

/* Mobile: H3 näher ans Hero (erster H3-Block direkt nach dem Hero) */
@media (max-width: 1024px){
  .balayage-hero-image + .precision-editorial h3{
    margin-top: 10px;
  }

  .precision-editorial h3{
    margin-bottom: 14px;
  }

  .precision-editorial h3 + p,
  .precision-editorial h3 + .fusion-text{
    margin-top: 0;
  }
}

/* Balayage Hero: auf Retina scharf wirken (1400px Quelle) */
@media (min-width: 1200px){
  .balayage-hero-image .fusion-row,
  .balayage-hero-image .fusion-builder-row-content{
    max-width: 760px; /* 700–820 je nach gewünschtem Look */
  }
}

/* =========================================================
   14) Kontakt
   Editorial · ruhig · mobil sauber
   ========================================================= */

/* ---------------------------------------------------------
   Contact Hero
   --------------------------------------------------------- */
.contact-hero{
  padding: clamp(56px, 6vw, 96px) 0;
}

.contact-hero h1{
  margin: 0 0 10px 0;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.contact-hero p{
  margin: 0;
  max-width: 62ch;
  opacity: 0.9;
}


/* ---------------------------------------------------------
   Primary Area (Instagram + Formular)
   --------------------------------------------------------- */
.contact-primary{
  padding: 0 0 clamp(56px, 6vw, 96px) 0;
}

/* Cards */
.contact-instagram,
.contact-form-card{
  background: #fff;
  border: 1px solid rgba(26,26,26,0.10);
  border-radius: 18px;
  padding: clamp(18px, 2.2vw, 28px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Headings in Cards */
.contact-instagram h2,
.contact-form-card h2{
  margin: 0 0 10px 0;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Text in Cards */
.contact-instagram p,
.contact-form-card p{
  margin: 0 0 14px 0;
  opacity: 0.92;
}

/* Instagram Icon im Heading (ruhig) */
.contact-instagram h2 i{
  font-size: 0.9em;
  margin-right: 8px;
  opacity: 0.6;
}

/* Button ruhig rund */
.contact-instagram .fusion-button,
.contact-form-card .fusion-button{
  border-radius: 999px;
}


/* ---------------------------------------------------------
   Contact Form 7 – neutral & hochwertig
   --------------------------------------------------------- */
.contact-form-card .wpcf7{
  margin-top: 6px;
}

.contact-form-card .wpcf7 p{
  margin: 0 0 12px 0;
}

.contact-form-card .wpcf7 input[type="text"],
.contact-form-card .wpcf7 input[type="email"],
.contact-form-card .wpcf7 input[type="tel"],
.contact-form-card .wpcf7 textarea{
  width: 100%;
  border: 1px solid rgba(26,26,26,0.16);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.96);
  box-shadow: none;
}

.contact-form-card .wpcf7 textarea{
  min-height: 140px;
  resize: vertical;
}

.contact-form-card .wpcf7 input:focus,
.contact-form-card .wpcf7 textarea:focus{
  outline: none;
  border-color: rgba(26,26,26,0.42);
}

.contact-form-card .wpcf7 input[type="submit"]{
  width: 100%;
  border: 1px solid rgba(26,26,26,0.18);
  border-radius: 999px;
  padding: 12px 16px;
  background: #1a1a1a;
  color: #fff;
  cursor: pointer;
}


/* ---------------------------------------------------------
   Secondary Info
   --------------------------------------------------------- */
.contact-secondary{
  padding: 0 0 clamp(56px, 6vw, 96px) 0;
}

.contact-secondary h3{
  margin-top: 0;
  font-weight: 500;
}


/* ---------------------------------------------------------
   MOBILE SPACING (FINAL)
   --------------------------------------------------------- */
@media (max-width: 800px){

  /* Hero → Cards */
  .contact-hero{
    padding-bottom: 40px;
  }

  /* Abstand zwischen Cards */
  .contact-instagram{
    margin-bottom: 28px;
  }

  /* Text → Button */
  .contact-instagram .fusion-button{
    margin-top: 16px;
  }

  /* Formular Heading → Felder */
  .contact-form-card h2{
    margin-bottom: 18px;
  }

  /* Formular Felder Rhythmus */
  .contact-form-card .wpcf7 p{
    margin-bottom: 16px;
  }

  /* Submit Button Gewicht */
  .contact-form-card .wpcf7 input[type="submit"]{
    margin-top: 20px;
  }

  /* Secondary Abstand */
  .contact-secondary{
    padding-top: 48px;
  }
}

/* =========================================================
   15) Preise
   Editorial · ruhig · hochwertig
   ========================================================= */

.prices-hero{
  padding: clamp(56px, 6vw, 96px) 0;
}

.prices-hero h1{
  margin: 0 0 10px 0;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.prices-hero p{
  margin: 0;
  max-width: 65ch;
  opacity: 0.9;
}

/* Sections */
.prices-sections{
  padding: 0 0 clamp(56px, 6vw, 96px) 0;
}

/* Kategorie-Headlines */
.prices-sections h2{
  margin: 44px 0 16px 0;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.prices-sections h2:first-child{
  margin-top: 0;
}

/* Einträge */
.prices-sections p{
  margin: 0 0 14px 0;
  max-width: 78ch;
}

/* Preis-Highlight (dezent) */
.prices-sections .price{
  font-weight: 500;
  display: inline-block;
  margin-top: 4px;
}

/* Notes */
.prices-notes{
  padding: 0 0 clamp(56px, 6vw, 96px) 0;
}

.prices-notes p{
  max-width: 78ch;
  opacity: 0.92;
}

/* Abschlussbild */
.prices-image{
  padding: 0 0 clamp(56px, 6vw, 96px) 0;
}

.prices-image img{
  display: block;
  width: 100%;
  max-width: 980px;
  height: auto;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Mobile Rhythmus */
@media (max-width: 800px){
  .prices-hero{ padding-bottom: 40px; }

  .prices-sections h2{
    margin-top: 34px;
  }

  .prices-image img{
    border-radius: 16px;
  }
}

/* 16) Extensions – FINAL (Editorial · relaxed spacing) */

/* =========================
   SECTION SPACING (GLOBAL)
   ========================= */

/* Alle Hauptsektionen bekommen mehr vertikale Luft */
.ext-hero,
.ext-hero-image,
.ext-intro,
.ext-steps,
.ext-beforeafter,
.ext-trust,
.ext-trust-visual,
.ext-contact-hint{
  margin-top: 96px;
}

/* Hero startet ohne Abstand nach oben */
.ext-hero{
  margin-top: 0;
}

/* =========================
   TYPO & CONTENT
   ========================= */

/* Editorial Textbreite */
.ext-intro .fusion-text,
.ext-trust .fusion-text{
  max-width: 760px;
}

/* =========================
   COMPONENTS
   ========================= */

/* Steps – ruhige Karten */
.ext-steps .fusion-column-wrapper{
  border: 1px solid rgba(26,26,26,.10);
  border-radius: 16px;
  padding: 18px 18px 20px;
}

/* Hero-Image */
.ext-hero-image .fusion-column-wrapper{
  border-radius: 16px;
  overflow: hidden;
}

/* Before / After */
.ext-beforeafter .fusion-column-wrapper{
  border-radius: 16px;
  overflow: hidden;
}

@media (min-width: 1025px){
  .ext-beforeafter .fusion-imageframe img{
    transition: transform .35s ease, filter .35s ease;
  }
  .ext-beforeafter .fusion-imageframe:hover img{
    transform: scale(1.02);
    filter: contrast(1.03);
  }
}

/* Technik / Herkunft – Bild ruhig halten */
.ext-trust .fusion-imageframe{
  margin-bottom: 0;
}

/* Trust+ Visual */
.ext-trust-visual .fusion-column-wrapper{
  border-radius: 16px;
  overflow: hidden;
}

/* Textspalte Trust+ */
.ext-trust-visual .fusion-text{
  padding: 18px 18px 20px;
}

/* Before / After – gleiche Höhe der Bilder (Desktop) */
@media (min-width: 1025px){

  .ext-beforeafter .fusion-imageframe{
    width: 100%;
    aspect-ratio: 3 / 4; /* editorial & ruhig */
    overflow: hidden;
  }

  .ext-beforeafter .fusion-imageframe img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

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

.ext-contact-hint{
  border-top: 1px solid rgba(26,26,26,.12);
  padding-top: 36px;
}

@media (min-width: 1025px){

  /* Extensions – Trust Blocks: Columns gleich hoch */
  .ext-trust .fusion-row,
  .ext-trust-visual .fusion-row{
    display: flex;
    align-items: stretch;
  }

  /* Bild füllt die Column-Höhe sauber */
  .ext-trust .fusion-imageframe,
  .ext-trust-visual .fusion-imageframe{
    height: 100%;
  }

  .ext-trust .fusion-imageframe img,
  .ext-trust-visual .fusion-imageframe img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* 17) Team – FINAL (Editorial, reduziert) */

/* =========================
   SECTION SPACING
   ========================= */

.team-hero,
.team-hero-image,
.team-portraits,
.team-footer{
  margin-top: 96px;
}

.team-hero{
  margin-top: 0;
}

/* =========================
   HERO IMAGE
   ========================= */

.team-hero-image .fusion-column-wrapper{
  border-radius: 16px;
  overflow: hidden;
}

/* =========================
   PORTRAITS
   ========================= */

/* Card-Rahmen über Column Wrapper */
.team-portraits .fusion-column-wrapper{
  border: 1px solid rgba(26,26,26,.10);
  border-radius: 16px;
  overflow: hidden;
}

/* Portrait-Bild einheitlich & ruhig */
.team-portraits .fusion-imageframe{
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 0;
}

.team-portraits .fusion-imageframe img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text unter Bild – reduziert */
.team-portraits .fusion-text{
  padding: 16px 18px 18px;
}

.team-portraits h3{
  margin: 0 0 6px 0;
}

.team-portraits p{
  margin: 0;
}

/* zweite Zeile (Schwerpunkte) minimal Abstand */
.team-portraits p + p{
  margin-top: 6px;
}

/* =========================
   SINGLE PORTRAIT (Jennifer)
   ========================= */

.team-portraits-single .fusion-text{
  max-width: 780px;
}

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

.team-footer{
  border-top: 1px solid rgba(26,26,26,.12);
  padding-top: 36px;
}

/* =========================
   MOBILE FEINSCHLIFF
   ========================= */

@media (max-width: 640px){

  .team-hero,
  .team-hero-image,
  .team-portraits,
  .team-footer{
    margin-top: 72px;
  }

  .team-portraits .fusion-text{
    padding: 14px 16px 16px;
  }
}

/* Team – Single Portrait auf Card-Breite begrenzen */
@media (min-width: 1025px){

  .team-portraits-single .fusion-column{
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Team – Single Portrait wirklich auf Card-Breite begrenzen (Desktop) */
@media (min-width: 1025px){

  /* Card/Wrapper begrenzen + zentrieren (greift garantiert) */
  .team-portraits.team-portraits-single .fusion-column-wrapper{
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Sicherheit: auch Bild/Text nicht breiter als die Card */
  .team-portraits.team-portraits-single .fusion-imageframe,
  .team-portraits.team-portraits-single .fusion-text{
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =========================================
   HOME – Header Icons FINAL FORCE (wins always)
   (does NOT affect menu text hover rules)
========================================= */
body.home .fusion-tb-header a .fusion-icon,
body.home .fusion-tb-header a .fusion-icon-element,
body.home .fusion-tb-header a i,
body.home .fusion-tb-header .fusion-icon,
body.home .fusion-tb-header .fusion-icon-element,
body.home .fusion-tb-header i{
  color: #fff !important;
}

/* SVG / Paths (covers most Avada header icons) */
body.home .fusion-tb-header svg,
body.home .fusion-tb-header svg * ,
body.home .fusion-tb-header a svg,
body.home .fusion-tb-header a svg *{
  fill: #fff !important;
  stroke: #fff !important;
}

/* Some icons use <use> or hard-coded attributes */
body.home .fusion-tb-header svg use{
  fill: #fff !important;
  stroke: #fff !important;
}

/* =========================================
   HOME – Telefon-Icon FINAL (targets tel: link)
   Works for: <i>, inline svg, svg-as-img, png
========================================= */
body.home .fusion-tb-header a[href^="tel:"]{
  color: #fff !important;
}

/* If it's a real icon / inline svg */
body.home .fusion-tb-header a[href^="tel:"] i,
body.home .fusion-tb-header a[href^="tel:"] svg,
body.home .fusion-tb-header a[href^="tel:"] svg *{
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* If it's an image (black svg/png) */
body.home .fusion-tb-header a[href^="tel:"] img{
  filter: brightness(0) invert(1) !important;
}

/* Mobile: Content unter Sticky Header – noch näher (tighter) */
@media (max-width: 1024px){
  body.admin-bar #main{
    padding-top: 124px;
  }
  body:not(.admin-bar) #main{
    padding-top: 84px;
  }
}

/* =============================
   Mobile Header: gleiche Höhe auf Home & Unterseiten
============================= */
@media (max-width: 1024px){

  /* Unterseiten: Header kompakter */
  body:not(.home) .fusion-header{
    padding-top: 06px;
    padding-bottom: 06px;
  }

}

/* Home: kein Mobile-Offset im Main (sonst weißer Balken / Hero rutscht runter) */
@media (max-width: 1024px){
  body.home #main{
    padding-top: 0 !important;
  }
}

/* -----------------------------
   TYPOGRAPHY – H1 auf Unterseiten (editorial)
----------------------------- */

/* Alle Unterseiten: H1 klar & lesbar */
body:not(.home) h1{
  color: #1a1a1a;          /* tiefes Grau / Schwarz */
  opacity: 1;
}

/* Speziell im Editorial-Kontext (z. B. Balayage) */
body:not(.home) .precision-editorial h1{
  color: #1a1a1a;
  font-weight: 400;       /* ruhig, hochwertig */
}