/* WM Gebäudereinigung · Variante B „Leistungsverzeichnis“ — Komponenten
   Setzt tokens.css voraus. Präfix wb-. Eckig, Haarlinien, Zahlen in Plex Mono.
   Responsiv über Container-Queries auf .wb-seite (nicht Viewport), damit dieselbe
   Vorlage in Astro-Layouts und in Mockups gleich umbricht. */

/* ---------- Grundlage ---------- */
.wb-seite { container: seite / inline-size; background: var(--weiss); color: var(--tinte); font-family: var(--font-text); font-size: 17px; line-height: 28px; -webkit-font-smoothing: antialiased; position: relative; }
.wb-seite *, .wb-seite *::before, .wb-seite *::after { box-sizing: border-box; }
.wb-seite img { display: block; max-width: 100%; }
.wb-seite p { margin: 0; }
.wb-seite a { color: var(--blau); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wb-seite a:hover { text-decoration-thickness: 2px; }
.wb-seite :focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.wb-nacht :focus-visible, .wb-kopf__anfrage:focus-visible { outline-color: var(--fokus-nacht); }
.wb-wrap { max-width: var(--container); margin: 0 auto; padding: 0 40px; }
.wb-abschnitt { padding: 72px 0; }
.wb-abschnitt--eis { background: var(--eis); }
.wb-nacht { background: var(--nacht); color: var(--weiss); }
.wb-nacht a { color: var(--weiss); }
.wb-trenner { border: 0; border-top: 1px solid var(--linie); margin: 0; }

/* ---------- Typografie (Klassen = Text-Styles aus tokens.json) ---------- */
.wb-display { font-family: var(--font-display); font-size: 64px; line-height: 66px; font-weight: 800; letter-spacing: -0.025em; margin: 0; }
.wb-h1 { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.wb-h2 { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.wb-h3 { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; margin: 0; }
.wb-zitat { font-family: var(--font-display); font-size: 34px; line-height: 44px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.wb-lead { font-size: 20px; line-height: 32px; }
.wb-klein { font-size: 15px; line-height: 24px; }
.wb-label { font-size: 15px; line-height: 20px; font-weight: 600; }
.wb-mono { font-family: var(--font-mono); font-size: 15px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.wb-mono-klein { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.wb-preis { font-family: var(--font-mono); font-size: 44px; line-height: 44px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wb-gedaempft { color: var(--grau); }
.wb-nacht .wb-gedaempft { color: var(--nebel); }

/* ---------- Abschnittsnummer: „01 — Leistungen und Preise“ ---------- */
.wb-nr { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau); margin-bottom: var(--space-5); }
.wb-nr::before { content: ""; width: 32px; height: var(--kante); background: var(--gold); flex: none; }
.wb-nacht .wb-nr { color: var(--nebel); }
.wb-kopfzeile { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: end; margin-bottom: 40px; }

/* ---------- Schaltflächen ---------- */
.wb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-5); font-family: var(--font-text); font-size: 16px; line-height: 20px; font-weight: 700; text-decoration: none !important; border: 2px solid transparent; border-radius: var(--radius-0); cursor: pointer; white-space: nowrap; }
.wb-btn svg { width: 20px; height: 20px; flex: none; }
.wb-btn--gold { background: var(--gold); color: var(--nacht) !important; }
.wb-btn--gold:hover { background: var(--gold-hell); }
.wb-btn--blau { background: var(--blau); color: var(--weiss) !important; }
.wb-btn--blau:hover { background: var(--nacht); }
.wb-btn--linie { background: transparent; color: var(--blau) !important; border-color: var(--blau); }
.wb-nacht .wb-btn--linie { color: var(--weiss) !important; border-color: var(--weiss); }
.wb-btn--voll { width: 100%; }
.wb-pfeillink { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; text-decoration: none !important; }
.wb-pfeillink svg { width: 18px; height: 18px; transition: transform .15s; }
.wb-pfeillink:hover svg { transform: translateX(3px); }

/* ---------- Telefon groß ---------- */
.wb-tel { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none !important; }
.wb-tel__icon { width: 52px; height: 52px; display: grid; place-items: center; border: 2px solid currentColor; flex: none; }
.wb-tel__icon svg { width: 22px; height: 22px; }
.wb-tel__nr { display: block; font-family: var(--font-mono); font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
.wb-tel__hinweis { display: block; font-size: 14px; line-height: 20px; color: var(--grau); }
.wb-nacht .wb-tel__hinweis { color: var(--nebel); }

/* ---------- Kopf: Servicezeile + Hauptzeile ---------- */
.wb-service { background: var(--nacht); color: var(--weiss); font-size: 14px; line-height: 20px; }
.wb-service .wb-wrap { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: var(--space-5); }
.wb-service a { color: var(--weiss); font-family: var(--font-mono); font-weight: 600; text-decoration: none; }
.wb-service__rechts { color: var(--nebel); }
.wb-kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.wb-kopf .wb-wrap { display: flex; align-items: stretch; min-height: 72px; padding-right: 0; }
.wb-kopf__logo { display: flex; align-items: center; margin-right: var(--space-7); }
.wb-kopf__logo img { height: 34px; width: auto; }
.wb-kopf__nav { display: flex; align-items: stretch; gap: var(--space-1); flex: 1; }
.wb-kopf__nav a { display: flex; align-items: center; gap: 6px; padding: 0 var(--space-3); color: var(--tinte); font-size: 16px; font-weight: 600; text-decoration: none; border-bottom: var(--kante) solid transparent; border-top: var(--kante) solid transparent; }
.wb-kopf__nav a:hover, .wb-kopf__nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.wb-kopf__nav svg { width: 16px; height: 16px; }
.wb-kopf__anfrage { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-6); background: var(--gold); color: var(--nacht) !important; font-weight: 700; font-size: 16px; text-decoration: none !important; }
.wb-kopf__anfrage:hover { background: var(--gold-hell); }
.wb-kopf__anfrage svg { width: 18px; height: 18px; }
.wb-kopf__menue { display: none; align-items: center; gap: var(--space-2); background: none; border: 0; border-left: 1px solid var(--linie); padding: 0 var(--space-5); font: 600 16px/20px var(--font-text); color: var(--tinte); cursor: pointer; min-height: 60px; }
.wb-kopf__menue svg { width: 22px; height: 22px; }
.wb-kopf__anruf { display: none; align-items: center; justify-content: center; width: 60px; border-left: 1px solid var(--linie); color: var(--blau); }
.wb-kopf__anruf svg { width: 22px; height: 22px; }

/* ---------- Brotkrumen ---------- */
.wb-krumen { display: flex; flex-wrap: wrap; gap: var(--space-2); font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 var(--space-6); padding: 0; list-style: none; color: var(--nebel); }
.wb-krumen a { color: var(--weiss); text-decoration: none; }
.wb-krumen li + li::before { content: "/"; margin-right: var(--space-2); color: var(--nebel); }
.wb-hell .wb-krumen { color: var(--grau); }
.wb-hell .wb-krumen a { color: var(--blau); }

/* ---------- Hero / Seitenkopf auf Nachtblau ---------- */
.wb-hero { padding: var(--space-8) 0 80px; }
.wb-hero__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: start; }
.wb-seite .wb-hero__antwort { margin-top: var(--space-6); max-width: 640px; color: var(--eis); }
.wb-hero__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: var(--space-7); }
.wb-hero .wb-display em, .wb-hero .wb-h1 em { font-style: normal; box-shadow: inset 0 -0.14em 0 var(--gold); }

/* ---------- Hero mit Stimmungsbild ---------- */
.wb-hero--bild { position: relative; isolation: isolate; overflow: hidden; }
.wb-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center; }
.wb-hero--bild::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(0deg, rgba(4,33,63,0.92) 0%, rgba(4,33,63,0) 38%),
  linear-gradient(90deg, rgba(4,33,63,0.97) 0%, rgba(4,33,63,0.93) 36%, rgba(4,33,63,0.62) 64%, rgba(4,33,63,0.30) 100%); }

