/* =========================================================
   FINAL: Helix Header + Banner + Tagline (stabil + mittig)
   Datei: /templates/shaper_helixultimate/css/custom.css
   ========================================================= */

/* Reset */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   TOP BAR (grau)
   ========================================================= */
#sp-top-bar,
#sp-top-bar .container,
#sp-top-bar .container-inner,
#sp-top-bar .sp-column {
  background: #333 !important;
}
#sp-top-bar, #sp-top-bar * {
  color: #aaa !important;
}
#sp-top-bar a:hover {
  color: #ec430f !important;
}

/* =========================================================
   HEADER (weiß, schmal – Originalhöhe)
   ========================================================= */
#sp-header {
  position: relative !important;
  z-index: 50 !important;
  background: #fff !important;
  min-height: 44px !important;
  border: 0 !important;
  box-shadow: none !important;
}

#sp-header .container,
#sp-header .container-inner {
  padding: 4px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Logo komplett ausblenden */
#sp-logo {
  display: none !important;
}

/* =========================================================
   MENÜ (Desktop aus, nur Hamburger)
   ========================================================= */
#sp-menu nav,
#sp-menu .sp-megamenu-wrapper,
#sp-menu .sp-megamenu-parent,
#sp-menu ul.sp-megamenu-parent {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Hamburger-Menü schwarz */
#offcanvas-toggler {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  padding: 6px !important;
}
#offcanvas-toggler i,
.burger-icon span,
#offcanvas-toggler span::before,
#offcanvas-toggler span::after {
  background-color: #111 !important;
  color: #111 !important;
}
#offcanvas-toggler:hover span,
#offcanvas-toggler:hover span::before,
#offcanvas-toggler:hover span::after {
  background-color: #ec430f !important;
}

/* Seitentitel ausblenden */
#sp-page-title,
.sp-page-title,
#sp-title {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* =========================================================
   BANNER im Header (Variante B: nach unten geschoben)
   ========================================================= */
#sp-header::after {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 420px !important;
  background-image: url("/images/headers/banner-desktop.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  /* VARIANTE B – Banner leicht nach unten */
  margin-top: 8px !important;
}

@media (max-width: 768px) {
  #sp-header::after {
    height: 320px !important;
    background-image: url("/images/headers/banner-mobile.jpg") !important;
    background-size: 100% !important;
    background-position: center 20% !important;
    margin-top: 8px !important;
  }
}

/* =========================================================
   TAGLINE mittig im Banner
   ========================================================= */
.hero-tagline {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  top: 250px !important;
  z-index: 999 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  font-family: "Ink Free", "Segoe Print", "Comic Sans MS", cursive !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45) !important;
  margin: 0 !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

@media (max-width: 768px) {
  .hero-tagline {
    top: 155px !important;
    font-size: 20px !important;
  }
}

/* =========================================================
   Abstand unter dem Banner
   ========================================================= */
#sp-main {
  margin-top: 420px !important;
  padding-top: 0 !important;
}

@media (max-width: 768px) {
  #sp-main {
    margin-top: 320px !important;
  }
}

/* =========================================================
   ICON-BUTTONS (Wohnwagen, Wohnmobil, Foodtruck, Home)
   ========================================================= */
.image-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

/* Hover-Effekt */
.icon-wohnwagen:hover img,
.icon-wohnmobil:hover img,
.icon-foodtruck:hover img,
.icon-home:hover img,
.icon-marcel:hover img {
  transform: scale(1.1);
}

/* Overlay-Text */
.overlay-text {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px;
}

/* Link-Formatierung */
.image-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

/* Icon-Größen */
.icon-wohnwagen { width: 250px; }
.icon-wohnmobil { width: 250px; }
.icon-foodtruck { width: 250px; }
.icon-home      { width: 80px; }

/* NEU: Icon-Marcel (gleich groß wie Wohnwagen/Wohnmobil) */
.icon-marcel { width: 250px; }

@media (max-width: 768px) {
  .icon-wohnwagen { width: 200px; }
  .icon-wohnmobil { width: 200px; }
  .icon-foodtruck { width: 200px; }
  .icon-home      { width: 50px; }
  .icon-marcel    { width: 200px; }
  .overlay-text   { font-size: 14px; }
}

@media (max-width: 480px) {
  .icon-wohnwagen { width: 150px; }
  .icon-wohnmobil { width: 150px; }
  .icon-foodtruck { width: 150px; }
  .icon-home      { width: 50px; }
  .icon-marcel    { width: 150px; }
  .overlay-text   { font-size: 12px; }
}

/* =========================================================
   STÖR-ICON (kleines Haus) entfernen
   ========================================================= */
.icon-home::before,
.icon-home::after,
.icon-home .overlay-text::before,
.icon-home .overlay-text::after,
.icon-home i,
.icon-home svg,
.icon-home .fa,
.icon-home .fas,
.icon-home .far,
a.image-link[href*="index.php"]::before,
a.image-link[href*="index.php"]::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   NEU: Bild + Text nebeneinander (Marcel-Bereich)
   ========================================================= */
.marcel-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
}

.marcel-text {
  font-size: 18px;
  line-height: 1.4;
  max-width: 500px;
}

@media (max-width: 768px) {
  .marcel-wrapper {
    flex-direction: column;
    text-align: center;
  }
}



/* CTA Buttons Startseite – gleiche Größe */
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cta-btn {
  width: 260px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  padding: 0;
}


/* CTA Hover – WhatsApp wie Telefon */
.cta-btn.btn-success:hover,
.cta-btn.btn-success:focus {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}