@charset "UTF-8";
/* ============================================================
   Ingenieurbüro Grüter · Rastede
   ============================================================

   NACHBAU. Alle Werte kommen aus dem Aufmaß der bestehenden Seite
   (aufbau.md, gemessen am 10.08.2026 über das DevTools-Protokoll),
   nicht aus einer Vorlage und nicht aus dem Gefühl:

     Satzspiegel   1400 px, außen 4vw · am Telefon 6vw
     Raster        24 Spalten · am Telefon 8, Fuge 11 px
     Schrift       IBM Plex Sans 400-600, Plex Mono fuer Zahlen
     Laufweite     −0,02em auf allen Ebenen
     Zeilenhöhe    1,1 bei Überschriften · 1,3 im Fließtext
     Tasten        Radius 20 px, Grund #1D231C, ohne Kontur
     Flächen       ohne Schatten, ohne Kontur · es trägt der Weißraum

   Drei Werte weichen ab, jeder mit Begründung in der README:
     1. Akzentschrift auf Weiß steht auf #1A6A66 statt #48C1BA
        (Kontrast 6,4:1 statt 1,9:1). Gleicher Farbton.
     2. Die Schrift skaliert nach Fensterbreite, nicht nach
        Fensterhöhe. Das Original ändert am Telefon die Schriftgröße,
        sobald man es quer hält.
     3. Es gibt eine klebende Kopfzeile mit Rufnummer.

   Grundlage.css liegt davor und regelt Browserkorrekturen, Sprung-
   marke, Fokusring und Fingergrößen. Dieses Blatt gewinnt jeden
   Streit, weil es danach geladen wird.

   KEIN style="…" im HTML. Die Sicherheitsrichtlinie verwirft es.
   ============================================================ */

/*
 * IBM Plex Sans als eine veraenderliche Datei, Schnitt 400 bis 600.
 * Dazu IBM Plex Mono fuer alles Gemessene: U-Werte, Kilowattstunden,
 * Foerderquoten, Nummern. Ein Energieberater rechnet, und Zahlen in
 * einer Schrift mit gleichen Vorbreiten stehen untereinander.
 *
 * Fassung A trug Roboto · das war die Schrift des Baukastens, aus
 * dem die alte Seite kam, nicht die des Betriebs.
 */
@font-face {
  font-family: "Plex";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/plexsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/plexsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "PlexMono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PlexMono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --grund:        #ffffff;
  --tinte:        #1d231c;
  --tinte-leise:  #55604f;
  --akzent:       #48c1ba;   /* Logofarbe · Flächen, Linien, Zeichen */
  --akzent-tinte: #1a6a66;   /* derselbe Ton als Schrift auf Weiß    */
  --akzent-dunkel:#34a7a0;   /* dieselbe Fläche eine Stufe tiefer    */
  --akzent-blass: #eaf7f6;
  --linie:        #e3e8e2;

  /* Der zweite Seitengrund. Das Original wechselt zwischen Weiß und
     einem hellen Grau ab · daran erkennt das Auge, wo ein Abschnitt
     endet. Hier ist der Ton nicht neutral, sondern minimal in
     Richtung der Tinte gezogen, damit er zur Marke gehört. */
  --grund-tief:   #f2f5f2;
  --grund-tiefer: #e9eee9;   /* derselbe Grund unter dem Zeiger */

  /* Sichtbare Lücke. Sie soll auffallen, ohne wie ein Fehler des
     Browsers auszusehen · deshalb warm und nicht rot. */
  --luecke-tinte: #8a3a12;
  --luecke-grund: #fdf1e6;

  /* Die Schriftleiter. Die Endwerte sind die gemessenen Größen der
     alten Seite bei 390 und bei 1280 Punkten. */
  --s-h1:    clamp(2.9rem,  3.6vw  + 1rem, 4.6rem);
  --s-h2:    clamp(1.95rem, 1.8vw  + 1rem, 3rem);
  --s-h3:    clamp(1.7rem,  1.32vw + 1rem, 2.4rem);
  --s-h4:    clamp(1.25rem, 0.48vw + 1rem, 1.6rem);
  --s-text:  clamp(1.0625rem, 0.12vw + 1rem, 1.2rem);
  --s-klein: 0.9rem;

  /* Abschnittspolster · die vier Werte, die im Original vorkommen. */
  --luft-gross:  2.64rem;   /* 42,24 px */
  --luft-mittel: 1.6rem;    /* 25,60 px */
  --luft-klein:  0.8rem;    /* 12,80 px */

  --fuge: 11px;
  --rand-schreibtisch: 4vw;
  --rand-telefon: 6vw;

  /* Die Kopfzeile klebt. grundlage.css rechnet daraus das
     scroll-padding-top und legt 30 Punkte Reserve drauf. */
  --kopfhoehe: 5.25rem;
}

@media (min-width: 48rem) {
  :root { --kopfhoehe: 6.6rem; }
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--grund);
  color: var(--tinte);
  font-family: "Plex", "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  font-size: var(--s-text);
  line-height: 1.3;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}

/* ── Satzspiegel ─────────────────────────────────────────────
   1400 px innen, 4vw außen · am Telefon 6vw. Die Zahl 1400 steht im
   Stylesheet der alten Seite als --maxPageWidth. */

.bahn {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--rand-telefon);
}

@media (min-width: 48rem) {
  .bahn { padding-inline: var(--rand-schreibtisch); }
}

/* ── Überschriften ───────────────────────────────────────────
   Schnitt 400 überall. Das ist die Eigenheit dieser Marke: im ganzen
   Auftritt kommt kein 500er und kein 700er vor, auch nicht in
   Überschriften und Knöpfen. */

