/** Shopify CDN: Minification failed

Line 24:0 Unexpected "#"
Line 24:2 Unexpected "{"
Line 24:7 Expected ":"
Line 24:10 Unexpected "{"
Line 28:0 Unexpected "#"
Line 28:2 Unexpected "{"
Line 28:7 Expected ":"
Line 30:13 Expected identifier but found whitespace
Line 30:15 Unexpected "{"
Line 30:24 Expected ":"
... and 74 more hidden warnings

**/
/* =============================
   FULL-BLEED + Grundlayout
   ============================= */
:root{
  --8ight-accent: #0ea5e9;
  --8ight-hero-fg: #ffffff;
}

#{{ uid }}{
  position:relative; padding:0; margin:0;
  color: var(--8ight-hero-fg, #ffffff);
}
#{{ uid }} .full-bleed{
  position:relative; width:100vw;
  min-height: {{ section.settings.min_h }}vh;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  overflow:hidden;
  display:grid; place-items:center;
  text-align: {{ section.settings.align }};
}
html, body{ overflow-x:hidden; }

/* =============================
   Ebenen: BG (0) → Overlay (1) → LOGO MARK (2) → CONTENT (3)
   ============================= */
#{{ uid }} .hero__bg{ position:absolute; inset:0; z-index:0; }
#{{ uid }} .hero__video,
#{{ uid }} .hero__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  /* Rechtsfokus, damit dein im Bild integriertes Logo (falls vorhanden) rechts sichtbar bleibt */
  object-position:right center;
}
#{{ uid }} .hero__overlay{
  position:absolute; inset:0; z-index:1;
  background:#000;
  opacity: {{ section.settings.overlay_opacity | divided_by: 100.0 }};
}

/* =============================
   Logo oberes Drittel mittig
   ============================= */
#{{ uid }} .hero__mark {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;   /* Abstand zum Text */
}

#{{ uid }} .hero__mark img {
  width: clamp(200px, 35vw, 480px);
  height: auto;
  opacity: 1;  /* volle Sichtbarkeit */
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.7));
}

/* =============================
   Inhalt vor dem Logo
   ============================= */
#{{ uid }} .hero__inner{
  position:relative; z-index:3;
  width:100%; max-width:1100px;
  margin-inline:auto; padding:2rem;
  display:grid; gap:1rem;
}
#{{ uid }} .eyebrow{ letter-spacing:.08em; text-transform:uppercase; font-weight:600; opacity:.9; }
#{{ uid }} h1{ font-size:clamp(2rem, 6vw, 3.25rem); line-height:1.1; margin:0; }
#{{ uid }} .sub{ font-size:clamp(1rem, 2.2vw, 1.25rem); opacity:.9; }
#{{ uid }} .cta{ display:flex; gap:.75rem; flex-wrap:wrap; justify-content: {{ section.settings.align }}; }
#{{ uid }} .btn{ display:inline-flex; align-items:center; justify-content:center; padding:.85rem 1.2rem; border-radius:999px; font-weight:600; text-decoration:none; }
#{{ uid }} .btn--primary{ background:var(--8ight-accent,#0ea5e9); color:#fff; }
#{{ uid }} .btn--secondary{ border:1px solid currentColor; color:inherit; }

/* =============================
   Zugänglichkeit / Mobil
   ============================= */
@media (prefers-reduced-motion: reduce){
  #{{ uid }} .hero__video{ animation:none; }
}

/* Optional: Video auf Mobil ausblenden (wenn im Schema aktiviert) */
{% if section.settings.hide_video_on_mobile %}
@media (max-width: 768px){
  #{{ uid }} .hero__video{ display:none; }
  #{{ uid }} .hero__img{ display:block; }
}
{% endif %}

/* Zusätzliche mobile Feinanpassungen */
@media (max-width: 768px){
  #{{ uid }} .hero__inner{ padding:1.5rem; }
  #{{ uid }} .hero__mark img{ width: clamp(120px, 40vw, 360px); }
}
#{{ uid }} .bottom-note {
  color: #ffffff;   /* Weiß statt Grau */
  opacity: 1;       /* volle Deckkraft */
}