/**
 * TEMPORÄR — Farbvarianten-Vorschau für Kundenentscheid (2026-08).
 * Rückbau: diese Datei + assets/js/theme-switcher.js löschen und die
 * Sandbox-Datei wp-content/novamira-sandbox/hauswerk-farbvarianten.php entfernen.
 * Spec: Projektablage 00_Briefings/05_Spec-Farbvarianten-Umschalter.md
 *
 * Schaltet ACSS-Farbtokens per html[data-hw-variant="…"] um.
 * "aktuell" hat bewusst KEINEN Block (= Original-Palette).
 *
 * Wichtig: ACSS generiert auch die -trans-Stufen als fertige rgba-Literale
 * (z. B. --shade-trans-80 = Fließtextfarbe) — die müssen je Variante
 * explizit mit überschrieben werden, H/S/L-Fragmente reichen nicht.
 */

/* ================= Variante 1: Beige – Dunkelgrau ==================
 * Buttons Hellgrün, kein Neongrün, kein Schwarz. secondary (Neon) ->
 * Hellgrün wie bisher; zusätzlich accent/tertiary/action/shade
 * (bisher Dunkelgrün) -> warme Graphit-Grau-Skala, dunkler als vorher
 * aber nicht Schwarz (Abgrenzung zu Variante 2). */
html[data-hw-variant="beige-gruen"] {
  --secondary-h: 88; --secondary-s: 46.4%; --secondary-l: 46.1%;
  --secondary: #7AAC3F;
  --secondary-hover: #8BBF50;
  --secondary-ultra-light: #F3F8EC;
  --secondary-light: #DAEAC7;
  --secondary-semi-light: #A9CF7C;
  --secondary-semi-dark: #5C8330;
  --secondary-dark: #425D22;
  --secondary-ultra-dark: #1A250E;
  --secondary-trans-10: rgba(122, 172, 63, 0.1);
  --secondary-trans-20: rgba(122, 172, 63, 0.2);
  --secondary-trans-30: rgba(122, 172, 63, 0.3);
  --secondary-trans-40: rgba(122, 172, 63, 0.4);
  --secondary-trans-50: rgba(122, 172, 63, 0.5);
  --secondary-trans-60: rgba(122, 172, 63, 0.6);
  --secondary-trans-70: rgba(122, 172, 63, 0.7);
  --secondary-trans-80: rgba(122, 172, 63, 0.8);
  --secondary-trans-90: rgba(122, 172, 63, 0.9);

  --accent-h: 40; --accent-s: 8%; --accent-l: 18%;
  --accent: #31302A;
  --accent-hover: #4D4942;
  --accent-ultra-light: #F3F3F1;
  --accent-light: #DCDAD6;
  --accent-semi-light: #ADA89F;
  --accent-semi-dark: #605C52;
  --accent-dark: #45423A;
  --accent-ultra-dark: #1B1A17;

  --tertiary-h: 40; --tertiary-s: 8%; --tertiary-l: 28%;
  --tertiary: #4D4942;
  --tertiary-hover: #68635A;
  --tertiary-ultra-light: #F3F3F1;
  --tertiary-light: #DCDAD6;
  --tertiary-semi-light: #ADA89F;
  --tertiary-semi-dark: #605C52;
  --tertiary-dark: #45423A;
  --tertiary-ultra-dark: #1B1A17;

  --action-h: 40; --action-s: 8%; --action-l: 28%;
  --action: #4D4942;
  --action-hover: #68635A;
  --action-ultra-light: #F3F3F1;
  --action-light: #DCDAD6;
  --action-semi-light: #ADA89F;
  --action-semi-dark: #605C52;
  --action-dark: #45423A;
  --action-ultra-dark: #1B1A17;

  --shade-h: 40; --shade-s: 8%; --shade-l: 14%;
  --shade: #272521;
  --shade-hover: #37342F;
  --shade-ultra-light: #F3F3F1;
  --shade-light: #DCDAD6;
  --shade-semi-light: #ADA89F;
  --shade-semi-dark: #605C52;
  --shade-dark: #45423A;
  --shade-ultra-dark: #1B1A17;
  --shade-trans-10: rgba(39, 37, 33, 0.1);
  --shade-trans-20: rgba(39, 37, 33, 0.2);
  --shade-trans-30: rgba(39, 37, 33, 0.3);
  --shade-trans-40: rgba(39, 37, 33, 0.4);
  --shade-trans-50: rgba(39, 37, 33, 0.5);
  --shade-trans-60: rgba(39, 37, 33, 0.6);
  --shade-trans-70: rgba(39, 37, 33, 0.7);
  --shade-trans-80: rgba(39, 37, 33, 0.8);
  --shade-trans-90: rgba(39, 37, 33, 0.9);
}

/* ============ Variante 1 Hintergrund-Vertiefung (wie V2-Feinschliff) ============
 * Ex-Weiß-Flächen (Hero-Karte, weiße Sektionen, Formular-Karte, Header,
 * Submenü, Mobile-Menü, body) -> altes base-Beige #F5F3EE. base selbst
 * eine Stufe dunkler -> #EDE7DA. bg-sand-Klasse (#E3DDCF) bleibt dritte,
 * dunkelste Stufe unverändert. Macht den Seiten-Hintergrund insgesamt
 * dunkler, passend zu den Graphit-Grau-Flächen oben. */
html[data-hw-variant="beige-gruen"] {
  --white-h: 43; --white-s: 26%; --white-l: 94.7%;
  --white: #F5F3EE;
  --white-trans-10: rgba(245, 243, 238, 0.1);
  --white-trans-20: rgba(245, 243, 238, 0.2);
  --white-trans-30: rgba(245, 243, 238, 0.3);
  --white-trans-40: rgba(245, 243, 238, 0.4);
  --white-trans-50: rgba(245, 243, 238, 0.5);
  --white-trans-60: rgba(245, 243, 238, 0.6);
  --white-trans-70: rgba(245, 243, 238, 0.7);
  --white-trans-80: rgba(245, 243, 238, 0.8);
  --white-trans-90: rgba(245, 243, 238, 0.9);

  --base-h: 43; --base-s: 28%; --base-l: 89%;
  --base: #EDE7DA;
  --base-hover: #F0EBE0;
}
html[data-hw-variant="beige-gruen"] body,
html[data-hw-variant="beige-gruen"] body :is(.brxe-section.hw-hd, .sub-menu, .bricks-mobile-menu-wrapper) {
  background-color: var(--white);
}
/* ================= Variante 2: Beige – Schwarz ==================
 * Buttons Hellgrün, kein Neongrün, kein Dunkelgrün.
 * Grün-Flächen/-Texte (accent, tertiary, action, shade) -> Schwarz-Skala.
 * base bleibt Beige, primary (Buttons) bleibt Hellgrün. */