h1, h2, h3, h4 {
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

h1 { font-size: var(--s-h1); hyphens: auto; }
h2 { font-size: var(--s-h2); }
h3 { font-size: var(--s-h3); }
h4 { font-size: var(--s-h4); }

p { max-width: 68ch; }

a { color: inherit; }

/* ── Ecken ───────────────────────────────────────────────────
   Ein Radius für alle Flächen dieser Seite: Fotos, Kacheln, der
   Rahmen. Die Tasten haben ihre eigenen 20 px, das ist gemessen.
   Ausgenommen sind Logo und Gütezeichen · fremde Marken werden
   nicht beschnitten. */

.moin__bild img,
.titelband__bild img,
.kontakt__bild img,
.wermich__bild img { border-radius: 14px; }

/* ── Sichtbare Lücke ─────────────────────────────────────────
   feld() und die Seiten geben <span class="luecke"> aus, wo eine
   Angabe fehlt. Erfunden wird nichts. */

.luecke {
  display: inline-block;
  padding: 0.08em 0.45em;
  background: var(--luecke-grund);
  color: var(--luecke-tinte);
  font-size: 0.94em;
}

/* ── Tasten ──────────────────────────────────────────────────
   Radius 20 px, Polster 17,28 / 28,8, Grund #1D231C, keine Kontur,
   kein Schatten, Schriftgröße 14,4 px · alles gemessen. */

.taste,
.taste--leise {
  display: inline-block;
  padding: 1.08rem 1.8rem;
  border: 0;
  border-radius: 20px;
  background: var(--tinte);
  color: #fff;
  font-size: var(--s-klein);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .18s ease, color .18s ease;
}

.taste:hover,
.taste:focus-visible {
  background: var(--akzent);
  color: var(--tinte);
}

.taste--leise {
  background: var(--akzent-blass);
  color: var(--akzent-tinte);
}

.taste--leise:hover,
.taste--leise:focus-visible {
  background: var(--akzent);
  color: var(--tinte);
}

/* ── Kopfzeile ───────────────────────────────────────────────
   Klebt oben. Im Original tut sie das ebenfalls; hinzugekommen ist
   die Rufnummer, weil die alte Seite an keiner Stelle ein tel: hat. */

.leiste {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--grund);
  transition: padding-block .18s ease;
}

.leiste__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--kopfhoehe);
}

.leiste[data-schmal="ja"] {
  border-bottom: 1px solid var(--linie);
}

.marke {
  display: block;
  flex: 0 0 auto;
  text-decoration: none;
}

.marke__bild {
  width: 140px;
  height: auto;
}

@media (min-width: 48rem) {
  .marke__bild { width: 190px; }
}

/* Klappmenü · nur am Telefon sichtbar. */

.klapper {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .4rem .1rem;
  border: 0;
  background: none;
  color: var(--tinte);
  font-size: var(--s-klein);
  letter-spacing: -0.02em;
}

.klapper__strich {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
}

.klapper__strich::before,
.klapper__strich::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
}

.klapper__strich::before { top: -7px; }
.klapper__strich::after  { top: 7px; }

.navi[data-offen="nein"] { display: none; }

/* Rueckfallebene, falls das Attribut einmal fehlt · dann bleibt die
   Navigation IM FLUSS statt schwebend ueber der Ueberschrift zu
   stehen. kopf.php schreibt data-offen="nein" von sich aus mit;
   diese Regel faengt nur den Fall ab, dass eine kuenftige Vorlage es
   vergisst. Fuer den skriptlosen Besucher sorgt ohne-js.css. */
.navi:not([data-offen]) {
  position: static;
  border: 0;
}

.navi {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}

.navi__liste {
  list-style: none;
  margin: 0;
  padding: .5rem var(--rand-telefon) 1.25rem;
}

.navi__punkt { border-top: 1px solid var(--linie); }

.navi__weg,
.navi__ruf {
  display: block;
  padding: .95rem 0;
  font-size: var(--s-klein);
  text-decoration: none;
}

.navi__weg[aria-current="page"] { color: var(--akzent-tinte); }

.navi__ruf { color: var(--akzent-tinte); }

@media (min-width: 48rem) {
  .klapper { display: none; }

  .navi,
  .navi[data-offen="nein"] {
    display: block;
    position: static;
    border: 0;
    background: none;
  }

  .navi__liste {
    display: flex;
    align-items: center;
    gap: 1.9rem;
    padding: 0;
  }

  .navi__punkt { border: 0; }

  .navi__weg,
  .navi__ruf { padding: .55rem 0; }

  .navi__weg { position: relative; }

  /* Der laufende Punkt bekommt einen Strich in der Logofarbe.
     Keine Fläche, keine Pille · die alte Seite kennt beides nicht. */
  .navi__weg[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: .2rem;
    height: 2px;
    background: var(--akzent);
  }

  .navi__punkt--ruf { margin-left: .4rem; }
}

/* ── Hinweisband ─────────────────────────────────────────────
   Steht vor der klebenden Kopfzeile im normalen Fluss. */

.band {
  background: var(--akzent);
  color: var(--tinte);
}

.band__text {
  max-width: 1400px;
  margin-inline: auto;
  padding: .75rem var(--rand-telefon);
  font-size: var(--s-klein);
}

@media (min-width: 48rem) {
  .band__text { padding-inline: var(--rand-schreibtisch); }
}

/* ── Begrüßung ───────────────────────────────────────────────
   Abschnitt 1 der Startseite: Text neben Bild, Bild hochkant.
   Im Original 878 Punkte hoch, Polster 0/0. */

.moin__innen {
  display: grid;
  gap: var(--fuge);
  padding-block: 2rem 3rem;
}

.moin__wort { align-self: center; }

.moin__titel { margin-bottom: 1.1rem; }

.moin__ort {
  display: block;
  margin-top: .9rem;
  font-size: var(--s-h4);
  line-height: 1.2;
  color: var(--akzent-tinte);
}

.moin__text { margin-bottom: 1.8rem; }

.moin__tasten {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.moin__bild img { width: 100%; }

@media (min-width: 48rem) {
  .moin__innen {
    grid-template-columns: repeat(24, 1fr);
    align-items: center;
    padding-block: 3rem 4rem;
  }
  .moin__wort { grid-column: 1 / span 13; }
  .moin__bild { grid-column: 15 / span 10; }
}

/* ── Die sechs Leistungen ────────────────────────────────────
   Zwei Reihen zu drei Kacheln, je 8 von 24 Spalten. Bei 767 Punkten
   bricht die Reihe auf eine Kachel je Zeile um · so rechnet es die
   alte Seite, und so bleibt es. */

.sechs__innen { padding-block: 3.4rem; }

.sechs__titel { margin-bottom: .8rem; }

.sechs__vorwort { margin-bottom: 2rem; }

.sechs__gitter {
  display: grid;
  gap: var(--fuge);
  list-style: none;
  padding: 0;
}

@media (min-width: 48rem) {
  .sechs__gitter { grid-template-columns: repeat(3, 1fr); }
}

/* Die Kachel ist eine Fläche, keine lose Reihe aus Bild, Zeile und
   Verweis. Sie trägt denselben Grund wie der Abschnitt darüber ·
   dasselbe Material, andere Größe. */
.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;             /* sonst sprengt aspect-ratio die Spalte */
  border-radius: 14px;
  background: var(--grund-tief);
  overflow: hidden;
  transition: background-color .18s ease, transform .18s ease;
}

.kachel__bild { margin: 0; }

/* Das Verhältnis steht hier und nicht nur in der Datei: Lädt Kevin
   später ein anderes Foto hoch, bleibt die Reihe trotzdem gerade. */
.kachel__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 1.8;
  object-fit: cover;
}

.kachel__wort {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
  padding: 1.3rem 1.4rem 1.5rem;
}

.kachel__titel {
  font-size: var(--s-h4);
  color: var(--akzent-tinte);
}

.kachel__text {
  flex: 1 1 auto;
  font-size: var(--s-text);
}

/* Im Original ist das ein gefüllter Knopf in der Logofarbe, versal
   und weiß beschriftet. Gefüllt bleibt er · Weiß auf diesem Türkis
   kommt aber nur auf 2,1 zu 1 und ist damit unlesbar. Deshalb steht
   die Tinte darauf: 8,9 zu 1. Und ohne Versalien passt der ganze
   Satz in eine Zeile statt in drei. */
.kachel__weg {
  display: inline-block;
  margin-top: .3rem;
  padding: .95rem 1.5rem;
  border-radius: 20px;
  background: var(--akzent);
  color: var(--tinte);
  font-size: var(--s-klein);
  line-height: 1.15;
  text-decoration: none;
  transition: background-color .18s ease;
}

/* Die ganze Kachel ist die Tippfläche, nicht nur der Knopf darin. */
.kachel__weg::after {
  content: "";
  position: absolute;
  inset: 0;
}

.kachel:hover { background: var(--grund-tiefer); transform: translateY(-2px); }

.kachel:hover .kachel__weg,
.kachel__weg:focus-visible { background: var(--akzent-dunkel); }

@media (prefers-reduced-motion: reduce) {
  .kachel:hover { transform: none; }
}

/* ── Hinweis auf die Person ──────────────────────────────────
   Abschnitt 6 der Startseite, Text neben Bild, mit Knopf. */

.person { background: var(--grund-tief); }

.person__innen {
  display: grid;
  gap: var(--fuge);
  padding-block: 3.4rem;
}

.person__titel { margin-bottom: 1rem; }

.person__text { margin-bottom: 1.6rem; }

.person__bild { min-width: 0; }

.person__bild img { width: 100%; border-radius: 14px; }

@media (min-width: 48rem) {
  .person__innen {
    grid-template-columns: repeat(24, 1fr);
    align-items: center;
  }
  .person__wort { grid-column: 1 / span 12; }
  .person__bild { grid-column: 15 / span 10; }

  /* Das Hochformat ist 720 zu 1080 und würde die Spalte auf fast 800
     Punkte strecken · daneben stünden 270 Punkte Leere über und unter
     dem Text. Der Ausschnitt wird deshalb gekürzt, nicht das Bild
     verkleinert. Der Kopf sitzt oben, also wird unten geschnitten. */
  .person__bild {
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    overflow: hidden;
  }
  .person__bild img {
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    object-position: 50% 22%;
  }
}

/* ── Aufruf zum Kontakt ──────────────────────────────────────
   Im Original mittig, ohne Bild, Polster 42,24. */

/* Im Original ist das ein volles Band in der Logofarbe mit weißer
   Überschrift, auf acht Seiten. Der Nachbau hatte daraus weißen Grund
   mit zwei Tasten gemacht · damit fiel die einzige laute Stelle des
   ganzen Auftritts weg. Das Band ist wieder da. Die Schrift darauf
   ist nicht weiß, sondern die Tinte: Weiß auf diesem Türkis kommt nur
   auf 2,1 zu 1. */
.anfrage {
  background: var(--akzent);
  color: var(--tinte);
}

.anfrage__innen {
  padding-block: 3.6rem;
  text-align: center;
}

.anfrage__titel { margin-bottom: 1rem; }

.anfrage__text {
  margin-inline: auto;
  margin-bottom: 1.8rem;
  color: #123f3c;
}

.anfrage__tasten {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  max-width: none;
}

/* Auf dem Band trägt die zweite Taste Weiß statt Blassgrün · das
   Blassgrün verschwände darauf. */
.anfrage .taste--leise {
  background: #fff;
  color: var(--tinte);
}

.anfrage .taste:hover,
.anfrage .taste:focus-visible {
  background: var(--grund);
  color: var(--tinte);
}

.anfrage .taste--leise:hover,
.anfrage .taste--leise:focus-visible {
  background: var(--tinte);
  color: #fff;
}

/* ── Titelband der Leistungsseiten ───────────────────────────
   Im Original ein Band mit Hintergrundbild, 280 Punkte hoch, darüber
   181 Punkte Luftraum. Hier steht das Bild daneben statt dahinter:
   Weiße Schrift auf einem beliebigen Foto ist nicht lesbar, und der
   Befund nennt genau das an anderer Stelle. Begründung in der README. */

.titelband__innen {
  display: grid;
  gap: var(--fuge);
  padding-block: 1.5rem var(--luft-gross);
}

.titelband__ueber {
  margin-bottom: .9rem;
  font-size: var(--s-klein);
  color: var(--tinte-leise);
}

.titelband__weg { text-decoration-thickness: 1px; text-underline-offset: .3em; }

.titelband__titel { margin-bottom: 1.1rem; }

.titelband__bild img { width: 100%; }

@media (min-width: 48rem) {
  .titelband__innen {
    grid-template-columns: repeat(24, 1fr);
    align-items: center;
    padding-block: 2.2rem var(--luft-gross);
  }
  .titelband__wort { grid-column: 1 / span 12; }
  .titelband__bild { grid-column: 14 / span 11; }
}

/* ── Fließtext der Leistungsseiten ───────────────────────────── */

/* Der Fließtext hört bei 68 Zeichen auf · rechts daneben blieb dadurch
   die halbe Seite leer, über die ganze Länge des Textes. Dort steht
   jetzt der Rahmen mit Preis, Dauer und Gebiet und bleibt beim Lesen
   stehen. Erst ab 1024 Punkten, darunter rutscht er wieder darunter. */
.satz__innen { padding-block: 0 3.4rem; }

.satz__block { max-width: 68ch; }

@media (min-width: 64rem) {
  .satz__innen {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: var(--fuge);
    align-items: start;
  }
  .satz__block { grid-column: 1 / span 13; min-width: 0; }
}

.satz__block > * + * { margin-top: 1rem; }

/* ── Gepflegte Textblöcke: Absatz auf Absatz ─────────────────
   absaetze() und fliesstext() geben echte <p> aus, und die
   Grundlage stellt jeden Absatz auf margin: 0. In diesen fünf
   Kästen stand bis zum 23.08.2026 immer genau ein Absatz, deshalb
   fiel das nie auf. Seit die Texte im Pflegebereich stehen, kann in
   jedem von ihnen ein zweiter dazukommen · ohne diese Regel klebte
   er am ersten. */
.film__text p + p,
.person__text p + p,
.kontakt__text p + p,
.wege__vorwort p + p,
.hausbereich__vorwort p + p { margin-top: 1rem; }

.satz__block h2 {
  margin-top: 2.6rem;
  font-size: var(--s-h3);
}

.satz__block h3 {
  margin-top: 2rem;
  font-size: var(--s-h4);
  color: var(--akzent-tinte);
}

.satz__block ul,
.satz__block ol {
  padding-left: 1.3rem;
}

.satz__block li + li { margin-top: .5rem; }

.satz__block ul { list-style: none; padding-left: 0; }

.satz__block ul > li {
  position: relative;
  padding-left: 1.5rem;
}

/* Aufzählungszeichen ist ein waagerechter Strich in der Logofarbe.
   Kein Punkt, kein Haken, kein Emoji. */
.satz__block ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .8rem;
  height: 2px;
  background: var(--akzent);
}

.satz__block ol { list-style: decimal; }

/* ── Der Rahmen: Preis, Dauer, Gebiet ────────────────────────── */

.rahmen {
  margin-top: 2.8rem;
  padding: 1.5rem 1.4rem;
  border-radius: 14px;
  background: var(--akzent-blass);
}

@media (min-width: 64rem) {
  .rahmen {
    grid-column: 16 / span 9;
    min-width: 0;
    margin-top: 0;
    position: sticky;
    top: calc(var(--kopfhoehe) + 1.2rem);
  }
}

.rahmen__titel { margin-bottom: 1rem; font-size: var(--s-h4); }

.rahmen__liste { display: grid; }

/* Eine Zeile je Angabe, getrennt durch einen Strich aus dem Akzent.
   Drei Spalten nebeneinander wären in einer 350 Punkte breiten
   Spalte je 110 Punkte breit · dafür ist keine der Antworten kurz
   genug. */
.rahmen__posten {
  padding: .8rem 0;
  border-top: 1px solid rgba(26, 106, 102, .22);
}

.rahmen__posten:first-child { padding-top: 0; border-top: 0; }

.rahmen__posten:last-child { padding-bottom: 0; }

.rahmen__frage {
  margin-bottom: .25rem;
  font-size: var(--s-klein);
  color: var(--akzent-tinte);
}

.rahmen__antwort { font-size: var(--s-h4); line-height: 1.2; }

/* ── Zertifikatsband ─────────────────────────────────────────
   Im Original der vorletzte Abschnitt jeder Seite: ein Bild, mittig,
   ohne ein Wort dazu. Das Bild bleibt unverändert und an seinem
   Platz. Daneben steht jetzt, wofür es steht · es ist der einzige
   Beweis auf der ganzen Seite. */

.zeugnis { border-top: 1px solid var(--linie); }

.zeugnis__innen {
  display: grid;
  gap: 1.4rem var(--fuge);
  padding-block: var(--luft-mittel);
  align-items: center;
}

/* Die Spalte der Zeichen. Sie traegt seit dem 24.08.2026 zwei:
   das Guetezeichen des Bundes und, darunter, das Vereinszeichen des
   DEN. Beide erscheinen unabhaengig voneinander · das eine haengt an
   der Nummer aus der Expertenliste, das andere an der
   Mitgliedsnummer. Steht nur eines da, sieht die Spalte aus wie
   vorher. */
.zeugnis__zeichen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}

.zeugnis__marke {
  width: 100%;
  max-width: 483px;
  height: auto;
}

/* Das DEN-Zeichen ist ein Verweis. Kein Unterstrich unter einem
   Bild · das wirkt wie ein Fehler, nicht wie ein Angebot.

   Die Breite steht als min() aus fester und anteiliger Angabe, und
   der Anteil ist der Grund. Das Zeichen des Bundes misst 483 × 117
   und ist damit gut viermal so breit wie hoch, das des Vereins
   461 × 156 und nur dreimal. Stuenden beide gleich breit da, waere
   das Vereinszeichen anderthalbmal so hoch wie das Gueltezeichen ·
   und damit das groessere von beiden, obwohl das kleinere die
   Aussage traegt. Genau das passierte unter 48rem, wo die Spalte
   schmaler ist als die 340px.

   79 Prozent halten das Verhaeltnis in jeder Breite: auf dem
   Schreibtisch sind das 339px von 429, am Telefon 261 von 330. */
.zeugnis__den {
  display: block;
  width: 100%;
  max-width: min(340px, 79%);
  text-decoration: none;
}

.zeugnis__den:hover .zeugnis__marke { opacity: .82; }

.zeugnis__den .zeugnis__marke { transition: opacity .18s ease; }

.zeugnis__den-wort {
  margin-top: .6rem;
  font-size: var(--s-klein);
  color: var(--tinte-leise);
}

.zeugnis__titel { font-size: var(--s-h4); margin-bottom: .5rem; }

.zeugnis__text { font-size: var(--s-klein); color: var(--tinte-leise); }

.zeugnis__programme {
  margin-top: .6rem;
  font-size: var(--s-klein);
  color: var(--tinte-leise);
}

@media (min-width: 48rem) {
  .zeugnis__innen { grid-template-columns: repeat(24, 1fr); }
  .zeugnis__zeichen { grid-column: 1 / span 9; }
  .zeugnis__wort { grid-column: 11 / span 14; }
}

/* ── Bewertungen bei Google ──────────────────────────────────

   Der Abschnitt zwischen den Dienstleistungen und der Person.

   EIGENER GRUND, und zwar aus einem Grund. Davor steht der weisse
   Katalog, danach die Person auf --grund-tief. Weiss waere hier
   zweimal Weiss hintereinander, --grund-tief zweimal Grau · und
   zwei graue Abschnitte uebereinander gab es auf dieser Seite
   schon einmal, sie sind am 21.08.2026 abgeschafft worden. Der
   Akzent als Flaeche loest beides und sagt nebenbei das
   Richtige: hier spricht nicht der Betrieb, hier sprechen andere.

   ============================================================ */

/* WEISS, nicht getoent · und das ist eine Korrektur.

   Der erste Anlauf gab dem Abschnitt --akzent-blass (#eaf7f6) als
   Grund. Gemessen liegt der aber nur 1,06 zu 1 von --grund-tief
   (#f2f5f2) entfernt, dem Grund des Personenabschnitts direkt
   darunter · das waeren wieder zwei fast gleiche Flaechen
   uebereinander gewesen, genau der Fehler, der am 21.08.2026
   abgeschafft wurde.

   Voller Akzent ging auch nicht: den traegt zwei Abschnitte
   weiter das Anfrageband, und zweimal dieselbe laute Flaeche in
   drei Abschnitten ist keine Betonung mehr.

   Also weiss wie der Katalog darueber, getrennt durch eine
   Haarlinie · so wie der Zeugnisblock es macht. Die Farbe steckt
   dafuer in den KARTEN. */
