/* ============================================================
   Berndt & Sohn Haustechnik — Demo-Stylesheet (Vandro)

   Haltung: kein Prospekt, kein Datenblatt, sondern der laufende
   Tagesbetrieb einer Werkstatt. Reihenfolge Erreichbarkeit ->
   Preis -> Beweis. Gehalten vom Statusstreifen an der linken
   Kante, der mit der Uhrzeit die Farbe wechselt.

   Token-Vertrag (bitte einhalten):
     Kupfer  = "Marke". Text, Links, Kanten.
     Rot     = ausschliesslich "Notdienst laeuft gerade".
               Nie ein Button, nie Deko.
     Blaugruen / Graugruen = reine Kategoriemarker an den drei
               Leistungsbloecken, tauchen nie als Flaeche oder
               Button auf.
   Jeder Farbwert steht genau einmal, hier im :root.

   Schriften, alle lokal in ../_fonts/, kein CDN:
     Oswald (SIL OFL 1.1)
     Hanken Grotesk (SIL OFL 1.1)
     Martian Mono (SIL OFL 1.1, Evil Martian) — nur Zahlen-
       Etiketten: Rufnummer, Preise, Uhrzeit, Fahrzeiten.
       Latin-Subset von fonts.gstatic.com geladen und lokal
       abgelegt, damit die Demo ohne Fremdverbindung laeuft.
   ============================================================ */

