/* Hallmark · macrostructure: Photographic (Materialwand) · genre: editorial
 * nav: N7 slab-fields · footer: Ft1 mast-headed · theme: custom (Wohndekor Teuber)
 * paper: #FFFFFF weiss / #F4F3F0 kalk (kapitelweiser Wechsel, seit 29.08. ohne Schwarz)
 * accent: #186DA0 azur, aus dem Logoblau #1D86C5 abgeleitet, NUR als Marke:
 *   Telefonknopf, aktives Kopffeld, Schild beim Ueberfahren. Keine Flaechen.
 * display: Host Grotesk · body: Instrument Sans
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 * Begruendete Abweichung: Gate 42 (Kopfzeile), siehe DESIGN.md Abschnitt 22.
 * Gate 23 (Akzentflaeche) ist seit dem 27.08. abends erfuellt, unter 2 Prozent.
 */
/* Wohndekor Teuber, Vorschau lie-one, 27.08.2026, zweite Fassung.
   Konzept: Musterwand. Entscheide stehen in DESIGN.md, Abschnitte 14 bis 21. */

/* ---------- Schriften, selbst gehostet ---------- */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(schriften/host-grotesk-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(schriften/instrument-sans-var.woff2) format('woff2');
}

/* ---------- Token ---------- */
:root {
  --kalk: #F4F3F0;
  --kalk-2: #E5E4DF;
  --kalk-3: #D8D7D1;
  --weiss: #FFFFFF;
  --marke: #186DA0;
  --marke-tief: #114F74;
  --marke-leise: #D3EAF8;
  --tinte: #121316;
  --tinte-leise: #5E5F66;
  --fokus: #8E92FF;

  --f-display: 'Host Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-text: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --bild-person: clamp(112px, 12vw, 152px);

  --fuge: 4px;
  --zeile: clamp(132px, 8.6vw, 156px);
  --rand: var(--s-5);
  --breite: 1360px;
  --leiste: 64px;

  --t-mikro: 13px;
  --t-klein: 14px;
  --t-body: clamp(16px, 15px + 0.3vw, 18px);
  --t-lead: clamp(18px, 16px + 0.7vw, 23px);
  --t-h3: clamp(19px, 17px + 0.6vw, 25px);
  --t-h2: clamp(34px, 21px + 3.6vw, 76px);
  --t-h1: clamp(31px, 22px + 2.9vw, 64px);
  --t-h2-schmal: clamp(28px, 20px + 1.5vw, 46px);

  --dauer: 320ms;
  --dauer-lang: 900ms;
  --kurve: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 1024px) {
  :root { --rand: var(--s-8); --leiste: 72px; }
}

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

html, body { overflow-x: clip; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--leiste) + var(--s-4)); }

