/* =====================================================================
   HG Flügel Haus & Gebäudeservice – Stylesheet (Upgrade Stufe 1 „Tokens“, 02.10.2026)

   Grundlage: 60-FINALER-UPGRADE-PLAN.md §3 und entwurf/entwurf.css.
   Eine Schrift (Archivo, variabel), zehn Schriftgrößen (--fs-xs … --fs-zahl),
   neun Abstände (--s-1 … --s-9), warme Neutraltöne, Raster 1280 px.

   - Keine Symbolschrift, keine dekorativen Symbole, keine Animation außer
     dezenten Hover-/Fokus-Übergängen. Das Sprite trägt nur Stern und Google-„G“.
   - Zahlen und Preise stehen in Archivo mit Tabellenziffern (kein Mono).
   - Versalien gibt es nur im Tabellenkopf (thead th).
   - Gold nur an Haupthandlungsknöpfen und an den Sternen, immer mit dunkler
     Schrift auf dem Knopf. Etikett „Nachher“ Navy, „Vorher“ grau.
   - Keine Inline-Stile in den Vorlagen – die CSP erlaubt sie nicht
     (core/middleware.py, style-src ohne 'unsafe-inline').
   - Keine Verläufe, keine Pillen, kein Glas.
   ===================================================================== */

/* ---------- Schriften (eigener Server, latin) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-var.12d5acbf6523.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 86% 100%;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Marke (unverändert) */
  --navy: #1B3A6B;
  --navy-dunkel: #0D1F3C;
  --gold: #C8972A;
  --gold-tief: #B3841F;

  /* Neutraltöne, warm statt kühl-blau */
  --weiss: #FFFFFF;
  --grund: #F3F1EC;
  --flaeche: #F8F7F4;
  --linie: #E2DED5;
  --linie-stark: #C9C3B6;
  --feld-rand: #7E8AA0;

  /* Text: zwei Stufen, Grau nur für Meta-Angaben */
  --text: #0D1F3C;
  --text-2: #46546B;
  --auf-dunkel: #C9D3E3;
  --auf-dunkel-leise: #AEBCD3;
  --linie-dunkel: rgba(255, 255, 255, 0.16);
  --linie-dunkel-stark: rgba(255, 255, 255, 0.42);

  /* Rückmeldungen */
  --rot: #A3261B;
  --gruen: #1F6B3A;

  /* Schrift: eine Familie, zehn Größen (Handy: siehe Media-Queries unten) */
  --schrift: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 13px;
  --fs-s: 15px;
  --fs-m: 17px;
  --fs-l: 19px;
  --fs-xl: 22px;
  --fs-2xl: clamp(24px, 1.2vw + 16px, 28px);
  --fs-3xl: clamp(28px, 2vw + 16px, 40px);
  --fs-4xl: clamp(34px, 2.6vw + 18px, 52px);
  --fs-5xl: clamp(36px, 3vw + 18px, 58px);
  --fs-zahl: clamp(36px, 1.4vw + 26px, 44px);

  /* Abstände */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Raster: Inhaltsbreite 1280 px, 12 Spalten */
  --breite: 1280px;
  --rand: 48px;
  --radius: 4px;
  --mass: 66ch;

  /* Alte Namen als Alias, damit nichts bricht */
  --gold-hell: var(--gold-tief);
  --auf-dunkel-klein: var(--auf-dunkel-leise);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: var(--fs-m);
  font-weight: 400;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4 {
  font-weight: 650; font-stretch: 94%; color: var(--navy-dunkel);
  line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance;
}
h1 { line-height: 1.04; letter-spacing: -0.015em; }
h3, h4 { line-height: 1.25; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
th, td { padding: 0; text-align: left; vertical-align: top; font-weight: inherit; }
input, select, textarea, button { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
abbr { text-decoration: none; }
[hidden] { display: none !important; }
svg { display: inline-block; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.formular input:focus-visible, .formular select:focus-visible, .formular textarea:focus-visible,
.qc-field input:focus-visible, .qc-field textarea:focus-visible { border-color: var(--navy-dunkel); box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.25); }
main { display: block; }
main:focus { outline: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 18px; height: 18px; flex: none; }
/* Textpfeil statt Pfeilsymbol – ein Schriftzeichen, kein Bild.
   Politur 26.09.2026: Der Pfeil an jedem Link wirkte wie ein Vorlagen-Tick.
   Er steht nur noch am Hauptknopf (Gold); Textlinks tragen keinen Pfeil. */
.pfeil { display: none; font-family: var(--schrift); font-weight: 600; line-height: 1; }
.knopf-gold .pfeil, .qc-next .pfeil { display: inline; }
/* Stufe 1 (02.10.2026): Es gibt keine Mono-Schrift mehr. Ziffern, Zähler und
   Preise stehen in Archivo mit Tabellenziffern; Preise in 650, Spannen ohne
   Umbruch (die Klasse „mono“ bleibt als Marke für „Zahl“ in den Vorlagen). */
.mono { font-family: var(--schrift); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.preis-zelle.mono, .lv-preis .mono, .ll-preis .mono, .saison-preis .mono, .saison .mono { font-weight: 650; }
.unsichtbar {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.wrap { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); padding-inline: max(var(--rand), env(safe-area-inset-left)) max(var(--rand), env(safe-area-inset-right)); }
.schmal { max-width: 860px; }
.lesemass { max-width: 66ch; }
.klein { font-size: var(--fs-s); color: var(--text-2); }

/* Sprungmarke zum Inhalt – unsichtbar, bis sie den Fokus bekommt */
.sprung {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: var(--s-3) var(--s-4); background: var(--navy-dunkel); color: var(--weiss);
  font-weight: 600; border-radius: var(--radius);
}
.sprung:focus { top: 12px; }

/* ---------- Knöpfe und Textverweise ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 48px; padding: 0 var(--s-5); border-radius: var(--radius); border: 1px solid transparent;
  font-size: var(--fs-m); font-weight: 600; line-height: 1.1; white-space: nowrap; text-align: center;
}
.knopf-gross { min-height: 56px; padding: 0 var(--s-5); font-size: var(--fs-m); }
.knopf-gold { background: var(--gold); color: var(--navy-dunkel); border-color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .knopf-gold:hover { background: var(--gold-tief); border-color: var(--gold-tief); } }
.knopf-rand { background: var(--weiss); color: var(--navy-dunkel); border-color: var(--feld-rand); }
@media (hover: hover) and (pointer: fine) { .knopf-rand:hover { border-color: var(--navy); background: var(--flaeche); } }
.knopf-navy { background: var(--navy); color: var(--weiss); border-color: var(--navy); }
@media (hover: hover) and (pointer: fine) { .knopf-navy:hover { background: var(--navy-dunkel); border-color: var(--navy-dunkel); } }
.knopf-voll { width: 100%; }
.knopf:disabled { opacity: .65; cursor: wait; }

.textlink {
  display: inline-block; font-weight: 600; color: var(--navy);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) { .textlink:hover { color: var(--navy-dunkel); text-decoration-thickness: 2px; } }
button.textlink { text-align: left; }
.fliess a:not(.knopf):not(.textlink), .rechtstext a, .formular-fuss a, .akt-leer a {
  color: var(--navy); text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Kopf (Upgrade Stufe 2: keine Topbar) ---------- */
.kopf { border-bottom: 1px solid var(--linie); background: var(--weiss); position: relative; z-index: 20; }
.kopf-in { display: flex; align-items: center; gap: var(--s-6); min-height: 88px; }
.kopf-logo { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.kopf-logo img { width: 56px; height: auto; }
.kopf-name { display: flex; flex-direction: column; line-height: 1.05; }
.kopf-name b { font-size: var(--fs-xl); font-weight: 650; font-stretch: 94%; letter-spacing: -0.01em; color: var(--navy-dunkel); }
.kopf-name small { margin-top: var(--s-1); font-size: var(--fs-xs); font-weight: 400; color: var(--text-2); }
.kopf-nav { margin-left: auto; }
.kopf-nav ul { display: flex; gap: var(--s-5); font-size: var(--fs-s); font-weight: 600; color: var(--navy-dunkel); }
.kopf-nav a { display: inline-block; padding: var(--s-2) 0; border-bottom: 2px solid transparent; white-space: nowrap; transition: border-color .15s ease-out; }
@media (hover: hover) and (pointer: fine) { .kopf-nav a:hover { border-bottom-color: var(--linie-stark); } }
.kopf-nav a:focus-visible { outline-offset: 4px; }
.kopf-nav a[aria-current="page"] { border-bottom-color: var(--navy); }
.kopf-aktion { display: flex; align-items: center; gap: var(--s-5); flex: none; }
.kopf-tel { display: none; color: var(--navy-dunkel); font-size: var(--fs-s); font-weight: 600; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .kopf-tel:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (min-width: 701px) { .kopf-tel { display: inline; } }
/* Menüknopf mit dem Wort „Menü“ statt Hamburger-Symbol (26.09.2026) */
.kopf-menue {
  display: none; align-items: center; min-height: 44px; padding: 0 var(--s-4);
  border: 1px solid var(--feld-rand); border-radius: var(--radius);
  font-size: var(--fs-s); font-weight: 600; color: var(--navy-dunkel);
}
@media (hover: hover) and (pointer: fine) { .kopf-menue:hover { border-color: var(--navy); } }
.kopf-menue[aria-expanded="true"] { background: var(--flaeche); border-color: var(--navy); }

/* Menü für schmale Bildschirme – eigenes Element, kein Klappmechanismus aus einer Bibliothek */
.menue { border-bottom: 1px solid var(--linie); background: var(--weiss); }
.menue ul { padding: var(--s-2) 0 var(--s-4); }
.menue li + li { border-top: 1px solid var(--linie); }
.menue a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-size: var(--fs-m); font-weight: 600; color: var(--navy-dunkel); }
.menue a[aria-current="page"] { color: var(--navy); font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; border-left: 3px solid var(--navy); padding-left: var(--s-3); }

/* ---------- Meldungen (Django messages) ---------- */
.meldungen { padding-top: var(--s-5); }
.alert-success-custom, .alert-error-custom {
  display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-3);
  padding: var(--s-4) var(--s-4); border: 1px solid var(--navy); border-left-width: 4px;
  border-radius: var(--radius); font-weight: 600; color: var(--navy-dunkel); background: var(--weiss);
}
.alert-error-custom { border-color: var(--rot); color: var(--rot); }

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf { background: var(--navy); color: var(--weiss); padding: var(--s-7) 0 var(--s-8); }
.seitenkopf-raster { display: grid; grid-template-columns: 1fr 420px; gap: var(--s-8); align-items: start; }
.seitenkopf-raster.ohne-bild { grid-template-columns: 1fr; }
.seitenkopf-raster.mit-foto { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; }
.nowrap { white-space: nowrap; }
.seitenkopf-raster.mit-rechner { grid-template-columns: minmax(0, 1fr) 488px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-s); color: var(--text-2); margin-bottom: var(--s-5); }
.breadcrumb li + li::before { content: "›"; margin-right: var(--s-2); color: var(--text-2); }
.breadcrumb a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: var(--text-2); }
.seitenkopf h1 { font-size: var(--fs-4xl); line-height: 1.05; letter-spacing: -0.015em; max-width: 18em; }
.seitenkopf h1 span { display: block; margin-top: var(--s-4); font-size: var(--fs-xl); line-height: 1.3; font-weight: 400; font-stretch: 100%; letter-spacing: 0; color: var(--navy); }
.seitenkopf .antwort { margin-top: var(--s-5); max-width: 34em; }
.seitenkopf .antwort strong { color: var(--weiss); font-weight: 600; }
.mit-foto h1 { max-width: 20ch; }
.seitenkopf-bild img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 0; background: var(--flaeche); }
.seitenkopf-bild figcaption { padding-top: var(--s-2); font-size: var(--fs-s); color: var(--text-2); }

/* ---------- Startseite: Hero (Stufe 4, Entwurf start.html) ---------- */
.hero { background: var(--navy); color: var(--weiss); }
.hero-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); padding-top: var(--s-7); padding-bottom: var(--s-7); align-items: center; }
.hero h1 { max-width: 19ch; font-size: var(--fs-5xl); line-height: 1.04; letter-spacing: -0.015em; }
.hero .lead { margin-top: var(--s-5); max-width: 34em; font-size: var(--fs-l); line-height: 1.55; }
.antwort { margin-top: var(--s-5); font-size: var(--fs-l); line-height: 1.6; color: var(--text-2); max-width: 36em; }
.knoepfe { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.nur-tablet { display: none; }
/* Inhaberzeile: Gesicht, Name, Zusage, Bewertung – drei Zeilen, keine Punktkette */
.inhaber { display: flex; align-items: center; gap: var(--s-4); max-width: 38rem; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--linie-dunkel); }
.inhaber img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: var(--navy-dunkel); }
.inhaber p { display: flex; flex-direction: column; font-size: var(--fs-s); line-height: 1.5; color: var(--auf-dunkel); }
.inhaber strong { font-size: var(--fs-m); font-weight: 600; color: var(--weiss); }
.inhaber a { align-self: flex-start; margin-top: 2px; color: var(--weiss); text-decoration: underline; text-decoration-color: var(--linie-dunkel-stark); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .inhaber a:hover { text-decoration-color: var(--weiss); } }

.belege { margin-top: var(--s-7); border-top: 1px solid var(--navy-dunkel); table-layout: fixed; }
.belege thead th { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); padding: var(--s-3) var(--s-4) var(--s-2) 0; }
.belege td { padding: var(--s-3) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--linie); font-size: var(--fs-s); line-height: 1.4; font-weight: 400; }
.belege th + th, .belege td + td { padding-left: var(--s-4); border-left: 1px solid var(--linie); }
.belege a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linie-stark); }
@media (hover: hover) and (pointer: fine) { .belege a:hover { text-decoration-color: var(--navy); } }

/* ---------- Dunkle Flächen: Hero, Seitenköpfe, Navy-Band (26.09.2026) ----------
   Weiße Überschrift, helle Unterzeile, feine helle Linien. Kein Gold für Text –
   Gold bleibt den Knöpfen. Kontraste (WCAG AA) im LOGBUCH vom 26.09.2026. */