@font-face {
  font-family: "Oswald";
  src: url("../_fonts/oswald-var.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../_fonts/hanken-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../_fonts/martian-mono-var.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Token-Vertrag ----------------------------------- */
:root {
  color-scheme: light;

  /* Flaechen und Schrift */
  --paper:        #F4F2ED;
  --paper-2:      #E8E5DD;
  --ink:          #101312;
  --ink-2:        #3A403E;
  --ink-3:        #5A615E;
  --line:         #C9C4B8;

  /* Dunkelband */
  --steel:        #1B2123;
  --steel-2:      #252D2F;
  --on-steel:     #E7E4DC;
  --on-steel-2:   #A9B0AD;

  /* Marke */
  --copper:       #7E4726;
  --copper-bright:#9A5B33;
  --copper-deep:  #5C3219;
  --copper-mid:   #6E3D1F;
  --on-copper:    #F6EEE8;

  /* Notdienst, ausschliesslich */
  --alarm:        #C2130E;
  --alarm-deep:   #8E0D09;
  --on-alarm:     #FBF6F4;

  /* Kategoriemarker */
  --water:        #1F5F63;
  --air:          #45514F;

  --font-head: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Hanken Grotesk", "Segoe UI", sans-serif;
  --font-num:  "Martian Mono", "Consolas", monospace;

  --wrap: 1180px;
  --gut: clamp(20px, 3vw, 34px);
  --pad: clamp(64px, 8vw, 112px);
  --strip: 56px;

  /* Der Statusstreifen klebt links am Rand, auf dem Handy unten.
     Farbtest und "nach oben" halten diesen Abstand ein. */
  --ft-links: 56px;
  --ft-boden: 0px;
  --boden: 0px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 380;
  line-height: 1.62;
  padding-left: var(--strip);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

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

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

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 90;
  padding: 10px 18px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  transition: top .2s ease;
}
.skip-link:focus-visible { top: 12px; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }

/* ---------- Typografie -------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
}
h1 {
  font-size: clamp(26px, 4vw, 50px);
  line-height: .92;
  letter-spacing: -.015em;
}
h2 {
  font-size: clamp(21px, 4vw, 36px);
  line-height: 1;
  letter-spacing: -.012em;
}
h3 {
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.12;
  letter-spacing: -.005em;
}

p { text-wrap: pretty; max-width: 62ch; }
strong, b { color: var(--ink); font-weight: 600; }
em { font-style: normal; color: var(--copper); }

.lead {
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 54ch;
}

/* Marginalien-Label, Oswald 300 Versalien */
.label {
  display: block;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Zahlen-Etikett. Hart begrenzt, nie Fliesstext. */
.num {
  font-family: var(--font-num);
  font-weight: 500;
  letter-spacing: -.02em;
  font-size: .88em;
  color: var(--ink);
}

/* ---------- Demo-Leiste ------------------------------------- */
.demo-bar {
  position: relative;
  z-index: 40;
  background: var(--steel);
  color: var(--on-steel-2);
  font-size: 13px;
}
.demo-bar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  min-height: 38px;
  padding-block: 7px;
}
.demo-bar a { color: var(--on-steel); border-bottom: 1px solid var(--copper-bright); }
.demo-bar a:hover { color: var(--paper); }
.demo-bar .demo-back { margin-right: auto; }
.demo-bar span { max-width: none; }
.lang-toggle {
  background: none;
  border: 1px solid var(--on-steel-2);
  color: var(--on-steel);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .12em;
  padding: 3px 9px;
}
.lang-toggle:hover { border-color: var(--on-steel); }

/* ---------- Statusstreifen ---------------------------------- */
.status {
  position: fixed;
  z-index: 60;
  left: 0; top: 0; bottom: 0;
  width: var(--strip);
  background: var(--copper);
  color: var(--on-copper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
  border-right: 1px solid var(--copper-deep);
}
body[data-status="notdienst"] .status {
  background: var(--alarm);
  color: var(--on-alarm);
  border-right-color: var(--alarm-deep);
}
.status-rot {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding-block: 8px;
}
.status-clock {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -.02em;
}
.status-state,
.status-who,
.status-extra {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-state { font-weight: 500; }
/* Der Streifen ist 56px breit, gelesen wird er der Laenge nach.
   Nichts wird abgeschnitten: bei knapper Bauhoehe faellt zuerst der
   Zusatz weg, dann der Name. Rufnummer und Zustand bleiben immer.
   Die Schwellen sind an der laengsten gesetzten Kette gemessen
   ("Notdienst aktiv / Sven Ketterer / Zuschlag 60 Prozent"). */
@media (min-width: 641px) and (max-height: 700px) {
  .status-extra { display: none; }
}
@media (min-width: 641px) and (max-height: 600px) {
  .status-who { display: none; }
}
.status-tel {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -.02em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.status-mark {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ---------- Kopf -------------------------------------------- */
.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.head-in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  padding-block: 20px;
}
.brand {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.01em;
  color: var(--ink);
  text-transform: uppercase;
}
.brand span {
  font-weight: 300;
  color: var(--ink-3);
}
.brand-sub {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.site-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.site-nav a {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--copper); border-bottom-color: var(--copper-bright); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--copper-bright); }

/* ---------- Raster ------------------------------------------ */
main {
  position: relative;
  --w: min(var(--wrap), 100% - 2 * var(--gut));
  --colw: calc((var(--w) - 11 * var(--gut)) / 12);
}

.sec { padding-block: var(--pad); }
.sec-tight { padding-block: calc(var(--pad) * .6); }

.split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  align-items: start;
}
.split > .main-col { grid-column: 1 / 8; }
.split > .side-col { grid-column: 9 / 13; }

/* Zweite Spaltenform: schmale Textspalte links, Inhalt rechts breit.
   Bewusst nicht die gespiegelte Standardaufteilung, sonst taktet der
   Abschnitt trotz Seitenwechsel wieder gleich. */
.split.flip > .intro-col { grid-column: 1 / 5; }
.split.flip > .main-col { grid-column: 6 / 13; }
.intro-col h2 {
  font-size: clamp(23px, 2.2vw, 28px);
  margin-top: 10px;
}
.intro-col p { margin-top: 14px; font-size: 16px; color: var(--ink-2); }

/* Dritte Form: volle Breite, keine Marginalie. */
.voll { display: block; }
.voll > .kopf-breit { max-width: 30ch; }
.voll > .kopf-breit p { margin-top: 14px; max-width: 62ch; }

/* Marginalie: genau EINE ueberpruefbare Angabe pro Abschnitt. */
.marg { padding-top: 6px; }
.marg .marg-val {
  display: block;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-top: 8px;
  word-break: break-word;
}
.marg p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
  margin-top: 8px;
}

/* ---------- Wochenplan (Kopf Startseite) -------------------- */
/* Kein Marginalien-Block: eine gesetzte Liste, deren heutige Zeile
   von demo.js markiert wird. Namen und Nummern kommen aus RUFPLAN. */
.woche-box { padding-top: 6px; }
.woche-zeit {
  display: block;
  margin-top: 8px;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.02em;
  color: var(--ink);
}
.woche-label2 { margin-top: 22px; }
.woche {
  list-style: none;
  padding: 0;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}
.woche li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 8px 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.woche .w-tag {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  min-width: 74px;
}
.woche .w-name { color: var(--ink-2); }
/* Die hervorgehobene Zeile hatte als einzige Innenabstand und
   stand dadurch um acht Pixel eingerueckt. Jetzt haben alle Zeilen
   denselben Abstand, herausgezogen um dieselben acht Pixel, damit
   die Spalte am Text der Seite haengt. */
.woche li { padding-inline: 8px; margin-inline: -8px; }
.woche li.is-heute { background: var(--paper-2); }
.woche li.is-heute .w-tag { color: var(--ink); }
.woche li.is-heute .w-name { color: var(--ink); font-weight: 600; }
.woche-note { margin-top: 14px; font-size: 15px; color: var(--ink-3); }

/* ---------- Hero -------------------------------------------- */
.hero { padding-block: clamp(48px, 7vw, 96px) var(--pad); }

/* Filmkopf: die Aufnahme liegt hinter dem Satz. Der Schleier haelt
   den Kontrast, egal welches Bild gerade laeuft, und funktioniert
   in beiden Farbmodi, weil er aus --paper gemischt ist. */
.hero-film {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in oklab, var(--paper) 87%, transparent);
}
/* Die H1-Umbrueche sind handgesetzt. Deshalb faellt der Grad so
   weit, dass die laengste gesetzte Zeile in Spalte 1-7 passt und
   der Browser nicht ein zweites Mal umbricht. */
.hero h1 {
  font-size: clamp(27px, 5.6vw, 54px);
  margin-bottom: 30px;
}
.hero-tel {
  display: inline-block;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: clamp(24px, 4.6vw, 34px);
  letter-spacing: -.02em;
  color: var(--copper);
  border-bottom: 3px solid var(--copper-bright);
  padding-bottom: 4px;
  line-height: 1.1;
}
.hero-tel:hover { color: var(--copper-deep); }
.hero-note {
  margin-top: 16px;
  font-size: 15px;
  color: var(--ink-3);
}

/* ---------- Buttons ----------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  border-radius: 0;
}
.btn:hover { background: var(--copper); border-color: var(--copper); }
.btn-line {
  background: none;
  color: var(--ink);
  border-color: var(--line);
}
.btn-line:hover { background: none; color: var(--copper); border-color: var(--copper-bright); }
/* Telefonnummern in der Ziffernschrift. Als gesperrte Versalien sah
   "0123 456789" aus wie eine Artikelnummer, nicht wie eine Nummer,
   die man anruft. */
.btn-num {
  font-family: var(--font-num);
  font-size: 16px;
  letter-spacing: -.01em;
  text-transform: none;
}
/* Der einzige rote Button der Seite: der Notruf. */
.btn-alarm {
  background: var(--alarm);
  border-color: var(--alarm);
  color: var(--on-alarm);
  font-family: var(--font-num);
  font-weight: 500;
  letter-spacing: -.02em;
  text-transform: none;
}
.btn-alarm:hover { background: var(--alarm-deep); border-color: var(--alarm-deep); }

.link-more {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--copper-bright);
  padding-bottom: 2px;
  color: var(--copper);
}
.link-more:hover { color: var(--copper-deep); }

