/* ==========================================================================
   DU BEWEGST – Custom Styles (Helle Gelbtöne / Light Yellow Theme)
   ========================================================================== */

:root{
  --color-primary: #eac114;      /* Gold-Gelb – Buttons, Icons, Links, CTA */
  --color-primary-dark: #b79b27; /* Oliv-Gold – Hover-Zustand */
  --color-dark: #fdf8e3;         /* Haupt-Hintergrund: sehr helle Aufhellung von f4e294 */
  --color-dark2: #f4e294;        /* Sekundär-Hintergrund: exakt wie vorgegeben */
  --color-light: #ffffff;
  --color-accent: #f4e294;       /* Helles Creme-Gelb – Akzenttexte, Blobs */
  --color-ink: #575756;          /* Dunkelgrau – Fließtext für Kontrast */
}

html{ scroll-behavior: smooth; }

body{
  font-family: 'Montserrat', sans-serif;
  background-color: var(--color-dark);
  color: var(--color-ink);
  overflow-x: hidden;
}

h1, h2, h3, .font-display{
  font-family: 'Poppins', 'Montserrat', sans-serif;
  font-weight: 300;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Custom scrollbar */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--color-dark); }
::-webkit-scrollbar-thumb{ background: var(--color-primary); border-radius: 10px; }

