/* Stadtdomains sprinklertank-<stadt>.de – Optik von inspectomatic.de.
   Teil 1: unverändert übernommen aus ~/inspectomatic-website/assets/css (10-tokens, 20-basis, 47-footer,
   55-bausteine, 78-formular), Stand 25.10.2026. Teil 2 (ganz unten): nur was die Landingpage zusätzlich braucht. */

/* ===== 10-tokens.css ===== */
/* ======================================================================
   Gestaltungs-Tokens – EINE Quelle je Rolle. Neue Farben, Schriftstufen, Linien, Rundungen hier anlegen,
   nie als Literal in den Bausteinen. Regeln und Tabelle: marketing/richtlinie-ui-ux.md, „Gestaltung“.
   Bausteine setzen nur --akzent um (Grün auf Weiß, Lime auf Dunkel).
   Hover-Töne und Transparenzen werden mit color-mix() aus diesen Farben abgeleitet, nie neu erfunden.
   ====================================================================== */
:root {
  /* ---------- Farben: 12 Rollen + 2 Overlays ---------- */
  --farbe-lime:#d5f578;          /* Hauptknopf; Akzent auf Dunkel */
  --farbe-gruen:#2f7a4d;         /* Akzent auf Weiß: Links, Kicker, Fokus (5,2 : 1) */
  --farbe-schrift:#111a18;       /* Überschriften, Knopfschrift, starke Schrift */
  --farbe-schrift-grau:#3a4543;  /* Fließtext auf Weiß (10 : 1) */
  --farbe-gedaempft:#5b6664;     /* Bildunterschrift, Meta, Hilfe (5,9 : 1) */
  --farbe-weiss:#fff;            /* Seitengrund, Karten; Schrift auf Dunkel */
  --farbe-hell-grau:#b9c4bf;     /* Fließ- und Nebentext auf Dunkel (10 : 1) */
  --farbe-dunkel:#0a1012;        /* Bildblöcke, Kopf, Fuß, Punktwolke */
  --flaeche:#eef1ef;             /* Chips, +/−-Quadrate, Hinweis, Icon-Kreise, Meldungen */
  --linie:#e3e6e4;               /* Haarlinie zwischen Blöcken, Kartenrand */
  --linie-dunkel:#283133;        /* Haarlinie auf Dunkel */
  --farbe-fehler:#b3261e;        /* Formularfehler (6,5 : 1) */
  --overlay:color-mix(in srgb,var(--farbe-dunkel) 70%,transparent);   /* Bedienflächen auf Bild und Wolke, Bildbahn-Verlauf */
  --overlay-hero:
    linear-gradient(180deg,color-mix(in srgb,var(--farbe-dunkel) 55%,transparent),transparent 30% 50%,color-mix(in srgb,var(--farbe-dunkel) 90%,transparent)),
    linear-gradient(90deg,color-mix(in srgb,var(--farbe-dunkel) 55%,transparent),transparent 60%);   /* jeder Foto-Hero */
  --schatten:0 16px 40px color-mix(in srgb,var(--farbe-dunkel) 25%,transparent);   /* nur was schwebt: Menü, Chat */
  --akzent:var(--farbe-gruen);

  /* ---------- Schrift: 8 Größen, 4 Zeilenhöhen, 2 Laufweiten (+ 0), Gewichte 400/700 ----------
     Arial hat nur Normal und Fett – 500/600 gibt es nicht (der Browser rundet), darum nur 400 und 700. */
  --fs-xs:12px;                       /* Label in Versalien (Kicker, Chips, Tabellenkopf), Kleinstzeile */
  --fs-s:14px;                        /* Bildunterschrift, Metazeile, Hilfe, Quellen, Pfad, Verzeichnis */
  --fs-m:16px;                        /* Bedienung: Knöpfe, Textlinks, Formular, Tabellen, Menü, Namen */
  --fs-text:17px;                     /* Fließtext, Kartentext, FAQ-Frage */
  --fs-l:20px;                        /* Lead, h3, Kartentitel, Akkordeon */
  --fs-xl:clamp(24px,2.6vw,32px);     /* großer Zwischentitel: Schlagwort/Kennzahl (kundenfragen), Bildbahn, Kapitel, Artikel-h2, Formular, Slogan */
  --fs-h2:clamp(30px,3.2vw,44px);     /* h2, Artikel-h1, Punktwolken-Titel */
  --fs-h1:clamp(40px,5.4vw,78px);     /* h1 (Hero, Seitenkopf) */
  --lh-eng:1.1;      /* h1, h2, Kennzahl */
  --lh-titel:1.25;   /* h3, --fs-xl, Kartentitel, Knöpfe, Menünamen */
  --lh-klein:1.5;    /* --fs-xs/--fs-s, Formular, Tabellen */
  --lh-text:1.65;    /* Fließtext */
  --ls-eng:-.03em;   /* alles ab --fs-xl */
  --ls-weit:.1em;    /* nur Versalien (Label) */

  /* ---------- Form ---------- */
  --radius:6px;   /* Bilder und Karten; Knöpfe und Chips 999px, Porträts und Icons 50 % */
  --abstand:96px;   /* Innenabstand oben/unten je Block (Handy 64px, 55-bausteine.css) */
  --hero-hoehe:75svh;   /* jeder Hero 75 % der Bildschirmhöhe (svh: stabil beim Ein-/Ausfahren der Adressleiste) */
  --hero-min:540px;   /* Handy 460px; auf flachen Fenstern wächst der Hero mit dem Text */

  /* Kopfzeile (45-header.css setzt sie fürs Handy neu) */
  --hh:92px;
  --hh-klein:70px;
  --hl:var(--farbe-lime);   /* Hervorhebung im Menü */

  /* Satzspiegel und Schrift */
  --wrap-breite:min(1320px,calc(100% - 96px));
  --schrift-text:Arial,Helvetica,sans-serif;
  --schrift-mono:'Courier New',monospace;
}
@media (max-width:800px) {
  :root {
    --hero-min:460px;
  }
}

/* ===== 20-basis.css ===== */
/* ======================================================================
   Grundgerüst: Reset, Schriftstufen (h1–h3, Kicker), Knöpfe, .wrap, Bild-Großansicht, Icons.
   Jede Rolle hat EINE Regel hier; Bausteine setzen nur Abstände und Farben.
   ====================================================================== */

* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  margin:0;
  background:var(--farbe-weiss);
  color:var(--farbe-schrift);
  font-family:var(--schrift-text);
  -webkit-font-smoothing:antialiased;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  font:inherit;
}
/* hidden heißt immer unsichtbar – auch wenn eine Klasse display setzt (Punktwolke, Chat, Formular). Ersetzt die
   Einzelregeln .pwp-live[hidden], .chat-fenster[hidden] … (Reduktion 12.10.2026) */
[hidden] {
  display:none !important;
}
/* <picture> legt der Build um Bilder mit AVIF-Fassung (cms/leistung.py) – es bildet keinen eigenen Kasten,
   das <img> darin steht im Layout, als wäre es direktes Kind (Flex, Grid, absolute Lage, Seitenverhältnis). */
picture {
  display:contents;
}
/* <source> erzeugt sonst in Flex/Grid ein leeres Element – samt gap davor (Porträts im Baustein aufruf rückten 14 px ein) */
picture>source {
  display:none;
}
:focus-visible {
  outline:2px solid var(--akzent);
  outline-offset:4px;
}
.wrap {
  width:var(--wrap-breite);
  margin-inline:auto;
}
@media (max-width:1100px) {
  :root {
    --wrap-breite:calc(100% - 64px);
  }
}
@media (max-width:560px) {
  :root {
    --wrap-breite:calc(100% - 36px);
  }
}

/* ---------- Schriftstufen ---------- */
h1 {
  margin:0 0 20px;
  font-size:var(--fs-h1);
  font-weight:700;
  line-height:var(--lh-eng);
  letter-spacing:var(--ls-eng);
  overflow-wrap:break-word;
  /* Silbentrennung nur für sehr lange Wörter (≥ 14 Zeichen, mind. 6 vor/nach dem Strich): „Wiederholungs-inspektion“
     ja, „Lo-gistik“ nie (Chris 11.10.2026). Sonst bräche overflow-wrap ein zu langes Wort ohne Strich mitten durch. */
  hyphens:auto;
  hyphenate-limit-chars:14 6 6;
  text-wrap:balance;       /* Zeilen gleichmäßig umbrechen statt einzelner Wörter am Ende */
}
h2 {
  margin:0 0 18px;
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:var(--lh-eng);
  letter-spacing:var(--ls-eng);
}
h3 {
  margin:0 0 10px;
  font-size:var(--fs-l);
  font-weight:700;
  line-height:var(--lh-titel);
}
/* Label in Versalien – Kicker, Chips, Menüpunkte, Tabellenkopf, Nummern: EINE Schriftform (Versalien nur hier) */
.bs-kicker,
.karte-chip,
.karte-entwurf,
.artikel-chips li,
.artikel-text .blog-themen a,
nav.blog-filter>a,
.blog-themen>span,
.blog-hervor-label,
.blog-nachbarn span,
.im-group>summary,
.bs-nr,
.bs-kapitel-nr,
.bs-vergleich thead th,
.pwp-kopf .pwp-zeile,
.pwp-lade {
  font-size:var(--fs-xs);
  font-weight:700;
  line-height:var(--lh-klein);
  letter-spacing:var(--ls-weit);
  text-transform:uppercase;
}
/* Kicker: die Label-Zeile über Überschriften, Karten und Menüspalten (EINE Klasse .bs-kicker – auch im Menü,
   im Fuß, in der Kundenleiste, in Seitenleisten und auf den freien Seiten; Farbe je Ort dort) */
.bs-kicker,
.karte-chip,
.blog-hervor-label,
.blog-nachbarn span,
.bs-nr,
.bs-kapitel-nr {
  display:block;
  margin:0 0 14px;
  color:var(--akzent);
}
/* Kleinschrift: Bildunterschrift, Metazeile, Hilfe, Quellen, Rolle unter Namen – EINE Schriftform */
.bs-unterschrift,
.bs-galerie figcaption,
.bs-kapitel figcaption,
.bs-drohne figcaption,
.artikel-text figcaption,
.bs-hero-notiz,
.bs-kapitel-belege,
.bs-quellen li,
.mail-note,
.blog-seite-hinweis,
.blog-feed,
.blog-leer,
.blog-karte-meta,
.artikel-text .blog-meta,
.bs-aufruf-wege,
.bs-aufruf-hinweis,
.bs-aufruf-danach,
.anfrage .anfrage-pflicht-hinweis,
.anfrage .anfrage-hilfe,
.bs-personen span,
.bs-team span {
  font-size:var(--fs-s);
  line-height:var(--lh-klein);
  color:var(--farbe-gedaempft);
}
/* Name einer Person (Ansprechpartner, Team) */
.bs-personen strong,
.bs-team strong {
  font-size:var(--fs-m);
  color:var(--farbe-schrift);
}

/* ---------- Knöpfe: Hauptknopf (Lime), Zweitknopf (Umriss), Textlink (.bs-mehr) ---------- */
.button,
.bs-link,
.im-contact {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:48px;
  padding:13px 26px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--farbe-lime);
  color:var(--farbe-schrift);
  font-size:var(--fs-m);
  font-weight:700;
  line-height:var(--lh-titel);
  white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s;
}
.button:hover,
.im-contact:hover {
  background:color-mix(in srgb,var(--farbe-lime) 60%,var(--farbe-weiss));
}
.bs-link {
  border-color:currentColor;
  background:transparent;
  color:inherit;
}
.bs-link:hover {
  border-color:var(--akzent);
  color:var(--akzent);
}
/* Textlink unter Karten und Absätzen; Tippziel ≥ 44 px über das Polster (Richtlinie UI/UX C2) */
.bs-mehr,
.karte-mehr {
  display:inline-block;
  padding-block:14px;
  margin:-6px 0 -14px;
  font-size:var(--fs-m);
  font-weight:700;
  color:var(--akzent);
}

/* ---------- Bild-Großansicht (dialog, 50-site.js) ---------- */
.screen-button {
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  cursor:zoom-in;
  overflow:hidden;
  border-radius:var(--radius);
}
.screen-button img {
  display:block;
  width:100%;
  height:auto;
}
.screen-button>span {   /* „Vergrößern“ */
  position:absolute;
  right:12px;
  bottom:12px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--farbe-lime);
  color:var(--farbe-schrift);
  font-size:var(--fs-xs);
  opacity:0;
  transition:opacity .2s;
}
.screen-button:hover>span,
.screen-button:focus-visible>span {
  opacity:1;
}
dialog {
  width:96vw;
  max-width:1700px;
  max-height:95vh;
  padding:50px 10px 10px;
  border:0;
  border-radius:var(--radius);
  background:var(--farbe-weiss);
}
dialog::backdrop {
  background:color-mix(in srgb,var(--farbe-dunkel) 87%,transparent);
}
dialog img {
  display:block;
  width:100%;
  height:auto;
  max-height:calc(95vh - 75px);
  object-fit:contain;
}
body:has(dialog[open]) {
  overflow:hidden;
}
#close-image {
  position:absolute;
  right:12px;
  top:10px;
  padding:8px 14px;
  border:0;
  border-radius:999px;
  background:var(--farbe-lime);
  color:var(--farbe-schrift);
  cursor:pointer;
}
@media (max-width:680px) {
  .screen-button>span {
    opacity:1;
    right:8px;
    bottom:8px;
    padding:6px 10px;
  }
}

/* Icons aus cms/icons.py: <svg class="ico"><use href="#i-…"/></svg>, Symbol einmal je Seite im Sprite nach <body>.
   Strich und Füllung hier (gelten über die Vererbung im Symbol), Farbe = Schriftfarbe, Größe über --ico. */
.ico {
  display:inline-block;
  width:var(--ico,1.25em);
  height:var(--ico,1.25em);
  flex:none;
  vertical-align:-.2em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  * {
    transition:none !important;
  }
}

/* ===== 47-footer.css ===== */
/* ======================================================================
   Kundenleiste (.customer-band, alle Seiten über dem Fuß) und Footer (.im-footer): Claim groß, Marke links,
   Seitenübersicht als Akkordeon mit +/− rechts.
   .im-plus (das Quadrat mit +/−) wird auch im Handymenü und in den FAQ-Bausteinen verwendet.
   ====================================================================== */

