/* ============================================================
   BALKENWERK ZIMMEREI & HOLZBAU — DESIGN-TOKENS & FUNDAMENT
   ============================================================
   Erstellt: 29.07.2026 von Mira (UI/UX) · gehört zu ENTSCHEIDUNGEN.md (E10/E11), PLAN.md Phase 2

   WAS DIESE DATEI IST — UND WAS NICHT:
   Nur (a) dieser Kopfkommentar, (b) :root-Tokenblock, (c) Reset,
   (d) Basis-Typografie + @font-face. KEIN Layout, KEINE Sektionen,
   KEINE Komponenten (Button/Card/Formularfeld-Optik). @senior-dev baut
   ab der Marke am Dateiende darauf auf — ausschließlich mit Klassen,
   da die CSP `style-src 'self'` ohne 'unsafe-inline' erzwingt (E12).
   Ein einziges style="…"-Attribut im HTML bricht die Auslieferung.

   DESIGN-RICHTUNG „AUFMASS" (E10) — WARUM DIESE DATEI SO AUSSIEHT:
   Die Seite ist wie eine Bauzeichnung gedacht: Trennung über Haarlinien
   und Weißraum, nicht über Karten. Deshalb gibt es in diesem gesamten
   Projekt genau EINE Stelle mit `border-radius` (hier im Reset, Wert 0)
   und NIRGENDS eine Schlagschatten-Eigenschaft — beides ist grep-prüfbar
   in der Abnahme (PLAN.md Phase 3). Wer hier „nur mal eben" eine
   abgerundete Ecke oder einen Schatten ergänzt, bricht die Design-Regel
   UND die automatisierte Prüfung. Fokus wird ausschließlich über
   `outline` sichtbar gemacht, nie über Schatten.

   FARBEN — ROH VS. ABGELEITET:
   Acht Rohwerte sind in ENTSCHEIDUNGEN.md/PLAN.md gesetzt und werden
   hier UNVERÄNDERT übernommen (siehe --color-*-raw-Kommentare unten).
   Zwei davon reißen den Kontrast-Zielwert im rohen Zustand:
     - Zink (#7d9298) erreicht als Fließtext auf Grund nur 2,80:1
     - Haarlinie (#c6cfce) erreicht als funktionale Trennlinie nur 1,22–1,36:1
     - Warmakzent (#b7442a) erreicht als Fließtext auf der Fläche
       #dee3e2 nur 4,18:1 (auf #eceeed reicht er mit 4,65:1 knapp)
   Regel war: die sechs/acht gesetzten Rohwerte NICHT anfassen, sondern
   für den kritischen Einsatzzweck einen abgeleiteten Ton auf derselben
   Farbfamilie ergänzen. Das ist unten getan (siehe Kontrasttabelle).
   Die Rohwerte bleiben als Tokens erhalten für alle Einsatzzwecke, die
   keine 4,5:1/3:1-Schwelle berühren (z. B. große dekorative Flächen).

   KONTRASTWERTE — AUSGERECHNET (WCAG-Relativluminanz-Formel, gerundet):
   ┌─────────────────────────────────────────┬──────────┬────────────────────────┐
   │ Paar                                     │ Ratio    │ Ergebnis                │
   ├─────────────────────────────────────────┼──────────┼────────────────────────┤
   │ Text #161b1c auf Grund #eceeed           │ 14,93:1  │ weit über 4,5:1 ✓       │
   │ Text #161b1c auf Grund #dee3e2           │ 13,41:1  │ weit über 4,5:1 ✓       │
   │ Primär #123e46 auf Grund #eceeed         │  9,98:1  │ für Headings/Links ✓    │
   │ Weiß auf Primär #123e46                  │ 11,63:1  │ weit über 4,5:1 ✓       │
   │ Weiß auf Primär tief #0b2b31              │ 14,96:1  │ weit über 4,5:1 ✓       │
   │ Zink (roh) #7d9298 auf Grund #eceeed     │  2,80:1  │ REISST — nicht als Text │
   │ → abgeleitet Text-Muted #4f6167 / Grund  │  5,56:1  │ ersetzt Zink als Text ✓ │
   │ → abgeleitet Text-Muted #4f6167 / #dee3e2│  5,00:1  │ ✓                       │
   │ → abgeleitet Muted-auf-Dunkel #a9bcc0    │          │ für Beschriftungen auf  │
   │   auf Primär #123e46                     │  5,89:1  │ dunklen Flächen ✓       │
   │   auf Primär tief #0b2b31                │  7,58:1  │ ✓                       │
   │ Haarlinie (roh) #c6cfce auf Grund #eceeed│  1,36:1  │ REISST — nur dekorativ  │
   │ Haarlinie (roh) #c6cfce auf Grund #dee3e2│  1,22:1  │ REISST — nur dekorativ  │
   │ → abgeleitet Haarlinie-Kräftig #6f7d7a   │  3,69:1  │ für funktionale Linien  │
   │   auf Grund #eceeed                      │          │ (Rand/Regel ≥3:1) ✓     │
   │ → abgeleitet Haarlinie-Kräftig #6f7d7a   │  3,31:1  │ ✓                       │
   │   auf Grund #dee3e2                      │          │                          │
   │ Warmakzent (roh) #b7442a auf Grund #eceeed│ 4,65:1  │ knapp ≥4,5:1 (Fließtext)│
   │ Warmakzent (roh) #b7442a auf Grund #dee3e2│ 4,18:1  │ REISST als Fließtext    │
   │ → Warmakzent daher NIE als Textfarbe,     │          │ nur Rand/Icon/Chip      │
   │   sondern nur nicht-textliches Element    │          │ (Rand-Schwelle 3:1,     │
   │   (Rand ≥3:1 auf beiden Flächen erfüllt)  │          │ beide Flächen bestehen) │
   │ → abgeleitet Danger-Text #8a331f          │  7,00:1  │ falls Fehlertext selbst │
   │   auf Grund #eceeed                       │          │ farbig gesetzt werden   │
   │ → abgeleitet Danger-Text #8a331f          │  6,29:1  │ muss (Regelfall: Text   │
   │   auf Grund #dee3e2                       │          │ bleibt --color-text)    │
   │ Fokusring Primär #123e46 auf beiden Grund-│ ≥8,97:1  │ weit über 3:1 ✓         │
   │ Flächen                                   │          │                          │
   └─────────────────────────────────────────┴──────────┴────────────────────────┘
   Zielwerte: ≥4,5:1 Fließtext, ≥3:1 große Schrift/Ränder/nicht-textliche
   UI-Elemente. Rechenweg: relative Luminanz je Kanal (sRGB-Linearisierung),
   L = 0,2126·R + 0,7152·G + 0,0722·B, Ratio = (L_hell+0,05)/(L_dunkel+0,05).

   FONT-FACE-ENTSCHEIDUNG:
   Archivo liegt nur als statischer 700er-Schnitt vor (Display/Versalien
   brauchen kein anderes Gewicht) → eine @font-face-Regel, fest 700.
   Source Sans 3 liegt als Variable Font vor, die 400–600 abdeckt. Ich
   setze dafür EINE @font-face-Regel mit `font-weight: 400 600` (Bereich)
   statt zwei Regeln mit identischer src auf dieselbe Datei. Zwei Regeln
   auf dieselbe Datei sind semantisch falsch (es ist kein zweiter Schnitt,
   sondern eine Achse) und laden in manchen Browsern das File doppelt an,
   bis der Cache greift. Die Bereichs-Schreibweise ist zudem die einzige,
   die 500 „geschenkt" mitbringt, falls später ein Zwischengewicht nötig
   wird, ohne eine dritte Regel zu ergänzen.
   `font-display: swap` an beiden, Fallback ein systemnaher Grotesk-Stack,
   damit die Seite auch ohne die woff2-Dateien (z. B. blockiertes CSS)
   lesbar bleibt — beide Ersatzschriften sind selbst serifenlose Grotesken,
   der Bruch beim Nachladen fällt dadurch kaum auf.

   ABSTANDSSKALA:
   Basis 4px. Grund: 4×11 = 44px trifft exakt die Mindest-Touch-Target-
   Größe (WCAG) — Abstandsraster und Bedienbarkeits-Mindestmaß teilen
   sich damit ein Gitter statt zwei getrennte Zahlenwelten zu führen.
   Bis 16px arithmetisch (4/8/12/16), darüber zunehmend geometrisch
   (24/32/48/64/96/128 ≈ ×1,4–1,5), weil große Lücken (Sektionsabstände)
   prozentual, nicht additiv wahrgenommen werden.

   TYPOSKALA:
   Fließtext bewusst 18px (nicht 16px) — Zielgruppe ist überwiegend 40+,
   mobil, ohne Technikaffinität (siehe Design-Standards). Die drei
   Display-Stufen (h1–h3) sind fluid mit clamp() zwischen 390px und
   1440px berechnet (siehe Formeln in den Kommentaren je Stufe), damit
   weder das Handy gestaucht noch der Desktop-Kopf unproportioniert groß
   wirkt — ohne Media-Query-Sprünge, die auf Zwischenbreiten hässlich
   brechen.
   ============================================================ */

