/* ==========================================================================
   Weblandschaften — Alias-Schicht für Bestandsklassen · Redesign 2026-09 · Stand 2026-09-05
   Verbindlich: docs/redesign-2026-09/DESIGN.md (§8.3 Legacy-Aliase, §8.4 Familien, §1.3 Grün-Diät).
   Analysen: bestand/02 §c/§g/§h (Bestandskomponenten, Kaskade, DOM-Verträge),
   bestand/05 §3 (M1–M14), bestand/01 §4 (Familienstrukturen).

   Aufgabe: Die 1.757 Zeilen Bestands-CSS (Inline-<style> je Seite, shopnav.css, proto.css,
   landscape-heroes.css) definieren Buttons, Karten, Eyebrows, Heroes, CTA-Bänder, FAQ, Chips,
   Formulare, Tabellen und Artikel-Typografie unter eigenen Namen. Diese Datei zieht diese Namen
   auf die Komponenten aus wl-design.css — ohne eine Seite anzufassen. Es wird kein Inhalt,
   Link, ID, Formularfeld oder DOM-Vertrag berührt; es werden nur Eigenschaften gesetzt.

   Ladereihenfolge (DESIGN §8.2):
   fonts.css → tokens.css → shopnav.css | proto.css → <style> Seite → wl-design.css → DIESE DATEI → wl-slots.css

   Kaskadenregeln dieser Datei:
   - Sie liegt NACH allem, was Seiten liefern. Bei gleicher Spezifität gewinnt sie.
   - Seiten qualifizieren Komponenten oft mit Kontext ((0,2,0): .cta .btn, .ctaband .btn-l,
     .hero h1 .hl, .field input:focus). Deshalb werden die Alias-Selektoren bewusst auf
     (0,2,0) oder höher gehoben — per Verdopplung (.btn.btn) oder Kontext. Kein :where().
   - shopnav.css arbeitet mit 38 !important (Mobile-Typo Z.230–259, Abstände Z.279–307,
     Fokus Z.383–394, Motion-aus Z.419–423). Nur dort wird mit derselben Selektorliste,
     gleicher Spezifität und !important gekontert. Sonst kein !important — Ausnahme: die
     KI-Hero-Bilder aus landscape-heroes.css (Vorgabe: background-image none !important).
   - Der Consent-Stil wird von shopnav.js zur LAUFZEIT als <style> ans Ende des <head>
     gehängt — also nach dieser Datei. Dort hilft nur höhere Spezifität (.wl-consent.wl-consent).
   - Farben ausschließlich über --wl-*-Tokens, nie Hex. Grün nur für Aktion, Eyebrow-Punkt,
     Häkchen (--wl-gruen-text), Erfolg, Licht auf Dunkel. Weiß auf Grün ist verboten (2,30:1).
   - Layout (Grids, Flex, Breiten, Container) der Seiten bleibt unangetastet — nur Optik.
   - Klassen aus den DOM-Verträgen (bestand/02 §h, 06 §b.3) werden nur gestylt, nie ersetzt.
   - .cta ist dreifach belegt (proto-Button · Standort-Abschlusskasten · Blog/Lexikon-Band ·
     Buttonzeile in Heroes). Deshalb: Button = a.cta/button.cta, Band = section.cta und
     .article > div.cta, Buttonzeile (.hero .cta, .ctaband .cta) bleibt unberührt.

   Abschnitte:
   (a) Buttons            (f) Chips, Kacheln, Zahlenmarken     (k) Consent
   (b) Eyebrow, Highlight, Textlinks (g) Formulare, Meldungen  (l) Grün-Diät shopnav.css, Nav-Tinte, Footer-Gruppen
   (c) Heroes             (h) Tabellen                          (m) Mobile Typo/Abstände (!important)
   (d) Karten             (i) Artikel und Recht                 (n) Reduzierte Bewegung
   (e) CTA-Bänder, FAQ    (j) Sektionsrhythmus
   ========================================================================== */


/* ==========================================================================
   (a) Buttons — Bestandsnamen auf das Button-System (wl-design.css (d))
   Basis für alle Träger, die kein .btn tragen (.snav-cta, .sfoot-btn-p, .knopf, a.cta, .ghost …).
   Verdoppelte Klassen heben auf (0,2,0), damit .cta .btn / .ctaband .btn-l der Seiten verlieren.
   ========================================================================== */
.btn.btn,
.snav-cta, .snav-login, .sfoot-btn-p, .sfoot-btn-l,
.cta .knopf, a.cta:not(.ghost), button.cta:not(.ghost), .tb-btn.tb-btn, .dbtn, .finder .go,
.portalband .btn-w, .btn-submit,
.wl-consent.wl-consent .wl-c-acc, .wl-consent.wl-consent .wl-c-sec,
button[type="submit"]:not(.ghost):not(.btn-l):not(.btn-s):not(.wl-c-sec):not(.calarrow) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  border: 0;
  border-radius: var(--wl-radius-pille);
  padding: .875rem 1.5rem;
  font-family: var(--wl-schrift-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  filter: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--wl-schnell) var(--wl-aus),
    box-shadow var(--wl-mittel) var(--wl-weich),
    background-color var(--wl-mittel) var(--wl-weich),
    border-color var(--wl-mittel) var(--wl-weich),
    color var(--wl-mittel) var(--wl-weich);
}
.btn.btn svg, .snav-cta svg, .snav-login svg, .sfoot-btn-p svg, .sfoot-btn-l svg, a.cta svg, button.cta svg, .ghost svg, .btn-submit svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  transition: transform var(--wl-mittel) var(--wl-aus);
}
/* Lichtwisch */
.btn.btn::after,
.snav-cta::after, .sfoot-btn-p::after, .cta .knopf::after, a.cta::after, button.cta::after,
.tb-btn.tb-btn::after, .finder .go::after, .btn-submit::after,
.wl-consent.wl-consent .wl-c-acc::after,
button[type="submit"]:not(.ghost):not(.btn-l):not(.btn-s):not(.wl-c-sec):not(.calarrow)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform var(--wl-lang) var(--wl-weich);
}
@media (hover: hover) and (pointer: fine) {
  .btn.btn:hover, .snav-cta:hover, .snav-login:hover, .sfoot-btn-p:hover, .sfoot-btn-l:hover,
  .cta .knopf:hover, a.cta:hover, button.cta:hover, .ghost:hover, .tb-btn.tb-btn:hover, .dbtn:hover,
  .finder .go:hover, .portalband .btn-w:hover, .btn-submit:hover,
  .wl-consent.wl-consent .wl-c-acc:hover, .wl-consent.wl-consent .wl-c-sec:hover,
  button[type="submit"]:not(.ghost):not(.btn-l):not(.btn-s):not(.wl-c-sec):not(.calarrow):hover {
    transform: translateY(-2px);
    filter: none;
  }
  .btn.btn:hover::after, .snav-cta:hover::after, .sfoot-btn-p:hover::after, .cta .knopf:hover::after,
  a.cta:hover::after, button.cta:hover::after, .tb-btn.tb-btn:hover::after, .finder .go:hover::after, .btn-submit:hover::after,
  .wl-consent.wl-consent .wl-c-acc:hover::after,
  button[type="submit"]:not(.ghost):not(.btn-l):not(.btn-s):not(.wl-c-sec):not(.calarrow):hover::after {
    transform: translateX(130%);
  }
  .btn.btn:hover > .pfeil { transform: translateX(3px); }
}
/* Druck: kontert shopnav.css Z.339 (.btn:active … translateY(1px) scale(.985)) */
.btn.btn:active, .snav-cta:active, .sfoot-btn-p:active, .cta .knopf:active, a.cta:active, button.cta:active,
.ghost:active, .snav-login:active, .sfoot-btn-l:active, .tb-btn.tb-btn:active, .finder .go:active, .btn-submit:active,
.wl-consent.wl-consent .wl-c-acc:active, .wl-consent.wl-consent .wl-c-sec:active {
  transform: scale(.97);
  box-shadow: none;
}

/* Primär: Grün-Verlauf, Grün-Tinte (nie Weiß auf Grün), grüner Schatten, Glow-Ring beim Hover.
   Trifft .btn-p (188 Seiten), .cta .btn-p (163), .snav-cta, .sfoot-btn-p, .cta .knopf (136),
   proto a.cta/button.cta, .tb-btn, Finder-Knopf, Consent-Zustimmung, Formular-Senden. */
.btn.btn-p, .cta .btn.btn-p, .ctaband .btn.btn-p, .hero .btn.btn-p, .formcard .btn.btn-p,
.snav-cta, .sfoot-btn-p, .cta .knopf, a.cta:not(.ghost), button.cta:not(.ghost), .finder .go, .btn-submit,
.wl-consent.wl-consent .wl-c-acc,
button[type="submit"]:not(.ghost):not(.btn-l):not(.btn-s):not(.wl-c-sec):not(.calarrow) {
  color: var(--wl-aktion-text);
  background-color: var(--wl-blau);
  background-image: var(--wl-verlauf-btn);
  box-shadow: var(--wl-schatten-gruen), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn.btn-p:hover, .btn.btn-p:focus-visible, .cta .btn.btn-p:hover, .ctaband .btn.btn-p:hover,
.snav-cta:hover, .snav-cta:focus-visible, .sfoot-btn-p:hover, .sfoot-btn-p:focus-visible,
.cta .knopf:hover, .cta .knopf:focus-visible, a.cta:not(.ghost):hover, button.cta:not(.ghost):hover, .finder .go:hover, .btn-submit:hover, .btn-submit:focus-visible,
.wl-consent.wl-consent .wl-c-acc:hover,
button[type="submit"]:not(.ghost):not(.btn-l):not(.btn-s):not(.wl-c-sec):not(.calarrow):hover {
  color: var(--wl-aktion-text);
  background-image: var(--wl-verlauf-btn-hover);
  box-shadow: var(--wl-glow), inset 0 1px 0 rgba(255, 255, 255, .42);
  filter: none;
}
/* Formular-Sendeknopf: Pille statt vollbreiter Balken (bestand/05 §4.7) */
.formcard .btn.btn-p { width: auto; align-self: flex-start; }

/* Hell: Weiß→Grund, Rahmen Linie, blauer Lichtwisch, Hover-Rahmen Blau.
   Trifft .btn-l (188 Seiten), .btn-s, .ghost (26), .snav-login, .dbtn, Consent „Nur Notwendiges“. */
.btn.btn-l, .btn.btn-s, .hero .btn.btn-l, .ghost, .snav-login, .dbtn, .portalband .btn-w,
.wl-consent.wl-consent .wl-c-sec {
  border: 1px solid var(--wl-linie);
  color: var(--wl-tinte);
  background-color: var(--wl-weiss);
  background-image: linear-gradient(135deg, var(--wl-weiss) 0%, var(--wl-flaeche-2) 100%);
  box-shadow: 0 8px 20px -12px rgba(16, 42, 67, .28), var(--wl-glanz);
}
.btn.btn-l::after, .btn.btn-s::after, .ghost::after, .snav-login::after, .dbtn::after,
.wl-consent.wl-consent .wl-c-sec::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, var(--wl-blau-schleier) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform var(--wl-lang) var(--wl-weich);
}
@media (hover: hover) and (pointer: fine) {
  .btn.btn-l:hover::after, .btn.btn-s:hover::after, .ghost:hover::after, .snav-login:hover::after,
  .dbtn:hover::after, .wl-consent.wl-consent .wl-c-sec:hover::after { transform: translateX(130%); }
}
.btn.btn-l:hover, .btn.btn-l:focus-visible, .btn.btn-s:hover, .hero .btn.btn-l:hover,
.ghost:hover, .snav-login:hover, .snav-login:focus-visible, .dbtn:hover, .dbtn[aria-expanded="true"],
.portalband .btn-w:hover, .wl-consent.wl-consent .wl-c-sec:hover {
  color: var(--wl-tinte);
  background-color: var(--wl-weiss);
  border-color: var(--wl-blau-rand);
  box-shadow: 0 16px 30px -14px rgba(16, 42, 67, .3), 0 0 0 1px rgba(37, 99, 235, .18), var(--wl-glanz);
}
.snav-login svg, .snav-login:hover svg { color: var(--wl-blau); }
.dbtn[aria-expanded="true"] { background-image: linear-gradient(135deg, var(--wl-blau-50) 0%, var(--wl-weiss) 100%); }