body {
  margin: 0;
  background: var(--kalk);
  color: var(--tinte);
  font-family: var(--f-text);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.025em;
  line-height: 0.99;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

p { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  transition: none;
}
/* Der Ring braucht 3:1 gegen den Grund, auf dem er liegt. Auf Kalk ist das
   helle Blau zu schwach, auf Ultramarin verschwindet jedes Blau. */
.hell :focus-visible, .rechtstext :focus-visible { outline-color: var(--marke); }
.hell :focus-visible { outline-color: var(--marke); }

.mitte {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.nur-fuer-leser {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Vorschau-Hinweis ---------- */
.vorschau {
  background: var(--weiss);
  border-bottom: 1px solid var(--kalk-2);
  color: var(--tinte-leise);
  font-size: var(--t-mikro);
  padding-block: var(--s-2);
}
.vorschau .mitte { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); justify-content: space-between; }
.vorschau b { color: var(--tinte); font-weight: 500; }

/* ---------- Kopfleiste ----------
   Dritte Fassung, 01.09.2026. Vorher trug die Leiste weisse Kaestchen mit
   4-Pixel-Fuge, dieselbe Logik wie die inzwischen aufgeloeste Materialwand.
   Michael: „ohne Kasten, nur das Wort." Jetzt: weisse Leiste, Haarlinie unten,
   die Abschnitte stehen als blosse Woerter. Markiert wird mit einem 2 Pixel
   starken Strich unter dem Wort, nicht mit einer Flaeche. Einziger farbig
   gefuellte Punkt bleibt die Rufnummer, sie ist der Handlungsaufruf. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--s-6);
  height: var(--leiste);
  padding-inline: var(--rand);
  padding-inline: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
  background: var(--weiss);
  border-block-end: 1px solid var(--kalk-2);
}

/* Marke und Anschrift stehen als eine Gruppe links, der Dehnabstand sitzt an
   der Gruppe. Sonst rutscht die Rufnummer neben das Logo, sobald die
   Navigation unter 1100 px ausgeblendet ist. */
.kopf-marke {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-width: 0;
  margin-inline-end: auto;
}

.wortmarke {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  text-decoration: none;
}
/* Die Hoehe bindet an die Leiste, nicht an eine feste Zahl, sonst springt die
   Marke beim Breitenwechsel. */
.wortmarke img {
  display: block;
  height: calc(var(--leiste) * 0.46);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

/* Steht neben der Marke wie im alten Auftritt, nicht neben der Navigation,
   sonst liest sie sich wie ein weiterer Menuepunkt. Der Dehnabstand sitzt
   deshalb hier und nicht an der Marke. */
.anschrift {
  display: none;
  margin: 0;
  color: var(--tinte-leise);
  font-size: var(--t-mikro);
  white-space: nowrap;
}
@media (min-width: 1500px) { .anschrift { display: block; } }

.kopfnav { display: none; align-items: center; gap: var(--s-6); }
@media (min-width: 1100px) { .kopfnav { display: flex; } }

.kopfnav a {
  position: relative;
  display: block;
  padding-block: var(--s-2);
  color: var(--tinte-leise);
  font-family: var(--f-text);
  font-weight: 500;
  font-size: var(--t-klein);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dauer) var(--kurve);
}
/* Der Strich waechst aus der Mitte, damit beim Ueberfahren nichts springt.
   Er liegt in einem Pseudoelement, nicht in text-decoration, sonst laesst sich
   die Staerke nicht sauber animieren. */
.kopfnav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--marke);
  transform: scaleX(0);
  transition: transform var(--dauer) var(--kurve);
}
.kopfnav a:hover { color: var(--tinte); }
.kopfnav a:hover::after { transform: scaleX(1); }
.kopfnav a[aria-current="true"] { color: var(--tinte); }
.kopfnav a[aria-current="true"]::after { transform: scaleX(1); }

.ruf {
  display: inline-flex;
  align-items: center;
  background: var(--marke);
  color: var(--weiss);
  font-family: var(--f-text);
  font-weight: 500;
  font-size: var(--t-klein);
  line-height: 1;
  padding: var(--s-3) var(--s-4);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.kopf .ruf { flex: 0 0 auto; }
.ruf:hover { background: var(--marke-tief); color: var(--weiss); }
.ruf:active { transform: translateY(1px); }

/* ---------- Auftakt: die Gewerketafel ----------
   Uebernommen aus dem eigenen Auftritt des Kunden: vier gleichwertige Gewerke
   als randlose Bildtafeln, jede mit einem Beschriftungsschild oben links.
   Vorher stand hier ein fremdes Stockbild mit einer weissen Texttafel darauf.
   Das Band darueber traegt den Satz, den der Betrieb seit Jahrzehnten fuehrt. */
.auftakt {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: calc(100svh - var(--leiste));
  background: var(--kalk-2);
  gap: var(--fuge);
}

.auftakt-band {
  background: var(--weiss);
  display: grid;
  gap: var(--s-3) var(--s-8);
  align-items: end;
  padding: var(--s-6) var(--rand);
  padding-inline: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
}
.auftakt-band h1 {
  font-size: var(--t-h1);
  max-width: 20ch;
}
.auftakt-band .lead {
  font-size: var(--t-klein);
  color: var(--tinte-leise);
  max-width: 44ch;
}
@media (min-width: 1024px) {
  .auftakt-band {
    grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
    padding-block: var(--s-7);
  }
  .auftakt-band .lead { font-size: var(--t-body); padding-block-end: var(--s-2); }
}

.gewerke {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fuge);
}
@media (min-width: 760px) {
  .gewerke { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gewerk {
  position: relative;
  overflow: hidden;
  min-height: clamp(180px, 24svh, 300px);
  background: var(--kalk-3);
  text-decoration: none;
  color: inherit;
}
.gewerk img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform var(--dauer-lang) var(--kurve);
}
.gewerk:hover img, .gewerk:focus-visible img { transform: scale(1); }

/* Das Schild. Dasselbe Bauteil traegt spaeter die Bildtexte in der Wand,
   dort unten links, hier oben links wie auf dem alten Auftritt. */
.schild {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  max-width: min(100%, 30ch);
  background: var(--weiss);
  color: var(--tinte-leise);
  padding: var(--s-4) var(--s-5);
  transition: background var(--dauer) var(--kurve), color var(--dauer) var(--kurve);
}
.schild b {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-h3);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--tinte);
  transition: color var(--dauer) var(--kurve);
}
.schild span {
  font-size: var(--t-mikro);
  line-height: 1.35;
}
.gewerk:hover .schild, .gewerk:focus-visible .schild { background: var(--marke); color: var(--marke-leise); }
.gewerk:hover .schild b, .gewerk:focus-visible .schild b { color: var(--weiss); }

