@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap');

:root{--g:#49d46b;--d:#06100b;--p:#eef2eb;--m:#a8b6ac}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory}
main>section{scroll-snap-align:start;scroll-snap-stop:always}
body{margin:0;background:var(--d);color:var(--p);font-family:'Space Grotesk',sans-serif}
.nav{position:fixed;z-index:5;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:24px 6vw;border-bottom:1px solid transparent;transition:.3s}
.nav.compact{padding-block:14px;background:#06100bc7;backdrop-filter:blur(10px);border-color:#ffffff18}
.logo{font:800 20px 'Barlow Condensed';letter-spacing:.12em;color:#fff;text-decoration:none;line-height:.75}
.logo small{display:block;color:var(--g);font-size:10px;letter-spacing:.35em;margin-top:7px}
.links{display:flex;gap:30px;font-size:11px;text-transform:uppercase;letter-spacing:.15em}
.nav a{text-decoration:none;color:inherit}
.links a:hover,.under:hover{color:var(--g)}
.sponsor-link{border:1px solid #ffffff66;border-radius:30px;padding:10px 15px;font-size:11px}
.scene{min-height:100svh;position:relative;background-position:center;background-size:cover;overflow:hidden}
.scene:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--d),transparent 35%)}
.hero{background-image:linear-gradient(90deg,#06100bd9 0%,#06100b82 45%,#06100b12),url('./m4-gt3-evo-nordschleife-hero-v5.png');background-repeat:no-repeat,no-repeat;background-color:#06100b}
.hero .copy{top:19%}
.copy{position:absolute;z-index:2;top:31%;left:10vw;max-width:610px}
.copy.right{left:auto;right:10vw;text-align:right;max-width:540px}
.copy.right .lead{margin-left:auto}
.kicker{font-size:11px;letter-spacing:.25em;font-weight:700}
.green{color:var(--g)}
h1,h2{font:700 clamp(76px,11vw,165px)/.82 'Barlow Condensed';text-transform:uppercase;letter-spacing:-.03em;margin:22px 0}
h1 i,h2 i{color:var(--g);font-style:normal}
.lead{font-size:clamp(16px,2vw,23px);line-height:1.45;color:#d3ded5;max-width:470px}
.btn{display:inline-block;margin-top:24px;padding:15px 19px;background:var(--g);color:#06100b;text-decoration:none;text-transform:uppercase;font-size:11px;letter-spacing:.18em;font-weight:700}
.counter{position:absolute;z-index:2;bottom:9vh;right:6vw;display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.18em}
.counter span{width:76px;height:1px;background:var(--g)}
.counter.left{left:10vw;right:auto}
.scroll{position:absolute;z-index:2;left:10vw;bottom:38px;font-size:10px;letter-spacing:.2em;color:#b9c5bc}
.scroll b{color:var(--g);padding-left:12px}
.story{min-height:80svh;position:relative;display:grid;grid-template-columns:minmax(0,520px) 1fr;grid-template-rows:auto auto;gap:18px 8vw;align-content:center;align-items:start;padding:15vh 10vw;background:linear-gradient(90deg,#06100bea 0%,#06100bb0 38%,#06100b2c 59%,#06100b08 100%),url('./m2-dry-pack-number-04-v1.png') center/cover}
.story>div:first-child{grid-column:1;grid-row:1}
.story .story-text{grid-column:1;grid-row:2;max-width:460px}
.story h2,.sponsor h2{font-size:clamp(70px,8vw,120px);margin-top:15px}
.story-text{color:var(--m);font-size:clamp(17px,2vw,25px);line-height:1.5}
.second{background-image:linear-gradient(90deg,#06100b18 0%,#06100b28 42%,#06100b9c 64%,#06100bdf 100%),url('./m2-pitbox-decals-lower-v8.png');background-position:center 46%}
.second .lead{max-width:520px}
.second h2{font-size:clamp(72px,7.5vw,118px)}
.third{background-image:linear-gradient(90deg,#06100bc0,#06100b18),url('./m4-karussell-clean-original-logo-v7.png')}
.third .copy,.third-lead{max-width:720px}
.third-lead span{display:block}
.third-lead span:first-child{white-space:nowrap}
.sponsor{min-height:78svh;position:relative;display:grid;grid-template-columns:1fr 1.2fr;gap:10vw;align-items:center;padding:8vh 10vw;color:#fff;background-image:linear-gradient(90deg,#06100bd9,#06100b88),url('./flower-tire-wall-logo-wide-brighter-v3.png');background-size:100% 100%,cover;background-repeat:no-repeat;background-position:center,center;background-color:#06100b}
.sponsor>div{position:relative;z-index:1;grid-column:1}
.sponsor h2{color:#fff}
.sponsor p{color:#d8e2da;max-width:500px;font-size:18px;line-height:1.5}
.under{display:inline-block;margin-top:15px;color:#fff;font-weight:700;text-decoration:none;border-bottom:2px solid var(--g);padding-bottom:5px}
footer{display:flex;justify-content:space-between;align-items:center;padding:45px 10vw 30px;background:#040a06;color:#7e8d82;font-size:11px;letter-spacing:.08em}
footer strong{font:700 22px 'Barlow Condensed';color:#e8f0e8;letter-spacing:.12em}
footer a{color:#d3ded5;text-decoration:none}
.imprint-mail{transition:color .2s ease}
.imprint-mail:hover{color:var(--g)}

@media(max-width:700px){
  .links{display:none}
  .nav{padding:18px 7vw}
  .copy,.copy.right{left:7vw;right:7vw;top:26%;text-align:left}
  .hero .copy{top:18%}
  .copy.right .lead{margin:0}
  .story,.sponsor{grid-template-columns:1fr;padding:12vh 7vw;gap:36px}
  .story{min-height:90svh;background-position:66% center}
  .story .story-text{max-width:92%}
  .second{background-position:68% center}
  .second .copy{top:20%}
  .third-lead span:first-child{white-space:normal}
  .sponsor{min-height:72svh;background-size:auto 100%;padding:10vh 7vw}
.sponsor>div{grid-column:1}
.sponsor .sponsor-counter{position:absolute;grid-column:auto;bottom:4vh}
  .counter.left{left:7vw}
  .sponsor .sponsor-counter{position:absolute;left:auto;right:7vw;bottom:2.5vh}
  footer{display:block;padding:40px 7vw}
  footer span,footer a{display:block;margin:16px 0}
}

@media(max-width:700px){
  section{scroll-margin-top:0}
  .scene{min-height:100svh;background-color:var(--d);background-repeat:no-repeat,no-repeat}
  .scene:after{background:linear-gradient(0deg,var(--d) 0%,#06100bf4 22%,#06100ba8 48%,#06100b1f 68%)}
  .copy,.copy.right{left:7vw;right:7vw;top:46vh;max-width:none;text-align:left}
  .hero .copy{top:43vh}
  .second .copy,.third .copy{top:45vh}
  .copy.right .lead{margin-left:0}
  h1,h2,.second h2,.story h2,.sponsor h2{font-size:clamp(48px,15vw,62px);line-height:.86;margin:14px 0}
  .kicker{font-size:9px;line-height:1.4;letter-spacing:.19em}
  .lead,.story-text,.sponsor p{font-size:15px;line-height:1.45}
  .btn{margin-top:14px;padding:13px 16px}
  .hero{background-size:100% 100%,auto 50vh;background-position:center,70% 2vh}
  .story{min-height:100svh;display:block;padding:48vh 7vw 13vh;background-size:100% 100%,auto 42vh;background-position:center,68% 4vh;background-repeat:no-repeat,no-repeat}
  .story .story-text{max-width:100%;margin-top:18px}
  .second{background-size:100% 100%,auto 42vh;background-position:center,62% 3vh}
  .third{background-size:100% 100%,auto 42vh;background-position:center,68% 3vh}
  .sponsor{min-height:100svh;display:block;padding:43vh 7vw 9vh;background-size:100% 100%,auto 38vh;background-position:center,100% 3vh;background-repeat:no-repeat,no-repeat}
  .sponsor>div{max-width:100%}
  .counter{right:7vw;bottom:3.5vh}
  .counter.left{left:7vw}
  .scroll{display:none}
  footer{display:flex;flex-direction:column;align-items:center;gap:14px;padding:32px 7vw;line-height:1.5;text-align:center}
  footer span,footer a{margin:0}
}