/* ============================================================
   TGI – Technik + Gebäude Instandhaltung GmbH · tgi-planung.com
   Finale Website · Design-Fundament (Phase 1)
   Farbwelt aus dem TGI-Logo: Navy / Grün / Hellgrau
   ============================================================ */

/* ---------- Schriften (self-hosted, kein externes CDN) ---------- */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../assets/fonts/archivo-var.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/source-sans-3-var.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/source-sans-3-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* ---------- Design-Tokens ---------- */

:root {
  --navy: #2a3563;
  --navy-deep: #1d2547;
  --navy-ink: #232b4d;
  /* Logo-Grün in drei Rollen — nicht gegeneinander austauschen:
     --green        nur Flächen, Ränder, Punkte. Auf Weiß nur 3,6:1,
                    also niemals für Text oder tragende Symbole.
     --green-deep   jeder grüne Text und jedes Icon auf heller Fläche.
                    Dunkel genug für 4,5:1 auch auf dem Grünton-Band.
     --green-light  alles Grüne auf navy/navy-deep. */
  --green: #5f9464;
  --green-deep: #44704a;
  --green-light: #8fc194;
  --paper: #ffffff;
  --mist: #f3f4f2;
  --leaf: #dfeae0; /* Logo-Grün mit 20 % Deckkraft auf Weiß */
  --leaf-soft: #f1f5f1; /* Logo-Grün mit 9 % — Hover-Füllung der Karten */
  --line: #dfe2e8;
  --line-strong: #b9bfce; /* gezeichnete Hilfslinien, nicht bedienbar */
  /* Kante bedienbarer Elemente ohne Füllung (Ghost-Buttons, Eingabefelder,
     Ankerchips). Bei ihnen ist der Rahmen der einzige Hinweis darauf, dass
     etwas bedienbar ist — er braucht daher 3:1 gegen JEDEN Grund, auf dem
     das Element vorkommt: Weiß 3,8:1 · Grünton 3,1:1 · Mist 3,4:1.
     --line-strong erreichte auf dem Grünton-Band nur 1,5:1. */
  --line-control: #78839c;
  --line-navy: rgba(42, 53, 99, 0.3); /* gezeichnete Kante — hebt sich vom Raster ab */
  /* Hairline auf dem Grünton-Band: --line (#dfe2e8) und --leaf (#dfeae0)
     liegen zu dicht beieinander (1,02:1), dort verschwindet die Linie.
     0,3 statt der früheren 0,16 ergibt auf dem Band 1,7:1 — dieselbe
     Präsenz, die --line-strong auf Weiß hat. Trennlinien zwischen
     gleichrangigen Feldern müssen sichtbar sein, sonst trennen sie nicht. */
  --line-leaf: rgba(42, 53, 99, 0.3);
  --ink: #252a3d;
  --muted: #5b6174;
  --mark: #a5443a; /* Platzhalter-/Prüfvermerk-Rot */
  --grid: rgba(42, 53, 99, 0.055);
  --grid-soft: rgba(42, 53, 99, 0.05);

  --font-display: "Archivo", "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;

  /* Bewegungssystem: eine Ankunftskurve (entschleunigt, für alles, das
     erscheint), eine Zeichenkurve (für die Stift-Animationen der Skizzen),
     zwei Tempi. Jede Animation der Seite bedient sich hier. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-line: cubic-bezier(0.45, 0, 0.25, 1);
  --t-fast: 0.15s;
  --t-hover: 0.18s;

  /* Mono-Mikroschrift (Bildunterschriften, Metadaten, Overlines).
     Untergrenze 0.8rem = 12.8px — darunter wird die Beweisschicht
     der Seite für die ältere Zielgruppe unlesbar. */
  --fs-micro: 0.8rem;

  /* H3-Skala, drei Stufen statt gewachsener Einzelwerte */
  --h3-lg: 1.2rem;   /* eigenständige Karten-/Blocküberschrift */
  --h3-md: 1.08rem;  /* Zeilen- und Schrittüberschrift */
  --h3-sm: 1.02rem;  /* dichte Karten (Leistungen, Qualifikationen) */

  /* Fokusring. Der Ring liegt wegen outline-offset auf der Fläche
     HINTER dem Element — dunkle Bänder setzen ihn deshalb auf Weiß um. */
  --focus: var(--navy);

  --container: 1160px;
  --radius: 3px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  /* Die helle Basis ist eine Festlegung, keine Voreinstellung
     (brief_final.md §10 — die dunkle Variante wurde verworfen). Ohne diese
     Zeile darf der Systemdunkelmodus trotzdem an den Bedienelementen
     drehen: Die Aufklappliste des Auswahlfelds erscheint dann dunkel,
     waehrend das geschlossene Feld hell gestylt ist. */
  color-scheme: light;
  scroll-behavior: smooth;
  /* Kopfzeile 76px + Luft; mobil ist sie nur 66px hoch (s. Responsive) */
  scroll-padding-top: 88px;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  /* iOS legt beim Antippen sonst seinen grauen Kasten ueber die gesamte
     Trefferflaeche — bei den ganzflaechig anklickbaren Leistungskacheln
     also ueber die ganze Kachel, was wie ein Darstellungsfehler aussieht.
     Stattdessen ein knapper Hauch Navy: dieselbe Rueckmeldung, in der
     Farbwelt der Seite. */
  -webkit-tap-highlight-color: rgba(42, 53, 99, 0.08);
}

/* height:auto ist die Bedingung dafuer, dass width/height im Markup als
   Seitenverhaeltnis wirken statt als feste Hoehe. Ohne die Zeile gewann seit
   dem Audit-Commit die Hoehenangabe aus dem HTML: Galeriebilder standen mit
   ihrer Originalhoehe (426px) statt im 3:2-Rahmen (237px). Regeln mit eigener
   Hoehe (Logo, Zitat-Thumbnail, Vorher/Nachher) sind spezifischer und
   ueberschreiben diesen Wert weiterhin. */
img { max-width: 100%; height: auto; display: block; }

/* Ein Wort, das nicht in seine Zeile passt, bricht um, statt aus der Flaeche
   zu laufen — greift erst im Notfall und aendert das normale Satzbild nicht.
   Die Silbentrennung bleibt den schmalen Geraeten vorbehalten (s. u.).
   „a" gehoert dazu: Die Fusszeilen-Links tragen dieselben Komposita wie die
   Ueberschriften („Instandhaltungskonzept", „Bauwerksuntersuchung"), stehen
   aber in einer schmaleren Spalte. Ohne den Notumbruch liefen sie bei
   doppelter Textgroesse aus der Spalte und die Seite scrollte quer. */
h1, h2, h3, p, li, a, figcaption, summary, dt, dd, strong { overflow-wrap: break-word; }

/* Aufklapp-Zeilen sind Flex-Container, ihr Text ein anonymes Flex-Kind: Ohne
   „anywhere" bleibt dessen Mindestbreite das laengste Wort, und
   „Eigentuemergemeinschaften?" sprengt bei doppelter Textgroesse die Zeile.
   break-word wuerde zwar umbrechen, die Mindestbreite aber nicht senken. */
.faq-item summary,
.norms summary,
.overline { overflow-wrap: anywhere; }

/* Beschriftungen in Rasterzellen: Ohne break-word sprengt „Instandsetzung"
   bei doppelter Textgroesse die Spalte. */
.proof-label,
.stat-label { overflow-wrap: break-word; }

a { color: var(--navy); }

::selection { background: var(--navy); color: #fff; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Dunkle Flächen: Navy auf Navy wäre unsichtbar (1,3:1) */
.trustbar,
.stats-band,
.contact { --focus: var(--paper); }

/* Helle Inseln innerhalb dunkler Flächen führen den Ring wieder dunkel */
.contact-form,
.form-success,
.form-fallback { --focus: var(--navy); }

/* Die Rinne traegt die gesamte Seite — auch die randlosen Baender und die
   Kopfzeile setzen darauf auf. Im Querformat eines Geraets mit Aussparung
   schneidet diese in die 24px hinein; max() gibt der Rinne dort so viel
   Platz, wie das Geraet verlangt, und laesst sie sonst unveraendert
   (env() ist auf Geraeten ohne Aussparung 0). */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.9rem;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* ---------- Typografie ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--navy-ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 650;
}

h3 {
  font-size: var(--h3-lg);
  font-weight: 600;
}

.overline {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
  /* flex, nicht inline-flex: inline-flex nimmt die max-content-Breite an —
     bei doppelter Textgroesse laeuft die Overline dann aus dem Container,
     statt umzubrechen. Als Blockelement fuellt sie die Zeile und bricht um. */
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.overline::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--green);
  flex: none;
  margin-top: 0.6em;
}

.section-head { max-width: 720px; margin-bottom: 32px; }
.section-head .overline { margin-bottom: 14px; }

/* Die Overline ist selbst ein <p>. Ohne :not() gewinnt diese Regel mit
   ihrer höheren Spezifität und färbt den Eyebrow grau und zu groß. */
.section-head p:not(.overline) { margin-top: 14px; color: var(--muted); font-size: 1.09rem; }

/* Schmale Geräte: lange Komposita („Eigentümergemeinschaften",
   „Datenschutzerklärung") trennen, statt aus der Fläche zu laufen.
   Der Middle-Dot „·" der Metazeilen unterbindet zusätzlich den Umbruch
   seiner Nachbarwörter (UAX #14, Klasse ML). hyphens trennt mit
   Trennstrich, break-word ist der Rückhalt für Umgebungen ohne
   deutsches Trennwörterbuch — beide greifen nur, wenn ein Wort nicht
   in die Zeile passt. Darüber reicht der normale Wortumbruch.
   Der Haltepunkt steht in em: Bei der Standard-Basisschrift sind das
   die bisherigen 480px, bei vergrößerter Schrift rückt er mit — dort
   ist ein breiteres Fenster gemessen am Text ebenso eng. */
@media (max-width: 30em) {
  h1, h2, h3, p, a, figcaption, .stat-label {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

.lead { color: var(--muted); }

/* Abstands-Utilities — ersetzen die verstreuten Inline-Styles, damit
   künftige Änderungen an einer Stelle greifen. */
.u-mt-0 { margin-top: 0; }
.u-mt-md { margin-top: 24px; }
.u-mt-lg { margin-top: 34px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.99rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease;
}

/* Nur waehrend der Uebergabe des Formulars an das E-Mail-Programm. Der
   Schalter bleibt an seinem Platz und in seiner Farbe — er tritt lediglich
   einen Schritt zurueck, solange er nichts annimmt. */
.btn[disabled] { opacity: 0.65; cursor: default; }

.btn-primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn-primary[disabled]:hover { background: var(--navy); border-color: var(--navy); }

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--line-control);
}
.btn-ghost:hover { border-color: var(--navy); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Deckend statt halbtransparent mit backdrop-filter: Der Weichzeichner
     kostet auf jedem Scrollframe GPU-Zeit, sichtbar war er kaum. */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  /* Schatten blendet beim Scrollen ein statt zu springen */
  transition: box-shadow 0.25s var(--ease-out);
}

.site-header.scrolled { box-shadow: 0 4px 18px rgba(29, 37, 71, 0.07); }

/* min-height statt height: Bei Standardschrift ist das derselbe Wert - der
   Inhalt misst 74px. Bei vergroesserter Schrift umbricht die Navigation
   jedoch auf mehrere Zeilen; eine feste Hoehe liesse sie aus der Kopfzeile
   heraus ueber den Inhalt darunter laufen, statt die Leiste mitwachsen zu
   lassen. */
.header-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
}

.brand img { height: 42px; width: auto; }

.brand-text { line-height: 1.2; min-width: 0; }

.brand-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--navy-ink);
  letter-spacing: 0.02em;
}

