/* =====================================================
   LYTB0X – CHANGE HEADER ON SCROLL
   Single header • SEO safe • Elementor
===================================================== */

:root {
  /* Core animation */
  --lytbox-anim-ms: 180ms;
  --lytbox-admin-offset: 0px;

  /* =====================================================
     SHRINK MODE (DEFAULT)
  ===================================================== */
  --shrink-pad-y: .6rem; 
  --shrink-bg: rgba(249, 251, 253, 0.9); 
  --shrink-blur: 12px; 
  --shrink-shadow: 0 10px 30px rgba(18, 22, 30, 0.15); 

  /* =====================================================
     PILL MODE (OPTIONAL)
  ===================================================== */
  --pill-top-space: 1.5rem; 
  --pill-max-w: 75rem; /* Erhöht für genug Platz */
  --pill-inner-pad-y: .75rem; 
  --pill-inner-pad-x: 1.5rem; 
  --pill-radius: 999px; 

  --pill-bg: rgba(249, 251, 253, 0.9); 
  --pill-blur: 12px; 
  --pill-shadow: 0 10px 30px rgba(18, 22, 30, 0.15); 
  --pill-border: 1px solid rgba(0,0,0,0.05); 

  /* =====================================================
     MENU
  ===================================================== */
  --menu-color: #010712; 
  --menu-color-hover: #3A00E7; 
  --menu-font-size: 1rem; 
  --menu-font-weight: 700; 
  --menu-letter-spacing: 0em; 
  --menu-gap: 1.5rem; /* Verringert, um Umbrüche zu vermeiden */

  /* =====================================================
     CTA BUTTON
  ===================================================== */
  --btn-font-size: .85rem; 
  --btn-font-weight: 700; 
  --btn-pad-y: .75rem; 
  --btn-pad-x: 1.15rem; 
  --btn-radius: 999px; 
  --btn-bg: #010712; 
  --btn-color: #fff; 
  --btn-border: none; 
  --btn-color-hover: #030319; 
  --btn-bg-hover: #57FBF5; 
}

/* =====================================================
   CORE STICKY REVEAL
===================================================== */

.lytbox-no-trans {
  transition: none !important;
}

.lytbox-header.lytbox-is-sticky {
  position: fixed;
  top: var(--lytbox-admin-offset);
  left: 0;
  right: 0;
  z-index: 9999;
  transform: translateY(-110%);
  transition: transform var(--lytbox-anim-ms) ease;
  will-change: transform;
}

.lytbox-header.lytbox-is-sticky.lytbox-show {
  transform: translateY(0);
}

/* =====================================================
   LOGO SWAP & SVG FIX
===================================================== */

.logo-1 { display: block !important; }
.logo-2 { display: none !important; }

.header-scrolled .logo-1 { display: none !important; }
.header-scrolled .logo-2 { display: block !important; }

