/* =============================================
   MS HEIM ENERGIE GMBH — MAIN STYLESHEET
   CI: Blue #3B91CF · Gold #F3BA0E · Dark #0F1E2D
   ============================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#3B91CF;--blue-dark:#2270B0;--blue-light:#EBF4FC;--blue-xlight:#f0f7fd;
  --gold:#F3BA0E;--gold-dark:#c99900;
  --dark:#0F1E2D;--dark2:#162040;
  --text:#1a2638;--text-light:#5a6a7e;
  --border:#e2e8f0;--gray-light:#f7f9fc;
  --shadow:0 2px 16px rgba(0,0,0,0.07);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.13);
  --radius:16px;--transition:all 0.25s ease;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:#fff;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-weight:800;line-height:1.2;color:var(--dark)}
section{padding:88px 0}
.bg-light{background:var(--gray-light)}
.blue{color:var(--blue)}
.gold{color:var(--gold)}

/* ---- SCROLL ANIMATIONS (visible by default, enhanced by GSAP) ---- */
.gsap-fade,.gsap-slide-up,.gsap-slide-left,.gsap-slide-right,.gsap-scale,
.stagger-item{opacity:1;transform:none;transition:opacity 0.6s ease,transform 0.6s ease}
/* GSAP will override these inline for actual animation */

/* ---- SECTION COMMONS ---- */
.section-container{max-width:1200px;margin:0 auto;padding:0 24px}
.section-tag,.section-label{display:inline-flex;align-items:center;background:var(--blue-light);color:var(--blue);padding:6px 16px;border-radius:30px;font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:14px}
.section-title{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:800;line-height:1.2;margin-bottom:14px}
.section-sub{color:var(--text-light);font-size:1.02rem;line-height:1.7;max-width:640px}
.text-center,.center{text-align:center}
.center .section-sub,.text-center .section-sub{margin:0 auto}
.center .section-tag,.text-center .section-tag{display:inline-flex}

/* ---- BUTTONS ---- */
.btn-primary,.btn-gold{background:var(--gold);color:var(--dark);padding:14px 28px;border-radius:40px;font-weight:700;font-size:0.95rem;display:inline-flex;align-items:center;gap:8px;transition:var(--transition);border:none;cursor:pointer;font-family:inherit}
.btn-primary:hover,.btn-gold:hover{background:var(--gold-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(243,186,14,0.35);color:var(--dark)}
.btn-blue{background:var(--blue);color:#fff;padding:13px 28px;border-radius:40px;font-weight:700;font-size:0.95rem;display:inline-flex;align-items:center;gap:8px;transition:var(--transition)}
.btn-blue:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(59,145,207,0.35);color:#fff}
.btn-white{background:#fff;color:var(--blue-dark);padding:14px 28px;border-radius:40px;font-weight:700;font-size:0.95rem;display:inline-flex;align-items:center;gap:8px;transition:var(--transition)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}
.btn-outline{background:rgba(255,255,255,0.1);color:#fff;border:1.5px solid rgba(255,255,255,0.35);padding:13px 26px;border-radius:40px;font-weight:600;font-size:0.95rem;display:inline-flex;align-items:center;gap:8px;transition:var(--transition)}
.btn-outline:hover{background:rgba(255,255,255,0.2);color:#fff}
.btn-gold-outline{background:transparent;color:var(--gold);border:2px solid var(--gold);padding:12px 24px;border-radius:40px;font-weight:700;font-size:0.9rem;display:inline-flex;align-items:center;gap:8px;transition:var(--transition)}
.btn-gold-outline:hover{background:var(--gold);color:var(--dark)}

/* ---- WHATSAPP ---- */
.wa-float{position:fixed;bottom:28px;right:28px;z-index:9999;display:flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:13px 20px 13px 14px;border-radius:50px;box-shadow:0 4px 20px rgba(37,211,102,0.5);text-decoration:none;font-weight:700;font-size:0.88rem;transition:transform 0.2s,box-shadow 0.2s}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(37,211,102,0.55);color:#fff}
.wa-float svg{width:22px;height:22px;fill:#fff;flex-shrink:0}
@keyframes waPop{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* ---- TOP BANNER ---- */
/* TOP BANNER – fixed, dismissible on scroll */
.top-banner{background:var(--dark2);padding:10px 0;text-align:center;font-size:0.84rem;color:rgba(255,255,255,0.75);position:fixed;top:0;left:0;right:0;z-index:1001;transition:transform 0.3s ease,opacity 0.3s ease}
.top-banner.hidden{transform:translateY(-100%);opacity:0;pointer-events:none}
.top-banner strong{color:var(--gold)}
.top-banner a{color:var(--gold);font-weight:700}

/* ---- NAVBAR ---- */
#navbar{position:fixed;top:40px;left:0;right:0;z-index:1000;transition:background 0.4s,box-shadow 0.4s,top 0.3s,padding 0.3s;padding:14px 0}
#navbar.transparent{background:transparent}
#navbar.solid{background:var(--dark);box-shadow:0 2px 24px rgba(0,0,0,0.28);top:0;padding:10px 0}
.nav-container{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:24px}
/* LOGO */
.logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.logo-img{height:46px;width:auto;display:block}
.logo-full{display:none}/* hide old full-SVG fallback */
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;padding:0;margin:0 0 0 auto}
.nav-links a{color:rgba(255,255,255,0.82);font-weight:500;font-size:0.9rem;padding:8px 13px;border-radius:8px;transition:var(--transition);white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(255,255,255,0.1)}
.nav-cta{background:var(--gold)!important;color:var(--dark)!important;font-weight:700!important;padding:9px 20px!important;border-radius:30px!important}
.nav-cta:hover{background:var(--gold-dark)!important;transform:translateY(-1px)}
.has-dropdown{position:relative}
.dropdown{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,0.16);padding:8px;min-width:210px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all 0.2s;list-style:none;z-index:200;pointer-events:none}
.has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:all}
.dropdown a{color:var(--text)!important;background:none!important;border-radius:8px;padding:10px 14px!important;display:block;font-size:0.9rem!important;font-weight:500!important}
.dropdown a:hover{background:var(--blue-xlight)!important;color:var(--blue)!important}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;margin-left:auto;position:relative;z-index:1002}
.hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:var(--transition)}

/* ---- HERO ---- */
/* hero starts at y=0 (banner+nav are fixed and overlay it – hero bg fills full viewport) */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:0}
.hero-video-bg{position:absolute;inset:0;z-index:0}
.hero-video-bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 22s ease-in-out infinite alternate}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,20,35,0.9) 0%,rgba(10,20,35,0.55) 55%,rgba(10,20,35,0.75) 100%)}
.hero-content{position:relative;z-index:2;display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:center;max-width:1200px;margin:0 auto;padding:0 24px;width:100%}