.brand-text span {
  display: block;
  font-size: var(--fs-micro);
  color: var(--muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-nav { display: flex; align-items: center; gap: 24px; }

.nav-link {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  /* Buttons erben line-height nicht — ohne den expliziten Wert wäre die
     „Leistungen"-Schaltfläche 8px flacher als die Link-Nachbarn und ihre
     aktive Unterstreichung säße 4px höher. */
  line-height: 1.65;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}

/* Dropdown „Leistungen" */

.nav-item { position: relative; }

.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
}
.nav-sub-toggle:hover { color: var(--navy); }
.nav-sub-toggle svg { transition: transform 0.15s ease; margin-top: 1px; }
.nav-item.open .nav-sub-toggle svg { transform: rotate(180deg); }

.sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -18px;
  min-width: 268px;
  /* unsichtbare Hover-Brücke über den 10px-Abstand zum Menüpunkt */
  --bridge: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(29, 37, 71, 0.12);
  padding: 8px;
  /* Weicher Ab-/Auftritt statt display-Sprung; visibility hält das
     geschlossene Menü aus Tab-Reihenfolge und Hit-Testing heraus.
     Austritt (0.1s) schneller als Eintritt (0.15s). */
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 0.1s var(--ease-out),
    transform 0.1s var(--ease-out),
    visibility 0s linear 0.1s;
}

.nav-item.open .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out),
    visibility 0s;
}

.sub-menu::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--bridge));
  left: 0;
  right: 0;
  height: var(--bridge);
}

.sub-link {
  display: block;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: 2px;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.sub-link:hover { background: var(--mist); color: var(--navy); }
.sub-link[aria-current="page"] { color: var(--navy); background: var(--mist); }

.main-nav > .nav-link:hover { color: var(--navy); border-bottom-color: var(--green); }
.main-nav .nav-link[aria-current="page"],
.nav-item.is-here .nav-sub-toggle { color: var(--navy); border-bottom-color: var(--green); }

.header-tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 500;
  color: #fff;
  background: var(--navy);
  text-decoration: none;
  border: 1.5px solid var(--navy);
  border-radius: var(--radius);
  padding: 10px 18px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}

.header-tel:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.header-tel svg { flex: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--line-control);
  border-radius: var(--radius);
  padding: 9px 11px;
  cursor: pointer;
  color: var(--navy);
}

/* Mobile Navigation */

.mobile-nav {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 10px 24px 18px;
}

.mobile-link {
  display: block;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.mobile-link:last-child { border-bottom: none; }
.mobile-sub { padding-left: 20px; font-size: 0.94rem; }

.mobile-nav a[href^="tel:"] {
  margin-top: 14px;
  background: var(--navy);
  color: #fff;
  text-align: center;
  border-radius: var(--radius);
  border-bottom: none;
  padding: 13px;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0) 62%,
    #ffffff 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 64px;
}

.hero-copy .overline { margin-bottom: 20px; color: var(--navy); }
.hero-copy .overline::before { background: var(--navy); }

.hero-copy h1 { max-width: 21ch; }

.hero-copy .lead {
  margin-top: 24px;
  max-width: 56ch;
  font-size: 1.13rem;
}

.hero-ctas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

/* Gebäudeschnitt-Zeichnung (Signatur-Element, aus Favoriten-Prototyp) */

.hero-figure { min-width: 0; }

.hero-figure svg {
  width: 100%;
  height: auto;
  display: block;
}

.hero-figure .d {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-figure .d-bold { stroke-width: 2.25; }

.hero-figure .lbl {
  font-family: var(--font-mono);
  font-size: 12.5px;
  fill: var(--navy);
}

.hero-figure .lbl-line { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.hero-figure .lbl-dot { fill: var(--green); }

/* Abweichende Beschriftungsgrößen innerhalb der Zeichnungen */
.hero-figure .lbl--lg { font-size: 20px; }
.hero-figure .lbl--sm { font-size: 11px; }

.hero-caption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--muted);
  letter-spacing: 0.05em;
  text-align: right;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-figure .d {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 1.4s var(--ease-line) forwards;
    animation-delay: calc(var(--i, 0) * 0.14s);
  }
  .hero-figure .lbl,
  .hero-figure .lbl-line,
  .hero-figure .lbl-dot {
    opacity: 0;
    animation: fade-in 0.7s var(--ease-out) forwards;
    animation-delay: calc(1.1s + var(--i, 0) * 0.12s);
  }
}

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }

/* ---------- Vertrauensleiste ---------- */

.trustbar { background: var(--navy); color: #fff; }

.trustbar-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 26px;
  padding-bottom: 26px;
}

.trust-badges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  flex: 1;
  min-width: 0;
}

.trust-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 4px 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.trust-item:first-child { border-left: none; padding-left: 0; }

.trust-item svg { flex: none; margin-top: 3px; color: var(--green-light); }

.trust-emblem {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Das EEE-Emblem ist randlos gesetzt: Die Grafik reicht in der Datei bis an
   alle vier Kanten (geprüft — kein weißer Pixel am Rand, schon im Original
   nicht). Ohne eigene weiße Auflage schneidet jeder Untergrund es scheinbar
   an. Die Auflage steht deshalb hier an EINER Stelle für alle vier
   Einbauorte; die Sektionen setzen nur noch die Höhe. */
.ee-plate {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 5px 7px;
  width: auto;
}

.trust-emblem .ee-plate { height: 60px; }

/* ---------- Sektionen ---------- */

.section { padding: 72px 0; }
.section-alt { background: var(--leaf); }

/* Dezentes Blueprint-Raster (wie im Hero) als Sektionsfüllung.
   Oberste Ebene ist ein Weiß-Verlauf, der das Raster an den
   Sektionsrändern ausblendet — kein harter Anfang, kein hartes Ende. */
.section-grid {
  background-image:
    linear-gradient(180deg,
      #ffffff 0,
      rgba(255, 255, 255, 0) 120px,
      rgba(255, 255, 255, 0) calc(100% - 120px),
      #ffffff 100%),
    linear-gradient(var(--grid-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-soft) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  background-repeat: no-repeat, repeat, repeat;
}


/* ---------- Leistungen ---------- */

/* 8-Spalten-Raster, Karten spannen je 2: vier pro Reihe, die zweite
   Reihe mit 3 Karten sitzt mittig — alle 7 Karten gleich groß. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 18px;
}

.services-grid .service-card { grid-column: span 2; }
.services-grid .service-card:nth-child(5) { grid-column: 2 / span 2; }
.services-grid .service-card:nth-child(6) { grid-column: 4 / span 2; }
.services-grid .service-card:nth-child(7) { grid-column: 6 / span 2; }

/* Weiße Karten auf dem Blueprint-Raster der Sektion — alle sieben
   identisch in Farbe, Größe und Betonung. */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--paper);
  border: 1.5px solid var(--line-navy);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Nur verlinkte Karten reagieren auf Hover — und sind dann auch
   ganzflächig anklickbar (.stretched-link). Karten ohne Ziel bleiben
   ruhig stehen, statt Klickbarkeit zu versprechen. */
/* Die sieben Kacheln der Startseite tragen die Toenung dauerhaft: Sie sind
   die einzige Flaeche der Seite, auf der jede Kachel ein Ziel hat, und
   heben sich als Block vom Blueprint-Raster ab. Die Hairline im Kopf
   wechselt dafuer auf --line-leaf - --line verschwindet in der Toenung. */
.service-card--link { background: var(--leaf-soft); }

.service-card--link .service-head { border-bottom-color: var(--line-leaf); }

/* Der Hover bleibt als Reaktion lesbar, weil er drei Dinge zugleich tut:
   die Toenung vertieft sich um eine Stufe (leaf-soft -> leaf), die Kante
   wird gruen, und die Karte bekommt ihren Schatten. */
.service-card--link:hover {
  background: var(--leaf);
  border-color: var(--green);
  box-shadow: 0 10px 26px rgba(72, 117, 77, 0.14);
}

.service-card--link { cursor: pointer; }

.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Chevron kennzeichnet die Karten mit eigener Seite */
.service-card--link .card-cta::after {
  content: "→";
  margin-left: 8px;
  display: inline-block;
  transition: transform 0.18s ease;
}

.service-card--link:hover .card-cta::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .service-card--link .card-cta::after,
  .svc-more::after { transition: none; }
  .svc-more:hover::after { transform: none; }
  .service-card--link:hover .card-cta::after { transform: none; }
}

/* Titelzeile mit Hairline: trennt Überschrift sichtbar vom Fließtext */
.service-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.18s ease;
}

.service-card--link:hover .service-head { border-bottom-color: rgba(95, 148, 100, 0.45); }

.service-head h3 {
  font-size: var(--h3-sm);
  line-height: 1.3;
  /* Flex-Item darf unter die Wortbreite schrumpfen — sonst laufen lange
     Komposita ("Instandsetzungsplanung") über den Kartenrand hinaus. */
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.service-card .icon {
  flex: none;
  width: 44px;
  height: 44px;
  background: var(--mist);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--green-deep);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.service-card--link:hover .icon {
  background: var(--green-deep);
  color: #fff;
}

.service-card p {
  font-size: 0.95rem;
  color: var(--muted);
  hyphens: auto;
}

.service-card .card-cta { color: var(--green-deep); }

.card-cta {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
}

.card-cta--quiet {
  font-size: 0.88rem;
  font-weight: 500;
}

/* ---------- Kennzahlen-Band ---------- */

/* Dunkle Bänder — Kennzahlen und Kontaktabschluss teilen eine Definition,
   damit Farbe und Rasterdichte nicht auseinanderlaufen. */
.stats-band,
.contact {
  background-color: var(--navy-deep);
  color: #fff;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
}

.stats-band-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  padding-top: 48px;
  padding-bottom: 48px;
}

.stats-band .stat {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  padding-left: 26px;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.05;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.stat-plus { color: var(--green-light); }

/* Auf hellem Grund trägt das kräftigere Logo-Grün (Kennzahl-Highlight) */
.stat-hero .stat-plus { color: var(--green-deep); }

.stats-band .stat-label {
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 34ch;
}

/* ---------- Zielgruppen ---------- */

/* Register-Zeilenform (wie eine Planlegende): Skizze · Titel · Satz.
   Setzt sich bewusst vom Kachelraster der Leistungen ab. */
.audience-list {
  border-top: 1px solid var(--line);
}

.audience-row {
  display: grid;
  grid-template-columns: 104px minmax(220px, 260px) minmax(0, 1fr);
  gap: 8px 32px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.audience-row h3 { font-size: var(--h3-md); }
.audience-row p { font-size: 0.97rem; color: var(--muted); }

/* Mini-Skizzen im Stil der Hero-Zeichnung (statisch) */
.audience-sketch {
  margin: 0;
}

.audience-sketch svg {
  display: block;
  width: 96px;
  height: 51px;
}

.audience-sketch .s {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audience-sketch .s-dot { fill: var(--green); }

.audience-sketch .s-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--navy);
}

/* ---------- Auftraggeber-Stimmen ---------- */

/* minmax(0, …): Die Zitatkarten dürfen unter ihre Textbreite schrumpfen —
   mit bloßem 1fr wächst der Track auf schmalen Viewports über den
   Container hinaus und die Seite scrollt seitwärts. */
.quotes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.quote-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 26px 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quote-card blockquote p {
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.58;
  color: var(--ink);
}

.quote-card figcaption {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 0.95rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 14px;
}

.quote-thumb {
  flex: none;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.quote-meta { min-width: 0; }

.quote-card figcaption strong {
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-weight: 600;
}

.quote-card figcaption span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.03em;
  color: var(--muted);
}

/* ---------- Referenzen-Teaser: Vorher/Nachher + Karten ---------- */

.ba-layout {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 22px;
  align-items: stretch;
}

/* Plan-Eckmarken um den Vergleichsrahmen (wie bei Planausschnitten) */
.ba-plan {
  position: relative;
  padding: 10px;
}

.ba-plan::before,
.ba-plan::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--navy);
  border-style: solid;
  opacity: 0.5;
}
.ba-plan::before { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; }
.ba-plan::after { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; }

