/* Garage Louis Frey – Entwurf Seetalwebsites, 31.10.2026
   Racing-Grün fast schwarz, Creme, ein Akzent (Frey-Orange).
   Archivo Expanded (Titel) · Archivo (Text) · IBM Plex Mono (Jahre, Modelle) */

:root {
  --grund: #0F1712;
  --flaeche: #16211B;
  --creme: #ECE5D6;
  --t1: rgba(236, 229, 214, 0.92);
  --t2: rgba(236, 229, 214, 0.68);
  --t3: rgba(236, 229, 214, 0.48);
  --linie: rgba(236, 229, 214, 0.14);
  --akzent: #E08A3A;
  --akzent-hell: #EC9C52;
  --auf-akzent: #1C1208;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px;
  --rand: 20px;
  --kopf: 64px;
  --abschnitt: 64px;

  --expo: cubic-bezier(0.19, 1, 0.22, 1);
}
@media (min-width: 900px) {
  :root { --rand: 40px; --abschnitt: 104px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--kopf); }
body {
  margin: 0;
  background: var(--grund);
  color: var(--t1);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
@media (min-width: 900px) { body { font-size: 18px; } }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, dl, dd, ol, ul, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
::selection { background: var(--akzent); color: var(--auf-akzent); }
:focus-visible { outline: 2px solid var(--creme); outline-offset: 3px; border-radius: 2px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.rahmen { width: 100%; max-width: calc(1200px + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }

/* Titel: breite Grotesk */
.titel, .blatt__modell, .kontakt__satz, .zitat, .einstieg__was, .name, .kopf__marke, .liste dt {
  font-family: var(--sans);
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
}
.titel {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--creme);
  margin-bottom: var(--s4);
}
@media (min-width: 900px) { .titel { font-size: 72px; margin-bottom: var(--s5); } }

.einleitung { max-width: 38em; color: var(--t2); }

/* Knopf */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--s3);
  border-radius: 999px;
  background: var(--akzent); color: var(--auf-akzent);
  font-family: var(--sans); font-weight: 500; font-size: 16px; letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.knopf:hover { background: var(--akzent-hell); }
.knopf:active { transform: scale(0.97); }
.knopf--klein { min-height: 40px; padding: 0 var(--s2); font-size: 15px; }
.knopf--gross { min-height: 60px; padding: 0 var(--s4); font-size: 18px; }

/* Kopf */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--kopf);
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 max(var(--rand), calc((100vw - 1200px) / 2));
  border-bottom: 1px solid transparent;
  transition: background-color 250ms ease-out, border-color 250ms ease-out;
}
.kopf.ist-gescrollt {
  background: rgba(15, 23, 18, 0.82);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom-color: var(--linie);
}
.kopf__marke { display: inline-block; padding: 8px 0; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; color: var(--creme); margin-right: auto; }
.kopf__nav { display: none; gap: var(--s3); }
.kopf__nav a { font-size: 15px; text-decoration: none; color: var(--t2); transition: color 150ms ease-out; }
.kopf__nav a:hover { color: var(--creme); }
.kopf__knopf { opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 250ms ease-out, transform 250ms ease-out, background-color 150ms ease-out; }
.kopf.zeigt-knopf .kopf__knopf { opacity: 1; pointer-events: auto; transform: none; }
@media (min-width: 900px) {
  .kopf__nav { display: flex; }
  .kopf__knopf { opacity: 1; pointer-events: auto; transform: none; }
}

/* ---------- 1 Einstieg ---------- */
.einstieg {
  min-height: 100svh;
  padding: calc(var(--kopf) + var(--s3)) 0 var(--s4);
  display: flex;
}
.einstieg .rahmen { display: flex; flex-direction: column; gap: var(--s3); }
.einstieg__titel { flex: 1; display: flex; flex-direction: column; gap: var(--s2); font-weight: 400; }
.einstieg__was { margin-top: auto; padding-top: var(--s4); }
.name {
  display: block;
  font-size: min(28.5vw, 132px);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--creme);
  margin-left: -0.05em;
}
.zeile { display: block; overflow: hidden; padding-bottom: 0.04em; }
.zeile > span { display: block; }
.einstieg__was {
  font-size: 22px; font-weight: 400; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--t1); max-width: 16em;
}

