/* ---------- 1. Schriften ---------- */
/* Archivo und Barlow Condensen unter SIL Open Font License, lokal ausgeliefert. */

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

@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../fonts/barlow-condensed-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('../fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); }

/* ---------- 2. Tokens ---------- */

:root {
  --c-brand: #277098;
  --c-brand-hover: #3387B4;
  --c-accent: #62A9D1;
  --c-accent-hover: #8CC4E4;
  --c-bg: #0A0D11;
  --c-surface: #0D1218;
  --c-card: #10151B;
  --c-card-hover: #141C25;
  --c-cell-hover: #131A22;
  --c-white: #FFFFFF;
  --c-text: #E8EDF2;
  --c-text-2: #9FADBA;
  --c-text-3: #8A97A5;
  --c-text-4: #7C8895;
  --c-text-5: #63707E;
  --c-nav: #B7C2CD;
  --c-on-accent: #08121A;
  --c-status: #5FD08A;

  --hairline: rgba(255, 255, 255, .07);
  --hairline-strong: rgba(255, 255, 255, .09);
  --hairline-card: rgba(255, 255, 255, .10);
  --border-btn: rgba(255, 255, 255, .22);
  --border-chip: rgba(255, 255, 255, .15);
  --border-field: rgba(255, 255, 255, .22);

  --f-sans: 'Archivo', system-ui, sans-serif;
  --f-cond: 'Barlow Condensed', 'Archivo', system-ui, sans-serif;

  --wrap: 1560px;
  --pad-x: 56px;
  --header-h: 132px;
}

/* ---------- 3. Basis ---------- */

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

html { scroll-behavior: smooth; }

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

h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -.022em; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--c-accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--c-accent-hover); }

:focus-visible { outline: 2px solid #62A9D1; outline-offset: 2px; }

[id] { scroll-margin-top: var(--header-h); }

mark.todo { background: #FFE58A; color: #1B1B1B; padding: 0 4px; }

/* ---------- 4. Layout-Primitive ---------- */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad-x); }

.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-cond); font-size: 13px; text-transform: uppercase;
  letter-spacing: .18em; color: var(--c-accent); margin-bottom: 28px;
}
.eyebrow__rule { width: 34px; height: 1px; background: var(--c-accent); }
.eyebrow--on-brand { color: rgba(255, 255, 255, .7); }

.sec__head { display: flex; justify-content: space-between; gap: 48px; align-items: flex-end; }
.sec__head--baseline { align-items: baseline; }
.sec__h { font-size: 42px; font-weight: 700; color: var(--c-white); max-width: 620px; }
.sec__p { font-size: 16px; color: var(--c-text-3); max-width: 420px; }

/* ---------- 5. Buttons ---------- */

.btn {
  display: inline-block; border: 1px solid transparent; cursor: pointer;
  font-family: var(--f-sans); text-align: center; transition: background .2s, border-color .2s, color .2s;
}
.btn--brand {
  background: var(--c-brand); color: var(--c-white);
  padding: 11px 20px; font-size: 15px; font-weight: 600;
}
.btn--brand:hover { background: var(--c-brand-hover); color: var(--c-white); }
.btn--accent {
  background: var(--c-accent); color: var(--c-on-accent);
  padding: 15px 26px; font-size: 16px; font-weight: 700;
}
.btn--accent:hover { background: var(--c-accent-hover); color: var(--c-on-accent); }
.btn--ghost {
  background: transparent; border-color: var(--border-btn); color: var(--c-text);
  padding: 15px 26px; font-size: 16px; font-weight: 700;
}
.btn--ghost:hover { border-color: var(--c-accent); color: var(--c-text); }
.btn--full { display: block; width: 100%; padding: 15px 22px; }

/* ---------- 6. Utility-Leiste ---------- */

.util { background: var(--c-surface); border-bottom: 1px solid var(--hairline); }
.util__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; height: 46px; font-size: 13px; color: var(--c-text-3);
}
.util__left { display: flex; align-items: center; gap: 10px; }
.util__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-status); }
.util__right { display: flex; align-items: center; gap: 14px; }
.util__label {
  font-family: var(--f-cond); font-size: 12px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--c-accent);
}
.util__phone { font-weight: 600; color: var(--c-text); }
.util__phone:hover { color: var(--c-accent-hover); }