.ba-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--navy-ink);
  --pos: 50%;
}

.ba-clip {
  position: absolute;
  inset: 0;
}

/* Jede Seite (Bild + Label) wird an der Reglerlinie beschnitten —
   das Label verschwindet zusammen mit seinem Bild. */
.ba-clip-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-clip-after { clip-path: inset(0 0 0 var(--pos)); }

.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line-strong);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.ba-handle::before,
.ba-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  transform: translateY(-50%);
}
.ba-handle::before {
  left: 7px;
  border-width: 5px 6px 5px 0;
  border-color: transparent var(--navy) transparent transparent;
}
.ba-handle::after {
  right: 7px;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent var(--navy);
}

.ba-tag {
  position: absolute;
  top: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy-ink);
  border-radius: 2px;
  padding: 4px 9px;
}

.ba-tag-before { left: 12px; }
.ba-tag-after { right: 12px; }

.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  /* Vertikales Wischen bleibt beim Browser (Seite scrollt), waagerechtes
     Ziehen bedient den Regler — sonst fängt die Vollflächen-Eingabe auf
     dem Smartphone das Daumen-Scrollen ab. */
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Der Regler ist eine deckungsgleiche, unsichtbare Fläche (opacity:0) —
   ein Fokusring auf ihm selbst wäre ebenfalls unsichtbar. Der Rahmen
   trägt ihn deshalb stellvertretend, in derselben Form wie an jedem
   anderen Bedienelement der Seite. */
.ba-frame:has(.ba-range:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.ba-caption {
  margin-top: 10px;
  padding-left: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.03em;
  color: var(--muted);
}

.ba-caption::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 9px;
  vertical-align: 1px;
}

#referenzen .ref-grid {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.ref-card {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ref-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 10px 26px rgba(29, 37, 71, 0.07);
}

.ref-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
  transition: filter 0.2s ease;
}

.ref-card:hover img { filter: saturate(1); }

.ref-card figcaption {
  padding: 16px 18px;
  align-self: center;
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.ref-card figcaption strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h3-sm);
  color: var(--navy-ink);
  line-height: 1.3;
  margin-bottom: 5px;
}

.ref-card figcaption span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.03em;
  line-height: 1.55;
  color: var(--muted);
}

.ref-more {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  text-align: center;
}

/* ---------- FAQ ---------- */

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}

/* Der Kopf läuft beim Scrollen mit — die linke Spalte bleibt in
   Gebrauch, statt unter der kurzen Überschrift leerzulaufen. */
.faq-layout .section-head {
  margin-bottom: 0;
  position: sticky;
  top: 100px;
}
.faq-layout .section-head a { color: var(--navy); }

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item:first-child { border-top: 1px solid var(--line); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 4px;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--navy-ink);
  transition: color var(--t-fast) ease;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--green-deep);
  flex: none;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item summary:hover { color: var(--navy); }

.faq-answer {
  padding: 0 4px 22px;
  color: var(--muted);
  max-width: 66ch;
}

/* ---------- Kontakt ---------- */

.contact .overline { color: var(--green-light); }
.contact .overline::before { background: var(--green-light); }

.contact h2 { color: #fff; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 60px;
  /* Die Textspalte ist ~250px kürzer als das Formular — mittig gesetzt
     verteilt sich die Differenz, statt unten als Loch zu hängen. */
  align-items: center;
}

.contact-copy p {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.78);
  max-width: 44ch;
}

.contact-data {
  margin-top: 34px;
  display: grid;
  gap: 18px;
  font-size: 0.98rem;
}

.contact-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.92);
}

.contact-row svg { flex: none; margin-top: 4px; color: var(--green-light); }

.contact-row a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: border-color var(--t-fast) ease;
}

.contact-row a:hover { border-bottom-color: var(--green-light); }

.contact-form {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 28px 26px;
  color: var(--ink);
}

.form-field { margin-bottom: 14px; }

.form-field label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--navy-ink);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line-control);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color 0.15s ease;
}

.form-field textarea { resize: vertical; min-height: 110px; }

/* Der ruhige Randwechsel bleibt die Reaktion auf jeden Fokus. */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--navy);
}

/* Als alleiniges Signal trägt der Randwechsel jedoch zu wenig: 1,5px bei
   3,1:1 gegen den Ruhezustand. Wo der Browser eine Fokusanzeige für
   angebracht hält, kommt deshalb derselbe Ring dazu, den jedes andere
   Bedienelement der Seite trägt. Bei Texteingaben ist das jeder Fokus,
   bei der Auswahlliste die Tastaturbedienung. */
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.form-field input.is-invalid { border-color: var(--mark); }

.contact-form .btn { width: 100%; }

/* Fehler steht am Feld, das ihn ausgelöst hat */
/* Die Fehlerzeile steht dauerhaft im Dokument — leer, ohne Hoehe, ohne
   Abstand. Ein role="alert", das erst gemeinsam mit seinem Text
   eingeblendet wird, ist im Moment der Aenderung noch nicht im
   Accessibility-Baum und loest keine Ansage aus. Eine bereits
   vorhandene leere Zeile schon. */
.field-error {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--mark);
}

.field-error:not(:empty) { margin-top: 7px; }

.form-hint {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

/* Navy, nicht Grün: Grün bleibt reine Markenfarbe und bedeutet nirgends
   zusätzlich „erledigt". Der Status trägt ohnehin Überschrift und Position. */
.form-success {
  background: var(--paper);
  border-radius: var(--radius);
  border-left: 4px solid var(--navy);
  padding: 32px 30px;
  color: var(--ink);
}

.form-success h3 { margin-bottom: 10px; }
.form-success p { color: var(--muted); }
.form-success p + p { margin-top: 10px; }

/* Kein E-Mail-Programm übernommen: Hinweis unter dem Formular, das
   sichtbar bleibt — die Eingaben gehen nicht verloren. */
.form-fallback {
  margin-top: 18px;
  background: var(--paper);
  border-radius: var(--radius);
  border-left: 4px solid var(--mark);
  padding: 26px 28px;
  color: var(--ink);
}

.form-fallback h3 { margin-bottom: 10px; }
.form-fallback p { color: var(--muted); }

/* ---------- Footer ---------- */

/* Heller Footer: setzt sich tonal von der dunklen Kontakt-Sektion ab,
   die Seite schließt ruhig auf der hellen Grundfläche. */
.site-footer {
  background: var(--paper);
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding: 56px 0 32px;
  font-size: 0.94rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 44px;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--line);
}

.footer-brand { display: flex; gap: 14px; align-items: flex-start; }
.footer-brand img { height: 44px; width: auto; }
.footer-brand strong {
  display: block;
  font-family: var(--font-display);
  color: var(--navy-ink);
  margin-bottom: 6px;
}

.footer-head {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.footer-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }

.footer-nav a,
.footer-legal a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}
.footer-nav a:hover,
.footer-legal a:hover { color: var(--navy); text-decoration: underline; }

.footer-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.footer-contact a { color: var(--ink); text-decoration: none; transition: color var(--t-fast) ease; }
.footer-contact a:hover { color: var(--navy); text-decoration: underline; }

.footer-ee { margin-top: 18px; height: 50px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
}

.footer-copy {
  font-size: 0.86rem;
  color: var(--muted);
}

/* ---------- Scroll-Reveal ---------- */

.rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: var(--rvd, 0s);
}

.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  /* Zustandswechsel bleiben, nur die Bewegung entfällt: Dropdown ohne
     Versatz/Überblendung, Chevrons und Plus-Zeichen springen um. */
  .sub-menu,
  .nav-item.open .sub-menu { transition: none; transform: none; }
  .nav-sub-toggle svg,
  .faq-item summary::after,
  .norms summary::after { transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 62.51em) {
  .services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .services-grid .service-card { grid-column: span 2; }
  .services-grid .service-card:nth-child(5),
  .services-grid .service-card:nth-child(6) { grid-column: span 2; }
  .services-grid .service-card:nth-child(7) { grid-column: 2 / span 2; }
  .audience-row { grid-template-columns: 88px 200px minmax(0, 1fr); gap: 8px 24px; }
  .quotes-grid { grid-template-columns: minmax(0, 1fr); }
  .ba-layout { grid-template-columns: minmax(0, 1fr); }
  .trustbar-inner { flex-direction: column; align-items: stretch; gap: 20px; }
  .trust-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .trust-item:nth-child(3) { border-left: none; padding-left: 0; }
  .trust-emblem { flex-direction: row; justify-content: flex-start; gap: 14px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 56px; padding-bottom: 64px; }
  .hero-figure { max-width: 560px; }
  .stats-band-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .stats-band .stat { padding-left: 22px; }
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .faq-layout .section-head { position: static; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 45em) {
  .section { padding: 64px 0; }

  /* Kopfzeile ist hier 66px hoch — Ankersprünge landeten 22px zu tief */
  html { scroll-padding-top: 78px; }

  .header-inner { min-height: 66px; gap: 14px; }
  .brand img { height: 36px; }
  .brand-text span { display: none; }
  .header-tel span { display: none; }
  .header-tel { padding: 9px 11px; }

  .nav-toggle { display: inline-flex; }
  .main-nav { display: none; }

  .services-grid { grid-template-columns: minmax(0, 1fr); }
  .services-grid .service-card,
  .services-grid .service-card:nth-child(5),
  .services-grid .service-card:nth-child(6),
  .services-grid .service-card:nth-child(7) { grid-column: auto; }
  .audience-row {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 4px 18px;
    align-items: start;
  }
  .audience-row .audience-sketch { grid-row: 1 / span 2; }
  .audience-sketch svg { width: 68px; height: 36px; }
  .trust-badges { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .trust-item { border-left: none; padding: 0; }
  .trust-emblem { flex-wrap: wrap; }
  .ref-card { grid-template-columns: 120px minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .contact-form, .form-success, .form-fallback { padding: 26px 20px; }
}

/* ============================================================
   Unterseiten (Phase 2)
   ============================================================ */

/* ---------- Subpage-Hero ---------- */

.subpage-hero {
  position: relative;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px;
  overflow: hidden;
}

.subpage-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0) 40%,
    #ffffff 100%);
  pointer-events: none;
}

.subpage-hero-inner {
  position: relative;
  z-index: 1;
  padding: 48px 0;
  max-width: 820px;
}

/* Die Titel der Unterseiten sind zweiteilig gebaut („Instandhaltungskonzept
   und Kostenschätzung"). Im freien Umbruch endet die erste Zeile auf dem
   „und" und schiebt das zweite Substantiv allein in die naechste. Balance
   verteilt stattdessen auf gleich lange Zeilen und trennt an der Fuge.
   Bewusst NICHT global auf h1/h2/h3: Die Startseiten-Ueberschrift gewinnt
   dabei nichts - dieselbe Zeilenzahl, dieselbe einwortige Schlusszeile -,
   verliert aber ihr erstes Wort an eine eigene Zeile. */
.subpage-hero-inner h1 { text-wrap: balance; }

.subpage-hero-inner .overline { margin-bottom: 16px; }
.subpage-hero-inner .lead { margin-top: 20px; font-size: 1.12rem; max-width: 60ch; }
.subpage-hero-inner .btn { margin-top: 30px; }

/* inline-flex statt width:max-content: schrumpft auf den Inhalt, bleibt aber
   im Container und bricht bei grosser Textgroesse um. Die 3px Innenabstand
   bringen die Zielflaeche auf 27px (WCAG 2.5.8 verlangt 24px); der
   Aussenabstand gibt sie wieder her, damit die Zeile steht, wo sie stand. */
.breadcrumb {
  display: inline-flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--muted);
  text-decoration: none;
  margin: -3px 0 31px;
}

.breadcrumb { transition: color var(--t-fast) ease; }
.breadcrumb:hover { color: var(--navy); }

/* Anker-Index unter dem Hero (Planregister-Optik) */
.anchor-nav {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
}

