/* ===== Scroll Lock during Intro ===== */
body.intro-lock { overflow: hidden; }

/* ===== Intro Overlay ===== */
#introOverlay { position: fixed; inset: 0; background: #0b0b0b; display: grid; place-items: center; z-index: 9999; pointer-events: none; }
#introLogo, #introWordmark { opacity: 0; transform: translateY(6px) scale(0.98); transition: all .6s ease; }
#introLogo.show { opacity: 1; transform: translateY(0) scale(1); }
#introLogo.moveUp { transform: translateY(-22px) scale(1); }
#introWordmark.show { opacity: 1; transform: translateY(0) scale(1); }
#introOverlay.fadeOut { opacity: 0; transition: opacity .7s ease .1s; pointer-events: none; }

/* ===== Navbar States ===== */
.nav--transparent { background: transparent; }
.nav--solid { background: rgba(0,0,0,0.72); backdrop-filter: saturate(140%) blur(6px); }

/* ===== Navigation Links ===== */
.nav-link {
  position:relative; padding-bottom:2px; font-size:.95rem;
  letter-spacing:.04em; color:rgba(255,255,255,.9); transition:color .25s ease;
}
.nav-link:hover { color:#fff; }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-3px; width:0%; height:1px;
  background:#fff; transition:width .25s ease;
}
.nav-link:hover::after{ width:100%; }

/* ===== Logos ===== */
.logo-mono {
  filter: grayscale(100%) brightness(90%) contrast(95%);
  opacity: .9;
  transition: filter .35s ease, opacity .35s ease, transform .3s ease;
  max-width: 180px;
}
.logo-mono:hover { filter:none; opacity:1; transform: translateY(-4px) scale(1.04); }

/* ===== Slider ===== */
.slider-track { display:flex; transition: transform .6s ease; }
.slider-dot { width:10px; height:10px; border-radius:9999px; background:#4b5563; opacity:.5; transition:all .2s ease; }
.slider-dot.active { background:#fff; opacity:1; transform:scale(1.15); }

/* ===== Reveal Animation ===== */
.reveal { opacity:0; transform: translateY(12px); transition: all .7s ease; }
.reveal.revealed { opacity:1; transform: translateY(0); }

/* ===== Fade Cards ===== */
.fadecard {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: var(--d);
}
.fadecard.revealed {
  opacity: 1; transform: translateY(0);
}

/* ===== Shine Animation (Buttons & Banner) ===== */
.shine {
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.14) 45%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.14) 55%, transparent 100%);
  transform: translateX(-120%);
  animation: shineMove 3s linear infinite;
  transition: transform .3s ease;
}
.group:hover .shine { animation-duration: 1.4s; }
@keyframes shineMove {
  0%   { transform: translateX(-120%); }
  30%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}


.hero-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0; /* war -1, das ist der Fehler */
}

.hero-grad {
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.78) 0%, rgba(0,0,0,.62) 28%, rgba(0,0,0,.38) 60%, rgba(0,0,0,.10) 100%);
  pointer-events:none;
}

.hero-inner {
  position:relative; z-index:2;
  height:100%; max-width:1100px; margin:0 auto;
  padding-inline:1.25rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  opacity:0; transform:translateY(10px);
  transition:opacity .6s ease, transform .6s ease;
}
.hero.loaded .hero-inner { opacity:1; transform:translateY(0); }

.hero-logo {
  width:min(560px,40vw); height:auto; object-fit:contain;
  opacity:.96; filter:drop-shadow(0 6px 24px rgba(0,0,0,.35));
  transform:translateY(6px); transition:transform .6s ease .05s, opacity .6s ease .05s;
}

.hero.loaded .hero-logo { transform:translateY(0); opacity:1; }

.hero-menu {
  display:flex;
  gap:2.5rem;
  padding:.75rem 1.75rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:9999px;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  transition:opacity .4s ease;
}

@supports (-webkit-touch-callout: none) {
  .hero { height: -webkit-fill-available; }
}

/* ===== Glass CTA Button ===== */
.cta-glass{
  position:relative; margin-top:1.5rem;
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 22px; border-radius:9999px;
  font:600 14px/1 Inter, ui-sans-serif, system-ui;
  color:#fff; text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.28) inset, 0 6px 18px rgba(0,0,0,.25);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.cta-glass:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.3) inset, 0 10px 22px rgba(0,0,0,.32); }
.cta-glass::after{
  content:""; position:absolute; inset:-2px;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 40%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.35) 60%, transparent 100%);
  transform:translateX(-120%);
  mix-blend-mode:screen; pointer-events:none;
}

/* ===== Auto Shine ===== */
@media (prefers-reduced-motion: no-preference){
  .cta-glass{ animation:autoShine 7.5s ease-in-out infinite; }
  .cta-glass:hover{ animation-play-state:paused; }
}
@keyframes shine{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(120%); } }
@keyframes autoShine{ 0%, 78%{ } 79%{ } 90%{ } 100%{ } }