.lang { display: flex; border: 1px solid rgba(255, 255, 255, .14); }
.lang__on, .lang__off {
  padding: 5px 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  transition: background .2s, color .2s;
}
.lang__on { background: var(--c-accent); color: #0A0D11; }
.lang__off { color: var(--c-text-3); }
.lang__off:hover { color: var(--c-white); }

/* ---------- 7. Header ---------- */

.hdr {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10, 13, 17, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.hdr__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 24px; }
.hdr__logo img { height: 84px; width: auto; }
.hdr__burger { display: none; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav__link { font-size: 15px; font-weight: 500; color: var(--c-nav); }
.nav__link:hover { color: var(--c-white); }
/* .nav--home beschraenkt die "aktiv"-Auszeichnung auf die Startseite
   (Abschlusspruefung, Punkt 13) -- header.js setzt den Modifier nur, wenn
   ctx.isHome wahr ist. Welcher Link "is-current" traegt, ermittelt site.js
   per IntersectionObserver anhand der sichtbaren Sektion (siehe dort); ohne
   Skript bleibt kein Link ausgezeichnet. Auf Rechtsseiten und der 404-Seite
   fehlen die beobachteten Sektionen ganz, dort bekommt also nie ein Link
   die Klasse. */
.nav--home .nav__link.is-current { color: var(--c-white); border-bottom: 2px solid var(--c-accent); }

/* ---------- 8. Footer ---------- */

.foot { background: var(--c-surface); }
.foot__inner {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
  padding-top: 56px; padding-bottom: 32px;
}
.foot__logo img { height: 72px; width: auto; }
.foot__p { margin-top: 20px; max-width: 320px; font-size: 14px; color: var(--c-text-4); }
.foot__h {
  font-family: var(--f-cond); font-size: 12px; font-weight: 400; text-transform: uppercase;
  letter-spacing: .14em; color: var(--c-accent); margin-bottom: 16px;
}
.foot__list { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--c-text-2); }
.foot__bar {
  display: flex; justify-content: space-between; gap: 22px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  /* #7C8895 statt --c-text-5 (#63707E): 5,20:1 statt 3,72:1 gegen den
     Fusszeilenhintergrund -- erfuellt WCAG AA (4,5:1) fuer 13px-Text
     (Abschlusspruefung, Punkt 5). */
  padding-top: 18px; padding-bottom: 26px; font-size: 13px; color: #7C8895;
}
.foot__legal { display: flex; flex-wrap: wrap; gap: 22px; }
.foot__legal a { color: #7C8895; }
.foot__legal a:hover { color: var(--c-accent-hover); }

/* ---------- 9. Bewegung abschalten ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- 10. Hero ---------- */

.hero { padding-top: 88px; padding-bottom: 56px; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 72px; align-items: end; }
.hero__h1 { font-size: 82px; line-height: 1; letter-spacing: -.03em; font-weight: 700; }
.hero__h1a { color: var(--c-white); }
.hero__h1b { color: var(--c-accent); }
.hero__p { font-size: 18px; line-height: 1.55; color: var(--c-text-2); }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- 11. Branchenleiste ---------- */

.ind { background: var(--c-surface); border-top: 1px solid var(--hairline); }
.ind__grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.ind__cell {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 22px 28px; border-right: 1px solid var(--hairline);
  transition: background .2s;
}
.ind__cell:last-child { border-right: 0; }
.ind__cell:hover { background: var(--c-cell-hover); }
.ind__no { font-family: var(--f-cond); font-size: 12px; letter-spacing: .16em; color: var(--c-accent); }
.ind__name { font-family: var(--f-cond); font-size: 22px; font-weight: 600; color: var(--c-white); }
.ind__note { font-size: 13px; color: var(--c-text-4); }

/* ---------- 12. Kennzahlen ---------- */

.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat {
  display: flex; align-items: baseline; gap: 18px;
  padding: 34px 24px 36px; border-right: 1px solid var(--hairline);
}
.stat:last-child { border-right: 0; }
.stat__v { font-family: var(--f-cond); font-size: 52px; font-weight: 700; line-height: .9; color: var(--c-white); }
.stat__l { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--c-text-3); }

/* ---------- 13. Geschäftsfelder ---------- */

.pil { padding-top: 88px; padding-bottom: 92px; }
.pil__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin-top: 48px; background: var(--hairline-strong); border: 1px solid var(--hairline-strong);
}
.pil__card {
  display: flex; flex-direction: column; background: var(--c-card);
  padding: 36px 32px 32px; min-height: 310px; transition: background .2s;
}
.pil__card:hover { background: var(--c-card-hover); }
.pil__top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.pil__no { font-family: var(--f-cond); font-size: 15px; letter-spacing: .14em; color: var(--c-accent); }
.pil__rule { width: 30px; height: 1px; background: var(--hairline-card); }
.pil__h { font-size: 25px; font-weight: 700; color: var(--c-white); margin-bottom: 14px; }
.pil__p { font-size: 15px; color: var(--c-text-2); }
.pil__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 24px; }
.chip { border: 1px solid var(--border-chip); padding: 6px 11px; font-size: 13px; color: var(--c-nav); }