.hero h1, .seitenkopf h1 { color: var(--weiss); }
.seitenkopf h1 span { color: var(--auf-dunkel); }
.hero .lead, .seitenkopf .antwort { color: var(--auf-dunkel); }
.seitenkopf .breadcrumb { color: var(--auf-dunkel); }
.seitenkopf .breadcrumb li + li::before { color: var(--auf-dunkel-leise); }
.seitenkopf .breadcrumb a { color: var(--weiss); text-decoration-color: var(--linie-dunkel-stark); }
.seitenkopf .breadcrumb [aria-current] { color: var(--auf-dunkel); }
.hero .knopf-rand, .seitenkopf .knopf-rand { background: transparent; color: var(--weiss); border-color: var(--linie-dunkel-stark); }
@media (hover: hover) and (pointer: fine) { .hero .knopf-rand:hover, .seitenkopf .knopf-rand:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--weiss); } }
.hero .belege, .seitenkopf .belege { border-top-color: var(--linie-dunkel-stark); }
.hero .belege th, .seitenkopf .belege th { color: var(--auf-dunkel-leise); }
.hero .belege td, .seitenkopf .belege td { color: var(--weiss); border-bottom-color: var(--linie-dunkel); }
.hero .belege th + th, .hero .belege td + td,
.seitenkopf .belege th + th, .seitenkopf .belege td + td { border-left-color: var(--linie-dunkel); }
.hero .belege a, .seitenkopf .belege a { text-decoration-color: var(--linie-dunkel-stark); }
@media (hover: hover) and (pointer: fine) { .hero .belege a:hover, .seitenkopf .belege a:hover { text-decoration-color: var(--weiss); } }
.seitenkopf-bild figcaption { color: var(--auf-dunkel); }
.hero :focus-visible, .seitenkopf :focus-visible, .fuss :focus-visible { outline-color: var(--weiss); }
.hero .rechner :focus-visible, .seitenkopf .rechner :focus-visible { outline-color: var(--navy); }

/* ---------- Rechner-Kasten ---------- */
/* Flaches Blatt auf der Navy-Fläche (Entwurf v2): kein Radius, kein Schatten, Kante oben in Navy-dunkel. */
.rechner {
  border: 0; border-top: 4px solid var(--navy-dunkel); border-radius: 0; background: var(--weiss); color: var(--text);
  overflow: hidden; scroll-margin-top: var(--s-4);
}
.rechner-kopf { background: var(--weiss); padding: var(--s-5) var(--s-5) var(--s-3); }
.rechner-kopf h2 { color: var(--navy-dunkel); font-size: var(--fs-xl); }
/* Politur 26.09.2026: Schritte als ruhige Zeile „1 Leistung — 2 Menge — 3 Richtpreis“
   statt Kästchen-Nummern */
.rechner-kopf ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-2); font-size: var(--fs-s); color: var(--text-2); }
.rechner-kopf li { display: inline-flex; align-items: center; gap: var(--s-2); }
.rechner-kopf li + li::before { content: ""; width: 16px; height: 1px; margin-right: var(--s-2); background: var(--linie-stark); }
.rechner-kopf li .mono { font-weight: 600; color: var(--navy); }

/* ---------- Richtangebot-Rechner (Markup aus static/js/quote.js) ---------- */
.qc { background: var(--weiss); }
.qc-top { display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--s-5) var(--s-4); border-bottom: 1px solid var(--linie); background: var(--weiss); }
.qc-back {
  order: 3; flex: none; min-height: 44px; padding: 0; border: 0; background: none;
  font-size: var(--fs-s); font-weight: 400; color: var(--text-2);
  text-decoration: underline; text-underline-offset: 4px;
}
.qc-back { display: none; }
.qc-zurueck {
  flex: none; min-height: 44px; padding: 0; border: 0; background: none;
  font-size: var(--fs-s); font-weight: 400; color: var(--text-2);
  text-decoration: underline; text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) { .qc-zurueck:hover { color: var(--navy-dunkel); } }
.qc-fuss { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-5); }
.qc-progress { flex: 1; display: flex; align-items: center; gap: var(--s-3); }
.qc-progress-track { flex: 1; display: flex; gap: var(--s-1); height: 4px; }
.qc-seg { flex: 1; background: var(--linie); border-radius: 2px; }
.qc-seg.is-on { background: var(--navy); }
.qc-progress-count { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.qc-stage { padding: var(--s-5) var(--s-5) var(--s-5); }
.qc-stage:not([data-gefuellt]) { min-height: 420px; }
.qc-head { margin-bottom: var(--s-3); }
.qc-question { font-size: var(--fs-m); font-weight: 600; font-stretch: 100%; letter-spacing: 0; line-height: 1.3; }
.qc-hint { margin-top: var(--s-2); font-size: var(--fs-s); color: var(--text-2); }
.qc-hint-center { text-align: center; margin-top: var(--s-3); }
.qc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.qc-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1);
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-7); text-align: left; justify-content: flex-start;
  border: 1px solid var(--feld-rand); border-radius: var(--radius); background: var(--weiss); color: var(--navy-dunkel);
}
@media (hover: hover) and (pointer: fine) { .qc-tile:hover { border-color: var(--navy); background: var(--flaeche); } }
.qc-tile.is-active { border-color: var(--navy); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--navy); }
/* Politur 26.09.2026: Kachelnummern ausgeblendet – die Leistung steht für sich,
   eine siebte Nummernreihe auf derselben Seite war zu viel. */
.qc-tile-nr { display: none; }
.qc-tile { min-width: 0; }
.qc-tile-label, .qc-tile-hint { overflow-wrap: break-word; hyphens: manual; }
.qc-tile-label { font-size: var(--fs-s); font-weight: 400; line-height: 1.25; }
.qc-tile-hint { font-size: var(--fs-xs); line-height: 1.4; color: var(--text-2); }
.qc-tile-service .qc-tile-hint { display: none; }
/* Abnahme 1 (02.10.2026): Radiopunkt und Kästchen sitzen an derselben Stelle links oben, der
   Inhalt aller Kacheln beginnt oben. */
.qc-tile:not(.qc-tile-multi)::before {
  content: ""; position: absolute; left: var(--s-3); top: var(--s-3); width: 18px; height: 18px;
  border: 1.5px solid var(--feld-rand); border-radius: 50%; background: var(--weiss);
}
.qc-tile.is-active:not(.qc-tile-multi)::before { background: var(--navy); border-color: var(--navy); box-shadow: inset 0 0 0 3px var(--weiss); }
.qc-check {
  position: absolute; top: var(--s-3); left: var(--s-3); display: grid; place-items: center;
  width: 18px; height: 18px; border: 1.5px solid var(--feld-rand); border-radius: var(--radius); background: var(--weiss);
}
/* Kästchen wie ein Formularfeld: angewählt navy gefüllt mit Häkchen aus zwei Kanten */
.qc-tile-multi.is-active .qc-check { background: var(--navy); border-color: var(--navy); }
.qc-tile-multi.is-active .qc-check::after {
  content: ""; width: 5px; height: 9px; margin-top: -2px;
  border: solid var(--weiss); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.qc-number { display: grid; grid-template-columns: 50px 1fr 50px; border: 1px solid var(--feld-rand); border-radius: var(--radius); overflow: hidden; }
.qc-step-btn { display: grid; place-items: center; background: var(--flaeche); color: var(--navy-dunkel); font-size: var(--fs-xl); font-weight: 400; line-height: 1; }
@media (hover: hover) and (pointer: fine) { .qc-step-btn:hover { background: var(--linie); } }
.qc-number-field { display: flex; align-items: center; border-left: 1px solid var(--feld-rand); border-right: 1px solid var(--feld-rand); }
.qc-number-field input {
  width: 100%; min-width: 0; height: 52px; padding: 0 var(--s-4); border: 0; background: var(--weiss);
  font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--navy-dunkel); text-align: right; -moz-appearance: textfield;
}
.qc-number-field input::-webkit-inner-spin-button, .qc-number-field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qc-number-unit { padding: 0 var(--s-4) 0 var(--s-2); font-size: var(--fs-s); color: var(--text-2); white-space: nowrap; }
.qc-next, .qc-submit {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3); width: 100%;
  min-height: 52px; margin-top: var(--s-4); padding: 0 var(--s-6); border-radius: var(--radius);
  background: var(--gold); border: 1px solid var(--gold); color: var(--navy-dunkel); font-size: var(--fs-m); font-weight: 600;
}
.qc-fuss .qc-next { width: auto; margin-top: 0; }
@media (hover: hover) and (pointer: fine) { .qc-next:hover:not(:disabled), .qc-submit:hover:not(:disabled) { background: var(--gold-tief); border-color: var(--gold-tief); } }
/* „Weiter“ steht gesperrt zu 45 % deckend in Gold, bis etwas gewählt ist (Entwurf) */
.qc-next:disabled { opacity: .45; cursor: not-allowed; }
.qc-submit:disabled { opacity: .65; cursor: wait; }
.qc-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
.qc-field { display: flex; flex-direction: column; gap: var(--s-1); }
.qc-field-wide { grid-column: 1 / -1; }
.qc-field label { font-size: var(--fs-s); font-weight: 600; color: var(--navy-dunkel); }
.qc-field label span { color: var(--navy); }
.qc-field input, .qc-field textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-3); border: 1px solid var(--feld-rand);
  border-radius: var(--radius); background: var(--weiss); font-size: var(--fs-m); color: var(--navy-dunkel);
}
.qc-field textarea { resize: vertical; line-height: 1.5; min-height: 72px; }
@media (hover: hover) and (pointer: fine) { .qc-field input:hover, .qc-field textarea:hover { border-color: var(--navy); } }
.qc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.qc-consent { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-s); line-height: 1.45; color: var(--text-2); }
.qc-consent input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--navy); }
.qc-consent a { color: var(--navy); text-decoration: underline; }
.qc-error { grid-column: 1 / -1; padding: var(--s-3) var(--s-3); border: 1px solid var(--rot); border-left-width: 4px; border-radius: var(--radius); font-size: var(--fs-s); font-weight: 600; color: var(--rot); }
.qc-legal { font-size: var(--fs-xs); color: var(--text-2); text-align: center; }
.qc-result { }
.qc-result-badge { font-size: var(--fs-s); font-weight: 600; color: var(--text-2); }
.qc-result-service { margin-top: var(--s-2); font-size: var(--fs-xl); font-weight: 650; font-stretch: 94%; color: var(--navy-dunkel); }
/* Eine Textzeile, keine Flex-Reihe: sonst zerfällt der Betrag im Text der Seite (PR07). */
.qc-result-price { margin-top: var(--s-3); font-weight: 650; font-stretch: 94%; font-variant-numeric: tabular-nums; font-size: var(--fs-zahl); line-height: 1.05; color: var(--navy-dunkel); letter-spacing: -0.01em; white-space: nowrap; }
.qc-price-dash { color: inherit; }
.qc-result-unit { margin-top: var(--s-2); font-size: var(--fs-s); color: var(--text-2); }
.qc-result-vat { margin-top: var(--s-1); font-size: var(--fs-s); color: var(--text-2); }
.qc-result-list { margin-top: var(--s-4); border-top: 1px solid var(--linie); }
.qc-result-list li { padding: var(--s-2) 0; border-bottom: 1px solid var(--linie); font-size: var(--fs-s); }
.qc-result-list em { font-style: normal; color: var(--text-2); }
.qc-result-travel { margin-top: var(--s-3); font-size: var(--fs-s); color: var(--text-2); }
.qc-result-note { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--flaeche); border-left: 3px solid var(--navy); font-size: var(--fs-s); line-height: 1.5; color: var(--text-2); }
.qc-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-4); }
.qc-result-call, .qc-result-restart {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-4);
  border-radius: var(--radius); font-size: var(--fs-s); font-weight: 600; text-align: center;
}
.qc-result-call { background: var(--gold); border: 1px solid var(--gold); color: var(--navy-dunkel); }
@media (hover: hover) and (pointer: fine) { .qc-result-call:hover { background: var(--gold-tief); } }
.qc-result-restart { border: 1px solid var(--feld-rand); color: var(--navy-dunkel); background: var(--weiss); }
@media (hover: hover) and (pointer: fine) { .qc-result-restart:hover { border-color: var(--navy); } }
.no-js [data-dialog-oeffnen] { display: none; }
@media (min-width: 1025px) { .menue { display: none !important; } }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: var(--s-9) 0; background: var(--weiss); }
.abschnitt:not(.abschnitt-flaeche):not(.abschnitt-grund):not(.bildband) + .abschnitt:not(.abschnitt-flaeche):not(.abschnitt-grund):not(.abschnitt-navy),
.abschnitt-flaeche + .abschnitt-flaeche, .abschnitt-grund + .abschnitt-grund { padding-top: 0; }
/* Politur 26.09.2026: Der Saisonhinweis steht schon auf dem Grund der Leistungen –
   ohne diese Regel lagen 130 px Leere zwischen Hinweis und Überschrift. */
.abschnitt-flaeche, .abschnitt-grund { background: var(--grund); }
/* Weiße Tabellen und Karten auf getöntem Grund */
.lv tbody tr, .preise tbody tr, .orte { background: var(--weiss); }
.abschnitt-flaeche .leistung-teile { gap: var(--s-3); border-top: 0; }
.abschnitt-flaeche .leistung-teil, .abschnitt-flaeche .leistung-teil:nth-child(2n) {
  padding: var(--s-5) var(--s-6) var(--s-6); background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
}
/* Abschnittskopf ohne Nummern (Plan §3.5): groß mit Satz, klein, oder klein mit Verweis rechts */
.kopf-gross { max-width: 46rem; margin-bottom: var(--s-6); }
.kopf-gross h2 { font-size: var(--fs-3xl); }
.kopf-gross p { max-width: 60ch; margin-top: var(--s-4); font-size: var(--fs-l); color: var(--text-2); }
.kopf-klein { margin-bottom: var(--s-5); }
.kopf-klein h2 { font-size: var(--fs-2xl); }
.kopf-klein p { max-width: var(--mass); margin-top: var(--s-2); color: var(--text-2); }
.kopf-zeile { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-5); }
.kopf-zeile .kopf-klein, .kopf-zeile .kopf-gross { margin-bottom: 0; }
.hinweiszeile { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-4) var(--s-5); padding-top: var(--s-4); font-size: var(--fs-s); color: var(--text-2); }
.hinweiszeile-links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.zwischen { font-size: var(--fs-2xl); margin: var(--s-7) 0 var(--s-4); }
.zwischen-klein { font-size: var(--fs-l); margin: var(--s-5) 0 var(--s-3); }
.zwischenraum { margin: var(--s-5) 0 var(--s-6); }
.saison-preis { margin-top: var(--s-5); font-size: var(--fs-l); color: var(--text-2); }
.saison-preis .mono { display: block; font-size: var(--fs-zahl); line-height: 1.05; color: var(--navy-dunkel); letter-spacing: -0.01em; }
.saison-einheit { display: block; margin-top: var(--s-2); }
.saison-richtwert { margin-top: var(--s-3); max-width: 62ch; font-size: var(--fs-s); line-height: 1.5; color: var(--text-2); }
/* Winterdienst: der Saisonvertrag ersetzt das Foto im Seitenkopf (Plan §5.1). Wie die
   Faktentabelle daneben: Kante statt Karte, Radius 0, heller Text auf Navy (Nachbesserung 3). */
