/* ============================================================================
   Gaubitz Prints — One-Pager
   Designsystem aus dem Claude-Design-Handoff, Tokens 1:1 uebernommen.
   Farben in OKLCH; Hex-/RGBA-Fallback im @supports-Block darunter.
   Keine Radien, keine Schatten, keine Gradienten ausser den Bild-Platzhaltern.

   27.08.2026 — Aufhellung. Alle Flaechen und Linien um 0,11 angehoben
   (--bg 0.19 -> 0.30). Die Text-Tokens wandern mit nach oben, sonst faellt der
   Kontrast der leisen Grautoene unter AA: --text-note lag auf dem alten Grund
   bei 4,7:1 und waere auf dem neuen bei 3,0:1 gelandet. Reihenfolge und
   Abstaende der Text-Stufen bleiben erhalten, die Akzentfarbe ist unveraendert.
   ============================================================================ */

:root {
  /* Flaechen */
  --bg:            oklch(0.30 0.012 250);
  --bg-sunken:     oklch(0.27 0.012 250);
  --surface:       oklch(0.33 0.012 250);
  --surface-hover: oklch(0.36 0.012 250);

  /* Linien */
  --border:        oklch(0.41 0.012 250);
  --border-soft:   oklch(0.39 0.012 250);
  --border-strong: oklch(0.47 0.012 250);

  /* Text */
  --text:          oklch(0.97 0.005 250);
  --text-quote:    oklch(0.955 0.005 250);
  --text-btn:      oklch(0.91 0.01  250);
  --text-spec:     oklch(0.865 0.01  250);
  --text-muted:    oklch(0.845 0.01  250);
  --text-dim:      oklch(0.82 0.01  250);
  --text-nav:      oklch(0.80 0.01  250);
  --text-soft:     oklch(0.78 0.01  250);
  --text-place:    oklch(0.74 0.01  250);
  --text-faint:    oklch(0.695 0.01  250);
  --text-note:     oklch(0.675 0.01  250);

  /* Akzent */
  --accent:        oklch(0.78 0.14 190);
  --accent-hover:  oklch(0.86 0.12 190);
  --on-accent:     oklch(0.17 0.02 200);

  /* Formularfelder auf der Akzentflaeche */
  --field-border:   oklch(0.17 0.02 200 / 0.35);
  --field-bg:       oklch(1 0 0 / 0.35);
  --field-bg-focus: oklch(1 0 0 / 0.60);

  /* Typografie */
  --sans: Helvetica, Arial, "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Raster */
  --pad: clamp(20px, 5vw, 64px);   /* Seitenrand, im Design 64px */
  --sec: clamp(48px, 7vw, 76px);   /* Sektions-Innenabstand, im Design 76px */
  --t: 140ms ease-out;
}

@supports not (color: oklch(0 0 0)) {
  /* Ersatzfassung fuer Browser ohne OKLCH. Aus denselben Werten erzeugt wie der
     Block darueber — vorher lag der Fallback rund 0,05 heller als das Original,
     zwei verschiedene Helligkeiten fuer dieselbe Seite. */
  :root {
    --bg: #292e34;            --bg-sunken: #22272c;
    --surface: #31363b;       --surface-hover: #383e43;
    --border: #464b51;        --border-soft: #40464b;   --border-strong: #565b61;
    --text: #f3f5f8;          --text-quote: #eef0f3;    --text-btn: #dce2e8;
    --text-spec: #ced3d9;     --text-muted: #c7cdd3;    --text-dim: #bfc5ca;
    --text-nav: #b9bec4;      --text-soft: #b3b8be;     --text-place: #a6abb1;
    --text-faint: #989da3;    --text-note: #92979d;
    --accent: #00d3cb;        --accent-hover: #60eae2;  --on-accent: #051213;
    --field-border: rgba(19, 27, 30, 0.35);
    --field-bg: rgba(255, 255, 255, 0.35);
    --field-bg-focus: rgba(255, 255, 255, 0.6);
  }
}

/* --------------------------------------------------------------- Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Fliesstext-Links ausserhalb der Rechtstexte (dort macht das .legal a).
   Ohne diese Regel erben Inline-Links die Textfarbe und sind erst beim Hover
   als Link erkennbar — fuer die interne Verlinkung zwischen den Seiten zu
   wenig. Betrifft nur Links IM Text; Buttons und Navigation bleiben unberuehrt. */