/* ---------- 14. Maschinenprogramm ---------- */

.prog { padding-bottom: 92px; }
.prog__rows { display: flex; flex-direction: column; gap: 1px; margin-top: 40px; background: var(--hairline-strong); }
.prog__row { display: grid; grid-template-columns: 260px 1fr; gap: 40px; padding: 30px 0 32px; background: var(--c-bg); }
.prog__key { font-family: var(--f-cond); font-size: 13px; letter-spacing: .16em; color: var(--c-accent); }
.prog__h { font-size: 22px; font-weight: 600; color: var(--c-white); margin: 8px 0 10px; }
.prog__note { font-size: 14px; color: var(--c-text-4); }
.prog__machines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.prog__machine {
  border: 1px solid var(--hairline-card); background: var(--c-card);
  padding: 20px 22px; transition: border-color .2s;
}
.prog__machine:hover { border-color: var(--c-accent); }
.prog__name { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.prog__name > span:first-child { font-family: var(--f-cond); font-size: 23px; font-weight: 600; color: var(--c-white); }
.prog__arrow { font-size: 18px; color: var(--c-accent); }
.prog__desc { margin-top: 8px; font-size: 14px; color: var(--c-text-3); }

/* ---------- 15. Serviceband ---------- */

.svc { background: var(--c-brand); }
.svc__inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: center; padding-block: 64px; }
.svc__h { font-size: 40px; font-weight: 700; color: var(--c-white); max-width: 560px; margin-bottom: 18px; }
.svc__p { font-size: 16px; color: rgba(255, 255, 255, .84); }
.svc__card { background: #0A0D11; padding: 30px 32px; }
.svc__label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--c-accent); }
.svc__phone { font-family: var(--f-cond); font-size: 42px; font-weight: 700; line-height: 1.1; margin: 6px 0 4px; }
.svc__phone a { color: var(--c-white); }
.svc__phone a:hover { color: var(--c-accent-hover); }
.svc__note { font-size: 14px; color: var(--c-text-3); margin-bottom: 22px; }

/* ---------- 16. Unternehmen ---------- */