.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(243,186,14,0.15);border:1px solid rgba(243,186,14,0.4);color:var(--gold);padding:8px 18px;border-radius:40px;font-size:0.82rem;font-weight:700;margin-bottom:22px;letter-spacing:0.04em}
.hero-badge-dot{width:8px;height:8px;background:var(--gold);border-radius:50%;animation:dot-pulse 2s infinite}
@keyframes dot-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.4)}}
.hero h1{font-size:clamp(2.4rem,5vw,3.8rem);font-weight:900;color:#fff;line-height:1.1;margin-bottom:20px}
.hero h1 em{color:var(--gold);font-style:normal}

/* Hero company label */
.hero-company-label{font-size:clamp(1.05rem,2.5vw,1.4rem);font-weight:800;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin:0 0 12px;display:block}
.hero-sub{color:rgba(255,255,255,0.75);font-size:1.05rem;line-height:1.7;margin-bottom:32px;max-width:520px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats-card{background:rgba(10,20,35,0.75);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:28px}
.hero-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hero-stat-num{font-size:1.65rem;font-weight:900;color:var(--gold);line-height:1}
.hero-stat-label{font-size:0.74rem;color:rgba(255,255,255,0.5);margin-top:3px}
.hero-scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(255,255,255,0.35);font-size:0.72rem;z-index:2;letter-spacing:0.08em}
.scroll-dot{width:5px;height:5px;background:rgba(255,255,255,0.35);border-radius:50%;animation:sb 1.8s ease-in-out infinite}
@keyframes sb{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes kenburns{0%{transform:scale(1.04) translate(-1%,0)}100%{transform:scale(1.1) translate(1%,0.8%)}}

/* ---- USP STRIP ---- */
.usp-strip{background:var(--blue);padding:0}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:1200px;margin:0 auto;padding:0 24px}
.usp-item{display:flex;align-items:center;gap:14px;padding:22px 20px;border-right:1px solid rgba(255,255,255,0.12)}
.usp-item:last-child{border-right:none}
.usp-icon{width:42px;height:42px;background:rgba(255,255,255,0.12);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.usp-icon svg{width:20px;height:20px;stroke:var(--gold);fill:none}
.usp-title{color:#fff;font-weight:700;font-size:0.88rem;line-height:1.3}
.usp-text{color:rgba(255,255,255,0.65);font-size:0.78rem;margin-top:2px}

/* ---- BRANDS / PARTNERS ---- */
.brands-section{background:#fff;padding:52px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.brands-label{text-align:center;font-size:0.76rem;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:#8a94a6;margin-bottom:28px}
.brands-track{overflow:hidden;position:relative;max-width:100%}
.brands-track::before,.brands-track::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.brands-track::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
.brands-track::after{right:0;background:linear-gradient(270deg,#fff,transparent)}
.brands-scroll{display:flex;gap:16px;animation:scroll-brands 30s linear infinite;width:max-content}
@keyframes scroll-brands{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.brand-card{min-width:170px;height:70px;background:#fff;border:2px solid var(--border);border-radius:14px;display:flex;align-items:center;justify-content:center;padding:0 20px;transition:border-color 0.2s,box-shadow 0.2s;cursor:default;gap:10px}
.brand-card:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(59,145,207,0.1)}
.brand-name{font-weight:900;font-size:1.05rem;letter-spacing:-0.02em}
.brand-sub{font-size:0.7rem;font-weight:500;opacity:0.6;letter-spacing:0.04em}

/* ---- ABOUT ---- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.about-img-wrap{position:relative;border-radius:20px;overflow:hidden;min-height:460px}
.about-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.about-img-badge{position:absolute;bottom:24px;left:24px;background:var(--gold);color:var(--dark);border-radius:14px;padding:16px 20px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,0.2)}
.about-img-badge .yr{font-size:2rem;font-weight:900;line-height:1}
.about-img-badge .lb{font-size:0.75rem;font-weight:600;margin-top:3px}
.about-list{display:flex;flex-direction:column;gap:13px;margin:20px 0}
.about-item{display:flex;align-items:center;gap:12px;font-size:0.95rem;color:var(--text)}
.about-item-icon{width:36px;height:36px;background:var(--blue-light);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.about-item-icon svg{width:18px;height:18px;stroke:var(--blue);fill:none}

/* ---- DARK COUNTERS ---- */
.counters-dark{background:linear-gradient(135deg,var(--dark) 0%,var(--dark2) 100%);padding:72px 0}
.counters-grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:960px;margin:0 auto;padding:0 24px;gap:2px}
.counter-cell{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);padding:36px 20px;text-align:center;border-radius:16px}
.counter-num{font-size:2.8rem;font-weight:900;color:var(--gold);line-height:1;margin-bottom:10px}
.counter-lbl{font-size:0.82rem;color:rgba(255,255,255,0.5);line-height:1.5}

/* ---- ENERGY FLOW ---- */
.energy-flow{background:var(--dark);padding:96px 0;overflow:hidden;position:relative}
.energy-flow::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(59,145,207,0.07) 0%,transparent 65%);pointer-events:none}
.ef-title{text-align:center;margin-bottom:64px}
.ef-title h2{color:#fff;font-size:2rem;margin-bottom:12px}
.ef-title p{color:rgba(255,255,255,0.55);max-width:560px;margin:0 auto}
.ef-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;max-width:980px;margin:0 auto}
.ef-node{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 24px;background:rgba(255,255,255,0.04);border:1.5px solid rgba(255,255,255,0.08);border-radius:20px;min-width:148px;transition:border-color 0.3s,background 0.3s}
.ef-node:hover{border-color:rgba(59,145,207,0.5);background:rgba(59,145,207,0.07)}
.ef-icon-box{width:60px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.ef-icon-box.sun{background:rgba(243,186,14,0.15)}
.ef-icon-box.blue{background:rgba(59,145,207,0.15)}
.ef-icon-box svg{width:30px;height:30px;fill:none}
.ef-lbl{color:#fff;font-weight:700;font-size:0.9rem;text-align:center}
.ef-sub{color:rgba(255,255,255,0.4);font-size:0.75rem;text-align:center;margin-top:1px}
.ef-arrow{display:flex;align-items:center;padding:0 4px}
.ef-line{height:2px;width:52px;background:linear-gradient(90deg,rgba(59,145,207,0.3),rgba(59,145,207,0.9));border-radius:2px;position:relative;overflow:hidden}
.ef-line::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:flow 2.2s linear infinite}
@keyframes flow{0%{left:-60%}100%{left:130%}}
.ef-tip{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid rgba(59,145,207,0.9)}

/* ---- PRODUCTS ---- */
.products-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.product-card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1.5px solid var(--border);display:flex;flex-direction:column;transition:var(--transition)}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--blue)}
.product-card-img{height:220px;overflow:hidden;position:relative}
.product-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s ease}
.product-card:hover .product-card-img img{transform:scale(1.06)}
.product-card-img-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,30,45,0.35),transparent)}
.product-card-tag{position:absolute;top:12px;left:12px;background:var(--dark2);color:#fff;padding:4px 12px;border-radius:20px;font-size:0.72rem;font-weight:700;letter-spacing:0.04em}
.product-card-body{padding:24px;flex:1;display:flex;flex-direction:column}
.product-card-body h3{margin-bottom:10px;font-size:1.2rem}
.product-card-body p{font-size:0.9rem;color:var(--text-light);flex:1;margin-bottom:16px;line-height:1.6}
.product-link{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:700;font-size:0.88rem;margin-top:auto;transition:gap 0.2s}
.product-link:hover{gap:10px}
.tag-chips,.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.chip,.tag{display:inline-block;background:var(--blue-light);color:var(--blue-dark);padding:4px 12px;border-radius:20px;font-size:0.74rem;font-weight:600}
.gold-chip,.green-tag{background:rgba(243,186,14,0.13);color:#8a6500}

/* ---- REGIONAL SECTION ---- */
.regional-section{background:linear-gradient(135deg,var(--dark2) 0%,#1e3a6e 100%);padding:96px 0;position:relative;overflow:hidden}
.regional-section::after{content:'';position:absolute;right:-80px;top:-80px;width:480px;height:480px;background:radial-gradient(circle,rgba(243,186,14,0.06),transparent 60%);pointer-events:none}
.regional-inner{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;max-width:1200px;margin:0 auto;padding:0 24px}
.regional-text h2{color:#fff;font-size:2.3rem;font-weight:800;line-height:1.2;margin-bottom:18px}
.regional-text h2 em{color:var(--gold);font-style:normal}
.regional-text p{color:rgba(255,255,255,0.7);line-height:1.8;margin-bottom:14px;font-size:1rem}
.regional-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.r-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.13);padding:8px 16px;border-radius:40px;color:rgba(255,255,255,0.85);font-size:0.83rem;font-weight:600}
.regional-visual{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rv-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:28px 18px;text-align:center;transition:border-color 0.3s}
.rv-card:hover{border-color:rgba(243,186,14,0.4)}
.rv-num{font-size:2.4rem;font-weight:900;color:var(--gold);line-height:1}
.rv-lbl{color:rgba(255,255,255,0.55);font-size:0.8rem;margin-top:7px;line-height:1.4}

/* ---- VIDEO ---- */
.video-section{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.video-bg{position:absolute;inset:0;z-index:0}
.video-bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 26s ease-in-out infinite alternate}
.video-bg-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,20,35,0.82),rgba(10,20,35,0.65))}
.video-content{position:relative;z-index:2;text-align:center;max-width:700px;padding:80px 24px;color:#fff}
.video-content h2{font-size:2.1rem;font-weight:800;margin:24px 0 16px;line-height:1.25;color:#fff}
.video-content p{color:rgba(255,255,255,0.7);line-height:1.7;margin-bottom:32px}
.play-btn{width:80px;height:80px;background:rgba(243,186,14,0.92);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;border:none;animation:play-pulse 2.8s ease-in-out infinite}
.play-btn svg{width:28px;height:28px;fill:var(--dark);margin-left:5px}
.play-btn:hover{transform:scale(1.12);box-shadow:0 0 0 14px rgba(243,186,14,0.18)}
@keyframes play-pulse{0%,100%{box-shadow:0 0 0 0 rgba(243,186,14,0.3)}70%{box-shadow:0 0 0 20px rgba(243,186,14,0)}}

/* ---- FEATURES ---- */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.feature-card{background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);border:1.5px solid var(--border);transition:var(--transition)}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--blue)}
.feature-icon{width:50px;height:50px;background:var(--blue-light);border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.feature-icon svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:2}
.feature-card h3{font-size:1.05rem;margin-bottom:10px}
.feature-card p{font-size:0.88rem;color:var(--text-light);line-height:1.65}

