/*
 * 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) CITY-MAP-PLATZHALTER: leere/ladende Google-Maps-iframes
   erscheinen als grelle weisse Box im Dark-Theme. Dunkler,
   gerundeter Hintergrund laesst den Blank-Zustand sauber wirken
   (geladene Karte deckt ihn ab).
   ============================================================ */
.city-map {
  background: #101f33 !important;
  border-radius: 16px;
  overflow: hidden;
}
.city-map iframe {
  background: #101f33;
  border: 0;
}

/* ============================================================
   4) VERGLEICHSTABELLEN: kleiner Font + klarer Scroll-Hinweis
   Container scrollt bereits (overflow:auto), aber Inhalt wirkt
   abgeschnitten. Kleinere Schrift laesst mehr Spalten sehen.
   ============================================================ */
@media (max-width: 768px) {
  table.v12-comp-table,
  table.sla-table,
  table.wp-deep-table,
  table.cost-table,
  table.compare-table {
    font-size: 0.76rem !important;
  }
  table.v12-comp-table th,
  table.v12-comp-table td,
  table.sla-table th,
  table.sla-table td,
  table.wp-deep-table th,
  table.wp-deep-table td {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ============================================================
   5) KONTRAST: helle Sektionen (.section-light = --bg-light #F4F1EB)
   Viele Komponenten erben dort Dark-Theme-Weiss -> unleserlich.
   Lesbare dunkle Schrift erzwingen (gilt Desktop + Mobil).
   Nicht-gescopt auf Viewport, da der Bug auf beiden auftritt.
   ============================================================ */
/* :not(#zzqa) hebt die Spezifitaet (+1 ID), schlaegt komponenten-eigene
   !important-Regeln zuverlaessig. html body fuer zusaetzliches Gewicht. */
html body .section-light h1:not(#zzqa), 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 h6: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 td:not(#zzqa), html body .section-light th:not(#zzqa),
html body .section-light .num:not(#zzqa), html body .section-light .value:not(#zzqa),
html body .section-light .stat-num:not(#zzqa), html body .section-light .v12-val:not(#zzqa),
html body .section-light .daikin-spec:not(#zzqa), html body .section-light .daikin-name:not(#zzqa),
html body .section-light .faq-q:not(#zzqa), html body .section-light .faq-question:not(#zzqa),
html body .section-light .faq-a:not(#zzqa), html body .section-light .faq-answer: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;
}
/* Sekundaer-/Label-Texte etwas heller, aber lesbar (>= 4.5:1 auf #F4F1EB) */
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;
}
/* Eyebrow-/Section-Label/Badge in lesbarem dunklen Ton statt blassem Akzent */
html body .section-light .section-label:not(#zzqa), html body .section-light .eyebrow:not(#zzqa),
html body .section-light .dm-eyebrow:not(#zzqa) {
  color: #334155 !important;
}
/* nackte Verweis-Links in hellen Sektionen lesbar blau (keine Buttons) */
html body .section-light a:not(.btn):not(.btn-primary):not(.btn-secondary):not([class*="cta"]):not([class*="btn"]):not(#zzqa) {
  color: #1d4ed8 !important;
}
/* Nuklear-Spezifitaet (2 IDs) fuer hartnaeckige Ueberschriften/Eyebrows,
   die komponenten-spezifische oder spaeter ladende Regeln setzen. */
html body .section-light h2:not(#a):not(#b),
html body .section-light h3:not(#a):not(#b),
html body .section-light h4:not(#a):not(#b) {
  color: #0F172A !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;
}

/* ============================================================
   6) WEISSE FLOAT-PREIS-BADGE: Text war weiss auf weissem Badge
   (.v12-hero-float, z.B. "ab 2.890 €" auf klimaanlagen) -> unsichtbar.
   Nur dieses helle Badge dunkel faerben (Trust-Items auf Dunkel bleiben weiss).
   ============================================================ */
html body .v12-hero-float .v12-val:not(#zzqa),
html body .v12-hero-float .v12-label:not(#zzqa),
html body .v12-hero-float .v12-num:not(#zzqa),
html body .v12-hero-float > div:not(#zzqa),
html body .v12-hero-float span:not(#zzqa) {
  color: #0F172A !important;
}
html body .v12-hero-float .v12-label:not(#zzqa) {
  color: #475569 !important;
}