/* ---------- Steckbrief: Datenblatt als dl ---------- */
.wb-steckbrief { margin: 0; border-top: var(--kante) solid var(--gold); background: var(--nacht-2); }
.wb-steckbrief__kopf { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--linie-nacht); }
.wb-steckbrief__kopf img { width: 64px; height: 64px; border-radius: var(--radius-rund); object-fit: cover; }
.wb-steckbrief__name { font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 700; }
.wb-steckbrief dl { margin: 0; }
.wb-steckbrief__zeile { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: var(--space-4); padding: 14px var(--space-5); border-bottom: 1px solid var(--linie-nacht); }
.wb-steckbrief__zeile:last-child { border-bottom: 0; }
.wb-steckbrief dt { font-family: var(--font-mono); font-size: 12px; line-height: 24px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nebel); }
.wb-steckbrief dd { margin: 0; font-weight: 600; }
.wb-steckbrief--hell { background: var(--weiss); border: 1px solid var(--linie); border-top: var(--kante) solid var(--gold); }
.wb-steckbrief--hell .wb-steckbrief__kopf, .wb-steckbrief--hell .wb-steckbrief__zeile { border-color: var(--linie); }
.wb-steckbrief--hell dt { color: var(--grau); }

/* ---------- Fotoband mit Bildunterschrift ---------- */
.wb-band { position: relative; background: var(--nacht); }
.wb-band img { width: 100%; height: 360px; object-fit: cover; }
.wb-band figcaption { display: flex; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) 0; color: var(--nebel); }
.wb-band figure { margin: 0; }

/* ---------- Preisverzeichnis ---------- */
.wb-verzeichnis { border-top: 2px solid var(--tinte); }
.wb-verzeichnis__gruppe { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-6) 0 var(--space-3); border-bottom: 1px solid var(--linie); }
.wb-verzeichnis__kopf { display: grid; grid-template-columns: 56px minmax(0, 1fr) 180px 170px 40px; gap: var(--space-5); padding: var(--space-3) 0; border-bottom: 1px solid var(--linie); color: var(--grau); }
.wb-zeile { display: grid; grid-template-columns: 56px minmax(0, 1fr) 180px 170px 40px; gap: var(--space-5); align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linie); color: var(--tinte) !important; text-decoration: none !important; position: relative; }
.wb-zeile:hover { background: var(--eis); }
.wb-zeile:hover .wb-zeile__pfeil { background: var(--gold); border-color: var(--gold); color: var(--nacht); }
.wb-zeile__nr { font-family: var(--font-mono); font-size: 13px; color: var(--grau); padding-left: var(--space-2); }
.wb-zeile__titel { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; display: block; }
.wb-zeile__text { display: block; font-size: 15px; line-height: 22px; color: var(--grau); margin-top: 2px; }
.wb-zeile__turnus { font-size: 15px; line-height: 22px; color: var(--grau); }
.wb-zeile__preis { font-family: var(--font-mono); font-size: 18px; line-height: 24px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.wb-zeile__preis small { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--grau); letter-spacing: 0.04em; }
.wb-zeile__pfeil { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--linie); color: var(--blau); }
.wb-zeile__pfeil svg { width: 18px; height: 18px; }
.wb-zeile--hervor { background: var(--eis); box-shadow: inset 0 var(--kante) 0 var(--gold); }
.wb-zeile--kompakt { grid-template-columns: minmax(0, 1fr) 150px 40px; padding: var(--space-4) 0; }
.wb-zeile--kompakt .wb-zeile__titel { font-size: 19px; line-height: 24px; }
.wb-verzeichnis__fuss { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-5); }

/* ---------- Preis-Etikett ---------- */
.wb-etikett { background: var(--weiss); color: var(--tinte); border-top: var(--kante) solid var(--gold); padding: var(--space-5); }
.wb-etikett__zeile { display: flex; justify-content: space-between; gap: var(--space-4); padding: 10px 0; border-top: 1px solid var(--linie); font-size: 15px; line-height: 22px; }
.wb-etikett__zeile span:last-child { font-family: var(--font-mono); font-weight: 600; text-align: right; }
.wb-etikett .wb-preis { margin: var(--space-2) 0 var(--space-1); }
.wb-etikett__einheit { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--grau); }

/* ---------- Datenleiste (Kurzfakten / Ortsfakten / Kennzahlen) ---------- */
.wb-daten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linie-nacht); }
.wb-daten__feld { padding: var(--space-5) var(--space-5) 0 0; }
.wb-daten__feld + .wb-daten__feld { padding-left: var(--space-5); border-left: 1px solid var(--linie-nacht); }
.wb-daten__wert { display: block; font-family: var(--font-mono); font-size: 28px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wb-daten__label { display: block; font-size: 14px; line-height: 20px; color: var(--nebel); margin-top: var(--space-1); }
.wb-daten--hell { border-top: 2px solid var(--tinte); }
.wb-daten--hell .wb-daten__feld + .wb-daten__feld { border-left-color: var(--linie); }
.wb-daten--hell .wb-daten__label { color: var(--grau); }

/* ---------- Zitat / Ansprechpartnerin ---------- */
.wb-person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: center; }
.wb-person__zitat { position: relative; padding-top: 72px; }
.wb-person__zitat::before { content: "„"; position: absolute; top: -100px; left: -6px; font-family: var(--font-display); font-size: 140px; line-height: 1; color: var(--gold); font-weight: 800; }
.wb-person__unterschrift { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.wb-person__unterschrift img { width: 56px; height: 56px; border-radius: var(--radius-rund); object-fit: cover; }
.wb-person--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.wb-person--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
.wb-person--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.wb-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); align-items: start; }
.wb-kontaktkarte { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; padding: var(--space-5); background: var(--weiss); border: 1px solid var(--linie); border-top: var(--kante) solid var(--gold); }
.wb-kontaktkarte img { width: 96px; height: 96px; border-radius: var(--radius-rund); object-fit: cover; }