html[data-hw-variant^="beige-schwarz"] {
  --secondary-h: 88; --secondary-s: 46.4%; --secondary-l: 46.1%;
  --secondary: #7AAC3F;
  --secondary-hover: #8BBF50;
  --secondary-ultra-light: #F3F8EC;
  --secondary-light: #DAEAC7;
  --secondary-semi-light: #A9CF7C;
  --secondary-semi-dark: #5C8330;
  --secondary-dark: #425D22;
  --secondary-ultra-dark: #1A250E;
  --secondary-trans-10: rgba(122, 172, 63, 0.1);
  --secondary-trans-20: rgba(122, 172, 63, 0.2);
  --secondary-trans-30: rgba(122, 172, 63, 0.3);
  --secondary-trans-40: rgba(122, 172, 63, 0.4);
  --secondary-trans-50: rgba(122, 172, 63, 0.5);
  --secondary-trans-60: rgba(122, 172, 63, 0.6);
  --secondary-trans-70: rgba(122, 172, 63, 0.7);
  --secondary-trans-80: rgba(122, 172, 63, 0.8);
  --secondary-trans-90: rgba(122, 172, 63, 0.9);

  --accent-h: 0; --accent-s: 0%; --accent-l: 8%;
  --accent: #141414;
  --accent-hover: #171717;
  --accent-ultra-light: #F2F2F2;
  --accent-light: #D9D9D9;
  --accent-semi-light: #A6A6A6;
  --accent-semi-dark: #595959;
  --accent-dark: #404040;
  --accent-ultra-dark: #0D0D0D;

  --tertiary-h: 0; --tertiary-s: 0%; --tertiary-l: 10%;
  --tertiary: #1A1A1A;
  --tertiary-hover: #1F1F1F;
  --tertiary-ultra-light: #F2F2F2;
  --tertiary-light: #D9D9D9;
  --tertiary-semi-light: #A6A6A6;
  --tertiary-semi-dark: #595959;
  --tertiary-dark: #404040;
  --tertiary-ultra-dark: #0D0D0D;

  --action-h: 0; --action-s: 0%; --action-l: 10%;
  --action: #1A1A1A;
  --action-hover: #1F1F1F;
  --action-ultra-light: #F2F2F2;
  --action-light: #D9D9D9;
  --action-semi-light: #A6A6A6;
  --action-semi-dark: #595959;
  --action-dark: #404040;
  --action-ultra-dark: #0D0D0D;

  --shade-h: 0; --shade-s: 0%; --shade-l: 9%;
  --shade: #161616;
  --shade-hover: #1A1A1A;
  --shade-ultra-light: #F2F2F2;
  --shade-light: #D9D9D9;
  --shade-semi-light: #A6A6A6;
  --shade-semi-dark: #595959;
  --shade-dark: #404040;
  --shade-ultra-dark: #0D0D0D;
  --shade-trans-10: rgba(22, 22, 22, 0.1);
  --shade-trans-20: rgba(22, 22, 22, 0.2);
  --shade-trans-30: rgba(22, 22, 22, 0.3);
  --shade-trans-40: rgba(22, 22, 22, 0.4);
  --shade-trans-50: rgba(22, 22, 22, 0.5);
  --shade-trans-60: rgba(22, 22, 22, 0.6);
  --shade-trans-70: rgba(22, 22, 22, 0.7);
  --shade-trans-80: rgba(22, 22, 22, 0.8);
  --shade-trans-90: rgba(22, 22, 22, 0.9);
}

/* ================= Variante 3: Schwarz – Weiß ==================
 * Dunkle Flächen, heller Text, Buttons Hellgrün, kein Neon-/Dunkelgrün. */