/* ---------- Kapitel ----------
   Dritte Ordnung, 31.08.2026. Vorher stand hier die Materialwand: randlose
   Kacheln in einem unregelmaessigen Gitter mit 4-Pixel-Fuge, sechs bis acht
   Bilder je Kapitel, von Bildschirmrand zu Bildschirmrand. Michael: zu unruhig,
   nicht stimmig, weniger Bilder und mehr Platz.
   Jetzt: jedes Kapitel steht im Satzspiegel, nicht randlos. Text links, ein
   Leitbild rechts, darunter hoechstens zwei weitere. Neun Bilder in vier
   Kapiteln statt neunzehn. Die Fuge waechst von 4 auf 32 Pixel, die
   Bildunterschrift steht unter dem Bild und nicht mehr darauf.
   Die Gewerketafel im Auftakt bleibt randlos und dicht. Sie ist der Umschlag,
   die Kapitel sind der Inhalt, und der Unterschied ist beabsichtigt. */
.kapitel { padding-block: clamp(var(--s-8), 4rem + 4vw, 160px); }

.kapitel-raster {
  display: grid;
  gap: var(--s-7);
  align-items: start;
}
@media (min-width: 900px) {
  .kapitel-raster {
    grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
    gap: clamp(var(--s-7), 3vw, var(--s-9));
  }
}

.kapitel-text h2 {
  font-size: var(--t-h2-schmal);
  margin-block-end: var(--s-5);
}
.kapitel-text p {
  font-size: var(--t-lead);
  color: var(--tinte-leise);
  max-width: 42ch;
}
.kapitel-text .kapitel-nachsatz {
  font-size: var(--t-body);
  margin-block-start: var(--s-5);
}

/* ---------- Bild mit Unterschrift ---------- */
.bild { margin: 0; }
.bild img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--kalk-2);
}
.bild.leit img { aspect-ratio: 16 / 10; }
.bild figcaption {
  font-size: var(--t-klein);
  color: var(--tinte-leise);
  padding-block-start: var(--s-3);
}
.bild figcaption b { color: var(--tinte); font-weight: 500; }

