/* Motorsportfotograf – zentrales Stylesheet */

:root{
  --black:#0a0a0b;
  --anthracite:#131316;
  --panel:#1a1a1e;
  --line:#26262b;
  --white:#f4f4f2;
  --muted:#8b8b93;
  --red:#e10600;
  --font-display:"bahnschrift-condensed","Archivo",system-ui,sans-serif;
  --font-body:"bahnschrift-condensed","Inter",system-ui,sans-serif;
  --max:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:#fff}

h1,h2,h3,.display{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.05;
}
.eyebrow{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:.75rem;
  letter-spacing:.28em;
  color:var(--muted);
  display:flex;align-items:center;gap:14px;
  margin-bottom:22px;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--red);flex:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
section{padding:clamp(80px,10vw,140px) 0;position:relative}
.section-line{border-top:1px solid var(--line)}
p.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:#c9c9cf;max-width:640px}

/* ---------- Scroll-Reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- Navigation ---------- */
header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{background:rgba(10,10,11,.88);backdrop-filter:blur(12px);border-color:var(--line)}
.nav{
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:6px clamp(20px,4vw,48px);
}
.logo{display:flex;align-items:center}
.logo img{height:132px;width:auto;display:block;-webkit-user-drag:none;transition:height .35s ease}
/* Beim Scrollen schrumpft das Logo, damit die Leiste den Inhalt nicht verdeckt */
header.scrolled .logo img{height:72px}
.logo,.logo img{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.logo img::selection{background:transparent}
/* Hintergrund des Logos in jedem Zustand transparent halten (Hover, Fokus, Klick) */
.logo,.logo:hover,.logo:focus,.logo:active,
.logo img,.logo img:hover{background:transparent!important;box-shadow:none!important}
.logo:focus{outline:none}
.logo:focus-visible{outline:2px solid var(--red);outline-offset:6px}
nav ul{display:flex;gap:34px;list-style:none}
nav a{
  font-family:var(--font-display);text-transform:uppercase;font-size:.78rem;
  letter-spacing:.18em;color:#d7d7dc;position:relative;padding:6px 0;
}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red);transition:width .3s ease}
nav a:hover::after,nav a.active::after{width:100%}
nav a:hover{color:#fff}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;z-index:110}
.burger span{display:block;width:26px;height:2px;background:#fff;margin:6px 0;transition:.3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;align-items:flex-end;padding:0;overflow:hidden}
.hero-media{position:absolute;inset:0;overflow:hidden}
/*
  PRODUKTION: Hier läuft das Hero-Video (autoplay, muted, loop, playsinline, poster):
  <video autoplay muted loop playsinline poster="media/hero-poster.jpg" preload="metadata">
    <source src="media/hero-mobile.mp4" type="video/mp4" media="(max-width:768px)">
    <source src="media/hero.mp4" type="video/mp4">
  </video>
  Der animierte Verlauf unten ist der Platzhalter für den Prototyp.
*/
.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media .placeholder{
  position:absolute;inset:-10%;
  background:
    radial-gradient(60% 80% at 75% 30%,rgba(225,6,0,.18),transparent 60%),
    radial-gradient(50% 60% at 20% 75%,rgba(70,70,85,.35),transparent 65%),
    linear-gradient(140deg,#0b0b0d 0%,#17171b 45%,#0a0a0b 100%);
  animation:heroShift 16s ease-in-out infinite alternate;
}
@keyframes heroShift{from{transform:scale(1) translateX(0)}to{transform:scale(1.06) translateX(-2%)}}
.speedlines{position:absolute;inset:0;opacity:.5}
.speedlines i{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);width:38%;animation:sweep 5s linear infinite}
.speedlines i:nth-child(1){top:28%;animation-delay:0s}
.speedlines i:nth-child(2){top:47%;animation-delay:1.6s;width:26%}
.speedlines i:nth-child(3){top:66%;animation-delay:3.1s;width:44%}
@keyframes sweep{from{left:-45%}to{left:110%}}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.25) 0%,rgba(10,10,11,.15) 40%,rgba(10,10,11,.92) 100%)}
.hero-content{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,48px) clamp(90px,12vh,140px)}
.hero-tag{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.3em;font-size:.78rem;color:#c5c5cc;margin-bottom:20px;display:flex;align-items:center;gap:14px}
.hero-tag::before{content:"";width:44px;height:2px;background:var(--red)}
.hero h1{font-size:clamp(2.6rem,7.5vw,6.4rem);font-weight:700}
.hero h1 .dot{color:var(--red)}
.hero p{margin-top:22px;max-width:520px;color:#c9c9cf;font-size:clamp(1rem,1.4vw,1.15rem)}
.hero-watermark{position:absolute;right:clamp(20px,4vw,48px);bottom:34px;z-index:2;width:52px;height:auto;opacity:.3}
.scroll-hint{cursor:pointer;transition:color .3s}
.scroll-hint:hover{color:var(--red)}
.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;font-family:var(--font-display)}
.scroll-hint i{width:1px;height:42px;background:linear-gradient(180deg,var(--red),transparent);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ---------- Intro ---------- */
.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,90px);align-items:center}
.intro h2{font-size:clamp(2rem,4.5vw,3.6rem);margin-bottom:26px}
.intro h2 em{font-style:normal;color:var(--red)}
.photo-ph{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.photo-ph::before{content:"";display:block;padding-top:125%}
.photo-ph .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:
  radial-gradient(70% 60% at 60% 35%,rgba(225,6,0,.22),transparent 60%),
  linear-gradient(160deg,#1c1c21,#0d0d0f)}
.photo-ph .label{position:absolute;left:18px;bottom:16px;font-family:var(--font-display);text-transform:uppercase;font-size:.68rem;letter-spacing:.24em;color:var(--muted)}
.photo-ph .num{position:absolute;right:18px;top:14px;font-family:var(--font-display);font-weight:700;color:rgba(255,255,255,.14);font-size:2.4rem}

/* ---------- Kamera / Portfolio ---------- */
#portfolio{background:var(--anthracite)}
.cam-stage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(40px,5vw,80px);align-items:center;margin-top:20px}
.camera{position:relative;width:100%;max-width:780px;margin:0 auto}
.cam-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 44px 64px rgba(0,0,0,.65))}
/* Display-Overlay: Position exakt auf der Displayfläche der SVG (x112 y200 w438 h304 bei 940x640) */
.cam-screen{
  position:absolute;left:11.915%;top:31.25%;width:46.596%;height:47.5%;
  background:#000;overflow:hidden;cursor:zoom-in;border-radius:3px;
}
.cam-screen:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.cam-screen .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.cam-screen .slide.on{opacity:1}
.slide .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide .hud{
  position:absolute;inset:auto 0 0 0;padding:10px 14px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-display);text-transform:uppercase;font-size:.62rem;letter-spacing:.2em;
  color:rgba(255,255,255,.85);background:linear-gradient(180deg,transparent,rgba(0,0,0,.65));
}
.slide .hud b{color:var(--red)}
.cam-note{text-align:center;margin-top:18px;font-size:.72rem;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;font-family:var(--font-display)}
.cam-controls{display:flex;align-items:center;gap:16px;margin-top:26px;justify-content:center}
.cam-arrow{
  width:46px;height:46px;border:1px solid var(--line);background:transparent;color:#fff;
  cursor:pointer;font-size:1.1rem;transition:.25s;display:flex;align-items:center;justify-content:center;
}
.cam-arrow:hover{border-color:var(--red);color:var(--red)}
.cam-dots{display:flex;gap:8px}
.cam-dots button{width:22px;height:3px;border:0;background:var(--line);cursor:pointer;transition:.25s;padding:0}
.cam-dots button.on{background:var(--red)}
.cam-info h2{font-size:clamp(1.8rem,3.4vw,2.8rem);margin-bottom:18px}
.cam-info p{color:#b9b9c0;margin-bottom:14px}
.cam-cats{list-style:none;margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.cam-cats li{border:1px solid var(--line);padding:7px 14px;font-family:var(--font-display);text-transform:uppercase;font-size:.66rem;letter-spacing:.2em;color:#c5c5cc}
.cam-cats li.hot{border-color:var(--red);color:#fff}

/* Slide-Platzhaltergrafiken */
.a-motorsport{background:radial-gradient(80% 90% at 70% 30%,rgba(225,6,0,.4),transparent 55%),linear-gradient(120deg,#26262c,#0b0b0d)}
.a-automobil{background:radial-gradient(70% 80% at 30% 70%,rgba(120,130,160,.35),transparent 60%),linear-gradient(200deg,#202026,#0a0a0c)}
.a-motorrad{background:radial-gradient(60% 70% at 65% 60%,rgba(225,6,0,.28),transparent 55%),linear-gradient(160deg,#1b1b20,#0c0c0e)}
.a-portrait{background:radial-gradient(55% 75% at 50% 40%,rgba(200,190,180,.22),transparent 60%),linear-gradient(180deg,#232328,#0b0b0d)}
.a-people{background:radial-gradient(65% 70% at 40% 35%,rgba(160,120,110,.25),transparent 60%),linear-gradient(140deg,#1e1e23,#0a0a0c)}
.a-business{background:radial-gradient(60% 80% at 70% 50%,rgba(110,125,150,.28),transparent 60%),linear-gradient(220deg,#202025,#0b0b0d)}

/* ---------- Portfolio-Erweiterung: asymmetrisches Raster ---------- */
.mag-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:30px}
.mag-item{position:relative;overflow:hidden;border:1px solid var(--line);cursor:pointer;background:none;padding:0;font:inherit;color:inherit;display:block;width:100%;text-align:left}
.mag-item:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.mag-item .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.mag-item:hover .art{transform:scale(1.05)}
.mag-item::before{content:"";display:block;padding-top:70%}
.mag-item.tall::before{padding-top:130%}
.mag-item.wide::before{padding-top:52%}
.mag-item .meta{
  position:absolute;inset:auto 0 0 0;padding:16px 18px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));
  opacity:0;transform:translateY(10px);transition:.4s ease;
}
.mag-item:hover .meta,.mag-item:focus-visible .meta{opacity:1;transform:none}
.mag-item .meta{display:block}
.mag-item .meta b{display:block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.15em;font-size:.8rem}
.mag-item .meta span{font-size:.72rem;color:#b5b5bd;letter-spacing:.08em}
.m1{grid-column:span 7}.m2{grid-column:span 5}.m3{grid-column:span 4}
.m4{grid-column:span 4}.m5{grid-column:span 4}.m6{grid-column:span 5}.m7{grid-column:span 7}

/* ---------- Leistungen ---------- */
.services{list-style:none;border-top:1px solid var(--line)}
.services li{border-bottom:1px solid var(--line)}
.srv{
  width:100%;display:grid;grid-template-columns:64px 1fr auto;gap:24px;align-items:center;
  background:none;border:0;color:inherit;text-align:left;cursor:pointer;
  padding:26px 6px;font-family:inherit;transition:.25s;
}
.srv:hover{padding-left:14px}
.srv .idx{font-family:var(--font-display);color:var(--muted);font-size:.8rem;letter-spacing:.1em}
.srv h3{font-size:clamp(1.15rem,2.4vw,1.7rem);transition:color .25s}
.srv:hover h3{color:var(--red)}
.srv .plus{font-size:1.4rem;color:var(--muted);transition:transform .3s}
.services li.open .plus{transform:rotate(45deg);color:var(--red)}
.srv-body{max-height:0;overflow:hidden;transition:max-height .45s ease}
.services li.open .srv-body{max-height:900px}
.srv-body-inner{padding:0 6px 30px 88px;color:#b9b9c0;max-width:760px}
.srv-body-inner ul{list-style:none;margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.srv-body-inner ul li{border:1px solid var(--line);border-bottom:1px solid var(--line)!important;padding:5px 12px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-display);color:#c5c5cc}

/* ---------- Über mich ---------- */
#ueber-mich{background:var(--anthracite)}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,90px);align-items:start}
.about-facts{list-style:none;margin-top:28px;border-top:1px solid var(--line)}
.about-facts li{display:flex;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);font-size:.9rem;color:#c9c9cf}
.about-facts li::before{content:"—";color:var(--red);font-weight:700}
.about-text h2{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:26px}
.about-text p{color:#b9b9c0;margin-bottom:18px;max-width:640px}
.about-text p b{color:var(--white);font-weight:600}

/* ---------- Arbeitsweise ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin-top:40px}
.step{border-top:2px solid var(--line);padding-top:24px;transition:border-color .3s}
.step:hover{border-color:var(--red)}
.step .no{font-family:var(--font-display);font-weight:700;font-size:2.4rem;color:transparent;-webkit-text-stroke:1px var(--red);display:block;margin-bottom:12px}
.step h3{font-size:1.1rem;letter-spacing:.12em;margin-bottom:10px}
.step p{color:#a9a9b1;font-size:.92rem}

/* ---------- Instagram ---------- */
#instagram{background:var(--anthracite)}
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px 0}
.ig-item{position:relative;overflow:hidden;border:1px solid var(--line)}
.ig-item::before{content:"";display:block;padding-top:100%}
.ig-item .art{position:absolute;inset:0;transition:transform .6s;width:100%;height:100%;object-fit:cover}
.ig-item:hover .art{transform:scale(1.06)}
.ig-item .ov{position:absolute;inset:0;background:rgba(10,10,11,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:.35s}
.ig-item:hover .ov{opacity:1}
.ig-item .ov svg{width:26px;height:26px;stroke:#fff}
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;
  border:1px solid var(--white);padding:15px 30px;transition:.3s;background:transparent;color:var(--white);cursor:pointer;
}
.btn:hover{border-color:var(--red);color:var(--red)}
.btn.solid{background:var(--red);border-color:var(--red);color:#fff}
.btn.solid:hover{background:#ff1a14;color:#fff}
.btn .arr{transition:transform .3s}
.btn:hover .arr{transform:translateX(5px)}
.consent-note{font-size:.75rem;color:var(--muted);margin-top:14px;max-width:560px}

/* ---------- Referenzen ---------- */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);margin-top:36px}
.quote{border-left:2px solid var(--red);padding-left:24px}
.quote p{font-size:1.05rem;color:#d5d5da;margin-bottom:14px}
.quote span{font-family:var(--font-display);text-transform:uppercase;font-size:.68rem;letter-spacing:.22em;color:var(--muted)}
.ref-line{margin-top:50px;text-align:center;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.3em;font-size:.72rem;color:var(--muted)}

/* ---------- CTA ---------- */
#cta{background:
  radial-gradient(70% 100% at 80% 20%,rgba(225,6,0,.16),transparent 60%),
  linear-gradient(180deg,#101013,#0a0a0b);
  text-align:center;border-top:1px solid var(--line)}
#cta h2{font-size:clamp(2rem,5vw,4rem);max-width:900px;margin:0 auto 24px}
#cta h2 em{font-style:normal;color:var(--red)}
#cta p{max-width:620px;margin:0 auto 40px;color:#c9c9cf}
.cta-buttons{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:56px 0 40px;background:var(--black);font-size:14px}
footer p,footer a,footer li,footer span{font-size:14px}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.foot-nav{display:flex;gap:26px;flex-wrap:wrap;list-style:none}
.foot-nav a{font-size:14px;letter-spacing:.16em;text-transform:uppercase;font-family:var(--font-display);color:#b5b5bd;transition:.25s}
.foot-nav a:hover{color:var(--red)}
.foot-brand p{color:var(--muted);font-size:14px;margin-top:10px;max-width:320px}
.social-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-top:14px;
  border:1px solid var(--line);color:#b5b5bd;transition:.25s;
}
.social-btn svg{width:20px;height:20px}
.social-btn:hover{border-color:var(--red);color:var(--red)}
.nav-social{width:42px;height:42px;margin:0 0 0 26px}
.burger{order:5}
@media (max-width:840px){.nav-social{margin-left:auto;margin-right:14px}}
.copy{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:14px}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(5,5,6,.94);display:none;align-items:center;justify-content:center;padding:5vh 5vw;flex-direction:column;gap:18px}
.lightbox.open{display:flex}
.lb-img{width:min(1100px,92vw);aspect-ratio:3/2;position:relative;border:1px solid var(--line);overflow:hidden}
.lb-img .art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lb-caption{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.24em;font-size:.72rem;color:#c5c5cc}
.lb-caption b{color:var(--red)}
.lb-close{position:absolute;top:24px;right:28px;background:none;border:1px solid var(--line);color:#fff;width:46px;height:46px;font-size:1.2rem;cursor:pointer;transition:.25s}
.lb-close:hover{border-color:var(--red);color:var(--red)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:1px solid var(--line);color:#fff;width:46px;height:46px;cursor:pointer;font-size:1.1rem;transition:.25s}
.lb-nav:hover{border-color:var(--red);color:var(--red)}
.lb-prev{left:22px}.lb-next{right:22px}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .intro-grid,.cam-stage,.about-grid{grid-template-columns:1fr}
  .cam-info{order:-1}
  .steps{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .m1,.m2,.m3,.m4,.m5,.m6,.m7{grid-column:span 12}
  .mag-item.tall::before{padding-top:80%}
  .srv{grid-template-columns:44px 1fr auto;gap:14px}
  .srv-body-inner{padding-left:6px}
}
@media (max-width:840px){
  .burger{display:block}
  nav ul{
    position:fixed;inset:0;background:rgba(8,8,9,.97);flex-direction:column;
    align-items:center;justify-content:center;gap:34px;
    transform:translateX(100%);transition:transform .4s ease;
  }
  nav ul.open{transform:none}
  nav ul a{font-size:1rem}
}

/* ---------- Kontaktseite ---------- */
.page-main{padding:160px 0 100px}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,100px)}
.contact-grid h1{font-size:clamp(2rem,4.5vw,3.4rem);margin-bottom:24px}
.contact-intro p{color:#b9b9c0;max-width:480px;margin-bottom:32px}
.contact-meta{list-style:none;border-top:1px solid var(--line)}
.contact-meta li{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.contact-meta li span:first-child{font-family:var(--font-display);text-transform:uppercase;font-size:.68rem;letter-spacing:.2em;color:var(--muted)}
.contact-meta a{color:var(--white);border-bottom:1px solid var(--red)}
form.contact-form{background:var(--panel);border:1px solid var(--line);padding:clamp(26px,4vw,44px)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:.66rem;letter-spacing:.22em;color:var(--muted);margin-bottom:8px}
.field label b{color:var(--red)}
.field input,.field select,.field textarea{width:100%;background:var(--black);border:1px solid var(--line);color:var(--white);padding:13px 14px;font-family:var(--font-body);font-size:.95rem;transition:border-color .25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red)}
.field textarea{min-height:140px;resize:vertical}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.8rem;color:#b9b9c0;margin:22px 0}
.check input{width:18px;height:18px;flex:none;accent-color:var(--red);margin-top:2px}
.check a{border-bottom:1px solid var(--red)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-ok{display:none;border:1px solid var(--red);padding:16px 18px;margin-top:20px;font-size:.9rem;color:#e8e8ec}
/* ---------- Rechtliche Seiten ---------- */
.legal{max-width:760px}
.legal h1{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:30px}
.legal h2{font-size:1.15rem;margin:34px 0 12px}
.legal p{color:#b9b9c0;margin-bottom:14px}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}

/* ---------- Intro: Rennauto + Motorrad, danach Logo ---------- */
body.intro-lock{overflow:hidden}
.intro{
  position:fixed;inset:0;z-index:999;background:var(--black);
  overflow:hidden;animation:introFade .6s ease 2.5s forwards;
}
/* Rennauto: startet sichtbar links, faehrt nach rechts aus dem Bild */
.intro-car{
  position:absolute;left:4vw;top:58%;
  width:min(380px,60vw);height:auto;
  animation:driveRight 1.25s cubic-bezier(.55,0,.85,.4) .35s forwards;
}
/* Motorrad: startet sichtbar rechts, faehrt nach links aus dem Bild */
.intro-bike{
  position:absolute;right:4vw;top:26%;
  overflow:visible; /* Kopf/Helm darf beim Wheelie über den SVG-Rahmen hinausragen */
  width:min(250px,42vw);height:auto;
  animation:driveLeft 1.25s cubic-bezier(.55,0,.85,.4) .35s forwards;
}
.intro .wheel{animation:wheelSpin .4s linear infinite}
/* Wheelie: hebt das Vorderrad in der Streckenmitte an (Drehpunkt = Hinterrad) */
.intro-bike .bike-tilt{
  transform-box:view-box;
  transform-origin:254px 108px;
  animation:wheelie 1.25s ease .35s forwards;
}
.intro-logo{
  position:absolute;left:50%;top:50%;
  width:min(360px,74vw);height:auto;
  transform:translate(-50%,-50%) scale(.9);opacity:0;
  animation:introLogo .7s ease 1.55s forwards;
}
@keyframes driveRight{to{transform:translateX(120vw)}}
@keyframes wheelie{
  0%,26%{transform:rotate(0deg)}
  42%{transform:rotate(17deg)}
  62%{transform:rotate(17deg)}
  80%,100%{transform:rotate(0deg)}
}
@keyframes driveLeft{to{transform:translateX(-120vw)}}
@keyframes wheelSpin{to{transform:rotate(360deg)}}
@keyframes introLogo{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes introFade{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  body.intro-lock{overflow:auto}
}

/* ==================== Mobile-Optimierung ==================== */
html{-webkit-text-size-adjust:100%}
body{overflow-x:clip}

@media (max-width:600px){
  section{padding:64px 0}
  .wrap{padding:0 18px}
  .logo img{height:84px}
  header.scrolled .logo img{height:52px}
  .nav{padding:14px 18px}

  /* Hero */
  .hero-content{padding-bottom:96px}
  .hero h1{font-size:clamp(2.3rem,11vw,3.2rem)}
  .hero p{font-size:.95rem}
  .hero-tag{font-size:.68rem;letter-spacing:.22em}
  .hero-watermark{width:38px;bottom:88px}

  /* Intro: Fahrzeuge kompakter, Spuren enger zusammen */
  .intro-car{width:min(270px,70vw);top:56%}
  .intro-bike{width:min(178px,46vw);top:30%}
  .intro-logo{width:min(280px,80vw)}

  /* Kamera: groessere Touch-Flaechen */
  .camera{max-width:100%}
  .cam-note{font-size:.62rem;letter-spacing:.14em}
  .cam-arrow{width:52px;height:52px}
  .cam-dots button{width:26px;height:4px}
  .cam-info h2{font-size:1.6rem}

  /* Portfolio-Raster */
  .mag-grid{gap:12px}
  .mag-item .meta{opacity:1;transform:none} /* Infos ohne Hover sichtbar */

  /* Leistungen */
  .srv{padding:20px 2px;grid-template-columns:36px 1fr auto;gap:10px}
  .srv .idx{font-size:.7rem}
  .srv h3{font-size:1.05rem}
  .srv:hover{padding-left:2px}
  .srv-body-inner{padding:0 2px 24px 2px}

  /* Ueber mich / Arbeitsweise */
  .about-facts li{font-size:.84rem;padding:11px 0}
  .step .no{font-size:1.9rem}

  /* Instagram */
  .ig-grid{gap:10px}
  .ig-item .ov{opacity:1;background:rgba(10,10,11,.25)} /* Symbol ohne Hover sichtbar */

  /* Buttons & CTA: volle Breite, gut tippbar */
  .btn{width:100%;justify-content:center;padding:16px 20px}
  .cta-buttons{flex-direction:column;gap:12px}
  #cta p{margin-bottom:28px}

  /* Referenzen */
  .quote p{font-size:.95rem}
  .ref-line{letter-spacing:.18em;font-size:.62rem}

  /* Footer */
  .foot-grid{flex-direction:column;gap:26px}
  .foot-nav{gap:14px 20px}
  .copy{flex-direction:column;gap:8px}

  /* Lightbox: Pfeile mittig unten nebeneinander, damit sie das Bild nicht verdecken */
  .lightbox{padding:8vh 4vw 90px;gap:14px}
  .lb-img{width:92vw}
  .lb-caption{text-align:center;font-size:.62rem;letter-spacing:.16em;padding:0 10px}
  .lb-nav{top:auto;bottom:20px;transform:none;width:54px;height:54px}
  .lb-prev{left:calc(50% - 62px)}
  .lb-next{right:calc(50% - 62px)}
  .lb-close{top:14px;right:14px}

  /* Kontaktseite */
  .page-main{padding:130px 0 70px}
  .contact-grid{gap:34px}
  .contact-grid h1{font-size:1.8rem}
  form.contact-form{padding:22px 16px}
  .field input,.field select,.field textarea{font-size:1rem;padding:14px} /* verhindert Auto-Zoom auf iOS */
  .contact-meta li{flex-direction:column;gap:4px;align-items:flex-start}
}

@media (max-width:400px){
  .hero h1{font-size:2.1rem}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .cam-cats li{padding:6px 10px;font-size:.6rem}
  .intro-car{width:74vw}
  .intro-bike{width:49vw}
}

/* Touch-Geraete: Hover-Effekte, die Inhalte verstecken, deaktivieren */
@media (hover:none){
  .mag-item .meta{opacity:1;transform:none}
  .ig-item .ov{opacity:1;background:rgba(10,10,11,.2)}
  .mag-item:hover .art,.ig-item:hover .art{transform:none}
}