@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  /* Dunkle Flaechen bewusst sehr dunkel: das Logo besteht aus duennen weissen
     Outline-Buchstaben, die auf mittlerem Grau absaufen. */
  --coal: #101315;
  --coal-2: #08090b;
  --coal-3: #1d2225;
  --text: #23262a;
  --bone: #f6f4f1;
  --bone-2: #eae6e0;
  --paper: #ffffff;
  --line: #d9d4cc;
  --line-dark: rgba(255,255,255,.14);
  --muted: #6d6a64;
  --red: #d40c1b;
  --red-deep: #a80915;
  --brass: #c69018;

  --wrap: 1220px;
  --gut: 24px;

  /* Radien bewusst klein: die Seite soll ruhiger wirken, nicht verspielt.
     --r fuer Knoepfe und Felder, --r-lg fuer Flaechen und Bilder. */
  --r: 7px;
  --r-lg: 12px;

  /* Schatten sehr flach und warm getoent, damit Karten sich vom Untergrund
     abheben, ohne dass ein harter Rahmen entsteht. */
  --shadow-1: 0 1px 2px rgba(16,19,21,.05), 0 2px 8px rgba(16,19,21,.04);
  --shadow-2: 0 2px 4px rgba(16,19,21,.05), 0 14px 30px rgba(16,19,21,.09);

  /* Ein einziges Easing fuer alles, was sich bewegt. Gleiche Kurve heisst
     gleiches Tempogefuehl ueber die ganze Seite. */
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--text);
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-variation-settings: "wdth" 100;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

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

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 400; overflow-wrap: break-word; }

/* "Datenschutzerklaerung" passt auf einem 320px-Display in keine Zeile und
   schiebt die Seite seitlich heraus. Nur auf den Rechtsseiten trennen lassen,
   sonst zerlegt der Browser auch kurze Ueberschriften ohne Not. */
@media (max-width: 560px) {
  .legal h1, .legal h2 { hyphens: auto; }
}

.display {
  font-variation-settings: "wdth" 116, "wght" 700;
  letter-spacing: -0.022em;
  line-height: 1.03;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
}
.h2 {
  font-variation-settings: "wdth" 112, "wght" 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
}
.h3 {
  font-variation-settings: "wdth" 104, "wght" 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-size: 1.2rem;
}

.eyebrow {
  font-variation-settings: "wdth" 72, "wght" 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  flex: none;
}

.lede { font-size: 1.12rem; color: var(--muted); max-width: 54ch; }
.data {
  font-variation-settings: "wdth" 74, "wght" 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
}

/* ---------- sections ---------- */
/* Die Abschnitte wechseln weiss, bone, coal. Ohne Hilfe entsteht dabei an jeder
   Naht eine harte Kante. Die hellen Flaechen bekommen deshalb oben einen
   kurzen Verlauf in den Ton des Vorgaengers, die dunklen einen Verlauf in die
   Tiefe. Der Rhythmus bleibt, die Naht verschwindet. */
.section { padding: clamp(56px, 8vw, 108px) 0; }
.section--bone {
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 180px),
    var(--bone-2);
}
.section--paper {
  background:
    linear-gradient(180deg, rgba(234,230,224,.6), rgba(234,230,224,0) 160px),
    var(--paper);
}
.section--coal {
  background:
    linear-gradient(180deg, var(--coal-2), rgba(8,9,11,0) 220px),
    radial-gradient(120% 130% at 15% 0%, rgba(255,255,255,.05), rgba(255,255,255,0) 58%),
    var(--coal);
  color: #fff;
}
.section--coal .lede { color: rgba(255,255,255,.66); }
.section--coal .eyebrow { color: var(--brass); }
.section--tight { padding-top: clamp(34px, 5vw, 58px); }