/* ---------- Platzhalter für Fotos ---------- */
.wb-platzhalter { position: relative; display: grid; place-items: center; background-color: var(--eis-2); background-image: repeating-linear-gradient(135deg, rgba(7,67,129,.10) 0 1px, transparent 1px 14px); border: 1px dashed var(--rahmen); color: var(--tinte); text-align: center; padding: var(--space-5); }
.wb-platzhalter strong { display: block; font-family: var(--font-display); font-size: 17px; line-height: 22px; margin-top: var(--space-2); }
.wb-platzhalter span { display: block; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--grau); margin-top: var(--space-1); }
.wb-platzhalter svg { width: 28px; height: 28px; margin: 0 auto; color: var(--blau); }
.wb-nacht .wb-platzhalter { background-color: var(--nacht-2); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 1px, transparent 1px 14px); border-color: var(--nebel); color: var(--weiss); }
.wb-nacht .wb-platzhalter span { color: var(--nebel); }
.wb-nacht .wb-platzhalter svg { color: var(--gold); }

/* ---------- Nummerierte Zeilen (Für wen, Enthalten) ---------- */
.wb-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.wb-liste li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--linie); }
.wb-liste__nr { font-family: var(--font-mono); font-size: 13px; line-height: 28px; color: var(--grau); }
.wb-liste--zweispaltig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); border-top: 0; }
.wb-liste--zweispaltig li:nth-child(-n+2) { border-top: 1px solid var(--linie); }
.wb-liste--reihe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); border-top: 2px solid var(--tinte); }
.wb-liste--reihe li { display: block; padding: var(--space-5) 0 0; border-bottom: 0; }
.wb-liste--reihe .wb-liste__nr { display: block; margin-bottom: var(--space-3); }
.wb-check { list-style: none; margin: 0; padding: 0; }
.wb-check li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); padding: 12px 0; border-bottom: 1px solid var(--linie); }
.wb-check svg { width: 22px; height: 22px; margin-top: 3px; }
.wb-check--ja svg { color: var(--erfolg); }
.wb-check--nein svg { color: var(--fehler); }

/* ---------- Ablauf auf goldener Linie ---------- */
.wb-ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); position: relative; counter-reset: schritt; }
.wb-ablauf::before { content: ""; position: absolute; top: 23px; left: 0; right: 0; height: var(--kante); background: var(--gold); }
.wb-ablauf--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wb-ablauf li { position: relative; padding-top: 72px; counter-increment: schritt; }
.wb-ablauf li::before { content: "0" counter(schritt); position: absolute; top: 0; left: 0; width: 50px; height: 50px; display: grid; place-items: center; background: var(--nacht); color: var(--weiss); font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
.wb-nacht .wb-ablauf li::before { background: var(--gold); color: var(--nacht); }
.wb-ablauf__titel { display: block; font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; margin-bottom: var(--space-2); }

/* ---------- Referenzverzeichnis ---------- */
.wb-referenzen { border-top: 2px solid var(--tinte); }
.wb-referenz { display: grid; grid-template-columns: 160px minmax(0, 1.4fr) minmax(0, 1.2fr) 200px; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--linie); align-items: start; }
.wb-referenz__seg { font-family: var(--font-mono); font-size: 12px; line-height: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bernstein); font-weight: 600; }
.wb-referenz__art { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; }
.wb-referenz__ort { display: block; font-size: 15px; color: var(--grau); margin-top: 2px; }
.wb-referenz__seit { font-family: var(--font-mono); font-size: 15px; font-weight: 600; text-align: right; }
.wb-referenz__kopf { display: grid; grid-template-columns: 160px minmax(0, 1.4fr) minmax(0, 1.2fr) 200px; gap: var(--space-5); padding: var(--space-3) 0; border-bottom: 1px solid var(--linie); color: var(--grau); }

/* ---------- Filter-Chips (eckig) ---------- */
.wb-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.wb-filter button { min-height: 44px; padding: 0 var(--space-4); background: var(--weiss); border: 1px solid var(--rahmen); color: var(--tinte); font: 600 15px/20px var(--font-text); cursor: pointer; border-radius: var(--radius-0); display: inline-flex; align-items: center; gap: var(--space-2); }
.wb-filter button[aria-pressed="true"] { background: var(--nacht); border-color: var(--nacht); color: var(--weiss); }
.wb-filter .wb-anzahl { font-family: var(--font-mono); font-size: 12px; color: inherit; opacity: .8; }