/* ---------- Triage ------------------------------------------ */
.triage { background: var(--paper-2); }
.triage-head { margin-bottom: 34px; }
.triage-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  align-items: start;
}
.triage-form { grid-column: 1 / 8; }
.triage-out { grid-column: 8 / 13; }

.tstep { border: 0; padding: 0; margin: 0 0 26px; }
.tstep legend {
  padding: 0;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.tstep legend b {
  font-family: var(--font-num);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--copper);
  margin-right: 8px;
}
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.opt span {
  display: block;
  padding: 9px 15px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink-2);
}
.opt input:hover + span { border-color: var(--copper-bright); }
.opt input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.opt input:focus-visible + span {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

/* Werkstattzettel: durchgefaerbter Kopfbalken, darunter der Block.
   Bewusst keine farbige Kante an einer gepolsterten Box, das Motiv
   steht auf dieser Website nur noch an den zwei Kontaktwegen. */
.tresult {
  border: 1px solid var(--line);
  background: var(--paper);
}
.tresult .tr-state {
  background: var(--ink);
  color: var(--paper);
  padding: 11px 24px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  max-width: none;
}
.tresult[data-alarm="1"] .tr-state { background: var(--alarm); color: var(--on-alarm); }
.tresult .tr-body { padding: 22px 24px 26px; }
.tresult > .tr-state + h3,
.tresult .tr-body > h3:first-child { margin-bottom: 4px; }
.tresult h3 { margin-bottom: 4px; }
.tr-hint {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--paper-2);
  font-size: 15px;
  color: var(--ink-2);
}
.tr-row { margin-top: 18px; }
.tr-row p { margin-top: 5px; font-size: 16px; }
.tr-row .num { display: block; margin-top: 5px; font-size: 16px; }
.tr-actions {
  display: flex;
  flex-wrap: wrap;
  /* Mitte statt Streckung: sonst zieht sich der Textlink auf
     Buttonhoehe und seine Unterlinie rutscht nach unten weg. */
  align-items: center;
  gap: 12px 22px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.tr-copy {
  background: none;
  border: 1px solid var(--line);
  padding: 13px 20px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.tr-copy:hover { border-color: var(--copper-bright); color: var(--copper); }
.tr-copyfield {
  width: 100%;
  margin-top: 12px;
  min-height: 110px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: 10px 12px;
  font-size: 14px;
}
.tresult > h3,
.tresult > .tr-fallback,
.tresult > .tr-actions { margin-inline: 24px; }
.tresult > .tr-actions { margin-bottom: 26px; }
.tresult > h3 { margin-top: 22px; }
.tr-fallback > li { margin-bottom: 14px; }
.tr-fallback .label { margin-bottom: 3px; }

/* ---------- Auftragsbuch ("Diese Woche gelaufen") ------------ */
.jobs { list-style: none; padding: 0; }
.jobs li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.jobs li:first-child { border-top: 1px solid var(--line); }
.job-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
}
.job-ort {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .01em;
  color: var(--ink);
}
.job-gew {
  margin-left: auto;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.job-txt { font-size: 16px; }
/* Volle Breite: Beschreibung und Zahl stehen nebeneinander statt
   untereinander, sonst laeuft der Text auf 1180px ins Leere. */
.jobs-weit li { grid-template-columns: minmax(0, 1fr) minmax(150px, auto); }
.jobs-weit .job-top { grid-column: 1 / -1; }
.jobs-weit .job-fig { text-align: right; align-self: baseline; }
.job-fig {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -.02em;
  color: var(--copper);
}

/* ---------- Materialflaechen -------------------------------- */
.mat {
  position: relative;
  padding: clamp(38px, 5vw, 62px) clamp(26px, 4vw, 54px);
  color: var(--on-steel);
}
/* h1 gehoert in die Liste: die Ueberschrift der Heizungsseite steht
   auf Kupfer und faellt sonst auf --ink zurueck (2.1:1). */
.mat h1, .mat h2, .mat h3 { color: var(--on-steel); }
.mat p { color: var(--on-steel); }
.mat .label { color: var(--on-steel-2); }
/* Kupfer ist heller als Stahl: dort traegt nur --on-copper.
   Gegen den hellsten Streifen der Riefung 6.50:1. */
.mat-copper h1,
.mat-copper h2,
.mat-copper h3,
.mat-copper p { color: var(--on-copper); }

/* Ruhige Materialfarben. Die Aufnahme daneben zeigt das Gewerk,
   dafuer braucht die Flaeche kein gerechnetes Muster. */
.mat-copper { background-color: var(--copper-mid); }
.mat-tile { background-color: var(--water); }
.mat-steel { background-color: var(--steel); }

figure.bild { display: block; margin: 0; }
/* Formensprache dieser Demo: kantig. Das bleibt so, ein
   Handwerksbetrieb darf hart aussehen. Nur die Aufnahmen bekommen
   2px, damit die Ecke nicht ins Papier sticht. */
figure.bild img,
figure.bild video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  background: var(--steel);
}
figure.bild figcaption {
  margin-top: 10px;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bild-band img,
.bild-band video { aspect-ratio: 16 / 7; object-fit: cover; }
.bild-hoch img { aspect-ratio: 4 / 5; object-fit: cover; }
.mat .bild figcaption { color: var(--on-steel-2); }

/* Material links, Aufnahme rechts. Unter 900px sitzt das Bild ueber
   dem Text, sonst wird die Textspalte zu schmal fuer die Headline. */
.mat-mit-bild .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.leistungen { display: grid; gap: 4px; }
/* Fliesstext bleibt schmal, die Headline darf breiter laufen,
   sonst bricht der Browser die handgesetzten Zeilen erneut um. */
.mat-body { max-width: none; }
.mat-body p { margin-top: 14px; max-width: 56ch; }
.mat-body h1, .mat-body .mat-big { max-width: 19ch; }
.mat-anker {
  display: block;
  margin-top: 22px;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--on-steel);
}
.mat .link-more {
  color: var(--on-steel);
  border-bottom-color: var(--on-steel-2);
  margin-top: 20px;
}
.mat .link-more:hover { color: var(--paper); border-bottom-color: var(--paper); }
.mat-copper .mat-anker,
.mat-copper .link-more { color: var(--on-copper); }
/* Kupferflaeche: das Label braucht mehr Helligkeit als auf Stahl
   (--on-steel-2 kaeme dort nur auf 4.0:1, zu wenig fuer 12px). */
.mat-copper .label { color: var(--on-copper); }

/* Gross gesetzte Headline auf Material */
.mat-big {
  font-size: clamp(24px, 5.2vw, 46px);
  line-height: .95;
  letter-spacing: -.02em;
}

/* ---------- Mannschaft -------------------------------------- */
.crew {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--gut) clamp(20px, 3vw, 40px);
  margin-top: 34px;
}
.crew > li { list-style: none; }
/* Keine Portraits: von den freien Aufnahmen passt keine zu diesen
   vier Rollen, erfundene Gesichter waeren schlechter als keine.
   Die Namen stehen fuer sich, oben laeuft die Werkstattaufnahme. */