.head { max-width: 60ch; margin-bottom: clamp(30px, 4vw, 50px); }
.head--wide { max-width: 74ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font: inherit;
  font-variation-settings: "wdth" 96, "wght" 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease,
              box-shadow .22s ease, transform .22s var(--ease);
}
.btn--primary { background: var(--red); color: #fff; box-shadow: 0 1px 2px rgba(168,9,21,.28); }
.btn--primary:hover { background: var(--red-deep); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(168,9,21,.26); }
.btn--ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: #bfb8ad; background: rgba(16,19,21,.035); transform: translateY(-1px); }
.section--coal .btn--ghost,
.hero .btn--ghost { border-color: rgba(255,255,255,.26); color: #fff; }
.section--coal .btn--ghost:hover,
.hero .btn--ghost:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.07); }
/* Beim Druck zurueck auf die Grundhoehe, sonst fehlt die Rueckmeldung. */
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(16,19,21,.2); }
.btn__arrow { transition: transform .22s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* Auf sehr schmalen Displays darf die Beschriftung umbrechen, sonst steht der
   Knopf breiter da als das Display. */
@media (max-width: 420px) { .btn { white-space: normal; padding: 13px 20px; } }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__arrow { transition: background .22s ease, border-color .22s ease; }
  .btn:hover, .btn:active { transform: none; }
  .btn:hover .btn__arrow { transform: none; }
}

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* ---------- header ---------- */
/* Kopfzeile bleibt flach --coal: das weisse Outline-Logo braucht den dunkelsten
   Untergrund. Die Kante nach unten macht nur eine Haarlinie, kein Verlauf. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--coal);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.07);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 74px;
}
/* flex: none, damit das Logo im Kopf nie gestaucht wird. Ohne das schrumpft
   der Flex-Nachbar das Bild auf schmalen Displays und verzerrt es. */
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 30px; width: auto; max-width: none; }
/* Nur die Hoehe anfassen, Breite bleibt auto: so schrumpft das Logo
   massstabsgetreu statt gestaucht zu werden. */
