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

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 schmal weiß */
#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;
}
#sp-logo img{ max-height:36px !important; height:auto !important; }

/* Desktop-Menü AUS (Home/Produkte/Über uns weg) */
#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 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;
}

/* Page Title AUS (sonst kommt das Sternenhimmel-Ding wieder) */
#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 */
#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;
}

@media (max-width:768px){
  #sp-header::after{
    height:320px !important;
    background-image:url("/images/headers/banner-mobile.jpg") !important;
    background-size:100% !important; /* Zoom-Effekt */ 
    background-position:center 20% !important; /* Fokus leicht nach oben */
  }
}

/* TAGLINE (aus deinem Custom-HTML Modul) – EXAKT zentriert */
.hero-tagline{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;

  top: 250px !important;    /* wenn nötig: 235–285 */

  z-index: 999 !important;

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

  text-align: center !important;
  font-family: "Ink Free","InkFree","Inkfree","InkFreeWeb","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; /* Desktop-Bannerhöhe */
  padding-top: 0 !important;
}

@media (max-width:768px){
  #sp-main {
    margin-top: 320px !important; /* Mobile-Bannerhöhe */
  }
}

/* =========================================================
   HOTFIX – Menütexte aus + Tagline exakt mittig
   (Ganz unten in custom.css einfügen)
   ========================================================= */

/* 1) Menütexte (Home/Produkte/Über uns) ausblenden */
#sp-menu .sp-megamenu-wrapper,
#sp-menu .sp-megamenu-parent,
#sp-menu ul.sp-megamenu-parent,
#sp-menu nav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 2) Tagline: wirklich exakt mittig (egal was das Layout versucht) */
.hero-tagline{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;

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

  text-align: center !important;

  /* Position im Banner: NUR HIER dran drehen */
  top: 250px !important;

  margin: 0 !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  z-index: 999 !important;

  pointer-events: none !important;
}
@media (max-width: 768px){
  .hero-tagline{ top: 155px !important; }
}

























































.image-container {
  position: relative;
  width: 300px;      /* anpassen */
  overflow: hidden;
  border-radius: 8px;
}

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

.image-container:hover img {
  transform: scale(1.1);
}

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

.image-link {
  text-decoration: none;
  color: inherit;
  display: inline-block; /* macht den gesamten Block klickbar */
}