.crew > li { border-top: 1px solid var(--line); padding-top: 12px; }
.crew h3 { margin-bottom: 3px; }
.crew-rolle {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.crew-num {
  display: block;
  margin-top: 8px;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -.02em;
  color: var(--ink-2);
}

/* ---------- Preise: die einzige Tabelle der Website ---------- */
/* Schmale Geraete: die Tabelle scrollt in sich, die Seite nicht. */
.tab-scroll { overflow-x: auto; }
.tab-scroll:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.preistab {
  min-width: 460px;
  width: 100%;
  border-collapse: collapse;
  margin-top: 26px;
  text-align: left;
}
.preistab caption {
  text-align: left;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 12px;
}
.preistab th, .preistab td {
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}
.preistab thead th {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--ink);
}
.preistab tbody th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.preistab td { font-size: 16px; }
.preistab .zahl {
  font-family: var(--font-num);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- Einsatzgebiet ----------------------------------- */
.orte {
  list-style: none;
  padding: 0;
  margin-top: 26px;
  columns: 2;
  column-gap: clamp(24px, 4vw, 56px);
}
.orte-drei { columns: 3; }
.orte li {
  break-inside: avoid;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.orte .o-name { color: var(--ink); }
.orte .o-zeit {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -.02em;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ---------- Dunkelband -------------------------------------- */
.band {
  background: var(--steel);
  color: var(--on-steel);
}
.band h2, .band h3 { color: var(--on-steel); }
.band p { color: var(--on-steel); }
.band .label { color: var(--on-steel-2); }
/* Alles, was sonst hart auf --ink faellt, muss auf dem Dunkelband
   und auf den Materialflaechen die helle Farbe erben. Sonst steht
   schwarzer Text auf dunklem Grund. */
.band strong, .band b, .mat strong, .mat b { color: inherit; }
.band .marg .marg-val { color: var(--on-steel); }
.mat-copper .bild figcaption,
.mat-tile .bild figcaption,
.mat-tile .label { color: var(--on-copper); }
.band a.link-more { color: var(--on-steel); border-bottom-color: var(--on-steel-2); }
.band a.link-more:hover { color: var(--paper); }
.band .num { color: var(--on-steel); }
.band .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.band .band-tel {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: clamp(23px, 2.9vw, 30px);
  letter-spacing: -.02em;
  color: var(--on-steel);
  border-bottom: 2px solid var(--copper-bright);
  display: inline-block;
  padding-bottom: 3px;
}

/* ---------- Kontaktband (alle Seiten) ----------------------- */
.kband { padding-block: var(--pad); }
.kband-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  align-items: start;
}
.kband-grid > .k-a { grid-column: 1 / 8; }
.kband-grid > .k-b { grid-column: 9 / 13; }
.kband-ways {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 26px;
}
.kband-open { margin-top: 22px; font-size: 15px; }

/* ---------- Symptome (Heizung) ------------------------------ */
.sympt {
  list-style: none;
  padding: 0;
  margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 0 clamp(24px, 4vw, 56px);
}
.sympt > li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.sympt h3 { margin-bottom: 6px; }
.sympt p { font-size: 16px; }
.sympt .s-fig {
  display: block;
  margin-top: 8px;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -.02em;
  color: var(--copper);
}

/* ---------- Zeitleiste -------------------------------------- */
.tl { list-style: none; padding: 0; margin-top: 34px; }
.tl > li {
  display: grid;
  grid-template-columns: minmax(96px, 132px) minmax(0, 1fr);
  gap: 10px clamp(18px, 3vw, 34px);
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.tl > li:last-child { border-bottom: 1px solid var(--line); }
.tl-when {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -.02em;
  color: var(--copper);
  padding-top: 3px;
}
.tl h3 { margin-bottom: 5px; }
.tl p { font-size: 16px; }

/* ---------- Beispielprojekte -------------------------------- */
.cases {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  margin-top: 34px;
}
.case {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.case h3 { margin-bottom: 10px; }
.case p { font-size: 16px; margin-top: 10px; }
.case-sum {
  display: block;
  margin-top: 18px;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -.02em;
  color: var(--ink);
}

/* ---------- Wartung: was drin ist, was nicht ---------------- */
.wart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gut) clamp(24px, 4vw, 56px);
  margin-top: 30px;
}
.wart ul { list-style: none; padding: 0; margin-top: 12px; }
.wart li {
  padding: 9px 0 9px 22px;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-size: 16px;
}
.wart li::before {
  position: absolute;
  left: 0;
  top: 9px;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 13px;
  color: var(--copper);
}
.wart-in li::before { content: "+"; }
.wart-out li::before { content: "\2013"; color: var(--ink-3); }

/* ---------- Fragen, offen sichtbar -------------------------- */
.faq {
  margin-top: 30px;
  columns: 2;
  column-gap: clamp(36px, 6vw, 84px);
}
.faq > div {
  break-inside: avoid;
  padding-bottom: 24px;
}
.faq h3 { margin-bottom: 8px; }
.faq p { font-size: 16px; }

/* ---------- Kontaktseite ------------------------------------ */
.wege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gut) clamp(24px, 4vw, 56px);
  margin-top: 40px;
}
.weg { border-top: 4px solid var(--copper-bright); padding-top: 20px; }
.weg-alarm { border-top-color: var(--alarm); }
.weg h2 { font-size: clamp(22px, 2.2vw, 27px); }
.weg p { font-size: 16px; margin-top: 10px; }
.weg-tel {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: clamp(22px, 4vw, 31px);
  letter-spacing: -.02em;
  color: var(--copper);
  border-bottom: 3px solid var(--copper-bright);
  padding-bottom: 3px;
}
.weg-alarm .weg-tel { color: var(--alarm); border-bottom-color: var(--alarm); }

