/* Autark Innovations Premium v14-Ocean
   Basis: v35-Referenz (.design-reference-v35/index.html)
   Migration: 2026-05-20
   Fonts: Space Grotesk (Display) + Inter (Body)
*/

/* ========== ULTIMATE V14 — CSS VARIABLES ========== */
:root[data-theme="ocean"] {
  --bg:#060e1a;--bg-2:#0a1628;--bg-card:rgba(255,255,255,0.04);
  --bg-card-hover:rgba(255,255,255,0.07);--text:#ffffff;
  --text-2:#94a3b8;--text-3:#64748b;--border:rgba(148,163,184,0.12);
  --border-hover:rgba(148,163,184,0.25);--accent:#3b82f6;
  --accent-light:#60a5fa;--accent-glow:rgba(59,130,246,0.25);
  --accent2:#06b6d4;--accent3:#34d399;--gradient-1:#3b82f6;
  --gradient-2:#06b6d4;--gradient-3:#34d399;
  --nav-bg:rgba(6,14,26,0.85);--hero-ov:linear-gradient(180deg,rgba(6,14,26,0.4) 0%,rgba(6,14,26,0.88) 70%,#060e1a 100%);
  --shadow:0 20px 60px rgba(0,0,0,0.5);--glow:0 0 40px rgba(59,130,246,0.15);
  /* Pflicht-Token (v14-Migration) */
  --accent-orange:#f59e0b;
  --accent-orange-2:#f97316;
  --accent-orange-glow:rgba(245,158,11,0.3);
  --tag-w:#22d3ee;
  --tag-k:#a78bfa;
}
:root[data-theme="light"] {
  --bg:#f8f9fc;--bg-2:#f0f4f8;--bg-card:rgba(255,255,255,0.8);
  --bg-card-hover:rgba(255,255,255,0.95);--text:#1e293b;
  --text-2:#64748b;--text-3:#94a3b8;--border:rgba(0,0,0,0.06);
  --border-hover:rgba(96,165,250,0.3);--accent:#3b82f6;
  --accent-light:#60a5fa;--accent-glow:rgba(96,165,250,0.15);
  --accent2:#22d3ee;--accent3:#34d399;--gradient-1:#60a5fa;
  --gradient-2:#a78bfa;--gradient-3:#fb7185;
  --nav-bg:rgba(248,249,252,0.85);--hero-ov:linear-gradient(180deg,rgba(248,249,252,0.2) 0%,rgba(248,249,252,0.9) 70%,#f8f9fc 100%);
  --shadow:0 20px 60px rgba(0,0,0,0.08);--glow:0 0 40px rgba(96,165,250,0.1);
  /* Pflicht-Token (v14-Migration) */
  --accent-orange:#f59e0b;
  --accent-orange-2:#f97316;
  --accent-orange-glow:rgba(245,158,11,0.3);
  --tag-w:#22d3ee;
  --tag-k:#a78bfa;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Pierre-Memory: overflow-x:hidden NIE auf html (bricht Android-Touch-Scroll) */
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:80px}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .5s,color .5s}
.font-display{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.01em}

/* ========== ANIMATED BACKGROUND ORBS ========== */
.animated-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1;transition:opacity .5s}
[data-theme="light"] .animated-bg{opacity:0}
.animated-bg .orb{position:absolute;border-radius:50%;filter:blur(100px);animation:orbFloat 20s ease-in-out infinite}
.orb-1{width:600px;height:600px;background:rgba(59,130,246,0.18);top:-200px;left:-100px;animation-delay:0s}
.orb-2{width:500px;height:500px;background:rgba(6,182,212,0.14);top:50%;right:-150px;animation-delay:-7s}
.orb-3{width:400px;height:400px;background:rgba(52,211,153,0.12);bottom:-100px;left:30%;animation-delay:-14s}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.1)}66%{transform:translate(-20px,20px) scale(0.95)}}
/* Mobile-Fix: verschachteltes @media entkapselt (war Bug Z. 63-65 in v35) */
@media(max-width:480px){
  .orb-1,.orb-2,.orb-3{display:none}
}

/* ========== THEME SWITCHER ========== */
.theme-switcher{position:fixed;top:90px;right:16px;z-index:200;background:var(--bg-card);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:14px;padding:5px;box-shadow:var(--shadow);transition:all .3s}
.theme-btn{display:block;width:40px;height:40px;border-radius:10px;border:2px solid transparent;background:transparent;cursor:pointer;transition:.25s;margin-bottom:3px;position:relative}
.theme-btn:last-child{margin-bottom:0}
.theme-btn:hover{background:var(--bg-card-hover)}
.theme-btn.active{border-color:var(--accent)}
.tb-dot{width:18px;height:18px;border-radius:50%;margin:0 auto}
.tb-label{font-size:.78rem;text-align:center;margin-top:2px;color:var(--text-1,#fff);font-weight:700;text-transform:uppercase;letter-spacing:.5px;line-height:1.2}
.t-ocean{background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2))}
.t-light{background:linear-gradient(135deg,#60a5fa,#f8f9fc);border:1px solid var(--border)}

/* ========== TOP CTA BAR ========== */
.top-cta-bar{position:fixed;top:0;left:0;right:0;z-index:300;background:linear-gradient(90deg,var(--gradient-1),var(--gradient-2));padding:10px 20px;text-align:center;transition:all .3s}
.top-cta-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:16px;position:relative}
.top-cta-text{color:#fff;font-size:.85rem;font-weight:400}
.top-cta-text strong{font-weight:700}
.top-cta-btn{padding:6px 18px;border-radius:100px;background:rgba(255,255,255,0.2);color:#fff;font-size:.78rem;font-weight:600;text-decoration:none;transition:.2s;border:1px solid rgba(255,255,255,0.3);white-space:nowrap}
.top-cta-btn:hover{background:rgba(255,255,255,0.35)}
/* Bug 13/14-Fix: Touch-Target ≥44x44px */
.top-cta-close{position:absolute;right:0;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;transition:.2s;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.top-cta-close:hover{color:#fff}

/* ========== NAV ========== */
.nav-fixed{position:fixed;top:40px;left:0;right:0;z-index:100;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;transition:all .4s;pointer-events:none}
.nav-fixed>*{pointer-events:auto}
/* Logo: konsolidierte Definition (war doppelt in v35 — Visual-Bug 15) */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:'Space Grotesk',sans-serif;font-size:1.3rem;color:var(--text);letter-spacing:-0.02em;font-weight:500;text-shadow:0 2px 20px var(--accent-glow)}
.logo-img{width:40px;height:40px;border-radius:8px;object-fit:cover}
.logo-text{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;color:var(--text);letter-spacing:0.02em;font-weight:500}
.logo .dot{color:var(--accent);font-weight:700}
/* Bug 4-Fix: Burger Touch-Target ≥44x44px (war 36x36) */
.burger{width:44px;height:44px;border-radius:10px;background:var(--bg-card);backdrop-filter:blur(20px);border:1px solid var(--border);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:.25s;position:relative;z-index:110}
.burger:hover{background:var(--bg-card-hover);border-color:var(--border-hover)}
.burger span{display:block;width:18px;height:1.5px;border-radius:1px;background:var(--text);transition:.3s}
.burger.active span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

/* ========== MOBILE MENU ========== */
.mobile-menu{position:fixed;inset:0;z-index:105;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;opacity:0;visibility:hidden;transition:all .4s}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{color:var(--text);text-decoration:none;font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:300;transition:.2s;opacity:0;transform:translateY(20px)}
.mobile-menu.open a{opacity:1;transform:translateY(0)}
.mobile-menu a:nth-child(2){transition-delay:.1s}
.mobile-menu a:nth-child(3){transition-delay:.15s}
.mobile-menu a:nth-child(4){transition-delay:.2s}
.mobile-menu a:nth-child(5){transition-delay:.25s}
.mobile-menu a:nth-child(6){transition-delay:.3s}
.mobile-menu a:nth-child(7){transition-delay:.35s}
.mobile-menu a:hover{color:var(--accent-light)}
.menu-cta{padding:14px 36px;border-radius:100px;background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));color:#fff;font-size:1rem;font-weight:600;text-decoration:none;box-shadow:0 4px 20px var(--accent-glow);opacity:0;transform:translateY(20px);transition:all .3s .4s}
.menu-cta:hover{transform:translateY(-2px)}
.mobile-menu.open .menu-cta{opacity:1;transform:translateY(0)}
/* Bug 4-Fix: Burger-Close Touch-Target ≥44x44px (war 42x42) */
.menu-close{position:absolute;top:70px;right:32px;width:48px;height:48px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);font-size:1.4rem;z-index:310}

/* ========== HERO ========== */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
/* A11y-Patch: hartkodierter Overlay durch Variable ersetzt */
.hero-bg::after{content:'';position:absolute;inset:0;background:var(--hero-ov)}
.hero-inner{max-width:900px;margin:0 auto;padding:100px 32px 80px;text-align:center;position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:100px;background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);font-size:.82rem;font-weight:600;color:var(--text-2);margin:0 auto 24px}
.hero-badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent3);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.hero h1{font-family:'Space Grotesk',sans-serif;font-size:4.2rem;font-weight:300;line-height:1.05;letter-spacing:-0.02em;margin-bottom:20px;max-width:800px;margin-left:auto;margin-right:auto}
.hero h1 em{font-style:italic;background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* === CINEMATIC TEXT REVEAL === */
.hero-text-reveal h1{font-family:'Space Grotesk',sans-serif;font-size:4.2rem;font-weight:300;line-height:1.05;letter-spacing:-0.02em;margin-bottom:20px;max-width:800px;margin-left:auto;margin-right:auto;overflow:hidden}
.hero-text-reveal h1 em{font-style:italic;background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.reveal-word{display:inline-block;opacity:0;transform:translateY(100%);filter:blur(8px);transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1),filter 0.8s cubic-bezier(0.16,1,0.3,1);margin-right:0.3em}
.reveal-word.visible{opacity:1;transform:translateY(0);filter:blur(0)}
.reveal-word.em-word{background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-style:italic}

/* === HERO REVEAL SEQUENCE === */
.hero-desc{opacity:0;transform:translateY(20px);transition:opacity 0.7s ease 1.2s,transform 0.7s ease 1.2s}
.hero-desc.revealed{opacity:1;transform:translateY(0)}
.hero-buttons{opacity:0;transform:translateY(20px) scale(0.95);transition:opacity 0.6s ease 1.5s,transform 0.6s ease 1.5s}
.hero-buttons.revealed{opacity:1;transform:translateY(0) scale(1)}

/* === HERO VIDEO PARALLAX === */
.hero-bg video{will-change:transform}

.hero-desc{font-size:1.1rem;color:var(--text-2);max-width:560px;margin:0 auto 32px;line-height:1.7}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn-primary{padding:18px 40px;border-radius:100px;background:linear-gradient(135deg,var(--accent-orange),var(--accent-orange-2));color:#fff;font-size:1rem;font-weight:700;border:none;cursor:pointer;transition:.3s;text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 25px var(--accent-orange-glow);font-family:'Space Grotesk',sans-serif;letter-spacing:-0.01em}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 35px var(--accent-orange-glow);filter:brightness(1.08)}
.btn-secondary{padding:16px 36px;border-radius:100px;background:transparent;color:var(--text);font-size:.95rem;font-weight:600;border:1.5px solid var(--border);cursor:pointer;transition:.3s;text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;letter-spacing:-0.01em}
.btn-secondary:hover{border-color:var(--accent-light);background:var(--bg-card)}
.hero-visual{position:relative}
.hero-img{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border)}
.hero-img img{width:100%;height:380px;object-fit:cover;display:block}
.hero-float{position:absolute;bottom:-16px;left:-16px;background:var(--bg-card);backdrop-filter:blur(20px);padding:16px 22px;border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow)}
.hero-float .val{font-family:'Space Grotesk',sans-serif;font-size:1.6rem;background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.hero-float .lbl{font-size:.72rem;color:var(--text-3);margin-top:4px}
.hero-float2{position:absolute;top:-12px;right:-12px;background:var(--bg-card);backdrop-filter:blur(20px);padding:12px 16px;border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow);text-align:center}
.hero-float2 .stars{color:var(--accent-orange);font-size:.85rem;letter-spacing:1px}
.hero-float2 .lbl{font-size:.72rem;color:var(--text-3);margin-top:2px}

