/*
 * Autor: Autark Innovations
 * Website: autarkinnovations.de
 * App: autarkinnovations.com
 * E-Mail: info@autarkinnovations.de
 * Erstellt: 2026-06-14
 * Zuletzt bearbeitet: 2026-06-14
 * Projekt: autark-website
 * Beschreibung: Globale Mobil-QA-Fixes aus dem 100-Agent-Visual-Schwarm.
 *   Behebt systematische Cluster: Hero-H1-Silbentrennung, ueberdimensioniertes
 *   v13-Nav-Logo, Bottom-Element-Chaos (mehrere Sticky-Bars/Cookie/FAB
 *   ueberlappen), Vergleichstabellen-Lesbarkeit. Alles mobil-gescopt bzw.
 *   per :has()-Guard abgesichert, damit Desktop und Seiten ohne die Elemente
 *   unveraendert bleiben.
 */

/* ============================================================
   1) HERO-H1: keine Silbentrennung mitten im Wort ("kau-/fen")
   Ursache: einige Hero-Templates setzen hyphens:auto + overflow-wrap:anywhere.
   ============================================================ */
@media (max-width: 768px) {
  /* Minifizierte Mega-Fix-CSS setzen hyphens:auto!important mit Spezifitaet (0,1,3)
     (z.B. "html body .hero h1"). Der :not(#zzqa)-Trick addiert ID-Gewicht ->
     (1,1,3) und schlaegt das zuverlaessig, unabhaengig von der Ladereihenfolge. */
  html body h1:not(#zzqa),
  html body .hero h1:not(#zzqa),
  html body main h1:not(#zzqa),
  html body section h1:not(#zzqa),
  html body .v12-hero h1:not(#zzqa),
  html body .v13-hero h1:not(#zzqa),
  html body [data-hero] h1:not(#zzqa) {
    -webkit-hyphens: none !important;
    hyphens: none !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
  }
}

/* ============================================================
   2) v13-NAV-LOGO: rendert faelschlich 256x256 (statt ~40px)
   und sprengt den Header. Auf saubere Logo-Groesse zwingen.
   ============================================================ */
nav.v13-nav-fixed a[href="/"] img,
nav.v13-nav-fixed .v13-logo img,
nav.v13-nav-fixed img.logo-img,
nav.v13-nav-fixed img[src*="logo-nav"] {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  object-fit: contain !important;
}

/* ============================================================
   3) BOTTOM-ELEMENT-ORCHESTRIERUNG (nur Mobil)
   Problem: bis zu 3 Sticky-CTA-Bars + Cookie-Banner + Back-to-Top
   + Tel-FABs stapeln/ueberlappen sich am unteren Rand.
   Loesung: die v13-Bar (#sm-cta-bar-v13-w8) ist der Anker; sobald
   sie existiert, werden redundante Legacy-Elemente ausgeblendet und
   Cookie-Banner/Back-to-Top sauber darueber gehoben.
   ============================================================ */
@media (max-width: 768px) {
  /* redundante Legacy-Sticky-CTA-Bars ausblenden */
  body:has(#sm-cta-bar-v13-w8) #mobileStickyCta,
  body:has(#sm-cta-bar-v13-w8) .mobile-sticky-cta,
  body:has(#sm-cta-bar-v13-w8) #autark-sticky-mobile,
  body:has(#sm-cta-bar-v13-w8) #w22-sticky-cta {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* squished/ueberlappende Tel-FABs ausblenden — die v13-Bar bietet bereits "Anrufen" */
  body:has(#sm-cta-bar-v13-w8) aside.v14-tel-link,
  body:has(#sm-cta-bar-v13-w8) a.tel-btn-prominent {
    display: none !important;
  }

  /* Cookie-Banner (.cookie-banner) ueber die 60px-Bottom-Bar heben */
  body:has(#sm-cta-bar-v13-w8) .cookie-banner {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* #cookieConsentOverlay ist ein flex-end-Wrapper (bottom:0) — das innere
     Banner per Wrapper-padding-bottom ueber die Bar heben statt 'bottom' */
  body:has(#sm-cta-bar-v13-w8) #cookieConsentOverlay {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Back-to-Top oberhalb der Bar positionieren */
  body:has(#sm-cta-bar-v13-w8) #backToTop {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
  }

  /* Chat-FAB (oranger Roboter-Button) ueberlappt das rechte Bar-Label
     "Lisa-App oeffnen" -> ueber die Bar heben */
  body:has(#sm-cta-bar-v13-w8) #autark-chat-widget,
  body:has(#sm-cta-bar-v13-w8) .lisa-chat-fab,
  body:has(#sm-cta-bar-v13-w8) [class*="chat-fab"],
  body:has(#sm-cta-bar-v13-w8) .chat-widget-fab {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   3b) DESKTOP: mobile-only Sticky-CTAs duerfen NICHT auf Desktop
   durchschlagen (sie rendern dort unstyled als kaputter Block).
   ============================================================ */
@media (min-width: 769px) {
  #mobileStickyCta,
  .mobile-sticky-cta,
  #autark-sticky-mobile,
  #w22-sticky-cta,
  #sm-cta-bar-v13-w8 {
    display: none !important;
  }
}

/* ============================================================
   3c) STANDORT-KARTEN: die Google-Maps-Embeds (.city-map) nutzen
   Platzhalter-Koordinaten und laden NIE -> sie rendern als grosser
   leerer Block. Ein leerer Kasten ist schlechter als keiner -> ganz
   ausblenden (kein Abdunkeln, das half nicht).
   ============================================================ */
.city-map,
.city-map iframe,
iframe[src*="google.com/maps"],
iframe[src*="maps/embed"] {
  display: none !important;
}

/* ============================================================
   4) VERGLEICHSTABELLEN: rechte Spalten wurden am 412px-Viewport hart
   abgeschnitten. URSACHE: konkurrierende Bundle-Regeln — mobile-fixes-v3
   /async-bundle erzwingen `table{display:block;overflow-x:auto;
   white-space:nowrap}` (Horizontal-Scroll-Wrapper), bundle-global
   erzwingt `table{display:table;min-width:560px}`. Im statischen Screenshot
   (und fuer Nutzer, die nicht horizontal scrollen) sind die rechten Spalten
   — u.a. die FOERDERSPALTE — komplett unsichtbar.
   LOESUNG: vollstaendiger Table-Reset zu `display:table` + table-layout:fixed
   + width:100%, plus thead/tbody/tr/th/td zurueck auf ihre Tabellen-Defaults
   (die Bundles setzten thead/tbody auf display:table -> Spaltenversatz).
   So passen ALLE Spalten in den Viewport, Zellinhalt umbricht statt zu
   clippen, kein Horizontal-Scroll mehr noetig. :not(#zzqa) (= ID-Gewicht
   1,0,3) schlaegt alle Bundle-Regeln (max. 0,1,3). Verifiziert an
   waermepumpe-kosten/-altbau/lohnt-sich-photovoltaik (5-Spalten-Tabellen).
   Kein Stacked-Card-Muster (td::before/data-label) im Projekt -> sicher.
   ============================================================ */
@media (max-width: 768px) {
  html body table:not(#zzqa) {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    border-collapse: collapse !important;
    font-size: 0.62rem !important;
  }
  /* thead/tbody/tr zurueck auf Tabellen-Defaults (Bundles setzten display:table
     auf thead/tbody -> getrennte Tabellenboxen -> Spalten verspringen) */
  html body table:not(#zzqa) thead:not(#zzqa) { display: table-header-group !important; min-width: 0 !important; }
  html body table:not(#zzqa) tbody:not(#zzqa) { display: table-row-group !important; min-width: 0 !important; }
  html body table:not(#zzqa) tr:not(#zzqa) { display: table-row !important; }
  html body table th:not(#zzqa), html body table td:not(#zzqa) {
    display: table-cell !important;
    padding: 5px 5px !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
  }
  /* Scroll-Wrapper duerfen nicht mehr horizontal scrollen/zwingen — Tabelle passt jetzt */
  html body .table-wrap:not(#zzqa), html body .v12-comp-wrap:not(#zzqa),
  html body .table-scroll-wrapper:not(#zzqa), html body div.table-scroll-wrapper:not(#zzqa),
  html body [class*="table-scroll"]:not(#zzqa), html body [class*="table-wrap"]:not(#zzqa) {
    overflow-x: visible !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ============================================================
   5) KONTRAST: helle Sektionen (.section-light) — NUR DESKTOP (>=769px).
   Die cremefarbenen Karten (--bg-light-card) existieren nur ab Desktop-
   Breite; dort erbt der Text faelschlich Dark-Theme-Weiss -> unleserlich.
   MOBIL stapeln dieselben Sektionen transparent auf dunklem Grund — dort
   ist die (helle) Schrift korrekt. Frueher ungescopt -> verursachte mobil
   dunkel-auf-dunkel (vom Live-Swarm gefunden). Daher strikt @min-width:769px.
   :not(#zzqa) hebt die Spezifitaet ueber komponenten-eigene Regeln.
   ============================================================ */
@media (min-width: 769px) {
  html body .section-light h2:not(#zzqa), html body .section-light h3:not(#zzqa),
  html body .section-light h4:not(#zzqa), html body .section-light h5:not(#zzqa),
  html body .section-light p:not(#zzqa), html body .section-light li:not(#zzqa),
  html body .section-light strong:not(#zzqa), html body .section-light b:not(#zzqa),
  html body .section-light .daikin-spec:not(#zzqa), html body .section-light .daikin-name:not(#zzqa),
  html body .section-light .daikin-models h3:not(#zzqa),
  html body .section-light .num:not(#zzqa), html body .section-light .stat-num:not(#zzqa),
  html body .section-light .v12-val:not(#zzqa),
  html body .section-light .faq-q:not(#zzqa), html body .section-light .faq-question:not(#zzqa),
  html body .section-light .pv-combo-text:not(#zzqa),
  html body .section-light .wissen-inline-cta-text:not(#zzqa),
  html body .section-light .cinema-chat-bubble:not(#zzqa) {
    color: #0F172A !important;
  }
  html body .section-light .lbl:not(#zzqa), html body .section-light .label:not(#zzqa),
  html body .section-light span.label:not(#zzqa), html body .section-light .daikin-detail:not(#zzqa),
  html body .section-light .stat-label:not(#zzqa), html body .section-light .muted:not(#zzqa) {
    color: #475569 !important;
  }
  html body .section-light .section-label:not(#a):not(#b), html body .section-light .eyebrow:not(#a):not(#b),
  html body .section-light .dm-eyebrow:not(#a):not(#b), html body .section-light .pe-widget-cta-label:not(#a):not(#b) {
    color: #334155 !important;
  }
  html body .section-light a:not(.btn):not(.btn-primary):not(.btn-secondary):not([class*="cta"]):not([class*="btn"]):not(#zzqa) {
    color: #1d4ed8 !important;
  }
}

/* ============================================================
   5b) HERO-TRUST-LABELS auf Foto: weisse .v12-info-Labels koennen auf
   hellen Foto-Bereichen untergehen (z.B. solarwatt "Festpreis im Vertrag").
   Text-Schatten macht sie auf hellem WIE dunklem Foto lesbar — kein
   Layout-/Farbrisiko (greift nur additiv).
   ============================================================ */
html body .v12-info .v12-val:not(#zzqa),
html body .v12-info .v12-label:not(#zzqa) {
  text-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 2px rgba(0,0,0,0.45) !important;
}

/* ============================================================
   6) HERO-FLOAT-BADGE: Der Badge-Text lag je nach Seite mal weiss-auf-
   weiss (klimaanlagen-Preis), mal dunkel-auf-dunklem-Foto (gewerbe-solar/
   garantie/mehrfamilien — durch einen zu breiten frueheren Fix verschlimmert).
   ROBUST: dem Badge einen eigenen dunklen Glas-Hintergrund + weisse Schrift
   geben -> auf JEDEM Foto-Hintergrund garantiert lesbar.
   ============================================================ */
html body .v12-hero-float:not(#zzqa),
html body .v12-hero-float2:not(#zzqa) {
  background: rgba(10,18,36,0.82) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  backdrop-filter: blur(7px) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
html body .v12-hero-float .v12-val:not(#zzqa), html body .v12-hero-float2 .v12-val:not(#zzqa),
html body .v12-hero-float .v12-num:not(#zzqa), html body .v12-hero-float2 .v12-num:not(#zzqa),
html body .v12-hero-float > div:not(#zzqa), html body .v12-hero-float2 > div:not(#zzqa),
html body .v12-hero-float span:not(#zzqa), html body .v12-hero-float2 span:not(#zzqa) {
  color: #ffffff !important;
}
html body .v12-hero-float .v12-label:not(#zzqa), html body .v12-hero-float2 .v12-label:not(#zzqa) {
  color: rgba(255,255,255,0.82) !important;
}

/* ============================================================
   7) "ALLE PRODUKTE"-BACK-LINK rutscht unter den fixen web-nav-Header
   und verschmiert mit der Logo-Unterzeile (klima, photovoltaik-komplett).
   Dem Wrap genug Kopf-Abstand geben, damit der Link unter dem Header sitzt.
   ============================================================ */
@media (max-width: 768px) {
  html body .wrap:has(> a.btn-ghost[href*="produkte"]):not(#zzqa),
  html body .wrap:has(> a.btn-ghost[href*="#produkte"]):not(#zzqa) {
    padding-top: 78px !important;
  }
}
/* DESKTOP: dieselbe Ueberlappung — der fixe web-nav (73px) verdeckt den
   "Alle Produkte"-Back-Link, der mit der Wortmarke verschmolz (klima u.a.
   Produkt-Unterseiten). Genug Kopfabstand, damit er unter dem Header sitzt. */
@media (min-width: 769px) {
  html body .wrap:has(> a.btn-ghost[href*="produkte"]):not(#zzqa),
  html body .wrap:has(> a.btn-ghost[href*="#produkte"]):not(#zzqa) {
    padding-top: 96px !important;
  }
}

/* ============================================================
   8) CORNER-FABs (unten rechts): es gibt ZWEI Scroll-nach-oben-Buttons
   (button.scroll-to-top + #backToTop) plus den Chat-FAB; sie stapeln/
   ueberlappen sich und kollidieren mit dem Cookie-"Verstanden"-Button.
   Auf Seiten OHNE die v13-Bar griff der fruehere :has-Guard nicht.
   Loesung: Duplikat-Scroll-Top ausblenden, Chat-FAB + Scroll-Top sauber
   vertikal stapeln (unbedingt, plus hoeher wenn die v13-Bar existiert).
   ============================================================ */
@media (max-width: 768px) {
  body:has(#backToTop) button.scroll-to-top:not(#zzqa),
  body:has(#backToTop) .scroll-to-top:not(#zzqa) {
    display: none !important;
  }
  /* Redundanter freistehender Tel-FAB (links) ueberlappt Buttons/Inhalt;
     Call-CTAs gibt es ueber Header/Sticky-Bar/Footer genug -> ausblenden. */
  a.tel-btn-prominent:not(#zzqa), aside.v14-tel-link:not(#zzqa) {
    display: none !important;
  }
  #autark-chat-widget:not(#zzqa) { bottom: 16px !important; right: 16px !important; }
  #backToTop:not(#zzqa) { bottom: 86px !important; right: 18px !important; }
  body:has(#sm-cta-bar-v13-w8) #autark-chat-widget:not(#zzqa) {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body:has(#sm-cta-bar-v13-w8) #backToTop:not(#zzqa) {
    bottom: calc(144px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   9) FORMULAR-SUCCESS-MELDUNG war per Default sichtbar (vor Absenden) —
   "Vielen Dank! Wir melden uns ..." auf wärmepumpe-altbau, solaranlage-kaufen
   u.a. Das JS setzt nach Absenden .sent auf .inline-lead-form. Daher:
   default ausblenden, nur mit .sent zeigen (kein !important -> JS-Show bleibt
   funktionsfaehig). Bewaehrt aus wissen.html/klima-planer (Swarm-Fix), jetzt global.
   ============================================================ */
.lead-form-success { display: none; }
.inline-lead-form.sent .lead-form-success,
form.sent .lead-form-success,
.lead-form.sent .lead-form-success { display: block; }

/* ============================================================
   10) TRUST-/AWARD-BADGES ("Was uns auszeichnet"): im schmalen Blog-
   Artikel (~576px) erzwang eine generische Grid-Regel 4 Mikro-Spalten
   (126px je Badge, ~33px Textbreite) -> zusammen mit overflow-wrap:anywhere
   zerbrach JEDES Wort mitten drin ("Meist/erbet/rieb", "Auth/orized").
   DESKTOP-Bug (mobil 1 Spalte = korrekt). LOESUNG: sinnvolle Mindestbreite
   pro Badge erzwingen (auto-fit minmax 200px -> Blog 2 Spalten, Vollbreite 5)
   und das aggressive Mitten-im-Wort-Brechen auf normalen Wortumbruch
   zuruecksetzen. Spezifitaet (1,1,2) via :not(#zzqa) schlaegt Bundle-Regeln.
   ============================================================ */
html body .award-strip:not(#zzqa) {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 0.7rem !important;
}
html body .award-badge-text:not(#zzqa) {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
}

/* ============================================================
   11) COOKIE-CONSENT vs. FIXE CTA-LEISTE: #cookieConsentOverlay (z-index
   9998, am unteren Rand) ueberlappte die fixe Aktionsleiste
   #sm-cta-bar-v13-w8 ("Anrufen / Lisa-App", z-index 90) — die zweite
   Button-Reihe ("Essenziell"/"Einstellungen") lag chaotisch auf der Leiste.
   cookie-consent.js setzt waehrend ausstehender Einwilligung
   html.cc-banner-active und entfernt es beim Schliessen. CONSENT-FIRST:
   solange die Einwilligung aussteht, die CTA-Leiste ausblenden; nach
   Akzeptieren/Schliessen erscheint sie sauber. Spezifitaet (1,1,1)+!important.
   ============================================================ */
html.cc-banner-active #sm-cta-bar-v13-w8 { display: none !important; }

/* ============================================================
   12) HERO-GRID-BLOWOUT (.hero-content-grid, 22 Seiten inkl. aller
   *-alternative-Seiten): die Spalten `1.1fr 1fr` haben implizit
   `minmax(auto,..)` -> die Textspalte wuchs auf min-content (1595px!) und
   blies ueber den 1280px-Container; die Bildspalte kollabierte auf 2px.
   FOLGEN (beide = derselbe Bug): (a) lange Hero-H1 lief rechts aus dem
   Bild (rabot), (b) die Trust-Floats in der 2px-Bildspalte schrumpften
   auf min-content -> Worte stapelten buchstabenweise (enpal "F/es/tp/..").
   FIX (kanonisch): minmax(0,..) erlaubt den Spalten zu schrumpfen, Inhalt
   umbricht. NUR Desktop (>=1025px) — mobil ist die Spalte bewusst 1fr.
   Verifiziert an rabot/enpal: H1 endet bei ~707px statt 1715px, Floats
   wieder ~610px breit. Spezifitaet (1,1,2) via :not(#zzqa).
   ============================================================ */
@media (min-width: 1025px) {
  html body .hero-content-grid:not(#zzqa) {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
  }
}
/* em-Subline in der Hero-H1 war display:inline-block + white-space:nowrap
   + grosse Schrift -> lange Subline (rabot/enpal) lief aus dem Bild. NUR
   white-space normalisieren (KEIN display:block — auf Nicht-Alternative-
   Seiten ist <em> Inline-Betonung mitten im Titel, die nicht umbrechen darf). */
html body .hero-content-grid h1 em:not(#zzqa) {
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* ============================================================
   13) KONTRAST MOBIL — Gegenstueck zu Section 5: Mehrere Bundle-Regeln
   (bundle-global) faerben .section-light strong/p/li/td/h1-h6 hart dunkel
   (#0F172A / #2a3441 / #0E1620) — und zwar auf ALLEN Viewports. Die
   cremefarbenen .section-light-Karten existieren aber NUR ab Desktop
   (>=769px); MOBIL ist .section-light transparent auf dunklem Grund
   (verifiziert: computed bg rgba(0,0,0,0) ueber lisa/lohnt-sich/standorte/
   stromkosten). Folge: dunkler Text auf dunklem Grund -> unsichtbar
   (fette Listen-Lead-ins, Stadt-Karten, Kombi-Karten u.a.). Section 5 hat
   nur MEINE Regel desktop-gescopt; diese Bundle-Regeln blieben mobil aktiv.
   FIX: mobil .section-light-Text auf Dark-Theme-Hell zuruecksetzen. Sicher,
   weil .section-light mobil ausnahmslos dunkel ist (--bg-light greift erst
   ab Desktop). Verifiziert: Desktop bleibt dunkel (#0F172A auf Creme).
   ============================================================ */
@media (max-width: 768px) {
  html body section.section-light strong:not(#zzqa), html body .section-light strong:not(#zzqa),
  html body section.section-light b:not(#zzqa), html body section.section-light em:not(#zzqa),
  html body section.section-light p:not(#zzqa), html body .section-light p:not(#zzqa),
  html body section.section-light li:not(#zzqa), html body .section-light li:not(#zzqa),
  html body section.section-light td:not(#zzqa),
  html body section.section-light h1:not(#zzqa), html body section.section-light h2:not(#zzqa),
  html body section.section-light h3:not(#zzqa), html body .section-light h3:not(#zzqa),
  html body section.section-light h4:not(#zzqa), html body section.section-light h5:not(#zzqa),
  html body section.section-light h6:not(#zzqa) {
    color: #E8EEF5 !important;
  }
}

/* ============================================================
   14) COOKIE-CONSENT-BUTTONS gequetscht: auf Seiten mit schmaler Consent-
   Card (372px statt 412px) zwang das globale `button{min-width:44px;
   display:inline-flex}` zusammen mit der Flex-Row `.cc-btns` (nowrap) die
   Buttons "Alle akzeptieren"/"Essenziell" auf 44px (Text geklippt),
   "Einstellungen" lief aus dem Viewport (right 519px). FIX: Buttons auf
   Inhaltsbreite (min-width:max-content) + Umbruch erlauben. Auf breiter
   Card (foerderung) bleibt das saubere 2-Reihen-Layout erhalten (verifiziert).
   ============================================================ */
#cookieConsentOverlay .cc-btns { flex-wrap: wrap !important; gap: 8px !important; }
#cookieConsentOverlay .cc-btns button {
  flex: 1 1 auto !important;
  min-width: -webkit-max-content !important;
  min-width: max-content !important;
  width: auto !important;
  white-space: nowrap !important;
}

/* ============================================================
   8) DOPPELTE/REDUNDANTE COOKIE-BANNER (Visual-QA 2026-06-22)
   Befund: ~28 Seiten (klimaanlage-, solar-, waermepumpe- Stadtseiten)
   laden NEBEN dem kanonischen Premium-Banner (cookie-banner-premium.js,
   "Wir nutzen Cookies … Alle akzeptieren/Essenziell/Einstellungen") noch
   zwei Legacy-Consent-UIs: das Legacy-Banner .cookie-banner#cookieBanner
   ("Wir verwenden Cookies … Akzeptieren/Ablehnen") und die v5-Leiste
   [data-cookie-dismiss="v5"] ("technisch notwendige Cookies ✕"). Folge:
   2–3 sich ueberlappende Banner gleichzeitig (Mobil UND Desktop).
   Verifiziert: ALLE betroffenen Seiten haben das Premium-Banner -> die
   Legacy-Elemente sind reine Duplikate und werden ausgeblendet (Consent
   bleibt ueber das Premium-Banner voll funktionsfaehig). Empirisch geprueft
   per Injection auf klimaanlage-bielefeld (nur Premium bleibt). Alle Viewports.
   :not(#zzqa) hebt die Spezifitaet ueber die gleichstarke .cookie-banner.show-
   Regel (sonst gewinnt diese per Ladereihenfolge — verifiziert auf
   waermepumpe-dortmund). Die schmale "technisch notwendige Cookies"-Notiz (v3,
   48 Seiten) bleibt absichtlich; nur die bestaetigten Duplikate verschwinden.
   ============================================================ */
.cookie-banner#cookieBanner:not(#zzqa),
[data-cookie-dismiss="v5"]:not(#zzqa) {
  display: none !important;
}

/* ============================================================
   9) STADT-HERO-H1: kursiver Stadtname (.city-hero h1 em) wird rechts
   abgeschnitten. Ursache: -webkit-background-clip:text begrenzt die
   Gradient-Flaeche auf die Glyph-Box; der kursive Ueberhang des letzten
   Buchstabens (z.B. "l" in Brakel/Dassel/Wolfenbuettel) faellt heraus ->
   wirkt wie ein gekappter Buchstabe. FIX: minimal padding-right erweitert
   die Element-/Gradient-Box -> voller Buchstabe sichtbar. Empirisch geprueft
   (brakel desktop, wolfenbuettel mobil) — Wort wieder vollstaendig.
   ============================================================ */
.city-hero h1 em {
  padding-right: .16em !important;
}

/* Doppel-Burger Fix 2026-06-22: w19 (Fixed) nur auf bundle-rechner+dach-analyse ueberzaehlig, w18 bleibt.
   ACHTUNG: premium-v14-ocean.css "PIERRE-BURGER-FORCE-VISIBLE" (Z.1336) erzwingt #burgerBtn{display:flex!important}
   (ID-Spezifitaet 1,0,0). Das w19-Element traegt id=burgerBtn -> Attribut-Regel allein verliert.
   Daher ueber #burgerBtn[data-w19-burger]:not(#zzqa) = (2,1,0) gezielt verstecken. NUR Mobil. */
@media (max-width: 768px) {
  #burgerBtn[data-w19-burger]:not(#zzqa) { display: none !important; }
}

/* QA-Swarm 2026-06-22 Fix: standorte Map-Labels ueberlappen mobil -> ausblenden (Stadt-Karten bleiben funktional) */
@media(max-width:768px){html body .region-map-pseudo .pin-label:not(#zzqa){display:none!important}}

/* ============================================================
   16) PERFEKTIONS-PASS 2026-06-22 (Workflow-Review, adversarial bestaetigt)
   ============================================================ */

/* 16a) INLINE-GRID 1fr 1fr ohne Media-Query bricht mobil nicht um (gewerbe-solar
   "100 kWp"-Praxis-Beispiel u.a., 6 Seiten) -> beide Spalten auf ~146px gequetscht,
   Text buchstabenweise. Inline-Grid laesst sich nur per Stylesheet-!important auf
   1 Spalte zwingen. Greift genau das Praxis-Beispiel-Muster (gap:60px). */
@media (max-width: 768px) {
  html body [style*="grid-template-columns:1fr 1fr;gap:60px"]:not(#zzqa) {
    grid-template-columns: 1fr !important;
  }
}

/* 16b) LEAD-FORMULAR-INPUTS auf Desktop ungestylt (nackte weisse Boxen, kein
   Padding/Border) — Styling war mobil-gescopt (waermepumpe-oder-gasheizung,
   solar-koeln u.a.). Lead-Form-Inputs auf ALLEN Viewports im Dark-Glass-Stil. */
html body .inline-lead-form input:not([type="checkbox"]):not([type="hidden"]):not([name="website"]):not(#zzqa),
html body .lead-form-mini input:not([type="checkbox"]):not([type="hidden"]):not([name="website"]):not(#zzqa),
html body .lead-form-row input:not([type="checkbox"]):not([name="website"]):not(#zzqa) {
  width: 100% !important;
  padding: 12px 14px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(148,163,184,0.32) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 16px !important;
}
html body .inline-lead-form input::placeholder:not(#zzqa),
html body .lead-form-mini input::placeholder:not(#zzqa) { color: rgba(255,255,255,0.5) !important; }

/* 16c) FOOTER-LINKS laufen zusammen ("Solar-PlanerHausplaner App"): die Links
   liegen in `.footer-links`, die CSS stylt aber nur `.footer-col a{display:block}`
   -> `.footer-links a` bleibt inline. Auf block zwingen -> gestapelt + lesbar. */
html body .footer-links a:not(#zzqa) {
  display: block !important;
  padding: 5px 0 !important;
}

/* 16d) APP "Waehle deinen Planer" (.tool-card): die Karte (Icon|Titel|Text|CTA)
   bleibt auf Mobil im Reihen-Layout -> Titel/CTA buchstabenweise gequetscht
   ("Solar -Plan er", "Star ten"). Auf Mobil vertikal stapeln. */
@media (max-width: 768px) {
  html body a.tool-card:not(#zzqa) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    text-align: left !important;
  }
}

/* 16e) LISA-HANDOFF-Box: die <strong> rendern auf Desktop #0F172A (dunkel) statt
   gold, weil die Box in einer .section-light liegt und Sektion 5 dort strong
   dunkel faerbt — die Box hat aber expliziten DUNKLEN Hintergrund -> dunkel auf
   dunkel, unlesbar. Strong-Akzentfarbe (gold) mit gleicher Spezifitaet + spaeter
   in der Kaskade zuruecksetzen. */
@media (min-width: 769px) {
  html body .lisa-handoff strong:not(#zzqa) { color: #ffce4d !important; }
}

/* ============================================================
   15) QA-FIX-PASS 2026-06-22 (Foreground): restliche Visual-Bugs
   ============================================================ */

/* A) HERO-CTA-BUTTONS ohne Basis-Optik: .v12-hero-buttons .v12-btn-* bekommen
   auf Seiten OHNE premium-design-v13.css nur eine Mobil-min-height, aber kein
   Hintergrund/Radius -> sie rendern als nackte unterstrichene Textlinks (Desktop:
   gewerbe-solar, solar-ratgeber). Globale Button-Optik analog b2b-solar nachziehen
   (greift Desktop UND Mobil). Scope auf .v12-hero-buttons -> beruehrt keine
   einzeln gestylten .v12-btn-* mit Inline-padding. */
html body .v12-hero-buttons .v12-btn-primary:not(#zzqa) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 28px !important;
  border-radius: 100px !important;
  background: linear-gradient(135deg, var(--accent-orange,#f59e0b), var(--accent-orange-2,#f97316)) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: none !important;
  text-decoration: none !important;
  box-shadow: 0 4px 25px var(--accent-orange-glow, rgba(245,158,11,.3)) !important;
}
html body .v12-hero-buttons .v12-btn-secondary:not(#zzqa) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 13px 26px !important;
  border-radius: 100px !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--text,#fff) !important;
  font-weight: 600 !important;
  border: 1.5px solid var(--border, rgba(148,163,184,.3)) !important;
  text-decoration: none !important;
}

/* B) STICKY-CTA UEBER COOKIE-BANNER: die Legacy-.lead-sticky-cta (angebot u.a.)
   blendet sich — anders als die v13-Bar — bei ausstehender Einwilligung NICHT aus
   und ueberlappt den Cookie-Banner. Bei cc-banner-active ausblenden (analog
   #sm-cta-bar-v13-w8 in Sektion 11). */
html.cc-banner-active .lead-sticky-cta { display: none !important; }

/* B2) FAB ueber Cookie-Banner (DESKTOP): #cookieConsentOverlay ist bauartbedingt
   nur z-index:55 (per Premium-JS/CSS fest, "unter sticky-CTA z=100"); ein blosses
   Anheben des Overlay-z setzt sich nicht durch. Stattdessen die ueberlappenden
   Corner-FABs (Chat z90 -> impressum "Einstellungen"; Tel z99 -> google-site-
   verification) bei ausstehender Einwilligung ueber den Banner heben. Mobil sind
   die FABs bereits per Sektion 3/8 positioniert. */
@media (min-width: 769px) {
  html.cc-banner-active #autark-chat-widget,
  html.cc-banner-active a.tel-btn-prominent,
  html.cc-banner-active aside.v14-tel-link {
    bottom: 150px !important;
  }
}

/* C) (entfaellt) Der ueberzaehlige Burger war NICHT .nav-burger/.v13-burger
   (diese sind mobil bereits unsichtbar), sondern das w19-Element via
   PIERRE-BURGER-FORCE-VISIBLE — siehe w19-Fix oben (#burgerBtn[data-w19-burger]).
   Der "Burger ueber H1" auf solar-vs-waermepumpe ist Hero-Kopfabstand und wird
   dort seitenlokal geloest. */

/* D) BREITE TABELLEN clippen rechts auf DESKTOP (solaranlage-mit-speicher,
   foerderung): .table-scroll-wrapper hat overflow-x:auto nur @max-width:600px,
   daher laeuft die breite Tabelle auf Desktop aus dem Container. Auf Desktop
   horizontalen Scroll erlauben statt am Rand abzuschneiden. */
@media (min-width: 769px) {
  html body .table-scroll-wrapper:not(#zzqa) {
    overflow-x: auto !important;
    max-width: 100% !important;
  }
}

/* E) SOLAR-DACHTYPEN: .dach-card ist auf Desktop ein 2-Spalten-Grid
   (280px Foto | 1fr Body), das Foto ist aber display:none (Skeleton). Per
   Grid-Auto-Placement landet der Body in der 280px-Foto-Spalte -> sehr schmale
   Textspalte (~250px), rechts ~70% leer. Da das Foto fehlt: einspaltig erzwingen. */
@media (min-width: 769px) {
  html body article.dach-card:not(#zzqa) { grid-template-columns: 1fr !important; }
}

/* F) PILLAR-HERO-BILD fuellt nur ~60% der Box (pillar-Leitfaden-Seiten, mobil): ein
   Override setzt object-fit:contain + width:auto (-> Natur-Breite 234px) statt der
   Komponenten-Regel. Mit :not(#zzqa) zurueck auf fuellend (16/10, cover). */
html body .hero-img-w6 img:not(#zzqa) {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
}

/* G) LEAD-FORMULAR-LABELS (.lead-form-row label) auf Mobil: Text + Input liegen
   nebeneinander -> schmale Textspalte bricht "Nam/e", "Telef/on", "PL/Z" mitten
   im Wort (photovoltaik-foerderung-2026 u.a.). Label auf Spalten-Stack
   (Text UEBER Input) -> kein Mitten-im-Wort-Umbruch, Felder bleiben nutzbar. */
@media (max-width: 768px) {
  html body .lead-form-row label:not(.lead-form-consent):not(#zzqa) {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: stretch !important;
  }
  html body .lead-form-row label:not(.lead-form-consent) input:not(#zzqa) {
    width: 100% !important;
  }
}

/* ============================================================
   17) PERFEKTIONS-PASS 2026-07-02
   a) #mobileMenu: Auf v13-Seiten (wallbox u.a.) fehlte die versteckende
      .mobile-menu-Regel -> das geschlossene Menue renderte auf DESKTOP als
      fixe Leiste ueber dem Content. Geschlossen (aria-hidden="true") darf es
      NIE sichtbar sein; beim Oeffnen setzt premium-v13/v14.js aria-hidden="false".
   b) app.html Planer-Karten: aggressives overflow-wrap:anywhere aus Bundle-CSS
      brach Woerter mitten drin ("Solaranl age") -> normaler Wortumbruch.
   ============================================================ */
/* :not(.open/.active/.is-open): premium-v13.js oeffnet NUR per Klasse (aria bleibt "true") */
#mobileMenu[aria-hidden="true"]:not(.open):not(.active):not(.is-open):not(#zzqa),
nav.mobile-menu[aria-hidden="true"]:not(.open):not(.active):not(.is-open):not(#zzqa) { display: none !important; }
a.tool-card p:not(#zzqa), .tool-card p:not(#zzqa) {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
/* 17c) Geoeffnetes #mobileMenu auf v13-Seiten (haben KEINE .mobile-menu-Basis-CSS):
   Vollbild-Overlay, lesbare Links. Greift nur mit .open (Burger-Klick). */
#mobileMenu.open:not(#zzqa) {
  display: flex !important;
  position: fixed; inset: 0; z-index: 2000;
  background: #0a1428;
  flex-direction: column; gap: 4px;
  justify-content: flex-start; align-items: stretch;
  padding: 84px 26px 30px; overflow: auto;
}
#mobileMenu.open .menu-link:not(#zzqa) {
  color: #fff; font-size: 1.12rem; padding: 13px 6px;
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.09);
}
#mobileMenu.open .menu-cta:not(#zzqa) {
  margin-top: 12px; background: #2563eb; color: #fff;
  padding: 13px 16px; border-radius: 10px; text-align: center; text-decoration: none; font-weight: 700;
}
#mobileMenu.open .menu-close:not(#zzqa) {
  position: absolute !important; top: 16px !important; right: 16px !important;
  left: auto !important; margin: 0 !important; width: auto !important;
  background: none; border: 0; color: #fff; font-size: 1.7rem; cursor: pointer; padding: 8px;
}