html[data-hw-variant="schwarz-weiss"] {
  --secondary-h: 88; --secondary-s: 46.4%; --secondary-l: 46.1%;
  --secondary: #7AAC3F;
  --secondary-hover: #8BBF50;
  --secondary-ultra-light: #1A250E;
  --secondary-light: #425D22;
  --secondary-semi-light: #5C8330;
  --secondary-semi-dark: #A9CF7C;
  --secondary-dark: #DAEAC7;
  --secondary-ultra-dark: #F3F8EC;
  --secondary-trans-10: rgba(122, 172, 63, 0.1);
  --secondary-trans-20: rgba(122, 172, 63, 0.2);
  --secondary-trans-30: rgba(122, 172, 63, 0.3);
  --secondary-trans-40: rgba(122, 172, 63, 0.4);
  --secondary-trans-50: rgba(122, 172, 63, 0.5);
  --secondary-trans-60: rgba(122, 172, 63, 0.6);
  --secondary-trans-70: rgba(122, 172, 63, 0.7);
  --secondary-trans-80: rgba(122, 172, 63, 0.8);
  --secondary-trans-90: rgba(122, 172, 63, 0.9);

  --base-h: 0; --base-s: 0%; --base-l: 7%;
  --base: #121212;
  --base-hover: #161616;
  --base-ultra-light: #181818;
  --base-light: #1F1F1F;
  --base-semi-light: #2B2B2B;
  --base-semi-dark: #3C3C3C;
  --base-dark: #4A4A4A;
  --base-ultra-dark: #0A0A0A;

  --shade-h: 60; --shade-s: 7%; --shade-l: 95%;
  --shade: #F2F2F0;
  --shade-hover: #FFFFFF;
  --shade-ultra-light: #FAFAFA;
  --shade-light: #F0F0F0;
  --shade-semi-light: #D6D6D6;
  --shade-semi-dark: #B0B0B0;
  --shade-dark: #999999;
  --shade-ultra-dark: #808080;
  --shade-trans-10: rgba(242, 242, 240, 0.1);
  --shade-trans-20: rgba(242, 242, 240, 0.2);
  --shade-trans-30: rgba(242, 242, 240, 0.3);
  --shade-trans-40: rgba(242, 242, 240, 0.4);
  --shade-trans-50: rgba(242, 242, 240, 0.5);
  --shade-trans-60: rgba(242, 242, 240, 0.6);
  --shade-trans-70: rgba(242, 242, 240, 0.7);
  --shade-trans-80: rgba(242, 242, 240, 0.85);
  --shade-trans-90: rgba(242, 242, 240, 0.92);

  --accent-h: 0; --accent-s: 0%; --accent-l: 10%;
  --accent: #1A1A1A;
  --accent-hover: #1F1F1F;
  --accent-ultra-light: #181818;
  --accent-light: #262626;
  --accent-semi-light: #3C3C3C;
  --accent-semi-dark: #B0B0B0;
  --accent-dark: #D9D9D9;
  --accent-ultra-dark: #F2F2F2;

  --tertiary-h: 0; --tertiary-s: 0%; --tertiary-l: 12%;
  --tertiary: #1F1F1F;
  --tertiary-hover: #242424;
  --tertiary-ultra-light: #181818;
  --tertiary-light: #262626;
  --tertiary-semi-light: #3C3C3C;
  --tertiary-semi-dark: #B0B0B0;
  --tertiary-dark: #D9D9D9;
  --tertiary-ultra-dark: #F2F2F2;

  --action-h: 0; --action-s: 0%; --action-l: 12%;
  --action: #1F1F1F;
  --action-hover: #242424;
  --action-ultra-light: #181818;
  --action-light: #262626;
  --action-semi-light: #3C3C3C;
  --action-semi-dark: #B0B0B0;
  --action-dark: #D9D9D9;
  --action-ultra-dark: #F2F2F2;

  /* --white/--black NICHT global überschreiben: --white ist auf dunklen
   * Flächen auch TEXTfarbe (Footer-Links). Weiße Flächen werden unten
   * gezielt per Klasse abgedunkelt. */

  /* Überschriften/Fließtext nutzen teils die neutral-Skala — invertieren. */
  --neutral-h: 0; --neutral-s: 0%; --neutral-l: 85%;
  --neutral: #D9D9D9;
  --neutral-hover: #E8E8E8;
  --neutral-ultra-light: #141414;
  --neutral-light: #1F1F1F;
  --neutral-semi-light: #3C3C3C;
  --neutral-semi-dark: #A6A6A6;
  --neutral-dark: #D9D9D9;
  --neutral-ultra-dark: #F2F2F2;
}

/* Variante 3: Header-Navigation und einzelne Überschriften haben fixe dunkle
 * Farben aus den Bricks-Einstellungen — auf dunklem Grund unlesbar.
 * Nur für die Vorschau hell zwingen (Bricks-Templates bleiben unangetastet).
 * Buttons sind ausgenommen: dunkler Text auf Hellgrün ist gewollt (Kontrast). */
html[data-hw-variant="schwarz-weiss"] #brx-header a {
  color: #F2F2F0;
}
html[data-hw-variant="schwarz-weiss"] :is(h1, h2, h3, h4, h5, h6):not(.brxe-button):not([class*="btn--"]) {
  color: #FAFAFA;
}

/* Variante 3: Weiße Flächen gezielt abdunkeln (statt --white global —
 * das ist andernorts Textfarbe). Klassenliste per DOM-Audit ermittelt. */
html[data-hw-variant="schwarz-weiss"] :is(.hw-section--bg-weiss, .hw-hero__card, .hw-kon__form, .brxe-section.hw-hd, .sub-menu, .bricks-mobile-menu-wrapper) {
  background-color: #1A1A1A;
}
html[data-hw-variant="schwarz-weiss"] .ff-el-form-control {
  background-color: #262626;
  color: #F2F2F0;
  border-color: #3C3C3C;
}

/* Variante 3: GEFÜLLTE Buttons behalten dunklen Text auf Hellgrün —
 * heller Text hätte nur 2,4:1 Kontrast (siehe functions.php, Login-Block).
 * Outline-Buttons stehen auf dunklem Grund → heller Text + Rahmen. */
html[data-hw-variant="schwarz-weiss"] :is([class*="btn--"], .brxe-button, .ff-btn-submit) {
  color: #1A1A1A; /* neutral schwarz statt #1F2412 (Dunkelgrün-Ton) — Kundenregel */
}
html[data-hw-variant="schwarz-weiss"] .btn--outline {
  color: #F2F2F0;
  border-color: rgba(242, 242, 240, 0.55);
}

/* Variante 3: Elemente mit fixer bzw. action-basierter Dunkelfarbe —
 * auf dunklem Grund hell stellen. Bewusst NEUTRAL hell, kein Grün
 * (Kundenregel: Grüntöne nicht in Elemente mischen). */
html[data-hw-variant="schwarz-weiss"] :is(.hw-eyebrow, .hw-ref__meta, .hw-ueb__claim, .hw-link, .brxe-text-basic, address, .sub-menu a, .bricks-mobile-menu-wrapper a) {
  color: #D6D6D6;
}

/* Variante 3: Slider-Pfeile — der SVG-stroke haengt an --shade (hier hell
 * invertiert) und verschwindet auf dem weissen Kreis. Dunkel forcieren —
 * passt auch im Hover (dunkler Pfeil auf Hellgruen, wie Button-Text). */
