/* =============================================================================
   base.css — Reset, Typografie-Basis, Layout, Buttons, Navigation, Grain
   ============================================================================= */

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--deep);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:clamp(1.05rem,.6rem + .9vw,1.25rem);
  font-weight:420;
  line-height:1.65;
  letter-spacing:.005em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  min-height:100svh;
}

img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:color-mix(in oklab,var(--gold) 60%,transparent); color:#11151c; }

/* ---- Überschriften ------------------------------------------------------ */
h1,h2,h3{ font-family:var(--ff-display); font-weight:700; line-height:1.04; letter-spacing:.01em; }
.script{ font-family:var(--ff-script); font-weight:400; }
.gold{ color:var(--gold); }
.neon{
  font-family:var(--ff-neon); color:var(--gold);
  text-shadow:0 0 6px color-mix(in oklab,var(--gold) 70%,transparent),
              0 0 22px color-mix(in oklab,var(--gold) 50%,transparent),
              0 0 48px color-mix(in oklab,var(--gold) 30%,transparent);
}

/* Gold-verlaufende Display-Schrift (Wortmarke, Akzente) */
.goldfill{
  background:linear-gradient(176deg,#fff4d2 4%,#f4b942 38%,#d9a441 62%,#9c6f28 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---- Layout ------------------------------------------------------------- */
.wrap{ width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto; }
.wrap-narrow{ width:min(100% - 2.4rem, 760px); margin-inline:auto; }
section{ position:relative; padding-block:var(--pad-section); }
.eyebrow{
  font-family:var(--ff-display); font-weight:700; font-size:.74rem;
  letter-spacing:.42em; text-transform:uppercase; color:var(--gold);
  display:inline-block; margin-bottom:1.1rem;
}
.section-title{ font-size:clamp(2rem,1.2rem + 3.4vw,3.5rem); color:var(--cream); }
.lead{ font-size:clamp(1.2rem,.9rem + 1.1vw,1.6rem); color:color-mix(in oklab,var(--cream) 88%,var(--text)); }

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  --bg-btn:var(--gold);
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--ff-display); font-weight:700; font-size:.96rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:#1a1206; background:linear-gradient(180deg,#ffd877,#e7ad3c 55%,#c8902c);
  padding:.95em 1.6em; border-radius:999px;
  box-shadow:0 8px 26px color-mix(in oklab,var(--gold) 35%,transparent),
             inset 0 1px 0 #fff5cf;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), filter .25s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 36px color-mix(in oklab,var(--gold) 50%,transparent), inset 0 1px 0 #fff5cf; }
.btn:active{ transform:translateY(0); }
.btn--ghost{
  color:var(--cream); background:none;
  border:1px solid color-mix(in oklab,var(--gold) 45%,transparent);
  box-shadow:none; font-size:.82rem;
}
.btn--ghost:hover{ background:color-mix(in oklab,var(--gold) 12%,transparent); transform:translateY(-2px); box-shadow:none; }
.btn .ic{ width:1.15em; height:1.15em; }

/* Fokus durchgehend sichtbar */
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:6px; }

/* Skip-Link */
.skip{
  position:fixed; top:.6rem; left:50%; translate:-50% -200%;
  z-index:200; background:var(--gold); color:#1a1206; padding:.7em 1.2em;
  border-radius:999px; font-family:var(--ff-display); font-weight:700; letter-spacing:.04em;
  transition:translate .2s var(--ease);
}
.skip:focus{ translate:-50% 0; }

/* ---- Kopf-Navigation ---------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem clamp(1rem,4vw,2.4rem);
  background:linear-gradient(180deg,color-mix(in oklab,var(--deep) 80%,transparent),transparent);
  backdrop-filter:blur(2px);
  transition:background .4s var(--ease), padding .4s var(--ease);
}
.nav.scrolled{
  background:color-mix(in oklab,var(--deep) 86%,transparent);
  backdrop-filter:blur(9px) saturate(1.1);
  box-shadow:0 1px 0 color-mix(in oklab,var(--gold) 18%,transparent);
}
/* Text-Logo (Cinzel + Gold-Dreieck-Ampersand) statt Rasterbild */
.logo{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--ff-display); font-weight:900;
       letter-spacing:.04em; font-size:clamp(.92rem,.8rem + .5vw,1.15rem); color:var(--cream); }
.logo .amp{
  display:grid; place-items:center; width:1.45em; height:1.45em;
  color:#23170a; font-weight:900; font-size:.78em;
  background:linear-gradient(180deg,#ffd877,#d9a441);
  clip-path:polygon(50% 92%, 4% 8%, 96% 8%); /* nach unten zeigendes Dreieck */
  box-shadow:var(--glow-gold);
}
/* Autohaus oben (klein), CARS & MORE darunter */
.logo__txt{ display:flex; flex-direction:column; line-height:1.02; }
.logo__txt small{ font-size:.46em; font-weight:700; letter-spacing:.34em; color:var(--gold); margin-bottom:.12em; }
.nav-cta{ display:flex; align-items:center; gap:.7rem; }

/* ---- Sticky Kauf-Button (immer wärmster Punkt) -------------------------- */
.buybar{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem);
  z-index:95; display:flex; align-items:center; gap:.6rem;
  opacity:0; transform:translateY(20px) scale(.96); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease-out);
}
.buybar.show{ opacity:1; transform:none; pointer-events:auto; }
.buybar .btn{ box-shadow:0 10px 34px color-mix(in oklab,var(--gold) 55%,transparent), inset 0 1px 0 #fff5cf; }
@media (max-width:560px){
  .nav-cta .btn--buy{ display:none; }     /* oben ausblenden, unten bleibt sticky */
}

/* ---- Prozedurales Korn (Film/Papier) ------------------------------------ */
.grain{
  position:fixed; inset:0; z-index:120; pointer-events:none;
  opacity:.5; mix-blend-mode:soft-light;
  background-image:var(--grain-url);
  background-size:200px 200px;
}
@media (prefers-reduced-motion:no-preference){
  .grain{ animation:grainshift 7s steps(6) infinite; }
}
@keyframes grainshift{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-2%)} 60%{transform:translate(-2%,4%)}
  80%{transform:translate(4%,-3%)} 100%{transform:translate(0,0)}
}

/* Vignette über der ganzen Seite für den Kino-Look */
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 18%, transparent 52%, color-mix(in oklab,var(--deep) 85%,#000) 100%);
}

/* Hilfsklassen */
.center{ text-align:center; }
.muted{ color:var(--text-dim); }
.sr-only{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
[hidden]{ display:none!important; }