/* Glas: helle Sekundärknöpfe auf dunklen Bändern (.ctaband .btn-l, Lexikon/Blog .cta .btn-l, Footer .sfoot-btn-l) */
.ctaband .btn.btn-l, .article > div.cta .btn.btn-l, section.cta .btn.btn-l, .portalband .btn.btn-l,
.live-band .btn.btn-l, .rcta .btn.btn-l, .sfoot-btn-l, .schlussaufruf .btn.btn-l {
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--wl-weiss);
  background-color: rgba(255, 255, 255, .08);
  background-image: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.ctaband .btn.btn-l::after, .article > div.cta .btn.btn-l::after, section.cta .btn.btn-l::after, .sfoot-btn-l::after {
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
}
.ctaband .btn.btn-l:hover, .article > div.cta .btn.btn-l:hover, section.cta .btn.btn-l:hover,
.portalband .btn.btn-l:hover, .live-band .btn.btn-l:hover, .rcta .btn.btn-l:hover, .sfoot-btn-l:hover,
.schlussaufruf .btn.btn-l:hover {
  color: var(--wl-weiss);
  background-color: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .4);
  box-shadow: 0 16px 34px -16px rgba(11, 27, 43, .55), inset 0 1px 0 rgba(255, 255, 255, .24);
}

/* Blau: Portal-Sekundäraktionen (DESIGN §5) — .tb-btn der Admin-/Agentur-Topbar */
.tb-btn.tb-btn {
  color: var(--wl-weiss);
  background-color: var(--wl-blau);
  background-image: var(--wl-verlauf-blau);
  box-shadow: 0 12px 26px -12px rgba(37, 99, 235, .55), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.tb-btn.tb-btn:hover { color: var(--wl-weiss); box-shadow: 0 20px 40px -14px rgba(37, 99, 235, .6), 0 0 0 1px var(--wl-blau-rand), inset 0 1px 0 rgba(255, 255, 255, .26); }

/* Größen */
.snav-cta, .snav-login, .tb-btn.tb-btn, .ghost, .dbtn, .finder .go,
.wl-consent.wl-consent .wl-c-acc, .wl-consent.wl-consent .wl-c-sec { padding: .625rem 1rem; font-size: .86rem; }
.wl-consent.wl-consent .wl-c-acc, .wl-consent.wl-consent .wl-c-sec { flex: 1; min-width: 8rem; }
.finder .go { padding: .75rem 1.25rem; }
a.cta, button.cta { padding: .7rem 1.25rem; font-size: .9rem; }
.cta .knopf { font-weight: 600; }
/* Nebenlink im Standort-Abschluss (sitzt auf dem dunklen Band, siehe (e)) */
.cta .neben { color: var(--wl-weiss); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; text-decoration-color: rgba(255, 255, 255, .5); }
.cta .neben:hover { text-decoration-color: currentColor; }

/* Deaktiviert */
.btn.btn:disabled, .btn.btn[aria-disabled="true"], a.cta[aria-disabled="true"], button.cta:disabled, .ghost:disabled, .btn-submit:disabled,
button[type="submit"]:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.btn:disabled::after, button.cta:disabled::after, button[type="submit"]:disabled::after, .btn-submit:disabled::after { display: none; }


/* ==========================================================================
   (b) Eyebrow und Highlight-Wort (M14, M4) — greift auf 349 Seiten
   .eyebrow ist in wl-design.css bereits neu; hier .kicker (136 Standort/Branche), .kurz .lbl,
   der Punkt mit Halo (0,2,0 gegen .eyebrow .dot der Seiten) und die Fassung auf Dunkel.
   ========================================================================== */
.kicker, .kurz .lbl, .callout .lbl, .gd-hero .k {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--wl-schrift-body);
  font-size: var(--wl-eyebrow);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--wl-blau-hover);
}
.kicker { margin-bottom: .75rem; }
.kurz .lbl, .callout .lbl { display: block; margin-bottom: .5rem; }
.eyebrow .dot, .kicker .dot, .gd-hero .k i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wl-gruen);
  box-shadow: 0 0 0 4px var(--wl-gruen-halo);
  transition: none;
}
/* Auf Dunkel trägt der Eyebrow Licht (Grün-als-Text auf Blau-Verlauf < 2:1, Kritik-Runde 1, Befund 4).
   start.html setzt den Portalband-Eyebrow INLINE (style="color:var(--green-text)", Punkt
   style="background:var(--green)") — Inline schlägt jede Regel, liest aber die Variable. Deshalb werden
   hier zusätzlich die gelesenen Aliase am Element auf Licht gebogen; kein !important nötig.
   Bewusst kein [class*="band"]: .checkband (start) ist eine helle Fläche. */
.ctaband .eyebrow, .article > div.cta .eyebrow, section.cta .eyebrow, .portalband .eyebrow, .live-band .eyebrow, .rcta .eyebrow,
.cta-band .eyebrow, .karte-dunkel .eyebrow, .sektion-dunkel .eyebrow, .schlussaufruf .eyebrow, .sfoot .eyebrow,
.ctaband .kicker, .article > div.cta .kicker, section.cta .kicker, .portalband .kicker, .live-band .kicker, .rcta .kicker,
.cta-band .kicker, .karte-dunkel .kicker, .sektion-dunkel .kicker, .schlussaufruf .kicker, .sfoot .kicker {
  color: var(--wl-licht);
  --green-text: var(--wl-licht);
  --green-d: var(--wl-licht);
  --accent-text: var(--wl-licht);
}
.ctaband .eyebrow .dot, .article > div.cta .eyebrow .dot, section.cta .eyebrow .dot, .portalband .eyebrow .dot, .live-band .eyebrow .dot,
.rcta .eyebrow .dot, .cta-band .eyebrow .dot, .karte-dunkel .eyebrow .dot, .sektion-dunkel .eyebrow .dot, .schlussaufruf .eyebrow .dot,
.ctaband .kicker .dot, .portalband .kicker .dot, .live-band .kicker .dot, .rcta .kicker .dot, .karte-dunkel .kicker .dot,
.sektion-dunkel .kicker .dot, .schlussaufruf .kicker .dot, .sfoot .eyebrow .dot, .sfoot .kicker .dot {
  background: var(--wl-licht);
  box-shadow: 0 0 0 4px rgba(124, 184, 255, .2);
  --green: var(--wl-licht);
}

/* Auth-Seiten (login, agentur-login; Befund 8): Nebenlinks „Passwort vergessen?“, „Anderes Konto verwenden“,
   „Kein Zugang?“ sind <button class="link"> in Grün-als-Text → Brand-Blau. (0,1,1)/(0,2,0) > Seite (0,1,0). */
button.link, .auth .link, .auth-form .link, .af-box .link, .forgot {
  color: var(--wl-blau);
  text-decoration: none;
  text-underline-offset: .16em;
  text-decoration-color: rgba(37, 99, 235, .35);
}
button.link:hover, .auth .link:hover, .auth-form .link:hover, .forgot:hover { color: var(--wl-blau-hover); text-decoration: underline; }
button.link:focus-visible, .auth .link:focus-visible { outline: 2px solid var(--wl-blau); outline-offset: 2px; border-radius: var(--wl-radius-xs); }
/* Login-Aside: Horizont-Navy mit Höhenlinien statt KI-Bergsee mit Grünschleier. Das Foto (.ab-bg, dekorativ)
   entfällt wie alle KI-Heroes der Schicht (siehe .landscape-hero); das Relief folgt im Seitenpaket Auth (DESIGN §7). */
.auth-brand {
  background-color: var(--wl-horizont);
  background-image: var(--wl-verlauf-navy);
  background-size: 400px 400px, auto;
}
.auth-brand .ab-bg { display: none; }
.auth-brand::after {
  background:
    radial-gradient(50% 40% at 88% 8%, rgba(124, 184, 255, .16), transparent 70%),
    radial-gradient(46% 38% at 4% 96%, rgba(37, 99, 235, .26), transparent 70%);
}
.auth-brand .ab-eyebrow, .auth-brand h2 em, .auth-brand .ab-feats li svg { color: var(--wl-licht); }
.auth-brand .ab-eyebrow .dot { background: var(--wl-licht); box-shadow: 0 0 0 4px rgba(124, 184, 255, .2); }
.auth-brand > .ab-mid > p, .auth-brand .ab-feats li, .auth-brand .ab-quote { color: var(--wl-text-dunkel); }
.auth-brand .ab-quote { border-left-color: rgba(124, 184, 255, .45); }
.auth-brand .ab-foot { color: var(--wl-gedaempft); }
.auth-form { background: var(--wl-flaeche-2); }

/* Highlight-Wort: Brand-Blau statt Grün (.hero h1 .hl auf 19 Kernseiten, .intro h1 em in proto.css) */
h1 .hl, h2 .hl, .hero h1 .hl, .rhero h1 .hl, .vhero h1 .hl, .head h1 .hl, .intro h1 em, .hero h1 em, .shead h2 em, .shead h2 .hl,
.hpill b, .kurz strong, .callout strong, .note strong {
  font-style: normal;
  color: var(--wl-blau);
}
.ctaband h2 .hl, .article > div.cta h2 .hl, section.cta h2 .hl, .portalband h2 .hl, .live-band h2 .hl, .rcta h2 .hl { color: var(--wl-licht); }

/* Textlinks in Fließtext und Karten: Brand-Blau statt Grün-als-Text (Grün-Diät; Kritik-Runde 1, Befund 6).
   24 Seiten (leistungen, kontakt, seo, webdesign, referenz-*, standorte …) färben Links INLINE mit
   style="color:var(--green-text);font-weight:600". Inline gewinnt gegen jede Regel, liest aber die Variable —
   deshalb wird sie am Element (Attributselektor auf style) auf Blau gebogen. Die Aliase --green-text/--green-d
   bleiben global unverändert: Häkchen, Erfolgstexte und Labels bleiben Grün-als-Text. */
a[style*="--green-text"], a[style*="--green-d"], a[style*="--accent-text"], a[style*="--txt-accent"] {
  --green-text: var(--wl-blau);
  --green-d: var(--wl-blau);
  --accent-text: var(--wl-blau);
  --txt-accent: var(--wl-blau);
  text-decoration-color: rgba(37, 99, 235, .35);
}
a[style*="--green-text"]:hover, a[style*="--green-d"]:hover, a[style*="--accent-text"]:hover, a[style*="--txt-accent"]:hover {
  --green-text: var(--wl-blau-hover);
  --green-d: var(--wl-blau-hover);
  --accent-text: var(--wl-blau-hover);
  --txt-accent: var(--wl-blau-hover);
}
/* Klassenlose und klassen-tragende Textlinks (a.sub Kontakt, .bwelt/.art .meta .go Wissen) */
body p a:not([class]), body li a:not([class]), .card a:not([class]), .karte a:not([class]), .chan a:not([class]),
a.sub, .chan a.sub, .card a.sub, .bwelt, .art .meta .go, .wissen-links a, .pillar .rel a:hover, .blist a:hover, .bhead:hover .bt, .zk .go {
  color: var(--wl-blau);
}
body p a:not([class]):hover, body li a:not([class]):hover, .card a:not([class]):hover, .karte a:not([class]):hover,
a.sub:hover, .chan a.sub:hover, .bwelt:hover, .art .meta .go:hover, .wissen-links a:hover { color: var(--wl-blau-hover); }
/* Ausnahme dunkle Kontexte: Licht (Brand-Blau auf Horizont 2,83:1 ist verboten) — (0,3,2) gegen (0,1,2) oben.
   Der Footer ist bewusst NICHT dabei: seine Linklisten tragen Text-auf-Dunkel mit Weiß-Hover (Abschnitt (l)),
   Licht bleibt dort den Akzenten (Icons, Kante) vorbehalten. */
.sektion-dunkel p a:not([class]), .sektion-dunkel li a:not([class]), .schlussaufruf p a:not([class]), .schlussaufruf li a:not([class]),
.ctaband p a:not([class]), .ctaband li a:not([class]), .portalband p a:not([class]), .portalband li a:not([class]),
.live-band p a:not([class]), .rcta p a:not([class]), .rcta a:not([class]), section.cta p a:not([class]), .article > div.cta p a:not([class]),
.karte-dunkel p a:not([class]),
.sektion-dunkel a[style*="--green-text"], .schlussaufruf a[style*="--green-text"], .ctaband a[style*="--green-text"],
.portalband a[style*="--green-text"], .live-band a[style*="--green-text"], .rcta a[style*="--green-text"],
section.cta a[style*="--green-text"], .article > div.cta a[style*="--green-text"], .karte-dunkel a[style*="--green-text"], .sfoot a[style*="--green-text"] {
  color: var(--wl-licht);
  --green-text: var(--wl-licht);
  --green-d: var(--wl-licht);
  --accent-text: var(--wl-licht);
}
/* wissen.html: --txt-accent (Seiten-:root, #0A7F4F) trägt dort Kategorien, Hover, Fokusring — alles Textakzent,
   nichts davon Häkchen oder Erfolg. Späteres :root gewinnt → Brand-Blau (Befund 8, Wissen). */
:root { --txt-accent: var(--wl-blau); }