html[data-hw-variant="schwarz-weiss"] .hw-ref__arrow svg { stroke: #1A1A1A; }

/* Variante 3: Links im Footer und im Kontaktformular (tertiary-basiert). */
html[data-hw-variant="schwarz-weiss"] :is(#brx-footer, .hw-kon__form) a {
  color: #D6D6D6;
}

/* ================= Variante 4: Beige durchgehend ==================
 * Kein Weiss mehr: --white -> base (Beige), inkl. aller trans-Stufen.
 * --white ist auf dunklen Flaechen auch TEXTfarbe - wird warm-beige,
 * Kontrast bleibt. Ex-weisse Sektionen bekommen die Streifen-Schraffur
 * als Abwechslung, Formular-Karten Sand (Felder = base setzen sich ab).
 * Header-Logo -> Schwarz-Version (CSS content + JS im Switcher). */
html[data-hw-variant="beige"] {
  --white-h: 43; --white-s: 26%; --white-l: 94.7%;
  --white: #F5F3EE;
  --white-trans-10: rgba(245, 243, 238, 0.1);
  --white-trans-20: rgba(245, 243, 238, 0.2);
  --white-trans-30: rgba(245, 243, 238, 0.3);
  --white-trans-40: rgba(245, 243, 238, 0.4);
  --white-trans-50: rgba(245, 243, 238, 0.5);
  --white-trans-60: rgba(245, 243, 238, 0.6);
  --white-trans-70: rgba(245, 243, 238, 0.7);
  --white-trans-80: rgba(245, 243, 238, 0.8);
  --white-trans-90: rgba(245, 243, 238, 0.9);

  /* Tiefe statt Flaechigkeit (2026-08-24): die vier Gruen-Skalen
   * (tertiary/accent/action/shade) -> warme Dunkel-Braunbeige-Skala
   * (Hue 43 = Hue von --base). Damit werden Ablauf-Sektion (bg-tief),
   * Footer, Eyebrows und Fliesstext automatisch dunkelbeige statt
   * dunkelgruen. Blaupause: Variante 2 (dort Gruen -> Schwarz). */
  --tertiary-h: 43; --tertiary-s: 26%; --tertiary-l: 25%;
  --tertiary: #50472F;
  --tertiary-hover: #574E34;
  --tertiary-ultra-light: #F6F4EF;
  --tertiary-light: #E3DDCF;
  --tertiary-semi-light: #A89C7C;
  --tertiary-semi-dark: #746A4C;
  --tertiary-dark: #3A3322;
  --tertiary-ultra-dark: #201C13;
  --tertiary-trans-10: rgba(80, 71, 47, 0.1);
  --tertiary-trans-20: rgba(80, 71, 47, 0.2);
  --tertiary-trans-30: rgba(80, 71, 47, 0.3);
  --tertiary-trans-40: rgba(80, 71, 47, 0.4);
  --tertiary-trans-50: rgba(80, 71, 47, 0.5);
  --tertiary-trans-60: rgba(80, 71, 47, 0.6);
  --tertiary-trans-70: rgba(80, 71, 47, 0.7);
  --tertiary-trans-80: rgba(80, 71, 47, 0.8);
  --tertiary-trans-90: rgba(80, 71, 47, 0.9);

  --accent-h: 43; --accent-s: 26%; --accent-l: 18%;
  --accent: #3A3322;
  --accent-hover: #403927;
  --accent-ultra-light: #F6F4EF;
  --accent-light: #E3DDCF;
  --accent-semi-light: #A89C7C;
  --accent-semi-dark: #5C5340;
  --accent-dark: #292416;
  --accent-ultra-dark: #14110B;

  --action-h: 43; --action-s: 26%; --action-l: 25%;
  --action: #50472F;
  --action-hover: #574E34;
  --action-ultra-light: #F6F4EF;
  --action-light: #E3DDCF;
  --action-semi-light: #A89C7C;
  --action-semi-dark: #746A4C;
  --action-dark: #3A3322;
  --action-ultra-dark: #201C13;

  --shade-h: 43; --shade-s: 26%; --shade-l: 10%;
  --shade: #201C13;
  --shade-hover: #262117;
  --shade-ultra-light: #F6F4EF;
  --shade-light: #E3DDCF;
  --shade-semi-light: #A89C7C;
  --shade-semi-dark: #746A4C;
  --shade-dark: #3A3322;
  --shade-ultra-dark: #14110B;
  --shade-trans-10: rgba(32, 28, 19, 0.1);
  --shade-trans-20: rgba(32, 28, 19, 0.2);
  --shade-trans-30: rgba(32, 28, 19, 0.3);
  --shade-trans-40: rgba(32, 28, 19, 0.4);
  --shade-trans-50: rgba(32, 28, 19, 0.5);
  --shade-trans-60: rgba(32, 28, 19, 0.6);
  --shade-trans-70: rgba(32, 28, 19, 0.7);
  --shade-trans-80: rgba(32, 28, 19, 0.8);
  --shade-trans-90: rgba(32, 28, 19, 0.9);
}

/* Body + Flaechen, deren Weiss fest in Bricks steckt (nicht via --white). */
html[data-hw-variant="beige"] body {
  background-color: var(--base);
}
html[data-hw-variant="beige"] :is(.brxe-section.hw-hd, .sub-menu, .bricks-mobile-menu-wrapper) {
  background-color: var(--base);
}

/* Ex-weisse Sektionen: Streifen-Schraffur (Projektstandard), damit sie
 * sich weiter von den Kalk-Sektionen unterscheiden. */
html[data-hw-variant="beige"] .hw-section--bg-weiss {
  background-image: repeating-linear-gradient(135deg, var(--tertiary-trans-10) 0 1px, transparent 1px 9px);
}

/* Formular-Karten: Sand statt Weiss - die Felder (var(--white) -> base)
 * heben sich dann von selbst ab. */
html[data-hw-variant="beige"] :is(.hw-kon__form, .hw-section--bg-weiss .hw-form__body) {
  background: var(--base-light);
}

/* Trust-Band: ganz dunkelbeige Flaeche als frueher Tiefen-Akzent —
 * beige Typo (--white ist in dieser Variante warm-beige), Linien 20%.
 * Struktur uebernommen aus Variante 5 (dort tertiary = Gruen). */
html[data-hw-variant="beige"] .hw-section.hw-trust {
  background-color: var(--tertiary);
  border-block-color: var(--white-trans-20);
}
html[data-hw-variant="beige"] .hw-trust__item { border-color: var(--white-trans-20); }
html[data-hw-variant="beige"] .hw-trust__value { color: var(--white); }
html[data-hw-variant="beige"] .hw-trust__label { color: var(--white-trans-70); }

/* ---- Logo-Tausch (nur Header, Footer-Logo bleibt) ----
 * content:url() greift flackerfrei in Chrome/Safari; das JS im Switcher
 * tauscht src/srcset zusaetzlich fuer alle Browser. */
html[data-hw-variant="beige"] #brx-header img.bricks-site-logo,
html[data-hw-variant="beige-gruen"] #brx-header img.bricks-site-logo,
html[data-hw-variant^="beige-schwarz"] #brx-header img.bricks-site-logo {
  content: url("https://hauswerk.multimediafabrik.com/wp-content/uploads/2026/07/hauswerk-logo-schwarz.webp");
}
html[data-hw-variant="schwarz-weiss"] #brx-header img.bricks-site-logo {
  content: url("https://hauswerk.multimediafabrik.com/wp-content/uploads/2026/07/hauswerk-logo-weiss.webp");
}

