/* =========================================================
   FS AI Tool – Design Overrides (MODI PREMIUM MASTER)
   ========================================================= */

/* =========================================================
   TOKENS – GLOBAL
========================================================= */

:root{
  --fp-primary: #d6a93f;
  --fp-primary-dark: #a97812;
  --fp-accent: #f0d77a;
  --fp-neutral: #B8BDC6;
  --fp-text-on-brand: #07080C;
  --fp-icon-color: #C99733;

  --fp-brand-1: #f0d77a;
  --fp-brand-2: rgba(214,169,63,0.9);
  --fp-brand-3: rgba(169,120,18,0.96);

  --fp-brand-strong-1: rgba(240,215,122,0.98);
  --fp-brand-strong-2: rgba(214,169,63,0.82);
  --fp-brand-strong-3: rgba(169,120,18,0.96);

  --fp-border-soft-strong: rgba(214,169,63,0.52);
  --fp-glow-brand-soft: rgba(214,169,63,0.24);
  --fp-glow-brand-strong: rgba(214,169,63,0.42);

  --wcs-accent: #d6a93f;
  --wcs-accent-dark: #a97812;
}

/* =========================================================
   BUTTONS – PREMIUM
========================================================= */

body.fp-theme-premium .elementor-button{
  background: linear-gradient(
    135deg,
    var(--fp-brand-1),
    var(--fp-brand-2),
    var(--fp-brand-3)
  ) !important;

  color: var(--fp-text-on-brand) !important;
  border-color: var(--fp-primary) !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.25),
    0 0 14px var(--fp-glow-brand-soft);
}

body.fp-theme-premium .elementor-button:hover{
  box-shadow:
    0 14px 38px rgba(0,0,0,.34),
    0 0 22px var(--fp-glow-brand-strong);
}

/* =========================================================
   LINKS
========================================================= */

body.fp-theme-premium a{
  color: var(--fp-brand-1) !important;
}

/* =========================================================
   BORDERS / BOXEN
========================================================= */

body.fp-theme-premium .usp-box,
body.fp-theme-premium .angst-card,
body.fp-theme-premium .loop-trust{
  border: 1px solid var(--fp-border-soft-strong) !important;

  box-shadow:
    0 0 0 1px var(--fp-border-soft-strong),
    0 12px 32px var(--fp-shadow-dark-soft);
}

/* =========================================================
   TABS
========================================================= */

body.fp-theme-premium .fp-tabs-primary .e-n-tab-title{
  border: 1px solid var(--fp-border-soft-strong);
  box-shadow: 0 4px 16px var(--fp-glow-brand-soft);
}

body.fp-theme-premium .fp-tabs-primary .e-n-tab-title[aria-selected="true"]{
  background: linear-gradient(
    135deg,
    var(--fp-brand-1),
    var(--fp-brand-2),
    var(--fp-brand-3)
  ) !important;

  color: var(--fp-text-on-brand) !important;
}

/* =========================================================
   DARK GRADIENT – PREMIUM
========================================================= */

body.fp-theme-premium .dark-section.fp-dark-gradient{
  background:
    radial-gradient(circle at 80% 70%, rgba(214,169,63,.35), transparent 55%),
    linear-gradient(
      135deg,
      var(--fp-surface-dark-3),
      #101010,
      color-mix(in srgb, var(--fp-surface-dark-3) 75%, var(--fp-primary))
    ) !important;

  color: var(--fp-text-invert);
}

/* =========================================================
   FLIPBOX – FINAL CLEAN SYSTEM
========================================================= */

body.fp-theme-premium .elementor-widget-flip-box.fp-flip{
  --gold1: #f0d77a;
  --gold2: #d6a93f;
  --gold3: #a97812;
}

/* A = dunkel */
body.fp-theme-premium .fp-flip.fp-a .elementor-flip-box__layer__overlay{
  background: radial-gradient(
    circle at 20% 20%,
    var(--fp-surface-dark-1),
    var(--fp-surface-dark-3)
  ) !important;
}

