/* Elektro Nissberg, Runde 3 (30.09.2026), Neubau.
   Grundordnung: Musterleiste (nicht klebend), Kopf (klebt, 72 px), erster Bildschirm mit
   Überschrift oben und Foto über die volle Breite, Was wir machen, Besichtigung anfragen
   (Hauptfunktion), Abends geht jemand ran (Signatur), Drei Baustellen, Wer kommt, Kontakt, Fuß.
   Ein Rahmen: 77.5rem (1240 px), Seitenrand --rand überall gleich.
   Flächen: heller Grund, eine zweite Fläche (Hellblau) für Abends und Kontakt, dunkler Fuß.
   Umbrüche: 48em (768 px) und 64em (1024 px); Handy-Regeln enden bei 47.99em.

   Radien (R106), nur diese Werte:
     14px  Fotos, Tafeln, Karten
      6px  Knöpfe, Felder, Wahlfelder, Rückmeldungen
     50 %  Kontrolllicht
   Kein Verlauf (R105), kein Milchglas (R107), keine Farbbalken am Rand, keine weichen Schatten. */

@font-face { font-family: "Bricolage Grotesque"; src: url("schriften/bricolage-grotesque-variabel.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: optional; }
@font-face { font-family: "Instrument Sans"; src: url("schriften/instrument-sans-variabel.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: optional; }

:root {
  --grund: #f6f5f3; /* heller, warm-neutraler Grund */
  --flaeche: #f1ece8; /* zweite Fläche: helles Warmgrau */
  --weiss: #ffffff;
  --linie: #e2ddd9;
  --linie-flaeche: #dbd3cd;
  --feldrand: #8c837d; /* 3,7 : 1 auf Weiß */
  --tinte: #1d1a18; /* 15,9 : 1 auf Grund */
  --leise: #57504b; /* 7,3 : 1 auf Grund, 6,7 : 1 auf Fläche */
  --signal: #b8231a; /* Hausfarbe Signalrot (01.10.2026, vorher Blau #1c58ab wie der Fahrradladen); Weiß darauf 6,4 : 1, als Link 5,9 : 1 auf Grund */
  --signal-tief: #8f1a13; /* Hover, Weiß darauf 9,0 : 1 */
  --gruen: #2f9e5b;        /* nur Kontrolllicht: jemand geht ran */
  --gruen-tief: #1d7a45;   /* dasselbe als Schrift, 5,0 : 1 auf Grund */
  --rot-tief: #b3402b;     /* nur: niemand da, Fehler */
  --zettel: #fff3bf;       /* Zettel „Ihre Anfrage“ und „heute“ im Wochenplan */
  --anthrazit: #1f2328; /* Fuß: Anthrazit statt Marineblau */
  --hell: #eeebe8; /* Schrift auf Anthrazit, 13,3 : 1 */
  --hell-leise: #b9b2ac; /* 7,5 : 1 auf Anthrazit */
  --leiste: #22272e;       /* Musterleiste */

  --titel: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", sans-serif;
  --text: "Instrument Sans", "Segoe UI", Arial, sans-serif;
  --rahmen: 77.5rem;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --kopf-h: 72px;
  --abstand: clamp(3rem, 2rem + 3vw, 5rem);
  --radius-gross: 14px;
  --radius-klein: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body {
  margin: 0; background: var(--grund); color: var(--tinte);
  font-family: var(--text); font-size: 1.0625rem; line-height: 1.6;
  overflow-x: clip; font-optical-sizing: auto;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--signal); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--signal-tief); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--titel); font-weight: 700; line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.01em; overflow-wrap: break-word; }
h1 { hyphens: manual; }
h2, h3 { hyphens: auto; }
h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; max-width: 65ch; }
.klein { font-size: .9375rem; color: var(--leise); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mitte { width: 100%; max-width: var(--rahmen); margin-inline: auto; padding-inline: var(--rand); }
[id] { scroll-margin-top: calc(var(--kopf-h) + 1rem); }
[hidden] { display: none !important; }
.nur-js { display: none; }
.js .nur-js { display: block; }

.sprung { position: absolute; left: .5rem; top: -5rem; background: var(--tinte); color: #fff; padding: .7rem 1rem; z-index: 90; font-weight: 600; }
.sprung:focus { top: .5rem; color: #fff; }

/* ---------- Knöpfe (ein Wortlaut je Absicht) ---------- */
.knopf, .knopf-linie {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .55rem 1.3rem; border-radius: var(--radius-klein); border: 1px solid transparent;
  font-family: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.knopf { background: var(--signal); color: #fff; border-color: var(--signal); }
.knopf:hover { background: var(--signal-tief); border-color: var(--signal-tief); color: #fff; }
.knopf-linie { background: var(--weiss); color: var(--tinte); border-color: var(--tinte); }
.knopf-linie:hover { background: var(--tinte); color: #fff; }
.knopf-gross { min-height: 54px; padding-inline: 1.6rem; font-size: 1.0625rem; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- Musterleiste (R109, R60), nicht klebend ---------- */
.nw-musterleiste { background: var(--leiste); color: #fff; font-family: var(--text); font-size: .875rem; line-height: 1.35; }
.nw-musterleiste .mitte { display: flex; flex-wrap: wrap; gap: 0 1.5rem; align-items: center; justify-content: space-between; }
.nw-musterleiste .nw-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; }
.nw-musterleiste a { color: #fff; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; border-radius: var(--radius-klein); }
.nw-musterleiste a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nw-musterleiste a.nw-cta { text-decoration: underline; font-weight: 600; }
.nw-musterleiste .nw-ki { color: #5fd38a; font-weight: 600; }
.nw-musterleiste .nw-lang { display: none; }
@media (min-width: 80em) { .nw-musterleiste .nw-lang { display: inline; } }
@media (max-width: 59.99em) { .nw-musterleiste .nw-mittel { display: none; } }
@media (max-width: 47.99em) { .nw-musterleiste .mitte { gap: 0 .4rem; } .nw-musterleiste a { padding: 0 .5rem; } }
@media print { .nw-musterleiste { display: none; } }

/* ---------- Kopf: eine Zeile, die einzige klebende Leiste ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.marke { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; color: var(--tinte); text-decoration: none; margin-right: auto; }
.marke:hover { color: var(--tinte); }
.marke-zeichen { width: 34px; height: 34px; flex: none; }
.marke-text { display: flex; flex-direction: column; line-height: 1.1; }
.marke-name { font-family: var(--titel); font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; }
.marke-ort { font-size: .875rem; color: var(--leise); }
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue a { color: var(--tinte); text-decoration: none; font-weight: 600; }
.menue a:hover { color: var(--signal); }
.kopf-tel { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; min-width: 44px; color: var(--tinte); font-weight: 600; text-decoration: none; white-space: nowrap; }
.kopf-tel svg { color: var(--signal); flex: none; }
.kopf-tel-nummer { display: none; }
.kopf-knopf { display: none; }
.menue-auf { display: none; min-height: 44px; padding: 0 1rem; border: 1px solid var(--tinte); border-radius: var(--radius-klein); background: var(--weiss); color: var(--tinte); font: 600 1rem var(--text); cursor: pointer; }

/* Handy, Tablet und kleine Laptops: Menü klappt unter den Kopf. Prüfung 01.10.2026: Grenze von 64em auf 75em,
   darunter brachen Marke, Menüpunkte und Knopf mehrzeilig um (auch bei 1440 px, solange die Nummer daneben stand). */
@media (max-width: 74.99em) {
  .js .menue-auf { display: inline-flex; align-items: center; }
  .kopf-tel { border: 1px solid var(--linie); border-radius: var(--radius-klein); }
  .menue { order: 5; flex-basis: 100%; }
  .menue ul { display: flex; flex-wrap: wrap; gap: 0 .25rem; padding-bottom: .5rem; }
  .menue a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6rem; }
  .menue .menue-knopf-zeile { flex-basis: 100%; }
  .menue .menue-knopf-zeile a { display: flex; margin: .25rem 0 .5rem; padding: 0 1.25rem; }
  .js .menue { display: none; }
  .js .kopf.offen .menue { display: block; }
  .js .menue ul { flex-direction: column; padding: .25rem 0 .75rem; border-top: 1px solid var(--linie); }
  .js .menue li:not(.menue-knopf-zeile) a { display: flex; font-size: 1.125rem; border-bottom: 1px solid var(--linie); min-height: 52px; }
  .kopf-innen { flex-wrap: wrap; gap: .5rem; }
}
/* Handy (Prüfung 01.10.2026, Runde 4): Marke, Telefon und „Menü“ in einer Zeile; vorher rutschte „Menü“ bei 320–375 px allein in eine zweite Zeile */
@media (max-width: 29.99em) {
  .marke-ort { display: none; } .marke-name { font-size: 1.15rem; } .marke { gap: .5rem; }
  .marke-zeichen { width: 30px; height: 30px; }
  .kopf-innen { gap: .4rem; } .menue-auf { padding: 0 .75rem; }
}
@media (max-width: 22em) {
  .marke-name { font-size: 1rem; } .marke { gap: .4rem; }
  .marke-zeichen { width: 28px; height: 28px; }
  .kopf-innen { gap: .35rem; } .menue-auf { padding: 0 .5rem; }
}
@media (min-width: 75em) {
  .kopf-innen { min-height: var(--kopf-h); gap: 1rem; }
  .marke-name, .marke-ort, .menue a, .kopf-knopf { white-space: nowrap; }
  .marke, .kopf-tel, .kopf-knopf { flex: none; }
  .menue ul { display: flex; gap: 0; }
  .menue a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; border-radius: var(--radius-klein); }
  .menue .menue-knopf-zeile { display: none; }
  .kopf-knopf { display: inline-flex; }
}
/* Die Nummer steht am Rechner nur als Symbol im Kopf (aria-label nennt sie), groß steht sie im Aufmacher. */

/* ---------- Erster Bildschirm: Überschrift oben, Foto über die volle Breite ---------- */
.aufmacher { padding-top: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.aufmacher-text { display: grid; gap: 1rem; margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.aufmacher h1 { font-size: clamp(2.1rem, 1.35rem + 2.7vw, 3.5rem); font-weight: 800; line-height: 1.05; max-width: 20ch; margin-bottom: .15em; }
.aufmacher-satz { font-size: clamp(1.0625rem, 1rem + .35vw, 1.2rem); color: var(--leise); max-width: 58ch; margin: 0 0 1.1rem; }
.knopfzeile { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.erreichbar { display: flex; align-items: flex-start; gap: .6rem; margin: 0; font-size: .9375rem; color: var(--leise); max-width: 60ch; }
.erreichbar .licht { flex: none; width: 12px; height: 12px; margin-top: .4em; border-radius: 50%; background: #9aa5b3; box-shadow: 0 0 0 3px rgba(29, 26, 24, .07); }
.erreichbar[data-zustand="an"] .licht { background: var(--gruen); box-shadow: 0 0 0 3px rgba(47, 158, 91, .22); }
.erreichbar[data-zustand="an"] strong { color: var(--gruen-tief); }
.erreichbar[data-zustand="aus"] .licht { background: #8c837d; }
.aufmacher-foto { margin: 0; }
.aufmacher-bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 35%; background: var(--flaeche); }
.aufmacher-foto figcaption { font-size: .9375rem; color: var(--leise); padding-top: .6rem; }
@media (min-width: 48em) { .aufmacher-bild { aspect-ratio: 16 / 9; object-position: 50% 30%; } }
/* Handy und Tablet (Hugos Wahl 01.10.2026, Variante C): Foto oben, die Überschrift liegt in Weiß auf einem dunklen
   Verlauf am unteren Bildrand, darunter Text und Knöpfe. Die Bildunterschrift entfällt (die Namen stehen im alt-Text). */
@media (max-width: 63.99em) {
  .aufmacher { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .aufmacher-text { display: contents; }
  .aufmacher-foto { grid-row: 1; grid-column: 1; position: relative; }
  .aufmacher-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(22, 20, 19, .86) 0%, rgba(22, 20, 19, .45) 45%, rgba(22, 20, 19, 0) 75%); }
  .aufmacher-bild { aspect-ratio: 1 / 1; object-position: 55% 30%; }
  .aufmacher-foto figcaption { display: none; }
  .aufmacher h1 { grid-row: 1; grid-column: 1; align-self: end; position: relative; z-index: 2; color: #fff; margin: 0; padding: 0 var(--rand) 1.1rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
  .aufmacher-rechts { grid-row: 2; padding: 1.25rem var(--rand) 0; }
}
@media (min-width: 48em) and (max-width: 63.99em) { .aufmacher-bild { aspect-ratio: 16 / 9; } }
/* Rechner (Einstieg C auch hier): Teamfoto füllt den ersten Bildschirm, Überschrift links und Text rechts stehen
   in Weiß unten auf dem dunklen Verlauf; die Bildunterschrift steht unter dem Foto. */
@media (min-width: 64em) {
  .aufmacher { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .aufmacher::before { content: ""; grid-row: 1; grid-column: 1; position: relative; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(22, 20, 19, .92) 0%, rgba(22, 20, 19, .74) 40%, rgba(22, 20, 19, .3) 66%, rgba(22, 20, 19, 0) 84%); }
  .aufmacher-foto { display: contents; }
  .aufmacher-bild { grid-row: 1; grid-column: 1; aspect-ratio: auto; height: clamp(32rem, 100svh - 8rem, 46rem); object-position: 50% 28%; }
  .aufmacher-foto figcaption { grid-row: 2; }
  .aufmacher-text { grid-row: 1; grid-column: 1; align-self: end; position: relative; z-index: 2; margin-bottom: 0; padding-bottom: 2.25rem;
    grid-template-columns: 7fr 5fr; align-items: end; gap: 1rem 4rem; }
  .aufmacher h1 { margin-bottom: 0; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
  .aufmacher-satz { margin-bottom: 1rem; color: rgba(255, 255, 255, .92); }
  .aufmacher .knopf-linie { background: transparent; color: #fff; border-color: #fff; }
  .aufmacher .knopf-linie:hover { background: #fff; color: var(--tinte); }
  .erreichbar { margin-bottom: .25rem; color: rgba(255, 255, 255, .88); }
  .erreichbar[data-zustand="an"] strong { color: #8fe3ad; }
  .aufmacher :focus-visible { outline-color: #fff; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--abstand); }
.abschnitt h2 { margin-bottom: .45em; }
.einleitung { color: var(--leise); font-size: 1.125rem; }

/* ---------- Was wir machen: Foto links, Liste rechts ---------- */
.machen-raster { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.machen-foto { margin: 0; }
.machen-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-gross); }
.machen-foto figcaption { font-size: .9375rem; color: var(--leise); padding-top: .6rem; }
.leistungen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--linie); }
.leistung { min-width: 0; padding: 1rem 0 1.1rem; border-top: 1px solid var(--linie); }
.leistung-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; }
.leistung h3 { margin: 0; font-size: 1.2rem; }
.preis { margin: 0; font-weight: 600; color: var(--signal); font-variant-numeric: tabular-nums; }
.leistung p { margin: .3rem 0 0; color: var(--leise); font-size: 1rem; max-width: 42ch; }
.ausserdem { margin: .9rem 0 0; font-size: 1rem; color: var(--leise); }
.preise-raster { display: grid; gap: 1.25rem; margin-top: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.gilt-immer, .abo { min-width: 0; border-radius: var(--radius-gross); padding: 1.25rem 1.4rem; }
.gilt-immer { background: var(--weiss); border: 1px solid var(--linie); }
.gilt-immer h3, .abo h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.gilt-immer dl { margin: 0; display: grid; gap: .4rem; }
.gilt-immer div { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; }
.gilt-immer dt { color: var(--leise); font-size: 1rem; }
.gilt-immer dd { margin: 0; font-weight: 600; font-size: 1rem; }
.abo { background: var(--flaeche); }
.abo p { font-size: 1rem; margin-bottom: .5rem; }
.abo-preis { font-weight: 600; color: var(--signal); }
.abo-wege { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; margin-top: .4rem; }
@media (min-width: 48em) {
  .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
  .preise-raster { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64em) {
  .machen-raster { grid-template-columns: 4fr 8fr; gap: 3.5rem; align-items: start; }
  .machen-foto img { aspect-ratio: 4 / 5; }
  .machen-intro .einleitung { max-width: 34ch; }
}
@media (max-width: 22em) { .gilt-immer div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ---------- Hauptfunktion: Besichtigung anfragen ---------- */
.besichtigung-kopf { max-width: 62ch; margin-bottom: 1.5rem; }
.anfrage-tafel { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: 1.25rem; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.anfrage-tafel fieldset { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.anfrage-tafel legend { font-family: var(--titel); font-weight: 700; font-size: 1.15rem; padding: 0; margin-bottom: .6rem; }
.legende-zusatz { font-family: var(--text); font-weight: 400; font-size: .9375rem; color: var(--leise); margin-left: .35rem; }
.wahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.wahl label { position: relative; }
.wahl input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.wahl span {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .4rem .95rem;
  border: 1px solid var(--feldrand); border-radius: var(--radius-klein); background: var(--weiss); font-weight: 500; cursor: pointer; font-size: 1rem;
}
.wahl input:checked + span { background: var(--signal); border-color: var(--signal); color: #fff; }
.wahl input:focus-visible + span { outline: 3px solid var(--signal); outline-offset: 2px; }
.tage span { flex-direction: column; line-height: 1.15; min-width: 4.5rem; padding: .35rem .5rem; font-variant-numeric: tabular-nums; }
.tage small { font-size: .875rem; font-weight: 400; }
.ohne-js { padding: .75rem 1rem; background: var(--grund); border-radius: var(--radius-klein); font-size: 1rem; }
.zettel { background: var(--zettel); border-radius: var(--radius-klein); padding: .9rem 1rem; margin: 0 0 1.1rem; }
.zettel-name { display: block; font-family: var(--titel); font-weight: 700; margin-bottom: .15rem; }
.zettel p { margin: 0; max-width: none; }
.feld { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; min-width: 0; }
.feld label { font-weight: 600; font-size: .9375rem; }
.feld input, .feld textarea {
  width: 100%; min-height: 48px; padding: .6rem .75rem; border: 1px solid var(--feldrand); border-radius: var(--radius-klein);
  background: var(--weiss); color: var(--tinte); font: 1rem/1.4 var(--text);
}
.feld textarea { resize: vertical; min-height: 6rem; }
.feld input[aria-invalid="true"] { border-color: var(--rot-tief); box-shadow: 0 0 0 1px var(--rot-tief); }
.rueckmeldung { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: var(--radius-klein); border: 1px solid var(--gruen-tief); background: #eef7f0; max-width: none; }
.rueckmeldung.fehler { border-color: var(--rot-tief); background: #fbefec; }
.anfrage-hinweis { margin: .9rem 0 0; font-size: .9375rem; color: var(--leise); }
@media (min-width: 48em) { .anfrage-tafel { padding: 1.75rem 2rem; } }
@media (min-width: 64em) {
  .anfrage-tafel { grid-template-columns: 7fr 5fr; gap: 3rem; align-items: start; }
  .anfrage-rechts { position: sticky; top: calc(var(--kopf-h) + 1rem); }
}

/* ---------- Signatur: Abends geht jemand ran ---------- */
.abends { background: var(--flaeche); }
.abends-raster { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.abends-foto { margin: 0; }
.abends-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-gross); }
.abends-foto figcaption { font-size: .9375rem; color: var(--leise); padding-top: .6rem; }
.wochenplan { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.25rem 0 1rem; font-size: 1rem; background: var(--weiss); border: 1px solid var(--linie-flaeche); border-radius: var(--radius-gross); overflow: hidden; }
.wochenplan th, .wochenplan td { text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.wochenplan th { font-weight: 600; color: var(--leise); font-size: .9375rem; }
.wochenplan tbody tr:last-child td { border-bottom: 0; }
.wochenplan tr.heute td { background: var(--zettel); }
.wochenplan .heute-marke { display: inline-block; margin-left: .4rem; font-size: .875rem; font-weight: 600; color: var(--gruen-tief); }
.abends .klein { max-width: 60ch; }
@media (min-width: 64em) {
  .abends-raster { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: center; }
}
@media (max-width: 29.99em) { .wochenplan th, .wochenplan td { padding: .5rem .55rem; } }

/* ---------- Drei Baustellen (Foto über Text) ---------- */
.baustellen-raster { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); }
.baustelle { min-width: 0; margin: 0; }
.baustelle img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-gross); }
.baustelle h3 { margin: 1rem 0 .2rem; font-size: 1.15rem; }
.baustelle-ort { color: var(--leise); font-size: 1rem; margin-bottom: .6rem; }
.baustelle blockquote { margin: 0; }
.baustelle blockquote p { margin: 0 0 .3rem; font-size: 1rem; }
.baustelle blockquote footer { font-size: .9375rem; color: var(--leise); }
@media (min-width: 48em) {
  .baustellen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baustelle:first-child { grid-column: 1 / -1; }
  .baustelle:first-child img { aspect-ratio: 21 / 9; }
}
@media (min-width: 64em) {
  .baustellen-raster { grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; }
  .baustelle:first-child { grid-column: auto; }
  .baustelle img, .baustelle:first-child img { aspect-ratio: auto; height: 17rem; }
}

/* ---------- Wer kommt (drei Porträts) ---------- */
.leute-raster { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.person { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: start; margin: 0; min-width: 0; }
.person img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 18%; border-radius: var(--radius-gross); }
.person h3 { margin: 0 0 .1rem; font-size: 1.15rem; }
.person-rolle { color: var(--leise); font-size: .9375rem; margin-bottom: .35rem; }
.person p { font-size: 1rem; margin: 0; }
.leute-satz { margin-top: 1.5rem; color: var(--leise); }
@media (min-width: 48em) {
  .leute-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .person { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .person img { aspect-ratio: 4 / 5; object-position: center 12%; }
}

/* ---------- Kontakt ---------- */
.kontakt { background: var(--flaeche); }
.kontakt-raster { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.daten { margin: 0; display: grid; align-content: start; min-width: 0; }
.daten div { padding: .55rem 0; border-bottom: 1px solid var(--linie-flaeche); }
.daten div:first-child { padding-top: 0; }
.daten dt { font-size: .9375rem; color: var(--leise); }
.daten dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.daten a { display: inline-flex; align-items: center; min-height: 44px; }
.werkhof { margin: 0; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.werkhof img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-gross); }
.werkhof figcaption { font-size: .9375rem; color: var(--leise); }
.nachricht { background: var(--weiss); border: 1px solid var(--linie-flaeche); border-radius: var(--radius-gross); padding: 1.5rem; display: grid; gap: .9rem; align-content: start; min-width: 0; }
.nachricht h3 { margin: 0; }
.nachricht .feld { margin: 0; }
.nachricht .knopf { justify-self: start; }
.nachricht .rueckmeldung { margin: 0; }
@media (min-width: 48em) {
  .kontakt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .werkhof { grid-column: 1 / -1; }
  .werkhof img { aspect-ratio: 21 / 8; }
}
@media (min-width: 64em) {
  .kontakt-raster { grid-template-columns: 4fr 4fr 4fr; gap: 2rem; align-items: stretch; }
  .werkhof { grid-column: auto; }
  .werkhof img { aspect-ratio: auto; flex: 1; min-height: 0; height: 100%; }
}

/* ---------- Fuß ---------- */
.fuss { background: var(--anthrazit); color: var(--hell); padding: 3rem 0 2.5rem; font-size: .9375rem; }
.fuss a { color: var(--hell); }
.fuss a:hover { color: #fff; }
.fuss-raster { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.fuss-marke { font-family: var(--titel); font-weight: 700; font-size: 1.25rem; margin: 0; line-height: 1.3; }
.fuss-marke span { display: block; font-family: var(--text); font-weight: 400; font-size: .9375rem; color: var(--hell-leise); }
.fuss-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 44px; }
.musterhinweis { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid #3a3e44; color: var(--hell-leise); max-width: 65ch; }
@media (min-width: 64em) { .fuss-raster { grid-template-columns: 1fr auto; } }

/* ---------- Handy: kompakter ---------- */
@media (max-width: 47.99em) {
  .knopf-gross { padding-inline: 1.1rem; }
  .knopfzeile { gap: .5rem; }
  .knopfzeile .knopf-gross { flex: 1 1 auto; }
  .leistung { padding: .85rem 0 .95rem; }
  .leistung p { font-size: .9375rem; }
  .einleitung { font-size: 1.0625rem; }
  .abschnitt h2 { margin-bottom: .4em; }
  .anfrage-tafel fieldset { margin-bottom: 1.1rem; }
}

/* ---------- Unterseiten ---------- */
.textseite { padding-block: 2.5rem 4rem; max-width: 50rem; }
.textseite h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); hyphens: auto; font-weight: 800; }
.textseite h2 { font-size: 1.5rem; margin-top: 1.75rem; }
.textseite dl div { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--linie); }
.textseite dt { color: var(--leise); }
.textseite dd { margin: 0; }
.textseite form { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: 1.5rem; display: grid; gap: 1rem; margin-top: 1.5rem; }
.textseite form .feld { margin: 0; }
.textseite fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.textseite legend { font-weight: 600; font-size: .9375rem; margin-bottom: .4rem; padding: 0; }
.textseite .knopf { justify-self: start; }
.textseite .rueckmeldung { margin: 0; }
.zurueck { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; margin-top: 1.5rem; }
@media (max-width: 22em) { .textseite dl div { grid-template-columns: minmax(0, 1fr); gap: .2rem; } }

@media print { .kopf, .fuss-links, .anfrage-tafel, .nachricht { display: none; } }