/* ---- TESTIMONIALS ---- */
.testimonials-bg{background:var(--gray-light)}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.testimonial-card{background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);border:1.5px solid var(--border);transition:var(--transition)}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.stars{color:var(--gold);font-size:1.05rem;letter-spacing:2px;margin-bottom:14px}
.testimonial-text{font-size:0.91rem;line-height:1.75;color:var(--text);font-style:italic;margin-bottom:18px}
.testimonial-author{display:flex;align-items:center;gap:12px}
.avatar{width:42px;height:42px;background:var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1rem;flex-shrink:0}
.author-name{font-weight:700;font-size:0.9rem}
.author-place{font-size:0.78rem;color:var(--text-light)}

/* ---- CTA STRIP ---- */
.cta-strip{background:linear-gradient(135deg,var(--blue-dark),var(--blue));padding:72px 0;text-align:center}
.cta-strip h2{color:#fff;font-size:1.9rem;margin-bottom:12px}
.cta-strip p{color:rgba(255,255,255,0.78);margin-bottom:32px;font-size:1.02rem}

/* ---- CONTACT ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contact-info-cards{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.contact-info-card{display:flex;align-items:flex-start;gap:14px;background:var(--gray-light);border-radius:13px;padding:16px 20px}
.contact-info-icon{width:40px;height:40px;background:var(--blue-light);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-info-icon svg{width:18px;height:18px;stroke:var(--blue);fill:none}
.contact-info-label{font-size:0.72rem;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:3px}
.contact-info-val{font-size:0.9rem;font-weight:600;color:var(--text)}
.contact-info-val a{color:var(--blue)}
.contact-form-card{background:#fff;border-radius:20px;padding:36px;box-shadow:var(--shadow-lg);border:1.5px solid var(--border)}
.contact-form-card h3{margin-bottom:5px;font-size:1.3rem}
.contact-form-card>p{color:var(--text-light);font-size:0.9rem;margin-bottom:22px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-group label{font-size:0.8rem;font-weight:600;color:var(--text)}
.form-group input,.form-group textarea,.form-group select{padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:0.93rem;font-family:inherit;outline:none;transition:border-color 0.2s;color:var(--text);background:#fff}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--blue)}
.form-group textarea{min-height:100px;resize:vertical}
.form-submit{width:100%;background:var(--blue);color:#fff;padding:14px;border-radius:12px;font-size:0.98rem;font-weight:700;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:var(--transition);font-family:inherit}
.form-submit:hover{background:var(--blue-dark);transform:translateY(-1px)}

/* ---- PAGE HERO ---- */
.page-hero{position:relative;min-height:420px;display:flex;align-items:flex-end;overflow:hidden;margin-top:0}
.page-hero-bg{position:absolute;inset:0;z-index:0}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 22s ease-in-out infinite alternate}
.page-hero-bg-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,20,35,0.45) 0%,rgba(10,20,35,0.92) 100%)}
/* padding-top clears fixed banner (40px) + navbar (66px) + small buffer */
.page-hero-content{position:relative;z-index:2;padding:120px 24px 56px;max-width:1200px;margin:0 auto;width:100%}
.page-hero-content h1{color:#fff;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;margin-bottom:12px}
.page-hero-content p{color:rgba(255,255,255,0.72);font-size:1rem;max-width:580px;line-height:1.65}
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:0.8rem}
.breadcrumb a{color:rgba(255,255,255,0.5);transition:color 0.2s}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{color:rgba(255,255,255,0.3)}
.breadcrumb .current{color:var(--gold)}

/* ---- DETAIL PAGES ---- */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.detail-visual{border-radius:16px;overflow:hidden;min-height:360px;background:var(--blue-light)}
.detail-visual img{width:100%;height:100%;object-fit:cover;display:block}
.check-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.check-list li{display:flex;align-items:flex-start;gap:10px;font-size:0.93rem;color:var(--text);line-height:1.5}
.check-list li::before{content:"✓";background:var(--blue);color:#fff;border-radius:50%;width:20px;height:20px;min-width:20px;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;margin-top:2px}
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}
.spec-item{background:var(--blue-light);border-radius:12px;padding:14px;text-align:center}
.spec-val{font-size:1.4rem;font-weight:900;color:var(--blue-dark)}
.spec-name{font-size:0.76rem;color:var(--text-light);margin-top:4px}

/* ---- FOOTER ---- */
footer{background:var(--dark);color:rgba(255,255,255,0.6)}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:48px;max-width:1200px;margin:0 auto;padding:60px 24px 44px}
.footer-logo{margin-bottom:14px}
.footer-logo img,.footer-logo-img{height:52px;width:auto;display:block}
.footer-desc{font-size:0.87rem;line-height:1.7;max-width:260px;margin-bottom:18px}
.footer-top h4{color:#fff;font-size:0.85rem;font-weight:700;margin-bottom:14px;text-transform:uppercase;letter-spacing:0.08em}
.footer-top ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px}
.footer-top ul a{color:rgba(255,255,255,0.5);font-size:0.87rem;transition:color 0.2s}
.footer-top ul a:hover{color:var(--gold)}
.footer-contact-list{display:flex;flex-direction:column;gap:11px}
.footer-contact-item{display:flex;align-items:flex-start;gap:10px;font-size:0.87rem;color:rgba(255,255,255,0.5)}
.footer-contact-item svg{width:15px;height:15px;stroke:var(--gold);fill:none;flex-shrink:0;margin-top:2px}
.footer-contact-item a{color:rgba(255,255,255,0.5);transition:color 0.2s}
.footer-contact-item a:hover{color:var(--gold)}
.social-links{display:flex;gap:10px;margin-top:16px}
.social-link{width:36px;height:36px;background:rgba(255,255,255,0.07);border-radius:8px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.5);transition:var(--transition)}
.social-link:hover{background:var(--blue);color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.07);padding:18px 24px;text-align:center;font-size:0.8rem;color:rgba(255,255,255,0.3);max-width:1200px;margin:0 auto}
.footer-bottom a{color:rgba(255,255,255,0.35);transition:color 0.2s}
.footer-bottom a:hover{color:var(--gold)}