/* ---------- Vorher / Nachher ---------- */
.wb-vn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.wb-vn figure { margin: 0; position: relative; }
.wb-vn img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.wb-vn__marke { position: absolute; top: 0; left: 0; padding: 6px 10px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.wb-vn__marke--vorher { background: var(--tinte); color: var(--weiss); }
.wb-vn__marke--nachher { background: var(--gold); color: var(--nacht); }
.wb-vn figcaption { font-size: 14px; line-height: 20px; color: var(--grau); padding-top: var(--space-2); }

/* ---------- Radius-Karte ---------- */
.wb-radius { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-8); align-items: start; }
.wb-radius__karte { background: var(--nacht); aspect-ratio: 1 / 1; max-height: 560px; position: relative; }
.wb-radius__karte svg { width: 100%; height: 100%; display: block; }
.wb-radius__karte svg .ring { fill: none; stroke: #24466E; stroke-width: 1; }
.wb-radius__karte svg .ring-label { fill: #A8BCD2; font: 500 11px var(--font-mono); letter-spacing: .06em; }
.wb-radius__karte svg .ort { fill: #FFFFFF; }
.wb-radius__karte svg .ort-label { fill: #FFFFFF; font: 600 13px var(--font-text); }
.wb-radius__karte svg .ort-hervor { fill: var(--gold); }
.wb-radius__karte svg .sitz { fill: var(--gold); }
.wb-radius__karte svg .sitz-label { fill: var(--gold); font: 700 14px var(--font-text); }
.wb-radius__karte svg .wetterau { fill: rgba(234,175,21,.10); stroke: var(--gold); stroke-width: 1; stroke-dasharray: 4 4; }
.wb-radius__karte svg .klein-label { fill: #A8BCD2; font: 500 12px var(--font-text); }
.wb-orte { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinte); }
.wb-orte li a { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; gap: var(--space-4); align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; font-weight: 600; }
.wb-orte li a:hover { background: var(--eis); }
.wb-orte__km { font-family: var(--font-mono); font-size: 14px; color: var(--grau); font-weight: 500; white-space: nowrap; }
.wb-orte svg { width: 16px; height: 16px; color: var(--blau); }
.wb-orte--chips { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; }
.wb-orte--chips li a { display: inline-flex; gap: var(--space-3); border: 1px solid var(--rahmen); padding: 10px var(--space-4); min-height: 44px; }

/* ---------- FAQ ---------- */
.wb-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); }
.wb-faq details { border-bottom: 1px solid var(--linie); }
.wb-faq details:nth-child(-n+2) { border-top: 2px solid var(--tinte); }
.wb-faq summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: var(--space-4); align-items: start; padding: var(--space-5) 0; cursor: pointer; font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 700; }
.wb-faq summary::-webkit-details-marker { display: none; }
.wb-faq summary svg { width: 24px; height: 24px; color: var(--blau); margin-top: 1px; }
.wb-faq details[open] summary svg { transform: rotate(45deg); }
.wb-faq details p { padding: 0 var(--space-7) var(--space-5) 0; color: var(--tinte); }

/* ---------- Anfrage-Block + Formular ---------- */
.wb-anfrage { background: var(--nacht); color: var(--weiss); border-top: var(--kante) solid var(--gold); }
.wb-anfrage__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); padding: 80px 0; }
.wb-anfrage__titel { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.015em; }
.wb-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-5); }
.wb-form fieldset { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.wb-form legend { grid-column: 1 / -1; padding: 0; margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau); float: left; width: 100%; }
.wb-feld { display: flex; flex-direction: column; gap: 6px; }
.wb-feld--breit { grid-column: 1 / -1; }
.wb-feld label { font-size: 15px; line-height: 20px; font-weight: 600; }
.wb-feld input, .wb-feld select, .wb-feld textarea { width: 100%; min-height: 52px; padding: 12px 14px; font: 400 17px/24px var(--font-text); color: var(--tinte); background: var(--weiss); border: 1px solid var(--rahmen); border-radius: var(--radius-0); }
.wb-feld textarea { min-height: 112px; resize: vertical; }
.wb-feld input:focus, .wb-feld select:focus, .wb-feld textarea:focus { outline: 3px solid var(--fokus); outline-offset: 0; border-color: var(--fokus); }
.wb-nacht .wb-feld input:focus, .wb-nacht .wb-feld select:focus, .wb-nacht .wb-feld textarea:focus { outline-color: var(--fokus-nacht); }
.wb-feld__hilfe { font-size: 13px; line-height: 18px; color: var(--grau); }
.wb-nacht .wb-form legend, .wb-nacht .wb-feld__hilfe { color: var(--nebel); }
.wb-wahl { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wb-wahl label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--rahmen); background: var(--weiss); color: var(--tinte); font-weight: 600; font-size: 15px; cursor: pointer; }
.wb-wahl input { accent-color: var(--blau); width: 18px; height: 18px; margin: 0; }
.wb-wahl label.ist-gewaehlt { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: #FFF7DD; }
.wb-form__fuss { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); justify-content: space-between; }

/* ---------- Footer ---------- */
.wb-footer { background: var(--nacht); color: var(--weiss); padding: var(--space-8) 0 var(--space-6); border-top: 1px solid var(--linie-nacht); }
.wb-footer__nap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); padding-bottom: var(--space-7); border-bottom: 1px solid var(--linie-nacht); align-items: end; }
.wb-footer__nap img { height: 40px; width: auto; margin-bottom: var(--space-5); }
.wb-footer__firma { font-family: var(--font-display); font-size: 26px; line-height: 34px; font-weight: 700; }
.wb-footer__adresse { font-style: normal; color: var(--eis); margin-top: var(--space-2); }
.wb-footer__spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); padding: var(--space-7) 0; }
.wb-footer__titel { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-4); display: flex; justify-content: space-between; align-items: center; list-style: none; }
.wb-footer__titel::-webkit-details-marker { display: none; }
.wb-footer__titel svg { display: none; width: 20px; height: 20px; color: var(--weiss); }
.wb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wb-footer ul a { color: var(--eis); text-decoration: none; font-size: 15px; line-height: 24px; }
.wb-footer ul a:hover { color: var(--weiss); text-decoration: underline; }
.wb-footer__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--linie-nacht); font-size: 14px; color: var(--nebel); }
.wb-footer__unten a { color: var(--nebel); }

/* ---------- Mobile Aktionsleiste ---------- */
.wb-mobilleiste { display: none; grid-template-columns: 1fr 1fr; height: 64px; box-shadow: 0 -6px 20px rgba(4,33,63,.18); z-index: 5; }
.wb-mobilleiste a { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-weight: 700; font-size: 17px; text-decoration: none; }
.wb-mobilleiste svg { width: 20px; height: 20px; }
.wb-mobilleiste__anruf { background: var(--blau); color: var(--weiss) !important; }
.wb-mobilleiste__anfrage { background: var(--gold); color: var(--nacht) !important; }

/* ---------- Hinweisbox ---------- */
.wb-hinweis { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); background: var(--eis); border-top: var(--kante) solid var(--blau); }
.wb-hinweis svg { width: 24px; height: 24px; color: var(--blau); }
.wb-nacht .wb-hinweis svg { color: var(--gold); }

