/* =========================================================
   PCAF · Andresen Fahrzeugtechnik · Entwurf
   Palette: Ink/Tar/Steel · Creme/Sand · Flame (Werkstattlicht)
   Formsprache: alles rechteckig, --r: 2px
   ========================================================= */
@import url('fonts/fonts.css');

:root{
  --ink:#0A0B0C;
  --tar:#111315;
  --steel:#191D21;
  --steel-2:#22272C;
  --creme:#F2F1EF;
  --sand:#E5E4E1;
  --paper-ink:#14161A;
  --flame:#DA3028;
  --flame-deep:#B5231D;
  --smoke:#8D949B;
  --line-d:rgba(255,255,255,.13);
  --line-l:rgba(20,22,26,.16);
  --r:2px;
  --display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --section-py:clamp(72px,7.2vw,108px);
  --wrap:1280px;
  --pad:clamp(20px,4.2vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
html{
  overflow-x:hidden; overflow-x:clip;
  scroll-behavior:smooth; overflow-anchor:none;
  -webkit-text-size-adjust:100%;
  color-scheme:light only;
}
body{
  margin:0; background:var(--ink); color:var(--creme);
  font-family:var(--display); font-weight:400; font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; overflow-x:clip; overflow-anchor:none;
}
img{max-width:100%; height:auto; display:block}
figure,dl,dd{margin:0}
a{color:inherit}
button,input,textarea,select{font:inherit; color:inherit}
::selection{background:var(--flame); color:#0A0B0C}

/* ---------- Grundbausteine ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.sec{padding-block:var(--section-py); position:relative}
.sec--ink{background:var(--ink)}
.sec--tar{background:var(--tar)}
.sec--creme{background:var(--creme); color:var(--paper-ink)}
.sec--sand{background:var(--sand); color:var(--paper-ink)}

.kicker{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--flame);
  margin:0 0 18px;
}
.sec--creme .kicker,.sec--sand .kicker{color:var(--flame-deep)}

h1,h2,h3,h4{
  font-family:var(--display); font-weight:700; line-height:1.06;
  letter-spacing:-.025em; margin:0; text-wrap:balance; hyphens:none;
}
h1{font-size:clamp(38px,6.6vw,86px)}
h2{font-size:clamp(30px,4.3vw,58px)}
h3{font-size:clamp(20px,2vw,26px); font-weight:700; letter-spacing:-.015em; line-height:1.18}
em,.it{font-family:var(--serif); font-style:italic; font-weight:500; color:var(--flame); letter-spacing:-.01em}
.sec--creme em,.sec--sand em,.sec--creme .it,.sec--sand .it{color:var(--flame-deep)}
p{margin:0 0 1em}
.lead{font-size:clamp(17px,1.35vw,20px); line-height:1.6; color:rgba(242,236,226,.78); max-width:62ch}
.sec--creme .lead,.sec--sand .lead{color:rgba(20,22,26,.74)}

.mono{font-family:var(--mono); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--smoke)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 28px; border-radius:var(--r); border:1px solid transparent;
  font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.005em;
  text-decoration:none; cursor:pointer; white-space:nowrap; flex-shrink:0;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}
.btn--flame{background:var(--flame); color:#0A0B0C}
.btn--flame:hover{background:#F0A052; transform:translateY(-2px)}
.btn--ghost{background:transparent; color:var(--creme); border-color:rgba(242,236,226,.3)}
.btn--ghost:hover{border-color:var(--creme); background:rgba(242,236,226,.07)}
.sec--creme .btn--ghost,.sec--sand .btn--ghost{color:var(--paper-ink); border-color:rgba(20,22,26,.28)}
.sec--creme .btn--ghost:hover,.sec--sand .btn--ghost:hover{background:rgba(20,22,26,.06); border-color:var(--paper-ink)}
.btn--dark{background:var(--ink); color:var(--creme)}
.btn--dark:hover{background:#000; transform:translateY(-2px)}
.btn svg{width:16px; height:16px; flex-shrink:0}

/* ---------- Reveals ---------- */
html.js .rv{opacity:1; transform:none; transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
html.js .rv.is-in{opacity:1; transform:none}
html.js .rv-d1{transition-delay:.08s} html.js .rv-d2{transition-delay:.16s}
html.js .rv-d3{transition-delay:.24s} html.js .rv-d4{transition-delay:.32s}
html.js .wipe{clip-path:inset(0); transition:clip-path 1.15s cubic-bezier(.19,1,.22,1),opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
html.js .wipe.is-in{clip-path:inset(0 0 0 0)}
html.js .ln{display:block; overflow:hidden; padding-block:.06em; margin-block:-.06em}
html.js .ln>span{display:block; transform:none; transition:transform 1s cubic-bezier(.19,1,.22,1)}
html.js .is-in .ln>span,html.js .ln.is-in>span{transform:none}
html.js .ln:nth-child(2)>span{transition-delay:.09s}
html.js .ln:nth-child(3)>span{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .ln>span{opacity:1 !important; transform:none !important; transition:none !important}
  html{scroll-behavior:auto}
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  background:rgba(10,11,12,0); border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease;
}
.nav.is-stuck{background:rgba(10,11,12,.96); border-bottom-color:var(--line-d)}
.nav__in{display:flex; align-items:center; gap:24px; height:74px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.brand__mark{
  width:40px; height:40px; flex-shrink:0; border:1px solid rgba(242,236,226,.32);
  display:grid; place-items:center; font-family:var(--display); font-weight:900;
  font-size:13px; letter-spacing:.02em; color:var(--creme);
}
.brand__txt{display:flex; flex-direction:column; line-height:1.15}
.brand__name{font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.01em}
.brand__sub{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--smoke)}
.nav__links{display:flex; align-items:center; gap:28px}
.nav__links a{
  font-size:14.5px; font-weight:500; text-decoration:none; color:rgba(242,236,226,.82);
  transition:color .2s ease; position:relative; padding-block:6px;
}
.nav__links a:hover{color:var(--flame)}
.nav__tel{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--mono); font-size:13.5px; font-weight:500; letter-spacing:.02em;
  padding:11px 18px; border:1px solid rgba(242,236,226,.28); border-radius:var(--r);
  transition:border-color .2s ease,background .2s ease;
}
.nav__tel:hover{border-color:var(--flame); background:rgba(224,139,60,.12)}
.nav__tel svg{width:14px; height:14px}
.burger{display:none; width:44px; height:44px; background:none; border:1px solid rgba(242,236,226,.28); border-radius:var(--r); cursor:pointer; padding:0; place-items:center}
.burger span{display:block; width:18px; height:1.5px; background:var(--creme); margin:3.5px auto; transition:transform .3s ease,opacity .2s ease}
.burger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobmenu{
  position:fixed; inset:0 0 auto 0; z-index:79; background:var(--ink);
  border-bottom:1px solid var(--line-d); padding:82px var(--pad) 28px;
  transform:translateY(-100%); transition:transform .38s cubic-bezier(.4,0,.2,1);
  visibility:hidden; display:none;
}
.mobmenu.is-open{transform:none; visibility:visible}
.mobmenu a{display:block; padding:15px 0; border-bottom:1px solid var(--line-d); text-decoration:none; font-size:18px; font-weight:600}
.mobmenu .btn{width:100%; margin-top:20px}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative; min-height:clamp(640px,88svh,860px); display:flex; align-items:flex-end; overflow:hidden; background:#000}
.hero__bg{position:absolute; inset:0; z-index:0}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:62% 52%; transform:none}
@keyframes heroPan{to{transform:scale(1)}}
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,rgba(10,11,12,.48),transparent 28%,rgba(10,11,12,.18) 60%,rgba(10,11,12,.92)),
    linear-gradient(90deg,rgba(10,11,12,.83),rgba(10,11,12,.46) 48%,transparent 80%);
}
.hero__in{position:relative; z-index:2; width:100%; padding-block:130px 46px}
.hero h1{max-width:min(1080px,100%); margin-bottom:26px}
.hero .lead{max-width:50ch; color:rgba(242,236,226,.84); font-size:clamp(16.5px,1.4vw,20px)}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.hero__meta{
  display:flex; flex-wrap:wrap; gap:10px 30px; margin-top:44px; padding-top:22px;
  border-top:1px solid rgba(242,236,226,.16);
}
.hero__meta span{font-family:var(--mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:rgba(242,236,226,.62)}
.hero__meta b{color:var(--flame); font-weight:500}
.scrollhint{
  position:absolute; right:var(--pad); bottom:46px; z-index:2; display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(242,236,226,.5);
}
.scrollhint i{display:block; width:1px; height:42px; background:linear-gradient(180deg,rgba(242,236,226,.5),transparent); animation:hintPulse 2.4s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.25; transform:scaleY(.6); transform-origin:top}50%{opacity:1; transform:scaleY(1)}}

/* =========================================================
   FAKTENBAND
   ========================================================= */
.facts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line-l); border:1px solid var(--line-l)}
.fact{background:var(--creme); padding:30px 26px 32px; display:flex; flex-direction:column; min-width:0}
.fact__n{font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; color:var(--flame-deep); margin-bottom:16px}
.fact h3{font-size:clamp(18px,1.55vw,21px); margin-bottom:8px}
.fact p{font-size:15px; line-height:1.55; color:rgba(20,22,26,.7); margin:0}