.form-field { margin-bottom: 20px; }
.form-field label {
  display: block;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  font-size: 16px;
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--copper);
  outline: none;
}
.form-note {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--paper-2);
  font-size: 15px;
  color: var(--ink-2);
}

/* Rufbereitschaft: die einzige Definitionsliste der Website. */
.ruf {
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.ruf div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.ruf dt {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  min-width: 150px;
}
.ruf dd {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}
.ruf div { padding-inline: 8px; margin-inline: -8px; }
.ruf div.is-heute { background: var(--paper-2); }
.ruf div.is-heute dt { color: var(--ink); }
.ruf div.is-heute dd { font-weight: 600; }
.ruf dd.ruf-tel {
  margin-left: auto;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.02em;
  color: var(--copper);
}

/* Anfahrtsskizze, rein geometrisch: Strassenkreuz, keine Karte. */
.skizze {
  margin-top: 26px;
  position: relative;
  height: 260px;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.skizze i {
  position: absolute;
  display: block;
  background: var(--line);
}
.skizze .s-h { left: 0; right: 0; top: 118px; height: 22px; }
.skizze .s-v { top: 0; bottom: 0; left: 168px; width: 22px; }
.skizze .s-hof {
  left: 214px; top: 34px;
  width: 118px; height: 68px;
  background: var(--copper);
}
.skizze b {
  position: absolute;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.skizze .l-1 { left: 14px; top: 88px; }
.skizze .l-2 { left: 200px; bottom: 18px; }
.skizze .l-3 { left: 214px; top: 110px; color: var(--copper); }

/* ---------- Fusszeile --------------------------------------- */
.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 44px;
  font-size: 15px;
  color: var(--ink-3);
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px clamp(30px, 5vw, 70px);
}
.foot-grid > div { min-width: 200px; }
.foot-brand {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
.site-foot a { border-bottom: 1px solid var(--line); }
.site-foot a:hover { color: var(--copper); border-bottom-color: var(--copper-bright); }
.foot-demo { margin-left: auto; }

/* ---------- Umbruchpunkte ----------------------------------- */
@media (max-width: 1180px) {
  .orte { column-gap: 34px; }
  .orte-drei { columns: 2; }
}

@media (max-width: 900px) {
  main::after { display: none; }
  .split > .main-col,
  .split > .side-col,
  .triage-form,
  .triage-out,
  .split.flip > .intro-col,
  .split.flip > .main-col,
  .kband-grid > .k-a,
  .kband-grid > .k-b { grid-column: 1 / -1; }
  .intro-col { margin-bottom: 26px; }
  .voll > .kopf-breit { max-width: none; }
  /* Marginalie klappt unter ihren eigenen Abschnitt und wird zur
     einzeiligen Kupferlinie mit Label. */
  .marg {
    border-top: 1px solid var(--line);
    padding-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 18px;
  }
  .marg .marg-val { margin-top: 0; }
  .marg p { margin-top: 0; flex: 1 1 260px; }
  .kband-grid > .k-b { margin-top: 34px; }
  /* Nebeneinander bleiben beide Schaltflaechen gleich breit, statt dass
     die Nummer als schwarzer Klotz neben einem schmalen Rahmen steht. */
  .kband-ways .btn { flex: 1 1 200px; justify-content: center; }
}

@media (max-width: 640px) {
  body {
    padding-left: 0;
    padding-bottom: 64px;
  }
  /* Telefongrad bleibt oben. Die Headlines dagegen muessen mit der
     Spaltenbreite mitgehen, sonst bricht der Browser die handgesetzten
     Zeilen ein zweites Mal um. Werte sind an der laengsten gesetzten
     Zeile gemessen, nicht geschaetzt. */
  h1 { font-size: min(7vw, 40px); }
  .hero h1 { font-size: min(8.2vw, 38px); }
  .mat-big { font-size: min(8.2vw, 34px); }
:root { --ft-links: 0px; --ft-boden: 64px; --boden: 64px; }
  .status {
    left: 0; right: 0; top: auto; bottom: 0;
    width: auto; height: 64px;
    flex-direction: row;
    justify-content: space-between;
    gap: 14px;
    padding: 0 16px;
    border-right: 0;
    border-top: 1px solid var(--copper-deep);
  }
  body[data-status="notdienst"] .status { border-top-color: var(--alarm-deep); }
  .status-rot {
    writing-mode: horizontal-tb;
    transform: none;
    height: auto;
    gap: 12px;
    min-width: 0;
  }
  .status-mark { display: none; }
  /* Querbalken unten: Zustand und Nummer stehen ungekuerzt, Name und
     Zusatz fallen weg. Nichts wird abgeschnitten. */
  .status-who, .status-extra { display: none; }
  .orte, .orte-drei { columns: 1; }
  .sympt, .wart, .cases { grid-template-columns: minmax(0, 1fr); }
  .faq { columns: 1; }

  .mat-mit-bild .wrap { grid-template-columns: minmax(0, 1fr); }
  .tl > li { grid-template-columns: minmax(0, 1fr); }
  .jobs-weit li { grid-template-columns: minmax(0, 1fr); }
  .jobs-weit .job-fig { text-align: left; }
  .demo-bar .demo-back { margin-right: 0; }
}

/* Impressum: laufende Liste, Trennlinie oben statt Kasten */
.imp { max-width: 62ch; }
.imp > div { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); }
.imp > div:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.imp p { margin-top: 6px; color: var(--ink-2); }


/* Auf schmalen Geraeten nur die Kurzfassung, sonst frisst der
   Vorschau-Hinweis vier Zeilen ueber dem eigentlichen Kopf. */
.demo-kurz { display: none; }
@media (max-width: 640px) {
  .demo-lang { display: none; }
  .demo-kurz { display: inline; }
}
@media (max-width: 640px) {
  .demo-bar { font-size: .72rem; }
  .demo-bar .wrap { gap: 3px 14px; padding-block: 6px; }
  .demo-bar span { flex: 0 1 auto; }
  .demo-bar .lang-toggle { margin-left: auto; padding: 2px 8px; }
}

/* ---------- Formularpruefung -------------------------------- */
.feld-fehler {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--copper-bright);
}
.feld-fehler[hidden] { display: none; }
[aria-invalid="true"] {
  border-color: var(--copper-bright) !important;
  background: color-mix(in oklab, var(--copper-bright) 7%, var(--paper));
}
.fehler-sammel {
  margin-bottom: 22px;
  padding: 14px 16px;
  border-left: 3px solid var(--copper-bright);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.fehler-sammel[hidden] { display: none; }
.fehler-sammel p { font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.fehler-sammel ul { margin: 9px 0 0; padding-left: 1.1rem; font-size: 15px; }
.fehler-sammel li + li { margin-top: 5px; }
.fehler-sammel a { color: var(--copper-bright); }

/* Kopf am Telefon: Name, Zusatzzeile und Navigation ergaben drei
   Zeilen. Zusatzzeile haengt sich an den Namen, Navigation darunter. */
@media (max-width: 640px) {
  .head-in { padding-block: 12px; gap: 6px 18px; align-items: center; }
  .brand { font-size: 17px; }
  .brand-sub { font-size: 11px; flex: 1 0 100%; }
  .site-nav { margin-left: 0; flex: 1 0 100%; gap: 4px 16px; }
}

/* Der Kopf zeigt die Werkstatt. Hoehe gedeckelt, damit die Aufnahme
   den Notruf darunter nicht aus dem ersten Bildschirm draengt. */

/* ---------- Zurueck nach oben ------------------------------- */
/* Kantig wie alles hier, kein Radius. */
.nach-oben {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: calc(clamp(0.75rem, 2vw, 1.5rem) + var(--boden, 0px));
  z-index: 900;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
}
.nach-oben[hidden] { display: none; }
.nach-oben:hover { background: var(--paper-2); color: var(--copper); border-color: var(--copper-bright); }
.nach-oben:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.nach-oben span {
  width: 11px;
  height: 11px;
  margin-top: 3px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(-45deg);
}

/* ---------- Karte und Weitersagen ---------------------------
   Kantige Formensprache: rechte Winkel, Haarlinie, kein Radius.
   Der Lageplan laedt erst auf Klick, vorher geht keine Anfrage
   an OpenStreetMap. */
.karte-feld {
  margin-top: 24px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: 20px;
  display: grid;
  gap: 12px;
  justify-items: start;
}
.karte-feld[data-geladen] { padding: 0; }
.karte-knopf {
  font-family: inherit;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--paper);
  font-family: var(--font-head);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 12px 22px;
  cursor: pointer;
}
.karte-knopf:hover { background: var(--copper-deep); border-color: var(--copper-deep); }
.karte-notiz {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 46ch;
}
.karte-rahmen { display: block; width: 100%; height: clamp(240px, 42vw, 360px); border: 0; }

.teilen {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 28px;
}
.teilen-titel {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.teilen-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-size: 16px;
}
.teilen-liste a, .teilen-kopie {
  color: var(--ink-2);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--copper-bright);
  border-radius: 0;
  padding: 0 0 3px;
  font: inherit;
  cursor: pointer;
}
.teilen-liste a:hover, .teilen-kopie:hover { color: var(--copper); }

/* Zwei Kartendienste, zwei Zeilen Abstand: nebeneinander laufen
   sie am Handy sonst zu einem Satz zusammen. */
.karte-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

/* Ein Bild direkt unter einer Ueberschrift braucht Luft, sonst
   klebt die Zeile auf der Kante. */
h1 + figure, h1 + .bild,
h2 + figure, h2 + .bild,
h3 + figure, h3 + .bild { margin-top: 26px; }

/* Am Handy ist eine dreispaltige Tabelle keine Tabelle mehr.
   Jede Zeile wird ein eigener Block: Position, Betrag, Bedingung
   untereinander. Damit faellt das seitliche Scrollen weg. */
@media (max-width: 640px) {
  .tab-scroll { overflow-x: visible; }
  .preistab { min-width: 0; display: block; margin-top: 20px; }
  .preistab caption { display: block; }
  .preistab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .preistab tbody, .preistab tr, .preistab th, .preistab td { display: block; }
  .preistab tr {
    border-bottom: 1px solid var(--line);
    padding-block: 14px;
  }
  .preistab tr:last-child { border-bottom: 0; }
  .preistab th, .preistab td { padding: 0; border: 0; }
  .preistab tbody th { font-size: 17px; }
  .preistab .zahl {
    font-size: 20px;
    margin-top: 4px;
    white-space: normal;
  }
  .preistab td:last-child {
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-3);
  }
}