@media (max-width: 400px) {
  .brand img { height: 20px; }
  .site-header__bar { gap: 12px; }
}
.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
  color: rgba(255,255,255,.74);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.nav a:hover { color: #fff; border-bottom-color: var(--red); }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--red); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.header-tel { text-decoration: none; font-size: 15px; white-space: nowrap; color: rgba(255,255,255,.74); }
.header-tel:hover { color: #fff; }
.nav-toggle { display: none; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }

/* Zwischenstufe: E-Mail im Kopf weglassen, bevor das Menü einklappt */
@media (max-width: 1240px) {
  .header-tel { display: none; }
  .nav { gap: 20px; }
  .site-header .btn { padding: 12px 20px; }
}

@media (max-width: 1040px) {
  .nav {
    display: none;
    position: absolute;
    inset: 74px 0 auto;
    background: var(--coal);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px var(--gut) 24px;
    border-top: 1px solid var(--line-dark);
    box-shadow: 0 20px 34px rgba(0,0,0,.34);
  }
  .nav.is-open { display: flex; }
  .nav a { width: 100%; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav a:hover { border-bottom-color: rgba(255,255,255,.08); }
  .header-tel { display: none; }
  .nav-toggle { display: block; }
}

/* Auf schmalen Displays bleibt der Knopf im Kopf stehen, aber nur mit dem Wort
   "Anfrage". Der Platz dafuer kommt aus den Abstaenden und der Beschriftung,
   nie aus dem Logo: das weisse Outline-Logo vertraegt kein Stauchen.
   Rechnung bei 375px Breite: Rand 2x16, Logo 191, Knopf 71, Menuetaste 40,
   Abstaende 10+10. Das passt bis hinunter zu rund 360px. */
@media (max-width: 640px) {
  /* Schmalerer Seitenrand auf dem Handy. Gilt fuer die ganze Seite, damit
     Kopfzeile und Inhalt weiter buendig stehen. */
  :root { --gut: 16px; }
  .site-header__bar { height: 66px; gap: 10px; }
  .nav { inset: 66px 0 auto; }
  .site-header .btn { padding: 10px 14px; font-size: 14px; white-space: nowrap; }
  .header-actions { gap: 10px; }
  .nav-toggle { padding: 8px 0 8px 4px; }
}

/* Unter 350px reicht der Platz nicht mehr. Dann faellt der Knopf wieder weg,
   der Weg zum Kontakt steht im aufgeklappten Menue. */
@media (max-width: 349px) {
  .site-header .btn { display: none; }
}

/* ---------- hero ---------- */
/* Nur ein Schimmer nach rechts oben, wo das Produktbild sitzt. Links oben
   bleibt exakt --coal, sonst entsteht eine sichtbare Naht zur Kopfzeile und
   das weisse Outline-Logo verliert seinen Untergrund. */
.hero {
  background:
    radial-gradient(115% 95% at 82% 6%, rgba(255,255,255,.06), rgba(255,255,255,0) 62%),
    var(--coal);
  color: #fff;
  padding: clamp(44px, 5vw, 76px) 0 clamp(52px, 6vw, 88px);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
/* Unterseiten ohne Bild: eine Spalte, sonst sitzt der Text in der schmalen
   Bildspalte fest. */
@media (min-width: 960px) {
  .hero--plain .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero--plain .hero__lede { max-width: 62ch; }
}
/* Im zweispaltigen Hero steht die Ueberschrift in rund 500px Breite, nicht in
   der vollen Seitenbreite. Bei der vollen --display-Groesse passt dort ein
   langes Wort wie "Leuchtstreifen," nicht mehr in eine Zeile; die globale
   Regel overflow-wrap: break-word zerlegt es dann mitten im Wort. Deshalb
   bekommt der Bild-Hero eine eigene, kleinere Staffelung. Wer die Groesse
   wieder anhebt, muss das laengste Wort aller Hero-Ueberschriften gegen die
   Spaltenbreite pruefen. */
@media (min-width: 960px) {
  .hero:not(.hero--plain) .display { font-size: clamp(2.3rem, 3.9vw, 3.3rem); }
}
/* Unter 380px traegt auch die einspaltige Fassung nicht mehr: 272px Zeile
   gegen ein 310px breites Wort. Gleiche Stufe wie die Logohoehe im Kopf. */
@media (max-width: 380px) {
  .hero .display { font-size: 2rem; }
}
.hero .eyebrow { color: #fff; }
.hero h1 { margin-bottom: 20px; }
.hero__lede { color: rgba(255,255,255,.7); font-size: 1.14rem; max-width: 46ch; }
.hero__shot { position: relative; }
.hero__shot img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
.hero__cap {
  margin-top: 12px;
  font-variation-settings: "wdth" 74, "wght" 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

/* ---------- facts strip ---------- */
.strip {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 60%),
    var(--coal-2);
  color: #fff;
}
.strip__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.strip__row li {
  padding: 22px 24px;
  border-right: 1px solid var(--line-dark);
}
.strip__row li:last-child { border-right: 0; }
.strip__val {
  display: block;
  font-variation-settings: "wdth" 110, "wght" 700;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.strip__lab {
  display: block;
  margin-top: 4px;
  font-variation-settings: "wdth" 74, "wght" 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

/* ---------- split: image beside text ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--wide-img { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .split--flip .split__media { order: 2; }
}
.split__media img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.section--coal .split__media img { box-shadow: 0 16px 40px rgba(0,0,0,.32); }
.split__cap {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
.section--coal .split__cap { color: rgba(255,255,255,.45); }
.split__body p { color: var(--muted); }
.section--coal .split__body p { color: rgba(255,255,255,.66); }

/* ---------- plain fact list (no false numbering) ---------- */
.facts { border-top: 1px solid var(--line); }
.section--coal .facts { border-top-color: var(--line-dark); }
.fact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.section--coal .fact { border-bottom-color: var(--line-dark); }
@media (min-width: 800px) { .fact { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: baseline; } }
.fact__title { font-variation-settings: "wdth" 104, "wght" 600; font-size: 1.1rem; }
.fact__text { color: var(--muted); margin: 0; }
.section--coal .fact__text { color: rgba(255,255,255,.62); }

/* ---------- service rows (a real sequence) ---------- */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 800px) { .row { grid-template-columns: 52px 250px minmax(0, 1fr); gap: 28px; align-items: baseline; } }
.row__no { color: var(--red); font-variation-settings: "wdth" 74, "wght" 600; font-size: 13px; letter-spacing: .1em; }
.row__title { font-variation-settings: "wdth" 104, "wght" 600; font-size: 1.1rem; }
.row__text { color: var(--muted); margin: 0; }

/* ---------- application cards ---------- */
/* Feste Spaltenzahl statt auto-fit: sechs Karten sollen die Reihen restlos
   füllen, sonst bleibt in der letzten Reihe eine Luecke stehen. */
.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
@media (min-width: 620px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-1);
  transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: #cfc8bd; }
.section--bone .card { background: var(--bone); }
.card__kicker {
  color: var(--red);
  font-variation-settings: "wdth" 74, "wght" 600;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.card h3 { margin: 12px 0 10px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
@media (prefers-reduced-motion: reduce) {
  .card { transition: box-shadow .3s ease, border-color .3s ease; }
  .card:hover { transform: none; }
}

/* ---------- spec + model tables ---------- */
/* minmax(0, …) statt 1fr: eine 1fr-Spalte waechst sonst auf die Min-Content-
   Breite ihres breitesten Kindes an (hier der Knopf in der .note-box) und
   schiebt die ganze Seite seitlich aus dem Rahmen. */
.spec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
@media (min-width: 920px) { .spec-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; } }
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { font-variation-settings: "wdth" 100, "wght" 500; color: var(--muted); width: 46%; font-size: 15px; }
.spec td { font-variation-settings: "wdth" 100, "wght" 500; }
.spec caption { text-align: left; color: var(--muted); font-size: 14px; padding-bottom: 16px; }
/* Auf schmalen Displays Bezeichnung ueber den Wert stellen. Nebeneinander
   verlangen die beiden Spalten zusammen mehr Breite, als ein 320px-Display
   hergibt, und die Tabelle schiebt die Seite seitlich aus dem Rahmen. */
@media (max-width: 560px) {
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto; }
  .spec tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .spec th, .spec td { padding: 0; border: 0; }
  .spec th { margin-bottom: 3px; }
}

.note-box {
  background: var(--bone-2);
  padding: 28px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--r-lg);
}
@media (max-width: 560px) { .note-box { padding: 22px 18px; } }
.section--bone .note-box { background: var(--paper); }
.note-box p { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.note-box p:last-child { margin-bottom: 0; }
.note-box strong { color: var(--text); }

/* ---------- process (a real sequence) ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 28px; }
.step { border-top: 2px solid var(--red); padding-top: 18px; }
.step__no {
  font-variation-settings: "wdth" 74, "wght" 600;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--red);
}
.section--coal .step__no { color: var(--brass); }
.step h3 { margin: 10px 0 8px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }
.section--coal .step p { color: rgba(255,255,255,.62); }

/* ---------- contact person ---------- */
.person { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (min-width: 840px) { .person { grid-template-columns: 320px minmax(0, 1fr); } }
.person__photo {
  aspect-ratio: 4 / 5;
  background: repeating-linear-gradient(135deg, #212427 0 10px, #282c2f 10px 20px);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.4);
  font-size: 13px;
  text-align: center;
  padding: 16px;
}
.person__contact { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.person__contact a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); }
.person__contact a:hover { border-bottom-color: var(--red); }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-variation-settings: "wdth" 104, "wght" 600;
  font-size: 1.05rem;
  transition: color .2s ease;
}
.faq summary:hover { color: var(--red); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--red);
  transform: translateY(-50%);
  transition: transform .28s var(--ease);
}
.faq summary::before {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: var(--red);
  transform: translateY(-50%);
  transition: transform .28s var(--ease), opacity .2s ease;
}
/* Das Plus dreht sich beim Aufklappen ins Minus, statt einfach zu verschwinden. */
.faq details[open] summary::before { opacity: 0; transform: translateY(-50%) rotate(90deg); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.faq p { margin: 0 0 22px; color: var(--muted); max-width: 68ch; }
@media (prefers-reduced-motion: reduce) {
  .faq summary::before, .faq summary::after { transition: opacity .2s ease; }
  .faq details[open] summary::before { transform: translateY(-50%); }
  .faq details[open] summary::after { transform: translateY(-50%); }
}

/* ---------- form ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 4vw, 56px); }
@media (min-width: 920px) { .contact-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 14px; color: var(--muted); }
.field input, .field textarea, .field select {
  font: inherit;
  font-size: 16px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--text);
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:hover, .field textarea:hover { border-color: #c6bfb4; }
/* Weicher Ring beim Tippen. Der harte rote Rahmen aus :focus-visible bleibt
   fuer die Tastaturbedienung erhalten. */
.field input:focus, .field textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(212,12,27,.11);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; }
@media (min-width: 640px) { .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); margin: 6px 0 22px; }
.consent input { margin-top: 4px; flex: none; width: 17px; height: 17px; accent-color: var(--red); }
.form-status { margin-top: 16px; font-size: 15px; }
/* Spamfalle. Nicht display: none, das ueberspringen manche Programme gezielt.
   Das Feld steht ausserhalb des sichtbaren Bereichs und ist per tabindex="-1"
   auch mit der Tastatur nicht erreichbar. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- footer ---------- */
.site-footer { background: var(--coal-2); color: rgba(255,255,255,.62); padding: 56px 0 30px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 34px; }
.site-footer h4 {
  color: #fff;
  font-variation-settings: "wdth" 74, "wght" 600;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-logo { height: 24px; width: auto; margin-bottom: 18px; }

/* Verweise auf die Profile in den sozialen Netzwerken. Reine Links, es wird
   nichts von dort nachgeladen. Die Symbole liegen als SVG im Markup. */
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  color: rgba(255,255,255,.62);
  transition: color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.social a:hover {
  color: #fff;
  border-color: rgba(255,255,255,.34);
  transform: translateY(-1px);
}
.social svg { width: 18px; height: 18px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .social a { transition: color .25s ease, border-color .25s ease; }
  .social a:hover { transform: none; }
}
.footer-bottom {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  font-size: 14px;
}

/* ---------- legal pages ---------- */
.legal { max-width: 74ch; }
.legal h2 { margin: 44px 0 14px; font-variation-settings: "wdth" 108, "wght" 700; font-size: 1.5rem; letter-spacing: -.01em; }
.legal h3 { margin: 30px 0 10px; font-variation-settings: "wdth" 102, "wght" 600; font-size: 1.12rem; }
.legal p, .legal li { color: #3d4043; }
.legal ul { padding-left: 20px; }
.todo {
  background: #fff5cc;
  border-left: 3px solid var(--brass);
  border-radius: var(--r);
  padding: 16px 20px;
  margin: 18px 0;
  font-size: 15px;
  color: #4a3a00;
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* Kacheln und Reihen laufen versetzt nach, statt dass ein ganzer Block
   gleichzeitig aufpoppt. Nur diese vier Bausteine, damit Tabellen und
   Formulare unangetastet bleiben. */
.reveal > .card,
.reveal > .step,
.reveal > .row,
.reveal > .fact {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal.is-in > .card,
.reveal.is-in > .step,
.reveal.is-in > .row,
.reveal.is-in > .fact { opacity: 1; transform: none; }
.reveal.is-in > :nth-child(1) { transition-delay: .04s; }
.reveal.is-in > :nth-child(2) { transition-delay: .10s; }
.reveal.is-in > :nth-child(3) { transition-delay: .16s; }
.reveal.is-in > :nth-child(4) { transition-delay: .22s; }
.reveal.is-in > :nth-child(5) { transition-delay: .28s; }
.reveal.is-in > :nth-child(6) { transition-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal > .card, .reveal > .step, .reveal > .row, .reveal > .fact {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--red);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r);
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }