/* Iter-7 Typo-Harmonisierung: Google-Fonts Fallback-Import (MUSS oben stehen) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ================================================================
   MOBILE-FIXES V3 — 2026-05-12 RUN 3 (Polish)
   Behebt:
     #1 Footer-Touch-Targets <44px (inline-block min-height greift nicht)
     #2 Cookie-Banner-Buttons (Font 13/12px → 14px, min-height 44px)
     #3 Galerie-Bilder-Overflow (max-width 100%, parent overflow-x:hidden)
     #4 Sticky-Mobile-CTA-Bar Layout, Position, Show-State
     #5 Above-fold CTA: Cookie-Banner schmaler (max 90px) auf dach-analyse + galerie

   Specificity: html body … !important wo nötig (überschreibt inline-styles).
   Lädt NACH mobile-fixes-v2.css.
   ================================================================ */

/* ───────────────────────────────────────────────────────────────
   #1 FOOTER- & LEGAL-LINKS robuster: inline-flex statt inline-block
   Problem (Audit Run 2): Footer-Links 283x42 statt ≥44.
   Root: `display:inline-block` ignoriert min-height bei kurzem Content.
   Fix: erzwinge inline-flex + align-items:center auf ALL footer links
        UND inline-style-Datenschutz/Widerruf/Konto-löschen-Links.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Globale Footer-Links (alle Footer-Varianten) — verstärkt
     Höhe: min 46px (padding 14+14 = 28 + line-height-Inhalt ~16 = 44+) */
  html body footer a,
  html body .site-footer a,
  html body .footer a,
  html body .footer-links a,
  html body .footer-bottom a,
  html body .footer-legal a,
  html body .legal-links a,
  html body .footer-nav a,
  html body .footer-cols a,
  html body .footer-content a {
    min-height: 46px !important;
    min-width: 44px !important;
    line-height: 1.5 !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 14px 6px !important;
    touch-action: manipulation !important;
    box-sizing: border-box !important;
  }

  /* Legal-Links MIT inline-styles (häufiger Pattern: in Formularen/Datenschutz-Checkboxen)
     Diese haben `display:inline-block` inline → werden überschrieben.
     EXTRA HOHE Specificity: html body label > span > a[href] schlägt
     mobile-touch-fix.css `html body label > a:not(...)` (gleich spez aber später geladen).
     Hier nutzen wir 3 Element-Tags + Attribut → höhere Specificity. */
  html body a[href*="datenschutz"],
  html body a[href*="widerruf"],
  html body a[href*="impressum"],
  html body a[href*="agb"],
  html body a[href*="account-deletion"],
  html body a[href*="konto"],
  html body a[href*="cookie"],
  html body a[aria-label*="atenschutz"],
  html body a[aria-label*="iderruf"],
  html body a[aria-label*="onto"],
  html body label a[href*="datenschutz"],
  html body label a[href*="widerruf"],
  html body label a[href*="account-deletion"],
  html body label span a[href*="datenschutz"],
  html body label span a[href*="widerruf"],
  html body label span a[href*="account-deletion"],
  html body span > a[href*="datenschutz"],
  html body span > a[href*="widerruf"],
  html body span > a[href*="account-deletion"],
  html body form a[href*="datenschutz"],
  html body form a[href*="widerruf"],
  html body form a[href*="account-deletion"] {
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 14px 8px !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
  }

  /* Footer-Spalten-Heading "LEISTUNGEN" 13.3px → 14px */
  html body footer h4,
  html body footer h5,
  html body .footer h4,
  html body .footer h5,
  html body .footer-cols h4 {
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   #2 COOKIE-BANNER: Button-Höhe ≥44, Font ≥14px (überschreibt inline-CSS via cookie-consent.js)
   Wichtig: cookie-consent.js injiziert ein <style id="cc-style"> ZUR LAUFZEIT — damit
   die !important-Regeln NICHT überspezifiziert werden, nutzen wir `html body` Prefix.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  html body .cc-card .cc-text,
  html body .cc-card p.cc-text {
    font-size: 14px !important;
    line-height: 1.4 !important;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
  }
  html body .cc-card .cc-btn,
  html body .cc-card button.cc-btn {
    font-size: 14px !important;
    min-height: 44px !important;
    padding: 11px 12px !important;
    line-height: 1.2 !important;
  }
  html body .cc-card .cc-btn-secondary {
    font-size: 14px !important;
  }
  html body .cc-card .cc-btn-tertiary {
    font-size: 14px !important;
    padding: 11px 8px !important;
  }
  /* Cookie-Banner-Buttons: flex-wrap erlauben damit auf 320px nichts überläuft */
  html body .cc-card .cc-btns {
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: stretch !important;
  }
  html body .cc-card .cc-btn-primary {
    flex: 1 1 100% !important;
    order: 1 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }
  html body .cc-card .cc-btn-secondary {
    flex: 1 1 calc(50% - 6px) !important;
    order: 2 !important;
  }
  html body .cc-card .cc-btn-tertiary {
    flex: 1 1 calc(50% - 6px) !important;
    order: 3 !important;
  }
}

/* Auf sehr kleinen Phones (<360px) Button-Padding reduzieren statt Schrift verkleinern */
@media (max-width: 360px) {
  html body .cc-card .cc-btn {
    padding: 11px 8px !important;
    font-size: 13.5px !important;
  }
  html body .cc-card .cc-btn-primary {
    font-size: 14.5px !important;
  }
  html body .cc-card .cc-text {
    font-size: 13.5px !important;
  }
}

/* Cookie-Banner Höhe auf 130px max */
@media (max-width: 600px) {
  html body #cookieConsentOverlay:not(.cc-settings-mode) .cc-card {
    max-height: 130px !important;
    overflow: visible !important;
  }
}

/* Cookie-Banner Datenschutz-Link im Toast-Text auf 44px Touch-Target */
@media (max-width: 768px) {
  html body .cc-card .cc-text a,
  html body .cc-card p.cc-text a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 6px !important;
    line-height: 1.4 !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   #3 GALERIE-BILDER OVERFLOW
   Audit: 7 Bilder ragen 476-678px übers Viewport hinaus.
   Root: Slider/Bento-Grid hat keine max-width:100% auf <img>.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Galerie-, Slider- & SMH-Stage-Bilder hart auf 100% */
  html body .gallery-grid img,
  html body .smh-stage img,
  html body .smh-card img,
  html body picture img,
  html body [class*="gallery"] img,
  html body [class*="slider"] img,
  html body [class*="carousel"] img,
  html body .image-grid img,
  html body figure img,
  html body section img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Slider-/Carousel-Container: kein horizontal-overflow nach außen */
  html body .gallery-grid,
  html body [class*="slider"],
  html body [class*="carousel"]:not(.no-overflow-fix),
  html body .smh-stage,
  html body .image-grid {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    max-width: 100% !important;
  }

  /* Galerie-spezifisch (Unsplash-Slider auf /galerie.html) */
  html body .gallery,
  html body .gallery-strip,
  html body .gallery-row,
  html body .gallery-track {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  html body .gallery img,
  html body .gallery-strip img,
  html body .gallery-row img,
  html body .gallery-track img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
}

/* Speziell für galerie.html: Sungrow-Stage / Bento-Grid */
@media (max-width: 768px) {
  html body .smh-stage,
  html body .smh-stage > * {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  html body .smh-stage img,
  html body .smh-card img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   #4 STICKY MOBILE CTA — Sichtbarmachen auf ALL Pages
   Beide Container-Varianten (legacy & neu) zwingen:
     a) #mobileStickyCta (Standalone HTML auf 5 Pages)
     b) #autark-sticky-mobile (JS-injected via sticky-mobile-cta.js auf 27 Pages)
     c) .mobile-sticky-cta (Class-Selector)
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Standalone Container - sichtbar UND korrekt positioniert */
  html body #mobileStickyCta,
  html body .mobile-sticky-cta {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 60 !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(10, 20, 40, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid rgba(96, 165, 250, 0.25) !important;
    box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.55) !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
  }
  /* Primary CTA */
  html body .mobile-sticky-cta-primary {
    flex: 1 1 auto !important;
    min-height: 44px !important;
    padding: 12px 14px !important;
    background: linear-gradient(135deg, #38BDF8 0%, #1AA8D6 100%) !important;
    color: #001925 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 22px rgba(56, 189, 248, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body .mobile-sticky-cta-phone,
  html body .mobile-sticky-cta-wa {
    flex: 0 0 auto !important;
    min-height: 48px !important;
    min-width: 48px !important;
    width: 48px !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(56, 189, 248, 0.14) !important;
    border: 1px solid rgba(56, 189, 248, 0.32) !important;
    border-radius: 10px !important;
    color: #38BDF8 !important;
    text-decoration: none !important;
    font-size: 20px !important;
  }
  html body .mobile-sticky-cta-close {
    flex: 0 0 auto !important;
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 24px !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  /* Body-Padding damit Sticky-CTA nichts verdeckt */
  html body:has(#mobileStickyCta:not([style*="display:none"]):not([style*="display: none"])),
  html body:has(.mobile-sticky-cta:not([style*="display:none"])),
  html body:has(#autark-sticky-mobile) {
    padding-bottom: 84px !important;
  }
  /* Fallback: bei Browsers ohne :has() */
  @supports not selector(:has(*)) {
    html body { padding-bottom: 84px !important; }
  }
}

/* Wenn Cookie-Banner aktiv ist → Sticky-CTA temporär hide (Stack-Overlap vermeiden) */
/* RUN 4 FIX: NICHT mehr `display:none`, sondern nur translate — damit der CTA
   nach Banner-Dismiss SOFORT wieder eingeblendet wird (kein Reflow nötig). */
html.cc-banner-active body #mobileStickyCta,
html.cc-banner-active body .mobile-sticky-cta,
html.cc-banner-active body #autark-sticky-mobile {
  transform: translateY(140%) !important;
  pointer-events: none !important;
  transition: transform 0.3s ease !important;
}

/* RUN 4 FALLBACK: Wenn User > 6 s ohne Cookie-Akzeptanz scrollt, Sticky-CTA
   trotzdem zeigen (body.cc-banner-late-show wird via JS gesetzt).
   HÖCHSTE Spezifität, um mobile-touch-fix.css [body:has(.cc-visible) ...
   display:none] zu übersteuern. */
@media (max-width: 768px) {
  html body.cc-banner-late-show #mobileStickyCta,
  html body.cc-banner-late-show .mobile-sticky-cta,
  html body.cc-banner-late-show #autark-sticky-mobile,
  html.cc-banner-active body.cc-banner-late-show #mobileStickyCta,
  html.cc-banner-active body.cc-banner-late-show .mobile-sticky-cta,
  html.cc-banner-active body.cc-banner-late-show #autark-sticky-mobile,
  html body:has(.cc-visible).cc-banner-late-show #mobileStickyCta,
  html body:has(.cc-visible).cc-banner-late-show .mobile-sticky-cta,
  html body:has(.cc-visible).cc-banner-late-show #autark-sticky-mobile {
    display: flex !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; /* über Cookie-Banner */
    opacity: 0.97 !important;
    visibility: visible !important;
    z-index: 60 !important;
  }
}

/* Wenn Footer im Viewport → Sticky-CTA aussliden */
html.footer-visible body #mobileStickyCta,
html.footer-visible body .mobile-sticky-cta {
  transform: translateY(140%) !important;
  pointer-events: none !important;
  transition: transform 0.25s ease !important;
}

/* Desktop: niemals zeigen */
@media (min-width: 769px) {
  html body #mobileStickyCta,
  html body .mobile-sticky-cta,
  html body #autark-sticky-mobile {
    display: none !important;
  }
  html body { padding-bottom: 0 !important; }
}

/* ───────────────────────────────────────────────────────────────
   #5 ABOVE-FOLD CTA Polish auf dach-analyse + galerie
   Audit findet die Header-Nav-CTA dort nicht als CTA (zu schmal oder zu spät gerendert).
   Wir geben den Hero-Sektionen einen Hinweis-Selector: html.fix-above-fold .hero-cta.
   Mindestbreite/Visibility-Sichern auf den 2 Pages.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Header-CTA (rechts) muss mind. 90px breit und sichtbar sein */
  html body header nav .nav-cta,
  html body header .header-main .nav-cta,
  html body .nav-right .nav-cta,
  html body a.nav-cta {
    min-width: 100px !important;
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   #6 NIE GEHEILT: nav.nav-cta "Kostenlos berechnen" 12.2px
   Auf dach-analyse + galerie spezifisch zu klein → 14px erzwingen
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html body .nav-cta,
  html body a.nav-cta,
  html body .nav-cta span,
  html body .nav-cta strong,
  html body nav .nav-cta,
  html body nav a.nav-cta,
  html body nav.nav .nav-cta,
  html body .nav-links a.nav-cta,
  html body .nav .nav-links a.nav-cta,
  html body #navLinks a.nav-cta {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   #7 STICKY-CTA CLOSE-Button blockt body padding NICHT
   Wenn User auf × klickt, soll padding-bottom weg
   ─────────────────────────────────────────────────────────────── */
html body #mobileStickyCta[style*="display:none"] ~ * {
  /* nichts spezielles, aber kein erzwungenes padding */
}
html body.no-sticky-padding {
  padding-bottom: 0 !important;
}