/* ---------- Bildzeile im Preisverzeichnis ---------- */
.wb-zeile--bild { grid-template-columns: 44px 128px minmax(0, 1fr) 170px 150px 40px; }
.wb-zeile__bild { width: 128px; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Preistabelle ---------- */
.wb-tabelle-box { overflow-x: auto; border-top: 2px solid var(--tinte); }
.wb-tabelle { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.wb-tabelle caption { caption-side: bottom; text-align: left; padding-top: var(--space-4); }
.wb-tabelle th, .wb-tabelle td { padding: 14px var(--space-4) 14px 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: baseline; }
.wb-tabelle thead th { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau); font-weight: 500; }
.wb-tabelle tbody th { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.wb-tabelle tbody th a { color: var(--tinte); text-decoration: none; }
.wb-tabelle tbody th a:hover { text-decoration: underline; }
.wb-tabelle .wb-zahl { text-align: right; font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 0; }
.wb-tabelle .wb-zahl small { font-size: 12px; font-weight: 500; color: var(--grau); }
.wb-tabelle tbody tr:hover { background: var(--eis); }

/* ---------- Karte mit Linie (Erklärblock) ---------- */
.wb-karte-linie { padding: var(--space-6); border: 1px solid var(--linie); border-top: var(--kante) solid var(--gold); background: var(--weiss); }
.wb-karte-linie p + p { margin-top: var(--space-3); }

/* ---------- Ortsgruppen (Einsatzgebiet) ---------- */
.wb-ortsgruppen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.wb-orte--nacht li a { background: transparent; color: var(--weiss); border-color: var(--nebel); }
.wb-orte--nacht li a:hover { background: var(--nacht-2); }
.wb-orte--nacht .wb-orte__km { color: var(--nebel); }

/* ---------- Kreisseite: Orte mit eigenem Abschnitt ---------- */
.wb-kreisorte { border-top: 2px solid var(--tinte); }
.wb-kreisort { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); padding: var(--space-6) 0; border-bottom: 1px solid var(--linie); scroll-margin-top: 80px; }

/* ---------- Ratgeber-Artikel ---------- */
.wb-artikel { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: var(--space-8); align-items: start; }
.wb-toc { position: sticky; top: 24px; border-top: 2px solid var(--tinte); padding-top: var(--space-4); }
.wb-toc ol { list-style: none; margin: var(--space-3) 0 0; padding: 0; counter-reset: toc; }
.wb-toc li { counter-increment: toc; border-bottom: 1px solid var(--linie); }
.wb-toc li a { display: grid; grid-template-columns: 32px minmax(0, 1fr); padding: 10px 0; color: var(--tinte); text-decoration: none; font-size: 15px; line-height: 22px; font-weight: 600; }
.wb-toc li a::before { content: "0" counter(toc); font-family: var(--font-mono); font-size: 12px; color: var(--grau); font-weight: 500; }
.wb-toc li a:hover { color: var(--blau); }
.wb-text { display: grid; gap: var(--space-5); }
.wb-text > .wb-h2 { margin-top: var(--space-6); scroll-margin-top: 80px; font-size: 32px; line-height: 38px; }
.wb-kurzantwort { background: var(--eis); border-top: var(--kante) solid var(--gold); padding: var(--space-5) var(--space-6); scroll-margin-top: 80px; }
.wb-kurzantwort .wb-mono-klein { color: var(--bernstein); display: block; margin-bottom: var(--space-2); }
.wb-kurzantwort p { font-size: 20px; line-height: 32px; font-weight: 600; }
.wb-faq--eine { grid-template-columns: minmax(0, 1fr); }
.wb-faq--eine details:nth-child(2) { border-top: 0; }
.wb-autorin { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--space-5); align-items: center; padding: var(--space-5) 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin-top: var(--space-6); }
.wb-autorin img { width: 80px; height: 80px; border-radius: var(--radius-rund); object-fit: cover; }
.wb-weiter { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-5) var(--space-6); background: var(--nacht); color: var(--weiss) !important; text-decoration: none !important; border-top: var(--kante) solid var(--gold); }
.wb-weiter .wb-mono-klein { color: var(--gold); grid-column: 1; }
.wb-weiter .wb-h3 { grid-column: 1; }
.wb-weiter svg { grid-column: 2; grid-row: 1 / span 2; width: 28px; height: 28px; color: var(--gold); }