/* ==========================================================================
   (c) Heroes (M5) — .hero (23 Kernseiten), .rhero/.vhero (Referenzen/Vorlagen), .head (164 Blog/Lexikon),
       .intro (proto-Seiten, 10), .legal (4 Rechtsseiten), Landschafts-Heroes (landscape-heroes.css, 4)
   Seiten-Hero-Typografie: Eyebrow · h1 .display-lg · Lead · Aktionen. Höhenlinien-Fond (::before,
   radiale Maske) und zwei atmende Orbs Blau/Grün (::after) statt Mint-Radialverlauf und KI-Bergsee.
   start.html definiert .hero::before/::after selbst (Weißschleier, Nebel) — gleiche Spezifität, hier später.
   ========================================================================== */
.hero, .rhero, .vhero, section.intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, var(--wl-weiss) 0%, var(--wl-flaeche-2) 100%);
  padding-top: clamp(3.5rem, 8vw, 7rem);          /* 112 px am Desktop (M7) */
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hero::before, .rhero::before, .vhero::before, section.intro::before, .head::before, .legal::before, .article:not(:has(.head))::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  height: auto;
  width: auto;
  filter: none;
  border-radius: 0;
  mix-blend-mode: normal;
  animation: none;
  background-color: transparent;
  background-size: 400px 400px;
  opacity: .7;
  -webkit-mask-image: radial-gradient(120% 90% at 72% 0%, #000 25%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 72% 0%, #000 25%, transparent 78%);
}
.hero::after, .rhero::after, .vhero::after, section.intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  left: 0; right: 0; bottom: 0;
  height: auto;
  width: auto;
  pointer-events: none;
  filter: none;
  border-radius: 0;
  mix-blend-mode: normal;
  opacity: 1;
  background-color: transparent;
  background-image:
    radial-gradient(34% 55% at 6% 8%, rgba(37, 99, 235, .22) 0%, rgba(37, 99, 235, .08) 40%, transparent 68%),
    radial-gradient(30% 50% at 96% 30%, rgba(124, 184, 255, .2) 0%, rgba(124, 184, 255, .07) 40%, transparent 68%);
  transform-origin: 50% 50%;
  animation: orb-atmen 14s ease-in-out infinite;
  will-change: transform;
}
/* Artikel- und Rechtsköpfe: Fond nur oben, im Containermaß (kein Überlauf) */
.head, .legal, .article { position: relative; isolation: isolate; }
.head::before, .legal::before, .article:not(:has(.head))::before {
  inset: -1rem -1.5rem auto;
  height: 22rem;
  opacity: .6;
  -webkit-mask-image: radial-gradient(85% 100% at 68% 0%, #000 10%, transparent 68%);
  mask-image: radial-gradient(85% 100% at 68% 0%, #000 10%, transparent 68%);
}
/* Unter 1024 px kein seitlicher Überstand: die −1,5 rem lagen über dem Seitenrand der Artikel-Container
   (18–20 px) und erzeugten 6–24 px horizontalen Überlauf auf 246 Mobil-Seiten (Sweep nach-fundament-1). */
@media (max-width: 1023px) {
  .head::before, .legal::before, .article:not(:has(.head))::before { inset: -1rem 0 auto; }
}
/* KI-Hero-Hintergrundbilder (landscape-heroes.css, start.html .hero-media) entfallen — dekorativ, kein Inhalt */
.landscape-hero { background: transparent !important; background-image: none !important; }
.landscape-hero__media, .hero-media { display: none !important; }
.landscape-hero::after { content: none !important; background: none !important; }
.landscape-hero--center h1, .landscape-hero--center p, .landscape-hero--center .micro,
.intro.landscape-hero h1, .intro.landscape-hero p, .hero-copy { text-shadow: none; }
.vhero.landscape-hero, .rhero.landscape-hero { min-height: 0; border-bottom: 0; }
.intro.landscape-hero {
  min-height: 0;
  border: 1px solid var(--wl-linie);
  border-radius: var(--wl-radius-hero);
  box-shadow: var(--wl-glanz), var(--wl-schatten-md);
  background: linear-gradient(160deg, var(--wl-weiss) 0%, var(--wl-flaeche-2) 100%) !important;
}
.hero { min-height: 0; }                          /* start.html: min-height 620 px war für das Foto */
/* proto-Intros (termin, check, standorte, index, 8 Seiten): der Fond endete als harter Kasten an der 760-px-Kante
   der Sektion (Befund 3). Die Sektion selbst bleibt in Breite und Lage — check/standorte/index setzen max-width INLINE
   (820/760/720), und der Text bleibt links am App-Raster, an dem darunter Leiste und Panel hängen. Nur der Fond
   (::before Höhenlinien, ::after Orbs) spannt über die volle Viewportbreite: linke Kante = −(App-Rand + zentrierter
   Überstand von .app; proto.css Z.22/62/65: 1280 px, 32/24/16 px), Breite 100vw. Den Scrollbalken-Rest fängt
   overflow-x:clip auf html/body (wl-design.css (b)). (0,2,1) > Sammelregel (0,1,1). Die Kartenvariante
   .intro.landscape-hero (wissen, branchenwelten) bleibt geschlossen und behält overflow:hidden. */
.app { --wl-app-rand: 32px; }
@media (max-width: 900px) { .app { --wl-app-rand: 24px; } }
@media (max-width: 560px) { .app { --wl-app-rand: 16px; } }
section.intro:not(.landscape-hero) { overflow: visible; background: transparent; }   /* Weiß→Grund-Verlauf wandert in ::after, sonst bleibt die 760-px-Kante als heller Kasten stehen */
section.intro:not(.landscape-hero)::before, section.intro:not(.landscape-hero)::after {
  left: calc(-1 * (var(--wl-app-rand, 32px) + max(0px, (100vw - 1280px) / 2)));
  right: auto;
  width: 100vw;
}
section.intro:not(.landscape-hero)::before {
  -webkit-mask-image: radial-gradient(70% 100% at 62% 0%, #000 20%, transparent 74%);
  mask-image: radial-gradient(70% 100% at 62% 0%, #000 20%, transparent 74%);
}
section.intro:not(.landscape-hero)::after {
  background-image:
    radial-gradient(34% 55% at 6% 8%, rgba(37, 99, 235, .22) 0%, rgba(37, 99, 235, .08) 40%, transparent 68%),
    radial-gradient(30% 50% at 96% 30%, rgba(124, 184, 255, .2) 0%, rgba(124, 184, 255, .07) 40%, transparent 68%),
    linear-gradient(180deg, var(--wl-weiss) 0%, var(--wl-flaeche-2) 100%);
}

/* H1 (Seiten-H1 = .display-lg; Start-Hero = .display-xl) */
.hero h1, .rhero h1, .vhero h1, section.intro h1, .head h1, .article h1, .legal h1, .article > h1, .shead h1, .e404 h1, .thanks h1 {
  font-family: var(--wl-schrift-display);
  font-size: var(--wl-display-lg);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.028em;
  color: var(--wl-tinte);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
[data-shopnav="home"] .hero h1 { font-size: var(--wl-display-xl); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; }
.hero h1, .rhero h1, .vhero h1 { margin-top: 1rem; margin-bottom: 1rem; }
.head h1, .article h1, .legal h1 { margin-top: 1rem; margin-bottom: 1.25rem; }
/* Lead */
.hero .sub, .hero > .wrap > p, .hero .hero-copy > p, .rhero p, .vhero p, section.intro p, .lead, .article > .lead, .body .intro, .shead p {
  font-family: var(--wl-schrift-body);
  font-size: var(--wl-lead);
  font-weight: 400;
  line-height: 1.6;
  color: var(--wl-sekundaer);
  text-wrap: pretty;
}
.hero .sub, .rhero p, .vhero p { margin-bottom: 0; }
.article > .lead, .lead { margin-bottom: 1.75rem; }
section.intro p { max-width: 42rem; }
/* Vertrauens- und Mikrozeilen: Häkchen bleiben Grün-als-Text (erlaubt), Text Sekundär */
.hero .trust, .vhero .micro, .hero .micro, .hero .pop { color: var(--wl-sekundaer); font-weight: 500; }
.hero .trust svg, .vhero .micro svg, .hero .micro svg { color: var(--wl-gruen-text); }
/* Start-Hero: Pille, Finder-Glaskarte, Beliebt-Chips */
.hpill {
  border: 1px solid var(--wl-linie);
  background: var(--wl-glas-scroll);
  color: var(--wl-tinte);
  box-shadow: var(--wl-schatten-sm), var(--wl-glanz);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero .hpill { background: var(--wl-glas-scroll); border-color: var(--wl-linie); }
.hpill-caret { background: var(--wl-blau); }
.finder, .hero .finder {
  border: 1px solid var(--wl-glas-rand);
  border-radius: var(--wl-radius-card);
  background: var(--wl-glas-scroll);
  box-shadow: var(--wl-glanz), var(--wl-schatten-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.finder .fl { color: var(--wl-sekundaer); }
.finder select {
  border-color: var(--wl-ui-rand);
  border-radius: var(--wl-radius-ui);
  background-color: var(--wl-weiss);
  color: var(--wl-tinte);
}
.finder select:hover { border-color: var(--wl-sekundaer); background-color: var(--wl-weiss); }
.finder select:focus-visible { border-color: var(--wl-blau); box-shadow: var(--wl-fokus); }
.finder select:focus + .fchev, .finder .fsel:hover .fchev { background: var(--wl-blau-50); color: var(--wl-blau); }
.pop a, .hero .pop a {
  border: 1px solid var(--wl-linie);
  background: var(--wl-weiss);
  color: var(--wl-sekundaer);
  font-weight: 500;
  transition: border-color var(--wl-mittel) var(--wl-weich), color var(--wl-mittel) var(--wl-weich), background-color var(--wl-mittel) var(--wl-weich);
}
.pop a:hover { border-color: var(--wl-blau-rand); color: var(--wl-blau-hover); background: var(--wl-blau-50); }

/* Sektionskopf (.shead auf 19 Seiten, .sh): H2 als .display-md, Lead darunter, „Alle …“-Link Blau */
.shead h2, .sh h2 {
  font-family: var(--wl-schrift-display);
  font-size: var(--wl-display-md);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.024em;
  color: var(--wl-tinte);
  text-wrap: balance;
}
.shead p, .sh p { margin-top: .875rem; max-width: 60ch; }
.shead .all { color: var(--wl-blau-hover); font-weight: 600; text-decoration: none; }
.shead .all:hover { color: var(--wl-blau); text-decoration: underline; text-underline-offset: .18em; }
/* Sektions-H2 außerhalb von .shead (Startseite, proto .app, Standort-Artikel folgt in (i)) */
section > .wrap > h2, section.mod > h2, .app > section > h2, .stats-sec h2, .faq-sec > h2, .grp > h2 {
  font-family: var(--wl-schrift-display);
  font-size: var(--wl-display-md);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.024em;
  text-wrap: balance;
  margin-bottom: 1rem;
}


/* ==========================================================================
   (d) Karten (M3) — .karte-Optik: Radius Card, Verlaufsfläche, Glanz, kühler Schatten,
       Spotlight (--mx/--my via wl-motion.js), Verlaufskante oben, Lift −5 px.
   Padding und Innenraster der Seiten bleiben (Layout). Träger: .card (132 Seiten), .card2, .lcard,
   .pcard, .plan, .toolcard, .panel (45), .ref, .tpl, .kachel, .fitem, .step (Ablauf), .flowstep, .path,
   .chan/.hours/.formcard (Kontakt), .weiter a (136), .faqs > .faq (93), .rl, .pill (white-label),
   .karte (Standort — .karte selbst kommt aus wl-design.css), .stat, .glass, .kcard.
   ========================================================================== */
.card, .card2, .lcard, .pcard, .plan, .toolcard, .panel, .ref, .tpl, .kachel, .fitem, .step, .flowstep, .path,
.chan, .hours, .formcard, .weiter a, .faqs > .faq, .rl, .pill, .stat, .glass, .kcard, .platcard, .postcard, .stat-t, .bigcard,
.rail, .panel-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--wl-linie);
  border-radius: var(--wl-radius-card);
  color: var(--wl-tinte);
  background-color: var(--wl-weiss);
  background-image: linear-gradient(160deg, var(--wl-weiss) 0%, var(--wl-weiss) 55%, var(--wl-flaeche-2) 100%);
  box-shadow: var(--wl-glanz), var(--wl-schatten-md);
  transition:
    transform var(--wl-mittel) var(--wl-aus),
    box-shadow var(--wl-mittel) var(--wl-weich),
    border-color var(--wl-mittel) var(--wl-weich);
}
/* Kontaktkarten, Stat-Kacheln und Ablaufschritte tragen keinen Vollrahmen-Schatten, sonst konkurrieren sie mit der Formularkarte */
.chan, .hours, .stat, .step, .weiter a, .faqs > .faq, .rl, .pill, .glass { box-shadow: var(--wl-glanz), var(--wl-schatten-sm); }
.panel-wrap { border-radius: var(--wl-radius-hero); }
.rail { overflow: visible; }                       /* sticky Schritt-Leiste (termin.html) darf nicht clippen */
.step { text-align: inherit; }
/* Spotlight */
.card::before, .card2::before, .lcard::before, .pcard::before, .plan::before, .toolcard::before, .panel::before,
.ref::before, .tpl::before, .kachel::before, .fitem::before, .flowstep::before, .path::before, .chan::before,
.formcard::before, .weiter a::before, .rl::before, .kcard::before, .bigcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 184, 255, .13), transparent 42%);
  transition: opacity var(--wl-mittel) var(--wl-weich);
}
/* Verlaufskante oben Horizont→Blau→Grün, wächst beim Hover von links */
.card::after, .card2::after, .lcard::after, .pcard::after, .plan::after, .toolcard::after, .panel::after,
.ref::after, .tpl::after, .kachel::after, .fitem::after, .flowstep::after, .path::after, .chan::after,
.formcard::after, .weiter a::after, .rl::after, .kcard::after, .bigcard::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 2;
  height: 3px;
  border-radius: inherit;
  background-image: linear-gradient(90deg, var(--wl-horizont) 0%, var(--wl-blau) 50%, var(--wl-gruen) 100%);
  opacity: 0;
  transform: scaleX(.35);
  transform-origin: left;
  pointer-events: none;
  transition: opacity var(--wl-mittel) var(--wl-weich), transform var(--wl-lang) var(--wl-aus);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover, .card2:hover, .lcard:hover, .pcard:hover, .plan:hover, .toolcard:hover, .panel:hover, .ref:hover, .tpl:hover, .tpl.in:hover,
  .kachel:hover, .fitem:hover, .flowstep:hover, .path:hover, .chan:hover, .weiter a:hover, .rl:hover, .kcard:hover, .bigcard:hover, .pill:hover {
    transform: translateY(-5px);
    border-color: rgba(37, 99, 235, .35);
    background-color: var(--wl-weiss);
    box-shadow: var(--wl-glanz), 0 30px 56px -24px rgba(16, 42, 67, .4);
  }
  .card:hover::before, .card2:hover::before, .lcard:hover::before, .pcard:hover::before, .plan:hover::before, .toolcard:hover::before,
  .panel:hover::before, .ref:hover::before, .tpl:hover::before, .kachel:hover::before, .fitem:hover::before, .flowstep:hover::before,
  .path:hover::before, .chan:hover::before, .weiter a:hover::before, .rl:hover::before, .kcard:hover::before, .bigcard:hover::before,
  .card:hover::after, .card2:hover::after, .lcard:hover::after, .pcard:hover::after, .plan:hover::after, .toolcard:hover::after,
  .panel:hover::after, .ref:hover::after, .tpl:hover::after, .kachel:hover::after, .fitem:hover::after, .flowstep:hover::after,
  .path:hover::after, .chan:hover::after, .weiter a:hover::after, .rl:hover::after, .kcard:hover::after, .bigcard:hover::after { opacity: 1; }
  .card:hover::after, .card2:hover::after, .lcard:hover::after, .pcard:hover::after, .plan:hover::after, .toolcard:hover::after,
  .panel:hover::after, .ref:hover::after, .tpl:hover::after, .kachel:hover::after, .fitem:hover::after, .flowstep:hover::after,
  .path:hover::after, .chan:hover::after, .weiter a:hover::after, .rl:hover::after, .kcard:hover::after, .bigcard:hover::after { transform: scaleX(1); }
  /* Karten-Icon: keine Rotation mehr, nur Farbwechsel (siehe (f)) */
  .card:hover .ic, .fitem:hover .ic { transform: translateY(-2px); }
}
.ref:focus-visible { border-color: var(--wl-blau-rand); }
.formcard:hover { transform: none; }              /* Formularkarte hebt sich nicht — sie ist Arbeitsfläche, keine Kachel */
.panel-wrap:hover, .rail:hover, .hours:hover, .stat:hover, .step:hover { transform: none; }
/* Hervorgehobene Pläne/Preise: Blau-Ring statt grünem Rahmen */
.plan.pro, .pcard.feat {
  border-color: var(--wl-blau-rand);
  box-shadow: var(--wl-glanz), 0 0 0 1px var(--wl-blau-schleier), var(--wl-schatten-lg);
}
.plan.pro .rib { background: var(--wl-gruen); color: var(--wl-gruen-tinte); }
/* Bildkarten: Vorschau-Bühne bleibt, Badge-Farben in die Familie */
.ref .pv, .tpl .pv { background: var(--wl-flaeche-2); }
/* vorlage.html (Detailseite): Grid-Kind .main und die Bildbühne .preview > picture nahmen ihre Min-Content-Breite
   (Bild 620 px) — 24 px Überlauf mobil (Sweep nach-fundament-1). Flex-/Grid-Kinder dürfen schrumpfen. */
.detail > .main, .detail > .buy, .preview > picture, .preview > .media-frame { min-width: 0; max-width: 100%; }
.preview img { max-width: 100%; height: auto; }
.tpl .pv .badge { background: var(--wl-horizont); color: var(--wl-weiss); border-radius: var(--wl-radius-xs); }
.tpl .pv .badge.new { background: var(--wl-gruen); color: var(--wl-gruen-tinte); }
.tpl .row2 .tag, .tpl .row3 span { background: var(--wl-blau-50); color: var(--wl-blau-hover); border-color: transparent; }
.ref .info .br, .ref .external, .ref .arr { color: var(--wl-blau); }
.ref .external, .ref .arr { background: var(--wl-blau-50); }
.ref .feat span svg { color: var(--wl-gruen-text); }
/* Kartenlinks „Mehr →“ und Karteninhalte */
.card .go, .path .go, .rl .go, .step-go { color: var(--wl-tinte); transition: color var(--wl-mittel) var(--wl-weich); }
.card:hover .go, .path:hover .go, .path.blue:hover .go, .rl:hover .go, .rl.blue:hover .go, .step-go:hover { color: var(--wl-blau-hover); }
.card:hover b, .lcard:hover b { color: var(--wl-blau-hover); }
.card:hover { background-color: var(--wl-weiss); }
.card li svg, .panel.p-sol li svg, .tick svg { color: var(--wl-gruen-text); }
.card h3, .path h3, .rl h3, .step h3, .plan h3, .pcard h3, .card2 h3, .toolcard h3, .fitem h3, .chan b, .weiter b, .karte b, .faqs > .faq h3 {
  font-family: var(--wl-schrift-display);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--wl-tinte);
}
.card p, .card .lead, .path p, .rl p, .step p, .plan p, .pcard p, .card2 p, .toolcard p, .fitem p, .karte span, .weiter span, .chan span, .chan a, .hours .row {
  color: var(--wl-sekundaer);
}
.chan a:hover { color: var(--wl-blau-hover); }
.chan .sub, .card .sub { color: var(--wl-hilfstext); }
.card .lead, .card .sub, .plan .sub { font-size: .95rem; line-height: 1.55; margin-bottom: 1rem; }
/* Problem/Lösung-Panels (webdesign/seo): Fehler-Fläche statt Rosa-Pastell, Lösung Grün 50 */
.panel.p-prob h3 .ph { background: var(--wl-fehler-flaeche); color: var(--wl-fehler-text); }
.panel.p-prob li svg { color: var(--wl-fehler-text); }
.panel.p-sol h3 .ph { background: var(--wl-gruen-50); color: var(--wl-gruen-text); }


/* ==========================================================================
   (e) CTA-Bänder und FAQ
   Schlussaufruf-Optik (wl-design.css .schlussaufruf) für .ctaband (22 Seiten), .article > div.cta
   (Blog/Lexikon-Band, 163), section.cta (Standort/Branche-Abschluss, 136), .portalband, .live-band,
   .cta-band, .rcta. Raster/Ausrichtung der Seiten bleiben (portalband = 2 Spalten linksbündig).
   ========================================================================== */
.ctaband, .article > div.cta, section.cta, .portalband, .live-band, .cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: var(--wl-radius-hero);
  color: var(--wl-weiss);
  background-color: var(--wl-blau-hover);
  background-image:
    radial-gradient(45% 60% at 82% 18%, rgba(124, 184, 255, .34) 0%, transparent 62%),
    radial-gradient(40% 50% at 12% 88%, rgba(255, 255, 255, .12) 0%, transparent 60%),
    var(--wl-verlauf-blau);
  background-size: auto, auto, auto;
  box-shadow: var(--wl-schatten-lg);
}
.ctaband, .article > div.cta, section.cta { padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem); text-align: center; }
.live-band::before { display: none; }              /* alter Grünfleck (blur 30 px) — der Verlauf übernimmt */
/* (0,2,1): die Artikel-Typografie in (i) (.article h2, .body p) darf die Bandfarben nicht zurückholen */
.ctaband.ctaband h2, .article > div.cta h2, section.cta.cta h2, .portalband.portalband h2, .live-band.live-band h2, .cta-band.cta-band h2, .article > div.cta h3 {
  font-family: var(--wl-schrift-display);
  font-size: var(--wl-display-md);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.024em;
  color: var(--wl-weiss);
  text-wrap: balance;
}
.ctaband.ctaband h2, .article > div.cta h2, section.cta.cta h2 { margin: 0 auto .75rem; max-width: 22ch; }
.ctaband.ctaband p, .article > div.cta p, section.cta.cta p, .portalband > div > p, .live-band.live-band p, .cta-band.cta-band p {
  color: rgba(255, 255, 255, .82);
  font-size: 1.125rem;
  line-height: 1.6;
}
.ctaband.ctaband p:not(.ctaband-text), .article > div.cta p, section.cta.cta p { margin: 0 auto 1.75rem; max-width: 36rem; }
section.cta.cta p { margin-bottom: 1.25rem; }
.ctaband .cta, .article > div.cta .row, .article > div.cta .cta { margin-top: 0; }
.portalband .pchips span { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--wl-radius-pille); color: var(--wl-text-dunkel); }
/* Links auf Dunkel tragen Licht (Brand-Blau auf Horizont 2,83:1 ist verboten) */
.ctaband a:not([class]), .article > div.cta a:not([class]), section.cta a:not([class]), .portalband a:not([class]), .live-band a:not([class]) { color: var(--wl-licht); }
.ctaband :focus-visible, .article > div.cta :focus-visible, section.cta :focus-visible, .portalband :focus-visible, .live-band :focus-visible,
.cta-band :focus-visible, .rcta :focus-visible { outline-color: var(--wl-licht) !important; }
/* Referenzen-Abschluss (.rcta): volle Breite als dunkle Sektion mit Höhenlinien-hell */
.rcta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 0;
  color: var(--wl-text-dunkel);
  background-color: var(--wl-horizont);
  background-image: var(--wl-verlauf-navy);
  background-size: 400px 400px, auto;
}
.rcta.rcta h2 { color: var(--wl-weiss); font-size: var(--wl-display-md); letter-spacing: -.024em; }
.rcta.rcta p { color: var(--wl-text-dunkel); }