/* ---------- @font-face ---------- */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-var-latin.woff2") format("woff2-variations"), url("fonts/source-sans-3-var-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- :root — Design-Tokens ---------- */

:root {
  color-scheme: light;

  /* Farben — Rohwerte (gesetzt, E10/E11, nicht verändern) */
  --color-background: #eceeed;   /* Grund hell */
  --color-surface: #dee3e2;      /* Grund, Stufe dunkler — Formularflächen, alternierende Streifen */
  --color-primary: #123e46;      /* Werkstatt-Petrol */
  --color-primary-deep: #0b2b31; /* Petrol tief — Footer, dichteste Flächen */
  --color-zink: #7d9298;         /* roh — nur dekorativ/großflächig, siehe Kontrastkommentar oben */
  --color-text: #161b1c;         /* Fließtext auf hellem Grund */
  --color-hairline: #c6cfce;     /* roh — nur dekorative Trennungen, siehe Kontrastkommentar oben */
  --color-danger: #b7442a;       /* Warmakzent — ausschließlich Formularfehler, nie dekorativ */

  /* Farben — abgeleitete Rollen (Kontrast-Korrektur, siehe Tabelle oben) */
  --color-text-muted: #4f6167;         /* ersetzt Zink überall dort, wo Zink Text wäre (5,00–5,56:1) */
  --color-text-muted-on-dark: #a9bcc0; /* Beschriftung/Meta auf Primär-Flächen (5,89–7,58:1) */
  --color-hairline-strong: #6f7d7a;    /* funktionale Trennlinien/Ränder, wo die Linie die Struktur trägt (3,31–3,69:1) */
  --color-danger-text: #8a331f;        /* nur falls Fehlertext selbst farbig gesetzt wird (6,29–7,00:1); Regelfall bleibt --color-text */
  --color-on-primary: #ffffff;         /* Text/Icons auf Primär-Flächen (11,63–14,96:1) */

  /* Fokus */
  --color-focus-ring: var(--color-primary);        /* auf hellem Grund, ≥8,97:1 */
  --color-focus-ring-on-dark: var(--color-on-primary); /* auf Primär-Flächen re-deklarieren */

  /* Typografie */
  --font-display: "Archivo", system-ui, "Segoe UI", Arial, sans-serif;
  --font-body: "Source Sans 3", system-ui, "Segoe UI", Arial, sans-serif;

  /* Display 1 (h1): 390px → 34px / 1440px → 64px */
  --text-display-1: clamp(2.125rem, 1.43rem + 2.86vw, 4rem);
  --leading-display-1: 1.05;
  /* Display 2 (h2): 390px → 26px / 1440px → 40px */
  --text-display-2: clamp(1.625rem, 1.3rem + 1.33vw, 2.5rem);
  --leading-display-2: 1.1;
  /* Display 3 (h3): 390px → 21px / 1440px → 28px */
  --text-display-3: clamp(1.3125rem, 1.15rem + 0.67vw, 1.75rem);
  --leading-display-3: 1.15;

  --text-eyebrow: 0.875rem;   /* 14px, Versalien-Label, Sektionsnummern */
  --leading-eyebrow: 1.2;
  --tracking-display: 0em;    /* h1–h3, Großbuchstaben bei großer Größe brauchen keine Zusatzspreizung */
  --tracking-eyebrow: 0.12em; /* kleine Versalien brauchen mehr Spreizung für Lesbarkeit */

  --text-body: 1.125rem;    /* 18px — bewusst über dem 16px-Minimum, siehe Kopfkommentar */
  --leading-body: 1.6;
  --text-body-sm: 1rem;     /* 16px — Meta-Angaben, niemals unter 16px */
  --leading-body-sm: 1.5;
  --text-fine: 0.875rem;    /* 14px — ausschließlich Rechtliches/Copyright, sparsam einsetzen */
  --leading-fine: 1.5;

  --measure: 68ch; /* maximale Zeilenlänge Fließtext, Zielkorridor 45–75 Zeichen */

  /* Abstandsskala — Basis 4px, siehe Kopfkommentar */
  --space-3xs: 0.25rem; /* 4px */
  --space-2xs: 0.5rem;  /* 8px */
  --space-xs: 0.75rem;  /* 12px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 1.5rem;   /* 24px */
  --space-lg: 2rem;     /* 32px */
  --space-xl: 3rem;     /* 48px */
  --space-2xl: 4rem;    /* 64px */
  --space-3xl: 6rem;    /* 96px */
  --space-4xl: 8rem;    /* 128px */
}

