:root {
  --grund: #111214;
  --flaeche: #1A1C1F;
  --text: #ECEAE4;
  --t1: rgba(236, 234, 228, .92);
  --t2: rgba(236, 234, 228, .66);
  --t3: rgba(236, 234, 228, .44);
  --linie: rgba(236, 234, 228, .14);
  --orange: #F2711C;
  --alu: #E9E8E4;
  --tinte: #17181A;
  --rand: 20px;
  --luft: 72px;
  --expo: cubic-bezier(0.19, 1, 0.22, 1);
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}
@media (min-width: 900px) { :root { --rand: 40px; --luft: 128px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; background: var(--grund); color: var(--t1); font: 400 17px/1.5 var(--sans); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--t2); }

.kopf { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 8px var(--rand);
  background: rgba(17, 18, 20, .82); backdrop-filter: blur(16px); border-bottom: 1px solid var(--linie); }
.marke { text-decoration: none; font-size: 14px; color: var(--t2); min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.marke b { font-weight: 600; font-size: 22px; letter-spacing: -0.04em; color: var(--orange); }
.kopf nav { display: flex; gap: 24px; }
.kopf nav a { text-decoration: none; font-size: 14px; color: var(--t2); min-height: 44px; display: inline-flex; align-items: center; transition: color .15s ease-out; }
.kopf nav a:hover { color: var(--text); }
.kopf nav a:not(.kopf-kontakt) { display: none; }
.kopf-kontakt { color: var(--text) !important; }
@media (min-width: 900px) { .kopf nav a:not(.kopf-kontakt) { display: inline-flex; } }

main, .fuss { max-width: 1280px; margin: 0 auto; padding: 0 var(--rand); }

.maske { overflow: hidden; padding-bottom: .04em; }
.maske span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--expo); }
.maske.da span { transform: none; }