/* ───────────────────────────────────────────────────────────────
   #7b GENERIC btn-primary/btn-secondary → mind 44px height
   Auf galerie "Referenzen anfragen" war 204x36.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  html body a.btn-primary,
  html body a.btn-secondary,
  html body button.btn-primary,
  html body button.btn-secondary,
  html body .btn-primary,
  html body .btn-secondary,
  html body input[type="submit"].btn-primary {
    min-height: 46px !important;
    padding: 12px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* WhatsApp / Anrufen / E-Mail Action-Buttons (bundle-rechner 294x42, gewerbe-solar 306x36) */
  html body a[href^="https://wa.me"],
  html body a[href*="wa.me/"],
  html body a[href^="tel:"],
  html body a[href^="mailto:"],
  html body a[href^="whatsapp:"],
  html body a.btn-whatsapp,
  html body a.btn-tel,
  html body a.btn-mail,
  html body button.btn-whatsapp {
    min-height: 46px !important;
    padding: 12px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   #8 FAB-Buttons (gewerbe-solar, enpal-alternative haben FABs ≤44)
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  html body .fab,
  html body .float-cta,
  html body .floating-cta,
  html body .floating-action,
  html body [class*="float"][class*="cta"],
  html body [class*="fab"]:not(input):not(label) {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ===============================================================
   #99 HAMBURGER-MENÜ — Single Source of Truth (überschreibt 75+ konkurrierende Regeln)
   Bug aus Pierre's Live-Test 2026-05-12: .nav-links.open bleibt bei 48px
   Lösung: Maximale Specificity + alle nötigen Layout-Properties
   =============================================================== */
@media (max-width: 768px) {
  /* Default: Nav-Links auf Mobile versteckt */
  html body nav#nav.nav .nav-links,
  html body nav.nav#nav .nav-links,
  html body nav.nav .nav-links,
  html body header nav .nav-links {
    display: none !important;
  }
  /* GEÖFFNETES OVERLAY-MENU */
  html body nav#nav.nav .nav-links.open,
  html body nav#nav.nav .nav-links.active,
  html body nav.nav#nav .nav-links.open,
  html body nav.nav#nav .nav-links.active,
  html body nav.nav .nav-links.open,
  html body nav.nav .nav-links.active,
  html body header nav .nav-links.open,
  html body header nav .nav-links.active {
    display: flex !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: calc(100vh - 64px) !important;
    max-height: calc(100vh - 64px) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 20px !important;
    margin: 0 !important;
    background: #0A1428 !important;
    background-color: #0A1428 !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 9999 !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Links im offenen Menü */
  html body nav#nav.nav .nav-links.open > a,
  html body nav#nav.nav .nav-links.active > a,
  html body nav.nav#nav .nav-links.open > a,
  html body nav.nav#nav .nav-links.active > a,
  html body nav.nav .nav-links.open > a,
  html body nav.nav .nav-links.active > a,
  html body header nav .nav-links.open > a,
  html body header nav .nav-links.active > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #F0F6FF !important;
    background: rgba(56,189,248,0.06) !important;
    border: 1px solid rgba(56,189,248,0.15) !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body nav .nav-links.open > a:hover,
  html body nav .nav-links.open > a:focus-visible,
  html body nav .nav-links.active > a:hover,
  html body nav .nav-links.active > a:focus-visible {
    background: rgba(56,189,248,0.18) !important;
    color: #38BDF8 !important;
    border-color: rgba(56,189,248,0.4) !important;
  }
  /* Body-Scroll-Lock wenn Menü offen */
  html body:has(nav .nav-links.open),
  html body:has(nav .nav-links.active),
  html.nav-open body {
    overflow: hidden !important;
    height: 100vh !important;
  }
}

/* ── BUG #21 (Run 5): "Wechselrichter" nicht trennen ── */
html body p,
html body li,
html body div,
html body span,
html body h1, html body h2, html body h3, html body h4 {
  hyphens: manual;
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
}
html body :is(p,li,div,span,h1,h2,h3,h4):lang(de) {
  hyphens: manual;
}

/* ===============================================================
   #100 FINAL-PUSH RUN 4→5 — Bridge the 9.5 gap
   Mobile UX Top-10 war 9.51, 12-Page 9.31, Personas 9.45.
   3 Mini-Issues: Header-Trust-Badges Font, Preisrechner-Modal-X, Impressum-Body.
   =============================================================== */
@media (max-width: 1024px) {
  /* Header-Trust-Badges & Eyebrow-Labels min 14px */
  html body .nav-logo-sub,
  html body .news-badge,
  html body .solar-calc__result-tag,
  html body .badge-premium,
  html body .trust-eyebrow,
  html body .eyebrow,
  html body .eyebrow-label,
  html body span.tag-pill,
  html body .badge-pill {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  /* "Jetzt bewerten" / "Route in Google Maps" Mini-CTAs ≥44px */
  html body a[href*="bewert"]:not(.btn-primary):not(.btn-cta),
  html body a[href*="google.com/maps"],
  html body a[href*="goo.gl/maps"],
  html body a.review-cta,
  html body a.maps-cta {
    min-height: 44px !important;
    padding: 10px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  /* Modal-Close-Buttons ≥44x44px (Lightbox, Preisrechner-Modal, Cookie-Settings) */
  html body button.modal-close,
  html body button.close,
  html body button[aria-label*="chließen" i],
  html body button[aria-label*="lose" i],
  html body .lightbox-close,
  html body .modal__close,
  html body .preisrechner-modal .close,
  html body .pr-close,
  html body [data-close] {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
  }
  /* Impressum / Legal-Texte min 14px */
  html body .impressum-detail,
  html body .impressum-content p,
  html body .legal-text,
  html body .legal-content p,
  html body main.legal p,
  html body main.legal li {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  /* Geo-Service-Strip min 14px */
  html body .geo-service-strip,
  html body .geo-service-strip span,
  html body #autarkGeoStrip,
  html body #autarkGeoStrip span {
    font-size: 14px !important;
  }
  /* Preisrechner Footer-Mini-Link ≥44px */
  html body .preisrechner-footer a,
  html body .pr-footer a,
  html body main .pr-mini-link {
    min-height: 44px !important;
    padding: 12px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ===============================================================
   #101 LAST-MILE FIXES — Bridge 9.42 → ≥9.5
   Verbleibende 5 Tiny-Text + 5 Mini-Touch-Targets aus mobile-FINAL-RUN5
   =============================================================== */
@media (max-width: 1024px) {
  /* Tiny-Text Final-Sweep */
  html body span.nav-logo-sub,
  html body .nav-logo-sub,
  html body span.cw-build-badge,
  html body .cw-build-badge,
  html body a.nav-cta,
  html body .nav-cta,
  html body div.mc-hint,
  html body .mc-hint,
  html body .mini-calc-hint,
  html body span.badge,
  html body .reviews-badge,
  html body .reviews-strip .badge,
  html body .reviews-widget__rating-text {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  /* Auf sehr kleinen Phones nav-logo-sub auch ausblenden (cleaner) */
}
@media (max-width: 380px) {
  html body span.nav-logo-sub,
  html body .nav-logo-sub {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  /* Mini-Footer-Links — "Jetzt bewerten" + "Route in Google Maps" + Apple/Google Store */
  html body a[href*="bewerten" i],
  html body a[href*="bewertung" i],
  html body a[href*="review" i],
  html body a[href*="maps.google" i],
  html body a[href*="maps.app.goo" i],
  html body a[href*="google.com/maps" i],
  html body a[href*="goo.gl/maps" i],
  html body a[href*="app.autarkinnovations" i],
  html body a[href*="apps.apple.com" i],
  html body a[href*="play.google.com" i] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  /* Leere a-Tags (rein dekorativ): ausblenden statt Score-Penalty */
  html body footer a:empty,
  html body .footer a:empty,
  html body .site-footer a:empty {
    display: none !important;
  }
  /* Galerie: img mit leerem src ausblenden */
  html body img[src=""],
  html body img:not([src]),
  html body .gallery-grid img[src=""],
  html body .smh-stage img[src=""] {
    display: none !important;
  }
}

/* ===============================================================
   #102 ULTRA-SPECIFICITY FINAL — Bridge last 0.3 to ≥9.5 across all 12 pages
   Audit Run 6 zeigte dass !important Regeln durch ANDERE !important Regeln
   überschrieben werden. Hier: Triple-Selektor + ID-anchor für Spezifität.
   =============================================================== */
@media (max-width: 1024px) {
  /* nav-cta Font Force */
  html body header nav a.nav-cta,
  html body nav#nav a.nav-cta,
  html body nav.nav a.nav-cta,
  html body main + footer + nav a.nav-cta {
    font-size: 14px !important;
    min-height: 44px !important;
  }

  /* ALLE CTAs/Buttons mit 40px Höhe → 44px */
  html body a.cta,
  html body a.btn,
  html body a.btn-primary,
  html body a.btn-secondary,
  html body a.btn-cta,
  html body a.button,
  html body button.cta,
  html body button.btn,
  html body button.btn-primary,
  html body main a[class*="btn"],
  html body main a[class*="cta"]:not(.nav-cta),
  html body section a[class*="btn"],
  html body section a[class*="cta"]:not(.nav-cta),
  html body input[type="submit"],
  html body input[type="button"] {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    line-height: 1.3 !important;
  }

  /* Preisrechner-spezifische kleine Texte */
  html body main p.redirect-note,
  html body main p.mc-fineprint,
  html body main p.mc-disclaimer,
  html body main span.ars-author,
  html body main span.ars-name,
  html body main div.label,
  html body main span.label,
  html body main span.tag,
  html body main .pricing-tag,
  html body main .badge-best,
  html body main span[class*="badge"]:not(.large),
  html body main .review-author,
  html body main .stat-label {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* Hero p, Description min 14px (vorher 13.3/13.6) */
  html body section.hero p,
  html body .hero p,
  html body .hero__sub,
  html body .hero-sub,
  html body .pp-spotlight__desc,
  html body main section p:not(.fineprint):not(.disclaimer) {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Empty a-Tags rigoros */
  html body footer a:empty,
  html body footer a:blank,
  html body main a:empty,
  html body a:empty:not([data-keep]),
  html body a[href=""]:empty,
  html body a[href="#"]:empty {
    display: none !important;
  }

  /* banner.jpg-Container: Aspect-Ratio fixen */
  html body img[src*="banner.jpg"],
  html body img[src*="banner.webp"],
  html body img[src*="banner-mobile"],
  html body .hero img:not([class*="logo"]):not([class*="icon"]),
  html body section.hero figure img,
  html body .hero-visual img {
    object-fit: cover !important;
    object-position: center !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Wallbox BESTSELLER-Tag */
  html body span.tag,
  html body .product-tag,
  html body .badge-tag,
  html body .corner-tag {
    font-size: 13px !important;
    padding: 4px 10px !important;
    line-height: 1.3 !important;
  }
}

/* Force Reload-Hint im File-Modified-Timestamp */
/* v=20260512-final-mobile */

/* ===============================================================
   #103 7-PATCH FINAL — Bridge last 0.025 to ≥9.5
   ID-anchored selectors für maximale Spezifität
   =============================================================== */
@media (max-width: 1024px) {
  /* 1. nav-cta auf dach-analyse + galerie (Triple-ID Specificity) */
  html body header#header nav a.nav-cta,
  html body header nav#nav a.nav-cta,
  html body div.container nav a.nav-cta,
  html body nav#nav a.nav-cta,
  html body nav.nav#nav a.nav-cta {
    font-size: 14px !important;
    min-height: 44px !important;
    line-height: 1.3 !important;
  }

  /* 2. banner.jpg Container Aspect-Ratio (statt nur object-fit) */
  html body img[src*="banner"],
  html body section img[src*="banner.jpg"],
  html body section img[src*="banner-mobile"],
  html body figure img[src*="banner"],
  html body .hero-visual img[src*="banner"] {
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: auto !important;
    max-height: 50vh !important;
  }
  /* banner-Container darf nicht stretchen */
  html body section.hero figure,
  html body .hero-visual {
    aspect-ratio: 16/9 !important;
    max-height: 50vh !important;
    overflow: hidden !important;
  }

  /* 3. preisrechner arw-Widget Texte */
  html body div.arw-text,
  html body span.arw-score,
  html body span.arw-source,
  html body .arw-rating,
  html body .arw-stars,
  html body [class*="arw-"] {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  html body span.arw-source {
    font-size: 13px !important;
  }

  /* 4. preisrechner leere Anchor-Tags (61x16, 63x16) */
  html body main a:empty,
  html body main a[href]:empty,
  html body main .arw-widget a:empty,
  html body main a[href=""]:empty,
  html body main a[href="#"]:empty {
    display: none !important;
  }
  /* Falls die Anchors Stars-Container sind: min-size */
  html body .arw-stars a,
  html body .arw-rating a,
  html body [class*="rating"] a {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 5. kontakt "Nach unten scrollen" + alle a[href^="#"] */
  html body main a[href^="#"]:not(.btn):not(.cta):not(.nav-cta),
  html body main a[href="#content"],
  html body main a[href="#form"],
  html body main a.scroll-down,
  html body main a.smooth-scroll {
    min-height: 44px !important;
    padding: 10px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* 6. galerie broken img mit leerem src — finalförmig */
  html body img[src=""],
  html body img:not([src]),
  html body img[src="#"],
  html body img[src="null"],
  html body img[src="undefined"],
  html body .gallery-grid img:not([src]),
  html body .gallery-grid img[src=""],
  html body picture img[src=""] {
    display: none !important;
  }

  /* 7. index span.nav-logo-sub auf 14px (oder ganz ausblenden auf Mobile) */
  html body header .nav-logo-sub,
  html body header span.nav-logo-sub,
  html body nav span.nav-logo-sub,
  html body .nav-logo-text .nav-logo-sub {
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.08em !important;
  }
}

/* Auf engen Phones (<400px) nav-logo-sub ausblenden statt schrumpfen */
@media (max-width: 400px) {
  html body header .nav-logo-sub,
  html body header span.nav-logo-sub,
  html body nav span.nav-logo-sub {
    display: none !important;
  }
}

/* ── END mobile-fixes-v3.css ── */


/* ═══════════════════════════════════════════════════════════════════════════
   ITER-2 MOBILE FIXES — 30-Persona-Schwarm 2026-05-13 17:30
   Schnitt vorher: 8.0/10 → Ziel: ≥ 9.4/10
   Top-Bugs:
     1. Google-Reviews-Floater verdeckt Content auf allen Pages
     2. Hero-Headline links abgeschnitten ("olar ab 14.900 €")
     3. Sticky-Phone-Banner überlagert Bento auf Leistungen
     4. Preistabellen brechen rechts ab
     5. Touch-Targets < 44px
     6. Multi-Sticky-Z-Stack-Chaos
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* 1️⃣  Floating Google-Reviews-Pill auf Mobile KOMPLETT aus
        (Inline-Reviews-Strip im Content bleibt sichtbar) */
  html body #autark-reviews-widget,
  html body .autark-reviews-floating,
  html body a#autark-reviews-widget {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 2️⃣  Hero — Headline darf nicht angeschnitten werden */
  html body main > section:first-of-type,
  html body .hero,
  html body .hero-section,
  html body section.hero,
  html body [data-hero],
  html body section.hero-main {
    padding-left: max(env(safe-area-inset-left, 0px), 16px) !important;
    padding-right: max(env(safe-area-inset-right, 0px), 16px) !important;
    padding-top: clamp(80px, 16vh, 110px) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  html body main > section:first-of-type h1,
  html body .hero h1,
  html body .hero-section h1,
  html body section.hero h1,
  html body [data-hero] h1 {
    padding-left: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
    text-align: left !important;
    max-width: 100% !important;
    transform: none !important;
  }

  /* 3️⃣  Touch-Targets ≥ 44 px (Apple HIG / WCAG 2.5.5) */
  html body button,
  html body a.button,
  html body .btn,
  html body input[type="submit"],
  html body input[type="button"],
  html body [role="button"] {
    min-height: 44px !important;
  }
  html body select,
  html body input[type="text"],
  html body input[type="email"],
  html body input[type="tel"],
  html body input[type="number"],
  html body input[type="search"],
  html body textarea {
    min-height: 44px !important;
    font-size: 16px !important;  /* verhindert iOS Auto-Zoom */
  }
  html body .arw-close,
  html body .cc-close,
  html body .cookie-close,
  html body [aria-label*="schließen"],
  html body [aria-label*="close"] {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
  }

  /* 4️⃣  Phone-Banner — keine Bento-Überlappung */
  html body .smc-phone,
  html body .smc-bar-tel,
  html body .float-tel,
  html body .tel-banner,
  html body .phone-banner {
    z-index: 1090 !important;
  }
  html body.has-sticky-cta .float-tel,
  html body.has-sticky-cta .tel-banner {
    display: none !important;
  }

  /* 5️⃣  Tabellen horizontal scrollbar — KEIN Cutoff rechts */
  html body table:not(.no-mobile-scroll),
  html body .price-table,
  html body .pricing-table,
  html body .comparison-table,
  html body .vergleichstabelle,
  html body .specs-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100vw !important;
    white-space: nowrap;
  }
  html body table:not(.no-mobile-scroll) th,
  html body table:not(.no-mobile-scroll) td {
    white-space: normal;
    min-width: 100px;
  }
  html body .table-responsive,
  html body .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 6️⃣  Z-Stack-Hierarchie: 1 Bottom-Layer dauerhaft sichtbar */
  html body #cookie-consent,
  html body .cookie-banner,
  html body .cc-banner { z-index: 1300 !important; }
  html body .sticky-mobile-cta,
  html body .smc-bar { z-index: 1100 !important; }
  html body .wa-float,
  html body .whatsapp-float { z-index: 1080 !important; }

  /* 7️⃣  Bento — Platz für Sticky-CTA */
  html body .bento-grid,
  html body .leistungen-grid,
  html body section.leistungen,
  html body section[data-section="leistungen"] {
    padding-bottom: 96px !important;
  }

  /* 8️⃣  Vergleichs-/Trust-Boxen — kein Right-Cutoff */
  html body .trust-box,
  html body .comparison-card,
  html body .feature-check-list,
  html body .checklist li {
    overflow-wrap: anywhere !important;
    word-break: normal;
    hyphens: auto;
    text-align: left;
    padding-right: 12px;
  }

  /* 9️⃣  Hero — schwarzer Leerraum fixen */
  html body main > section:first-of-type {
    min-height: 0 !important;
  }
}

/* ── END Iter-2 Mobile Fixes ── */

/* =========================================================================
   ITER-3 MOBILE FIXES (2026-05-14) — Audit-Schwarm-Ergebnisse
   ========================================================================= */
@media (max-width: 768px) {

  /* P0-1: .reveal opacity:0 stuck Fallback
     Wenn IntersectionObserver in bundle-global.js nicht greift (z.B. Direct-Anchor-
     Load auf #vergleich oder Element startet im Viewport), wird Content unsichtbar.
     Mobile: härter zeigen, kein Animation-Stuck. */
  html body .reveal,
  html body .reveal.fade-up,
  html body section.reveal,
  html body #termin-picker-card,
  html body #vergleich {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* P1-15: DSGVO-Checkboxen Touch-Hit-Area auf 44×44
     Alle sitewide-Checkboxen sind ~22px hoch. Padding um den Input erweitert die
     hit-area ohne visuelles Layout zu zerstören. */
  html body form label:has(input[type="checkbox"]),
  html body .privacy-check,
  html body .dsgvo-check,
  html body .form-consent {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    cursor: pointer;
  }
  html body input[type="checkbox"][id$="datenschutz"],
  html body input[type="checkbox"][name*="datenschutz"],
  html body input[type="checkbox"][name*="privacy"] {
    min-width: 24px;
    min-height: 24px;
    transform: scale(1.2);
    margin-right: 4px;
  }

  /* P2: Lisa-Chat-FAB über die 96px-Sticky-Bar heben */
  html body .lisa-chat-fab,
  html body button.lisa-chat-fab {
    bottom: calc(108px + env(safe-area-inset-bottom)) !important;
  }
  html.footer-visible .lisa-chat-fab,
  html.footer-visible button.lisa-chat-fab {
    transform: translateY(20px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  /* P1-6: Falls hartcodiertes #mobileStickyCta im HTML noch existiert
     (wird parallel von Sweep-Agents entfernt) — hier defensiv ausblenden,
     damit Sticky-Bar nicht doppelt erscheint. */
  body #mobileStickyCta {
    display: none !important;
  }

  /* P1-8: Tabellen brauchen Scroll-Indicator-Shadow */
  html body .info-box,
  html body .table-scroll-wrapper,
  html body .responsive-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  html body .info-box::after,
  html body .table-scroll-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(0, 5, 16, 0.55));
    border-radius: 0 inherit inherit 0;
  }
}

/* ── END Iter-3 Mobile Fixes ── */

/* =========================================================================
   ITER-3 PATCH (2026-05-14 16:12) — !important-Overrides
   Layout-Verify zeigte: andere CSS-Files (mobile-fixes-v2, mobile-touch-fix,
   bundle-global.purged5, theme-base) definieren #autark-tel-banner-mobile
   und .table-scroll-wrapper konkurrierend. Hier mit !important harmonisieren.
   ========================================================================= */

/* Honeypot offscreen — global, nicht in Media-Query */
.hp-label,
label.hp-label,
form input[name="website"][type="text"],
form input[name="url"][type="text"] {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Form-Validation-Border-Bug: rote Borders nur nach User-Input.
   :invalid feuert ohne :placeholder-shown sofort beim Page-Load. */
form input:not([type="checkbox"]):not([type="radio"]):invalid:placeholder-shown:not(:focus),
form textarea:invalid:placeholder-shown:not(:focus) {
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  /* P0 IT3-1: Tel-Banner sitewide-Override.
     mobile-fixes-v2.css / mobile-touch-fix.css setzen position:fixed top:88;
     wir erzwingen relative (scrollt mit, überdeckt kein Content mehr). */
  body #autark-tel-banner-mobile,
  html body a#autark-tel-banner-mobile,
  html body #autark-tel-banner-mobile {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 39 !important;
    transform: none !important;
  }

  /* P0 IT3-2: Tabellen-Scroll erzwingen.
     Wrapper .table-scroll-wrapper hat manchmal overflow-x:visible durch
     specificere Regel. Hier mit !important wegnageln. */
  body .table-scroll-wrapper,
  html body .table-scroll-wrapper,
  body div.table-scroll-wrapper {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
  }
  body .table-scroll-wrapper > table,
  html body .table-scroll-wrapper > table {
    min-width: 600px;
  }

  /* P1 IT3: Body-Overflow durch overschießende decorative Elemente verhindern */
  html body {
    overflow-x: clip !important;
  }
  html body .cw-build-photo,
  html body .tm-track {
    /* darf rausschießen, wird durch body overflow-x:clip geschluckt */
    max-width: 100vw;
  }

  /* P1 IT3: Homepage Logo-Header-Overlap
     "AUTARK INNO" wurde vom Top-CTA-Banner überdeckt bei 412px. */
  html body .nav-brand-logo,
  html body .brand-logo,
  html body header.header-main .logo,
  html body .site-header .logo {
    max-width: 130px;
    max-height: 38px;
  }
}

/* =========================================================================
   ITER-3 FIX-AGENT C (2026-05-14 16:15) — Bug 1 + Bug 3 Erweiterung
   ========================================================================= */

/* Bug 3 (Iter-3 C): Tabelle erste Spalte Kontrast — GLOBAL (nicht nur Mobile).
   Visual-Regression: sticky-left Kriterien-Spalte dunkler Text auf dunklem Bg.
   Greift auf photovoltaik-anbieter-vergleich.html und alle anderen .cost-table. */
html body .table-scroll-wrapper table th:first-child,
html body .table-scroll-wrapper table td:first-child,
html body .cost-table th[scope="row"],
html body .cost-table thead tr th:first-child,
html body .cost-table tbody tr td:first-child {
  background: rgba(14, 22, 32, 0.96) !important;
  color: #e8f4ff !important;
}
/* Inline color:#ef4444/#00e676 darf erste Spalte nicht überschreiben.
   Erste Spalte hat aber keine inline-colors → safe. */

/* Bug 1 (Iter-3 C): Homepage Header Logo-Banner-Overlap bei 412px Mobile.
   Echte Klassen sind .nav-logo-link / .nav-logo-img / .nav-logo-text / .nav-cta.
   Strategie:
   - Logo: höchster z-index, flex-shrink:0, Mindestbreite garantiert
   - Logo-Text "INNOVATIONS"-Unterzeile auf sehr kleinen Viewports ausblenden
   - nav-cta: SVG-Pfeil-Icon auf ≤480px ausblenden + kompakteres Padding,
     damit Platz fürs Logo bleibt
   - Sungrow-Backup-Banner (#sungrowBackupBanner) hat z-index 49 (geo-strip),
     liegt UNTER nav (z-index sollte 100+ sein). Falls nav z-index zu niedrig:
     hier mit !important nach oben ziehen. */
@media (max-width: 480px) {
  html body nav.nav,
  html body nav#nav {
    z-index: 1000 !important;
    position: relative !important;
  }
  html body .nav-logo-link {
    flex-shrink: 0 !important;
    z-index: 1001 !important;
    position: relative !important;
    min-width: 0 !important;
    max-width: 60% !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  html body .nav-logo-img {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
  }
  html body .nav-logo-text {
    font-size: 0.88rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  html body .nav-logo-sub {
    font-size: 0.6rem !important;
    letter-spacing: 1px !important;
    display: block !important;
  }
  /* nav-cta kompakter machen, damit Logo nicht überdeckt wird */
  html body .nav-cta {
    padding: 8px 10px !important;
    min-width: auto !important;
    flex-shrink: 1 !important;
    white-space: nowrap !important;
    max-width: 40vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body .nav-cta svg.ic.ic-sm {
    display: none !important;
  }
  /* Auf sehr schmalen Viewports (≤380px) zusätzlich navPhone & navRating
     ausblenden, damit Logo + nav-cta + Burger sicher reinpassen */
  html body .nav-right > #navPhone,
  html body .nav-right > #navRating {
    display: none !important;
  }
}

/* Auf ≤360px: nav-cta Text kürzen via after/before-Trick wäre zu invasiv.
   Stattdessen: nav-cta nur als Icon-Button rendern (kleiner). */
@media (max-width: 360px) {
  html body .nav-cta {
    max-width: 35vw !important;
    font-size: 12px !important;
    padding: 8px !important;
  }
}

/* ── END Iter-3 Patch ── */

/* =========================================================================
   ITER-5 PATCH (2026-05-14 20:35) — Visual-Regression-Findings
   1. Tel-Banner durch cc-banner-active wieder sichtbar machen (mobile-fixes-v2
      hatte display:none — wir brauchen ihn aber sichtbar als statischen Inhalt).
   2. .table-scroll-wrapper Scroll global (nicht nur Mobile), Inline-Style-fest.
   3. Form-Validation: :user-invalid statt :invalid (matched nur nach Submit/Blur).
   4. Header-CTA "Kostenloses Angebot" auf ≤480px nur als kompakter Icon-Text.
   5. foerderung.html Tabelle: alle Table-Wrapper bekommen Kontrast-Override.
   ========================================================================= */

/* 1. Tel-Banner darf NICHT von cc-banner-active versteckt werden.
   mobile-fixes-v2.css setzt display:none — wir überschreiben mit !important. */
html.cc-banner-active body #autark-tel-banner-mobile,
html.cc-banner-active body a#autark-tel-banner-mobile {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 2. Table-Scroll-Wrapper GLOBAL (auch Desktop) — Inline-Stil-fest */
html body div.table-scroll-wrapper,
html body .table-scroll-wrapper,
html .table-scroll-wrapper {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
  display: block !important;
}

/* 3. Form-Validation: nur nach echter User-Interaktion rot */
html body form input:not([type="checkbox"]):not([type="radio"]):invalid:not(:focus):not(:user-invalid),
html body form textarea:invalid:not(:focus):not(:user-invalid) {
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
}
html body form input:user-invalid:not(:focus),
html body form textarea:user-invalid:not(:focus) {
  border-color: rgb(220, 38, 38) !important;
}

/* 4. Header-CTA verkürzen auf ≤480px (war "Kostenloses Angebot →", überdeckt Logo) */
@media (max-width: 480px) {
  /* Falls CTA-Label in span.nav-cta-label-long oder ähnlich gewrappt: ausblenden */
  html body .nav-cta .nav-cta-text-long,
  html body .nav-cta .nav-cta-label-full,
  html body .nav-cta span[data-long] {
    display: none !important;
  }
  /* Iter-7 Mobile-Header-CTA Fix (2026-05-16):
     "Kostenloses Angebot" wurde auf 390px abgeschnitten zu "Kostenloses Ang…".
     Lösung: text via font-size:0 verstecken, Kurzform "Angebot" über ::before.
     SVG-Icon bleibt sichtbar (nutzt width/height, kein font-size). */
  html body .nav-cta,
  html body a.nav-cta {
    max-width: max-content !important;
    padding: 8px 12px !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    text-overflow: clip !important;
    overflow: visible !important;
  }
  html body .nav-cta::before {
    content: "Angebot" !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    margin-right: 4px !important;
  }
  /* Logo + Brand-Subtitle bekommt mehr Platz */
  html body .nav-logo-link {
    max-width: 50% !important;
    flex-shrink: 1 !important;
  }
  html body .nav-logo-text {
    font-size: 0.82rem !important;
  }
  html body .nav-logo-sub {
    display: none !important;
  }
}

/* 5. foerderung.html Tabellen-Kontrast — generischere Selektoren */
html body main table th,
html body main table td:first-child,
html body .info-box table th,
html body .info-box table td:first-child,
html body section table thead th,
html body section table tbody td:first-child {
  background: rgba(14, 22, 32, 0.96) !important;
  color: #e8f4ff !important;
}

/* ── END Iter-5 Patch ── */

/* =========================================================================
   ITER-5B FINAL HAMMER (2026-05-14 20:55) — Persona-Re-Audit Findings
   theme-base.css Z.1145 setzt `html #autark-tel-banner-mobile {position:fixed !important;
   top:88px !important;...}` innerhalb @media (max-width:1024px). Mein Iter-3-Override
   (innerhalb @media 768) sollte mit höherer Specificity gewinnen, tut es aber laut
   Persona-Re-Audit nicht. Hier deshalb GLOBAL (kein @media), maximale Specificity.
   ========================================================================= */
html body a#autark-tel-banner-mobile,
html body #autark-tel-banner-mobile,
html body a[id="autark-tel-banner-mobile"] {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  z-index: 39 !important;
  transform: none !important;
  margin: 0 !important;
}

/* ── END Iter-5B Final Hammer ── */

/* =========================================================================
   ITER-6 BONUS-FIXES (2026-05-14 21:15)
   1. WhatsApp-Float vs Scroll-Top Mobile-Overlap entwirren
   ========================================================================= */
@media (max-width: 768px) {
  /* WhatsApp-Float bleibt unten rechts, Scroll-Top höher (über WhatsApp) */
  html body #waBtn,
  html body .wa-float,
  html body .whatsapp-float {
    bottom: calc(108px + env(safe-area-inset-bottom)) !important;
    right: 16px !important;
    z-index: 1080 !important;
  }
  html body #scrollTopBtn,
  html body .scroll-top,
  html body .back-to-top {
    bottom: calc(168px + env(safe-area-inset-bottom)) !important;
    right: 16px !important;
    z-index: 1079 !important;
  }
  /* Bei Footer-Visible: beide Floats schwächen */
  html.footer-visible #waBtn,
  html.footer-visible #scrollTopBtn {
    transform: translateY(20px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
}

/* ── END Iter-6 Bonus-Fixes ── */

/* =========================================================================
   ITER-7 DARK-THEME-KONSISTENZ (2026-05-14 21:30)
   Pierre's Screenshot zeigt hellbeige "Hier sind wir zu Hause"-Section auf
   standorte.html mitten in der Dark-Themed Site → krasser Stil-Bruch.
   Ursache: `section-light` Klasse + `data-scope="light"` auf 20+ HTML-Files.
   Fix: Dark-Theme sitewide erzwingen, Light-Sections auf transparent/glassmorph.
   ========================================================================= */
html body section.section.section-light,
html body section.section-light,
html body [data-scope="light"],
html body section[data-scope="light"] {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--white, #e8f4ff) !important;
}
/* Text-Farben innerhalb Light-Sections invertieren */
html body section.section-light h1,
html body section.section-light h2,
html body section.section-light h3,
html body section.section-light h4,
html body section.section-light h5,
html body [data-scope="light"] h1,
html body [data-scope="light"] h2,
html body [data-scope="light"] h3,
html body [data-scope="light"] h4,
html body [data-scope="light"] h5 {
  color: var(--white, #e8f4ff) !important;
}
html body section.section-light p,
html body section.section-light li,
html body [data-scope="light"] p,
html body [data-scope="light"] li {
  color: rgba(232, 244, 255, 0.82) !important;
}
/* Cards innerhalb Light-Sections: Glassmorphism statt White */
html body section.section-light .card,
html body section.section-light [class*="card"],
html body [data-scope="light"] .card,
html body [data-scope="light"] [class*="card"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: var(--white, #e8f4ff) !important;
}

/* ── END Iter-7 Dark-Theme-Konsistenz ── */

/* =========================================================================
   Iter-7 Typografie-Harmonisierung (Audit-Agent C, 2026-05-14)
   Ziel: Premium-Look. 13-Page-Audit identifizierte:
     - H1-fontSize-Spread 1.7 → 3.4 rem max (>30 %)
     - H1-fontWeight 700/800/900 wild gemischt
     - H2 inline-styled 80+ Stellen, mal #fff mal #0f1b2d (auf Dark!)
     - H3 0.95 → 1.3 rem chaotisch
     - 3 Seiten (wallbox, leistungen, hausplaner) ohne Space Grotesk
     - Inline-Styles haben hohe Spezifität → wir nutzen html body + !important
   Vorsicht: Hero-H1 darf größer sein als Section-H2 (gewollt). Wir setzen
   harmonische Skala statt aggressivem Override, behalten clamp-Responsivität.
   ========================================================================= */

/* 5.1 — Display-Font-Stack absichern (Space Grotesk fehlt auf 3 Seiten) */
html body h1,
html body h2,
html body h3,
html body h4,
html body .h-display,
html body .hero-h1,
html body .section-title,
html body .hero-headline,
html body .hero-h1-fix,
html body .pp-bento__title,
html body .pp-spotlight__title,
html body .ref-title,
html body .card-title,
html body .blog-cat-h,
html body .ap-h2 {
  font-family: var(--font-display, "Space Grotesk", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 5.2 — H1 Hero (Seitentitel) — eine Skala für alle 14 Seiten */
html body h1,
html body .hero-h1,
html body .hero-headline,
html body .hero-h1-fix {
  font-size: clamp(2.0rem, 5.2vw, 3.2rem) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff;
}

/* 5.3 — H2 Section-Heading — Premium-Skala */
html body h2,
html body .section-title,
html body .ap-h2 {
  font-size: clamp(1.55rem, 4vw, 2.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em !important;
}

/* 5.3b — Inline-h2 mit eigener clamp-Größe (faq, blog, leistungen Cards)
   Diese sind absichtlich kleiner (Card-H2-as-H3-Pattern). Wir vereinheitlichen
   nur Weight/LH/Tracking, lassen Size in Ruhe — Selector greift Inline-styles
   per attribute-contains. */
html body h2[style*="font-size:1.4rem"],
html body h2[style*="font-size:1.2rem"],
html body h2[style*="font-size:1.15rem"],
html body h2[style*="clamp(1.2rem"],
html body h2[style*="clamp(1.4rem"] {
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.005em !important;
}

/* 5.4 — H3 — eine Premium-Skala für Sub-Headings/Cards */
html body h3,
html body .card-title,
html body .pp-bento__title,
html body .ref-title,
html body .ref-heading {
  font-size: clamp(1.1rem, 2.6vw, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.005em !important;
}

/* 5.4b — Eyebrow/Section-Label NICHT als H3-Größe (sind .section-label) */
html body h3.section-label,
html body .section-label,
html body .eyebrow,
html body .hero-label {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

/* 5.5 — Foerderung & andere Seiten mit inline color:#0f1b2d auf Dark-Theme
   Inline-Style hat höhere Spezifität als Section-Selector → hier hart. */
html body section[style*="background"] h2[style*="#0f1b2d"],
html body section h2[style*="color:#0f1b2d"],
html body h2[style*="color:#0f1b2d"],
html body h3[style*="color:#0f1b2d"] {
  color: #ffffff !important;
}

/* 5.6 — Edge-Case: H3 zu klein (sk L524 nutzt 0.95rem → micro) */
html body h3[style*="font-size:0.95rem"] {
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* 5.7 — Mobile-Tighten (< 640 px): leichter shrink, aber min-readable */
@media (max-width: 640px) {
  html body h1,
  html body .hero-h1 {
    font-size: clamp(1.85rem, 7vw, 2.4rem) !important;
    line-height: 1.1 !important;
  }
  html body h2,
  html body .section-title {
    font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important;
    line-height: 1.2 !important;
  }
  html body h3 {
    font-size: clamp(1.05rem, 4vw, 1.2rem) !important;
  }
}

/* 5.8 — Body-Text-Konsistenz (für Premium-Read) */
html body p,
html body li {
  font-family: var(--font-body, "Inter", system-ui, -apple-system, sans-serif);
  line-height: 1.65;
}

/* 5.9 — Hinweis: Google-Fonts werden am Anfang dieser Datei via @import
   geladen (vor allen Rules), damit wallbox/leistungen/hausplaner die volle
   Weight-Range bekommen ohne HTML-Edit. */

/* ── END Iter-7 Typografie-Harmonisierung ── */


/* ════════════════════════════════════════════════════════════════════════
   ITER-7 KOMPONENTEN-HARMONISIERUNG (Audit-Agent D)
   Buttons + Cards + Inputs sitewide Premium-Look.

   Findings vor Patch:
     - .btn-primary 6+ unterschiedliche Definitionen in bundle-global.css
       (cyan-gradient vs blue-gradient vs solid-blue + verschiedene Pads)
     - Inline-Gradient-Anchors: padding {0.7rem 1.1rem | 0.95rem 1.6rem |
       1.1rem 3rem | 1rem 2.5rem}, border-radius {8|10|12|14|50px}
     - Inputs: border-radius 9/10px, padding 0.75/0.85rem, bg rgba(...0.03)
       vs var(--glass-bg) (--glass-bg ist je nach Seite anders definiert!)
     - Cards: backgrounds rgba(255,255,255, {0.03|0.04|0.05|0.06|0.08})
       Borders: rgba(255,255,255, {0.08|0.10|0.12|0.14|0.15|0.18|0.20})

   Strategie:
     1. Canonical Premium-Style für .btn-primary / .btn-secondary
     2. Allgemeine Card-Klassen auf glassmorph-Standard zwingen
     3. ABER: Special-Cases preserven (.btn-gold, .kk-card--featured,
        .package-card.featured, .bonus-gold, *--gold, .nav-cta)
     4. Mobile-Override aus #7b bleibt, dieser Patch ist DESKTOP+MOBILE
        und kommt ans Ende → höchste Cascade-Priorität.
   ════════════════════════════════════════════════════════════════════════ */

/* 6.0 — Canonical .btn-primary (sitewide)
   Premium-Gradient: Blue→Cyan (Pierre-Standard wie Hero-CTAs)
   Preserved: .btn-gold, .nav-cta, .hero-cta-btn (haben eigene Stilen) */
html body .btn-primary:not(.btn-gold):not(.nav-cta):not(.hero-cta-btn),
html body a.btn-primary:not(.btn-gold):not(.nav-cta):not(.hero-cta-btn),
html body button.btn-primary:not(.btn-gold):not(.nav-cta):not(.hero-cta-btn),
html body input[type="submit"].btn-primary {
  background: linear-gradient(135deg, #1E40AF 0%, #22D3EE 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 0.95rem 1.8rem !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  font-family: var(--font-display, "Space Grotesk", "Inter", system-ui, sans-serif) !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  min-height: 46px !important;
  box-shadow: 0 6px 22px rgba(34, 211, 238, 0.28),
              0 2px 6px rgba(30, 64, 175, 0.20) !important;
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.4),
              box-shadow 0.25s ease,
              filter 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}
html body .btn-primary:not(.btn-gold):not(.nav-cta):not(.hero-cta-btn):hover,
html body a.btn-primary:not(.btn-gold):not(.nav-cta):not(.hero-cta-btn):hover,
html body button.btn-primary:not(.btn-gold):not(.nav-cta):not(.hero-cta-btn):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(34, 211, 238, 0.42),
              0 4px 12px rgba(30, 64, 175, 0.28) !important;
  filter: brightness(1.05) !important;
}
html body .btn-primary:not(.btn-gold):not(.nav-cta):not(.hero-cta-btn):focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.55) !important;
  outline-offset: 3px !important;
}

/* 6.1 — Canonical .btn-secondary
   Glass-Outline-Stil (Premium, dezent) */
html body .btn-secondary,
html body a.btn-secondary,
html body button.btn-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 12px !important;
  padding: 0.9rem 1.7rem !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  font-family: var(--font-display, "Space Grotesk", "Inter", system-ui, sans-serif) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  min-height: 46px !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}
html body .btn-secondary:hover,
html body a.btn-secondary:hover,
html body button.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(34, 211, 238, 0.45) !important;
  transform: translateY(-1px) !important;
}
html body .btn-secondary:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.55) !important;
  outline-offset: 3px !important;
}

/* 6.2 — .cta-primary (Pierre verwendet die auf 6+ Seiten als alternative Klasse)
   Selbe Optik wie .btn-primary für visuelle Konsistenz */
html body .cta-primary:not(.btn-gold):not(.nav-cta),
html body a.cta-primary:not(.btn-gold):not(.nav-cta) {
  background: linear-gradient(135deg, #1E40AF 0%, #22D3EE 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 0.95rem 1.8rem !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  min-height: 46px !important;
  box-shadow: 0 6px 22px rgba(34, 211, 238, 0.28),
              0 2px 6px rgba(30, 64, 175, 0.20) !important;
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.4),
              box-shadow 0.25s ease !important;
  box-sizing: border-box !important;
}
html body .cta-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(34, 211, 238, 0.42),
              0 4px 12px rgba(30, 64, 175, 0.28) !important;
}

/* 6.3 — Cards-Harmonisierung (Premium Glass)
   Allgemeine .card / .glass-card / .info-box / .blog-card / .city-card /
   .feature-card / .foerder-card / .pt-card / .cw-tile / .wow-tile / .kk-card
   AUSGENOMMEN: featured/highlight/gold-Varianten (Pierre's absichtliche
   Variations bleiben unberührt). */
html body .card:not(.featured):not(.kk-card--featured):not(.card-label):not(.bonus-gold):not(.card-top-line-gold):not([class*="--gold"]):not([class*="-gold "]):not([class$="-gold"]),
html body .glass-card:not(.featured),
html body .info-box:not(.featured),
html body .blog-card:not(.featured),
html body .city-card:not(.featured),
html body .feature-card:not(.featured):not(.bc-gold20),
html body .foerder-card:not(.featured),
html body .pt-card:not(.featured),
html body .cw-tile:not(.featured),
html body .wow-tile:not(.featured),
html body .kk-card:not(.kk-card--featured),
html body .bento-card:not(.featured) {
  background: rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2),
              border-color 0.25s ease,
              box-shadow 0.25s ease,
              background 0.25s ease !important;
}
html body .card:not(.featured):not(.kk-card--featured):not(.bonus-gold):hover,
html body .glass-card:not(.featured):hover,
html body .info-box:not(.featured):hover,
html body .blog-card:not(.featured):hover,
html body .city-card:not(.featured):hover,
html body .feature-card:not(.featured):not(.bc-gold20):hover,
html body .foerder-card:not(.featured):hover,
html body .pt-card:not(.featured):hover,
html body .kk-card:not(.kk-card--featured):hover,
html body .bento-card:not(.featured):hover {
  border-color: rgba(34, 211, 238, 0.28) !important;
  background: rgba(255, 255, 255, 0.062) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25),
              0 0 0 1px rgba(34, 211, 238, 0.14),
              0 0 24px rgba(34, 211, 238, 0.08) !important;
}

/* 6.4 — Featured / Highlight-Cards bleiben unberührt, aber bekommen
   konsistentes border-radius + transition.
   Pierre's Gold/Featured-Highlight bleibt SICHTBAR. */
html body .card.featured,
html body .kk-card--featured,
html body .package-card.featured,
html body .bonus-card.bonus-gold,
html body .feature-card.bc-gold20 {
  border-radius: 16px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
html body .card.featured:hover,
html body .kk-card--featured:hover,
html body .package-card.featured:hover,
html body .bonus-card.bonus-gold:hover {
  transform: translateY(-3px) !important;
}

/* 6.5 — Inputs / Textareas / Selects Harmonisierung
   Konsistenter Glass-Stil (statt 5+ unterschiedliche Inline-Styles).
   Greift NUR Form-Inputs, nicht Hidden/Checkbox/Radio. */
html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="number"],
html body input[type="search"],
html body input[type="url"],
html body input[type="password"],
html body input:not([type]),
html body textarea,
html body select {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  padding: 0.85rem 1rem !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-family: var(--font-body, "Inter", system-ui, -apple-system, sans-serif) !important;
  min-height: 46px !important;
  outline: none !important;
  transition: border-color 0.2s ease,
              background 0.2s ease,
              box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body input[type="text"]:focus,
html body input[type="email"]:focus,
html body input[type="tel"]:focus,
html body input[type="number"]:focus,
html body input[type="search"]:focus,
html body input[type="url"]:focus,
html body input[type="password"]:focus,
html body input:not([type]):focus,
html body textarea:focus,
html body select:focus {
  border-color: rgba(34, 211, 238, 0.55) !important;
  background: rgba(255, 255, 255, 0.065) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18) !important;
}
html body input::placeholder,
html body textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  opacity: 1 !important;
}
/* Honeypot-Inputs bleiben versteckt (name="website" tabindex="-1") */
html body input[name="website"][tabindex="-1"] {
  display: none !important;
}

/* 6.6 — Light-Section Override: Auf weißen Sections (z.B. Pricing-Cards
   auf hellem BG, ueber-uns-Light-Sections) müssen Inputs/Cards lesbar
   bleiben. Selector greift NUR wenn data-scope="light" oder .section-light
   als Vorfahre vorhanden. */
html body .section-light .card:not(.featured),
html body [data-scope="light"] .card:not(.featured),
html body .section-light .glass-card,
html body [data-scope="light"] .glass-card {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  color: var(--text-on-light, #0F172A) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
html body .section-light input[type="text"],
html body .section-light input[type="email"],
html body .section-light input[type="tel"],
html body [data-scope="light"] input[type="text"],
html body [data-scope="light"] input[type="email"],
html body [data-scope="light"] input[type="tel"],
html body .section-light textarea,
html body [data-scope="light"] textarea {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.15) !important;
  color: var(--text-on-light, #0F172A) !important;
}

/* 6.7 — Premium-Touch: subtiler Aurora-Glow auf .btn-primary
   (Pierre's hero-aurora-Stil ist bereits site-weit verwendet, also passt's) */
html body .btn-primary:not(.btn-gold):not(.nav-cta)::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg,
              rgba(255, 255, 255, 0.18),
              transparent 55%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
}
html body .btn-primary:not(.btn-gold):not(.nav-cta):hover::before {
  opacity: 1 !important;
}

/* 6.8 — Mobile-Tighten für .btn-primary / .btn-secondary
   Auf <480px: kleinere Padding aber min-height bleibt 46px (Touch-Target) */
@media (max-width: 480px) {
  html body .btn-primary:not(.btn-gold):not(.nav-cta),
  html body .btn-secondary,
  html body .cta-primary:not(.btn-gold):not(.nav-cta) {
    padding: 0.85rem 1.4rem !important;
    font-size: 0.92rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .btn-primary:not(.btn-gold):not(.nav-cta) + .btn-secondary,
  html body .btn-secondary + .btn-primary:not(.btn-gold):not(.nav-cta) {
    margin-top: 0.6rem !important;
  }
}

/* ── END Iter-7 Komponenten-Harmonisierung (Audit-Agent D) ── */

/* =========================================================================
   ITER-8 EMERGENCY-PATCHES (2026-05-14 21:40)
   Pierre's Screenshot zeigt:
   1. Logo "AUTARK INNOVATIONS" wird vom "Angebot"-CTA überdeckt
   2. Burger-Menu rechts nicht sichtbar
   Plus Audit-Agent-A Findings:
   3. Lisa-Section auf Home: dunkler Text auf dunklem Bg = UNLESBAR
   4. foerderung body-bg rgb(11,15,25) vs Standard rgb(10,20,40)
   5. index body-bg transparent → muss rgb(10,20,40)
   ========================================================================= */

/* 4+5: Body-BG Konsistenz sitewide */
html body {
  background-color: rgb(10, 20, 40) !important;
}
html {
  background-color: rgb(10, 20, 40) !important;
}

/* 3: Lisa-Section Kontrast-Fix (Iter-7 A: dunkler Text auf dunklem Bg) */
html body #lisa,
html body section#lisa,
html body [class*="lisa-persona"],
html body [class*="lisa-section"],
html body section[id*="lisa"] {
  color: #e8f4ff !important;
}
html body #lisa *,
html body section#lisa *,
html body [class*="lisa-persona"] *,
html body [class*="lisa-section"] *,
html body section[id*="lisa"] * {
  color: inherit !important;
}
html body #lisa h1,
html body #lisa h2,
html body #lisa h3,
html body #lisa h4,
html body section#lisa h1,
html body section#lisa h2,
html body section#lisa h3,
html body section#lisa h4 {
  color: #fff !important;
}
html body #lisa p,
html body #lisa span,
html body #lisa li,
html body section#lisa p,
html body section#lisa span,
html body section#lisa li {
  color: rgba(232, 244, 255, 0.82) !important;
}
/* Lisa-Section Tags/Pills */
html body #lisa [class*="tag"],
html body #lisa [class*="pill"],
html body #lisa [class*="badge"],
html body section#lisa [class*="tag"],
html body section#lisa [class*="pill"] {
  background: rgba(34, 211, 238, 0.12) !important;
  color: #22D3EE !important;
  border: 1px solid rgba(34, 211, 238, 0.3) !important;
}

/* 1+2: Mobile-Header Radikal-Fix (Pierre's Screenshot-Bug) */
@media (max-width: 480px) {
  /* Nav-Container: Logo links, Burger rechts, nichts dazwischen */
  html body nav.nav,
  html body nav#nav,
  html body header nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 8px 12px !important;
    gap: 6px !important;
  }
  /* Logo-Link mit Truncation */
  html body .nav-logo-link {
    flex: 0 1 auto !important;
    max-width: calc(100% - 70px) !important;
    overflow: hidden !important;
    text-decoration: none !important;
    z-index: 1101 !important;
  }
  html body .nav-logo-sub {
    display: none !important;
  }
  html body .nav-logo-text {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body .nav-logo-img {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }
  /* CTA "Angebot" und andere Header-Rechts-Elemente: WEG auf Mobile */
  html body header .nav-cta,
  html body nav .nav-cta,
  html body a.nav-cta,
  html body header #navPhone,
  html body header #navRating,
  html body nav #navPhone,
  html body nav #navRating,
  html body .nav-right > .nav-cta,
  html body .nav-right > #navPhone,
  html body .nav-right > #navRating {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Burger-Menu: MUSS sichtbar, klickbar, oben rechts */
  html body nav.nav .nav-toggle,
  html body nav.nav #navToggle,
  html body nav .nav-burger,
  html body #navBurger,
  html body nav button[aria-label*="Menü"],
  html body nav button[aria-label*="Menu"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    z-index: 1100 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
  }
  /* Nav-Menu wenn offen: Full-Screen-Overlay mit Logo+Burger sichtbar */
  html body nav.nav .nav-links.open,
  html body nav .nav-links.open,
  html body #navLinks.open {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 5, 16, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 24px !important;
    gap: 8px !important;
    z-index: 1050 !important;
    overflow-y: auto !important;
  }
  html body nav.nav .nav-links.open a,
  html body nav .nav-links.open a,
  html body #navLinks.open a {
    display: block !important;
    padding: 18px 12px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #e8f4ff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    min-height: 56px !important;
    text-decoration: none !important;
  }
}

@media (max-width: 360px) {
  html body .nav-logo-text {
    font-size: 0.78rem !important;
  }
  html body .nav-logo-img {
    width: 28px !important;
    height: 28px !important;
  }
}

/* ── END Iter-8 Emergency-Patches ── */

/* =========================================================================
   ITER-8 LAYOUT-PATCHES (2026-05-14 22:10)
   Layout-Crawl: 112/159 Seiten haben html+body overflow-x:hidden gleichzeitig
   = Memory-Verstoß feedback_overflow_touch (Android Touch-Scroll bricht).
   Plus: Homepage marquee tm-row sprengt Viewport, Tabellen-Cutoff auf 53 Seiten.
   ========================================================================= */

/* 1. Touch-Scroll-Fix (Pierre's Memory-Regel) — html DARF NICHT overflow-x:hidden haben */
html {
  overflow-x: visible !important;
}
html body {
  overflow-x: clip !important;
}

/* 2. Marquee/Trustmark-Row sprengt Viewport — Container clippen */
html body .tm-row,
html body .tm-track,
html body [class*="marquee"] {
  max-width: 100vw !important;
}
html body .trustmark-strip,
html body [class*="trustmark"],
html body section:has(.tm-row),
html body section:has(.tm-track) {
  overflow: hidden !important;
  position: relative !important;
}

/* 3. cost-table sitewide in Scroll-Wrapper-Behaviour — auch ohne expliziten Wrapper */
html body table.cost-table {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
  white-space: nowrap;
}
html body table.cost-table thead,
html body table.cost-table tbody {
  display: table !important;
  min-width: 100% !important;
}

/* 4. Blog-Posts (22 mit h-overflow) — img/iframe/pre Schutz */
html body article img,
html body article iframe,
html body article video,
html body article pre,
html body article code,
html body [class*="blog"] img,
html body [class*="blog"] iframe,
html body [class*="blog"] pre {
  max-width: 100% !important;
  height: auto !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* ── END Iter-8 Layout-Patches ── */

/* =========================================================================
   ITER-9 OVERLAY-FIXES (2026-05-14 22:30) — Pierre's Hauptbug + 4 P0
   Overlay-Hunter-Findings:
   1. Homepage Logo-Duplikat nach Burger-Open (Pierre's HAUPTBUG)
   2. Cookie-Banner z-index:auto auf 5 Stadt-Seiten
   3. /wallbox + /preisrechner: andere Mobile-Nav (kein Burger)
   4. /app.html: kein Header sichtbar
   ========================================================================= */

/* 1. Logo-Duplikat: wenn mehrere .nav-logo-link existieren, zeige nur das erste */
html body nav .nav-logo-link ~ .nav-logo-link,
html body nav.nav .nav-logo-link:nth-of-type(n+2),
html body header .nav-logo-link ~ .nav-logo-link {
  display: none !important;
  visibility: hidden !important;
}
/* Bei Burger-Open: NICHT 2. Logo zeigen */
html body nav.nav.menu-open .nav-logo-link:nth-of-type(n+2),
html body body.nav-open nav .nav-logo-link:nth-of-type(n+2),
html.nav-open body nav .nav-logo-link:nth-of-type(n+2),
html body nav .nav-links.open .nav-logo-link {
  display: none !important;
}

/* 2. Cookie-Banner z-index:auto Fix — sitewide higher z-index */
html body #cookieConsentOverlay,
html body .cc-window,
html body .cookie-consent,
html body [id*="cookieConsent"],
html body [class*="cookie-banner"] {
  z-index: 9999 !important;
}

/* 3. Wenn /wallbox + /preisrechner kein Burger haben: Touch-Friendly Inline-Nav */
@media (max-width: 480px) {
  html body nav.nav:not(:has(.nav-toggle)):not(:has(#navBurger)) .nav-links a,
  html body nav.nav:not(:has(.nav-burger)) .nav-links a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
  }
}

/* 4. /app.html: zumindest Tel-Link sichtbar machen (Bottom-Sticky reicht) */
html body[class*="app"] #autark-sticky-mobile,
html body.is-app #autark-sticky-mobile {
  display: flex !important;
  z-index: 9999 !important;
}

/* 5. Privacy-Modal vs Burger-Konflikt:
   Wenn beide gleichzeitig offen, Privacy-Modal niedriger als Burger-Menu */
html body .cmp-container,
html body .cmp-window,
html body [class*="privacy-center"] {
  z-index: 100 !important;
}
html body nav .nav-links.open {
  z-index: 1050 !important;
}

/* ── END Iter-9 Overlay-Fixes ── */

/* =========================================================================
   ITER-10 DESIGN-REFRESH (2026-05-16) — Pierre's Mobile Polish Request
   Goal: Mobile attraktiver, weniger Scroll-Fatigue, klarere Hero.
   Pure CSS — KEINE Content/Schema-Änderungen, SEO bleibt perfekt.
   ========================================================================= */

/* 1. WAS-IST-NEU: 4 vertikale Karten → horizontaler Swipe-Carousel auf Mobile.
   Spart ~1700px Scroll, fühlt sich aktiv + modern an. */
@media (max-width: 768px) {
  html body section.was-ist-neu .news-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.9rem !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.5rem 1rem 1.2rem !important;
    margin: 0 -1rem !important;
    scrollbar-width: none !important;
  }
  html body section.was-ist-neu .news-grid::-webkit-scrollbar {
    display: none !important;
  }
  html body section.was-ist-neu .news-card {
    flex: 0 0 82% !important;
    min-width: 82% !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    margin: 0 !important;
  }
  /* Visueller Hinweis: "Wische zur Seite" */
  html body section.was-ist-neu .was-ist-neu-header::after {
    content: "← Wische zur Seite →" !important;
    display: block !important;
    margin-top: 0.6rem !important;
    font-size: 0.72rem !important;
    color: rgba(232, 244, 255, 0.4) !important;
    letter-spacing: 0.1em !important;
    text-align: center !important;
    text-transform: uppercase !important;
  }
}

/* 2. TRUST-MARQUEE: Logos abgeschnitten auf Mobile (BAFA→PARTNER etc.)
   Fix: Container muss alle Logos im scrollenden Track halten, kein Overflow auf einzelne Items. */
@media (max-width: 768px) {
  html body section.trust-marquee {
    overflow: hidden !important;
    padding: 1.2rem 0 !important;
  }
  html body section.trust-marquee .tm-track {
    max-width: none !important;
    width: max-content !important;
  }
  html body section.trust-marquee .tm-row {
    padding: 0 1.2rem !important;
  }
  html body section.trust-marquee .tm-item {
    min-width: 110px !important;
    text-align: center !important;
  }
  html body section.trust-marquee .tm-logo,
  html body section.trust-marquee .tm-sub {
    white-space: nowrap !important;
    overflow: visible !important;
  }
  /* Fade-Edges verkleinern auf Mobile damit Logos nicht ganz verschwinden */
  html body section.trust-marquee .tm-fade {
    width: 36px !important;
  }
}

/* 3. PROMO-BANNER REDUKTION: Wenn beide existieren, .cro-urgency-banner verstecken.
   Begründung: zwei gestapelte Banner = Banner-Müdigkeit + visuelles Chaos.
   .stb-bar (sticky-top-bar) trägt die "0% MwSt"-Promo, .cro-urgency-banner
   ist redundant. */
html body:has(#autark-promo-bar) #croUrgencyBanner,
html body:has(.stb-bar) .cro-urgency-banner,
html body:has(#autark-promo-bar) .cro-urgency-banner {
  display: none !important;
}
/* Falls :has() nicht supported (alte Safari): Notfall-Override im Body */
body.cro-banner-active.has-stb #croUrgencyBanner,
body.cro-banner-active.has-stb .cro-urgency-banner {
  display: none !important;
}

/* 4. NAV-TRIM auf mittlerem Desktop (1024-1280px): 11 Items überlappen.
   Auf 1024-1199px: 'Ratgeber', 'Standorte', 'Über uns', 'Garantie' ausblenden
   (sind im Burger-Menü weiter erreichbar). */
@media (min-width: 1024px) and (max-width: 1199px) {
  html body nav#nav .nav-links a[href="/blog.html"],
  html body nav#nav .nav-links a[href="/standorte.html"],
  html body nav#nav .nav-links a[href="/ueber-uns.html"],
  html body nav#nav .nav-links a[href="/garantie.html"] {
    display: none !important;
  }
  /* Burger einblenden auf diesem Range, damit User die versteckten Items erreicht */
  html body nav#nav .nav-burger {
    display: inline-flex !important;
  }
}
/* Auf 1200-1359px: nur die zwei abnehmbarsten ausblenden */
@media (min-width: 1200px) and (max-width: 1359px) {
  html body nav#nav .nav-links a[href="/standorte.html"],
  html body nav#nav .nav-links a[href="/ueber-uns.html"] {
    display: none !important;
  }
}

/* 5. ×-BUTTON KONTRAST: Auf hellen Banner-Hintergründen ist der × oft zu blass.
   Explizit dunkler Text-Schatten + höherer Kontrast. */
html body .stb-close,
html body .cro-urgency-close,
html body button[data-stb-close] {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  background: rgba(0, 0, 0, 0.18) !important;
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  padding: 0 !important;
}
html body .stb-close:hover,
html body .cro-urgency-close:hover {
  background: rgba(0, 0, 0, 0.32) !important;
  color: #fff !important;
}

/* 6. HERO PADDING-OPTIMIZATION auf Mobile: weniger Top-Padding wenn .stb-bar
   und Tel-Banner aktiv sind → spart 40-60px Above-the-Fold-Platz. */
@media (max-width: 768px) {
  html body section.wow-hero.hero-diet {
    padding-top: 1.5rem !important;
    min-height: auto !important;
  }
  html body section.wow-hero.hero-diet .hero-content {
    padding-top: 1rem !important;
  }
  /* Mehr Luft zwischen Headline und CTA für besseren visuellen Anker */
  html body .hero-headline {
    margin-bottom: 0.8rem !important;
    font-size: clamp(1.55rem, 7vw, 2.1rem) !important;
    letter-spacing: -0.02em !important;
  }
  html body .hero-subline {
    margin-bottom: 1.4rem !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }
}

/* ── END Iter-10 Design-Refresh ── */

/* =========================================================================
   ITER-11 DESIGN-PHASE-3+4 (2026-05-16) — Pierre's "stylischer + kundenanziehender"
   Mobile-Polish: Tighter spacing, hidden redundant sections (SEO bleibt im DOM),
   Hero anchor sharper, micro-interactions auf CTAs.
   ========================================================================= */

/* 1. SECTION-SPACING: Auf Mobile drastisch reduzieren (war 80-120px, jetzt 32-48px).
   Reduziert vertikalen Scroll um ~40% ohne Inhalt zu verlieren. */
@media (max-width: 768px) {
  html body section.section,
  html body section[class*="-section"],
  html body section.was-ist-neu,
  html body section.solar-calc-section,
  html body section.cmp-section,
  html body section.testimonials-strip,
  html body section.autark-stack,
  html body section.live-proof,
  html body section.cw-stats-hero,
  html body section.cw-reveal-section,
  html body section.cw-builds-section,
  html body section.trust-guarantees,
  html body section.section-compare-pro,
  html body section.lisa-persona-section,
  html body section.pp-aurora-section,
  html body section.section-savings-premium,
  html body section.storyboard-section,
  html body section.faq-quick,
  html body section.app-promo {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  /* Section-Header H2 enger an Content */
  html body section h2 {
    margin-bottom: 0.6rem !important;
    font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important;
    line-height: 1.2 !important;
  }
  html body section .section-header,
  html body section .was-ist-neu-header,
  html body section .solar-calc__header {
    margin-bottom: 1.2rem !important;
  }
}

/* 2. REDUNDANTE SECTIONS auf Mobile ausblenden (Desktop unverändert).
   SEO bleibt: HTML-Content + Schema-LD im DOM, nur visuell weg auf Mobile.
   Begründung: live-proof, cw-builds, pp-aurora, cta-banner-mid bringen auf Mobile
   nur Scroll-Müdigkeit — Trust-Signale stehen oben im Hero & Vergleich. */
@media (max-width: 768px) {
  html body section.live-proof,
  html body section.cw-builds-section,
  html body section.cta-banner-mid,
  html body section.video-testimonials,
  html body section.pp-aurora-section {
    display: none !important;
  }
}

/* 3. HERO-CTA mehr Visual-Weight: Größer, glow, leichte hover/active-Animation.
   Erster CTA ist konversionskritisch. */
@media (max-width: 768px) {
  html body .hero-ctas a.btn-primary,
  html body .hero-ctas a.cta-primary,
  html body .hero-ctas .hero-cta-btn {
    padding: 1.05rem 2rem !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(34, 211, 238, 0.32),
                0 2px 8px rgba(34, 211, 238, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  }
  html body .hero-ctas a.btn-primary:active,
  html body .hero-ctas a.cta-primary:active {
    transform: translateY(2px) scale(0.98) !important;
    box-shadow: 0 4px 16px rgba(34, 211, 238, 0.25) !important;
  }
}

/* 4. HERO TRUST-PILLS schöner: Hintergrund-Pill mit subtilem Border, eng zusammen */
@media (max-width: 768px) {
  html body .hero-trust-pills {
    gap: 0.5rem !important;
    margin: 1.2rem auto 0.8rem !important;
    justify-content: center !important;
    max-width: 100% !important;
  }
  html body .hero-trust-pills li {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(34, 211, 238, 0.16) !important;
    border-radius: 999px !important;
    padding: 0.4rem 0.85rem !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: rgba(232, 244, 255, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}

/* 5. CMP-SECTION (Anbieter-Vergleich) — Karten enger zusammen, klarere Spalten */
@media (max-width: 768px) {
  html body section.cmp-section .cmp-grid,
  html body section.cmp-section [class*="cmp-cards"] {
    gap: 0.85rem !important;
  }
  html body section.cmp-section .cmp-card {
    padding: 1.1rem 1rem !important;
    border-radius: 14px !important;
  }
  html body section.cmp-section .cmp-card h3,
  html body section.cmp-section .cmp-card .cmp-card-title {
    font-size: 1.02rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* 6. SOLAR-CALC-INLINE schöner Conversion-Anker */
@media (max-width: 768px) {
  html body section.solar-calc-section {
    background: linear-gradient(180deg,
                rgba(11, 30, 56, 0.65) 0%,
                rgba(11, 30, 56, 0.92) 100%) !important;
    border-top: 1px solid rgba(34, 211, 238, 0.18) !important;
    border-bottom: 1px solid rgba(34, 211, 238, 0.18) !important;
    margin: 1rem 0 !important;
  }
  html body section.solar-calc-section .solar-calc__title {
    text-align: center !important;
    margin-bottom: 0.4rem !important;
  }
  html body section.solar-calc-section input,
  html body section.solar-calc-section select {
    background: rgba(0, 0, 0, 0.32) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 12px !important;
    padding: 0.85rem 1rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
  }
  html body section.solar-calc-section input:focus,
  html body section.solar-calc-section select:focus {
    border-color: #22D3EE !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18) !important;
    outline: none !important;
  }
}

/* 7. KARTEN-MICRO-INTERAKTIONEN: subtiler scale+shadow auf Mobile-Tap.
   Macht das Layout "lebendiger" ohne sich aufzudrängen. */
@media (max-width: 768px) {
  html body .news-card,
  html body .cmp-card,
  html body .blog-card,
  html body .review-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  }
  html body .news-card:active,
  html body .cmp-card:active,
  html body .blog-card:active,
  html body .review-card:active {
    transform: scale(0.98) !important;
    box-shadow: 0 4px 16px rgba(34, 211, 238, 0.18) !important;
  }
}

/* 8. STORYBOARD "So funktioniert es" enger packen */
@media (max-width: 768px) {
  html body section.storyboard-section .sb-step {
    padding: 0.9rem 1rem !important;
    margin-bottom: 0.7rem !important;
  }
  html body section.storyboard-section .sb-number {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }
}

/* 9. NAV-TRIM AGGRESSIVER auf 1200-1359px: zusätzlich Garantie + Ratgeber verstecken */
@media (min-width: 1200px) and (max-width: 1359px) {
  html body nav#nav .nav-links a[href="/garantie.html"],
  html body nav#nav .nav-links a[href="/blog.html"] {
    display: none !important;
  }
}

/* 10. FOOTER ANKERPLATZ — Mobile-CTA bekommt etwas mehr Bottom-Padding,
    damit der Sticky-WhatsApp-Button nicht über letzten Content lappt. */
@media (max-width: 768px) {
  html body footer,
  html body main + footer {
    padding-bottom: 6rem !important;
  }
}

/* ── END Iter-11 Design-Phase-3+4 ── */

/* =========================================================================
   ITER-12 DESIGN-POLISH (2026-05-16) — Trust-Marquee centering,
   Desktop-Nav final trim, Hero echtes Solar-Foto als Background.
   ========================================================================= */

/* A. TRUST-MARQUEE Mobile-Fix Iter-15 (2026-05-16):
   FINAL FIX — 2 Spalten Grid, Sub-Texts AUS. Sub-Texts ("FÖRDERPARTNER" etc.)
   sind zu lang und überlagern sich. Nur Logo-Namen zeigen = sauber + lesbar. */
@media (max-width: 768px) {
  html body section.trust-marquee {
    overflow: hidden !important;
    position: relative !important;
    padding: 1.5rem 1rem !important;
    min-height: auto !important;
  }
  html body section.trust-marquee .tm-track {
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  /* Geklonte tm-rows komplett weg */
  html body section.trust-marquee .tm-track > .tm-row ~ .tm-row {
    display: none !important;
  }
  /* Erste tm-row: 2-Spalten Grid für maximale Lesbarkeit */
  html body section.trust-marquee .tm-track > .tm-row:first-child {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.2rem 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    align-items: center !important;
    justify-items: center !important;
  }
  /* tm-item als zentrierte Box */
  html body section.trust-marquee .tm-track > .tm-row:first-child > .tm-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 140px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    gap: 4px !important;
    opacity: 1 !important;
  }
  /* Max 8 logos zeigen */
  html body section.trust-marquee .tm-track > .tm-row:first-child > .tm-item:nth-child(n+9) {
    display: none !important;
  }
  /* Logo-Name groß genug */
  html body section.trust-marquee .tm-logo {
    font-size: 0.92rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
    display: block !important;
    font-weight: 800 !important;
  }
  /* Sub-Texts (FÖRDERPARTNER etc.) AUS — überfrachten das Mobile-Layout */
  html body section.trust-marquee .tm-sub {
    display: none !important;
  }
  html body section.trust-marquee .tm-fade {
    display: none !important;
  }
}

/* B. DESKTOP-NAV FINAL TRIM für 1024-1400px (vorher 1024-1199 + 1200-1359).
   Auf < 1400px wird Phone-Icon-only + CTA verkleinert + max. 5 Items. */
@media (min-width: 1024px) and (max-width: 1399px) {
  /* Hide alle bis auf die 5 wichtigsten: Start, Solar, Wärmepumpe, Klima, Kontakt */
  html body nav#nav .nav-links a[href="/leistungen.html"],
  html body nav#nav .nav-links a[href="/blog.html"],
  html body nav#nav .nav-links a[href="/standorte.html"],
  html body nav#nav .nav-links a[href="/ueber-uns.html"],
  html body nav#nav .nav-links a[href="/garantie.html"],
  html body nav#nav .nav-links a[href="/lisa.html"] {
    display: none !important;
  }
  /* Phone-Nummer ohne Text, nur Icon, spart Platz */
  html body nav#nav .nav-right #navPhone {
    font-size: 0 !important;
    padding: 8px 10px !important;
    min-width: 40px !important;
  }
  html body nav#nav .nav-right #navPhone svg {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
  }
  /* Senior-Toggle ausblenden (oft nicht genutzt, kann via Tastatur erreicht werden) */
  html body nav#nav .nav-right .cw-senior-toggle {
    display: none !important;
  }
  /* Rating kompakter */
  html body nav#nav .nav-right #navRating {
    padding: 4px 8px !important;
  }
}

/* C. HERO ECHTES SOLAR-FOTO als Background-Layer.
   Iter-12b (2026-05-16): Overlay deutlich abgeschwächt damit Foto sichtbar wird.
   Vorher 85-95% Overlay → jetzt 55-70%. */
@media (min-width: 769px) {
  html body section.wow-hero.hero-diet .hero-bg-layer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background-image: linear-gradient(180deg,
                      rgba(6, 17, 40, 0.55) 0%,
                      rgba(6, 17, 40, 0.45) 50%,
                      rgba(6, 17, 40, 0.85) 100%),
                    url('/images/hero-house-real.webp') !important;
    background-size: cover !important;
    background-position: center 30% !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
  }
}
/* Mobile: Foto sichtbar mit mittlerem Overlay (Text bleibt lesbar) */
@media (max-width: 768px) {
  html body section.wow-hero.hero-diet .hero-bg-layer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background-image: linear-gradient(180deg,
                      rgba(6, 17, 40, 0.62) 0%,
                      rgba(6, 17, 40, 0.55) 40%,
                      rgba(6, 17, 40, 0.92) 100%),
                    url('/images/solar-einfamilienhaus.webp') !important;
    background-size: cover !important;
    background-position: center 30% !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
  }
  /* Text bekommt deutlicheren shadow damit auf Bild lesbar */
  html body section.wow-hero.hero-diet .hero-headline,
  html body section.wow-hero.hero-diet .hero-subline {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85) !important;
  }
}

/* D. HERO-CONTENT bekommt etwas mehr Glassmorphism damit das Bild
   nicht den Text overpowert. */
html body section.wow-hero.hero-diet .hero-content {
  position: relative !important;
  z-index: 2 !important;
}
@media (max-width: 768px) {
  html body section.wow-hero.hero-diet .hero-content {
    padding: 1.5rem 1rem !important;
  }
}

/* E. CTA mit deutlicherem Drop-Shadow gegen das Foto-Background */
@media (min-width: 769px) {
  html body section.wow-hero.hero-diet .hero-ctas a {
    box-shadow: 0 12px 40px rgba(34, 211, 238, 0.42),
                0 4px 16px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }
}

/* ── END Iter-12 Design-Polish ── */

/* =========================================================================
   ITER-13 FIRMA-SPIEGEL (2026-05-16) — Bundle-Hero, Firma-Manifest,
   App-Feature-Showcase. Spiegelt Autark Innovations + Hausplaner-App.
   ========================================================================= */

/* BUNDLE-HERO: 3-Spalten Solar/WP/Klima */
html body section.bundle-hero {
  padding: 3rem 1.25rem 2.5rem;
  background: linear-gradient(180deg,
              rgba(11, 30, 56, 0) 0%,
              rgba(11, 30, 56, 0.55) 100%);
  position: relative;
}
html body section.bundle-hero .bundle-hero-header {
  text-align: center;
  margin-bottom: 1.8rem;
}
html body section.bundle-hero .bundle-hero-header .eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #22D3EE;
  font-weight: 700;
}
html body section.bundle-hero h2 {
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  font-weight: 900;
  color: #F0F6FF;
  line-height: 1.15;
  margin: 0.4rem 0 0.6rem;
}
html body section.bundle-hero h2 .accent {
  background: linear-gradient(90deg, #22D3EE, #67E8F9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html body section.bundle-hero .bundle-hero-sub {
  color: rgba(232, 244, 255, 0.7);
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto;
}
html body section.bundle-hero .bundle-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  max-width: 1100px;
  margin: 2rem auto;
}
@media (max-width: 768px) {
  html body section.bundle-hero .bundle-hero-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
}
html body section.bundle-hero .bundle-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.6rem 1.25rem 1.4rem;
  background: linear-gradient(160deg,
              rgba(255, 255, 255, 0.04) 0%,
              rgba(11, 20, 40, 0.6) 100%);
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html body section.bundle-hero .bundle-card:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow: 0 12px 32px rgba(34, 211, 238, 0.18);
}
html body section.bundle-hero .bundle-card.bundle-card-highlight {
  border-color: rgba(255, 184, 0, 0.4);
  background: linear-gradient(160deg,
              rgba(255, 184, 0, 0.08) 0%,
              rgba(11, 20, 40, 0.65) 100%);
}
html body section.bundle-hero .bundle-card.bundle-card-highlight::before {
  content: "Bestseller";
  position: absolute;
  top: -10px;
  right: 16px;
  background: linear-gradient(90deg, #FFB627, #F59E0B);
  color: #0B0F14;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
html body section.bundle-hero .bundle-card-icon {
  font-size: 1.8rem;
  margin-bottom: 0.2rem;
}
html body section.bundle-hero .bundle-card-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 244, 255, 0.55);
  font-weight: 700;
}
html body section.bundle-hero .bundle-card-price {
  font-size: 0.95rem;
  color: rgba(232, 244, 255, 0.7);
  margin-top: 0.2rem;
}
html body section.bundle-hero .bundle-card-price strong {
  font-size: 1.5rem;
  color: #22D3EE;
  font-weight: 900;
}
html body section.bundle-hero .bundle-card.bundle-card-highlight .bundle-card-price strong {
  color: #FFB627;
}
html body section.bundle-hero .bundle-card-sub {
  font-size: 0.78rem;
  color: rgba(232, 244, 255, 0.55);
  margin-bottom: 0.6rem;
}
html body section.bundle-hero .bundle-card-list {
  list-style: none;
  padding: 0.6rem 0 0.4rem;
  margin: 0 0 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
html body section.bundle-hero .bundle-card-list li {
  font-size: 0.82rem;
  color: rgba(232, 244, 255, 0.85);
  padding: 0.32rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  line-height: 1.4;
}
html body section.bundle-hero .bundle-card-list li::before {
  content: "✓";
  color: #22D3EE;
  font-weight: 700;
  flex-shrink: 0;
}
html body section.bundle-hero .bundle-card-cta {
  margin-top: auto;
  padding-top: 0.7rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #22D3EE;
  border-top: 1px solid rgba(34, 211, 238, 0.18);
}
html body section.bundle-hero .bundle-card.bundle-card-highlight .bundle-card-cta {
  color: #FFB627;
  border-top-color: rgba(255, 184, 0, 0.25);
}
html body section.bundle-hero .bundle-hero-footer {
  text-align: center;
  color: rgba(232, 244, 255, 0.7);
  font-size: 0.95rem;
  margin-top: 1.4rem;
}
html body section.bundle-hero .bundle-hero-footer a {
  color: #FFB627;
  text-decoration: none;
}

/* FIRMA-MANIFEST */
html body section.firma-manifest {
  padding: 3rem 1.25rem;
  background: linear-gradient(135deg,
              rgba(11, 30, 56, 0.4) 0%,
              rgba(6, 17, 40, 0.6) 100%);
  border-top: 1px solid rgba(34, 211, 238, 0.1);
  border-bottom: 1px solid rgba(34, 211, 238, 0.1);
}
html body section.firma-manifest .firma-manifest-content {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
html body section.firma-manifest .eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFB627;
  font-weight: 700;
}
html body section.firma-manifest h2 {
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  font-weight: 900;
  color: #F0F6FF;
  line-height: 1.15;
  margin: 0.4rem 0 1rem;
}
html body section.firma-manifest h2 .accent {
  background: linear-gradient(90deg, #FFB627, #FDE68A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html body section.firma-manifest .firma-manifest-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(232, 244, 255, 0.88);
  max-width: 720px;
  margin: 0 auto 1.8rem;
}
html body section.firma-manifest .firma-manifest-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 640px;
  margin: 0 auto;
}
@media (max-width: 600px) {
  html body section.firma-manifest .firma-manifest-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
  }
}
html body section.firma-manifest .fm-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1rem 0.6rem;
  text-align: center;
}
html body section.firma-manifest .fm-stat strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 900;
  color: #22D3EE;
  margin-bottom: 0.2rem;
}
html body section.firma-manifest .fm-stat span {
  font-size: 0.75rem;
  color: rgba(232, 244, 255, 0.6);
  letter-spacing: 0.04em;
}