/* ========== TRUST ========== */
.trust-bar{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-2);position:relative;z-index:1}
.trust-inner{max-width:1280px;margin:0 auto;padding:32px;display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:28px}
.trust-item{display:flex;align-items:center;gap:12px}
.trust-item .icon{width:42px;height:42px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.trust-item .info .val{font-weight:700;font-size:1rem;color:var(--text)}
.trust-item .info .lbl{font-size:.76rem;color:var(--text-3)}

/* ========== SECTIONS ========== */
.section{max-width:1280px;margin:0 auto;padding:100px 32px;position:relative;z-index:1;border-top:1px solid rgba(255,255,255,0.04)}
.section-header{text-align:center;max-width:640px;margin:0 auto 48px}
.eyebrow{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:3px;color:var(--accent);margin-bottom:16px;font-family:'Space Grotesk',sans-serif}
.section-header h2{font-family:'Space Grotesk',sans-serif;font-size:2.8rem;font-weight:300;line-height:1.1;letter-spacing:-0.01em;margin-bottom:14px}
.section-header h2 em{font-style:italic;background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.section-header p{color:var(--text-2);font-size:1.05rem;line-height:1.7}

/* ========== 3-STEP PROCESS ========== */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative}
.steps-grid::before{content:'';position:absolute;top:40px;left:20%;right:20%;height:2px;background:linear-gradient(90deg,var(--gradient-1),var(--gradient-2),var(--gradient-3));opacity:.3}
.step-card{text-align:center;position:relative;z-index:1}
.step-num{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:2rem;color:#fff;font-weight:700;margin:0 auto 20px;box-shadow:0 8px 30px var(--accent-glow)}
.step-card h3{font-size:1.2rem;font-weight:700;margin-bottom:10px;color:var(--text)}
.step-card p{font-size:.88rem;color:var(--text-2);line-height:1.6}

/* ========== PRODUCTS ========== */
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.product-card{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:18px;overflow:hidden;border:1px solid var(--border);transition:.4s;position:relative;transform-style:preserve-3d}
.product-card:hover{transform:translateY(-8px);box-shadow:var(--shadow),var(--glow);border-color:var(--border-hover)}
.product-card .prod-img{height:180px;overflow:hidden;position:relative}
.product-card .prod-img img{width:100%;height:100%;object-fit:cover;transition:.6s}
.product-card:hover .prod-img img{transform:scale(1.08)}
.product-card .prod-tag{position:absolute;top:12px;left:12px;padding:5px 12px;border-radius:100px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:var(--bg);border:1px solid var(--border)}
.tag-s{color:var(--accent-orange)}
.tag-w{color:var(--tag-w)}
.tag-k{color:var(--tag-k)}
.tag-wa{color:var(--accent-orange-2)}
.product-card .prod-body{padding:22px}
.product-card h3{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;margin-bottom:6px}
.product-card p{font-size:.82rem;color:var(--text-2);margin-bottom:12px;line-height:1.5}
.product-card .price{font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:700;background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:14px;margin-top:4px}
.product-card .features{list-style:none;margin-top:8px}
.product-card .features li{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-2);margin-bottom:8px}
.product-card .features li::before{content:'\2713';width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff;font-weight:700;flex-shrink:0}

/* ========== 3D DACHPLANER ========== */
.dachplaner-section{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;z-index:1}
.dachplaner-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.dachplaner-content h2{font-family:'Space Grotesk',sans-serif;font-size:2.8rem;font-weight:400;line-height:1.1;margin-bottom:16px}
.dachplaner-content h2 em{font-style:italic;background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.dachplaner-content p{color:var(--text-2);font-size:1.05rem;line-height:1.7;margin-bottom:28px}
.dachplaner-features{list-style:none;margin-bottom:28px}
.dachplaner-features li{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:.92rem;color:var(--text-2)}
.dachplaner-features li .icon{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#fff;font-weight:700;flex-shrink:0}
.dachplaner-img{border-radius:20px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.dachplaner-img img{width:100%;height:400px;object-fit:cover;display:block}

/* ========== LISA ========== */
.lisa-section{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;z-index:1}
.lisa-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.lisa-chat{background:var(--bg-card);backdrop-filter:blur(20px);border-radius:18px;border:1px solid var(--border);padding:28px;box-shadow:var(--shadow)}
.lisa-chat-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.lisa-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;border:2px solid var(--accent)}
.lisa-avatar img{width:100%;height:100%;object-fit:cover}
.lisa-name{font-weight:600;color:var(--text)}
.lisa-status{font-size:.76rem;color:var(--text-3);display:flex;align-items:center;gap:6px;margin-top:2px}
.lisa-status .online{width:8px;height:8px;border-radius:50%;background:var(--accent3);animation:pulse 2s infinite}
.chat-msg{padding:12px 16px;border-radius:16px;margin-bottom:10px;max-width:85%;font-size:.88rem;line-height:1.5}
.chat-msg.bot{background:var(--bg-2);border-bottom-left-radius:4px;color:var(--text)}
.chat-msg.user{background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.chat-cta{margin-top:16px;padding:14px;border-radius:12px;background:var(--accent-glow);text-align:center;font-size:.88rem;font-weight:600;color:var(--accent-light);cursor:pointer;transition:.2s;border:1px solid var(--border)}
.chat-cta:hover{background:var(--accent);color:#fff}

/* ========== RECHNER ========== */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.calc-form{background:var(--bg-card);backdrop-filter:blur(10px);padding:36px;border-radius:18px;border:1px solid var(--border);box-shadow:var(--shadow)}
.calc-form .field{margin-bottom:18px}
.calc-form label{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px;color:var(--text-2)}
.calc-form input,.calc-form select{width:100%;padding:14px 16px;border-radius:12px;background:var(--bg);border:1.5px solid var(--border);color:var(--text);font-family:inherit;font-size:.9rem;outline:none;transition:.2s}
.calc-form input:focus,.calc-form select:focus{border-color:var(--accent-light)}
.calc-result{background:linear-gradient(135deg,var(--accent-glow),rgba(6,182,212,0.08));padding:24px;border-radius:14px;text-align:center;margin-top:20px;border:1px solid var(--border)}
.calc-result .res-label{font-size:.82rem;color:var(--text-3);margin-bottom:6px}
.calc-result .res-value{font-family:'Space Grotesk',sans-serif;font-size:2.6rem;background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.calc-result .res-sub{font-size:.8rem;color:var(--text-3);margin-top:6px}

/* ========== MONITORING APP ========== */
.monitoring-section{position:relative;z-index:1;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.monitoring-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.monitoring-visual{position:relative}
.monitoring-visual img{width:100%;border-radius:20px;border:1px solid var(--border);box-shadow:var(--shadow)}
.monitoring-visual .video-overlay{position:absolute;bottom:20px;left:20px;right:20px;background:var(--bg-card);backdrop-filter:blur(20px);border-radius:14px;padding:16px;border:1px solid var(--border);display:flex;align-items:center;gap:16px}
.play-btn{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;cursor:pointer;transition:.3s;box-shadow:0 4px 15px var(--accent-glow)}
.play-btn:hover{transform:scale(1.1)}
.video-info .v-title{font-weight:600;font-size:.9rem;color:var(--text)}
.video-info .v-sub{font-size:.76rem;color:var(--text-3)}
.monitoring-content h2{font-family:'Space Grotesk',sans-serif;font-size:2.8rem;font-weight:400;line-height:1.1;margin-bottom:16px}
.monitoring-content h2 em{font-style:italic;background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.monitoring-content p{color:var(--text-2);font-size:1.05rem;line-height:1.7;margin-bottom:28px}
.monitoring-features{list-style:none;margin-bottom:28px}
.monitoring-features li{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:.92rem;color:var(--text-2)}
.monitoring-features li .icon{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent3),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#fff;font-weight:700;flex-shrink:0}

/* ========== WALLBOX ========== */
.wallbox-section{background:var(--bg-2);border-radius:24px;margin:0 32px 80px;max-width:none;padding:0;position:relative;z-index:1;overflow:hidden;border:1px solid var(--border)}
.wallbox-inner{max-width:1200px;margin:0 auto;padding:60px 32px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.wallbox-content .eyebrow-w{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:3px;color:var(--accent-orange);margin-bottom:12px;font-family:'Space Grotesk',sans-serif}
.wallbox-content h2{font-family:'Space Grotesk',sans-serif;font-size:2.8rem;font-weight:400;line-height:1.1;margin-bottom:16px}
.wallbox-content h2 em{font-style:italic;background:linear-gradient(135deg,var(--accent-orange),var(--accent-orange-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.wallbox-content p{color:var(--text-2);font-size:1rem;line-height:1.7;margin-bottom:24px}
.wallbox-features{list-style:none}
.wallbox-features li{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:.92rem;color:var(--text-2)}
.wallbox-features li .check{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent3),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#fff;font-weight:700;flex-shrink:0}
.wallbox-img{border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.wallbox-img img{width:100%;height:320px;object-fit:cover;display:block}

/* ========== CO2 ========== */
.co2-section{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;z-index:1}
.co2-slider-container{max-width:600px;margin:0 auto;text-align:center}
/* Bug 3-Fix: Slider min-height 32px (Touch-Bedienbarkeit, war 8px im Original — v35 hatte 24px, jetzt 32px) */
.co2-slider{width:100%;-webkit-appearance:none;appearance:none;height:32px;min-height:32px;border-radius:10px;background:linear-gradient(90deg,var(--gradient-1),var(--gradient-3));outline:none;margin:24px 0}
.co2-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:32px;height:32px;border-radius:50%;background:var(--text);border:3px solid var(--accent);cursor:pointer;box-shadow:0 4px 15px rgba(0,0,0,0.3)}
.co2-slider::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:var(--text);border:3px solid var(--accent);cursor:pointer}
.co2-result{font-family:'Space Grotesk',sans-serif;font-size:2.5rem;background:linear-gradient(135deg,var(--accent3),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-top:16px}
.co2-sub{font-size:.85rem;color:var(--text-3);margin-top:8px}

/* ========== GALLERY ========== */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery-item{border-radius:16px;overflow:hidden;position:relative;aspect-ratio:16/10;cursor:pointer;transition:.4s;border:1px solid var(--border)}
.gallery-item:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--border-hover)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:.6s}
.gallery-item:hover img{transform:scale(1.1)}
.gallery-item .overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,0.85) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:16px;opacity:0;transition:.3s}
.gallery-item:hover .overlay{opacity:1}
.gallery-item .overlay .loc{font-size:.8rem;font-weight:600;color:#fff}
.gallery-item .overlay .kw{font-size:.7rem;color:var(--text-3)}
.gallery-item.span-2{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}

/* ========== WARTUNG ========== */
.wartung-section{position:relative;z-index:1}
.wartung-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.wartung-img{border-radius:20px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.wartung-img img{width:100%;height:380px;object-fit:cover;display:block}
.wartung-content h2{font-family:'Space Grotesk',sans-serif;font-size:2.8rem;font-weight:400;line-height:1.1;margin-bottom:16px}
.wartung-content h2 em{font-style:italic;background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.wartung-content p{color:var(--text-2);font-size:1.05rem;line-height:1.7;margin-bottom:28px}
.wartung-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px}
.wartung-stat{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center}
.wartung-stat .val{font-family:'Space Grotesk',sans-serif;font-size:1.6rem;color:var(--accent)}
.wartung-stat .lbl{font-size:.78rem;color:var(--text-3);margin-top:4px}

/* ========== COMPARISON ========== */
.comp-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg-card);border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.comp-table th{padding:14px 20px;text-align:left;font-size:.8rem;font-weight:600;color:var(--text-3);border-bottom:1px solid var(--border);background:var(--accent-glow)}
.comp-table td{padding:12px 20px;border-bottom:1px solid var(--border);font-size:.85rem;color:var(--text-2)}
.comp-table tr:last-child td{border-bottom:none}
.comp-table tr:nth-child(even){background:rgba(59,130,246,0.02)}
.comp-table .y{color:var(--accent3);font-weight:700;font-size:1.1rem}
.comp-table .n{color:var(--text-3);font-size:1.1rem}
.comp-table .hl-td{color:var(--text);font-weight:600}

/* ========== REVIEWS ========== */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review-card{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:28px;border-radius:18px;border:1px solid var(--border);transition:.4s}
.review-card:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:var(--border-hover)}
.review-stars{color:var(--accent-orange);font-size:.85rem;margin-bottom:12px;letter-spacing:2px}
.review-text{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;line-height:1.6;color:var(--text);margin-bottom:16px}
.review-author{display:flex;align-items:center;gap:12px}
.review-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--border)}
.review-name{font-weight:600;font-size:.85rem;color:var(--text)}
.review-loc{font-size:.76rem;color:var(--text-3)}

/* ========== PARTNERS ========== */
.partners-grid{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.partner-pill{padding:10px 22px;border-radius:100px;background:var(--bg-card);border:1px solid var(--border);font-size:.82rem;font-weight:600;color:var(--text-2);transition:.25s;cursor:default}
.partner-pill:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);background:var(--bg-card-hover)}

/* ========== CTA ========== */
.cta-section{background:var(--bg-2);text-align:center;padding:100px 32px;position:relative;z-index:1;border-top:1px solid var(--border);overflow:hidden}
.cta-section::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:600px;height:300px;background:radial-gradient(ellipse,var(--accent-glow),transparent 70%);pointer-events:none}
.cta-inner{max-width:640px;margin:0 auto;position:relative;z-index:1}
.cta-inner h2{font-family:'Space Grotesk',sans-serif;font-size:2.8rem;font-weight:400;line-height:1.1;margin-bottom:20px}
.cta-inner h2 em{font-style:italic;background:linear-gradient(135deg,var(--gradient-1),var(--gradient-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.cta-inner p{color:var(--text-2);font-size:1.1rem;margin-bottom:36px;line-height:1.7}

/* ========== FOOTER ========== */
footer{border-top:1px solid var(--border);background:var(--bg-2);position:relative;z-index:1;overflow:visible}
.footer-inner{max-width:1280px;margin:0 auto;padding:50px 32px 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
.footer-brand .logo{display:inline-block;margin-bottom:12px;font-size:1.6rem}
.footer-brand p{font-size:.85rem;color:var(--text-3);line-height:1.7;max-width:280px}
.footer-col h4{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px;color:var(--text-3)}
.footer-col a{display:block;color:var(--text-3);text-decoration:none;font-size:.85rem;margin-bottom:10px;transition:.2s}
.footer-col a:hover{color:var(--text)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid var(--border);font-size:.75rem;color:var(--text-3)}

/* ========== ANIMATIONS ========== */
/* === SCROLL ANIMATIONS === */
.fade-up{opacity:1;transform:translateY(0);transition:opacity .7s ease,transform .7s ease}
.js-enabled .fade-up{transform:translateY(40px)}
.js-enabled .fade-up.visible{transform:translateY(0)}
.fade-left,.fade-right,.scale-up,.fade-blur{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
.js-enabled .fade-left{opacity:0;transform:translateX(60px)}
.js-enabled .fade-left.visible{opacity:1;transform:translateX(0)}
.js-enabled .fade-right{opacity:0;transform:translateX(-60px)}
.js-enabled .fade-right.visible{opacity:1;transform:translateX(0)}
.js-enabled .scale-up{opacity:0;transform:scale(0.85)}
.js-enabled .scale-up.visible{opacity:1;transform:scale(1)}
.js-enabled .fade-blur{opacity:0;filter:blur(10px);transform:translateY(30px)}
.js-enabled .fade-blur.visible{opacity:1;filter:blur(0);transform:translateY(0)}

/* === STAGGER DELAYS === */
.stagger-1{transition-delay:.1s}
.stagger-2{transition-delay:.2s}
.stagger-3{transition-delay:.3s}
.stagger-4{transition-delay:.4s}
.stagger-5{transition-delay:.5s}

/* === 3D TILT CARDS === */
.tilt-card{transform:perspective(1000px) rotateX(var(--rotateX,0deg)) rotateY(var(--rotateY,0deg))}

/* === MOUSE-FOLLOWING GLOW === */
.glow-card{position:relative;overflow:hidden}
.glow-card::before{content:'';position:absolute;inset:0;background:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(59,130,246,0.06),transparent 60%);opacity:0;transition:opacity 0.4s ease;z-index:0;pointer-events:none}
.glow-card:hover::before{opacity:1}

/* === SMOOTH SCROLLBAR === */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:100px;border:2px solid var(--bg-2)}
::-webkit-scrollbar-thumb:hover{background:var(--text-3)}

/* === A11Y: FOCUS + REDUCED MOTION + SELECTION === */
/* Pflicht-Patch: globaler Focus-Ring (WCAG 2.1) */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.btn-primary:focus-visible,.btn-secondary:focus-visible{outline:2px solid #fff;outline-offset:3px}
.burger:focus-visible{outline:2px solid var(--accent-light);outline-offset:2px;border-radius:12px}
::selection{background:var(--accent-glow);color:var(--text)}
/* Pflicht-Patch: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .animated-bg{display:none}
  .fade-up,.fade-left,.fade-right,.scale-up,.fade-blur{opacity:1 !important;transform:none !important;filter:none !important}
  .reveal-word{opacity:1 !important;transform:none !important;filter:none !important}
}

/* === SCROLL PROGRESS BAR === */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--gradient-1),var(--gradient-2));z-index:999;width:0%;transition:width .1s linear}

/* === PRINT === */
@media print {
  .animated-bg,.theme-switcher,.top-cta-bar,.burger,.mobile-menu,.hero-bg video,.menu-cta,.hero-buttons{display:none !important}
  .nav-fixed{position:static;padding:16px 0}
  .hero{min-height:auto;padding:40px 0}
  body{background:#fff !important;color:#000 !important}
  a{text-decoration:underline;color:#000 !important}
}

/* ========== RESPONSIVE ========== */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:32px}
  .hero-visual{order:-1}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .dachplaner-grid{grid-template-columns:1fr;gap:32px}
  .lisa-grid{grid-template-columns:1fr;gap:32px}
  .monitoring-grid{grid-template-columns:1fr}
  .wartung-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr;gap:32px}
}
@media(max-width:768px){
  .hero h1{font-size:2.8rem}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .comp-grid{grid-template-columns:1fr}
  .partners-grid{grid-template-columns:repeat(3,1fr)}
  .hero-img img{height:260px}
  .hero-float,.hero-float2{display:none}
}
@media(max-width:480px){
  .hero h1{font-size:2rem;letter-spacing:-0.01em}
  .hero-text-reveal h1{font-size:2rem}
  .hero-inner{padding:40px 16px}
  .section{padding:60px 16px}
  .trust-inner{flex-direction:column;gap:12px}
  .products-grid{grid-template-columns:1fr;gap:16px}
  .product-card{transform:none !important}
  .product-card:hover{transform:none !important}
  .dachplaner-features li{font-size:.85rem}
  .calc-inner{padding:24px 16px}
  .wallbox-grid{grid-template-columns:1fr}
  .co2-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .partners-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .lisa-chat{display:none}
  .monitoring-visual>div[style*="min-height:420px"]{min-height:auto !important;flex-wrap:wrap !important}
  .monitoring-visual>div[style*="min-height:420px"] img{width:28% !important;max-width:140px}
  .theme-switcher{top:auto;bottom:20px;right:16px}
  .btn-primary{padding:14px 28px;font-size:.9rem}
  .btn-secondary{padding:12px 24px;font-size:.85rem}
}
@media(max-width:360px){
  .hero h1{font-size:1.7rem}
  .hero-text-reveal h1{font-size:1.7rem}
  .hero-desc{font-size:.95rem}
  .step-card{padding:24px 16px}
  .product-card .price{font-size:1.5rem}
}


/* Welle-12 Fix-3 — Floating-Burger Styles */
.floating-nav[data-fix3-mobile="1"] {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; min-height: 56px;
  background: rgba(6, 14, 26, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(59, 130, 246, 0.18);
}
.floating-nav[data-fix3-mobile="1"] .logo {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; text-decoration: none; min-height: 44px;
}
.floating-nav[data-fix3-mobile="1"] .logo-img { width: 36px; height: 36px; }
.floating-nav[data-fix3-mobile="1"] .logo-text {
  font-size: 16px; font-weight: 600; letter-spacing: 0.2px;
}
.floating-nav[data-fix3-mobile="1"] .burger {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: inline-flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 5px; padding: 0;
  background: transparent; border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px; cursor: pointer;
}
.floating-nav[data-fix3-mobile="1"] .burger span {
  display: block; width: 22px; height: 2px; background: #fff;
  transition: transform .2s ease, opacity .2s ease;
}
.floating-nav[data-fix3-mobile="1"] .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.floating-nav[data-fix3-mobile="1"] .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.floating-nav[data-fix3-mobile="1"] .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 992px) {
  .floating-nav[data-fix3-mobile="1"] { display: none; }
}
.mobile-menu {
  position: fixed; top: 56px; left: 0; right: 0; z-index: 8999;
  background: rgba(6, 14, 26, 0.98); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(59,130,246,0.18);
  max-height: 0; overflow: hidden; transition: max-height .25s ease;
}
.mobile-menu[aria-hidden="false"] { max-height: 80vh; overflow-y: auto; }
.mobile-menu ul { list-style: none; margin: 0; padding: 8px 0; }
.mobile-menu li { margin: 0; }
.mobile-menu a {
  display: flex; align-items: center; min-height: 48px;
  padding: 10px 20px; color: #e6eefb; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 16px;
}
.mobile-menu a:hover, .mobile-menu a:focus-visible {
  background: rgba(59,130,246,0.12); color: #fff;
}
.mobile-menu a.btn-primary {
  margin: 10px 16px; border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4); color: #fff;
  font-weight: 600; justify-content: center; border-bottom: 0;
}
@media (min-width: 992px) { .mobile-menu { display: none; } }

/* Welle-12 Fix-3 — Tap-Target ≥44px für Footer + Mobile-Links */
@media (max-width: 768px) {
  footer a, .footer-link, .nav-link, .skip-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 6px;
  }
  .footer-grid li { margin-block: 4px; }
}

/* ============================================================
   Welle-12 Fix-4 (2026-05-20) — Cross-Cutting Patches
   data-fix4-tablet="1"
   ============================================================ */

/* Fix 4.1 — Alte v13-Burger / v13-Nav auf v14-Pages ausblenden  */
html[data-v14-pass] .v13-burger,
html[data-v14-pass] .v13-nav-fixed,
html[data-v14-pass] header.header-main,
html[data-v14-pass] .header-fixed:not(.floating-nav) {
  display: none !important;
}

/* Fix 4.2 — Theme-Switcher Position (per JS injiziert) */
@media (max-width: 1023px) {
  .theme-switcher[data-w12-fix4] { display: none !important; }
}
@media (min-width: 1024px) {
  .theme-switcher[data-w12-fix4] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    top: auto;
    z-index: 200;
    display: flex;
    flex-direction: row;
    gap: 4px;
    padding: 6px;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
  }
  .theme-switcher[data-w12-fix4] .theme-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 4px;
    gap: 2px;
  }
}