/* =========================================================
   FOKUS (die zwei Fahrzeuge)
   ========================================================= */
.focus__head{display:grid; gap:18px; max-width:78ch; margin-bottom:clamp(44px,5vw,72px)}
.car{display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(28px,4.4vw,68px); align-items:center; padding-block:clamp(40px,5vw,64px)}
.car+.car{border-top:1px solid var(--line-d)}
.car--rev .car__media{order:2}
.car__media{position:relative; overflow:hidden; background:#000; border:1px solid var(--line-d)}
.car__media img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
.car__media:hover img{transform:scale(1.035)}
.car__tag{
  position:absolute; left:0; bottom:0; z-index:2; background:var(--flame); color:#0A0B0C;
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:9px 16px;
}
.car h3{font-size:clamp(26px,3.1vw,42px); font-weight:800; letter-spacing:-.025em; line-height:1.05; margin-bottom:18px}
.car .lead{margin-bottom:26px}
.spec{border-top:1px solid var(--line-d); margin:0 0 28px}
.spec__row{display:grid; grid-template-columns:minmax(0,132px) minmax(0,1fr); gap:16px; padding:13px 0; border-bottom:1px solid var(--line-d)}
.spec__row dt{font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--smoke); padding-top:3px}
.spec__row dd{margin:0; font-size:15.5px; line-height:1.5; color:rgba(242,236,226,.86)}