/* ---------- Tablet ---------- */
@container seite (max-width: 1100px) {
  .wb-kopf__nav a { padding: 0 var(--space-2); font-size: 15px; }
  .wb-kopf__logo { margin-right: var(--space-5); }
  .wb-zeile, .wb-verzeichnis__kopf { grid-template-columns: 44px minmax(0, 1fr) 140px 150px 40px; }
}
@container seite (max-width: 1023px) {
  .wb-service__rechts, .wb-kopf__nav, .wb-kopf__anfrage { display: none; }
  .wb-kopf .wb-wrap { min-height: 60px; }
  .wb-kopf__logo { flex: 1; margin-right: 0; }
  .wb-kopf__logo img { height: 28px; }
  .wb-kopf__menue, .wb-kopf__anruf { display: flex; }
  .wb-mobilleiste { display: grid; }
  .wb-artikel, .wb-kreisort, .wb-hero__raster, .wb-kopfzeile, .wb-person, .wb-person--7-5, .wb-person--8-4, .wb-person--5-7, .wb-zwei, .wb-radius, .wb-anfrage__raster, .wb-footer__nap { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .wb-footer__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-vn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-ortsgruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-toc { position: static; }
  .wb-kreisort { gap: var(--space-3); }
}
/* ---------- Telefon ---------- */
@container seite (max-width: 640px) {
  .wb-seite { font-size: 16px; line-height: 26px; }
  .wb-wrap { padding: 0 20px; }
  .wb-service { font-size: 13px; }
  .wb-service .wb-wrap { justify-content: center; min-height: 36px; }
  .wb-abschnitt { padding: var(--space-8) 0; }
  .wb-display { font-size: 40px; line-height: 44px; }
  .wb-h1 { font-size: 36px; line-height: 40px; }
  .wb-h2 { font-size: 28px; line-height: 32px; }
  .wb-zitat { font-size: 24px; line-height: 32px; }
  .wb-lead { font-size: 18px; line-height: 28px; }
  .wb-preis { font-size: 36px; line-height: 40px; }
  .wb-hero { padding: var(--space-6) 0 var(--space-7); }
  .wb-hero--bild::before { background: linear-gradient(180deg, rgba(4,33,63,0.50) 0px, rgba(4,33,63,0.82) 180px, rgba(4,33,63,1) 336px); }
  .wb-hero__bg { height: 340px !important; bottom: auto; }
  .wb-hero__aktionen { margin-top: var(--space-6); gap: var(--space-5); }
  .wb-hero__aktionen .wb-btn { width: 100%; }
  .wb-steckbrief__zeile { grid-template-columns: 112px minmax(0, 1fr); padding: 12px var(--space-4); }
  .wb-steckbrief__kopf { padding: var(--space-4); }
  .wb-band img { height: 240px; }
  .wb-band figcaption { flex-direction: column; gap: 2px; font-size: 13px; line-height: 18px; }
  .wb-verzeichnis__kopf, .wb-referenz__kopf { display: none; }
  .wb-zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel pfeil" "preis preis"; gap: var(--space-2) var(--space-4); padding: var(--space-4) 0; }
  .wb-zeile__nr, .wb-zeile__turnus { display: none; }
  .wb-zeile > span:nth-child(2) { grid-area: titel; }
  .wb-zeile__preis { grid-area: preis; text-align: left; display: flex; gap: var(--space-2); align-items: baseline; }
  .wb-zeile__preis small { display: inline; }
  .wb-zeile__pfeil { grid-area: pfeil; }
  .wb-zeile--bild { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "bild titel pfeil" "bild preis preis"; }
  .wb-zeile--bild .wb-zeile__bild { grid-area: bild; width: 96px; }
  .wb-zeile--bild > span:nth-child(3) { grid-area: titel; }
  .wb-ortsgruppen { grid-template-columns: minmax(0, 1fr); }
  .wb-tabelle { font-size: 15px; }
  .wb-tabelle tbody th { font-size: 16px; }
  .wb-tabelle th:nth-child(3), .wb-tabelle td:nth-child(3) { display: none; }
  .wb-tabelle th:nth-child(2), .wb-tabelle td:nth-child(2) { display: none; }
  .wb-tabelle--alle th:nth-child(3), .wb-tabelle--alle td:nth-child(3) { display: table-cell; }
  .wb-tabelle--alle th:nth-child(2), .wb-tabelle--alle td:nth-child(2) { display: table-cell; }
  .wb-text > .wb-h2 { font-size: 26px; line-height: 30px; }
  .wb-kurzantwort p { font-size: 18px; line-height: 28px; }
  .wb-karte-linie { padding: var(--space-5); }
  .wb-zeile--kompakt > span:nth-child(1) { grid-area: titel; }
  .wb-zeile--kompakt > span:nth-child(2) { grid-area: preis; }
  .wb-zeile__titel { font-size: 19px; line-height: 24px; }
  .wb-zeile--kompakt { grid-template-columns: minmax(0, 1fr) auto; }
  .wb-daten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-daten__feld:nth-child(3) { padding-left: 0; border-left: 0; }
  .wb-daten__feld { padding-bottom: var(--space-4); }
  .wb-daten__wert { font-size: 22px; line-height: 28px; }
  .wb-liste--zweispaltig, .wb-faq { grid-template-columns: minmax(0, 1fr); }
  .wb-liste--zweispaltig li:nth-child(2) { border-top: 0; }
  .wb-faq details:nth-child(2) { border-top: 0; }
  .wb-faq summary { font-size: 17px; line-height: 24px; }
  .wb-faq details p { padding-right: 0; }
  .wb-ablauf, .wb-ablauf--drei { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .wb-ablauf::before { top: 0; bottom: 0; left: 23px; right: auto; width: var(--kante); height: auto; }
  .wb-ablauf li { padding: 10px 0 0 72px; min-height: 50px; }
  .wb-person__zitat::before { font-size: 100px; top: -70px; }
  .wb-person__zitat { padding-top: 48px; }
  .wb-kontaktkarte { grid-template-columns: 72px minmax(0, 1fr); }
  .wb-kontaktkarte img { width: 72px; height: 72px; }
  .wb-kontaktkarte .wb-btn { grid-column: 1 / -1; }
  .wb-referenz { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); }
  .wb-referenz > :nth-child(-n+3) { grid-column: 1 / -1; }
  .wb-referenz > :nth-child(4) { grid-column: 1 / -1; }
  .wb-referenz__seit { text-align: right; }
  .wb-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); }
  .wb-filter button { flex: none; }
  .wb-anfrage__raster { padding: var(--space-8) 0; }
  .wb-anfrage__titel { font-size: 28px; line-height: 32px; }
  .wb-form, .wb-form fieldset { grid-template-columns: minmax(0, 1fr); }
  .wb-form__fuss .wb-btn { width: 100%; }
  .wb-footer { padding: var(--space-8) 0 calc(var(--space-6) + 64px); }
  .wb-footer__firma { font-size: 22px; line-height: 28px; }
  .wb-footer__spalten { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .wb-vn { gap: var(--space-2); }
  .wb-tel__nr { font-size: 20px; }
  .wb-abschnitt { padding: 48px 0; }
  .wb-zeile__text { display: none; }
  .wb-verzeichnis__gruppe { padding-top: var(--space-5); }
  .wb-liste--reihe { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wb-liste--reihe li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--linie); }
  .wb-liste--reihe .wb-liste__nr { margin: 0; }
  .wb-orte li a { padding: 10px 0; }
  .wb-orte--chips li a { padding: 10px var(--space-4); }
  .wb-footer__spalten { gap: 0; padding: var(--space-5) 0; }
  .wb-footer__spalten details { border-bottom: 1px solid var(--linie-nacht); }
  .wb-footer__titel { margin: 0; min-height: 52px; cursor: pointer; }
  .wb-footer__titel svg { display: block; }
  .wb-footer__spalten ul { padding-bottom: var(--space-4); }
  .wb-footer__nap img { height: 32px; }
  .wb-kopfzeile { margin-bottom: var(--space-6); }
}

/* ---------- Nur Website: feste Aktionsleiste, Mobilmenü ---------- */
html, body { margin: 0; background: var(--nacht); }
.wb-seite .wb-mobilleiste { position: fixed; left: 0; right: 0; bottom: 0; }
.wb-mobilmenue { display: none; }
@container seite (max-width: 1023px) {
  .wb-kopf { position: sticky; top: 0; z-index: 10; }
  .wb-mobilmenue { display: block; position: fixed; inset: 60px 0 64px 0; background: var(--nacht); color: var(--weiss); overflow-y: auto; z-index: 9; padding: 8px 20px 24px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s, visibility .15s; }
  .wb-mobilmenue.ist-offen { opacity: 1; visibility: visible; transform: none; }
  .wb-mobilmenue a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; border-bottom: 1px solid var(--linie-nacht); color: var(--weiss); text-decoration: none; font-weight: 600; font-size: 18px; }
  .wb-mobilmenue small { font-family: var(--font-mono); font-size: 13px; color: var(--nebel); font-weight: 500; }
  .wb-mobilmenue .wb-mono-klein { color: var(--gold); display: block; margin: 24px 0 4px; }
}

