/* W21 Pierre's 32-Bug-Fixes (2026-05-20)
   Konsolidierte Overrides — wird via <link> in alle Pages eingebaut.
   Reihenfolge: KRITISCH → HOCH → MITTEL
   ===================================================================== */

/* ---------- D1: "Bad Pyrmont" Umbruch im Hero verhindern ---------- */
.hero h1 em,
.v12-hero h1 em,
.hero-title em {
  white-space: nowrap;
  display: inline-block;
}

/* ---------- D2 / M1 / T2: Theme-Switcher komplett verstecken ---------- */
.theme-switcher,
.v12-theme-switcher,
.v13-theme-switcher,
[data-theme-switcher],
button[data-theme-switch] {
  display: none !important;
  visibility: hidden !important;
}

/* ---------- D3 / D10 / F1: Newsletter-Auto-Popup ist im JS entfernt ----- */
/* Hier nur sicherstellen, dass Modal CLOSED-State default ist */
html:not(.nl-modal-open) #autark-nl-modal,
html:not(.nl-modal-open) .autark-newsletter-modal {
  display: none !important;
}

/* ---------- D5 / F2: Newsletter-Close-Button hell + groß ---------- */
.newsletter-close,
.autark-newsletter-modal .nl-close,
.autark-newsletter-modal [data-nl-close],
#autark-nl-modal .nl-close,
#autark-nl-modal [aria-label*="schließen" i] {
  color: #fff !important;
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
}
.newsletter-close:hover,
.autark-newsletter-modal .nl-close:hover {
  background: rgba(255,255,255,0.30) !important;
}

/* ---------- D6: Top-Bar Text weiß lesbar ---------- */
.top-cta-bar,
.top-bar,
[data-top-cta] {
  color: #fff !important;
}
.top-cta-bar .top-cta-btn,
.top-cta-bar a.top-cta-btn,
.top-bar a {
  background: #fff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
}
.top-cta-bar .top-cta-btn:hover,
.top-bar a:hover {
  background: #f1f5f9 !important;
}

/* ---------- Top-Bar wegklickbar (Pierre's "oben weg klicken") ---------- */
.top-cta-bar .top-cta-close,
.top-bar .top-cta-close,
.top-cta-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: 20px !important;
  cursor: pointer !important;
  margin-left: 8px !important;
  border-radius: 6px !important;
}
.top-cta-bar .top-cta-close:hover {
  background: rgba(255,255,255,0.15) !important;
}
html.top-cta-dismissed .top-cta-bar,
html[data-top-cta-dismissed] .top-cta-bar,
.top-cta-bar.hidden,
.top-cta-bar[hidden] {
  display: none !important;
}
html.top-cta-dismissed body { padding-top: 0 !important; }

/* ---------- D7 / M4: Produkt-Karten kompakter ---------- */
@media (min-width: 769px) {
  .v12-products-grid,
  .product-grid,
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
  }
  .v12-product-card,
  .product-card {
    max-width: 100% !important;
  }
}
.v12-product-card .v12-features li,
.product-card .product-features li,
.v12-product-card p,
.product-card p {
  font-size: 0.86rem !important;
  line-height: 1.55 !important;
}

/* ---------- D8: CO2-Rechner Ergebnis nicht abschneiden ---------- */
.co2-result,
.co2-savings,
[data-co2-value] {
  min-width: 200px !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* CO2-Section: Trees-Box auf Mobile contained (D8b Overflow-Fix) */
@media (max-width: 768px) {
  .co2-section {
    overflow-x: hidden !important;
  }
  .co2-section #co2Trees,
  .co2-section .co2-trees {
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .co2-section > .section,
  .co2-section .section {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

/* ---------- D11: Preis-Hinweis "Eigenanteil" unter Preis ---------- */
.price-note,
.v12-price-note,
.price-eigenanteil {
  display: block !important;
  margin-top: 4px !important;
  font-size: 0.8rem !important;
  color: var(--v12-text-muted, #94a3b8) !important;
  font-weight: 400 !important;
}

/* ---------- D12: Scroll-Progress sichtbarer ---------- */
.scroll-progress,
.reading-progress {
  height: 3px !important;
  background: linear-gradient(90deg, #3b82f6, #06b6d4) !important;
  z-index: 200 !important;
}

/* ---------- F5: Back-to-Top-Button Styling (Element wird von JS injiziert) ---------- */
#backToTop,
.back-to-top {
  position: fixed !important;
  bottom: 88px !important;
  right: 88px !important;
  z-index: 90 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(15,23,42,0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #fff !important;
  cursor: pointer !important;
  font-size: 22px !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity .25s, transform .25s !important;
}
#backToTop.visible,
.back-to-top.visible {
  display: flex !important;
}
#backToTop:hover {
  background: rgba(59,130,246,0.95) !important;
  transform: translateY(-2px) !important;
}

/* =====================================================================
   MOBILE BREAKPOINT (≤768)
   ===================================================================== */
@media (max-width: 768px) {
  /* M2: Top-Bar slim auf Mobile — Text ausblenden, nur Button+Close */
  .top-cta-bar {
    min-height: 44px !important;
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
  }
  .top-cta-bar .top-cta-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    max-width: 100% !important;
  }
  .top-cta-bar .top-cta-text {
    display: none !important;
  }
  .top-cta-bar .top-cta-btn {
    padding: 7px 12px !important;
    font-size: 0.78rem !important;
    margin-left: 0 !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }
  .top-cta-bar .top-cta-close {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
  }
  /* M3: Burger-Schließen ≥44px */
  .menu-close,
  #menuClose,
  .mobile-menu-close,
  .v13-menu-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* M4: Produktkarten Mobile padding-reduziert */
  .v12-product-card,
  .product-card {
    padding: 20px !important;
  }
  .v12-product-card .v12-features li {
    font-size: 0.82rem !important;
  }
  /* M5: Cookie-Banner slim */
  .cookie-banner,
  .cw-cookie-banner,
  [data-cookie-banner] {
    padding: 10px 14px !important;
    font-size: 0.74rem !important;
    line-height: 1.4 !important;
  }
  .cookie-banner button,
  .cw-cookie-banner button {
    padding: 8px 14px !important;
    font-size: 0.78rem !important;
    min-height: 40px !important;
  }
  /* M6: Phone+WhatsApp Buttons kleiner und sicher positioniert */
  .tel-btn-prominent,
  .wa-btn-prominent,
  .phone-button,
  .whatsapp-button,
  a.phone-fab,
  a.wa-fab {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    bottom: 18px !important;
  }
  .tel-btn-prominent,
  .phone-button,
  a.phone-fab { left: 16px !important; }
  .wa-btn-prominent,
  .whatsapp-button,
  a.wa-fab { right: 16px !important; }

  /* M7: Hero h1 Mobile-Größe */
  .hero h1,
  .v12-hero h1,
  .v13-hero h1,
  section.hero h1,
  header.hero h1 {
    font-size: clamp(1.7rem, 7vw, 2.4rem) !important;
    line-height: 1.15 !important;
  }
  /* M8: Newsletter-Popup Padding */
  .autark-newsletter-modal,
  #autark-nl-modal .nl-card,
  .newsletter-popup {
    padding: 20px !important;
  }
  .autark-newsletter-modal h2,
  #autark-nl-modal h2,
  .newsletter-popup h2 {
    font-size: 1.45rem !important;
  }
  /* M9: FOMO-Badge schlanker */
  .fomo-badge,
  .v12-hero-badge,
  [data-fomo] {
    font-size: 0.74rem !important;
    padding: 8px 14px !important;
  }
  /* M10: Galerie 1-Spalte Mobile */
  .gallery-grid,
  .v12-gallery-grid,
  [data-gallery-grid] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Back-to-Top weiter weg vom Phone-Button auf Mobile */
  #backToTop,
  .back-to-top {
    bottom: 80px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* =====================================================================
   TABLET BREAKPOINT (769-1024)
   ===================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  /* T1: Produkt-Karten 2-Spalten auf Tablet */
  .v12-products-grid,
  .product-grid,
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* T3: Trust-Bar wrap */
  .v12-trust-inner,
  .trust-bar-inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px !important;
  }
  /* T4: Newsletter-Modal smaller */
  .autark-newsletter-modal,
  #autark-nl-modal .nl-card {
    max-width: 90vw !important;
    margin: 0 auto !important;
  }
  /* T5: Footer 2-Spalten */
  .v13-footer-grid,
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Gallery 2-cols Tablet */
  .gallery-grid,
  .v12-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =====================================================================
   4K BREAKPOINT — Pierre 2026-05-20: alles muss auf 4K skalieren
   ===================================================================== */
@media (min-width: 1921px) and (max-width: 2560px) {
  html { font-size: 18px; }
  h1, .v12-hero h1, .hero h1 {
    font-size: clamp(2.5rem, 4.2vw, 5rem) !important;
    line-height: 1.05 !important;
  }
  h2 { font-size: clamp(2rem, 3.2vw, 3.5rem) !important; }
  .v12-hero-inner, .hero-content-grid, .v12-section, .v13-footer-inner {
    max-width: 1840px !important;
  }
  .v12-section { padding: 120px 60px !important; }
  .logo-img { width: 48px !important; height: 48px !important; }
  .logo-text { font-size: 1.2rem !important; }
}

@media (min-width: 2561px) and (max-width: 3839px) {
  html { font-size: 20px; }
  h1, .v12-hero h1, .hero h1 {
    font-size: clamp(3rem, 4.5vw, 6.5rem) !important;
    line-height: 1.05 !important;
  }
  h2 { font-size: clamp(2.4rem, 3.5vw, 4.5rem) !important; }
  .v12-hero-inner, .hero-content-grid, .v12-section, .v13-footer-inner {
    max-width: 2200px !important;
  }
  .v12-section { padding: 140px 80px !important; }
  .logo-img { width: 56px !important; height: 56px !important; }
  .logo-text { font-size: 1.4rem !important; }
  .v12-btn-primary, .v12-btn-secondary { padding: 20px 48px !important; font-size: 1.15rem !important; }
}

@media (min-width: 3840px) {
  html { font-size: 24px; }
  h1, .v12-hero h1, .hero h1 {
    font-size: clamp(3.6rem, 5vw, 8rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
  }
  h2 { font-size: clamp(3rem, 4vw, 6rem) !important; }
  body, p { font-size: 1.15rem !important; line-height: 1.65 !important; }
  .v12-hero-inner, .hero-content-grid, .v12-section, .v13-footer-inner {
    max-width: 2880px !important;
  }
  .v12-section { padding: 180px 120px !important; }
  .logo-img { width: 72px !important; height: 72px !important; }
  .logo-text { font-size: 1.8rem !important; }
  .v12-btn-primary, .v12-btn-secondary { padding: 24px 56px !important; font-size: 1.25rem !important; border-radius: 100px !important; }
  .v13-nav-fixed { padding: 28px 80px !important; }
  .v13-nav-fixed a, .menu-link { font-size: 1.15rem !important; }
  .v12-trust-inner { padding: 48px 80px !important; gap: 60px !important; }
  .v12-trust-item .v12-icon { width: 64px !important; height: 64px !important; font-size: 1.6rem !important; }
  .v12-trust-item .v12-info .v12-val { font-size: 1.4rem !important; }
  .v12-trust-item .v12-info .v12-lbl { font-size: 1rem !important; }
  .v12-hero-badge { font-size: 1rem !important; padding: 12px 28px !important; }
  .v12-hero-desc { font-size: 1.4rem !important; max-width: 640px !important; }
  .hausplaner-demo-video video {
    max-width: 1600px !important;
    margin: 0 auto !important;
    display: block !important;
  }
  /* Back-to-Top + FAB scale 4K */
  #backToTop, .back-to-top { width: 60px !important; height: 60px !important; font-size: 28px !important; bottom: 100px !important; right: 100px !important; }
  .tel-btn-prominent, .wa-btn-prominent { width: 64px !important; height: 64px !important; font-size: 28px !important; }
  .top-cta-bar { font-size: 1rem !important; min-height: 48px !important; padding: 14px 24px !important; }
  .top-cta-bar .top-cta-btn { padding: 10px 24px !important; font-size: 1rem !important; }
  .top-cta-bar .top-cta-close { width: 52px !important; height: 52px !important; font-size: 24px !important; }
}

/* =====================================================================
   W22 / A7 — A11y-Polish (2026-05-20)
   Focus-Indicators, Senior-Mode, High-Contrast, Reduced-Motion
   ===================================================================== */

/* --- Sichtbare Focus-Indikatoren (Tab-Navigation) --- */
*:focus {
  outline: 3px solid #06b6d4 !important;
  outline-offset: 2px !important;
}
*:focus:not(:focus-visible) {
  outline: none !important;
}
*:focus-visible {
  outline: 3px solid #06b6d4 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(6, 182, 212, 0.25) !important;
  border-radius: 6px !important;
  transition: outline-offset 0.12s ease-out !important;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
  outline: 3px solid #06b6d4 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(6, 182, 212, 0.30) !important;
}

/* Light-Theme: dunklerer Focus-Ring fuer Kontrast */
[data-theme="light"] *:focus-visible {
  outline-color: #0e7490 !important;
  box-shadow: 0 0 0 6px rgba(14, 116, 144, 0.30) !important;
}

/* --- Skip-Link sichtbar bei Fokus --- */
.skip-link, a.skip-to-content, a[href="#main"] {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}
.skip-link:focus, .skip-link:focus-visible,
a.skip-to-content:focus, a.skip-to-content:focus-visible,
a[href="#main"]:focus, a[href="#main"]:focus-visible {
  position: fixed !important;
  left: 16px !important;
  top: 16px !important;
  z-index: 99999 !important;
  padding: 14px 24px !important;
  background: #06b6d4 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
}

/* --- Senior-Mode (prefers-contrast more / forced-colors / .senior-mode) --- */
@media (prefers-contrast: more) {
  body, p, li, label { color: #f8fafc !important; }
  [data-theme="light"] body,
  [data-theme="light"] p,
  [data-theme="light"] li,
  [data-theme="light"] label { color: #0f172a !important; }
  a { text-decoration: underline !important; text-underline-offset: 3px !important; }
  .v12-btn-primary, .v12-btn-secondary,
  button, .btn, .cta {
    border: 2px solid currentColor !important;
  }
}

@media (forced-colors: active) {
  *:focus-visible {
    outline: 3px solid CanvasText !important;
    outline-offset: 3px !important;
  }
  .v12-btn-primary, .v12-btn-secondary,
  button, .btn, .cta {
    border: 2px solid ButtonText !important;
  }
}

/* Explizite Senior-Klasse (Toggle): >=18px, hoher Kontrast, dickere Buttons */
html.senior-mode, body.senior-mode {
  font-size: 18px !important;
}
html.senior-mode body,
body.senior-mode {
  line-height: 1.75 !important;
}
html.senior-mode p,
html.senior-mode li,
html.senior-mode label,
body.senior-mode p,
body.senior-mode li,
body.senior-mode label {
  font-size: 1.15rem !important;
  color: #f8fafc !important;
}
html.senior-mode[data-theme="light"] p,
html.senior-mode[data-theme="light"] li,
html.senior-mode[data-theme="light"] label,
body.senior-mode[data-theme="light"] p,
body.senior-mode[data-theme="light"] li,
body.senior-mode[data-theme="light"] label {
  color: #0f172a !important;
}
html.senior-mode a,
body.senior-mode a {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 2px !important;
}
html.senior-mode .v12-btn-primary,
html.senior-mode .v12-btn-secondary,
html.senior-mode button,
body.senior-mode .v12-btn-primary,
body.senior-mode .v12-btn-secondary,
body.senior-mode button {
  padding: 18px 36px !important;
  font-size: 1.15rem !important;
  border: 2px solid currentColor !important;
  min-height: 56px !important;
}
html.senior-mode h1, body.senior-mode h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
  line-height: 1.15 !important;
}
html.senior-mode h2, body.senior-mode h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
}

/* --- WCAG-AA Kontrast-Korrekturen (Ocean-Theme) ---
   Bekannte Low-Contrast-Stellen: muted-text auf dunkel = #94a3b8 → 4.4:1 grenzwertig */
.v12-hero-desc, .hero-subtitle, .text-muted, .muted, .v12-trust-item .v12-info .v12-lbl {
  color: #cbd5e1 !important; /* 7.5:1 auf #060e1a */
}
[data-theme="light"] .v12-hero-desc,
[data-theme="light"] .hero-subtitle,
[data-theme="light"] .text-muted,
[data-theme="light"] .muted,
[data-theme="light"] .v12-trust-item .v12-info .v12-lbl {
  color: #334155 !important; /* 9.7:1 auf #ffffff */
}

/* Badge / Tag readability */
.v12-hero-badge, .badge, .tag {
  color: #f1f5f9 !important;
}
[data-theme="light"] .v12-hero-badge,
[data-theme="light"] .badge,
[data-theme="light"] .tag {
  color: #0f172a !important;
}

/* Link-Underline default in body text (Ocean-Theme) */
main p a, article p a, .v12-section p a {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Min Tap-Target 44x44 (WCAG 2.5.5) */
a.icon-only, button.icon-only,
.tel-btn-prominent, .wa-btn-prominent,
#backToTop, .back-to-top {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* --- Reduced-Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================================================================
   W22 Agent A1 — Hero-CTA Above-Fold Boost (iPhone-SE + iPhone-15 fix)
   ================================================================== */
.hero .btn-primary,
.hero a[data-cta="hero-primary"] {
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  padding: 16px 36px !important;
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4) !important;
  animation: pulse-cta 2s infinite !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}

@keyframes pulse-cta {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.55);
  }
}

/* Reduced-Motion: keine Pulse-Animation */
@media (prefers-reduced-motion: reduce) {
  .hero .btn-primary,
  .hero a[data-cta="hero-primary"] {
    animation: none !important;
  }
}

/* Mobile sehr klein (≤390px, iPhone-SE/Mini): Hero-CTA wird als echte
   Sticky-Bottom-CTA eingeblendet (Glassmorphism), weil sie sonst
   below-fold liegt. Echte CTA-Anchor wird re-positioniert (bleibt klickbar). */
@media (max-width: 390px) {
  /* WICHTIG: .hero-buttons hat transform:matrix(1,0,0,1,0,0) → erzeugt
     eigenen containing block für position:fixed-Kinder.
     Wir neutralisieren das, damit `fixed` echt viewport-relativ ist. */
  .hero .hero-buttons {
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
    filter: none !important;
    contain: none !important;
    perspective: none !important;
  }
  .hero a[data-cta="hero-primary"] {
    position: fixed !important;
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    z-index: 9998 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 16px 18px !important;
    background: linear-gradient(135deg, rgba(59,130,246,0.95), rgba(6,182,212,0.95)) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2px !important;
    border-radius: 14px !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    box-shadow: 0 12px 32px rgba(59,130,246,0.45),
                0 0 0 1px rgba(255,255,255,0.18) inset !important;
    animation: pulse-cta 2.4s infinite !important;
    transform: none !important;
    margin: 0 !important;
  }
  /* Sticky-CTA verdeckt sonst Footer-Inhalt */
  body { padding-bottom: 80px !important; }
  /* FAB/Phone-Buttons höher schieben, damit sie nicht überdeckt werden */
  a.tel-btn-prominent,
  a.wa-btn-prominent,
  #backToTop,
  .back-to-top {
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
}

/* iPhone-15 / Mid-Mobile Größenklasse (391-480px):
   CTA bleibt im Flow, aber größer + lesbarer */
@media (min-width: 391px) and (max-width: 480px) {
  .hero .btn-primary,
  .hero a[data-cta="hero-primary"] {
    font-size: 1.05rem !important;
    padding: 16px 28px !important;
    box-shadow: 0 10px 32px rgba(59,130,246,0.5) !important;
  }
}

/* =====================================================================
   W22 / A6 — 4K-Visual-Polish (2026-05-20)
   - Hero-Drohne-Video ist nur 1280x720 → ab 2560px Cover-Image-Fallback
   - FAB-Inline-Style auf 4K mit höherer Spezifität überschrieben
   - Newsletter-Modal max-width + Logo skaliert auf 4K
   - Hero-Inner Container vergrößert (vorher nur 900px)
   - Hausplaner-Demo-Video max-width auf 4K erhöht
   - srcset-Duplikat `2240w, 2240w` getrennt in HTML gefixt
   ===================================================================== */

/* --- W22-A6/1: HERO Video ausblenden ab 2560px, scharfes Cover-Bild als BG ---
   /baustellen/drohne-fertig-2880w.webp existiert nativ in 2880w-Auflösung.
   Video 1280x720 → 3x Upscale auf 4K = sichtbar unscharf. */
@media (min-width: 2560px) {
  .hero-bg video {
    display: none !important;
  }
  .hero-bg {
    background-image: url('/baustellen/drohne-fertig-2880w.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* --- W22-A6/2: Hero-Inner Container größer auf 4K (war 900px) --- */
@media (min-width: 1921px) and (max-width: 2560px) {
  .hero-inner { max-width: 1400px !important; }
  .hero-desc { font-size: 1.15rem !important; max-width: 900px !important; }
}
@media (min-width: 2561px) and (max-width: 3839px) {
  .hero-inner { max-width: 1700px !important; }
  .hero-desc { font-size: 1.25rem !important; max-width: 1100px !important; }
}
@media (min-width: 3840px) {
  .hero-inner { max-width: 2200px !important; }
  .hero-desc { font-size: 1.4rem !important; max-width: 1400px !important; }
  .hero-badge,
  .hero-zero-deposit { font-size: 1rem !important; padding: 12px 28px !important; }
  .hero-buttons .btn,
  .hero-buttons a { padding: 22px 44px !important; font-size: 1.2rem !important; }
}

/* --- W22-A6/3: FAB Inline-Style mit höherer Spezifität schlagen ---
   Inline style="bottom:24px;width:48px..." wird sonst nicht überschrieben.
   Selektor a[class][style] erhöht Spezifität, !important schlägt inline. */
@media (min-width: 2560px) {
  a.tel-btn-prominent[style],
  a.wa-btn-prominent[style] {
    width: 80px !important;
    height: 80px !important;
    font-size: 36px !important;
    bottom: 80px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
  }
  a.tel-btn-prominent[style] { left: 80px !important; }
  a.wa-btn-prominent[style] { right: 80px !important; }
  #backToTop,
  .back-to-top {
    width: 72px !important;
    height: 72px !important;
    font-size: 32px !important;
    bottom: 180px !important;
    right: 80px !important;
  }
}

/* --- W22-A6/4: Newsletter-Modal größer auf 4K --- */
@media (min-width: 2560px) {
  .nl-modal-card {
    max-width: 720px !important;
    padding: 40px 40px calc(40px + env(safe-area-inset-bottom)) !important;
  }
  .nl-modal-logo {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
  }
  .nl-modal-title { font-size: clamp(2rem, 2.5vw, 2.6rem) !important; }
  .nl-modal-subtitle { font-size: 1.1rem !important; line-height: 1.55 !important; }
  .nl-modal-bullets li { font-size: 1rem !important; padding: 6px 0 !important; }
  .nl-input { padding: 16px 18px !important; font-size: 1.05rem !important; border-radius: 12px !important; }
  .nl-submit { padding: 18px 22px !important; font-size: 1.1rem !important; min-height: 60px !important; border-radius: 14px !important; }
  .nl-modal-close { width: 56px !important; height: 56px !important; }
  .nl-modal-close svg { width: 28px !important; height: 28px !important; }
}

/* --- W22-A6/5: Top-CTA-Bar (Pierre's Phone-Banner) größer auf 4K --- */
@media (min-width: 2560px) {
  .top-cta-bar,
  .top-bar,
  [data-top-cta] {
    font-size: 1.1rem !important;
    min-height: 56px !important;
    padding: 16px 32px !important;
  }
}

/* --- W22-A6/6: "Bad Pyrmont" em-Umbruch fix auf 4K verstärkt --- */
@media (min-width: 2560px) {
  .hero h1,
  .v12-hero h1,
  .hero-title {
    white-space: normal !important;
    word-break: keep-all !important;
  }
  .hero h1 em,
  .v12-hero h1 em,
  .hero-title em {
    white-space: nowrap !important;
    display: inline-block !important;
    word-break: keep-all !important;
  }
}

/* --- W22-A6/7: Hausplaner-Demo-Video Container größer auf 4K --- */
@media (min-width: 3840px) {
  .hausplaner-demo-video { padding: 100px 40px !important; }
  .hausplaner-demo-video video {
    max-width: 1920px !important;
    border-radius: 28px !important;
    box-shadow: 0 32px 96px rgba(59,130,246,0.30) !important;
  }
}

/* --- W22-A1/4K: Hero-CTA above-fold auf 4K erzwingen ---
   ROOT-CAUSE: H1#hero-h auf 4K war 192px → 9 Zeilen × 192 = 1814px → Hero 2080px,
   CTA bei top=2261 → 101px unter fold (vh=2160).
   Fix: H1-font-size cappen + hero-inner kompaktieren. */
@media (min-width: 3840px) {
  .hero {
    min-height: auto !important;
    height: auto !important;
    max-height: 100vh !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  .hero-inner {
    padding-top: 40px !important;
    padding-bottom: 32px !important;
    max-height: calc(100vh - 60px) !important;
  }
  /* H1 cappen — 192px ist absurd für 4K, 96px ist immer noch sehr groß */
  .hero h1,
  .hero #hero-h,
  .hero-title,
  .v12-hero h1 {
    font-size: clamp(3rem, 4.5vw, 6rem) !important;
    line-height: 1.05 !important;
    margin: 0 0 24px 0 !important;
    max-width: 1800px !important;
  }
  .hero-desc {
    font-size: 1.25rem !important;
    line-height: 1.55 !important;
    margin-top: 18px !important;
    margin-bottom: 24px !important;
    max-width: 1100px !important;
  }
  .hero-buttons {
    margin-top: 24px !important;
    gap: 16px !important;
  }
  .hero .btn-primary,
  .hero a[data-cta="hero-primary"] {
    padding: 18px 40px !important;
    font-size: 1.15rem !important;
  }
  .hero-badge,
  .hero-zero-deposit {
    font-size: 0.95rem !important;
    padding: 10px 22px !important;
  }
}


/* =====================================================================
   W22 / A3 — Mobile-Deep-Polish (2026-05-20)
   Behebt 4 Hauptbugs aus 6×8 Mobile-Audit:
   - .btn-primary global zu klein (17-20px statt 44px)
   - FAB+Cookie-Banner überlagern sich auf 7/8 Pages
   - Burger-Icon (.menu-btn-Fallback) selten zu klein
   - Hero-Images 1408px überlaufen schmale Viewports (Android-9-fold 280px)
   ===================================================================== */

/* --- W22-A3/1: Mobile Min-Tap-Target 44px für ALLE Primary-CTAs --- */
@media (max-width: 768px) {
  a.btn-primary,
  button.btn-primary,
  .btn-primary,
  a.btn,
  button.btn,
  a.cta-button,
  button.cta-button {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
  }
  /* Falls als Inline-Element gerendert, force inline-flex */
  a.btn-primary, a.btn, a.cta-button { text-decoration: none; }
}

/* --- W22-A3/2: FAB nicht über Cookie-Banner --- *
   Cookie-Banner sitzt typischerweise bottom:0. FAB hoch schieben wenn
   Cookie-Banner sichtbar. Wir nutzen einen Body-Marker:
   - Default: FAB bottom:88px (über Cookie-Banner)
   - Wenn Body[data-cookie-accepted="1"]: bottom:24px */
@media (max-width: 1024px) {
  .fab,
  .fab-phone,
  .fab-wa,
  a.tel-btn-prominent,
  a.wa-btn-prominent,
  .floating-cta,
  .sticky-cta {
    bottom: 160px !important;
  }
  body[data-cookie-accepted="1"] .fab,
  body[data-cookie-accepted="1"] .fab-phone,
  body[data-cookie-accepted="1"] .fab-wa,
  body[data-cookie-accepted="1"] .tel-btn-prominent,
  body[data-cookie-accepted="1"] .wa-btn-prominent,
  body[data-cookie-accepted="1"] .floating-cta,
  body[data-cookie-accepted="1"] .sticky-cta {
    bottom: 24px !important;
  }
}

/* --- W22-A3/3: Burger-Icon Mindesgröße sichern --- */
@media (max-width: 768px) {
  .burger,
  #burgerBtn,
  .nav-burger,
  .menu-btn,
  .mobile-menu-toggle,
  .nav-toggle,
  .hamburger,
  button[aria-label*="menü" i],
  button[aria-label*="menu" i] {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }
}

/* --- W22-A3/4: Bilder/Iframes/Videos auf Mobile max-width:100% (Android-9-fold 280px Crash-Fix) --- */
@media (max-width: 480px) {
  img,
  picture,
  picture > img,
  video,
  iframe,
  svg:not(.icon-inline) {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Hero-Background-Images haben oft fix-w via inline-style */
  .v12-hero img,
  .v13-hero img,
  .hero img,
  .hero-bg img {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- W22-A3/5: Sehr schmale Viewports (<= 320px) zusätzliche Schoner --- */
@media (max-width: 320px) {
  /* Padding reduzieren damit Inhalt nicht überläuft */
  body { padding-left: 0 !important; padding-right: 0 !important; }
  .v12-section, .v13-section, section, main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Buttons full-width für mehr Klickfläche */
  .hero a.btn-primary,
  .hero a.btn,
  .v12-hero a.btn-primary,
  .v13-hero a.btn-primary {
    width: 100% !important;
    max-width: 320px !important;
  }
}

/* W22-A2-HOTFIX: Mobile H-Scroll-Bug (Lisa-Stats-Grid + App-Promo sprengen 393px) */
@media (max-width: 768px) {
  .lisa-stats-grid,
  .v12-lisa-grid,
  [class*="lisa-stats"] {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .app-promo-section picture,
  .app-promo-section img,
  [class*="app-promo"] picture,
  [class*="app-promo"] img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  .orb, .v12-orb, [class*="orb-"] {
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  /* Body-Level overflow guard */
  body { overflow-x: clip !important; max-width: 100vw !important; }
}

/* W22-A2-HOTFIX: Hero-Badge darf Burger NICHT überlagern */
.hero-badge, .v12-hero-badge {
  pointer-events: none !important;
}
.hero-badge a, .hero-badge button, .v12-hero-badge a, .v12-hero-badge button {
  pointer-events: auto !important;
}
.floating-nav, .v13-nav-fixed, #burgerBtn {
  z-index: 350 !important;
  pointer-events: auto !important;
}

/* W22-A2-HOTFIX-2: Calc-Form Inputs sprengen 393px Mobile */
@media (max-width: 768px) {
  .calc-form input,
  .calc-form select,
  .calc-form textarea,
  form input[type="text"],
  form input[type="email"],
  form input[type="tel"],
  form input[type="number"],
  form select,
  form textarea {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .calc-form,
  .lead-form,
  form {
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Hero-Section Layout-Containment */
  section.hero,
  .v12-hero,
  header.v12-hero {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }
  /* SPAN absolute überschießende positions */
  section.hero span,
  .hero span {
    max-width: 100% !important;
    word-break: break-word !important;
  }
}

/* W22-A2-HOTFIX-3: Footer-Logo "AUTARK INNOVATIONS" sprengt Viewport 393px */
@media (max-width: 768px) {
  .v13-logo,
  .v13-logo span,
  .v13-footer-brand .v13-logo {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: break-word !important;
    font-size: clamp(1rem, 4vw, 1.3rem) !important;
  }
  .v13-footer-brand {
    max-width: 100% !important;
    word-break: break-word !important;
  }
}

/* W22-FINAL-HOTFIX: .menu-cta Link 512px breit überläuft 393px Viewport */
@media (max-width: 768px) {
  .menu-cta, .mobile-menu .menu-cta, #mobileMenu .menu-cta {
    max-width: calc(100vw - 32px) !important;
    width: auto !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
    display: block !important;
    text-align: center !important;
  }
  /* Mobile-Menu Container Containment */
  #mobileMenu, .mobile-menu, .v13-mobile-menu {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}