/* SVG Fallback Größe - hier ggf. Breite anpassen */
.logo-1, .logo-2 {
  width: 180px !important; 
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

/* =====================================================
   BASE STRUCTURE (CSS GRID)
===================================================== */

.lytbox-header__inner {
  width: 100%;
  margin: 0 auto;
  transition: all 180ms ease;
  
  /* Grid Layout für absolute Symmetrie */
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 1.5rem;
}

/* Grid Zuweisungen erzwingen */
.lytbox-header__inner > a.e-image-link-base {
  grid-column: 1;
  grid-row: 1;
  justify-self: start !important;
}

.lytbox-nav {
  grid-column: 2;
  grid-row: 1;
  justify-self: center !important;
}

.lytbox-btn {
  grid-column: 3;
  grid-row: 1;
  justify-self: end !important;
  white-space: nowrap !important;
}

/* =====================================================
   MODES (SHRINK / PILL)
===================================================== */

/* Shrink Mode */
.header-scrolled.lytbox-header:not(:has([data-header-mode="pill"])) {
  background: var(--shrink-bg);
  backdrop-filter: blur(var(--shrink-blur));
  box-shadow: var(--shrink-shadow);
}
.header-scrolled.lytbox-header:not(:has([data-header-mode="pill"])) .lytbox-header__inner {
  padding-top: var(--shrink-pad-y);
  padding-bottom: var(--shrink-pad-y);
}

/* Pill Mode */
.header-scrolled.lytbox-header:has([data-header-mode="pill"]) {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  pointer-events: none;
}
.header-scrolled.lytbox-header .lytbox-header__inner[data-header-mode="pill"] {
  pointer-events: auto;
  max-width: var(--pill-max-w);
  margin-top: var(--pill-top-space);
  padding: var(--pill-inner-pad-y) var(--pill-inner-pad-x);
  border-radius: var(--pill-radius);
  background: var(--pill-bg);
  backdrop-filter: blur(var(--pill-blur));
  box-shadow: var(--pill-shadow);
  border: var(--pill-border);
}

/* =====================================================
   MENU STYLING
===================================================== */

.header-scrolled .lytbox-nav a {
  color: var(--menu-color)!important;
  font-size: var(--menu-font-size)!important;
  font-weight: var(--menu-font-weight)!important;
  letter-spacing: var(--menu-letter-spacing)!important;
  transition: color 180ms ease;
}
.header-scrolled .lytbox-nav a:hover {
  color: var(--menu-color-hover)!important;
}
.header-scrolled .lytbox-nav nav ul {
  gap: var(--menu-gap)!important;
  white-space: nowrap !important;
}
.header-scrolled .lytbox-nav .elementor-nav-menu>li:not(:first-child)>a {
  margin-inline-start: 0!important;
}
.header-scrolled .lytbox-nav .elementor-nav-menu>li:not(:last-child)>a {
  margin-inline-end: 0!important;
}

/* =====================================================
   CTA BUTTON
===================================================== */

.header-scrolled .lytbox-btn {
  font-size: var(--btn-font-size)!important;
  font-weight: var(--btn-font-weight)!important;
  padding: var(--btn-pad-y) var(--btn-pad-x)!important;
  border-radius: var(--btn-radius)!important;
  background: var(--btn-bg)!important;
  color: var(--btn-color)!important;
  border: var(--btn-border)!important;
  transition: all 180ms ease;
}
.header-scrolled .lytbox-btn:hover {
  background: var(--btn-bg-hover)!important;
  color: var(--btn-color-hover)!important;
}

/* =====================================================
   MOBILE FALLBACK (TABLET & SMARTPHONE)
===================================================== */
@media (max-width: 1024px) {
  .lytbox-header__inner {
    grid-template-columns: auto 1fr auto !important;
  }
  .lytbox-nav {
    justify-self: end !important;
    grid-column: 3;
  }
  .lytbox-btn {
    display: none !important; /* CTA Button auf Mobile meistens zu groß */
  }
}

/* =====================================================
   SVG FALLBACK GRÖSSEN (GETRENNT FÜR LOGO & SIGNET)
===================================================== */

/* Logo 1 (Ausgeschriebenes Logo) */
.logo-1 {
  width: 180px !important; /* Hier die Breite für das normale Logo */
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  object-position: left center !important; /* Zwingt das Bild nach links, falls die Box breiter ist */
}

/* Logo 2 (Kleines Kamin-Signet beim Scrollen) */
.logo-2 {
  height: 32px !important; /* Fixiert die Höhe exakt auf 32px */
  width: auto !important;  /* Lässt die Breite natürlich anpassen */
  min-width: 32px !important; /* Verhindert, dass Elementors width="0" das Icon komplett killt */
  max-width: 100% !important;
  object-fit: contain;
  object-position: left center !important; /* Klebt das Signet links an den Rand, kein Whitespace-Zentrieren mehr */
}

/* =====================================================
   MOBILE FALLBACK (TABLET & SMARTPHONE)
===================================================== */
@media (max-width: 1024px) {
  .lytbox-header__inner {
    /* Wir ändern das Grid: 
       Spalte 1: Logo (nimmt seinen Platz)
       Spalte 2: Button (drückt sich in den freien Raum)
       Spalte 3: Hamburger Menü (rechts außen) */
    grid-template-columns: auto 1fr auto !important;
  }
  
  /* Logo bleibt links (Spalte 1) */
  .lytbox-header__inner > a.e-image-link-base {
    grid-column: 1;
  }

  /* Button wandert in die Mitte/rechts (Spalte 2) */
  .lytbox-btn {
    display: flex !important; /* Sorgt dafür, dass er sichtbar bleibt */
    grid-column: 2;
    justify-self: end !important; /* Schiebt den Button nach rechts an das Menü ran */
    margin-right: 1.5rem; /* Etwas Abstand zum Hamburger-Icon */
  }

  /* Hamburger-Menü wandert ganz nach rechts (Spalte 3) */
  .lytbox-nav {
    grid-column: 3;
    justify-self: end !important;
  }
}

/* Noch kleinere Smartphones: Button ggf. kleiner machen oder ausblenden */
@media (max-width: 767px) {
  .header-scrolled .lytbox-btn {
    padding: 0.5rem 0.8rem !important; /* Button kleiner machen, damit alles aufs Display passt */
    font-size: 0.75rem !important;
  }
}