/* ---------- Kundenleiste: Logos weiß auf dunkel, über dem Fuß ---------- */
.customer-band {
  padding:28px 0;
  background:var(--farbe-dunkel);
  border-top:1px solid var(--linie-dunkel);
  /* außer Sicht nicht zeichnen – damit lädt auch das Logo-Sprite erst in Sichtnähe (auf der Startseite sofort) */
  content-visibility:auto;
  contain-intrinsic-size:auto 640px;
}
.customer-band .bs-kicker {
  margin-bottom:18px;
  text-align:center;
  color:var(--farbe-hell-grau);
}
.customer-logos {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  align-items:center;
  gap:8px 20px;
}
.customer-logos li {
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
  height:47px;
}
.customer-logos img {
  display:block;
  width:100%;
  max-width:94px;
  height:44px;
  object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.84;
}
/* Im Build: alle Logos in EINER Sprite-Datei (cms/tempo.py) – je Logo ein Kasten im Seitenverhältnis des Logos
   (--r), so groß wie das Bild mit object-fit:contain oben im 94×44-Feld; --logos setzt die Liste. */
.customer-logos .kunde-logo {
  display:block;
  aspect-ratio:var(--r);
  width:min(100%,94px,44px*var(--r));
  background-repeat:no-repeat;
  filter:brightness(0) invert(1);
  opacity:.84;
}
/* Das Sprite (62 KB) kommt erst, wenn das Startbild (LCP) da ist und die Seite geladen: 60-bausteine.js setzt dann
   .logos-an (ohne JavaScript: Regel im <noscript> von basis.html). Vorher teilte es sich auf /ueber-uns/ die Leitung mit
   dem Hero-Bild (LCP Handy 1,88 s). Die Kästen haben ihre Größe schon vorher – kein Layoutsprung. */
.customer-logos.logos-an .kunde-logo {
  background-image:var(--logos);
}
/* Logos mit gefülltem Feld behalten ihren inneren Kontrast */
.customer-logos img[src*="logo-engie"],
.customer-logos img[src*="logo-linde"],
.customer-logos img[src*="logo-henkel"],
.customer-logos img[src*="logo-shell"],
.customer-logos [data-logo="logo-engie"],
.customer-logos [data-logo="logo-linde"],
.customer-logos [data-logo="logo-henkel"],
.customer-logos [data-logo="logo-shell"] {
  filter:grayscale(1) brightness(1.4);
}
@media (max-width:1180px) {
  .customer-logos {
    gap:8px 12px;
  }
}
@media (max-width:1050px) {
  .customer-logos {
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
}
@media (max-width:680px) {   /* ~80 Logos: dicht, sonst 27 Reihen */
  .customer-band {
    padding-block:24px;
  }
  .customer-logos {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:6px 12px;
  }
  .customer-logos li {
    height:34px;
  }
  .customer-logos img {
    max-width:64px;
    height:30px;
  }
  .customer-logos .kunde-logo {
    width:min(100%,64px,30px*var(--r));
  }
}

.im-footer {
  --akzent:var(--farbe-lime);
  padding:70px 0 28px;
  background:var(--farbe-dunkel);
  color:var(--farbe-weiss);
}
.im-footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  padding-bottom:55px;
  border-bottom:1px solid var(--linie-dunkel);
}
.im-footer-top .aufrufe {   /* die drei Wege (teile.html aufrufe) */
  flex:none;
  margin:0;
}
.im-footer-top .bs-kicker {
  margin:0;
  color:var(--farbe-hell-grau);
}
/* der Claim groß – bewusst leichter als die Überschriften */
.im-slogan {
  max-width:720px;
  margin:12px 0 0;
  font-size:var(--fs-xl);   /* kleiner (Chris 11.10.2026) */
  font-weight:400;
  line-height:var(--lh-titel);
  letter-spacing:var(--ls-eng);
}
.im-footer-main {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:100px;
  padding:60px 0;
}
.im-footer-brand .logo {
  display:block;
  width:235px;
  height:auto;
}
.im-footer-brand p {
  font-size:var(--fs-s);
  line-height:var(--lh-klein);
  color:var(--farbe-hell-grau);
}
/* Telefonnummer im Fuß: Tippziel ≥ 36 px hoch (C2), Lage der Schrift unverändert */
.im-footer-brand .telefon {
  display:inline-block;
  padding-block:10px;
  margin-block:-10px;
}
.im-footer-mail {
  display:inline-block;
  margin:6px 0 4px;
  padding-bottom:6px;
  border-bottom:1px solid var(--farbe-hell-grau);
  font-size:var(--fs-m);
  overflow-wrap:anywhere;
}
.im-acc {
  border-top:1px solid var(--linie-dunkel);
}
.im-acc:first-child {
  border-top:0;
}
.im-acc summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:16px 0;
  cursor:pointer;
  font-size:var(--fs-l);
  font-weight:700;
  line-height:var(--lh-titel);
}
.im-acc summary::-webkit-details-marker {
  display:none;
}

/* Das Quadrat mit + (geschlossen) bzw. − (offen): zwei Balken, der senkrechte dreht sich weg. */
.im-plus {
  position:relative;
  flex:none;
  width:52px;
  height:52px;
  border-radius:var(--radius);
  background:var(--flaeche);
}
.im-plus::before,
.im-plus::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:20px;
  height:2px;
  background:var(--farbe-dunkel);
  transform:translate(-50%,-50%);
  transition:transform .2s;
}
.im-plus::after {
  transform:translate(-50%,-50%) rotate(90deg);
}
[open]>summary>.im-plus::after {
  transform:translate(-50%,-50%) rotate(0deg);
}
.im-acc summary:hover .im-plus {
  background:var(--farbe-lime);
}
.im-acc>div {
  display:grid;
  gap:4px;
  padding:0 0 22px;
}
.im-acc>div a {
  padding:6px 0;
  font-size:var(--fs-m);
  color:var(--farbe-hell-grau);
}
.im-acc>div a:hover,
.im-acc>div a[aria-current] {
  color:var(--farbe-lime);
}
.im-footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-top:25px;
  border-top:1px solid var(--linie-dunkel);
  font-size:var(--fs-s);
  line-height:var(--lh-klein);
  color:var(--farbe-hell-grau);
}
.im-footer-bottom>div {
  display:flex;
  flex-wrap:wrap;
  gap:25px;
}
.im-footer-bottom a {
  padding:8px 0;
}
@media (max-width:800px) {
  .im-footer {
    padding:50px 0 max(16px,env(safe-area-inset-bottom));
  }
  .im-footer-top {
    display:block;
    padding-bottom:32px;
  }
  .im-footer-top .aufrufe {
    margin-top:26px;
  }
  .im-footer-main {
    grid-template-columns:1fr;
    gap:35px;
    padding:35px 0;
  }
  .im-plus {
    width:44px;
    height:44px;
  }
  .im-footer-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .im-footer-bottom a {
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}

/* ===== 55-bausteine.css ===== */
/* ======================================================================
   Baukasten (inhalte/seiten/*.toml, vorlagen/bausteine/): jeder Block ist
   <section class="bs bs-typ-<typ> bs-<hintergrund>">. Schriftstufen, Knöpfe und Kicker: 20-basis.css.
   Helle Blöcke sind weiß, getrennt durch eine Haarlinie – kein Wechsel weiß/grau (Chris 10.10.2026).
   Dunkel nur für Bildblöcke: Hero, Bildbahn, Punktwolke, Bild-Text mit großem Bild.
   Aufruf: 56-bausteine-neu.css.
   ====================================================================== */

.bs {
  padding:var(--abstand) 0;
}
.bs:not(.bs-dunkel,.bs-typ-pfad) + .bs:not(.bs-dunkel) {
  border-top:1px solid var(--linie);
}
.bs-dunkel {
  --akzent:var(--farbe-lime);
  background:var(--farbe-dunkel);
  color:var(--farbe-weiss);
}
:where(.bs) p,
:where(.bs) li {   /* :where – jede Klassenregel geht vor */
  font-size:var(--fs-text);
  line-height:var(--lh-text);
  color:var(--farbe-schrift-grau);
}
:where(.bs-dunkel) p,
:where(.bs-dunkel) li {
  color:var(--farbe-hell-grau);
}
:where(.bs) p a,
:where(.bs) li a,
.bs-links > a,
.bs-typ-pfad .wrap>p a,
.bs-quellen a {
  color:var(--akzent);
  text-decoration:underline;
  text-underline-offset:3px;
}
.bs-kopf {
  max-width:760px;
  margin-bottom:46px;
}
.bs-zentriert {
  margin-inline:auto;
  text-align:center;
}
.bs-einleitung p:last-child {
  margin-bottom:0;
}
.bs-knoepfe {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  margin-top:28px;
}
.bs-knoepfe.bs-zentriert {
  justify-content:center;
}
/* Die drei Wege (vorlagen/teile.html aufrufe, site.toml [aufrufe], Chris 12.10.2026): Anrufen (Lime) ·
   Kostenlose Erstberatung (Rahmen) · Anfrage senden (Textlink in Schriftfarbe, klar untergeordnet) */
.aufrufe .ico {
  flex:none;
  width:20px;
  height:20px;
}
.aufrufe .button,
.aufrufe .bs-link {
  gap:10px;
}
.aufrufe-nr {   /* Nummer im Anruf-Knopf, wo Platz ist */
  font-weight:400;
}
.aufrufe-text {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:48px;   /* Tippziel (C2), auf Höhe der Knöpfe */
  padding-inline:4px;
  font-size:var(--fs-m);
  font-weight:700;
  color:inherit;
}
.aufrufe-text>span:first-child {   /* Unterstrich nur unter dem Wort, nicht unter dem Pfeil */
  text-decoration:underline;
  text-underline-offset:4px;
}
.aufrufe-text:hover {
  color:var(--akzent);
}
@media (max-width:420px) {
  .aufrufe-nr {
    display:none;
  }
}
:where(.bs) video,
:where(.bs) img {
  display:block;
  width:100%;
  height:auto;
}
/* Bilder und Videos: eine Rundung */
.bs-medium img,
.bs-medium video,
.bs-galerie video,
.bs-reiter>li>div:first-child img,
.bs-reiter>li>div:first-child video,
.bs-kapitel figure img,
.bs-kapitel figure video {
  border-radius:var(--radius);
}
/* Bildunterschriften: Abstand zum Bild (Schrift: Kleinschrift in 20-basis.css) */
.bs-unterschrift,
.bs-galerie figcaption,
.bs-kapitel figcaption,
.bs-drohne figcaption {
  margin:10px 0 0;
}
/* Bildnachweis fremder Bilder („Bild: Flyability“) hinter der Unterschrift */
.bs-nachweis {
  white-space:nowrap;
  font-style:italic;
}
.bs-dunkel .bs-unterschrift {
  color:var(--farbe-hell-grau);
}

/* ---------- Karten: weiß, Haarlinie, Rundung, kein Schatten ---------- */
.bs-karte,
.bs-loesung-karte,
.karte,
.contact-person,
.anfrage-karte,
.bs-aufruf-karte,
nav.blog-nachbarn>a {
  border:1px solid var(--linie);
  border-radius:var(--radius);
  background:var(--farbe-weiss);
  color:var(--farbe-schrift);
  overflow:hidden;
}
a.karte:hover,
nav.blog-nachbarn>a:hover {
  border-color:var(--akzent);
}
/* .bs-karte: Kundenfrage, Kompetenz (kundenfragen: Schlagwort/Kennzahl `wert` als <strong> vor der Frage) */
.bs-karte {
  padding:28px;
}
.bs-karte p,
.karte-teaser {
  font-size:var(--fs-text);
  line-height:var(--lh-text);
}
.bs-karte>strong {
  display:block;
  margin-bottom:14px;
  font-size:var(--fs-xl);   /* Chris 12.10.2026: Schlagwort (Planbarkeit …) kleiner */
  font-weight:700;
  line-height:var(--lh-eng);
  letter-spacing:var(--ls-eng);
  color:var(--farbe-schrift);
}
.bs-karte>strong~p {
  margin:0;
}

/* Kartenraster: höchstens drei je Reihe, immer linksbündig – auch eine angefangene letzte Reihe und eine
   einzelne Karte stehen links (Richtlinie UI/UX, Chris 10.10.2026; ersetzt „letzte Reihe mittig“ vom 08.10.).
   Vier Karten bleiben 2 + 2 (Chris 08.10.2026), fünf werden 3 + 2 mit der Zweierreihe links. */
.karten {
  --raster-gap:22px;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:var(--raster-gap);
}
.karten > * {
  flex:0 1 calc((100% - 2 * var(--raster-gap)) / 3);
  min-width:0;
}
.karten:has(> :nth-child(4):last-child) > * {
  flex-basis:calc((100% - var(--raster-gap)) / 2);
}
@media (max-width:900px) {
  .karten > * {
    flex-basis:calc((100% - var(--raster-gap)) / 2);
  }
}
@media (max-width:600px) {
  /* so spezifisch wie die 4-Karten-Regel, sonst wird die Seite breiter als das Handy */
  .karten > *,
  .karten:has(> :nth-child(4):last-child) > * {
    flex-basis:100%;
  }
}

/* Fall- und Artikelkarten (cms/render.py faelle_karten, blog-teile.html) */
.karte {
  position:relative;
  display:flex;
  flex-direction:column;
}
.karte img {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.karte-chip {
  margin:22px 22px 8px;
}
.karte strong {
  margin:0 22px;
  font-size:var(--fs-l);
  line-height:var(--lh-titel);
  color:var(--farbe-schrift);
}
.karte-teaser {
  margin:8px 22px 0;
  color:var(--farbe-gedaempft);
}
.karte-mehr {
  margin:auto 22px 8px;
  padding-top:16px;
}
.karte-entwurf {
  position:absolute;
  top:12px;
  left:12px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--farbe-lime);
}

/* Icons in Bausteinen (Feld `icon` in kundenfragen, schritte, kompetenz) */
.bs-icon {
  --ico:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  margin-bottom:16px;
  border-radius:50%;
  background:var(--flaeche);
  color:var(--akzent);
}

/* ---------- hero ---------- */
.bs.bs-typ-hero {
  position:relative;
  min-height:max(var(--hero-min),var(--hero-hoehe));
  display:flex;
  align-items:flex-end;
  padding:0;
  background:var(--farbe-dunkel);
  color:var(--farbe-weiss);
  overflow:hidden;
}
.bs-hero-medium,
.bs-hero-medium video,
.bs-hero-medium img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.bs-hero-medium video,
.bs-hero-medium img,
.photo-hero>img,
.photo-hero>picture>img {
  filter:brightness(.62) saturate(.85);
}
/* Hero-Video über seinem Standbild-<img> (bausteine/_teile.html): 2 px niedriger, damit Chrome das Bild
   als größtes Element (LCP) behält und nicht auf das Video wartet. */
.bs-hero-medium :is(img,picture) + video {
  height:calc(100% - 2px);
}
.bs-hero-medium::after,
.photo-hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:var(--overlay-hero);
}
.bs-hero-text {
  position:relative;
  z-index:1;
  padding:150px 0 90px;
}
/* 960 px: ein langes Kompositum wie „Wiederholungsinspektion:“ (901 px bei 78 px Schrift) passt am Desktop in
   eine Zeile, die Überschrift wird eine Zeile kürzer; lesbar bleibt sie über Abdunklung und Verlauf (11.10.2026) */