/* ---------- Bild gross ---------------------------------------
   Seit dem 29.08.: Fotos lassen sich antippen. Die Lupe ist die
   einzige gemeinsame Mechanik der drei Demos, das Aussehen
   gehoert trotzdem jeder Demo selbst. */
figure img[role="button"] { cursor: zoom-in; }
.bild-schau {
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}
.bild-schau::backdrop { background: color-mix(in oklab, var(--ink) 82%, transparent); }
.bild-schau img {
  display: block;
  width: 100%;
  max-height: 78vh;
  height: auto;
  object-fit: contain;
  border-radius: 0;
}
.bild-schau-text {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--ink-2);
}
.bild-schau-zu { position: absolute; top: 12px; right: 12px; margin: 0; }
.bild-schau-zu button {
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}

/* ---------- Menue als Seitenleiste, seit dem 29.08. ----------
   Am Telefon lief die Hauptnavigation als lose Zeile aus und war
   je nach Seitenname zu breit. Sie faehrt jetzt als Leiste von
   rechts ein, der Knopf sitzt im Kopf. Am Schreibtisch bleibt
   alles wie es war, dort ist Platz fuer die Zeile. */
.menue-knopf, .menue-zu { display: none; }
.menue-schleier { display: none; }

@media (max-width: 700px) {
  .menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: none;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .menue-knopf .mk-striche { display: grid; gap: 3px; width: 16px; }
  .menue-knopf .mk-striche i { display: block; height: 1.5px; background: var(--copper); }

  .menue-schleier {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: color-mix(in oklab, var(--ink) 62%, transparent);
  }
  .menue-schleier[hidden] { display: none; }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    width: min(78vw, 320px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 64px 16px 16px;
    background: var(--paper);
    border-left: 1px solid var(--line);
    overflow-y: auto;
    transform: translateX(101%);
    transition: transform .2s ease-out;
  }
  [data-menue="ja"] .site-nav { transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .site-nav { transition: none; }
  }
  .site-nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.0625rem;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    color: var(--ink);
  }
  .site-nav a[aria-current] { color: var(--copper); }
  .menue-zu {
    display: block;
    position: absolute;
    top: 14px;
    right: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: 0;
    background: none;
    color: var(--ink);
  }
}