.saison-kasten { padding: var(--s-5) 0 0; background: transparent; color: var(--weiss); border-top: 1px solid var(--linie-dunkel-stark); }
.saison-kasten h2 { font-size: var(--fs-xl); color: var(--weiss); }
.saison-kasten .saison-preis { margin-top: var(--s-4); color: var(--auf-dunkel); }
.saison-kasten .saison-preis .mono { color: var(--weiss); }
.saison-kasten .saison-richtwert { color: var(--auf-dunkel); }
.saison-kasten .textlink { display: inline-block; margin-top: var(--s-5); color: var(--weiss); border-color: var(--linie-dunkel-stark); }
@media (hover: hover) and (pointer: fine) { .saison-kasten .textlink:hover { color: var(--weiss); border-color: var(--weiss); } }
.saison-kasten :focus-visible { outline-color: var(--weiss); }
.bildband { padding: var(--s-8) 0 0; }
.bildband .kopf-zeile { margin-bottom: var(--s-5); }
.vorteile-eins { grid-template-columns: 1fr; }
/* Fotoreihe ohne Paar (Reinigung): volle Breite, zwei Spalten 5:4 mit dem Abstand eines Paares */
.fotoreihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-5); }
.fotoreihe img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 0; background: var(--flaeche); }

/* ---------- Leistungsverzeichnis ---------- */
.lv thead th {
  background: var(--navy); color: var(--weiss); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding: var(--s-3) var(--s-5);
}
.lv tbody tr { border-bottom: 1px solid var(--linie); }
.lv tbody th, .lv tbody td { padding: var(--s-5); vertical-align: top; }
.lv-bereich { width: 38%; }
.lv-bereich-in { display: flex; align-items: flex-start; gap: var(--s-5); }
.lv-bereich-in img { width: 132px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; flex: none; background: var(--flaeche); }
.lv-bereich-in a { font-size: var(--fs-xl); font-weight: 600; font-stretch: 94%; line-height: 1.2; color: var(--navy-dunkel); }
@media (hover: hover) and (pointer: fine) { .lv-bereich-in a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.lv-bereich-in p { margin-top: var(--s-2); font-size: var(--fs-s); font-weight: 400; line-height: 1.5; color: var(--text-2); }
.lv-umfang { font-size: var(--fs-s); line-height: 1.7; }
.lv-preis { text-align: right; white-space: nowrap; }
.lv thead .lv-preis { text-align: right; }
.lv td.lv-preis b { display: block; font-size: var(--fs-xl); font-weight: 650; font-stretch: 94%; color: var(--navy-dunkel); }
.lv td.lv-preis span { display: block; margin-top: 2px; font-size: var(--fs-s); color: var(--text-2); }
.unter-tabelle { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-5); font-size: var(--fs-s); color: var(--text-2); }

/* Preistabelle der Leistungsseite */
.preise { margin-top: 0; }
.preise thead th { background: var(--navy); color: var(--weiss); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: var(--s-3) var(--s-5); }
.preise tbody tr { border-bottom: 1px solid var(--linie); }
.preise tbody th, .preise tbody td { padding: var(--s-4) var(--s-5); vertical-align: top; }
.preise tbody tr > * + * { border-left: 1px solid var(--linie); }
.preise tbody th { font-weight: 600; color: var(--navy-dunkel); }
.preise tbody th small { display: block; margin-top: var(--s-1); font-weight: 400; font-size: var(--fs-s); color: var(--text-2); }
.preise .preis-zelle { width: 200px; text-align: right; white-space: nowrap; font-size: var(--fs-l); color: var(--navy-dunkel); }
.preise thead .preis-zelle { text-align: right; }
.preise thead .preis-zelle, .preise thead .einheit-zelle { color: var(--weiss); font-size: var(--fs-xs); }
.preise .einheit-zelle { width: 240px; font-size: var(--fs-s); color: var(--text-2); }

/* ---------- Vorher/Nachher-Paare ---------- */
.paare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
.paar { margin: 0; }
.paar-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); }
.paar-bilder figure { position: relative; }
.paar-bilder img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; background: var(--flaeche); }
/* Etikett auf dem Bild, unten links (Entwurf v2); im Markup steht es weiter vor dem Bild */
.marke { display: block; padding: var(--s-1) var(--s-3); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; }
.paar-bilder .marke { position: absolute; left: 0; bottom: 0; z-index: 1; }
.marke-vorher { background: var(--text-2); color: var(--weiss); }
.marke-nachher { background: var(--navy); color: var(--weiss); }
.paar-unter { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-top: var(--s-3); font-size: var(--fs-s); }
.paar-unter h3 { font-size: var(--fs-s); font-weight: 600; font-stretch: 100%; letter-spacing: 0; line-height: 1.6; }
.paar-unter p { color: var(--text-2); }
.paar-unter a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .paar-unter a:hover { color: var(--navy-dunkel); text-decoration-color: currentColor; } }
.paare-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Ablauf ---------- */
/* Ablauf als Verzeichniszeilen (Entwurf v2, K7): links der Kopf, rechts eine Liste mit Navy-Kopflinie.
   Die einzige Nummernreihe der Seite; nur auf Start und Richtangebot. */
.ablauf-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); align-items: start; }
.ablauf-raster .kopf-klein { margin-bottom: 0; }
.ablauf-raster > .fliess { max-width: var(--mass); }
.ablauf { border-top: 2px solid var(--navy); }
.ablauf li { display: grid; grid-template-columns: 40px minmax(0, 13rem) minmax(0, 1fr); gap: var(--s-4); align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--linie-stark); }
.ablauf .ziffer { font-size: var(--fs-m); font-weight: 600; color: var(--navy); }
.ablauf h3 { font-size: var(--fs-m); font-weight: 600; line-height: 1.4; }
.ablauf p { color: var(--text-2); }

/* ---------- Bewertungen ---------- */
.bew-raster { display: grid; grid-template-columns: 300px 1fr; }
.bew-raster + .klein { margin-top: var(--s-4); }
.bew-note { padding: var(--s-6) var(--s-7) 0 0; border-right: 1px solid var(--linie); }
/* Politur 26.09.2026: 112 → 64 px, Archivo – die Note war größer als die H1 */
.note { font-size: var(--fs-zahl); font-weight: 650; font-stretch: 94%; line-height: 1; color: var(--navy-dunkel); letter-spacing: -0.02em; }
.sterne { display: flex; gap: var(--s-1); margin-top: var(--s-4); color: var(--gold); }
.sterne svg { width: 22px; height: 22px; }
.bew-quelle { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--fs-m); font-weight: 400; }
.bew-quelle .ico { width: 20px; height: 20px; }
.bew-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); margin-top: var(--s-6); font-size: var(--fs-s); }
.bew-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bew { display: flex; flex-direction: column; padding: var(--s-6) var(--s-5) var(--s-2); border-right: 1px solid var(--linie); }
.bew:last-child { border-right: 0; padding-right: 0; }
.klein-sterne { margin-top: 0; }
.klein-sterne svg { width: 16px; height: 16px; }
.bew blockquote { margin-top: var(--s-4); font-size: var(--fs-m); line-height: 1.55; color: var(--navy-dunkel); }
.bew figcaption { margin-top: var(--s-4); display: flex; flex-direction: column; font-size: var(--fs-m); }
.bew figcaption strong { font-weight: 600; }
.bew figcaption span { font-size: var(--fs-s); color: var(--text-2); }
.antwort-inhaber { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--linie); font-size: var(--fs-s); line-height: 1.5; color: var(--text-2); }
.bew figcaption + .antwort-inhaber { margin-top: var(--s-5); }
.antwort-inhaber span { display: block; font-size: var(--fs-s); font-weight: 600; color: var(--navy-dunkel); margin-bottom: 2px; }
.bew-weitere { margin-top: var(--s-7); }
.bew-weitere h3 { font-size: var(--fs-xl); margin-bottom: var(--s-1); }
.bew-weitere .zitate { margin-top: var(--s-4); }
.bew-links button.textlink { cursor: pointer; }
/* Kompakt (Startseite): Note links, zwei Zitate rechts */
.bew-kompakt { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); align-items: start; }
.bew-kompakt .bew-note { padding: 0; border-right: 0; }
.bew-kompakt .sterne { gap: var(--s-1); margin-top: var(--s-2); }
.bew-kompakt .sterne svg { width: 20px; height: 20px; }
.note-text { margin-top: var(--s-3); color: var(--text-2); }
.bew-kompakt .bew-links { gap: var(--s-2); margin-top: var(--s-5); }
.zitate { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.zitat { padding-top: var(--s-4); border-top: 1px solid var(--linie-stark); }
.zitat blockquote { font-size: var(--fs-l); line-height: 1.55; color: var(--text); }
.zitat figcaption { margin-top: var(--s-4); font-size: var(--fs-s); color: var(--text-2); }
.zitat figcaption strong { font-weight: 600; color: var(--text); }
.zitat .sterne { margin-top: 0; }
.zitat .sterne svg { width: 16px; height: 16px; }
.rechtshinweis { max-width: 80ch; margin-top: var(--s-6); font-size: var(--fs-xs); color: var(--text-2); }
.formular .rechtshinweis { max-width: none; margin: 0; }
#reviewFormStep > .klein { margin: 0 0 var(--s-5); }
/* Abnahme 2: das leere Live-Feld um die Fehlermeldung bekommt keinen Feldabstand */
#reviewForm > div[aria-live]:has(> [hidden]) { display: contents; }

/* Bewertungsdialog (natives <dialog>) */
.dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0;
  border: 1px solid var(--linie-stark); border-radius: var(--radius); color: var(--text); background: var(--weiss);
}
.dialog::backdrop { background: rgba(13, 31, 60, 0.6); }
.dialog-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--navy); border-bottom: 1px solid var(--linie-dunkel); }
.dialog-kopf h2 { color: var(--weiss); font-size: var(--fs-xl); }
.dialog-zu { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); font-size: var(--fs-s); font-weight: 600; color: var(--weiss); border: 1px solid var(--linie-dunkel-stark); border-radius: var(--radius); }
@media (hover: hover) and (pointer: fine) { .dialog-zu:hover { border-color: var(--weiss); } }
.dialog-inhalt { padding: var(--s-5); }
.dialog-inhalt .formular { grid-template-columns: 1fr; }
.dialog-inhalt .formular > .feld, .dialog-inhalt .formular > .feld-halb { grid-column: 1 / -1; }
.sterne-wahl { display: flex; gap: var(--s-2); }
.star-btn {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--feld-rand); border-radius: var(--radius); color: var(--linie-stark); background: var(--weiss);
}
.star-btn svg { width: 24px; height: 24px; }
.star-btn.active { color: var(--gold); border-color: var(--navy); }
@media (hover: hover) and (pointer: fine) { .star-btn:hover { color: var(--gold); border-color: var(--navy); } }
.dialog-fertig { text-align: left; }
.dialog-fertig h3 { font-size: var(--fs-xl); margin-bottom: var(--s-2); }

/* ---------- Über uns ---------- */
.ueber-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); align-items: start; }
.ueber-bild { max-width: 325px; justify-self: start; width: 100%; }
.ueber-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; background: var(--grund); }
.ueber-bild figcaption { margin-top: var(--s-3); font-size: var(--fs-s); color: var(--text-2); }
.ueber-text h2 { max-width: 18ch; font-size: var(--fs-3xl); }
.ueber-text .gross { max-width: var(--mass); margin-top: var(--s-5); font-size: var(--fs-l); color: var(--text); }
.ueber-text .gross + p { max-width: var(--mass); margin-top: var(--s-4); }
.ueber-link { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); }
.fakten { display: grid; grid-template-columns: max-content 1fr; max-width: 40rem; margin: var(--s-6) 0 0; border-top: 1px solid var(--linie-stark); }
.fakten dt, .fakten dd { margin: 0; padding: var(--s-3) 0; border-bottom: 1px solid var(--linie); font-size: var(--fs-s); }
.fakten dt { padding-right: var(--s-6); font-weight: 600; }
.fakten dd { color: var(--text-2); }
.fakten a { text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .fakten a:hover { color: var(--navy-dunkel); text-decoration-color: var(--navy); } }
.portraet img { width: 100%; aspect-ratio: 700 / 971; object-fit: cover; border-radius: 0; background: var(--flaeche); }
.portraet figcaption { padding-top: var(--s-3); font-size: var(--fs-s); color: var(--text-2); }
.werte { margin: var(--s-6) 0 var(--s-5); border-top: 1px solid var(--navy-dunkel); }
.werte caption { caption-side: top; text-align: left; font-size: var(--fs-s); font-weight: 600; color: var(--navy-dunkel); padding-bottom: var(--s-3); }
.werte th, .werte td { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--linie); font-size: var(--fs-m); vertical-align: top; }
.werte th { width: 190px; font-weight: 600; color: var(--navy-dunkel); white-space: nowrap; }
.werte td { padding-left: var(--s-4); border-left: 1px solid var(--linie); }
.gebiet h3 { font-size: var(--fs-xl); margin-bottom: var(--s-4); }
.orte { border: 1px solid var(--linie); table-layout: fixed; }
.orte thead th { background: var(--navy); color: var(--weiss); padding: var(--s-3) var(--s-4); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.orte td { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--linie); font-size: var(--fs-m); }
.orte th + th, .orte td + td { border-left: 1px solid var(--linie); }
.gebiet p { margin-top: var(--s-3); font-size: var(--fs-s); color: var(--text-2); }

/* ---------- Kontakt und Formulare ---------- */
.anfrage-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-8); }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-8); }
.formular { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-5) var(--s-5); align-content: start; }
.formular > .feld { grid-column: span 2; }
.formular > .feld-halb { grid-column: span 3; }
.formular > .feld-voll { grid-column: 1 / -1; }
.feld { display: flex; flex-direction: column; gap: var(--s-2); }
.feld-voll { grid-column: 1 / -1; }
.feld label, .feld .feld-titel { font-size: var(--fs-s); font-weight: 600; color: var(--navy-dunkel); }
.feld abbr { color: var(--navy); }
.formular input, .formular select, .formular textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4); border: 1px solid var(--feld-rand); border-radius: var(--radius);
  background: var(--weiss); font-size: var(--fs-m); color: var(--navy-dunkel);
}
.formular input, .formular select { height: 48px; }
.formular textarea { resize: vertical; min-height: 128px; line-height: 1.5; }
.formular select { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .formular input:hover, .formular select:hover, .formular textarea:hover { border-color: var(--navy); } }
.formular [aria-invalid="true"], .formular .is-invalid { border-color: var(--rot); border-width: 2px; }
.feld-fehler { font-size: var(--fs-s); font-weight: 600; color: var(--rot); }
.feld label span { font-weight: 400; color: var(--text-2); }
.formular-fuss { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: var(--s-5); }
.formular-fuss .klein { max-width: 52ch; font-size: var(--fs-xs); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular-fehler { grid-column: 1 / -1; }

.direkt { border-top: 1px solid var(--navy-dunkel); }
.direkt h3 { font-size: var(--fs-xl); padding: var(--s-4) 0 var(--s-2); }
.direkt dd .nowrap { white-space: nowrap; }
.direkt dl > div { display: grid; grid-template-columns: 150px 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--linie); }
.direkt dt { align-self: start; font-size: var(--fs-s); font-weight: 400; color: var(--text-2); padding-top: 1px; }
.direkt dd { font-size: var(--fs-m); font-weight: 400; color: var(--navy-dunkel); }
.direkt dd a:not(.textlink):not(.tel) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .direkt dd a:not(.textlink):hover { color: var(--navy); } }
.direkt dd .textlink { margin-top: var(--s-3); font-size: var(--fs-s); }
.direkt .karte-platz { margin-top: var(--s-5); }
/* „Direkt erreichen“ der Startseite: Bezeichnung über dem Wert, keine Karte (Karte erst auf /kontakt/) */
.direkt-kompakt { border-top: 2px solid var(--navy); padding-top: var(--s-4); }
.direkt-kompakt h3 { padding: 0; font-size: var(--fs-l); }
.direkt-kompakt dl { margin: var(--s-4) 0 0; }
.direkt-kompakt dl > div { display: block; padding: 0; border: 0; }
.direkt-kompakt dt { margin-top: var(--s-4); font-size: var(--fs-xs); padding-top: 0; }
.direkt-kompakt dd { margin: 2px 0 0; font-size: var(--fs-m); font-weight: 400; }
.direkt-kompakt dd a.tel { text-decoration: none; }
.direkt-kompakt dd a.tel { font-size: var(--fs-xl); font-weight: 650; font-stretch: 94%; }
.direkt-kompakt dd .textlink { margin-top: var(--s-1); }