/* Fix 4.3 — Glassmorphism global auf Cards (Pillar/Hersteller/Städte) */
.card, .product-card, .bg-card, .stat-card, .review-card,
.feature-card, .pricing-card, .testimonial-card,
.info-card, .hersteller-card, .city-card, .glass {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
}


/* W12-FIX6 Z-Index Boost — Burger Clickability */
.floating-nav[data-fix3-mobile="1"] { z-index: 9999 !important; }
.floating-nav[data-fix3-mobile="1"] #burgerBtn,
.floating-nav[data-fix3-mobile="1"] .burger { z-index: 10000 !important; position: relative; pointer-events: auto !important; }
.mobile-menu { z-index: 9998 !important; }

/* W13 P0-FIX 1: animated-bg darf NIE horizontalen Scroll erzeugen */
.animated-bg {
  max-width: 100vw !important;
  overflow: hidden !important;
}
.animated-bg .orb {
  max-width: 60vw !important;
}
@media (max-width: 480px) {
  .animated-bg .orb { display: none !important; }
}

/* W13 P0-FIX 2: v12-comp-table responsive wrap */
.comp-table, .v12-comp-table, table.comp-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* W13 P0-FIX 3: Form-Inputs angebot/kontakt max-width */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[type="date"], select, textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* W13 P0-FIX 4: Touch-Targets ≥44px Top-Violators */
.v13-menu-close, .menu-close, [data-menu-close] {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
footer a, .footer-link, .footer nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-block: 8px;
}
.glossar-link, .glossar a {
  min-height: 44px;
  display: inline-block;
  padding: 6px 4px;
}
input[type="radio"], input[type="checkbox"] {
  min-width: 22px;
  min-height: 22px;
  margin: 11px;  /* total hit-box ~44px */
}

/* W13 P0-FIX 5: sticky-mobile-cta Orange-Gradient → Solid v14-Sky-Blue */
.sm-cta-btn-tel, .sticky-mobile-cta .btn-tel {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #fff !important;
}

/* W13-NUCLEAR: 1424px-Layout-Bug auf Mobile final beheben */
@media (max-width: 768px) {
  html { max-width: 100vw !important; overflow-x: hidden !important; }
  body { max-width: 100vw !important; min-width: 0 !important; overflow-x: hidden !important; }
  body > *, main > *, section { max-width: 100vw !important; box-sizing: border-box !important; }
  img, video, iframe, picture, canvas, svg, object { max-width: 100% !important; height: auto !important; }
  .animated-bg, .animated-bg .orb { max-width: 100vw !important; }
  .nav-fixed, header, nav, footer { max-width: 100vw !important; width: 100% !important; box-sizing: border-box !important; }
  .hero-inner, .section, .footer-inner, .trust-inner { max-width: 100% !important; box-sizing: border-box !important; padding-left: 16px !important; padding-right: 16px !important; }
}

/* W13-FONT: Starlink-Look — Inter komplett (Display + Body unified) */
:root { --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
body, .font-display, h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  letter-spacing: -0.015em;
}
h1, h2, h3, .font-display { font-weight: 700; letter-spacing: -0.025em; }
.logo-text, .hero-badge, .top-cta-text { letter-spacing: 0; }

/* W13-NUCLEAR2: lisa-stats-grid + comp-table + alle Grids responsive */
@media (max-width: 768px) {
  .lisa-stats-grid, .stats-grid, [class*="-grid"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 100% !important;
  }
  .lisa-stat-card, .stat-card, .feature-card, .product-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .hero-buttons, .hero-cta { flex-direction: column !important; gap: 12px !important; align-items: stretch !important; }
  .btn-primary, .btn-secondary { width: 100% !important; max-width: 100% !important; box-sizing: border-box; text-align: center; justify-content: center; }
  .top-cta-bar, .top-cta-inner { max-width: 100vw !important; box-sizing: border-box !important; padding: 8px 12px !important; }
  .top-cta-text { font-size: 0.78rem !important; }
}


/* v39-Mobile-Polish (übernommen aus Kimi-Agent v39, 2026-05-20) */
/* Hero-Reveal sofort sichtbar — kein Delay-Flicker */
.hero-desc { opacity: 1 !important; transform: translateY(0) !important; transition: opacity 0.7s ease, transform 0.7s ease; }
.hero-buttons { opacity: 1 !important; transform: translateY(0) scale(1) !important; transition: opacity 0.6s ease, transform 0.6s ease; }

/* Product-Card Box-Shadow für Tiefe */
.product-card { box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 0 1px rgba(255,255,255,0.05); }

/* Fade-Animations: opacity 0.99 statt 0 = Anti-Flicker */
.js-enabled .fade-up { opacity: 0.99; transform: translateY(30px); }
.js-enabled .fade-left, .js-enabled .fade-right, .js-enabled .scale-up, .js-enabled .fade-blur { opacity: 0.99; }

/* Scrollbar dünner */
::-webkit-scrollbar { width: 6px !important; }
::-webkit-scrollbar-thumb { border-radius: 3px !important; }
::selection { background: rgba(59,130,246,0.25) !important; }

/* Mobile-Polish ≤768px — kompakterer Header, Logo, Top-CTA */
@media (max-width: 768px) {
  .theme-switcher { display: none !important; }
  .logo-text { font-size: 1rem !important; letter-spacing: 0.01em !important; }
  .nav-fixed { padding: 12px 16px !important; top: 36px !important; }
  .top-cta-bar { padding: 8px 12px !important; font-size: 0.8rem !important; }
  .top-cta-bar .top-cta-btn { padding: 6px 14px !important; font-size: 0.75rem !important; margin-left: 8px !important; }
  .top-cta-bar .top-cta-close { margin-left: 12px !important; font-size: 1.2rem !important; padding: 4px !important; }
  .hero-inner { padding: 30px 16px !important; }
  .app-module-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .module-card { padding: 20px 12px !important; }
  .monitoring-content h2 { font-size: 1.8rem !important; }
  .monitoring-content .module-card h3 { font-size: 1rem !important; }
}

/* ============================================================
   Welle-13 FINAL-MOBILE-FIX (2026-05-20)
   Marker: data-w13-final="1"
   ============================================================ */

/* W13 Fix-B: Z-Index-Hierarchie Mobile — Burger > Top-CTA-Bar */
@media (max-width: 768px) {
  .burger,
  #burgerBtn,
  #v13-burger,
  .v13-burger { z-index: 350 !important; position: relative; }
  .floating-nav,
  .floating-nav[data-fix3-mobile="1"],
  .v13-nav-fixed { z-index: 320 !important; }
  .top-cta-bar { z-index: 100 !important; }
  /* Menu-Overlay muss über Top-CTA + Floating-Nav liegen */
  .mobile-menu,
  .v13-mobile-menu { z-index: 360 !important; }
  .menu-close,
  .v13-menu-close { z-index: 370 !important; }
}

/* W13 Fix-C: 44×44px-Garantie für ALLE Burger-/Close-Varianten,
   überschreibt etwaige < 44px-Bugs aus älteren CSS-Layern */
.v13-burger,
#v13-burger,
.burger,
#burgerBtn,
.menu-close,
.v13-menu-close,
[data-menu-close] {
  min-width: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}
/* Burger-Span (die 3 Striche) bleibt klein, Klick-Hitzone ist der Button selbst */



/* === PIERRE-BUG-LIST 2026-05-20 — 21 Bugs Systematisch === */

/* Bug 1: Zweites Logo entfernen */
nav .logo:nth-of-type(2),
header .logo:nth-of-type(2),
main .logo,
section .logo { display: none !important; }

/* Bug 2 + 13 + 20: Cookie-Banner Z-Index + Padding */
.cookie-banner, .cookie-consent, #cookieConsent, .cookie-notice {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 12px 16px !important;
  max-height: 30vh;
  overflow-y: auto;
}
body { padding-bottom: 80px !important; }
@media (max-width: 768px) { body { padding-bottom: 100px !important; } }
footer { padding-bottom: 32px !important; }

/* Bug 3: Hero "Bad Pyrmont" als Einheit — kein Umbruch */
.hero h1 em, .hero-text-reveal h1 em, #hero-h em {
  display: inline !important;
  white-space: nowrap !important;
  font-style: italic;
  color: var(--accent);
}

/* Bug 4 + 16: Theme-Switcher verkleinern Desktop, hidden Mobile */
.theme-switcher {
  transform: scale(0.75) !important;
  transform-origin: bottom right !important;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.theme-switcher:hover { opacity: 1; }
@media (max-width: 768px) {
  .theme-switcher { display: none !important; }
}

/* Bug 5: A+ Button entfernen */
.a-plus-button, .rating-btn, .aplus-btn,
[class*="a-plus"], [class*="aplus"] { display: none !important; }
button:has(> span:only-child:contains("A+")),
a:has(> span:only-child:contains("A+")) { display: none !important; }

/* Bug 6: KI-Dachplanung Bild — kein weißer Rand */
.dachplaner-section img, .dachplaner-img, .ki-dach-img {
  border: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
  border-radius: 16px;
}

/* Bug 7: Produktkarten-Buttons nowrap */
.product-card .btn-primary, .product-card .btn-secondary, .product-card a.btn {
  white-space: nowrap !important;
  min-width: 180px;
  font-size: 0.9rem;
  padding: 12px 20px;
}

/* Bug 8: Wallbox-Features kompakter */
.wallbox-content ul li, .wallbox-features li, .wallbox-list li {
  font-size: 0.9rem !important;
  line-height: 1.45;
}

/* Bug 9: Wallbox-Button länglich (nicht oval) */
.wallbox-section .btn-primary, .wallbox-section .btn-rounded,
.wallbox-content a.btn { 
  border-radius: 100px !important; 
  padding: 12px 24px !important;
  aspect-ratio: auto !important;
}

/* Bug 11: "Über 200 Familien" + .section-intro Padding */
.section-intro, .trust-line, .family-count {
  padding: 0 24px !important;
}
@media (max-width: 768px) {
  .section-intro, .trust-line, .family-count { text-align: center; padding: 12px 16px !important; }
}

/* Bug 12: CTA-Link als Button */
.cta-link, a.cta-link, .erstkalkulation-link {
  display: inline-block !important;
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-2)) !important;
  color: #fff !important;
  padding: 14px 28px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: -0.01em;
}

/* Bug 14: Telefonnummer-Link gut sichtbar */
a[href^="tel:"] {
  color: var(--accent-light) !important;
  text-decoration: none !important;
  font-weight: 600;
}
a[href^="tel:"]:hover, a[href^="tel:"]:focus {
  text-decoration: underline !important;
  color: var(--accent) !important;
}

/* Bug 15: Mobile Logo + 17 Top-CTA-Close + 18 H2 + 19 WhatsApp + 21 CTA-Bar */
@media (max-width: 768px) {
  .logo-text { font-size: 0.85rem !important; letter-spacing: 0 !important; }
  .top-cta-bar { height: auto !important; min-height: 36px !important; padding: 6px 12px !important; font-size: 0.78rem !important; }
  .top-cta-text { font-size: 0.78rem !important; }
  .top-cta-close { margin-left: 16px !important; width: 32px !important; height: 32px !important; font-size: 1.2rem !important; }
  h2.monitoring-h2, .module-h2, .lisa-section h2 { font-size: 1.5rem !important; line-height: 1.25; }
  .whatsapp-btn, [class*="whatsapp"] { display: none !important; }
  .chat-btn, .chat-button, .chatbot-btn { right: 16px !important; left: auto !important; bottom: 16px !important; width: 44px !important; height: 44px !important; z-index: 99 !important; }
  .floating-nav { z-index: 320 !important; }
  #burgerBtn, .burger { z-index: 350 !important; }
}

@media (max-width: 480px) {
  h2 { font-size: 1.5rem !important; }
  .hero h1, #hero-h { font-size: 2rem !important; line-height: 1.15 !important; }
}


/* PIERRE-BUG-1-FINAL: Doppel-Logo entfernen — .nav-logo-link kommt von nav.js, v14 hat eigenes .logo */
html[data-v14-pass] .nav-logo-link,
html[data-v14-pass] .nav-logo-img,
html[data-v14-pass] .nav-logo-text,
html[data-v14-pass] .nav-logo-sub,
html[data-v14-pass] .v13-burger,
html[data-v14-pass] .v13-nav-fixed,
html[data-v14-pass] .header-fixed:not(.floating-nav):not(.nav-fixed) {
  display: none !important;
}


/* === PIERRE-40-BUG-LIST 2026-05-20 v2 === */

/* M8: "Eigenanteil" neben Preis */
.preis-block, .price-block { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.eigenanteil-label, .price-sub { font-size: 0.8rem !important; color: var(--text-3) !important; }

/* M10: Google-Bewertungen — Sterne sichtbar */
.review-rating, .google-rating { font-size: 1rem; }
.review-rating::before { content: '★★★★★ '; color: #fbbf24; letter-spacing: 1px; }
.review-rating .reviews-count { color: var(--text-3); font-size: 0.85rem; margin-left: 6px; }

/* D3: Products-Grid mehr Gap */
.products-grid, .product-cards, .product-list, [class*="products-"][class*="-grid"] {
  gap: 24px !important;
}

/* D5: App-Section-Text max-width */
.lisa-section p, .hausplaner-text p, .app-section p, .app-text {
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
  line-height: 1.6;
}

/* D6/C3: Solar-Rechner CTA-Button NACH Ergebnis */
.calc-result, .rechner-result, [data-solar-rechner-result] {
  margin-bottom: 20px;
}
.calc-result::after, .rechner-result::after {
  content: '';
  display: block;
}
.calc-cta-after, .calc-cta {
  display: inline-block !important;
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-2)) !important;
  color: #fff !important;
  padding: 14px 32px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  margin-top: 16px;
  font-family: 'Inter', sans-serif !important;
  box-shadow: 0 4px 25px var(--accent-orange-glow);
}

/* D7: "Direkt anrufen" als Orange-Button */
.calc-call, .direkt-anrufen, a.direkt-anrufen {
  display: inline-block !important;
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-2)) !important;
  color: #fff !important;
  padding: 12px 24px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  font-weight: 700;
}

/* D8: Team-Bild max-width */
.team-section img, .team-techniker, .baustellen-team-img, [src*="team-techniker"] {
  max-width: 800px !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px !important;
  display: block;
}

/* D11: Scroll-Progress sichtbarer */
.scroll-progress, .scroll-progress-bar, #scrollProgress {
  height: 3px !important;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3)) !important;
  box-shadow: 0 0 8px var(--accent-glow);
  z-index: 9999 !important;
}

/* T1: Tablet Products 2-Spalten (max-width: 1024px) */
@media (max-width: 1024px) and (min-width: 481px) {
  .products-grid, .product-cards, [class*="products-"][class*="-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .trust-inner {
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
  }
  .lisa-content, .hausplaner-content {
    flex-direction: column !important;
    align-items: center !important;
  }
  .lisa-content img, .hausplaner-content img {
    max-width: 70%;
  }
}

/* T2: Hero clamp font-size responsive */
.hero h1, #hero-h, .hero-text-reveal h1 {
  font-size: clamp(1.8rem, 5vw, 3.5rem) !important;
  line-height: 1.15 !important;
}

/* T8: Theme-Switcher pointer-events */
.theme-switcher {
  pointer-events: none !important;
}
.theme-switcher .theme-btn {
  pointer-events: auto !important;
}

/* C1: "0€ Anzahlung" Hero-Badge — wenn nicht da, Klasse bereit */
.hero-zero-deposit, .badge-zero {
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-2));
  color: #fff;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-block;
}

/* C5: Chat-Button mit Label */
.chat-btn::after, .chatbot-btn::after {
  content: ' Chat';
  font-size: 0.85rem;
  margin-left: 4px;
}
@media (max-width: 768px) {
  .chat-btn::after, .chatbot-btn::after { content: ''; margin-left: 0; }
}

/* D9: Telefon-Inkonsistenz wird im HTML gefixt, nicht CSS */


/* PIERRE-40-v3: noch offene Bugs */
/* Bug 33: Burger erst <640px */
@media (min-width: 640px) and (max-width: 1024px) {
  .burger, #burgerBtn { display: none !important; }
  .desktop-nav, .nav-links { display: flex !important; }
}

/* Bug 32: Tablet Chat-Btn kleiner */
@media (max-width: 1024px) and (min-width: 481px) {
  .chat-btn, .chatbot-btn { width: 48px !important; height: 48px !important; }
}

/* Bug 26: WhatsApp prominent — Pierre override */
.whatsapp-btn-prominent { box-shadow: 0 4px 16px rgba(37,211,102,0.4) !important; }
.whatsapp-btn-prominent:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37,211,102,0.6) !important; }
@media (max-width: 768px) {
  .whatsapp-btn-prominent { bottom: 100px !important; width: 48px !important; height: 48px !important; font-size: 24px !important; }
}

/* Bug 13: Footer padding-bottom für Cookie-Banner */
footer { padding-bottom: 100px !important; }

/* Bug 11: section-intro klebt nicht mehr am Rand */
.section-intro, .family-200, .trust-200, [class*="200-familien"] {
  padding: 0 24px !important;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Bug 23: FOMO-Banner Style refine */
.fomo-banner {
  animation: fomo-pulse 2.5s ease-in-out infinite;
}
@keyframes fomo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.3); }
  50% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); }
}

/* W14-CRITICAL-FIX 2026-05-20 Fix-2: Sticky-CTA overlap nav -> z-index 90 */
.lead-sticky-cta { z-index: 90 !important; }

/* W14-CRITICAL-FIX Fix-8: bundle-rechner z-index cleanup */
.bundle-rechner-overlay,
.bundle-rechner-modal,
.bundle-rechner-backdrop,
[class*="bundle-rechner-"] { z-index: 999 !important; }


/* W14-V1 Tablet-Breakpoint-Fix (768-1024) */
@media (min-width: 768px) and (max-width: 1024px) {
  .v12-products-grid, .v13-products-grid, [class*="products-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .v13-footer-grid, .footer-grid, [class*="footer-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  .trust-bar, .v13-trust-bar { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; justify-content: center !important; }
}


/* PIERRE-DESKTOP-ZOOM-FIX 2026-05-20 — Section max-width zu klein auf 1920px */
@media (min-width: 1280px) {
  .section, .lisa-section .section, .footer-inner, .trust-inner, .hero-inner, .cta-inner {
    max-width: 1480px !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}
@media (min-width: 1600px) {
  .section, .lisa-section .section, .footer-inner, .trust-inner, .cta-inner {
    max-width: 1560px !important;
  }
  .hero-inner { max-width: 1100px !important; }
}

/* === W17-MEGA-FIX 2026-05-20 — P0+P1 konsolidiert === */

/* W17-P0-1 — Index Horizontal-Overflow (orb-2 right=2108, lisa-stats-grid 1962, img 1986) */
.orb-1, .orb-2, .orb-3,
.v12-orb-1, .v12-orb-2, .v12-orb-3,
[class*="orb-"] {
  max-width: 60vw !important;
  max-height: 60vh !important;
  right: auto !important;
  overflow: hidden;
}
.lisa-stats-grid, .stats-grid, [class*="stats-grid"] {
  max-width: 100% !important;
  overflow: hidden !important;
}
@media (min-width: 1280px) {
  body { overflow-x: hidden !important; }
  main, .main-content { overflow-x: clip !important; }
}

/* W17-P0-3 — foerdercheck Submit Touch-Target 48px */
#foerdercheck form button[type="submit"],
.foerdercheck-form button[type="submit"],
form[name="foerdercheck"] button[type="submit"],
form[action*="foerder"] button[type="submit"] {
  min-height: 48px !important;
  padding: 12px 24px !important;
  font-size: 1rem !important;
}

/* W17-P0-4 — bundle-rechner Newsletter-Form sichtbar */
.bundle-rechner .newsletter-form,
#bundle-rechner .newsletter-form,
.newsletter-form.bundle,
.bundle-newsletter-form {
  display: block !important;
  min-height: 200px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* W17-P1-6 — vaillant + angebot Container-Wrapper @2560 */
@media (min-width: 2400px) {
  .container, main, .hersteller-content, .form-section, .angebot-form,
  .vaillant-content, .product-detail, .article-content {
    max-width: 1880px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* PIERRE-BURGER-OVERLAP-FIX 2026-05-20: hero-badge fängt Burger-Clicks ab */
.hero-badge, .hero-zero-deposit, .hero-text-reveal, .hero-content {
  pointer-events: none !important;
}
.hero-badge a, .hero-badge button, .hero-content a, .hero-content button,
.hero-buttons, .hero-buttons a, .hero-buttons button {
  pointer-events: auto !important;
}
/* Burger ABSOLUT immer klickbar */
#burgerBtn, .burger, .floating-nav, header.floating-nav, [data-w18b-burger] {
  z-index: 999 !important;
  pointer-events: auto !important;
  position: fixed !important;
}
/* Hero darf nicht über Header schließen */
.hero, .hero-bg, main, #main { z-index: 1 !important; }
/* Top-CTA-Bar UNTER Burger */
.top-cta-bar, .cro-urgency-banner { z-index: 100 !important; }


/* PIERRE-MENU-CLOSE-FIX 2026-05-20 — Menu braucht prominent X-Close, Top-CTA muss verschwinden */
.mobile-menu {
  background: #060e1a !important;
  z-index: 9998 !important;
  padding-top: 70px !important;
}
.mobile-menu.open {
  right: 0 !important;
  display: block !important;
}
.mobile-menu.open ~ .top-cta-bar,
body:has(.mobile-menu.open) .top-cta-bar,
.top-cta-bar.is-hidden-by-menu {
  display: none !important;
}
/* X-Close-Button prominent */
.mobile-menu .menu-close,
#menuClose,
.mobile-menu button[aria-label*="schließen"],
.mobile-menu button[aria-label*="Menü"] {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 48px !important;
  height: 48px !important;
  background: rgba(239, 68, 68, 0.9) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 12px !important;
  font-size: 22px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.5) !important;
}
.mobile-menu .menu-link, .mobile-menu .menu-cta, .mobile-menu nav a {
  display: block !important;
  padding: 16px 24px !important;
  color: #fff !important;
  font-size: 1.1rem !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
}
.mobile-menu .menu-cta {
  background: linear-gradient(135deg, var(--accent-orange,#f59e0b), var(--accent-orange-2,#f97316)) !important;
  margin: 16px 24px !important;
  border-radius: 100px !important;
  text-align: center !important;
  justify-content: center !important;
}


/* PIERRE-MOBILE-NUCLEAR 2026-05-20 — H-Overflow + Bild-Overlay endgültig fixen */
@media (max-width: 768px) {
  /* HÄRTESTER LOCK */
  html, body { 
    max-width: 100vw !important; 
    overflow-x: hidden !important; 
    width: 100%;
    position: relative;
  }
  /* JEDES Element max 100vw */
  body *, body *::before, body *::after {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  /* Bilder + Videos NIE über Viewport */
  img, video, picture, iframe, canvas, svg, embed, object {
    max-width: 100% !important;
    max-height: 100vh !important;
    height: auto !important;
    object-fit: contain !important;
  }
  /* Tabellen IMMER scrollbar */
  table, .comp-table, .v12-comp-table, .wb-spec-table, .cost-table, [class*="table"] {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  /* Grids 1-spaltig falls breiter als 95vw */
  [class*="grid"], .lisa-stats-grid, .products-grid, .app-mini-stats {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
  /* Position-fixed Elements einsperren */
  .top-cta-bar, .floating-nav, .cookie-banner, .whatsapp-btn-prominent, [data-cookie-dismiss], .sticky-mobile-cta {
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }
  /* Background-Orbs nie sichtbar */
  .orb, .orb-1, .orb-2, .orb-3, .animated-bg, .v12-orb {
    display: none !important;
  }
  /* Sections + Container strikt */
  section, .section, main, article, .hero, .hero-bg, .hero-inner, .container, [class*="container"], [class*="section"] {
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Hero-Video nicht overflow */
  .hero video, .hero-bg video, video {
    width: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  /* Pre/Code blocks */
  pre, code { max-width: 100%; overflow-x: auto !important; }
  /* Inline-styled Bilder mit width-Attribut */
  img[width], img[style*="width:"] { max-width: 100% !important; width: auto !important; }
}

/* Galaxy Fold 280px Edge-Case */
@media (max-width: 320px) {
  section, .section, .hero-inner { padding-left: 8px !important; padding-right: 8px !important; }
  h1, .hero h1 { font-size: 1.4rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.2rem !important; }
  .top-cta-bar { font-size: 0.7rem !important; padding: 4px 8px !important; }
}


/* PIERRE-BURGER-FORCE-VISIBLE 2026-05-20 — 10 Pages haben Burger im DOM aber offsetParent=null */
@media (max-width: 768px) {
  #burgerBtn,
  .burger,
  .floating-nav button,
  button[aria-label*="Menü"],
  button[aria-label*="Menu"],
  [data-w19-burger] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 50px !important;
    right: 16px !important;
    z-index: 99999 !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(15, 23, 42, 0.95) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 10px !important;
    color: #fff !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  /* Parent-Container forcen visible */
  .floating-nav, header.floating-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 40px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
  }
  /* v13-burger explizit hidden */
  .v13-burger { display: none !important; }
}


/* PIERRE-FINAL-TAP-TARGETS 2026-05-20 — alle CTAs/Links auf ≥44px Höhe */
@media (max-width: 768px) {
  a, button, [role="button"] { min-height: 44px; }
  .nav-phone-icon { min-width: 44px !important; }
  .cookie-banner button, [data-cookie-dismiss] button {
    min-height: 44px !important;
    padding: 10px 18px !important;
    font-size: 0.85rem !important;
  }
  .cookie-banner a, [data-cookie-dismiss] a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 4px !important;
  }
  footer a, .footer-link, address a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 4px !important;
  }
  .nap-footer-w18 a, [data-w18b-nap] a, [data-w18-nap] a {
    min-height: 44px !important;
    display: inline-block !important;
    padding: 6px 0 !important;
  }
}


/* PIERRE-V13-MENU-HIDE 2026-05-20 — altes v13-mobile-menu im DOM aber sollte hidden */
.v13-mobile-menu, .v13-menu-cta, .v13-menu-link, html[data-v14-pass] .v13-mobile-menu {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}


/* PIERRE-COOKIE-LINK-TAP 2026-05-20: Datenschutz-Link im Cookie-Banner ≥44px */
.cc-text a, .cookie-text a, .cookie-banner a, [data-cookie-dismiss] a {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 6px !important;
  margin: 4px 2px !important;
}


/* PIERRE-CTA-BUTTON-HEIGHT 2026-05-20 — v12-btn + nav-li + breadcrumb-nav ≥44px */
@media (max-width: 768px) {
  .v12-btn-primary, .v12-btn-secondary, [class*="v12-btn"] {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 22px !important;
  }
  li > a, nav a, .breadcrumb a, .breadcrumbs a, ol.breadcrumb a, [class*="breadcrumb"] a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 6px !important;
  }
}


/* PIERRE-NAV-MIN-WIDTH 2026-05-20 — Breadcrumb/Nav-Links auch in OL/UL ≥44x44 */
@media (max-width: 768px) {
  ol li > a, ul li > a, .breadcrumb li > a, nav.breadcrumb a, nav[aria-label="Breadcrumb"] a, [class*="breadcrumb"] a {
    min-height: 44px !important;
    min-width: 44px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: content-box !important;
  }
}


/* PIERRE-NAV-A-MINWIDTH 2026-05-20 — alle nav>a auch ohne LI ≥44x44 */
@media (max-width: 768px) {
  nav > a, nav > * > a {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* ============================================================
   PIERRE-MEGA-BUGFIX 2026-05-20 (24-Bug-Report)
   Quelle: Pierre's Live-Test mit Desktop+Mobile
   ============================================================ */

/* D2: Hero "Bad Pyrmont" darf NICHT umbrechen */
.hero h1 em, .hero-text-reveal h1 em, #hero-h em {
  white-space: nowrap !important;
  display: inline !important;
  font-style: italic;
  color: var(--accent, #3b82f6);
  background: linear-gradient(135deg, var(--accent, #3b82f6), var(--accent2, #06b6d4));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* D4: Baustellen-Bilder dürfen nicht schwarz wirken */
.gallery img, .baustellen-gallery img, [data-baustellen] img, .baustellen-card img {
  opacity: 1 !important;
  filter: brightness(1.0) !important;
  background-color: #1a2332;
  object-fit: cover;
}
.baustellen-card, .gallery-card { background-color: #1a2332 !important; }

/* D5/M2: Theme-Switcher dezenter + mobile hide */
.theme-switcher {
  transform: scale(0.78);
  transform-origin: bottom right;
  opacity: 0.55;
  transition: opacity 0.2s, transform 0.2s;
}
.theme-switcher:hover, .theme-switcher:focus-within { opacity: 1; transform: scale(0.85); }
@media (max-width: 1024px) { .theme-switcher { display: none !important; } }

/* D8: Wallbox-Button — alle Produkt-Cards-Buttons normalisieren */
.product-card a, .product-card button, .products-grid a.btn, .pp-bento__tile a.btn,
[data-product] .btn, [class*="product"] .btn-primary, [class*="product"] .btn-secondary {
  border-radius: 100px !important;
  padding: 12px 24px !important;
}

/* D9: "Eigenanteil" Label in eigener Zeile */
.price-label, .eigenanteil-label, .price-suffix, [data-price-label] {
  display: block !important;
  font-size: 0.78rem !important;
  color: var(--text-3, #94a3b8) !important;
  margin-top: 4px !important;
}

/* D10: Wartung-Text-Container breiter */
.wartung-section h2, .wartung-container h2, [data-wartung] h2 {
  max-width: 100%;
  hyphens: auto;
  -webkit-hyphens: auto;
}
@media (max-width: 768px) {
  .wartung-section h2, .wartung-container h2, [data-wartung] h2 {
    font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
    line-height: 1.25 !important;
  }
  .wartung-section, .wartung-container, [data-wartung] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* M1: Logo-Text auf Mobile kleiner */
@media (max-width: 768px) {
  .nav-logo-text, .logo-text { font-size: 0.85rem !important; letter-spacing: 0.02em !important; }
  .nav-fixed, .nav, header.nav { padding: 8px 12px !important; }
}

/* M3: Top-CTA-Bar Höhe reduzieren */
.top-cta-bar, [data-top-cta] {
  min-height: 36px !important;
  padding: 6px 12px !important;
}
.top-cta-btn, .top-cta-bar .btn {
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
}
@media (max-width: 480px) {
  .top-cta-bar, [data-top-cta] { padding: 4px 8px !important; min-height: 32px !important; font-size: 0.75rem !important; }
  .top-cta-btn, .top-cta-bar .btn { padding: 5px 10px !important; font-size: 0.72rem !important; }
}

/* M4/D1/D13: Cookie-Banner — mobile dezenter + niedriger z-index als Chat */
@media (max-width: 768px) {
  .cookie-banner, [data-cookie-dismiss], #cookieConsentOverlay {
    padding: 10px 14px !important;
    font-size: 0.8rem !important;
    max-height: 30vh !important;
    overflow-y: auto;
  }
  .cookie-banner .cookie-buttons, #cookieConsentOverlay .cc-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
}
.cookie-banner, [data-cookie-dismiss] { z-index: 40 !important; }
.tel-btn-prominent, .wa-btn-prominent, .chat-button { z-index: 99 !important; }

/* M5: Produkt-Karten mobile mit besserem Abstand */
@media (max-width: 768px) {
  .products-grid, .product-grid, [class*="product"] .grid {
    gap: 20px !important;
    padding: 0 16px !important;
  }
  .product-card { margin-bottom: 8px !important; }
}

/* M6: App-Section-Heading mobile kleiner */
@media (max-width: 480px) {
  .app-section h2, [data-app-section] h2, section[id*="app"] h2 {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }
}

/* M7: Chat-/Phone-/WhatsApp-Floater nicht überlappend */
@media (max-width: 768px) {
  .tel-btn-prominent { bottom: 24px !important; left: 16px !important; }
  .wa-btn-prominent { bottom: 88px !important; right: 16px !important; }
  .chat-button, [data-chat-btn] { bottom: 24px !important; right: 16px !important; }
}

/* C1: Hero-Zero-Deposit Badge prominenter */
.hero-zero-deposit, [data-zero-anzahlung] {
  background: linear-gradient(135deg, #f59e0b, #f97316) !important;
  color: #fff !important;
  padding: 8px 16px !important;
  border-radius: 100px !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  display: inline-block !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
  margin-left: 8px;
}
@media (max-width: 480px) {
  .hero-zero-deposit, [data-zero-anzahlung] {
    margin-left: 0 !important;
    margin-top: 8px !important;
    display: block !important;
    text-align: center;
  }
}

/* PIERRE-COUNTER-FALLBACK 2026-05-20: Animation-Counter sichtbar wenn IO-Fail */
[data-counter]:not([data-counter-started]) {
  font-variant-numeric: tabular-nums;
}


/* PIERRE-D3-FIX 2026-05-20 — Senior-Toggle: SVG zeigt "A+", redundantes Label hiden */
.cw-senior-toggle .cw-senior-label { display: none !important; }


/* PIERRE-LOGO-PROMINENT 2026-05-20 — Logo oben links größer + prominenter */
.nav .logo-img, header .logo-img, a.logo .logo-img, .nav-logo-img {
  width: 56px !important;
  height: 56px !important;
  display: block !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.2);
}
.nav .logo, header .logo, a.logo, .nav-logo-link {
  gap: 12px !important;
  flex-shrink: 0 !important;
}
.nav .logo-text, header .logo-text {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}
@media (max-width: 768px) {
  .nav .logo-img, header .logo-img, a.logo .logo-img, .nav-logo-img {
    width: 44px !important;
    height: 44px !important;
  }
  .nav .logo-text, header .logo-text { font-size: 0.95rem !important; }
}
@media (min-width: 1920px) {
  .nav .logo-img, header .logo-img, a.logo .logo-img {
    width: 64px !important;
    height: 64px !important;
  }
  .nav .logo-text, header .logo-text { font-size: 1.2rem !important; }
}








/* 1) Theme-Switcher von TOP-RECHTS nach BOTTOM-RECHTS — Desktop nur, nicht über Content */
.theme-switcher {
  position: fixed !important;
  bottom: 100px !important;      /* ÜBER WhatsApp (96px) */
  right: 92px !important;         /* LINKS von WhatsApp */
  top: auto !important;
  left: auto !important;
  transform: scale(0.7) !important;
  transform-origin: bottom right !important;
  opacity: 0.6 !important;
  z-index: 40 !important;         /* unter WhatsApp(98) + Tel(99) */
  background: rgba(15,23,42,0.85) !important;
  backdrop-filter: blur(8px);
  border-radius: 100px !important;
  padding: 4px !important;
}
.theme-switcher:hover, .theme-switcher:focus-within {
  opacity: 1 !important;
  transform: scale(0.85) !important;
}
@media (max-width: 1024px) {
  .theme-switcher { display: none !important; }
}

/* 2) Senior-Toggle (A+) auch nach unten — über Theme-Switcher */
.cw-senior-toggle, [class*="senior-toggle"] {
  position: fixed !important;
  bottom: 160px !important;
  right: 24px !important;
  top: auto !important;
  z-index: 41 !important;
  opacity: 0.8 !important;
}
.cw-senior-toggle:hover { opacity: 1 !important; }
@media (max-width: 1024px) {
  .cw-senior-toggle { display: none !important; }
}

/* 3) Rating "4.9 (47)" Pill — in Nav bleibt aber kleiner + nicht blockierend */
.nav-rating, [class*="nav-rating"] {
  position: relative !important;
  z-index: 30 !important;
}

/* 4) Floating-Buttons KLARE Hierarchie (Desktop+Mobile):
   - Tel-Button     z=99 bottom-left
   - WhatsApp       z=98 bottom-right
   - Theme-Switcher z=40 bottom-right (über WA, kleiner)
   - Senior-Toggle  z=41 bottom-right (höher)
   - Cookie-Banner  z=40 bottom-fullwidth (unter Tel/WA)
   - Sticky-Tel-Mobile z=97 bottom-fullwidth (über Cookie)
*/

.tel-btn-prominent {
  z-index: 99 !important;
  bottom: 24px !important;
  left: 24px !important;
  right: auto !important;
}
.wa-btn-prominent {
  z-index: 98 !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  top: auto !important;
}

/* Mobile: WhatsApp etwas höher (96px), Tel-Sticky-Bar darunter */
@media (max-width: 768px) {
  .wa-btn-prominent { bottom: 96px !important; right: 16px !important; }
  .tel-btn-prominent { bottom: 96px !important; left: 16px !important; width: 56px !important; height: 56px !important; }
}

/* 5) Top-CTA-Bar nicht über Hero ragen */
.top-cta-bar, [data-top-cta] {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow: hidden;
}

/* 6) Custom Scrollbar Desktop — Pierre's Beschwerde "scrollbar echt klein" */
@media (min-width: 1024px) {
  html { scrollbar-width: auto; scrollbar-color: #3b82f6 #0a1428; }
  ::-webkit-scrollbar {
    width: 14px;
    height: 14px;
  }
  ::-webkit-scrollbar-track {
    background: #0a1428;
    border-left: 1px solid rgba(59,130,246,0.15);
  }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3b82f6, #06b6d4);
    border-radius: 8px;
    border: 2px solid #0a1428;
    min-height: 60px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #60a5fa, #22d3ee);
  }
  ::-webkit-scrollbar-corner { background: #0a1428; }
}

/* 7) Logo-Dublette fix (M1-Audit-Finding) — falls 2 Logos im Nav, das 2. hiden */
.nav-logo-link + .nav-logo-link,
.nav-logo + .nav-logo,
header .logo + .logo {
  display: none !important;
}

/* 8) Layout-Schutz: nichts im Nav überlappt Hero darunter */
nav.nav, header.nav, header.header-main {
  isolation: isolate;
}


/* PIERRE-LOGO-OVERFLOW-FIX 2026-05-20 — iPhone SE 375 H-Scroll bei Logo
   .nav-logo-text und .nav-logo-sub vom alten v13-Nav.js inject ragen 28px raus
   FORCE HIDDEN auf v14-Pages */
html[data-v14-pass] .nav-logo-text,
html[data-v14-pass] .nav-logo-sub,
html[data-v14-pass] .nav-logo-link,
body .nav-logo-text,
body .nav-logo-sub,
body .nav-logo-link {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}




/* TOP-CTA-Bar: max 1 Zeile, kein Wrap, kleiner */
@media (max-width: 768px) {
  .top-cta-bar, [data-top-cta] {
    min-height: 32px !important;
    max-height: 36px !important;
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .top-cta-btn, .top-cta-bar a, .top-cta-bar button {
    padding: 3px 8px !important;
    font-size: 0.68rem !important;
    min-height: 26px !important;
    white-space: nowrap !important;
    border-radius: 4px !important;
  }
  /* Wenn Text zu lang → in CTA-Bar verstecken */
  .top-cta-bar > *:not(.top-cta-btn):not(a):not(button) {
    max-width: 55vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* TEL-BTN: zurück auf 48px Standard-Größe, KEIN Pulse */
.tel-btn-prominent {
  width: 48px !important;
  height: 48px !important;
  font-size: 22px !important;
  background: #3b82f6 !important;
  border: none !important;
  animation: none !important;
  bottom: 24px !important;
  left: 16px !important;
}
@media (max-width: 768px) {
  .tel-btn-prominent {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    bottom: 16px !important;
    left: 12px !important;
  }
}

/* WA-BTN gleiche Größe */
.wa-btn-prominent {
  width: 48px !important;
  height: 48px !important;
  font-size: 22px !important;
}
@media (max-width: 768px) {
  .wa-btn-prominent {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    bottom: 16px !important;
    right: 12px !important;
  }
}

/* STICKY-TEL-BANNER (das green-Bar unten) ENTFERNEN auf Mobile wenn schon WA+Tel-FAB da sind */
@media (max-width: 768px) {
  #autark-tel-banner-mobile {
    display: none !important;
  }
  body { padding-bottom: 0 !important; }
}

/* NAV-LOGO-TEXT spans (alte v13 inject) KOMPLETT WEG (auch mit Selector ohne data-v14) */
.nav-logo-text,
.nav-logo-sub,
.nav-logo-link {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Theme-Switcher auch Mobile + Tablet weg */
@media (max-width: 1024px) {
  .theme-switcher { display: none !important; }
}

/* Senior-Toggle (A+) auf Mobile zentral nicht über Tel/WA */
@media (max-width: 768px) {
  .cw-senior-toggle, [class*="senior-toggle"] {
    display: none !important;
  }
}

/* NUKLEAR auf html und body für 100% kein H-Scroll */
html, body {
  overflow-x: clip !important;
  max-width: 100vw !important;
  width: 100% !important;
}


/* PIERRE-OVERFLOW-FINAL 2026-05-20 14:10 — verbleibende 3 Overflows iPhone SE 375 */
@media (max-width: 480px) {
  /* 1) Top-CTA-Btn "Anrufen: 05281 9569007" w=172 → kürzer machen */
  .top-cta-btn[href^="tel:"] { 
    font-size: 0.65rem !important; 
    max-width: 130px !important;
    padding: 4px 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
  /* 2) Footer-Brand "AUTARK INNOVATIONS" Spans → kein wrap, kleinere Schrift */
  .footer-brand span, .footer-brand div span {
    font-size: 0.95rem !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
  }
  .footer-brand { padding-right: 0 !important; max-width: 100vw !important; }
}

/* GLOBAL: ALLE Spans dürfen nicht über viewport ragen */
span, div, p, h1, h2, h3, h4 {
  max-width: 100% !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}




/* Top-CTA-Bar: lesbare Höhe (NICHT 32px gestaucht), klar OBEN über Nav */
@media (max-width: 768px) {
  .top-cta-bar, [data-top-cta] {
    position: relative !important;
    top: auto !important;
    min-height: 40px !important;
    max-height: 48px !important;
    padding: 8px 12px !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 60 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .top-cta-btn, .top-cta-bar a:not(.top-cta-text), .top-cta-bar button {
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
    min-height: 28px !important;
    max-width: 110px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.95) !important;
    color: #0f172a !important;
    font-weight: 700 !important;
  }
  /* Nav darunter, klare Trennung */
  nav.nav, header.nav { 
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
  }
}

/* Lisa-Chat-Button (🤖) UND Senior-Toggle auf Mobile WEG — kollidiert mit WhatsApp+Tel */
@media (max-width: 768px) {
  .lisa-chat-btn, [data-lisa-chat], .chat-button, .lisa-floating, [class*="lisa-fab"],
  .cw-senior-toggle, [class*="senior-toggle"] {
    display: none !important;
  }
}

/* Tel-Btn + WhatsApp 44x44 saubere getrennte Positionen Mobile */
@media (max-width: 768px) {
  .tel-btn-prominent {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
    bottom: 20px !important;
    left: 16px !important;
    right: auto !important;
    background: #3b82f6 !important;
    border-radius: 50% !important;
    animation: none !important;
  }
  .wa-btn-prominent {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
    bottom: 20px !important;
    right: 16px !important;
    left: auto !important;
    background: #25D366 !important;
    border-radius: 50% !important;
  }
}

/* Sticky-Tel-Bar (Klaus-Fix) ENTFERNEN auf Mobile — kollidiert sonst */
@media (max-width: 768px) {
  #autark-tel-banner-mobile { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* Logo-Spans alte v13 weiterhin hidden */
.nav-logo-text, .nav-logo-sub, .nav-logo-link {
  display: none !important;
}

/* Footer-Brand "AUTARK INNOVATIONS" darf bei <480 break */
@media (max-width: 480px) {
  .footer-brand span, .footer-brand div span {
    font-size: 0.95rem !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
}

/* Global: keine H-Scroll */
html, body { overflow-x: clip !important; max-width: 100vw !important; width: 100% !important; }




/* Top-CTA-Bar: feste Höhe, top:0 */
.top-cta-bar, [data-top-cta] {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 60 !important;
  width: 100% !important;
  max-width: 100vw !important;
}

/* Nav: sticky UNTER Top-CTA-Bar (offset = top-cta-height) */
nav.nav, header.nav, #nav, .nav-fixed {
  position: sticky !important;
  z-index: 50 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* Desktop: top-cta-bar ~40px hoch, nav darunter */
@media (min-width: 769px) {
  nav.nav, header.nav, #nav, .nav-fixed { top: 40px !important; }
}

/* Mobile: top-cta-bar ~40px hoch, nav darunter */
@media (max-width: 768px) {
  .top-cta-bar, [data-top-cta] { 
    min-height: 40px !important; 
    max-height: 44px !important; 
    padding: 6px 10px !important; 
    font-size: 0.75rem !important;
  }
  nav.nav, header.nav, #nav, .nav-fixed { 
    top: 40px !important; 
    padding: 6px 12px !important;
    min-height: 56px !important;
  }
  /* Logo + Burger im Nav: nicht überlappen */
  nav .logo, nav.nav .logo, header .logo, a.logo {
    flex-shrink: 0 !important;
    max-width: calc(100vw - 80px) !important;
    overflow: hidden !important;
  }
  nav .logo-text, header .logo-text {
    font-size: 0.78rem !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  nav .logo-img, header .logo-img {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }
  /* Burger oben rechts klar */
  #burgerBtn, .nav-burger, .burger {
    position: relative !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
}


/* ============================================================
   PIERRE-VORLAGE-LAYOUT 2026-05-20 14:25 — 1:1 nach Webseiten Vorlage
   Top-CTA-Bar: fixed top:0 z:300 - Gradient
   Nav: fixed top:40px z:100 pointer-events:none
   Floating-FABs: Tel z:99 left, WA z:98 right
   ============================================================ */

/* TOP-CTA-Bar exakt wie Vorlage */
.top-cta-bar, [data-top-cta] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 300 !important;
  background: linear-gradient(90deg, var(--gradient-1, #3b82f6), var(--gradient-2, #06b6d4)) !important;
  padding: 10px 20px !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100vw !important;
}
.top-cta-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}
.top-cta-text { color: #fff !important; font-size: 0.85rem !important; font-weight: 400 !important; }
.top-cta-btn {
  padding: 6px 18px !important;
  border-radius: 100px !important;
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  .top-cta-bar { padding: 6px 8px !important; }
  .top-cta-text { font-size: 0.7rem !important; }
  .top-cta-btn { padding: 4px 10px !important; font-size: 0.65rem !important; }
}

/* NAV-Fixed exakt wie Vorlage: top:40px (unter Top-CTA), pointer-events:none */
.nav-fixed, nav.nav, header.nav, #nav {
  position: fixed !important;
  top: 40px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  padding: 16px 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  pointer-events: none !important;
}
.nav-fixed > *, nav.nav > *, header.nav > * {
  pointer-events: auto !important;
}

@media (max-width: 768px) {
  .nav-fixed, nav.nav, header.nav, #nav {
    top: 36px !important;
    padding: 12px 16px !important;
  }
}

/* Logo wie Vorlage */
.logo, .nav-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}
.logo-img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}
.logo-text {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 1.2rem !important;
  color: var(--text) !important;
  letter-spacing: 0.02em !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

@media (max-width: 480px) {
  .logo-text { font-size: 0.95rem !important; }
  .logo-img { width: 36px !important; height: 36px !important; }
}

/* Body padding-top: Top-CTA (40) + Nav (~70) = ~110 */
@media (min-width: 769px) {
  body { padding-top: 0 !important; }
}

/* Burger wie Vorlage */
.burger, #burgerBtn, .nav-burger {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: var(--bg-card, rgba(255,255,255,0.04)) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--border, rgba(148,163,184,0.12)) !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 110 !important;
  flex-shrink: 0 !important;
}

/* Floating-FABs sauber unter Vorlage-Stil */
.tel-btn-prominent {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  right: auto !important;
  top: auto !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #3b82f6 !important;
  color: #fff !important;
  font-size: 22px !important;
  z-index: 99 !important;
  animation: none !important;
}
.wa-btn-prominent {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  top: auto !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  color: #fff !important;
  font-size: 22px !important;
  z-index: 98 !important;
}

@media (max-width: 768px) {
  .tel-btn-prominent, .wa-btn-prominent {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    bottom: 16px !important;
  }
  .tel-btn-prominent { left: 12px !important; }
  .wa-btn-prominent { right: 12px !important; }
}

/* Theme-Switcher wie Vorlage: top:90px right:16px (UNTER nav, NICHT BOTTOM) */
.theme-switcher {
  position: fixed !important;
  top: 90px !important;
  right: 16px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 200 !important;
  transform: none !important;
  opacity: 1 !important;
}

@media (max-width: 1024px) {
  .theme-switcher { display: none !important; }
}

/* Lisa-Chat-Button + Senior-Toggle weg auf Mobile */
@media (max-width: 768px) {
  .lisa-chat-btn, [data-lisa-chat], .chat-button, .lisa-floating, [class*="lisa-fab"],
  .cw-senior-toggle, [class*="senior-toggle"] {
    display: none !important;
  }
  #autark-tel-banner-mobile { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* Alte v13-nav-spans weiterhin hidden (overflow-Killer) */
.nav-logo-text, .nav-logo-sub, .nav-logo-link {
  display: none !important;
}

/* H-Scroll global verboten */
html, body { 
  overflow-x: clip !important; 
  max-width: 100vw !important; 
  width: 100% !important;
}


/* PIERRE-NAV-LAYOUT-CORRECT 2026-05-20 14:30 — Logo links, Burger RECHTS */
nav.nav, header.nav, #nav, .nav-fixed {
  justify-content: space-between !important;
  align-items: center !important;
  flex-direction: row !important;
}
.logo, .nav-logo, a.logo, header .logo {
  margin-right: auto !important;
  flex-shrink: 0 !important;
}
.burger, #burgerBtn, .nav-burger {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Hero darf nicht über Top-CTA (44) + Nav (90) = 134 starten — padding-top */
.hero { padding-top: 110px !important; }
@media (max-width: 768px) {
  .hero { padding-top: 90px !important; }
}


/* PIERRE-FORCE-FIX 2026-05-20 14:40 — bundle-global.js Injects neutralisieren */

/* Alte v13-Nav-Injects (nav-logo-link/nav-links/nav-right) komplett aus DOM-Flow */
.nav-logo-link, .nav-links, .nav-right, .nav-logo-text, .nav-logo-sub,
.nav-rating, .nav-phone-icon, .cw-senior-toggle, .cw-senior-clone, .cw-senior-label {
  display: none !important;
  position: absolute !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Lisa-Chat-FAB überall hidden (Pierre will keine) */
.lisa-chat-fab, [class*="lisa-fab"], .lisa-floating, [data-lisa-chat] {
  display: none !important;
  visibility: hidden !important;
}

/* Tel-Btn + WA-Btn FORCE sichtbar (falls bundle entfernen will) */
.tel-btn-prominent, a.tel-btn-prominent, [class*="tel-btn-prominent"] {
  display: flex !important;
  visibility: visible !important;
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  right: auto !important;
  top: auto !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #3b82f6 !important;
  color: #fff !important;
  font-size: 22px !important;
  z-index: 99 !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
.wa-btn-prominent, a.wa-btn-prominent, [class*="wa-btn-prominent"] {
  display: flex !important;
  visibility: visible !important;
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  top: auto !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  color: #fff !important;
  font-size: 22px !important;
  z-index: 98 !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}

@media (max-width: 768px) {
  .tel-btn-prominent, .wa-btn-prominent {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    bottom: 16px !important;
  }
  .tel-btn-prominent { left: 12px !important; }
  .wa-btn-prominent { right: 12px !important; }
}


/* PIERRE-LISA-OVERFLOW-FIX 2026-05-20 14:50 — .lisa-stats-grid Mobile-Fit
   V02+V03 fanden: 1408px hardcoded width verursacht 1012px H-Scroll auf 412 */
.lisa-section, .lisa-grid, .lisa-stats-grid, [class*="lisa-"],
#hausplaner, #hausplaner * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .lisa-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .lisa-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    max-width: 100% !important;
  }
  .lisa-stat-val { font-size: 1.4rem !important; }
  .lisa-stat-lbl { font-size: 0.75rem !important; }
  .lisa-section img, #hausplaner img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Hard-Override aller hardcoded 1408 width */
[width="1408"], img[width="1408"], picture[width="1408"], div[style*="1408"] {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

/* .fade-up Container darf nicht 1440 hardcoded sein (V09 Befund) */
.fade-up, .fade-up.visible {
  max-width: 100% !important;
  width: 100% !important;
}


/* PIERRE-FINAL-OVERFLOW-WIPE 2026-05-20 14:55 — letzte 3 Overflow-Elements */
/* 1) top-cta-btn "Anrufen: 05281 9569007" auf Mobile NICHT MEHR EXISTIEREN — Tel ist im FAB unten */
@media (max-width: 768px) {
  .top-cta-btn[href^="tel:"], a.top-cta-btn[href^="tel:"] {
    display: none !important;
  }
}

/* 2+3) Footer "AUTARK INNOVATIONS" Span — überall break + max-width */
.footer-brand span, .footer-brand div span, [class*="footer-brand"] span {
  max-width: calc(100vw - 32px) !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  display: inline-block !important;
}
@media (max-width: 480px) {
  .footer-brand span, .footer-brand div span {
    font-size: 0.85rem !important;
    letter-spacing: 0 !important;
  }
}


/* ============================================================
   PIERRE-4K-OPTIMIZATION 2026-05-20 15:00 — UHD 3840x2160 + QHD 2560
   ============================================================ */

/* 1) Fluid Typography mit clamp() — skaliert von Mobile bis 4K */
h1, .hero h1, .hero-text-reveal h1, #hero-h {
  font-size: clamp(1.75rem, 4.5vw, 5.5rem) !important;
  line-height: 1.05 !important;
}
h2, .section h2 {
  font-size: clamp(1.5rem, 3vw, 3.5rem) !important;
  line-height: 1.15 !important;
}
h3 {
  font-size: clamp(1.2rem, 2vw, 2.2rem) !important;
}
p, .hero-desc, li {
  font-size: clamp(0.95rem, 1.1vw, 1.3rem) !important;
}

/* 2) Container Max-Width @ 4K — nicht zu eng */
@media (min-width: 1920px) {
  .container, main, .section, section, .hero-inner, .footer-inner {
    max-width: 1640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (min-width: 2400px) {
  .container, main, .section, section {
    max-width: 1920px !important;
  }
  .hero-inner { max-width: 1400px !important; }
}
@media (min-width: 3200px) {
  .container, main, .section, section {
    max-width: 2400px !important;
  }
  .hero-inner { max-width: 1800px !important; }
}

/* 3) CTA-Buttons größer @ 4K */
@media (min-width: 2400px) {
  .btn-primary, .btn-secondary, .menu-cta, a[class*="btn"]:not(.top-cta-btn) {
    padding: 22px 48px !important;
    font-size: 1.2rem !important;
  }
}
@media (min-width: 3200px) {
  .btn-primary, .btn-secondary, .menu-cta {
    padding: 28px 60px !important;
    font-size: 1.4rem !important;
  }
}

/* 4) Hero-Video Max-Height — verhindert Klotz */
@media (min-width: 1920px) {
  .hero { min-height: min(900px, 85vh) !important; max-height: 1080px !important; }
  .hero-bg video, .hero-bg img { 
    object-fit: cover !important; 
    width: 100% !important; 
    height: 100% !important;
  }
}

/* 5) Logo größer @ 4K */
@media (min-width: 2400px) {
  .logo-img { width: 64px !important; height: 64px !important; }
  .logo-text { font-size: 1.5rem !important; }
}
@media (min-width: 3200px) {
  .logo-img { width: 80px !important; height: 80px !important; }
  .logo-text { font-size: 1.8rem !important; }
}

/* 6) Newsletter-Modal größer @ 4K */
@media (min-width: 1920px) {
  .nl-modal, [class*="newsletter-modal"], .nl-overlay > div {
    max-width: 560px !important;
    transform: scale(1.15);
    transform-origin: center;
  }
}
@media (min-width: 2400px) {
  .nl-modal, [class*="newsletter-modal"] {
    transform: scale(1.3);
  }
}

/* 7) Cookie-Banner @ 4K nicht winzig */
@media (min-width: 1920px) {
  #cookieConsentOverlay, .cookie-banner-analytics {
    font-size: 1.05rem !important;
    padding: 24px 32px !important;
  }
}

/* 8) Top-CTA-Bar @ 4K lesbarer */
@media (min-width: 1920px) {
  .top-cta-bar { padding: 14px 32px !important; }
  .top-cta-text { font-size: 1rem !important; }
  .top-cta-btn { padding: 10px 24px !important; font-size: 0.95rem !important; }
}

/* 9) Section-Padding @ 4K mehr Luft */
@media (min-width: 2400px) {
  section, .section { padding: 120px 48px !important; }
}
@media (min-width: 3200px) {
  section, .section { padding: 160px 64px !important; }
}

/* 10) Trust-Pills, Badges @ 4K skalieren */
@media (min-width: 2400px) {
  .hero-badge, .trust-pill, [class*="hero-zero"], .lisa-stat-card {
    font-size: 1.05rem !important;
    padding: 14px 28px !important;
  }
}


/* PIERRE-COOKIE-FIX 2026-05-20 15:10 — Einstellungen-Btn rausragend + Verstanden zu klein */
.cc-btn, .cc-btn-tertiary, [class*="cc-btn"] {
  max-width: calc(100vw - 32px) !important;
  flex-wrap: wrap !important;
  white-space: nowrap !important;
}
.cookie-banner button, [data-cookie-dismiss] button {
  min-height: 44px !important;
  padding: 8px 18px !important;
}
@media (max-width: 768px) {
  .cookie-banner, [data-cookie-dismiss] {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .cookie-banner button, .cc-btn { width: 100% !important; }
}
/* Cookie-Banner unten dezent */
.cookie-banner, [data-cookie-dismiss], #cookieConsentOverlay {
  max-height: 40vh !important;
  overflow-y: auto !important;
}




/* Table-Wrapper: immer max-width */
.pillar-table-wrap, .table-wrap, .feature-table-wrap, .compare-table-wrap, .sla-table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}


/* PIERRE-TABLE-FIX-v2 2026-05-20 16:50 — Mobile-Tabellen ohne overflow */
@media (max-width: 768px) {
  /* TABLE: containing block bekommt overflow-clip */
  table, .pillar-table, .wb-spec-table, .sla-table, .compare-table, .feature-table {
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table thead, table tbody, table tfoot {
    display: block !important;
    min-width: 100% !important;
  }
  table tr {
    display: flex !important;
    width: max-content !important;
    min-width: 100% !important;
  }
  table th, table td {
    flex: 1 0 100px !important;
    min-width: 100px !important;
    max-width: 200px !important;
    white-space: normal !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }
  /* Orbs raus */
  .v12-orb, .v12-orb-1, .v12-orb-2, .v12-orb-3, .orb, .orb-1, .orb-2, .orb-3, [class*="-orb-"] {
    display: none !important;
  }
  /* Pillar-TOC */
  .pillar-toc, aside.pillar-toc {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 !important;
    transform: none !important;
  }
}

/* Global: container für Tabellen */
.pillar-table-wrap, .table-wrap, .feature-table-wrap, .compare-table-wrap, .sla-table-wrap, .wb-spec-table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}


/* PIERRE-TABLE-WRAP-HARD 2026-05-20 16:55 — Force max-width auf table-wrap + table */
@media (max-width: 768px) {
  html body .pillar-table-wrap,
  html body .table-wrap,
  html body .compare-table-wrap,
  html body .feature-table-wrap,
  html body .wb-spec-table-wrap,
  html body .sla-table-wrap,
  html body div[class*="-table-wrap"] {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }
  /* Tabellen selbst können breiter bleiben, aber overflow durch wrap */
  html body .pillar-table-wrap > table,
  html body .table-wrap > table,
  html body .compare-table-wrap > table {
    min-width: 600px;
    max-width: 100%;
  }
  /* Pillar-Section nicht overflow-visible */
  html body .pillar-article > section,
  html body .pillar-wrap section {
    overflow-x: clip !important;
    max-width: 100% !important;
  }
}

/* PIERRE-V12HERO-FIX 2026-05-20: v12-hero CSS-Regeln aus premium-design-v13.css portiert
   weil 5 Pages (referenzen, garantie, ueber-uns, gewerbe-solar, enpal-alternative)
   .v12-hero markup nutzen aber nur v14-ocean.css laden → H1 sitzt unter dem Bg-Bild */
.v12-hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:72px}
.v12-hero-bg{position:absolute !important;inset:0 !important;z-index:0 !important;height:100% !important;width:100% !important}
.v12-hero-bg img{width:100% !important;height:100% !important;object-fit:cover !important}
.v12-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,14,26,0.3)0%,rgba(6,14,26,0.85)70%,#060e1a 100%);pointer-events:none}
[data-theme="light"] .v12-hero-bg::after{background:linear-gradient(180deg,rgba(248,249,252,0.2)0%,rgba(248,249,252,0.9)70%,#f8f9fc 100%)}
.v12-hero-inner,.hero-content-grid{position:relative !important;z-index:1 !important}
@media(max-width:1024px){.v12-hero{min-height:auto}.hero-content-grid{grid-template-columns:1fr !important;gap:40px !important}}