/* Cruise n Roll Speed Shop – Entwurf Seetalwebsites, 03.11.2026
   Rohalu, Gold aus dem Logo, Werkstatt dunkel. Big Shoulders Display + Work Sans + DM Mono. */

:root {
  --alu: #E6E6E2;
  --alu-2: #D6D6D1;
  --text: #19191B;
  --text-2: rgba(25, 25, 27, 0.72);
  --text-3: rgba(25, 25, 27, 0.52);
  --linie: rgba(25, 25, 27, 0.16);
  --gold: #B8892B;
  --gold-hell: #D4A647;
  --werkstatt: #26262A;
  --hell: #EDEDE9;
  --hell-2: rgba(237, 237, 233, 0.74);
  --hell-3: rgba(237, 237, 233, 0.5);

  --rand: 20px;
  --breite: 1200px;
  --luft: 64px;
  --r: 4px;

  --titel: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --schrift: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --expo: cubic-bezier(0.19, 1, 0.22, 1);
}
@media (min-width: 900px) { :root { --rand: 40px; --luft: 104px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); font: 400 17px/1.55 var(--schrift);
  background: var(--alu);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 3px);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.rahmen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.titel { font: 600 48px/0.95 var(--titel); letter-spacing: -0.01em; }
.lead { margin-top: 16px; max-width: 36em; color: var(--text-2); }
@media (min-width: 900px) { .titel { font-size: 80px; } }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  background: var(--gold); color: var(--text); border: 0; border-radius: var(--r);
  font: 600 16px/1 var(--schrift); text-decoration: none; cursor: pointer;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.knopf:hover { background: var(--gold-hell); }
.knopf:active { transform: translateY(1px); }
.knopf--klein { min-height: 40px; padding: 0 16px; font-size: 15px; }
.textlink { display: inline-block; padding: 8px 0; font: 500 16px/1.4 var(--mono); text-underline-offset: 4px; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 10; background: #000; color: var(--hell); }
.kopf__innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 4px var(--rand); display: flex; align-items: center; gap: 24px; }
.kopf__logo img { width: 96px; }
.kopf__nav { display: none; gap: 24px; margin-left: auto; }
.kopf__nav a { padding: 8px 0; text-decoration: none; font-weight: 500; font-size: 15px; color: var(--hell-2); }
.kopf__nav a:hover { color: var(--hell); }
.kopf .knopf { margin-left: auto; }
@media (min-width: 900px) { .kopf__logo img { width: 112px; } .kopf__nav { display: flex; } .kopf .knopf { margin-left: 0; } }

/* Start */
.start { padding-bottom: var(--luft); }
.start__bild { height: 42svh; min-height: 260px; max-height: 720px; overflow: hidden; background: var(--werkstatt); }
.start__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.start__text { padding-top: 24px; display: grid; gap: 16px; }
.start__titel { font: 600 clamp(52px, 15.5vw, 76px)/0.9 var(--titel); letter-spacing: -0.01em; }
.start__titel .maske { display: block; overflow: hidden; }
.start__titel .zeile { display: block; }
.start__titel .maske:nth-child(2) .zeile { color: var(--gold); }
.start__satz { color: var(--text-2); max-width: 32em; }
.start__aktion { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.start__zeiten { margin-top: 16px; font: 400 14px/1.5 var(--mono); color: var(--text-2); }
.start__zeiten span { display: inline-block; min-width: 48px; color: var(--text); font-weight: 500; }
.monteure__bilder figure:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .monteure__bilder { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .start__bild { height: 64vh; }
  .start__text { grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; padding-top: 40px; }
  .start__titel { font-size: clamp(96px, 10vw, 152px); }
}
.js .start__titel .zeile { transform: translateY(105%); }
.js.ist-da .start__titel .zeile { transform: none; transition: transform 1000ms var(--expo); }
.js.ist-da .start__titel .maske:nth-child(2) .zeile { transition-delay: 90ms; }

/* Service */
.service { padding: var(--luft) 0; background: #F2F2EF; }
.service__raster { margin-top: 40px; display: grid; border-top: 2px solid var(--text); }
.karte { padding: 24px 0; border-bottom: 1px solid var(--linie); }
.karte h3 { font: 600 28px/1 var(--titel); }
.karte p { margin-top: 8px; color: var(--text-2); }
@media (min-width: 900px) {
  .service__raster { grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
  .karte { padding: 40px 0; }
  .karte h3 { font-size: 34px; }
}

/* Keine Monteure */
.monteure { padding: var(--luft) 0; background: var(--werkstatt); color: var(--hell); }
.monteure .lead { color: var(--hell-2); }
.monteure__raster { display: grid; gap: 40px; }
.monteure__satz { font: 600 clamp(56px, 16vw, 80px)/0.9 var(--titel); color: var(--gold-hell); letter-spacing: -0.01em; }
.monteure__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.monteure__bilder img { width: 100%; object-fit: cover; border-radius: var(--r); }
.monteure__bilder figure:first-child img { aspect-ratio: 4 / 3; }
.monteure__bilder figure:not(:first-child) img { aspect-ratio: 3 / 4; }
.monteure__bilder figcaption { margin-top: 8px; font: 400 12px/1.4 var(--mono); color: var(--hell-3); }
@media (min-width: 900px) {
  .monteure__raster { grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
  .monteure__satz { font-size: 120px; }
  .monteure__bilder { gap: 16px; }
  .monteure__bilder figcaption { font-size: 13px; }
}

/* Umbauten: die Werkstatt-Wand */
.umbauten { padding: var(--luft) 0; overflow: hidden; }
.wand { margin-top: 40px; display: grid; gap: 8px; }
.wand__reihe { display: flex; gap: 8px; width: max-content; will-change: transform; }
.wand__reihe:nth-child(2) { margin-left: -30vw; }
.wand__reihe li { width: 64vw; max-width: 460px; flex: none; }
.wand__reihe img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--alu-2); }
.umbauten__fuss { margin-top: 40px; }
.umbauten__fuss p { max-width: 40em; padding-left: 16px; border-left: 3px solid var(--gold); color: var(--text-2); }
@media (min-width: 900px) { .wand { gap: 16px; } .wand__reihe { gap: 16px; } .wand__reihe li { width: 34vw; } }

/* Gutachten-Finder */
.gutachten { padding: var(--luft) 0; background: #F2F2EF; }
.gutachten__raster { display: grid; gap: 40px; }
.marken { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.marken button {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--text); border-radius: var(--r);
  background: transparent; color: var(--text); font: 500 15px/1 var(--schrift); cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.marken button:hover { background: rgba(25, 25, 27, 0.06); }
.marken button[aria-selected="true"] { background: var(--text); color: var(--hell); }
.finder { background: var(--werkstatt); color: var(--hell); border-radius: var(--r); padding: 8px 24px 24px; }
.finder__liste li { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid rgba(237, 237, 233, 0.14); }
.finder__liste .modell { font: 600 24px/1.1 var(--titel); }
.finder__liste .aenderung { display: flex; flex-wrap: wrap; gap: 8px; }
.finder__liste .aenderung span { padding: 4px 8px; border: 1px solid rgba(212, 166, 71, 0.5); border-radius: var(--r); font: 400 13px/1.4 var(--mono); color: var(--gold-hell); }
.finder__liste button { justify-self: start; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r); background: var(--hell); color: var(--text); font: 600 14px/1 var(--schrift); cursor: pointer; }
.finder__liste button:hover { background: #fff; }
.finder__liste.ist-neu li { animation: rein 600ms var(--expo) both; animation-delay: calc(var(--i) * 50ms); }
@keyframes rein { from { clip-path: inset(0 100% 0 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.finder__hinweis { margin-top: 16px; font-size: 15px; color: var(--hell-3); }
@media (min-width: 900px) { .gutachten__raster { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } .finder { padding: 8px 40px 40px; } }

/* Wir */
.wir { padding: var(--luft) 0; }
.wir__raster { display: grid; gap: 40px; }
.person { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: end; }
.person img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); }
.person h3 { font: 600 32px/1 var(--titel); }
.person p { margin-top: 8px; color: var(--text-2); }
@media (min-width: 900px) {
  .wir__raster { grid-template-columns: 4fr 4fr 4fr; gap: 40px; align-items: end; }
  .person { grid-template-columns: 1fr; }
  .person img { aspect-ratio: 4 / 5; }
}

/* Kontakt */
.kontakt { padding: var(--luft) 0; background: #000; color: var(--hell); }
.kontakt .lead { color: var(--hell-2); }
.kontakt__raster { display: grid; gap: 40px; }
.kontakt__tel { display: inline-block; margin-top: 24px; padding: 8px 0; font: 600 clamp(44px, 13vw, 64px)/1 var(--titel); color: var(--gold-hell); text-decoration: none; }
.daten { margin-top: 24px; display: grid; gap: 16px; }
.daten dt { font: 400 13px/1.4 var(--mono); color: var(--hell-3); }
.daten a { display: inline-block; padding: 8px 0; }
.anfrage { display: grid; gap: 24px; padding: 24px; background: var(--alu); color: var(--text); border-radius: var(--r); }
.eingabe { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.eingabe > span, .eingabe legend { font-size: 14px; font-weight: 500; color: var(--text-2); padding: 0; margin-bottom: 8px; }
.eingabe > span { margin-bottom: 0; }
.eingabe input, .eingabe textarea { width: 100%; min-height: 48px; padding: 8px 16px; border: 1px solid rgba(25, 25, 27, 0.3); border-radius: var(--r); background: #fff; color: var(--text); font: 400 17px/1.5 var(--schrift); }
.eingabe input:focus, .eingabe textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid rgba(25, 25, 27, 0.3); border-radius: var(--r); font-weight: 500; transition: background-color 150ms ease-out; }
.chips input:checked + span { background: var(--text); color: var(--hell); border-color: var(--text); }
.chips input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.anfrage .knopf { justify-self: start; }
.anfrage__hinweis { font-size: 14px; color: var(--text-3); }
@media (min-width: 900px) { .kontakt__raster { grid-template-columns: 5fr 7fr; gap: 64px; } .anfrage { padding: 40px; } }

/* Fuss */
.fuss { padding: 40px 0; background: #000; color: var(--hell-2); border-top: 1px solid rgba(237, 237, 233, 0.12); font-size: 15px; }
.fuss__raster { display: grid; gap: 8px; }
.fuss__name { color: var(--gold-hell); font: 600 22px/1 var(--titel); }
.fuss__entwurf a { display: inline-block; padding: 8px 0; color: var(--hell); }
@media (min-width: 900px) { .fuss__raster { grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .start__titel .zeile { transform: none !important; transition: none !important; }
  .wand__reihe { transform: none !important; }
  .finder__liste.ist-neu li { animation: none; }
}