/* Gradient text – bleibt komplett im Farbkonzept (Gold-Gelb zu Oliv-Gold) */
.text-gradient{
  background: linear-gradient(90deg, #eac114 0%, #b79b27 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hero background: Foto (Weg, ohne Person) rechts, sanft ins
   Pastellgelb ausgeblendet, damit der Text links weiterhin gut lesbar bleibt */
.hero-bg{
  background-color: #fbf0c9;
  background-image:
    linear-gradient(90deg, #fbf0c9 0%, rgba(251,240,201,.96) 22%, rgba(251,240,201,.78) 42%, rgba(251,240,201,.45) 60%, rgba(251,240,201,.18) 78%, rgba(251,240,201,.04) 92%),
    url('../images/hero-bg-v2.jpg');
  background-repeat: no-repeat;
  background-position: center, right center;
  background-size: cover, cover;
}
@media (max-width: 767px){
  .hero-bg{
    background-image:
      linear-gradient(180deg, #fbf0c9 0%, rgba(251,240,201,.88) 30%, rgba(251,240,201,.65) 55%, rgba(251,240,201,.78) 100%),
      url('../images/hero-bg-v2.jpg');
    background-position: center, 75% center;
  }
}

/* Feine Textur-Overlay (dezent, da heller Hintergrund) */
.grain::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: radial-gradient(rgba(87,87,86,0.05) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .5;
}

/* Marquee */
.marquee-track{
  display:flex;
  width: max-content;
  animation: marquee 22s linear infinite;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Buttons */
.btn-primary{
  background: var(--color-primary);
  color: var(--color-ink);
  font-weight: 700;
  border-radius: 999px;
  transition: all .25s ease;
  box-shadow: 0 10px 30px -8px rgba(234,193,20,.55);
}
.btn-primary:hover{
  background: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -6px rgba(234,193,20,.7);
}

/* Standard-Outline-Button – für helle Sektionen (dunkler Text/Rand) */
.btn-outline{
  border: 2px solid rgba(87,87,86,.25);
  color: var(--color-ink);
  border-radius: 999px;
  transition: all .25s ease;
  background: transparent;
}
.btn-outline:hover{
  border-color: rgba(87,87,86,.5);
  background: rgba(87,87,86,.06);
}

/* Heller Outline-Button – speziell für den Hero-Bereich (Foto-Hintergrund) */
.btn-outline-light{
  border: 2px solid rgba(255,255,255,.4);
  color: #ffffff;
  border-radius: 999px;
  transition: all .25s ease;
  background: transparent;
}
.btn-outline-light:hover{
  border-color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.12);
}

/* Card hover lift */
.card-lift{ transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.card-lift:hover{ transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(87,87,86,.18); }

/* Highlight border animation for featured pricing card */
.card-featured{
  position:relative;
  border: 2px solid var(--color-primary);
}
/* Badge label is set via HTML (.card-featured-badge) so text stays translatable per language */
.card-featured-badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-ink);
  font-size: .7rem;
  font-weight:800;
  letter-spacing: .12em;
  padding: 4px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Reveal on scroll */
.reveal{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Number badge */
.step-number{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 4rem;
  line-height: 1;
  color: rgba(234,193,20,.3);
}

/* Ausnahme: Hero-Headline (h1) und alle h2-Überschriften sollen in
   Groß-/Kleinschreibung erscheinen, statt automatisch in Großbuchstaben.
   Hinweis: h2.font-display ist nötig, um die höhere Spezifität von
   .font-display (Klassen-Selektor) in der Regel weiter oben zu übertreffen. */
#hero h1,
h2,
h2.font-display{
  text-transform: none;
}

/* FAQ accordion */
.faq-item[open] .faq-icon{ transform: rotate(45deg); }
.faq-icon{ transition: transform .25s ease; }
summary::-webkit-details-marker{ display:none; }

/* Sticky mobile CTA */
.mobile-cta{
  position: fixed;
  left: 0; right:0; bottom:0;
  z-index: 40;
}

/* Testimonial stars */
.stars i{ color: var(--color-primary); }

/* Form focus */
input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(234,193,20,.2);
}

/* Section divider zigzag */
.divider-jagged{
  height: 40px;
  width: 100%;
  background: repeating-linear-gradient(-45deg, var(--color-dark) 0 10px, var(--color-dark2) 10px 20px);
}

/* Animated underline for nav links */
.nav-link{ position: relative; }
.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:0%;
  height:2px;
  background: var(--color-primary);
  transition: width .25s ease;
}
.nav-link:hover::after{ width: 100%; }

/* Blob shapes */
.blob{
  position:absolute;
  filter: blur(60px);
  opacity: .4;
  z-index: 0;
}

/* ---------- Fliessende Farbübergänge zwischen Sektionen (performant) ----------
   Ziel: keine gerade, spürbare Kante an der Sektionsgrenze, sondern ein
   weich auslaufender, "verwaschener" Übergang – ohne teuren filter: blur().
   Technik: mehrere überlappende, weiche Farbflecken (radiale Verläufe an
   unterschiedlichen Positionen/Grössen) plus ein grossflächiger Basis-Verlauf.
   Jeder Verlauf besitzt viele feine Zwischenstopps entlang einer Smoothstep-
   Kurve (S-Kurve statt linear/hart) – dadurch entsteht die weiche, wolkige
   Optik direkt über die Farbmathematik des Gradients, statt über einen
   nachgeschalteten Bild-Weichzeichner. CSS-Gradients werden nativ von der
   GPU als einfache Füllung gerendert (kein zusätzlicher Rasterisierungs-/
   Blur-Pass, keine grosse Extra-Ebene im Speicher) und sind dadurch beim
   Scrollen praktisch kostenlos – im Gegensatz zu filter: blur() auf einer
   grossen Fläche, das rechenintensiv ist und v. a. auf schwächeren Geräten
   zu Rucklern führen kann. Alles liegt hinter dem Inhalt (z-index: -1) und
   ist nicht interaktiv. */
.section-blend{ position: relative; }
.section-blend::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: min(70vh, 760px);
  z-index: -1;
  pointer-events: none;
}

.blend-from-hero::before{
  background:
    radial-gradient(ellipse 70% 75% at 8% 0%,
      #fbf0c9 0%, rgba(251,240,201,.85) 18%, rgba(251,240,201,.6) 34%,
      rgba(251,240,201,.38) 48%, rgba(251,240,201,.2) 62%, rgba(251,240,201,.08) 78%,
      rgba(251,240,201,.02) 90%, transparent 100%),
    radial-gradient(ellipse 65% 70% at 38% 0%,
      #fbf0c9 0%, rgba(251,240,201,.82) 18%, rgba(251,240,201,.58) 34%,
      rgba(251,240,201,.36) 48%, rgba(251,240,201,.18) 62%, rgba(251,240,201,.07) 78%,
      transparent 92%),
    radial-gradient(ellipse 70% 78% at 68% 0%,
      #fbf0c9 0%, rgba(251,240,201,.85) 18%, rgba(251,240,201,.6) 34%,
      rgba(251,240,201,.38) 48%, rgba(251,240,201,.2) 62%, rgba(251,240,201,.08) 78%,
      transparent 92%),
    radial-gradient(ellipse 65% 72% at 96% 0%,
      #fbf0c9 0%, rgba(251,240,201,.82) 18%, rgba(251,240,201,.56) 34%,
      rgba(251,240,201,.34) 48%, rgba(251,240,201,.16) 62%, rgba(251,240,201,.06) 78%,
      transparent 92%),
    linear-gradient(to bottom,
      #fbf0c9 0%, rgba(251,240,201,.7) 14%, rgba(251,240,201,.45) 28%,
      rgba(251,240,201,.26) 42%, rgba(251,240,201,.12) 58%, rgba(251,240,201,.04) 74%,
      transparent 90%);
}
.blend-from-dark::before{
  background:
    radial-gradient(ellipse 70% 75% at 6% 0%,
      var(--color-dark) 0%, rgba(253,248,227,.85) 18%, rgba(253,248,227,.6) 34%,
      rgba(253,248,227,.38) 48%, rgba(253,248,227,.2) 62%, rgba(253,248,227,.08) 78%,
      rgba(253,248,227,.02) 90%, transparent 100%),
    radial-gradient(ellipse 65% 70% at 36% 0%,
      var(--color-dark) 0%, rgba(253,248,227,.82) 18%, rgba(253,248,227,.58) 34%,
      rgba(253,248,227,.36) 48%, rgba(253,248,227,.18) 62%, rgba(253,248,227,.07) 78%,
      transparent 92%),
    radial-gradient(ellipse 70% 78% at 66% 0%,
      var(--color-dark) 0%, rgba(253,248,227,.85) 18%, rgba(253,248,227,.6) 34%,
      rgba(253,248,227,.38) 48%, rgba(253,248,227,.2) 62%, rgba(253,248,227,.08) 78%,
      transparent 92%),
    radial-gradient(ellipse 65% 72% at 96% 0%,
      var(--color-dark) 0%, rgba(253,248,227,.82) 18%, rgba(253,248,227,.56) 34%,
      rgba(253,248,227,.34) 48%, rgba(253,248,227,.16) 62%, rgba(253,248,227,.06) 78%,
      transparent 92%),
    linear-gradient(to bottom,
      var(--color-dark) 0%, rgba(253,248,227,.7) 14%, rgba(253,248,227,.45) 28%,
      rgba(253,248,227,.26) 42%, rgba(253,248,227,.12) 58%, rgba(253,248,227,.04) 74%,
      transparent 90%);
}
.blend-from-dark2::before{
  background:
    radial-gradient(ellipse 70% 75% at 10% 0%,
      var(--color-dark2) 0%, rgba(244,226,148,.85) 18%, rgba(244,226,148,.6) 34%,
      rgba(244,226,148,.38) 48%, rgba(244,226,148,.2) 62%, rgba(244,226,148,.08) 78%,
      rgba(244,226,148,.02) 90%, transparent 100%),
    radial-gradient(ellipse 65% 70% at 40% 0%,
      var(--color-dark2) 0%, rgba(244,226,148,.82) 18%, rgba(244,226,148,.58) 34%,
      rgba(244,226,148,.36) 48%, rgba(244,226,148,.18) 62%, rgba(244,226,148,.07) 78%,
      transparent 92%),
    radial-gradient(ellipse 70% 78% at 70% 0%,
      var(--color-dark2) 0%, rgba(244,226,148,.85) 18%, rgba(244,226,148,.6) 34%,
      rgba(244,226,148,.38) 48%, rgba(244,226,148,.2) 62%, rgba(244,226,148,.08) 78%,
      transparent 92%),
    radial-gradient(ellipse 65% 72% at 98% 0%,
      var(--color-dark2) 0%, rgba(244,226,148,.82) 18%, rgba(244,226,148,.56) 34%,
      rgba(244,226,148,.34) 48%, rgba(244,226,148,.16) 62%, rgba(244,226,148,.06) 78%,
      transparent 92%),
    linear-gradient(to bottom,
      var(--color-dark2) 0%, rgba(244,226,148,.7) 14%, rgba(244,226,148,.45) 28%,
      rgba(244,226,148,.26) 42%, rgba(244,226,148,.12) 58%, rgba(244,226,148,.04) 74%,
      transparent 90%);
}
/* ---------- Header states ----------
   Standard: leicht transparenter dunkler Hintergrund für Kontrast
   zum hellen Hero-Hintergrund, Logo und weißer Navigation.
   Gescrollt: heller Hintergrund, dunkler Text (sobald Hero verlassen wird) */
#site-header{
  background: rgba(40, 40, 39, 0.45);
  backdrop-filter: blur(6px);
  color: #ffffff;
}
#site-header .nav-link,
#site-header #mobile-menu-btn{ color: #ffffff; }
#site-header.header-scrolled{
  background-color: var(--color-light);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 25px rgba(201, 147, 38, 0.08);
  color: var(--color-ink);
}
#site-header.header-scrolled .nav-link,
#site-header.header-scrolled #mobile-menu-btn{ color: var(--color-ink); }
#site-header.header-scrolled .nav-link:hover{ color: var(--color-primary); }
#site-header .nav-link:hover{ color: var(--color-accent); }

/* Mobile-Menü-Panel: kein eigener Hintergrund – übernimmt den des #site-header,
   in dem es verschachtelt ist (sonst würden sich zwei transparente Schichten
   überlagern und das Panel unnötig verdunkeln) */
#mobile-menu{
  background: transparent;
  border-color: rgba(255,255,255,.12);
}
#mobile-menu a:not(.btn-primary){ color: #ffffff; }
#site-header.header-scrolled #mobile-menu{
  border-color: rgba(87,87,86,.12);
}
#site-header.header-scrolled #mobile-menu a:not(.btn-primary){ color: var(--color-ink); }