.anchor-nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--navy);
  text-decoration: none;
  border: 1px solid var(--line-control);
  border-radius: 2px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.85);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.anchor-nav a:hover { border-color: var(--navy); background: #fff; }

/* ---------- Leistungs-Abschnitte (Übersichtsseite) ---------- */

/* Leistungsliste: sieben gleichwertige Positionen.
   Die Fläche wechselt zeilenweise — wie die Schattierung einer Positions-
   liste im Leistungsverzeichnis. Das trennt die Zeilen sichtbar, ohne sie
   zu gruppieren oder unterschiedlich zu gewichten. Hairlines zwischen den
   Zeilen entfallen dadurch: zweimal trennen wäre einmal zu viel.
   Ungerade Zeilen tragen den Grünton, damit die Liste direkt unter dem
   weißen Hero mit einem Flächenwechsel beginnt und mit der siebten Zeile
   auf Grünton endet — der Seitenabschluss folgt so dem Muster der übrigen
   Unterseiten (getöntes Band → dunkles Kontaktband). */
.svc-list { padding: 0; }

.svc-row { background: var(--paper); padding: 32px 0; }
.svc-row:nth-of-type(odd) { background: var(--leaf); }

/* Drei Spalten mit fester Titel- und Textbreite: Titel, Beschreibung und
   Verweis stehen dadurch in allen sieben Zeilen an derselben Stelle.
   Die dritte Spalte bleibt leer, wo es keinen Verweis gibt — sie hält das
   Textmaß konstant, statt es von Zeile zu Zeile springen zu lassen. */
.svc-section {
  display: grid;
  grid-template-columns: minmax(0, 296px) minmax(0, 493px) minmax(190px, 1fr);
  gap: 40px;
  align-items: start;
}

/* Eine Achse für alles: Das Icon-Glyph (24px), die erste Zeile der
   Überschrift (22,4 × 1,15 = 25,8px) und die erste Textzeile (16 × 1,6 =
   25,6px) haben ihre optische Mitte bei 12,0 / 12,9 / 12,8px. Der eine
   Pixel Versatz am Icon bringt alle drei auf dieselbe Linie. */
.svc-head { display: flex; align-items: flex-start; gap: 14px; }

.svc-head .icon {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--green-deep);
}

.svc-head h2 {
  font-size: clamp(1.2rem, 1.9vw, 1.4rem);
  line-height: 1.15;
  /* Als Flex-Item schrumpft die Überschrift sonst nicht unter ihr längstes
     Wort („Bauwerksuntersuchung") und läuft in die Textspalte hinein. */
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Verweis auf die Schwerpunktseite: stiller Textlink in der freien Fläche
   rechts. Als Schaltfläche wog er in einer Listenzeile zu schwer — die
   Zeile selbst ist der Inhalt, der Verweis ihre Fußnote. */
.svc-more {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.68;
  color: var(--navy);
  text-decoration: none;
  justify-self: start;
  /* Zielflaeche auf 25px (WCAG 2.5.8); der negative Aussenabstand haelt die
     Zeile auf derselben Achse wie Titel und Text. */
  padding: 1px 0;
  margin: -1px 0;
}

.svc-more::after {
  content: "→";
  margin-left: 8px;
  display: inline-block;
  transition: transform var(--t-hover) ease;
}

.svc-more:hover { text-decoration: underline; }
.svc-more:hover::after { transform: translateX(3px); }

/* Der frühere Umbruch zwischen 1001 und 1150px ist entfallen: Seit sechs
   der sieben Zeilen einen Verweis tragen, heißt er überall gleich („Mehr
   erfahren") und passt mit 105px auch in die schmalste Fassung der dritten
   Spalte. Die Achse bleibt dadurch über alle Zeilen und Breiten dieselbe. */

.svc-body p { color: var(--muted); max-width: 62ch; }
.svc-body p + p { margin-top: 12px; }
.svc-body .btn { margin-top: 22px; }

/* Nur in den Listenzeilen kompakter: 1rem statt 1.0625 ergibt bei gleicher
   Zeichenzahl je Zeile ein um 31px schmaleres Satzbild und einen um 2,5px
   engeren Zeilenfall — die Zeile wird niedriger und schmaler, ohne dass ein
   Wort wegfällt. Ausserhalb der Liste (Parkbauten, iSFP, Über uns) trägt
   .svc-body weiterhin die normale Fließtextgröße. */
.svc-row .svc-body p { font-size: 1rem; line-height: 1.6; }
.svc-row .svc-body p + p { margin-top: 10px; }
.svc-row .svc-body .btn { margin-top: 18px; }

/* Fußnote schließt das letzte Band ab — Hairline in der Tönung des Bandes */
.svc-foot { background: var(--leaf); padding-bottom: 32px; }
.svc-foot .norms { border-top-color: var(--line-leaf); }

/* Fachliche Grundlagen: Fußnote der Leistungsliste, kein eigenes Band und
   keine Karte. Die Hairline setzt die Zeilenfolge der .svc-section fort,
   die Mono-Mikroschrift ordnet den Hinweis in die Beweisschicht der Seite
   ein — als Kompetenzbeleg lesbar, ohne wie eine Hauptsektion zu wirken. */
.norms { border-top: 1px solid var(--line); }

.norms summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-deep);
  transition: color var(--t-fast) ease;
}

.norms summary:hover { color: var(--navy); }

.norms summary::-webkit-details-marker { display: none; }

.norms summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--green-deep);
  transition: transform 0.2s ease;
}

.norms[open] summary::after { transform: rotate(45deg); }

.norms-body { padding: 0 2px 22px; color: var(--muted); max-width: 780px; }

.norms-body ul {
  margin-top: 10px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 28px;
}

.norms-body li {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink);
  padding-left: 16px;
  position: relative;
}

.norms-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 1.5px;
  background: var(--green);
}

/* ---------- Betonriss-Annotation (Parkbauten, helle Palette) ---------- */

.riss {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  /* Dritter Term hält Abstand zur Textspalte: Diese endet bei
     50% + 264px (halbe Containerbreite + Textspaltenbreite). */
  width: min(46vw, 620px, calc(50% - 330px));
  z-index: 0;
  pointer-events: none;
}

.riss svg { width: 100%; height: 100%; }

.riss .crack {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.25;
  stroke-linecap: round;
  opacity: 0.75;
}

.riss .crack-fine {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.55;
}

.mp { opacity: 0; transition: opacity 0.5s var(--ease-out); }
.mp.is-on { opacity: 1; }
.mp circle.ring { fill: none; stroke: var(--green-deep); stroke-width: 1.5; }
.mp line { stroke: var(--green-deep); stroke-width: 1.5; }

.mp text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: var(--navy);
  text-transform: uppercase;
}

.mp text.wert { fill: var(--muted); text-transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .riss .crack,
  .riss .crack-fine {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: zeichnen 2.2s var(--ease-line) 0.3s forwards;
  }
}

@keyframes zeichnen { to { stroke-dashoffset: 0; } }

/* ---------- Kennzahl-Highlight (einzelne Zahl) ---------- */

.stat-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.stat-hero .stat-value { color: var(--navy); font-size: clamp(2.8rem, 5vw, 4rem); }
.stat-hero .stat-label { color: var(--muted); font-size: 1.02rem; max-width: 44ch; }

/* ---------- Projektliste (Text-Register) ---------- */

.register {
  columns: 2;
  column-gap: 44px;
  border-top: 1px solid var(--line);
}

.register li {
  list-style: none;
  break-inside: avoid;
  display: block;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 0.97rem;
  color: var(--ink);
}

.register li span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-top: 2px;
}

/* ---------- Text-Bild-Raster (Unterseiten) ---------- */

.prose-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 56px;
  align-items: start;
}

.prose-grid .section-head { margin-bottom: 24px; }

.prose-photo img { width: 100%; height: auto; }

/* ---------- iSFP: Fahrplan-Diagramm & Bausteine ---------- */

.route-figure { margin-top: 48px; max-width: 780px; }
.route-figure svg { width: 100%; height: auto; display: block; }

.route-figure .d {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.route-figure .stop { fill: var(--paper); stroke: var(--navy); stroke-width: 1.5; }
.route-figure .stop-final { fill: var(--green); stroke: var(--green-deep); }

.route-figure .lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--navy);
}

@media (prefers-reduced-motion: no-preference) {
  .route-figure .d {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 1.6s var(--ease-line) forwards 0.3s;
  }
  .route-figure .stop,
  .route-figure .stop-final,
  .route-figure .lbl {
    opacity: 0;
    animation: fade-in 0.6s var(--ease-out) forwards;
    animation-delay: calc(0.5s + var(--i, 0) * 0.22s);
  }
}

/* Vorteile als durchgehendes dunkles Band.
   Fuenf der acht Sektionen dieser Seite sind zweispaltige Aufteilungen mit
   Kopf links — "Was ist der iSFP" (672/384), "Fuer wen" (576/480) und das
   FAQ (384/672) darunter. Eine sechste davon las sich als Fortsetzung der
   Nachbarsektion. Ein Band ohne Aufteilung ist die einzige Struktur, die
   die Seite noch nicht fuehrt, und der klarste Halt beim Scrollen: Nach
   zwei hellen Sektionen bleibt das Auge hier stehen.
   Navy, nicht Navy-Tief — wie die Vertrauensleiste der Startseite und
   dadurch unterscheidbar vom Kontaktband am Seitenende. */
.benefit-band {
  background-color: var(--navy);
  color: #fff;
  --focus: var(--paper);
}

.benefit-band .overline { color: var(--green-light); }
.benefit-band .overline::before { background: var(--green-light); }
.benefit-band h2 { color: #fff; }
.benefit-band .section-head { margin-bottom: 26px; }

/* Drei Aussagen und der Nachweis als vier Felder einer Reihe — dieselbe
   Gliederung wie die Vertrauensleiste der Startseite. */
.benefit-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 250px);
}

.benefit,
.benefit-proof {
  padding: 2px 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.benefit:first-child { border-left: none; padding-left: 0; }

/* Zwei Zeilen Mindesthoehe: „Vom Ingenieur, nicht vom Vermittler" bricht
   um, die beiden anderen Titel nicht — ohne das Mass begaennen die drei
   Saetze auf drei verschiedenen Linien. */
.benefit h3 {
  color: #fff;
  font-size: var(--h3-md);
  min-height: 2.3em;
  margin-bottom: 7px;
}
.benefit p { font-size: 0.95rem; line-height: 1.55; color: rgba(255, 255, 255, 0.78); }

.benefit-proof .ee-plate { height: 46px; }
.benefit-proof p {
  margin-top: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.benefit-proof a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: border-color var(--t-fast) ease;
}

.benefit-proof a:hover { border-bottom-color: var(--green-light); }

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  counter-reset: step;
}

.step { position: relative; padding-top: 54px; }

/* Stationen wie im Fahrplan-Diagramm: nummerierte Haltepunkte auf
   einer durchgehenden Linie, das Ziel in Grün. */
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--navy);
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1.5px solid var(--navy);
  border-radius: 50%;
  z-index: 1;
}

/* Zielstation: dunkleres Logo-Grün, damit die weiße Ziffer 4,5:1 erreicht */
.step:last-child::before {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: #fff;
}

.step::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 48px;
  /* Linie läuft durch den Spaltenabstand bis zum nächsten Haltepunkt */
  right: -26px;
  border-top: 1.5px solid var(--line-strong);
}

.step:last-child::after { display: none; }

.step h3 { margin-bottom: 8px; font-size: var(--h3-md); }
.step p { font-size: 0.97rem; color: var(--muted); }

/* Aussage-Block (Über uns: Slogan · iSFP: „Warum TGI").
   Trägt bewusst keine eigene Fläche: Er sitzt direkt auf dem Sektionsband,
   damit nicht zwei Flächen dieselbe eine Aussage einrahmen. Die Farbe gibt
   die Weiß/Grünton-Abfolge der Seite vor, nicht der Block. */