/* ================= Variante 5: Gruen / Beige (Mockups 24.08.) ==========
 * Sektionsfarben umverteilt: Trust-Band + Impressionen auf Dunkelgruen
 * (tertiary) mit weissem Text und weissen Linien (20%), Ablauf hell (weiss),
 * Partner weiss, Hero-Flaeche Beige mit Schraffur (Karte bleibt weiss),
 * Footer fast schwarz. Kein Neongruen: secondary -> Hellgruen (wie Var. 2/3).
 * Header-Logo -> Schwarz-Version. */
html[data-hw-variant="gruen"] {
  --secondary-h: 88; --secondary-s: 46.4%; --secondary-l: 46.1%;
  --secondary: #7AAC3F;
  --secondary-hover: #8BBF50;
  --secondary-ultra-light: #F3F8EC;
  --secondary-light: #DAEAC7;
  --secondary-semi-light: #A9CF7C;
  --secondary-semi-dark: #5C8330;
  --secondary-dark: #425D22;
  --secondary-ultra-dark: #1A250E;
  --secondary-trans-10: rgba(122, 172, 63, 0.1);
  --secondary-trans-20: rgba(122, 172, 63, 0.2);
  --secondary-trans-30: rgba(122, 172, 63, 0.3);
  --secondary-trans-40: rgba(122, 172, 63, 0.4);
  --secondary-trans-50: rgba(122, 172, 63, 0.5);
  --secondary-trans-60: rgba(122, 172, 63, 0.6);
  --secondary-trans-70: rgba(122, 172, 63, 0.7);
  --secondary-trans-80: rgba(122, 172, 63, 0.8);
  --secondary-trans-90: rgba(122, 172, 63, 0.9);
}

/* Header + Hero-Flaeche: Beige mit Projektschraffur, Hero-Karte bleibt weiss. */
html[data-hw-variant="gruen"] .brxe-section.hw-hd { background-color: var(--base); }
html[data-hw-variant="gruen"] .hw-section.hw-hero {
  background-color: var(--base);
  background-image: repeating-linear-gradient(135deg, var(--tertiary-trans-10) 0 1px, transparent 1px 9px);
}

/* Trust-Band: gruener Grund, weisse Typo, weisse Linien (20%). */
html[data-hw-variant="gruen"] .hw-section.hw-trust {
  background-color: var(--tertiary);
  border-block-color: var(--white-trans-20);
}
html[data-hw-variant="gruen"] .hw-trust__item { border-color: var(--white-trans-20); }
html[data-hw-variant="gruen"] .hw-trust__value { color: var(--white); }
html[data-hw-variant="gruen"] .hw-trust__label { color: var(--white-trans-70); }

/* Impressionen: gruener Grund, weisser Text, Linien/Kreise weiss. */
html[data-hw-variant="gruen"] .hw-section.hw-ref { background-color: var(--tertiary); color: var(--white); }
html[data-hw-variant="gruen"] .hw-ref :is(h1, h2, h3, h4) { color: var(--white); }
html[data-hw-variant="gruen"] .hw-ref .hw-lead { color: var(--white-trans-70); }
html[data-hw-variant="gruen"] .hw-ref .hw-eyebrow { color: var(--white-trans-80); }
html[data-hw-variant="gruen"] .hw-ref__meta { color: var(--secondary); }
html[data-hw-variant="gruen"] :is(.hw-ref__text, .hw-ref__note) { color: var(--white-trans-70); }
html[data-hw-variant="gruen"] .hw-ref__arrow {
  border-color: var(--white-trans-20);
  background: transparent;
  color: var(--white);
}
html[data-hw-variant="gruen"] .hw-ref__arrow:hover { border-color: var(--primary); background: var(--primary); }
html[data-hw-variant="gruen"] .hw-ref__arrow:disabled:hover { border-color: var(--white-trans-20); background: transparent; }
html[data-hw-variant="gruen"] .hw-ref__dots button { background-color: var(--white-trans-30); }
html[data-hw-variant="gruen"] .hw-ref__dots button:hover { background-color: var(--white-trans-70); }
html[data-hw-variant="gruen"] .hw-ref__dots button.is-on { background-color: var(--secondary); }
html[data-hw-variant="gruen"] .hw-ref__filter-btn { border-color: var(--white-trans-30); color: var(--white-trans-80); }

/* Ablauf: heller Grund - die --dark-Textregeln zuruecksetzen. */
html[data-hw-variant="gruen"] .hw-section.hw-abl { background-color: var(--white); color: var(--shade); }
html[data-hw-variant="gruen"] .hw-abl :is(h1, h2, h3, h4, h5, h6) { color: var(--shade); }
html[data-hw-variant="gruen"] .hw-abl .hw-lead { color: var(--shade-trans-80); }
html[data-hw-variant="gruen"] .hw-abl p { color: var(--shade-trans-80); }
html[data-hw-variant="gruen"] .hw-abl .hw-eyebrow { color: var(--tertiary); }
html[data-hw-variant="gruen"] .hw-abl__phase { border-top-color: var(--shade-trans-20); }
html[data-hw-variant="gruen"] .hw-abl__step { border-bottom-color: var(--shade-trans-10); }
html[data-hw-variant="gruen"] .hw-abl__step-n { color: var(--tertiary); }
html[data-hw-variant="gruen"] .hw-abl__foot { border-top-color: var(--shade-trans-20); }
html[data-hw-variant="gruen"] .hw-abl__video-icon { border-color: var(--shade-trans-30); }

/* Footer: ganz dunkel. */
html[data-hw-variant="gruen"] #brx-footer .brxe-section { background-color: #141414; }