.einstieg__mitte { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--s2); align-items: end; }
.register { display: grid; gap: var(--s1); font-size: 14px; line-height: 1.3; color: var(--t2); }
.register li { display: grid; gap: 2px; }
.register .mono { font-size: 13px; color: var(--t3); }
.register li:last-child { color: var(--creme); }
.register li:last-child .mono { color: var(--akzent); }

.einstieg__satz { color: var(--t2); max-width: 30em; }
.einstieg__tun { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.einstieg__beleg { font-size: 13px; line-height: 1.35; color: var(--t3); }

@media (min-width: 900px) {
  .einstieg { align-items: center; padding-bottom: var(--s5); }
  .einstieg .rahmen { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s3); row-gap: var(--s5); }
  .einstieg__titel { grid-column: 1 / -1; gap: var(--s3); }
  .einstieg__was { margin-top: 0; padding-top: 0; }
  .name { font-size: min(15.5vw, 212px); line-height: 0.9; }
  .zeile { display: inline-block; vertical-align: top; }
  .zeile + .zeile { margin-left: 0.22em; }
  .einstieg__was { font-size: 32px; max-width: none; }
  .einstieg__mitte { display: contents; }
  .register { grid-column: 1 / 4; grid-row: 2; align-self: start; font-size: 15px; }
  .einstieg__satz { grid-column: 4 / 8; grid-row: 2; align-self: start; }
  .einstieg__tun { grid-column: 4 / 9; grid-row: 2; align-self: end; margin-bottom: 28px; }
  .einstieg__bild { grid-column: 9 / 13; grid-row: 2; align-self: start; }
}

/* Abzug: kleines echtes Foto, nie gross */
.abzug { display: grid; gap: var(--s1); }
.abzug__bild { position: relative; overflow: hidden; background: var(--flaeche); border-radius: 2px; }
.abzug__bild img { width: 100%; height: 100%; object-fit: cover; }
.abzug figcaption, .abzug > .mono { font-size: 12px; line-height: 1.35; color: var(--t3); }
.einstieg__bild .abzug__bild { aspect-ratio: 3 / 2; }
.einstieg__bild img { filter: sepia(0.25) contrast(1.02); }

/* ---------- 2 Geschichte ---------- */
.geschichte { padding: var(--abschnitt) 0; border-top: 1px solid var(--linie); }
.geschichte .titel { margin-bottom: var(--s3); }
.geschichte__raster { display: grid; }
.geschichte__tafel {
  position: sticky; top: var(--kopf); z-index: 2;
  background: var(--grund);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--linie);
  display: flex; align-items: center; gap: var(--s2);
}
.tafel__bild { display: none; }

.zaehler { display: flex; align-items: center; gap: var(--s2); }
.zaehler__ziffern {
  display: flex; gap: 3px;
  font-family: var(--mono); font-weight: 500;
  font-size: 56px; line-height: 1;
  color: var(--akzent);
}
.rad {
  position: relative;
  display: block; width: 0.72em; height: 1.16em;
  overflow: hidden;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 3px;
}
.band {
  position: absolute; left: 0; right: 0; top: 0.08em;
  display: flex; flex-direction: column; align-items: center;
  transform: translateY(calc(var(--n, 0) * -1.16em));
  transition: transform 900ms var(--expo);
}
.band > span { display: block; height: 1.16em; line-height: 1; }
.rad:nth-child(2) .band { transition-delay: 40ms; }
.rad:nth-child(3) .band { transition-delay: 80ms; }
.rad:nth-child(4) .band { transition-delay: 120ms; }
.zaehler__wer { font-size: 13px; line-height: 1.3; color: var(--t2); max-width: 9em; }

.chronik { counter-reset: none; }
.eintrag {
  display: grid; gap: var(--s1);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--linie);
  transition: opacity 250ms ease-out;
}
.eintrag:last-child { border-bottom: 0; }
.eintrag > p:not(.eintrag__jahr) { font-size: 18px; line-height: 1.4; letter-spacing: -0.01em; max-width: 30em; color: var(--t1); }
.eintrag__jahr { font-size: 13px; color: var(--t3); }
.eintrag .abzug { margin-top: var(--s1); width: min(72%, 280px); }
.eintrag .abzug__bild { aspect-ratio: 3 / 2; }
.eintrag .abzug img { filter: sepia(0.2); }
.eintrag--wechsel > p:not(.eintrag__jahr) { color: var(--creme); }

.js .eintrag { opacity: 0.4; }
.js .eintrag.ist-aktiv { opacity: 1; }