/* Karte mit Zwei-Klick-Lösung (static/js/karte.js) */
.karte-platz {
  position: relative; display: grid; place-items: center; width: 100%;
  border: 1px solid var(--linie-stark); border-radius: var(--radius); background: var(--flaeche); overflow: hidden;
}
.karte-h240 { min-height: 240px; }
.karte-h320 { min-height: 320px; }
.karte-h380 { min-height: 380px; }
.karte-platz.karte-geladen { display: block; background: var(--weiss); }
.karte-platz iframe { display: block; width: 100%; height: 100%; min-height: inherit; border: 0; }
.karte-hinweis { max-width: 34em; padding: var(--s-5); text-align: center; }
.karte-adresse { font-weight: 600; color: var(--navy-dunkel); }
.karte-text { margin-top: var(--s-2); font-size: var(--fs-s); color: var(--text-2); }
.karte-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; margin-top: var(--s-4); padding: 0 var(--s-5);
  border-radius: var(--radius); background: var(--navy); color: var(--weiss); font-weight: 600; font-size: var(--fs-s);
}
@media (hover: hover) and (pointer: fine) { .karte-knopf:hover { background: var(--navy-dunkel); } }
.karte-fuss { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--text-2); }
.karte-fuss a { color: var(--navy); text-decoration: underline; }

/* ---------- Fließtext, Rechtstexte, FAQ ---------- */
.fliess { font-size: var(--fs-m); line-height: 1.65; color: var(--text); }
.fliess p + p, .fliess p + ul, .fliess ul + p { margin-top: var(--s-4); }
.fliess h2 { font-size: var(--fs-2xl); margin: var(--s-7) 0 var(--s-3); }
.fliess p + .preise, .fliess p + table { margin-top: var(--s-5); }
.preise + .hinweiszeile, .orte + .hinweiszeile, table + .hinweiszeile { margin-top: var(--s-5); padding-top: 0; }
.kopf-klein + .fliess, .kopf-gross + .fliess { margin-top: var(--s-5); }
.ablauf-raster > .kopf-klein + .fliess { margin-top: 0; }
.fliess h3 { font-size: var(--fs-xl); margin: var(--s-6) 0 var(--s-3); }
.fliess ul { margin-top: var(--s-3); }
.fliess p, .fliess ul { max-width: var(--mass); }
.fliess > h2:first-child, .fliess > h3:first-child { margin-top: 0; }
.fliess li { position: relative; padding-left: var(--s-4); }
.fliess li + li { margin-top: var(--s-2); }
.fliess li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 1px; background: var(--text-2); }
.rechtstext { max-width: 820px; font-size: var(--fs-m); line-height: 1.7; }
.rechtstext h2 { font-size: var(--fs-2xl); margin: var(--s-7) 0 var(--s-3); }
.rechtstext h3 { font-size: var(--fs-xl); margin: var(--s-5) 0 var(--s-2); }
.rechtstext h4 { font-size: var(--fs-m); margin: var(--s-5) 0 var(--s-2); }
.rechtstext p + p { margin-top: var(--s-3); }
.rechtstext ul { margin: var(--s-3) 0; }
.rechtstext li { position: relative; padding-left: var(--s-4); }
.rechtstext li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 1px; background: var(--text-2); }
.rechtstext address { font-style: normal; }

.leistung-teile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--navy-dunkel); }
.leistung-teil { padding: var(--s-5) var(--s-6) var(--s-6) 0; border-bottom: 1px solid var(--linie); }
.leistung-teil:nth-child(2n) { padding-left: var(--s-6); padding-right: 0; border-left: 1px solid var(--linie); }
/* Mono-Nummer über jeder Teilleistung statt Symbol; „/ ''“ hält sie aus dem Vorlesetext */
.leistung-teil h3 { font-size: var(--fs-xl); }
/* Nur die Wertekarten auf Über uns tragen (vorläufig) Nummern – bekannte Ausnahme, fällt in Stufe 4 weg */
.leistung-teile.nummeriert { counter-reset: teil; }
.leistung-teile.nummeriert .leistung-teil { counter-increment: teil; }
.leistung-teile.nummeriert .leistung-teil h3::before {
  content: counter(teil, decimal-leading-zero);
  content: counter(teil, decimal-leading-zero) / "";
  display: block; margin-bottom: var(--s-3); font-weight: 600; font-size: var(--fs-xs);
  font-stretch: 100%; letter-spacing: 0; color: var(--text-2);
}
.leistung-teil p { margin-top: var(--s-3); max-width: var(--mass); }
.leistung-teil ul { margin-top: var(--s-3); display: grid; gap: var(--s-1); }
.leistung-teil li { position: relative; padding-left: var(--s-4); font-size: var(--fs-m); }
.leistung-teil li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 1px; background: var(--text-2); }

.vorteile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linie); }
.vorteile { counter-reset: vorteil; }
.vorteile li { counter-increment: vorteil; display: flex; gap: var(--s-4); align-items: baseline; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--linie); font-weight: 400; }
.vorteile li::before {
  content: counter(vorteil, decimal-leading-zero);
  content: counter(vorteil, decimal-leading-zero) / "";
  flex: none; font-weight: 600; font-size: var(--fs-xs); color: var(--text-2);
}

.faq { border-top: 1px solid var(--navy-dunkel); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 60px; padding: var(--s-4) 0;
  font-size: var(--fs-l); font-weight: 600; color: var(--navy-dunkel); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: var(--fs-2xl); font-weight: 400; line-height: 1; color: var(--navy); }
.faq details[open] summary::after { content: "–"; }
.faq details > div, .faq details > p { padding: 0 0 var(--s-5); color: var(--text-2); max-width: var(--mass); }

/* Anfragestreifen (Plan §3.5): ersetzt alle Schlusskästen */
.anfragestreifen { background: var(--grund); }
.streifen-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-6); align-items: center; padding-top: var(--s-7); padding-bottom: var(--s-7); }
.streifen-person { display: flex; align-items: center; gap: var(--s-4); }
.streifen-person img { width: 72px; height: 72px; object-fit: cover; object-position: 50% 18%; border-radius: 50%; background: var(--flaeche); }
.streifen-person p { font-size: var(--fs-s); line-height: 1.45; color: var(--text-2); }
.streifen-person strong { display: block; font-size: var(--fs-m); font-weight: 600; color: var(--text); }
.streifen-satz { max-width: 30ch; font-size: var(--fs-xl); font-weight: 600; font-stretch: 94%; line-height: 1.3; color: var(--navy-dunkel); }
.streifen-handlung { display: flex; align-items: center; gap: var(--s-5); }
.anfragestreifen + .abschnitt { padding-top: var(--s-7); }
/* Kante, wenn der Streifen auf einen getönten Abschnitt folgt (gleiche Farbe) */
.abschnitt-flaeche + .anfragestreifen, .abschnitt-grund + .anfragestreifen { border-top: 1px solid var(--linie); }

.hinweis { padding: var(--s-4) var(--s-4); border: 1px solid var(--linie); border-left: 3px solid var(--navy); background: var(--weiss); font-size: var(--fs-s); color: var(--text-2); }
.hinweis strong { color: var(--navy-dunkel); }
/* Saisonhinweis der Startseite (core/data/saison.py, 26.09.2026) */
.saison {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-5);
  margin: 0 0 var(--s-7); padding: var(--s-4) 0; border-top: 1px solid var(--linie-stark); border-bottom: 1px solid var(--linie-stark);
  font-size: var(--fs-m);
}
.saison strong { font-weight: 600; }
/* ---------- Kennzahlband (Profi-Runde 25.10.2026) ----------
   Vier belegte Angaben in einer Reihe zwischen Hero bzw. Seitenkopf und erstem Abschnitt:
   Haarlinien statt Kästen, Wert in --fs-xl, Erläuterung klein. Keine Bewegung. */
.kennzahlen { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.kz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kz li { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-5) var(--s-5) var(--s-5) 0; }
.kz li + li { padding-left: var(--s-5); border-left: 1px solid var(--linie); }
.kz b { font-size: var(--fs-xl); line-height: 1.2; font-weight: 650; font-stretch: 94%; letter-spacing: -0.01em; color: var(--navy-dunkel); font-variant-numeric: tabular-nums; }
.kz span { font-size: var(--fs-s); line-height: 1.4; color: var(--text-2); }
@media (max-width: 1080px) {
  .kz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz li { padding: var(--s-4) var(--s-4) var(--s-4) 0; }
  .kz li + li { padding-left: 0; border-left: 0; }
  .kz li:nth-child(2n) { padding-left: var(--s-4); border-left: 1px solid var(--linie); }
  .kz li:nth-child(n + 3) { border-top: 1px solid var(--linie); }
}
@media (max-width: 700px) {
  .kz li { padding: var(--s-3) var(--s-3) var(--s-3) 0; }
  .kz li:nth-child(2n) { padding-left: var(--s-3); }
  .kz b { font-size: var(--fs-l); }
}
/* Zwei Hinweise der Leistungsübersicht (Saison, Neues) nebeneinander statt untereinander */
.hinweis-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); margin: 0 0 var(--s-7); }
.hinweis-paar .saison { margin: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--s-3); height: 100%; }
.hinweis-paar .saison .textlink { margin-top: auto; }
.hinweis-paar:has(> .saison:only-child) { grid-template-columns: 1fr; }
@media (max-width: 1080px) { .hinweis-paar { grid-template-columns: 1fr; gap: var(--s-4); margin-bottom: var(--s-6); } }
.verweise { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); }
.orte-zeile { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); font-size: var(--fs-m); }
.orte-zeile li:not(:last-child)::after { content: "·"; margin-left: var(--s-4); color: var(--text-2); }

/* ---------- Leistungen-Übersicht ---------- */
.leistungsliste > li { display: grid; grid-template-columns: 200px minmax(0, 1fr) 260px; gap: var(--s-7); padding: var(--s-6) 0; border-bottom: 1px solid var(--linie); align-items: start; }
.leistungsliste img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; background: var(--flaeche); }
.leistungsliste h2 { font-size: var(--fs-2xl); }
@media (hover: hover) and (pointer: fine) { .leistungsliste h2 a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; } }
.leistungsliste p { margin-top: var(--s-3); max-width: var(--mass); }
.leistungsliste ul { margin-top: var(--s-3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1) var(--s-5); }
.leistungsliste ul li { position: relative; padding-left: var(--s-4); font-size: var(--fs-m); }
.leistungsliste ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 1px; background: var(--text-2); }
.ll-preis { border-left: 1px solid var(--linie); padding-left: var(--s-5); }
.ll-preis small { display: block; font-size: var(--fs-xs); color: var(--text-2); }
.ll-preis .mono { display: block; margin-top: 2px; font-size: var(--fs-xl); color: var(--navy-dunkel); white-space: nowrap; }
.ll-preis span:not(.mono) { display: block; font-size: var(--fs-s); color: var(--text-2); }
.ll-preis .textlink { margin-top: var(--s-4); }

/* ---------- Galerie ---------- */
.seitenkopf-bild.hochformat img { aspect-ratio: 4 / 5; object-position: 50% 20%; }
.kontakt-einleitung { margin-bottom: var(--s-5); max-width: var(--mass); }
.projekt { padding: var(--s-7) 0; border-bottom: 1px solid var(--linie); }
.projekt:first-of-type { border-top: 2px solid var(--navy); }
.projekt-kopf { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; column-gap: var(--s-6); margin-bottom: var(--s-5); }
/* Abnahme 1 (02.10.2026): Ab 1081 px steht die Bildreihe in der Textspalte (8/12) unter dem Projekttext,
   jede Zeile endet an derselben Kante; die Überschrift bleibt links (4/12). */
@media (min-width: 1081px) {
  .projekt { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr auto; column-gap: var(--s-6); }
  .projekt-kopf { display: contents; }
  .projekt-titel { grid-column: 1; grid-row: 1 / span 3; align-self: start; position: sticky; top: var(--s-5); }
  .projekt-text { grid-column: 2; grid-row: 1 / span 2; }
  .projekt-bilder { grid-column: 2; grid-row: 3; margin-top: var(--s-5); }
}
.projekt-titel { grid-column: 1; grid-row: 1 / span 2; }
.projekt-kopf h3 { font-size: var(--fs-2xl); }
.projekt-art { margin-top: var(--s-2); font-size: var(--fs-s); color: var(--text-2); }
.projekt-art a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.projekt-text { grid-column: 2; grid-row: 1 / span 2; max-width: var(--mass); }
.projekt-gruppe + .projekt-gruppe { margin-top: var(--s-5); }
.projekt-gruppe h4.marke { display: inline-block; margin-bottom: var(--s-2); }
.projekt-bilder { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.projekt-bilder .projekt-gruppe + .projekt-gruppe { margin-top: 0; }
/* 13.10.2026 (Wunsch Herr Flügel): Paare mit demselben Blick stehen dicht nebeneinander, zwischen den
   Paaren bleibt deutlich Luft – so ist auf einen Blick klar, was zusammengehört. */
.projekt-zwischen { margin-bottom: var(--s-2); font-size: var(--fs-s); font-weight: 600; color: var(--text-2); }
.projekt-paare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.projekt-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
/* Ein einzelnes Paar nimmt die halbe Spaltenbreite (Profi-Runde 25.10.2026): die Fotos sind sonst nur gut 200 px breit */
@media (min-width: 701px) { .projekt-paare:has(> .projekt-paar:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 30rem; } }
.gkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-1); }
.gcard .marke { position: absolute; left: 0; bottom: 0; z-index: 1; padding: var(--s-1) var(--s-3); font-size: var(--fs-xs); }
.gcard { position: relative; cursor: zoom-in; background: var(--flaeche); border-radius: 0; overflow: hidden; }
.gcard img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (hover: hover) and (pointer: fine) { .gcard:hover img { opacity: .92; } }
.gcard:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.gcard-nr { position: absolute; left: 0; bottom: 0; padding: 2px var(--s-2); background: var(--weiss); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--navy-dunkel); }
.gcard.sortable-ghost { opacity: .4; }
.bearbeiten-leiste { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; padding: var(--s-3) 0; }
.bearbeiten-leiste p { font-size: var(--fs-s); color: var(--text-2); margin-right: auto; }
.ist-bearbeitung .gcard { cursor: grab; outline: 1px dashed var(--linie-stark); }

.lb-backdrop {
  position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center;
  padding: var(--s-7) var(--s-4); background: var(--navy-dunkel);
}
.lb-backdrop.is-open { display: flex; }
.lb-inner { position: relative; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.lb-img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; background: var(--navy-dunkel); }
.lb-caption { margin-top: var(--s-3); color: var(--weiss); font-size: var(--fs-s); text-align: center; }
.lb-caption .mono { color: var(--auf-dunkel); margin-right: var(--s-2); }
.lb-close, .lb-nav {
  position: fixed; display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s-4);
  border: 1px solid var(--linie-dunkel-stark); border-radius: var(--radius); color: var(--weiss); background: var(--navy-dunkel);
  font-size: var(--fs-s); font-weight: 600;
}
@media (hover: hover) and (pointer: fine) { .lb-close:hover, .lb-nav:hover { border-color: var(--weiss); } }
.lb-close { top: 16px; right: 16px; }
.lb-nav { top: 50%; margin-top: -24px; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
body.lb-offen { overflow: hidden; }
body.lb-offen .leiste-unten { display: none; }

/* ---------- Aktuelles (Redaktionsbereich) ---------- */
.akt-liste { display: grid; gap: 0; border-top: 1px solid var(--navy-dunkel); }
.akt-beitrag { padding: var(--s-6) 0 var(--s-6); border-bottom: 1px solid var(--linie); }
.akt-kopf { margin-bottom: var(--s-4); }
.akt-art { display: block; margin-bottom: var(--s-2); font-size: var(--fs-s); font-weight: 600; color: var(--text-2); }
.akt-titel { font-size: var(--fs-2xl); }
.akt-zeile { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-2); font-size: var(--fs-s); color: var(--text-2); }
.akt-text { max-width: var(--mass); line-height: 1.7; white-space: pre-line; }
.akt-zitat { max-width: 46em; padding-left: var(--s-5); border-left: 3px solid var(--navy); }
.akt-zitat p { font-size: var(--fs-l); line-height: 1.6; color: var(--navy-dunkel); }
.akt-zitat footer { margin-top: var(--s-2); font-size: var(--fs-s); color: var(--text-2); }
.akt-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-2); margin-top: var(--s-5); }
.akt-bild { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0; background: var(--flaeche); }
.akt-bild img { width: 100%; height: 100%; object-fit: cover; }
.akt-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-5); }
.akt-paar .akt-bilder { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
.akt-paar figure { position: relative; }
.akt-paar .marke { position: absolute; left: 0; bottom: 0; z-index: 1; }
.akt-leer { max-width: 46em; padding: var(--s-5) var(--s-5); border: 1px dashed var(--linie-stark); color: var(--text-2); }
/* Seit 26.09.2026 (SEO-Kritik A1): Titel verweist auf die Einzelseite, Leistung auf ihre Seite */
@media (hover: hover) and (pointer: fine) { .akt-titel a:hover, .akt-zeile a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; } }
.akt-zeile a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.akt-einzeln { padding-top: 0; }
/* Verweisliste „Erledigte Aufträge“ auf Leistungsseite und Einsatzgebiet */
.auftraege { border-top: 1px solid var(--linie); }
.auftraege li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--linie); }
.auftraege-zeile { font-size: var(--fs-s); color: var(--text-2); }
.leistung-teil .auftraege { margin-top: var(--s-3); gap: 0; }
.leistung-teil .auftraege li { padding-left: 0; }
.leistung-teil .auftraege li::before { content: none; }
.akt-einzeln + .verweise { margin-top: var(--s-5); }

/* Ortsnamen als Verweise auf die Sprungmarken in /einsatzgebiet/ (A11) */
.orte a, .orte-zeile a { color: var(--navy); border-bottom: 1px solid var(--linie-stark); }
@media (hover: hover) and (pointer: fine) { .orte a:hover, .orte-zeile a:hover { border-color: var(--navy); } }
.orte td[id] { scroll-margin-top: 96px; }
.orte td[id]:target { background: var(--flaeche); font-weight: 600; }

/* ---------- 404 und Danke ---------- */
.wege { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--navy-dunkel); margin-top: var(--s-7); }
.wege li { border-bottom: 1px solid var(--linie); }
.wege li + li { border-left: 1px solid var(--linie); }
.wege a { display: flex; flex-direction: column; gap: var(--s-2); height: 100%; padding: var(--s-5) var(--s-5) var(--s-5) 0; }
.wege li + li a { padding-left: var(--s-5); }
@media (hover: hover) and (pointer: fine) { .wege a:hover { background: var(--flaeche); } }
.wege strong { font-size: var(--fs-l); font-weight: 650; font-stretch: 94%; color: var(--navy-dunkel); }
.wege span { font-size: var(--fs-s); color: var(--text-2); }
/* Abnahme 1 (02.10.2026): Die Wege stehen auf 404 und Danke auf weißem Grund unter dem Navy-Kopf */
.abschnitt.abschnitt-wege { padding: var(--s-8) 0 var(--s-9); }
.abschnitt-wege .wege { margin-top: 0; }
.seitenkopf-niedrig.seitenkopf-weg { padding: var(--s-8) 0 var(--s-7); }
.wege-hilfe { margin-top: var(--s-5); font-size: var(--fs-m); color: var(--text-2); }
.wege-hilfe a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Fuß ---------- */
.fuss { background: var(--navy-dunkel); color: var(--auf-dunkel); font-size: var(--fs-s); }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--s-7); padding: var(--s-8) 0 var(--s-7); }
.fuss h2 { margin-bottom: var(--s-3); font-size: var(--fs-s); font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--weiss); }
.fuss li a { display: inline-block; padding: var(--s-1) 0; }
@media (hover: hover) and (pointer: fine) { .fuss a:hover { color: var(--weiss); text-decoration: underline; text-underline-offset: 3px; } }
.fuss-marke { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.fuss-marke img { width: 48px; height: auto; }
.fuss-marke span { display: flex; flex-direction: column; line-height: 1.15; }
.fuss-marke b { font-size: var(--fs-l); font-weight: 650; font-stretch: 94%; color: var(--weiss); }
.fuss-marke small { font-size: var(--fs-s); color: var(--auf-dunkel); }
.fuss address { font-style: normal; line-height: 1.7; }
.fuss address .zeile { display: block; }
.fuss address a { color: var(--weiss); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fuss-unten { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3) var(--s-5); padding: var(--s-5) 0 var(--s-5); border-top: 1px solid var(--linie-dunkel); font-size: var(--fs-xs); color: var(--auf-dunkel-leise); }
.fuss-unten a + a { margin-left: var(--s-5); }
.fuss-unten .fuss-agentur { flex-basis: 100%; font-size: var(--fs-xs); color: var(--auf-dunkel); }
.fuss-unten .fuss-agentur a { margin-left: 0; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Leiste unten (nur schmale Bildschirme) ---------- */
.leiste-unten { display: none; }

/* =====================================================================
   Mittlere Breiten
   ===================================================================== */
@media (max-width: 1240px) {
  .hero-raster { grid-template-columns: minmax(0, 1fr) 440px; gap: var(--s-7); }
  .leistungsliste > li { grid-template-columns: 160px minmax(0, 1fr) 220px; gap: var(--s-5); }
}

/* Abnahme 1 (02.10.2026): Die Navigation bleibt bis 1025 px stehen (vorher fiel sie schon bei
   1280 px weg, dem häufigsten Laptopmaß). Von 1025 bis 1360 px rücken die Punkte enger,
   die Telefonnummer steht erst ab 1361 px im Kopf (darunter im Menü, im Fuß, auf den Knöpfen). */
@media (min-width: 1025px) and (max-width: 1360px) {
  .kopf-in { gap: var(--s-5); }
  .kopf-nav ul { gap: var(--s-4); }
  .kopf-tel { display: none; }
}
@media (min-width: 1025px) and (max-width: 1180px) {
  .weg-tablet { display: none; }
}
@media (max-width: 1024px) {
  .kopf-nav { display: none; }
  .kopf-aktion { margin-left: auto; }
  .kopf-menue { display: inline-flex; }
  .no-js .kopf-menue { display: none; }
}

@media (max-width: 860px) {
  .kopf-in, .kopf-aktion { gap: var(--s-4); }
}

@media (max-width: 1080px) {
  :root { --rand: 32px; }
  .hero-raster { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero-text { max-width: 760px; }
  .nur-tablet { display: inline-flex; }
  .rechner { max-width: none; }
  .seitenkopf-raster, .seitenkopf-raster.mit-rechner { grid-template-columns: 1fr; gap: var(--s-6); }
  /* Foto (oder Saisonkasten) direkt nach dem Lead */
  .seitenkopf-raster.mit-foto { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
  .seitenkopf-bild { max-width: 640px; }
  .seitenkopf-raster.mit-foto .seitenkopf-bild { max-width: none; }
  .lv-bereich { width: 42%; }
  .lv-preis { white-space: normal; }
  .lv td.lv-preis b { white-space: nowrap; }
  .lv thead th, .lv tbody th, .lv tbody td { padding-left: var(--s-4); padding-right: var(--s-4); }
  .lv-bereich-in { gap: var(--s-3); }
  .lv-bereich-in img { width: 96px; }
  .bew-raster, .bew-kompakt { grid-template-columns: 1fr; gap: var(--s-6); }
  .bew-note { padding: var(--s-5) 0; border-right: 0; border-bottom: 1px solid var(--linie); }
  .bew-kompakt .bew-note { padding: 0; border-bottom: 0; }
  .anfrage-raster { grid-template-columns: 1fr; gap: var(--s-6); }
  .kontakt-raster { grid-template-columns: 1fr; gap: var(--s-7); }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .fuss-firma { grid-column: 1 / -1; }
  .ablauf-raster { grid-template-columns: 1fr; gap: var(--s-5); }
  .streifen-in { grid-template-columns: 1fr; gap: var(--s-5); }
  .paare-drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wege { grid-template-columns: 1fr 1fr; }
  .wege li:nth-child(3) { border-left: 0; }
  .wege li:nth-child(3) a { padding-left: 0; }
}

/* =====================================================================
   Handy – eigener Aufbau
   ===================================================================== */
@media (max-width: 700px) {
  :root { --rand: 20px; --fs-m: 16px; --fs-l: 18px; --fs-xl: 20px; --fs-zahl: 36px; }
  .fuss { padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom)); }

  .kopf-in { min-height: 68px; gap: var(--s-3); }
  .kopf-logo img { width: 48px; }
  .kopf-aktion { gap: var(--s-2); }
  .kopf-aktion .knopf { display: none; }

  .seitenkopf { padding: var(--s-5) 0 var(--s-6); }
  .seitenkopf-niedrig.seitenkopf-weg { padding: var(--s-7) 0 var(--s-6); }
  .abschnitt.abschnitt-wege { padding: var(--s-6) 0 var(--s-7); }
  .breadcrumb { margin-bottom: var(--s-4); }
  .seitenkopf h1 span { margin-top: var(--s-3); }
  .hero-raster { gap: var(--s-6); padding-top: var(--s-6); padding-bottom: var(--s-6); }
  .hero .lead { margin-top: var(--s-4); }
  .inhaber { margin-top: var(--s-5); padding-top: var(--s-4); }
  .antwort { margin-top: var(--s-3); font-size: var(--fs-m); line-height: 1.55; }
  .hero .knoepfe, .seitenkopf .knoepfe { display: none; }  /* die feste Leiste unten trägt die Handlung (Entwurf K9) */
  .knoepfe { flex-direction: column; gap: var(--s-2); margin-top: var(--s-5); }
  .knoepfe .knopf { width: 100%; min-height: 52px; }

  /* Politur 26.09.2026: Belege am Handy kompakter, damit der Rechner früher kommt */
  .belege { display: block; margin-top: var(--s-5); }
  .belege caption { display: none; }
  .belege thead { display: none; }
  .belege tbody, .belege tr { display: block; }
  .belege td, .belege td + td { display: flex; align-items: center; padding: var(--s-2) 0; border-left: 0; font-size: var(--fs-s); }
  .belege-leistung td { white-space: normal; }
  .belege td::before { content: attr(data-label); flex: none; width: 96px; font-size: var(--fs-s); font-weight: 400; color: var(--text-2); }

  .hero .belege td::before, .seitenkopf .belege td::before { color: var(--auf-dunkel-leise); }

  .rechner-kopf { padding: var(--s-4) var(--s-4) var(--s-4); }
  .rechner-kopf h2 { font-size: var(--fs-xl); }
  .qc-top { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "count back" "bar bar"; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); }
  .qc-progress { display: contents; }
  .qc-progress-count { grid-area: count; }
  .qc-back { grid-area: back; }
  .qc-progress-track { grid-area: bar; flex: 0 0 4px; height: 4px; min-width: 0; }
  .qc-stage { padding: var(--s-4) var(--s-4) var(--s-5); }
  .qc-stage:not([data-gefuellt]) { min-height: 380px; }
  .qc-form { grid-template-columns: 1fr; }
  .qc-grid { grid-template-columns: 1fr; }
  .qc-fuss { flex-direction: column-reverse; align-items: stretch; gap: var(--s-2); }
  .qc-fuss .qc-next { width: 100%; }
  .qc-fuss .qc-zurueck { align-self: center; }
  .qc-fuss > span { display: none; }
  .qc-result-actions { grid-template-columns: 1fr; }

  .abschnitt { padding: var(--s-7) 0; }
  .kopf-gross { margin-bottom: var(--s-5); }
  .kopf-gross p { font-size: var(--fs-m); margin-top: var(--s-3); }
  .hinweiszeile { flex-direction: column; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-s); }
  .zwischen { font-size: var(--fs-2xl); margin-top: var(--s-6); }

  /* Leistungsverzeichnis als gestapelte Zeilen (Stufe 4: ohne Querrollen) */
  .lv, .lv tbody, .lv tr, .lv tbody th, .lv tbody td { display: block; width: 100%; }
  .lv thead { display: none; }
  .lv tbody tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--linie-stark); }
  .lv tbody th, .lv tbody td { padding: var(--s-2) 0; }
  .lv-bereich-in { gap: var(--s-4); }
  .lv-bereich-in img { width: 96px; }
  .lv-umfang { font-size: var(--fs-m); hyphens: manual; overflow-wrap: anywhere; }
  .lv td.lv-preis { display: flex; align-items: baseline; gap: var(--s-2); text-align: left; white-space: normal; }
  .lv td.lv-preis b, .lv td.lv-preis span { display: inline; margin-top: 0; }
  .lv td.lv-preis b { white-space: nowrap; }
  .saison { flex-direction: column; margin-bottom: var(--s-6); }

  .preise, .preise tbody { display: block; }
  .preise thead { display: none; }
  .preise tbody tr { display: grid; grid-template-columns: 1fr 1fr; padding: var(--s-4) 0; }
  .preise tbody th, .preise tbody td { display: block; padding: 0; width: auto; }
  .preise tbody tr > * + * { border-left: 0; }
  .preise tbody th { grid-column: 1 / -1; margin-bottom: var(--s-2); }
  .preise .preis-zelle { text-align: left; }
  .preise .preis-zelle, .preise .einheit-zelle { width: auto; }
  .preise td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); margin-bottom: var(--s-1); }

  .paare, .paare-drei { grid-template-columns: 1fr; }
  .fotoreihe { grid-template-columns: 1fr; }
  .paare { gap: var(--s-6); }
  .paar-unter { flex-direction: column; gap: 2px; }

  .ablauf li { grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-1) var(--s-3); }
  .ablauf li p { grid-column: 2; }
  .streifen-person img { width: 56px; height: 56px; }
  .streifen-handlung { flex-direction: column; align-items: stretch; }
  .streifen-handlung .knopf { width: 100%; }
  .streifen-handlung .textlink { align-self: center; }

  .bew-note { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-5); align-items: center; padding: var(--s-5) 0; }
  .note { grid-row: span 2; }
  .bew-note .sterne { margin-top: 0; }
  .bew-quelle { margin-top: var(--s-2); font-size: var(--fs-s); }
  .bew-links { grid-column: 1 / -1; margin-top: var(--s-5); }
  .bew-kompakt .bew-note { display: block; padding: 0; }
  .bew-kompakt .sterne { margin-top: var(--s-2); }
  .zitate { grid-template-columns: 1fr; gap: var(--s-5); }
  .bew-spalten { grid-template-columns: 1fr; }
  .bew, .bew:last-child { padding: var(--s-5) 0; border-right: 0; border-bottom: 1px solid var(--linie); }
  .bew blockquote { font-size: var(--fs-m); }

  .ueber-raster { grid-template-columns: 1fr; gap: var(--s-6); }
  .ueber-bild { max-width: 240px; }
  .werte, .werte tbody, .werte tr { display: block; }
  .werte caption { display: block; width: 100%; }
  .werte th, .werte td { display: block; width: auto; padding: var(--s-3) 0 0; border: 0; }
  .werte td { padding: 2px 0 var(--s-3); border-bottom: 1px solid var(--linie); }

  .kontakt-raster { gap: var(--s-7); }
  .anfrage-raster { gap: var(--s-7); }
  .formular { grid-template-columns: 1fr; gap: var(--s-4); }
  .formular > .feld, .formular > .feld-halb { grid-column: 1 / -1; }
  .formular-fuss { flex-direction: column; align-items: stretch; }
  .formular-fuss .knopf { width: 100%; }
  .direkt:not(.direkt-kompakt) dl > div { grid-template-columns: 1fr; gap: 2px; padding: var(--s-2) 0; }
  .direkt-kompakt dl > div { padding: 0; }

  .leistung-teile { grid-template-columns: 1fr; }
  .leistung-teil, .leistung-teil:nth-child(2n) { padding: var(--s-5) 0; border-left: 0; }
  .abschnitt-flaeche .leistung-teil, .abschnitt-flaeche .leistung-teil:nth-child(2n) { padding: var(--s-5) var(--s-5) var(--s-5); border-left: 1px solid var(--linie); }
  .vorteile { grid-template-columns: 1fr; }

  .leistungsliste > li { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-5) 0; }
  .leistungsliste img { max-width: 100%; }
  .leistungsliste h2 { font-size: var(--fs-2xl); }
  .ll-preis { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie); padding-top: var(--s-4); }

  .projekt { padding: var(--s-5) 0; }
  .projekt-kopf { grid-template-columns: 1fr; grid-template-rows: none; row-gap: var(--s-2); }
  .projekt-titel, .projekt-text { grid-column: 1; grid-row: auto; }
  .projekt-bilder { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .gkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gkarten .gcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .gkarten .gcard:last-child:nth-child(odd) img { aspect-ratio: 4 / 3; }
  .lb-nav { top: auto; bottom: 16px; margin-top: 0; }

  .akt-paar { grid-template-columns: 1fr; }
  .akt-titel { font-size: var(--fs-2xl); }

  .wege { grid-template-columns: 1fr; }
  .wege li + li { border-left: 0; }
  .wege li + li a, .wege a { padding: var(--s-4) 0; }

  .fuss-raster { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); padding: var(--s-7) 0 var(--s-6); }
  .fuss li a { display: inline-block; padding: var(--s-2) 0; }
  .fuss li + li { margin-top: 2px; }
  .fuss address .zeile { display: flex; align-items: center; min-height: 44px; line-height: 1.4; }
  .fuss-unten { flex-direction: column; padding-bottom: var(--s-5); }
  .fuss-unten a { display: inline-block; padding: var(--s-2) 0; }

  .leiste-unten {
    display: grid; grid-template-columns: 1fr 1fr 1.3fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--weiss); border-top: 1px solid var(--linie-stark);
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .leiste-unten a { display: flex; align-items: center; justify-content: center; min-height: 56px; font-size: var(--fs-s); font-weight: 600; color: var(--navy-dunkel); }
  .leiste-unten a + a { border-left: 1px solid var(--linie); }
  .leiste-unten .gold { background: var(--gold); color: var(--navy-dunkel); border-left: 0; }
  @media (hover: hover) and (pointer: fine) { .leiste-unten .gold:hover { background: var(--gold-tief); } }
  /* Abnahme 1: Auf der Seite, auf der man schon ist (Rechner im Bild), ist der Leistenknopf Navy,
     damit Gold nur an einer Haupthandlung je Ansicht steht. */
  .leiste-unten .gold.aktuell { background: var(--navy); color: var(--weiss); }
  @media (hover: hover) and (pointer: fine) { .leiste-unten .gold.aktuell:hover { background: var(--navy-dunkel); } }
}