.stimmen {
  background: var(--grund);
  border-top: 1px solid var(--linie);
}

.stimmen__innen { padding-block: 3.6rem; }

.stimmen__kopf { margin-bottom: 1.8rem; }

.stimmen__titel { margin-bottom: .8rem; }

/* Note und Sterne in einer Zeile. Die Zahl steht in der
   Schreibmaschine · sie ist gemessen, und Gemessenes traegt auf
   dieser Seite die Mono. */
.stimmen__note {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.stimmen__zahl {
  font-family: var(--mono);
  font-size: var(--s-h3);
  line-height: 1;
  color: var(--akzent-tinte);
}

.stimmen__grund {
  margin-top: .35rem;
  font-size: var(--s-klein);
  color: var(--tinte-leise);
}

.stimmen__quelle {
  margin-top: 1.4rem;
  font-size: var(--s-klein);
  color: var(--tinte-leise);
}

/* ── Die Sterne ─────────────────────────────────────────────
   Gezeichnet und nicht getippt. Das Sternzeichen aus dem
   Zeichensatz sieht auf jedem System anders aus, auf manchen ist
   es bunt, und ein Vorleseprogramm spricht es aus. */

.sterne { display: inline-flex; line-height: 0; }

.sterne svg { height: 1rem; width: auto; }

/* Der nicht vergebene Stern ist UMRISSEN, nicht blass gefuellt.

   Blass gefuellt kam auf 1,39 zu 1 gegen den Kartengrund · bei
   einer Bewertung mit drei Sternen waere schlicht nicht zu sehen
   gewesen, dass da noch zwei stehen. Ein Umriss sagt "nicht
   vergeben", statt es nur anzudeuten, und er traegt genug
   Abstand.

   Der volle Stern bleibt Gold. Er kommt gegen den Kartengrund auf
   1,85 zu 1, und das ist hier vertretbar: derselbe Wert steht
   daneben als Zahl und im aria-label als Satz. Die Auszeichnung
   verlangt 3 zu 1 nur dort, wo die Zeichnung die EINZIGE Quelle
   der Aussage ist. */
.stern {
  fill: none;
  stroke: #7f8f8d;
  stroke-width: 1.1;
  stroke-linejoin: round;
}

.stern--voll {
  fill: #f5a623;
  stroke: #d18d12;
  stroke-width: .8;
}

/* ── Die Reihe ──────────────────────────────────────────────

   Zwei Zustaende, entschieden in PHP nach der Zahl der Stimmen:

   STEHEND (bis fuenf) · eine waagerecht schiebbare Reihe mit
   Schnappen. Am Telefon die vertraute Geste, am Schreibtisch
   passen zwei bis drei Karten nebeneinander und der Rest wartet.

   BAND (ab sechs) · dieselbe Reihe, aber sie wandert, WAEHREND
   die Seite laeuft. Nicht von selbst: wer stehenbleibt, um zu
   lesen, bei dem steht auch das Band. Deshalb braucht es keinen
   Pausenknopf, deshalb faellt niemand in eine Bewegung, die er
   nicht ausgeloest hat, und deshalb ist ein Absatz Text hier
   ueberhaupt lesbar. Ein Laufband traegt sonst Zeichen, keine
   Saetze. */

.stimmen__rahmen { overflow-x: auto; }

/* clip statt hidden. hidden macht den Rahmen zum Scrollbehaelter
   und friert damit eine am Seitenlauf haengende Bewegung ein. */
.stimmen__rahmen--band {
  overflow-x: clip;
  overflow-y: visible;
}

.stimmen__reihe {
  display: flex;
  gap: var(--fuge);
  list-style: none;
  padding-bottom: .6rem;
  scroll-snap-type: x mandatory;
}

.stimmen__reihe--band {
  width: max-content;
  scroll-snap-type: none;
  animation: stimmenband linear both;
  animation-timeline: scroll(root);
}

@keyframes stimmenband {
  /* Genau eine halbe Runde: die Liste steht zweimal da, nach 50 %
     sieht das Auge wieder den Anfang. Kein Sprung, kein Ruck. */
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Eine Karte ────────────────────────────────────────────── */

.stimme {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  flex: 0 0 min(88vw, 22rem);
  scroll-snap-align: start;
  padding: 1.3rem 1.4rem;
  background: var(--akzent-blass);
  /* Der Rand traegt die Kante, nicht die Fuellung: die Karte liegt
     auf Weiss und kommt damit nur auf 1,10 zu 1. --akzent-dunkel
     misst 2,92 zu 1 gegen Weiss und ist als gesaettigtes Tuerkis
     auch dort zu sehen, wo die Helligkeit allein nicht reicht. */
  border: 1px solid var(--akzent-dunkel);
  border-radius: var(--zipfel);
}

/* Der Text traegt die Hoehe. Feste Hoehe waere bequemer, sie
   liesse aber unter der kuerzesten Bewertung ein Loch. Gekappt
   wird schon in PHP bei 240 Zeichen · das reicht, damit die
   Karten sich um hoechstens ein paar Zeilen unterscheiden. */
.stimme__wort {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--s-klein);
  line-height: 1.55;
}

.stimme__wort p { margin: 0; }

.stimme__wer {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.stimme__name { font-weight: 600; }

.stimme__wann {
  font-size: var(--s-klein);
  color: var(--tinte-leise);
}

.stimme__weg {
  font-size: var(--s-klein);
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}

/* Wer Bewegung abgestellt hat, bekommt die stehende Reihe · und
   zwar dieselbe, die es bis fuenf Stimmen ohnehin ist. Kein
   Sonderweg, nur ein Zustand weniger. */
@media (prefers-reduced-motion: reduce) {
  .stimmen__reihe--band {
    width: auto;
    animation: none;
    scroll-snap-type: x mandatory;
  }
  .stimmen__rahmen--band { overflow-x: auto; }
}

/* Kann der Browser keine Bewegung am Seitenlauf, bleibt die Reihe
   stehen und laesst sich schieben. Nichts geht verloren. */
@supports not (animation-timeline: scroll(root)) {
  .stimmen__reihe--band { width: auto; animation: none; scroll-snap-type: x mandatory; }
  .stimmen__rahmen--band { overflow-x: auto; }
}

/* ── Fußbereich ──────────────────────────────────────────────
   Drei Spalten Standort · Kontakt · Info, wie im Original. Die
   Überschrift „Ingenieurbüro Grüter" ist dort ein H2 auf jeder Seite;
   hier ist sie ein Absatz, damit die Gliederung stimmt. */

.fuss {
  background: var(--tinte);
  color: #fff;
}

.fuss__innen { padding-block: 3rem 2.4rem; }

.fuss__marke {
  margin-bottom: 2rem;
  font-size: var(--s-h3);
  line-height: 1.1;
}

.fuss__spalten {
  display: grid;
  gap: 2rem var(--fuge);
}

@media (min-width: 48rem) {
  .fuss__spalten { grid-template-columns: repeat(3, 1fr); }
}

.fuss__ueber {
  margin-bottom: .7rem;
  font-size: var(--s-klein);
  color: var(--akzent);
}

.fuss__adresse { font-style: normal; }

/* Zwei Standorte in EINER Spalte, untereinander.

   Kein viertes Rasterfeld: bei vier Spalten a 1fr bleiben unter
   1200 Punkten keine 15 Zeichen je Zeile, und "Etzhorner Weg 131"
   braucht 17. Die Spalte wird stattdessen hoeher als ihre zwei
   Nachbarn, was im Fuss niemandem auffaellt.

   Der Abstand zwischen den Orten ist groesser als der zwischen den
   Zeilen EINES Ortes · sonst liest sich das als eine vierzeilige
   Anschrift. */
.fuss__ort + .fuss__ort { margin-top: 1.3rem; }

.fuss__ortname {
  margin-bottom: .2rem;
  font-weight: 600;
}

.fuss__zeile { margin-top: .45rem; }

.fuss__zeile--leise { color: #cfd6cd; }

/* Dieselbe Ordnung auf der Kontaktseite. Der Betriebsname steht
   dort einmal ueber den Orten, nicht in jeder Anschrift. */
.kontakt__betrieb { margin-top: .6rem; font-weight: 600; }

.kontakt__ort + .kontakt__ort { margin-top: 1.3rem; }

.kontakt__ortname {
  margin-top: .6rem;
  margin-bottom: .2rem;
  color: var(--akzent);
  font-size: var(--s-klein);
}

.fuss__liste { list-style: none; }

.fuss__liste li + li { margin-top: .45rem; }

.fuss__weg { text-decoration-thickness: 1px; text-underline-offset: .3em; }

.fuss__weg:hover { color: var(--akzent); }

.fuss .luecke {
  background: rgba(255, 255, 255, .12);
  color: #ffd9b8;
}

/* ── Formular ────────────────────────────────────────────────
   Im Original wird das Formular per Skript nachgeladen; ohne
   JavaScript sieht man nichts. Hier steht es im HTML. */

.formular__reihe { margin-bottom: 1.1rem; }

.formular__schild {
  display: block;
  margin-bottom: .35rem;
  font-size: var(--s-klein);
  color: var(--tinte-leise);
}

.formular__pflicht { color: var(--akzent-tinte); }

.formular__feld {
  width: 100%;
  padding: .85rem .9rem;
  border: 1px solid var(--linie);
  border-radius: 0;
  background: #fbfcfb;
  color: var(--tinte);
  font-size: var(--s-text);
  letter-spacing: -0.02em;
}

.formular__feld:focus-visible {
  border-color: var(--akzent-tinte);
  background: #fff;
}

textarea.formular__feld { min-height: 9rem; resize: vertical; }

/* Honigtopf. Menschen sehen ihn nicht, Maschinen füllen ihn aus.
   Nicht display:none · manche Maschinen prüfen darauf. */
.formular__topf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__hinweis {
  margin-bottom: 1.2rem;
  font-size: var(--s-klein);
  color: var(--tinte-leise);
}

.formular__fehler {
  margin-bottom: 1.4rem;
  padding: .9rem 1rem;
  background: var(--luecke-grund);
  color: var(--luecke-tinte);
  font-size: var(--s-klein);
}

.formular__fehler ul { padding-left: 1.2rem; }

.formular__senden {
  padding: 1.08rem 1.8rem;
  border: 0;
  border-radius: 20px;
  background: var(--tinte);
  color: #fff;
  font-size: var(--s-klein);
  letter-spacing: -0.02em;
}

.formular__senden:hover,
.formular__senden:focus-visible {
  background: var(--akzent);
  color: var(--tinte);
}

/* ── Kontaktseite ────────────────────────────────────────────── */

.kontakt__innen {
  display: grid;
  gap: 2.4rem var(--fuge);
  padding-block: 2rem var(--luft-gross);
}

.kontakt__titel { margin-bottom: 1rem; }

.kontakt__text { margin-bottom: 1.8rem; }

.kontakt__wege { margin-bottom: 2rem; }

/* Die drei liegen direkt in einem div und werden deshalb von der
   Fingerregel in grundlage.css nicht erfasst (die gilt fuer p > a,
   li > a, address a, footer a, dd > a). Gemessen waren es 24 px.
   Die Hoehe steht hier selbst, damit sie unter pointer: coarse
   ueber 44 Punkte kommt. */
.kontakt__weg {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: .5rem;
  margin-bottom: .5rem;
  font-size: var(--s-h4);
  line-height: 1.2;
}

.kontakt__zeiten { margin-top: 1.4rem; font-size: var(--s-klein); }

.kontakt__zeitenliste { list-style: none; margin-top: .5rem; }

.kontakt__zeitenzeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 24rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--linie);
}

/* Das Hochformat wuerde die halbe Seite fuellen · hier ist es
   Beiwerk und nicht das Kopfbild. */
.kontakt__bild img { width: 100%; max-width: 21rem; }

@media (min-width: 48rem) {
  .kontakt__innen { grid-template-columns: repeat(24, 1fr); }
  .kontakt__wort    { grid-column: 1 / span 11; }
  .kontakt__spalte2 { grid-column: 13 / span 12; }
}

/* ── Über mich ───────────────────────────────────────────────── */

.wermich__innen {
  display: grid;
  gap: 2rem var(--fuge);
  padding-block: 2rem var(--luft-gross);
}

.wermich__titel { margin-bottom: 1.2rem; }

.wermich__text p + p { margin-top: 1rem; }

.wermich__schluss {
  margin-top: 1.4rem;
  font-size: var(--s-h4);
  line-height: 1.25;
  color: var(--akzent-tinte);
}

.wermich__bild img { width: 100%; }

@media (min-width: 48rem) {
  .wermich__innen { grid-template-columns: repeat(24, 1fr); align-items: start; }
  .wermich__bild { grid-column: 1 / span 9; }
  .wermich__wort { grid-column: 11 / span 14; }
}

/* ── Referenzen ──────────────────────────────────────────────── */

.spuren__innen { padding-block: var(--luft-gross); }

.spuren__titel { margin-bottom: 1.4rem; font-size: var(--s-h3); }

.spuren__liste { list-style: none; }

.spuren__posten {
  padding: 1rem 0;
  border-top: 1px solid var(--linie);
}

.spuren__objekt { font-size: var(--s-h4); line-height: 1.25; }

.spuren__jahr { color: var(--tinte-leise); }

/* ── Rechtstexte ─────────────────────────────────────────────── */

.recht__innen { padding-block: 2rem var(--luft-gross); }

.recht__block { max-width: 68ch; }

.recht__block > * + * { margin-top: .9rem; }

.recht__block h2 { margin-top: 2.4rem; font-size: var(--s-h3); }

.recht__block h3 { margin-top: 1.8rem; font-size: var(--s-h4); }

.recht__block ul { padding-left: 1.3rem; }

.recht__block li + li { margin-top: .4rem; }

.recht__block address { font-style: normal; }

/* ── Dankeseite ──────────────────────────────────────────────── */

.danke__innen {
  padding-block: 4rem 5rem;
  text-align: center;
}

.danke__titel { margin-bottom: 1rem; }

.danke__text { margin-inline: auto; margin-bottom: 2rem; }

/* ── Mehr Kontrast, wenn das Gerät danach fragt ──────────────
   Steht hier und nicht in grundlage.css, weil es die Farbnamen
   dieses Projekts braucht. */

@media (prefers-contrast: more) {
  :root {
    --tinte-leise:  #2a3129;
    --akzent-tinte: #0f4f4c;
    --linie:        #9aa398;
  }
  .fuss__weg,
  .titelband__weg { text-decoration-thickness: 2px; }

  .formular__feld { border-width: 2px; }
  .zeugnis__text  { color: var(--tinte); }

  /* Die Kachel steht auf dem zweiten Grund · dessen Kante muss dann
     sichtbar sein und nicht nur geahnt. */
  .kachel { outline: 1px solid var(--linie); }
  .anfrage__text { color: var(--tinte); }
}

/* ── Drucken ─────────────────────────────────────────────────
   grundlage.css kennt die Klassennamen dieses Projekts nicht,
   deshalb steht hier, was auf Papier verschwindet. */

@media print {
  .leiste,
  .band,
  .klapper,
  .navi,
  .anfrage__tasten,
  .moin__tasten,
  .formular__senden,
  .sprungmarke { display: none !important; }

  .fuss { background: none; color: #000; }
  .fuss__ueber { color: #000; }

  .rahmen,
  .anfrage,
  .person,
  .kachel { background: none; }

  .rahmen { padding: 0; }

  .kachel__weg { display: none; }

  .moin__innen,
  .person__innen,
  .titelband__innen,
  .satz__innen,
  .kontakt__innen,
  .wermich__innen { display: block; }
}

/* ============================================================
   FASSUNG B · was neu dazukommt
   ============================================================

   Die Formidee heißt „das Haus spricht".

   Kevins Zeichen ist ein Haus mit dem Zipfel einer Sprechblase.
   Das ist wörtlich sein Geschäft: ein Gebäude, das sagt, woran zu
   arbeiten ist. Übersetzt wird das zweifach ·

     1. als Form. Eine Ecke bleibt spitz, drei sind rund. Diese
        eine Ecke sitzt an jeder Taste, jedem Bild, jeder Karte
        und jeder Sprechblase am Haus, immer oben links, immer
        gleich. Sie ist der Zipfel.
     2. als Aufbau. Auf der Startseite steht ein Gebäude, und
        jedes seiner Bauteile ist ein Verweis.

   Alles darüber steht in style.css oben und gilt weiter. Dieses
   Blatt gewinnt, weil es danach kommt.
   ============================================================ */

:root {
  /* Der Zipfel. Oben links spitz, sonst rund. */
  --zipfel:       3px 14px 14px 14px;
  --zipfel-klein: 2px 9px 9px 9px;
  --zipfel-gross: 4px 22px 22px 22px;

  --mono: "PlexMono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* ── Der Zipfel überall dort, wo vorher eine runde Ecke war ── */

.taste,
.taste--leise      { border-radius: var(--zipfel); }
.moin__bild img,
.titelband__bild img,
.kontakt__bild img,
.wermich__bild img,
.person__bild img,
.kachel__bild img  { border-radius: var(--zipfel-gross); }
.kachel            { border-radius: var(--zipfel-gross); }
.rahmen            { border-radius: var(--zipfel-gross); }
.anfrage__innen    { border-radius: 0; }
.kachel__weg       { border-radius: var(--zipfel-klein); }

/* ── Gemessenes steht in der Schreibmaschine ────────────────
   U-Werte, Kilowattstunden, Förderquoten, Preise, Nummern. Sie
   sind der Gegenstand des Betriebs, und in einer Schrift mit
   gleichen Vorbreiten stehen sie untereinander. */

.mess {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.ueberzeile {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--akzent-tinte);
}

/* ============================================================
   Der Film ganz oben
   ============================================================

   Das Standbild liegt IMMER darunter, auch wenn ein Film da ist.
   Grund: Ein Film startet nicht überall · gesparte Daten, ein
   altes Gerät, eine Einstellung gegen Bewegung. Fehlt dann das
   Standbild, steht der weiße Text auf Weiß. */

.film {
  position: relative;
  isolation: isolate;
  background: var(--tinte);
  overflow: hidden;
}

.film__grund,
.film__band {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.film__band { z-index: -1; }

/* Der Schleier. Ohne ihn ist weißer Text auf einem hellen Bild
   nicht zu lesen, und welches Bild kommt, weiß niemand vorher.
   Unten dichter als oben, weil dort der Text steht. */
.film::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(29, 35, 28, 0.34) 0%,
    rgba(29, 35, 28, 0.52) 42%,
    rgba(29, 35, 28, 0.86) 100%);
}

.film__innen {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(41rem, 82vh);
  padding-block: 4.5rem 3rem;
  color: #ffffff;
}

.film__ueber { color: #9fdfd9; margin-bottom: 1rem; }

.film__titel {
  max-width: 19ch;
  margin-bottom: 1.1rem;
  color: #ffffff;
  text-wrap: balance;
}

.film__text {
  max-width: 46ch;
  margin-bottom: 1.9rem;
  color: #e6eae5;
  font-size: var(--s-h4);
  line-height: 1.42;
}

.film__tasten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
}

.film .taste {
  background: var(--akzent);
  color: var(--tinte);
}
.film .taste:hover,
.film .taste:focus-visible { background: #ffffff; color: var(--tinte); }

.film .taste--leise {
  background: transparent;
  color: #ffffff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
.film .taste--leise:hover,
.film .taste--leise:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

/* Wer Bewegung abbestellt hat, bekommt das Standbild. */
@media (prefers-reduced-motion: reduce) {
  .film__band { display: none; }
}

/* ============================================================
   Zwei Wege · Sanierung und Neubau
   ============================================================

   Keine zwei gleichen Karten nebeneinander. Zwei Bänder
   untereinander, jedes mit seiner Nummer, seinem Satz und den
   Leistungen, die dazugehören · man liest sie, statt sie zu
   vergleichen. */

.wege__innen { padding-block: 3.6rem; }

.wege__titel { margin-bottom: 0.7rem; }
.wege__vorwort { max-width: 54ch; margin-bottom: 2.2rem; color: var(--tinte-leise); }

.wege__liste { margin: 0; padding: 0; list-style: none; }

.weg {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem 2rem;
  padding: 1.9rem 0;
  border-top: 2px solid var(--tinte);
}
.weg:last-child { border-bottom: 2px solid var(--tinte); }

@media (min-width: 52rem) {
  .weg { grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.weg__zahl {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--akzent-tinte);
  letter-spacing: -0.02em;
}

.weg__titel { margin: 0 0 0.5rem; font-size: var(--s-h3); }
.weg__text  { margin: 0; color: var(--tinte-leise); }

.weg__wozu { margin: 0; padding: 0; list-style: none; }
.weg__wozu li + li { margin-top: 0.42rem; }

.weg__weg {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  color: var(--tinte);
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 0.12rem;
}
.weg__weg::before {
  content: "→";
  color: var(--akzent-tinte);
  font-family: var(--mono);
}
.weg__weg:hover,
.weg__weg:focus-visible { color: var(--akzent-tinte); border-bottom-color: var(--akzent); }

/* ============================================================
   Das Haus auf der Startseite
   ============================================================ */

.hausbereich { background: var(--grund-tief); }
.hausbereich__innen { padding-block: 3.6rem; }
.hausbereich__titel { margin-bottom: 0.7rem; }
.hausbereich__vorwort { max-width: 56ch; margin-bottom: 2rem; color: var(--tinte-leise); }

.hausliste__kopf {
  margin: 0 0 0.3rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.hausbereich__fuss {
  margin: 1.6rem 0 0;
  color: var(--tinte-leise);
  font-size: 0.95rem;
}

/* ============================================================
   Das Verzeichnis der Leistungen
   ============================================================

   Eine Liste, keine Kachelreihe. Die Kacheln stehen auf der
   Übersichtsseite · hier, unter dem Haus, wäre ein zweites
   Bilderraster nur ein zweites Bilderraster. */

.katalog__innen { padding-block: 3.6rem; }
.katalog__titel { margin-bottom: 0.7rem; }
.katalog__vorwort { max-width: 56ch; margin-bottom: 2.4rem; color: var(--tinte-leise); }

.gruppe + .gruppe { margin-top: 2.6rem; }

.gruppe__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--tinte);
}
.gruppe__titel { margin: 0; font-size: var(--s-h4); }
.gruppe__unter { margin: 0; color: var(--tinte-leise); font-size: 0.95rem; }

.gruppe__liste { margin: 0; padding: 0; list-style: none; }
.gruppe__punkt + .gruppe__punkt { border-top: 1px solid var(--linie); }

.posten {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.15rem 0.8rem;
  padding: 1rem 0.2rem;
  color: inherit;
  text-decoration: none;
}
@media (min-width: 52rem) {
  .posten { grid-template-columns: 2.6rem minmax(0, 15rem) minmax(0, 1fr) 1.6rem; align-items: baseline; }
}

.posten__zahl {
  grid-row: span 2;
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--akzent-tinte);
  letter-spacing: -0.02em;
}
@media (min-width: 52rem) { .posten__zahl { grid-row: auto; } }

.posten__name { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; }
.posten__kurz { color: var(--tinte-leise); font-size: 0.96rem; line-height: 1.4; }
@media (max-width: 51.9375rem) { .posten__kurz { grid-column: 2; } }

.posten__pfeil {
  display: none;
  font-family: var(--mono);
  color: var(--akzent-tinte);
  text-align: right;
}
@media (min-width: 52rem) { .posten__pfeil { display: block; } }

.posten:hover,
.posten:focus-visible { background: var(--grund-tief); }
.posten:hover .posten__name,
.posten:focus-visible .posten__name { color: var(--akzent-tinte); }
.posten:hover .posten__pfeil { transform: translateX(3px); }
.posten__pfeil { transition: transform 130ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .posten__pfeil { transition: none; }
}

/* ============================================================
   Krümelpfad und Kindseiten
   ============================================================ */

.krumel {
  margin: 0 0 0.9rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: -0.01em;
  color: var(--tinte-leise);
}
.krumel a { color: var(--akzent-tinte); text-decoration: none; }
.krumel a:hover, .krumel a:focus-visible { text-decoration: underline; }
.krumel__trenner { padding: 0 0.35rem; color: var(--linie); }

.kinder { margin-top: 2.4rem; }
.kinder__titel { margin: 0 0 1rem; font-size: var(--s-h4); }
.kinder__liste { margin: 0; padding: 0; list-style: none; }
.kinder__punkt + .kinder__punkt { margin-top: 0.7rem; }

.kinder__weg {
  display: block;
  padding: 0.95rem 1.1rem;
  background: var(--akzent-blass);
  border-radius: var(--zipfel);
  color: inherit;
  text-decoration: none;
}
.kinder__weg:hover,
.kinder__weg:focus-visible { background: #d9f0ee; }
.kinder__name { display: block; font-weight: 600; letter-spacing: -0.015em; }
.kinder__kurz { display: block; margin-top: 0.15rem; color: var(--tinte-leise); font-size: 0.95rem; }

/* ============================================================
   Förderangaben · nie ohne Datum
   ============================================================

   Eine Förderquote ohne Stand ist eine Behauptung mit
   Verfallsdatum. Steht kein Datum im Pflegebereich, erscheint die
   Zahl gar nicht · das regelt teile/leistung.php, nicht das CSS. */

.foerder {
  margin-top: 1.4rem;
  padding: 1rem 1.15rem;
  background: var(--akzent-blass);
  border-radius: var(--zipfel);
}
.foerder__wert { display: block; font-family: var(--mono); font-weight: 500; font-size: 1.05rem; }
.foerder__stand { display: block; margin-top: 0.28rem; font-size: 0.84rem; color: var(--tinte-leise); }

.rahmen__antwort .mess { font-size: 1.02rem; }

/*
 * Die mittlere der drei Gruppen auf der Leistungsuebersicht steht
 * auf dem zweiten Grund. Drei gleich helle Baender untereinander
 * lesen sich als ein einziges langes Band.
 */
.sechs--tief { background: var(--grund-tief); }