/* =========================================================
HERO.CSS
Start-Hero und Unterseiten-Hero
========================================================= */
.hero{position:relative;min-height:78vh;display:flex;align-items:center;padding:145px 7vw 72px;overflow:hidden;background:#070707}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:heroZoom 18s ease-in-out infinite alternate}
.hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.52),rgba(0,0,0,.14)),linear-gradient(to top,rgba(0,0,0,.52),transparent 60%)}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.04)}}
.hero-content{position:relative;z-index:2;max-width:720px;margin-left:3vw}
.hero-logo{width:min(320px,80vw);margin-bottom:22px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;padding:9px 14px;border-radius:7px;text-transform:uppercase;font-size:12px;font-weight:950;letter-spacing:2px}
.hero h1{font-size:clamp(42px,4.6vw,64px);line-height:1.02;letter-spacing:-2.4px;margin:22px 0 18px;color:#fff}
.hero p{font-size:clamp(17px,1.55vw,20px);line-height:1.66;color:#eee;max-width:670px}
.hero-points{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hero-points span{font-size:14px;font-weight:850;color:#eee;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:6px}
.hero-points i{color:var(--red)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.sub-hero{position:relative;min-height:520px;padding:175px 7vw 82px;display:flex;align-items:end;overflow:hidden;background:#070707}
.sub-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.sub-hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.90),rgba(0,0,0,.55),rgba(0,0,0,.18)),linear-gradient(to top,rgba(0,0,0,.75),transparent)}
.sub-hero-content{position:relative;z-index:2;max-width:820px}
.sub-hero h1{font-size:clamp(42px,6.3vw,74px);line-height:1.02;letter-spacing:-2.4px;margin:10px 0 20px;color:#fff}
.sub-hero p{color:#e7e7e7;font-size:20px;line-height:1.65}


/* DM Hero-Branding: klein, freigestellt, nicht als weißer Logo-Kasten */
.hero-brand-mini{
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin-bottom:18px;
  padding:9px 13px 9px 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(6,8,7,.28);
  backdrop-filter:blur(8px);
}
.hero-brand-mini img{
  width:38px;
  height:38px;
  object-fit:contain;
}
.hero-brand-mini span{
  font-family:Manrope,Inter,Arial,sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#fff;
}


/* =========================================
DM HERO VIDEO
========================================= */
.hero-media{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.hero-video,
.hero-bg-fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hero-video{
  object-fit:cover;
  object-position:center center;
  opacity:.82;
}
.hero-bg-fallback{
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
}
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.56),rgba(0,0,0,.14)),
    linear-gradient(to top,rgba(0,0,0,.54),transparent 60%);
  z-index:1;
}
.hero-content{z-index:2}
.hero-scroll-note{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:26px;
  color:rgba(255,255,255,.78);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
}
.hero-scroll-note i{color:var(--dm-beige)}
.hero-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.hero-badges span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:13px;
  font-weight:800;
}
@media(max-width:760px){
  .hero{min-height:84vh;padding:132px 24px 62px}
  .hero-video{opacity:.76}
  .hero-scroll-note{margin-top:20px}
}


/* =========================================
DM HERO EYECATCHER
========================================= */
.hero-eyecatcher{
  position:absolute;
  z-index:4;
  right:6vw;
  bottom:58px;
  width:265px;
  padding:19px 20px 18px;
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(247,244,238,.92));
  color:#141615;
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 26px 70px rgba(0,0,0,.28);
  backdrop-filter:blur(14px);
  transition:.24s ease;
}
.hero-eyecatcher:hover{
  transform:translateY(-5px) rotate(-.3deg);
  box-shadow:0 32px 86px rgba(0,0,0,.34);
}
.hero-eyecatcher-top{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:9px;
}
.google-mini{
  width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;
  background:#fff;
  color:#4285f4;
  font-family:Arial,sans-serif;
  font-size:18px;font-weight:900;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.hero-eyecatcher-label{
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#5f655f;
}
.hero-eyecatcher-score{
  display:flex;
  align-items:flex-end;
  gap:6px;
  line-height:1;
}
.hero-eyecatcher-score strong{
  font-family:Manrope,Inter,Arial,sans-serif;
  font-size:44px;
  letter-spacing:-2px;
  color:#111;
}
.hero-eyecatcher-score span{
  padding-bottom:5px;
  color:#676c68;
  font-size:14px;
  font-weight:800;
}
.hero-eyecatcher-stars{
  margin-top:8px;
  color:#e7a91b;
  font-size:18px;
  letter-spacing:2px;
}
.hero-eyecatcher-foot{
  margin-top:6px;
  color:#666c67;
  font-size:10px;
  font-weight:700;
}
@media(max-width:1050px){
  .hero-eyecatcher{
    right:24px;
    bottom:30px;
    width:235px;
  }
}
@media(max-width:760px){
  .hero-eyecatcher{
    position:relative;
    right:auto;
    bottom:auto;
    margin:24px 0 0;
    width:min(100%,290px);
  }
}


.google-mini{
  width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.google-mini svg{width:18px;height:18px;display:block}
.google-mini svg{width:18px;height:18px;display:block}