/* ---------- Reset ---------- */
/* Rechte Winkel überall: einzige Stelle im gesamten Projekt mit
   border-radius, Wert 0 — grep-prüfbar (PLAN.md Phase 3). Kein
   Schlagschatten wird hier oder sonst irgendwo gesetzt. */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  background-color: var(--color-background);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

ul,
ol {
  list-style: none;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

table {
  border-collapse: collapse;
}

/* Fokus ausschließlich über outline, nie über Schatten. Bei Mausklick
   kein Ring, bei Tastaturfokus immer sichtbar — Standardmuster ohne
   JS-Polyfill. */
:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Basis-Typografie ---------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--color-primary);
  /* Lange Einzelwoerter (z. B. "DATENSCHUTZERKLAERUNG" in Versalien bei
     34px) sind bei 320-460px breiter als der Viewport und erzwingen
     seitliches Scrollen (→ Petra-Blocker 1). overflow-wrap bricht nur,
     wenn es keine andere Loesung gibt; hyphens ergaenzt eine Trennlinie
     an sprachlich korrekter Stelle, dank lang="de" auf allen Seiten. */
  overflow-wrap: break-word;
  -webkit-hyphens: auto; /* Safari vor 17 kennt nur die praefixierte Form; ohne sie
                            bricht das Wort dort ohne Trennstrich mitten im Wort */
  hyphens: auto;
}