.card p a,
.callout p a,
.step p a,
.faq-list p a,
.small-note a,
.lede a { color: var(--accent); }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 18px; font-family: var(--mono); font-size: 13px;
}
.skip:focus { left: 0; text-decoration: none; }

/* Container: Inhalt auf 1280px begrenzt, Hintergrundbaender voll breit. */
.wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

.band { border-top: 1px solid var(--border); }
.band--sunken { background: var(--bg-sunken); }
.band--plain { padding-block: var(--sec); }
/* Nur die Material-Sektion hat im Entwurf oben UND unten eine Linie. */
.band--closed { border-bottom: 1px solid var(--border); }

[id] { scroll-margin-top: 88px; }

/* ----------------------------------------- Bausteine, mehrfach verwendet -- */

.sec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px 32px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 34px;
}
.eyebrow {
  margin: 0; color: var(--accent);
  font-family: var(--mono); font-size: 13px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.sec-note {
  font-family: var(--mono); font-size: 11px; color: var(--text-note);
}

/* Bild-Platzhalter — vor dem Livegang durch echte Fotos ersetzen. */
.ph {
  background: repeating-linear-gradient(135deg,
              var(--surface-hover) 0 10px, var(--surface) 10px 20px);
  border: 1px solid var(--border);
  display: flex; align-items: flex-end;
  padding: 16px;
}
.ph span {
  font-family: var(--mono); font-size: 11px; color: var(--text-place);
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.btn:hover { text-decoration: none; }
.btn--accent {
  background: var(--accent); color: var(--on-accent);
  font-weight: 500; padding: 16px 28px;
}
.btn--accent:hover { background: var(--accent-hover); }
.btn--ghost {
  border-color: var(--border-strong); color: var(--text-btn);
  padding: 16px 24px;
}
.btn--ghost:hover { border-color: var(--accent); }
.btn--sm { padding: 15px 26px; }

/* ------------------------------------------------------------------- Header */

.site-head {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 26px; flex-wrap: wrap;
  padding-block: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand:hover { text-decoration: none; }
.brand-dot { width: 12px; height: 12px; background: var(--accent); flex: none; }
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.brand-sub {
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
  white-space: nowrap;
}
.site-nav {
  display: flex; align-items: center;
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-nav);
}

/* Die Punkte liegen in einer eigenen Ebene, weil sie unter 940px komplett
   in ein Panel wandern und der Burger-Knopf an ihrer Stelle stehenbleibt. */
.nav-list { display: flex; align-items: center; gap: 26px; }
.nav-list > a[aria-current="page"],
.nav-item > a[aria-current="page"] { color: var(--text); }

/* Saeule mit Untermenue. Das Padding ist die Hover-Bruecke: ohne sie liegt
   zwischen Label und aufgeklapptem Panel ein toter Streifen, in dem der
   Zeiger das Menue wieder zuklappt. Das negative Margin nimmt die Hoehe
   aus dem Layout zurueck, damit der Header nicht waechst. 21px ist die
   Innenkante des Headers — das Panel haengt damit genau an seiner
   Unterlinie, ohne Spalt und ohne sie zu ueberdecken. */
.nav-item { position: relative; }
.nav-item--sub { padding-block: 21px; margin-block: -21px; }
.nav-item--sub > a::after {
  content: "▾"; margin-left: 7px; font-size: 9px; vertical-align: 1px;
  color: var(--text-faint);
}
.nav-item--sub:hover > a::after,
.nav-item--sub:focus-within > a::after { color: var(--accent); }
/* Die Saeule, in der die aktuelle Seite liegt. */
.nav-item--hier > a { color: var(--text); }

.nav-sub {
  position: absolute; top: 100%; left: -18px; z-index: 5;
  display: none; flex-direction: column; min-width: 254px;
  padding: 9px 0;
  background: var(--surface); border: 1px solid var(--border-strong);
  /* Eine Ebene tiefer, also auch eine Stufe leiser gesetzt: keine
     Versalien, weniger Sperrung — sonst schreien die beiden Ebenen gleich. */
  text-transform: none; letter-spacing: 0.02em; font-size: 12.5px;
}
.nav-item--sub:hover > .nav-sub,
.nav-item--sub:focus-within > .nav-sub { display: flex; }
.nav-sub a { padding: 9px 18px; color: var(--text-nav); }
.nav-sub a:hover {
  background: var(--surface-hover); color: var(--text); text-decoration: none;
}
.nav-sub a[aria-current="page"] {
  color: var(--text); border-left: 2px solid var(--accent); padding-left: 16px;
}
/* Trennt die Anwendungen von den Grundlagen (Material, Dateien). */
.nav-sub-sep { height: 1px; margin: 8px 0; background: var(--border-soft); }

/* Steht nur im Menue-Panel: der Vorteil, den kein Online-Druckdienst hat. */
.nav-local { display: none; }

.nav-burger {
  display: none; align-items: center; gap: 11px;
  padding: 9px 13px; background: none; cursor: pointer;
  border: 1px solid var(--border-strong); color: var(--text-nav);
  font: inherit;
}
.nav-burger:hover { color: var(--text); border-color: var(--text-faint); }
.nav-burger-lines {
  position: relative; width: 16px; height: 1.5px; background: currentColor;
}
.nav-burger-lines::before, .nav-burger-lines::after {
  content: ""; position: absolute; left: 0;
  width: 16px; height: 1.5px; background: currentColor;
}
.nav-burger-lines::before { top: -5px; }
.nav-burger-lines::after  { top: 5px; }
.nav-burger[aria-expanded="true"] .nav-burger-lines { background: transparent; }
.nav-burger[aria-expanded="true"] .nav-burger-lines::before {
  top: 0; transform: rotate(45deg);
}
.nav-burger[aria-expanded="true"] .nav-burger-lines::after {
  top: 0; transform: rotate(-45deg);
}

.site-nav .btn--nav {
  background: var(--accent); color: var(--on-accent); padding: 9px 16px;
}
.site-nav .btn--nav:hover { background: var(--accent-hover); text-decoration: none; }

/* --------------------------------------------------------------------- Hero */

.hero {
  padding-block: clamp(48px, 6vw, 80px) var(--sec);
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center;
}
.hero-text { display: flex; flex-direction: column; gap: 26px; }
.status {
  display: flex; align-items: center; gap: 10px;
  color: var(--accent);
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.status::before {
  content: ""; width: 6px; height: 6px; flex: none;
  background: var(--accent); border-radius: 50%;
}
.hero h1 {
  font-size: clamp(2.25rem, 5.2vw, 66px);
  line-height: 1.03; font-weight: 700; letter-spacing: -0.03em;
}
.lede {
  max-width: 48ch; font-size: 17px; line-height: 1.6; color: var(--text-muted);
}
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 6px; }
.hero-media {
  margin: 0; aspect-ratio: 4 / 3;
  border: 1px solid var(--border); overflow: hidden;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------------ Statbar */

.statbar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stat {
  background: var(--bg); padding: 22px 26px;
  display: flex; flex-direction: column; gap: 5px;
}
.stat dt {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
}
.stat dd {
  margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
}
/* Ein Stat-Wert als Aussage statt Kennzahl — kleiner, damit er in die Zeile passt. */
.stat dd.stat-text {
  font-size: 14.5px; line-height: 1.35; letter-spacing: -0.005em;
}

/* -------------------------------------------------------------- Leistungen */

.cardgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
}
.card {
  background: var(--surface); padding: 30px 28px;
  display: flex; flex-direction: column; gap: 10px;
  transition: background-color var(--t);
}
.card:hover { background: var(--surface-hover); }
.card h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.card p { font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }
/* Die siebte Leistungskarte schliesst die Reihe ab. Ohne das bliebe im Raster
   eine angebrochene Zeile mit leeren Zellen stehen — und leere Zellen zeigen
   die Rasterfarbe, sehen also aus wie ein Fehler. `1 / -1` spannt ueber alle
   vorhandenen Spalten, funktioniert damit auch in den 2- und 1-spaltigen
   Breakpoints. */
.card--wide { grid-column: 1 / -1; }

/* ------------------------------------------------------------- Maschinen */

.specs { display: flex; flex-direction: column; }
.specs--grid {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 48px; row-gap: 0;
}
.spec-row {
  display: grid; grid-template-columns: 100px 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--border-soft);
}
.spec-row b {
  font-family: var(--mono); font-size: 14px; font-weight: 400; color: var(--accent);
}
.spec-row span { font-size: 14.5px; color: var(--text-spec); }

/* --------------------------------------------------------------- Material */

.finder { display: flex; flex-direction: column; gap: 22px; }

.chipbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chip {
  font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1;
  padding: 11px 16px;
  border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-btn);
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background-color var(--t);
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}

