/* ==================================================================
   site.css — geteilte Basis aller Unterseiten
   Losi Bau · angelegt 22.09.2026

   Herkunft: wortgleich aus index.html gezogen (Tokens, Schriften,
   Schnittecken, Typo, Knoepfe, Kopf, Fuss, Schublade) und um die
   Bausteine ergaenzt, die nur Unterseiten brauchen: Seitenkopf,
   Brotkrume, Fliesstextspalte, Datentafel, Fragenliste, Weiterfuehrung.

   ⚠ index.html traegt seine eigene Kopie der geteilten Regeln. Wer
   hier etwas aendert, das auch die Startseite betrifft (Fuss, Kopf,
   Schublade, Tokens), muss es dort nachziehen — bis die Startseite
   auf diese Datei umgestellt ist.

   Pfade sind relativ zu assets/ — Schriften und Bilder liegen eine
   Ebene darueber.
   ================================================================== */

/* ==================================================================
   SCHRIFTEN — selbst gehostet (22.09.2026)
   Kein Aufruf an fonts.googleapis.com oder fonts.gstatic.com, damit
   keine Besucher-IP an Dritte geht (DSGVO, recht.md).
   ================================================================== */
@font-face{
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Roboto Mono';
  src: url('../fonts/roboto-mono-latin-ext.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Roboto Mono';
  src: url('../fonts/roboto-mono-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==================================================================
   TOKENS — identisch zu index.html
   ================================================================== */
:root{
  color-scheme: light;

  /* Grund */
  --paper:       #FFFFFF;
  --paper-2:     #F5F4F1;
  --line:        #DCE3EA;

  /* Marke — gemessen */
  --blau:        #005BA1;
  --blau-dunkel: #00487F;
  --blau-hell:   #D6E8F6;
  --blau-soft:   #8FBDE3;
  --navy:        #1E2A3C;
  --navy-2:      #172131;

  /* Neutral */
  --grau:        #6E706F;
  --text-2:      #0E0E0C;
  --tinte:       #0E0E0C;

  /* Signal — nur Luecken und Schaeden */
  --korrosion:   #8A5230;

  /* Geometrie */
  --r-btn:  .5rem;
  --r-card: .875rem;
  --r-big:  1.375rem;
  --wrap:   160rem;
  --gutter: clamp(1.25rem, 2.8vw, 4.5rem);
  --band:   clamp(2.5rem, 5.2vh, 4.75rem);

  /* Ebenen */
  --z-base: 1;
  --z-head: 30;
  --z-menu: 40;
  --z-bar: 50;

  --shadow-card: drop-shadow(0 .75rem 1.625rem rgba(30, 42, 60, .11));

  /* TYPO-SKALA — 11 Stufen, rein rem */
  --fs-display: 3.375rem;
  --fs-h2:      2.625rem;
  --fs-h2s:     2.125rem;
  --fs-h3:      1.75rem;
  --fs-h4:      1.375rem;
  --fs-lead:    1.25rem;
  --fs-body:    1.125rem;
  --fs-small:   1rem;
  --fs-meta:    .875rem;
  --fs-mono:    .8125rem;
  --fs-micro:   .75rem;
  --fs-label:   1.0625rem;
  --lh-display: 1.08; --lh-h2: 1.14; --lh-h3: 1.22; --lh-h4: 1.3;
  --lh-lead: 1.5;     --lh-body: 1.6; --lh-meta: 1.6;
  --sp-label: .75rem; --sp-h2: 1.25rem; --sp-h3: 1rem; --sp-h4: .625rem;

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Roboto Mono', ui-monospace, Consolas, monospace;

  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 1101px){ :root{ --gutter: clamp(4.5rem, 7vw, 11rem); } }

*, *::before, *::after{ box-sizing: border-box; }
html{ font-size: clamp(14px, 12.4px + 0.17vw, 18px); }
@media (max-width: 700px){ html{ font-size: 16px; } }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
:target{ scroll-margin-top: clamp(1.5rem, 4vh, 3rem); }

body{
  margin: 0;
  background: var(--paper);
  color: var(--tinte);
  font-family: var(--sans);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* clip statt hidden (24.09.2026): hidden macht aus dem body einen
     Scroll-Container, clip schneidet nur ab. Gemessen hielt hidden den
     Querscroll auf dem Telefon nicht auf — die Seite blieb 17 px zu
     breit, weil html weiterscrollte. */
  overflow-x: clip;
}
img, svg{ display: block; max-width: 100%; }
img{ height: auto; }
a{ color: var(--blau-dunkel); }
button{ font: inherit; }
:where(a, button, [tabindex]):focus-visible{ outline: 2px solid var(--blau); outline-offset: .1875rem; }
/* Auf dunklen Flaechen traegt der Fokusring Weiss — Blau auf --navy erreicht
   die 3 : 1 fuer Nicht-Text nicht. */
.on-dark :where(a, button):focus-visible{ outline-color: #fff; }

.wrap{ max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.band{ padding-block: var(--band); }
.sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ==================================================================
   ZURUECK NACH OBEN (26.09.2026)
   Icon in der Raute, nicht im Kreis — blueprint.md §6, dieselbe Figur
   wie .dia-btn und .notch-dia. Gefuellt statt transparent: der Knopf
   schwebt mal ueber Papier, mal ueber einem Foto, eine Kontur allein
   traegt dort nicht.

   Ohne Skript steht er dauerhaft sichtbar — ein gewoehnlicher Anker
   auf #top, das weiche Scrollen macht scroll-behavior. Erst html.js
   nimmt ihn weg, bis der Kopf eine Bildschirmhoehe raus ist; solange
   er weg ist, haelt visibility ihn auch aus der Tabreihenfolge.
   ================================================================== */
.to-top{
  position: fixed; z-index: var(--z-bar);
  right: clamp(1rem, 2.4vw, 2rem); bottom: clamp(1rem, 2.4vw, 2rem);
  width: 3.5rem; height: 3.5rem;
  display: grid; place-items: center;
  color: #fff; text-decoration: none;
}
.to-top::before{
  content: ''; position: absolute; inset: .6rem;
  background: var(--navy);
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: .375rem;
  transform: rotate(45deg);
  filter: drop-shadow(0 .375rem .875rem rgba(30, 42, 60, .28));
  transition: background-color .18s ease, transform .18s var(--ease-out);
}
.to-top:hover::before{ background: var(--blau); }
.to-top .ic{ position: relative; width: 1.375rem; height: 1.375rem; stroke-width: 2; }
.to-top .ic{ transition: transform .18s var(--ease-out); }
.to-top:hover .ic{ transform: translateY(-.125rem); }

.js .to-top{
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(.625rem);
  transition: opacity .2s ease, transform .2s var(--ease-out), visibility .2s;
}
.js .to-top.is-on{ opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

@media (prefers-reduced-motion: reduce){
  .to-top::before, .to-top .ic, .js .to-top{ transition: none; }
  .to-top:hover .ic{ transform: none; }
}

/* ==================================================================
   SCHNITTECKEN STATT RUNDUNGEN
   Die Tiefe steht im border-radius, corner-shape macht daraus eine
   Schraege statt eines Viertelkreises. Fehlt corner-shape, bleibt die
   Ecke gerundet — dieselbe Geometrie, nur weich.
   ================================================================== */
.btn, .nav a, .nav-drop > summary, .nav-drop__panel, .js .nav a.nav-cta, .js .menu-btn,
.card-cut, .spec, .note, .fig, .fig img, .rel-card, .quote, .step-card{
  corner-shape: bevel;
}

/* Icons — ein Satz, Lucide-Geometrie, 24er viewBox */
.ic{ width: 1.1em; height: 1.1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==================================================================
   TYPO
   ================================================================== */
.label{
  margin: 0 0 var(--sp-label);
  color: var(--blau);
  font-size: var(--fs-label);
  line-height: 1.2;
  font-variant-caps: small-caps;
  font-variation-settings: 'wght' 700, 'wdth' 94;
  letter-spacing: .03em;
}
.label--light{ color: var(--blau-soft); }

/* Monozeile mit blauem Strich — die Kennung der Startseite. */
.rv-k{
  display: flex; align-items: center; gap: 1.25rem; margin: 0;
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .28em; text-transform: uppercase; color: var(--tinte);
}
.rv-k::before{ content: ''; flex: none; width: 2.5rem; height: 2px; background: var(--blau); }
.rv-k--plain::before{ display: none; }
.rv-k--light{ color: #fff; }
.rv-k--light::before{ background: var(--blau-soft); }

h1, h2, h3, h4{ margin: 0; text-wrap: balance; overflow-wrap: break-word; }
/* Dieses Projekt ist voller langer Komposita — "Hoechstdruckwasser-
   strahlen", "Stuetzenfussreprofilierung", "Datenuebertragbarkeit".
   Ohne Umbruchmoeglichkeit sprengt eines davon die Spalte: gemessen
   24.09.2026 auf /datenschutz, 128 px Ueberlauf bei 390 px. Der
   Umbruch greift erst, wenn das Wort sonst nicht passt. */
p, li, dd, dt, td, th, figcaption, summary, label, address{ overflow-wrap: break-word; }
h1  { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -.022em; font-variation-settings: 'wght' 700, 'wdth' 100; }
.h2 { font-size: var(--fs-h2);  line-height: var(--lh-h2); letter-spacing: -.018em; font-variation-settings: 'wght' 700, 'wdth' 100; }
/* Alle Abschnittsueberschriften tragen dasselbe Bild: Grundgewicht 460,
   Schnittbreite 100, kein Versalsatz. Das Schluesselwort steht in <strong>
   mit 820 — das ist die einzige Hervorhebung. */
.h2, .drawer__h, .ft-cta__h, .ft-steps__h, .phead__h{
  font-variation-settings: 'wght' 460, 'wdth' 100;
  letter-spacing: -.018em; text-transform: none;
}
.h2 strong, .drawer__h strong, .ft-cta__h strong, .ft-steps__h strong, .phead__h strong{
  font-weight: inherit; font-variation-settings: 'wght' 820, 'wdth' 100;
}
.h2s{ font-size: var(--fs-h2s); line-height: var(--lh-h2); letter-spacing: -.014em; font-variation-settings: 'wght' 700, 'wdth' 100; }
.h3 { font-size: var(--fs-h3);  line-height: var(--lh-h3); letter-spacing: -.01em;  font-variation-settings: 'wght' 680, 'wdth' 100; }
.h4 { font-size: var(--fs-h4);  line-height: var(--lh-h4); letter-spacing: -.004em; font-variation-settings: 'wght' 650, 'wdth' 100; }
.lead{ font-size: var(--fs-lead); line-height: var(--lh-lead); }
p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }
.mono{ font-family: var(--mono); font-size: var(--fs-mono); font-variant-numeric: tabular-nums; }
/* Offene Kundenangabe. Sichtbar, aber nicht als Aussage lesbar —
   CLAUDE.md Regel 1: was nicht belegt ist, steht als Luecke da. */
.gap-mark{ color: var(--korrosion); font-family: var(--mono); font-size: var(--fs-mono); }

/* ==================================================================
   BUTTONS
   ================================================================== */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 3rem;
  padding: .75rem 1.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  font-size: var(--fs-small);
  line-height: 1;
  font-variation-settings: 'wght' 620, 'wdth' 98;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn .ic{ transition: transform .18s var(--ease-out); }
.btn:hover .ic{ transform: translate(2px, -2px); }
.btn:hover .ic--down{ transform: translateY(2px); }
.btn--primary{ background: var(--blau); color: #fff; }
.btn--primary:hover{ background: var(--blau-dunkel); }
.btn--glass{
  background: rgba(255, 255, 255, .16);
  color: #fff;
  backdrop-filter: blur(.375rem);
  -webkit-backdrop-filter: blur(.375rem);
}
.btn--glass:hover{ background: rgba(255, 255, 255, .3); }
.btn--line-light{
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
  background: rgba(8, 9, 10, .18);
  backdrop-filter: blur(.375rem);
  -webkit-backdrop-filter: blur(.375rem);
}
.btn--line-light:hover{ border-color: #fff; background: rgba(255, 255, 255, .14); }
.btn--outline{ border-color: var(--blau); color: var(--blau-dunkel); background: transparent; }
.btn--outline:hover{ background: var(--blau-hell); }
.btn--lg{ min-height: 3.375rem; padding: .875rem 1.5rem; font-size: var(--fs-body); }

/* ==================================================================
   KOPF — transparent, liegt ueber dem dunklen Seitenkopf
   ================================================================== */
.site-head{ position: absolute; inset: 0 0 auto 0; z-index: var(--z-head); }
.site-head::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(255, 255, 255, .55);
}
.site-head .wrap{ display: flex; align-items: center; gap: 1.5rem; min-height: 4.75rem; }
.brand{ display: block; flex: 0 0 auto; }
.brand img{ height: 3.375rem; width: auto; }

.nav{ margin-left: auto; display: flex; align-items: center; gap: .375rem; }
.nav a{
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0 1rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  color: #fff; text-decoration: none;
  font-size: var(--fs-small);
  font-variation-settings: 'wght' 520, 'wdth' 98;
  transition: background-color .18s ease;
}
.nav a:hover{ background: rgba(255, 255, 255, .14); }
.nav a[aria-current]{ background: #fff; color: var(--blau-dunkel); font-variation-settings: 'wght' 620, 'wdth' 98; }
.nav a.nav-cta{ border-color: rgba(255, 255, 255, .85); margin-left: .625rem; }
.nav a.nav-cta:hover{ background: #fff; color: var(--blau-dunkel); }
.menu-btn{ display: none; }

/* ------------------------------------------------------------------
   KLAPP-PANEL "LEISTUNGEN" (26.09.2026)
   Die neun Leistungsseiten hingen bis dahin nur im Fuss. Traeger ist
   ein <details> — es klappt ohne Skript, ist mit Tastatur bedienbar
   und braucht kein aria-expanded von Hand. Das Skript schliesst nur
   nach, was <details> nicht kann: Escape und Klick daneben.
   Das Panel haengt an .nav, nicht am Knopf — rechtsbuendig laeuft es
   nach links auf und kann am Blattrand nicht herausragen.
   ------------------------------------------------------------------ */
.nav{ position: relative; }
.nav-drop > summary{
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 2.75rem; padding: 0 1rem;
  border: 1.5px solid transparent; border-radius: var(--r-btn);
  color: #fff; cursor: pointer; list-style: none;
  font-size: var(--fs-small);
  font-variation-settings: 'wght' 520, 'wdth' 98;
  transition: background-color .18s ease;
}
.nav-drop > summary::-webkit-details-marker{ display: none; }
.nav-drop > summary:hover,
.nav-drop[open] > summary{ background: rgba(255, 255, 255, .14); }
.nav-drop__ch{ transition: transform .18s var(--ease-out); }
.nav-drop[open] .nav-drop__ch{ transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce){ .nav-drop__ch{ transition: none; } }

.nav-drop__panel{
  position: absolute; top: calc(100% + .5rem); right: 0;
  z-index: var(--z-menu);
  width: max-content; max-width: min(58rem, calc(100vw - 2 * var(--gutter)));
  padding: 1.5rem 1.75rem 1.25rem;
  background: var(--paper); color: var(--tinte);
  border: 1px solid var(--line); border-radius: var(--r-card);
  filter: var(--shadow-card);
}
/* Spalten nach Inhalt, nicht zu Dritteln (26.09.2026): bei drei gleich
   breiten Spalten bekam "Hoechstdruckwasserstrahlen" (25 Zeichen) ein
   Drittel und brach mitten im Wort um, waehrend die Hochbau-Spalte
   daneben Leerraum verschenkte. Leistungsnamen sind Eigennamen und
   werden nicht umgebrochen — die Spalte richtet sich nach ihnen. */
.nav-drop__cols{ display: grid; grid-template-columns: repeat(3, max-content); gap: 0 2rem; }
.nav-drop__col a{ white-space: nowrap; }
.nav-drop__col + .nav-drop__col{ padding-left: 2rem; border-left: 1px solid var(--line); }
.nav-drop__head{
  margin: 0 0 .75rem;
  font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--blau);
}
.nav-drop__col ul{ list-style: none; margin: 0; padding: 0; }
.nav-drop__col a{
  display: block; padding: .4375rem .625rem; margin-left: -.625rem;
  border-radius: .25rem;
  color: var(--tinte); text-decoration: none;
  font-size: var(--fs-small); line-height: 1.35;
  transition: background-color .15s ease, color .15s ease;
}
.nav-drop__col a:hover{ background: var(--paper-2); color: var(--blau-dunkel); }
.nav-drop__col a[aria-current]{
  color: var(--blau-dunkel); box-shadow: inset .125rem 0 0 var(--blau);
  font-variation-settings: 'wght' 620, 'wdth' 98;
}
.nav-drop__foot{ margin: 1.125rem 0 0; padding-top: .875rem; border-top: 1px solid var(--line); }
.nav-drop__foot a{
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--blau-dunkel); text-decoration: none; font-size: var(--fs-meta);
}
.nav-drop__foot a:hover{ text-decoration: underline; }

/* Fokusring im Kopf: Blau erreicht auf --navy und ueber den Hero-Motiven
   die 3 : 1 fuer Nicht-Text nicht, Weiss schon. Im aufgeklappten Panel
   ist der Grund weiss — dort wieder Blau. Ausser in der Schublade, wo
   das Panel dunkel wird (Regel weiter unten im 960er-Block). */
.site-head :where(a, button, summary):focus-visible{ outline-color: #fff; }
.nav-drop__panel a:focus-visible{ outline-color: var(--blau); }

/* ==================================================================
   SEITENKOPF — der dunkle Block, unter dem der transparente Kopf sitzt

   Die Startseite laesst den Kopf ueber dem Hero stehen: weisse Schrift
   auf abgedunkeltem Bild. Unterseiten haben keinen Hero, brauchen aber
   dieselbe Ausgangslage, sonst stuende weisse Navigation auf weissem
   Grund. Deshalb traegt jede Unterseite oben ein dunkles Band.

   Zwei Fassungen:
   .phead            — Materialgrund (Betontextur auf --navy). Recht,
                       Unternehmen, alles ohne eigenes Motiv.
   .phead--foto      — dasselbe Band mit Projektfoto und Schleier.
                       Leistungs- und Projektseiten.
   ================================================================== */
.phead{
  position: relative; isolation: isolate;
  background: var(--navy); color: #fff;
  padding-block: clamp(7.5rem, 13vh, 10.5rem) clamp(2.75rem, 6vh, 4.5rem);
}
/* Materialgrund: die eigene Betonwand, sehr leise. Kein Stimmungsbild,
   eine Flaeche — deshalb 22 % und kein Verlauf darueber. */
.phead::before{
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: url('../images/backgrounds/concrete-wall-dark.webp') center / cover no-repeat;
  opacity: .22;
}
/* Foto-Fassung: das Motiv liegt im ::before, der Schleier im ::after.
   --veil steuert die Deckung je Motiv — auf hellen Betonflaechen mehr,
   auf dunklen weniger. Gerechnet wird gegen 4,5 : 1 fuer den Lauftext. */
.phead--foto::before{
  background-image: var(--motiv);
  background-position: var(--pos, center);
  opacity: 1;
}
.phead--foto::after{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(8, 9, 10, var(--veil, .74)) 0%, rgba(8, 9, 10, calc(var(--veil, .74) * .82)) 46%, rgba(8, 9, 10, calc(var(--veil, .74) * .52)) 100%);
}
.phead .wrap{ position: relative; }
/* Ein Link im Fliesstext des Seitenkopfs. Bis 23.09.2026 trug kein
   .phead einen; /hochdruckwasserstrahlen-hdw ist der erste und erbte
   die globale Linkfarbe --blau-dunkel — gemessen 1,54 : 1 auf
   --navy. Weiss traegt dort 14,47 : 1; die Unterstreichung haelt den
   Link als Link erkennbar, da die Farbe ihn nicht mehr abhebt. */
.phead__lead a, .phead__facts a{
  color: #fff; text-decoration: underline; text-underline-offset: .18em;
  text-decoration-thickness: from-font;
}
.phead__lead a:hover, .phead__facts a:hover{ text-decoration-thickness: 2px; }

/* Kopfzeile: Brotkrume ueber alles, darunter zwei Spalten —
   Aussage links, Einordnung rechts an einer Haarlinie. Dasselbe
   Muster wie der Referenzkopf der Startseite. */
/* Grid-Kinder tragen von Haus aus min-width:auto und schrumpfen
   deshalb nicht unter ihren laengsten Inhalt. Auf dem Telefon sprengte
   "Bodenbeschichtungen" damit die Spalte um 26 px und die ganze Seite
   um 6 px (gemessen 24.09.2026 bei 390 px). min-width:0 laesst sie
   schrumpfen, den Umbruch macht das overflow-wrap der Ueberschrift. */
.phead__body > *{ min-width: 0; }
.phead__body{
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.4vw, 4rem);
  align-items: start;
  margin-top: clamp(1.25rem, 2.6vw, 2rem);
}
.phead__h{
  margin: clamp(.875rem, 1.8vw, 1.375rem) 0 0;
  font-size: var(--fs-display); line-height: var(--lh-display);
  max-width: 18ch;
}
.phead__side{
  padding-left: clamp(1.25rem, 2.6vw, 2.25rem);
  border-left: 1px solid rgba(255, 255, 255, .22);
  align-self: stretch;
}
.phead__lead{
  margin: 0; max-width: 46ch;
  color: #fff;
  font-size: var(--fs-lead); line-height: var(--lh-lead);
}
.phead__actions{ display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
/* Kennwerte unter der Einordnung: Mono, an Haarlinien, je Wert eine
   Zeile. Nur belegte Angaben — eine leere Kennzahl waere Dekoration. */
.phead__facts{
  list-style: none; margin: clamp(1.25rem, 2.4vw, 1.75rem) 0 0; padding: 0;
  display: grid; gap: .5rem;
}
.phead__facts li{
  display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 1rem;
  padding-top: .5rem; border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: var(--fs-small); line-height: 1.45;
}
.phead__facts b{
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blau-soft);
  padding-top: .15em;
}

/* Brotkrume — Mono, mit Schraegstrich wie ein Pfad */
.crumb{ font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .1em; }
.crumb ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.crumb li{ display: flex; align-items: center; gap: .5rem; color: #fff; }
.crumb li + li::before{ content: '/'; color: rgba(255, 255, 255, .38); }
.crumb a{ color: #fff; text-decoration: none; }
.crumb a:hover{ color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.crumb [aria-current]{ color: #fff; }

/* ==================================================================
   DOKUMENTSPALTE — Inhaltsverzeichnis links, Text rechts

   Der Satzspiegel der Seite ist bis 160 rem breit. Fliesstext darf das
   nicht mitmachen: ueber rund 75 Zeichen je Zeile findet das Auge den
   Zeilenanfang nicht mehr. Die linke Spalte faengt die Breite auf und
   traegt gleichzeitig die Sprungmarken — bei zehn Abschnitten
   Datenschutz ist das kein Schmuck, sondern die Bedienung.
   ================================================================== */
.doc-grid{
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}
.doc-nav{ position: sticky; top: clamp(1.5rem, 4vh, 2.5rem); }
.doc-nav__h{
  margin: 0 0 .875rem; padding-bottom: .625rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .18em; text-transform: uppercase; color: var(--grau);
}
.doc-nav ol{ list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; counter-reset: dn; }
.doc-nav a{
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem;
  padding: .4375rem 0;
  color: var(--tinte); text-decoration: none;
  font-size: var(--fs-small); line-height: 1.35;
}
.doc-nav a::before{
  counter-increment: dn; content: counter(dn, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--grau);
  padding-top: .2em;
}
.doc-nav a:hover{ color: var(--blau-dunkel); }
.doc-nav a:hover::before{ color: var(--blau); }
.doc-nav a[aria-current]{ color: var(--blau-dunkel); font-variation-settings: 'wght' 640, 'wdth' 100; }
.doc-nav a[aria-current]::before{ color: var(--blau); }

/* Der Text selbst */
.doc{ max-width: 72ch; }
.doc > * + *{ margin-top: 1.125em; }
.doc h2{
  margin-top: clamp(2.25rem, 4.6vh, 3.5rem); padding-top: clamp(1rem, 2vh, 1.5rem);
  border-top: 1px solid var(--line);
  font-size: var(--fs-h2s); line-height: var(--lh-h2);
  letter-spacing: -.014em; font-variation-settings: 'wght' 700, 'wdth' 100;
}
.doc > h2:first-child{ margin-top: 0; padding-top: 0; border-top: 0; }
.doc h3{ margin-top: 2em; font-size: var(--fs-h4); line-height: var(--lh-h4); font-variation-settings: 'wght' 650, 'wdth' 100; }
.doc p{ margin-bottom: 0; }
.doc ul, .doc ol{ margin: 0; padding-left: 1.25rem; display: grid; gap: .5rem; }
.doc li{ line-height: var(--lh-body); }
.doc ul{ list-style: none; padding-left: 0; }
/* Raute als Marke, aber NICHT per Grid: ein Grid-Container blockifiziert
   jedes Kind, also wuerde ein <strong> mitten im Satz zum eigenen Item und
   der Satz bricht auseinander (gesehen 25.09.2026 auf /datenschutz).
   Deshalb absolut gesetzt — der Listentext bleibt ein Inline-Fluss. */
.doc ul > li{ position: relative; padding-left: 1.1875rem; }
.doc ul > li::before{
  content: ''; position: absolute; left: 0; top: .6em;
  width: .4375rem; height: .4375rem;
  background: var(--blau); rotate: 45deg;
}
.doc a{ color: var(--blau-dunkel); text-underline-offset: .18em; }
/* Abschnittsnummer vor der Ueberschrift — dieselbe Zaehlung wie links */
.doc__n{
  display: block; margin-bottom: .375rem;
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .18em; color: var(--blau);
}

/* ==================================================================
   DATENTAFEL — Schluessel links, Wert rechts

   Impressum, Datenschutz und die Eckdaten einer Referenz sind
   Wertepaare, keine Tabellen mit Spaltenvergleich. Deshalb Haarlinien
   statt Gitter und der Schluessel in Mono — er ist Beschriftung, nicht
   Inhalt. Unter 700 px stapeln die Paare.
   ================================================================== */
.spec{ width: 100%; border-collapse: collapse; margin: 0; text-align: left; }
.spec th, .spec td{
  padding: .875rem 0; border-top: 1px solid var(--line);
  vertical-align: top; font-size: var(--fs-small); line-height: var(--lh-body);
}
.spec tr:first-child th, .spec tr:first-child td{ border-top: 0; }
.spec th{
  width: 14rem; padding-right: 1.5rem; padding-top: 1.125rem;
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grau);
}
.spec td{ color: var(--tinte); }
.spec--tight th{ width: 11rem; }

/* ==================================================================
   HINWEISFELD — Einordnung, offene Angabe, Rechtsstand
   ================================================================== */
.note{
  padding: clamp(1rem, 2vw, 1.375rem) clamp(1.125rem, 2.2vw, 1.625rem);
  border: 1px solid var(--line); border-left: 3px solid var(--blau);
  border-radius: var(--r-btn);
  background: var(--paper-2);
  font-size: var(--fs-small); line-height: var(--lh-body);
}
.note > * + *{ margin-top: .625em; }
.note__h{
  margin: 0 0 .5rem;
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--blau);
}
/* Offene Kundenangabe: dieselbe Form in Korrosionsfarbe. Sie steht
   sichtbar auf der Vorschau und muss vor dem Livegang weg —
   CLAUDE.md Regel 1, nichts erfinden. */
.note--offen{ border-left-color: var(--korrosion); background: #FBF6F2; }
.note--offen .note__h{ color: var(--korrosion); }

/* ==================================================================
   BILD — Motiv mit Beschriftung an einer Haarlinie
   ================================================================== */
.fig{ margin: 0; display: grid; gap: .875rem; }
.fig img{ width: 100%; border-radius: var(--r-card); background: var(--paper-2); }
.fig figcaption{
  padding-left: 1rem; border-left: 2px solid var(--blau-hell);
  font-size: var(--fs-small); line-height: 1.45; color: var(--tinte);
}
.fig figcaption b{
  display: block; margin-bottom: .25rem;
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blau);
}
/* Platzhalterflaeche, wo ein Motiv fehlt (bildkonzept.md §3). Sie zeigt,
   was dort hingehoert — und dass es noch nicht da ist. */
.fig--leer > div{
  display: grid; place-content: center; gap: .5rem; text-align: center;
  aspect-ratio: 4 / 3; padding: 1.5rem;
  border: 1px dashed var(--korrosion); border-radius: var(--r-card);
  background: var(--paper-2); color: var(--korrosion);
  font-family: var(--mono); font-size: var(--fs-mono); line-height: 1.6;
}

/* ==================================================================
   FRAGEN — Liste zum Aufklappen

   details[name] haelt nativ nur eine Frage offen; dafuer braucht die
   Seite kein Skript. Dieselbe Entscheidung wie auf der Startseite.
   ================================================================== */
.qa{ display: grid; counter-reset: qa; }
.qa details{ border-top: 1px solid var(--line); }
.qa details:last-of-type{ border-bottom: 1px solid var(--line); }
.qa summary{
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 1rem;
  align-items: start;
  padding: clamp(1rem, 2vw, 1.375rem) 0;
  cursor: pointer; list-style: none;
  font-size: var(--fs-h4); line-height: var(--lh-h4);
  letter-spacing: -.004em; font-variation-settings: 'wght' 560, 'wdth' 100;
  transition: color .18s ease;
}
.qa summary::-webkit-details-marker{ display: none; }
.qa summary::before{
  counter-increment: qa; content: counter(qa, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--fs-mono); color: var(--blau);
  letter-spacing: .08em; padding-top: .35em;
}
.qa summary:hover{ color: var(--blau-dunkel); }
.qa details[open] summary{ color: var(--blau-dunkel); font-variation-settings: 'wght' 650, 'wdth' 100; }
.qa__mark{
  width: 1.5rem; height: 1.5rem; margin-top: .25em;
  border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center; color: var(--blau);
  transition: rotate .2s var(--ease-out), border-color .18s ease;
}
.qa details[open] .qa__mark{ rotate: 180deg; border-color: var(--blau); }
.qa__mark .ic{ width: .875rem; height: .875rem; }
.qa__a{
  padding: 0 clamp(1rem, 3vw, 3.5rem) clamp(1.125rem, 2.2vw, 1.625rem) 3.5rem;
  max-width: 72ch;
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.qa__a > * + *{ margin-top: .75em; }

/* ==================================================================
   ARBEITSSCHRITTE — Nummer, Titel, Satz; an einer Linie
   ================================================================== */
.steps{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: st; }
.steps > li{
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: clamp(.875rem, 2vw, 1.5rem);
  padding: clamp(1.125rem, 2.2vw, 1.625rem) 0;
  border-top: 1px solid var(--line);
}
.steps > li:last-child{ border-bottom: 1px solid var(--line); }
.steps > li::before{
  counter-increment: st; content: counter(st, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--fs-mono); color: var(--blau);
  letter-spacing: .08em; padding-top: .3em;
}
.steps h3{ margin: 0 0 .25rem; font-size: var(--fs-h4); line-height: var(--lh-h4); font-variation-settings: 'wght' 650, 'wdth' 100; }
.steps p{ margin: 0; max-width: 68ch; font-size: var(--fs-small); line-height: var(--lh-body); }

/* ==================================================================
   WEITERFUEHRUNG — wohin die Seite verweist

   Beschreibender Ankertext, nie "mehr erfahren" (seo-geo-aeo.md §6.3).
   Die Karte traegt deshalb den Seitennamen als Ueberschrift und den
   Grund als Satz.
   ================================================================== */
.rel{ display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: clamp(.875rem, 1.8vw, 1.25rem); }
.rel-card{
  display: grid; align-content: start; gap: .5rem;
  padding: clamp(1.125rem, 2.2vw, 1.625rem);
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--paper); color: var(--tinte); text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.rel-card:hover{ border-color: var(--blau); background: var(--blau-hell); }
.rel-card__k{
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--blau);
}
.rel-card__h{
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--fs-h4); line-height: var(--lh-h4);
  font-variation-settings: 'wght' 650, 'wdth' 100; color: var(--blau-dunkel);
}
.rel-card__h .ic{ width: 1rem; height: 1rem; transition: transform .18s var(--ease-out); }
.rel-card:hover .rel-card__h .ic{ transform: translate(2px, -2px); }
.rel-card p{ margin: 0; font-size: var(--fs-small); line-height: var(--lh-body); }

/* ==================================================================
   ZITAT — Auftraggeberstimme mit Quelle

   Nie als Review- oder aggregateRating-Schema (CLAUDE.md Regel 5):
   sichtbar zitieren mit Quelle, Datum und Link, mehr nicht.
   ================================================================== */
.quote{
  padding: clamp(1.25rem, 2.6vw, 2rem);
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--paper);
}
.quote blockquote{ margin: 0; font-size: var(--fs-lead); line-height: var(--lh-lead); }
.quote figcaption{
  margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--grau);
}

/* ==================================================================
   ABSCHNITT — Kopf mit Monozeile, Ueberschrift, Einordnung
   ================================================================== */
.sec__head{
  display: grid; gap: clamp(.75rem, 1.6vw, 1.125rem);
  max-width: 60rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.sec__lead{ margin: 0; max-width: 62ch; font-size: var(--fs-lead); line-height: var(--lh-lead); }
.band--paper{ background: var(--paper-2); }
.band--navy{ background: var(--navy); color: #fff; }
.band--navy h2, .band--navy h3{ color: #fff; }
.band--navy .sec__lead, .band--navy p{ color: #fff; }
.band--navy .spec th{ color: var(--blau-soft); }
.band--navy .spec th, .band--navy .spec td{ border-color: rgba(255, 255, 255, .18); }
.band--navy .spec td{ color: #fff; }
.band--navy a{ color: #fff; }

/* Bildunterschrift auf dem dunklen Band. Bis 23.09.2026 stand auf
   .band--navy kein freies .fig — nur Kasten, Zitat und Karte, die
   ihre eigene helle Flaeche mitbringen und sich die Schriftfarbe
   darum zurueckholen. Das Bildpaar auf /bauwerksabdichtung-augsburg
   ist das erste freie; die figcaption erbte --tinte und stand
   gemessen mit 1,34 : 1 auf dem Band, die Zeile darin mit 2,07 : 1.
   Beide jetzt weiss: 14,47 : 1 auf --navy. */
.band--navy > * :where(.fig) figcaption,
.band--navy > * :where(.fig) figcaption b{ color: #fff; }

/* Zweispaltig: Text links, Motiv oder Tafel rechts */
.split{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start;
}
.split--text{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.split__col > * + *{ margin-top: 1.125em; }
.split__col p{ max-width: 62ch; }

/* ==================================================================
   FUSS — wortgleich aus index.html (Stand 22.09.2026)

   Helles Anfrageband ueber dem dunklen Band mit Logo, Anschrift, vier
   Linkspalten und der Schlusszeile. Impressum, Datenschutz und
   Haftungsausschluss muessen von jeder Seite erreichbar sein
   (§ 5 DDG, Art. 13 DSGVO) — sie stehen in der Schlusszeile.
   ================================================================== */
.foot{ background: var(--navy); color: #fff; }

/* ---- Helles Anfrageband ---- */
.ft-cta{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #fff; color: var(--tinte);
}
.ft-cta__main{ padding: clamp(2rem, 4.4vw, 3.5rem) clamp(1.5rem, 3.4vw, 3.5rem) clamp(2rem, 4.4vw, 3.5rem) var(--gutter); }
/* Deckel auf die Textbreite — nicht auf die Knopfzeile: drei Knoepfe
   messen zusammen rund 42 rem und waeren sonst umgebrochen. */
.ft-cta__main > *{ max-width: 40rem; }
.ft-cta__main > .ft-actions{ max-width: none; }
.ft-cta__h{
  margin: clamp(.875rem, 1.6vw, 1.375rem) 0 0; max-width: 24ch; color: var(--blau-dunkel);
  font-size: clamp(1.375rem, 1.9vw, 2.125rem); line-height: 1.15;
}
.ft-cta__lead{ margin: clamp(.75rem, 1.4vw, 1.125rem) 0 0; max-width: 50ch; color: var(--tinte); font-size: var(--fs-body); line-height: var(--lh-body); }
.ft-actions{ display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.25rem, 2.6vw, 2.25rem); }
.ft-actions .btn--outline{ background: transparent; }

/* Ablaufspalte, durch eine Haarlinie abgesetzt */
.ft-steps{
  padding: clamp(2rem, 4.4vw, 3.5rem) var(--gutter) clamp(2rem, 4.4vw, 3.5rem) clamp(1.75rem, 3.6vw, 4rem);
  border-left: 1px solid var(--line);
}
.ft-steps__h{
  margin: 0; color: var(--blau-dunkel);
  font-size: clamp(1.125rem, 1.5vw, 1.5rem); line-height: 1.15;
}
.ft-steps ol{ list-style: none; margin: clamp(1rem, 2vw, 1.5rem) 0 0; padding: 0; display: grid; gap: clamp(.875rem, 1.8vw, 1.375rem); max-width: 34rem; }
.ft-steps li{ padding-left: clamp(.875rem, 1.6vw, 1.25rem); border-left: 2px solid var(--blau-hell); }
.ft-steps h3{ margin: 0; color: var(--blau-dunkel); font-size: var(--fs-body); line-height: 1.3; font-variation-settings: 'wght' 680, 'wdth' 100; }
.ft-steps p{ margin: .25rem 0 0; color: var(--tinte); font-size: var(--fs-small); line-height: var(--lh-body); }

/* ---- Dunkles Band ---- */
.ft-main{ padding-block: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 3.4vw, 3rem); }
/* Rasterelemente tragen min-width:auto und wachsen mit dem
   laengsten Wort, statt umzubrechen. "Hoechstdruckwasserstrahlen"
   machte den Listenpunkt 198 px breit, wo 161 px Platz waren
   (gemessen 24.09.2026 bei 390 px). */
.foot-map > *, .foot-col, .foot-col ul, .foot-col li, .ft-nap li{ min-width: 0; }
/* Die Fusslinks sind inline-flex und richten sich nach ihrem
   Inhalt — min-width:0 allein begrenzt sie nicht. */
.foot-col a, .ft-nap a{ min-width: 0; max-width: 100%; }
/* Die Fusslinks waren inline-flex. Der Text darin ist ein anonymes
   Flex-Item und traegt min-width:auto — er bricht nicht, sondern
   schiebt den Link auf. "Hoechstdruckwasserstrahlen" machte ihn
   198 px breit, wo 161 px Platz waren. Als Block laeuft der Text
   normal um; das Icon im Google-Link bleibt inline. */
.foot-col a .ic{ display: inline-block; vertical-align: -.15em; margin-left: .375rem; }
/* Der Abstand kam frueher aus gap; als block gibt es kein gap mehr. */

.foot-map{
  display: grid; grid-template-columns: minmax(0, 428fr) repeat(4, minmax(0, 250fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}
.ft-id{ display: grid; align-content: start; gap: clamp(1.25rem, 2.4vw, 2rem); }
.foot-logo img{ width: clamp(8.5rem, 11vw, 11.5rem); height: auto; }
.ft-nap{ display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none; font-style: normal; font-size: var(--fs-small); line-height: var(--lh-body); }
.ft-nap li{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; }
.ft-nap .ic{ width: 1.0625rem; height: 1.0625rem; margin-top: .15em; color: var(--blau-soft); }
.ft-nap a{ color: #fff; text-decoration: none; }
.ft-nap a:hover{ text-decoration: underline; text-underline-offset: .2em; }
.foot-col__head{
  margin: 0 0 clamp(.875rem, 1.6vw, 1.25rem); color: #fff;
  font-size: var(--fs-body); line-height: 1.3; font-variation-settings: 'wght' 680, 'wdth' 100;
}
.foot-col ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.foot-col a{
  /* Kein white-space:nowrap (24.09.2026): "Hoechstdruckwasserstrahlen"
     passt auf dem Telefon nicht in die 161 px breite Spalte und ragte
     mit 198 px aus der Seite — 17 px Querscroll. nowrap schlaegt jedes
     overflow-wrap, deshalb muss es hier weg und nicht spaeter
     ueberschrieben werden. Als block laeuft der Text normal um; das
     Icon im Google-Link bleibt inline. */
  display: block; overflow-wrap: break-word;
  color: #fff; text-decoration: none; font-size: var(--fs-small);
}
.foot-col a:hover{ color: var(--blau-soft); }
.foot-col a[aria-current]{ color: var(--blau-soft); font-variation-settings: 'wght' 650, 'wdth' 100; }
.foot-col .ic{ width: .875rem; height: .875rem; color: var(--blau-soft); }

/* Schlusszeile: Linie quer durch den Fuss, darunter drei Gruppen */
.legal{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(1.75rem, 3.4vw, 3rem); padding-top: clamp(1rem, 1.8vw, 1.5rem);
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: var(--fs-small); color: #fff;
}
.legal nav{ display: flex; flex-wrap: wrap; gap: .75rem clamp(1.25rem, 2.4vw, 2.25rem); }
.legal a{ color: #fff; text-decoration: none; }
.legal a:hover{ color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.legal a[aria-current]{ color: #fff; font-variation-settings: 'wght' 650, 'wdth' 100; }
.legal-by a{ color: #fff; font-variation-settings: 'wght' 650; }

/* ==================================================================
   ANFRAGE-SCHUBLADE — faehrt von rechts ein

   Natives <dialog> mit showModal(): Fokusfalle, Escape und
   Hintergrund-Inertheit kommen vom Browser. Ohne Skript bleiben die
   Knoepfe gewoehnliche Links auf /kontakt.

   Pflichten aus recht.md §5: Einwilligung mit Zweckbindung,
   Pflichtfelder markiert, Spamschutz ohne fremden Dienst.
   ================================================================== */
.drawer{
  --dr-w: clamp(20rem, 34vw, 31rem);
  margin: 0 0 0 auto; max-width: none; max-height: none;
  width: var(--dr-w); height: 100dvh;
  padding: 0; border: 0; overflow: auto;
  background: var(--paper); color: var(--tinte);
  translate: 100% 0; transition: translate .32s var(--ease-out);
}
.drawer.is-open{ translate: 0 0; }
.drawer::backdrop{ background: rgba(8, 9, 10, 0); transition: background-color .32s ease; }
.drawer.is-open::backdrop{ background: rgba(8, 9, 10, .55); }
@media (max-width: 379px){
  .dr-row{ grid-template-columns: 1fr; }
}

/* Auf kurzen Fenstern (iPhone SE und aehnlich) fehlten zuletzt noch
   40 px. Geholt werden sie beim Beiwerk, nicht bei den Feldern: Der
   Vorspann und die Oeffnungszeit stehen ohnehin auf /kontakt, die
   Telefonnummer bleibt. */
@media (max-height: 700px){
  .drawer__lead{ display: none; }
  .dr-alt > .dr-note{ display: none; }
  .drawer .btn--lg{ padding-block: .625rem; }
}

/* ==================================================================
   Die Schublade soll ohne Scrollen auskommen (25.09.2026)

   Gemessen war der Inhalt 1185 px hoch: 341 px mehr als ein iPhone 14
   hoch ist, 351 mehr als ein 13-Zoll-Laptop. Gewonnen wird der Platz
   an vielen kleinen Stellen statt an einer grossen — Polster, Zeilen,
   Abstaende, zweispaltige kurze Felder.

   ⚠ Was NICHT angetastet wird: die Schriftgroesse der Eingabefelder
   auf dem Telefon. Unter 16 px zoomt iOS beim Hineintippen die ganze
   Seite heran, und der Besucher steht danach irgendwo. Kleiner wird
   hier das Polster, nie die Schrift im Feld.
   ================================================================== */
.drawer__in{ padding: clamp(1.125rem, 2vw, 1.75rem) clamp(1.25rem, 2.6vw, 2rem) clamp(1.25rem, 2.2vw, 1.75rem); }
.drawer__head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.drawer__h{
  margin: .25rem 0 0; color: var(--tinte);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.15;
}
.drawer__lead{ margin: .375rem 0 0; color: var(--grau); font-size: var(--fs-micro); line-height: 1.45; }
.drawer__close{
  flex: none; width: 2.25rem; aspect-ratio: 1; display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; color: var(--tinte); cursor: pointer;
  border-radius: var(--r-btn);
}
.drawer__close:hover{ border-color: var(--blau); color: var(--blau); }
.drawer__close .ic{ width: 1.25rem; height: 1.25rem; }

.dr-form{ display: grid; gap: clamp(.625rem, 1.2vw, .875rem); margin-top: clamp(.875rem, 1.6vw, 1.125rem); }
.dr-field{ display: grid; gap: .25rem; }
.dr-field label{ font-size: var(--fs-micro); font-variation-settings: 'wght' 620, 'wdth' 100; }
.dr-field label span{ color: var(--korrosion); }
.dr-field input, .dr-field select, .dr-field textarea{
  width: 100%; padding: .5rem .75rem;
  border: 1px solid var(--line); border-radius: var(--r-btn); background: #fff;
  font: inherit; font-size: var(--fs-small); color: var(--tinte);
}
.dr-field textarea{ min-height: 4.25rem; resize: vertical; }
/* In zwei Spalten ist "Tiefgaragensanierung" breiter als das Feld und
   lief unter den Pfeil. Ein Auslassungszeichen liest sich als Absicht,
   ein angeschnittenes Wort als Fehler. */
.dr-field select{ padding-right: 2rem; text-overflow: ellipsis; }
.dr-field input:focus-visible, .dr-field select:focus-visible, .dr-field textarea:focus-visible{
  outline: 2px solid var(--blau); outline-offset: 1px; border-color: var(--blau);
}
.dr-row{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 1.6vw, 1rem); }
/* Honigtopf: fuer Menschen unsichtbar, fuer Robots ausfuellbar. Kein
   fremder Dienst, keine Datenweitergabe (recht.md §5). */
.dr-pot{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Kleingedrucktes, aber lesbar (25.09.2026). Der Block wurde nicht
   ueber die Schriftgroesse verkleinert, sondern ueber den Text: Bei
   11 px auf dem Rechner ist die Skala am Ende, und eine Einwilligung,
   die niemand mehr liest, ist nach Art. 7 Abs. 2 DSGVO angreifbar.
   Kleiner wirkt er ueber kuerzeren Text, engere Zeilen und die
   leisere Farbe. */
.dr-consent{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: start; }
.dr-consent input{ width: 1rem; height: 1rem; margin-top: .1em; accent-color: var(--blau); }
.dr-consent label{ font-size: var(--fs-micro); line-height: 1.4; color: var(--grau); }
.dr-consent a{ color: var(--blau-dunkel); }
.dr-form .btn{ justify-content: center; }
.dr-note{ margin: 0; font-size: var(--fs-micro); line-height: 1.5; color: var(--tinte); }

/* ==================================================================
   BILDANHAENGE im Formular (25.09.2026)

   Die native Dateiauswahl bleibt eine native Dateiauswahl — nur der
   eingebaute Knopf wird ueber ::file-selector-button an die Knoepfe
   der Seite angeglichen. Der uebliche Trick (Eingabe verstecken, Label
   als Knopf) kostet Tastaturbedienung und die Ansage des Feldnamens;
   dafuer ist eine huebschere Flaeche kein Argument.

   Die Liste der gewaehlten Bilder wird von assets/anfrage.js gefuellt
   und ist leer ausgeblendet (hidden).
   ================================================================== */
/* ⚠ Die native Dateiauswahl beschriftet der BROWSER, nicht wir: Im
   Bild stand "Choose Files / No file chosen" auf einer durchweg
   deutschen Seite, je nach Spracheinstellung des Geraets. Das laesst
   sich mit CSS nicht uebersetzen — ::file-selector-button kann die
   Flaeche gestalten, nicht den Text.

   Deshalb traegt die Eingabe selbst keine sichtbare Flaeche mehr; der
   Knopf ist ein zweites <label> auf dieselbe Eingabe. Ein Label ist
   von Haus aus anklickbar, und die Eingabe bleibt fokussierbar (nur
   weggeschnitten, nicht display:none) — mit der Tastatur oeffnet
   Enter oder Leertaste die Auswahl wie zuvor. KEIN Skript noetig.
   Der Feldname kommt ueber aria-labelledby, damit der Vorlesename
   nicht aus beiden Labels zusammengesetzt wird. */
.dr-att__in{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.dr-att__knopf{
  justify-self: start; display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .875rem;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--paper-2); color: var(--tinte);
  font-size: var(--fs-micro); font-variation-settings: 'wght' 620, 'wdth' 100;
  cursor: pointer;
}
.dr-att__knopf:hover{ border-color: var(--blau); color: var(--blau); }
.dr-att__in:focus-visible + .dr-att__knopf{
  outline: 2px solid var(--blau); outline-offset: 1px; border-color: var(--blau);
}
.dr-att__hint{ margin: 0; font-size: var(--fs-micro); line-height: 1.5; color: var(--grau); }

.dr-att__list{ list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .375rem; }
/* display aus der Regel darueber schlaegt sonst das hidden-Attribut aus
   dem Browser-Stylesheet — die leere Liste stuende dann als Luecke da. */
.dr-att__list[hidden]{ display: none; }
.dr-att__list li{
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  gap: .625rem; padding: .5rem .5rem .5rem .75rem;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--paper-2);
}
.dr-att__n{
  font-size: var(--fs-micro); color: var(--tinte);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dr-att__s{
  font-family: var(--mono); font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums; color: var(--grau);
}
.dr-att__weg{
  flex: none; width: 1.75rem; aspect-ratio: 1; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-btn);
  background: none; color: var(--grau); cursor: pointer;
}
.dr-att__weg:hover{ border-color: var(--korrosion); color: var(--korrosion); }
.dr-att__weg .ic{ width: 1rem; height: 1rem; }
/* Die Fusszeile lief in drei Zeilen und kostete 102 px. Jetzt legt sie
   sich nebeneinander und bricht erst um, wenn es eng wird. */
.dr-alt{
  margin: clamp(.75rem, 1.4vw, 1rem) 0 0; padding-top: clamp(.625rem, 1.2vw, .875rem);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1rem;
}
.dr-alt a{ display: inline-flex; align-items: center; gap: .5rem; color: var(--blau-dunkel); font-size: var(--fs-micro); text-decoration: none; }
.dr-alt a:hover{ text-decoration: underline; text-underline-offset: .2em; }
.dr-alt .ic{ width: 1rem; height: 1rem; color: var(--blau); }

/* Feste Aktionsleiste unten — erst unter 700 px sichtbar */
.mobile-bar{ display: none; }

/* ==================================================================
   BEWEGUNG — ein Moment beim Laden, mehr nicht

   Die Startseite orchestriert ihren Hero. Eine Unterseite hat dafuer
   keinen Anlass: der Seitenkopf hebt sich einmal, danach ist Ruhe.
   ================================================================== */
@media (prefers-reduced-motion: no-preference){
  .phead .wrap > *{ animation: rise .7s var(--ease-out) both; }
  .phead .wrap > :nth-child(2){ animation-delay: .08s; }
  .phead .wrap > :nth-child(3){ animation-delay: .16s; }
}
@keyframes rise{ from{ opacity: 0; transform: translateY(1rem); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: .01ms !important; animation: none !important; }
  .drawer, .drawer::backdrop{ transition: none; }
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 1100px){
  .ft-steps{ padding-right: var(--gutter); }
  .foot-map{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-id{ grid-column: 1 / -1; }
  /* Das Inhaltsverzeichnis verliert seine Spalte und legt sich als
     waagerechte Leiste ueber den Text. Sticky bleibt es nicht — eine
     klebende Leiste nimmt auf dem Tablet zu viel Hoehe. */
  .doc-grid{ grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
  .doc-nav{ position: static; }
  .doc-nav ol{ grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: .5rem; padding-bottom: .5rem; scrollbar-width: thin; }
  .doc-nav a{ grid-template-columns: auto; gap: .25rem; padding: .375rem .75rem; border: 1px solid var(--line); border-radius: var(--r-btn); white-space: nowrap; }
  .doc-nav a::before{ display: inline; padding-right: .375rem; }
  .doc{ max-width: none; }
}

@media (max-width: 960px){
  :root{ --fs-display: 3rem; --fs-h2: 2.25rem; --fs-h2s: 1.875rem; }
  .js .nav{
    position: absolute; top: 100%; left: 0; right: 0;
    z-index: var(--z-menu);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem var(--gutter) 1.25rem;
    background: var(--navy);
    display: none;
  }
  .js .nav.is-open{ display: flex; }
  .js .nav a{ min-height: 3.25rem; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .js .nav a[aria-current]{ background: transparent; color: #fff; box-shadow: inset .1875rem 0 0 #fff; }
  .js .nav a.nav-cta{ margin: .875rem 0 0; border: 1.5px solid #fff; border-radius: var(--r-btn); justify-content: center; }

  /* In der Schublade wird aus dem Panel ein eingerueckter Block:
     kein weisser Kasten, keine Spalten, dieselbe dunkle Flaeche. */
  .js .nav-drop > summary{
    min-height: 3.25rem; border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    justify-content: space-between;
  }
  .js .nav-drop__panel{
    position: static; width: auto; max-width: none;
    padding: .5rem 0 1rem; background: transparent; color: #fff;
    border: 0; filter: none;
  }
  .js .nav-drop__cols{ grid-template-columns: 1fr; gap: 1rem; }
  .js .nav-drop__col a{ white-space: normal; hyphens: auto; }
  .js .nav-drop__col + .nav-drop__col{ padding-left: 0; border-left: 0; }
  .js .nav-drop__head{ color: var(--blau-soft); margin-bottom: .375rem; }
  .js .nav-drop__col a{ color: #fff; margin-left: 0; padding: .5rem 1rem; }
  .js .nav-drop__col a:hover{ background: rgba(255, 255, 255, .1); color: #fff; }
  .js .nav-drop__col a[aria-current]{ color: #fff; box-shadow: inset .1875rem 0 0 #fff; }
  .js .nav-drop__foot{ border-top-color: rgba(255, 255, 255, .18); padding-left: 1rem; }
  .js .nav-drop__foot a{ color: #fff; }
  .js .nav-drop__panel a:focus-visible{ outline-color: #fff; }
  .js .menu-btn{
    display: inline-flex; align-items: center; gap: .625rem;
    margin-left: auto; min-height: 2.75rem; padding: 0 .875rem;
    border: 1.5px solid rgba(255, 255, 255, .85); border-radius: var(--r-btn);
    background: transparent; color: #fff; cursor: pointer;
  }
  .nav{ flex-wrap: wrap; }

  /* Seitenkopf einspaltig: die Einordnung haengt dann an einer
     waagerechten Linie ueber sich statt an einer senkrechten daneben. */
  .phead__body{ grid-template-columns: 1fr; }
  .phead__h{ max-width: 24ch; }
  .phead__side{
    padding-left: 0; border-left: 0;
    padding-top: clamp(1rem, 2.4vw, 1.5rem); border-top: 1px solid rgba(255, 255, 255, .22);
  }
  .split, .split--text{ grid-template-columns: 1fr; }
}

@media (max-width: 700px){
  :root{
    --fs-display: clamp(1.75rem, 8.6vw, 2.25rem);
    --fs-h2:  clamp(1.5rem, 6.6vw, 1.875rem);
    --fs-h2s: clamp(1.3125rem, 5.4vw, 1.5rem);
    --fs-h3: 1.375rem; --fs-h4: 1.1875rem; --fs-lead: 1.125rem; --fs-body: 1.0625rem; --fs-label: 1rem;
    --lh-display: 1.1; --lh-h2: 1.16;
  }
  body{ padding-bottom: 4rem; }   /* Platz fuer die feste Aktionsleiste */
  .phead{ padding-block: 6.5rem 2.5rem; }

  /* Datentafel stapelt: 14 rem Beschriftung neben dem Wert lassen auf
     dem Telefon rund 120 px fuer den Wert — das laeuft aus der Spalte. */
  .spec, .spec tbody, .spec tr, .spec th, .spec td{ display: block; width: auto; }
  .spec tr{ padding: .875rem 0; border-top: 1px solid var(--line); }
  .spec tr:first-child{ border-top: 0; }
  .spec th, .spec td{ padding: 0; border-top: 0; }
  .spec th{ padding-bottom: .25rem; }
  /* Gestapelt traegt jede Zeile ihre eigene Beschriftung im
     th[scope=row]. Ein Spaltenkopf darueber beschriftet dann nichts
     mehr und steht nur im Weg. */
  .spec thead{ display: none; }

  .qa summary{ grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .75rem; }
  .qa__a{ padding-left: 2.75rem; padding-right: 0; }
  .steps > li{ grid-template-columns: 2.5rem minmax(0, 1fr); }

  .ft-cta{ grid-template-columns: 1fr; }
  .ft-cta__main{ padding-inline: var(--gutter); }
  .ft-steps{ padding: 0 var(--gutter) clamp(2rem, 6vw, 3rem); border-left: 0; }
  .foot-map{ grid-template-columns: 1fr; }
  .legal{ justify-content: flex-start; }
  .ft-actions .btn{ width: 100%; justify-content: center; }

  .drawer{ --dr-w: 100%; }

  .mobile-bar{
    display: flex; position: fixed; z-index: var(--z-bar); inset: auto 0 0 0;
    background: var(--paper); border-top: 1px solid var(--line);
  }
  .mobile-bar a{
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 3.75rem; text-decoration: none;
    font-variation-settings: 'wght' 640, 'wdth' 98;
  }
  .mobile-bar a:first-child{ color: var(--blau-dunkel); }
  .mobile-bar a:last-child{ background: var(--blau); color: #fff; }

  /* Die Mobilleiste ist 3.75rem hoch und liegt fix unten — der Knopf
     muss darueber parken, sonst steht er dahinter. */
  .to-top{ bottom: calc(3.75rem + .75rem); right: .75rem; width: 3rem; height: 3rem; }
  .to-top::before{ inset: .5rem; }
  .to-top .ic{ width: 1.25rem; height: 1.25rem; }
}

/* Karte ohne eigenen Link: der Titel ist der Link, im Text stehen weitere.
   Verschachtelte <a> sind ungueltiges HTML — deshalb <article> statt <a>,
   sobald die Karte mehr als ein Ziel hat. */
article.rel-card{ cursor: auto; }
article.rel-card:hover{ border-color: var(--line); background: var(--paper); }
.rel-card:has(a:hover){ border-color: var(--blau); background: var(--blau-hell); }
.rel-card__h a{
  display: inline-flex; align-items: center; gap: .5rem;
  color: inherit; text-decoration: none;
}
.rel-card__h a:hover{ text-decoration: underline; text-underline-offset: .2em; }

/* Nachsatz unter einem Abschnitt — Quellenhinweis, Verweis, Einordnung */
.sec__after{ margin-top: clamp(1.25rem, 2.4vw, 1.75rem); color: var(--grau); }

/* Aufzaehlung mit Rautenpunkt — dieselbe Marke wie in der Dokumentspalte,
   aber frei im Satz verwendbar. */
.ticks{ list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ticks li{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; line-height: var(--lh-body); }
.ticks li::before{ content: ''; width: .4375rem; height: .4375rem; margin-top: .6em; background: var(--blau); rotate: 45deg; }
.band--navy .ticks li::before{ background: var(--blau-soft); }

/* Abstand nach oben, wo ein Block auf einen anderen folgt */
.mt{ margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* Luecken-Marke auf dunklem Grund. Korrosionsbraun erreicht auf --navy
   nur 2,0 : 1 und waere unlesbar; der aufgehellte Ton misst 7,0 : 1
   (gerechnet gegen #1E2A3C). */
.phead .gap-mark, .band--navy .gap-mark, .case-facts span.gap-mark{ color: #E0A97F; }

/* Fokusring auf den dunklen Flaechen. Blau auf --navy misst 2,4 : 1 und
   faellt unter das Nicht-Text-Minimum von 3 : 1 — dort traegt Weiss. */
.phead :where(a, button):focus-visible,
.band--navy :where(a, button):focus-visible,
.ft-main :where(a, button):focus-visible{ outline-color: #fff; }

/* ==================================================================
   DIE HAARLINIE UEBER DER MONOZEILE (Kay, 23.09.2026)

   Das Gliederungsmittel der Startseite: erst eine Linie ueber die volle
   Breite, darunter der blaue Strich und die Versalzeile. Dort steht sie
   an `.rv__claim` und an `.qv-clients__head` — hier beginnt jeder
   Abschnitt damit, damit die Unterseiten dieselbe Gliederung tragen.

   Der Abschnittskopf laeuft dafuer ueber die volle Breite; gedeckelt
   sind nur noch seine Zeilen, sonst liefe die Ueberschrift auf breiten
   Schirmen in eine einzige lange Zeile.
   ================================================================== */
.sec__head{
  max-width: none;
  padding-top: clamp(1rem, 1.8vw, 1.625rem);
  border-top: 1px solid var(--line);
}
.sec__head > h2, .sec__head > .h2{ max-width: 26ch; }

/* In zweispaltigen Abschnitten traegt die Spalte ihre eigene Linie —
   dasselbe Muster wie `.qv-clients__col` auf der Startseite. */
.split__col > .rv-k:first-child,
.doc-grid > .doc-nav{ padding-top: clamp(1rem, 1.8vw, 1.625rem); border-top: 1px solid var(--line); }
.doc-grid > .doc-nav{ padding-top: 0; border-top: 0; }   /* dort traegt .doc-nav__h die Linie */

/* Auf dunklem Grund laeuft dieselbe Linie in Weiss mit 28 % —
   --line (#DCE3EA) haette auf --navy 7,7 : 1 und waere ein Balken. */
.band--navy .sec__head,
.band--navy .split__col > .rv-k:first-child{ border-top-color: rgba(255, 255, 255, .28); }

/* ---- Zwei Befunde aus dem Browser (23.09.2026) ----

   1. Das Inhaltsverzeichnis riss die Seite unter 1100 px seitlich auf:
      als waagerechte Leiste ist es ein Raster aus max-content-Spalten,
      und ein Rasterelement hat von Haus aus min-width:auto — es waechst
      dann mit seinem Inhalt, statt zu scrollen. Gemessen: 1199 px
      Ueberlauf auf /datenschutz bei 390 px Fensterbreite.
   2. Die Sprungmarken massen 19 px Hoehe. Als eigenstaendige
      Trefferflaechen bekommen sie jetzt 2,25 rem. */
@media (max-width: 1100px){
  .doc-grid{ grid-template-columns: minmax(0, 1fr); }
  .doc-nav, .doc-nav ol{ min-width: 0; max-width: 100%; }
  .doc-nav a{ min-height: 2.25rem; align-items: center; }
}

/* ---- Korrekturen aus der Darstellungsprüfung (23.09.2026) ----

   1. Die Arbeitsschritte liefen einspaltig aus: `li` ist ein Raster aus
      Ziffernspalte und Textspalte, aber nur die Ueberschrift landete in
      Spalte 2 — der Absatz rutschte in die naechste Zeile und damit in
      die 3,5 rem schmale Ziffernspalte. Ein Wort je Zeile. Jetzt stehen
      alle Kinder ausser der Ziffer in Spalte 2. */
.steps > li > *{ grid-column: 2; }

/* 2. „Tiefgaragensanierung" misst 20 Zeichen und passte nicht in die
      Zeile — der Browser brach mitten im Wort um, ohne Trennstrich.
      Die Seite ist lang="de", also trennt er richtig, sobald man ihn
      laesst. break-word bleibt als letzte Reissleine stehen. */
   Nachtrag: `hyphens: auto` zusammen mit `text-wrap: balance` trennte
      mitten im Wort, um die Zeilen auszugleichen — aus „Fachbetrieb fuer
      Betoninstandsetzung" wurde „Betonin-standsetzung", an der falschen
      Fuge. Mit `manual` trennt der Browser nur dort, wo im Text ein
      weiches Trennzeichen steht; die 22 Zeichen Breite reichen fuer
      „Tiefgaragensanierung" (20) und „Betoninstandsetzung" (19). */
.phead__h{ hyphens: manual; max-width: 22ch; }

/* ---- Helle Bausteine in einem dunklen Band (23.09.2026) ----

   `.band--navy p` faerbt jeden Absatz weiss — auch die in einem
   Hinweisfeld, einem Zitat oder einer Karte, die ihre eigene helle
   Flaeche mitbringen. Gemessen im Browser: weiss 86 % auf #FBF6F2
   ergibt 1,1 : 1. Diese Bausteine holen sich ihre Schriftfarbe zurueck. */
/* ⚠ Die drei Klassen stehen ausgeschrieben, nicht in :where().
   :where() traegt null zur Spezifitaet bei — (0,1,0) gegen (0,1,1)
   von ".band--navy p". Der Kastentext wurde dadurch weiss auf seiner
   eigenen hellen Flaeche: gemessen 1,07 : 1. Ausgeschrieben sind es
   (0,2,0), und die Ausnahme greift wieder. Wer hier kuerzt, macht den
   Fehler zurueck. */
.band--navy .note, .band--navy .quote, .band--navy .rel-card,
.band--navy .note :where(p, li, h3, figcaption),
.band--navy .quote :where(p, li, h3, figcaption),
.band--navy .rel-card :where(p, li, h3, figcaption){ color: var(--tinte); }
.band--navy .note a, .band--navy .quote a, .band--navy .rel-card a{ color: var(--blau-dunkel); }
.band--navy .note .gap-mark, .band--navy .quote .gap-mark, .band--navy .rel-card .gap-mark{ color: var(--korrosion); }
.band--navy .note .mono, .band--navy .quote .mono, .band--navy .rel-card .mono{ color: inherit; }

/* Die drei Motive unter den Arbeitsschritten standen auf ungleicher
   Hoehe — zwei Hochformate neben einem Querformat. Ein gemeinsames
   Quadrat bringt sie auf eine Linie, ohne eines von beiden zu
   beschneiden wie ein erzwungenes Querformat es taete. */
.duo .fig img{ aspect-ratio: 1; object-fit: cover; }

/* ==================================================================
   LEISTUNGSSEITEN — gemeinsame Bausteine
   Bis 23.09.2026 standen diese drei nur inline in
   tiefgaragensanierung-augsburg.html. Mit dem Bau der acht weiteren
   Leistungsseiten (23.09.2026) werden sie geteilt und sind deshalb
   hierher gezogen. Die Vorlage traegt sie seitdem nicht mehr selbst.
   ================================================================== */

/* Schadensbilder: Liste links, das Motiv rechts. Das Bild erklaert den
   Satz "der rostende Stahl sprengt den Beton von innen ab" ohne ein Wort. */
.damage{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
@media (max-width: 960px){ .damage{ grid-template-columns: 1fr; } }

/* Bildpaar oder -trio unter den Arbeitsschritten */
.duo{ display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1rem, 2.4vw, 1.75rem); }

/* Ein Vorgang in Gliedern gesetzt — Ursache, Weg, Folge. Jedes Glied
   traegt einen eigenen Fachbegriff: das sind die Suchbegriffe der
   Gruppe D (seo-geo-aeo.md §4.3). */
.chain{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0; }
.chain li{
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem) 0;
  border-top: 2px solid var(--blau);
}
.chain b{
  display: block; margin-bottom: .375rem;
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--blau); font-weight: 400;
}
.chain span{ font-size: var(--fs-small); line-height: var(--lh-body); }
.band--navy .chain li{ border-top-color: var(--blau-soft); }
.band--navy .chain b{ color: var(--blau-soft); }

/* ==================================================================
   PROJEKTE MIT GALERIE — /referenzen
   Neu am 07.10.2026, loest die Projektkarten vom 23.09.2026 ab: statt
   eines Bildes je Karte zeigt jedes Projekt alle seine Fotos. Ort,
   Jahr und Umfang stehen bewusst nicht da (Fallstudien folgen).

   Jeder Block .refp steht direkt in der .wrap und steigt damit fuer
   sich auf (motion.css, Gruppe A) — die Liste dort bleibt unberuehrt.
   Die Galerie ordnet sich nach data-n, der Zahl der Fotos.
   ================================================================== */
.refp{
  display: grid; grid-template-columns: minmax(15rem, 1fr) 2.4fr;
  gap: clamp(1.25rem, 3vw, 3rem); align-items: start;
  padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--line);
}
.refp + .refp{ margin-top: clamp(2.5rem, 5vw, 4rem); }
.sec__head + .refp{ margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.refp__txt{ display: flex; flex-direction: column; gap: .625rem; }
.refp__k{
  margin: 0; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--blau);
}
.refp__k span{ color: var(--tinte); margin-right: .5em; }
.refp__h{ margin: 0; font-size: var(--fs-h4); line-height: var(--lh-h4); font-variation-settings: 'wght' 650; }
.refp__d{ margin: 0; font-size: var(--fs-small); color: var(--text-2); max-width: 38ch; }
.refp__m{ margin: .25rem 0 0; font-family: var(--mono); font-size: var(--fs-mono); color: var(--grau); }
.refp__m a{ color: var(--blau); text-underline-offset: .25em; }

.gal{ display: grid; gap: clamp(.5rem, 1vw, .75rem); grid-template-columns: repeat(2, 1fr); }
.gal__i{
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-btn); corner-shape: bevel; background: var(--paper-2);
}
.gal__i img{
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: scale .5s var(--ease-out);
}
.gal__i:hover img{ scale: 1.03; }
.gal__i:focus-visible{ outline: 3px solid var(--blau); outline-offset: 3px; }
/* Ein Foto: dieselbe Spalte wie die Galerien, damit alle Bilder an
   einer Kante beginnen — aber flacher geschnitten. In 16 : 10 stand ein
   einzelnes Bild mehr als 500 px hoch und gab einem Projekt mit einer
   Aufnahme mehr Gewicht als einem mit fuenf. */
.gal[data-n="1"]{ grid-template-columns: 1fr; }
.gal[data-n="1"] img{ aspect-ratio: 16 / 9; }
/* Drei: das erste gross links, zwei gestapelt rechts */
.gal[data-n="3"]{ grid-template-columns: 2fr 1fr; }
.gal[data-n="3"] .gal__i:first-child{ grid-row: span 2; }
/* Fuenf: das erste ueber zwei Zeilen, vier im Quadrat daneben */
.gal[data-n="5"]{ grid-template-columns: 2fr 1fr 1fr; }
.gal[data-n="5"] .gal__i:first-child{ grid-row: span 2; }
.gal:is([data-n="3"], [data-n="5"]) .gal__i:first-child img{ aspect-ratio: auto; }
/* Lose Aufnahmen: vier gleich grosse in einer Reihe */
.gal--strip{ grid-template-columns: repeat(4, 1fr); }
.gal--strip img{ aspect-ratio: 3 / 4; }

@media (max-width: 900px){
  .refp{ grid-template-columns: 1fr; }
}
@media (max-width: 700px){
  /* Telefon: das erste Bild ueber die volle Breite, der Rest zu zweit */
  .gal:is([data-n="3"], [data-n="5"]){ grid-template-columns: 1fr 1fr; }
  .gal:is([data-n="3"], [data-n="5"]) .gal__i:first-child{ grid-row: auto; grid-column: 1 / -1; }
  .gal:is([data-n="3"], [data-n="5"]) .gal__i:first-child img{ aspect-ratio: 4 / 3; }
  .gal--strip{ grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce){ .gal__i img{ transition: none; } }

/* ---- Bildansicht ----
   Natives <dialog>: Fokusfalle, Escape und inerter Hintergrund kommen
   vom Browser. Der Dialog selbst ist die dunkle Flaeche; ein Klick
   darauf (neben das Bild) schliesst, siehe site.js. */
.lb{
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  padding: clamp(3.75rem, 6vw, 4.5rem) clamp(1rem, 6vw, 5.5rem);
  border: 0; background: rgba(14, 18, 24, .95); color: #fff;
}
.lb[open]{ display: grid; place-items: center; }
.lb::backdrop{ background: rgba(14, 18, 24, .6); }
.lb__fig{ margin: 0; display: grid; gap: .875rem; justify-items: center; }
.lb__img{
  max-width: 100%; max-height: calc(100dvh - 10rem); width: auto; height: auto;
  border-radius: var(--r-btn); corner-shape: bevel;
}
.lb__cap{ max-width: 60ch; font-size: var(--fs-small); text-align: center; color: rgba(255, 255, 255, .82); }
.lb__n{
  position: absolute; top: 1.25rem; left: clamp(1rem, 3vw, 1.75rem); margin: 0;
  font-family: var(--mono); font-size: var(--fs-mono); color: rgba(255, 255, 255, .82);
}
.lb__btn{
  position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--r-btn); corner-shape: bevel;
  background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.lb__btn:hover{ background: rgba(255, 255, 255, .18); border-color: #fff; }
.lb__btn:focus-visible{ outline: 2px solid var(--blau-soft); outline-offset: 3px; }
.lb__btn .ic{ width: 1.25rem; height: 1.25rem; }
.lb__x{ top: .75rem; right: clamp(.75rem, 3vw, 1.5rem); }
.lb__prev, .lb__next{ top: 50%; translate: 0 -50%; }
.lb__prev{ left: clamp(.5rem, 2vw, 1.5rem); }
.lb__prev .ic{ scale: -1 1; }
.lb__next{ right: clamp(.5rem, 2vw, 1.5rem); }
.lb--einzeln :is(.lb__prev, .lb__next, .lb__n){ display: none; }
@media (max-width: 700px){
  /* Telefon: Blaettern unten, das Bild bekommt die volle Breite */
  .lb{ padding-inline: 1rem; }
  .lb__prev, .lb__next{ top: auto; bottom: 1rem; translate: none; }
  .lb__prev{ left: calc(50% - 3.5rem); }
  .lb__next{ right: calc(50% - 3.5rem); }
}

/* <address> steht im Fuss und auf /kontakt in einer Datentafel. Der
   Browser setzt es kursiv; in einer Tafel mit Beschriftungsspalte
   sieht das nach Zitat aus, nicht nach Anschrift. */
address{ font-style: normal; }

/* ==================================================================
   DER SCHNITT — das Leitmotiv (blueprint.md §5.1)
   Angelegt 23.09.2026, am selben Tag auf Bild statt SVG umgestellt.

   Ein Querschnitt durch das Bauteil, daneben die nummerierte Legende.
   Das BILD liefert Kay; hier steht nur das Geruest und, solange es
   fehlt, ein sichtbarer Platzhalter.

   ⚠ Die Zeichnung wird NICHT als SVG im Code gebaut (Kay, 23.09.2026).
   Gebraucht wird eine Bilddatei; welche, steht in bildkonzept.md §7.

   Die Legende bleibt Text und wandert nicht ins Bild: Sie ist lesbar
   fuer Suchmaschinen und Screenreader, bleibt auf dem Telefon in
   voller Groesse und laesst sich aendern, ohne das Bild neu zu bauen.
   ================================================================== */
.schnitt{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.4vw, 3.5rem); align-items: center;
  margin: 0;
}
@media (max-width: 900px){ .schnitt{ grid-template-columns: 1fr; } }

.schnitt__bild{
  width: 100%; height: auto; display: block;
  border-radius: var(--r-card); corner-shape: bevel;
}

/* Hochformat-Schnitte (4:5) — schnitt-02 und schnitt-04.
   Die Spaltenteilung bleibt 50/50 wie bei allen anderen, sonst sitzt
   die Rinne nicht mehr in der Mitte. Nur die Bildhoehe bekommt eine
   Decke: ein 4:5-Bild auf halber Blattbreite waere 818 px hoch auf
   1584 px Schirm und 1263 px auf 2427 px — neben einer Legende von
   rund 330 px. Das Bild steht dabei mittig in seiner Haelfte, links
   und rechts also gleich viel Luft (gemessen 26.09.2026). */
.schnitt--hoch .schnitt__bild{
  width: auto; max-width: 100%;
  max-height: clamp(28rem, 30vw, 42rem); margin-inline: auto;
}
@media (max-width: 900px){
  .schnitt--hoch .schnitt__bild{ width: 100%; max-height: none; }
}

/* Platzhalter, solange das Bild fehlt. Gestrichelte Kontur in der
   Signalfarbe — dieselbe Sprache wie .fig--leer, damit eine Luecke
   ueberall gleich aussieht. */
.schnitt__leer{
  display: grid; place-content: center; gap: .5rem; text-align: center;
  aspect-ratio: 16 / 10; padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px dashed var(--korrosion); border-radius: var(--r-card);
  corner-shape: bevel;
  background: var(--paper-2); color: var(--korrosion);
  font-family: var(--mono); font-size: var(--fs-mono); line-height: 1.7;
}
.schnitt__leer b{ font-size: var(--fs-small); font-family: var(--sans); font-variation-settings: 'wght' 650; }

.schnitt__liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.schnitt__liste li{
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .875rem;
  padding-bottom: .625rem; border-bottom: 1px solid var(--line);
}
.schnitt__liste li:last-child{ border-bottom: 0; padding-bottom: 0; }
.schnitt__liste b{
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .08em;
  color: var(--blau); font-weight: 400; padding-top: .15em;
}
.schnitt__liste strong{ display: block; font-variation-settings: 'wght' 650; }
.schnitt__liste span{ font-size: var(--fs-small); color: var(--text-2); }

.band--navy .schnitt__liste li{ border-bottom-color: rgba(255, 255, 255, .18); }
.band--navy .schnitt__liste b{ color: var(--blau-soft); }
.band--navy .schnitt__liste span{ color: #fff; }
.band--navy .schnitt__leer{ background: rgba(255, 255, 255, .06); border-color: #E0A97F; color: #E0A97F; }