:root {
  --nacht: #080F11;
  --petrol: #0B2A2E;
  --hell: #ECEEEA;
  --akzent: #00D4BE;
  --blau: #0A5F96;
  --h1: rgba(236, 238, 234, 0.92);
  --h2: rgba(236, 238, 234, 0.66);
  --h3: rgba(236, 238, 234, 0.44);
  --rand: 20px;
  --luft: 80px;
  --expo: cubic-bezier(0.19, 1, 0.22, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nacht);
  color: var(--h1);
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }

.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; }
.innen { max-width: 1360px; margin: 0 auto; padding: 0 var(--rand); }
h1, h2, .fuss-name, .aussage-text, .kleber strong, .special-text {
  font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
}
.klein { font-size: 14px; color: var(--h3); max-width: 32em; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 32px;
  background: var(--akzent); color: var(--petrol);
  font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; flex-shrink: 0;
  border-radius: 999px;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.knopf:hover { background: #5cebdb; }
.knopf:active { transform: scale(0.97); }

/* Navigation */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 var(--rand);
}
.nav a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; transition: opacity 150ms ease-out; }
.nav a:hover { opacity: 0.6; }
.nav-links { display: none; gap: 40px; font-size: 16px; }

/* Einstieg */
.hero {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: 104px var(--rand) 32px;
}
h1 {
  font-size: 27.5vw; line-height: 0.84; letter-spacing: -0.035em;
  position: relative; z-index: 1;
}
.zeile { display: block; overflow: hidden; padding: 0.1em 0.04em 0.06em 0; margin: -0.1em 0 -0.06em; }
.zeile > span {
  display: inline-block;
  background: linear-gradient(105deg, var(--hell) 0 42%, #ffffff 47%, var(--akzent) 50%, #ffffff 53%, var(--hell) 58% 100%) 100% 0 / 320% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auto { position: relative; z-index: 2; width: 116%; margin: -9vw 0 0 -6%; will-change: transform; }
.auto-in { position: relative; }
.bmw { width: 100%; height: auto; }
.glanz {
  position: absolute; inset: 0;
  -webkit-mask: url(img/bmw.webp) center / 100% 100% no-repeat; mask: url(img/bmw.webp) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, 0.5) 50%, transparent 56%) 130% 0 / 300% 100% no-repeat;
}
.spiegel {
  position: absolute; top: 96%; left: 0; width: 100%; height: auto;
  transform: scaleY(-1); opacity: 0.3;
  -webkit-mask-image: linear-gradient(to top, #000 0, transparent 42%); mask-image: linear-gradient(to top, #000 0, transparent 42%);
}
.hero-fuss { position: relative; z-index: 3; margin-top: auto; padding-top: 56px; }
.hero-satz { color: var(--h2); max-width: 23em; }
.hero-knopf { margin-top: 24px; display: flex; align-items: center; gap: 24px; }
.hero-klein { color: var(--h3); font-size: 12px; line-height: 1.6; }

.js .zeile > span { transform: translateY(108%); }
.js .auto-in { transform: translateX(34%); opacity: 0; }
.js .hero-fuss { opacity: 0; transform: translateY(16px); }
.js .da .zeile > span { transform: none; background-position: 0 0; transition: transform 1100ms var(--expo), background-position 2200ms ease-out 500ms; }
.js .da .zeile:nth-child(2) > span { transition-delay: 90ms, 590ms; }
.js .da .auto-in { transform: none; opacity: 1; transition: transform 1700ms var(--expo) 250ms, opacity 500ms ease-out 250ms; }
.js .da .glanz { background-position: -30% 0; transition: background-position 1500ms ease-in-out 1500ms; }
.js .da .hero-fuss { opacity: 1; transform: none; transition: opacity 900ms var(--expo) 700ms, transform 900ms var(--expo) 700ms; }

/* Aussage */
.aussage { padding: var(--luft) 0 104px; }
.aussage-text { font-size: 38px; line-height: 1.12; letter-spacing: -0.02em; color: var(--hell); max-width: 22em; }
.js .wort { opacity: 0.18; transition: opacity 500ms ease-out; }
.js .wort.an { opacity: 1; }
.kapsel {
  display: inline-block; vertical-align: -0.1em;
  width: 1.7em; height: 0.82em; margin: 0 0.06em;
  border-radius: 999px; overflow: hidden; background: var(--petrol);
}
.kapsel img { width: 100%; height: 100%; object-fit: cover; }
.js .aussage .kapsel { clip-path: inset(0 50% 0 50% round 999px); transition: clip-path 900ms var(--expo); }
.js .aussage .kapsel img { transform: scale(1.3); transition: transform 1200ms var(--expo); }
.js .aussage .kapsel.an { clip-path: inset(0 0 0 0 round 999px); }
.js .aussage .kapsel.an img { transform: none; }

/* Farbflächen */
.flaeche {
  position: sticky; top: 0;
  min-height: 100svh;
  overflow: hidden;
  transform-origin: 50% 0;
  will-change: transform;
}
.flaeche--tuerkis { background: var(--akzent); color: var(--petrol); }
.flaeche--blau { background: var(--blau); color: var(--hell); }
.flaeche--hell { background: var(--hell); color: var(--petrol); }
.flaeche-in { min-height: 100svh; display: flex; flex-direction: column; padding-top: 24px; padding-bottom: 40px; }
.flaeche-oben { display: flex; justify-content: space-between; opacity: 0.7; }
.flaeche h2 { font-size: 19vw; line-height: 0.9; letter-spacing: -0.035em; margin-top: 40px; hyphens: manual; }
.flaeche-mitte { margin-top: auto; padding-top: 40px; display: grid; grid-template-columns: 1fr; gap: 24px; position: relative; }
.flaeche-satz { max-width: 24em; padding-right: 128px; min-height: 152px; }
.flaeche-bild {
  position: absolute; top: 24px; right: 0;
  width: 112px; aspect-ratio: 3 / 4.4; border-radius: 999px; overflow: hidden;
  will-change: transform;
}
.flaeche-bild img { width: 100%; height: 100%; object-fit: cover; }
.karte { margin-top: 24px; }
.karte li { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; font-size: 18px; font-weight: 500; }
.karte i { flex: 1; border-bottom: 1px dotted currentColor; opacity: 0.35; transform: translateY(-4px); min-width: 16px; }
.karte b { font-weight: 500; font-size: 17px; }

/* Herbst-Special */
.special { position: relative; background: var(--nacht); padding: 104px 0 var(--luft); }
.special-raster { display: grid; gap: 40px; }
.kleber {
  width: 232px; height: 232px; border-radius: 50%;
  background: var(--akzent); color: var(--petrol);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(-9deg); will-change: transform;
}
.kleber strong { font-size: 88px; line-height: 0.95; letter-spacing: -0.04em; }
.kleber .alt { text-decoration: line-through; opacity: 0.6; }
.special h2 { font-size: 48px; line-height: 1; letter-spacing: -0.03em; color: var(--hell); }
.special-text { margin-top: 24px; font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; color: var(--h1); max-width: 24em; }
.special .klein { margin-top: 24px; }
.pfeil {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 16px;
  color: var(--akzent); font-weight: 600; text-decoration: none;
}
.pfeil span { transition: transform 150ms ease-out; }
.pfeil:hover span { transform: translateX(4px); }

/* Kontakt und Fusszeile */
.fuss { background: var(--petrol); padding: var(--luft) 0 24px; overflow: hidden; }
.fuss-raster { display: grid; gap: 40px; }
.fuss h2 { font-size: 48px; line-height: 1; letter-spacing: -0.03em; color: var(--hell); margin-bottom: 24px; }
.fuss .klein { margin-top: 16px; }
.fuss dl { margin: 0; display: grid; gap: 24px; }
.fuss dt { color: var(--h3); margin-bottom: 8px; }
.fuss dd { font-size: 20px; line-height: 1.4; color: var(--hell); }
.fuss dd a { display: inline-block; padding: 8px 0; margin: -8px 0; text-decoration: none; border-bottom: 1px solid var(--h3); padding-bottom: 0; }
.kapsel--fest { width: 2.6em; height: 1.2em; vertical-align: -0.28em; margin-left: 8px; }
.fuss-name {
  margin-top: 64px;
  font-size: 20vw; line-height: 0.9; letter-spacing: -0.035em; white-space: nowrap;
  color: var(--akzent);
}
.fuss-zeile { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; font-size: 14px; color: var(--h2); }
.fuss-zeile a { display: inline-block; padding: 8px 0; text-underline-offset: 4px; }

/* Computer */
@media (min-width: 900px) {
  :root { --rand: 40px; --luft: 140px; }
  body { font-size: 18px; }
  .nav { height: 88px; }
  .nav-links { display: flex; }

  .hero { height: 100svh; min-height: 680px; padding: 88px var(--rand) 40px; }
  h1 { font-size: min(21.5vw, 50svh); white-space: nowrap; }
  .zeile { display: inline-block; vertical-align: top; }
  .auto { position: absolute; left: 50%; top: 31svh; width: min(64vw, 112svh); margin: 0 0 0 max(-27vw, -47svh); }
  .hero-fuss { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 0; }
  .hero-satz { max-width: 17em; }
  .hero-knopf { margin-top: 0; flex-direction: row-reverse; text-align: right; }

  .aussage { padding: var(--luft) 0 200px; }
  .aussage-text { font-size: clamp(56px, 5.8vw, 88px); line-height: 1.06; max-width: 15em; }

  .flaeche-in { padding-top: 40px; padding-bottom: 64px; }
  .flaeche h2 { font-size: min(15vw, 32svh); margin-top: 24px; }
  .flaeche-mitte { grid-template-columns: 1fr; padding-right: 380px; }
  .flaeche-mitte > div:first-child { max-width: 560px; }
  .flaeche-satz { padding-right: 0; min-height: 0; font-size: 20px; }
  .flaeche-bild { top: auto; bottom: 0; right: 40px; width: min(280px, 34svh); }
  .karte { margin-top: 40px; }
  .karte li { font-size: 20px; padding: 8px 0; }
  .karte b { font-size: 18px; }

  .special { padding: 200px 0 var(--luft); }
  .special-raster { grid-template-columns: 1fr 2fr; gap: 104px; align-items: center; }
  .kleber { width: 340px; height: 340px; justify-self: center; }
  .kleber strong { font-size: 136px; }
  .kleber .mono { font-size: 15px; }
  .special h2, .fuss h2 { font-size: 72px; }
  .special-text { font-size: 40px; }

  .fuss-raster { grid-template-columns: 1fr 1fr; gap: 104px; }
  .fuss dl { grid-template-columns: 1fr 1fr; gap: 40px; align-content: start; }
  .fuss h2 { margin-bottom: 40px; }
  .fuss-name { margin-top: 104px; font-size: min(21vw, 292px); }
  .fuss-zeile { flex-direction: row; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .js .zeile > span, .js .auto-in, .js .hero-fuss, .js .wort, .js .aussage .kapsel, .js .aussage .kapsel img {
    transform: none !important; opacity: 1 !important; clip-path: none !important; transition: none !important;
  }
  .glanz { display: none; }
  .auto, .flaeche, .flaeche-bild, .kleber { transform: none !important; filter: none !important; }
  .kleber { transform: rotate(-9deg) !important; }
}