/* ---------- Ergänzung 11/2026: Leistungsverzeichnis ohne Preisspalte, Stärken, Bewertungen ---------- */
.wb-zeile--ohne-preis, .wb-verzeichnis__kopf.wb-zeile--ohne-preis { grid-template-columns: 56px minmax(0, 1fr) 220px 40px; }
.wb-zeile--ohne-preis.wb-zeile--bild { grid-template-columns: 44px 128px minmax(0, 1fr) 200px 40px; }
.wb-zeile--ohne-preis.wb-zeile--kompakt { grid-template-columns: minmax(0, 1fr) 200px 40px; }
.wb-liste--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wb-bewertungen { min-height: 260px; }
@container seite (max-width: 1100px) {
  .wb-zeile--ohne-preis, .wb-verzeichnis__kopf.wb-zeile--ohne-preis { grid-template-columns: 44px minmax(0, 1fr) 180px 40px; }
  .wb-zeile--ohne-preis.wb-zeile--bild { grid-template-columns: 44px 112px minmax(0, 1fr) 170px 40px; }
  .wb-liste--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-5); }
}
@container seite (max-width: 1023px) {
  .wb-zeile--ohne-preis, .wb-zeile--ohne-preis.wb-zeile--kompakt { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel pfeil" "preis preis"; }
  .wb-zeile--ohne-preis.wb-zeile--bild { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "bild titel pfeil" "bild preis preis"; }
  .wb-zeile--ohne-preis .wb-zeile__turnus { display: block; grid-area: preis; font-size: 14px; line-height: 20px; }
  .wb-bewertungen { min-height: 320px; }
}
@container seite (max-width: 640px) {
  .wb-liste--vier { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
}

/* Lange Wörter in Überschriften auf schmalen Bildschirmen trennen */
.wb-h1, .wb-h2, .wb-display { hyphens: manual; overflow-wrap: break-word; }

/* ---------- Hauptnavigation: Untermenüs (Desktop) ---------- */
.wb-nav__punkt { position: relative; display: flex; align-items: stretch; }
.wb-kopf__nav .wb-nav__punkt > a { padding-right: 2px; }
.wb-nav__auf { display: flex; align-items: center; padding: 0 var(--space-3) 0 2px; background: none; border: 0; border-top: var(--kante) solid transparent; border-bottom: var(--kante) solid transparent; color: var(--tinte); cursor: pointer; }
.wb-nav__auf svg { width: 16px; height: 16px; transition: transform .15s ease; }
.wb-nav__punkt:hover .wb-nav__auf svg, .wb-nav__punkt.ist-offen .wb-nav__auf svg { transform: rotate(180deg); }
.wb-nav__punkt:hover > a, .wb-nav__punkt.ist-offen > a { border-bottom-color: var(--gold); }
.wb-nav__panel { display: none; position: absolute; top: 100%; left: 0; z-index: 30; width: 640px; padding: var(--space-5); background: var(--weiss); border: 1px solid var(--linie); border-top: var(--kante) solid var(--gold); box-shadow: 0 16px 40px rgba(4, 33, 63, 0.16); }
.wb-nav__punkt:hover .wb-nav__panel, .wb-nav__punkt.ist-offen .wb-nav__panel { display: block; }
.wb-nav__spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.wb-nav__spalten ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; border-top: 2px solid var(--tinte); }
.wb-kopf__nav .wb-nav__panel a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 10px 0; border: 0; border-bottom: 1px solid var(--linie); font-size: 15px; font-weight: 600; color: var(--tinte); }
.wb-kopf__nav .wb-nav__panel a:hover { color: var(--blau); border-bottom-color: var(--linie); background: var(--eis); }
.wb-nav__panel small { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--grau); white-space: nowrap; }
.wb-kopf__nav .wb-nav__panel a.wb-nav__fuss { justify-content: flex-start; gap: var(--space-2); margin-top: var(--space-4); padding: 0; border: 0; color: var(--blau); background: none; }
.wb-nav__fuss svg { width: 16px; height: 16px; }
@container seite (max-width: 1100px) { .wb-nav__auf { padding-right: var(--space-2); } .wb-nav__panel { width: 560px; } }