.chip-count {
  margin: 0; font-family: var(--mono); font-size: 11px; color: var(--text-note);
}

.tilegrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1px; background: var(--border);
}
.tile {
  background: var(--surface); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 8px; min-height: 108px;
  transition: background-color var(--t);
}
.tile:hover { background: var(--surface-hover); }
.tile[hidden] { display: none; }
.tile-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.tile-head b { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.tile-temp {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
  white-space: nowrap;
}
.tile-use { font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }

.small-note { font-size: 12.5px; line-height: 1.5; color: var(--text-note); }
.specs + .small-note { margin-top: 18px; }

/* ------------------------------------------------------------------ Ablauf */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step { display: flex; flex-direction: column; gap: 12px; }
.step-num { display: flex; align-items: center; gap: 12px; }
.step-num b {
  font-family: var(--mono); font-size: 34px; font-weight: 500;
  color: var(--accent); line-height: 1;
}
.step-num i { flex: 1; height: 1px; background: var(--border); }
.step h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.step p { font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }

.callout {
  margin-top: 12px; background: var(--surface); border: 1px solid var(--border);
  padding: 32px 36px;
  display: flex; justify-content: space-between; align-items: center; gap: 40px;
}
.callout-text { display: flex; flex-direction: column; gap: 8px; }
.callout h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.callout p {
  max-width: 68ch; font-size: 14.5px; line-height: 1.6; color: var(--text-dim);
}
.callout .btn { flex: none; }

/* ---------------------------------------------------------------- Arbeiten */

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery .ph { aspect-ratio: 1; padding: 12px; }
.gallery .ph span { font-size: 10.5px; }

.gallery .photo {
  margin: 0; aspect-ratio: 1; position: relative;
  border: 1px solid var(--border); overflow: hidden;
  /* Gleiche Streifen wie .ph: solange die Bilddatei fehlt, sieht die Kachel
     aus wie ein Platzhalter und nicht wie ein Fehler. Liegt das Foto da,
     deckt es den Verlauf vollstaendig ab. */
  background: repeating-linear-gradient(135deg,
              var(--surface-hover) 0 10px, var(--surface) 10px 20px);
}
.gallery .photo img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Setzt das Skript in index.html, wenn eine Bilddatei nicht geladen werden
   konnte — sonst zeichnet der Browser sein Kaputt-Bild-Symbol in die Kachel. */
.gallery .photo--leer img { display: none; }
.gallery .photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 12px;
  font-family: var(--mono); font-size: 10.5px; color: #fff;
  background: linear-gradient(to top, oklch(0 0 0 / 0.55), oklch(0 0 0 / 0));
}