/* A Hover = Gold */
body.fp-theme-premium .fp-flip.fp-a:hover .elementor-flip-box__layer__overlay{
  background: radial-gradient(
    circle at 30% 25%,
    var(--gold1),
    var(--gold2),
    var(--gold3)
  ) !important;
}

/* B = Gold */
body.fp-theme-premium .fp-flip.fp-b .elementor-flip-box__layer__overlay{
  background: radial-gradient(
    circle at 30% 25%,
    var(--gold1),
    var(--gold2),
    var(--gold3)
  ) !important;
}

/* B Hover = dunkel */
body.fp-theme-premium .fp-flip.fp-b:hover .elementor-flip-box__layer__overlay{
  background: radial-gradient(
    circle at 20% 20%,
    var(--fp-surface-dark-1),
    var(--fp-surface-dark-3)
  ) !important;
}

/* Shadow */
body.fp-theme-premium .fp-flip:hover .elementor-flip-box{
  box-shadow:
    0 18px 60px var(--fp-shadow-dark-strong),
    0 0 24px var(--fp-glow-brand-strong);
}

/* =========================================================
   SWIPER / LOOP NAV
========================================================= */

body.fp-theme-premium .elementor-swiper-button{
  background: linear-gradient(
    135deg,
    var(--fp-brand-1),
    var(--fp-brand-2),
    var(--fp-brand-3)
  );

  color: var(--fp-text-on-brand);
}

/* =========================================================
   PAGINATION
========================================================= */

body.fp-theme-premium .swiper-pagination-bullet{
  background: var(--fp-primary);
  box-shadow: 0 0 0 1px var(--fp-glow-brand-soft);
}





/* =========================================================
   FP FLIPGRID – MOBILE FULL WIDTH FIX
   ========================================================= */