/* =========================================================
   CTA-BAND
   ========================================================= */
.band{background:var(--flame); color:#0A0B0C; padding-block:clamp(48px,6vw,80px)}
.band__in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px}
.band h2{font-size:clamp(26px,3.3vw,44px); max-width:20ch; color:#0A0B0C}
.band p{margin:10px 0 0; font-size:16px; color:rgba(10,11,12,.76); max-width:46ch}
.band__tel{
  font-family:var(--display); font-weight:900; font-size:clamp(26px,3.2vw,40px);
  letter-spacing:-.02em; text-decoration:none; display:block; color:#0A0B0C;
}
.band__tel:hover{text-decoration:underline; text-underline-offset:6px}
.band__right{text-align:right}
.band__right .mono{color:rgba(10,11,12,.66); display:block; margin-bottom:6px}

/* =========================================================
   LEISTUNGEN
   ========================================================= */
.head2{display:grid; gap:16px; max-width:70ch; margin-bottom:clamp(36px,4.4vw,60px)}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line-l); border:1px solid var(--line-l)}
.svc{background:var(--creme); padding:32px 28px 34px; display:flex; flex-direction:column; min-width:0; transition:background .25s ease}
.svc:hover{background:#FFF9F0}
.svc__ico{width:30px; height:30px; margin-bottom:20px; color:var(--flame-deep)}
.svc__ico svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.4}
.svc h3{margin-bottom:10px; min-height:2.36em}
.svc p{font-size:15px; line-height:1.58; color:rgba(20,22,26,.72); margin:0 0 18px}
.svc ul{list-style:none; margin:auto 0 0; padding:0; border-top:1px solid var(--line-l); padding-top:14px}
.svc li{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:rgba(20,22,26,.6); padding:3px 0}

/* =========================================================
   ABLAUF
   ========================================================= */
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.6vw,34px)}
.step{min-width:0; padding-top:22px; border-top:1px solid var(--line-d)}
.step__n{font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--flame); margin-bottom:14px}
.step h3{margin-bottom:10px; min-height:2.36em}
.step p{font-size:15px; line-height:1.58; color:rgba(242,236,226,.68); margin:0}

/* =========================================================
   ANSPRUCH / STATEMENT
   ========================================================= */
.claim{display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(28px,4.6vw,72px); align-items:center}
.claim__media{overflow:hidden; border:1px solid var(--line-d); background:#000}
.claim__media img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover}
.claim__copy h2{margin-bottom:20px}
.claim__list{list-style:none; margin:32px 0 0; padding:0; border-top:1px solid var(--line-d)}
.claim__list li{display:grid; gap:2px; padding:16px 0; border-bottom:1px solid var(--line-d)}
.sec--creme .claim__list,.sec--creme .claim__list li{border-color:var(--line-l)}
.sec--creme .claim__list span{color:rgba(20,22,26,.66)}
.sec--creme .claim__media{border-color:var(--line-l)}
.claim__list b{font-size:16.5px; font-weight:700; letter-spacing:-.01em}
.claim__list span{font-size:15px; color:rgba(242,236,226,.62)}

/* =========================================================
   GALERIE (echte Werkstattfotos)
   ========================================================= */