/* FAQ → .fragen-Optik: .faqitem (Branche/Standort-Schalen), .faq details (136 Standort/Branche),
   .acc > details (Leistungsseiten), .faqlist. Pfeile/Plus in Blau, geöffnet Blau-Rand. */
.faqlist, .faq { display: grid; gap: .625rem; }
.faq details, .faqitem, .acc > details {
  border: 1px solid var(--wl-linie);
  border-radius: var(--wl-radius-ui);
  background: var(--wl-weiss);
  box-shadow: var(--wl-schatten-sm);
  margin: 0;
  transition: border-color var(--wl-mittel) var(--wl-weich), box-shadow var(--wl-mittel) var(--wl-weich);
}
.faq details { padding: 0 1.25rem; }
.acc { border: 0; border-radius: 0; background: transparent; overflow: visible; display: grid; gap: .625rem; }
.acc > details { border-bottom: 1px solid var(--wl-linie); }
.faq details[open], .faqitem[open], .acc > details[open] { border-color: var(--wl-blau-rand); box-shadow: var(--wl-schatten-md); }
.faq summary, .faqitem summary, .acc summary {
  font-family: var(--wl-schrift-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--wl-tinte);
  border-radius: inherit;
  transition: background-color var(--wl-mittel) var(--wl-weich), color var(--wl-mittel) var(--wl-weich);
}
.faq summary:hover, .faqitem summary:hover, .acc summary:hover { background: var(--wl-flaeche-2); }
.faq details[open] summary, .faqitem[open] summary, .acc details[open] summary { color: var(--wl-blau-hover); background: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.faq summary::after { color: var(--wl-blau); font-family: var(--wl-schrift-display); }
.faqitem .fa-ic::before, .faqitem .fa-ic::after { background: var(--wl-blau); }
.acc summary .chev { color: var(--wl-sekundaer); }
.acc details[open] summary .chev { color: var(--wl-blau); }
.acc summary:focus-visible { outline-color: var(--wl-blau) !important; outline-offset: -2px !important; }
.faq details p, .faqitem .fa-a, .acc .ans { color: var(--wl-sekundaer); font-size: .95rem; line-height: 1.62; }


/* ==========================================================================
   (f) Chips, Icon-Kacheln, Zahlenmarken (M4: Blau 50 / Blau statt Pastellgrün)
   ========================================================================== */
.fchip, .tag, span.pill, a.pill, .more .links a, .ptag, .gd-tag, .teamtag, .tk-badge, .soon {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  border-radius: var(--wl-radius-pille);
  border: 1px solid var(--wl-linie);
  background: var(--wl-weiss);
  padding: .3rem .7rem;
  font-family: var(--wl-schrift-body);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--wl-sekundaer);
  white-space: nowrap;
  cursor: default;
  transition: background-color var(--wl-mittel) var(--wl-weich), border-color var(--wl-mittel) var(--wl-weich), color var(--wl-mittel) var(--wl-weich);
}
.fchip, .more .links a { cursor: pointer; padding: .5rem .9rem; font-size: .84rem; white-space: normal; }
.fchip:hover, .more .links a:hover { color: var(--wl-tinte); border-color: var(--wl-blau-rand); text-decoration: none; }
.fchip.on, .fchip[aria-pressed="true"], .chip.on { background: var(--wl-blau-50); border-color: var(--wl-blau-100); color: var(--wl-blau-hover); }
.badge.pro, .tag.pro { background: var(--wl-gruen-50); color: var(--wl-gruen-text); }
.badge.free, .tag.free { background: var(--wl-blau-50); color: var(--wl-blau-hover); }
.chip .md { background: var(--wl-blau); }
/* Icon-Kacheln: Blau 50 / Blau, bei Karten-Hover Grün / Grün-Tinte */
.card .ic, .chan .ic, .fitem .ic, .path .pic, .path.blue .pic, .rl .pic, .rl.blue .pic, .toolcard .ti, .lcard .lic, .pill .n,
.snav-mi-ic, .gd-step .n, .ci, .cat .ci,
.fk .ic, .zk .ic, .rel .pic, .rel.blue .pic, .goal .ic, .tip .ic, :is(.card, .fk, .tcard, .pcard, .zk, .karte) .ic {
  color: var(--wl-blau);
  background: var(--wl-blau-50);
  background-image: none;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background-color var(--wl-mittel) var(--wl-weich), color var(--wl-mittel) var(--wl-weich), transform var(--wl-mittel) var(--wl-aus);
}
.card .ic, .chan .ic, .fitem .ic, .toolcard .ti, .lcard .lic, .fk .ic, .zk .ic { border-radius: .75rem; }
.card:hover .ic, .chan:hover .ic, .fitem:hover .ic, .path:hover .pic, .rl:hover .pic, .toolcard:hover .ti, .lcard:hover .lic, .pill:hover .n,
.fk:hover .ic, .zk:hover .ic, .rel:hover .pic, .rel.blue:hover .pic {
  color: var(--wl-gruen-tinte);
  background: var(--wl-gruen);
}
/* Erfolgskachel (termin .success): Grün 50 / Grün-als-Text — Erfolg ist die eine erlaubte grüne Fläche */
.success .big { color: var(--wl-gruen-text); background: var(--wl-gruen-50); border: 1px solid transparent; box-shadow: none; }
/* Karten außerhalb der Alias-Liste mit Grün-Rahmen/-Schatten beim Hover (blog .fk/.sl, vorlagen .qtile, seo .rel; Befund 7):
   Rahmen Blau-Rand, kühler Schatten. (0,2,0)/(0,3,0) ≥ Seite, hier später. */