.her__inner { display: grid; grid-template-columns: 1fr 1fr; }
.her__left { padding: 72px var(--pad-x); border-right: 1px solid var(--hairline); }
.her__num { font-family: var(--f-cond); font-size: 104px; font-weight: 700; line-height: .9; color: var(--c-white); }
.her__p { margin-top: 24px; font-size: 17px; color: var(--c-text-2); max-width: 560px; }
.her__rows { display: flex; flex-direction: column; gap: 1px; background: var(--hairline); }
.her__row { display: flex; align-items: center; gap: 24px; background: #0A0D11; padding: 22px 26px; flex: 1; }
/* 26px/700 statt 15px/400: die Kennzahl war kleiner als ihre eigene
   Erklaerung (.her__v, 16px) und trug ihre Bedeutung nur ueber die Farbe --
   jetzt steht sie sichtbar ueber dem Erklaerungstext. letter-spacing auf
   .01em verengt: .14em ist fuer kleine Versalien-Beschriftungen gedacht und
   zerlegt eine vierstellige Jahreszahl optisch. tabular-nums haelt die vier
   Werte auf gleicher Ziffernbreite untereinander. min-width 56px: "1938" bei
   26px/700/tabular-nums misst real ca. 52.8px (gemessen per Chromium-Layout,
   siehe Buildbericht) -- 56px lassen etwas Luft. line-height: 1 statt der
   geerbten 1.55, damit die grosse Zahl nicht durch ueberschuessige Zeilenhoehe
   optisch von der danebenstehenden Erklaerung abrueckt. */
.her__k {
  font-family: var(--f-cond); font-size: 26px; font-weight: 700; line-height: 1;
  letter-spacing: .01em; font-variant-numeric: tabular-nums;
  color: var(--c-accent); min-width: 56px;
}
.her__v { font-size: 16px; color: var(--c-nav); }

/* ---------- 17. Kontakt und Formular ---------- */

.ct { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
      padding-top: 88px; padding-bottom: 92px; }
.ct__p { margin: 18px 0 32px; font-size: 17px; color: var(--c-text-2); }
/* Zweispaltiges Raster statt fester min-width auf .ct__k: Spalte 1
   (max-content) richtet sich automatisch an der breitesten Beschriftung aus,
   Spalte 2 (1fr) nimmt den Rest ein -- haelt auch, wenn "ANSPRECHPARTNER"
   breiter ist als "TELEFON" & Co., in der englischen Fassung anders breite
   Woerter stehen, oder spaeter eine weitere Zeile dazukommt. .ct__row wird
   per display:contents aufgeloest, damit seine beiden Kinder (.ct__k/.ct__v)
   direkt als Gitterzellen von .ct__rows zaehlen, statt als eigene Zeile
   ausserhalb des Rasters zu stehen. */
.ct__rows { display: grid; grid-template-columns: max-content 1fr; column-gap: 16px; row-gap: 14px; }
.ct__row { display: contents; }
.ct__k { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--c-text-4); }
.ct__v { font-size: 15px; color: var(--c-text); }

.form {
  display: flex; flex-direction: column; gap: 18px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-top: 3px solid var(--c-accent);
  background: var(--c-card-hover); padding: 34px 34px 30px;
}
/* Eigener Auftakt der Karte -- optisch wie .eyebrow (Barlow Condensed, 13px,
   Versalien, gleicher Farbton), aber ohne den 34px-Strich und ohne eigenes
   margin-bottom: der Abstand zum Statusbereich darunter kommt allein aus dem
   flex-gap von .form (18px), bewusst kleiner als die 28px von .eyebrow. */