.gal__head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:22px; margin-bottom:34px}
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:clamp(260px,30vw,380px);
  gap:18px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad);
  padding-inline:var(--pad); padding-bottom:18px; margin-inline:calc(var(--pad)*-1);
  scrollbar-width:thin; scrollbar-color:rgba(20,22,26,.35) transparent;
}
.rail::-webkit-scrollbar{height:5px}
.rail::-webkit-scrollbar-thumb{background:rgba(20,22,26,.35)}
.shot{scroll-snap-align:start; margin:0; background:#0A0B0C; border:1px solid rgba(20,22,26,.2); display:flex; flex-direction:column; min-width:0}
.shot img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; flex-grow:1}
.shot figcaption{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  padding:12px 14px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; white-space:nowrap;
}
.shot figcaption b{color:var(--creme); font-weight:500; overflow:hidden; text-overflow:ellipsis}
.shot figcaption span{color:var(--flame); flex-shrink:0}
.rail__hint{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(20,22,26,.55); margin-top:14px}

/* =========================================================
   WERKSTATT / INHABER
   ========================================================= */
.shop{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(28px,4.4vw,64px); align-items:center}
.shop__media{position:relative; border:1px solid var(--line-d); overflow:hidden; background:#000}
.shop__media img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover}
.shop__stamp{
  position:absolute; right:0; top:0; background:var(--ink); border-left:1px solid var(--line-d); border-bottom:1px solid var(--line-d);
  padding:14px 18px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--flame);
}
.hours{border-top:1px solid var(--line-d); margin-top:28px}
.hours__row{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line-d); font-size:15px}
.hours__row span:first-child{font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--smoke)}
.hours__row.is-off span:last-child{color:rgba(242,236,226,.45)}
.hours__row b{font-weight:600; color:var(--creme)}

/* =========================================================
   FAQ
   ========================================================= */
.faq{max-width:900px; border-top:1px solid var(--line-l)}
.faq details{border-bottom:1px solid var(--line-l)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:clamp(17px,1.5vw,20px); line-height:1.35; letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:13px; height:13px; margin-top:-6px;
  background:
    linear-gradient(var(--flame-deep),var(--flame-deep)) center/100% 1.5px no-repeat,
    linear-gradient(var(--flame-deep),var(--flame-deep)) center/1.5px 100% no-repeat;
  transition:transform .3s ease;
}
.faq details[open] summary::after{transform:rotate(90deg); background:linear-gradient(var(--flame-deep),var(--flame-deep)) center/100% 1.5px no-repeat}
.faq__body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1)}
.faq details[open] .faq__body{grid-template-rows:1fr}
.faq__body>div{overflow:hidden}
.faq__body p{font-size:15.5px; line-height:1.62; color:rgba(20,22,26,.72); max-width:72ch; margin:0 0 22px}
.faq summary:focus-visible{outline:2px solid var(--flame-deep); outline-offset:-3px}

/* =========================================================
   KONTAKT / FORMULAR
   ========================================================= */
.contact{display:grid; grid-template-columns:1fr 1.06fr; gap:clamp(30px,4.4vw,64px); align-items:start}
.contact__info .lead{margin-bottom:28px}
.infolist{border-top:1px solid var(--line-d)}
.infolist a,.infolist div{
  display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr); gap:16px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--line-d); text-decoration:none;
}
.infolist a:hover span:last-child{color:var(--flame)}
.infolist span:first-child{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke)}
.infolist span:last-child{font-size:16.5px; font-weight:600; transition:color .2s ease; min-width:0}
.form{background:var(--steel); border:1px solid var(--line-d); padding:clamp(24px,3vw,38px)}
.form h3{margin-bottom:6px}
.form>p{font-size:14.5px; color:rgba(242,236,226,.62); margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--smoke); margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%; background:#0D0F11; border:1px solid var(--line-d); border-radius:var(--r);
  padding:14px 15px; font-size:15.5px; color:var(--creme); caret-color:var(--flame);
  transition:border-color .2s ease,background .2s ease;
}
.field textarea{min-height:124px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--flame); background:#0A0B0C}
.field input::placeholder,.field textarea::placeholder{color:rgba(242,236,226,.34)}
.field input:-webkit-autofill,.field textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--creme); -webkit-box-shadow:0 0 0 1000px #0D0F11 inset; caret-color:var(--flame);
}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--smoke) 50%),linear-gradient(135deg,var(--smoke) 50%,transparent 50%); background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.consent{display:flex; gap:12px; align-items:flex-start; margin:20px 0 22px}
.consent input{width:18px; height:18px; flex-shrink:0; margin-top:3px; accent-color:var(--flame)}
.consent label{font-size:13.5px; line-height:1.5; color:rgba(242,236,226,.66)}
.consent a{color:var(--flame)}
.form .btn{width:100%}
.form__note{font-family:var(--mono); font-size:11px; letter-spacing:.09em; color:rgba(242,236,226,.42); margin:16px 0 0; text-align:center}