/* minmax(0,1fr): Eine implizite grid-Spur ist „auto" und kann nicht unter
   ihr laengstes Wort schrumpfen — „Einzelprodukt" sprengt bei doppelter
   Textgroesse sonst die Flaeche. */
.statement { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.statement h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.statement p { color: var(--muted); max-width: 68ch; }

/* Das Firmenmotto ist der Abschluss der Selbstdarstellung, kein
   Zwischentitel. Es stand als 27px-Einzeiler ueber die volle Breite und
   las sich wie eine Bildunterschrift; auf zwei Zeilen und in Zitatgroesse
   traegt es die Sektion. Bewusst nur hier — die fuenf Leistungsseiten
   nutzen dieselbe Klasse in ihrer .statement--split-Variante. */
#anspruch .statement h2 {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.22;
  max-width: 33ch;
}

/* EEE-Hinweiszeile. flex-wrap: unter ~500px passt das 215px breite
   Emblem nicht mehr neben den Text — der Hinweis rückt dann unter das
   Emblem, statt rechts aus der Karte zu laufen. */
/* ---------- Referenzen-Seite ---------- */

.ba-pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 22px;
}

.gallery-cat { margin-top: 44px; }
.gallery-cat:first-of-type { margin-top: 0; }

.gallery-cat h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-deep);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-leaf);
  margin-bottom: 18px;
}

/* Flex statt Grid: volle Reihen füllen die Breite exakt aus. Eine
   angebrochene Reihe läuft linksbündig weiter — sie liest sich als
   Listenende; zentriert stünde eine Einzelkarte zwischen zwei Löchern.
   Die Kartenbreite ist in jeder Kategorie dieselbe. */
.gallery-grid {
  --gal-gap: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--gal-gap);
}

.gallery-card {
  margin: 0;
  min-width: 0;
  flex: 0 0 calc((100% - 2 * var(--gal-gap)) / 3);
  max-width: calc((100% - 2 * var(--gal-gap)) / 3);
}

/* Zugeklappt zeigt jede Kategorie genau eine Rasterreihe — nie eine
   angebrochene zweite. Die Reihenlänge steht nicht im Markup, sondern folgt
   dem Raster: drei Karten, ab Tablet zwei. Einspaltig gibt es keine Reihe
   mehr, an der eine Einzelkarte auffallen könnte; dort lesen sich drei
   Karten als Anriss der Kategorie. */
.gallery-cat:not(.is-open) .gallery-card:nth-of-type(n + 4) { display: none; }

/* Der Schalter erscheint nur, wenn zugeklappt tatsächlich etwas verborgen
   ist — also sobald die Kategorie eine Karte mehr hat als eine Reihe fasst. */
.gallery-cat:not(:has(.gallery-card:nth-of-type(4))) .gallery-more { display: none; }

.gallery-more {
  display: block;
  margin: 22px auto 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  background: transparent;
  border: 1.5px solid var(--line-control);
  border-radius: var(--radius);
  padding: 10px 22px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gallery-more:hover { border-color: var(--navy); background: var(--paper); }

.gallery-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  filter: saturate(0.92);
  transition: filter var(--t-hover) ease, border-color var(--t-hover) ease;
}

.gallery-card:hover img { filter: saturate(1); border-color: var(--line-strong); }

.gallery-card figcaption {
  margin-top: 10px;
  font-size: var(--h3-sm);
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.35;
}

.gallery-card figcaption span {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-top: 3px;
}

/* Download-Block Broschüre — füllt sein Sektionsband und bringt darum
   keine eigene Fläche mit (siehe .statement). */
.download-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.download-card .icon {
  flex: none;
  width: 52px;
  height: 52px;
  background: var(--paper);
  border: 1px solid var(--line-leaf);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--navy);
}

.download-card .dl-text { flex: 1; min-width: 220px; }
.download-card h3 { margin-bottom: 4px; }
.download-card p { font-size: 0.92rem; color: var(--muted); }

/* ---------- Über uns ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 34px;
}

/* Dreiklang: Inhalt mittig über der eigenen Spalte. Das Innenmaß ist
   dafür auf allen drei gleich — sonst lägen die Mitten versetzt. */
.pillar {
  padding: 14px 26px;
  border-left: 1px solid var(--line-leaf);
  text-align: center;
}

.pillar:first-child { border-left: none; }

.pillar h3 { color: var(--navy-ink); font-size: var(--h3-md); margin-bottom: 6px; }
.pillar p { color: var(--muted); font-size: 0.94rem; }

/* ---------- Über uns: der Dreiklang als Konstruktion ----------
   Drei Saeulen, die einen Satz tragen — also auch so gebaut: ein
   durchgehender Balken als Oberkante, darunter drei Felder, jedes mit
   einem kurzen Stiel an den Balken angeschlossen. Vorher standen hier
   drei freie Kacheln mit je einem 26px-Zeichen und einem Wort auf 371px
   Breite; die Flaeche blieb leer, weil nichts sie hielt. Gefuellt wird
   sie durch Gewicht und Struktur, nicht durch neuen Text. */
/* 22px + 10px Grid-Gap des .statement = 32px unter der Überschrift — dieselbe
   Kadenz, die .section-head im ganzen Projekt zwischen Kopf und Inhalt setzt.
   Die Sektion steht direkt unter „Fachlich belegt"; zwei benachbarte Bänder
   mit 32px und 52px lasen sich als zwei verschiedene Raster. */
.pillars--claim {
  margin-top: 22px;
  border-top: 1.5px solid var(--line-navy);
}

/* Ohne die senkrechten Trenner der Basisklasse: Balken und Stiel markieren
   die drei Felder bereits. Drei Linienarten in einem 109px hohen Band
   waeren eine mehr, als die Sektion vertraegt. */
.pillars--claim .pillar {
  padding: 34px 26px 6px;
  position: relative;
  border-left: none;
}

/* Der Stiel sitzt auf dem Balken, nicht darunter: -1.5px deckt die
   Linienstaerke, sonst bliebe ein Haarspalt sichtbar. */
.pillars--claim .pillar::before {
  content: "";
  position: absolute;
  top: -1.5px;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  height: 16px;
  background: var(--green-deep);
}

.pillars--claim .p-icon { margin-bottom: 20px; }
.pillars--claim .p-icon svg { width: 32px; height: 32px; }
.pillars--claim h3 { font-size: var(--h3-lg); margin-bottom: 0; }

.linkedin-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border: 1.5px solid var(--line-control);
  border-radius: var(--radius);
  padding: 11px 18px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.linkedin-btn:hover { border-color: var(--navy); background: var(--mist); }

/* ---------- Kontakt-Seite ---------- */

.route-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.95rem;
  color: #fff;
}

/* ---------- Rechtsseiten ---------- */

/* Rechtsseiten: Textspalte bleibt auf der linken Containerachse (bündig
   zur H1 im Hero) — nur die Zeilenlänge ist auf Lesebreite begrenzt. */
.legal > * { max-width: 780px; }
.legal h2 { font-size: 1.35rem; margin-top: 40px; margin-bottom: 12px; }
.legal h3 { font-size: 1.08rem; margin-top: 26px; margin-bottom: 8px; }
.legal p { color: var(--muted); margin-top: 8px; }
.legal ul { margin: 10px 0 0 20px; color: var(--muted); }
.legal li + li { margin-top: 4px; }
.legal .legal-stand {
  margin-top: 44px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--muted);
}

/* ---------- Responsive (Unterseiten) ---------- */

/* Messpunkt-Beschriftungen brauchen Platz neben der Textspalte */
@media (max-width: 75em) {
  .riss .mp { display: none; }
}

@media (max-width: 62.51em) {
  .svc-section { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .svc-row { padding: 28px 0; }
  .prose-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .prose-photo { max-width: 520px; }
  /* Ablauf ab Tablet als vertikaler Fahrplan: Linie verbindet die
     Haltepunkte von oben nach unten, die Reihenfolge bleibt sichtbar. */
  .steps { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .step { padding-top: 0; padding-left: 54px; }
  .step::after {
    top: 40px;
    bottom: -30px;
    left: 18px;
    right: auto;
    border-top: none;
    border-left: 1.5px solid var(--line-strong);
  }
  .ba-pairs { grid-template-columns: minmax(0, 1fr); }
  .gallery-card {
    flex-basis: calc((100% - var(--gal-gap)) / 2);
    max-width: calc((100% - var(--gal-gap)) / 2);
  }
  /* Zweispaltig fasst eine Reihe zwei Karten */
  .gallery-cat:not(.is-open) .gallery-card:nth-of-type(n + 3) { display: none; }
  .gallery-cat:has(.gallery-card:nth-of-type(3)) .gallery-more { display: block; }
  .gallery-cat:not(:has(.gallery-card:nth-of-type(3))) .gallery-more { display: none; }
  .riss { opacity: 0.35; width: 70vw; }
  .riss .mp { display: none; }
  /* Gestapelt gibt es keine Spalte mehr, über der zentriert werden könnte —
     die Säulen lesen sich als Liste und laufen linksbündig. Das Icon zieht
     die Regel am Dateiende nach, weil die Zentrierung erst dort gesetzt wird. */
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pillar { border-left: none; padding: 0; text-align: left; }
}

@media (max-width: 45em) {
  .subpage-hero-inner { padding: 36px 0 44px; }
  .gallery-card { flex-basis: 100%; max-width: 100%; }
  /* Einspaltig steht ohnehin jede Karte allein — hier entscheidet nicht die
     Reihe, sondern der Anriss: drei Karten je Kategorie wie am Desktop.
     Die dritte muss ausdrücklich zurückgeholt werden, weil die
     Tablet-Regel oben sie bereits verborgen hat. */
  .gallery-cat:not(.is-open) .gallery-card:nth-of-type(3) { display: block; }
  .gallery-cat:not(.is-open) .gallery-card:nth-of-type(n + 4) { display: none; }
  .gallery-cat:has(.gallery-card:nth-of-type(4)) .gallery-more { display: block; }
  .gallery-cat:not(:has(.gallery-card:nth-of-type(4))) .gallery-more { display: none; }
  .norms-body ul { grid-template-columns: minmax(0, 1fr); }
  .register { columns: 1; }
  .riss { display: none; }
}

/* ============================================================
   Gestaltungs-Pass (Phase 3): Hero-Figuren, Sektionstrennung,
   Sektionsfüllungen der Unterseiten
   ============================================================ */

/* Sektionstrennung, systematisch: jeder Unterseiten-Hero schließt
   mit einer Hairline ab — die erste Sektion beginnt sichtbar,
   statt aus der Hero-Fläche zu laufen. */
.subpage-hero { border-bottom: 1px solid var(--line); }

/* Hero mit Skizze rechts (gleiches Muster wie der Startseiten-Hero) */
.subpage-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: center;
}

.subpage-hero-grid .subpage-hero-inner { max-width: none; }

.subpage-hero-grid .hero-figure { padding: 40px 0; }

/* Gestrichelte Trennlinie in Skizzen (Vorher/Nachher-Schema) —
   keine Zeichen-Animation, blendet mit den Beschriftungen ein. */
.hero-figure .d-sep {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-dasharray: 7 6;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-figure .d-sep {
    opacity: 0;
    animation: fade-in 0.7s var(--ease-out) forwards;
    animation-delay: calc(1.1s + var(--i, 0) * 0.12s);
  }
}

/* iSFP: Fahrplan-Diagramm vertikal in der rechten Hero-Fläche */
.route-figure--vert {
  margin-top: 0;
  max-width: 330px;
  margin-left: auto;
  margin-right: auto;
}

/* Kennzahl-Highlight mittig über die volle Breite (Parkbauten) */
.stat-hero--center { justify-content: center; }

/* Foto in der Textspalte: Rahmen wie bei den Referenzbildern, darunter
   eine Bildunterschrift im Stil der Vorher/Nachher-Vergleiche. */
.prose-photo {
  margin: 0;
  align-self: start;
}

.prose-photo img {
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.prose-photo figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: var(--muted);
}

.prose-photo figcaption::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 9px;
  vertical-align: 1px;
}