@media (max-width: 767px){
  .fp-flipgrid > .e-con-inner{
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .fp-flipgrid .elementor-widget-flip-box,
  .fp-flipgrid .elementor-flip-box{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   FP FLIPGRID – MOBILE FULL WIDTH FIX
   ========================================================= */

@media (max-width: 767px){
  .fp-flipgrid > .e-con-inner{
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .fp-flipgrid .elementor-widget-flip-box,
  .fp-flipgrid .elementor-flip-box{
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* =========================================================
   COST CALCULATOR – MODI PREMIUM READABILITY FIX
   ========================================================= */

body.fp-theme-premium .fp-cost-calculator,
body.fp-theme-premium .fp-cost-calculator *{
  color: var(--fp-text-invert);
}

body.fp-theme-premium .fp-cost-calculator .fs-price-card-title,
body.fp-theme-premium .fp-cost-calculator .fs-calculator-title,
body.fp-theme-premium .fp-cost-calculator .fs-additional-costs-title{
  color: var(--fp-primary) !important;
}

body.fp-theme-premium .fp-cost-calculator .fs-price-card-price,
body.fp-theme-premium .fp-cost-calculator .fs-calculator-total,
body.fp-theme-premium .fp-cost-calculator .fs-additional-costs-price,
body.fp-theme-premium .fp-cost-calculator .fs-additional-costs-total{
  color: var(--fp-primary) !important;
}

body.fp-theme-premium .fp-cost-calculator .fs-price-card-description,
body.fp-theme-premium .fp-cost-calculator .fs-calculator-subtext,
body.fp-theme-premium .fp-cost-calculator .fs-additional-costs-description,
body.fp-theme-premium .fp-cost-calculator li{
  color: var(--fp-text-invert) !important;
}

body.fp-theme-premium .fp-cost-calculator .fs-price-card,
body.fp-theme-premium .fp-cost-calculator .fs-calculator-container,
body.fp-theme-premium .fp-cost-calculator .fs-additional-costs,
body.fp-theme-premium .fp-cost-calculator [id$="-additional-costs"]{
  background: radial-gradient(
    circle at top left,
    var(--fp-surface-dark-1) 0%,
    var(--fp-surface-dark-2) 60%,
    var(--fp-surface-dark-3) 100%
  ) !important;
  border: 1px solid var(--fp-border-invert) !important;
  box-shadow: 0 12px 32px var(--fp-shadow-dark-soft);
}

body.fp-theme-premium .fp-cost-calculator [id$="-additional-costs"] .fs-additional-costs-summary,
body.fp-theme-premium .fp-cost-calculator [id$="-additional-costs"] .fs-additional-costs-panel{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.fp-theme-premium .fp-cost-calculator [id$="-additional-costs"]{
  --fsccw-additional-box-background: transparent;
  --fsccw-additional-box-border-color: transparent;
}


/* =========================================================
   PORTFOLIO – PREMIUM CLEAN OVERLAY ONLY
   kein Bild-Zoom, keine Bild-Position ändern
========================================================= */

body.fp-theme-premium .elementor-widget-portfolio .elementor-portfolio-item__overlay{
  background: rgba(0,0,0,.48) !important;
  background-image: none !important;
}

body.fp-theme-premium .elementor-widget-portfolio .elementor-portfolio-item:hover .elementor-portfolio-item__overlay{
  background: rgba(0,0,0,.62) !important;
  background-image: none !important;
}


/* =========================================================
   FP SURFACE SOFT – PREMIUM FIX
========================================================= */

body.fp-theme-premium .fp-surface-soft{
  background: radial-gradient(
    circle at top left,
    var(--fp-surface-dark-1) 0%,
    var(--fp-surface-dark-2) 60%,
    var(--fp-surface-dark-3) 100%
  ) !important;

  border: 1px solid var(--fp-border-invert) !important;
  box-shadow: 0 12px 32px var(--fp-shadow-dark-soft) !important;
}

body.fp-theme-premium .fp-surface-soft,
body.fp-theme-premium .fp-surface-soft *{
  color: var(--fp-text-invert) !important;
}

body.fp-theme-premium .fp-surface-soft h1,
body.fp-theme-premium .fp-surface-soft h2,
body.fp-theme-premium .fp-surface-soft h3,
body.fp-theme-premium .fp-surface-soft h4,
body.fp-theme-premium .fp-surface-soft h5,
body.fp-theme-premium .fp-surface-soft h6,
body.fp-theme-premium .fp-surface-soft .elementor-heading-title{
  color: var(--fp-primary) !important;
}

body.fp-theme-premium .fp-surface-soft svg,
body.fp-theme-premium .fp-surface-soft i{
  color: var(--fp-primary) !important;
  fill: var(--fp-primary) !important;
  stroke: var(--fp-primary) !important;
}


/* =========================================================
   FORM BUTTON – LEAGUE GOTHIC SCALE
========================================================= */

.elementor-form .elementor-button,
.elementor-form button[type="submit"]{

  font-family: "League Gothic", sans-serif;
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.5px;

  padding: 16px 34px;
  border-radius: 999px;
}

@media (max-width: 767px){

  .elementor-form .elementor-button,
  .elementor-form button[type="submit"]{
    font-size: 20px;
    padding: 14px 26px;
  }

}


/* =========================================================
   Elementor Animated Headline – Highlight-Strich
========================================================= */

.elementor-headline svg path {
  stroke: var(--fp-accent) !important;
  fill: none !important;
}


/* =========================================================
   PREMIUM – GOLD HEADLINES FIX
   ---------------------------------------------------------
   Gilt nur im Premium Theme:
   - H2 auf dunklen Flächen
   - H3 auf dunklen Flächen
   - H1 auf Termin-Detailseiten
========================================================= */
body.fp-theme-premium .fp-section-light h2,
body.fp-theme-premium .fp-section-soft h2,
body.fp-theme-premium .dark-section h2,
body.fp-theme-premium .fp-section-light h3,
body.fp-theme-premium .fp-section-soft h3,
body.fp-theme-premium .dark-section h3,
body.fp-theme-premium.single-class h1,
body.fp-theme-premium.single-class .elementor-widget-heading h1.elementor-heading-title{
  background: var(--fp-gradient-brand) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
}


/* =========================================================
   MODI PREMIUM – STEP BOXEN
   ========================================================= */

body.fp-theme-premium .fp-step{
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.035)
  );
  border: 1px solid rgba(212,164,74,.32);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}

body.fp-theme-premium .fp-step:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0,0,0,.30);
  border-color: var(--fp-accent);
}

body.fp-theme-premium .fp-step .elementor-icon-box-wrapper{
  display: block;
}

body.fp-theme-premium .fp-step .elementor-icon-box-icon{
  display: inline-flex !important;
  vertical-align: top;
  margin-right: 14px;
  margin-bottom: 18px;
}

body.fp-theme-premium .fp-step .elementor-icon{
  position: relative;
  z-index: 1;

  width: 42px;
  height: 42px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: none !important;
  box-shadow: none;

  color: var(--fp-accent) !important;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

/* Glow-Kreis hinter der Zahl */
body.fp-theme-premium .fp-step .elementor-icon::after{
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(212,164,74,.34),
    rgba(212,164,74,.10),
    transparent 72%
  );

  box-shadow: 0 0 18px rgba(212,164,74,.18);
  z-index: -1;
}

/* Zahl per CSS einsetzen */
body.fp-theme-premium .fp-step-1 .elementor-icon::before{ content: "1"; }
body.fp-theme-premium .fp-step-2 .elementor-icon::before{ content: "2"; }
body.fp-theme-premium .fp-step-3 .elementor-icon::before{ content: "3"; }

body.fp-theme-premium .fp-step .elementor-icon-box-title{
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 60px);
  margin: 0 0 20px !important;
  line-height: 1.08;
  color: var(--fp-text-on-dark);
}

body.fp-theme-premium .fp-step .elementor-icon-box-content{
  padding-left: 0 !important;
  padding-top: 0 !important;
}

body.fp-theme-premium .fp-step .elementor-icon-box-description,
body.fp-theme-premium .fp-step .elementor-icon-box-description li,
body.fp-theme-premium .fp-step li{
  color: rgba(255,255,255,.82);
}

body.fp-theme-premium .fp-step .elementor-icon-box-description ul{
  margin: 0 !important;
  padding-left: 20px !important;
}

body.fp-theme-premium .fp-step .elementor-icon-box-description li,
body.fp-theme-premium .fp-step li{
  margin-left: -20px !important;
  margin-bottom: 15px;
}

body.fp-theme-premium .fp-step .elementor-icon-box-description li:last-child,
body.fp-theme-premium .fp-step li:last-child{
  margin-bottom: 0 !important;
}

body.fp-theme-premium .fp-step p{
  display: none !important;
}


/* =========================================================
   MODI PREMIUM – STEP SECONDARY BOXEN
   ========================================================= */

body.fp-theme-premium .fp-step-secondary{
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
  transition: none;
}

body.fp-theme-premium .fp-step-secondary:hover{
  transform: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
  border-color: rgba(255,255,255,.12);
}

body.fp-theme-premium .fp-step-secondary .elementor-icon-box-icon{
  display: none !important;
}

body.fp-theme-premium .fp-step-secondary .elementor-icon-box-wrapper{
  display: block;
}

body.fp-theme-premium .fp-step-secondary .elementor-icon-box-content{
  padding-left: 0 !important;
  padding-top: 0 !important;
}

body.fp-theme-premium .fp-step-secondary .elementor-icon-box-title{
  width: 100%;
  margin: 0 0 18px !important;
  line-height: 1.15;
  color: var(--fp-text-on-dark);
}

body.fp-theme-premium .fp-step-secondary .elementor-icon-box-description,
body.fp-theme-premium .fp-step-secondary .elementor-icon-box-description li{
  color: rgba(255,255,255,.78);
}

body.fp-theme-premium .fp-step-secondary .elementor-icon-box-description ul{
  margin: 0 !important;
  padding-left: 20px !important;
}

body.fp-theme-premium .fp-step-secondary .elementor-icon-box-description li{
  margin-left: -20px !important;
  margin-bottom: 12px;
}

body.fp-theme-premium .fp-step-secondary .elementor-icon-box-description li:last-child{
  margin-bottom: 0;
}

body.fp-theme-premium .fp-step-secondary p{
  display: none !important;
}


/* =========================================================
   MODI PREMIUM – STEP BOXEN MOBILE
   ========================================================= */

@media (max-width: 767px){

  body.fp-theme-premium .fp-step{
    padding: 20px;
  }

  body.fp-theme-premium .fp-step .elementor-icon-box-icon{
    margin-right: 12px;
    margin-bottom: 16px;
  }

  body.fp-theme-premium .fp-step .elementor-icon{
    width: 38px;
    height: 38px;
    font-size: 26px;
  }

  body.fp-theme-premium .fp-step .elementor-icon::after{
    inset: -6px;
  }

  body.fp-theme-premium .fp-step .elementor-icon-box-title{
    width: calc(100% - 54px);
    margin-bottom: 20px !important;
  }

  body.fp-theme-premium .fp-step-secondary{
    padding: 20px;
  }

  body.fp-theme-premium .fp-step-secondary .elementor-icon-box-title{
    margin-bottom: 18px !important;
  }
}

/* =========================================================
   ELEMENTOR LIGHTBOX – Seitenbereiche neutralisieren
   ========================================================= */

.elementor-lightbox,
.elementor-lightbox .dialog-lightbox-widget,
.elementor-lightbox .dialog-widget-content,
.elementor-lightbox .dialog-lightbox-message {
    background: #050505 !important;
}

.elementor-lightbox .elementor-lightbox-image {
    background: transparent !important;
}

/* Falls Elementor/Swiper seitliche Flächen einfärbt */
.elementor-lightbox .swiper,
.elementor-lightbox .swiper-wrapper,
.elementor-lightbox .swiper-slide {
    background: #050505 !important;
}

/* Navigation nicht betroffen, nur Hintergrundflächen */
.elementor-lightbox .dialog-lightbox-close-button,
.elementor-lightbox .elementor-swiper-button,
.elementor-lightbox .elementor-lightbox-prevent-close {
    background: transparent !important;
}


/* =========================================================
   MODI PREMIUM – Elementor Carousel Pfeile
   ========================================================= */

body.fp-theme-premium .elementor-swiper-button,
body.fp-theme-premium .swiper-button-prev,
body.fp-theme-premium .swiper-button-next{
  width: 46px;
  height: 46px;
  border-radius: 50% !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  background: var(--fp-primary) !important;
  color: #07080c !important;

  box-shadow: 0 10px 24px rgba(0,0,0,.24);
  overflow: hidden;
}

body.fp-theme-premium .elementor-swiper-button svg,
body.fp-theme-premium .swiper-button-prev svg,
body.fp-theme-premium .swiper-button-next svg{
  width: 22px;
  height: 22px;
  fill: currentColor !important;
}

body.fp-theme-premium .elementor-swiper-button i,
body.fp-theme-premium .swiper-button-prev i,
body.fp-theme-premium .swiper-button-next i{
  color: #07080c !important;
}

body.fp-theme-premium .elementor-swiper-button:hover,
body.fp-theme-premium .swiper-button-prev:hover,
body.fp-theme-premium .swiper-button-next:hover{
  transform: scale(1.04);
  box-shadow: 0 14px 30px rgba(0,0,0,.30);
}


body.fp-theme-premium .fp-carousel{
  position: relative;
  overflow: visible !important; /* wichtig */
}

/* Grundposition resetten */
body.fp-theme-premium .elementor-swiper-button,
body.fp-theme-premium .swiper-button-prev,
body.fp-theme-premium .swiper-button-next{
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 5;
}

/* Links */
body.fp-theme-premium .swiper-button-prev{
  left: -23px; /* halbe Breite (46px / 2) */
}

/* Rechts */
body.fp-theme-premium .swiper-button-next{
  right: -23px;
}