/* ---------- Startseite: Steckbrief im Hero halbtransparent ---------- */
.wb-steckbrief--glas { background: rgba(10, 46, 85, 0.55); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.wb-steckbrief--glas .wb-steckbrief__kopf, .wb-steckbrief--glas .wb-steckbrief__zeile { border-color: rgba(168, 188, 210, 0.22); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .wb-steckbrief--glas { background: rgba(10, 46, 85, 0.88); } }

/* ---------- Glas-Effekt für alle Kästen im Hero mit Bild ---------- */
.wb-hero--bild .wb-steckbrief:not(.wb-steckbrief--hell) { background: rgba(10, 46, 85, 0.55); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.wb-hero--bild .wb-steckbrief:not(.wb-steckbrief--hell) .wb-steckbrief__kopf, .wb-hero--bild .wb-steckbrief:not(.wb-steckbrief--hell) .wb-steckbrief__zeile { border-color: rgba(168, 188, 210, 0.22); }
.wb-hero--bild .wb-etikett { background: rgba(255, 255, 255, 0.74); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.wb-hero--bild .wb-etikett__zeile { border-top-color: rgba(11, 27, 46, 0.14); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wb-hero--bild .wb-steckbrief:not(.wb-steckbrief--hell) { background: rgba(10, 46, 85, 0.88); }
  .wb-hero--bild .wb-etikett { background: rgba(255, 255, 255, 0.94); }
}
.wb-hero--bild .wb-etikett .wb-gedaempft { color: var(--grau); }

/* ---------- Einwilligungsbanner (nur sichtbar, wenn Tracking aktiv) ---------- */
.wb-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--nacht); color: var(--weiss); border-top: var(--kante) solid var(--gold); padding: var(--space-5) 0; }
.wb-consent a { color: var(--gold-hell); }
.wb-consent__innen { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.wb-consent__innen p { max-width: 720px; color: var(--eis); }
.wb-consent__knoepfe { display: flex; gap: var(--space-3); flex-shrink: 0; }
.wb-consent__btn { font: 700 15px/20px var(--font-text); padding: 12px 20px; border: 1px solid var(--nebel); background: transparent; color: var(--weiss); cursor: pointer; }
.wb-consent__btn--ja { background: var(--gold); border-color: var(--gold); color: var(--nacht); }
@container seite (max-width: 1023px) { .wb-consent__innen { flex-direction: column; align-items: stretch; } .wb-consent__knoepfe .wb-consent__btn { flex: 1; } .wb-consent { bottom: 64px; } }

/* ---------- Rechtstexte ---------- */
.wb-recht { max-width: 760px; display: grid; gap: var(--space-7); }
.wb-recht section > * + * { margin-top: var(--space-3); }
.wb-recht ul { padding-left: 1.2em; }
.wb-recht li + li { margin-top: 6px; }
.wb-recht__titel { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; }
.wb-consent { font-family: var(--font-text); }
.wb-consent__links { margin-top: var(--space-2); }
.wb-consent__links a { color: var(--nebel); }
/* Platz am Seitenende, damit das Banner Footer-Links (z. B. Impressum) nicht verdeckt */
body:has(.wb-consent:not([hidden])) .wb-footer { padding-bottom: 200px; }

/* Aktuelle Seite im Untermenü und Mobilmenü markiert lassen */
.wb-kopf__nav .wb-nav__panel a[aria-current="page"] { color: var(--blau); background: var(--eis); box-shadow: inset var(--kante) 0 0 var(--gold); padding-left: var(--space-3); }
.wb-mobilmenue a[aria-current="page"] { color: var(--gold); box-shadow: inset var(--kante) 0 0 var(--gold); padding-left: var(--space-3); }

/* Auswahlfelder (Objektart): keine Fokuslinie um den Radiobutton nach Mausklick.
   Für Tastaturnutzer bleibt ein Fokusrahmen um die ganze Kachel. */
.wb-feld .wb-wahl input:focus, .wb-wahl input:focus-visible { outline: none; }
.wb-wahl label:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.wb-referenz[hidden] { display: none !important; }

/* ---------- Bildmarke als grafisches Element (sparsam) ---------- */
.wb-marke { display: block; flex-shrink: 0; }
/* Leitsatz mit den drei Sternen */
.wb-leitsatz { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 24px; letter-spacing: 0.01em; }
.wb-leitsatz .wb-marke { width: 30px; height: auto; color: var(--gold); }
.wb-nacht .wb-leitsatz, .wb-footer .wb-leitsatz { color: var(--weiss); }
.wb-footer .wb-leitsatz { margin-bottom: var(--space-3); }
/* Wasserzeichen: ganze Marke im Anfrageblock, Staubsauger in dunklen Ablauf-Abschnitten */
.wb-anfrage { background-image: url(/assets/img/marke/wm-marke-hauch.svg); background-repeat: no-repeat; background-position: left -110px bottom -90px; background-size: 520px auto; }
.wb-abschnitt.wb-nacht { background-image: url(/assets/img/marke/sauger-hauch.svg); background-repeat: no-repeat; background-position: right -60px top -40px; background-size: 360px auto; }
@container seite (max-width: 1023px) {
  .wb-anfrage { background-position: right -90px bottom -60px; background-size: 320px auto; }
  .wb-abschnitt.wb-nacht { background-size: 220px auto; background-position: right -50px top -30px; }
  .wb-mobilmenue { background-image: url(/assets/img/marke/sauger-hauch.svg); background-repeat: no-repeat; background-position: right -40px bottom -20px; background-size: 240px auto; background-attachment: local; }
}
/* Große Marke auf Danke- und 404-Seite */
.wb-hero--marke { position: relative; overflow: hidden; isolation: isolate; }
.wb-hero--marke .wb-marke--gross { position: absolute; right: -60px; bottom: -70px; width: min(560px, 55vw); height: auto; color: var(--weiss); opacity: 0.08; z-index: -1; pointer-events: none; }
.wb-marke--danke { width: 120px; height: auto; color: var(--weiss); margin-bottom: var(--space-6); }
.wb-leitsatz--abstand { margin-top: var(--space-6); color: var(--blau); }

/* Karriere: Bewerbungswege */
.wb-bewerben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.wb-bewerben__weg { display: grid; gap: 6px; align-content: start; padding: var(--space-5); border: 1px solid var(--linie); border-top: 4px solid var(--gold); background: #fff; color: var(--tinte); text-decoration: none; transition: border-color .15s, transform .15s; }
.wb-bewerben__weg strong { font-family: var(--font-display); font-size: 20px; line-height: 26px; overflow-wrap: anywhere; }
.wb-bewerben__weg .wb-klein { color: var(--grau); }
.wb-bewerben__weg:hover { border-color: var(--blau); transform: translateY(-2px); }
.wb-bewerben--nacht .wb-bewerben__weg { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); border-top-color: var(--gold); color: #fff; }
.wb-bewerben--nacht .wb-bewerben__weg .wb-klein { color: var(--eis); }
.wb-stelle { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-5); align-items: center; padding: var(--space-6) 0; border-top: 2px solid var(--tinte); border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; }
.wb-stelle__titel { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 700; }
.wb-stelle__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 8px; color: var(--grau); font-size: 15px; }
.wb-stelle__dringend { display: inline-block; margin-bottom: 8px; padding: 2px 10px; background: var(--gold); color: var(--tinte); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.wb-stelle:hover .wb-stelle__titel { color: var(--blau); }
@media (max-width: 860px) { .wb-bewerben { grid-template-columns: 1fr; } .wb-stelle { grid-template-columns: 1fr; } }

/* Mehrstufiges Anfrageformular */
.wb-schritte { grid-column: 1 / -1; }
.wb-schritte__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.wb-schritte__liste li { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 4px solid var(--linie); color: var(--grau); font-size: 15px; font-weight: 600; transition: border-color .2s, color .2s; }
.wb-schritte__nr { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border: 1px solid currentColor; font-family: var(--font-mono); font-size: 13px; }
.wb-schritte__liste li.ist-fertig { border-top-color: var(--blau); color: var(--blau); }
.wb-schritte__liste li.ist-aktiv { border-top-color: var(--gold); color: var(--tinte); }
.wb-schritte__liste li.ist-aktiv .wb-schritte__nr { background: var(--gold); border-color: var(--gold); }
.wb-schritte__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wb-form.ist-schrittweise legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wb-schritte__nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; margin-top: var(--space-2); }
.wb-schritte__nav [data-weiter]:only-child { margin-left: auto; }
.wb-form fieldset[hidden], .wb-form__fuss[hidden] { display: none; }
.wb-feld__fehler { display: block; margin-top: 6px; color: var(--fehler); font-size: 14px; font-weight: 600; }
.wb-feld [aria-invalid="true"] { border-color: var(--fehler); }
.wb-nacht .wb-schritte__liste li { border-top-color: var(--linie-nacht); color: var(--nebel); }
.wb-nacht .wb-schritte__liste li.ist-aktiv { color: #fff; border-top-color: var(--gold); }
.wb-nacht .wb-schritte__liste li.ist-fertig { color: var(--blau-hell); border-top-color: var(--blau-hell); }
@media (max-width: 640px) {
  .wb-schritte__liste li { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13px; }
  .wb-schritte__liste li:not(.ist-aktiv) .wb-schritte__name { display: none; }
  .wb-schritte__nav .wb-btn { flex: 1 1 auto; }
}