/* ---------- Kuerzer am Telefon, seit dem 29.08. --------------
   Die Startseite war 10.700 Pixel lang. Nichts davon ist
   ueberfluessig, es stand nur zu luftig untereinander.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .sec { padding-block: calc(var(--pad) * .7); }
  /* Zwoelf Orte in einer Spalte sind ein halber Bildschirm fuer
     zwei Woerter je Zeile. */
  .orte, .orte-drei { columns: 2; column-gap: var(--gut); }
  .orte li { padding-block: 9px; }
  /* Die aufgeloeste Tabelle stapelte drei Zeilen je Position.
     Position und Betrag stehen jetzt nebeneinander, die Bedingung
     darunter. Gleicher Inhalt, ein Drittel weniger Hoehe. */
  .preistab tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    padding-block: 11px;
  }
  .preistab .zahl { margin-top: 0; text-align: right; font-size: 18px; }
  .preistab td:last-child { grid-column: 1 / -1; margin-top: 2px; }
}

/* ---------- Notdienstplan am Telefon, 29.08. ----------------
   Sieben Zeilen Rufbereitschaft sind im Kopf einer Handy-Seite
   ein Drittel des Bildschirms, obwohl nur eine davon heute gilt.
   Am Telefon steht die heutige Zeile, der ganze Plan mit allen
   Nummern liegt eine Zeile weiter auf kontakt.html.
   ------------------------------------------------------------ */