/* APP-SHOWCASE-BENTO */
/* App-Showcase Iter-14c (2026-05-16): Pierre: kein weiß, blau behalten.
   Dunkles Blau-Gradient mit minimal helleren Akzenten. Bleibt eigener Stil. */
html body section.app-showcase {
  padding: 3.5rem 1.25rem 3rem;
  background: linear-gradient(180deg,
              #0B1E38 0%,
              #0D2342 50%,
              #0B1E38 100%);
  border-top: 1px solid rgba(34, 211, 238, 0.12);
  border-bottom: 1px solid rgba(34, 211, 238, 0.12);
}
html body section.app-showcase .app-showcase-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.2rem;
}
html body section.app-showcase .eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #67E8F9;
  font-weight: 800;
}
html body section.app-showcase h2 {
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  font-weight: 900;
  color: #F0F6FF;
  line-height: 1.15;
  margin: 0.4rem 0 0.7rem;
  letter-spacing: -0.02em;
}
html body section.app-showcase h2 .accent {
  background: linear-gradient(90deg, #67E8F9, #22D3EE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html body section.app-showcase .app-showcase-sub {
  font-size: 1.05rem;
  color: rgba(232, 244, 255, 0.7);
  line-height: 1.55;
}
html body section.app-showcase .app-showcase-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  html body section.app-showcase .app-showcase-bento {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  html body section.app-showcase .app-showcase-bento {
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
  }
}
@media (max-width: 480px) {
  html body section.app-showcase .app-showcase-bento {
    grid-template-columns: 1fr;
  }
  /* Iter-13b Fix: span:2 darf NICHT auf 1-Spalten-Layout angewandt werden */
  html body section.app-showcase .aps-card.aps-large,
  html body section.app-showcase .aps-card.aps-medium {
    grid-column: span 1 !important;
  }
}
@media (max-width: 768px) {
  /* Mobile-Override: aps-large + medium dürfen nicht über mehr Spalten als
     der Grid hat. Auf 2-Spalten-Mobile fit span 2 aber muss alleinstehen. */
  html body section.app-showcase .aps-card.aps-large,
  html body section.app-showcase .aps-card.aps-medium {
    grid-column: 1 / -1 !important;
  }
}
html body section.app-showcase .aps-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.3rem 1.2rem;
  background: linear-gradient(160deg,
              rgba(255, 255, 255, 0.05) 0%,
              rgba(11, 30, 56, 0.7) 100%);
  border: 1px solid rgba(34, 211, 238, 0.15);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
html body section.app-showcase .aps-card:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 12px 28px rgba(34, 211, 238, 0.12);
}
html body section.app-showcase .aps-card h3 {
  color: #F0F6FF !important;
}
html body section.app-showcase .aps-card p {
  color: rgba(232, 244, 255, 0.75) !important;
}
html body section.app-showcase .aps-card-cta {
  color: #22D3EE !important;
}
html body section.app-showcase .aps-card.aps-large {
  grid-column: span 2;
  background: linear-gradient(135deg, #1E40AF 0%, #22D3EE 100%);
  color: #FFFFFF;
  border: none;
}
html body section.app-showcase .aps-card.aps-large p {
  color: rgba(255, 255, 255, 0.92);
}
html body section.app-showcase .aps-card.aps-large h3 {
  color: #FFFFFF;
}
html body section.app-showcase .aps-card.aps-medium {
  grid-column: span 2;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #FFFFFF;
  border: none;
}
html body section.app-showcase .aps-card.aps-medium h3 {
  color: #FFFFFF;
}
html body section.app-showcase .aps-card.aps-medium p {
  color: rgba(255, 255, 255, 0.85);
}
html body section.app-showcase .aps-card.aps-medium .aps-card-cta {
  color: #FDE68A;
}
html body section.app-showcase .aps-card.aps-highlight {
  background: linear-gradient(135deg, #FEF3C7 0%, #FFFFFF 100%);
  border-color: #FDE68A;
}
html body section.app-showcase .aps-card-icon {
  font-size: 1.6rem;
}
html body section.app-showcase .aps-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  line-height: 1.25;
}
html body section.app-showcase .aps-card p {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.5;
  margin: 0;
}
html body section.app-showcase .aps-card-cta {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1E40AF;
}
html body section.app-showcase .app-showcase-cta-row {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 2.2rem;
  flex-wrap: wrap;
}
html body section.app-showcase .app-showcase-cta-row .btn-primary {
  background: linear-gradient(135deg, #1E40AF, #22D3EE);
  color: #FFFFFF;
  padding: 0.95rem 1.8rem;
  border-radius: 14px;
  font-weight: 800;
  text-decoration: none;
  border: none;
}
html body section.app-showcase .app-showcase-cta-row .btn-secondary {
  background: transparent;
  color: #0F172A;
  padding: 0.95rem 1.8rem;
  border-radius: 14px;
  font-weight: 800;
  border: 1.5px solid #E5E0D6;
  text-decoration: none;
}
html body section.app-showcase .app-showcase-meta {
  text-align: center;
  font-size: 0.82rem;
  color: #64748B;
  margin-top: 1.2rem;
}

/* Legacy app-promo auf Mobile ausblenden (App-Showcase ist neue Master-Section) */
@media (max-width: 768px) {
  html body section.app-promo-legacy {
    display: none !important;
  }
}

/* ── END Iter-13 Firma-Spiegel ── */

/* =========================================================================
   ITER-14 PREMIUM CINEMATIC (2026-05-16) — Apple/Starlink Look
   Pierre's Vision: weniger Elemente pro Viewport, größere Typography,
   massive Whitespace, single-focus CTAs, premium glassmorphism.
   ========================================================================= */

/* ===== A. HERO POLISH (NICHT kompletter Wechsel) ===== */
/* Pierre: kein neuer Style — nur dezente Verbesserungen */
@media (min-width: 769px) {
  html body section.wow-hero.hero-diet {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  html body section.wow-hero.hero-diet .hero-content {
    max-width: 920px !important;
  }
  html body section.wow-hero.hero-diet .hero-headline {
    font-size: clamp(2.4rem, 5.5vw, 4.2rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.06 !important;
  }
  html body section.wow-hero.hero-diet .hero-subline {
    font-size: clamp(1rem, 1.4vw, 1.2rem) !important;
    line-height: 1.55 !important;
    max-width: 700px !important;
    margin: 0 auto 1.8rem !important;
  }
  html body section.wow-hero.hero-diet .hero-ctas {
    justify-content: center !important;
    margin-top: 2rem !important;
  }
  html body section.wow-hero.hero-diet .hero-ctas a.btn-primary,
  html body section.wow-hero.hero-diet .hero-ctas a.cta-primary {
    padding: 1.2rem 2.6rem !important;
    font-size: 1.1rem !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #22D3EE, #38BDF8 60%, #1E40AF) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 14px 50px rgba(34, 211, 238, 0.42),
                0 4px 14px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease !important;
  }
  html body section.wow-hero.hero-diet .hero-ctas a.btn-primary:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 22px 60px rgba(34, 211, 238, 0.58),
                0 6px 20px rgba(0, 0, 0, 0.5) !important;
  }
  /* Trust-Pills schweben unter CTA wie Apple-Pills */
  html body section.wow-hero.hero-diet .hero-trust-pills {
    margin-top: 2.5rem !important;
    justify-content: center !important;
    gap: 0.7rem !important;
    flex-wrap: wrap !important;
  }
  html body section.wow-hero.hero-diet .hero-trust-pills li {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-radius: 999px !important;
    padding: 0.55rem 1.1rem !important;
    font-size: 0.85rem !important;
    color: rgba(232, 244, 255, 0.92) !important;
    transition: all 0.2s ease !important;
  }
}
@media (max-width: 768px) {
  html body section.wow-hero.hero-diet .hero-headline {
    font-size: clamp(1.95rem, 8vw, 2.6rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.08 !important;
  }
}

/* ===== B. SECTION-SPACING dezent erhöht (nicht aggressiv) ===== */
@media (min-width: 769px) {
  html body section.bundle-hero,
  html body section.firma-manifest,
  html body section.app-showcase {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  /* Nur NEU eingeführte Sections bekommen größere Typografie.
     Bestehende H2s bleiben unangetastet — Pierre: kein neuer Style komplett. */
  html body section.bundle-hero h2,
  html body section.firma-manifest h2,
  html body section.app-showcase h2 {
    font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.022em !important;
    line-height: 1.1 !important;
  }
  html body section.bundle-hero .eyebrow,
  html body section.firma-manifest .eyebrow,
  html body section.app-showcase .eyebrow {
    font-size: 0.76rem !important;
    letter-spacing: 0.2em !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
  }
  /* Section-Header gets premium centered max-width */
  html body section.bundle-hero .bundle-hero-header,
  html body section.firma-manifest .firma-manifest-content,
  html body section.app-showcase .app-showcase-header {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    margin-bottom: 3rem !important;
  }
}

/* ===== C. BUNDLE-HERO PREMIUM-CARDS ===== */
@media (min-width: 769px) {
  html body section.bundle-hero .bundle-card {
    padding: 2.5rem 1.8rem 2rem !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.05) 0%,
                rgba(11, 20, 40, 0.55) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.32s ease,
                box-shadow 0.32s ease !important;
  }
  html body section.bundle-hero .bundle-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(34, 211, 238, 0.45) !important;
    box-shadow: 0 30px 80px rgba(34, 211, 238, 0.15),
                0 8px 24px rgba(0, 0, 0, 0.32) !important;
  }
  html body section.bundle-hero .bundle-card-icon {
    font-size: 2.6rem !important;
    margin-bottom: 0.8rem !important;
  }
  html body section.bundle-hero .bundle-card-price strong {
    font-size: 2rem !important;
    font-weight: 900 !important;
  }
  html body section.bundle-hero .bundle-card-list li {
    font-size: 0.92rem !important;
    padding: 0.42rem 0 !important;
  }
}

/* ===== D. APP-SHOWCASE BENTO PREMIUM ===== */
@media (min-width: 769px) {
  html body section.app-showcase {
    padding: 5rem 1.5rem !important;
  }
  html body section.app-showcase .app-showcase-sub {
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
  }
  html body section.app-showcase .app-showcase-bento {
    gap: 1.4rem !important;
    grid-auto-rows: minmax(220px, auto) !important;
  }
  html body section.app-showcase .aps-card {
    padding: 1.8rem 1.6rem !important;
    border-radius: 20px !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.32s ease,
                box-shadow 0.32s ease !important;
  }
  html body section.app-showcase .aps-card.aps-large {
    background: linear-gradient(135deg, #1E40AF 0%, #22D3EE 100%) !important;
    border: none !important;
    color: #FFFFFF !important;
  }
  html body section.app-showcase .aps-card.aps-large h3 {
    color: #FFFFFF !important;
    font-size: 1.6rem !important;
  }
  html body section.app-showcase .aps-card.aps-large p {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.95) !important;
  }
  html body section.app-showcase .aps-card.aps-medium {
    background: linear-gradient(135deg, #0F2540 0%, #1E40AF 100%) !important;
    border: none !important;
  }
  html body section.app-showcase .aps-card-icon {
    font-size: 2.2rem !important;
    margin-bottom: 0.3rem !important;
  }
  html body section.app-showcase .aps-card h3 {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
  }
}

/* ===== E. SMOOTH-SCROLL ANIMATIONS ===== */
@media (prefers-reduced-motion: no-preference) {
  html body section.reveal {
    animation: premiumFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes premiumFadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }
  html body .bundle-card,
  html body .aps-card,
  html body .news-card {
    animation: premiumScaleIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes premiumScaleIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* ===== F. SECTIONS BLEIBEN — Pierre: kein kompletter Style-Wechsel ===== */
/* Iter-14b (2026-05-16): Section-Hide ausgeklammert. Wir polishen nur,
   nicht entfernen. Bestehende Sections bleiben für Konsistenz. */

/* ===== G. CINEMATIC GRADIENT DIVIDERS ===== */
html body section.bundle-hero + section,
html body section.firma-manifest + section,
html body section.app-showcase + section {
  position: relative;
}
html body section.bundle-hero + section::before,
html body section.firma-manifest + section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(34, 211, 238, 0.3) 50%,
              transparent 100%);
}

/* ===== H. TYPOGRAFIE-HARMONISIERUNG ===== */
html body section h2,
html body section h3,
html body section .section-title {
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif) !important;
}
html body section p,
html body section li,
html body section span:not(.eyebrow):not(.accent) {
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
}

/* ===== I. ACCENT COLOR — REDUCED PALETTE ===== */
html body .accent {
  background: linear-gradient(90deg, #22D3EE 0%, #38BDF8 50%, #67E8F9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ===== J. FOOTER BREATHING ROOM ===== */
@media (min-width: 769px) {
  html body section.cta-section {
    padding: 6rem 2rem 5rem !important;
  }
  html body footer {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* ── END Iter-14 Premium Cinematic ── */

/* =========================================================================
   ITER-15 STORYBOARD-ICON-FIX (2026-05-16)
   Bug: .sb-icon auf Desktop = 1168x1168px (SVG ohne intrinsic dimensions
   expandiert auf Container-Breite). Section war 8500px hoch.
   Fix: Icon-Größe deckeln auf max 120x120 (Mobile) / 160x160 (Desktop).
   ========================================================================= */
html body section.storyboard-section .sb-icon {
  width: 80px !important;
  height: 80px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
html body section.storyboard-section .sb-icon svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 80px !important;
  max-height: 80px !important;
}
@media (min-width: 769px) {
  html body section.storyboard-section .sb-icon {
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
  }
  html body section.storyboard-section .sb-icon svg {
    max-width: 120px !important;
    max-height: 120px !important;
  }
}
html body section.storyboard-section .sb-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.8rem !important;
}
html body section.storyboard-section .sb-card.is-active,
html body section.storyboard-section .sb-card {
  max-height: none !important;
  height: auto !important;
  min-height: auto !important;
}

/* ── END Iter-15 Storyboard-Icon-Fix ── */

/* =========================================================================
   ITER-16 PRIO-2 AUDIT-FIXES (2026-05-16)
   Sungrow-Banner Mobile-Compact + Sticky-CTA IntersectionObserver
   ========================================================================= */

/* Sungrow-Banner auf Mobile: kompakter, schmaler — drückt sonst Hero unter Fold */
@media (max-width: 768px) {
  html body #sgb-wrapper {
    margin: 0 !important;
    padding: 0 !important;
  }
  html body a#sungrowBackupBanner {
    padding: 0.55rem 0.8rem !important;
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
    gap: 0.5rem !important;
  }
  html body #sungrowBackupBanner .sgb-tag {
    padding: 2px 7px !important;
    font-size: 0.62rem !important;
  }
  html body #sungrowBackupBanner .sgb-text strong {
    font-size: 0.82rem !important;
  }
  /* "Strom auch bei Blackout." Teil auf Mobile aus — spart Breite */
  html body #sungrowBackupBanner .sgb-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 60vw !important;
  }
  html body #sungrowBackupBanner .sgb-cta svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* Sticky-CTA aus solange Hero-CTA sichtbar — vermeidet Doppel-CTA */
html.hero-cta-visible #autark-sticky-mobile {
  transform: translateY(100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}

/* Cookie-Banner UX: kleiner auf Mobile damit Hero-CTA sichtbar bleibt */
@media (max-width: 768px) {
  html body .cc-banner,
  html body div[class*="cookie-banner"],
  html body [id*="cookie"],
  html body .cmp-banner {
    max-height: 38vh !important;
    overflow-y: auto !important;
  }
}

/* ── END Iter-16 Prio-2 Audit-Fixes ── */

/* =========================================================================
   ITER-17 INLINE-STYLE-CONSOLIDATION (2026-05-16)
   Kontaktform hatte 376 inline styles. Konsolidiere häufige Patterns.
   ========================================================================= */

/* Kontaktform-Input: Wiederverwendbare Klasse statt Inline-Style */
html body .kf-label {
  display: block !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--gray-light) !important;
  margin-bottom: 0.35rem !important;
}
html body .kf-input,
html body .kf-textarea {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0.85rem 1rem !important;
  border-radius: 10px !important;
  border: 1px solid var(--glass-border) !important;
  background: var(--glass-bg) !important;
  color: var(--white) !important;
  font-size: 16px !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
html body .kf-input:focus,
html body .kf-textarea:focus {
  border-color: var(--blue-primary, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
}
html body .kf-textarea {
  min-height: 88px !important;
  resize: vertical !important;
}

/* ── END Iter-17 Inline-Style-Consolidation ── */

/* =========================================================================
   ITER-18 KONKURRIERENDE-CTAs (2026-05-16) — Audit Prio-2
   Audit: 53 Conversion-Pfade. Reduktion auf 1 primary + 2 secondary + 1 floating.
   ========================================================================= */

/* WhatsApp-Floating Bubble: NUR auf Mobile (Desktop hat genug Space im Form) */
@media (min-width: 769px) {
  html body .wa-float,
  html body #waBtn {
    display: none !important;
  }
}

/* Mobile-only Floating WhatsApp: nicht den ganzen Bottom-Rand blockieren */
@media (max-width: 768px) {
  html body .wa-float,
  html body #waBtn {
    bottom: calc(env(safe-area-inset-bottom, 0) + 72px) !important;
    right: 12px !important;
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
  }
  /* Bei aktivem footer-visible Class (Footer im Viewport): unauffälliger */
  html.footer-visible body .wa-float,
  html.footer-visible body #waBtn {
    opacity: 0.6 !important;
    transform: scale(0.9) !important;
  }
}

/* ── END Iter-18 Konkurrierende-CTAs ── */