h1 {
  font-size: var(--text-display-1);
  line-height: var(--leading-display-1);
}

h2 {
  font-size: var(--text-display-2);
  line-height: var(--leading-display-2);
}

h3 {
  font-size: var(--text-display-3);
  line-height: var(--leading-display-3);
}

p {
  max-width: var(--measure);
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

small {
  font-size: var(--text-fine);
  line-height: var(--leading-fine);
  color: var(--color-text-muted);
}

/* Versalien-Label/Sektionsnummern (z. B. „01 · AUFMASS") */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

/* Ziffern immer gleich breit — Sektionsnummern und Telefonnummern
   dürfen beim Wechsel der Ziffer nicht „wandern". */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* --- ab hier baut @senior-dev die Komponenten --- */

/* ============================================================
   KOMPONENTEN — gebaut von @senior-dev (Alex), PLAN.md Phase 2
   ============================================================
   Prinzip durchgehend: Trennung über Haarlinien (--color-hairline-strong)
   und alternierende Flächen (--color-background / --color-surface),
   nicht über Karten. --color-surface ist von Mira ausdrücklich fuer
   "alternierende Streifen" vorgesehen (siehe Tokenblock oben) — genau
   dafuer wird sie hier zwischen den Sektionen eingesetzt.
   Kein border-radius (Reset erledigt das mit Wert 0), kein box-shadow,
   Header nicht sticky. Fokus ausschliesslich ueber :focus-visible
   (siehe Reset oben), hier nirgends erneut definiert. */

/* <address> ist im Browser-Standard kursiv — im ganzen Projekt an jeder
   Stelle unerwuenscht, deshalb hier einmal zentral zurueckgesetzt statt
   an jeder Einsatzstelle einzeln. */
address {
  font-style: normal;
}

/* ---------- Sichtbare Hilfsklassen ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--space-sm);
  top: -100%;
  z-index: 100;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-xs) var(--space-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

/* Der Skip-Link ist der einzige Tab-Stopp, den die Fokusring-Regel fuer dunkle
   Flaechen nicht erfasst: Er ist direktes Kind von <body> und liegt bei jeder
   Breite ueber zwei verschiedenen Untergruenden (Demo-Balken oben, heller
   Header darunter) — ein aussen liegender Ring waere gegen einen der beiden
   immer falsch. Deshalb liegt er hier mit negativem Offset INNEN auf der
   eigenen Petrol-Flaeche und ist damit vom Untergrund unabhaengig: 11,65:1.
   (Befund @qa-reviewer, 29.07.2026 — die urspruengliche Regel war eine
   Aufzaehlung der zwoelf gezaehlten dunklen Stopps, und der Skip-Link
   existiert nur, wenn man mit der Tastatur navigiert, wurde also nicht
   mitgezaehlt.) */
.skip:focus-visible {
  top: var(--space-sm);
  outline-color: var(--color-focus-ring-on-dark);
  outline-offset: -3px;
}

/* ---------- Layout-Grundbaustein ---------- */

.wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

@media (min-width: 640px) {
  .wrap {
    padding-inline: var(--space-lg);
  }
}

.section {
  padding-block: var(--space-2xl);
}

@media (min-width: 960px) {
  .section {
    padding-block: var(--space-3xl);
  }
}

.section--surface {
  background-color: var(--color-surface);
}

.section-intro {
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* ---------- Demo-Balken ---------- */
/* Kennzeichnet die Seite auf allen drei Seiten als Beispiel eines
   fiktiven Musterbetriebs (Vorgabe-Muster: musterbetrieb-profi-autowerkstatt). */

.demo-bar {
  background-color: var(--color-primary-deep);
  color: var(--color-on-primary);
  text-align: center;
  font-size: var(--text-fine);
  line-height: var(--leading-fine);
  padding: var(--space-2xs) var(--space-sm);
}

.demo-bar a {
  color: var(--color-on-primary);
  text-decoration-line: underline;
}

/* ---------- Header / Navigation ---------- */
/* Bewusst NICHT position: sticky (E10) — die Seite scrollt normal. */

header {
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-hairline-strong);
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-decoration: none;
  color: var(--color-primary);
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: 1.05rem;
}

.brand-sub {
  font-size: var(--text-fine);
  color: var(--color-text-muted);
}

.menu {
  display: none;
  gap: var(--space-lg);
}

.menu a {
  text-decoration: none;
  font-weight: 600;
  color: var(--color-text);
  padding-block: var(--space-3xs);
}

.menu a:hover,
.menu a:focus-visible {
  color: var(--color-primary);
}

/* Touch-Target-Mindestmass (WCAG 2.5.8, Hausmass 44px): im aufgeklappten
   Burger-Menue waren die fuenf Links bei 390px nur 37px hoch (padding-block
   3xs + Zeilenhoehe des Fliesstexts). min-height + vertikale Zentrierung
   greift bewusst nur hier, nicht im horizontalen Desktop-Menue (960px+),
   das braucht kein Touch-Mass und soll optisch kompakt bleiben. */
.menu.offen a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.menu.offen {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 50;
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-hairline-strong);
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  gap: var(--space-sm);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Spezifitaet bewusst .nav-cta .tel-link statt nur .tel-link: der
   Telefon-Link traegt zugleich die Klasse .btn (display: inline-flex,
   Komponenten-Block weiter unten). Gleiche Spezifitaet + spaetere
   Quellreihenfolge liesse .btn IMMER gewinnen, ganz gleich welche
   Breite — genau das war der Bug (→ Petra-Blocker 3, Button nie
   ausgeblendet, Header-Umbruch bei 390px). Ein zusaetzlicher
   Vorfahren-Selektor macht die Regel spezifischer, unabhaengig von
   der Position im File. */
.nav-cta .tel-link {
  display: none;
}

.burger {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-hairline-strong);
  flex-shrink: 0;
}