.bilderpaar {
  display: grid;
  gap: var(--s-7) var(--s-6);
  margin-block-start: clamp(var(--s-7), 3vw, var(--s-8));
}
@media (min-width: 700px) {
  .bilderpaar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bilderpaar.einzeln { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Kapitelgruende ---------- */
.weiss { background: var(--weiss); color: var(--tinte); }
.hell { background: var(--kalk); color: var(--tinte); }

/* ---------- Koennensliste, Kapitel Massgenau ---------- */
.koennen {
  list-style: none;
  margin: clamp(var(--s-7), 3vw, var(--s-8)) 0 0;
  padding: 0;
}
.koennen li {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block-start: 1px solid var(--kalk-2);
  font-size: var(--t-klein);
}
.koennen li:last-child { border-block-end: 1px solid var(--kalk-2); }
.koennen b { font-weight: 500; }
.koennen span { color: var(--tinte-leise); }
.hell .koennen li { border-color: var(--kalk-3); }

/* ---------- Blockabschnitte ---------- */
.block { padding-block: clamp(var(--s-8), 4rem + 4vw, 160px); }
.block-kopf { max-width: 46rem; margin-block-end: var(--s-7); }
.block-kopf h2 { font-size: var(--t-h2-schmal); margin-block-end: var(--s-5); }
.block-kopf p { font-size: var(--t-lead); color: var(--tinte-leise); }

/* ---------- Objekte ----------
   Frueher eine achtzeilige Tabelle mit drei versetzten Bildern darunter,
   zusammen 1790 Pixel hoch und in einer Sprache, die sonst nirgends vorkam.
   Jetzt: Bilder als Dreierreihe in derselben Fuge wie die Materialwaende,
   die Nennungen darunter zweispaltig und kompakt. */
.objektbilder {
  display: grid;
  gap: var(--s-6);
  margin-block-start: clamp(var(--s-7), 3vw, var(--s-8));
}
.block-kopf + .objektbilder { margin-block-start: clamp(var(--s-7), 3vw, var(--s-8)); }
.mitte > .objektbilder:first-child { margin-block-start: 0; }
.objektbilder figure { margin: 0; }
.objektbilder img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.objektbilder figcaption {
  font-size: var(--t-klein);
  color: var(--tinte-leise);
  padding-block-start: var(--s-3);
}
@media (min-width: 700px) {
  .objektbilder { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
  .objektbilder.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.objektliste {
  list-style: none;
  margin: var(--s-8) 0 0;
  padding: 0;
  display: grid;
  gap: 0 var(--s-8);
  border-block-start: 1px solid var(--tinte);
}
.objektliste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s-4);
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--kalk-2);
}
.objektliste b {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-body);
  letter-spacing: -0.015em;
  color: var(--tinte);
}
.objektliste .ort {
  font-size: var(--t-klein);
  color: var(--tinte-leise);
  text-align: end;
  white-space: nowrap;
}
.objektliste .was {
  grid-column: 1 / -1;
  font-size: var(--t-klein);
  color: var(--tinte-leise);
  margin-block-start: var(--s-1);
}
@media (min-width: 900px) {
  .objektliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.objektnote {
  margin-block-start: var(--s-5);
  font-size: var(--t-klein);
  color: var(--tinte-leise);
  max-width: 62ch;
}

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf { padding-block: clamp(var(--s-8), 3rem + 3vw, 120px) 0; }
.seitenkopf h1 { font-size: var(--t-h1); max-width: 20ch; }
.seitenkopf .lead {
  font-size: var(--t-lead);
  color: var(--tinte-leise);
  max-width: 52ch;
  margin-block-start: var(--s-5);
}
/* Ab 1024 px stehen Titel und Vorspann nebeneinander, im selben Verhaeltnis
   wie im Auftaktband der Startseite. Vorher standen beide links untereinander
   und die rechte Seitenhaelfte blieb leer, auf Ueber uns ueber einen ganzen
   Bildschirm. Die Kapitelspur spannt weiterhin ueber beide Spalten. */
@media (min-width: 1024px) {
  .seitenkopf .mitte {
    display: grid;
    grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
    gap: var(--s-3) var(--s-8);
    align-items: end;
  }
  .seitenkopf .lead {
    font-size: var(--t-body);
    max-width: 44ch;
    margin-block-start: 0;
    padding-block-end: var(--s-2);
  }
  .seitenkopf .unternav { grid-column: 1 / -1; }
}

/* Unternavigation der Leistungsseite. Dieselben blossen Woerter wie oben in
   der Leiste, nur groesser und mit einer Linie darueber statt darunter. */
.unternav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-block-start: clamp(var(--s-7), 3vw, var(--s-8));
  border-block-start: 1px solid var(--kalk-2);
  padding-block-start: var(--s-4);
}
.unternav a {
  position: relative;
  padding-block: var(--s-2);
  font-size: var(--t-klein);
  font-weight: 500;
  color: var(--tinte-leise);
  text-decoration: none;
  transition: color var(--dauer) var(--kurve);
}
.unternav a::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  height: 2px; background: var(--marke);
  transform: scaleX(0);
  transition: transform var(--dauer) var(--kurve);
}
.unternav a:hover { color: var(--tinte); }
.unternav a:hover::after { transform: scaleX(1); }

/* ---------- Weiterfuehrender Verweis ---------- */
.weiter {
  display: inline-block;
  margin-block-start: clamp(var(--s-6), 2.5vw, var(--s-7));
  font-size: var(--t-klein);
  font-weight: 500;
  color: var(--marke);
  text-decoration: none;
  border-block-end: 2px solid var(--marke-leise);
  padding-block-end: 2px;
  transition: border-color var(--dauer) var(--kurve);
}
.weiter::after { content: " \2192"; }
.weiter:hover { border-block-end-color: var(--marke); }
.kontakt .weiter { display: block; }