.woche-link { display: none; }

@media (max-width: 640px) {
  .woche li:not(.is-heute) { display: none; }
  .woche-note { display: none; }
  .woche-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 15px;
    color: var(--copper);
  }
}

/* ---------- Weniger auf einmal, 29.08. ----------------------
   Vier Beispiele, vier Kollegen und zwoelf Orte sind am Rechner
   eine Uebersicht und am Telefon eine Wand. Die Haelfte steht,
   der Rest kommt auf Wunsch. Ohne Skript bleibt alles sichtbar,
   das Verstecken macht demo-extras.js.
   ------------------------------------------------------------ */
.mehr-knopf {
  display: none;
  margin-top: 14px;
  padding: 10px 0;
  border: 0;
  background: none;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper);
  cursor: pointer;
}
.mehr-knopf:hover { color: var(--copper-bright); }
.mehr-knopf[hidden] { display: none; }
/* Die Listen setzen ihre li selbst auf flex oder grid, das
   ueberschreibt das eingebaute hidden. Deshalb hier noch einmal
   ausdruecklich. */
.jobs li[hidden], .crew li[hidden], .orte li[hidden] { display: none; }

@media (max-width: 640px) {
  .mehr-knopf { display: block; }
}

/* ---------- Rufplan am Telefon, 29.08. ----------------------
   Tag, Name und Handynummer standen in einer Flex-Zeile. Bei 375
   Pixeln rutschte die Nummer allein in eine zweite Zeile und wurde
   dort nach rechts gedrueckt, was wie ein Fehler aussah. Am Telefon
   steht der Tag als Zeile darueber, Name und Nummer nebeneinander.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .ruf div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: baseline;
  }
  .ruf dt { grid-column: 1 / -1; min-width: 0; margin-bottom: 2px; }
  .ruf dd.ruf-tel { margin-left: 0; text-align: right; }
}