.burger svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 640px) {
  .nav-cta .tel-link {
    display: inline-flex;
  }
}

@media (min-width: 960px) {
  .menu {
    display: flex;
    position: static;
    flex-direction: row;
    background: none;
    border-bottom: 0;
    padding: 0;
  }

  .burger {
    display: none;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1.2;
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
}

.btn-outline {
  background: none;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.btn-ghost-on-dark {
  background: none;
  border-color: var(--color-on-primary);
  color: var(--color-on-primary);
}

.btn-ghost-on-dark:hover,
.btn-ghost-on-dark:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ---------- Hero ---------- */
/* Bild und Inhalt nebeneinander statt Text auf dem Foto — vermeidet
   das Kontrastrisiko von Schrift auf wechselndem Fotogrund und nutzt
   stattdessen die von Mira klar durchgerechneten Kontrastpaare fuer
   die dunkle Flaeche (Weiss/Muted-auf-Dunkel auf Primaer tief). */

.hero {
  border-bottom: 1px solid var(--color-hairline-strong);
}

.hero-inner {
  display: grid;
}

@media (min-width: 960px) {
  .hero-inner {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.hero-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content {
  background-color: var(--color-primary-deep);
  color: var(--color-on-primary);
  padding: var(--space-xl) var(--space-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .hero-content {
    padding: var(--space-2xl) var(--space-lg);
  }
}

.hero-content h1 {
  color: var(--color-on-primary);
}

.hero-content p {
  color: var(--color-text-muted-on-dark);
  max-width: 42ch;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-2xs);
}

/* ---------- Kurzueberblick (Positionierung) ---------- */
/* Titelkopf-Prinzip einer Bauzeichnung: Betrieb/Branche/Standort als
   Steckbrief, keine neue Behauptung — nur Wiederholung bereits
   freigegebener Werte (FIRMA/BRANCHE/ORT). Bewusst ohne eigene <h2>,
   da es kein neuer inhaltlicher Abschnitt ist, sondern eine Kurznotiz
   direkt am Hero; als eigenständiger Landmark trotzdem per aria-label
   fuer Screenreader auffindbar. */

.kurzueberblick {
  padding-block: var(--space-lg);
}

.steckbrief {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .steckbrief {
    grid-template-columns: repeat(3, 1fr);
  }
}

.steckbrief dt {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted);
}

.steckbrief dd {
  margin-top: var(--space-3xs);
  font-weight: 600;
}

/* ---------- Leistungen (Bild-Wechsel) ---------- */

.leistung-liste {
  margin-top: var(--space-lg);
}

.leistung-row {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-hairline-strong);
}

.leistung-row:last-child {
  border-bottom: 1px solid var(--color-hairline-strong);
}

@media (min-width: 768px) {
  .leistung-row {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-xl);
  }

  .leistung-row.umgekehrt .leistung-media {
    order: 2;
  }

  .leistung-row.umgekehrt .leistung-text {
    order: 1;
  }
}

.leistung-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.leistung-text .eyebrow {
  display: block;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}

.leistung-text h3 {
  margin-bottom: var(--space-2xs);
}

/* ---------- Bildstrecke "Aus der Werkstatt" ---------- */
/* Mischformat 3:2 / 2:3 / 1:1 / 1:1, bewusst nicht vereinheitlicht.
   Mobil: eine Spalte, jedes Bild in seinem echten Seitenverhaeltnis —
   das ist die Lösung fuer "zerfaellt bei 390px nicht" (kein Grid-
   Gefummel, einfach stapeln). Ab 768px zwei Spalten mit dem Hochformat
   ueber zwei Reihen, object-fit:cover uebernimmt den Rest. */

.bildstrecke-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.bs-item {
  overflow: hidden;
}

.bs-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bs-abbundhalle {
  aspect-ratio: 3 / 2;
}

.bs-kranhub {
  aspect-ratio: 2 / 3;
}

.bs-zapfen,
.bs-anriss {
  aspect-ratio: 1 / 1;
}

@media (min-width: 768px) {
  .bildstrecke-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }

  .bs-abbundhalle {
    grid-column: 1 / -1;
  }

  .bs-kranhub {
    grid-column: 1;
    grid-row: 2 / span 2;
    aspect-ratio: auto;
  }

  .bs-zapfen {
    grid-column: 2;
    grid-row: 2;
  }

  .bs-anriss {
    grid-column: 2;
    grid-row: 3;
  }
}