/* Zwischentrennung innerhalb einer Sektion (Kennzahl → Projektliste) */
.section-head--rule {
  border-top: 1px solid var(--line);
  padding-top: 36px;
  margin-top: 60px;
}

/* Verweis unter der Projektliste */
.register-more { margin-top: 22px; }

.register-more a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  text-decoration: none;
}

.register-more a:hover { text-decoration: underline; }

/* iSFP: Zielgruppen-Register mit Mini-Skizzen */
.who-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 56px;
  align-items: center;
}

.who-grid .section-head { margin-bottom: 0; }

.who-list { border-top: 1px solid var(--line); }

.who-item {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.who-item strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h3-sm);
  color: var(--navy-ink);
  /* Flex-Item darf unter die Wortbreite schrumpfen — sonst schiebt
     „Eigentümergemeinschaften" die Zeile auf 320px-Geräten hinaus. */
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* iSFP: Aussage mit Ablauf-Kette rechts */
.statement--split {
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 24px 56px;
  align-items: center;
}

.statement-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

/* 300px statt 210: Bei einer viewBox-Breite von 260 werden die 12px-
   Beschriftungen damit mit rund 13,8px gezeichnet — vorher 9,7px und
   damit unter der Lesbarkeitsgrenze der übrigen Diagramme (~12,4px). */
.statement-figure svg {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

.statement-figure .hero-caption { text-align: center; }

/* Gleiche Zeichensprache wie Hero-Skizze, Fahrplan und Betonriss:
   Navy-Linien auf hellem Grund, das hervorgehobene Glied in Logo-Grün. */
.statement-figure .c {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.5;
  opacity: 0.55;
}

/* Das hervorgehobene Glied trägt zusätzlich eine Füllung — sonst
   unterscheidet es sich nur in der Strichfarbe von den vier anderen. */
.statement-figure .c-hi {
  fill: var(--leaf);
  stroke: var(--green-deep);
  stroke-width: 2;
  opacity: 1;
}

.statement-figure .c-lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--navy);
}

.statement-figure .c-lbl-hi { fill: var(--green-deep); font-weight: 500; }

/* Über uns: Logo-Tafel im Planrahmen */
.logo-plate {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 44px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-soft) 1px, transparent 1px);
  background-size: 44px 44px;
}

.logo-plate img { width: min(60%, 180px); height: auto; }

/* ---------- Über uns: die drei Nachweisblätter ----------

   Vorgeschichte, damit sie sich nicht wiederholt: Zuerst standen hier drei
   Karten, von denen eine statt einer Plakette das 181px breite EEE-Emblem
   trug — in jeder Karte sass etwas anderes auf einer anderen Achse. Danach
   ein Verzeichnis aus Textzeilen, das die Achsen loeste, aber den zentralen
   Vertrauensbeleg der Seite als Fliesstext las.

   Die Loesung liegt in der Marke selbst: .ee-plate ist die etablierte
   Fassung fuer das Emblem — weisser Grund, Hairline, 2px Radius. Die beiden
   Icons bekommen exakt dieselbe Fassung. Damit tragen alle drei Blaetter
   eine Marke gleicher Hoehe auf gleicher Achse; nur die Breite folgt der
   jeweiligen Marke, weil ein Listungsemblem nun einmal breiter ist als ein
   Zeichen. Das Emblem ist ausserdem ein JPG mit hartem weissem Grund und
   MUSS auf Weiss sitzen — daher Blattgrund --mist, Marke --paper. */

/* Liste statt Definitionsliste: Der Inhalt einer <dl> darf zwischen dt und
   dd nichts anderes tragen — Marke und Emblem standen dort regelwidrig. Als
   Liste aus Karten ist die Auszeichnung sauber, und die Qualifikationen
   werden zu Ueberschriften, was sie auf einer Vertrauensseite sein sollten. */
.creds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
}

.cred {
  position: relative;
  display: grid;
  align-content: start;
  padding: 28px 26px 30px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Die gekappte Ecke: das Zeichen des Zeichnungs- und Urkundenblatts und die
   einzige Stelle der Seite, die ein Dokument meint. Ein Verlauf statt einer
   Form, damit Schnittflaeche und Schnittkante aus einer Deklaration kommen
   und die abgerundete Ecke des Rahmens mit ueberdeckt wird. Die
   Schnittflaeche traegt --paper, weil die Sektion auf Weiss steht. */
.cred::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 30px;
  height: 30px;
  background: linear-gradient(225deg,
    var(--paper) 0 calc(50% - 0.6px),
    var(--line-navy) calc(50% - 0.6px) calc(50% + 0.6px),
    transparent calc(50% + 0.6px));
}

/* Marke: dieselbe Fassung wie .ee-plate, nur quadratisch. Ihre Hoehe ist die
   gemeinsame Achse aller drei Blaetter. */
.cred-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--green-deep);
}

.cred-mark svg { display: block; }

/* Das Emblem bringt Grund und Rahmen aus .ee-plate schon mit; hier steht nur
   die Hoehe, wie es der Kommentar an .ee-plate vorsieht. */
.cred-mark--emblem {
  height: 52px;
  width: auto;
  justify-self: start;
}

.cred h3 {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h3-lg);
  line-height: 1.28;
  color: var(--navy-ink);
}

/* Kurze Regel zwischen Qualifikation und Beleg — dasselbe Zeichen, das die
   Overline vor ihre Zeile setzt. Sie trennt die Aussage von ihrem Nachweis. */
.cred h3::after {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  margin-top: 16px;
  background: var(--green);
}

.cred-proof {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: var(--muted);
}

/* Über uns: Icons der drei Säulen */
/* block, nicht inline: am inline-Span bliebe margin-bottom wirkungslos
   und das Icon klebte am Titel. */
.pillar .p-icon {
  display: block;
  color: var(--green-deep);
  margin-bottom: 14px;
}

.pillar .p-icon svg { display: block; margin: 0 auto; }