.form__eyebrow {
  font-family: var(--f-cond); font-size: 13px; text-transform: uppercase;
  letter-spacing: .18em; color: var(--c-accent);
}
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__hint { font-size: 13px; color: var(--c-text-4); }
.form__status:empty { display: none; }
.form__msg { padding: 14px 16px; font-size: 15px; }
.form__msg--ok { border: 1px solid var(--c-accent); color: var(--c-text); }
.form__msg--err { border: 1px solid #E4737A; color: var(--c-text); }
.form__msg h2 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--c-text-4); }
.field__input, .field__area {
  width: 100%; border: 1px solid var(--border-field); background: #0A0D11;
  color: var(--c-text); font-family: var(--f-sans); font-size: 15px;
  padding: 0 12px; height: 44px; transition: border-color .2s;
}
.field__area { height: 110px; padding: 12px; resize: vertical; }
.field__input:focus, .field__area:focus { border-color: var(--c-accent); }
.field__err { font-size: 13px; color: #E4737A; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Hinweis unter dem Absendeknopf, dass mit dem Absenden die Verarbeitung
   nach der Datenschutzerklaerung erfolgt -- gleiche Groesse/Farbe wie
   .form__hint, die andere Hilfstext-Zeile im Formular. margin-top ergaenzt
   den Flex-gap des .form-Containers um zusaetzlichen Abstand zum Knopf
   darueber. */
.form__note { font-size: 13px; color: var(--c-text-4); margin-top: 8px; }

/* ---------- 18. Rechtsseiten und 404 ---------- */

.legal { padding-top: 72px; padding-bottom: 92px; max-width: 860px; }
.legal__h1 { font-size: 42px; font-weight: 700; color: var(--c-white); margin-bottom: 32px; }
.legal h2 { font-size: 20px; font-weight: 700; color: var(--c-white); margin: 32px 0 10px; }
.legal p { font-size: 16px; color: var(--c-text-2); }
.legal__note { margin-top: 40px; }

.nf { padding-top: 96px; padding-bottom: 120px; max-width: 720px; }
.nf__h { font-size: 42px; font-weight: 700; color: var(--c-white); margin-bottom: 16px; }
.nf__p { font-size: 17px; color: var(--c-text-2); }
.nf__back { margin-top: 24px; }
.nf__rule { border: 0; border-top: 1px solid var(--hairline); margin: 48px 0; }

/* ---------- 19. Responsive ---------- */

@media (max-width: 1199px) {
  /* --header-h: 133px statt 120px (Abschlusspruefung, Punkt 7): die
     Kopfzeile misst in diesem Bereich (900-1199px) tatsaechlich 133px --
     mit 120px landeten Ankersprünge (scroll-margin-top: var(--header-h))
     13px zu tief unter dem sticky Header. */
  :root { --pad-x: 32px; --header-h: 133px; }

  .hero__grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .hero__h1 { font-size: 56px; }
  .ind__grid { grid-template-columns: repeat(3, 1fr); }
  .ind__cell:nth-child(3n) { border-right: 0; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: 0; }
  .pil__grid { grid-template-columns: repeat(2, 1fr); }
  .prog__row { grid-template-columns: 200px 1fr; gap: 28px; }
  .prog__machines { grid-template-columns: 1fr; }
  .svc__inner { grid-template-columns: 1fr; gap: 36px; }
  .ct { grid-template-columns: 1fr; gap: 40px; }
  .foot__inner { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 899px) {
  :root { --header-h: 104px; }

  .hero__h1 { font-size: 40px; }
  .sec__h, .legal__h1, .nf__h { font-size: 30px; }
  .sec__head { flex-direction: column; align-items: flex-start; gap: 16px; }

  .util__inner { height: auto; padding-block: 8px; gap: 12px; }
  .util__left { display: none; }
  .util__label { display: none; }
  .lang__on, .lang__off { padding: 12px 16px; }

  .hdr__inner { padding-block: 14px; flex-wrap: wrap; }
  .hdr__logo img { height: 56px; }
  .hdr__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px;
    background: transparent; border: 1px solid var(--border-btn); cursor: pointer;
  }
  .hdr__burger span { display: block; height: 2px; background: var(--c-text); }
  .nav {
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    width: 100%; margin-top: 12px; border-top: 1px solid var(--hairline);
  }
  .nav.is-open { display: flex; }
  .nav__link {
    display: block; padding: 14px 0; font-size: 16px;
    border-bottom: 1px solid var(--hairline);
  }
  /* Kein gesonderter Reset mehr noetig: die Auszeichnung des aktiven Punkts
     haengt nicht mehr an :first-child, sondern an der Klasse, die site.js
     der sichtbaren Sektion zuordnet. Deren hoehere Spezifitaet (zwei Klassen
     vor der Nav-Ebene) ersetzt hier lediglich die 1px-Trennlinie des aktiven
     Eintrags durch die 2px-Akzentlinie -- die Liste bleibt dadurch genauso
     lesbar, der aktive Punkt sticht zusaetzlich hervor, es entsteht keine
     Kollision zweier Linien. */
  .nav .btn { margin-top: 14px; padding: 14px 20px; }

  .ind__grid { grid-template-columns: 1fr; }
  .ind__cell { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .pil__grid { grid-template-columns: 1fr; }
  .pil__card { min-height: 0; }
  .prog__row { grid-template-columns: 1fr; gap: 20px; }
  .her__inner { grid-template-columns: 1fr; }
  .her__left { border-right: 0; border-bottom: 1px solid var(--hairline); padding: 48px var(--pad-x); }
  .her__num { font-size: 72px; }
  .svc__phone { font-size: 34px; }
  .form { padding: 24px 20px; }
  .form__grid { grid-template-columns: 1fr; }
  .foot__inner { grid-template-columns: 1fr; }
  .foot__bar { flex-direction: column; gap: 12px; }

  /* Ohne JavaScript gibt es keinen Umschalter — dann bleibt die Navigation offen,
     statt unerreichbar zu sein. site.js setzt .js auf <html> und aktiviert das Menü. */
  html:not(.js) .nav { display: flex; }
  html:not(.js) .hdr__burger { display: none; }
}