/* Header-Logo -> Schwarz (JS im Switcher deckt Firefox ab). */
html[data-hw-variant="gruen"] #brx-header img.bricks-site-logo {
  content: url("https://hauswerk.multimediafabrik.com/wp-content/uploads/2026/07/hauswerk-logo-schwarz.webp");
}

/* ============ EXAKT-Regeln: Vorgabe-Varianten 1–3 (Kunde, 24.08.) ============
 * Kundenvorgabe: Grün ausschließlich an Buttons (als Fläche) bzw. als
 * Sektions-Hintergrund — in keinem anderen Element. Gilt gemeinsam für
 * beige-gruen (1), beige-schwarz (2), schwarz-weiss (3).
 * Neutralisiert: Ex-Neon-Akzente (secondary-Remap = wäre Hellgrün-Text) und
 * primary-Akzente (Trust-Zahlen, Linien, Punkte, Menü-Pfeile).
 * var(--shade) folgt je Variante dem Schema (1: Dunkelgrün-Schwarz, 2: Schwarz,
 * 3: hell invertiert) — dieselben Regeln passen dadurch für alle drei.
 * `body` in den Selektoren: übertrumpft auch body.hw-plakativ-Regeln. */

/* Dunkle Flächen: Ex-Grün-Akzente → hell-neutral. */
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body :is(
  .hw-section--dark .hw-link,
  .hw-section--dark .hw-trust__value,
  .hw-section--dark .hw-vers__n,
  .hw-section--dark .hw-ref__meta,
  .hw-section--dark .hw-ueb__claim,
  .hw-section--dark .hw-tl__jahr,
  .hw-section--dark .hw-team__gruppe-title,
  .hw-abl__step-n
) { color: var(--white); }
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body .hw-section--dark .hw-kst__quote::before { color: var(--white); }
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body .hw-section--dark .hw-kst__att::before { background: var(--white-trans-70); }
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body .hw-section--dark :is(.hw-ref__dots button.is-on, .hw-kst__dot.is-on) { background-color: var(--white); }
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body .hw-section--dark .hw-kst__dot:focus-visible { outline-color: var(--white); }
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body .hw-section--dark .hw-tl__marker { border-color: var(--white-trans-70); }

/* Helle Flächen: Grün-Akzente → Schema-Kontrastfarbe (shade). */
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body .hw-trust__value { color: var(--shade); }
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body .hw-kst__quote::before { color: var(--shade); }
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body .hw-kst__att::before { background: var(--shade-trans-40); }
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body :is(.hw-ref__dots button.is-on, .hw-kst__dot.is-on) { background-color: var(--shade); }
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body .hw-tl__marker { border-color: var(--shade-trans-40); }
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body :is(.hw-ueb__claim, .hw-person__zitat, .hw-faq__leer) { border-left-color: var(--shade-trans-30); }

/* Header: grüne Pfeile und Linien → neutral (grüne Hover-FLÄCHEN dürfen bleiben). */
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body :is(
  .hw-hd__nav .bricks-nav-menu .brx-submenu-toggle > button,
  #brx-header .bricks-mobile-menu .brx-submenu-toggle > button
) { color: var(--shade); }
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body :is(
  .hw-hd__nav .bricks-nav-menu .brx-submenu-toggle > button svg,
  .hw-hd__nav .bricks-nav-menu .brx-submenu-toggle > button .menu-item-icon,
  #brx-header .bricks-mobile-menu .brx-submenu-toggle > button svg
) { stroke: var(--shade); color: var(--shade); }
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body .hw-hd__nav .sub-menu { border-top-color: var(--shade-trans-30); }
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body #brx-header .bricks-mobile-menu :is(
  .current-menu-item > a,
  .current-menu-ancestor > a,
  .current_page_item > a,
  .current-page-ancestor > a,
  .current-menu-item > .brx-submenu-toggle > a,
  .current-menu-ancestor > .brx-submenu-toggle > a
) { box-shadow: inset 3px 0 0 var(--shade-trans-40); }

/* Plakativ-Entwurf (Kopie 909): Ablauf-Icons hängen an secondary-semi-light. */
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body.hw-plakativ .hw-abl__icon { color: var(--white); }

