/* kw-rich v1 */
/* ── 1. Felder, die Blockelemente erlauben (div, li, td) ─────────────────── */
[data-kw] h3, [data-kw] h4, [data-kw] h5, [data-kw] h6{
  display:block; margin:var(--sp-4, 1rem) 0 var(--sp-2, .5rem);
  font-size:1rem; font-weight:var(--fw-semibold, 600); line-height:1.35;
  color:var(--t-primary, inherit); letter-spacing:-.005em;
}
[data-kw] p{ margin:0 0 var(--sp-3, .75rem); }
[data-kw] ul, [data-kw] ol{ display:block; margin:0 0 var(--sp-3, .75rem); padding-left:1.35em; }
/* Das Design-System setzt global ul,ol{list-style:none} — hier wieder aktivieren */
[data-kw] ul{ list-style:disc outside; }
[data-kw] ol{ list-style:decimal outside; }
[data-kw] li{ display:list-item; margin:0 0 var(--sp-2, .5rem); }
[data-kw] li:last-child{ margin-bottom:0; }
[data-kw] li::marker{ color:var(--c-primary, currentColor); }
[data-kw] ul ul{ list-style:circle outside; margin:var(--sp-2, .5rem) 0 0; }

/* ── 2. Felder, die KEINE Blockelemente erlauben (p, span) ───────────────── */
/* span-Elemente sind überall zulässig; display:block macht daraus Zeilen.    */
.kw-h{
  display:block; margin:var(--sp-4, 1rem) 0 var(--sp-2, .5rem);
  font-weight:var(--fw-semibold, 600); line-height:1.35;
  color:var(--t-primary, inherit);
}
.kw-p{ display:block; margin:0 0 var(--sp-3, .75rem); }
.kw-list{ display:block; margin:0 0 var(--sp-3, .75rem); }
.kw-li{
  display:block; position:relative;
  padding-left:1.35em; margin:0 0 var(--sp-2, .5rem);
}
/* Punkt aus ::before statt list-style — unabhängig von Browser und Reset */
.kw-li::before{
  content:"\2022"; position:absolute; left:.35em; top:0;
  color:var(--c-primary, currentColor); font-weight:700; line-height:inherit;
}
.kw-list-num{ counter-reset:kwli; }
.kw-list-num > .kw-li{ padding-left:1.7em; counter-increment:kwli; }
.kw-list-num > .kw-li::before{
  content:counter(kwli) "."; left:0;
  font-weight:var(--fw-semibold, 600); font-variant-numeric:tabular-nums;
}

/* ── 3. Im Editor: leere Punkte müssen anklickbar bleiben ────────────────── */
/* Ein leeres span mit display:block wäre 0 Pixel hoch — der Schreibzeiger
   wäre unsichtbar. Beim Speichern werden leere Punkte ohnehin entfernt.      */
.kw-li:empty, .kw-p:empty, .kw-h:empty{ min-height:1.25em; }

/* ── 4. Ränder: erstes Element oben, letztes unten ohne Abstand ──────────── */
[data-kw] > *:first-child{ margin-top:0; }
[data-kw] > *:last-child{ margin-bottom:0; }
[data-kw] strong, [data-kw] b{ font-weight:var(--fw-semibold, 600); }
/* /kw-rich */