.bs-typ-hero h1,
.bs-typ-seitenkopf h1 {
  max-width:960px;
}
.bs-hero-lead {
  max-width:620px;
}
.bs-hero-lead p {
  font-size:var(--fs-l);
  color:var(--farbe-weiss);
}
/* Vertrauenszeile unter den Knöpfen (z. B. „Verarbeitung rein lokal, auch für KRITIS.“) */
.bs-hero-notiz {
  margin-top:18px;
  color:var(--farbe-hell-grau);
}
/* Seitenkopf ohne Bild: Abstand unter dem festen Header */
.bs-typ-seitenkopf {
  padding-top:calc(var(--hh) + 48px);
}

/* ---------- Foto-Hero außerhalb des Baukastens (Blog-Listen, /kontakt/); Kopfzeile liegt darauf.
   Abdunklung und Verlauf wie der Baustein hero (gemeinsame Regeln oben) ---------- */
.photo-hero {
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  min-height:max(var(--hero-min),var(--hero-hoehe));
  overflow:hidden;
  background:var(--farbe-dunkel);
  color:var(--farbe-weiss);
}
.photo-hero>img,
.photo-hero>picture>img {
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
}
.photo-hero::after {
  z-index:-1;
}
.photo-hero>div {
  width:var(--wrap-breite);
  margin-inline:auto;
  padding:165px 0 65px;
}
.photo-hero .bs-kicker,
.photo-hero h1 span {
  color:var(--farbe-lime);
}
.photo-hero h1 {
  max-width:1120px;
  margin:0;
}
.photo-hero-schornstein>img,
.photo-hero-schornstein>picture>img {   /* Blog-Hero (site.toml hero_klasse) */
  object-position:50% 15%;
}
@media (max-width:680px) {
  .photo-hero>div {
    padding:120px 0 40px;
  }
  .photo-hero>img,
  .photo-hero>picture>img {
    object-position:58% center;
  }
  .photo-hero-schornstein>img,
  .photo-hero-schornstein>picture>img {
    object-position:55% 30%;
  }
}

/* ---------- pfad ---------- */
.bs.bs-typ-pfad {
  padding:0;
  border-bottom:1px solid var(--linie);
}
.bs-typ-pfad .wrap {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  min-height:58px;
  font-size:var(--fs-s);
}
.bs-typ-pfad nav {
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
  align-items:center;
}
.bs-typ-pfad .bs-krumen {
  gap:10px;
  color:var(--farbe-gedaempft);
}
.bs-unterseiten a {
  color:var(--farbe-schrift-grau);
}
.bs-krumen a:hover,
.bs-unterseiten a:hover {
  color:var(--akzent);
}
/* Projektbeispiel → Anlagenseite (Feld leistung, Richtlinie Abschnitt 17) */
.bs-typ-pfad .wrap>p {
  margin:0;
  font-size:inherit;
  line-height:inherit;
  color:var(--farbe-gedaempft);
}
/* Tippziele im Pfad mindestens 24 px hoch (Lighthouse „target-size“) */
.bs-typ-pfad nav > a,
.bs-typ-pfad .wrap>p a {
  display:inline-block;
  padding-block:5px;
}

/* ---------- bild-text ---------- */
.bs-zweispaltig {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:70px;
  align-items:center;
}
.bs-zweispaltig.bs-rechts .bs-medium {
  order:2;
}
.bs-medium {
  margin:0;
}
.bs-medium video,
.bs-medium img {
  aspect-ratio:16/10;
  object-fit:cover;
}
/* freigestelltes Produktbild: ganz zeigen, kein Zuschnitt, keine Rundung */
.bs-medium img.bs-frei {
  aspect-ratio:auto;
  object-fit:contain;
  max-height:520px;
  margin:0 auto;
  border-radius:0;
}
.bs-zweispaltig .bs-kopf {
  margin-bottom:0;
}
.bs-haken {
  list-style:none;
  margin:22px 0 0;
  padding:0;
}
.bs-haken li {
  position:relative;
  padding:4px 0 4px 32px;
}
.bs-haken li::before {
  content:"";
  position:absolute;
  left:4px;
  top:12px;
  width:12px;
  height:7px;
  border-left:2.5px solid var(--akzent);
  border-bottom:2.5px solid var(--akzent);
  transform:rotate(-45deg);
}

/* ---------- loesung ---------- */
.bs-loesung {
  display:grid;
  gap:34px;
}
.bs-loesung-karte {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:center;
}
.bs-loesung-karte.bs-rechts>div:first-child {
  order:2;
}
.bs-loesung-karte>div:first-child video,
.bs-loesung-karte>div:first-child img {
  aspect-ratio:16/10;
  object-fit:cover;
}
.bs-loesung-karte>div+div {
  padding:36px 44px;
}

/* ---------- schritte ---------- */
.bs-schritte {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-top:1px solid var(--linie);
}
.bs-schritte>div {
  padding:26px 28px 10px 0;
}
.bs-schritte>div+div {
  padding-left:28px;
  border-left:1px solid var(--linie);
}
/* Genau vier Schritte: 2 × 2 statt vier schmaler Spalten (Chris 14.10.2026) – nur ab Tablet, am Handy untereinander */
@media (min-width:601px) {
  .bs-schritte:has(>div:nth-child(4):last-child) {
    grid-template-columns:repeat(2,1fr);
  }
  .bs-schritte:has(>div:nth-child(4):last-child)>div:nth-child(3) {
    padding-left:0;
    border-left:0;
  }
  .bs-schritte:has(>div:nth-child(4):last-child)>div:nth-child(n+3) {
    border-top:1px solid var(--linie);
  }
}
.bs-nr,
.bs-kapitel-nr {
  margin-bottom:16px;
}

/* ---------- faq: eine Spalte, Fragen untereinander (Chris 09.10.2026) ---------- */
.bs-faq {
  max-width:880px;   /* linksbündig an der Inhaltskante, nicht mittig eingerückt (13.10.2026) */
}
.bs-faq>details {
  border-bottom:1px solid var(--linie);
}
.bs-faq summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:16px 0;
  cursor:pointer;
  font-size:var(--fs-text);
  font-weight:700;
}
.bs-faq summary::-webkit-details-marker {
  display:none;
}
.bs-faq .im-plus {
  width:36px;
  height:36px;
}
.bs-faq .im-plus::before,
.bs-faq .im-plus::after {
  width:14px;
}
.bs-faq>details>div {
  padding:0 0 16px;
}

/* ---------- quellen: kompakt, wie Fußnoten ---------- */
.bs.bs-typ-quellen {
  padding:56px 0;
}
.bs-typ-quellen h2 {   /* kompakt: h2 in der Größe eines h3 */
  font-size:var(--fs-l);
  line-height:var(--lh-titel);
  letter-spacing:0;
}
.bs-quellen {
  margin:0;
  padding-left:22px;
}

/* ---------- galerie ---------- */
.bs-galerie {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.bs-galerie.bs-spalten-2 {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.bs-galerie.bs-spalten-4 {
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.bs-galerie>figure {
  margin:0;
}
.bs-galerie img,
.bs-galerie video {
  aspect-ratio:4/3;
  object-fit:cover;
}
/* zuschnitt = false: Grafiken ganz zeigen, mit Rahmen (Isometrie/Abwicklung auf /anlagen/silo/) */
.bs-galerie.bs-ganz img {
  aspect-ratio:auto;
  border:1px solid var(--linie);
  background:var(--farbe-weiss);
}
.bs-galerie .screen-button img {
  transition:transform .4s;
}
.bs-galerie .screen-button:hover img {
  transform:scale(1.03);
}

.bs-personen img {
  flex:none;
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
}
.bs-personen span {
  display:flex;
  flex-direction:column;
}

/* ---------- Personen (kompetenz, aufruf, /kontakt/): rundes Porträt, daneben Name und Rolle ---------- */
.bs-personen {
  list-style:none;
  margin:26px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;   /* Personen immer untereinander (Chris 10.10.2026) */
  gap:16px;
}
.bs-personen li {
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
}

/* ---------- kompetenz: das Team – rundes Porträt (Gesicht mittig, eigene -rund.webp), Name, Rolle (Chris 11.10.2026) ---------- */
.bs-team {
  list-style:none;
  margin:8px auto 56px;
  padding:0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:24px 32px;
}
.bs-team li {
  margin:0;
  width:270px;   /* „Dipl.-Ing. Juliana Engelke“ in einer Zeile */
  text-align:center;
}
.bs-team img {
  display:block;
  width:220px;
  height:220px;
  margin:0 auto;
  border-radius:50%;
  object-fit:cover;
  background:var(--flaeche);
}
.bs-team strong {   /* große Porträts: Name eine Stufe größer als im Aufruf (Präsenz, Chris 10.10.2026) */
  display:block;
  margin-top:16px;
  font-size:var(--fs-l);
}
.bs-team span {
  display:block;
  margin-top:2px;
}

/* ---------- anwendungen: untereinander, Medium links, Text rechts (Chris 10.10.2026: keine Reiter) ---------- */
.bs-reiter {
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:1080px;
  border-top:1px solid var(--linie);
}
.bs-reiter>li {
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:48px;
  align-items:center;
  padding:36px 0;
  border-bottom:1px solid var(--linie);
}
.bs-reiter>li>div:first-child img,
.bs-reiter>li>div:first-child video {
  aspect-ratio:3/2;
  object-fit:cover;
}
.bs-reiter .bs-haken + .bs-mehr {
  margin-top:4px;   /* 18 px Abstand zur Schrift, 14 px davon sind Polster (.bs-mehr) */
}

/* ---------- links: Linkleiste ---------- */
.bs-links {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 28px;
  margin-top:8px;
}

/* ---------- hintergrund: Kapitel zum größeren Zusammenhang, stehen im Inhaltsverzeichnis ---------- */
.bs-hintergrund {
  margin-top:28px;
}
.bs-kapitel {
  max-width:780px;
  padding:0 0 36px;
  margin:0 0 36px;
  border-bottom:1px solid var(--linie);
  scroll-margin-top:calc(var(--hh-klein) + 24px);
}
.bs-kapitel:last-child {
  border-bottom:0;
  margin-bottom:0;
}
.bs-kapitel-nr {
  margin-bottom:6px;
}
.bs-kapitel h3 {
  margin:0 0 14px;
  font-size:var(--fs-xl);
  line-height:var(--lh-titel);
  letter-spacing:var(--ls-eng);
}
.bs-kapitel figure {
  margin:22px 0 0;
}
.bs-kapitel-belege {
  margin:16px 0 0;
}
/* Belegnummern „1, 2“: Tippziel 24 × 27 px (C2, WCAG 2.5.8) */
.bs-kapitel-belege a {
  display:inline-block;
  min-width:24px;
  padding-block:4px;
  margin-block:-4px;
  text-align:center;
}

/* ---------- Seite mit Inhaltsverzeichnis (Kopffeld inhaltsverzeichnis = true): links das mitlaufende
   Verzeichnis (.artikel-seite/.artikel-toc aus 50-artikel.css), rechts die Blöcke; deren Flächen laufen
   bis zum rechten Bildschirmrand weiter ---------- */
.bausteine-mit-verzeichnis {
  overflow-x:clip;
}
.bs-verzeichnis-raster {
  display:grid;
  grid-template-columns:minmax(220px,280px) minmax(0,1fr);
  align-items:start;
  width:var(--wrap-breite);
  margin:0 auto;
}
.bs-verzeichnis.artikel-seite {
  padding:40px 32px 60px 0;
}
.bs-verzeichnis .artikel-toc .toc-3 {
  padding-left:14px;
  font-weight:400;
}
.bs-verzeichnis-inhalt {
  min-width:0;
  isolation:isolate;   /* die verlängerten Flächen liegen über dem Seitengrund */
}
.bs-verzeichnis-inhalt > .bs {
  position:relative;
}
.bs-verzeichnis-inhalt > .bs::before {
  content:'';
  position:absolute;
  inset:0 -100vmax 0 0;
  background:inherit;
  z-index:-1;
}
.bs-verzeichnis-inhalt > .bs > .wrap {
  width:auto;
  margin:0;
  padding-left:48px;
}
.bs-verzeichnis-inhalt > .bs-typ-bildbahn figcaption {
  padding-left:48px;
}
/* Die Sprunglinks im Pfad ersetzt das Verzeichnis – auf dem Handy bleiben sie */
.bausteine-mit-verzeichnis .bs-typ-pfad .bs-unterseiten {
  display:none;
}
/* Bildbahn und Punktwolke reichen bis zum rechten Bildschirmrand (Chris 09.10.2026):
   Abstand rechts = (Raster − Bildschirm) / 2, Raster wie --wrap-breite */
@media (min-width:1001px) {
  .bs-verzeichnis-inhalt > :is(.bs-typ-bildbahn,.bs-typ-punktwolke) {
    margin-right:calc((min(1320px,100vw - 96px) - 100vw) / 2);
  }
  .bs-verzeichnis-inhalt > :is(.bs-typ-bildbahn,.bs-typ-punktwolke)::before {
    content:none;
  }
}
@media (min-width:1001px) and (max-width:1100px) {
  .bs-verzeichnis-inhalt > :is(.bs-typ-bildbahn,.bs-typ-punktwolke) {
    margin-right:-32px;
  }
}
@media (max-width:1000px) {
  .bs-verzeichnis-raster {
    display:block;
    width:auto;
  }
  .bs-verzeichnis.artikel-seite {
    display:none;
  }
  .bs-verzeichnis-inhalt > .bs > .wrap {
    width:var(--wrap-breite);
    margin:0 auto;
    padding:0;
  }
  .bs-verzeichnis-inhalt > .bs-typ-bildbahn figcaption {
    padding-left:0;
  }
  .bausteine-mit-verzeichnis .bs-typ-pfad .bs-unterseiten {
    display:flex;
  }
}

/* ---------- bildbahn: großes Foto über die volle Breite, Zeile unten links ---------- */
.bs-typ-bildbahn {
  padding:0;
}
.bs-bildbahn {
  position:relative;
  margin:0;
  height:min(72svh,760px);
  min-height:380px;
  overflow:hidden;
}
.bs-bildbahn img,
.bs-bildbahn video {
  height:100%;
  object-fit:cover;
  object-position:var(--fokus,50% 50%);
}
.bs-bildbahn::after {
  content:'';
  position:absolute;
  inset:40% 0 0;
  background:linear-gradient(transparent,var(--overlay));
  pointer-events:none;
}
.bs-bildbahn figcaption {
  position:absolute;
  left:0;
  right:0;
  bottom:clamp(20px,5vh,48px);
  z-index:1;
  margin:0 auto;
  color:var(--farbe-weiss);
}
.bs-bildbahn .bs-kicker {
  margin-bottom:8px;
}
.bs-bildbahn-text {
  display:block;
  max-width:620px;
  font-size:var(--fs-xl);
  font-weight:700;
  line-height:var(--lh-titel);
  letter-spacing:var(--ls-eng);
}

/* ---------- drohne: Elios 3 mit Hinweispunkten (drohne.html, 69-drohne.js) ---------- */
.bs-drohne {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:48px;
  align-items:center;
  margin-top:32px;
}
.bs-drohne figure {
  position:relative;
  margin:0;
}
.bs-drohne button {   /* Hinweispunkt am Gerät */
  position:absolute;
  transform:translate(-50%,-50%);
  width:34px;
  height:34px;
  padding:0;
  border:2px solid var(--farbe-dunkel);
  border-radius:50%;
  background:var(--farbe-lime);
  color:var(--farbe-dunkel);
  font-size:var(--fs-s);
  font-weight:700;
  cursor:pointer;
  animation:bs-puls 2.4s ease-out infinite;
}
.bs-drohne button:nth-of-type(2) { animation-delay:.6s; }
.bs-drohne button:nth-of-type(3) { animation-delay:1.2s; }
.bs-drohne button:nth-of-type(4) { animation-delay:1.8s; }
.bs-drohne button.aktiv {
  background:var(--farbe-dunkel);
  color:var(--farbe-lime);
  transform:translate(-50%,-50%) scale(1.2);
  animation:none;
}
@keyframes bs-puls {
  0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--farbe-lime) 70%,transparent); }
  70% { box-shadow:0 0 0 16px transparent; }
  100% { box-shadow:0 0 0 0 transparent; }
}
.bs-drohne ol {
  list-style:none;
  counter-reset:dr;
  margin:0 0 24px;
  padding:0;
  display:grid;
  gap:14px;
}
.bs-drohne ol>li {
  counter-increment:dr;
  position:relative;
  padding:2px 0 2px 46px;
  transition:opacity .25s;
}
.bs-drohne ol>li::before {
  content:counter(dr);
  position:absolute;
  left:0;
  top:0;
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--flaeche);
  color:var(--farbe-gruen);
  font-size:var(--fs-s);
  font-weight:700;
}
.bs-drohne ol>li strong {
  display:block;
  margin-bottom:2px;
  color:var(--farbe-schrift);
}
.bs-drohne ol>li p {
  margin:0;
}
.bs-drohne:has(.aktiv) ol>li:not(.aktiv) {
  opacity:.4;
}
.bs-drohne ol>li.aktiv::before {
  background:var(--farbe-dunkel);
  color:var(--farbe-lime);
}
.bs-drohne ul {   /* Einsatz */
  margin:0 0 16px;
}