.fk:hover, .sl:hover, .qtile:hover, .rel:hover, .rel.blue:hover { border-color: var(--wl-blau-rand); box-shadow: var(--wl-schatten-md); }
.fk, .sl { border-color: var(--wl-linie); }
.fk .fkfoot { border-top-color: var(--wl-linie); }
.rel:hover .go, .rel.blue:hover .go, .fk .zu, .fk:hover .zu { color: var(--wl-blau-hover); }
.qtile svg { color: var(--wl-blau); }
.qtile[aria-pressed="true"] { background: var(--wl-horizont); border-color: var(--wl-horizont); }
.qtile[aria-pressed="true"] svg { color: var(--wl-licht); }
/* Zähl-Chips ohne Aktion („7 Artikel“ blog .fk .zahl, .ftoggle .fnum, .fk .n, .opt .n): Chip-Optik Weiß/Linie,
   Hover Blau-Rand — keine Grün-Fläche ohne Aktion. */
.fk .zahl, .fk .n, .ftoggle .fnum, .opt .n {
  color: var(--wl-sekundaer);
  background: var(--wl-weiss);
  border: 1px solid var(--wl-linie);
  transition: border-color var(--wl-mittel) var(--wl-weich), color var(--wl-mittel) var(--wl-weich), background-color var(--wl-mittel) var(--wl-weich);
}
.fk .zahl:hover { color: var(--wl-blau-hover); border-color: var(--wl-blau-rand); background: var(--wl-blau-50); filter: none; }
.opt[aria-pressed="true"] .n { background: rgba(255, 255, 255, .16); border-color: transparent; color: var(--wl-weiss); }
/* Zahlenmarke blog .sl .nr: Blau-Verlauf mit Weiß wie alle Schrittzahlen (siehe unten) */
.sl .nr { color: var(--wl-weiss); background-color: var(--wl-blau); background-image: var(--wl-verlauf-blau); }
/* Aktive Filter-Chips (faq .chip[aria-pressed], vorlagen .achip): Blau 50 / Blau 700 statt Grün 50 */
.chip[aria-pressed="true"], .achip { background: var(--wl-blau-50); border-color: var(--wl-blau-100); color: var(--wl-blau-hover); }
.chip[aria-pressed="true"] .n { color: var(--wl-blau-hover); }
.achip:hover { border-color: var(--wl-blau-rand); }
/* Zahlenmarken (Schritte): Blau-Verlauf mit Weiß */
.steps li::before, .step .no::before, .flowstep .fnum, .step .n {
  color: var(--wl-weiss);
  background-color: var(--wl-blau);
  background-image: var(--wl-verlauf-blau);
  border: 0;
  box-shadow: 0 8px 18px -10px rgba(37, 99, 235, .6);
}
.step .no { color: var(--wl-blau-hover); }
.step .n { font-weight: 700; }
/* Kennzahlen und Fortschritt (Grün = Fortschritt bleibt) */
.stat .n, .kennzahl { font-family: var(--wl-schrift-display); color: var(--wl-tinte); }
/* Highlight-Wort in Kennzahlen („7 Tage", „100 %", „1 Ansprechpartner" auf ueber-uns: .stat .num .u = var(--green-text))
   → Brand-Blau; Grün ist als Highlight nicht vorgesehen (Grün-Diät; Kritik-Runde 1, Befund 8). (0,3,0) ≥ Seite. */
.stat .num .u, .stat .num em, .stat .num .hl, .stat em, .stat .hl, .stats em, .stats .u, .kpi em, .kpi .u, .stat-t em, .stat-t .u {
  color: var(--wl-blau);
  font-style: normal;
}
/* wissen.html: Akzentflächen (.cl.on Filterpille, .art-media Bildbühne, .pillar .l Auftakt) liefen über
   --accent/--accent-soft in Grün → Blau 50 / Blau; Hover-Rahmen Blau-Rand statt Vollgrün. */
.cl.on, .cl[aria-pressed="true"] { background: var(--wl-blau-50); border-color: var(--wl-blau-100); color: var(--wl-blau-hover); }
.cl:hover, a.art:hover, .zk:hover, .mehr:hover, .bsec[open] { border-color: var(--wl-blau-rand); }
.art-media { background: var(--wl-blau-50); }
.pillar .l { background: linear-gradient(150deg, var(--wl-blau-50) 0%, var(--wl-flaeche-2) 100%); }
.search .qx:hover { background: var(--wl-blau-50); }
/* Grün-Diät für hart codierte Mint-Flächen (Befund 6): start .checkband (Verlauf E2FAEF→E8F1FF, Rahmen D5EDE4),
   vorlagen .quick (F4FBF8→Weiß). --bg-mint/--green-l/--accent-soft laufen bereits über tokens.css/wl-design.css auf
   Fläche 2 / Linie / Blau 50 (blog .start-sec, Portal-Topbar). Grün 50 bleibt Zustandsklassen vorbehalten (unten). */
.checkband {
  background: linear-gradient(132deg, var(--wl-blau-50) 0%, var(--wl-weiss) 48%, var(--wl-flaeche-2) 100%);
  border-color: var(--wl-linie);
  box-shadow: var(--wl-glanz), var(--wl-schatten-lg);
}
.checkband::before { background: radial-gradient(circle, rgba(37, 99, 235, .16), rgba(37, 99, 235, 0) 70%); }
.checkband::after { background: radial-gradient(circle, rgba(124, 184, 255, .14), rgba(124, 184, 255, 0) 70%); }
.quick { background: linear-gradient(180deg, var(--wl-blau-50) 0%, var(--wl-weiss) 70%); border-color: var(--wl-linie); }
.upsell { background: linear-gradient(135deg, var(--wl-blau-50) 0%, var(--wl-flaeche-2) 100%); }   /* campus Academy-Pro-Band: Grün-Schleier → Blau 50 */
/* Erfolgsflächen: Grün 50 / Grün-als-Text ausschließlich über Zustandsklassen */
.connect.ok, .badge.ok, .tag.ok, .pill.ok, .chip.ok, .st.ok, .status.ok, .zustand-erfolg, .ist-erfolg {
  background: var(--wl-gruen-50);
  border-color: rgba(18, 164, 99, .3);
  color: var(--wl-gruen-text);
}
.connect.ok .ci { background: var(--wl-gruen); color: var(--wl-gruen-tinte); }
.rail .pb { background: var(--wl-flaeche-2); }
.rail .pb i { background: var(--wl-verlauf-btn); }


/* ==========================================================================
   (g) Formulare (.field auf 7 Seiten, .fld termin, .consent, Composer, Newsletter) → .feld-Optik
   Fokus: Ring als box-shadow, Outline transparent — kontert input:focus-visible aus shopnav.css
   (dort (0,1,1) !important; hier (0,2,1) !important).
   ========================================================================== */
.field label, .fld label, .feld > label, .wl-nl-feld label { font-size: .85rem; font-weight: 600; color: var(--wl-tinte); }
.field label .opt { color: var(--wl-hilfstext); font-weight: 500; }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.field select, .field textarea,
.fld input:not([type="checkbox"]):not([type="radio"]), .fld select, .fld textarea,
.form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]), .form select, .form textarea,
.formcard input:not([type="checkbox"]):not([type="radio"]), .formcard select, .formcard textarea,
.composer input, .topbar .search, .wl-nl-feld input, .search input {
  width: 100%;
  min-height: 3rem;
  padding-block: .7rem;
  padding-inline: 1rem;                   /* Seiten-Varianten mit Icon/Schalter überschreiben unten gezielt (Befund 4) */
  border: 1px solid var(--wl-ui-rand);
  border-radius: var(--wl-radius-ui);
  background: var(--wl-weiss);
  color: var(--wl-tinte);
  font-family: var(--wl-schrift-body);
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--wl-mittel) var(--wl-weich), box-shadow var(--wl-mittel) var(--wl-weich);
}
.field textarea, .form textarea, .formcard textarea { min-height: 8rem; resize: vertical; }
/* Felder mit Icon links / Schalter rechts (login, agentur-login .input.has-ic/.has-toggle): die Seitenregel (0,2,1)
   verlor gegen den Alias (0,5,1) → Icon lag über dem ersten Buchstaben (Befund 4). Hier (0,7,1). Icon 18 px bei 14 px
   links → Text ab 2.75 rem; Schalter 40 px bei 6 px rechts → Text bis 3.25 rem. */
