/* Startseite: Banner als Welle (Slider), drei Karten. Ergänzt header-v4.css, ändert style.css nicht. */
.home .v4-spacer{display:none}               /* das Banner läuft unter dem durchsichtigen Header durch */

/* ---------- Banner ---------- */
.hero{position:relative;overflow:hidden;color:#fff;background:var(--blue);
  padding:calc(var(--h) + 4px) 0 calc(var(--h) * .65 + 44px);
  min-height:clamp(440px,29.2vw,560px)}      /* Gesamthöhe des Banners: bei 1920 px Breite ca. 560 px */
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:70% center;opacity:0;transition:opacity 1s ease}
.hero-slide.is-active{opacity:1}
/* Blauverlauf von links (dunkel) nach rechts (transparent), deckt etwa 2/3 ab */
.hero-shade{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(23,70,112,.96) 0%,rgba(23,70,112,.93) 30%,rgba(23,70,112,.6) 52%,rgba(23,70,112,0) 70%)}
.hero-in{position:relative;max-width:900px;margin:0 auto;padding:0 20px}
.hero-text{max-width:700px}
.hero p{margin:0}
/* Ab Tablet-Breite: Überschrift und Satz darunter jeweils in einer Zeile (auf dem Handy dürfen sie umbrechen) */
@media (min-width:801px){
  .hero-text{max-width:none}
  .hero h1,.hero .hero-sub{white-space:nowrap}
}

.hero .hero-eyebrow{margin:0 0 6px;font-size:.75rem;font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.02em}
.hero h1{margin:0 0 10px;color:#fff;font-size:clamp(1.7rem,2.1vw,2.5rem);line-height:1.15}
.hero .hero-sub{margin:0 0 10px;font-size:1rem;line-height:1.4}
.hero .hero-phone{margin:0 0 14px}
.hero-phone a{display:inline-flex;align-items:center;gap:12px;color:#fff;font-size:clamp(1.4rem,1.6vw,1.9rem);font-weight:700;text-decoration:none;line-height:1.2}
.hero-ico{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:#e30613}
.hero-btn{display:inline-block;padding:8px 16px;background:#3774ab;color:#fff;font-size:1.1rem;font-weight:700;text-decoration:none}
.hero a:hover{background:none;color:#fff}
.hero .hero-btn:hover{background:#2c6494}
.hero a:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Untere Kante: derselbe Bogen wie im Header (gleiche Höhe = gleich dicker Umriss), Fläche darunter in Seitenfarbe */
.hero-edge{position:absolute;left:0;right:0;bottom:0;display:block;width:100%;height:var(--h);pointer-events:none}
.hero-edge .fill{fill:var(--sheet)}

/* ---------- Karten, sitzen halb auf der Wellenkante ---------- */
.hero-cards{position:relative;z-index:2;margin-top:calc(var(--h) * -.65)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,195px));gap:clamp(16px,3.8vw,73px);justify-content:start}
.card{display:block;padding:18px 14px 16px;background:#fff;color:var(--ink);text-align:center;text-decoration:none;
  box-shadow:0 10px 28px rgba(15,40,70,.16)}
.card-ico{display:flex;align-items:center;justify-content:center;height:44px;margin:0 0 6px;color:#8c9399}
.card-ico svg{display:block;height:40px;width:auto;max-width:100%}
.ico-truck svg{height:34px}                 /* der Lieferwagen ist breiter, daher etwas flacher */
.card h2{margin:0 0 6px;font-size:1.1rem;line-height:1.25}
.card p{margin:0;color:#4a5560;font-size:.78rem;line-height:1.35}

/* ---------- Text darunter ---------- */
.home-intro{padding-top:36px}
.home-intro .wrap > h2:first-child{margin-bottom:12px;color:var(--navy);font-size:1.2rem}

/* ---------- Ablauf als Zeitleiste ---------- */
.process{counter-reset:p;list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.process li{position:relative;counter-increment:p;padding-top:74px}
.process li::before{content:counter(p);position:absolute;top:0;left:0;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,#3774ab 0%,#174670 100%);color:#fff;font-size:1.4rem;font-weight:700;box-shadow:0 6px 16px rgba(23,70,112,.28)}
.process li::after{content:"";position:absolute;top:26px;left:68px;right:-18px;height:2px;background:linear-gradient(90deg,#9db6cc,rgba(157,182,204,.2))}
.process li:last-child::after{display:none}
.process h3{margin:0 0 6px;color:var(--navy)}
.process p{margin:0;color:var(--steel)}

/* ---------- Kontakt-Block ---------- */
.cta{position:relative;overflow:hidden;margin-top:52px;color:#fff;
  background:linear-gradient(120deg,#174670 0%,#1f5a8c 62%,#2c6494 100%);box-shadow:0 14px 34px rgba(15,40,70,.22)}
.cta-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:70%;display:block;pointer-events:none}
.cta-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding:36px 40px}
.cta h2{margin:0 0 8px;color:#fff}
.cta p{margin:0;color:#e3edf6}
.cta-act{display:flex;align-items:center;gap:22px 28px;flex-wrap:wrap}
.cta-btn{display:inline-block;padding:12px 26px;background:#fff;color:var(--navy);font-size:1.1rem;font-weight:700;text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.cta a:hover{background:none}
.cta .cta-btn:hover{background:#e8f1f9;color:var(--navy)}
.cta-tel{display:inline-flex;align-items:center;gap:12px;color:#fff;font-size:1.35rem;font-weight:700;text-decoration:none;white-space:nowrap}
.cta a:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---------- Handy ---------- */
@media (max-width:800px){
  .hero{padding-top:calc(var(--h) + 14px)}
  .hero-shade{background:linear-gradient(180deg,rgba(23,70,112,.9) 0%,rgba(23,70,112,.78) 100%)}
  .cards{grid-template-columns:1fr;gap:16px}
  .process{grid-template-columns:1fr;gap:26px}
  .process li{padding:2px 0 0 76px;min-height:54px}
  .process li::after{top:60px;bottom:-22px;left:26px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,#9db6cc,rgba(157,182,204,.2))}
  .cta-in{padding:28px 24px}
  .card{padding:16px 16px 14px}
}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none}}