/* ===== SMALL FIX ===== */
.cta-glass{ --_dummy:0; }


/* Kontaktformular – iOS/Dark Glass */
.input-group { display: grid; gap: 0.375rem; }
.input-label { font-size: .85rem; color: rgba(255,255,255,.70); }
.input-base{
  width:100%;
  border-radius: 0.9rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#f5f5f5;
  padding:.85rem 1rem;
  outline:none;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease, transform .08s ease;
}
.input-base::placeholder{ color: rgba(255,255,255,.35); }
.input-base:focus{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
  box-shadow: 0 0 0 4px rgba(255,255,255,.10);
}

/* BTN-A: Glass-Light (zentriert, groß) */
.btn-glass{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.4rem;
  border-radius: 0.95rem;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color:#fff; font-weight:600; letter-spacing:.2px;
  backdrop-filter: blur(8px);
  transition: transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-glass:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.btn-glass:active{ transform: translateY(1px); }

/* Mini Icon-Buttons (EXTRA-YES) */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:9999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff; text-decoration:none;
  transition: background .2s ease, border-color .2s ease, transform .08s ease;
}
.icon-btn:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.icon-btn:active{ transform: translateY(1px); }

/* Reuse */
.nav-link { color: rgba(255,255,255,.8); transition: color .2s ease; }
.nav-link:hover { color: #fff; }




/* Icon Base */
.icon-svg{
  width: 22px;
  height: 22px;
  stroke: rgba(255,255,255,.85);
}

.wa-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  transform: scale(0.90); /* sorgt für WA-FIT-CLEAN */
}



/* Icon Button Style */
.icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
  transition:all .25s ease;
}

/* HOVER-SILENT */
.icon-btn:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
  transform:translateY(-1px);
}

.icon-btn:active{
  transform:scale(.95);
}
.hero-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url('assets/cars/kontakt-1.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}

/* ============ FIX: HERO-BG NUR IM HERO SICHTBAR ============ */
/* Sobald man unterhalb des Hero ist, wird die Hintergrundgrafik vollständig abgeschnitten */
body.scrolled-beyond-hero .hero-bg {
  clip-path: inset(100% 0 0 0);
}

/* HERO – Parallax nur im Hero, kein Durchscheinen darunter */
.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  isolation: isolate;
  overflow: hidden;
  z-index: 0;

  /* Parallax hier, statt separates .hero-bg */
  background-image: url('https://autozrn.neuraforest.cloud/assets/cars/kontakt-1.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Parallax-Effekt */
  filter: saturate(110%) contrast(102%);
  background-color: #0b0b0b; /* Fallback */
}

/* weicher Abschluss nach unten */
.hero::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 35vh;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #0b0b0b 100%);
  z-index: 1;
  pointer-events: none;
}

section:not(.hero) { background: #0b0b0b; position: relative; z-index: 5; }

/* Overlay (deins) bleibt */
.hero-grad { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.78) 0%, rgba(0,0,0,.62) 28%, rgba(0,0,0,.38) 60%, rgba(0,0,0,.10) 100%); pointer-events: none; }

/* global: alles unter Hero ist schwarz (damit nichts „durchscheint“) */
body { background: #0b0b0b; }

/* Hero-Inhalte (Logo & Menü) */
.hero-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ===== FIX: KOMPLETTE VIDEO-SECTION SCHWARZ ===== */
section.mx-auto.max-w-7xl.px-4.md\:px-6.pt-4.md\:pt-6.pb-10.md\:pb-12 {
  background-color: #0b0b0b !important;
  position: relative;
  z-index: 5;
}

/* optional: leicht weicher Übergang oben */
section.mx-auto.max-w-7xl.px-4.md\:px-6.pt-4.md\:pt-6.pb-10.md\:pb-12::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to bottom, #0b0b0b 0%, transparent 100%);
  z-index: 6;
  pointer-events: none;
}

/* ===== FINALER, ABSOLUT DICHTER FIX ===== */
section.cinematic-video {
  position: relative;
  z-index: 10;
  background: #0b0b0b !important;
  margin: 0;
  padding: 0;
}

/* Frame komplett schwarz, keine Transparenz */
section.cinematic-video > div {
  background: #0b0b0b !important;
  border: none !important;
}

/* Video schwarz hinterlegt, füllt die Section */
section.cinematic-video video,
section.cinematic-video figure {
  background: #0b0b0b !important;
  display: block;
  position: relative;
  z-index: 11;
}

body.scrolled-beyond-hero .hero-bg {
  clip-path: inset(99.9% 0 0 0);
}

@supports (-webkit-touch-callout: none) {
  .hero {
    background-attachment: scroll !important;
    background-position: center center !important;
    transform: translateZ(0);
    transition: background-size .6s ease;
  }
  .hero:active {
    background-size: 108% auto !important; /* kleiner Zoom bei Touch */
  }
}

.hero.hovering {
  background-size: 108% auto !important;
  transition: background-size .6s ease;
}