.field .input.has-ic input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { padding-left: 2.75rem; }
.field .input.has-toggle input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { padding-right: 3.25rem; }
.input.has-ic > svg.ic, .input.has-ic > .ic { left: .9rem; color: var(--wl-hilfstext); }
.input .toggle { color: var(--wl-hilfstext); }
.input .toggle:hover { color: var(--wl-blau-hover); }
.field input::placeholder, .field textarea::placeholder, .fld input::placeholder, .form input::placeholder, .formcard textarea::placeholder { color: var(--wl-hilfstext); opacity: 1; }
.field input:hover:not(:focus), .field textarea:hover:not(:focus), .fld input:hover:not(:focus), .form input:hover:not(:focus) { border-color: var(--wl-sekundaer); }
.field input:focus, .field textarea:focus, .field select:focus, .fld input:focus, .form input:focus, .form textarea:focus, .formcard input:focus, .formcard textarea:focus, .composer input:focus, .wl-nl-feld input:focus {
  border-color: var(--wl-blau);
  background: var(--wl-weiss);
  box-shadow: var(--wl-fokus);
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible, .fld input:focus-visible,
.form input:focus-visible, .form textarea:focus-visible, .formcard input:focus-visible, .formcard textarea:focus-visible,
.composer input:focus-visible, .wl-nl-feld input:focus-visible, .finder select:focus-visible {
  outline: 2px solid transparent !important;
  outline-offset: 0 !important;
}
.consent { color: var(--wl-sekundaer); }
.consent input, .field input[type="checkbox"], .field input[type="radio"] { accent-color: var(--wl-blau); }
.consent a, .field a, .fld a { color: var(--wl-blau); font-weight: 600; }
.consent a:hover { color: var(--wl-blau-hover); }
/* Auswahlkacheln und Chips im Terminassistenten */
.ch, .opt, .slot, .calarrow, .drop, .filelist li, .recap {
  border-color: var(--wl-linie);
  background: var(--wl-weiss);
  color: var(--wl-tinte);
}
.ch { border-radius: var(--wl-radius-pille); }
.ch:hover, .opt:hover, .slot:hover, .calarrow:hover:not(:disabled), .drop:hover, .drop.over { border-color: var(--wl-blau-rand); color: var(--wl-tinte); background: var(--wl-weiss); }
.ch.sel, .opt.sel { background: var(--wl-blau-50); border-color: var(--wl-blau); color: var(--wl-blau-hover); }
.slot.sel { background: var(--wl-gruen); border-color: var(--wl-gruen); color: var(--wl-gruen-tinte); }
.drop svg, .calarrow:hover:not(:disabled) { color: var(--wl-blau); }
/* Meldungen */
.okmsg { background: var(--wl-erfolg-flaeche); border: 1px solid rgba(18, 164, 99, .3); color: var(--wl-erfolg-text); border-radius: var(--wl-radius-ui); }
.errmsg { color: var(--wl-fehler-text); }
#wlMelde { border-radius: var(--wl-radius-ui); }


/* ==========================================================================
   (h) Tabellen (.tbl/.tblwrap Blog, .tablewrap/.ptable Portal, .pricetable) → .tabelle-Optik
   ========================================================================== */
.tblwrap, .tablewrap, .pricetable { border: 1px solid var(--wl-linie); border-radius: var(--wl-radius-ui); background: var(--wl-weiss); overflow-x: auto; }
.tbl, .ptable, .body table, .article table { color: var(--wl-tinte); font-size: .92rem; }
.tbl th, .ptable th, .body table th, .article table th, .pricetable .head .cell {
  background: var(--wl-flaeche-2);
  font-family: var(--wl-schrift-body);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wl-sekundaer);
  border-bottom: 1px solid var(--wl-linie);
}
.tbl td, .ptable td, .body table td, .article table td { border-bottom: 1px solid var(--wl-linie); color: var(--wl-sekundaer); vertical-align: top; }
.tbl tbody tr:hover td, .ptable tbody tr:hover td { background: var(--wl-flaeche-2); }
.tbl tbody tr:last-child td, .ptable tbody tr:last-child td { border-bottom: 0; }
.pricetable .row.head { background: var(--wl-flaeche-2); }
.pricetable .cell strong { color: var(--wl-tinte); }
.pricetable .cell .price { color: var(--wl-gruen-text); }


/* ==========================================================================
   (i) Artikel und Recht — .art, .article (300), .body (167), .legal (4)
   Artikel-H2 = .display-sm, Fließtext 1.0625 rem / 1.7, Links Blau, Kästen als Karten,
   Kurzantwort/Callout mit Blau-Kante, Brotkrumen, Meta, Zurück-Links.
   ========================================================================== */
.body, .art, .article, .legal { color: var(--wl-tinte); }
.body p, .art p, .article > p, .legal p, .legal li, .steps li, .faq details p, .fazit p, .takeaway p, .kurz p, .callout p, .note, .box p {
  font-size: var(--wl-text-artikel);
  line-height: 1.7;
  color: var(--wl-sekundaer);
}
.body .intro { color: var(--wl-sekundaer); }
.kurz p, .callout p { color: var(--wl-tinte); font-size: 1.125rem; line-height: 1.62; }
.body h2, .art h2, .article h2, .legal h2, .article > h2, .fazit h2, .takeaway h2, .kurz h2, .box h2 {
  font-family: var(--wl-schrift-display);
  font-size: var(--wl-display-sm);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--wl-tinte);
  text-wrap: balance;
}
.body h2, .art h2, .article > h2, .legal h2 { margin: 2.75rem 0 .875rem; }
.body h3, .art h3, .article > h3, .legal h3 { font-family: var(--wl-schrift-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.015em; color: var(--wl-tinte); margin: 1.75rem 0 .5rem; }
.body a, .art a, .article > p a, .legal a, .legal address a, .fazit a, .takeaway a, .kurz a, .callout a, .note a, .box a, .toc a {
  color: var(--wl-blau);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  text-decoration-color: rgba(37, 99, 235, .35);
  transition: color var(--wl-mittel) var(--wl-weich), text-decoration-color var(--wl-mittel) var(--wl-weich);
}
.body a:hover, .art a:hover, .legal a:hover, .toc a:hover { color: var(--wl-blau-hover); text-decoration-color: currentColor; }
.body strong, .art strong, .legal strong, p b, li b, .body b { color: var(--wl-tinte); }
/* Aufzählungen: Punkt in Blau mit Schleier statt Grün mit Halo */
.body ul li::before { background: var(--wl-blau); box-shadow: 0 0 0 4px var(--wl-blau-schleier); }
ul.liste { color: var(--wl-sekundaer); }
/* Zitate */
.body blockquote, .art blockquote, .article blockquote {
  margin: 1.75rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--wl-blau);
  font-family: var(--wl-schrift-display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--wl-tinte);
}
.body blockquote p, .art blockquote p { color: inherit; font-size: inherit; line-height: inherit; margin: 0; }
/* Code */
.body code, .art code, .code { font-family: var(--wl-schrift-mono); font-size: .92em; background: var(--wl-flaeche-2); border: 1px solid var(--wl-linie); border-radius: var(--wl-radius-xs); padding: .1em .35em; color: var(--wl-tinte); }
.body pre, .art pre, pre.code { background: var(--wl-horizont); color: var(--wl-text-dunkel); border: 0; border-radius: var(--wl-radius-ui); padding: 1rem 1.25rem; overflow-x: auto; }
.body pre code, pre.code code { background: transparent; border: 0; padding: 0; color: inherit; }
/* Kästen als Karten (statisch, kein Hover-Lift): Fazit, Takeaway, Box, Inhaltsverzeichnis, Hinweis, Beispiel */
.fazit, .takeaway, .box, .toc, .note, .beispiel, .example, .warn, .steps li {
  border: 1px solid var(--wl-linie);
  border-radius: var(--wl-radius-card);
  background-color: var(--wl-weiss);
  background-image: linear-gradient(160deg, var(--wl-weiss) 0%, var(--wl-weiss) 55%, var(--wl-flaeche-2) 100%);
  box-shadow: var(--wl-glanz), var(--wl-schatten-sm);
  color: var(--wl-tinte);
}
.steps li { border-radius: var(--wl-radius-ui); }
.note { border-radius: var(--wl-radius-ui); color: var(--wl-sekundaer); font-size: 1rem; }
.note svg { color: var(--wl-blau); }
.legal .note, .caveat, .warn { background: var(--wl-warnung-flaeche); border-color: rgba(217, 119, 6, .3); color: var(--wl-warnung-text); box-shadow: none; }
.legal .note svg, .caveat svg { color: var(--wl-warnung); }
.caveat p, .legal .note p { color: var(--wl-warnung-text); }
/* Kurzantwort (93 Lexikon) und Callout (69 Blog): Blau-50-Fläche mit Blau-Kante — der zitierfähige Absatz */
.kurz, .callout {
  border: 1px solid var(--wl-blau-100);
  border-left: 4px solid var(--wl-blau);
  border-radius: var(--wl-radius-ui);
  background: var(--wl-blau-50);
  box-shadow: none;
}
.fazit h2, .takeaway h2 { margin-top: 0; }
.toc b { color: var(--wl-sekundaer); letter-spacing: .08em; }
.toc ol { color: var(--wl-sekundaer); }
/* Brotkrumen, Meta, Zurück */
.crumbs { color: var(--wl-sekundaer); font-size: .8rem; font-weight: 500; }
.crumbs a { color: var(--wl-sekundaer); font-weight: 500; text-decoration: none; border-radius: var(--wl-radius-pille); padding: .2rem .4rem; margin: 0 -.4rem; transition: background-color var(--wl-mittel) var(--wl-weich), color var(--wl-mittel) var(--wl-weich); }
.crumbs a:hover { color: var(--wl-tinte); background: var(--wl-flaeche-2); text-decoration: none; }
.crumbs .sep { color: var(--wl-hilfstext); }
.crumbs .here { color: var(--wl-blau-hover); font-weight: 600; }
.meta { color: var(--wl-hilfstext); border-color: var(--wl-linie); }
.meta .sep { background: var(--wl-hilfstext); opacity: 1; }
.legal .updated { color: var(--wl-hilfstext); }
.backto, .backlink, .backtop, .crumb {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--wl-sekundaer);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--wl-mittel) var(--wl-weich), gap var(--wl-mittel) var(--wl-aus);
}
.backto:hover, .backlink:hover, .backtop:hover, .crumb:hover { color: var(--wl-blau-hover); text-decoration: none; gap: .65rem; }
.legal address { color: var(--wl-tinte); }
.legal address b { font-family: var(--wl-schrift-display); }
/* Standort-Artikel: Preis-Kacheln und Weiter-Karten */
.karte .preis { color: var(--wl-blau-hover); font-family: var(--wl-schrift-display); }
.weiter a { text-decoration: none; }
.weiter a:hover b { color: var(--wl-blau-hover); }


/* ==========================================================================
   (j) Sektionsrhythmus (M7) — 80 px, 112 px ab 1024 (Token --wl-sektion); Bänder wechseln
   Grund (Body) / Fläche 2 (.finder-sec, .prob-sec, .flow-sec …). Heroes und Bänder haben eigene Werte.
   Nur Innenabstände oben/unten — Seitenraster bleibt.
   ========================================================================== */
/* Nur Top-Level-Sektionen (Befund 2): die frühere Sammelregel section:not(…) traf auch innere Sektionen — faq
   section.grp (7 Gruppen → 200-px-Lücken), campus section.kgrp (weiße Karte mit 112 px Leerband), campus-Anleitungen
   .gsec, check .res-panel, portal-empfehlungen section.panel, branchenwelten .stage. Zensus über 408 Seiten: alle
   Sektionen außerhalb dieser vier Elternpfade sind Karten, Panels oder Untergruppen mit eigenem Maß. */
main > section:not(.hero):not(.cta):not(.rhero):not(.vhero):not(.seiten-hero):not(.sektion):not(.sektion-dunkel):not([class*="hero"]),
.app > section:not(.hero):not(.cta):not(.rhero):not(.vhero):not(.seiten-hero):not(.sektion):not(.sektion-dunkel):not([class*="hero"]),
body > section:not(.hero):not(.cta):not(.rhero):not(.vhero):not(.seiten-hero):not(.sektion):not(.sektion-dunkel):not([class*="hero"]),
.shell > .main > section:not(.hero):not(.cta):not(.rhero):not(.vhero):not(.seiten-hero):not(.sektion):not(.sektion-dunkel):not([class*="hero"]),
section.mod, section.section-pad {
  padding-top: var(--wl-sektion);
  padding-bottom: var(--wl-sektion);
}
/* Innere Gruppen: kein Rhythmus-Padding; FAQ-Gruppen halten Abstand über ihre Kategorie-Überschrift (.cat, Seite 40 px) —
   ab der zweiten Gruppe 56 px am Schreibtisch. (0,3,2) > .grp:first-of-type .cat (0,2,1). */