@media (max-width:900px) {
  :root {
    --abstand:64px;
  }
  .bs-zweispaltig,
  .bs-loesung-karte,
  .bs-drohne {
    grid-template-columns:1fr;
    gap:30px;
  }
  .bs-zweispaltig.bs-rechts .bs-medium,
  .bs-loesung-karte.bs-rechts>div:first-child {
    order:0;
  }
  .bs-loesung-karte>div+div {
    padding:26px 24px 30px;
  }
  .bs-typ-pfad .wrap {
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:14px 0;
  }
  .bs-schritte>div,
  .bs-schritte>div+div {
    padding:22px 0 6px;
    border-left:0;
    border-bottom:1px solid var(--linie);
  }
  .bs-hero-text {
    padding:120px 0 60px;
  }
  .bs-galerie,
  .bs-galerie.bs-spalten-4 {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .bs-reiter>li {
    grid-template-columns:1fr;
    gap:18px;
    padding:28px 0;
  }
  .bs-drohne button {
    width:28px;
    height:28px;
  }
  .bs-team {
    gap:20px;
    margin-bottom:40px;
  }
  .bs-team li {
    width:140px;
  }
  .bs-team img {
    width:140px;
    height:140px;
  }
  .bs-team strong {
    font-size:var(--fs-m);
  }
}
@media (max-width:560px) {
  .bs-galerie.bs-galerie {
    grid-template-columns:1fr;
  }
}
@media (prefers-reduced-motion:reduce) {
  .bs-drohne button {
    animation:none;
  }
}

/* ======================================================================
   Baustein „aufruf“ (vorlagen/bausteine/aufruf.html): Abschluss jeder Seite mit dem Anfrageformular.
   Alle übrigen Bausteine: 55-bausteine.css; Tokens: 10-tokens.css.
   ====================================================================== */

/* Aufruf: Karte mit Text links und dem zentralen Anfrageformular rechts (Chris 10.10.2026) */
.bs-aufruf-karte { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start;
  padding:48px; }   /* Karte: 55-bausteine.css */
.bs-aufruf-karte .bs-kopf { margin:0; text-align:left; }
.bs-aufruf-wege, .bs-aufruf-danach { margin:24px 0 0; }
.bs-aufruf-karte .aufrufe { margin-top:28px; }
.bs-aufruf-hinweis { margin:12px 0 0; }
.bs-aufruf-formular-titel { margin:0 0 20px; font-size:var(--fs-l); line-height:var(--lh-titel); }   /* dritter Weg */
.bs-aufruf-danach p { margin:0; font-size:inherit; }
.bs-aufruf-wege a { color:var(--farbe-schrift); text-decoration:underline; text-underline-offset:3px; display:inline-block; padding-block:10px; margin-block:-10px; }
@media (max-width:900px) {
  .bs-aufruf-karte { grid-template-columns:1fr; gap:32px; padding:28px 20px; }
}

/* ---------- vergleich (Abschnitt 34): Klassisch oder per Drohne ----------
   Drohnen-Spalte als hervorgehobene Karte (Lime zart, Haken in Grün), klassische Spalte gedämpft mit ×. */
.bs-vergleich-rahmen {
  --vg-hell:color-mix(in srgb, var(--farbe-lime) 26%, var(--farbe-weiss));
  max-width:1040px;
  margin-top:8px;
}
.bs-vergleich {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:var(--fs-m);
  line-height:var(--lh-klein);
}
.bs-vergleich th,
.bs-vergleich td {
  padding:18px 20px;
  border-bottom:1px solid var(--linie);
  text-align:left;
  vertical-align:top;
}
.bs-vergleich thead th,
.bs-vergleich thead td {
  padding-block:18px 14px;
  border-bottom:0;
  color:var(--farbe-gedaempft);
}
.bs-vergleich thead th .ico {
  width:22px;
  height:22px;
  margin:-3px 10px 0 0;
  vertical-align:middle;
}
.bs-vergleich tbody th {
  width:22%;
  padding-left:0;
  color:var(--farbe-schrift);
}
.bs-vergleich td {
  color:var(--farbe-gedaempft);
}
.bs-vergleich td .ico {
  float:left;
  width:20px;
  height:20px;
  margin:1px 12px 0 0;
}
.bs-vergleich td span {
  display:block;
  overflow:hidden;
}
.bs-vergleich td:first-of-type .ico {
  color:var(--farbe-hell-grau);
}
/* Drohnen-Spalte: eine Karte über alle Zeilen */
.bs-vergleich thead th:last-child,
.bs-vergleich td:last-child {
  width:39%;
  background:var(--vg-hell);
  color:var(--farbe-schrift);
  border-bottom-color:color-mix(in srgb, var(--farbe-gruen) 18%, transparent);
}
.bs-vergleich thead th:last-child {
  border-radius:var(--radius) var(--radius) 0 0;
  font-weight:700;
}
.bs-vergleich td:last-child {
  font-weight:600;
}
.bs-vergleich tbody tr:last-child td:last-child {
  border-bottom:0;
  border-radius:0 0 var(--radius) var(--radius);
}
.bs-vergleich td:last-child .ico {
  padding:3px;
  border-radius:50%;
  background:var(--farbe-gruen);
  color:var(--farbe-weiss);
  stroke-width:3;
}
.bs-vergleich-rahmen+div {   /* „Wo klassisch nötig bleibt“ */
  max-width:760px;
  margin-top:36px;
}
.bs-vergleich-rahmen+div h3 {
  margin-bottom:6px;
}
@media (max-width:600px) {
  /* Team: am Handy untereinander, Porträt groß (Chris 12.10.2026) */
  .bs-team { flex-direction:column; align-items:center; gap:36px; }
  .bs-team li { width:auto; }
  .bs-team img { width:180px; height:180px; }
  .bs-team strong { font-size:var(--fs-l); }
  /* Vergleich am Handy: je Gesichtspunkt eine Karte, „Per Drohne“ unten hervorgehoben */
  .bs-vergleich,
  .bs-vergleich tbody,
  .bs-vergleich tr,
  .bs-vergleich th,
  .bs-vergleich td {
    display:block;
    width:auto !important;
  }
  .bs-vergleich thead {
    display:none;
  }
  .bs-vergleich tr {
    margin-bottom:14px;
    border:1px solid var(--linie);
    border-radius:var(--radius);
    overflow:hidden;
  }
  .bs-vergleich tbody th {
    padding:14px 16px 6px;
    border:0;
  }
  .bs-vergleich td {
    padding:6px 16px 14px;
    border:0;
  }
  .bs-vergleich td:last-child {
    padding-top:14px;
    border-radius:0 !important;
  }
  .bs-vergleich td::before {
    content:attr(data-spalte);
    display:block;
    margin:0 0 4px 32px;
    font-size:var(--fs-xs);
    font-weight:700;
    letter-spacing:var(--ls-weit);
    text-transform:uppercase;
    color:var(--farbe-gedaempft);
  }
}

/* Brotkrumen als Liste (WAI-ARIA-Muster, 11.10.2026): sieht aus wie vorher, eine Zeile mit › dazwischen */
.bs-krumen ol,
.artikel-pfad ol {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  margin:0;
  padding:0;
  list-style:none;
}
.bs-krumen li,
.artikel-pfad li {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
}

/* ---------- Visitenkarte (seitenkopf visitenkarte = true, cms/visitenkarte.py, Chris 12.10.2026) ---------- */
.vk {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:28px 36px;
  align-items:center;
  max-width:960px;
  margin-top:40px;
  padding:28px;
  border:1px solid var(--linie-dunkel);
  border-radius:var(--radius);
}
.vk-bild {
  width:160px;
  height:160px;
  border-radius:50%;
  object-fit:cover;
}
.vk-name {
  margin:0;
  font-size:var(--fs-xl);
  font-weight:700;
  line-height:var(--lh-titel);
  color:var(--farbe-weiss);
}
.vk-rolle {
  margin:6px 0 16px;
  font-size:var(--fs-m);
  color:var(--farbe-hell-grau);
}
.vk-wege {
  margin:0 0 20px;
  padding:0;
  list-style:none;
}
.vk-wege li {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:4px 0;
  font-size:var(--fs-m);
  color:var(--farbe-hell-grau);
}
.vk-wege a {
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  color:var(--farbe-weiss);
}
.vk-wege .ico {
  width:20px;
  height:20px;
  flex:none;
  color:var(--farbe-lime);
}
.vk-qr-rahmen {
  margin:0;
  text-align:center;
}
.vk-qr {
  display:block;
  width:150px;
  height:150px;
  padding:8px;
  border-radius:var(--radius);
  background:var(--farbe-weiss);
  color:var(--farbe-dunkel);
}
.vk-qr-rahmen figcaption {
  margin-top:8px;
  font-size:var(--fs-s);
  color:var(--farbe-hell-grau);
}
@media (max-width:760px) {
  .vk {
    grid-template-columns:1fr;
    justify-items:start;
    padding:20px;
  }
  .vk-qr-rahmen {
    display:none;   /* am Handy ist die Seite schon offen – der QR-Code ist für Desktop/Ausdruck */
  }
}
/* Team-Karte mit Visitenkarten-Link (Chris 12.10.2026: Autorenseiten überall verlinken) */
.bs-team a {
  display:block;
  color:inherit;
  text-decoration:none;
}
.bs-team a:hover strong,
.bs-team a:focus-visible strong {
  color:var(--farbe-gruen);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ===== 78-formular.css ===== */
/* ======================================================================
   Freie Seiten (Kontakt, Rechtstexte, 404) und Anfrageformular (vorlagen/teile.html anfrageformular: Baustein
   aufruf und /kontakt/; cms/formular.py, assets/js/70-formular.js).
   Formular links, Ansprechpartner und Checkliste rechts; auf dem Handy untereinander.
   Meldungen ohne JavaScript: der Server leitet auf #anfrage-gesendet bzw. #anfrage-fehler
   zurück, :target blendet die passende Meldung ein.
   ====================================================================== */
/* ---------- Freie Seiten (inhalte/seiten/*.html: Impressum, Datenschutz, 404, Kontakt): Kopf ohne Bild, Rechtstexte ---------- */
.section {
  padding-block:var(--abstand);
}
.solution-hero {
  padding-top:38px;
}
.solution-hero:has(+ .legal-copy) {
  padding-top:48px;
}
.solution-hero:has(+ .legal-copy) h1 {
  margin:0;
}
.solution-hero:has(+ .legal-copy) + .legal-copy {
  padding-top:24px;
}
.solution-lead {
  max-width:880px;
  margin:0;
  font-size:var(--fs-l);
  line-height:var(--lh-text);
  color:var(--farbe-schrift-grau);
}
.legal-copy > * {
  max-width:900px;
}
.legal-copy p,
.contact-person>p,
.contact-checklist p {
  font-size:var(--fs-text);
  line-height:var(--lh-text);
  color:var(--farbe-schrift-grau);
}
.scope-box {
  margin-top:45px;
  padding:28px 32px;
  border-left:3px solid var(--akzent);
  border-radius:var(--radius);
  background:var(--flaeche);
}
.scope-box p {
  margin:0;
  font-size:var(--fs-text);
}

/* ---------- Kontaktseite ---------- */
.contact-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
}
.contact-person {   /* Karte: 55-bausteine.css */
  align-self:start;
  padding:35px;
}
.contact-email {
  display:block;
  width:fit-content;
  padding-block:11px;   /* Tippziel ≥ 44 px hoch (C2) */
  margin:-3px 0 -2px;
  font-size:var(--fs-xl);
  color:var(--farbe-gruen);   /* 5,2 : 1 auf Weiß (C3) */
  overflow-wrap:anywhere;
}
.mail-note {
  margin-top:16px;
}
.contact-checklist ol {
  margin-top:28px;
  padding-left:24px;
}
.contact-checklist li {
  padding:0 0 18px 8px;
}
.contact-checklist strong {
  font-size:var(--fs-l);
  font-weight:700;
}
@media (max-width:1050px) {
  .contact-layout {
    gap:35px;
  }
}

.contact-layout:has(> .anfrage-karte) {
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:64px;
}
.anfrage-karte {   /* Karte: 55-bausteine.css */
  align-self:start;
  padding:35px;
}
.anfrage-karte h2,
.contact-person h2 {
  margin:14px 0 24px;
  font-size:var(--fs-xl);
  line-height:var(--lh-titel);
}
.anfrage-seite {
  display:grid;
  gap:48px;
  align-content:start;
}
.anfrage-pflicht-hinweis {
  margin:12px 0 0;
}
.anfrage-feld {
  margin-bottom:18px;
}
.anfrage-feld label {
  display:block;
  font-size:var(--fs-m);
  font-weight:700;
  padding-block:4px;      /* Tippziel ≥ 24 px hoch (C2); Ränder gleichen das Polster aus */
  margin:-4px 0 2px;
  color:var(--farbe-schrift);
}
.anfrage label>span {   /* Sternchen der Pflichtfelder */
  color:var(--farbe-gruen);
}
.anfrage input[type="text"],
.anfrage input[type="email"],
.anfrage input[type="tel"],
.anfrage textarea {
  display:block;
  width:100%;
  box-sizing:border-box;
  font:inherit;
  font-size:var(--fs-m);              /* ab 16 px zoomt iOS beim Antippen nicht */
  color:var(--farbe-schrift);
  background:var(--farbe-weiss);
  border:1px solid color-mix(in srgb,var(--farbe-gedaempft) 70%,var(--farbe-weiss));    /* Rand mit 3:1 Kontrast zum Weiß */
  border-radius:var(--radius);
  padding:12px 14px;
  min-height:48px;
}
.anfrage textarea {
  resize:vertical;
  min-height:120px;
  line-height:var(--lh-klein);
}
.anfrage input:focus-visible,
.anfrage textarea:focus-visible,
.anfrage-feld-haken input:focus-visible {
  outline:3px solid var(--farbe-gruen);
  outline-offset:1px;
}
.anfrage [aria-invalid="true"] {
  border-color:var(--farbe-fehler);
  box-shadow:inset 3px 0 0 var(--farbe-fehler);
}
.anfrage-hilfe {
  margin:6px 0 0;
}
.anfrage-feldfehler {
  margin:6px 0 0;
  font-size:var(--fs-s);
  font-weight:700;
  line-height:var(--lh-klein);
  color:var(--farbe-fehler);
}
.anfrage-feld-haken {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 12px;
  align-items:start;
}
.anfrage-feld-haken input {
  width:24px;
  height:24px;
  margin:1px 0 0;
  accent-color:var(--farbe-gruen);
}
.anfrage-feld-haken label {
  font-weight:400;
  line-height:var(--lh-klein);
  padding:0;
  margin:0;
}
.anfrage-feld-haken .anfrage-feldfehler {
  grid-column:2;
}
.anfrage-feld-haken a {
  text-decoration:underline;
}
.anfrage .button {               /* Hauptknopf (20-basis.css), hier über die volle Breite */
  display:flex;
  justify-content:space-between;
  width:100%;
  min-height:54px;
  margin-top:4px;
  padding:0 24px;
  cursor:pointer;
}
.anfrage .button:focus-visible {
  outline:3px solid var(--farbe-gruen);
  outline-offset:3px;
}
.anfrage .button[disabled] {
  opacity:.6;
  cursor:progress;
}
/* Honeypot (Formular und Chat): für Menschen unsichtbar, für Bots ein normales Feld */
.anfrage-falle {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.anfrage-status,
.anfrage-meldung {
  margin-top:18px;
  padding:14px 16px;
  font-size:var(--fs-m);
  line-height:var(--lh-klein);
  border-left:4px solid var(--farbe-gruen);
  background:var(--flaeche);
}
.anfrage-status.ist-fehler,
.anfrage-meldung-fehler {
  border-left-color:var(--farbe-fehler);
  background:color-mix(in srgb,var(--farbe-fehler) 8%,var(--farbe-weiss));
}
.anfrage-status:focus,
.anfrage-meldung:focus {
  outline:none;
}
.anfrage-meldung {
  display:none;
  margin:16px 0 8px;
}
.anfrage-meldung:target {
  display:block;
}
@media (max-width:760px) {
  .contact-layout {
    grid-template-columns:1fr;
  }
  .contact-person {
    padding:25px;
  }
  .contact-layout:has(> .anfrage-karte) {
    grid-template-columns:1fr;
    gap:40px;
  }
  .anfrage-karte {
    padding:24px 18px;
  }
}

/* Telefonnummer neben dem Formular: Tippziel ≥ 36 px hoch (Richtlinie UI/UX C2), Lage der Schrift unverändert */
.contact-person .telefon {
  display:inline-block;
  padding-block:10px;
  margin-block:-10px;
}


/* ── Erstberatung anfragen (Widget bausteine/_termin.html, 71-termin.js) ── Calendly-artig (Chris 12.10.2026,
   überarbeitet 12.10.2026 nach Abgleich mit Calendly): links Eckdaten (Team, Erstberatung, 30 Minuten, Google Meet),
   rechts Monatskalender | Uhrzeiten mit Zeitzone; Schritt 2 ersetzt den Kalender. Läuft in jedem Container (Baustein,
   Dialog) – die Spalten richten sich nach der Breite des Widgets (Container-Abfragen), nicht nach dem Fenster. */
.termin-karte { display: block; }   /* Baustein termin: eine Spalte über die volle Kartenbreite */
/* Container Queries bewusst (Prüfung 12.10.2026): das Widget steht auf /erstberatung/ und im Dialog – bei gleicher
   Fensterbreite verschieden breit (390: 312/358 px, 768: 662/680, 1024: 862/936, 1440: 1222/944). Media Queries
   bräuchten je Ort eigene Grenzen. vnu meldet @container/container fälschlich als Fehler: deploy/PRUEFLUECKEN.md */
form.termin { min-width: 0; container: termin / inline-size; }
.termin-kopf { margin: 0 0 28px; }
.termin-kopf .bs-kicker { margin: 0 0 6px; }
.termin-titel { margin: 0; font-size: var(--fs-xl); line-height: var(--lh-titel); letter-spacing: var(--ls-eng); }
.termin-ansage, .termin-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.termin-buehne { display: grid; gap: 24px; }
.termin-info { display: grid; gap: 6px; align-content: start; padding-bottom: 20px; border-bottom: 1px solid var(--linie); }
.termin-info p { margin: 0; }
.termin-gesichter { display: flex; margin-bottom: 6px !important; }
.termin-gesichter img {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--flaeche);
  border: 2px solid var(--farbe-weiss); margin-left: -10px;
}
.termin-gesichter img:first-child { margin-left: 0; }
.termin-info-wer { font-size: var(--fs-s); line-height: var(--lh-klein); color: var(--farbe-gedaempft); }
.termin-info-titel { font-size: var(--fs-l); line-height: var(--lh-titel); font-weight: 700; color: var(--farbe-schrift); }
.termin-info-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.termin-info-liste li {
  display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-m); line-height: var(--lh-klein); color: var(--farbe-schrift-grau);
}
.termin-info-liste .ico { --ico: 20px; margin-top: 2px; color: var(--farbe-gruen); }
.termin-haupt { min-width: 0; }
.termin-schritt { border: 0; margin: 0; padding: 0; min-width: 0; }
.termin-schritt legend { padding: 0; margin-bottom: 16px; font-size: var(--fs-l); font-weight: 700; color: var(--farbe-schrift); }
/* Auf /erstberatung/ sagt der Widget-Titel schon „Tag und Uhrzeit wählen“ – die Legende bleibt für Screenreader */
.termin-kopf:has(.termin-titel) ~ .termin-buehne .termin-wahl-schritt > legend {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.termin-raster { display: grid; gap: 28px; align-items: start; }
.termin-monat-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.termin-monat-name { margin: 0; font-size: var(--fs-m); font-weight: 700; color: var(--farbe-schrift); }
.termin-blaettern {
  width: 44px; height: 44px; border: 1px solid var(--linie); border-radius: 999px; background: var(--farbe-weiss);
  color: var(--farbe-schrift); font-size: var(--fs-l); line-height: 1; cursor: pointer;
}
.termin-blaettern:hover:not([disabled]), .termin-blaettern:focus-visible { border-color: var(--farbe-gruen); }
.termin-blaettern:focus-visible { outline: 3px solid var(--farbe-gruen); outline-offset: 2px; }
.termin-blaettern[disabled] { opacity: .35; cursor: default; }
.termin-wochentage, .termin-tage { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.termin-wochentage { margin-bottom: 4px; }
.termin-wochentage span {
  text-align: center; font-size: var(--fs-xs); letter-spacing: var(--ls-weit); text-transform: uppercase; color: var(--farbe-gedaempft);
}
.termin-tage > .termin-lade, .termin-tage > .termin-nochmal { grid-column: 1 / -1; }
/* Tage als Kreise wie bei Calendly: frei = Lime-Tönung, gewählt = Lime mit dunklem Rand, belegt = blass */
.termin-tag-zu, .termin-tag {
  display: grid; place-items: center; justify-self: center; width: 48px; height: 48px; padding: 0; font-size: var(--fs-m);
}
.termin-tag-zu { color: var(--farbe-gedaempft); }   /* blass, aber lesbar (Kontrast 5,9 : 1) */
.ist-heute { position: relative; }
.ist-heute::after {   /* Heute: Punkt unter der Zahl */
  content: ""; position: absolute; bottom: 7px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor;
}
.termin-wahl {
  border: 1px solid var(--linie); background: var(--farbe-weiss); color: var(--farbe-schrift);
  border-radius: var(--radius); padding: 8px 10px; font: inherit; font-size: var(--fs-m); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.termin-tag {   /* freier Tag: Lime-Tönung wie .button:hover, kräftige Schrift */
  background: color-mix(in srgb, var(--farbe-lime) 45%, var(--farbe-weiss)); border-color: transparent; font-weight: 700; border-radius: 50%;
}
.termin-wahl:hover, .termin-wahl:focus-visible { border-color: var(--farbe-gruen); }
.termin-tag:hover { background: var(--farbe-lime); }
.termin-wahl:focus-visible { outline: 3px solid var(--farbe-gruen); outline-offset: 2px; }
.termin-wahl[aria-pressed="true"] { background: var(--farbe-lime); border-color: var(--farbe-schrift); font-weight: 700; }
.termin-zeitzone { margin: 14px 0 0; font-size: var(--fs-s); line-height: var(--lh-klein); color: var(--farbe-gedaempft); }
.termin-datum { margin: 0 0 12px; min-height: 44px; display: flex; align-items: center; font-size: var(--fs-m); font-weight: 700; color: var(--farbe-schrift); }
.termin-zeiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.termin-zeit {   /* Uhrzeit wie bei Calendly: Rahmen und Schrift in der Akzentfarbe */
  min-height: 48px; font-weight: 700; color: var(--farbe-gruen); border-color: color-mix(in srgb, var(--farbe-gruen) 55%, var(--farbe-weiss));
}
.termin-zeit[aria-pressed="true"] { color: var(--farbe-schrift); }
.termin-zeiten:focus, .termin-tage:focus { outline: none; }
.termin-lade, .termin-vorschau { margin: 0; color: var(--farbe-gedaempft); font-size: var(--fs-s); line-height: var(--lh-klein); }
.termin-hinweis { padding: 14px 16px; border-left: 4px solid var(--farbe-gruen); background: var(--flaeche); color: var(--farbe-schrift); font-size: var(--fs-m); }
.termin-hinweis a { color: var(--farbe-schrift); font-weight: 700; }
.termin-nochmal {
  justify-self: start; margin-top: 12px; min-height: 44px; padding: 0 18px; border: 1px solid currentColor; border-radius: 999px;
  background: transparent; color: var(--farbe-schrift); font: inherit; font-size: var(--fs-m); font-weight: 700; cursor: pointer;
}
.termin-nochmal:hover, .termin-nochmal:focus-visible { border-color: var(--farbe-gruen); color: var(--farbe-gruen); }
.termin-nochmal:focus-visible { outline: 3px solid var(--farbe-gruen); outline-offset: 2px; }
/* Keine Termine (leer oder API nicht erreichbar): Blättern, Wochentage, Uhrzeiten und Zeitzone weg, nur der Hinweis */
.termin-ohne :is(.termin-monat-kopf, .termin-wochentage, .termin-tageszeiten, .termin-zeitzone) { display: none; }
.termin-vorschau { margin-top: 16px; }
.termin-angaben { max-width: 640px; }
.termin-angaben > legend { margin-bottom: 16px; }
.termin-auswahl {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin: 0 0 24px; padding: 14px 16px; background: var(--flaeche); border-left: 4px solid var(--farbe-gruen);
  font-size: var(--fs-m); line-height: var(--lh-klein); color: var(--farbe-schrift);
}
.termin-auswahl:focus { outline: none; }
.termin-auswahl:focus-visible { outline: 3px solid var(--farbe-gruen); outline-offset: 2px; }
.termin-aendern {
  min-height: 44px; padding: 0 18px; border: 1px solid currentColor; border-radius: 999px; background: transparent;
  color: var(--farbe-schrift); font-weight: 700; cursor: pointer;
}
.termin-aendern:hover, .termin-aendern:focus-visible { border-color: var(--farbe-gruen); color: var(--farbe-gruen); }
.termin-aendern:focus-visible { outline: 3px solid var(--farbe-gruen); outline-offset: 2px; }
.termin-wege { margin-top: 28px; font-size: var(--fs-s); color: var(--farbe-gedaempft); }
/* Nach dem Absenden: „Anfrage gesendet“, Tag und Uhrzeit, nächste Schritte – der Kopf mit der Aufforderung ist weg */
.termin.ist-angefragt .termin-kopf { display: none; }
.termin.ist-angefragt .anfrage-status { margin-top: 0; padding: 20px 24px; }
.termin-fertig-titel { margin: 0 0 4px; font-size: var(--fs-xl); line-height: var(--lh-titel); letter-spacing: var(--ls-eng); font-weight: 700; color: var(--farbe-schrift); }
.termin-fertig-wann { margin: 0 0 12px; font-size: var(--fs-m); font-weight: 700; color: var(--farbe-schrift); }
.termin-fertig-text { margin: 0; max-width: 64ch; color: var(--farbe-schrift-grau); }
/* Breiter als 560 px: Kalender | Uhrzeiten nebeneinander, Uhrzeiten zweispaltig */
@container termin (min-width: 560px) {
  .termin-raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; }
  .termin-zeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .termin-tag-zu, .termin-tag { width: 52px; height: 52px; }
}
/* Breiter als 820 px (Karte auf /erstberatung/, Dialog am Rechner): Eckdaten links wie bei Calendly, mit Trennlinie */
@container termin (min-width: 820px) {
  .termin-buehne { grid-template-columns: 220px minmax(0, 1fr); gap: 0; }
  .termin-info { padding: 0 28px 0 0; border-bottom: 0; border-right: 1px solid var(--linie); align-self: stretch; }
  .termin-haupt { padding-left: 32px; }
}
/* Schmal (Handy): Eckdaten kompakt – Gesichter links, Titel und Team-Zeile rechts, Eckdaten als eine Zeile –,
   damit der Kalender im ersten Bildschirm beginnt */
@container termin (max-width: 559px) {
  .termin-info { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding-bottom: 16px; }
  .termin-gesichter { grid-row: 1 / span 2; margin: 0 !important; }
  .termin-gesichter img { width: 36px; height: 36px; margin-left: -8px; }
  .termin-info-titel { grid-column: 2; grid-row: 1; font-size: var(--fs-m); }
  .termin-info-wer { grid-column: 2; grid-row: 2; }
  .termin-info-liste { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; }
  .termin-info-liste li { font-size: var(--fs-s); gap: 6px; }
  .termin-info-liste .ico { --ico: 16px; }
  .termin-tag-zu, .termin-tag { width: 44px; height: 44px; }
}
/* Handy: das Chat-Symbol (fest unten rechts) verdeckt sonst Tage, Uhrzeiten oder „Termin anfragen“ – solange das
   Widget im Bild ist, tritt es zurück (71-termin.js setzt .termin-im-bild am <html>; im Dialog liegt es ohnehin darunter) */
@media (max-width: 600px) {
  .termin-im-bild .chat:not(:has([aria-expanded="true"])) { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
}

/* Rechtstexte (Impressum, Datenschutz – Chris 12.10.2026: „massiv übertrieben große h1“): ruhige Textskala,
   Listen wie Fließtext, Stand/Copyright klein. Gilt auch für den übertragenen Kanzlei-Text (.rechtstext). */
.solution-hero:has(+ .legal-copy) h1 {
  font-size:var(--fs-h2);
  line-height:var(--lh-titel);
}
.legal-copy h2,
.legal-copy .rechtstext h2 {
  margin:40px 0 12px;
  font-size:var(--fs-l);
  line-height:var(--lh-titel);
}
.legal-copy > h2:first-child,
.legal-copy .rechtstext > h2:first-child {
  margin-top:0;
}
.legal-copy h3,
.legal-copy .rechtstext h3 {
  margin:24px 0 8px;
  font-size:var(--fs-text);
  line-height:var(--lh-titel);
}
.legal-copy :is(ul, ol) {
  margin:0 0 16px;
  padding-left:1.25em;
}
.legal-copy li {
  margin:4px 0;
  font-size:var(--fs-text);
  line-height:var(--lh-text);
  color:var(--farbe-schrift-grau);
}
.legal-copy p.klein {
  font-size:var(--fs-s);
  color:var(--farbe-gedaempft);
}

/* ===== Teil 2: Stadtdomain ===== */
.im-sprung {
  position:absolute;
  left:-9999px;
}
.im-sprung:focus {
  left:16px;
  top:16px;
  z-index:200;
  padding:10px 16px;
  background:var(--farbe-lime);
  color:var(--farbe-schrift);
  border-radius:999px;
}
.sd-kopf {
  position:fixed;
  z-index:100;
  inset:0 0 auto;
  color:var(--farbe-weiss);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .3s,border-color .3s;
}
.sd-kopf.is-scrolled {
  background:color-mix(in srgb,var(--farbe-dunkel) 97%,transparent);
  border-bottom-color:color-mix(in srgb,var(--farbe-weiss) 12%,transparent);
  backdrop-filter:blur(14px);
}
.sd-kopf>.wrap {
  height:var(--hh);
  display:flex;
  align-items:center;
  gap:28px;
  transition:height .25s;
}
.sd-kopf.is-scrolled>.wrap {
  height:var(--hh-klein);
  display:flex;
  align-items:center;
  gap:28px;
}
.sd-marke {
  margin:0;
  font-size:var(--fs-l);
  font-weight:700;
  letter-spacing:var(--ls-eng);
  color:var(--farbe-weiss);
}
.sd-marke {
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.sd-logo-zeichen {
  width:30px;
  height:30px;
  flex:none;
}
.sd-marke-text span {
  margin-left:6px;
  color:var(--farbe-lime);
}
.sd-nav {
  display:flex;
  gap:24px;
  margin-left:auto;
  font-size:var(--fs-m);
  color:var(--farbe-hell-grau);
}
.sd-nav a:hover,
.sd-tel:hover {
  color:var(--farbe-lime);
}
.sd-tel {
  font-size:var(--fs-m);
  font-weight:700;
  white-space:nowrap;
}
.sd-kopf .sd-kopf-knopf {
  min-height:40px;
  padding:9px 20px;
}
.karten.sd-vergleich > * {
  flex-basis:calc((100% - var(--raster-gap)) / 2);
}
.sd-karte-gut {
  border-color:var(--farbe-gruen);
}
.sd-minus {
  margin:16px 0 0;
  padding:0;
  list-style:none;
  font-size:var(--fs-text);
  line-height:var(--lh-text);
  color:var(--farbe-gedaempft);
}
.sd-minus li {
  position:relative;
  padding-left:28px;
}
.sd-minus li+li {
  margin-top:8px;
}
.sd-minus li::before {
  content:"–";
  position:absolute;
  left:6px;
}
.sd-schritte {
  margin:24px 0 0;
  padding:0;
  list-style:none;
  counter-reset:schritt;
}
.sd-schritte li {
  position:relative;
  padding:0 0 18px 52px;
  counter-increment:schritt;
  font-size:var(--fs-text);
  line-height:var(--lh-text);
  color:var(--farbe-schrift-grau);
}
.sd-schritte li::before {
  content:counter(schritt);
  position:absolute;
  left:0;
  top:0;
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--flaeche);
  color:var(--farbe-schrift);
  font-weight:700;
  font-size:var(--fs-m);
}
.sd-schritte strong {
  display:block;
  color:var(--farbe-schrift);
}
.sd-hinweis {
  margin:24px 0 0;
  padding:16px 20px;
  border-radius:var(--radius);
  background:var(--flaeche);
  font-size:var(--fs-s);
  line-height:var(--lh-klein);
  color:var(--farbe-schrift-grau);
}
.sd-hinweis-dunkel {
  background:color-mix(in srgb,var(--farbe-weiss) 6%,transparent);
  color:var(--farbe-hell-grau);
  max-width:900px;
}
.sd-befunde {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:40px;
}
.sd-befunde figure {
  margin:0;
}
.sd-befunde video,
.sd-befunde img {
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:var(--radius);
}
.sd-befunde figcaption {
  margin-top:14px;
  font-size:var(--fs-m);
  line-height:var(--lh-klein);
  color:var(--farbe-hell-grau);
}
.sd-befunde figcaption strong {
  display:block;
  font-size:var(--fs-m);
  color:var(--farbe-weiss);
  margin-bottom:4px;
}
.sd-karte-link {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sd-karte-link .bs-link {
  margin-top:auto;
  align-self:flex-start;
}
.sd-fuss {
  display:flex;
  flex-wrap:wrap;
  gap:48px;
  justify-content:space-between;
}
.sd-fuss-links {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sd-fuss-links a:hover {
  color:var(--farbe-lime);
}
.bs-faq {
  max-width:none;
}
@media (min-width:1201px) {
  .sd-team li {
    width:236px;
  }
  .sd-team img {
    width:190px;
    height:190px;
  }
}
@media (max-width:900px) {
  .sd-nav {
    display:none;
  }
  .sd-tel {
    margin-left:auto;
  }
}
@media (max-width:800px) {
  .karten.sd-vergleich > * {
    flex-basis:100%;
  }
  .sd-befunde {
    grid-template-columns:1fr;
  }
  .sd-kopf-knopf {
    display:none !important;
  }
}

/* Dezenter Wechsel heller Abschnitte (Chris 25.10.2026), Karten darin bleiben weiß */
.bs.sd-ton {
  background:color-mix(in srgb,var(--flaeche) 55%,var(--farbe-weiss));
}
.sd-ton .bs-karte {
  background:var(--farbe-weiss);
}
.sd-ton .sd-hinweis {
  background:var(--farbe-weiss);
}

/* Intervalle 5/10/15 Jahre */
.sd-intervall {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sd-jahre {
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:clamp(40px,4vw,56px);
  font-weight:700;
  line-height:1;
  letter-spacing:var(--ls-eng);
  color:var(--farbe-gruen);
}
.sd-jahre small {
  font-size:var(--fs-m);
  letter-spacing:0;
  color:var(--farbe-gedaempft);
}
/* Erfahrungswert: abgesetzt, damit er nicht wie eine dritte Normfrist wirkt */
.sd-intervall-praxis {
  border-style:dashed;
}
.sd-intervall-praxis .sd-jahre {
  color:var(--farbe-gedaempft);
}
.sd-intervall h3 {
  margin:6px 0 0;
}
.sd-intervall p {
  margin:0;
}
.sd-chip {
  margin-top:auto;
  align-self:flex-start;
  padding:6px 12px;
  border-radius:999px;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:var(--ls-weit);
  text-transform:uppercase;
}
.sd-chip-gut {
  background:color-mix(in srgb,var(--farbe-gruen) 12%,var(--farbe-weiss));
  color:var(--farbe-gruen);
}
.sd-chip-hinweis {
  background:var(--flaeche);
  color:var(--farbe-schrift-grau);
}

/* Methoden: gut (grün) gegen schlecht (rot) */
.sd-methoden {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin-top:48px;
}
.sd-methode {
  --ton:var(--farbe-gruen);
  padding:28px;
  border:1px solid color-mix(in srgb,var(--ton) 45%,var(--farbe-weiss));
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--ton) 6%,var(--farbe-weiss));
}
.sd-methode.sd-schlecht {
  --ton:var(--farbe-fehler);
  background:color-mix(in srgb,var(--ton) 4%,var(--farbe-weiss));
  border-color:color-mix(in srgb,var(--ton) 25%,var(--farbe-weiss));
}
.sd-methode-kopf {
  display:flex;
  align-items:center;
  gap:16px;
  padding-bottom:20px;
  margin-bottom:8px;
  border-bottom:1px solid color-mix(in srgb,var(--ton) 20%,var(--farbe-weiss));
}
.sd-methode-kopf h3 {
  margin:0;
}
.sd-methode-kopf p {
  margin:2px 0 0;
  font-size:var(--fs-s);
  color:var(--farbe-gedaempft);
}
.sd-methode-icon {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  flex:none;
  border-radius:50%;
  background:var(--ton);
  color:var(--farbe-weiss);
}
.sd-methode-icon svg {
  width:28px;
  height:28px;
}
.sd-zeilen {
  margin:0;
  padding:0;
  list-style:none;
}
.sd-zeilen li {
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 0;
  font-size:var(--fs-text);
  line-height:var(--lh-klein);
  color:var(--farbe-schrift-grau);
}
.sd-zeilen li+li {
  border-top:1px solid color-mix(in srgb,var(--ton) 12%,var(--farbe-weiss));
}
.sd-zeilen small {
  display:block;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:var(--ls-weit);
  text-transform:uppercase;
  color:var(--ton);
}
.sd-zeile-icon {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:none;
  border-radius:50%;
  background:color-mix(in srgb,var(--ton) 12%,var(--farbe-weiss));
  color:var(--ton);
}
.sd-zeile-icon svg {
  width:22px;
  height:22px;
}
.sd-zeilen li.sd-neutral {
  --ton:var(--farbe-gedaempft);
}
.bs-icon svg {
  width:var(--ico);
  height:var(--ico);
}
@media (max-width:800px) {
  .sd-methoden {
    grid-template-columns:1fr;
  }
  .sd-methode {
    padding:22px 18px;
  }
}
@media (max-width:800px) {
  :root {
    --hh:72px;
    --hh-klein:60px;
  }
}

/* Kundenleiste Logistik: Logos in Graustufen auf hellem Grund, Farbe beim Zeigen */
.sd-kunden {
  padding:36px 0;
  border-bottom:1px solid var(--linie);
}
.sd-kunden .bs-kicker {
  margin:0 0 20px;
  text-align:center;
}
.sd-kunden ul {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:24px 36px;
  max-width:1320px;
  margin:0 auto;
  align-items:center;
}
.sd-kunden img {
  display:block;
  width:100%;
  height:auto;
  max-height:60px;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.65;
  transition:filter .2s,opacity .2s;
}
.sd-kunden li:hover img {
  filter:none;
  opacity:1;
}
@media (max-width:1100px) {
  .sd-kunden ul {
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
}
@media (max-width:700px) {
  .sd-kunden ul {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px 22px;
  }
}

/* Kurz beantwortet: rot = Aufwand/Risiko, grün = mit Drohne */
.sd-frage-rot .bs-icon {
  background:color-mix(in srgb,var(--farbe-fehler) 10%,var(--farbe-weiss));
  color:var(--farbe-fehler);
}
.sd-frage-gruen {
  border-color:color-mix(in srgb,var(--farbe-gruen) 45%,var(--farbe-weiss));
  background:color-mix(in srgb,var(--farbe-gruen) 6%,var(--farbe-weiss));
}
.sd-frage-gruen .bs-icon {
  background:var(--farbe-gruen);
  color:var(--farbe-weiss);
}
.sd-frage h3 {
  margin-top:0;
}
.sd-ton .sd-methode.sd-gut {
  background:color-mix(in srgb,var(--farbe-gruen) 6%,var(--farbe-weiss));
}

.sd-kunden img[src*="logo-ikea"] {
  max-height:44px;
}

/* ===== Brandschutz-Farben (Chris 25.10.2026): Signalrot statt Lime/Grün als Marke.
   Grün bleibt nur Bedeutungsfarbe für „gut“ (--sd-gut). ===== */
:root {
  --sd-rot:#d3171e;            /* Marke: Knöpfe, Logo */
  --sd-rot-dunkel:#a8121a;     /* Hover */
  --sd-rot-text:#b8141b;       /* Akzent auf Weiß: Kicker, Links, Haken (6,4 : 1) */
  --sd-rot-hell:#ff6a5f;       /* Akzent auf Dunkel */
  --sd-gut:#2f7a4d;
  --farbe-gruen:var(--sd-rot-text);   /* alle grünen Akzente der übernommenen Bausteine werden rot */
  --farbe-lime:var(--sd-rot-hell);
  --akzent:var(--sd-rot-text);
  --hl:var(--sd-rot-hell);
}
.bs-dunkel,
.im-footer,
.sd-kopf {
  --akzent:var(--sd-rot-hell);
}
.button,
.sd-kopf .sd-kopf-knopf {
  background:var(--sd-rot);
  color:var(--farbe-weiss);
}
.button:hover {
  background:var(--sd-rot-dunkel);
}
.bs-kicker {
  color:var(--akzent);
}
.sd-marke-text span {
  color:var(--sd-rot-hell);
}
.sd-jahre {
  color:var(--sd-rot-text);
}
.sd-methode.sd-gut,
.sd-chip-gut,
.sd-frage-gruen {
  --ton:var(--sd-gut);
}
.sd-chip-gut {
  background:color-mix(in srgb,var(--sd-gut) 12%,var(--farbe-weiss));
  color:var(--sd-gut);
}
.sd-frage-gruen {
  border-color:color-mix(in srgb,var(--sd-gut) 45%,var(--farbe-weiss));
  background:color-mix(in srgb,var(--sd-gut) 6%,var(--farbe-weiss));
}
.sd-frage-gruen .bs-icon {
  background:var(--sd-gut);
}
.sd-ton .sd-methode.sd-gut {
  background:color-mix(in srgb,var(--sd-gut) 6%,var(--farbe-weiss));
}
.sd-methode.sd-gut {
  border-color:color-mix(in srgb,var(--sd-gut) 45%,var(--farbe-weiss));
  background:color-mix(in srgb,var(--sd-gut) 6%,var(--farbe-weiss));
}
.sd-methode.sd-gut .sd-zeilen small,
.sd-methode.sd-gut .sd-zeile-icon {
  color:var(--sd-gut);
}
.sd-methode.sd-gut .sd-zeile-icon {
  background:color-mix(in srgb,var(--sd-gut) 12%,var(--farbe-weiss));
}
.sd-methode.sd-gut .sd-methode-icon {
  background:var(--sd-gut);
}
.sd-methode.sd-gut .sd-zeilen li+li {
  border-top-color:color-mix(in srgb,var(--sd-gut) 12%,var(--farbe-weiss));
}
.sd-methode.sd-gut .sd-methode-kopf {
  border-bottom-color:color-mix(in srgb,var(--sd-gut) 20%,var(--farbe-weiss));
}
.sd-methode.sd-gut .sd-zeilen li.sd-neutral {
  --ton:var(--farbe-gedaempft);
}

/* Logo im Fuß: eigene Zeile */
.im-footer .sd-marke {
  display:flex;
  width:100%;
  margin-bottom:16px;
  font-size:var(--fs-l);
}
.im-footer-brand {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* Hero-Video: Standbild bis das Video läuft */
.bs-hero-medium video:not(.laeuft) {
  opacity:0;
}

/* Dib-Problemblock: Schmerz und Folgen rot, Merksatz, Zitat, Kurz gesagt */
.sd-karte-rot .bs-icon {
  background:color-mix(in srgb,var(--sd-rot) 10%,var(--farbe-weiss));
  color:var(--sd-rot-text);
}
.sd-karte-rot h3 {
  margin-top:0;
}
.karten.sd-folgen > * {
  flex-basis:calc((100% - var(--raster-gap)) / 2);
}
.sd-merksatz {
  max-width:820px;
  margin:40px auto 0;
  padding:18px 24px;
  border-left:4px solid var(--sd-rot);
  background:color-mix(in srgb,var(--sd-rot) 5%,var(--farbe-weiss));
  font-size:var(--fs-text);
  line-height:var(--lh-text);
  font-weight:700;
  color:var(--farbe-schrift);
}
.sd-zitat {
  max-width:900px;
  margin:48px auto 0;
  padding:0;
  text-align:center;
  font-size:var(--fs-xl);
  line-height:var(--lh-titel);
  letter-spacing:var(--ls-eng);
  font-weight:700;
  color:var(--farbe-schrift);
}
.sd-kurzgesagt {
  max-width:900px;
  margin:48px auto 0;
  padding:28px 32px;
  border-radius:var(--radius);
  background:var(--farbe-dunkel);
  color:var(--farbe-hell-grau);
  font-size:var(--fs-text);
  line-height:var(--lh-text);
  --akzent:var(--sd-rot-hell);
}
.sd-kurzgesagt p {
  margin:0;
}
.sd-kurzgesagt .bs-kicker {
  margin-bottom:10px;
}
.sd-kurzgesagt strong {
  color:var(--farbe-weiss);
}
@media (max-width:800px) {
  .karten.sd-folgen > * {
    flex-basis:100%;
  }
  .sd-zitat {
    font-size:var(--fs-l);
  }
}
@media (max-width:1150px) {
  .sd-nav {
    gap:16px;
  }
}
.bs .sd-kurzgesagt p:not(.bs-kicker) {
  color:var(--farbe-hell-grau);
}
.bs .sd-kurzgesagt strong {
  color:var(--farbe-weiss);
}

/* Regionale Einsätze: Zahlen, Fälle */
.sd-zahlen {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}
.sd-zahlen li {
  padding:24px;
  border:1px solid var(--linie);
  border-radius:var(--radius);
  background:var(--farbe-weiss);
}
.sd-zahlen strong {
  display:block;
  font-size:clamp(34px,3.4vw,48px);
  line-height:1;
  letter-spacing:var(--ls-eng);
  color:var(--sd-rot-text);
}
.sd-zahlen span {
  display:block;
  margin-top:8px;
  font-size:var(--fs-m);
  line-height:var(--lh-klein);
  color:var(--farbe-schrift-grau);
}
.sd-faelle {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin-top:40px;
}
.sd-fall {
  overflow:hidden;
  border:1px solid var(--linie);
  border-radius:var(--radius);
  background:var(--farbe-weiss);
}
.sd-fall img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
}
.sd-fall>div {
  padding:22px 24px 26px;
}
.sd-fall h3 {
  margin:4px 0 8px;
}
.sd-fall p {
  margin:0;
  font-size:var(--fs-text);
  line-height:var(--lh-text);
  color:var(--farbe-schrift-grau);
}
.sd-fall .sd-fall-ort {
  margin-top:12px;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:var(--ls-weit);
  text-transform:uppercase;
  color:var(--farbe-gedaempft);
}
.sd-fall .sd-chip {
  margin:0;
}
.sd-fall-rot {
  background:color-mix(in srgb,var(--sd-rot) 10%,var(--farbe-weiss));
  color:var(--sd-rot-text);
}
.sd-fall-gruen {
  background:color-mix(in srgb,var(--sd-gut) 12%,var(--farbe-weiss));
  color:var(--sd-gut);
}
/* Wassertabelle */
.sd-wasser {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:48px;
  align-items:start;
}
.sd-tabelle-rahmen {
  overflow-x:auto;
}
.sd-tabelle {
  width:100%;
  border-collapse:collapse;
  background:var(--farbe-weiss);
  border:1px solid var(--linie);
  border-radius:var(--radius);
  font-size:var(--fs-m);
}
.sd-tabelle th,
.sd-tabelle td {
  padding:14px 16px;
  border-bottom:1px solid var(--linie);
  text-align:left;
  vertical-align:top;
}
.sd-tabelle thead th {
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-weit);
  text-transform:uppercase;
  color:var(--farbe-gedaempft);
}
.sd-tabelle tbody th small {
  display:block;
  font-weight:400;
  font-size:var(--fs-s);
  color:var(--farbe-gedaempft);
}
.sd-quelle {
  margin:12px 0 0;
  font-size:var(--fs-s);
  line-height:var(--lh-klein);
  color:var(--farbe-gedaempft);
}
.sd-quelle a {
  text-decoration:underline;
}
@media (max-width:900px) {
  .sd-zahlen {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .sd-faelle,
  .sd-wasser {
    grid-template-columns:1fr;
  }
}

/* Erkenntnisse statt Zahlen (keine Mengen zu unserem Volumen) */
.sd-erkenntnisse strong {
  font-size:var(--fs-xl);
  line-height:var(--lh-titel);
}

.sd-tabelle td {
  white-space:nowrap;
}

/* ===== Umbau nach Kritik 25.10.2026: Beweis früh, Listen statt Kacheln, Bericht, Aufrufe ===== */
.sd-erkenntnis-zeile {
  list-style:none;
  margin:0 0 32px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px 28px;
  font-size:var(--fs-m);
  line-height:var(--lh-klein);
  color:var(--farbe-hell-grau);
}
.sd-erkenntnis-zeile strong {
  display:block;
  color:var(--farbe-weiss);
}
.bs-dunkel .sd-fall {
  border-color:var(--linie-dunkel);
}
.sd-unterzeile {
  margin:40px 0 0;
  font-size:var(--fs-s);
  color:var(--farbe-hell-grau);
}
.sd-befunde.sd-befunde-klein {
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
.sd-befunde-klein figcaption {
  font-size:var(--fs-s);
}
.sd-befunde-klein figcaption strong {
  font-size:var(--fs-s);
}
/* Aufruf-Zeile nach den Belegen */
.sd-cta-zeile {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px 32px;
  margin-top:48px;
  padding:22px 28px;
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--sd-rot) 6%,var(--farbe-weiss));
  border:1px solid color-mix(in srgb,var(--sd-rot) 25%,var(--farbe-weiss));
}
.sd-cta-zeile p {
  margin:0;
  max-width:760px;
  font-size:var(--fs-text);
  line-height:var(--lh-text);
  color:var(--farbe-schrift-grau);
}
.sd-cta-zeile strong {
  color:var(--farbe-schrift);
}
.bs-dunkel .sd-cta-zeile {
  background:color-mix(in srgb,var(--farbe-weiss) 6%,transparent);
  border-color:var(--linie-dunkel);
}
.bs-dunkel .sd-cta-zeile p {
  color:var(--farbe-hell-grau);
}
.bs-dunkel .sd-cta-zeile strong {
  color:var(--farbe-weiss);
}
/* Schmerz und Folgen als zwei Listen */
.sd-zwei-listen {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.sd-liste-rot {
  --ton:var(--sd-rot-text);
  padding:28px;
  border:1px solid color-mix(in srgb,var(--sd-rot) 22%,var(--farbe-weiss));
  border-radius:var(--radius);
  background:var(--farbe-weiss);
}
.sd-liste-rot h3 {
  margin:0 0 8px;
}
.sd-liste-rot .sd-zeilen li {
  align-items:flex-start;
}
.sd-liste-rot .sd-zeilen strong {
  display:block;
  color:var(--farbe-schrift);
}
.sd-liste-rot .sd-zeilen li span:last-child {
  font-size:var(--fs-m);
}
/* Berichtsauszug */
.sd-bericht {
  max-width:1100px;
  margin:0 auto;
  border:1px solid var(--linie);
  border-radius:var(--radius);
  background:var(--farbe-weiss);
  box-shadow:0 10px 30px color-mix(in srgb,var(--farbe-dunkel) 8%,transparent);
  overflow:hidden;
}
.sd-bericht-kopf {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px 40px;
  padding:24px 28px;
  border-bottom:1px solid var(--linie);
  border-top:4px solid var(--sd-rot);
}
.sd-bericht-kopf h3 {
  margin:4px 0 0;
}
.sd-bericht-kopf dl {
  display:flex;
  flex-wrap:wrap;
  gap:8px 32px;
  margin:0;
}
.sd-bericht-kopf dt {
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-weit);
  text-transform:uppercase;
  color:var(--farbe-gedaempft);
}
.sd-bericht-kopf dd {
  margin:2px 0 0;
  font-weight:700;
}
.sd-bericht-teil {
  padding:24px 28px;
}
.sd-bericht-teil h4 {
  margin:0 0 14px;
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-weit);
  text-transform:uppercase;
  color:var(--farbe-gedaempft);
}
.sd-bericht-teil p {
  margin:0;
  font-size:var(--fs-m);
  line-height:var(--lh-text);
  color:var(--farbe-schrift-grau);
}
.sd-bericht-befunde {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.sd-bericht-befunde img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:var(--radius);
}
.sd-bericht-befunde div {
  margin-top:10px;
  font-size:var(--fs-s);
  line-height:var(--lh-klein);
  color:var(--farbe-schrift-grau);
}
.sd-bericht-befunde strong {
  display:block;
  margin-top:6px;
  font-size:var(--fs-m);
  color:var(--farbe-schrift);
}
.sd-bericht-zwei {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--linie);
}
.sd-bericht-zwei>div+div {
  border-left:1px solid var(--linie);
}
.sd-stufe {
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:var(--ls-weit);
  text-transform:uppercase;
}
.sd-stufe-hoch,
.sd-stufe-kritisch {
  background:var(--sd-rot);
  color:var(--farbe-weiss);
}
.sd-stufe-mittel {
  background:color-mix(in srgb,#e8a400 22%,var(--farbe-weiss));
  color:#7a5200;
}
.sd-stufe-gering {
  background:var(--flaeche);
  color:var(--farbe-schrift-grau);
}
.sd-empfehlungen {
  list-style:none;
  margin:0;
  padding:0;
  font-size:var(--fs-m);
  line-height:var(--lh-klein);
  color:var(--farbe-schrift-grau);
}
.sd-empfehlungen li {
  display:flex;
  gap:12px;
  align-items:baseline;
}
.sd-empfehlungen li+li {
  margin-top:12px;
}
.sd-empfehlungen .sd-stufe {
  flex:none;
  min-width:68px;
  text-align:center;
}
.sd-team-haken {
  max-width:900px;
  margin:8px auto 0;
}
.sd-angebot {
  margin:20px 0;
}
.sd-angebot .bs-kicker {
  margin-bottom:8px;
}
.sd-angebot .bs-haken {
  margin:0;
}
@media (max-width:900px) {
  .sd-erkenntnis-zeile,
  .sd-bericht-befunde {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .sd-befunde.sd-befunde-klein {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .sd-zwei-listen,
  .sd-bericht-zwei {
    grid-template-columns:1fr;
  }
  .sd-bericht-zwei>div+div {
    border-left:0;
    border-top:1px solid var(--linie);
  }
}

.bs-dunkel .sd-fall h3 {
  color:var(--farbe-schrift);
}

/* Befunde hell und ruhig (Chris 25.10.2026: Dichte und Kontrast zu hoch) */
.sd-faelle.sd-faelle-reihe {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  margin-top:8px;
}
.sd-faelle-reihe .sd-fall>div {
  padding:16px 18px 20px;
}
.sd-faelle-reihe .sd-fall h3 {
  margin:10px 0 6px;
  font-size:var(--fs-l);
}
.sd-faelle-reihe .sd-fall p {
  font-size:var(--fs-m);
  line-height:var(--lh-klein);
}
.sd-faelle-reihe .sd-fall .sd-fall-ort {
  margin-top:10px;
}
@media (max-width:1000px) {
  .sd-faelle.sd-faelle-reihe {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:560px) {
  .sd-faelle.sd-faelle-reihe {
    grid-template-columns:1fr;
  }
}

.sd-faelle-reihe .sd-fall p.sd-fall-ort {
  font-size:var(--fs-xs);
  color:var(--farbe-gedaempft);
}

/* ===== Farbe und Typografie klarer (Chris 25.10.2026: „rot und orange ist missweisend“) =====
   Rot NUR: Knöpfe + Logo-Zeichen (Marke) und echte Warnsignale (Schmerz, Folgen, kritisch, Entleerung).
   Grün: positiv (Haken, gut). Alles andere neutral. Kein Hellrot/Orange mehr. */
:root {
  --akzent:var(--sd-gut);
  --farbe-schrift-grau:#2c3533;
}
.bs-dunkel,
.im-footer,
.sd-kopf {
  --akzent:var(--farbe-hell-grau);
}
.bs-kicker,
.bs-dunkel .bs-kicker,
.sd-kurzgesagt .bs-kicker {
  color:var(--farbe-gedaempft);
  font-size:13px;
  letter-spacing:.06em;
}
.bs-dunkel .bs-kicker,
.im-footer .bs-kicker,
.sd-kurzgesagt .bs-kicker {
  color:var(--farbe-hell-grau);
}
.sd-marke-text span {
  margin-left:6px;
  color:var(--farbe-weiss);
  font-weight:400;
}
.bs-haken li::before,
.bs-haken svg {
  color:var(--sd-gut);
}
.sd-jahre {
  color:var(--farbe-schrift);
}
.sd-merksatz {
  border-left-color:var(--farbe-schrift);
  background:var(--flaeche);
  font-weight:400;
}
.sd-cta-zeile {
  background:var(--farbe-weiss);
  border-color:var(--linie);
}
.bs-icon {
  background:var(--flaeche);
  color:var(--farbe-schrift);
}
.bs-einleitung p,
.bs-text p {
  color:var(--farbe-schrift-grau);
}
.bs-dunkel .bs-einleitung p {
  color:var(--farbe-hell-grau);
}
a:not(.button):not(.bs-link):not(.sd-marke) {
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
}
.anfrage label span[aria-hidden],
.anfrage-feld label span {
  color:var(--farbe-gedaempft);
}

.bs-medium img.sd-bild-oben {
  object-position:50% 30%;
}

/* Großansicht der Befunde (25.10.2026) */
.sd-zoom { display: block; position: relative; cursor: zoom-in; overflow: hidden; }
.sd-zoom img { transition: transform .35s ease; }
@media (hover: hover) { .sd-fall:hover .sd-zoom img { transform: scale(1.05); } }
.sd-lupe { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(10,16,18,.65); color: #fff; }
.sd-lupe svg { width: 18px; height: 18px; }
.sd-dlg { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(96vw, 1500px); max-height: 94vh; padding: 0; border: 0; border-radius: 10px; background: #0b1214; color: #fff; overflow: hidden; }
.sd-dlg::backdrop { background: rgba(0,0,0,.82); }
.sd-dlg figure { margin: 0; }
.sd-dlg img { display: block; width: 100%; max-height: calc(94vh - 90px); object-fit: contain; background: #000; }
.sd-dlg figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 64px 16px 20px; font-size: 15px; color: #cbd5d1; }
.sd-dlg figcaption strong { color: #fff; font-size: 17px; }
.sd-dlg-ort { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9aa8a5; }
.sd-dlg-zu { position: absolute; top: 10px; right: 12px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.sd-dlg-nav { position: absolute; top: 40%; z-index: 2; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }
.sd-dlg-vor { left: 12px; } .sd-dlg-nach { right: 12px; }


/* Handy (26.10.2026): Telefonnummer als runder Knopf, sonst wird sie im Kopf abgeschnitten */
@media (max-width:480px) {
  .sd-tel {
    display:inline-grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--sd-rot);
    font-size:0;
  }
  .sd-tel::before {
    content:"";
    width:20px;
    height:20px;
    background:#fff;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
}

/* Handy (26.10.2026): Wassertabelle als Karten statt seitlich scrollen */
@media (max-width:600px) {
  .sd-tabelle thead { display:none; }
  .sd-tabelle, .sd-tabelle tbody, .sd-tabelle tr, .sd-tabelle th, .sd-tabelle td { display:block; width:auto; }
  .sd-tabelle tbody tr { padding:14px 16px; border-bottom:1px solid var(--farbe-linie, #e5e7eb); }
  .sd-tabelle tbody tr:last-child { border-bottom:0; }
  .sd-tabelle tbody th, .sd-tabelle td { padding:0; border:0; }
  .sd-tabelle tbody th { margin-bottom:8px; }
  .sd-tabelle td { display:flex; justify-content:space-between; gap:12px; padding:3px 0; white-space:normal; }
  .sd-tabelle td::before { content:attr(data-label); color:var(--farbe-gedaempft); }
}

/* Gratis-PDF-Block (29.10.2026): öffnet den Whitepaper-Kasten */
.wpb{background:#0a1012;color:#b9c4bf;padding:80px 0;overflow:hidden}
.wpb-innen{max-width:1100px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:64px;align-items:center}
.wpb-bild img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.55);transform:rotate(-3deg)}
.wpb-kicker{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#d5f578;margin:0 0 10px}
.wpb h2{color:#fff;font-size:clamp(28px,3.2vw,42px);line-height:1.12;letter-spacing:-.02em;margin:0 0 16px;text-align:left}
.wpb-lead{font-size:18px;line-height:1.55;margin:0 0 20px;color:#dfe6e3}
.wpb ul{list-style:none;margin:0 0 28px;padding:0}
.wpb li{position:relative;padding-left:28px;margin-bottom:10px;font-size:16px;line-height:1.45}
.wpb li strong{color:#fff}
.wpb li::before{content:"";position:absolute;left:3px;top:6px;width:12px;height:7px;border-left:2px solid #d5f578;border-bottom:2px solid #d5f578;transform:rotate(-45deg)}
.wpb-knopf{display:inline-block;background:#dc2626;color:#fff;border:0;border-radius:999px;padding:15px 30px;font:inherit;font-weight:700;font-size:16px;cursor:pointer}
.wpb-knopf:hover{background:#b91c1c}
.wpb-klein{font-size:13px;color:#8e9a96;margin:12px 0 0}
@media (max-width:760px){.wpb{padding:56px 0}.wpb-innen{grid-template-columns:1fr;gap:36px}.wpb-bild{max-width:220px;margin:0 auto}}

/* Whitepaper-Widget (29.10.2026): Karte mit Deckblatt, ein Schritt */
.wp-widget { position: fixed; right: 20px; bottom: 20px; z-index: 9990; width: 380px; max-width: calc(100vw - 32px); }
.wp-trigger { display: flex; align-items: center; gap: 12px; width: 100%; background: #fff; color: #111a18; border: 0; border-radius: 12px; padding: 10px 14px 10px 10px; box-shadow: 0 10px 32px rgba(0,0,0,.35); cursor: pointer; text-align: left; font: inherit; transition: transform .15s; }
.wp-trigger:hover { transform: translateY(-2px); }
.wp-trigger img { width: 44px; height: 62px; object-fit: cover; object-position: top; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.25); flex: none; }
.wp-trigger b { display: block; font-size: 15px; line-height: 1.25; }
.wp-trigger small { display: block; font-size: 12.5px; color: #5b6664; margin-top: 2px; }
.wp-pfeil { margin-left: auto; background: var(--button-primary-bg, #dc2626); color: #fff; border-radius: 999px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.wp-widget.wp-open .wp-trigger { display: none; }
.wp-widget-body { display: none; position: relative; background: #fff !important; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.4); padding: 20px; color: #3a4543; }
.wp-widget.wp-open .wp-widget-body { display: block; }
.wp-close { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 24px; line-height: 1; color: #8a9592; cursor: pointer; padding: 4px 8px; }
.wp-close:hover { color: #222; }
.wp-kopf { display: flex; gap: 14px; margin-bottom: 12px; }
.wp-kopf img { width: 74px; height: 104px; object-fit: cover; object-position: top; border-radius: 4px; box-shadow: 0 3px 10px rgba(0,0,0,.25); flex: none; }
.wp-kicker { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #2f7a4d; margin: 0 0 4px; }
.wp-titel { font-size: 17px; line-height: 1.25; font-weight: 800; color: #111a18; margin: 0; }
.wp-punkte { list-style: none; margin: 0 0 14px; padding: 0; font-size: 13.5px; line-height: 1.4; }
.wp-punkte li { padding-left: 22px; position: relative; margin-bottom: 5px; }
.wp-punkte li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 11px; height: 6px; border-left: 2px solid #2f7a4d; border-bottom: 2px solid #2f7a4d; transform: rotate(-45deg); }
.wp-input { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid #d3d9d6; border-radius: 8px; font: inherit; font-size: 15px; margin-bottom: 8px; color: #111a18; background: #fff; }
.wp-input:focus { outline: 2px solid #2f7a4d; border-color: transparent; }
.wp-consent { display: flex; gap: 8px; font-size: 12px; line-height: 1.4; color: #5b6664; margin: 4px 0 12px; align-items: flex-start; }
.wp-consent input { margin-top: 2px; }
.wp-consent a { color: #2f7a4d; }
.wp-send { width: 100%; background: var(--button-primary-bg, #dc2626); color: #fff; border: 0; border-radius: 999px; padding: 13px; font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; }
.wp-send:hover { background: var(--button-primary-hover, #b91c1c); }
.wp-send:disabled { opacity: .6; cursor: wait; }
.wp-klein { font-size: 12px; color: #5b6664; text-align: center; margin: 8px 0 0; }
.wp-msg { display: none; margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.4; }
.wp-msg-success { background: #e8f3ec; color: #1f5535; }
.wp-msg-error { background: #fdecea; color: #b3261e; }
@media (max-width: 600px) {
  .wp-widget { right: 10px; left: 10px; bottom: 10px; width: auto; max-width: none; }
  .wp-kopf img { width: 58px; height: 82px; }
}
.wp-widget{font-family:inherit}