/* ---------- Ablauf ---------- */
/* Hier traegt die Haarlinie ausdruecklich die Struktur (Mira-Kommentar
   im Tokenblock) — deshalb --color-hairline-strong, nicht die rohe
   Haarlinie (1,2:1 waere hier praktisch unsichtbar). */

.ablauf-liste {
  margin-top: var(--space-lg);
}

.ablauf-liste li {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-hairline-strong);
}

.ablauf-liste li:last-child {
  border-bottom: 1px solid var(--color-hairline-strong);
}

@media (min-width: 768px) {
  .ablauf-liste {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }

  .ablauf-liste li {
    border-top: none;
    border-left: 1px solid var(--color-hairline-strong);
    padding: 0 var(--space-md);
  }

  .ablauf-liste li:last-child {
    border-bottom: none;
  }
}

.ablauf-liste .eyebrow {
  display: block;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}

.ablauf-liste h3 {
  margin-bottom: var(--space-2xs);
}

.ablauf-liste p {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

/* ---------- Der Betrieb ---------- */

.betrieb-inner {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .betrieb-inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-xl);
  }
}

.betrieb-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.betrieb-text p {
  margin-top: var(--space-sm);
}

/* ---------- Kontakt (rein typografisch, keine Karte) ---------- */

.kontakt-inner {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 900px) {
  .kontakt-inner {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-xl);
  }
}