section.grp, section.kgrp { padding-top: 0; padding-bottom: 0; }
section.grp + section.grp > .cat { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
section.cta { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
/* Folgesektion nach dem Hero: halber Rhythmus (56 px ab 1024), damit Hero-Ende → Sektionsanfang bei ~120 px
   liegt (Maßstab 100–120; gemessen waren 176–209, Kritik-Runde 1, Befund 7). Die Rhythmus-Regel darüber hat
   durch ihre :not()-Kette (0,8,1) — .hero + section (0,1,1) verlor. Deshalb dieselbe Kette hier: (0,9,2). */
:is(.hero, .rhero, .vhero, section.intro) + section:not(.hero):not(.cta):not(.rhero):not(.vhero):not(.seiten-hero):not(.sektion):not(.sektion-dunkel):not([class*="hero"]):not(.grp):not(.kgrp) {
  padding-top: calc(var(--wl-sektion) * .5);
}
/* Lesemaß (Befund 10): klassenlose Absätze direkt im .wrap liefen 1.200 px breit (≈ 150 Zeichen; kontakt, checkout,
   vorlagen). ≤ 72ch, linksbündig (kein margin:auto — die Sektionen sind linksbündig). Zentrierte Schlusszeilen tragen
   style="text-align:center" (leistungen, seo, ki-suche); Heroes, CTA-Bänder (.vcta, .rcta, .ctaband) haben eigene Maße → ausgenommen. */
section:not(.rcta):not([class*="cta"]):not([class*="band"]):not([class*="hero"]):not(.intro) > .wrap > p:not([class]):not([style]) { max-width: 72ch; }
.finder-sec, .prob-sec, .flow-sec, .faq-sec.band, .stats-sec, section.grau, .rcta { border-color: var(--wl-linie); }
.finder-sec, .prob-sec, .flow-sec, .stats-sec, section.grau { background-color: var(--wl-flaeche-2); }
.article { padding-top: 1.5rem; }


/* ==========================================================================
   (k) Consent (M13) — Glas-Karte unten rechts, max. 380 px, Radius Card, Knöpfe nach Button-System.
   shopnav.js hängt seinen Stil zur Laufzeit hinter diese Datei; deshalb (0,2,0) via .wl-consent.wl-consent.
   Klassen, IDs, Reihenfolge und Logik (wl_consent → gtag) bleiben unverändert.
   ========================================================================== */
.wl-consent.wl-consent {
  left: auto;
  right: 1.25rem;
  bottom: 1.25rem;
  max-width: 380px;
  width: calc(100% - 2.5rem);
  margin: 0;
  padding: 1.25rem 1.25rem 1.125rem;
  border: 1px solid var(--wl-glas-rand);
  border-radius: var(--wl-radius-card);
  background: var(--wl-glas-scroll);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--wl-glanz), var(--wl-schatten-lg);
  color: var(--wl-tinte);
  font-family: var(--wl-schrift-body);
  transform: translateY(18px) scale(.98);
  transition: transform var(--wl-lang) var(--wl-aus), opacity var(--wl-mittel) var(--wl-weich);
}
.wl-consent.wl-consent.show { transform: none; }
.wl-consent.wl-consent b { font-family: var(--wl-schrift-display); font-size: 1rem; letter-spacing: -.01em; color: var(--wl-tinte); }
.wl-consent.wl-consent p { color: var(--wl-sekundaer); font-size: .85rem; line-height: 1.55; }
.wl-consent.wl-consent a { color: var(--wl-blau); font-weight: 600; text-decoration: underline; text-underline-offset: .16em; text-decoration-color: rgba(37, 99, 235, .35); }
.wl-consent.wl-consent a:hover { color: var(--wl-blau-hover); }
.wl-consent.wl-consent .wl-c-row { gap: .5rem; }
@media (max-width: 640px) {
  .wl-consent.wl-consent { left: .75rem; right: .75rem; bottom: .75rem; width: auto; max-width: none; padding: 1rem 1rem .875rem; }
}


/* ==========================================================================
   (l) Grün-Diät in shopnav.css (M4, M9): Leuchtbalken aus, Menükanten und Icon-Kacheln Blau,
   Menülinks Blau statt Grün, Footer-Kante neutral. Header-/Footer-Gesamtumbau folgt in shopnav.css
   (DESIGN §5) — diese Regeln sind dazu kompatibel und werden dort obsolet.
   ========================================================================== */
.snav-glowbar { display: none; }
.snav-menu { border-top: 1px solid var(--wl-linie); border-color: var(--wl-linie); border-radius: var(--wl-radius-card); box-shadow: var(--wl-schatten-lg); }
.snav-mi-ic { background: var(--wl-blau-50); border-color: transparent; color: var(--wl-blau); }
.snav-menu-grid a:hover .snav-mi-ic { background: var(--wl-gruen); border-color: var(--wl-gruen); color: var(--wl-gruen-tinte); }
.snav-menu-all { color: var(--wl-blau-hover); border-top-color: var(--wl-linie); }
.snav-menu-all:hover { background: var(--wl-blau-50); color: var(--wl-blau-hover); }
.snav-menu-col a:hover, .snav-menu-col a:focus-visible { background: var(--wl-flaeche-2); }
.snav-menu-col a:hover .snav-li-t { color: var(--wl-blau-hover); }
.snav-menu-col a:focus-visible { box-shadow: 0 0 0 2px var(--wl-blau) inset; }
.snav-li-d { color: var(--wl-hilfstext); }
.snav-phone svg { color: var(--wl-blau); }
/* Hauptnavigation: die Links tragen keine Klasse, a:not([class]) aus wl-design.css (0,1,1) färbte sie Brand-Blau
   (Linkliste, Kritik-Runde 1, Befund 5). Gleiche Spezifität, hier später → Sekundär-Tinte; aktiv/hover in Blau/Tinte. */
.snav-links > a, .snav-item > a { color: var(--wl-sekundaer); text-decoration: none; }
.snav-links > a:hover, .snav-item > a:hover { background: var(--wl-flaeche-2); color: var(--wl-tinte); }
.snav-links > a.cur, .snav-item > a.cur { background: var(--wl-blau-50); color: var(--wl-blau-hover); }
.snav-links > a:focus-visible, .snav-item > a:focus-visible { color: var(--wl-tinte); }
.snav-menu-grid a { color: var(--wl-sekundaer); }
.snav-menu-grid a:hover { color: var(--wl-tinte); }
.snav-menu-col a { color: var(--wl-tinte); }
/* App-Sidebar (portal.css .side a, ebenfalls klassenlos) — Vollpaket folgt im Familienpaket App (DESIGN §5).
   Aktiver Punkt Blau 50 / Blau 700, Icon Blau; Zählmarke am aktiven Punkt Blau/Weiß (Befund 9). */
.side a { color: var(--wl-sekundaer); }
.side a:hover { color: var(--wl-tinte); }
.side a.on { color: var(--wl-blau-hover); background: var(--wl-blau-50); }
.side a.on svg { color: var(--wl-blau); }
.side a.on .navcount { background: var(--wl-blau); color: var(--wl-weiss); }
.resume .l .k, .psec .lnk { color: var(--wl-blau-hover); }
.abr-reiter a[aria-current=page] { color: var(--wl-blau-hover); background: var(--wl-blau-50); border-color: var(--wl-blau-100); }
.abr-reiter a:focus-visible { outline-color: var(--wl-blau); }
/* Topbar (admin-/agentur-shell.js; Befund 5): Aktionsknopf schrumpft nicht mehr („Neuer Kund“), die H1 bricht am Wort;
   unter 640 px nur Icon — admin.css Z.16 wollte das per font-size:0 (0,1,0), verlor aber gegen den Größen-Alias (0,2,0). */
.topbar { min-width: 0; }
.topbar h1 { min-width: 0; overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }
.tb-btn.tb-btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .tb-btn.tb-btn { font-size: 0; gap: 0; padding: .625rem; min-width: 2.5rem; min-height: 2.5rem; }
  .tb-btn.tb-btn svg { width: 1rem; height: 1rem; }
}

/* Footer-Gruppen sind <details class="sfoot-grp"> (am Schreibtisch offen). Die FAQ-Regeln der Seiten
   (details[open] summary{background:var(--bg2)}, summary{padding:18px 20px}, summary::after{content:"+"},
   details{background:#fff;padding:0 16px}) treffen sie mit — weiße Kästen mit weißem Titel (Kritik-Runde 1,
   Befund 3). Hier mit (0,2,0)/(0,3,1) neutralisiert; die Mobil-Regeln aus shopnav.css (≤ 560, Z.469–485:
   Tippfläche, Chevron, border-top) bleiben unberührt — Abstände nur ab 561 px, Rahmen gar nicht. */
.sfoot .sfoot-grp { background: transparent; padding: 0; margin: 0; border-radius: 0; box-shadow: none; }
.sfoot .sfoot-grp > summary, .sfoot .sfoot-grp[open] > summary, .sfoot .sfoot-grp > summary:hover {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: var(--wl-weiss);
  font-family: var(--wl-schrift-body);
  font-size: inherit;
  transition: none;
}
.sfoot .sfoot-grp > summary h2.sfoot-h { color: var(--wl-weiss); margin-top: 0; }   /* Standort/Branche: h2{margin-top:38px} der Artikel-Typo traf den Gruppentitel */
@media (min-width: 561px) {
  .sfoot .sfoot-grp > summary { display: block; padding: 0; gap: 0; cursor: default; }
  .sfoot .sfoot-grp > summary::after, .sfoot .sfoot-grp[open] > summary::after, .sfoot .sfoot-grp > summary::before { content: none; }
}
.snav-toggle { border-color: var(--wl-linie); border-radius: var(--wl-radius-pille); }
.snav { border-bottom-color: var(--wl-linie); }
.sfoot::before { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(124, 184, 255, .45) 50%, transparent 100%); }
.sfoot-nap svg { color: var(--wl-licht); }
.sfoot a:not([class]), .sfoot-nap a, .sfoot-legal a, .sfoot-bot a { color: var(--wl-text-dunkel); }
.sfoot a:not([class]):hover, .sfoot-nap a:hover, .sfoot-legal a:hover, .sfoot-bot a:hover { color: var(--wl-weiss); }
.sfoot-btn-l:hover { border-color: rgba(255, 255, 255, .4); }
/* Reveal-Ziele aus shopnav.js auf die Design-Kurve (Ergänzung zu wl-design.css (k)) */
html.wl-anim .wl-rv { transition-timing-function: var(--wl-reveal), var(--wl-reveal); }


/* ==========================================================================
   (m) Mobile Typografie und Abstände — kontert shopnav.css Z.230–259 / 279–307
   Gleiche Selektorliste, gleiche Spezifität, !important; diese Datei lädt später.
   Display-Skala: h1 ≥ 2,35 rem (wl-design.css setzt h1/.hero h1), h2 .display-sm/-md, h3 1,125 rem.
   ========================================================================== */