/* Karte, 2-Klick */
.map{margin-top:clamp(36px,4vw,56px); border:1px solid var(--line-d); background:var(--steel); position:relative; overflow:hidden}
.map__ph{display:grid; place-items:center; gap:14px; text-align:center; padding:clamp(40px,7vw,86px) 24px; min-height:260px}
.map__ph p{font-size:14px; color:rgba(242,236,226,.55); max-width:52ch; margin:0}
.map__adr{font-family:var(--display) !important; font-size:20px !important; font-weight:700 !important; line-height:1.4; color:var(--creme) !important; letter-spacing:-.01em}
.map__btns{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:6px}
.map iframe{display:block; width:100%; height:420px; border:0}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{background:#050607; border-top:1px solid var(--line-d); padding-block:clamp(48px,5vw,72px) 30px}
.foot__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(26px,3vw,48px)}
.foot__col h4{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--flame); margin-bottom:18px}
.foot__col p,.foot__col a{font-size:15px; color:rgba(242,236,226,.68); text-decoration:none; display:block; margin-bottom:9px; line-height:1.55}
.foot__col a:hover{color:var(--flame)}
.foot__brand .brand{margin-bottom:18px}
.foot__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  margin-top:clamp(36px,4vw,56px); padding-top:24px; border-top:1px solid var(--line-d);
}
.foot__bottom p,.foot__bottom a{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:rgba(242,236,226,.45); margin:0; text-decoration:none}
.foot__bottom a:hover{color:var(--flame)}
.foot__links{display:flex; gap:22px}

/* Mobile Callbar */
.callbar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:78; background:rgba(10,11,12,.97); border-top:1px solid var(--line-d); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); gap:10px}
.callbar .btn{flex:1; padding:14px 10px; font-size:14px}