/* Politur 26.09.2026: Vorher/Nachher bleibt auch bei 360 px nebeneinander –
   gestapelt ging der Vergleich verloren und die Seite wurde doppelt so lang. */
@media (max-width: 320px) {
  .paar-bilder { grid-template-columns: 1fr; }
}
@media (max-width: 340px) {
  .kopf-name small { display: none; }
}
/* Abnahme 2: zweispaltig bleibt der Fuß bis 320 px, erst darunter eine Spalte */
@media (max-width: 319px) {
  .fuss-raster { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .gkarten { grid-template-columns: 1fr 1fr; }
  .qc-grid { grid-template-columns: 1fr; }
}

/* Bewegung nur, wenn gewünscht – es gibt ohnehin kaum welche */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .kopf-aktion, .menue, .leiste-unten, .fuss-raster, .rechner, .dialog { display: none !important; }
  body { padding-bottom: 0; }
}

@media (max-width: 760px) { h1, h2, h3 { overflow-wrap: break-word; hyphens: manual; } h1 { text-wrap: pretty; } .seitenkopf h1 { text-wrap: balance; } }

/* ---------- Stufe 5: Leistungsseiten und Leistungsübersicht (Entwurf leistung.html) ---------- */
/* Richtpreise: ruhige Tabelle, Kopflinie 2 px Navy, Preis in Archivo 650 mit Tabellenziffern */
.preise-ruhig { border-collapse: collapse; }
.preise-ruhig caption { text-align: left; }
.preise-ruhig thead th {
  background: transparent; color: var(--text-2); text-align: left; padding: var(--s-3) 0;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border-top: 2px solid var(--navy); border-bottom: 1px solid var(--linie-stark);
}
.preise-ruhig thead th.p { text-align: right; padding-left: var(--s-5); font-size: var(--fs-xs); font-weight: 600; font-stretch: 100%; color: var(--text-2); }
.preise-ruhig thead th.e { padding-left: var(--s-5); font-size: var(--fs-xs); }
.preise-ruhig tbody tr { background: transparent; border-bottom: 1px solid var(--linie); }
.preise-ruhig tbody tr > * + * { border-left: 0; }
.preise-ruhig tbody th, .preise-ruhig tbody td { padding: var(--s-4) 0; border: 0; vertical-align: baseline; text-align: left; font-weight: 400; }
.preise-ruhig tbody th { padding-right: var(--s-5); font-size: var(--fs-m); font-weight: 600; color: var(--navy-dunkel); }
.preise-ruhig tbody th > span { display: block; margin-top: 2px; font-size: var(--fs-s); font-weight: 400; color: var(--text-2); }
.preise-ruhig .p { padding-left: var(--s-5); text-align: right; white-space: nowrap; font-size: var(--fs-xl); font-weight: 650; font-stretch: 94%; color: var(--navy-dunkel); }
.preise-ruhig .e { width: 1%; padding-left: var(--s-5); white-space: nowrap; font-size: var(--fs-s); color: var(--text-2); }
/* Lange Einheiten („je Einfahrt und Saison, bei Bedarf“) dürfen umbrechen, statt die Preisspalte zu sprengen. */
.preise-ruhig .e-lang { white-space: normal; min-width: 12em; }
@media (min-width: 1081px) { .preise-ruhig .e-lang { min-width: 16em; } }
.unter-tabelle { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-5); font-size: var(--fs-s); color: var(--text-2); }
.unter-tabelle p + p { margin-top: var(--s-1); }

/* Teilleistungen als Zeilen: Titel 4/12, Text und Liste 8/12 */
.teil-liste { border-top: 1px solid var(--linie-stark); }
.teil { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6); padding: var(--s-6) 0; border-bottom: 1px solid var(--linie); }
.teil h3 { font-size: var(--fs-xl); }
.teil p { max-width: var(--mass); }
.teil ul { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1) var(--s-5); max-width: var(--mass); margin-top: var(--s-4); }
.teil li { position: relative; padding-left: var(--s-4); font-size: var(--fs-s); color: var(--text-2); }
.teil li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: var(--text-2); }
/* Rechtshinweis: der einzige Ort mit 3-px-Linksrand (neben dem Rechner-Ergebnis) */
.recht { max-width: var(--mass); margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--navy); background: var(--flaeche); font-size: var(--fs-s); color: var(--text); }
.teil p + .recht { margin-top: var(--s-4); }

.fragen { max-width: 54rem; }
.ratgeber-text { max-width: 54rem; }
/* Abnahme 3: Ratgeber-Tabellen mit festen Spalten, damit die Preisspalte auf allen Seiten gleich steht */
.ratgeber-text .preise-ruhig { table-layout: fixed; width: 100%; }
.ratgeber-text .preise-ruhig thead th.p { width: 9.5rem; }
.ratgeber-text .preise-ruhig thead th.e { width: 11rem; }
@media (min-width: 1081px) { .ratgeber-text .preise-ruhig .e, .ratgeber-text .preise-ruhig .e-lang { width: auto; min-width: 0; white-space: normal; } }
.ratgeber-text > p { max-width: var(--mass); }

/* Zeilen „Weitere Leistungen“ unter dem Anfragestreifen: weiße Fläche, feste Beschriftungsspalte */
.abschnitt.verwandt-abschnitt { padding: var(--s-6) 0 var(--s-7); }
.verwandt { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s-1) var(--s-5); align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--linie); font-size: var(--fs-s); }
.verwandt:first-child { border-top: 1px solid var(--linie-stark); }
.verwandt-name { color: var(--text-2); }
.verwandt-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); }
/* Rechenzeile über der Preistabelle (Steinreinigung: Fläche und Preis je m²) */
.rechenzeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-6); padding: var(--s-4) var(--s-5); background: var(--flaeche); font-size: var(--fs-l); color: var(--navy-dunkel); }
.rechenzeile strong { font-size: var(--fs-xl); font-weight: 650; font-stretch: 94%; }
.rechenzeile .textlink { margin-left: auto; font-size: var(--fs-s); }
.unter-tabelle > div { max-width: 62ch; }
/* Genau ein Paar: wie die Paare der anderen Seiten im Hochformat 4:5, linksbündig und höchstens
   so breit wie ein Paar in zwei Spalten (Abnahme 1, 02.10.2026; vorher auf 3:2 beschnitten) */