@media (max-width: 640px) {
  .rhero h1, .vhero h1, .head h1, .article h1, .legal h1, section.intro h1 { font-size: clamp(2.35rem, 7.5vw, 3rem) !important; line-height: 1.08 !important; }
  h2:not(.sfoot-h), .shead h2 { font-size: var(--wl-display-sm) !important; line-height: 1.16 !important; }
  .shead h2, .sh h2, section > .wrap > h2, .ctaband h2, .article > div.cta h2, section.cta h2, .portalband h2, .rcta h2 { font-size: var(--wl-display-md) !important; line-height: 1.1 !important; }
  h3 { font-size: 1.125rem !important; line-height: 1.3 !important; }
  .sub, .lead, .hero .sub, .hero p, .shead p, .rhero p, .vhero p, section.intro p { font-size: 1.0625rem !important; line-height: 1.6 !important; }
  .article p, .art p, .body p { font-size: 1.0625rem !important; line-height: 1.68 !important; }
  .card p, .lcard p, .path p, .plan p, p.desc, div.desc, p.muted, p.fsub { font-size: .95rem !important; line-height: 1.56 !important; }
  .small, .hint, .faint, .meta, figcaption { font-size: .86rem !important; }

  /* Abstände: Sektionen 56 px statt 32, Heroes 40/36, Bänder 40/20 */
  /* Nur Top-Level (Befund 2): innere Sektionen (.grp, .kgrp, .gsec, .res-panel …) behalten das Seitenmaß bzw. die
     32 px aus shopnav.css, die die Seiten selbst schon ausgleichen (faq.html Z.167). */
  main > section, .app > section, body > section, .shell > .main > section, section.mod, .mod { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  section.kgrp { padding-top: 0 !important; padding-bottom: 0 !important; }
  .hero, section.hero, .intro, .rhero, .vhero { padding-top: 2.5rem !important; padding-bottom: 2.25rem !important; }
  :is(.hero, .rhero, .vhero, section.intro) + section:not(.hero):not(.cta):not(.rhero):not(.vhero):not(.seiten-hero):not(.sektion):not(.sektion-dunkel):not([class*="hero"]) { padding-top: 2.5rem !important; }
  p.intro { padding-top: 0 !important; padding-bottom: 0 !important; }   /* Blog-Einleitung ist kein Hero (shopnav.css trifft .intro pauschal) */
  .shead, .sh { margin-bottom: 1.5rem !important; }
  .ctaband, .article > div.cta, section.cta { padding: 2.5rem 1.25rem !important; }
  .ctaband { margin: 1.5rem 0 !important; }
  .card, .lcard, .path, .card2, .plan, .flowstep, .stat-t, .toolcard { padding: 1.25rem 1.125rem !important; }
  .note, .fazit, .caveat { padding: 1.25rem 1.125rem !important; }
  .wl-consent.wl-consent { left: .75rem !important; right: .75rem !important; bottom: .75rem !important; }
}


/* ==========================================================================
   (n) Reduzierte Bewegung und html.wl-motion-aus (#sfootMotion)
   Kein Lichtwisch, kein Lift, keine Orbs; shopnav.css setzt für .card … bereits transition:none !important.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn.btn::after, .snav-cta::after, .sfoot-btn-p::after, .cta .knopf::after, a.cta::after, button.cta::after, .ghost::after,
  .snav-login::after, .dbtn::after, .finder .go::after, .wl-consent.wl-consent .wl-c-acc::after, .wl-consent.wl-consent .wl-c-sec::after,
  button[type="submit"]::after { display: none; }
  .btn.btn, .snav-cta, .snav-login, .sfoot-btn-p, .sfoot-btn-l, .cta .knopf, a.cta, button.cta, .ghost, .dbtn, .finder .go,
  .weiter a, .chan, .formcard, .rl, .pill, .kachel, .flowstep, .step, .faq details, .faqitem, .acc > details,
  .wl-consent.wl-consent { transition: none; }
  .btn.btn:hover, .snav-cta:hover, .sfoot-btn-p:hover, .cta .knopf:hover, a.cta:hover, button.cta:hover, .ghost:hover, .dbtn:hover,
  .weiter a:hover, .chan:hover, .rl:hover, .pill:hover, .kachel:hover, .flowstep:hover, .step:hover, .panel:hover, .ref:hover, .tpl:hover { transform: none; }
  .hero::after, .rhero::after, .vhero::after, section.intro::after { animation: none; }
  .card::after, .weiter a::after, .chan::after, .rl::after { transition: none; }
}
html.wl-motion-aus .btn.btn::after, html.wl-motion-aus .snav-cta::after, html.wl-motion-aus .sfoot-btn-p::after, html.wl-motion-aus .cta .knopf::after,
html.wl-motion-aus a.cta::after, html.wl-motion-aus button.cta::after, html.wl-motion-aus .ghost::after, html.wl-motion-aus .snav-login::after,
html.wl-motion-aus .finder .go::after, html.wl-motion-aus .wl-consent.wl-consent .wl-c-acc::after { display: none; }
html.wl-motion-aus .btn.btn, html.wl-motion-aus .snav-cta, html.wl-motion-aus .sfoot-btn-p, html.wl-motion-aus .cta .knopf,
html.wl-motion-aus a.cta, html.wl-motion-aus .ghost, html.wl-motion-aus .card, html.wl-motion-aus .weiter a, html.wl-motion-aus .chan,
html.wl-motion-aus .rl, html.wl-motion-aus .panel, html.wl-motion-aus .ref, html.wl-motion-aus .tpl, html.wl-motion-aus .path,
html.wl-motion-aus .faq details, html.wl-motion-aus .faqitem { transition: none; }
html.wl-motion-aus .btn.btn:hover, html.wl-motion-aus .snav-cta:hover, html.wl-motion-aus .sfoot-btn-p:hover, html.wl-motion-aus .cta .knopf:hover,
html.wl-motion-aus a.cta:hover, html.wl-motion-aus .ghost:hover, html.wl-motion-aus .card:hover, html.wl-motion-aus .weiter a:hover,
html.wl-motion-aus .chan:hover, html.wl-motion-aus .rl:hover, html.wl-motion-aus .panel:hover, html.wl-motion-aus .ref:hover,
html.wl-motion-aus .tpl:hover, html.wl-motion-aus .path:hover, html.wl-motion-aus .kachel:hover, html.wl-motion-aus .pill:hover { transform: none; }
html.wl-motion-aus .hero::after, html.wl-motion-aus .rhero::after, html.wl-motion-aus .vhero::after, html.wl-motion-aus section.intro::after { animation: none; }
/* === Buttonschrift erzwingen === gilt vor jeder Seitenvariable === */

/* Hauptknöpfe: weiße Schrift auf der blauen Fläche. Mit !important, weil die Branchenseiten
   ihre eigenen Farbvariablen im Seiten-CSS setzen und sonst gewinnen. */
body .btn.btn-primaer,
body .btn.btn-p,
body a.cta:not(.ghost):not(.btn-l):not(.btn-s),
body button.cta:not(.ghost):not(.btn-l):not(.btn-s),
body .finder .go,
body .btn-submit,
body .snav-cta,
body .sfoot-btn-p,
body .wl-c-acc,
body .hero .cta,
body .ctaband .cta,
body .formcard .cta {
  color: var(--wl-aktion-text) !important;
  -webkit-text-fill-color: var(--wl-aktion-text);
}
body .btn.btn-primaer .wl-ikon, body a.cta .wl-ikon, body .finder .go .wl-ikon { color: currentColor; }

/* Sekundäre Knöpfe behalten die dunkle Schrift auf heller Fläche. */
body .btn.btn-hell, body .btn.btn-l, body .btn.btn-s, body .ghost {
  color: var(--wl-blau-hover) !important;
  -webkit-text-fill-color: var(--wl-blau-hover);
}
body .btn.btn-glas { color: var(--wl-weiss) !important; -webkit-text-fill-color: var(--wl-weiss); }

/* === Icon-Kacheln sauber ausgerichtet === (Auftraggeber: „Icons sitzen nicht richtig")
   Feste Groesse, Inhalt exakt mittig, Symbol nicht verzerrt — auch wenn eine Seite
   die Kachel in eine Flex- oder Grid-Zeile setzt. */
body .ikon-kachel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  line-height: 0;
  border-radius: .75rem;
  overflow: hidden;
}
body .ikon-kachel > svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  flex: none;
  margin: 0;
}
body .ikon-kachel > svg * { vector-effect: non-scaling-stroke; }
body .karte .ikon-kachel, body .karte-dunkel .ikon-kachel { align-self: flex-start; }

/* === Hero-Pille mit Icon === Icon steht neben dem Schreibtext, nicht darin. */
body .hpill-anim { display: inline-flex; align-items: center; gap: .1rem; }
body .hpill-anim > .wl-ikon { margin-right: .35em; }
/* === Zweite Wahl und Lesen-Link === gemessen, nicht geschätzt === */

/* Zweite Wahl: helle Fläche, blauer Rand, blaue Schrift (7,3:1 auf Weiß).
   Beim Hover kehrt sie sich um — dieselbe Geste wie beim Hauptknopf, nur ruhiger. */
body .ghost, body a.cta.ghost, body button.cta.ghost {
  color: var(--wl-blau-hover) !important;
  -webkit-text-fill-color: var(--wl-blau-hover);
  background-color: var(--wl-weiss);
  background-image: none;
  border: 1.5px solid var(--wl-blau-rand, #B9CEF6);
  box-shadow: var(--wl-schatten-sm);
}
body .ghost:hover, body a.cta.ghost:hover, body button.cta.ghost:hover {
  color: var(--wl-aktion-text) !important;
  -webkit-text-fill-color: var(--wl-aktion-text);
  background-image: var(--wl-verlauf-btn);
  border-color: transparent;
  box-shadow: var(--wl-schatten-blau, var(--wl-schatten-md));
}
body .ghost::after, body a.cta.ghost::after { display: none; }
/* Auch das Zeichen im Sekundärknopf folgt der Schriftfarbe, sonst bleibt es weiß auf Weiß. */
body .ghost svg, body a.cta.ghost svg { color: currentColor; stroke: currentColor; }

/* Zweite Wahl auf farbiger oder dunkler Fläche: heller Umriss statt dunkler Schrift.
   Die Regeln darüber gelten für den hellen Grund, auf dem diese Knöpfe meistens stehen. Im
   Schlussaufruf steht derselbe Knopf aber auf der blauen Box — dort ergab die blaue Schrift auf
   blauem Grund gemessene 1:1 auf 164 Seiten, der Knopf war praktisch unsichtbar. Auf solchen
   Flächen trägt er Weiß und einen weißen Umriss; beim Hover füllt sich die Fläche. */
body .cta .btn-l, body .cta .btn-s, body .cta .ghost,
body .ctaband .btn-l, body .ctaband .btn-s, body .ctaband .ghost,
body .schlussaufruf .btn-l, body .schlussaufruf .btn-s, body .schlussaufruf .ghost,
body .sektion-dunkel .btn-l, body .sektion-dunkel .btn-s, body .sektion-dunkel .ghost,
body .karte-dunkel .btn-l, body .karte-dunkel .btn-s, body .karte-dunkel .ghost,
body .ist-dunkel .btn-l, body .ist-dunkel .btn-s, body .ist-dunkel .ghost,
body .portalband .btn-l, body .verlauf-blau .btn-l, body .verlauf-navy .btn-l {
  color: var(--wl-weiss) !important;
  -webkit-text-fill-color: var(--wl-weiss);
  background-color: rgba(255, 255, 255, .12);
  background-image: none;
  border: 1.5px solid rgba(255, 255, 255, .42);
  box-shadow: none;
}
body .cta .btn-l:hover, body .ctaband .btn-l:hover, body .schlussaufruf .btn-l:hover,
body .sektion-dunkel .btn-l:hover, body .karte-dunkel .btn-l:hover, body .ist-dunkel .btn-l:hover,
body .cta .ghost:hover, body .ctaband .ghost:hover, body .schlussaufruf .ghost:hover,
body .sektion-dunkel .ghost:hover, body .karte-dunkel .ghost:hover, body .ist-dunkel .ghost:hover {
  background-color: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .68);
  color: var(--wl-weiss) !important;
  -webkit-text-fill-color: var(--wl-weiss);
}

/* Klassenlose Links auf dunklem Grund: das Aktionsblau ist dort zu dunkel (gemessen 1,69:1
   gegen #0B2545). Auf Dunkel gilt das helle Blau. */
body .sfoot a:not([class]), body .sektion-dunkel a:not([class]),
body .karte-dunkel a:not([class]), body .ist-dunkel a:not([class]),
body .ctaband a:not([class]), body .schlussaufruf a:not([class]) {
  color: var(--wl-licht);
  -webkit-text-fill-color: var(--wl-licht);
}
body .sfoot a:not([class]):hover, body .sektion-dunkel a:not([class]):hover,
body .ctaband a:not([class]):hover { color: var(--wl-weiss); -webkit-text-fill-color: var(--wl-weiss); }

/* „Lesen →" in den Artikelkarten ist ein Textlink, kein Knopf. */
body .karte .go, body .art .go, body .art-body .go, body .meta .go, body span.go {
  color: var(--wl-blau) !important;
  -webkit-text-fill-color: var(--wl-blau);
  background: none;
  box-shadow: none;
  font-weight: 600;
  transition: color var(--wl-schnell) var(--wl-weich);
}
body .karte:hover .go, body .art:hover .go, body a:hover > .art-body .go {
  color: var(--wl-blau-hover) !important;
  -webkit-text-fill-color: var(--wl-blau-hover);
}
/* Auszeichnungszeile auf farbiger Fläche: Weiß statt Hellblau.
   Hellblau auf dem Aktionsblau ergab 3,75:1 — zu wenig für kleine Versalien. */
body .ctaband .eyebrow, body .schlussaufruf .eyebrow,
body .karte-dunkel .eyebrow, body .verlauf-blau .eyebrow {
  color: rgba(255, 255, 255, .94);
}
body .ctaband .eyebrow .dot, body .schlussaufruf .eyebrow .dot { background: var(--wl-licht); }

/* Icons in ausgewählten Zuständen folgen der Schriftfarbe.
   Die Seiten färben das Zeichen im aktiven Chip weiß, weil dessen Fläche früher kräftig blau
   war. Die Schicht setzt sie auf helles Blau — das Zeichen blieb weiß und verschwand
   (gemessen: rgb(255,255,255) auf rgb(232,240,253), 1,08:1). Statt jede Stelle einzeln zu
   korrigieren, folgt das Zeichen jetzt überall der Schrift, die daneben steht. */
body .ch.sel svg, body .opt.sel svg,
body .chip[aria-pressed="true"] svg, body .achip svg,
body .cl.on svg, body .cl[aria-pressed="true"] svg,
body .fchip.on svg, body .fchip[aria-pressed="true"] svg {
  color: currentColor;
  stroke: currentColor;
}

/* Auf dunklen Flächen bleibt der Link hell. */
body .sektion-dunkel .go, body .karte-dunkel .go, body .ist-dunkel .go {
  color: var(--wl-licht) !important;
  -webkit-text-fill-color: var(--wl-licht);
}