/* Responsive (Gestaltungs-Pass) */
@media (max-width: 62.51em) {
  .subpage-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .subpage-hero-grid .hero-figure { max-width: 460px; padding: 0; }
  .subpage-hero-grid .route-figure--vert { margin-left: 0; }
  .who-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .statement--split { grid-template-columns: minmax(0, 1fr); }
  .statement-figure { display: none; }
  .benefit-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .benefit:nth-child(3) { border-left: none; padding-left: 0; }
  /* Drei Blätter nebeneinander brauchen ab hier zu viel Breite: Die
     Emblemmarke ist 181px breit und faende in einer Drittelspalte keinen
     Platz mehr. Untereinander waeren die Blaetter dafuer sehr breit fuer
     zwei Zeilen Text — deshalb legt sich der Inhalt hier quer, Marke links,
     Aussage und Beleg rechts. Das Blatt bleibt ein Blatt. */
  .creds { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .cred {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 28px;
    padding: 26px 26px 28px;
  }

  .cred .cred-mark { grid-row: 1 / span 2; align-self: start; }
  .cred h3 { grid-column: 2; margin-top: 0; }
  .cred-proof { grid-column: 2; }
}

@media (max-width: 45em) {
  /* Quer reicht die Textspalte nicht mehr: Neben einer 181px-Marke blieben
     fuer den laengsten Titel keine 100px. Das Blatt stapelt wieder. */
  .cred { grid-template-columns: minmax(0, 1fr); }
  .cred .cred-mark { grid-row: auto; }
  .cred h3 { grid-column: 1; margin-top: 20px; }
  .cred-proof { grid-column: 1; }

  /* Einspaltig trennen Querlinien, wie in der Vertrauensleiste */
  .benefit-row { grid-template-columns: minmax(0, 1fr); }
  .benefit, .benefit-proof {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding: 20px 0 0;
  }
  .benefit:first-child { border-top: none; padding-top: 0; }
  .benefit h3 { min-height: 0; }

  .subpage-hero-grid .hero-figure,
  .subpage-hero-grid .route-figure--vert { display: none; }
  .section-head--rule { padding-top: 30px; margin-top: 36px; }
}

/* ============================================================
   Layout-Pass: Kadenz-Stufen + Spaltenbalance
   ============================================================ */

/* Eine Sektionskadenz: 72px (mobil 64px, s. Media-Query). Die frühere
   zweite Stufe mit 56px war nicht entscheidbar — sie traf weder die
   kürzesten Sektionen noch eine inhaltliche Regel, und 16px Unterschied
   sind zwischen zwei Bändern ohnehin nicht lesbar. Die Trennung leisten
   die Flächenwechsel, nicht die Abstufung des Innenabstands. */

/* Startseiten-Hero: Zeichnung an der Kopfzeile ausrichten statt
   mittig zu schweben (vorher ~107px Luft über der Figur). */
.hero-inner .hero-figure {
  align-self: start;
  padding-top: 12px;
}

/* Über uns: Die Tafel-Spalte streckt sich auf die Höhe der Textspalte —
   füllen statt schrumpfen, die Deko ordnet sich dem Inhalt unter. */
.logo-col {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.logo-col .ba-plan {
  flex: 1;
  display: flex;
}

.logo-col .logo-plate {
  flex: 1;
  width: 100%;
}

/* Kontakt: kleinere Lageplan-Skizze — die Seite gehört dem Formular,
   nicht der Deko; der Formularbeginn rückt über die Falz. */
.subpage-hero-grid--compact { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }

.subpage-hero-grid--compact .hero-figure {
  max-width: 380px;
  justify-self: center;
  padding: 16px 0;
}

/* Muss hinter der Zentrierung der Säulen-Icons stehen, sonst gewinnt die
   spätere Desktop-Regel und das Icon bliebe gestapelt mittig. */
@media (max-width: 62.51em) {
  .pillar .p-icon svg { margin: 0; }

  /* Gestapelt trägt kein Balken mehr drei Felder nebeneinander: Der Stiel
     stünde mittig über einem linksbündigen Titel, und der seitliche
     Innenabstand rückte die Reihe grundlos ein. Beides entfällt; die
     Trennung übernehmen Querlinien — dieselbe Form, die die Seite auch
     sonst für gestapelte Reihen verwendet. Die Regeln stehen hier, weil
     .pillars--claim .pillar (0,2,0) die Basisregel .pillar (0,1,0) sonst
     überstimmt, egal in welcher Reihenfolge. */
  .pillars--claim {
    margin-top: 30px;
    border-top: none;
    gap: 0;
  }

  .pillars--claim .pillar {
    padding: 20px 0;
    border-top: 1px solid var(--line-navy);
  }

  .pillars--claim .pillar:first-child { padding-top: 0; border-top: none; }
  .pillars--claim .pillar::before { display: none; }
  .pillars--claim .p-icon { margin-bottom: 12px; }
}

/* ============================================================
   Druck — Hausverwaltungen legen Unterlagen der Eigentümer-
   versammlung vor. Ziel: lesbares Schwarzweiß auf Papier,
   keine Bedienelemente, keine Farbflächen, nichts Verstecktes.
   ============================================================ */

@media print {
  @page { margin: 18mm 16mm; }

  html { scroll-padding-top: 0; }

  body {
    font-size: 10.5pt;
    line-height: 1.45;
    color: #000;
    background: #fff;
  }

  .container { max-width: none; padding: 0; }

  /* Bedienung und Zierrat haben auf Papier keine Funktion */
  .site-header,
  .skip-link,
  .nav-toggle,
  .mobile-nav,
  .anchor-nav,
  .riss,
  .gallery-more,
  .contact-form,
  .form-success,
  .form-fallback,
  .ba-divider,
  .ba-range,
  .site-footer nav,
  .breadcrumb { display: none !important; }

  /* Farbflächen kosten Toner und tragen auf Papier nichts bei */
  .trustbar,
  .stats-band,
  .contact,
  .benefit-band,
  .section-alt,
  .svc-row,
  .svc-foot,
  .hero,
  .subpage-hero,
  .section-grid,
  .logo-plate,
  .service-card,
  .quote-card,
  .cred {
    background: none !important;
    background-image: none !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  .trustbar *,
  .stats-band *,
  .contact *,
  .benefit-band * { color: #000 !important; }

  .trustbar,
  .stats-band,
  .contact,
  .benefit-band { border-top: 0.5pt solid #999; border-bottom: 0.5pt solid #999; }
  .benefit, .benefit-proof { border-left: 0.5pt solid #999; }

  /* Aussage-Blöcke tragen am Bildschirm keine Fläche — auf Papier
     markiert eine Linie oben, wo die Aussage beginnt. */
  #anspruch .statement,
  #warum-tgi .statement { border-top: 0.5pt solid #999; padding-top: 4mm; }

  /* Rahmen dünner, damit sie im Druck nicht dominieren */
  .service-card,
  .quote-card,
  .gallery-card img,
  .ref-card { border: 0.5pt solid #999 !important; }

  .overline { color: #000 !important; }

  h1 { font-size: 19pt; }
  h2 { font-size: 13.5pt; }
  h3 { font-size: 11pt; }
  .lead, .section-head p:not(.overline) { font-size: 11pt; }

  /* Auf Papier trennt wieder eine Linie, wo am Bildschirm die Fläche wechselt */
  .svc-row + .svc-row { border-top: 0.5pt solid #999; }
  .svc-row { padding: 4mm 0; }

  /* Überschrift nie allein am Seitenfuß, Karten nie zerrissen */
  h1, h2, h3 { break-after: avoid-page; }
  .svc-row,
  .svc-section,
  .quote-card,
  .cred,
  .benefit,
  .gallery-card,
  .ref-card,
  .audience-row,
  .step,
  .faq-item,
  .ba,
  .download-card,
  .stat { break-inside: avoid; }

  .section { padding: 9mm 0 7mm; }
  .stats-band-inner, .trustbar-inner { padding: 5mm 0; }

  /* Aufklappbares gehört auf Papier vollständig sichtbar */
  .faq-answer,
  .norms-body { display: block !important; }
  .faq-item summary::after,
  .norms summary::after { display: none; }
  .gallery-cat .gallery-card { display: block !important; }

  /* Scroll-Reveals sind im Druck nie ausgelöst worden */
  .rv { opacity: 1 !important; transform: none !important; }

  /* Vergleichsregler wird zum Nebeneinander: beide Zustände sichtbar */
  .ba-frame {
    aspect-ratio: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4mm;
    border: none;
  }
  .ba-clip { position: static; clip-path: none !important; }
  .ba-img { position: static; width: 100%; height: auto; border: 0.5pt solid #999; }
  .ba-tag {
    position: static;
    display: block;
    background: none;
    padding: 1mm 0 0;
    letter-spacing: 0.08em;
  }
  .ba-plan { padding: 0; }
  .ba-plan::before, .ba-plan::after { display: none; }

  /* Schaltflächen als schlichte Marken, nicht als Farbfläche */
  .btn, .linkedin-btn {
    border: 0.5pt solid #666 !important;
    background: none !important;
    color: #000 !important;
    padding: 1.5mm 3mm;
  }

  /* Adressen ausschreiben — auf Papier ist ein Link nicht klickbar */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    word-break: break-all;
  }
  main a[href^="/"]::after {
    content: " (tgi-planung.com" attr(href) ")";
    font-size: 8pt;
  }

  /* Zeichnungen bleiben als kleine Randskizzen erhalten */
  .hero-figure, .route-figure, .statement-figure { max-width: 70mm; }
  .hero-figure .d, .route-figure .d { stroke: #000; }

  .site-footer { border-top: 0.5pt solid #999; padding: 4mm 0 0; }
  .footer-grid { border: none; padding-bottom: 3mm; }
}

/* ============================================================
   Bewegungssystem: Zustandswechsel & Feedback
   (transformbasierte Anteile nur ohne Reduced-Motion)
   ============================================================ */

/* Erscheinen aufgeklappter/eingeblendeter Inhalte: ein kurzer,
   entschleunigter Auftritt aus 4px Versatz. */
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Aufklapper (FAQ, Fachliche Grundlagen): der Inhalt tritt auf,
     statt schlagartig dazustehen. */
  .faq-item[open] .faq-answer,
  .norms[open] .norms-body {
    animation: reveal-in 0.25s var(--ease-out);
  }

  /* Mobile Navigation beim Öffnen */
  .mobile-nav:not([hidden]) {
    animation: reveal-in 0.2s var(--ease-out);
  }

  /* Formular-Statuswechsel (Bestätigung / Postfach-Hinweis) */
  .form-success:not([hidden]),
  .form-fallback:not([hidden]) {
    animation: reveal-in 0.3s var(--ease-out);
  }

  /* Druckpunkt: die Aktion quittiert den Klick spürbar */
  .btn,
  .header-tel,
  .gallery-more {
    transition-property: background-color, color, border-color, transform;
    transition-duration: var(--t-hover);
    transition-timing-function: ease;
  }

  .btn:active,
  .header-tel:active,
  .gallery-more:active { transform: translateY(1px); }

  /* Vergleichsregler: der Griff meldet sich unter dem Zeiger */
  .ba-handle { transition: transform var(--t-hover) var(--ease-out); }

  .ba-frame:hover .ba-handle,
  .ba-frame:active .ba-handle {
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* ============================================================
   Leistungs-Unterseiten (Phase 4)
   Modifier stehen bewusst nach allen Media-Queries — sonst würden
   die Tablet- und Mobilregeln der Basisklassen sie überstimmen.
   ============================================================ */

/* Leistungen-Menü mit sieben Einträgen: Der Überblick ist der Index der
   Gruppe, die sechs Seiten darunter sind gleichwertig. Ohne die Hairline
   liest sich der Überblick als siebte Leistungsseite. */
.sub-link--index {
  margin-bottom: 7px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  border-radius: 2px 2px 0 0;
}

/* Elf Menüzeilen passen auf kein Telefon: Das Menü scrollt in sich,
   statt den Seiteninhalt unter dem Kopf wegzuschieben. */
.mobile-nav {
  max-height: calc(100vh - 66px);
  max-height: calc(100dvh - 66px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Footer: die sechs Leistungsseiten hängen unter „Leistungen" — dieselbe
   Einrückung wie im mobilen Menü, damit die Ebene ablesbar bleibt. */
.footer-nav .footer-sub { padding-left: 14px; font-size: 0.97rem; }

/* ============================================================
   Charakter der vier Leistungsseiten (Phase 5)

   Familie bleibt unangetastet: Kopf, Fuß, Farben, Typografie, Raster,
   Kontaktband, FAQ. Was variiert, ist die Darstellungsform im
   Seiteninneren — je Seite ein Leitmotiv aus ihrem Fachthema:

     Bauwerksuntersuchung   Schnitt      Achse mit Höhenmarken, Maßkette
     Instandhaltungskonzept Raster       Matrix, Gliederung
     Bauüberwachung         Verzeichnis  Positionsliste, Übergabeband
     Inspektion & Wartung   Wiederkehr   Prüfliste, Rundgang

   Die Ablauf-Varianten gelten oberhalb von 62.51em (1000px bei Standard-
   Basisschrift): darunter ist der Ablauf
   ohnehin einspaltig und die Basisform (Haltepunkte an einer Linie) die
   klarste. Der Charakter wird dort von Umfang und Zielgruppen getragen.
   ============================================================ */

/* ---------- Bauwerksuntersuchung: Schnitt ---------- */

/* Der Umfang ist keine Aufzählung, sondern eine Folge von Ebenen — Hülle,
   Innen, Technik, Parkebene, von oben nach unten gelesen wie im Schnitt
   des Heros. Die Achse links ist die Schnittlinie, jede Ebene sitzt mit
   einer Höhenmarke daran. Nach der vierten Ebene endet die Aufnahme und
   die Auswertung beginnt: Dort bricht die Achse ab, statt weiterzulaufen. */
.layers { position: relative; padding-left: 46px; }

.layer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 6px 32px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.layer:last-child { border-bottom: 1px solid var(--line); }

/* Achsenabschnitt je Ebene — zusammen ergeben sie die durchgehende Linie */
.layer::before {
  content: "";
  position: absolute;
  left: -35px;
  top: -1px;
  bottom: 0;
  border-left: 1.5px solid var(--line-strong);
}

/* Der Wechsel von der Aufnahme zur Auswertung: Die Achse läuft durch,
   wechselt aber auf gestrichelt — ab hier wird nicht mehr am Bauwerk
   gemessen, sondern ausgewertet. Eine abbrechende Linie las sich als
   Fehler; eine wechselnde Linie liest sich als Absicht. Die kräftigere
   Querlinie markiert die Stelle zusätzlich. */
.layer--turn { border-top-color: var(--line-control); }
.layer--turn::before,
.layer--turn ~ .layer::before { border-left-style: dashed; }

/* Höhenmarke: Strich von der Achse zur Ebene, Punkt auf der Achse */
.layer-mark {
  position: absolute;
  left: -35px;
  top: 30px;
  width: 24px;
  border-top: 1px solid var(--line-strong);
}

.layer-mark::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.layer h3 { font-size: var(--h3-md); }
.layer p { color: var(--muted); font-size: 0.99rem; }

/* Zielgruppen quer zur Leistung: Die Leistung steht auf dieser Seite in
   Zeilen, die Zielgruppen deshalb in Spalten — sonst zeigte die Seite
   zweimal dasselbe Muster. */
.pillars--audience {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

.pillars--audience .pillar {
  text-align: left;
  padding: 0 26px;
  border-left-color: var(--line);
}

.pillars--audience .pillar:first-child { padding-left: 0; }
.pillars--audience .pillar:last-child { padding-right: 0; }
.pillars--audience .audience-sketch { margin-bottom: 14px; }
.pillars--audience .audience-sketch svg { margin: 0; }

/* ---------- Instandhaltungskonzept: Raster ---------- */

/* Sechs Felder in einem Raster aus Hairlines statt in sechs Kästen:
   Das Konzept ordnet selbst nach Zeile und Spalte — Dringlichkeit über
   Kosten, wie das Schema im Hero. Die Felder teilen sich ihre Kanten,
   niemand steht für sich. */
.matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-leaf);
}

.matrix-cell {
  padding: 26px 28px;
  border-bottom: 1px solid var(--line-leaf);
  border-left: 1px solid var(--line-leaf);
}

.matrix-cell:nth-child(3n + 1) { border-left: none; padding-left: 0; }
.matrix-cell:nth-child(3n) { padding-right: 0; }

.matrix-cell .icon { display: block; color: var(--green-deep); margin-bottom: 12px; }
.matrix-cell .icon svg { display: block; }
.matrix-cell h3 { font-size: var(--h3-sm); margin-bottom: 8px; }
.matrix-cell p { color: var(--muted); font-size: 0.97rem; line-height: 1.55; }

/* ---------- Bauüberwachung: Verzeichnis ---------- */

/* Das Leistungsbild als Zeichenlegende.

   Die sechs Punkte sind Bestandteile der Leistung, keine Schritte. Die
   frühere nummerierte Positionsliste behauptete mit ihrer Zählung eine
   Reihenfolge, die es hier nicht gibt — und wiederholte damit genau das,
   was das Übergabeband darunter zu Recht tut. Jetzt trägt jeder Bestandteil
   sein Zeichen in einem getönten Feld, wie die Legende eines Plans: zwei
   Spalten, keine Nummern, keine Linien. Das Band unten ist ein Weg, dieses
   Feld ist ein Bestand — die Form sagt den Unterschied. */
.scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 48px;
}

.scope-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 6px 22px;
  align-items: start;
}

/* Symbolfeld: die Tönung der Bänder als Fläche, das Zeichen darin im
   Linienstil der übrigen Icons. Grün-Tief erreicht darauf 4,64:1. */
.scope-mark {
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--leaf);
  border-radius: 2px;
  color: var(--green-deep);
}

.scope-mark svg { display: block; }

.scope-item h3 { font-size: var(--h3-sm); line-height: 1.35; padding-top: 2px; }
.scope-item p { color: var(--muted); font-size: 0.97rem; }

/* Zielgruppen kompakt neben dem Kopf: Nach der breiten Positionsliste
   und dem Übergabeband braucht die Seite eine schmale Sektion. */
.who-text { min-width: 0; }
.who-text strong { display: block; }
.who-text p { margin-top: 3px; font-size: 0.95rem; color: var(--muted); }

/* ---------- Inspektion & Wartung: Wiederkehr ---------- */

/* Der Umfang als Prüfliste — Haken für Haken abgearbeitet wie auf dem
   Begehungsbogen. Zwei Spalten, damit die Liste nicht länger wirkt,
   als die Begehung dauert. */
.checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
}

.check {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 4px 16px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--line-leaf);
}

.check:nth-child(n + 5) { border-bottom: 1px solid var(--line-leaf); }

.check-box {
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--line-control);
  border-radius: 2px;
  display: grid;
  place-items: center;
  color: var(--green-deep);
}

.check h3 { font-size: var(--h3-sm); }
.check p { color: var(--muted); font-size: 0.97rem; }

/* Zielgruppen als dunkles Band: Die Seite besteht sonst aus hellen
   Zeilenfolgen. Ein Band ohne Aufteilung ist der klarste Halt beim
   Scrollen — dieselbe Rolle wie die Vorteile auf der iSFP-Seite. */
.benefit-row--audience { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Die Zielgruppen-Skizzen behalten ihren Platz, wechseln aber die Farbe:
   Navy auf Navy wäre unsichtbar. Weiße Linie auf dem Band gibt es sonst
   nirgends — genau das macht diese Sektion beim Scrollen unverwechselbar. */
.benefit .audience-sketch { margin-bottom: 14px; }
.benefit-band .audience-sketch .s { stroke: rgba(255, 255, 255, 0.5); }
.benefit-band .audience-sketch .s-dot { fill: var(--green-light); }
.benefit-band .audience-sketch .s-lbl { fill: rgba(255, 255, 255, 0.7); }

.benefit p a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: border-color var(--t-fast) ease;
}
.benefit p a:hover { border-bottom-color: var(--green-light); }

/* ---------- Nachweis-Register neben „Warum TGI" ---------- */

/* Drei Seiten begründen dort, warum TGI — und ließen die halbe Fläche leer.
   Was dort hingehört, ist der Beleg zur Behauptung: die drei Kennzahlen aus
   der Faktenbasis. Als Register (Zahl links, Sache rechts, Hairline
   dazwischen) gibt es die Form auf diesen Seiten nicht — die Startseite
   trägt dieselben Zahlen als dunkles Band, Parkbauten als eine große Zahl.
   Eine Zeichnung hätte die Fläche auch gefüllt, aber nichts belegt. */
.proof { border-top: 1px solid var(--line); }

.proof-row {
  display: grid;
  /* auto statt fester 96px: Die Spalte haelt ihr Mass ueber min-width, waechst
     aber mit, wenn die Zahl bei grosser Textgroesse breiter wird. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}

.proof-value {
  min-width: 96px;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.proof-value .stat-plus { color: var(--green-deep); }

.proof-label {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- Trennlinien auf dem Grünton-Band ---------- */

/* Die gemeinsam genutzten Bausteine setzen ihre Hairlines in --line. Auf
   dem Grünton-Band verschwinden sie darin (1,02:1) — dort trennt
   --line-leaf. Betrifft jede Sektion mit section-alt, nicht nur die
   Leistungsseiten. */
.section-alt .audience-list,
.section-alt .audience-row,
.section-alt .who-list,
.section-alt .who-item,
.section-alt .faq-item,
.section-alt .faq-item:first-child,
.section-alt .layers .layer,
.section-alt .proof,
.section-alt .proof-row,
.section-alt .steps--outline .step,
.section-alt .steps--flow,
.section-alt .steps--flow .step,
.section-alt .pillars--audience .pillar { border-color: var(--line-leaf); }

/* ---------- Text-Bild-Raster: Bild links ---------- */

/* Zwei der vier Seiten stellen das Foto nach vorn. Ab Tablet steht der
   Text wieder oben — gestapelt gehört die Erklärung vor das Bild. */
.prose-grid--flip { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.prose-grid--flip > .prose-photo { order: -1; }

/* ---------- Ablauf: vier Formen für vier Seiten ---------- */

/* Das Gegenstueck zu (max-width: 62.51em) — bewusst derselbe Wert statt des
   frueheren „+1px"-Nachbarn. Chrome loest 62.5em knapp unter 1000px auf; mit
   62.5em/62.5625em waere die Grenze um einen Pixel verrutscht und bei genau
   1001px haette keine der beiden Regeln gegriffen. 62.51em (1000,16px)
   trennt exakt dort, wo vorher 1000px gegen 1001px trennte. */
@media (min-width: 62.51em) {
  /* Maßkette (Bauwerksuntersuchung): eine durchgehende Maßlinie mit
     Teilstrichen statt Haltepunkten — die Bemaßung aus dem Hero-Schnitt. */
  .steps--dim { border-top: 1.5px solid var(--line-strong); }
  .steps--dim .step { padding-top: 24px; }
  .steps--dim .step::before {
    content: "0" counter(step);
    counter-increment: step;
    top: 0;
    left: 0;
    width: auto;
    height: 15px;
    display: block;
    background: none;
    border: none;
    border-left: 1.5px solid var(--line-strong);
    border-radius: 0;
    padding-left: 9px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--muted);
    line-height: 15px;
  }
  .steps--dim .step::after { content: none; }
  /* Schlussstrich: eine Maßkette endet mit einem Teilstrich, nicht im Nichts */
  .steps--dim .step:last-child::after {
    content: "";
    display: block;
    top: 0;
    left: auto;
    right: 0;
    height: 15px;
    border-top: none;
    border-right: 1.5px solid var(--line-strong);
  }

  /* Gliederung (Instandhaltungskonzept): Ein Konzept wird von oben nach
     unten gelesen. Die Ziffern hängen als große Mono-Zahlen links. */
  .steps--outline { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps--outline .step {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 4px 26px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
  }
  .steps--outline .step:last-child { border-bottom: 1px solid var(--line); }
  .steps--outline .step::before {
    content: "0" counter(step);
    counter-increment: step;
    position: static;
    grid-row: 1 / span 2;
    display: block;
    width: auto;
    height: auto;
    background: none;
    border: none;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 1.45rem;
    font-weight: 400;
    color: var(--line-strong);
    line-height: 1.15;
  }
  .steps--outline .step::after { content: none; }

  /* Übergabeband (Bauüberwachung): vier Felder in einem durchgehenden
     Band, getrennt durch senkrechte Hairlines — die Punkte, an denen die
     Verantwortung weiterwandert. */
  .steps--flow {
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .steps--flow .step {
    padding: 22px 26px;
    border-left: 1px solid var(--line);
  }
  .steps--flow .step:first-child { border-left: none; padding-left: 0; }
  .steps--flow .step:last-child { padding-right: 0; }
  .steps--flow .step::before {
    content: "0" counter(step);
    counter-increment: step;
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin-bottom: 12px;
    background: none;
    border: none;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.06em;
    color: var(--green-deep);
  }
  .steps--flow .step::after { content: none; }

  /* Rundgang (Inspektion & Wartung): Die vier Schritte enden nicht — der
     gestrichelte Rückweg führt zur ersten Station zurück. Dieselbe
     Strichelung wie die Wiederkehr-Schleife im Hero. */
  .steps--cycle { position: relative; padding-bottom: 54px; }
  .steps--cycle::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    height: 30px;
    border: 1.5px dashed var(--line-strong);
    border-top: none;
  }
  .steps--cycle::before {
    content: "";
    position: absolute;
    left: 14px;
    bottom: 40px;
    width: 9px;
    height: 9px;
    border-left: 1.5px solid var(--line-strong);
    border-top: 1.5px solid var(--line-strong);
    transform: rotate(45deg);
  }
}

/* Eckige Marken statt runder: Auf der Seite mit dem Rundgang gibt es
   keine Zielstation — auch nicht auf schmalen Geräten. */
.steps--cycle .step::before { border-radius: 2px; }
.steps--cycle .step:last-child::before {
  background: var(--paper);
  border-color: var(--navy);
  color: var(--navy);
}

/* ---------- Responsive der neuen Formen ---------- */

@media (max-width: 62.51em) {
  .layers { padding-left: 34px; }
  .layer { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; }
  .layer::before { left: -26px; }
  .layer-mark { left: -26px; width: 18px; top: 28px; }

  .matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .matrix-cell,
  .matrix-cell:nth-child(3n + 1),
  .matrix-cell:nth-child(3n) {
    border-left: 1px solid var(--line-leaf);
    padding: 24px 26px;
  }
  .matrix-cell:nth-child(odd) { border-left: none; padding-left: 0; }
  .matrix-cell:nth-child(even) { padding-right: 0; }

  .scope { gap: 30px 36px; }

  .checks { grid-template-columns: minmax(0, 1fr); }
  .check:nth-child(n + 5) { border-bottom: none; }
  .check:last-child { border-bottom: 1px solid var(--line-leaf); }

  .pillars--audience { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .pillars--audience .pillar { padding: 0 26px; border-left: 1px solid var(--line); }
  .pillars--audience .pillar:nth-child(odd) { padding-left: 0; border-left: none; }
  .pillars--audience .pillar:nth-child(even) { padding-right: 0; }

  .benefit-row--audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Gestapelt gehört die Erklärung vor das Bild */
  .prose-grid--flip { grid-template-columns: minmax(0, 1fr); }
  .prose-grid--flip > .prose-photo { order: 0; }
}

@media (max-width: 45em) {
  .layers { padding-left: 28px; }
  .layer::before { left: -21px; }
  .layer-mark { left: -21px; width: 14px; }

  .matrix { grid-template-columns: minmax(0, 1fr); }
  .matrix-cell,
  .matrix-cell:nth-child(odd),
  .matrix-cell:nth-child(even),
  .matrix-cell:nth-child(3n + 1),
  .matrix-cell:nth-child(3n) {
    border-left: none;
    padding: 22px 0;
  }

  .pillars--audience { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pillars--audience .pillar,
  .pillars--audience .pillar:nth-child(even) { padding: 0; border-left: none; }

  .benefit-row--audience { grid-template-columns: minmax(0, 1fr); }

  /* Einspaltig bleibt das Symbolfeld links stehen — der Text rückt daneben,
     nicht darunter: 56px kosten weniger, als eine zweite Zeile bringt. */
  .scope { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .scope-item { gap: 4px 18px; }
}

/* Druck der Leistungs-Unterseiten. Steht nach dem Haupt-Druckblock, damit
   die Zwei-Spalten-Regel die spätere Bildschirmregel überstimmt. */
@media print {
  /* Zeilen, Felder und Positionen nie über den Seitenrand zerreißen */
  .layer,
  .matrix-cell,
  .scope-item,
  .check,
  .proof-row,
  .pillar { break-inside: avoid; }

  /* Symbolfeld auf Papier: Rahmen statt Tonfläche */
  .scope-mark {
    background: none !important;
    border: 0.5pt solid #999;
  }

  /* Bild und Bildunterschrift gehören zusammen auf eine Seite */
  .prose-photo { break-inside: avoid; }

  /* Gestrichelte Hilfslinien in den Skizzen bleiben sichtbar, ohne
     die durchgezogenen Linien zu erreichen */
  .hero-figure .d-sep { stroke: #666; }
}