/* Drei Fotos statt vier: bei drei Kacheln im 4er-Raster bliebe eine leere
   Zelle stehen, und eine leere Zelle zeigt die Rasterfarbe — sieht aus wie
   ein Fehler. Gleiche Ueberlegung wie bei .card--wide. */
.gallery--drei { grid-template-columns: repeat(3, 1fr); }

/* --------------------------------------------------------------- Belegfoto */

/* Ein einzelnes grosses Foto innerhalb einer Sektion. Anders als .gallery
   beschneidet .shot NICHT auf ein Quadrat: bei Relief- und Materialaufnahmen
   traegt genau der flache Anschnitt die Aussage — im Quadrat waere von der
   Struktur, um die es geht, die Haelfte weg. */
.shot {
  margin-top: 12px; border: 1px solid var(--border); background: var(--surface);
}
.shot img { width: 100%; height: auto; }
.shot figcaption {
  padding: 11px 16px; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.04em; color: var(--text-faint);
}
.shot + .small-note { margin-top: 18px; }

/* -------------------------------------------------------------- Ueber mich */

.about {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.about-media { aspect-ratio: 5 / 4; }
.about-text { display: flex; flex-direction: column; gap: 20px; }
.about-lead {
  font-size: 26px; line-height: 1.35; font-weight: 700; letter-spacing: -0.015em;
}
.about-text p:last-child {
  max-width: 52ch; font-size: 15.5px; line-height: 1.7; color: var(--text-muted);
}

/* ----------------------------------------------------------- Kundenstimmen */

.quotes {
  padding-block: clamp(40px, 5vw, 60px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
}
.quote { display: flex; flex-direction: column; gap: 12px; padding-right: 36px; }
.quote + .quote { border-left: 1px solid var(--border-soft); padding-left: 36px; }
.quote p { font-size: 16px; line-height: 1.55; color: var(--text-quote); }
.quote cite {
  font-style: normal;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-note);
}

/* --------------------------------------------------------------------- FAQ */

.faq { display: grid; grid-template-columns: 300px 1fr; gap: 56px; }
.faq-list { display: flex; flex-direction: column; }
.faq-list details { border-top: 1px solid var(--border-soft); padding: 18px 0; }
.faq-list details:last-child { border-bottom: 1px solid var(--border-soft); }
.faq-list summary {
  display: flex; justify-content: space-between; gap: 24px;
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  list-style: none; cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; font-family: var(--mono); font-weight: 400; color: var(--accent);
}
.faq-list p {
  margin-top: 12px; max-width: 74ch;
  font-size: 14.5px; line-height: 1.65; color: var(--text-dim);
}

/* ----------------------------------------------------------------- Kontakt */

.contact {
  background: var(--accent); color: var(--on-accent);
  padding-block: var(--sec);
}
.contact .wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; }
.contact-intro { display: flex; flex-direction: column; gap: 22px; }
.contact-intro .eyebrow { color: inherit; font-size: 11.5px; }
.contact-intro h2 {
  font-size: clamp(1.875rem, 3.2vw, 40px);
  line-height: 1.08; font-weight: 700; letter-spacing: -0.03em;
}
.contact-intro p { max-width: 38ch; font-size: 16px; line-height: 1.6; }
.contact-data {
  display: flex; flex-direction: column; gap: 7px; padding-top: 10px;
  font-family: var(--mono); font-size: 13px;
}
.contact :focus-visible { outline-color: var(--on-accent); }

.form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 6px; }
.form .lbl {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
/* Radio und Checkbox bleiben native Steuerelemente — Rahmen und Flaeche
   gelten nur fuer Text-, Datums-, Auswahl- und Textfelder. */
.form input:not([type="radio"]):not([type="checkbox"]),
.form select, .form textarea {
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  padding: 12px; font-size: 15.5px; font-family: var(--sans);
  color: var(--on-accent); outline: none;
  border-radius: 0;
  transition: background-color var(--t), border-color var(--t);
}
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--on-accent); background: var(--field-bg-focus);
}
.form input::placeholder, .form textarea::placeholder {
  color: var(--on-accent); opacity: 0.55;
}
.form .consent {
  flex-direction: row; gap: 10px; align-items: flex-start;
  font-size: 13px; line-height: 1.5;
}
.form .consent input { margin-top: 3px; flex: none; padding: 0; }
.form .consent a { text-decoration: underline; }
.form .req { color: var(--on-accent); opacity: 0.6; }

.form-legend { margin: 0; font-size: 12.5px; line-height: 1.5; opacity: 0.8; }

/* Radiogruppe: fieldset/legend statt div, damit die Gruppe auch fuer
   Screenreader eine Gruppe mit Beschriftung ist. */
.fieldset {
  border: 0; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.fieldset .lbl { padding: 0; }
.radio-row { display: flex; gap: 24px; flex-wrap: wrap; }
.form .radio {
  flex-direction: row; align-items: center; gap: 8px;
  font-size: 15px; cursor: pointer;
}
.form .radio input { flex: none; margin: 0; cursor: pointer; }
.field-block { display: flex; flex-direction: column; gap: 6px; }
.field-note { margin: 0; font-size: 12.5px; line-height: 1.45; opacity: 0.8; }
.drop {
  border: 1.5px dashed var(--field-border);
  padding: 20px; text-align: center;
  transition: border-color var(--t), background-color var(--t);
}
.drop.is-over { border-color: var(--on-accent); background: var(--field-bg); }
.drop input[type="file"] {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.drop-label { cursor: pointer; display: inline-flex; flex-direction: column; gap: 4px; }
.drop-label b { font-size: 15px; font-weight: 700; }
.drop-label span { font-size: 12.5px; opacity: 0.75; }
.filelist {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px;
  font-family: var(--mono); font-size: 12.5px; text-align: left;
}
.filelist li { display: flex; justify-content: space-between; gap: 16px; }
.filelist li.too-big { font-weight: 700; }
.form button {
  align-self: flex-start; margin-top: 4px; border: none;
  background: var(--bg); color: var(--text);
  padding: 15px 30px;
  font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  transition: background-color var(--t);
}
.form button:hover { background: var(--surface-hover); }
.form-hint { font-size: 12.5px; line-height: 1.5; opacity: 0.85; }
.form-hint a { text-decoration: underline; }
/* Honeypot — fuer Menschen unsichtbar, fuer Bots ein Koeder. */
.hp { position: absolute; left: -9999px; }

/* ------------------------------------------------------------------ Footer */

.site-foot .wrap {
  padding-block: 26px;
  display: flex; justify-content: space-between; gap: 12px 22px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--text-faint);
}
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* ------------------------------------------------------------ Rechtsseiten */

.legal { padding-block: var(--sec); }
.legal-inner { max-width: 74ch; }
.legal h1 {
  font-size: clamp(1.875rem, 4vw, 40px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
  margin-bottom: 28px;
}
.legal h2 {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  margin: 34px 0 10px;
}
.legal p, .legal li { font-size: 14.5px; line-height: 1.7; color: var(--text-dim); }
.legal p + p { margin-top: 10px; }
.legal ul { margin: 10px 0 0; padding-left: 20px; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--accent); }
.legal dl {
  margin: 12px 0 0;
  display: grid; grid-template-columns: 200px 1fr; gap: 10px 20px;
}
.legal dt {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
  padding-top: 3px;
}
.legal dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.note {
  border-left: 2px solid var(--accent); background: var(--surface);
  padding: 16px 20px; margin: 18px 0;
}
/* Nur das Label direkt im Note-Block, nicht fettgesetzte Wörter im Fließtext. */
.note > b:first-child {
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  font-weight: 500;
}
.note p { font-size: 13.5px; color: var(--text-muted); }
.note p b { font-weight: 700; color: var(--text); }

/* ================================================================= Responsiv
   Das Design ist auf fixer Breite 1280px entworfen. Alles darunter sind
   Entscheidungen aus der Umsetzung, nicht aus dem Entwurf.
   ========================================================================= */

@media (max-width: 1040px) {
  .cardgrid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

/* Ab hier hinter einen Knopf. Die Grenze ist gemessen, nicht gewaehlt: Marke
   und Navigationsreihe brauchen zusammen 949px, darunter bricht der Header in
   zwei Reihen um — und ein zweizeiliger sticky Header nimmt dauerhaft ein
   Viertel der sichtbaren Hoehe weg. 1000px laesst Luft fuer den Fall, dass
   IBM Plex Mono nicht laedt und eine breitere Ersatzschrift einspringt.
   Im Panel stehen die Untermenues offen: bei dreizehn Links lohnt ein
   Akkordeon nicht, es kostet nur einen Tap. */
@media (max-width: 1000px) {
  .nav-burger { display: flex; }

  .nav-list {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px var(--pad) 26px;
    background: var(--bg); border-bottom: 1px solid var(--border);
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
  }
  .site-nav[data-menue="offen"] .nav-list { display: flex; }

  .nav-item--sub { padding-block: 0; margin-block: 0; }
  .nav-item--sub > a::after { content: none; }

  .nav-list > a, .nav-item > a {
    display: block; padding: 14px 0;
    border-bottom: 1px solid var(--border-soft);
  }
  .nav-item--sub > a { color: var(--text); }

  .nav-sub {
    position: static; display: flex; min-width: 0;
    padding: 2px 0 12px 16px;
    background: none; border: 0; font-size: 12px;
  }
  .nav-sub a { padding: 10px 0; }
  .nav-sub a[aria-current="page"] { padding-left: 10px; }
  .nav-sub-sep { display: none; }

  .nav-list > .btn--nav {
    margin-top: 20px; padding: 15px 16px; text-align: center; border-bottom: 0;
  }

  .nav-local {
    display: block; padding-top: 18px;
    text-transform: none; letter-spacing: 0.02em;
    font-size: 12px; color: var(--text-faint);
  }
  .nav-local a { color: var(--text-spec); }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; }
  .specs--grid { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; gap: 32px; }
  .about-text { order: -1; }
  .faq { grid-template-columns: 1fr; gap: 26px; }
  .contact .wrap { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .callout { flex-direction: column; align-items: flex-start; gap: 24px; padding: 26px; }
  .quotes { grid-template-columns: 1fr; gap: 0; }
  .quote { padding: 22px 0; border-top: 1px solid var(--border-soft); }
  .quote + .quote { border-left: none; padding-left: 0; }
}

@media (max-width: 720px) {
  .statbar { grid-template-columns: repeat(2, 1fr); }
  .cardgrid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .legal dl { grid-template-columns: 1fr; gap: 4px 0; }
  .legal dt { padding-top: 12px; }
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
  .spec-row { grid-template-columns: 84px 1fr; gap: 12px; }
  .btn-row .btn { flex: 1 1 100%; text-align: center; }
  .brand-sub { display: none; }
  .site-nav { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}

@media print {
  .site-head, .site-foot, .form { display: none; }
  body { background: #fff; color: #000; }
}