/* ---------- Mannschaft ---------- */
.leute {
  list-style: none;
  margin: clamp(var(--s-7), 3vw, var(--s-8)) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-7) var(--s-6);
}
.leute li { display: flex; flex-direction: column; gap: var(--s-4); }
/* Quelle sind 100 Pixel grosse Archivbilder, deshalb ist bei 152 Pixeln
   Schluss, darueber wird es matschig. height muss ausdruecklich auto sein,
   sonst gewinnt das height-Attribut des img und aspect-ratio greift nicht. */
.leute img {
  width: 100%;
  max-width: var(--bild-person);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.leute b { display: block; font-weight: 500; color: var(--tinte); font-size: var(--t-body); margin-block-end: var(--s-1); }
.leute span { font-size: var(--t-klein); color: var(--tinte-leise); }
.durchwahl { display: flex; flex-direction: column; gap: 2px; margin-block-start: auto; }
.durchwahl a { color: var(--marke); text-decoration: none; overflow-wrap: anywhere; }
.durchwahl a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  /* Die Spaltenzahl folgt der Anzahl der Personen. Stand die Vier fest, blieb
     nach dem Austritt einer Person eine leere Spalte am rechten Rand. */
  .leute.breit { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .leute.leute-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leute.leute-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Lieferanten ---------- */
.marken {
  list-style: none;
  margin: clamp(var(--s-7), 3vw, var(--s-8)) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--s-7) var(--s-6);
  align-items: center;
}
.marken img {
  width: auto;
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
  /* Die Logos kommen aus dem Archiv als JPEG mit weissem Grund und in sehr
     verschiedenen Farben. Entsaettigt stehen sie ruhig nebeneinander und
     nehmen der Seite nicht die Aufmerksamkeit. */
  filter: grayscale(1);
  opacity: 0.78;
  mix-blend-mode: multiply;
  transition: opacity var(--dauer) var(--kurve), filter var(--dauer) var(--kurve);
}
.marken li:hover img { filter: none; opacity: 1; }
.marken + .objektnote { margin-block-start: clamp(var(--s-7), 3vw, var(--s-8)); }

/* ---------- Anfrageformular ---------- */
.anfrage {
  margin-block-start: clamp(var(--s-8), 4vw, 120px);
  border-block-start: 1px solid var(--kalk-2);
  padding-block-start: clamp(var(--s-7), 3vw, var(--s-8));
  max-width: 46rem;
  display: grid;
  gap: var(--s-5);
}
.anfrage h2 { font-size: var(--t-h2-schmal); }
.anfrage .lead { font-size: var(--t-lead); color: var(--tinte-leise); margin-block-start: calc(var(--s-5) * -1 + var(--s-3)); }
.anfrage label {
  display: grid;
  gap: var(--s-2);
  font-size: var(--t-klein);
  font-weight: 500;
  color: var(--tinte-leise);
}
.feldpaar { display: grid; gap: var(--s-5); }
@media (min-width: 600px) { .feldpaar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.anfrage input, .anfrage select, .anfrage textarea {
  font-family: var(--f-text);
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--tinte);
  background: var(--weiss);
  border: 1px solid var(--kalk-3);
  border-radius: 0;
  padding: var(--s-3) var(--s-4);
  width: 100%;
  transition: border-color var(--dauer) var(--kurve);
}
.anfrage textarea { resize: vertical; line-height: 1.5; }
.anfrage input:hover, .anfrage select:hover, .anfrage textarea:hover { border-color: var(--tinte-leise); }
.anfrage input:focus, .anfrage select:focus, .anfrage textarea:focus {
  outline: none;
  border-color: var(--marke);
  box-shadow: inset 0 0 0 1px var(--marke);
}
.anfrage button { justify-self: start; border: 0; cursor: pointer; font-size: var(--t-body); padding: var(--s-4) var(--s-5); }
.formnote { font-size: var(--t-klein); color: var(--tinte-leise); max-width: 62ch; }
.formhinweis { font-size: var(--t-klein); color: var(--tinte-leise); max-width: 62ch; margin: 0; }
.formhinweis a { color: inherit; }

/* Lockfeld gegen Bots. Bewusst aus dem Bild geschoben statt display:none:
   ein Feld, das gar nicht gerendert wird, erkennen gaengige Skripte und
   lassen es aus. aria-hidden und tabindex halten es von Vorleseprogrammen
   und von der Tabulatorreihenfolge fern. */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile rendert in ein iframe fester Groesse. Der reservierte Platz
   verhindert, dass der Knopf darunter springt, sobald das Widget geladen ist. */
.pruefung { min-height: 66px; }

/* Rueckmeldung nach dem Absenden. Leer ist sie unsichtbar, damit unter dem
   Knopf kein leerer Streifen steht. */
.formstatus {
  font-size: var(--t-klein);
  max-width: 62ch;
  margin: 0;
  border-inline-start: 2px solid transparent;
  padding-inline-start: var(--s-4);
}
.formstatus:empty { display: none; }
.formstatus.gut { border-inline-start-color: var(--marke); color: var(--tinte); }
.formstatus.schlecht { border-inline-start-color: var(--tinte); color: var(--tinte); }

/* ---------- Kontakt ---------- */
.kontakt { background: var(--weiss); color: var(--tinte); padding-block-end: var(--s-7); }
.kontakt h2 { font-size: var(--t-h1); max-width: 20ch; margin-block-end: var(--s-8); }
.kontakt-raster {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.kontakt-raster > div { border-block-start: 1px solid var(--kalk-2); padding-block-start: var(--s-4); }
.kontakt-raster.gross { gap: var(--s-7) var(--s-6); }
.kontakt-raster.gross h3, .weiss .kontakt-raster h3 { font-family: var(--f-text); font-weight: 500; font-size: var(--t-klein); letter-spacing: 0; color: var(--tinte-leise); margin-block-end: var(--s-3); }
.kontakt-raster.gross p, .kontakt-raster.gross li { font-size: var(--t-klein); }
.kontakt-raster.gross ul { list-style: none; margin: 0; padding: 0; }
.kontakt-raster.gross a { color: var(--marke); text-decoration: underline; text-underline-offset: 3px; }
.kontakt h3 {
  font-family: var(--f-text);
  font-weight: 500;
  font-size: var(--t-klein);
  letter-spacing: 0;
  color: var(--tinte-leise);
  margin-block-end: var(--s-3);
}
.kontakt p, .kontakt li { font-size: var(--t-klein); }
.kontakt ul { list-style: none; margin: 0; padding: 0; }
.kontakt a { text-decoration: underline; text-underline-offset: 3px; }
.kontakt a:hover { text-decoration-thickness: 2px; }
.kontakt a:active, .fuss a:active, .fuss-abschnitte a:active { opacity: 0.7; }
.kontakt .ruf {
  font-size: var(--t-body);
  padding: var(--s-4) var(--s-5);
  margin-block-start: var(--s-8);
  text-decoration: none;
}

/* ---------- Fuss ---------- */
.fuss {
  background: var(--kalk);
  border-block-start: 1px solid var(--kalk-2);
  color: var(--tinte-leise);
  font-size: var(--t-klein);
  padding-block: var(--s-7);
}
.fuss .mitte { display: grid; gap: var(--s-3); }
.fuss-marke { height: 34px; width: auto; margin-block-end: var(--s-6); }
.fuss a { color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; }
.fuss-abschnitte { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.fuss-abschnitte a { color: var(--tinte-leise); text-decoration: none; }
.fuss-abschnitte a:hover { color: var(--tinte); text-decoration: underline; }
@media (min-width: 760px) {
  .fuss .mitte { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .fuss-marke { grid-column: 1 / -1; justify-self: start; }
  .fuss-abschnitte { grid-column: 1 / -1; }
}

/* ---------- Rechtsseiten ---------- */
.rechtstext { background: var(--kalk); color: var(--tinte); }
.rechtstext h1 { font-size: var(--t-h2); margin-block-end: var(--s-6); }
.rechtstext h2 { font-size: var(--t-h3); margin-block: var(--s-7) var(--s-3); }
.rechtstext p, .rechtstext li { max-width: 62ch; color: var(--tinte-leise); }
.rechtstext p + p { margin-block-start: var(--s-4); }
.rechtstext a { color: var(--marke); }
.zurueck { display: inline-block; margin-block-start: var(--s-8); color: var(--marke); }

/* ---------- Einblendung ---------- */
.js .bild { opacity: 0; transform: translateY(10px); }
.js .bild.da {
  opacity: 1; transform: none;
  transition: opacity var(--dauer-lang) var(--kurve), transform var(--dauer-lang) var(--kurve);
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 599px) {
  .auftakt { min-height: 0; }
  .auftakt-band { padding-block: var(--s-5); }
  .gewerk { min-height: clamp(160px, 30svh, 240px); }
}

@media (max-width: 699px) {
  .koennen li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}

/* ---------- Bewegung aus ---------- */
@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;
  }
  .gewerk img, .gewerk:hover img { transform: none; }
  .js .bild { opacity: 1; transform: none; }
}

/* ---------- Hinweis: Auftritt im Aufbau ----------
   Michaels Vorgabe vom 09.09.2026: die Seite geht sofort online, die
   restlichen Aufnahmen kommen nach. Der Streifen sagt das in einer Zeile.
   Bewusst kalk und nicht die Marke: er ist ein Hinweis, kein Alarm, und die
   Akzentfarbe bleibt fuer den Handlungsaufruf reserviert. Er steht unter der
   Kopfleiste, nicht darueber, damit er beim Scrollen mitgeht und nicht das
   Erste ist, was ein Besucher liest. */
.aufbau {
  background: var(--kalk);
  border-block-end: 1px solid var(--kalk-2);
  color: var(--tinte-leise);
  font-size: var(--t-mikro);
  padding-block: var(--s-3);
  padding-inline: var(--rand);
  padding-inline: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
}
.aufbau p { max-width: 62rem; }
.aufbau a { color: var(--marke); text-decoration: none; white-space: nowrap; }
.aufbau a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Lieferanten ----------
   Seit dem 09.09.2026 stehen hier Namen statt Logos, geteilt in zwei Branchen.
   Warum kein Logoband mehr: die Logos gehoeren den Lieferanten, fuer eine
   Verwendung braucht es deren Einverstaendnis, und eingeholt war keines. Der
   Satzbau ist derselbe wie bei .koennen, damit die Seite nicht eine dritte
   Listenform lernt. */
.lieferanten {
  display: grid;
  gap: clamp(var(--s-7), 4vw, var(--s-9)) var(--s-8);
  margin-block-start: clamp(var(--s-7), 3vw, var(--s-8));
}
@media (min-width: 860px) {
  .lieferanten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lieferant-gruppe h3 {
  font-family: var(--f-display);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--tinte);
  padding-block-end: var(--s-3);
  border-block-end: 2px solid var(--marke);
}
.lieferant-gruppe ul { list-style: none; margin: 0; padding: 0; }
.lieferant-gruppe li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--kalk-2);
  font-size: var(--t-klein);
}
.lieferant-gruppe b { font-weight: 500; }
.lieferant-gruppe span { color: var(--tinte-leise); }
@media (max-width: 699px) {
  .lieferant-gruppe li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}