.kontakt-liste {
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-md);
}

.kontakt-liste dt {
  font-size: var(--text-fine);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted);
  font-weight: 700;
}

.kontakt-liste dd {
  margin-top: var(--space-3xs);
}

.kontakt-liste a {
  text-decoration: none;
  font-weight: 600;
}

.kontakt-liste a:hover,
.kontakt-liste a:focus-visible {
  text-decoration-line: underline;
}

/* ---------- Formular ---------- */
/* Formularraender sind eine funktionale Linie (nicht dekorativ) und
   nutzen deshalb --color-hairline-strong statt der rohen Haarlinie. */

.formular {
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-md);
}

.feld {
  display: grid;
  gap: var(--space-3xs);
}

.feld label {
  font-weight: 600;
  font-size: var(--text-body-sm);
}

.feld input,
.feld textarea {
  border: 1px solid var(--color-hairline-strong);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-background);
}

.feld textarea {
  resize: vertical;
  min-height: 8rem;
}

.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.feld-fehler {
  min-height: 1.2em;
  font-size: var(--text-fine);
  color: var(--color-danger-text);
}

/* Honeypot: absichtlich NICHT display:none. Manche Bots ueberspringen
   Felder, die per display:none oder visibility:hidden versteckt sind,
   weil genau das als Erkennungsmerkmal fuer Honeypots gilt — ein simples
   Skript, das jedes <input> im DOM ausfuellt, tappt trotzdem hinein,
   weil das Feld layouttechnisch existiert. Fuer Menschen ist es
   trotzdem nie sichtbar (Positionierung weit ausserhalb des Viewports)
   und nie erreichbar: aria-hidden nimmt es aus dem Accessibility-Tree,
   tabindex="-1" nimmt es aus der Tab-Reihenfolge — die Kombination ist
   zulaessig, weil dadurch kein fokussierbares Element im a11y-Baum
   uebrig bleibt (sonst waere aria-hidden auf einem fokussierbaren
   Element ein Verstoss gegen WCAG 4.1.2). autocomplete="off" verhindert
   zusaetzlich, dass ein Passwort-Manager es fuer echte Besucher befuellt. */