/* Held */
.held { display: grid; padding-bottom: var(--luft); }
.held-bild { margin: 0 calc(var(--rand) * -1); overflow: hidden; }
.held-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; will-change: transform; }
.held-text { position: relative; display: flex; flex-direction: column; }
.held-text h1 { order: -1; }
@media (min-width: 900px) { .held-text h1 { order: 0; } }
.zeile { margin: 24px 0 8px; }
h1 { font: 500 clamp(76px, 24vw, 200px)/0.86 var(--sans); letter-spacing: -0.065em; color: var(--orange); margin: -0.48em 0 0 -0.05em; position: relative; z-index: 2; }
.held .zeile { margin-top: 16px; margin-bottom: 0; }
.knoepfe, .werte { align-self: stretch; }
.lead { font-size: 18px; max-width: 40ch; margin-top: 16px; color: var(--t1); }
.knoepfe { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.knopf { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 4px; background: var(--orange); color: #160C04; font-weight: 500; text-decoration: none;
  transition: background-color .15s ease-out, transform .15s ease-out; }
.knopf:hover { background: #FF8A3A; }
.knopf:active { transform: scale(.97); }
.textlink { color: var(--t1); text-underline-offset: 6px; text-decoration-color: var(--t3); min-height: 44px; display: inline-flex; align-items: center; }
.werte { display: grid; grid-template-columns: 1fr; margin-top: 40px; border-top: 1px solid var(--linie); }
.werte div { display: grid; grid-template-columns: 96px 1fr; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.werte dt { color: var(--t3); }
.werte dd { color: var(--text); }

@media (min-width: 900px) {
  .held { grid-template-columns: 1fr 821px; align-items: end; gap: 0; padding-top: 40px; }
  .held-bild { grid-column: 2; grid-row: 1; margin: 0; border-radius: 4px; }
  .held-text { grid-column: 1; grid-row: 1; z-index: 2; padding-bottom: 24px; }
  h1 { margin: 0 -2.4em 0 -0.05em; }
  .held-text { padding-right: 40px; }
}

/* Blöcke */
.block { padding: var(--luft) 0; border-top: 1px solid var(--linie); }
h2 { font: 500 clamp(44px, 9vw, 104px)/0.98 var(--sans); letter-spacing: -0.05em; color: var(--text); }
.einleitung { max-width: 56ch; margin-top: 16px; color: var(--t2); font-size: 18px; }

/* Modelle */
.modelle { display: grid; gap: 40px; margin-top: 40px; }
.liste { list-style: none; border-top: 1px solid var(--linie); }
.liste li { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 24px 0; border-bottom: 1px solid var(--linie); cursor: default; }
.liste .jahr { color: var(--orange); }
.liste .name { font: 500 clamp(28px, 4vw, 44px)/1.05 var(--sans); letter-spacing: -0.04em; color: var(--text); transition: color .15s ease-out; }
.liste .info { color: var(--t2); max-width: 52ch; }
.liste li:hover .name, .liste li.aktiv .name { color: var(--orange); }
.vorschau { display: none; }
@media (min-width: 900px) {
  .modelle { grid-template-columns: 1fr 520px; gap: 64px; align-items: start; }
  .liste li { grid-template-columns: 120px 1fr; column-gap: 24px; }
  .liste .info { grid-column: 2; }
  .vorschau { display: block; position: sticky; top: 104px; aspect-ratio: 821 / 550; overflow: hidden; border-radius: 4px; background: var(--flaeche); }
  .vorschau img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease-out, transform .6s var(--expo); }
  .vorschau img.weg { opacity: 0; transform: scale(1.04); }
  .vorschau .leer { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .25s ease-out; }
  .vorschau.ohne .leer { opacity: 1; }
}

/* Fertigung, hell */
.hell { background: var(--alu); color: rgba(23, 24, 26, .9); margin: 0 calc(var(--rand) * -1); padding-left: var(--rand); padding-right: var(--rand); border: 0; }
.hell h2 { color: var(--tinte); }
.hell .einleitung { color: rgba(23, 24, 26, .66); }
.hell .mono { color: rgba(23, 24, 26, .5); }
.teile { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 40px; }
.teile img { width: 100%; aspect-ratio: 733 / 550; object-fit: cover; background: #fff; }
.bildnote { margin-top: 16px; }
@media (min-width: 900px) { .hell { border-radius: 4px; margin: 0; padding: var(--luft) 64px; } .teile { grid-template-columns: repeat(3, 1fr); gap: 16px; } .fertigung-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; } }

/* Armee */
.armee { border-top: 0; }
.armee .zeile { color: var(--orange); }
.aussage { font: 500 clamp(28px, 4.4vw, 56px)/1.1 var(--sans); letter-spacing: -0.04em; color: var(--text); max-width: 22ch; }

/* Tabelle */
.tabelle { width: 100%; border-collapse: collapse; margin-top: 40px; }
.tabelle th, .tabelle td { display: block; text-align: left; vertical-align: top; }
.tabelle tr { display: block; padding: 24px 0; border-top: 1px solid var(--linie); }
.tabelle th { font-weight: 500; font-size: 20px; color: var(--text); margin-bottom: 8px; letter-spacing: -0.02em; }
.tabelle td { color: var(--t2); max-width: 60ch; }
@media (min-width: 900px) { .tabelle tr { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; } }

/* Jahre */
.jahre { list-style: none; margin-top: 40px; display: grid; gap: 0; }
.jahre li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--linie); }
.jahre .mono { color: var(--orange); font-size: 13px; padding-top: 3px; }
.jahre p { color: var(--t1); max-width: 62ch; }
@media (min-width: 900px) { .jahre { grid-template-columns: 1fr 1fr; column-gap: 64px; } .jahre li { grid-template-columns: 96px 1fr; } }

/* Kontakt */
.kontakt { padding: var(--luft) 0; border-top: 1px solid var(--linie); }
.kontakt h2 { font-size: clamp(48px, 11vw, 144px); }
.kontakt-satz { margin: 24px 0 40px; max-width: 46ch; color: var(--t2); font-size: 18px; }
.knopf.gross { min-height: 64px; padding: 0 32px; font-size: 20px; }
.kontakt-raster { display: grid; gap: 24px; margin-top: 64px; }
.klein { margin-bottom: 8px; }
.kontakt-raster p:not(.mono) { color: var(--t1); }
.platzhalter { border: 1px dashed var(--t3); border-radius: 4px; padding: 8px 16px; display: inline-block; color: var(--t2) !important; }
@media (min-width: 900px) { .kontakt-raster { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

.fuss { padding-top: var(--luft); padding-bottom: 40px; border-top: 1px solid var(--linie); }
.fuss-gg { font: 600 clamp(120px, 34vw, 400px)/0.8 var(--sans); letter-spacing: -0.08em; color: var(--orange); margin-bottom: 24px; margin-left: -0.05em; }
.entwurf { margin-top: 24px; font-size: 14px; color: var(--t3); }

.aufdecken { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--expo); }
.aufdecken.da { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .maske span, .aufdecken, .vorschau img { transition: none !important; transform: none !important; clip-path: none !important; }
}