.paare-einzeln { grid-template-columns: minmax(0, 640px); }
/* Abnahme 2: ein einzelnes Paar oder Foto links (7/12), der Galerieverweis rechts (5/12) */
.arbeiten-einzeln { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
.arbeiten-einzeln .paare-einzeln { grid-template-columns: minmax(0, 1fr); }
.arbeiten-einzeln .fotoreihe { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.arbeiten-seite { padding-top: var(--s-3); }
@media (max-width: 1080px) { .arbeiten-einzeln { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } }
.bild-unter { margin-top: var(--s-2); font-size: var(--fs-s); color: var(--text-2); }
/* Pausen-Banner auf Über uns (25.10.2026): Band in Marken-Navy, Bild groß und zentriert, feine helle Linie statt Schatten, kein Gold */
.abschnitt-navy { background: var(--navy); color: var(--weiss); }
.abschnitt-navy h2 { color: var(--weiss); }
.abschnitt-navy .kopf-gross p { color: var(--auf-dunkel); }
.pause-bild { max-width: 1100px; margin: var(--s-7) auto 0; border: 1px solid var(--linie-dunkel-stark); border-radius: var(--radius); overflow: hidden; }
.pause-bild img { width: 100%; height: auto; }
@media (max-width: 700px) { .pause-bild { margin-top: var(--s-5); } }

/* Abnahme 1: Ab 1080 steht die Überschrift über dem Text, die Liste bekommt die ganze Breite;
   unter 900 px einspaltig (die Listenpunkte brachen in 230-px-Spalten um) */
@media (max-width: 1080px) {
  .teil { grid-template-columns: 1fr; gap: var(--s-3); }
  .teil ul { max-width: none; }
}
@media (max-width: 900px) {
  .teil ul { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .teil { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-5) 0; }
  .teil ul { grid-template-columns: 1fr; }
  .teil p { hyphens: manual; }
  .preise-ruhig thead { display: none; }
  .preise-ruhig, .preise-ruhig tbody { display: block; }
  .preise-ruhig tbody tr { display: grid; grid-template-columns: 1fr auto; padding: var(--s-3) 0; border-bottom: 1px solid var(--linie); }
  .preise-ruhig tbody tr:first-child { border-top: 2px solid var(--navy); }
  .preise-ruhig tbody th, .preise-ruhig tbody td { display: block; padding: 0; width: auto; }
  .preise-ruhig tbody th { grid-column: 1 / -1; padding-right: 0; }
  .preise-ruhig .p { margin-top: var(--s-2); padding-left: 0; text-align: left; }
  .preise-ruhig .e { width: auto; max-width: 50vw; align-self: end; text-align: right; white-space: normal; }
  .preise-ruhig td[data-label]::before { content: none; }
  .unter-tabelle { flex-direction: column; align-items: flex-start; }
  .abschnitt.verwandt-abschnitt { padding-bottom: var(--s-8); }
  .verwandt { grid-template-columns: 1fr; }
  .rechenzeile .textlink { margin-left: 0; flex-basis: 100%; }
}

/* Leistungsübersicht: je Bereich eine Zeile, Foto 4/12 im Wechsel links und rechts */
.bereiche { border-top: 2px solid var(--navy); }
.bereich { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; padding: var(--s-7) 0; border-bottom: 1px solid var(--linie); }
.bereich-spiegel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.bereich-spiegel .bereich-bild { order: 2; }
/* Die Zeile ohne Richtpreis (Wurzelstock ziehen, 25.10.2026) spiegelt wie eine gerade Zeile, zählt aber nicht zu den fünf Preiszeilen */
.bereich-neu { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.bereich-neu .bereich-bild { order: 2; }
/* Winterdienst ohne Foto: der Saisonvertrag steht an der Stelle des Bildes, auf --flaeche (kein Ersatzfoto) */
.bereich-saison { padding: var(--s-6); background: var(--flaeche); border-top: 4px solid var(--navy-dunkel); }
.bereich-saison .saison-titel { font-size: var(--fs-xl); font-weight: 650; font-stretch: 94%; line-height: 1.2; color: var(--navy-dunkel); }
.bereich-saison .saison-preis { margin-top: var(--s-4); }
.bereich-text h2 + p { margin-top: var(--s-3); }
.bereich-bild img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 0; background: var(--flaeche); }
.bereich-text h2 { font-size: var(--fs-2xl); }
.bereich-text p { max-width: var(--mass); margin-top: var(--s-3); }
.bereich-preise { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; max-width: var(--mass); margin-top: var(--s-4); border-top: 1px solid var(--linie-stark); }
.bereich-preise li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; column-gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--linie); font-size: var(--fs-s); }
.bereich-preise small { display: block; font-size: var(--fs-xs); color: var(--text-2); }
.bereich-betrag { text-align: right; white-space: nowrap; font-size: var(--fs-m); font-weight: 650; font-stretch: 94%; font-variant-numeric: tabular-nums; color: var(--navy-dunkel); }
.bereich-einheit { min-width: 12rem; color: var(--text-2); }
.bereich-text .bereich-link { margin-top: var(--s-4); }
.hinweiszeile-unten { max-width: var(--mass); margin-top: var(--s-5); font-size: var(--fs-s); color: var(--text-2); }
@media (max-width: 1080px) {
  .bereich, .bereich-spiegel, .bereich-neu { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding: var(--s-6) 0; }
  .bereich-spiegel .bereich-bild, .bereich-neu .bereich-bild { order: 0; }
  /* Abnahme 2: flacheres Foto und Tabelle in voller Breite, gleiche rechte Kante */
  .bereich-bild img { aspect-ratio: 3 / 2; max-height: 420px; }
  .bereich-preise { max-width: none; }
}
@media (max-width: 560px) {
  .bereich-preise { display: block; }
  .bereich-preise li { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-2); }
  .bereich-preise li > span:first-child { grid-column: 1 / -1; }
  .bereich-betrag { text-align: left; }
  .bereich-einheit { min-width: 0; }
}

/* ---------- Stufe 6: übrige Seiten (Plan §4) ---------- */
/* Niedriger Seitenkopf ohne Foto (Einsatzgebiet, Hausverwaltungen, Aktuelles, Ratgeber, Rechtliches, 404, Danke) */
.seitenkopf-niedrig { padding: var(--s-6) 0 var(--s-7); }
.seitenkopf-niedrig .breadcrumb { margin-bottom: var(--s-4); }
.seitenkopf-niedrig .antwort { max-width: 46em; margin-top: var(--s-4); font-size: var(--fs-m); }

/* Einsatzgebiet: zwei Ortslisten und die Lageskizze */
.gebiet-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
.ortslisten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.ortsliste h3 { padding-top: var(--s-3); border-top: 2px solid var(--navy); font-size: var(--fs-s); font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--text-2); }
.ortsliste li { padding: var(--s-3) 0; border-bottom: 1px solid var(--linie); font-size: var(--fs-m); scroll-margin-top: 96px; }
.ortsliste li:target { background: var(--flaeche); font-weight: 600; }
.gebiet-sitz { max-width: var(--mass); margin-top: var(--s-5); font-size: var(--fs-s); color: var(--text-2); }
.lageskizze { margin: 0; }
.umriss { display: block; width: 100%; max-width: 420px; height: auto; }
.umriss-linie { fill: var(--flaeche); stroke: var(--navy); stroke-width: 1.5; stroke-linejoin: round; }
.umriss-punkt { fill: var(--navy); stroke: var(--navy); stroke-width: 1.5; }
.umriss-berg { fill: var(--weiss); }
.umriss-sitz { fill: var(--navy-dunkel); stroke: var(--navy-dunkel); stroke-width: 3; }
.umriss-name { font-family: var(--schrift); font-size: var(--fs-xs); fill: var(--text); }
.umriss-name-sitz { font-size: var(--fs-s); font-weight: 650; fill: var(--navy-dunkel); }
.lageskizze figcaption { max-width: 46ch; margin-top: var(--s-3); font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); }
.preise-ruhig tbody th a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .preise-ruhig tbody th a:hover { color: var(--navy-dunkel); text-decoration-thickness: 2px; } }
.teil .auftraege { display: block; max-width: none; margin-top: 0; border-top: 0; }
.teil .auftraege li { padding-left: 0; font-size: var(--fs-m); color: inherit; }
.teil .auftraege li::before { content: none; }
.teil .auftraege li:first-child { padding-top: 0; }
@media (max-width: 1080px) {
  .gebiet-raster { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
}
/* Abnahme 2: die Skizze steht am Tablet mittig und breiter, nicht allein in der linken Hälfte */
@media (min-width: 761px) and (max-width: 1080px) {
  .lageskizze { max-width: 560px; margin-inline: auto; }
  .umriss { max-width: 560px; }
}

/* Für Hausverwaltungen: Foto aus dem Hochformat, Ausschnitt auf Haus und Weg */
.seitenkopf-bild.verwalter img { object-position: 50% 55%; }

/* Aktuelles: Beiträge als Zeilen (Foto 3:2, Datum, Titel, ein Satz) */
.akt-liste { border-top: 2px solid var(--navy); }
.akt-beitrag { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6); align-items: start; padding: var(--s-6) 0; border-bottom: 1px solid var(--linie); }
.akt-beitrag.akt-ohne-bild { grid-template-columns: minmax(0, 1fr); }
.akt-foto { margin: 0; }
.akt-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; background: var(--flaeche); }
.akt-inhalt .akt-zeile { margin-top: 0; }
.akt-inhalt .akt-titel { margin-top: var(--s-2); font-size: var(--fs-2xl); }
.akt-satz { max-width: var(--mass); margin-top: var(--s-3); color: var(--text); }
.akt-partner { margin-top: var(--s-2); font-size: var(--fs-s); color: var(--text-2); }
.akt-seiten { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); font-size: var(--fs-s); color: var(--text-2); }
.akt-seiten span { grid-column: 2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.akt-seiten [rel="prev"] { grid-column: 1; grid-row: 1; justify-self: start; }
.akt-seiten [rel="next"] { grid-column: 3; grid-row: 1; justify-self: end; }
@media (max-width: 480px) {
  .akt-seiten { grid-template-columns: 1fr 1fr; }
  .akt-seiten span { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .akt-seiten [rel="prev"] { grid-column: 1; grid-row: 2; }
  .akt-seiten [rel="next"] { grid-column: 2; grid-row: 2; }
}
.akt-hinweis { max-width: var(--mass); margin-top: var(--s-5); font-size: var(--fs-xs); color: var(--text-2); }
@media (max-width: 760px) {
  .akt-beitrag { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5) 0; }
}
/* Einzelner Beitrag: kein Zeilenraster, Text höchstens 66 Zeichen, Bilder darunter bis 8/12 der Breite, alles an der linken Kante der H1 */
.akt-beitrag.akt-einzeln { display: block; padding: 0; border-bottom: 0; }
.akt-einzeln .akt-text { margin-top: 0; font-size: var(--fs-m); }
.akt-einzeln .akt-zitat { margin-top: 0; }
.akt-einzeln .akt-bilder, .akt-einzeln .akt-paar { max-width: 52.5rem; margin-top: var(--s-6); }
/* Abnahme 1: Die Vorher-Nachher-Bilder füllen ihre halbe Spalte (Etikett auf dem Bild, unten links);
   die weiteren Fotos sind höchstens so breit wie ein Paarbild, nicht breiter. */
/* Abnahme 2: zwei Spalten, das erste Foto über die volle Breite im Format 3:2 */
.akt-einzeln .akt-bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.akt-einzeln .akt-bild:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.akt-einzeln .akt-paar .akt-bilder { max-width: none; margin-top: 0; grid-template-columns: minmax(0, 1fr); }
.akt-einzeln .akt-paar .akt-bild { aspect-ratio: 4 / 3; }
@media (max-width: 760px) {
  .akt-einzeln .akt-bilder { grid-template-columns: minmax(0, 1fr); }
}

/* Galerie: Kopfbild aus dem Hochformat, Ausschnitt auf den Rasen */
.seitenkopf-raster.kopf-oben { align-items: start; }
.galerie-kopf img { object-position: 50% 72%; }

/* Über uns: Überschrift 4/12, Text oder Faktenliste 8/12 */
.ueber-zeile { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6); align-items: start; }
.ueber-zeile .kopf-klein { margin-bottom: 0; }
.fakten.fakten-breit { max-width: var(--mass); margin: 0; }
@media (max-width: 1080px) {
  .ueber-zeile { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}

/* Kontakt: Porträt im Kopf, Schnellknöpfe nur am Handy, Karte als ruhige Fläche */
.kontakt-kopf { grid-template-columns: minmax(0, 1fr) 240px; align-items: start; }
.kontakt-portraet img { aspect-ratio: 3 / 4; object-position: 50% 20%; }
.kontakt-schnell { display: none; }
.ueber-zeile > .kopf-klein + .fliess { margin-top: 0; }
.karte-platz { place-items: stretch; }
.karte-hinweis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5) var(--s-7); max-width: none; width: 100%; padding: var(--s-6); text-align: left; }
.karte-angaben { flex: 1 1 22em; max-width: 36em; }
.karte-hinweis .karte-knopf { margin-top: 0; flex: 0 0 auto; }
.karte-fuss { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-s); }
.direkt .karte-hinweis { padding: var(--s-5); }
@media (max-width: 1080px) {
  .kontakt-kopf { grid-template-columns: minmax(0, 1fr) 120px; align-items: start; }
}
@media (max-width: 700px) {
  .kontakt-schnell { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
  .kontakt-schnell .knopf { width: 100%; }
  .karte-hinweis { padding: var(--s-5); }
  .karte-hinweis .karte-knopf { width: 100%; }
}

/* Rechtstexte nur gesetzt: Zeilenlänge höchstens 72 Zeichen, kein Fettdruck im Fließtext */
.wrap.schmal.rechtstext { max-width: calc(var(--breite) + 2 * var(--rand)); }
.rechtstext > * { max-width: 72ch; }
.rechtstext > p, .rechtstext > ul, .rechtstext > ol, .rechtstext > address { max-width: var(--mass); }
.rechtstext > h2:first-child { margin-top: 0; }
.rechtstext p strong, .rechtstext li strong { font-weight: 400; }

.kontakt-ablauf { margin-top: var(--s-5); max-width: 46em; font-size: var(--fs-s); color: var(--text-2); }
.kontakt-preis { margin: 0 0 var(--s-5); max-width: 46em; font-size: var(--fs-s); color: var(--text-2); }

/* Galerie am PC: Einzelfotos im Viererraster, Paare zu zweit nebeneinander (13.10.2026) */
@media (min-width: 701px) {
  .gkarten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1); }
}
@media (max-width: 700px) {
  .projekt-paare { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
}
@media (max-width: 700px) {
  .gkarten .gcard:only-child img { aspect-ratio: 3 / 2; }
}

/* Brotkrume im Ratgeber-Artikel am Handy: nur „Home › Ratgeber“, der Titel steht schon als Überschrift darunter */
.breadcrumb li + li::before { white-space: nowrap; }
/* Abnahme 1: Das Trennzeichen bleibt am folgenden Glied, auch wenn das Glied umbricht */
.breadcrumb li { display: flex; align-items: baseline; min-width: 0; }
.breadcrumb li + li::before { flex: none; }
@media (max-width: 760px) {
  .breadcrumb-kurz [aria-current] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Kontakt am Handy: Einleitung in voller Breite, das Porträt entfällt (Abnahme 1, 02.10.2026) */
@media (max-width: 700px) {
  .kontakt-kopf { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .kontakt-portraet { display: none; }
  .direkt-ohne-schnell .direkt-schnell { display: none; }
}

/* =====================================================================
   Abnahme 1 (02.10.2026): Nachbesserungen aus der Abnahme
   ===================================================================== */

/* Preistabellen am Tablet (761–1080 px): die Einheit steht unter dem Preis, die Beschreibung
   bekommt die frei werdende Breite (Einsatzgebiet, Leistungsseiten, Ratgeber) */
@media (min-width: 761px) and (max-width: 1080px) {
  .preise-ruhig thead { display: none; }
  .preise-ruhig, .preise-ruhig tbody { display: block; }
  .preise-ruhig tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, 14rem); column-gap: var(--s-5); padding: var(--s-3) 0; border-bottom: 1px solid var(--linie); }
  .preise-ruhig tbody tr:first-child { border-top: 2px solid var(--navy); }
  .preise-ruhig tbody th, .preise-ruhig tbody td { display: block; padding: 0; width: auto; }
  .preise-ruhig tbody th { grid-column: 1; grid-row: 1 / span 2; }
  .preise-ruhig .p { grid-column: 2; grid-row: 1; padding-left: 0; text-align: right; }
  .preise-ruhig .e { grid-column: 2; grid-row: 2; width: auto; align-self: start; padding-left: 0; text-align: right; white-space: nowrap; }
  .preise-ruhig .e.e-lang { min-width: 0; white-space: normal; }
}

/* Gliederung der Gesamttabelle im Ratgeber: Zwischenkopf je Leistungsbereich */
.preise-ruhig tbody th.gruppe { padding: var(--s-6) 0 var(--s-2); font-size: var(--fs-l); font-weight: 650; font-stretch: 94%; color: var(--navy-dunkel); border-bottom: 1px solid var(--linie-stark); }
.preise-ruhig tbody tr:has(.gruppe) { border-bottom: 0; }
@media (max-width: 760px) {
  .preise-ruhig tbody tr:has(.gruppe) { display: block; padding-bottom: 0; }
  .preise-ruhig tbody tr:has(.gruppe):first-child { border-top: 0; }
  .preise-ruhig tbody th.gruppe { padding-top: var(--s-5); }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .preise-ruhig tbody tr:has(.gruppe) { display: block; }
  .preise-ruhig tbody tr:has(.gruppe):first-child { border-top: 0; }
}

/* Ratgeber-Artikel: eine Satzkante für Text, Tabelle, Fragen und Verweise; ab 1081 px rechts eine
   Seitenspalte (Sprungliste, Richtwert) */
.ratgeber-raster { display: grid; grid-template-columns: minmax(0, 44rem) minmax(0, 20rem); justify-content: space-between; gap: var(--s-8); align-items: start; }
.ratgeber-raster > .ratgeber-spalte, .ratgeber-raster > .ratgeber-text { min-width: 0; }
.ratgeber-text { max-width: none; }
.ratgeber-text > p, .ratgeber-text > ul, .ratgeber-text > h2 { max-width: var(--mass); }
/* GE47 (03.10.2026): „Stand“ am Ende des Artikels, Abstand auch nach Tabelle und Hinweiszeile */
.ratgeber-text > p.klein:last-child { margin-top: var(--s-6); }
.ratgeber-spalte .fragen { max-width: none; }
.ratgeber-spalte .kopf-klein { margin-bottom: var(--s-5); }
/* Abnahme 3: nur der Richtwert-Kasten bleibt stehen (ganze Spalte war höher als das Fenster) */
.ratgeber-seite { align-self: stretch; display: flex; flex-direction: column; gap: var(--s-7); }
.ratgeber-seite .seite-titel { font-size: var(--fs-s); font-weight: 600; color: var(--text-2); }
.sprungliste { margin-top: var(--s-3); border-top: 1px solid var(--navy-dunkel); }
.sprungliste li { border-bottom: 1px solid var(--linie); }
.sprungliste a { display: block; padding: var(--s-3) 0; font-size: var(--fs-s); line-height: 1.4; color: var(--navy-dunkel); }
@media (hover: hover) and (pointer: fine) { .sprungliste a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; } }
.richtwert { position: sticky; top: var(--s-5); padding: var(--s-5); background: var(--weiss); border: 1px solid var(--linie-stark); border-top: 4px solid var(--navy); }
.richtwert-was { margin-top: var(--s-2); font-size: var(--fs-m); font-weight: 600; line-height: 1.3; color: var(--navy-dunkel); }
.richtwert-zahl { margin-top: var(--s-2); font-size: var(--fs-zahl); font-weight: 650; font-stretch: 94%; line-height: 1.05; letter-spacing: -0.01em; color: var(--navy-dunkel); white-space: nowrap; }
.richtwert-einheit { margin-top: var(--s-2); font-size: var(--fs-s); color: var(--text-2); }
.richtwert .knopf { width: 100%; margin-top: var(--s-5); }
@media (max-width: 1080px) {
  .ratgeber-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ratgeber-seite { display: none; }
}
.verweise { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.verweise li { max-width: var(--mass); }
.verweis-leistung { padding-bottom: var(--s-3); border-bottom: 1px solid var(--linie); }
.verweise-hub { margin-top: var(--s-6); }

/* Abnahme 2: Hub-Fließtext in Satzbreite wie die Artikel */
.ratgeber-text-hub { max-width: var(--mass); }
/* Abnahme 2: „Weitere Ratgeber“ in zwei beschrifteten Gruppen, Linien über die volle Spaltenbreite */
.verweisgruppe + .verweisgruppe { margin-top: var(--s-7); }
.verweisgruppe .seite-titel { font-size: var(--fs-s); font-weight: 600; color: var(--text-2); }
.verweisgruppe .kopf-klein { margin-bottom: var(--s-3); }
.verweisliste { margin-top: var(--s-3); border-top: 1px solid var(--navy-dunkel); }
.verweisgruppe .kopf-klein + .verweisliste { margin-top: 0; }
.verweisliste li { padding: var(--s-3) 0; border-bottom: 1px solid var(--linie); }
/* Abnahme 2: Ratgeber-Kopf am schmalen Handy etwas kleiner, damit der Inhalt im ersten Bildschirm beginnt */
@media (max-width: 380px) {
  .seitenkopf-niedrig h1 { font-size: var(--fs-3xl); }
}

/* ---------- Abnahme 3 (02.10.2026) ---------- */
/* Feste Leiste unten (nur am Handy): Fokus und Sprungziele verschwinden nicht darunter (WCAG 2.4.11) */
@media (max-width: 700px) {
  html { scroll-padding-bottom: calc(56px + var(--s-4)); }
  .umriss-name { font-size: var(--fs-s); }
  .umriss-name-sitz { font-size: var(--fs-l); }
  .breadcrumb { flex-wrap: nowrap; }
  .breadcrumb li:last-child { min-width: 0; }
  .breadcrumb li[aria-current] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 380px) {
  .fuss-raster { grid-template-columns: minmax(0, 1fr); }
}

/* Leistungsverzeichnis der Startseite am Tablet: dieselbe gestapelte Zeile wie am Handy */
@media (min-width: 701px) and (max-width: 900px) {
  .lv, .lv tbody, .lv tr, .lv tbody th, .lv tbody td { display: block; width: 100%; }
  .lv thead { display: none; }
  .lv tbody tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--linie-stark); }
  .lv tbody th, .lv tbody td { padding: var(--s-2) 0; }
  .lv-bereich-in img { width: 132px; }
  .lv td.lv-preis { display: flex; align-items: baseline; gap: var(--s-2); text-align: left; white-space: normal; }
  .lv td.lv-preis b, .lv td.lv-preis span { display: inline; margin-top: 0; }
  .lv td.lv-preis b { white-space: nowrap; }
}
/* Bildunterschrift und Leistungslink unter den Paaren der Startseite untereinander */
@media (max-width: 1000px) {
  .paar-unter { flex-direction: column; gap: 2px; }
}