/* ---------- Redaktioneller Feinschliff ---------- */
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--flame); outline-offset:5px}
section[id]{scroll-margin-top:90px}
.ln,.ln>span{display:block}
.hero h1{font-size:clamp(42px,5.65vw,76px); font-weight:800; letter-spacing:-.04em}
.hero .lead{max-width:44ch}
.hero__cta .btn--ghost{border-color:transparent; padding-inline:12px; text-decoration:underline; text-underline-offset:6px}
.hero__meta{gap:12px 28px}
.hero__meta span{letter-spacing:.06em}
.scrollhint{display:none}
.facts-section{padding-block:52px}
.facts{background:none; border:0; gap:32px}
.fact{padding:0 24px 0 0; border-right:1px solid var(--line-l)}
.fact:last-child{border-right:0}
.fact__n{margin-bottom:12px; color:var(--paper-ink)}
.fact h3{font-size:20px; font-weight:700; min-height:2.36em}
.fact p{font-size:16px}
.focus__head{max-width:760px; margin-bottom:24px}
.car{grid-template-columns:1.12fr 1fr; gap:48px; padding-block:44px; align-items:start}
.car__media{border:0}
.car__media img{aspect-ratio:1.16; object-fit:cover}
.car__tag{position:static; display:block; padding:14px 0; background:transparent; color:var(--smoke); border-bottom:1px solid var(--line-d); letter-spacing:.08em}
.car h3{font-size:clamp(24px,2.5vw,34px); font-weight:700; min-height:0; margin-bottom:16px}
.car .lead{font-size:17px; margin-bottom:22px}
.spec__row dt{letter-spacing:.05em}
.band{padding-block:52px}
.band__tel{font-size:clamp(30px,3.8vw,52px); font-weight:700; font-variant-numeric:tabular-nums}
.head2{max-width:760px}
.grid3{background:transparent; border:0; gap:0 36px}
.svc{padding:28px 0 30px; border-top:1px solid var(--line-l); background:transparent}
.svc:hover{background:transparent}
.svc__ico{width:26px; height:26px; margin-bottom:24px; color:var(--paper-ink)}
.svc h3{font-size:22px; max-width:none; min-height:0}
.svc p{font-size:17px; color:#4D4943}
.svc ul{border:0; padding-top:8px}
.svc li{font-size:13px; letter-spacing:0; color:#655E54}
.step__n{font-size:32px; letter-spacing:-.05em; margin-bottom:24px}
.step h3{min-height:0; font-size:23px}
.step p{font-size:17px; color:#BDB9B2}
.claim__media,.shop__media{border:0}
.claim__list span{font-size:16px}
.shop__stamp{position:static; border:0; padding:14px 0; color:var(--smoke); letter-spacing:.08em}
.rail{gap:24px; grid-auto-columns:clamp(300px,36vw,490px)}
.shot{border:0; background:transparent}
.shot figcaption{padding:14px 0; border-bottom:1px solid var(--line-l); letter-spacing:.04em}
.shot figcaption b{color:var(--paper-ink)}
.shot figcaption span{color:var(--flame-deep)}
.faq{max-width:none}
.faq summary{padding-block:26px; font-weight:600}
.form{background:transparent; border:0; border-top:1px solid var(--line-d); padding:28px 0 0}
.field label{color:#BDB9B2; letter-spacing:.06em; font-size:12px}
.field input,.field select,.field textarea{background:#191D21; border-color:rgba(242,236,226,.25); font-size:17px}
.field input::placeholder,.field textarea::placeholder{color:#9C9D9B}
.map{background:transparent; border-inline:0}
.map__ph{min-height:220px; padding-block:42px}
.btn:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.hero__bg img,.scrollhint i{animation:none}html.js .wipe{clip-path:none;transition:none}}

/* =========================================================
   RESPONSIVE  (Overrides bewusst am Dateiende)
   ========================================================= */
@media (max-width:1100px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__grid{grid-template-columns:1fr 1fr; gap:34px}
}
@media (max-width:960px){
  .nav__links{display:none}
  .burger{display:grid}
  .mobmenu{display:block}
  .nav__tel span{display:none}
  .nav__tel{padding:11px 13px}
  .contact{grid-template-columns:1fr}
  .shop{grid-template-columns:1fr}
  .shop__media{order:-1}
  .car,.car--rev{grid-template-columns:1fr; gap:26px}
  .car--rev .car__media{order:0}
  .callbar{display:flex}
  body{padding-bottom:74px}
  .foot{padding-bottom:86px}
}
@media (max-width:960px){
  .claim{grid-template-columns:1fr; gap:26px}
  .claim__media{max-width:420px}
}
@media (max-width:720px){
  :root{--section-py:clamp(56px,11vw,78px)}
  .claim__media{max-width:none}
  h1{font-size:clamp(33px,8.6vw,46px); letter-spacing:-.022em}
  h2{font-size:clamp(26px,7.2vw,34px)}
  .hero{min-height:auto}
  .hero__in{padding-block:118px 40px}
  .hero h1{max-width:none}
  .hero__cta{gap:10px}
  .hero__cta .btn{flex:1 1 100%}
  .hero__meta{gap:8px 20px; margin-top:32px}
  .hero__meta span{font-size:11px}
  .scrollhint{display:none}
  .facts,.grid3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr; gap:24px}
  .band__in{flex-direction:column; align-items:flex-start}
  .band__right{text-align:left}
  .row2{grid-template-columns:1fr}
  .rail{grid-auto-columns:82%}
  .foot__grid{grid-template-columns:1fr}
  .foot__bottom{flex-direction:column}
  .spec__row{grid-template-columns:1fr; gap:4px; padding:11px 0}
  .spec__row dd{font-size:15px}
  .svc h3,.step h3{min-height:0}
  .infolist a,.infolist div{grid-template-columns:1fr; gap:3px}
}
@media (max-width:400px){
  h1{font-size:30px}
  h2{font-size:24px}
  .car h3{font-size:24px}
  .band__tel{font-size:23px}
  .brand__sub{font-size:9.5px}
}

/* --- Nachtrag Mobile-Feinschliff --- */
@media (max-width:720px){
  .brand__sub{display:none}
  .brand__name{font-size:13.5px; white-space:nowrap}
  .brand__mark{width:36px; height:36px; font-size:12px}
  .nav__in{height:68px; gap:12px}
  .mobmenu{padding-top:76px}
  .kicker{font-size:11px; letter-spacing:.16em}
  .hero__in{padding-block:104px 38px}
}

/* Optische Korrekturen für kleine Ansichten */
@media (max-width:1100px){
  .fact:nth-child(2){border-right:0}
  .facts{gap:28px}
}
@media (max-width:960px){
  .car{grid-template-columns:1fr; gap:24px}
  .car__media img{aspect-ratio:16/10}
  .car h3{min-height:0}
  .claim__media{max-width:none}
  .claim__media img{aspect-ratio:16/10}
}
@media (max-width:720px){
  .hero{min-height:720px}
  .hero__in{padding-top:270px; padding-bottom:30px}
  .hero__bg img{object-position:65% top; height:390px}
  .hero__veil{background:linear-gradient(180deg,rgba(10,11,12,.32),transparent 150px,var(--ink) 390px)}
  .hero h1{font-size:clamp(25px,6.6vw,46px); letter-spacing:-.035em}
  .hero .kicker{font-size:10px; letter-spacing:.035em}
  .hero .lead{font-size:17px}
  .hero__cta{margin-top:24px}
  .hero__cta .btn{flex:1 1 auto}
  .hero__meta{margin-top:24px; gap:8px 16px}
  .hero__meta span{font-size:10px; letter-spacing:.02em}
  .facts-section{padding-block:36px}
  .facts{gap:0}
  .fact{padding:22px 0; border-right:0; border-bottom:1px solid var(--line-l)}
  .fact:first-child{padding-top:0}
  .fact:last-child{border-bottom:0; padding-bottom:0}
  .fact__n{margin-bottom:6px}
  .fact h3{min-height:0; margin-bottom:8px}
  .grid3{gap:0}
  .svc{padding-block:24px; display:grid; grid-template-columns:30px 1fr; column-gap:18px}
  .svc__ico{grid-row:1 / 4; margin:2px 0 0}
  .svc h3,.svc p,.svc ul{grid-column:2}
  .svc h3{font-size:23px; max-width:none; min-height:0}
  .svc p{margin-bottom:12px}
  .step{display:grid; grid-template-columns:42px 1fr; column-gap:14px; padding-top:20px}
  .step__n{grid-row:1 / 3; font-size:26px; margin:0}
  .step h3,.step p{grid-column:2}
  .car{padding-block:30px}
  .car__media img{aspect-ratio:4/3}
  .car h3{font-size:26px}
  .band{padding-block:38px}
  .band h2{font-size:28px}
  .band__tel{font-size:34px}
  .form{padding-top:24px}
  .rail{grid-auto-columns:86%}
  .rail__hint{font-size:10px; letter-spacing:.06em}
  .foot__grid{grid-template-columns:1fr 1fr; gap:28px 20px}
  .foot__brand{grid-column:1 / -1}
}

/* ---------- Kundenfeedback: Motorsport, klare Bedienelemente ---------- */
:root{--heading:'Automove','Archivo',sans-serif;--button-inset:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.38)}
h1,h2,h3,.step__n{font-family:var(--heading)}
em,.it{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit}
.hero{min-height:100svh}
.hero__in{padding-block:160px 90px}
.hero h1{font-size:clamp(48px,6.25vw,90px);max-width:none}
.hero__cta{margin-top:32px}
.btn,.nav__tel,.gallery__arrow{box-shadow:var(--button-inset);border-radius:2px}
.btn--flame{color:#fff;background:var(--flame);border-color:rgba(0,0,0,.18)}
.btn--flame:hover{background:#BC251F;transform:translateY(-1px)}
.btn--ghost{background:#222426;border-color:#3F4143}
.hero__cta .btn--ghost{padding-inline:28px;text-decoration:none;border-color:#3F4143}
.btn:active,.gallery__arrow:active{box-shadow:inset 0 2px 3px rgba(0,0,0,.4);transform:translateY(1px)}
.nav__tel:hover{background:#282122;border-color:var(--flame)}
.facts{gap:16px}
.fact,.fact:last-child,.fact:nth-child(2){padding:28px 24px;border:0;border-radius:16px;background:#fff}
.fact__n{color:var(--flame-deep);font-family:var(--display);font-size:14px;font-weight:700}
.fact h3{font-size:20px;min-height:2.36em}
.car{align-items:center}
.car--rev .car__media{order:0}
.car__copy{padding-block:16px}
.band{background:#E5E4E1;padding-block:64px}
.band h2{max-width:23ch;font-size:clamp(28px,3.2vw,44px)}
.band__right{display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:310px;text-align:left}
.band__tel{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:22px 28px;text-decoration:none;letter-spacing:0}
.band__tel>span{font-size:15px;font-weight:600}
.band__tel strong{display:flex;gap:24px;justify-content:space-between;width:100%;font-size:clamp(25px,2.7vw,36px);font-weight:700}
.band__tel:hover{text-decoration:none}
.band__right .mono{font-size:11px;letter-spacing:.04em;margin:0}
.svc p{max-width:34ch;min-height:4.74em;text-wrap:pretty}
.step__n{font-size:44px;font-weight:700;line-height:1;letter-spacing:0;color:var(--flame)}
.claim__list{border:0;display:grid;gap:12px;margin-top:28px}
.claim__list li{border:0!important;background:#fff;border-radius:14px;padding:20px 24px;gap:5px}
.gallery{position:relative}
.rail{margin:0;padding:0;scroll-padding-inline:0;scrollbar-width:none;grid-auto-columns:calc((100% - 48px)/3);gap:24px}
.rail::-webkit-scrollbar{display:none}
.gallery__arrow{position:absolute;top:calc(50% - 42px);z-index:3;width:48px;height:48px;border:1px solid #414141;background:var(--ink);color:#fff;font-family:var(--display);font-size:26px;cursor:pointer;transition:background .2s,opacity .2s}
.gallery__arrow--prev{left:calc(var(--pad) - 24px)}
.gallery__arrow--next{right:calc(var(--pad) - 24px)}
.gallery__arrow:hover{background:var(--flame)}
.gallery__arrow:disabled{opacity:.4;cursor:default}
.contact__info{position:sticky;top:106px}
.foot{padding-top:52px;background:#0B0D0F}
.foot__top{display:flex;justify-content:space-between;align-items:center;gap:28px;padding-bottom:40px;border-bottom:1px solid var(--line-d);margin-bottom:44px}
.foot__top p{font-family:var(--heading);font-size:clamp(24px,3vw,40px);font-weight:700;line-height:1.1;margin:0;max-width:20ch}
.foot__grid{grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:40px}
.foot__col h4{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:#fff}
.foot__bottom{align-items:center;gap:20px}
.foot__bottom .foot__partner{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.foot__partner span{font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.foot__partner img{width:122px;height:auto}
@media(min-width:961px){html,body{overflow-x:clip}}
@media(max-width:1100px){.foot__grid{grid-template-columns:1fr 1fr}.band__in>div:first-child{flex:1 1 380px}}
@media(max-width:960px){
 .contact__info{position:static}
 .rail{grid-auto-columns:calc((100% - 24px)/2)}
 .car__copy{padding-block:0}
 .hero h1{font-size:clamp(40px,6.2vw,60px)}
}
@media(max-width:720px){
 .hero{min-height:100svh}
 .hero__in{padding-block:300px 44px}
 .hero h1{font-size:clamp(25px,6.6vw,46px)}
 .hero__bg img{height:420px}
 .hero__veil{background:linear-gradient(180deg,rgba(10,11,12,.32),transparent 150px,var(--ink) 420px)}
 .hero__cta .btn--ghost{padding-inline:18px}
 .facts{gap:14px}
 .fact,.fact:first-child,.fact:last-child{padding:24px;border:0}
 .fact h3{min-height:0}
 .band{padding-block:42px}
 .band__in>div:first-child{flex:auto}
 .band__right{min-width:0;width:100%;max-width:430px}
 .band h2{font-size:28px}
 .band__tel{width:100%;padding:20px 24px}
 .band__tel strong{font-size:28px}
 .svc p{min-height:0}
 .step__n{font-size:30px}
 .claim__list li{padding:20px}
 .rail{grid-auto-columns:90%;gap:16px}
 .gallery__arrow{width:40px;height:44px}
 .gallery__arrow--prev{left:6px}.gallery__arrow--next{right:6px}
 .foot__top{align-items:flex-start;flex-direction:column;padding-bottom:32px;margin-bottom:32px}
 .foot__grid{gap:28px 20px}
 .foot__bottom{align-items:flex-start}
}

/* Automove ist eine breite Display-Schrift, keine synthetische Fettung. */
h1,h2,h3,.step__n{font-weight:400;font-synthesis:none;letter-spacing:0}
h2{font-size:clamp(26px,3.2vw,44px);line-height:1.18}
.hero h1{font-size:clamp(36px,4.5vw,64px);line-height:1.14;font-weight:400;letter-spacing:0}
.car h3{font-size:clamp(23px,2vw,29px);font-weight:400;line-height:1.2}
.fact h3,.svc h3,.step h3,.form h3{font-family:var(--display);font-weight:700}
.band h2{font-size:clamp(26px,2.5vw,36px);max-width:26ch}
.foot__top p{font-weight:400;font-size:clamp(24px,2.6vw,36px)}
@media(max-width:960px){.hero h1{font-size:4.5vw}}
@media(max-width:720px){
 .hero h1{font-size:clamp(18px,4.65vw,33px)}
 h2{font-size:clamp(21px,5.3vw,32px)}
 .band h2{font-size:24px}
 .car h3{font-size:clamp(21px,4.8vw,28px)}
}
/* Umbrüche und mobile Lesefläche nach Prüfung der echten Fontdatei. */
.hero h1{font-size:clamp(34px,4.15vw,58px)}
@media(max-width:720px){
 .hero__in{padding-top:280px}
 .hero h1{font-size:clamp(21px,5.55vw,32px);text-wrap:balance}
 .hero h1 .ln,.hero h1 .ln>span{display:inline;padding:0;margin:0;overflow:visible}
 .band h2{font-size:clamp(20px,5.3vw,24px)}
 .svc p,.svc ul{grid-column:1 / -1}
 .svc__ico{grid-row:1}
 .svc h3{align-self:center}
 .svc p{margin-top:12px;max-width:34ch}
}
@media(min-width:961px){
 .band__in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(310px,1fr);gap:56px}
 .band h2{font-size:clamp(24px,2.3vw,33px)}
 .band__right{justify-self:end}
}
.foot__brand .brand{display:flex;align-items:flex-start;gap:10px}
.foot__brand .brand__name{font-size:13px}
.foot__brand .brand__sub{font-size:9px;letter-spacing:.08em}