@media (min-width: 900px) {
  .geschichte .titel { margin-bottom: var(--s5); }
  .geschichte__raster { grid-template-columns: 5fr 7fr; column-gap: var(--s3); align-items: start; }
  .geschichte__tafel {
    top: calc(var(--kopf) + var(--s4));
    height: calc(100vh - var(--kopf) - var(--s4) * 2);
    flex-direction: column; align-items: flex-start; justify-content: space-between;
    padding: 0; border: 0; background: none;
  }
  .zaehler { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .zaehler__ziffern { font-size: clamp(88px, 9vw, 132px); gap: 6px; }
  .zaehler__wer { font-size: 15px; max-width: none; }
  .tafel__bild { display: grid; width: min(100%, 360px); }
  .tafel__bild .abzug__bild { aspect-ratio: 3 / 2; }
  .tafel__bild img { filter: sepia(0.2); transition: opacity 300ms ease-out; }
  .tafel__bild.wechselt img { opacity: 0; }
  .chronik { padding-top: 30vh; padding-bottom: 30vh; }
  .eintrag { grid-template-columns: 96px 1fr; column-gap: var(--s3); padding: var(--s4) 0; }
  .eintrag__jahr { padding-top: 6px; }
  .eintrag > p:not(.eintrag__jahr) { grid-column: 2; font-size: 24px; line-height: 1.35; }
  .eintrag .abzug { display: none; }
}

/* ---------- 3 Restaurationen ---------- */
.restaurationen { padding: var(--abschnitt) 0; border-top: 1px solid var(--linie); }
.restaurationen .einleitung { margin-bottom: var(--s5); }

.blatt { display: grid; gap: var(--s4); padding: var(--s4) 0 var(--s5); border-top: 1px solid var(--linie); }
.blatt + .blatt { padding-bottom: 0; }
.blatt__kopf { display: grid; gap: var(--s3); align-content: start; }
.blatt__modell {
  font-size: 40px; font-weight: 500; letter-spacing: -0.04em; line-height: 1;
  color: var(--creme);
}
.daten { display: grid; font-size: 14px; line-height: 1.4; }
.daten > div { display: grid; grid-template-columns: 8.5em 1fr; gap: var(--s2); padding: var(--s1) 0; border-top: 1px solid var(--linie); }
.daten > div:last-child { border-bottom: 1px solid var(--linie); }
.daten dt { color: var(--t3); }
.daten dd { color: var(--t1); }

.blatt__inhalt { display: grid; gap: var(--s4); }
.reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); }
.reihe .abzug__bild { aspect-ratio: 3 / 2; }