/* ---- MISC ---- */
.usp-strip-sub{background:rgba(255,255,255,0.06);border-top:1px solid rgba(255,255,255,0.08)}
.about-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.about-stat-item .num{font-size:2rem;font-weight:900;color:var(--gold)}
.about-stat-item .label{font-size:0.8rem;color:rgba(255,255,255,0.6);margin-top:4px}
.about-card{background:var(--blue);border-radius:18px;padding:32px;color:#fff}
.process-steps{display:flex;flex-direction:column;gap:0;max-width:800px;margin:0 auto;position:relative}
.process-step{display:grid;grid-template-columns:80px 1fr;gap:28px;padding:28px 0;border-bottom:1px solid var(--border)}
.process-step:last-child{border-bottom:none}
.step-num{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.3rem;flex-shrink:0}
.step-num.blue{background:var(--blue);color:#fff}
.step-num.gold{background:var(--gold);color:var(--dark)}
.step-content h3{font-size:1.1rem;margin-bottom:6px}
.step-content p{font-size:0.92rem;color:var(--text-light);line-height:1.6}

/* ---- RESPONSIVE ---- */
/* ── TABLET (≤1024px) ─────────────────────────────────────── */
@media(max-width:1024px){
  /* NAV → Hamburger ab Tablet (6 Items passen nicht mehr in eine Zeile) */
  .nav-links{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--dark);flex-direction:column;padding:96px 28px 48px;gap:4px;z-index:999;overflow-y:auto}
  .nav-links.open{display:flex}
  .nav-links a{font-size:1.1rem;padding:14px 16px;border-radius:12px;color:rgba(255,255,255,0.85)}
  .nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(255,255,255,0.1)}
  .nav-cta{margin-top:12px;padding:15px 24px!important;font-size:1.05rem!important;text-align:center;display:block!important}
  .hamburger{display:flex}
  .dropdown{position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;box-shadow:none!important;background:rgba(255,255,255,0.05);border-radius:10px;margin:4px 0 4px 16px;padding:4px;pointer-events:all!important}
  .dropdown a{color:rgba(255,255,255,0.7)!important;font-size:0.98rem!important;padding:11px 14px!important;background:none!important}
  .dropdown a:hover{background:rgba(255,255,255,0.08)!important;color:#fff!important}
  .has-dropdown .dropdown{display:none}
  .has-dropdown.open .dropdown{display:block}
  /* Layout */
  .hero-content{grid-template-columns:1fr}
  .hero-stats-card{display:none}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
  .features-grid{grid-template-columns:1fr 1fr}
  .about-grid,.detail-grid,.contact-grid,.regional-inner{grid-template-columns:1fr;gap:40px}
}

/* ── MOBILE (≤768px) ──────────────────────────────────────── */
@media(max-width:768px){
  /* Banner + navbar */
  .top-banner{font-size:0.72rem;padding:7px 10px;line-height:1.4}
  #navbar{top:36px;padding:8px 0}
  #navbar.solid{top:0;padding:8px 0}
  /* Hero */
  .hero-content{padding-top:110px!important;padding-bottom:40px!important;padding:0 18px}
  .hero h1{font-size:clamp(1.9rem,7vw,2.8rem)}
  .hero-sub{font-size:0.95rem}
  .hero-btns{flex-direction:column;gap:10px}
  .hero-btns .btn,.hero-btns a{width:100%;justify-content:center;text-align:center}
  .hero-company-label{letter-spacing:0.1em}
  /* Page heros */
  .page-hero{min-height:280px}
  .page-hero-content{padding:80px 18px 40px}
  .page-hero-content h1{font-size:1.75rem}
  /* Sections */
  section{padding:52px 0}
  .section-container{padding:0 16px}
  /* Grids */
  .usp-grid{grid-template-columns:1fr 1fr}
  .usp-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.1)}
  .usp-item:nth-child(odd){border-right:1px solid rgba(255,255,255,0.1)}
  .products-grid,.features-grid,.testimonials-grid{grid-template-columns:1fr}
  .counters-grid{grid-template-columns:1fr 1fr;gap:10px;padding:0 12px}
  .footer-top{grid-template-columns:1fr;gap:24px;padding:40px 18px 28px}
  .form-row{grid-template-columns:1fr}
  .regional-visual{grid-template-columns:1fr 1fr}
  .spec-grid{grid-template-columns:1fr 1fr}
  .ef-row{flex-direction:column}
  .ef-arrow{transform:rotate(90deg)}
  /* Blog */
  .blog-grid{grid-template-columns:1fr}
  .blog-card-featured{grid-column:auto}
  .blog-card-featured .blog-card-img{height:220px}
  /* Referenzen */
  .ref-grid{grid-template-columns:1fr}
  .ref-stats-grid{grid-template-columns:1fr 1fr}
  /* Förderungen */
  .foerd-step{padding:12px 0}
  /* Calculator */
  .calc-inner{grid-template-columns:1fr;gap:32px}
  .calc-title{font-size:1.6rem}
  /* Back to top – above FAB */
  #back-to-top{bottom:18px;right:82px;width:42px;height:42px}
  /* Cookie banner */
  .cb-actions{flex-direction:column}
  .cb-btn{width:100%;text-align:center}
  /* Tables in blog */
  .blog-table-wrap{margin:16px -16px;border-radius:0}
  .blog-table{font-size:0.8rem}
  /* Google Reviews on mobile */
  .google-reviews-badge{margin-top:16px}
  .grb-inner{padding:7px 14px 7px 10px}
}

/* ── SMALL PHONES (≤480px) ────────────────────────────────── */
@media(max-width:480px){
  .counters-grid{grid-template-columns:1fr 1fr}
  .counter-cell{padding:20px 14px}
  .counter-num{font-size:2rem}
  .usp-grid{grid-template-columns:1fr}
  .usp-item{border-right:none}
  .section-title{font-size:1.45rem}
  .calc-big-num{font-size:2.2rem}
  .hero-btns .btn,.hero-btns a{padding:14px 20px;font-size:0.9rem}
  .page-hero-content h1{font-size:1.45rem}
  .why-us-grid{grid-template-columns:1fr}
  .about-stat-grid{grid-template-columns:1fr 1fr}
  .ref-stats-grid{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  /* Kontakt form */
  .contact-grid{gap:24px}
  .contact-form-card{padding:24px 18px}
  /* Blog article */
  .blog-lead{font-size:1rem;padding-left:14px}
  .blog-article-body h2{font-size:1.15rem}
}

/* ── TIMELINE / PROCESS STEPS ─────────────────────────────── */
.process-timeline{position:relative;max-width:820px;margin:0 auto;padding-left:40px}
.process-timeline::before{content:'';position:absolute;left:27px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--blue),var(--gold));opacity:0.3}
.step-item{position:relative;display:grid;grid-template-columns:56px 1fr;gap:28px;align-items:flex-start;margin-bottom:52px}
.step-item:last-child{margin-bottom:0}
.step-circle{width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.25rem;flex-shrink:0;position:relative;z-index:1;box-shadow:0 0 0 6px var(--blue-light)}
.step-content{padding-top:12px}
.step-content h3{font-size:1.15rem;font-weight:800;color:var(--dark);margin-bottom:10px}
.step-content p{font-size:0.94rem;color:var(--text);line-height:1.7;margin-bottom:12px}
.step-check{list-style:none;padding:0;display:flex;flex-direction:column;gap:7px;margin-top:10px}
.step-check li{display:flex;align-items:center;gap:8px;font-size:0.88rem;color:var(--text-light)}
.step-check li::before{content:'✓';color:var(--blue);font-weight:800}
.step-tag{display:inline-block;background:var(--blue-light);color:var(--blue);border-radius:6px;font-size:0.72rem;font-weight:700;padding:3px 10px;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.08em}
/* TIMELINE IMG CARD */
.step-img{width:100%;height:200px;object-fit:cover;border-radius:14px;margin-top:16px;box-shadow:0 8px 28px rgba(0,0,0,0.10)}