/* Preiszeilen: auf Detailseiten dasselbe Muster wie auf der Übersicht – Name, darunter Preis und
   Einheit in einer Zeile */
@media (max-width: 760px) {
  .preise-ruhig tbody tr { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-2); align-items: baseline; }
  .preise-ruhig tbody th { font-size: var(--fs-s); font-weight: 400; }
  .preise-ruhig tbody th > span { margin-top: 2px; }
  .preise-ruhig .p { margin-top: var(--s-2); font-size: var(--fs-m); font-variant-numeric: tabular-nums; }
  .preise-ruhig .e { max-width: none; align-self: baseline; margin-top: var(--s-2); text-align: left; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .preise-ruhig tbody tr { grid-template-rows: auto 1fr; }
}

/* Einzelnes Paar in „Aus unseren Aufträgen“: Bilder links, Beschriftung rechts */
.arbeiten-seite { padding-top: 0; align-self: end; }
.arbeiten-seite .seite-titel { font-size: var(--fs-s); font-weight: 600; color: var(--text-2); }
.arbeiten-seite h3 { margin-top: var(--s-2); font-size: var(--fs-xl); }
.arbeiten-seite p + p, .arbeiten-seite h3 + p { margin-top: var(--s-2); color: var(--text-2); }
.arbeiten-einzeln .paar-unter { display: none; }

/* Einsatzgebiet: keine zweite Linie unter dem letzten Eintrag, Aufträge in einer Reihe */
.teil .auftraege li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Beitrag: bei gerader Bildzahl steht das letzte Foto nicht allein in der linken Spalte */
.akt-einzeln .akt-bild:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 3 / 2; }

/* Über uns und Verwalter am Tablet: Kopfbild über die volle Satzbreite wie auf den übrigen Seiten */
@media (min-width: 701px) and (max-width: 1080px) {
  .seitenkopf-bild.hochformat { max-width: none; }
  .seitenkopf-bild.hochformat img { aspect-ratio: 4 / 3; object-position: 50% 25%; }
}

/* Ratgeber-Hub: Fließtext im Zweispaltenraster wie die Liste darüber */
.teil-liste-hub .teil h2 { font-size: var(--fs-xl); }
.verweisgruppe + .verweisgruppe { margin-top: var(--s-7); }

/* =====================================================================
   Nachbesserung nach der Abnahme (02.10.2026, Mängelliste Live-Prüfung)
   ===================================================================== */
/* 404: Die Kacheln sind Links und sehen jetzt wie die übrigen Textlinks aus. */
.wege strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--navy); }
@media (hover: hover) and (pointer: fine) { .wege a:hover strong { text-decoration-thickness: 2px; } }

/* Rechner: einheitlich hohe Leistungskacheln am PC, Text mittig, Punkt mittig. */
@media (min-width: 701px) {
  .qc-tile-service { min-height: 64px; justify-content: center; }
  .qc-tile-service:not(.qc-tile-multi)::before { top: 50%; margin-top: -9px; }
}

/* Kontakt: Das Porträt endet etwa auf der Höhe des Textes. */
@media (min-width: 1081px) {
  .kontakt-portraet img { aspect-ratio: 1 / 1.1; }
}

/* Brotkrume: Links und Trenner schrumpfen nie, nur das letzte Glied darf kürzen. */
.breadcrumb li:not(:last-child) { flex-shrink: 0; }

/* Winterdienst: Saisonvertrag als Vertragskarte, oben bündig zur Überschrift; Preis groß. */
.seitenkopf-raster.mit-foto .saison-kasten { align-self: start; }
.saison-kasten .saison-preis { margin-top: var(--s-4); font-size: var(--fs-m); }
.saison-kasten .saison-preis strong { display: block; font-size: var(--fs-3xl); font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--weiss); }
.saison-umfang { margin-top: var(--s-4); border-top: 1px solid var(--linie-dunkel); }
.saison-umfang li { padding: var(--s-2) 0; border-bottom: 1px solid var(--linie-dunkel); color: var(--auf-dunkel); }
.bereich-saison .saison-preis { margin-top: var(--s-4); font-size: var(--fs-m); color: var(--text-2); }
.bereich-saison .saison-preis strong { display: block; font-size: var(--fs-3xl); font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--navy-dunkel); }

/* Richtpreistabelle der Leistungsseiten: feste Spalten, damit die rechte Kante des Preises auf
   allen fünf Seiten an derselben Stelle steht (Mängelliste 02.10.2026). */
@media (min-width: 1081px) {
  #preise .preise-ruhig { table-layout: fixed; width: 100%; }
  #preise .preise-ruhig col.spalte-p { width: 180px; }
  #preise .preise-ruhig col.spalte-e { width: 230px; }
  #preise .preise-ruhig .e, #preise .preise-ruhig .e-lang { width: auto; min-width: 0; white-space: normal; }
}
/* Handy: Preis und Einheit in einer Zeile, die Einheit folgt dem Preis mit festem Abstand. */
@media (max-width: 760px) {
  .preise-ruhig tbody tr:not(:has(.gruppe)) { display: block; }
  .preise-ruhig tbody td.p, .preise-ruhig tbody td.e { display: inline; padding: 0; margin: 0; }
  .preise-ruhig tbody td.p { margin-top: 0; }
  .preise-ruhig tbody td.e { margin-left: .4em; text-align: left; max-width: none; white-space: normal; }
  .preise-ruhig tbody th { margin-bottom: var(--s-2); }
}

/* Einsatzgebiet: Lageskizze an der Oberkante der Überschrift, Legende in lesbarer Größe. */
.lageskizze figcaption { font-size: var(--fs-s); }
@media (min-width: 1081px) { .lageskizze .umriss { margin-top: calc(var(--s-5) * -1); } }
.umriss { max-width: 500px; }
.umriss-name { font-size: var(--fs-s); }
.umriss-name-sitz { font-size: var(--fs-l); }

/* Formular mit Objektfeld (Hausverwaltungen): durchgehend zwei Spalten, die Kanten springen nicht. */
@media (min-width: 701px) {
  .formular:has(#id_objekt) > .feld, .formular:has(#id_objekt) > .feld-halb { grid-column: span 3; }
  .formular:has(#id_objekt) > .feld-voll:has(#id_objekt) { grid-column: span 3; }
  .formular:has(#id_objekt) > .feld-voll:has(#id_message) { grid-column: 1 / -1; }
}

/* Fuß am Handy: Leistungen und Seiten untereinander; nebeneinander liefen die Zeilen versetzt,
   sobald ein Leistungsname umbrach (Mängelliste 02.10.2026). */
@media (max-width: 700px) {
  .fuss-raster { grid-template-columns: minmax(0, 1fr); }
}

/* Ratgeber (Mängelliste 02.10.2026) ------------------------------------------------------------ */
/* Schlussverweise: keine Dauer-Unterstreichung, Navy 600, Unterstreichung bei Hover und Fokus;
   „Zur Leistung“ ist eine einzelne Zeile ohne sichtbare Überschrift. */
.verweisliste a.textlink { text-decoration: none; }
.verweisliste a.textlink:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .verweisliste a.textlink:hover { text-decoration: underline; text-underline-offset: 4px; } }
.verweisgruppe-leistung .verweisliste { margin-top: 0; }
/* Preistabelle und Fließtext enden an derselben Kante; Überschriften brechen ausgeglichen. */
.ratgeber-text .preise-ruhig { max-width: var(--mass); }
.ratgeber-text h2 { text-wrap: balance; overflow-wrap: break-word; }
/* Handy: Leistungsname in der gestapelten Tabelle wie am PC fett und dunkel. */
@media (max-width: 760px) {
  .preise-ruhig tbody th { font-weight: 600; color: var(--text); }
  .preise-ruhig tbody th > span { font-weight: 400; color: var(--text-2); }
  /* Ratgeber-Kopf: kleinere Fragen-Überschrift und Lead, damit die erste Antwort im ersten Bildschirm sichtbar wird. */
  .seitenkopf-niedrig:has(.breadcrumb-kurz) h1 { font-size: var(--fs-3xl); line-height: 1.12; }
  .seitenkopf-niedrig:has(.breadcrumb-kurz) .antwort { font-size: var(--fs-s); line-height: 1.5; }
}

/* Leistungsseiten mit einem Paar: Text oben bündig neben dem Paar statt unten, die Kategoriezeile
   entfällt (Titel und Tätigkeit genügen). Mängelliste 02.10.2026. */
.arbeiten-seite { align-self: start; padding-top: var(--s-3); }
.arbeiten-seite h3 { margin-top: 0; }

/* Richtangebot am Handy: der Lead nennt nur Schätzung, Kosten und Antwortfrist; der Rest steht am PC. */
@media (max-width: 700px) { .nur-pc { display: none; } }
/* Überschriften enden an der Kante des Fließtextes (66ch bei 17 px ≈ 40ch bei 28 px). */
.ratgeber-text > h2 { max-width: 40ch; }

/* Informationsseite 3D-Druck (03.10.2026): Stand-Zeile im Kopf, Foto im Fließtext,
   ein ruhiger Kontaktsatz statt Anfragestreifen (die Seite verkauft nichts). */
.kopf-stand { margin-top: var(--s-5); font-size: var(--fs-s); color: var(--auf-dunkel-leise); }
.fliess-bild { max-width: 32rem; margin-top: var(--s-5); }
.fliess-bild img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; background: var(--flaeche); }
.fliess-bild figcaption { padding-top: var(--s-2); font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); }
.kontakt-satz { max-width: var(--mass); margin-top: var(--s-7); font-size: var(--fs-m); line-height: 1.6; }
.kontakt-satz a { text-decoration: underline; text-underline-offset: 3px; }