/* ---------- Karte ----------
   Zwei Klicks. Bis der Knopf gedrueckt ist, liegt der eigene Lageplan da und
   es geht keine Anfrage an Google. Der Schleier muss dicht genug sein, dass
   weisse Schrift auf dem hellen Plan lesbar bleibt. */
.karte-feld {
  margin: clamp(var(--s-8), 4vw, 120px) 0 0;
  max-width: 62rem;
}
.karte-halter {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--kalk);
}
.karte-plan { width: 100%; height: 100%; object-fit: cover; display: block; }
/* overflow: hidden am Halter allein schneidet ein iframe nicht ab, die Ecken
   blieben eckig. Die Masse stehen deshalb auch auf dem Rahmen selbst. */
.karte-halter iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.karte-schleier {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-5);
  text-align: center;
  background: color-mix(in oklab, var(--marke) 62%, transparent);
}
.karte-hinweis {
  max-width: 34rem;
  font-size: var(--t-mikro);
  line-height: 1.5;
  color: #FFFFFF;
}
.karte-hinweis a { color: #FFFFFF; text-underline-offset: 3px; }
/* Auf dem blauen Schleier waere ein blauer Knopf unsichtbar.
   Der Knopf dreht deshalb um: weisse Flaeche, blaue Schrift. */
.karte-knopf {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  background: var(--weiss);
  color: var(--marke);
}
.karte-knopf:hover { background: var(--kalk); color: var(--marke-tief); }
.karte-feld figcaption {
  margin-block-start: var(--s-4);
  font-size: var(--t-klein);
  color: var(--tinte-leise);
}
.karte-feld figcaption a { color: var(--marke); text-decoration: none; }
.karte-feld figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }
.karte-feld .quelle { display: block; margin-block-start: var(--s-2); font-size: var(--t-mikro); }
.karte-feld .quelle a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }