.elementor-6899 .elementor-element.elementor-element-933c458{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-mix-blend-mode:multiply;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6899 .elementor-element.elementor-element-933c458:not(.elementor-motion-effects-element-type-background), .elementor-6899 .elementor-element.elementor-element-933c458 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://aeronaval.com.py/wp-content/uploads/2026/04/Hero-Bild-WEB-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6899 .elementor-element.elementor-element-188d619{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6899 .elementor-element.elementor-element-bbc8632{--display:flex;--min-height:500vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6899 .elementor-element.elementor-element-bbc8632:not(.elementor-motion-effects-element-type-background), .elementor-6899 .elementor-element.elementor-element-bbc8632 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0D1B2E;}.elementor-6899 .elementor-element.elementor-element-0ee96b5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:70;}.elementor-6899 .elementor-element.elementor-element-0ee96b5::before, .elementor-6899 .elementor-element.elementor-element-0ee96b5 > .elementor-background-video-container::before, .elementor-6899 .elementor-element.elementor-element-0ee96b5 > .e-con-inner > .elementor-background-video-container::before, .elementor-6899 .elementor-element.elementor-element-0ee96b5 > .elementor-background-slideshow::before, .elementor-6899 .elementor-element.elementor-element-0ee96b5 > .e-con-inner > .elementor-background-slideshow::before, .elementor-6899 .elementor-element.elementor-element-0ee96b5 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#0A1628;--background-overlay:'';}.elementor-6899 .elementor-element.elementor-element-f8ede17{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:70;}.elementor-6899 .elementor-element.elementor-element-f8ede17::before, .elementor-6899 .elementor-element.elementor-element-f8ede17 > .elementor-background-video-container::before, .elementor-6899 .elementor-element.elementor-element-f8ede17 > .e-con-inner > .elementor-background-video-container::before, .elementor-6899 .elementor-element.elementor-element-f8ede17 > .elementor-background-slideshow::before, .elementor-6899 .elementor-element.elementor-element-f8ede17 > .e-con-inner > .elementor-background-slideshow::before, .elementor-6899 .elementor-element.elementor-element-f8ede17 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#0A1628;--background-overlay:'';}.elementor-6899 .elementor-element.elementor-element-d7f59fe{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:70;}.elementor-6899 .elementor-element.elementor-element-d7f59fe::before, .elementor-6899 .elementor-element.elementor-element-d7f59fe > .elementor-background-video-container::before, .elementor-6899 .elementor-element.elementor-element-d7f59fe > .e-con-inner > .elementor-background-video-container::before, .elementor-6899 .elementor-element.elementor-element-d7f59fe > .elementor-background-slideshow::before, .elementor-6899 .elementor-element.elementor-element-d7f59fe > .e-con-inner > .elementor-background-slideshow::before, .elementor-6899 .elementor-element.elementor-element-d7f59fe > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#0A1628;--background-overlay:'';}.elementor-6899 .elementor-element.elementor-element-2102a0d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:70;}.elementor-6899 .elementor-element.elementor-element-2102a0d:not(.elementor-motion-effects-element-type-background), .elementor-6899 .elementor-element.elementor-element-2102a0d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#071220;}.elementor-6899 .elementor-element.elementor-element-2102a0d::before, .elementor-6899 .elementor-element.elementor-element-2102a0d > .elementor-background-video-container::before, .elementor-6899 .elementor-element.elementor-element-2102a0d > .e-con-inner > .elementor-background-video-container::before, .elementor-6899 .elementor-element.elementor-element-2102a0d > .elementor-background-slideshow::before, .elementor-6899 .elementor-element.elementor-element-2102a0d > .e-con-inner > .elementor-background-slideshow::before, .elementor-6899 .elementor-element.elementor-element-2102a0d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#0A1628;--background-overlay:'';}@media(max-width:767px){.elementor-6899 .elementor-element.elementor-element-188d619{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for container, class: .elementor-element-933c458 */.home-hero-cover {
  position: relative;
  z-index: 100 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bbc8632 */.elementor-6899 .elementor-element.elementor-element-bbc8632 {
  height: 600vh !important;
  overflow: visible !important;
  position: relative;
}

@media (min-width: 2560px) {
  .elementor-6899 .elementor-element.elementor-element-bbc8632 {
    height: 380vh !important;
  }
}

@media (max-width: 767px) {
  .elementor-6899 .elementor-element.elementor-element-bbc8632 {
    height: 520vh !important;
  }
}/* End custom CSS */
/* Start custom CSS *//* =========================================
   HOMEPAGE — STICKY SCROLL SCENE
   Aeronaval · aeronaval.com.py
   ========================================= */

/* --- Elementor-Wrapper-Fix für fixed/sticky ---- */
.home-scene-track,
.home-scene-track > .e-con-inner,
.home-scene-track .elementor-widget-wrap,
.home-scene-track .elementor-widget-html,
.home-scene-track .elementor-widget-container {
  height: 100% !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* --- Sticky Scene (fixed) ---------------------- */
.home-scene-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #0d1b2e;
  z-index: 50;
}

/* --- Layer Basis -------------------------------- */
.home-layer-water,
.home-layer-boat,
.home-layer-barges-empty,
.home-layer-barges-full,
.home-layer-hud {
  position: absolute;
  inset: 0;
}

/* --- Wasser Hintergrund ------------------------- */
.home-layer-water {
  z-index: 1;
}
.home-layer-water img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* --- Kielwasser --------------------------------- */
.home-layer-wake {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
  /* Gradient-Maske: Kielwasser läuft oben weich aus */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%);
  mask-image:         linear-gradient(to bottom, transparent 0%, black 18%);
}
.home-layer-wake video {
  position: absolute;
  top: 12%;
  left: 50%;
  height: 110vh;
  width: auto;
  max-width: none;  /* überschreibt Elementor/Theme-Global max-width: 100% */
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
  transition: top 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Wake folgt Boot in Phase 2 + 3 (schrumpft + fährt hoch) */
.home-scene-sticky.is-phase-2 .home-layer-wake video,
.home-scene-sticky.is-phase-3 .home-layer-wake video {
  top: 12%;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.55);
}

/* Phase 4a: Wake schrumpft synchron mit Convoy */
.home-scene-sticky.is-phase-4 .home-layer-wake {
  transform: scale(0.35);
  transform-origin: center 50%;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Video bleibt in Phase-3-Position (verhindert "Aufpoppen" beim Klassentausch) */
.home-scene-sticky.is-phase-4 .home-layer-wake video,
.home-scene-sticky.is-phase-4b .home-layer-wake video {
  top: 12%;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.55);
}

/* Phase 4b: Wake fährt synchron mit Convoy ab */
.home-scene-sticky.is-phase-4b .home-layer-wake {
  transform: scale(0.35) translateY(300vh);
  opacity: 0;
  transition: transform 1.8s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 1s ease 0.8s;
}

/* --- Schubboot ---------------------------------- */
.home-layer-boat {
  z-index: 3;
  pointer-events: none;
  opacity: 1;
}
.home-layer-boat img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 75vh;
  width: auto;
  transform: translateX(-50%) translateY(-50%) scale(1.0);
  transform-origin: center center;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.7s ease;
}

/* --- Bargen leer -------------------------------- */
.home-layer-barges-empty {
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.home-layer-barges-empty img {
  position: absolute;
  top: 52%;
  left: 50%;
  height: 100vh;
  width: auto;
  min-width: 120px;
  transform: translateX(-50%) translateY(55vh);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Bargen voll (Crossfade) -------------------- */
.home-layer-barges-full {
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.home-layer-barges-full img {
  position: absolute;
  top: 52%;
  left: 50%;
  height: 100vh;
  width: auto;
  min-width: 120px;
  transform: translateX(-50%);
  transition: opacity 0.8s ease;
}

/* --- HUD Layer ---------------------------------- */
.home-layer-hud {
  z-index: 10;
  pointer-events: none;
}

/* Intro-Folie: schiebt sich in Phase 4b von oben rein */
.home-layer-intro {
  position: absolute;
  top: -100%;        /* startet oberhalb der Scene */
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;       /* über dem Convoy (z-index 3–5), unter HUD (10) */
  background: #0d1b2e;
  pointer-events: none;
}

/* =========================================
   MOBILE OVERLAY
   ========================================= */
.home-hud-overlay {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: rgba(5, 18, 36, 0.72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1;
  pointer-events: none;
  display: none; /* nur auf Mobile aktiv */
}
.home-hud-overlay-left {
  left: 0;
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-hud-overlay-right {
  right: 0;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================
   HUD CARDS — DESKTOP BASE
   ========================================= */
.home-hud-card {
  position: absolute;
  opacity: 0;
  max-width: 270px;
  color: #fff;
  z-index: 2;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Vertikale Positionen */
.home-hud-1 { top: 18%; }
.home-hud-2 { top: 28%; }
.home-hud-3 { top: 38%; }

/* Horizontale Positionen: Mitte der jeweiligen Bildhälfte */
.home-hud-1,
.home-hud-3 {
  left: 25%;
  transform: translateX(calc(-50% - 30px));
}
.home-hud-2 {
  left: 75%;
  transform: translateX(calc(-50% + 30px));
}

/* Connector-Linien — Desktop */
.home-hud-1::after,
.home-hud-3::after {
  content: '';
  position: absolute;
  right: -56px;
  top: 38%;
  width: 48px;
  height: 1px;
  background: linear-gradient(to right, rgba(86,183,230,0.6), transparent);
}
.home-hud-2::after {
  content: '';
  position: absolute;
  left: -56px;
  top: 38%;
  width: 48px;
  height: 1px;
  background: linear-gradient(to left, rgba(86,183,230,0.6), transparent);
}

/* HUD Typografie — Desktop Base */
.home-hud-card .hud-overline {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #56B7E6;
  margin-bottom: 6px;
}
.home-hud-card .hud-headline {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.home-hud-card .hud-body {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  border-left: 2px solid #56B7E6;
  padding-left: 10px;
  margin-bottom: 14px;
}
.home-hud-card .hud-services-label {
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #56B7E6;
  margin-bottom: 8px;
}
.home-hud-card .hud-services-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.home-hud-card .hud-services-list li {
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  padding: 5px 0 5px 16px;
  position: relative;
  border-bottom: 1px solid rgba(86,183,230,0.12);
}
.home-hud-card .hud-services-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1px;
  background: #56B7E6;
}

/* =========================================
   FHD (1024px – 2559px) — etwas größer
   ========================================= */
@media (min-width: 1024px) and (max-width: 2559px) {
  .home-hud-card { max-width: 300px; }
  .home-hud-card .hud-overline { font-size: 11px; }
  .home-hud-card .hud-headline { font-size: 18px; }
  .home-hud-card .hud-body { font-size: 13px; }
  .home-hud-card .hud-services-label { font-size: 10px; }
  .home-hud-card .hud-services-list li { font-size: 12px; }
}

/* =========================================
   4K (≥ 2560px) — deutlich größer
   ========================================= */
@media (min-width: 2560px) {
  .home-hud-card { max-width: 460px; }
  .home-hud-card .hud-overline { font-size: 13px; margin-bottom: 10px; }
  .home-hud-card .hud-headline { font-size: 26px; margin-bottom: 14px; }
  .home-hud-card .hud-body { font-size: 15px; margin-bottom: 20px; }
  .home-hud-card .hud-services-label { font-size: 11px; margin-bottom: 12px; }
  .home-hud-card .hud-services-list li { font-size: 14px; padding: 8px 0 8px 20px; }
  .home-hud-card .hud-services-list li::before { width: 12px; }
  .home-hud-1::after,
  .home-hud-3::after { right: -72px; width: 64px; }
  .home-hud-2::after { left: -72px; width: 64px; }
}

/* =========================================
   PHASEN
   ========================================= */

/* --- Phase 1: HUD-1 einblenden ---------------- */
.home-scene-sticky.is-phase-1 .home-hud-1 {
  opacity: 1;
  transform: translateX(-50%);
}

/* --- Phase 2: Bargen docken + HUD-2 ----------- */
.home-scene-sticky.is-phase-2 .home-layer-boat img,
.home-scene-sticky.is-phase-3 .home-layer-boat img,
.home-scene-sticky.is-phase-4 .home-layer-boat img,
.home-scene-sticky.is-phase-4b .home-layer-boat img {
  transform: translateX(-50%) translateY(-75%) scale(0.55);
}
.home-scene-sticky.is-phase-2 .home-layer-barges-empty {
  opacity: 1;
}
.home-scene-sticky.is-phase-2 .home-layer-barges-empty img {
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.5s;
}
.home-scene-sticky.is-phase-2 .home-hud-2 {
  opacity: 1;
  transform: translateX(-50%);
}

/* --- Phase 3: Bargen voll + HUD-3 ------------- */
.home-scene-sticky.is-phase-3 .home-layer-barges-empty {
  opacity: 1;
}
.home-scene-sticky.is-phase-3 .home-layer-barges-empty img {
  transform: translateX(-50%) translateY(0);
}
.home-scene-sticky.is-phase-3 .home-layer-barges-full {
  opacity: 1;
}
.home-scene-sticky.is-phase-3 .home-hud-3 {
  opacity: 1;
  transform: translateX(-50%);
}

/* --- Convoy Wrapper ----------------------------- */
.home-layer-convoy {
  position: absolute;
  inset: 0;
  z-index: 3; /* explizit > wake (z-index:2) → korrekte Reihenfolge auch wenn Transform aktiv */
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 1s ease;
}

/* --- Phase 4a: Verbund verkleinert -------------- */
.home-scene-sticky.is-phase-4 .home-layer-convoy {
  transform: scale(0.35);
  transform-origin: center 50%;
}
.home-scene-sticky.is-phase-4 .home-layer-barges-empty,
.home-scene-sticky.is-phase-4 .home-layer-barges-full {
  opacity: 1;
}
.home-scene-sticky.is-phase-4 .home-layer-barges-empty img,
.home-scene-sticky.is-phase-4b .home-layer-barges-empty img {
  transform: translateX(-50%) translateY(0);
}
.home-scene-sticky.is-phase-4 .home-hud-1,
.home-scene-sticky.is-phase-4 .home-hud-2,
.home-scene-sticky.is-phase-4 .home-hud-3 {
  opacity: 0;
}

/* --- Phase 4b: Abfahrt nach unten --------------- */
.home-scene-sticky.is-phase-4b .home-layer-convoy {
  transform: scale(0.35) translateY(300vh);
  opacity: 0;
  transition: transform 1.8s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 1s ease 0.8s;
}
.home-scene-sticky.is-phase-4b .home-layer-barges-empty,
.home-scene-sticky.is-phase-4b .home-layer-barges-full {
  opacity: 1;
}
.home-scene-sticky.is-phase-4b .home-hud-1,
.home-scene-sticky.is-phase-4b .home-hud-2,
.home-scene-sticky.is-phase-4b .home-hud-3 {
  opacity: 0;
}

/* =========================================
   HERO COVER (höchster z-index)
   ========================================= */
.home-hero-cover {
  position: relative;
  z-index: 100 !important;
}

/* =========================================
   ELEMENTOR EDITOR (Vorschau im Editor)
   ========================================= */
body.elementor-editor-active .home-scene-sticky {
  position: relative !important;
  height: auto !important;
  min-height: 100svh;
}
body.elementor-editor-active .home-layer-water,
body.elementor-editor-active .home-layer-boat,
body.elementor-editor-active .home-layer-barges-empty,
body.elementor-editor-active .home-layer-barges-full,
body.elementor-editor-active .home-layer-hud {
  position: relative !important;
  inset: auto !important;
  opacity: 1 !important;
}
body.elementor-editor-active .home-layer-boat img,
body.elementor-editor-active .home-layer-barges-empty img,
body.elementor-editor-active .home-layer-barges-full img {
  position: relative !important;
  transform: none !important;
}
body.elementor-editor-active .home-hud-card {
  position: relative !important;
  opacity: 1 !important;
  transform: none !important;
}

/* =========================================
   MOBILE (max 767px)
   ========================================= */
@media (max-width: 767px) {

  /* Bild-Größen */
  .home-layer-boat img { height: 55vh; }
  .home-layer-barges-empty img { height: 85vh; width: auto; }
  .home-layer-barges-full img { height: 85vh; width: auto; }

  /* Wake auf Mobile */
  .home-layer-wake video {
    height: 100vh;   /* größer = breiter visuell */
    top: 8%;        /* tiefer → näher am Boot in Phase 1 */
  }
  .home-scene-sticky.is-phase-2 .home-layer-wake video,
  .home-scene-sticky.is-phase-3 .home-layer-wake video,
  .home-scene-sticky.is-phase-4 .home-layer-wake video,
  .home-scene-sticky.is-phase-4b .home-layer-wake video {
    top: 12%;        /* Boot in Phase 2/3 weit oben → Wake folgt */
  }

  /* --- Overlays aktivieren ------------------- */
  .home-hud-overlay { display: block; }

  /* Overlay einfahren wenn zugehöriges HUD aktiv */
  .home-scene-sticky.is-phase-1 .home-hud-overlay-left,
  .home-scene-sticky.is-phase-3 .home-hud-overlay-left {
    transform: translateX(0);
  }
  .home-scene-sticky.is-phase-2 .home-hud-overlay-right {
    transform: translateX(0);
  }

  /* Phase 4/4b: alle Overlays wieder raus */
  .home-scene-sticky.is-phase-4 .home-hud-overlay-left,
  .home-scene-sticky.is-phase-4b .home-hud-overlay-left {
    transform: translateX(-100%);
  }
  .home-scene-sticky.is-phase-4 .home-hud-overlay-right,
  .home-scene-sticky.is-phase-4b .home-hud-overlay-right {
    transform: translateX(100%);
  }

  /* --- HUD-Cards auf Mobile ------------------- */
  .home-hud-card { max-width: 44vw; }

  .home-hud-1,
  .home-hud-3 {
    left: 25%;
    transform: translateX(calc(-50% - 30px));
  }
  .home-hud-2 {
    left: 50%;
    transform: translateX(40px); /* ausgeblendet: von rechts */
  }

  /* HUD mit 0.3s Verzögerung nach Overlay */
  .home-scene-sticky.is-phase-1 .home-hud-1,
  .home-scene-sticky.is-phase-3 .home-hud-3 {
    opacity: 1;
    transform: translateX(-50%);
    transition-delay: 0.3s;
  }
  .home-scene-sticky.is-phase-2 .home-hud-2 {
    opacity: 1;
    transform: translateX(8px); /* linksbündig ab Mitte + kleiner Abstand */
    transition-delay: 0.3s;
  }

  /* Connector-Linien weg */
  .home-hud-1::after,
  .home-hud-2::after,
  .home-hud-3::after { display: none; }

  /* Typografie Mobile */
  .home-hud-card .hud-overline { font-size: 9px; }
  .home-hud-card .hud-headline { font-size: 13px; margin-bottom: 6px; }
  .home-hud-card .hud-body { font-size: 11px; margin-bottom: 10px; }
  .home-hud-card .hud-services-label { font-size: 8px; }
  .home-hud-card .hud-services-list li { font-size: 10px; padding: 4px 0 4px 14px; }
}

/* =========================================
   INTRO-FOLIE (home-layer-intro)
   Am Ende des bestehenden Animation-CSS ergänzen
   ========================================= */

/* Schiff + Kielwasser + HUD explizit über der Intro-Folie halten */
.home-layer-wake,
.home-layer-convoy,
.home-layer-hud {
  z-index: 10;
}

.home-layer-intro {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4; /* unter Schiff (10) — wird "hinter" dem Schiff sichtbar */
  background: #0d1b2e;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transform: translate3d(0, 0, 0); /* GPU-Layer initialisieren */
}

.hli-inner {
  width: 100%;
  max-width: 960px;
  padding: 0 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hli-overline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #56B7E6;
  margin-bottom: 22px;
}
.hli-bar {
  display: block;
  width: 28px;
  height: 1px;
  background: #56B7E6;
  flex-shrink: 0;
}

.hli-body {
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.8;
  color: rgba(255,255,255,0.68);
  text-align: center;
  margin: 0;
}

.hli-divider {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, transparent, #56B7E6, transparent);
  margin: 36px auto;
  opacity: 0.5;
}

.hli-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  max-width: 860px;
}

.hli-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  border-left: 1px solid rgba(86,183,230,0.12);
  position: relative;
  cursor: default;
}
.hli-stat:first-child { border-left: none; }

/* Hover-Unterstrich */
.hli-stat::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 32px;
  height: 2px;
  background: #56B7E6;
  transition: transform 0.35s ease;
}
.hli-stat:hover::after { transform: translateX(-50%) scaleX(1); }

/* Icon */
.hli-stat-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  opacity: 0.9;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.hli-stat:hover .hli-stat-icon { transform: translateY(-3px); opacity: 1; }
.hli-stat-icon svg { width: 100%; height: 100%; }

.hli-number {
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.hli-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-align: center;
}

/* === FHD (1024–2559px) === */
@media (min-width: 1024px) and (max-width: 2559px) {
  .hli-inner { max-width: 1000px; }
  .hli-body { font-size: clamp(15px, 1.1vw, 17px); }
  .hli-number { font-size: clamp(40px, 3.8vw, 56px); }
  .hli-label { font-size: 11px; }
  .hli-stat-icon { width: 52px; height: 52px; }
}

/* === 4K (≥ 2560px) === */
@media (min-width: 2560px) {
  .hli-inner { max-width: 1400px; }
  .hli-overline { font-size: 14px; gap: 18px; margin-bottom: 30px; }
  .hli-bar { width: 40px; }
  .hli-body { font-size: 22px; line-height: 1.9; }
  .hli-divider { height: 64px; margin: 52px auto; }
  .hli-stats { max-width: 1200px; }
  .hli-stat { padding: 36px 28px; }
  .hli-stat-icon { width: 72px; height: 72px; margin-bottom: 22px; }
  .hli-number { font-size: 78px; margin-bottom: 14px; }
  .hli-label { font-size: 15px; letter-spacing: 0.2em; }
}

/* === Mobile (≤ 767px) === */
@media (max-width: 767px) {
  .hli-stats { grid-template-columns: repeat(2, 1fr); }
  .hli-stat { border-left: none; border-bottom: 1px solid rgba(86,183,230,0.10); }
  .hli-stat:nth-child(even) { border-left: 1px solid rgba(86,183,230,0.10); }
  .hli-stat:nth-child(3),
  .hli-stat:nth-child(4) { border-bottom: none; }
  .hli-stat-icon { width: 38px; height: 38px; margin-bottom: 10px; }
  .hli-body { font-size: 13px; }
  .hli-divider { height: 32px; margin: 24px auto; }
}/* End custom CSS */