.hp-feld {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular-hinweis {
  min-height: 1.5em;
  font-weight: 600;
}

.noscript-hinweis {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--color-hairline-strong);
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

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

footer {
  background-color: var(--color-primary-deep);
  color: var(--color-on-primary);
  padding-block: var(--space-2xl) var(--space-lg);
}

.footer-grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer-grid h2 {
  color: var(--color-on-primary);
  font-size: var(--text-display-3);
}

.footer-grid p,
.footer-grid address {
  color: var(--color-text-muted-on-dark);
  font-style: normal;
  margin-top: var(--space-2xs);
}

.footer-grid a {
  color: var(--color-on-primary);
  text-decoration: none;
}

.footer-grid a:hover,
.footer-grid a:focus-visible {
  text-decoration-line: underline;
}

.footer-legal h3 {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted-on-dark);
  margin-bottom: var(--space-2xs);
}

.footer-bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted-on-dark);
}

.footer-bottom a {
  color: var(--color-text-muted-on-dark);
  text-decoration-line: underline;
}

.fiktiv {
  display: block;
  margin-top: var(--space-md);
  font-size: var(--text-fine);
  color: var(--color-text-muted-on-dark);
}

/* ---------- Fokusring auf dunklen Flaechen ---------- */
/* Der globale Ring (--color-focus-ring = Primaer #123e46, Reset oben)
   ist fuer helle Flaechen berechnet (≥8,97:1). Auf den drei dauerhaft
   dunklen Flaechen der Seite (Demo-Balken, Hero-Inhalt, Footer — alle
   auf Primaer tief #0b2b31) ergibt derselbe Ring nur 1,28:1, also
   praktisch unsichtbar bei Tastaturfokus. Der helle Gegenpart liegt
   dafuer bereits als Token bereit (--color-focus-ring-on-dark, siehe
   Tokenblock oben, 14,96:1) und wird hier fuer alle Links in diesen
   drei Bereichen re-deklariert. Der Formular-Submit-Button ist nicht
   betroffen: sein Ring liegt per outline-offset auf der hellen
   Formularflaeche, nicht auf dunklem Grund. */
.demo-bar a:focus-visible,
.hero-content a:focus-visible,
footer a:focus-visible {
  outline-color: var(--color-focus-ring-on-dark);
}

/* ---------- Rechtsseiten (Impressum/Datenschutz) ---------- */

.rechtstext {
  max-width: 68ch;
}

.rechtstext h2 {
  margin-top: var(--space-xl);
}

.rechtstext h2:first-child {
  margin-top: 0;
}

.rechtstext h3 {
  margin-top: var(--space-lg);
}

.rechtstext p,
.rechtstext address,
.rechtstext ul {
  margin-top: var(--space-sm);
  font-style: normal;
}

.rechtstext ul {
  padding-left: 1.2em;
  list-style: disc;
}

.hinweisbox {
  border: 1px solid var(--color-hairline-strong);
  background-color: var(--color-surface);
  padding: var(--space-md);
  margin-bottom: var(--space-xl);
}

.hinweisbox p {
  margin-top: 0;
}

.platzhalter {
  border: 1px dashed var(--color-hairline-strong);
  padding: var(--space-sm);
  display: inline-block;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}