.vergleich { display: grid; gap: var(--s1); max-width: 480px; }
.vergleich__buehne {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 2px; background: var(--flaeche);
  touch-action: pan-y; cursor: ew-resize;
}
.vergleich__buehne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vergleich__vorher { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.vergleich__linie {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px; background: var(--creme);
  pointer-events: none;
}
.vergleich__linie::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; background: var(--creme);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.vergleich__linie::before {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; z-index: 1;
  transform: translate(-50%, -52%);
  font: 500 18px/1 var(--sans); color: var(--grund); letter-spacing: 0.1em; white-space: nowrap;
}
.vergleich__regler {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.vergleich__regler:focus-visible + * { outline: none; }
.vergleich__buehne:has(.vergleich__regler:focus-visible) { outline: 2px solid var(--creme); outline-offset: 3px; }
.vergleich__text { display: flex; justify-content: space-between; font-size: 12px; color: var(--t3); }

.paare { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2) var(--s1); }
.paare .abzug__bild { aspect-ratio: 1; }

.abzug--einzeln { max-width: 446px; }
.abzug--einzeln .abzug__bild { aspect-ratio: 446 / 300; }

@media (min-width: 900px) {
  .restaurationen .einleitung { margin-bottom: var(--s6); }
  .blatt { grid-template-columns: 4fr 8fr; column-gap: var(--s3); padding: var(--s5) 0 var(--s6); }
  .blatt__kopf { position: sticky; top: calc(var(--kopf) + var(--s4)); }
  .blatt__modell { font-size: 56px; }
  .daten { font-size: 15px; }
  .reihe { gap: var(--s2); max-width: 720px; }
  .paare { grid-template-columns: repeat(4, 1fr); gap: var(--s2); max-width: 720px; }
}

/* ---------- 4 Werkstatt ---------- */
.werkstatt { padding: var(--abschnitt) 0; border-top: 1px solid var(--linie); }
.zitat p {
  font-size: 28px; font-weight: 400; line-height: 1.1; letter-spacing: -0.03em;
  color: var(--creme); max-width: 15em;
}
.werkstatt .einleitung { margin: var(--s3) 0 var(--s5); }
.liste { border-top: 1px solid var(--linie); }
.liste__zeile { display: grid; gap: 4px; padding: var(--s3) 0; border-bottom: 1px solid var(--linie); }
.liste dt { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: var(--creme); }
.liste dd { color: var(--t2); }
@media (min-width: 900px) {
  .zitat p { font-size: 56px; line-height: 1.05; }
  .werkstatt .einleitung { margin: var(--s4) 0 var(--s6); }
  .liste__zeile { grid-template-columns: 5fr 7fr; column-gap: var(--s3); align-items: baseline; }
  .liste dt { font-size: 22px; }
}

/* ---------- 5 Kontakt ---------- */
.kontakt {
  min-height: 100svh;
  display: flex; align-items: center;
  padding: var(--abschnitt) 0;
  background: var(--flaeche);
}
.kontakt__raster { display: grid; gap: var(--s5); }
.kontakt__haupt { display: grid; gap: var(--s4); justify-items: start; }
.kontakt__satz {
  font-size: 36px; font-weight: 400; line-height: 1.04; letter-spacing: -0.035em;
  color: var(--creme); max-width: 14em;
}
.kontakt__mail { font-size: 14px; color: var(--t2); margin-top: calc(-1 * var(--s3)); }
.kontakt__neben { display: grid; gap: var(--s3); align-content: start; }
.kontakt__neben .abzug { width: min(100%, 320px); }
.kontakt__neben .abzug__bild { aspect-ratio: 446 / 300; }
.adresse { display: grid; }
.adresse > div { display: grid; grid-template-columns: 8.5em 1fr; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--linie); }
.adresse dt { font-size: 13px; color: var(--t3); padding-top: 3px; }
.adresse dd { color: var(--t1); }
.adresse a { display: inline-block; padding: 4px 0; text-decoration: none; border-bottom: 1px solid var(--linie); transition: border-color 150ms ease-out; }
.adresse a:hover { border-color: var(--creme); }
.platzhalter { color: var(--t3) !important; font-style: italic; }
@media (min-width: 900px) {
  .kontakt__raster { grid-template-columns: 7fr 4fr; column-gap: var(--s5); align-items: end; }
  .kontakt__satz { font-size: 80px; line-height: 1; }
}

/* Fuss */
.fuss { padding: var(--s4) 0 calc(var(--s4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); }
.fuss__inhalt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); font-size: 14px; color: var(--t3); }
.entwurf a { display: inline-block; padding: 6px 0; color: var(--t2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linie); transition: color 150ms ease-out; }
.entwurf a:hover { color: var(--creme); }

/* ---------- Bewegung beim Laden ---------- */
.js .zeile > span { transform: translateY(105%); }
.js .einstieg__bild .abzug__bild { clip-path: inset(100% 0 0 0); }
.js .einstieg__bild img { transform: scale(1.15); }
.js .einstieg__was, .js .einstieg__satz, .js .einstieg__tun, .js .register, .js .einstieg__bild figcaption { opacity: 0; }

.js.los .zeile > span { transform: none; transition: transform 1000ms var(--expo); }
.js.los .zeile:nth-child(2) > span { transition-delay: 90ms; }
.js.los .einstieg__bild .abzug__bild { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--expo) 250ms; }
.js.los .einstieg__bild img { transform: none; transition: transform 1400ms var(--expo) 250ms; }
.js.los .einstieg__was, .js.los .einstieg__satz, .js.los .einstieg__tun, .js.los .register, .js.los .einstieg__bild figcaption {
  opacity: 1; transition: opacity 700ms ease-out 450ms;
}

@media (prefers-reduced-motion: reduce) {
  .js .zeile > span, .js .einstieg__bild img { transform: none !important; transition: none !important; }
  .js .einstieg__bild .abzug__bild { clip-path: none !important; transition: none !important; }
  .js .einstieg__was, .js .einstieg__satz, .js .einstieg__tun, .js .register, .js .einstieg__bild figcaption { opacity: 1 !important; transition: none !important; }
  .band { transition: none !important; }
  .js .eintrag { opacity: 1; }
  .tafel__bild img { transition: none !important; }
  html { scroll-behavior: auto; }
}