/* kw-landmark v1 */
.kw-skip{position:absolute;left:-9999px;top:0;z-index:9999;padding:.75rem 1.25rem;background:#000;color:#fff;font:inherit;text-decoration:underline;border-radius:0 0 .25rem 0}.kw-skip:focus{left:0}

/* kw-sb24-anpassungen v1 — kundenspezifische Anpassungen.
   Bewusst HIER und nicht in wb-bundle.css: das Buendel entsteht aus einem fremden
   Build und wird bei dessen naechstem Deploy ersetzt. */

/* 1. Abschlussblock: der Kunde wollte statt Fast-Schwarz ein mittleres Grau.
      Neutrales #5A5A5A, weisser Text darauf 6,90 : 1 (WCAG AA verlangt 4,5).
      Nur dieser Block — --color-dark traegt auch Menue-Balken und die
      mobile Schnellkontakt-Leiste und bleibt deshalb unangetastet. */
.closing-cta, .kwl-b015-final-cta-01{ background:#5A5A5A; }

/* 2. Hero-Video: Zwei-Klick-Fassade — EINGEBAUT UND LAUFEND.
      Die Flaeche traegt data-kw-medium="link", data-kw-medien und
      data-kw-video-url, hat einen <button class="kw-medien-play">, und
      kw-video.js ist eingehaengt. Nach dem Klick laeuft das Video.
      KORREKTUR ZU EINER FRUEHEREN ANNAHME: Hier stand, das Video verweigere
      die Einbettung mit 401, weil seine Domainfreigabe die Pruefadresse
      nicht enthalte. Das war falsch. Der 401 kam vom Pruefbrowser OHNE
      Fenster — Vimeo erkennt ihn und antwortet mit einer Meldung, die wie
      eine Zugriffssperre klingt. Gegenprobe mit einem bekannt oeffentlichen
      Video im selben Browser: ohne Fenster 200 gegen 401, mit Fenster
      beide 200. An beiden Pruefadressen mit Fenster gemessen: 200,
      Videoelement vorhanden, 1920 breit, 198 s. Das Video ist NICHT
      domainbeschraenkt; es lief in der Gegenprobe sogar ohne jede Domain.
      MERKE: Fremde Player nie mit einem Browser ohne Fenster auf
      Erreichbarkeit pruefen.
      Urspruengliche Begruendung: Vor dem Klick laedt NICHTS von Vimeo
      (kw-video.js) — ohne das braeuchte die Seite einen Consent-Banner.
      Der Auslöser MUSS .kw-medien-play heissen, daran haengt das Verhalten.
      kw-video.css formt diese Klasse aber zu einer dunklen Pille in der Mitte
      (transform, border-radius, backdrop-filter, box-shadow). Das wuerde die
      Figma-Optik zerstoeren, deshalb hier vollstaendig zurueckgesetzt: der
      Auslöser wird eine unsichtbare Flaeche ueber dem ganzen Standbild.
      Das Play-Symbol darunter hat pointer-events:none, liegt also nicht im Weg. */
.kwl-b002-video-08 .kw-medien-play{
  position:absolute; inset:0; left:0; top:0; z-index:4;
  display:block; width:100%; height:100%; min-height:0;
  margin:0; padding:0; gap:0;
  transform:none; border:0; border-radius:0;
  background:transparent; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  font:inherit; color:transparent; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.kwl-b002-video-08 .kw-medien-play:hover,
.kwl-b002-video-08 .kw-medien-play:active{
  background:transparent; transform:none;
}
.kwl-b002-video-08 .kw-medien-play:focus-visible{
  outline:3px solid var(--color-paper, #fff); outline-offset:-6px;
}
/* Der eingesetzte Rahmen fuellt die Flaeche vollstaendig. */
.kwl-b002-video-08 > iframe{ width:100%; height:100%; border:0; display:block; }

/* 3. Auszeichnungen: die zwei Platzhalter-Kacheln sind durch echte, SELBST
      GEHOSTETE Siegel ersetzt. Bewusst als Bild plus Link aufs
      Profil statt als Fremd-Widget: die Betapage hat keinen Consent-Banner,
      und ein Skript von provenexpert.com bzw. w.wsh.de waere ohne den ein
      Datenschutzverstoss. Preis dafuer: die Zahlen und das Datum im Siegel
      sind eingefroren und muessen vor dem Livegang neu geholt werden.
      Die dashed Platzhalter-Optik hing an [data-kw=b007-tile-01/02] und
      entfaellt mit den Attributen von selbst. */
.qual-siegel{ display:flex; align-items:center; justify-content:center; }
.qual-siegel a{ display:block; line-height:0; }
.qual-siegel img{ height:auto; max-width:100%; }

/* 4. Abschnitt "Drei Wege": statt der Dame die barrierefreie Dusche (Vorgabe aus der Abstimmung)
      . Der Platz ist hochformatig (Desktop 587x600, Handy 358x600),
      die Quelle liegt im Querformat 800x450 — ohne Verschiebung wuerde der
      Ausschnitt die Kabine verfehlen. Die Dusche sitzt links im Bild, deshalb
      20 % von links: auf dem Handy bleibt der Ausschnitt bei etwa 13-47 % der
      Bildbreite, die Kabine also vollstaendig im Bild.
      Der Marker heisst weiter b006-woman-11 — Schluessel werden nie von Hand
      umbenannt, daran haengen im Editor gespeicherte Inhalte. */
[data-kw="b006-woman-11"]{ object-position:20% 50%; }
/* 4a. Dusche-Bild so hoch wie die Textkarte daneben (Wunsch 11.09.2026).
      Das Buendel setzt die Flaeche fest auf 600px; die Karte mit sieben
      Vorteilen wird hoeher, das Bild endete sichtbar frueher. Jetzt dehnt es
      sich auf die Hoehe der Zeile, 600px bleiben die Untergrenze. Unter 1025px
      stehen Karte und Bild untereinander — dort bleibt es bei 600px. */
[data-kw="b006-woman-11"]{ height:auto; min-height:600px; align-self:stretch; }
@media (max-width:1024px){
  [data-kw="b006-woman-11"]{ height:600px; min-height:0; align-self:auto; }
}

/* 5. Vorher/Nachher: Schiebe-Vergleich (Kundenwunsch, Vorbild ist
      das Vergleichselement auf seniorenbad24.de/badewanne-zur-dusche-umbauen).
      Ersetzt die zwei Symbol-Kacheln in Abschnitt 4 und 5. Die beschreibenden
      Texte darunter sind entfallen — laut Abstimmung nicht benoetigt.

      Der Figure ist ein Raster (1fr 98px / 1fr 1fr), das Element nimmt deshalb
      beide Spalten der ersten Zeile; die Beleg-Zeile darunter bleibt.

      Bedient wird es mit einem echten <input type="range">: damit funktioniert
      es per Maus, Finger UND Tastatur (Pfeiltasten), ohne dass wir Zeigerlogik
      nachbauen. Der Regler liegt unsichtbar ueber der ganzen Flaeche, nur sein
      Griff ist sichtbar. Ohne JavaScript steht er in der Mitte und zeigt beide
      Haelften — es ist also nie kaputt, nur unbeweglich. */
.sb24-vgl{
  grid-column:1 / -1;
  position:relative; overflow:hidden;
  background:#e8e8e5;
  --sb24-schieber:50%;
}
.sb24-vgl__bild{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
/* Das Vorher-Bild liegt oben und wird von rechts her beschnitten. */
.sb24-vgl__bild--vorher{
  clip-path:inset(0 calc(100% - var(--sb24-schieber)) 0 0);
}
/* Die Pillen VORHER/NACHHER behalten ihre vorhandene Gestaltung (rot bzw.
   gruen), sie sassen aber beide oben links — hier wandert NACHHER nach rechts. */
.sb24-vgl__marke{ z-index:3; }
.sb24-vgl__marke--nachher{ left:auto; right:18px; }

.sb24-vgl__linie{
  position:absolute; top:0; bottom:0; left:var(--sb24-schieber);
  width:2px; margin-left:-1px; z-index:2;
  background:#fff; box-shadow:0 0 0 1px rgba(27,35,18,.18);
  pointer-events:none;
}
.sb24-vgl__regler{
  position:absolute; inset:0; z-index:4;
  width:100%; height:100%; margin:0; padding:0;
  background:transparent; border:0;
  -webkit-appearance:none; appearance:none;
  cursor:ew-resize; touch-action:pan-y;
}
.sb24-vgl__regler:focus{ outline:none; }
.sb24-vgl__regler:focus-visible{ outline:3px solid #fff; outline-offset:-6px; }
.sb24-vgl__regler::-webkit-slider-runnable-track{ background:transparent; border:0; }
.sb24-vgl__regler::-moz-range-track{ background:transparent; border:0; }
.sb24-vgl__regler::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:46px; height:46px; border-radius:50%;
  background:#fff; border:3px solid var(--color-brand, #95c11e);
  box-shadow:0 4px 14px rgba(27,35,18,.32);
  cursor:ew-resize;
}
.sb24-vgl__regler::-moz-range-thumb{
  width:40px; height:40px; border-radius:50%;
  background:#fff; border:3px solid var(--color-brand, #95c11e);
  box-shadow:0 4px 14px rgba(27,35,18,.32);
  cursor:ew-resize;
}
/* Zwei Pfeile im Griff, damit erkennbar ist, dass man schieben kann. */
.sb24-vgl::after{
  content:"\2039\00a0\203a";
  position:absolute; top:50%; left:var(--sb24-schieber);
  transform:translate(-50%,-50%);
  z-index:5; pointer-events:none;
  color:var(--color-dark, #1b2312);
  font:700 20px/1 system-ui, sans-serif;
}
/* 6. Kennzahlen: die gruenen Kacheln hingen an [data-kw^=b003-stat-], also an
      Markern auf den <li>. Die hat der Markierlauf entfernt (verschachtelt,
      die Kachel enthaelt Zahl und Beschriftung als eigene Marker) — deshalb
      war der Zaehler eine nackte Liste. Selektor jetzt auf .kwl-b003-stat.
      Hier nur der Umbruch: die Beschriftungen hatten max-width:190px in einer
      187px breiten Kachel, standen also randlos und brachen krumm.
      text-wrap:balance verteilt die Zeilen gleichmaessig. */
.kwl-b003-stat [data-kw^="b003-label-"]{
  max-width:none; padding-inline:10px;
  text-wrap:balance; hyphens:none;
}

/* 7. Fussnummer weiss (Kundenwunsch), damit sie zum weissen
      Nachbarknopf "Rueckruf anfordern" passt.
      ACHTUNG, gemessen: weiss auf dem Markengruen #95C11E ergibt 2,12 : 1.
      Vorher waren es 7,66 : 1. WCAG AA verlangt 4,5 : 1 — die Zahl ist damit
      deutlich schlechter lesbar, und zwar auf einer Seite fuer aeltere
      Menschen. Bewusst so gesetzt und zurueckgemeldet; ein dunkleres
      Knopfgruen (#5C7C0F, 4,83 : 1) waere der Ausweg. */
[data-kw="b015-phone-03"]{ color:#fff; }

/* 8. Schwebemenue: der Anrufen-Knopf winkt, sobald man stehen bleibt
      (Kundenwunsch). Der Takt kommt aus dem
      JavaScript: es setzt .sb24-winkt 180 ms nach der letzten Scroll-Bewegung
      und nimmt sie beim Scrollen weg. Dadurch startet die Animation im Moment
      des Anhaltens neu — der erste Stoss kommt sofort, danach alle 2 s.
      Bewegt wird die eigenstaendige translate-Eigenschaft, NICHT transform:
      transform traegt hier schon translateX(var(--kontakt-eingefahren)), das
      den Knopf halb aus dem Bild schiebt. translate verrechnet sich damit,
      transform wuerde es ueberschreiben und den Knopf ins Bild springen lassen.
      Nur ab 1025px: darunter ist das Menue eine Leiste am unteren Rand, dort
      wuerde ein Seitwaertsschub die Nachbarn ueberlappen. */
@media (min-width:1025px){
  @keyframes sb24-anrufen-winken{
    0%      { translate:0 0; }
    8%      { translate:-14px 0; }
    16%     { translate:0 0; }
    24%     { translate:-8px 0; }
    32%     { translate:0 0; }
    100%    { translate:0 0; }
  }
  [data-kw="b002-contact-phone-10"].sb24-winkt{
    animation:sb24-anrufen-winken 2s cubic-bezier(.34,.9,.36,1) infinite;
  }
}
/* Die Abschaltung MUSS hier wiederholt werden — eine Regel in custom.css
   ueberstimmt sonst die Ruecksicht des Design-Systems. */
@media (prefers-reduced-motion: reduce){
  [data-kw="b002-contact-phone-10"],
  [data-kw="b002-contact-phone-10"].sb24-winkt{ animation:none; translate:0 0; }
}

/* 9. Rechtstexte (Impressum, Datenschutzerklaerung).
      Inhalt Wort fuer Wort von seniorenbad24.de uebernommen, nur die
      Elementor-Huellen sind entfernt. Bewusst schlicht: eine lesbare
      Zeilenbreite und klare Abstaende, keine Gestaltung, die vom Text
      ablenkt. Kopf- und Fusszeile sind dieselben wie auf der Startseite,
      die Sprungmarken dort zeigen auf "/#…", sonst fuehren sie auf einer
      Unterseite ins Leere. */
.rechtstext{
  /* Kundenwunsch: am linken Rasterrand beginnen und etwa drei Viertel der
     Breite einnehmen. Der Abschnitt ist deshalb der normale 1200px-Container
     der Seite (fluchtet mit allen anderen Abschnitten), der Text darin ist auf
     900px begrenzt — genau drei Viertel davon — und sitzt linksbuendig. */
  width:min(100% - 48px, var(--container, 1200px));
  margin-inline:auto;
  padding:72px 0 88px;
  color:var(--color-copy, #42463f);
  font-size:16px; line-height:1.75;
}
.rechtstext > *{ max-width:min(100%, 900px); }
.rechtstext h1{
  margin:0 0 32px;
  color:var(--color-ink, #1c2118);
  font-size:clamp(30px, 4vw, 42px); line-height:1.15;
  hyphens:auto;
}
.rechtstext h2{
  margin:48px 0 14px;
  color:var(--color-ink, #1c2118);
  font-size:24px; line-height:1.25;
}
.rechtstext h3{ margin:32px 0 10px; font-size:19px; line-height:1.3;
  color:var(--color-ink, #1c2118); }
.rechtstext h4{ margin:24px 0 8px; font-size:16px;
  color:var(--color-ink, #1c2118); }
.rechtstext p{ margin:0 0 16px; }
.rechtstext ul, .rechtstext ol{ margin:0 0 18px; padding-left:1.4em; }
.rechtstext ul{ list-style:disc outside; }
.rechtstext ol{ list-style:decimal outside; }
.rechtstext li{ display:list-item; margin:0 0 8px; }
.rechtstext li::marker{ color:var(--color-brand, #95c11e); }
.rechtstext a{ color:var(--color-brand-deep, #7fa916); text-decoration:underline; }
.rechtstext a:hover, .rechtstext a:focus-visible{ text-decoration:none; }
/* Lange Adressen und Nummern duerfen umbrechen, sonst schieben sie auf dem
   Handy die ganze Seite in die Breite. */
.rechtstext p, .rechtstext li{ overflow-wrap:anywhere; }

/* ── Anpassungsrunde: vier Punkte aus der Kundenabstimmung ─────────────── */

/* A. Kennzahlen-Kacheln: mehr Luft zwischen Zahl und Beschriftung.
      Das Buendel setzt gap:4px; das steht zu eng. Nur der Abstand aendert
      sich, Kachelhoehe und Ausrichtung bleiben. */
.kwl-b003-stat{ gap:9px; }

/* B. Das runde Symbol neben den beiden Abschnitts-Ueberschriften.
      BEFUND: es war kein Icon, sondern ein TEXTZEICHEN im Fliesstext der
      Ueberschrift — einmal U+21A7 (Pfeil unter einem Balken), einmal U+21E9
      (in Unicode ausdruecklich ein HOHLER Pfeil). Beide Zeichen fehlen in
      Open Sans: gemessen stimmt die Glyphenbreite mit der Ersatzschrift
      ueberein bzw. entspricht dem Platzhalterkaestchen. Gezeichnet hat sie
      also eine Ersatzschrift, je nach Geraet anders.
      Zweitens lag das Zeichen INNERHALB des bearbeitbaren Ueberschriftfelds.
      Alles, was dort steht, laeuft bei jeder Textbearbeitung durch den
      Rich-Text-Editor — deshalb ging es wiederholt kaputt.
      LOESUNG: Symbol raus aus dem Textfeld, gezeichnet wird es hier am h2.
      Die Ueberschrift ist bereits ein Flex-Zeile mit gap, das ::before wird
      also automatisch das erste Element an genau der alten Stelle.
      Die Form ist eine einzige gefuellte Flaeche — kein stroke, damit die
      Spitze nicht verformt wird. */
:is(.kwl-b004-copy-02, .kwl-b005-copy-31) h2::before{
  content:"";
  flex:none;
  width:40px; height:40px;
  border-radius:50%;
  background:
    var(--color-brand, #95c11e)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231c2118' d='M10 3h4v9h5l-7 8-7-8h5z'/%3E%3C/svg%3E")
    center / 20px 20px no-repeat;
}

/* C. Vorzeile in denselben beiden Abschnitten.
      BEFUND: dort greift die Regel fuer ALLE Absaetze im Textbereich
      (:is(...) p{font-size:18px; color:var(--color-copy)}). Die Vorzeile ist
      ein <p class="eyebrow"> und wird davon mitgetroffen — die Regel hat die
      hoehere Spezifitaet. Es ist also kein Sonderstil, sondern ein
      Kollateraltreffer. Hier die Werte der uebrigen Vorzeilen der Seite
      wieder herstellen; der Selektor ist eine Stufe spezifischer. */
:is(.kwl-b004-copy-02, .kwl-b005-copy-31) p.eyebrow{
  font-size:14px;
  color:#4f5845;
}

/* D. Die zwei Knoepfe auf der grauen Flaeche im Fuss tragen eine Pillenform,
      alle uebrigen Knoepfe der Seite 8px. Angeglichen wird AUSSCHLIESSLICH
      die Rundung — Farbe, Groesse, Innenabstand und Schrift bleiben. */
[data-kw="b015-phone-03"],
[data-kw="b015-contact-04"]{ border-radius:8px; }

/* ── KI-Berater: Zwei-Klick-Fassade ────────────────────────────────────────
   Der Dienst erhebt Name, E-Mail und Telefonnummer und laeuft ueber einen
   Drittanbieter. Deshalb laedt VOR dem Klick nichts von dort: Standbild und
   Text liegen selbst gehostet auf dieser Seite, erst der Klick holt den
   Dienst. Ohne das braeuchte die Seite einen Consent-Banner.
   Lage wie auf der alten Seite: unten rechts, nicht mittig am Rand.
   Unter 1025px sitzt dort schon der Schnellkontakt-Knopf; deshalb weicht die
   Karte auf dieser Breite nach unten links aus und wird ein runder Knopf.
   Der Alt-Text benennt die kuenstliche Herkunft, sichtbar tut es das Schild. */
/* Groesse auf den Stand der Kundenseite gebracht (Wunsch 14.09.2026): dort
   ist die Videoflaeche 154x212, hier waren es 126x178. Gerechnet wird auf die
   KARTE, nicht auf die Videoflaeche: box-sizing ist border-box, der 3px-Rahmen
   zaehlt also mit. 154+6=160 breit, 212+6=218 hoch, macht 160/218 = 80/109.
   Nur am Desktop wirksam — ab 1024px abwaerts ueberschreibt die Media-Query
   unten Breite und Seitenverhaeltnis (62px-Kreis unten links). */
/* Weiter nach links gerueckt (Wunsch 22.09.2026): right war 14px, jetzt 50px,
   also 36px mehr Abstand zum Fensterrand. Nur am Desktop wirksam - ab 1024px
   abwaerts gilt die Media-Query weiter unten (Kreis unten links). */
.sb24-avatar{
  position:fixed; z-index:19;
  top:auto; right:50px; bottom:calc(var(--sb24-fremdleiste, 52px) + 20px);
  width:160px; aspect-ratio:80/109;
  border-radius:14px; overflow:hidden;
  border:3px solid var(--color-brand, #95c11e);
  box-shadow:0 8px 22px rgba(27,35,18,.28);
  background:#dfe4d6;
  transition:width .24s ease, border-radius .24s ease;
}
/* Eingeklappt: runder Knopf an derselben Ecke. Der Besucher soll den Berater
   wegraeumen koennen, ohne ihn zu verlieren. */
.sb24-avatar.ist-klein{
  width:56px; aspect-ratio:1; border-radius:50%; border-width:2px;
}
@media (prefers-reduced-motion:reduce){
  .sb24-avatar{ transition:none; }
}

/* Die Bildspur liegt ueber dem Standbild und wird erst sichtbar, wenn sie
   wirklich laeuft. Faellt sie aus — kein WebM, Datensparmodus, "Bewegung
   reduzieren", abgelehnte Wiedergabe — bleibt das Standbild stehen und
   niemand sieht eine schwarze Flaeche. Ton gibt es nicht: die Datei hat
   ueberhaupt keine Tonspur. */
.sb24-avatar__video{
  position:absolute; inset:0; width:100%; height:100%; z-index:1;
  object-fit:cover; object-position:50% 22%; display:block;
  opacity:0; transition:opacity .45s ease;
}
.sb24-avatar.laeuft .sb24-avatar__video{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .sb24-avatar__video{ transition:none; }
}
.sb24-avatar__bild{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 22%; display:block;
}
.sb24-avatar__text{
  position:absolute; left:0; right:0; bottom:8px; z-index:2;
  padding:0 8px; text-align:center;
  color:#fff; font-weight:700; font-size:12px; line-height:1.25;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
/* Zwei getrennte Spans, je Breite einer sichtbar. Bewusst NICHT ein Span mit
   Auszeichnung darin: der Markierlauf macht daraus ein Textfeld, und beim
   Bearbeiten im Editor fielen innere Elemente heraus. */
/* Ausloeser deckt die ganze Karte. Text ist der Name fuer Screenreader,
   sichtbar ist er nicht — die Karte selbst zeigt ihn schon. */
.sb24-avatar__start{
  position:absolute; inset:0; z-index:3;
  width:100%; height:100%; margin:0; padding:0;
  border:0; background:transparent; cursor:pointer;
  font-size:0; color:transparent; overflow:hidden;
  -webkit-appearance:none; appearance:none;
}
.sb24-avatar__start:focus-visible{ outline:3px solid #fff; outline-offset:-6px; }

/* Wegklappen und Zurueckholen sind zwei getrennte Knoepfe, nicht ein
   umschaltender: so hat jeder einen eindeutigen Namen und ist immer nur der
   eine sichtbar. Ohne JavaScript erscheint "ist-klein" nie, der Hol-Knopf
   bleibt also verborgen und die Karte laesst sich nicht wegklicken.
   26 px erfuellen die Mindestgroesse fuer Bedienelemente (24 px). */
.sb24-avatar__klein,
.sb24-avatar__gross{
  position:absolute; z-index:5; margin:0; padding:0;
  border:0; cursor:pointer; overflow:hidden;
  font-size:0; color:transparent; line-height:0;
  -webkit-appearance:none; appearance:none;
}
.sb24-avatar__klein{
  top:5px; right:5px; width:26px; height:26px; border-radius:50%;
  background:rgba(27,35,18,.62);
}
.sb24-avatar__klein:hover{ background:rgba(27,35,18,.85); }
.sb24-avatar__klein::before{
  content:""; position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:12px; height:2.5px; border-radius:2px; background:#fff;
}
/* Im eingeklappten Zustand ist die ganze Flaeche der Hol-Knopf; das Pluszeichen
   sitzt dort, wo vorher das Minus stand. */
.sb24-avatar__gross{
  display:none; inset:0; width:100%; height:100%;
  border-radius:inherit; background:transparent;
}
.sb24-avatar__gross::before{
  content:""; position:absolute; top:2px; right:2px; width:20px; height:20px;
  border-radius:50%; background:rgba(27,35,18,.72)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M11 5h2v14h-2zM5 11h14v2H5z'/%3E%3C/svg%3E")
    center / 12px 12px no-repeat;
}
.sb24-avatar__klein:focus-visible,
.sb24-avatar__gross:focus-visible{ outline:3px solid #fff; outline-offset:-4px; }

.sb24-avatar.ist-klein .sb24-avatar__klein,
.sb24-avatar.ist-klein .sb24-avatar__start,
.sb24-avatar.ist-klein .sb24-avatar__text{ display:none; }
.sb24-avatar.ist-klein .sb24-avatar__gross{ display:block; }
.sb24-avatar.ist-klein .sb24-avatar__bild,
.sb24-avatar.ist-klein .sb24-avatar__video{ object-position:50% 16%; }

/* Unter 1025px: kleiner runder Knopf statt Karte. Eine 104px-Karte lag dort
   ueber dem Knopf "Leistungen ansehen" — ein schwebendes Element verdeckt immer
   irgendetwas, also muss es so klein sein, dass es nichts Wichtiges trifft.
   Nach unten rechts kann sie hier NICHT: dort sitzt der Schnellkontakt-Knopf,
   und seine Liste faehrt beim Oeffnen nach oben auf. Deshalb unten links.
   Die Beschriftung entfaellt, der Screenreader-Name am Ausloeser bleibt. */
@media (max-width:1024px){
  .sb24-avatar{
    top:auto; right:auto;
    left:14px; bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    width:62px; aspect-ratio:1; border-radius:50%; border-width:2px;
  }
  .sb24-avatar__bild{ object-position:50% 16%; }
  .sb24-avatar__text{ display:none; }
  /* Hier ist die Karte schon ein kleiner Knopf — noch kleiner zu klappen
     braeuchte niemand, und das Minus verdeckte das halbe Gesicht. Ein auf
     dem grossen Bildschirm eingeklappter Zustand faellt damit weg. */
  .sb24-avatar__klein,
  .sb24-avatar__gross{ display:none; }
  .sb24-avatar.ist-klein{ width:62px; aspect-ratio:1; }
  .sb24-avatar.ist-klein .sb24-avatar__start,
  .sb24-avatar.ist-klein .kw-ki-badge{ display:block; }
  /* Im Kreis passt "KI-Berater" nicht auf eine Zeile — dort nur "KI". */
  }

/* Der Dienst laeuft nach dem Klick in einer eigenen Ebene, nicht in der Karte:
   35 Fragen brauchen Platz, und in 132px waere es unbenutzbar. */
.sb24-va-ebene{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(20,26,14,.72);
}
.sb24-va-ebene iframe{
  width:min(100%, 440px); height:min(100%, 780px);
  border:0; border-radius:16px; background:#000;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.sb24-va-zu{
  position:absolute; top:16px; right:16px;
  min-width:44px; min-height:44px; padding:0 14px;
  border:0; border-radius:999px; cursor:pointer;
  background:#fff; color:var(--color-dark, #1b2312);
  font-weight:700; font-size:14px;
}
.sb24-va-zu:focus-visible{ outline:3px solid var(--color-brand, #95c11e); outline-offset:3px; }

/* KI-Kennzeichnung auf der Berater-Karte.
   Die Klasse ist hausweit reserviert und wird von den Werkzeugen nicht
   markiert; sie bleibt unangetastet. Hier bekommt sie nur ihre Lage und
   genug Kontrast, damit sie auf dem Bild lesbar bleibt.
   Auf der schmalen Breite schrumpft die Karte zu einem runden Knopf —
   dort sitzt die Kennzeichnung unten mittig und wird kleiner. */
.sb24-avatar .kw-ki-badge{
  position:absolute; top:6px; left:6px; z-index:4;
  padding:2px 7px; border-radius:999px;
  background:rgba(27,35,18,.82); color:#fff;
  font-size:9px; font-weight:700; letter-spacing:.06em; line-height:1.5;
  pointer-events:none;
}
/* Eingeklappt gilt dasselbe wie auf dem kleinen Bildschirm: im Kreis ist oben
   links kein Platz, dort sitzt das Pluszeichen. Die Kennzeichnung bleibt in
   jedem Zustand sichtbar — auch der Knopf zeigt ein kuenstliches Bild. */
.sb24-avatar.ist-klein .kw-ki-badge{
  top:auto; left:50%; bottom:2px; transform:translateX(-50%);
  padding:1px 6px; font-size:8px;
}
@media (max-width:1024px){
  .sb24-avatar .kw-ki-badge{
    top:auto; left:50%; bottom:2px; transform:translateX(-50%);
    padding:1px 6px; font-size:8px;
  }
}
/* KI-Huelle um das Hero-Bild (11.09.2026).
   Kennzeichnet der Website-Editor ein Inhaltsbild als KI-Foto, packt er es
   samt AI-Zeichen in <div class="kw-medien kw-ki-traeger"> mit
   style="display:block;position:relative" (Vorschau: kw-site-bridge.js,
   Speichern: kw-api.php kw_ki_badge_img). Die Hero-Regel im Buendel greift
   aber nur auf das DIREKTE Kind [data-block="002"]>[data-kw=b002-media-01]
   — mit der Huelle dazwischen fiel das Bild in den Textfluss und schob den
   ganzen Hero auseinander.
   Hier uebernimmt die Huelle die Lage des Bildes. position braucht
   !important, weil der Editor position:relative inline setzt.
   Die Huelle ist nur so hoch wie die sichtbare Bildflaeche bis zum weissen
   Bogen ([data-block="002"]:after beginnt bei 760px, bis 1024px bei 470px);
   das Bild selbst behaelt 908px bzw. 570px. So landet das AI-Zeichen des
   Editors in seiner Standardlage unten rechts UEBER dem Bogen statt dahinter.
   Keinen z-index an die Huelle: sonst bildete sie eine eigene Ebene und das
   Zeichen laege unter dem Weissverlauf (z-index 1). Aendert sich Bildhoehe
   oder Bogen im Buendel, hier mitziehen. */
[data-block="002"] > .kw-ki-traeger[data-kw-medien="b002-media-01"]{
  position:absolute !important; top:0; left:0; right:0; height:760px;
}
[data-block="002"] > .kw-ki-traeger[data-kw-medien="b002-media-01"] [data-kw="b002-media-01"]{
  position:absolute; top:0; left:0; z-index:0;
  width:100%; height:908px; border:0;
  object-fit:cover; object-position:center top;
}
[data-block="002"] > .kw-ki-traeger[data-kw-medien="b002-media-01"] > .kw-ki-badge{ z-index:3; }
@media (max-width:1024px){
  [data-block="002"] > .kw-ki-traeger[data-kw-medien="b002-media-01"]{ height:470px; }
  [data-block="002"] > .kw-ki-traeger[data-kw-medien="b002-media-01"] [data-kw="b002-media-01"]{ height:570px; }
}
/* Google-Bewertungen per Hub-Lauf (11.09.2026, Spec 2026-09-08-google-bewertungen).
   Der Hub holt die Werte taeglich ueber DataForSEO und schreibt sie per kw-api
   in Marker b<block>-google-… (Wert, Sterne, Anzahl, Link, Verifiziert;
   Karten k1..k3 mit Name, Initialen, Sterne, Text).
   Marker duerfen nicht verschachtelt sein. Die frueheren Kasten-Marker
   b002-rating-07, b004-proof-19 und b005-proof-29 sind deshalb weg; die
   Buendel-Regeln, die an ihnen hingen, ziehen hier wortgleich auf die neuen
   Klassen .sb24-bewertung und .sb24-beleg um (Reihenfolge wie im Buendel).
   Das Raster des Heros steht weiter unten im Block kw-feinschliff. */
.sb24-bewertung{ width:763px; min-height:72px; margin:26px auto 0; padding-top:20px; font-size:17px; font-weight:700; }
.sb24-bewertung:before{ color:#d99925; content:"\2605\2605\2605\2605\2605"; letter-spacing:2px; margin-right:12px; }
.sb24-bewertung{ align-items:center; gap:14px; width:max-content; min-height:62px; margin-top:22px; padding-top:0; font-size:13px; font-weight:400; display:flex; }
.sb24-bewertung:before{ display:none; }
.sb24-beleg{ background:#fff; border-top:1px solid #dce1d3; grid-column:1/-1; align-items:center; gap:14px; padding:0 34px; font-size:13px; display:flex; }
@media (max-width:1024px){
  .sb24-bewertung{ width:100%; flex-wrap:wrap; justify-content:center; }
}
@media (max-width:390px){
  .sb24-bewertung{ width:100%; }
  .sb24-beleg{ padding-inline:14px; }
}
/* "Verifiziertes Unternehmen" liefert der Lauf — leer, wenn Google das Profil
   nicht als bestaetigt fuehrt; dann verschwindet die Angabe samt Zeichen. */
.testimonial-hero .verified:empty{ display:none; }
.testimonial-hero .verified::before{ content:"\273F\00a0"; }
/* Links aufs Google-Profil und auf die einzelne Rezension: Farbe der Umgebung. */
.testimonial-hero a[data-kw="b011-google-link"]{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.review-head a[data-kw^="b011-google-k"]{ color:inherit; text-decoration:none; }
.review-head a[data-kw^="b011-google-k"]:hover{ text-decoration:underline; }
/* /kw-sb24-anpassungen */

/* kw-rundgang v1 */
/* Abschnitt „3D-Rundgang" zwischen FAQ und Kontaktformular.
   Der Google-Rahmen wird NICHT beim Seitenaufruf geladen: in der Buehne steht
   zuerst nur das eigene Vorschaubild, der Rahmen entsteht erst auf Klick
   (siehe rundgang() in js/sb24-anpassungen.js). */
.sec-rundgang{
  /* Dieselbe Flaeche wie der FAQ-Abschnitt darueber: beide Abschnitte sollen
     als ein durchgehendes Band lesen, deshalb kein eigener Farbton. */
  background: var(--color-mist, #f3f8df);
  color: var(--color-copy, #42463f);
  font-family: var(--font-sans, "Open Sans", Arial, sans-serif);
  /* Oben wenig Luft: der FAQ-Abschnitt darueber bringt seinen eigenen
     Fussabstand mit, und auf einer durchgehenden Flaeche addieren sich beide
     sonst zu einer Luecke, die wie ein Fehler aussieht. */
  padding: clamp(16px, 2vw, 32px) 20px clamp(56px, 7.5vw, 104px);
}
.sec-rundgang *,
.sec-rundgang *::before,
.sec-rundgang *::after{ box-sizing: border-box; }
/* Ohne !important hebt eine Layout-Regel das Verstecken wieder auf. */
.sec-rundgang [hidden]{ display: none !important; }

.sec-rundgang .rundgang-innen{
  max-width: var(--container, 1200px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.sec-rundgang .rundgang-eyebrow{
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-muted, #73776f);
}

.sec-rundgang .rundgang-titel{
  margin: 0 0 16px;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.18;
  font-weight: 600;
  color: var(--color-ink, #1c2118);
}
.sec-rundgang .rundgang-akzent{ color: var(--color-brand, #95c11e); }

.sec-rundgang .rundgang-lead{
  margin: 0 0 24px;
  font-size: clamp(17px, 1.3vw, 18px);
  line-height: 1.65;
}

.sec-rundgang .rundgang-liste{
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.sec-rundgang .rundgang-liste li{
  position: relative;
  padding-left: 36px;
  font-size: clamp(16px, 1.2vw, 17px);
  line-height: 1.5;
  color: var(--color-ink, #1c2118);
}
.sec-rundgang .rundgang-liste li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-brand, #95c11e);
}
.sec-rundgang .rundgang-liste li::after{
  content: "";
  position: absolute;
  left: 6px;
  top: 7px;
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.sec-rundgang .rundgang-fuss{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-muted, #73776f);
}

.sec-rundgang .rundgang-rahmen{
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card, 18px);
  overflow: hidden;
  background: var(--color-line, #e2e6db);
  box-shadow: var(--shadow-card, 0 14px 34px rgba(27, 35, 18, .12));
}
@supports not (aspect-ratio: 16 / 10){
  .sec-rundgang .rundgang-rahmen::before{ content: ""; display: block; padding-top: 62.5%; }
}
.sec-rundgang .rundgang-buehne{ position: absolute; inset: 0; }
.sec-rundgang .rundgang-bild{ width: 100%; height: 100%; object-fit: cover; display: block; }
.sec-rundgang .rundgang-eingebettet{ width: 100%; height: 100%; display: block; border: 0; }

.sec-rundgang .rundgang-tor{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 2.2vw, 24px);
  background:
    linear-gradient(to top, rgba(0, 0, 0, .88) 0, rgba(0, 0, 0, .80) 16%, rgba(0, 0, 0, .14) 40%, rgba(0, 0, 0, 0) 58%);
}

.sec-rundgang .rundgang-chip{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}
.sec-rundgang .rundgang-icon{ display: inline-flex; flex: 0 0 auto; color: var(--color-brand, #95c11e); }

.sec-rundgang .rundgang-leiste{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

/* Masse und Rundung wie die uebrigen Knoepfe der Seite. */
.sec-rundgang .rundgang-knopf{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-control, 8px);
  background: var(--color-brand, #95c11e);
  /* Dunkle Schrift auf der Markenflaeche: weiss erreicht auf diesem Gruen nur
     2,12:1 und faellt damit unter die Lesbarkeitsschwelle. */
  color: var(--color-ink, #1c2118);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease;
}
.sec-rundgang .rundgang-knopf:hover{ background: var(--color-brand-deep, #7fa916); }
.sec-rundgang .rundgang-knopf:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.sec-rundgang .rundgang-hinweis{
  flex: 1 1 240px;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .92);
}

@media (max-width: 880px){
  .sec-rundgang .rundgang-innen{ grid-template-columns: 1fr; }
  .sec-rundgang .rundgang-rahmen{ aspect-ratio: 16 / 9; }
}

@media (max-width: 620px){
  .sec-rundgang .rundgang-rahmen{ aspect-ratio: 4 / 5; }
  .sec-rundgang .rundgang-leiste{ flex-direction: column; align-items: stretch; }
  .sec-rundgang .rundgang-knopf{ width: 100%; }
  .sec-rundgang .rundgang-hinweis{ flex: 0 0 auto; }
}

/* Die Abschaltung muss hier wiederholt werden, sonst ueberstimmt die Regel
   oben die globale Reduzierung. */
@media (prefers-reduced-motion: reduce){
  .sec-rundgang .rundgang-knopf{ transition: none; }
}
/* /kw-rundgang */

/* kw-konfigurator v1 */
/* Schrittansichten des Konfigurators im Abschnitt "Passgenaue Loesungen".
   Ergaenzt nur das Innere der bestehenden Karte; Section, Karte, Optionskacheln
   und Knopfformen stammen aus dem gesetzten Design und bleiben unangetastet.
   Vokabular der Seite: 8 px Radius, 48 px Knoepfe, 52 px Felder, Fokus rot. */

/* Ohne das bleibt ein versteckter Schritt sichtbar: die Layout-Regel der
   Optionskacheln (display:grid) schlaegt die Browser-Regel fuer [hidden].
   Gilt fuer alles im Konfigurator, auch fuer Knoepfe und Meldungen. */
[data-sb24-konfigurator] [hidden]{ display:none !important; }

/* Eigene Strichsymbole in derselben gruenen Kreisflaeche wie die PNG-Symbole */
.kwl-b010-options-05 label>span svg{ width:22px; height:22px; }

/* Sachhinweis unter einer Frage, im Ton der vorhandenen Erklaerzeile */
.config-hinweis{ display:flex; gap:10px; align-items:flex-start; margin:-18px 0 30px;
  color:var(--color-copy,#42463f); font-size:15px; line-height:1.5; }
.config-hinweis svg{ flex:0 0 20px; width:20px; height:20px;
  color:var(--color-brand-deep,#7fa916); margin-top:3px; }

/* Fehlermeldung zur Frage, sitzt zwischen Optionen und Fusszeile */
.config-fehler{ display:flex; gap:8px; align-items:flex-start; margin:-22px 0 22px;
  color:var(--color-danger,#df2f26); font-size:15px; font-weight:600; }
.config-fehler svg{ flex:0 0 20px; width:20px; height:20px; margin-top:3px; }
.config-fehler--feld{ margin:6px 0 0; }

/* Kontaktschritt: Felder wie im Kontaktformular der Seite */
.config-schritt{ border:0; padding:0; margin:22px 0 36px; }
.config-schritt legend{ margin-bottom:20px; font-size:16px; font-weight:700; }
.config-felder{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.config-feld{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.config-feld--voll{ grid-column:1/-1; }
.config-feld label{ font-size:15px; font-weight:700; }
.config-feld .config-optional{ font-weight:400; color:var(--color-muted,#73776f); }
.config-feld input{ font:inherit; font-size:16px; width:100%; min-height:52px; padding:0 16px;
  border-radius:8px; border:2px solid #f4f6ef; background:#f4f6ef; color:var(--color-ink,#1c2118); }
.config-feld input::placeholder{ color:#7a8074; }
.config-feld input:focus-visible{ outline:3px solid var(--color-danger,#df2f26); outline-offset:2px; background:#fff; }
.config-feld input[aria-invalid="true"]{ border-color:var(--color-danger,#df2f26); background:#fff; }
.config-feld .config-erklaerung{ margin:0; font-size:14px; color:var(--color-copy,#42463f); }
.config-zustimmung{ display:flex; gap:12px; align-items:flex-start; margin-top:20px;
  padding:14px 16px; border-radius:8px; border:2px solid #d8ddd0; }
.config-zustimmung input{ width:24px; height:24px; margin:2px 0 0; flex:0 0 24px;
  accent-color:var(--color-brand-deep,#7fa916); }
.config-zustimmung label{ font-size:15px; line-height:1.5; }
.config-zustimmung a{ color:var(--color-ink,#1c2118); font-weight:600; }
.config-zustimmung.ist-fehlerhaft{ border-color:var(--color-danger,#df2f26); }

/* Rueckblick auf die Antworten im Kontaktschritt */
.config-rueckblick{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.config-rueckblick li{ display:inline-flex; align-items:center; gap:8px;
  background:var(--color-mist,#f3f8df); border-radius:999px; padding:6px 8px 6px 14px; font-size:14px; }
.config-rueckblick li strong{ font-weight:600; }
.config-rueckblick button{ font:inherit; font-size:13px; font-weight:600;
  color:var(--color-brand-deep,#7fa916); background:#fff; border:0; border-radius:999px;
  padding:4px 10px; cursor:pointer; }
.config-rueckblick button:hover{ color:var(--color-dark,#1b2312); }
.config-rueckblick button:focus-visible{ outline:3px solid var(--color-danger,#df2f26); outline-offset:2px; }

/* Zurueck-Knopf: bisher ohne Gestaltung, hier im Mass des Weiter-Knopfs */
.config-zurueck{ font:inherit; font-weight:700; min-height:48px; min-width:116px; padding:0 20px;
  border-radius:8px; border:2px solid #d8ddd0; background:#fff; color:var(--color-ink,#1c2118);
  cursor:pointer; margin-right:12px; }
.config-zurueck:hover{ border-color:var(--color-ink,#1c2118); }
.config-zurueck:focus-visible,
.kwl-b010-next-10:focus-visible{ outline:3px solid var(--color-danger,#df2f26); outline-offset:3px; }
.kwl-b010-next-10{ cursor:pointer; padding:0 22px; }
.kwl-b010-next-10:hover{ background:var(--color-danger-hover,#c9251d); }
.config-footer>div{ display:flex; }

/* Bestaetigung innerhalb der Karte */
.config-fertig{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; margin:22px 0 36px; }
.config-fertig .config-siegel{ width:56px; height:56px; border-radius:50%;
  background:var(--color-brand,#95c11e); color:var(--color-dark,#1b2312); display:grid; place-items:center; }
.config-fertig .config-siegel svg{ width:28px; height:28px; }
.config-fertig h4{ margin:0; font-size:22px; font-weight:700; line-height:1.3; outline:none; }
.config-fertig p{ margin:0; color:var(--color-copy,#42463f); }

/* Solange keine Anbindung besteht, muss die Bestaetigung sagen, dass nichts
   versendet wurde — sonst ist die Zusage eines Rueckrufs unwahr. Faellt weg,
   sobald das Formular ein Ziel hat. */
.config-proto{ border:2px dashed var(--color-danger,#df2f26); border-radius:8px;
  padding:12px 14px; font-size:15px; background:#fff7f6; }
.config-proto strong{ color:var(--color-danger,#df2f26); }
.config-proto a{ color:var(--color-ink,#1c2118); font-weight:700; }

/* Nach einem Schrittwechsel liegt der Fokus auf der Frage; dort soll kein
   Rahmen erscheinen, der wie ein Eingabefeld aussieht. */
.kwl-b010-options-05 legend:focus,
.config-schritt legend:focus{ outline:none; }

@media (max-width:720px){
  .config-felder{ grid-template-columns:1fr; }
  .config-rueckblick li{ width:100%; justify-content:space-between; }
  .config-rueckblick li strong{ flex:1 1 auto; text-align:left; }
}
/* Die Fusszeile auf schmalen Breiten steht im Block kw-feinschliff. */
/* /kw-konfigurator */

/* kw-feinschliff v1 */

/* ── Haken der Vorteilslisten ──────────────────────────────────────────────
   Der Haken war das Textzeichen U+2713. Open Sans fuehrt es nicht, gezeichnet
   hat es also eine Ersatzschrift — auf jedem Geraet eine andere und deutlich
   verschnoerkelt. Jetzt ein gezeichneter Haken: zwei gerade Strecken, runde
   Enden, keine Schrift im Spiel. Selbe Ursache und selbe Behebung wie bei den
   Pfeilen in 004 und 005. Kreis, Groesse und Lage bleiben unangetastet. */
:is(.kwl-b004-benefits-05, .kwl-b005-benefits-33) li::before,
.kwl-b008-benefits-04 li::before{
  content:"";
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2312' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:13px 13px;
}
/* Auf der gruenen Flaeche ist der Kreis weiss — dort traegt der Haken selbst
   die Markenfarbe. Kontrast des Gruens auf Weiss: 3,4:1; als reines Sinnbild
   neben dem Text zulaessig, der Text daneben sagt dasselbe. */
.kwl-b008-benefits-04 li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fa916' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* ── Siegelblock ueber dem Kundenstimmen-Bild ──────────────────────────────
   Der Block stand komplett auf 16px und verschwand auf einem 1200x410-Bild
   unter einer 46px-Ueberschrift. Er traegt die Google-Bewertung und ist damit
   der Vertrauensanker des Abschnitts — er bekommt Groesse nach Rang.
   Fluide Werte, damit der Block auf 390px nicht aus dem Bild laeuft. */
.testimonial-hero h3{
  font-size:clamp(21px, 2.4vw, 34px); font-weight:700; line-height:1.2;
  margin:2px 0 6px;
}
.testimonial-hero p{
  font-size:clamp(14px, 1.25vw, 19px); line-height:1.5;
}
.testimonial-hero .rating-stars{
  font-size:clamp(17px, 1.8vw, 26px); letter-spacing:.04em; vertical-align:-.08em;
}
.testimonial-hero .google-badge{
  font-size:clamp(14px, 1.15vw, 17px); padding:7px 16px;
}
.testimonial-hero .verified{
  font-size:clamp(14px, 1.15vw, 17px);
}

/* ── Bewertung in der Buehne: Sterne ueber den Text ────────────────────────
   Vorher eine Zeile: Koepfe, Sterne, Text nebeneinander. Jetzt stehen die
   Sterne UEBER dem Bewertungstext, die Koepfe bleiben links daneben.
   Als Raster gebaut und nicht mit einem zusaetzlichen Element: der Traeger
   ist ein Marker, sein Inneres gehoert dem Editor. */
.sb24-bewertung{
  display:grid; grid-template-columns:auto auto;
  grid-template-areas:"koepfe sterne" "koepfe text";
  justify-content:center; align-items:center;
  column-gap:14px; row-gap:0;
}
.sb24-bewertung > [data-rating-avatars]{ grid-area:koepfe; }
.sb24-bewertung > .rating-stars{ grid-area:sterne; justify-self:start; align-self:end; }
.sb24-bewertung > span:last-child{ grid-area:text; justify-self:start; align-self:start; }

/* ── Fusszeile des Konfigurators auf schmalen Breiten ──────────────────────
   Die Seite stapelt diese Zeile erst ab 390px. Dazwischen stand der Satz
   "Kostenlos & Unverbindlich" neben der Knopfsaeule und lag darueber.
   Gestapelt wird deshalb schon ab 720px — derselben Breite, ab der auch die
   Kontaktfelder einspaltig werden. */
@media (max-width:720px){
  .config-footer{ flex-direction:column; align-items:stretch; gap:16px; }
  .config-footer>div{ flex-direction:column-reverse; gap:12px; }
  .config-zurueck{ width:100%; margin:0; }
  .kwl-b010-next-10{ width:100%; align-self:stretch; }
}

/* /kw-feinschliff */

/* kw-runde2 v1 — Kundenfeedback vom 14.09.2026 ──────────────────────────
   A Kopfzeile klebt · B/C Raster 009+010 · E Reihenfolge in Schritt 6
   G Produktkarten wachsen nicht mit · I sechster Navigationspunkt        */

/* ── A · Die Kopfzeile klebt, aber nur die Logo-/Navigationszeile ────────
   Der negative Versatz schiebt die Servicezeile(n) beim Scrollen aus dem
   Bild; stehen bleibt genau die Zeile mit Logo und Navigation.
   Gemessen am 14.09.2026: die ganze Kopfzeile waere mobil 164px = 19,4%
   der Viewporthoehe gewesen, die Navigationszeile allein ist 64px = 7,6%.
   Am Desktop 92px von 900px = 10,2%.
   Unter 640px stehen Telefon und Oeffnungszeiten in ZWEI Zeilen, deshalb
   dort 100px statt 50px Versatz. */
[data-block="001"]{
  position:sticky;
  top:calc(-1 * var(--kw-kopf-service, 50px));
  z-index:30;
}
@media (max-width:640px){
  [data-block="001"]{ --kw-kopf-service:100px; }
}

/* Ohne das landet JEDER Ankersprung unter der klebenden Zeile — die Seite
   hat sechs davon. Der Wert ist die STEHEN BLEIBENDE Hoehe, nicht die
   Kopfhoehe: 92px am Desktop, 64px ab 1024px abwaerts. */
html{ scroll-padding-top:var(--kw-kopf-klebt, 92px); }
@media (max-width:1024px){
  html{ --kw-kopf-klebt:64px; }
}

/* ── B + C · Inhalt von 009 und 010 auf die Rasterbreite der Karte ───────
   Die Ausrichtung war von Anfang an gewollt: ab 1732px Fensterbreite
   ergibt das Grundpolster von 230px genau die Kartenkante
   ((1660 - 1200) / 2 = 230). Die Media-Queries ueberschreiben es aber mit
   festen Stufen (120px, 80px) und brechen sie dadurch.
   Statt weiterer fester Stufen hier die Rechnung selbst: die halbe
   Differenz zwischen Plattenbreite und Kartenbreite.
   GRENZE, bewusst in Kauf genommen: unterhalb von etwa 1272px ist die
   Platte (100% - 72px) schmaler als die Karte (1200px) — dort ist eine
   exakte Deckung geometrisch unmoeglich, ohne der Platte ihren Einzug zu
   nehmen. Das Polster faellt deshalb auf 24px zurueck. Gemessen: bei
   1440px exakt deckungsgleich, bei 1280px 20px Rest (vorher 76px). */
@media (min-width:1272px){
  [data-block="009"],
  [data-block="010"]{
    padding-inline:max(24px, calc((min(1660px, 100% - 72px) - min(var(--container, 1200px), 100% - 48px)) / 2));
  }
}

/* ── C · Die gewonnene Breite bekommt NUR der Konfigurator ───────────────
   Die zweite Spalte war proportional (.65fr) und waere mitgewachsen.
   357px ist ihre gemessene Breite bei 1440px vor der Aenderung. */
@media (min-width:1025px){
  [data-block="010"]{ grid-template-columns:minmax(0,1fr) 357px; }
}

/* ── G · Wird der Konfigurator durch Schritt 6 hoeher, wachsen die beiden
   Karten daneben NICHT mit (Kundenwunsch). Ohne align-self dehnt das
   Raster sie auf die Zeilenhoehe. min-height haelt sie untereinander
   gleich hoch — ohne sie waeren es 341px und 361px. */
@media (min-width:1025px){
  [data-block="010"] .kwl-b010-product-15,
  [data-block="010"] .kwl-b010-product-17{
    align-self:start;
    min-height:361px;
  }
}

/* ── E · "Wie erreichen wir Sie?" steht jetzt unter den Aenderungs-
   moeglichkeiten und direkt ueber den Feldern.
   Umgesetzt im HTML, nicht per CSS-order: ein <legend> MUSS das erste
   Kind eines <fieldset> sein, und Chrome behandelt es nicht als
   Flex-Element — eine order-Regel bleibt dort wirkungslos (am 14.09.2026
   nachgemessen). Die Feldgruppe traegt ihren Namen jetzt ueber
   aria-labelledby, das JS findet die Ueberschrift ueber seinen bereits
   vorhandenen h4-Fallback (sb24-anpassungen.js:342). */
.config-schritt h4{ margin:0 0 20px; font-size:16px; font-weight:700; }
.config-schritt h4:focus{ outline:none; }

/* ── I · Sechster Navigationspunkt "Haeufige Fragen"
   Die Spaltenzahl ist fest verdrahtet; ohne diese Zeile bricht das
   Raster. Nur oberhalb von 1024px noetig — darunter ist die Navigation
   eine einspaltige Schublade. Gemessen: 1011px Inhalt in 1200px Leiste,
   189px Spielraum bei 1280px und bei 1440px.
   22.09.2026: SIEBTER Punkt "Ratgeber" dazu. Ohne das Nachziehen von 6 auf 7
   findet der Anrufen-Knopf keine Spalte und rutscht unter das Logo — genau so
   von Romeo gemeldet. "Ratgeber" bei 14px/600 misst rund 70px, der Spielraum
   von 189px traegt das ab 1248px. */
@media (min-width:1025px){
  .kwl-gnav-nav{ grid-template-columns:250px repeat(7,max-content) 136px; }
}

/* /kw-runde2 */

/* kw-zwei-blickwinkel v1 — Section 017 „Zwei Blickwinkel, ein Bad" (14.09.2026)
   Spricht die zwei Leser der Seite getrennt an: wer selbst zu Hause bleiben
   will, und wer sich aus der Ferne um die Eltern sorgt. Ein Bad als Bild,
   zwei Karten in seiner Unterkante, eine geteilte Vertrauensleiste.
   Jeder Selektor traegt ZWEI Klassen. Das ist Absicht: weiter oben in dieser
   Datei steht [data-kw] p{...} mit Spezifitaet (0,1,1) — markiert der
   Markierlauf spaeter eine Karte als Container, schluege das jede einfache
   Klasse (0,1,0) darin. Mit (0,2,0) kann das nicht passieren, und
   untereinander bleiben die Regeln gleichrangig.
   Kein Layout haengt an data-kw. */

/* — gemeinsame Bausteine — */
.sb24-zb{position:relative;padding:96px 0 100px}
.sb24-zb .sb24-zb__kopf{text-align:center;max-width:820px;margin:0 auto 56px}
.sb24-zb .sb24-zb__vorzeile{font-size:14px;font-weight:600;letter-spacing:3px;text-transform:uppercase;
  color:#4f5845;margin:0 0 18px;line-height:1.65;}
.sb24-zb .sb24-zb__titel{font-size:clamp(28px, 1.4vw + 22px, 40px);font-weight:600;letter-spacing:-.8px;
  line-height:1.16;color:var(--color-ink);margin:0;}
/* — ein Blickwinkel (Karte oder Panel) — */
.sb24-zb .sb24-zb__rolle{font-size:13px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:#4f5845;margin:0 0 18px;line-height:1.5;}
.sb24-zb .sb24-zb__zitat{font-size:22px;font-weight:600;line-height:1.38;letter-spacing:-.2px;
  color:var(--color-ink);margin:0 0 22px;}
.sb24-zb .sb24-zb__schmerz{font-size:16px;line-height:1.65;color:var(--color-copy);margin:0 0 14px}
.sb24-zb .sb24-zb__loesung{font-size:16px;line-height:1.65;color:var(--color-copy);margin:0 0 30px}
.sb24-zb .sb24-zb__aktion{margin-top:auto}
.sb24-zb .sb24-zb__knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:10px 22px;border-radius:var(--radius-control, 8px);
  font-size:16px;font-weight:700;line-height:1.2;text-decoration:none;text-align:center;
  color:#fff;background:var(--color-danger);border:1px solid var(--color-danger);
  transition:background-color .16s ease,color .16s ease;}
.sb24-zb .sb24-zb__knopf:hover, .sb24-zb .sb24-zb__knopf:focus-visible{background:var(--color-danger-hover,#c9251d);border-color:var(--color-danger-hover,#c9251d)}
.sb24-zb .sb24-zb__knopf--ruhig{color:var(--color-ink);background:transparent;border-color:var(--color-dark,#1b2312)}
.sb24-zb .sb24-zb__knopf--ruhig:hover, .sb24-zb .sb24-zb__knopf--ruhig:focus-visible{color:#fff;background:var(--color-dark,#1b2312);border-color:var(--color-dark,#1b2312)}
.sb24-zb .sb24-zb__knopf:focus-visible{outline:3px solid var(--color-ink);outline-offset:3px}
.sb24-zb .sb24-zb__mikro{font-size:14px;line-height:1.55;color:#4f5845;margin:14px 0 0}
/* — Vertrauensleiste, geteilt — */
.sb24-zb .sb24-zb__leiste{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;
  list-style:none;margin:40px 0 0;padding:0;}
.sb24-zb .sb24-zb__punkt{display:inline-flex;align-items:center;gap:10px;
  min-height:40px;padding:0 16px 0 14px;border-radius:999px;
  font-size:14px;font-weight:600;color:var(--color-ink);
  background:#fff;}
.sb24-zb .sb24-zb__punkt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-brand);flex:none}
.sb24-zb--weiss .sb24-zb__punkt{background:var(--color-mist)}
/* — Nachbarn-Beleg — */
.sb24-zb .sb24-zb__beleg{max-width:720px;margin:56px auto 0;text-align:center}
.sb24-zb .sb24-zb__beleg-titel{font-size:14px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#4f5845;margin:0 0 14px}
.sb24-zb .sb24-zb__beleg-zitat{font-size:20px;font-weight:400;line-height:1.5;color:var(--color-ink);margin:0 0 12px}
.sb24-zb .sb24-zb__beleg-quelle{font-size:14px;line-height:1.5;color:#4f5845;margin:0;font-style:normal}
/* — die zwei Karten nebeneinander — */
.sb24-zb .sb24-zb__paar{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.sb24-zb .sb24-zb__karte{display:flex;flex-direction:column;
  background:#fff;border-radius:var(--radius-card, 18px);
  padding:40px 40px 36px;
  box-shadow:0 10px 24px rgba(27,35,18,.08);}
/* — das Bad als ein Bild, die Karten hängen in seine Unterkante — */
.sb24-zb .sb24-zb__bild{aspect-ratio:16/7;width:100%;border-radius:var(--radius-card, 18px);
  overflow:hidden;background:#dfe4d6;}
.sb24-zb .sb24-zb__bild-img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.sb24-zb .sb24-zb__paar--auf-bild{margin-top:-96px;padding:0 48px;position:relative}
.sb24-zb--b .sb24-zb__karte{box-shadow:0 18px 44px rgba(27,35,18,.14)}
/* =====================================================================
   Schmale Breiten
   ===================================================================== */
@media (max-width:1024px){
.sb24-zb{padding:72px 0 80px}
.sb24-zb .sb24-zb__karte{padding:32px 28px 30px}
.sb24-zb .sb24-zb__paar--auf-bild{padding:0 24px;margin-top:-56px}
}
@media (max-width:720px){
.sb24-zb{padding:56px 0 64px}
.sb24-zb .sb24-zb__kopf{margin-bottom:36px}
.sb24-zb .sb24-zb__paar{grid-template-columns:1fr;gap:18px}
.sb24-zb .sb24-zb__karte{padding:28px 22px 26px}
.sb24-zb .sb24-zb__zitat{font-size:20px}
.sb24-zb .sb24-zb__bild{aspect-ratio:4/3}
.sb24-zb .sb24-zb__paar--auf-bild{padding:0;margin-top:18px}
.sb24-zb .sb24-zb__knopf{width:100%}
.sb24-zb .sb24-zb__leiste{justify-content:flex-start;margin-top:32px}
.sb24-zb .sb24-zb__beleg{margin-top:44px;text-align:left}
.sb24-zb .sb24-zb__beleg-zitat{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
.sb24-zb .sb24-zb__knopf{transition:none}
}

/* /kw-zwei-blickwinkel */

/* kw-zwei-blickwinkel-bildhuelle v1 (14.09.2026)
   Beim Bildtausch ueber den Editor legt dieser um ein KI-Foto zwei Huellen:
   <div class="kw-medien kw-ki-traeger"> und ein <picture> fuer den
   AVIF-Zwilling. Damit bezog sich das height:100% des Bildes auf <picture>
   statt auf .sb24-zb__bild — und weil keine der beiden Huellen eine Hoehe
   hat, fiel das Bild auf sein eigenes Seitenverhaeltnis zurueck. Unter ihm
   stand die Hintergrundfarbe des Kastens: 11px bei 1440px Fenster, 116 von
   269 Pixeln bei 390px.
   Dieselbe Fehlerklasse wie die KI-Huelle am Hero (Block weiter oben,
   11.09.2026), und dieselbe Machart: die Huelle bekommt die Hoehe. Die
   Struktur bleibt unangetastet — sie gehoert dem Editor, und ohne sie waere
   das Bild dort nicht mehr austauschbar.
   ANDERS als am Hero haengt das hier NICHT an data-kw-medien, sondern an
   den eigenen Klassen: Markerschluessel werden beim Markierlauf umgehaengt,
   daran haengendes Layout bricht dann still.
   Ohne !important: der Editor setzt display:block und position:relative
   inline, und genau das wird hier gebraucht.
   <picture> ist der einzige Element-Selektor dieser Section. Es kommt vom
   Editor und traegt keine Klasse; er steht zwei Klassen tief und kollidiert
   mit keiner eigenen Regel. */
.sb24-zb .sb24-zb__bild > .kw-medien,
.sb24-zb .sb24-zb__bild > .kw-medien > picture{
  display:block; width:100%; height:100%;
}

/* /kw-zwei-blickwinkel-bildhuelle */

/* kw-whatsapp-fuss v2 — WhatsApp als vierte Fusszeilen-Spalte (15.09.2026)
   Kundenwunsch (Louis, 15.09.): keine weisse Karte mehr. Ueberschrift
   "Einfach per WhatsApp" auf gleicher Hoehe wie "Leistungen & Info",
   QR und Knopf gleich gross direkt auf dem Hintergrund, Hinweis darunter.
   Auf dem Handy derselbe Aufbau, aber Knopf ueber volle Breite und kein QR
   (man kann den eigenen Bildschirm nicht abfotografieren).

   Drei gemessene Gruende fuer das, was hier anders aussieht als der Wunsch:

   1. DIE UEBERSCHRIFT HAT KEINE KLASSE. "Leistungen & Info" ist ein blankes
      <strong> in .footer-column; Weiss, 16px und Fettschrift kommen aus der
      Fusszeile und dem Browser, nicht aus einer Regel. Die WhatsApp-
      Ueberschrift ist deshalb ebenfalls ein blankes <strong> ohne Klasse —
      dieselbe Bauform, damit die Grundlinie von selbst stimmt.

   2. DER KNOPF KANN NICHT MARKENGRUEN BLEIBEN. Der Fuss steht ab 187px auf
      #95c11e, und --color-brand IST #95c11e: der bisherige Knopf saesse
      farbgleich auf seinem Hintergrund (1,00:1) und waere unsichtbar. Er
      traegt jetzt WhatsApps eigenes Dunkelgruen #075e54 — 3,62:1 gegen den
      Fuss (WCAG 1.4.11 verlangt 3:1 fuer Bedienelemente), weisses Logo
      darauf 7,67:1. #25d366 (1,07:1) und #128c7e (1,95:1) fallen durch.

   3. DER QR BRAUCHT KEINE KARTE. Die Datei traegt ihr eigenes weisses Feld
      samt der vorgeschriebenen Ruhezone von 4 Modulen (viewBox 33 = 25
      Module + 2x4). Auf dem gruenen Grund erscheint sie als weisses
      Quadrat — das ist das Traegermaterial des Codes, keine Karte drumherum.

   Die beiden Quadrate stehen in einem eigenen Raster mit minmax(0,132px):
   gleich gross per Konstruktion, und sie schrumpfen GEMEINSAM, wenn die
   Spalte schmaler wird. 132px sind 4,00px je Modul.
   Kein Layout an data-kw. */
.sb24-wa{
  grid-column:1/-1;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}
.sb24-wa__felder{
  display:grid; grid-template-columns:1fr; gap:14px;
  width:100%; justify-content:start; margin:2px 0 2px;
}
.sb24-wa__code{ display:none; }
.sb24-wa__hinweis{ font-size:15px; line-height:1.6; color:#fff; margin:0; }
.sb24-wa__hinweis--gross{ display:none; }
.sb24-wa__knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:10px 22px; border-radius:var(--radius-control, 8px);
  font-size:16px; font-weight:700; line-height:1.2; text-decoration:none; text-align:center;
  color:#fff; background:#075e54; border:1px solid #075e54;
  transition:background-color .16s ease, border-color .16s ease;
}
.sb24-wa__logo{ flex:none; width:22px; height:22px; }
.sb24-wa__knopf-text{ display:inline; }
.sb24-wa__knopf:hover, .sb24-wa__knopf:focus-visible{
  background:#054640; border-color:#054640;
}
.sb24-wa__knopf:focus-visible{ outline:3px solid var(--color-ink); outline-offset:3px; }

/* Ab 721px ist Platz fuer den QR: zwei gleich grosse Quadrate nebeneinander.
   Der Knopf verliert dabei seine Beschriftung nur OPTISCH — sie bleibt im
   Markup, sonst ist ein Logo fuer Vorleseprogramme stumm. */
@media (min-width:721px){
  .sb24-wa__felder{ grid-template-columns:repeat(2, minmax(0, 132px)); }
  .sb24-wa__code{
    display:block; width:100%; height:auto; aspect-ratio:1;
    border-radius:8px;
  }
  .sb24-wa__hinweis--gross{ display:block; }
  .sb24-wa__hinweis--klein{ display:none; }
  .sb24-wa__knopf{
    width:100%; aspect-ratio:1; height:auto; min-height:0; padding:0;
  }
  .sb24-wa__logo{ width:40px; height:40px; }
  .sb24-wa__knopf-text{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
  }
}

/* Ab 1025px steht die Fusszeile vierspaltig; WhatsApp ist die vierte Spalte
   und verhaelt sich wie die drei daneben. */
@media (min-width:1025px){
  /* Die vierte Spur hat eine MINDESTBREITE: 132 + 14 + 132 = 278px. Ohne sie
     schrumpfen beide Quadrate mit der Spalte — bei 1025px auf 100px, also
     3,03px je Modul statt 4,00. Der Preis der Mindestbreite ist eine einzige
     Zeile: "Wanne zur Dusche umbauen" bricht zwischen 1025 und ~1090px auf
     zwei Zeilen. Gemessen, nicht geschaetzt. */
  .kwl-gfoot-content{ grid-template-columns:1.1fr .75fr .9fr minmax(278px, 1.05fr); }
  .sb24-wa{ grid-column:auto; align-self:start; }
  .sb24-wa__hinweis{ font-size:14px; }
}

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

/* /kw-whatsapp-fuss */

/* kw-fensterband-1025 v1 — Beschnitt zwischen 1025 und 1248px (15.09.2026)
   Gemessen an der Live-Seite, nicht am Entwurf: bei 1025px Fensterbreite
   liegen 106 Elemente ausserhalb des Fensters. Der WhatsApp-Knopf in der
   Fusszeile ist vollstaendig unsichtbar, in der Kopfzeile bricht "Kontakt"
   mitten im Wort.

   URSACHE: die Schutzregel existiert nur UNTERHALB 1025px. `.container`
   rechnet selbst richtig — `min(var(--container), calc(100% - 48px))` —,
   aber die einzelnen Bloecke stehen auf hartem `width:1200px`, und die
   Media-Query, die das auf `min(...)` zieht, greift erst ab `max-width:1024px`.
   Zwischen 1025 und 1248px ist das Fenster also schmaler als der Inhalt.
   `body{overflow-x:hidden}` macht daraus keinen Scrollweg, sondern Verlust:
   nicht erreichbar, nicht sichtbar, kein Hinweis.
   Betroffen ist unter anderem 1194px — iPad Pro 11" quer.

   BEHOBEN MIT max-width, NICHT mit width: max-width klemmt nur und kann
   nichts verbreitern. Ab 1248px ist `calc(100% - 48px)` groesser als 1200px,
   dort aendert die Regel also nachweislich nichts — das ist der Grund, warum
   die breiten Ansichten unberuehrt bleiben.

   Aufgefuehrt sind nur die ELF Elemente, die den Ueberstand selbst tragen;
   alles andere sind Kinder, die ihn erben. Bewusst NICHT dabei: 005, 009,
   010 und 013 — die sind absichtlich breiter als der Container und rechnen
   bereits mit `min(1660px, 100% - 72px)`. */
@media (min-width:1025px){
  /* Die KOPFZEILE braucht eine andere Rechnung, und das ist der Grund:
     [data-block="001"] ist ein GRID, und `100%` eines Grid-Elements bezieht
     sich auf seine SPUR, nicht auf das Fenster. Die Spur ist 1200 breit, aus
     `calc(100% - 48px)` wurden also 1152 statt 1392 — der Kopf schrumpfte bei
     1440px von 1200 auf 1152 und das Logo rutschte von x=120 auf 144, womit
     die Kopfzeile nicht mehr mit dem Seiteninhalt fluchtete. Gemessen, nicht
     vermutet. `100vw` kennt keine Spur. Ein klassischer Rollbalken macht
     100vw groesser und den Aussenabstand damit kleiner, nie den Kasten
     breiter als das Fenster — die Fehlerrichtung ist die harmlose. */
  .kwl-gnav-nav{ width:min(1200px, calc(100vw - 48px)); }

  .kwl-b003-list-01,
  [data-block="004"], [data-block="006"], [data-block="007"], [data-block="008"],
  [data-block="011"], [data-block="012"], [data-block="014"],
  .kwl-gfoot-content{
    max-width:calc(100% - 48px);
    margin-inline:auto;
  }
}

/* kw-kopf-engband v2 — 1025 bis 1247px (15.09.2026)
   In diesem Band braucht die Kopfzeile 1011px fuer Logo, sechs Menuepunkte
   und den Anrufen-Knopf; Platz ist min(1200, Fenster-48). Bei 1025px sind das
   977 — die Menuepunkte stossen aneinander (kleinste Luecke 0) und "Anrufen"
   wird 10px beschnitten.

   OBERE GRENZE 1247, NICHT 1059: 1059 war die Breite, ab der nichts mehr
   UEBERSTEHT — nicht die, ab der es nicht mehr gequetscht aussieht. Ohne Band
   waere die kleinste Luecke bei 1060 gleich 0, bei 1100 sechs, bei 1130 zehn
   Pixel; erst gegen 1248 erreicht sie die 27px der Normalansicht. Deshalb
   laeuft das Band bis 1247 — dort hoert der Container ohnehin auf zu wachsen,
   die Grenze ist also eine vorhandene und keine erfundene.

   WARUM NICHT DAS BURGER-MENUE, das hier naheliegen wuerde: js/custom.js hat
   die Grenze mit `matchMedia('(max-width: 1024px)')` FEST eingebaut. Oberhalb
   davon behandelt das Skript die Navigation als Zeile — ein Klick auf einen
   Link schliesst die Schublade dann nicht mehr, sie bliebe ueber der Seite
   stehen. Das Burger-Menue in diesem Band zu zeigen, ohne diese eine Zahl zu
   aendern, ergaebe eine Schublade, die sich nicht schliesst.

   Stattdessen zwei Werte, die die Seite unterhalb 1025px ohnehin schon nutzt:
   die Logospur 210 statt 250 (so steht es in der Regel fuer <=1024px) und
   13px statt 14px Schrift. Gemessen bei 1025px: kleinste Luecke 7px statt 0,
   nichts mehr beschnitten. Zum Vergleich: bei 1440px sind es 27px. */
/* 22.09.2026, siebter Punkt "Ratgeber": In diesem Band waren bei SECHS Punkten
   nur 7px Luft (siehe Messung oben). "Ratgeber" braucht bei 13px rund 62px —
   das passt nicht. Platz kommt aus drei Stellen: Logospur 190 statt 210,
   Schrift 12 statt 13, Anrufen-Knopf 120 statt 136 (zusammen rund 60px).
   ACHTUNG: geschaetzt, NICHT gemessen — der Browser war belegt. Wenn die Zeile
   zwischen 1025 und 1247px doch umbricht, ist der saubere Weg, das Burger-Menue
   schon ab 1247px zu zeigen; dann muss auch die Zahl im JS mitwandern (siehe
   Kommentar oben), sonst schliesst die Schublade nicht mehr. */
@media (min-width:1025px) and (max-width:1247px){
  .kwl-gnav-nav{ grid-template-columns:190px repeat(7, max-content) 120px; }
  .kwl-gnav-nav > a{ font-size:12px; }
  .kwl-gnav-logo img{ width:190px; }
  [data-kw=gnav-call]{ width:120px; }
}

/* kw-fremdwidgets-unten v1 — Platz fuer die zwei Fremd-Widgets (15.09.2026)

   Beide bringen ihr eigenes Aussehen mit und werden hier NICHT gestaltet:
   - ProvenExpert-Siegel: statisches Bild-Embed, 170x204, fixed left:0
     bottom:150px, unter 992px ausgeblendet. Alles per Inline-Stil von
     ProvenExpert selbst.
   - wirsindhandwerk.de: das Skript w.wsh.de zeichnet die Leiste selbst —
     fixed bottom:0, volle Breite, 52px am Desktop, 38px auf dem Telefon.
     An der Live-Seite gemessen, nicht geschaetzt.

   Zu tun bleibt nur eines: unsere eigenen klebenden Elemente ueber die Leiste
   heben, sonst verdeckt sie deren unteren Rand. Betroffen sind der
   Berater-Avatar (rechts unten) und der Schnellkontakt (rechts, unter 1025px
   am Boden verankert). Die Hoehe steht als Variable, damit beide Stellen
   nicht auseinanderlaufen, wenn wirsindhandwerk sie einmal aendert. */
:root{ --sb24-fremdleiste:52px; }
@media (max-width:768px){ :root{ --sb24-fremdleiste:38px; } }

/* Unter 1025px verankern sich Avatar und Schnellkontakt am Fensterboden —
   genau dort, wo die wirsindhandwerk-Leiste liegt. Ohne Anhebung ueberdeckte
   sie am 15.09.2026 gemessen den Avatar und den Schnellkontakt. Die Regeln
   stehen bewusst NACH den urspruenglichen: gleiche Spezifitaet, spaetere
   Regel gewinnt. */
@media (max-width:1024px){
  .sb24-avatar{
    bottom:calc(var(--sb24-fremdleiste, 52px) + 14px + env(safe-area-inset-bottom, 0px));
  }
  [data-block="002"] .kwl-b002-contact-09{
    bottom:calc(var(--sb24-fremdleiste, 52px) + 16px);
  }
}

/* kw-film-abschnitt v1 — Video zwischen "Badewanne mit Tuer" und
   "Wanne zur Dusche" (16.09.2026).

   Uebernommen aus dem abgenommenen Entwurf vom 15.09.2026; geaendert ist nur
   die Mechanik: der grosse Abspielknopf ueber der Flaeche ist weg, dafuer
   laeuft die Vorschau stumm und ein Knopf unter dem Film oeffnet die Lightbox.
   Die Lightbox ist KEINE zweite Infrastruktur — sie setzt auf der Ebene des
   KI-Beraters auf (.sb24-va-ebene / .sb24-va-zu, weiter oben in dieser Datei)
   und ergaenzt nur die Masse fuer ein 16:9-Bild. */

/* Block 004 und der Video-Abschnitt gehoeren zusammen und ruecken deshalb
   enger aneinander als zwei getrennte Themen. Nur wenn der Film auch wirklich
   folgt — sonst behaelt der Block seinen normalen Fuss. */
[data-block="004"]:has(+ .sb24-film){ padding-bottom:96px; }

/* Mit dem Film dazwischen stuenden sonst drei Textspalten links untereinander.
   Deshalb wandert der Bildvergleich von "Wanne zur Dusche" nach links
   (Entscheidung Louis, 16.09.2026 — vorher: Text links, Bild rechts). */
[data-block="005"] .kwl-b005-before-after-20{ order:0; }
[data-block="005"] .kwl-b005-copy-31{ order:1; }

.sb24-film{
  position:relative;
  display:grid; grid-template-columns:1fr 570px; gap:58px; align-items:center;
  width:min(var(--container,1200px), calc(100% - 48px)); margin-inline:auto;
  padding:36px 0 115px;
}
.sb24-film__text{ min-width:0; }
.sb24-film__text h2{ font-size:34px; line-height:1.15; margin:0 0 18px; }
/* Die Vorzeile ist auch ein <p> — ohne :not() erbt sie hier 18px statt der
   14px der Nachbarbloecke. Genau das war der Unterschied. */
.sb24-film__text > p:not(.eyebrow){ color:var(--color-copy,#42463f); font-size:18px; line-height:1.6; margin:0 0 22px; }

/* Aufzaehlung in der Bauform der Nachbarbloecke. Der Haken ist dort KEIN
   Schriftzeichen, sondern das SVG aus custom.css (kw-feinschliff): leeres
   content, 13px-Haekchen im 24px-Markenkreis. */
.sb24-film__punkte{ list-style:none; margin:32px 0 0; padding:0; display:grid; gap:17px; }
.sb24-film__punkte li{ position:relative; padding-left:36px; font-weight:600; display:grid; }
.sb24-film__punkte li strong{ font-weight:600; }
.sb24-film__punkte li::before{
  content:""; position:absolute; left:0; top:.12em;
  width:24px; height:24px; border-radius:50%;
  color:var(--color-dark,#1c2118); font-size:14px;   /* nur damit .12em dieselben Pixel ergibt */
  background-color:var(--color-brand,#95c11e);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2312' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:13px 13px;
}
.sb24-film__punkte li span{ color:var(--color-copy,#42463f); font-weight:400; }

/* Rechte Spalte: Film und darunter der Knopf. Die Spalte traegt die Breite,
   damit der Knopf mit der linken Kante des Films fluchtet. */
.sb24-film__spalte{ min-width:0; }

/* Die Videoflaeche uebernimmt Aufbau und Verhalten der Medienflaeche der Seite
   (.kw-medien aus kw-video.css: 16:9, schwarzer Grund, object-fit).
   preload="none": ohne Sichtkontakt laedt kein Byte des Films. */
.sb24-film__medien{
  width:100%; margin:0; position:relative; z-index:1;
  border-radius:var(--radius-card,18px); overflow:hidden;
  box-shadow:0 12px 30px rgba(27,35,18,.08); border:1px solid #dce1d3;
  background:#000;
}
.sb24-film__medien video{ display:block; width:100%; height:100%; object-fit:cover; }

/* Knopf: die Knopf-Komponente der Seite (.button), hier nur der Abstand zum
   Film und die Zeilenhoehe fuer die 48px-Hoehe. */
.sb24-film__knopf{ margin-top:22px; }

/* ── Lightbox ────────────────────────────────────────────────────────────
   Grund, Lage und Schliessen-Knopf kommen von .sb24-va-ebene/.sb24-va-zu.
   Hier steht nur, wie gross das Bild darin werden darf: so breit wie moeglich,
   aber nie hoeher als die Ebene — aspect-ratio zieht die Breite dann nach. */
/* Die Ebene des KI-Beraters liegt auf z-index 200. Darueber schweben aber die
   zwei Fremd-Siegel (ProvenExpert 9999, wirsindhandwerk 1000) — sie standen im
   ersten Durchlauf mitten auf dem Film. Deshalb hier hoeher, nur fuer diese
   Lightbox; die Ebene des KI-Beraters bleibt unangetastet. */
.sb24-film-ebene{ z-index:10000; }
.sb24-film-ebene video{
  display:block; width:1180px; max-width:100%; max-height:100%;
  aspect-ratio:16/9; height:auto;
  border:0; border-radius:16px; background:#000;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}

/* Schmaler: eine Spalte, Text ueber dem Film. */
@media (max-width:1024px){
  [data-block="004"]:has(+ .sb24-film){ padding-bottom:64px; }
  .sb24-film{ grid-template-columns:minmax(0,1fr); gap:20px; padding:24px 0 76px; }
  .sb24-film__spalte{ width:min(100%,640px); margin-inline:auto; }
}
@media (max-width:640px){
  .sb24-film__text h2{ font-size:28px; }
  /* Oben Platz fuer den Schliessen-Knopf, damit er nicht auf dem Bild liegt. */
  .sb24-film-ebene{ padding:64px 12px 24px; }
}

/* Auf dem Telefon soll der Knopf die volle Breite des Films haben — ein
   72px-Ziel mitten unter einem 640px-Bild sieht verloren aus. */
@media (max-width:640px){
  .sb24-film__knopf{ display:flex; width:100%; }
}
/* /kw-film-abschnitt */

/* ══════════════════════════════════════════════════════════════════════════
   Nachtrag 22.09.2026 — Zoho SalesIQ und eine Fehlerkorrektur.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Button-Ueberlauf im Team-Block (Block 012) ────────────────────────────
   Die Grundregel in wb-bundle.css gibt dem Knopf width:max-content. Er wird
   damit so breit, wie der Text es verlangt — ohne Ruecksicht auf die Karte.
   Bei "Mit Frau Lemberger sprechen" reichte das ab 390px aus der Karte und
   ueber den Bildschirmrand hinaus; der Text brach bei "spreche" ab.
   max-content bleibt als Wunschbreite stehen (kurze Knoepfe sollen weiter
   knapp sitzen), wird jetzt aber auf die verfuegbare Breite gedeckelt. Passt
   der Text nicht in eine Zeile, bricht er um — dafuer muss die feste Hoehe
   aus min-height zur Mindesthoehe werden und die Polsterung senkrecht mit. */
[data-block="012"] article a{
  max-width:100%;
  height:auto;
  padding-top:12px; padding-bottom:12px;
  white-space:normal;
  text-align:center;
  justify-content:center;
}

/* ── Zoho SalesIQ ──────────────────────────────────────────────────────────
   Der Chat sitzt unten LINKS. Die Seite stellt Zoho selbst ein (die Konsole
   liefert das Widget bereits mit position="left-bottom" und der Klasse
   siq_bL aus) — hier wird nur die HOEHE geregelt, damit der Knopf nicht auf
   etwas anderem landet.

   Bewusst so herum: NICHT der Avatar oder das Siegel weichen dem Chat aus,
   sondern der Chat weicht ihnen aus. Bleibt das Widget einmal weg — Zoho
   offline, Skript blockiert, Konto pausiert —, sieht die Seite dann trotzdem
   unveraendert aus. Andersherum entstuende eine Luecke.

   Belegt ist unten links:
     - ab 992px das ProvenExpert-Siegel, rund 210px hoch
     - unter 1025px der KI-Berater, 62px hoch
     - immer die wirsindhandwerk-Leiste, ihre Hoehe steckt in
       --sb24-fremdleiste (52px Desktop, 38px mobil)
   Zoho benennt seine Container je nach Widget-Version unterschiedlich,
   deshalb stehen mehrere Selektoren nebeneinander. */
.zsiq_floatmain,
.zsiq_theme1 .zsiq-float,
#zsiq_float{
  bottom:calc(var(--sb24-fremdleiste, 52px) + 16px) !important;
}

/* Unter 1025px steht der KI-Berater unten links. Der Chat setzt sich
   darueber: 62px Berater plus 16px Luft. */
@media (max-width:1024px){
  .zsiq_floatmain,
  .zsiq_theme1 .zsiq-float,
  #zsiq_float{
    bottom:calc(var(--sb24-fremdleiste, 38px) + 92px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Ab 992px zeigt ProvenExpert sein Siegel wieder. Es ist rund 210px hoch und
   klebt unten links; der Chat setzt sich darueber. */
@media (min-width:992px){
  .zsiq_floatmain,
  .zsiq_theme1 .zsiq-float,
  #zsiq_float{
    bottom:calc(var(--sb24-fremdleiste, 52px) + 232px) !important;
  }
}

/* ── Beraterkarte Block 014: Bildausschnitt auf Astrid Lemberger einstellen
   (25.09.2026). Der Kasten ist fest 120x148 (Hochformat), das Foto 567x278
   (Querformat) — es wird also stark beschnitten. Die Bibliothek steht auf
   `center top`; das passte zum Foto von Alexander Preuss, bei dem der Kopf
   mittig sass. Gerechnet fuer das neue Foto: Hoehe 148 bedeutet Faktor 0,532,
   das Bild wird 302px breit, Ueberhang 182px. Ihre Gesichtsmitte liegt bei
   rund 55 % der Breite (166px) — damit dieser Punkt in der Mitte des 120px
   breiten Ausschnitts landet, braucht es 58 %. Senkrecht wird nichts
   beschnitten (278 x 0,532 = 148), der zweite Wert ist deshalb wirkungslos
   und steht neutral auf 50 %. Wird das Foto getauscht, gehoert dieser Wert
   neu gerechnet. */
.advisor-card > [data-kw="b014-advisor-photo-25"]{ object-position:58% 50%; }

/* ── Einwilligung im Kontaktformular (Block 014), 25.09.2026
   Das Haekchen wurde am 20.09. nachgeruestet (es fehlte voellig), die Klassen
   `kwl-b014-consent` hatten aber NULL Regeln. Damit griff die allgemeine
   Feldregel `.kwl-b014-form-06 input:not([type=radio]) { min-height:52px }`
   auch auf die Checkbox: ein riesiger Kasten mittig ueber dem Text statt klein
   links daneben (Romeo am 25.09. gemeldet). Vorbild ist `.config-zustimmung`
   im Konfigurator. Hintergrund und Rahmen werden bewusst NICHT gesetzt — ein
   natives Kaestchen laesst sich damit nicht zuverlaessig gestalten;
   `accent-color` faerbt den Haken im Markengruen. */
.kwl-b014-consent{ margin-top:20px; }
.kwl-b014-consent__label{
  display:flex; gap:12px; align-items:flex-start;
  font-size:15px; line-height:1.5; font-weight:400; cursor:pointer;
}
.kwl-b014-form-06 .kwl-b014-consent input[type="checkbox"]{
  flex:0 0 24px; width:24px; height:24px; min-height:0; margin:2px 0 0;
  accent-color:var(--color-brand-deep,#7fa916);
}
.kwl-b014-consent a{ color:var(--color-ink,#1c2118); font-weight:600; }

/* Bild der Beraterkarte senkrecht mittig: Die Kartenhoehe richtet sich nach der
   Textspalte (Name, Rolle, zwei Kontaktzeilen) und ist hoeher als die 148px des
   Bildes. Im Raster steht das Bild sonst oben buendig — oben wenig, unten viel
   Weiss. Mit `align-self:center` ist der Abstand zum weissen Rand oben und
   unten gleich (Romeo am 25.09.). */
.advisor-card > [data-kw="b014-advisor-photo-25"]{ align-self:center; }

/* ── VERSCHOBEN aus css/ratgeber.css am 25.09.2026: Die Regeln gehoeren in die
   custom.css, weil sie NICHT nur die Ratgeber-Seiten betreffen. Die Danke- und
   die Fehlerseite (Klasse kw-solo) stehen genauso allein und hatten deshalb
   denselben zu hohen grauen Abschlussblock — von Romeo am 25.09. gemeldet. */
/* ── Abschlussblock im Fuß an eine Seite ohne Überlappung anpassen ───────────
   Auf der Startseite ragen die Kontaktkarten 220px in den Abschlussblock; er
   hält dafür Platz frei (`padding: calc(72px + var(--kontakt-ueberlappung))`,
   `min-height: calc(560px + …)`). Auf Ratgeber-, Danke- und Fehlerseite steht er allein —
   der freigehaltene Platz bliebe als riesige graue Fläche stehen. Die Variable
   hier auf 0 zu setzen ist der vorgesehene Hebel; die Maße der Bibliothek
   bleiben unangetastet.

   Zweitens der Verlauf des Fußes: Er beginnt mit Creme (`--color-mist`), damit
   die Fläche hinter den Rundungen zur darüberliegenden Kontakt-Section passt.
   Über einer weißen Seite entsteht daraus eine sichtbare Kante — deshalb hier
   Weiß als Startfarbe. Grün und Rundungsmaße bleiben wie überall. */
.kw-ratgeber [data-block="015"],
.kw-solo [data-block="015"] {
  --kontakt-ueberlappung: 0px;
}
/* Die Startfarbe des Verlaufs MUSS die Farbe der Flaeche darueber sein, sonst
   sieht man neben den Rundungen eine Kante (Romeo am 25.09. zweimal gemeldet):
   Ratgeber-Seiten haben einen weissen Inhaltsbereich, Danke- und Fehlerseite
   einen cremefarbenen (.sec-danke / .sec-404 setzen --color-cream). */
.kw-ratgeber [data-block="015"] {
  background: linear-gradient(to bottom,
    var(--color-paper, #fff) 0 calc(var(--cta-radius) + var(--cta-offset)),
    var(--color-brand, #95c11e) calc(var(--cta-radius) + var(--cta-offset)));
}
.kw-solo [data-block="015"] {
  background: linear-gradient(to bottom,
    var(--color-cream, #f6f2e9) 0 calc(var(--cta-radius) + var(--cta-offset)),
    var(--color-brand, #95c11e) calc(var(--cta-radius) + var(--cta-offset)));
}

/* Zusatz an einer Feldbeschriftung, z. B. „(optional)" am Telefonfeld
   (25.09.2026): leiser als die Beschriftung, damit die Pflichtfelder optisch
   fuehren. Die Beschriftungen im Kontaktformular sind 15px/700. */
.kwl-b014-form-06 .feld-hinweis{
  font-weight:400; font-size:14px; color:var(--color-muted,#73776f);
}

/* ── Pflichtfeld-Kennzeichnung (25.09.2026, Romeo: „wie Industriestandard")
   Roter Stern an der Beschriftung, dazu EINMAL je Formular die Erklaerung
   „* Pflichtfeld" — das W3C verlangt, dass das Zeichen erklaert wird, sonst
   raet der Besucher. Der Stern traegt aria-hidden: Fuer Screenreader zaehlt
   das Attribut `required` am Feld, sonst wuerde „Stern" mitgelesen.
   Der Konfigurator hatte den Stern schon, aber in Textfarbe — jetzt beide
   Formulare gleich. Rot ist #df2f26 (Signalrot der Site, auf Weiss 4,59:1). */
.pflicht{
  color:var(--color-danger,#df2f26); font-weight:700; margin-left:.15em;
}
.pflicht-legende{
  margin:4px 0 16px; font-size:14px; color:var(--color-muted,#73776f);
}

/* ── Privacybee-Widgets in das Raster der Seite zwingen (28.09.2026) ───────
   Impressum und Datenschutz kommen aus den Widgets. Die bringen ihr eigenes
   Stylesheet mit und setzen .prx_wrapper auf max-width:80rem mit
   margin-inline:auto — also 1280px und mittig. Die Rechtstexte der Seite
   sitzen aber im 1200px-Container, linksbuendig, mit 900px Textbreite
   (siehe .rechtstext weiter oben). Ohne die Regeln hier fluchtet das
   Impressum mit keinem anderen Abschnitt.

   Kein !important noetig: .rechtstext .prx_wrapper ist spezifischer als
   .prx_wrapper, und .rechtstext h1 schlaegt .prx_h1 — unabhaengig davon,
   dass Privacybee sein Stylesheet erst zur Laufzeit nachlaedt. */
.rechtstext imprint-widget,
.rechtstext privacybee-widget{ display:block; }

.rechtstext .prx_wrapper{
  max-width:min(100%, 900px);
  margin-left:0;
  margin-right:0;
  padding-bottom:0;
}

/* Das Widget polstert seine H1 mit 56px nach oben. Der .rechtstext-Rahmen
   bringt oben bereits 72px mit — zusammen klaffte eine doppelte Luecke. */
.rechtstext .prx_h1{ padding-top:0; }

/* ── Seitliches Wegscrollen unterbinden (28.09.2026) ───────────────────────
   Gemeldet: auf dem Telefon liess sich die Startseite nach rechts schieben,
   dahinter nur Weiss. Gemessen bei 390px Viewport: das Dokument war 1174px
   breit. Ursachen sind Elemente, die aus dem Fluss genommen sind — allen
   voran die Menue-Schublade .kwl-gnav-nav. Sie parkt geschlossen per
   transform:translate(calc(100% + 32px)) rechts neben dem Bild und stand
   damit von 422px bis 765px. Ein transform nimmt das Element nicht aus dem
   scrollbaren Bereich, es verschiebt es nur.

   body trug bereits overflow-x:hidden. Das half nicht, weil html auf
   "visible" stand: dann wandert die Angabe von body auf das Ansichtsfenster
   und body selbst wird wieder visible — feste und verschobene Elemente
   ausserhalb bleiben erreichbar.

   Warum clip und nicht hidden: [data-block="001"] ist position:sticky. Mit
   overflow-x:hidden wuerde html bzw. body zum Scroll-Container, und der
   mitlaufende Kopf bliebe stehen. "clip" schneidet ab, ohne einen
   Scroll-Container zu erzeugen — sticky bleibt heil.

   In @supports gekapselt: Browser ohne "clip" verhalten sich wie bisher,
   statt den Kopf zu verlieren. */
@supports (overflow-x: clip){
  html, body{ overflow-x:clip; }
}

/* Die wirsindhandwerk-Leiste rendert ihren Inhalt 550px breit und schob die
   Seite damit zusaetzlich auf. Das Widget gehoert uns nicht, deshalb nur die
   Deckelung auf die Fensterbreite — innen darf es abschneiden. */
[data-wsh-wid] .craftsmanWidgetContainer{
  max-width:100%;
  overflow-x:hidden;
}

/* ── Sub-Footer: mobil untereinander (28.09.2026) ──────────────────────────
   .footer-bottom ist ein flex mit space-between. Auf dem Telefon standen
   Copyright und Rechtslinks damit nebeneinander in zwei engen Spalten, beide
   mit Umbruch — das Copyright zweizeilig links, die Links zweizeilig rechts.

   column-reverse statt column: die Links stehen im Quelltext NACH dem
   Copyright, gewuenscht ist aber Links oben, Copyright ganz unten. Die
   Umkehrung per CSS ist hier unbedenklich, weil das Copyright ein reiner
   Textabsatz ist — die Tabulator-Reihenfolge laeuft weiter ueber die Links
   und bleibt unveraendert.

   Nur bis 640px: ab Tablet ist nebeneinander richtig, da passt beides in
   je eine Zeile. */
@media (max-width:640px){
  .footer-bottom{
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:14px;
  }
}

/* Das Trennzeichen gehoert ZWISCHEN die Links, nicht hinter den letzten.
   Bis zum 28.09.2026 war der letzte Eintrag ein <button> und bekam deshalb
   kein ::after; seit der Cookie-Einstellungen-Link von Privacybee kommt,
   sind es drei <a> — und hinter dem letzten stand ein Punkt zu viel. */
.kwl-gfoot-legal a:last-child::after{ content:none; }

/* kw-kontrast v1 */
/* Farbkontraste auf WCAG AA gebracht (4,5:1 für normalen Text).
   Erzeugt von barrierefreiheit.py. Markenfarben bleiben unangetastet —
   korrigiert wird die Schriftfarbe auf der jeweiligen Fläche. */
/* /kw-kontrast */