/* Footer (dunkel in allen drei): Ex-Neon → Weiß. Die zwei nativen
 * Bricks-Labels (Claim + „Öffnungszeiten“) stylt Bricks per ID-Selektor
 * mit var(--secondary) — darum hier ebenfalls per ID überschreiben. */
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body .hw-ft__menu :is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current-page-ancestor) > a { color: var(--white); }
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body :is(.hw-ft__claim, #brxe-hwfclm, #brxe-hwfoet) { color: var(--white-trans-80); }

/* Schwarz-Varianten: Mobile-Menü-Schatten war dunkelgrün getönt, und der
 * Fluent-Submit-Text kommt als Literal #1F2412 (Dunkelgrün-Ton) → neutral. */
html:is([data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body #brx-header .bricks-mobile-menu-wrapper { box-shadow: 0 0 60px rgba(0, 0, 0, 0.18); }
/* Fluent Forms setzt den Submit-Text als Inline-Literal #1F2412 mit
 * (0,3,1)-Spezifität — gleiche Kette + body nötig, um zu gewinnen. */
html:is([data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body form .ff-btn-submit:not(.ff_btn_no_style) { color: #1A1A1A; }

/* Formular-Submit-Hover: das secondary-Remap machte Hover = Grundfarbe →
 * stattdessen die hellere Hellgrün-Stufe (Button bleibt grün = erlaubt). */
html:is([data-hw-variant="beige-gruen"], [data-hw-variant^="beige-schwarz"], [data-hw-variant="schwarz-weiss"]) body :is(.hw-kon__form, .hw-form__body) :is(.ff-btn-submit, .ff-btn):hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* ============ Variante 2 Feinschliff (Mike, 25.08.) ============
 * 1) Sektions-CTAs (Outline) → gefüllte Hellgrün-Buttons. Ein Button,
 *    der direkt auf einen anderen folgt (Hero-Zweitbutton, „Offene
 *    Stellen“), bleibt Outline — sonst stünden zwei identisch grüne
 *    nebeneinander.
 * 2) Ex-weiße Flächen → helleres Beige (#FAF9F5, heller als base):
 *    --white-Remap deckt Hero-Karte, weiße Sektionen, Formular-Karte ab;
 *    Header/Submenü/body haben ihr Weiß fix in Bricks → explizit.
 *    --white ist auf Dunkelflächen auch Textfarbe — wird quasi-weiß
 *    mit Warmstich, unkritisch. */
html[data-hw-variant^="beige-schwarz"] body .hw-btn.btn--outline {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #1A1A1A;
}
html[data-hw-variant^="beige-schwarz"] body .hw-btn.btn--outline:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #1A1A1A;
}
html[data-hw-variant^="beige-schwarz"] body .hw-btn ~ .hw-btn.btn--outline {
  background-color: transparent;
  border-color: var(--shade);
  color: var(--shade);
}
html[data-hw-variant^="beige-schwarz"] body .hw-btn ~ .hw-btn.btn--outline:hover {
  background-color: var(--shade-trans-10);
  border-color: var(--shade);
  color: var(--shade);
}

/* Zweitbutton auf DUNKLEN Sektionen (CTA „Offene Stellen", Über-uns/Karriere):
 * shade-Text wäre dort unsichtbar (Schwarz auf Schwarz) → hell. Gilt für
 * beide Beige/Schwarz-Varianten (25.08., beim 2b-Audit gefunden). */
html[data-hw-variant^="beige-schwarz"] body .hw-section--dark .hw-btn ~ .hw-btn.btn--outline {
  background-color: transparent;
  border-color: var(--white-trans-70);
  color: var(--white);
}
html[data-hw-variant^="beige-schwarz"] body .hw-section--dark .hw-btn ~ .hw-btn.btn--outline:hover {
  background-color: var(--white-trans-10);
  border-color: var(--white);
  color: var(--white);
}

/* 25.08. (3), Mike: #FAF9F5 wirkte wie Weiß → Ex-Weiß-Flächen jetzt auf
 * base-Beige (#F5F3EE), und die bisherigen base-Flächen eine Stufe dunkler
 * (#EDE7DA), damit der Sektions-Wechsel als Beige-auf-Beige lesbar bleibt. */
html[data-hw-variant^="beige-schwarz"] {
  --white-h: 43; --white-s: 26%; --white-l: 94.7%;
  --white: #F5F3EE;
  --white-trans-10: rgba(245, 243, 238, 0.1);
  --white-trans-20: rgba(245, 243, 238, 0.2);
  --white-trans-30: rgba(245, 243, 238, 0.3);
  --white-trans-40: rgba(245, 243, 238, 0.4);
  --white-trans-50: rgba(245, 243, 238, 0.5);
  --white-trans-60: rgba(245, 243, 238, 0.6);
  --white-trans-70: rgba(245, 243, 238, 0.7);
  --white-trans-80: rgba(245, 243, 238, 0.8);
  --white-trans-90: rgba(245, 243, 238, 0.9);

  --base-h: 43; --base-s: 28%; --base-l: 89%;
  --base: #EDE7DA;
  --base-hover: #F0EBE0;
}
html[data-hw-variant^="beige-schwarz"] body,
html[data-hw-variant^="beige-schwarz"] body :is(.brxe-section.hw-hd, .sub-menu, .bricks-mobile-menu-wrapper) {
  background-color: var(--white);
}

/* ============ Variante 2b: Beige – Schwarz OHNE Grün (Mike, 25.08.) ============
 * Klon von Variante 2: alle Regeln mit [data-hw-variant^="beige-schwarz"]
 * greifen per Präfix-Selektor automatisch mit. Hier nur das Delta:
 * primary + secondary (die letzten Grün-Quellen — Buttons, gefüllte CTAs,
 * Hover-Flächen, aktive Filter/Chips) → Schwarz-Skala. Gefüllte Elemente
 * bekommen helle Typo — die Kundenregel „dunkler Text auf Hellgrün" ergäbe
 * hier Schwarz auf Schwarz. */
html[data-hw-variant="beige-schwarz-2"] {
  --primary-h: 0; --primary-s: 0%; --primary-l: 10%;
  --primary: #1A1A1A;
  --primary-hover: #333333;
  --primary-ultra-light: #F2F2F2;
  --primary-light: #D9D9D9;
  --primary-semi-light: #A6A6A6;
  --primary-semi-dark: #595959;
  --primary-dark: #404040;
  --primary-ultra-dark: #0D0D0D;
  --primary-trans-10: rgba(26, 26, 26, 0.1);
  --primary-trans-20: rgba(26, 26, 26, 0.2);
  --primary-trans-30: rgba(26, 26, 26, 0.3);
  --primary-trans-40: rgba(26, 26, 26, 0.4);
  --primary-trans-50: rgba(26, 26, 26, 0.5);
  --primary-trans-60: rgba(26, 26, 26, 0.6);
  --primary-trans-70: rgba(26, 26, 26, 0.7);
  --primary-trans-80: rgba(26, 26, 26, 0.8);
  --primary-trans-90: rgba(26, 26, 26, 0.9);

  /* secondary wurde im geteilten Block auf Hellgrün remappt → hier Schwarz. */
  --secondary-h: 0; --secondary-s: 0%; --secondary-l: 10%;
  --secondary: #1A1A1A;
  --secondary-hover: #333333;
  --secondary-ultra-light: #F2F2F2;
  --secondary-light: #D9D9D9;
  --secondary-semi-light: #A6A6A6;
  --secondary-semi-dark: #595959;
  --secondary-dark: #404040;
  --secondary-ultra-dark: #0D0D0D;
  --secondary-trans-10: rgba(26, 26, 26, 0.1);
  --secondary-trans-20: rgba(26, 26, 26, 0.2);
  --secondary-trans-30: rgba(26, 26, 26, 0.3);
  --secondary-trans-40: rgba(26, 26, 26, 0.4);
  --secondary-trans-50: rgba(26, 26, 26, 0.5);
  --secondary-trans-60: rgba(26, 26, 26, 0.6);
  --secondary-trans-70: rgba(26, 26, 26, 0.7);
  --secondary-trans-80: rgba(26, 26, 26, 0.8);
  --secondary-trans-90: rgba(26, 26, 26, 0.9);

  /* tertiary/accent/action-trans-Stufen: ACSS backt sie als rgba-Literale
   * (Dunkelgrün) — der geteilte Variante-2-Block remappt nur die Grundwerte.
   * Sichtbar z. B. in der Schraffur (var(--tertiary-trans-10)). → Schwarz. */
  --tertiary-trans-10: rgba(26, 26, 26, 0.1);
  --tertiary-trans-20: rgba(26, 26, 26, 0.2);
  --tertiary-trans-30: rgba(26, 26, 26, 0.3);
  --tertiary-trans-40: rgba(26, 26, 26, 0.4);
  --tertiary-trans-50: rgba(26, 26, 26, 0.5);
  --tertiary-trans-60: rgba(26, 26, 26, 0.6);
  --tertiary-trans-70: rgba(26, 26, 26, 0.7);
  --tertiary-trans-80: rgba(26, 26, 26, 0.8);
  --tertiary-trans-90: rgba(26, 26, 26, 0.9);
  --accent-trans-10: rgba(20, 20, 20, 0.1);
  --accent-trans-20: rgba(20, 20, 20, 0.2);
  --accent-trans-30: rgba(20, 20, 20, 0.3);
  --accent-trans-40: rgba(20, 20, 20, 0.4);
  --accent-trans-50: rgba(20, 20, 20, 0.5);
  --accent-trans-60: rgba(20, 20, 20, 0.6);
  --accent-trans-70: rgba(20, 20, 20, 0.7);
  --accent-trans-80: rgba(20, 20, 20, 0.8);
  --accent-trans-90: rgba(20, 20, 20, 0.9);
  --action-trans-10: rgba(26, 26, 26, 0.1);
  --action-trans-20: rgba(26, 26, 26, 0.2);
  --action-trans-30: rgba(26, 26, 26, 0.3);
  --action-trans-40: rgba(26, 26, 26, 0.4);
  --action-trans-50: rgba(26, 26, 26, 0.5);
  --action-trans-60: rgba(26, 26, 26, 0.6);
  --action-trans-70: rgba(26, 26, 26, 0.7);
  --action-trans-80: rgba(26, 26, 26, 0.8);
  --action-trans-90: rgba(26, 26, 26, 0.9);
}

/* Fluent-Submit: Hintergrund kommt als Inline-Literal #7AAC3F aus den
 * Form-Settings (gleiche Falle wie die Textfarbe #1F2412) → Schwarz. */
html[data-hw-variant="beige-schwarz-2"] body form .ff-btn-submit:not(.ff_btn_no_style) {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Gefüllte Buttons/CTAs: helle Typo auf Schwarz. */
html[data-hw-variant="beige-schwarz-2"] body :is([class*="btn--"], .brxe-button) { color: #F5F3EE; }
html[data-hw-variant="beige-schwarz-2"] body .hw-btn.btn--outline { color: #F5F3EE; }
html[data-hw-variant="beige-schwarz-2"] body .hw-btn.btn--outline:hover { color: #F5F3EE; }

/* Zweitbutton (Hero, „Offene Stellen") bleibt Outline → dunkle Typo. */
html[data-hw-variant="beige-schwarz-2"] body .hw-btn ~ .hw-btn.btn--outline { color: var(--shade); }
html[data-hw-variant="beige-schwarz-2"] body .hw-btn ~ .hw-btn.btn--outline:hover { color: var(--shade); }

/* Formular-Submits: color war var(--shade) bzw. Fluent-Literal #1F2412. */
html[data-hw-variant="beige-schwarz-2"] body form .ff-btn-submit:not(.ff_btn_no_style) { color: #F5F3EE; }
html[data-hw-variant="beige-schwarz-2"] body :is(.hw-kon__form, .hw-form__body) .ff-btn-submit { color: #F5F3EE; }

/* Aktive Referenz-Filter und FAQ-Chips: Fläche primary (jetzt schwarz),
 * Text war var(--shade) → hell. */
html[data-hw-variant="beige-schwarz-2"] body :is(.hw-ref__filter-btn.is-on, .hw-faq__chip.is-on) { color: #F5F3EE; }

/* Slider-Pfeil-Hover: Fläche wird schwarz → Pfeil hell (Disabled bleibt dunkel). */
html[data-hw-variant="beige-schwarz-2"] body .hw-ref__arrow:hover svg { stroke: #F5F3EE; }
html[data-hw-variant="beige-schwarz-2"] body .hw-ref__arrow:disabled:hover svg { stroke: var(--shade); }

/* FAQ-Suchfeld-Fokus: Grün-Literal im Glow → neutral. */
html[data-hw-variant="beige-schwarz-2"] body .hw-faq__suchfeld:focus { box-shadow: 0 0 0 3px rgba(22, 22, 22, 0.25); }

/* Header-Hover/Aktiv-Flächen: color-mix mit schwarzem primary ist schon
 * neutral; hier zusätzlich die Grün-Literale des @supports-Fallbacks decken. */
html[data-hw-variant="beige-schwarz-2"] body .hw-hd__nav .bricks-nav-menu > li:hover { background-color: rgba(22, 22, 22, 0.06); }
html[data-hw-variant="beige-schwarz-2"] body .hw-hd__nav .bricks-nav-menu > li:is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current-page-ancestor) { background-color: rgba(22, 22, 22, 0.1); }

/* ---- Widget-Styles (Umschalter unten rechts) ---- */
.hw-variant-widget {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 99999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: #1F2412;
}
.hw-variant-widget__toggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #1F2412;
  color: #fff;
  font-size: 20px;
  padding: 0;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.hw-variant-widget__panel {
  display: none;
  position: absolute;
  right: 0;
  bottom: 56px;
  width: 240px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
  padding: 10px;
}
.hw-variant-widget.is-open .hw-variant-widget__panel { display: block; }
.hw-variant-widget__title {
  font-weight: 600;
  margin: 2px 4px 8px;
}
.hw-variant-widget__option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  line-height: 1.2;
}
.hw-variant-widget__option.is-active {
  border-color: #1F2412;
  box-shadow: inset 0 0 0 1px #1F2412;
}
.hw-variant-widget__dots { display: flex; gap: 3px; flex: none; }
.hw-variant-widget__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
}