/* ── ÜBER UNS EXTRAS ──────────────────────────────────────── */
.timeline-strip{position:relative;padding:0 0 0 32px;margin-top:32px}
.timeline-strip::before{content:'';position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--blue);opacity:0.2}
.tl-item{position:relative;margin-bottom:28px}
.tl-item::before{content:'';position:absolute;left:-26px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--blue)}
.tl-year{font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:var(--blue);margin-bottom:3px}
.tl-title{font-size:0.97rem;font-weight:700;color:var(--dark);margin-bottom:2px}
.tl-desc{font-size:0.88rem;color:var(--text-light);line-height:1.5}
/* TEAM GRID */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.team-card{background:#fff;border:1.5px solid var(--border);border-radius:20px;overflow:hidden;transition:box-shadow 0.2s,transform 0.2s}
.team-card:hover{box-shadow:0 8px 32px rgba(59,145,207,0.12);transform:translateY(-4px)}
.team-img{width:100%;height:220px;object-fit:cover;object-position:top}
.team-body{padding:20px 22px}
.team-name{font-size:1rem;font-weight:800;color:var(--dark);margin-bottom:2px}
.team-role{font-size:0.8rem;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px}
.team-desc{font-size:0.87rem;color:var(--text-light);line-height:1.55}
/* WHY US TABLE */
.why-us-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.why-item{display:flex;gap:16px;align-items:flex-start;padding:22px;background:#fff;border:1.5px solid var(--border);border-radius:16px;transition:border-color 0.2s,box-shadow 0.2s}
.why-item:hover{border-color:var(--blue);box-shadow:0 4px 18px rgba(59,145,207,0.08)}
.why-icon{width:46px;height:46px;background:var(--blue-light);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.why-icon svg{width:22px;height:22px;stroke:var(--blue);fill:none}
.why-text h4{font-size:0.97rem;font-weight:800;color:var(--dark);margin-bottom:4px}
.why-text p{font-size:0.86rem;color:var(--text-light);line-height:1.5}
/* FAQ ACCORDION */
.faq-list{max-width:800px;margin:40px auto 0;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color 0.2s}
.faq-item.open{border-color:var(--blue)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 22px;background:none;border:none;font-family:inherit;font-size:0.97rem;font-weight:700;color:var(--dark);cursor:pointer;text-align:left;gap:12px}
.faq-q svg{flex-shrink:0;transition:transform 0.25s;width:18px;height:18px;stroke:var(--blue)}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{display:none;padding:0 22px 18px;font-size:0.91rem;color:var(--text);line-height:1.7}
.faq-item.open .faq-a{display:block}
/* STEP DURATION BADGE */
.step-duration{display:inline-flex;align-items:center;gap:6px;background:rgba(59,145,207,0.08);color:var(--blue);border-radius:8px;font-size:0.79rem;font-weight:700;padding:4px 12px;margin-top:8px}
@media(max-width:768px){
  .team-grid{grid-template-columns:1fr 1fr}
  .why-us-grid{grid-template-columns:1fr}
  .process-timeline{padding-left:28px}
  .step-item{grid-template-columns:44px 1fr;gap:16px}
  .step-circle{width:44px;height:44px;font-size:1rem}
}
@media(max-width:480px){
  .team-grid{grid-template-columns:1fr}
}

/* ── FOOTER COMPATIBILITY (old class aliases) ─────────────── */
.footer-container{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:48px;max-width:1200px;margin:0 auto;padding:60px 24px 44px}
.footer-col p{font-size:0.87rem;line-height:1.7;color:rgba(255,255,255,0.5);max-width:260px;margin-bottom:18px}
.footer-container h4{color:#fff;font-size:0.85rem;font-weight:700;margin-bottom:14px;text-transform:uppercase;letter-spacing:0.08em}
.footer-container ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px}
.footer-container ul a{color:rgba(255,255,255,0.5);font-size:0.87rem;transition:color 0.2s}
.footer-container ul a:hover{color:var(--gold)}
.footer-contact li{display:flex;align-items:flex-start;gap:8px;font-size:0.86rem;color:rgba(255,255,255,0.55);line-height:1.5}
.footer-contact a{color:rgba(255,255,255,0.55);transition:color 0.2s}
.footer-contact a:hover{color:var(--gold)}
@media(max-width:900px){.footer-container{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:540px){.footer-container{grid-template-columns:1fr;gap:28px;padding:40px 24px 28px}}

/* ── DETAIL PAGE IMAGE BLOCK ──────────────────────────────── */
.detail-img{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.14)}
.detail-img img{width:100%;height:100%;object-fit:cover;display:block;min-height:320px}
.detail-badge{position:absolute;bottom:20px;left:20px;background:var(--gold);color:var(--dark);border-radius:10px;padding:10px 16px;font-size:0.8rem;font-weight:800;letter-spacing:0.04em}

/* ══════════════════════════════════════════════
   WOW EFFECTS – MS HEIM ENERGIE
   ══════════════════════════════════════════════ */

/* SCROLL PROGRESS BAR */
#scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--blue),var(--gold));z-index:9999;transition:width 0.1s linear}

/* GRADIENT ANIMATED TEXT */
.gradient-text{background:linear-gradient(120deg,#fff 0%,var(--gold) 40%,#fff 80%,var(--gold) 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer-text 4s linear infinite}
@keyframes shimmer-text{0%{background-position:0% center}100%{background-position:200% center}}

/* GLOW BUTTONS */
.btn-gold:hover,.btn-primary:hover{box-shadow:0 0 30px rgba(243,186,14,0.6),0 8px 24px rgba(243,186,14,0.3);transform:translateY(-3px)}
.btn-blue:hover{box-shadow:0 0 30px rgba(59,145,207,0.5),0 8px 24px rgba(59,145,207,0.3);transform:translateY(-3px)}
.btn-white:hover{box-shadow:0 0 24px rgba(255,255,255,0.4),0 8px 24px rgba(255,255,255,0.15);transform:translateY(-3px)}

/* FEATURE CARD GLOW HOVER */
.feature-card{transition:transform 0.25s ease,box-shadow 0.25s ease,border-color 0.25s ease}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(59,145,207,0.14);border-color:var(--blue)}

/* PRODUCT CARD 3D TILT – base styles */
.product-card{transform-style:preserve-3d;transition:box-shadow 0.3s ease}
.product-card:hover{box-shadow:0 24px 64px rgba(59,145,207,0.2)}

/* GLASSMORPHISM */
.glass{background:rgba(255,255,255,0.06)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,0.12)!important}

/* HERO PARTICLES */
.hero-particles{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.particle{position:absolute;border-radius:50%;opacity:0;animation:float-particle linear infinite}
@keyframes float-particle{0%{opacity:0;transform:translateY(100%) scale(0)}20%{opacity:0.6}80%{opacity:0.3}100%{opacity:0;transform:translateY(-120vh) scale(1.5)}}

/* HERO GRADIENT OVERLAY enhancement */
.hero-bg-overlay{background:linear-gradient(135deg,rgba(10,20,40,0.85) 0%,rgba(10,20,50,0.75) 50%,rgba(20,40,80,0.65) 100%)!important}

/* SOLAR RAYS DECORATION */
.sun-rays{position:absolute;top:-60px;right:-60px;width:400px;height:400px;pointer-events:none;opacity:0.07;animation:spin-slow 40s linear infinite;z-index:0}
@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ══ SPAR-RECHNER ══════════════════════════════ */
.calculator-section{background:linear-gradient(135deg,#0a1428 0%,#0f1e3a 50%,#0a1428 100%);padding:96px 0;position:relative;overflow:hidden}
.calculator-section::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(59,145,207,0.12),transparent 70%);pointer-events:none}
.calculator-section::after{content:'';position:absolute;bottom:-200px;left:-200px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(243,186,14,0.07),transparent 70%);pointer-events:none}
.calc-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.calc-label-top{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--gold);margin-bottom:10px}
.calc-title{font-size:2rem;font-weight:900;color:#fff;line-height:1.2;margin-bottom:16px}
.calc-desc{font-size:0.93rem;color:rgba(255,255,255,0.6);line-height:1.7;margin-bottom:40px}
.calc-slider-group{margin-bottom:30px}
.calc-slider-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.calc-slider-name{font-size:0.88rem;font-weight:600;color:rgba(255,255,255,0.75)}
.calc-slider-val{font-size:1.05rem;font-weight:900;color:var(--gold);min-width:80px;text-align:right}
.calc-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:rgba(255,255,255,0.1);outline:none;cursor:pointer}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 0 12px rgba(243,186,14,0.5);border:2px solid #fff;transition:transform 0.15s,box-shadow 0.15s}
.calc-range::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 20px rgba(243,186,14,0.7)}
.calc-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--gold);cursor:pointer;border:2px solid #fff;box-shadow:0 0 12px rgba(243,186,14,0.5)}

/* Results card */
.calc-results{background:rgba(255,255,255,0.04);border:1.5px solid rgba(255,255,255,0.08);border-radius:24px;padding:32px;backdrop-filter:blur(12px)}
.calc-results-title{font-size:0.8rem;font-weight:800;text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,0.4);margin-bottom:24px}
.calc-result-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.06)}
.calc-result-row:last-of-type{border-bottom:none}
.calc-result-label{font-size:0.88rem;color:rgba(255,255,255,0.6)}
.calc-result-value{font-size:1.05rem;font-weight:800;color:#fff;text-align:right}
.calc-result-value.gold{color:var(--gold);font-size:1.2rem}
.calc-result-value.green{color:#4ade80}
.calc-big{display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(243,186,14,0.12),rgba(243,186,14,0.05));border:1.5px solid rgba(243,186,14,0.25);border-radius:18px;padding:24px;margin-bottom:20px;text-align:center}
.calc-big-num{font-size:2.8rem;font-weight:900;color:var(--gold);line-height:1;margin-bottom:4px;transition:all 0.4s ease}
.calc-big-label{font-size:0.8rem;color:rgba(255,255,255,0.5);font-weight:600;text-transform:uppercase;letter-spacing:0.08em}
.calc-cta-btn{width:100%;margin-top:20px;justify-content:center;font-size:1rem;padding:16px 24px;border-radius:14px}

/* ROI CHART */
.roi-chart{width:100%;height:8px;background:rgba(255,255,255,0.07);border-radius:8px;overflow:hidden;margin-top:8px;margin-bottom:4px}
.roi-bar{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--blue),var(--gold));transition:width 0.6s cubic-bezier(0.4,0,0.2,1)}
.roi-labels{display:flex;justify-content:space-between;font-size:0.73rem;color:rgba(255,255,255,0.35)}

/* BADGE FLIP */
.badge-icon{display:inline-block;animation:badge-bounce 3s ease-in-out infinite}
@keyframes badge-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* WOW COUNTERS – glow on hover */
.counter-cell{transition:background 0.2s,border-color 0.2s,box-shadow 0.2s}
.counter-cell:hover{background:rgba(59,145,207,0.08)!important;border-color:rgba(59,145,207,0.3)!important;box-shadow:0 0 32px rgba(59,145,207,0.12)}
.counter-num{text-shadow:0 0 40px rgba(243,186,14,0.3)}

/* TYPED CURSOR */
.typed-cursor{display:inline-block;width:2px;height:1em;background:var(--gold);margin-left:3px;animation:blink-cursor 0.75s step-end infinite;vertical-align:text-bottom}
@keyframes blink-cursor{0%,100%{opacity:1}50%{opacity:0}}

/* WA-FLOAT GLOW PULSE */
.wa-float{animation:wa-glow 2.5s ease-in-out infinite}
@keyframes wa-glow{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,0.5)}50%{box-shadow:0 4px 32px rgba(37,211,102,0.8),0 0 60px rgba(37,211,102,0.2)}}

@media(max-width:900px){.calc-inner{grid-template-columns:1fr;gap:40px}}

/* ══ BACK-TO-TOP BUTTON ══════════════════════════ */
#back-to-top{
  position:fixed;bottom:28px;right:96px;
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),#2178b5);
  color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(59,145,207,0.45);
  opacity:0;transform:translateY(20px) scale(0.8);
  transition:opacity 0.3s,transform 0.3s,box-shadow 0.2s;
  z-index:899;
}
#back-to-top.visible{opacity:1;transform:translateY(0) scale(1)}
#back-to-top:hover{box-shadow:0 6px 28px rgba(59,145,207,0.7);transform:translateY(-2px) scale(1.05)}
#back-to-top svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ══ PAGE PRELOADER ══════════════════════════════ */
#preloader{
  position:fixed;inset:0;
  background:var(--dark);
  z-index:99999;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:28px;
  transition:opacity 0.6s ease,visibility 0.6s ease;
}
#preloader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.preloader-logo{
  display:flex;align-items:center;gap:14px;
  animation:preloader-fade-in 0.5s ease forwards;
}
@keyframes preloader-fade-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.preloader-sun{
  width:54px;height:54px;
  animation:spin-slow 8s linear infinite;
}
.preloader-brand-text{
  font-family:'Inter',sans-serif;
  font-size:1.4rem;font-weight:800;color:#fff;line-height:1.2;
}
.preloader-brand-text span{display:block;font-size:0.8rem;font-weight:500;color:rgba(255,255,255,0.45);letter-spacing:0.1em;text-transform:uppercase;margin-top:2px}
.preloader-bar{
  width:200px;height:3px;
  background:rgba(255,255,255,0.08);
  border-radius:3px;overflow:hidden;
}
.preloader-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--blue),var(--gold));
  border-radius:3px;
  animation:preloader-fill 1.4s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes preloader-fill{0%{width:0%}60%{width:70%}100%{width:100%}}
.preloader-tagline{
  font-family:'Inter',sans-serif;
  font-size:0.82rem;color:rgba(255,255,255,0.35);
  letter-spacing:0.06em;text-transform:uppercase;
}

/* ══ PARTNER BRAND CARDS ══════════════════════════════════════ */
.partner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px}
.partner-card{
  background:#fff;
  border:1.5px solid #e8edf5;
  border-radius:18px;
  overflow:hidden;
  transition:border-color 0.2s,box-shadow 0.25s,transform 0.2s;
  display:flex;flex-direction:column;
}
.partner-card:hover{
  border-color:var(--blue);
  box-shadow:0 8px 32px rgba(59,145,207,0.12);
  transform:translateY(-4px);
}
.partner-logo-wrap{
  padding:28px 20px 16px;
  display:flex;align-items:center;justify-content:center;
  min-height:80px;
}
.partner-svg{width:100%;max-width:130px;height:48px}
.partner-divider{height:1px;background:#f0f4f8;margin:0 16px}
.partner-info{padding:14px 20px 20px;flex:1}
.partner-tag{
  display:inline-block;
  background:var(--blue-light);color:var(--blue);
  font-size:0.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.08em;
  padding:3px 10px;border-radius:6px;
  margin-bottom:7px;
}
.partner-info p{font-size:0.82rem;color:#8a94a6;line-height:1.5;margin:0}
@media(max-width:640px){
  .partner-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:400px){
  .partner-grid{grid-template-columns:1fr}
}

/* ══ EXTRA MOBILE POLISH (480px – in Haupt-Breakpoint oben zusammengefasst) ══ */

/* ═══════════════════════════════════════════════
   FLOATING CONTACT BUTTON (FAB)
═══════════════════════════════════════════════ */
#fab-contact{position:fixed;bottom:28px;right:24px;z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.fab-main{width:58px;height:58px;border-radius:50%;background:var(--gold);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(243,186,14,0.45);transition:transform 0.2s,box-shadow 0.2s;color:#0F1E2D}
.fab-main svg{width:26px;height:26px;transition:transform 0.3s}
.fab-main:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(243,186,14,0.55)}
#fab-contact.open .fab-main svg{transform:rotate(135deg)}
.fab-options{display:flex;flex-direction:column;gap:10px;align-items:flex-end;opacity:0;transform:translateY(10px) scale(0.95);pointer-events:none;transition:opacity 0.2s,transform 0.2s}
#fab-contact.open .fab-options{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.fab-option{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;border-radius:50px;text-decoration:none;font-size:0.88rem;font-weight:700;color:#fff;box-shadow:0 3px 14px rgba(0,0,0,0.25);transition:transform 0.15s,box-shadow 0.15s;white-space:nowrap}
.fab-option svg{width:20px;height:20px;flex-shrink:0}
.fab-option:hover{transform:scale(1.05);box-shadow:0 5px 18px rgba(0,0,0,0.3)}
.fab-call{background:var(--blue)}
.fab-whatsapp{background:#25D366}
@media(max-width:480px){
  #fab-contact{bottom:18px;right:14px}
  .fab-main{width:52px;height:52px}
  .fab-option span{display:none}
  .fab-option{padding:10px}
  .fab-option svg{width:22px;height:22px}
}

/* ═══════════════════════════════════════════════
   GOOGLE REVIEWS BADGE
═══════════════════════════════════════════════ */
.google-reviews-badge{margin-top:24px}
.grb-inner{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:40px;padding:8px 18px 8px 12px;backdrop-filter:blur(10px)}
.grb-gicon{width:20px;height:20px;flex-shrink:0}
.grb-stars{display:flex;gap:2px}
.grb-stars svg{width:15px;height:15px}
.grb-score{font-size:0.95rem;font-weight:800;color:#fff}
.grb-sep{color:rgba(255,255,255,0.35);font-size:0.85rem}
.grb-count{font-size:0.8rem;color:rgba(255,255,255,0.65);font-weight:500}

/* ═══════════════════════════════════════════════
   REFERENZEN
═══════════════════════════════════════════════ */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:32px}
.ref-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:20px;overflow:hidden;transition:transform 0.25s,box-shadow 0.25s}
.ref-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.3)}
.ref-card-img{position:relative;height:220px;overflow:hidden}
.ref-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s}
.ref-card:hover .ref-card-img img{transform:scale(1.04)}
.ref-tag{position:absolute;top:14px;left:14px;background:var(--blue);color:#fff;font-size:0.72rem;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:0.05em;text-transform:uppercase}
.ref-tag-gold{background:var(--gold);color:#0F1E2D}
.ref-card-body{padding:24px}
.ref-meta{display:flex;justify-content:space-between;font-size:0.78rem;color:rgba(255,255,255,0.45);margin-bottom:10px}
.ref-card-body h3{font-size:1.05rem;font-weight:800;color:#fff;margin:0 0 10px}
.ref-card-body p{font-size:0.88rem;color:rgba(255,255,255,0.65);line-height:1.6;margin-bottom:16px}
.ref-specs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.ref-specs span{font-size:0.78rem;color:rgba(255,255,255,0.5)}
.ref-specs strong{color:var(--gold)}
.ref-quote{border-left:3px solid var(--gold);margin:0;padding:10px 14px;font-size:0.82rem;color:rgba(255,255,255,0.6);font-style:italic;border-radius:0 8px 8px 0;background:rgba(243,186,14,0.06)}
.ref-quote cite{display:block;margin-top:4px;font-style:normal;font-weight:700;color:var(--gold);font-size:0.78rem}
.ref-filter-btn{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.65);padding:8px 20px;border-radius:30px;cursor:pointer;font-size:0.85rem;font-weight:600;transition:all 0.2s}
.ref-filter-btn.active,.ref-filter-btn:hover{background:var(--gold);border-color:var(--gold);color:#0F1E2D}
@media(max-width:768px){.ref-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════
   FAQ FILTER BUTTONS (shared)
═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   FAQ ACCORDION
═══════════════════════════════════════════════ */
.faq-category{margin-bottom:48px}
.faq-cat-title{font-size:1.05rem;font-weight:800;color:var(--gold);margin:0 0 16px;letter-spacing:0.02em}
.faq-item{background:transparent!important;border:none!important;border-bottom:1px solid rgba(255,255,255,0.08)!important;border-radius:0!important;overflow:visible!important}
.faq-item.open{border-color:rgba(255,255,255,0.08)!important}
.faq-q{width:100%;background:none!important;border:none!important;text-align:left;padding:20px 0;cursor:pointer;font-size:1rem;font-weight:700;color:#fff!important;display:flex;justify-content:space-between;align-items:center;gap:12px;line-height:1.4;font-family:inherit}
.faq-q:hover{color:var(--gold)!important}
.faq-arrow{width:20px;height:20px;flex-shrink:0;transition:transform 0.3s;color:rgba(255,255,255,0.4);stroke:rgba(255,255,255,0.4)}
.faq-item.open .faq-arrow{transform:rotate(180deg);color:var(--gold);stroke:var(--gold)}
.faq-a{display:none;padding:0 0 20px}
.faq-item.open .faq-a{display:block}
.faq-a p{color:rgba(255,255,255,0.7)!important;font-size:0.92rem;line-height:1.75;margin:0 0 12px}
.faq-a p:last-child{margin-bottom:0}

/* ═══════════════════════════════════════════════
   FÖRDERUNGEN
═══════════════════════════════════════════════ */
.foerd-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:28px;transition:transform 0.2s,border-color 0.2s}
.foerd-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,0.16)}
.foerd-card-highlight{border-color:rgba(243,186,14,0.3);background:rgba(243,186,14,0.06)}
.foerd-icon{font-size:2rem;margin-bottom:10px}
.foerd-label{font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.foerd-label-gold{color:var(--gold)}
.foerd-amount{font-size:2rem;font-weight:900;color:#fff;margin-bottom:10px}
.foerd-card h3{font-size:1rem;font-weight:800;color:#fff;margin:0 0 10px}
.foerd-card p{font-size:0.85rem;color:rgba(255,255,255,0.6);line-height:1.65;margin-bottom:16px}
.foerd-checklist{list-style:none;padding:0;margin:0}
.foerd-checklist li{font-size:0.82rem;color:rgba(255,255,255,0.55);padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.foerd-checklist li:last-child{border:none}
.foerd-step{text-align:center}
.foerd-step-num{width:44px;height:44px;border-radius:50%;background:var(--gold);color:#0F1E2D;font-weight:900;font-size:1.1rem;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.foerd-step h4{color:#fff;font-size:0.95rem;margin:0 0 8px}
.foerd-step p{font-size:0.83rem;color:rgba(255,255,255,0.55);margin:0}

/* ═══════════════════════════════════════════════
   BLOG
═══════════════════════════════════════════════ */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:32px}
.blog-card-featured{grid-column:1/-1}
.blog-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:20px;overflow:hidden;transition:transform 0.25s,box-shadow 0.25s}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.3)}
.blog-card-img-link{display:block}
.blog-card-img{position:relative;height:240px;overflow:hidden}
.blog-card-featured .blog-card-img{height:340px}
.blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s}
.blog-card:hover .blog-card-img img{transform:scale(1.04)}
.blog-tag{position:absolute;top:14px;left:14px;background:var(--blue);color:#fff;font-size:0.72rem;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:0.05em;text-transform:uppercase}
.blog-tag-gold{background:var(--gold);color:#0F1E2D}
.blog-card-body{padding:24px}
.blog-meta{font-size:0.78rem;color:rgba(255,255,255,0.4);margin-bottom:10px;display:flex;gap:8px}
.blog-card-body h2,.blog-card-body h2 a{font-size:1.1rem;font-weight:800;color:#fff;text-decoration:none;line-height:1.35;margin:0 0 10px}
.blog-card-body h2 a:hover{color:var(--gold)}
.blog-card-body p{font-size:0.88rem;color:rgba(255,255,255,0.6);line-height:1.65;margin-bottom:16px}
.blog-read-more{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-size:0.85rem;font-weight:700;text-decoration:none}
.blog-read-more:hover{gap:8px}

/* Blog article */
.blog-article-body{font-size:1rem;line-height:1.8;color:rgba(255,255,255,0.8);margin-bottom:56px}
.blog-lead{font-size:1.15rem;font-weight:500;color:rgba(255,255,255,0.9);border-left:4px solid var(--gold);padding-left:20px;margin-bottom:36px}
.blog-article-body h2{font-size:1.35rem;font-weight:800;color:#fff;margin:40px 0 16px}
.blog-article-body ul,.blog-article-body ol{padding-left:24px;margin-bottom:20px}
.blog-article-body li{margin-bottom:8px;color:rgba(255,255,255,0.75)}
.blog-callout{background:rgba(243,186,14,0.08);border-left:4px solid var(--gold);border-radius:0 12px 12px 0;padding:18px 20px;margin:24px 0;font-size:0.92rem;color:rgba(255,255,255,0.75)}
.blog-table-wrap{overflow-x:auto;margin:24px 0}
.blog-table{width:100%;border-collapse:collapse;font-size:0.88rem}
.blog-table th{background:rgba(59,145,207,0.15);color:#fff;padding:12px 16px;text-align:left;font-weight:700;border-bottom:2px solid rgba(59,145,207,0.3)}
.blog-table td{padding:11px 16px;border-bottom:1px solid rgba(255,255,255,0.06);color:rgba(255,255,255,0.7)}
.blog-table tr:hover td{background:rgba(255,255,255,0.03)}
.blog-author-box{display:flex;gap:20px;align-items:flex-start;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:24px;margin-bottom:40px}
.blog-author-avatar{width:52px;height:52px;border-radius:50%;background:var(--gold);color:#0F1E2D;font-weight:900;font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.blog-author-name{font-weight:800;color:#fff;font-size:0.95rem}
.blog-author-role{font-size:0.8rem;color:rgba(255,255,255,0.45);margin-top:2px}
.blog-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.blog-nav-item{display:flex;flex-direction:column;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:18px;text-decoration:none;transition:border-color 0.2s,transform 0.2s}
.blog-nav-item:hover{border-color:rgba(243,186,14,0.4);transform:translateY(-2px)}
.blog-nav-next{text-align:right}
.blog-nav-label{font-size:0.75rem;color:rgba(255,255,255,0.4);font-weight:600;margin-bottom:6px}
.blog-nav-title{font-size:0.9rem;font-weight:700;color:#fff}
@media(max-width:600px){.blog-nav{grid-template-columns:1fr}.blog-nav-next{text-align:left}}

/* ── footer phone + grb link ── */
.footer-phone{color:rgba(255,255,255,0.5);font-size:0.82rem;text-decoration:none;transition:color 0.2s}
.footer-phone:hover{color:var(--gold)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
a.grb-count{color:rgba(255,255,255,0.65);font-size:0.8rem;font-weight:500;text-decoration:none}
a.grb-count:hover{color:var(--gold);text-decoration:underline}

/* ── DARK SECTION (FAQ, Förderungen, etc.) ── */
.dark-section{background:var(--dark)}
.dark-section .section-label{background:rgba(59,145,207,0.15);color:var(--blue);border:1px solid rgba(59,145,207,0.25)}
.dark-section .section-title,.dark-section h2,.dark-section h3{color:#fff}
.dark-section .section-sub{color:rgba(255,255,255,0.6)}
.dark-section p{color:rgba(255,255,255,0.65)}
.dark-section strong{color:#fff}
.dark-section a:not(.btn-gold):not(.btn-outline):not(.btn-blue){color:var(--gold)}

/* ── MOBILE FIXES – Förderungen / FAQ / dark-section ── */
@media(max-width:768px){
  /* Förderungen cards: single column on mobile */
  .foerd-card{padding:22px 18px}
  .foerd-amount{font-size:1.6rem}
  /* foerd-step grid: 2 columns on mobile */
  .foerd-steps-grid{grid-template-columns:1fr 1fr!important;gap:20px!important}
  /* FAQ mobile tweaks */
  .faq-category{margin-bottom:32px}
  .faq-cat-title{font-size:1rem}
  .faq-q{font-size:0.95rem;padding:16px 0}
  .faq-a p{font-size:0.88rem}
  /* Dark-section padding */
  .dark-section .section-container{padding:0 16px}
  /* Kontakt map label overflow fix */
  .map-label-overlay{font-size:0.72rem!important;padding:7px 14px!important;white-space:normal!important;max-width:90vw;text-align:center}
  /* Testimonials section bg */
  .testimonials{background:var(--gray-light)}
  /* Footer bottom wrap */
  .footer-bottom>div{flex-wrap:wrap;gap:10px}
  /* Buttons full width in hero on mobile */
  .hero-btns{gap:10px}
}
@media(max-width:480px){
  /* Förderungen steps: single column on very small */
  .foerd-steps-grid{grid-template-columns:1fr!important}
  /* FAQ padding */
  .faq-q{font-size:0.9rem}
  /* Dark section inner boxes */
  .dark-section [style*="padding:48px"]{padding:24px 16px!important}
  .dark-section [style*="padding:40px"]{padding:22px 14px!important}
  .dark-section [style*="padding:28px"]{padding:18px 14px!important}
}

/* ── KUNDENERFAHRUNGEN ── */
.testimonials{background:var(--gray-light);padding:72px 0}
.testimonial-stars{color:var(--gold);font-size:1.1rem;margin-bottom:12px;letter-spacing:2px}
.author-avatar{width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.author-name{font-weight:700;color:var(--dark);font-size:0.9rem}
.author-place{font-size:0.78rem;color:var(--text-light)}

/* ── CONTACT SECTION TEXT (light bg) ── */
.contact-grid .section-title{color:var(--dark)}
.contact-grid p{color:var(--text)}

/* ── NAV FLASH PREVENTION ── */
#navbar.transparent .nav-links a{color:rgba(255,255,255,0.85)}
#navbar.solid .nav-links a{color:rgba(255,255,255,0.85)}

/* ── EXIT-INTENT POPUP ── */
#exit-popup-overlay{
  position:fixed;inset:0;background:rgba(5,12,22,0.75);z-index:9998;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;transition:opacity .3s ease;backdrop-filter:blur(4px);
}
#exit-popup-overlay.visible{opacity:1}
#exit-popup{
  background:#fff;border-radius:24px;padding:44px 40px 36px;
  max-width:420px;width:100%;text-align:center;position:relative;
  box-shadow:0 32px 80px rgba(0,0,0,0.35);
  transform:translateY(20px);transition:transform .35s ease;
}
#exit-popup-overlay.visible #exit-popup{transform:none}
#exit-popup-close{
  position:absolute;top:14px;right:16px;background:none;border:none;
  font-size:1.2rem;color:#9aa5b4;cursor:pointer;padding:4px 8px;
  border-radius:6px;transition:color .2s;
}
#exit-popup-close:hover{color:var(--dark)}
.ep-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(243,186,14,0.12);color:#a07800;
  border:1px solid rgba(243,186,14,0.3);
  padding:5px 14px;border-radius:30px;font-size:0.78rem;font-weight:700;
  margin-bottom:16px;
}
#exit-popup h2{font-size:1.7rem;font-weight:900;color:var(--dark);margin-bottom:12px}
#exit-popup p{font-size:0.97rem;color:#5a6a7e;line-height:1.6;margin-bottom:24px}
#exit-popup p strong{color:var(--dark)}
.ep-btn{
  display:block;background:var(--gold);color:var(--dark);
  padding:15px 28px;border-radius:40px;font-weight:800;font-size:1rem;
  text-decoration:none;margin-bottom:18px;transition:all .2s;
}
.ep-btn:hover{background:#c99900;transform:translateY(-2px);box-shadow:0 8px 24px rgba(243,186,14,0.35);color:var(--dark)}
.ep-trust{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  font-size:0.78rem;font-weight:600;color:#6b7a8d;margin-bottom:16px}
#exit-popup-skip{
  background:none;border:none;color:#9aa5b4;font-size:0.8rem;
  cursor:pointer;text-decoration:underline;font-family:inherit;padding:4px;
}
#exit-popup-skip:hover{color:var(--text)}
@media(max-width:480px){
  #exit-popup{padding:32px 22px 28px;border-radius:20px}
  #exit-popup h2{font-size:1.4rem}
}

/* ============================================================
   STICKY MOBILE CTA BAR
   ============================================================ */
#mobile-cta-bar{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:8000;
  background:var(--dark);border-top:1px solid rgba(255,255,255,0.1);
  padding:10px 16px 14px;
  box-shadow:0 -8px 32px rgba(0,0,0,0.35);
  /* safe-area for iPhone home bar */
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
}
#mobile-cta-bar .mcta-inner{
  display:grid;grid-template-columns:1fr 52px 52px;gap:8px;align-items:center;
  max-width:480px;margin:0 auto;
}
#mobile-cta-bar .mcta-main{
  background:var(--gold);color:var(--dark);
  padding:13px 16px;border-radius:14px;
  font-weight:800;font-size:0.9rem;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:7px;
  box-shadow:0 4px 16px rgba(243,186,14,0.35);
  white-space:nowrap;
}
#mobile-cta-bar .mcta-icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;text-decoration:none;flex-shrink:0;
  border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);
  transition:background .2s;
}
#mobile-cta-bar .mcta-icon:hover{background:rgba(255,255,255,0.12)}
@media(max-width:768px){
  #mobile-cta-bar{display:block}
  /* push footer content up so it's not hidden behind bar */
  body{padding-bottom:76px}
}

/* ============================================================
   BRANDS SECTION – polished
   ============================================================ */
.brands-section{
  background:linear-gradient(180deg,#f8fafd 0%,#fff 100%);
  padding:48px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.brands-label{
  text-align:center;font-size:0.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.16em;
  color:#a0aab8;margin-bottom:32px;
}
.brand-card{
  min-width:160px;height:72px;
  background:#fff;border:1.5px solid #eaecf0;
  border-radius:16px;display:flex;align-items:center;justify-content:center;
  padding:0 22px;transition:all .2s;cursor:default;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.brand-card:hover{
  border-color:var(--blue);
  box-shadow:0 4px 20px rgba(59,145,207,0.12);
  transform:translateY(-2px);
}

/* ============================================================
   CALCULATOR – visual upgrade
   ============================================================ */
.calc-section-header{
  text-align:center;margin-bottom:52px;
}
.calc-section-header .section-tag{display:inline-flex;margin-bottom:14px}

/* Savings highlight ring */
.calc-big{
  position:relative;overflow:hidden;
}
.calc-big::before{
  content:'';position:absolute;inset:-40px;
  background:radial-gradient(circle,rgba(243,186,14,0.15),transparent 65%);
  pointer-events:none;
}
.calc-big-num{
  font-size:3rem!important;
  text-shadow:0 0 40px rgba(243,186,14,0.4);
}

/* Range track fill – JS sets inline style, CSS gives fallback only (NO !important) */
.calc-range{
  background:rgba(255,255,255,0.1);
}

/* ROI chart */
.roi-chart{height:8px;background:rgba(255,255,255,0.08);border-radius:99px;overflow:hidden}
.roi-bar{height:100%;background:linear-gradient(90deg,var(--blue),var(--gold));border-radius:99px;transition:width .5s ease}

/* ============================================================
   SECTION DESIGN POLISH
   ============================================================ */

/* Scroll offset so anchors clear fixed nav */
section{scroll-margin-top:80px}

/* Section title blue gradient – only on index hero headings */
.hero-section .section-title .blue,
.calculator-section .section-title .blue {
  background:linear-gradient(90deg,var(--blue),#5bb3e8);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Counter cells – hover lift */
.counter-cell{transition:transform .2s,box-shadow .2s}
.counter-cell:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}

/* About image zoom on hover – overflow:hidden already on parent */
.about-img-wrap img{transition:transform .5s ease}
.about-img-wrap:hover img{transform:scale(1.04)}

/* CTA strip depth */
.cta-strip{
  background:linear-gradient(135deg,#0a1428 0%,#162040 50%,#0a1428 100%);
  position:relative;overflow:hidden;
}
.cta-strip::before{
  content:'';position:absolute;top:-100px;right:-100px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(243,186,14,0.08),transparent 65%);
  pointer-events:none;
}

/* Contact form card */
.contact-form-card{transition:box-shadow .25s}
.contact-form-card:hover{box-shadow:0 20px 60px rgba(0,0,0,0.12)!important}

/* Testimonial card shimmer */
.testimonial-card{position:relative}
.testimonial-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(59,145,207,0.1),transparent 60%);
  pointer-events:none;border-radius:20px;
}

/* Footer gradient */
footer{background:linear-gradient(180deg,#0a1428 0%,#060e1a 100%)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.06)!important}

/* ============================================================
   BRAND CARDS – mobile SVG scaling
   ============================================================ */
.brand-card svg{max-width:100%;height:auto}
@media(max-width:480px){
  .brand-card{min-width:130px;height:62px;padding:0 14px}
  .brand-card svg{transform:scale(0.85);transform-origin:center}
}

/* ============================================================
   MOBILE STICKY BAR – body padding only when bar visible
   ============================================================ */
@media(max-width:768px){
  /* default: add padding so content isn't hidden behind bar */
  body:not(.no-mobile-bar){padding-bottom:76px}
  .cta-strip .section-container > div{flex-direction:column;gap:10px}

  /* hero buttons stack */
  .hero-btns{flex-direction:column;gap:10px}
  .hero-btns a,.hero-btns .btn{width:100%;justify-content:center;text-align:center}

  /* calculator mobile improvements */
  .calc-inner{gap:28px}
  .calc-slider-group{margin-bottom:22px}
  .calc-results{padding:22px 18px}
  .calc-big-num{font-size:2.4rem!important}
  .calc-big{padding:18px}

  /* brands scroll faster on mobile */
  .brands-scroll{animation-duration:20s}
}