/* FILE: assets/css/renewable-sections.css
   New sections (Energielösungen, Trust, Wärmepumpe) — built entirely from the
   existing design tokens so they read as part of the same system. No new
   colours, fonts, radii or motion values are introduced. */

/* ============================================================
   UNSERE ENERGIELÖSUNGEN
   ============================================================ */
.solutions{position:relative}
.solutions__glow{top:10%;right:-8%}
.solutions__grid{
	display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.5vw,2rem);
	max-width:1000px;margin-inline:auto;
}
.solution-card{
	position:relative;display:flex;flex-direction:column;gap:var(--ep-space-3);
	padding:clamp(1.6rem,3vw,2.4rem);
	border-radius:var(--ep-radius-lg);
	background:var(--ep-glass);background-image:var(--ep-glass-gradient);
	border:1px solid var(--ep-glass-border);
	backdrop-filter:blur(var(--ep-blur));-webkit-backdrop-filter:blur(var(--ep-blur));
	box-shadow:var(--ep-shadow-sm);overflow:hidden;
	transition:transform var(--ep-dur) var(--ep-ease),border-color var(--ep-dur) var(--ep-ease),box-shadow var(--ep-dur) var(--ep-ease);
}
.solution-card::after{
	content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
	background:linear-gradient(140deg,rgba(81,163,86,.5),transparent 40%);
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--ep-dur) var(--ep-ease);pointer-events:none;
}
.solution-card:hover{transform:translateY(-6px);border-color:var(--ep-glass-border-hi);box-shadow:var(--ep-shadow-lg)}
.solution-card:hover::after{opacity:1}
.solution-card__icon{
	width:64px;height:64px;display:grid;place-items:center;border-radius:var(--ep-radius);
	background:var(--ep-primary-gradient);color:#fff;box-shadow:var(--ep-shadow-glow);
}
.solution-card__icon svg{width:34px;height:34px}
.solution-card__title{font-size:var(--ep-fs-h3);color:var(--ep-text)}
.solution-card__text{color:var(--ep-text-muted);line-height:var(--ep-lh-body)}
.solution-card__list{list-style:none;display:grid;gap:.6rem;margin:.2rem 0 var(--ep-space-2)}
.solution-card__list li{display:flex;align-items:center;gap:.6rem;color:var(--ep-text-soft);font-size:.95rem}
.solution-card__list svg{width:18px;height:18px;color:var(--ep-yellow);flex:0 0 auto}
.solution-card .ep-btn{margin-top:auto}

/* ============================================================
   TRUST SECTION
   ============================================================ */
.trust{position:relative}
.trust__glow{bottom:0;left:-10%}
.trust__grid{
	display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem);
}
.trust-card{
	display:flex;align-items:flex-start;gap:var(--ep-space-3);
	padding:clamp(1.3rem,2.4vw,1.8rem);border-radius:var(--ep-radius-lg);
	background:var(--ep-glass);background-image:var(--ep-glass-gradient);
	border:1px solid var(--ep-glass-border);
	backdrop-filter:blur(var(--ep-blur));-webkit-backdrop-filter:blur(var(--ep-blur));
	box-shadow:var(--ep-shadow-sm);
	transition:transform var(--ep-dur) var(--ep-ease),border-color var(--ep-dur) var(--ep-ease);
}
.trust-card:hover{transform:translateY(-4px);border-color:var(--ep-glass-border-hi)}
.trust-card__icon{
	flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;border-radius:var(--ep-radius-sm);
	background:rgba(81,163,86,.12);color:var(--ep-yellow);border:1px solid var(--ep-glass-border);
}
.trust-card__icon svg{width:26px;height:26px}
.trust-card__title{font-size:1.08rem;color:var(--ep-text);margin-bottom:.25rem;font-family:var(--ep-font-display)}
.trust-card__text{color:var(--ep-text-muted);font-size:.92rem;line-height:var(--ep-lh-body)}

/* ============================================================
   WÄRMEPUMPE SECTION
   ============================================================ */
.heatpump{position:relative}
.heatpump__glow{top:6%;left:-6%}
.heatpump__intro{
	display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;
}
.heatpump__copy .ep-eyebrow{margin-bottom:var(--ep-space-3)}
.heatpump__lead{color:var(--ep-text-soft);font-size:var(--ep-fs-lead);line-height:var(--ep-lh-body);margin:var(--ep-space-3) 0 var(--ep-space-4)}
.heatpump__benefits{list-style:none;display:grid;gap:.8rem;margin-bottom:var(--ep-space-5)}
.heatpump__benefits li{display:flex;align-items:center;gap:.75rem;color:var(--ep-text-soft);font-size:1.05rem}
.heatpump__check{
	flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
	background:rgba(31,169,113,.15);color:#1FA971;
}
.heatpump__check svg{width:16px;height:16px}
.heatpump__illu{margin-top:var(--ep-space-6);max-width:400px;filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
.heatpump__quiz{position:relative}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
	.solutions__grid{grid-template-columns:1fr;max-width:520px}
	.trust__grid{grid-template-columns:1fr 1fr}
	.heatpump__intro{grid-template-columns:1fr;gap:2.4rem}
	.heatpump__illu{display:none}          /* keep it clean on mobile; quiz is the focus */
	.heatpump__quiz{order:-1}              /* quiz first on mobile for conversion */
}
@media (max-width:560px){
	.trust__grid{grid-template-columns:1fr}
	.solution-card__icon{width:56px;height:56px}
}

/* ============================================================
   MOBILE STICKY CTA (front page)
   ============================================================ */
.ep-sticky-cta{display:none}
@media (max-width:900px){
	.ep-sticky-cta{
		display:grid;grid-template-columns:1fr auto auto;gap:.5rem;align-items:center;
		position:fixed;left:0;right:0;bottom:0;z-index:var(--ep-z-nav);
		padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
		background:rgba(6,15,30,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
		border-top:1px solid var(--ep-glass-border);
	}
	.ep-sticky-cta__btn{
		display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
		min-height:52px;border-radius:var(--ep-radius-pill);font-family:var(--ep-font-display);
		font-weight:800;font-size:.98rem;text-decoration:none;padding:0 .9rem;
	}
	.ep-sticky-cta__btn svg{width:22px;height:22px;flex:0 0 auto}
	.ep-sticky-cta__btn--solar{background:var(--ep-primary-gradient);color:#fff;box-shadow:var(--ep-shadow-glow)}
	.ep-sticky-cta__btn--heat{background:var(--ep-primary-gradient);color:#fff;box-shadow:var(--ep-shadow-glow)}
	.ep-sticky-cta__mini{
		display:inline-flex;align-items:center;justify-content:center;
		width:52px;height:52px;border-radius:50%;flex:0 0 auto;text-decoration:none;
	}
	.ep-sticky-cta__mini svg{width:26px;height:26px}
	.ep-sticky-cta__mini--wa{background:var(--ep-glass-strong);border:1px solid rgba(81,163,86,.55);color:var(--ep-green-hi)}
	.ep-sticky-cta__mini--video{background:var(--ep-glass-strong);border:1px solid rgba(81,163,86,.55);color:var(--ep-green-hi)}
	.ep-sticky-cta__mini:focus-visible{outline:2px solid var(--ep-text);outline-offset:3px}
	/* keep the WhatsApp float above the sticky bar */
	.ep-whatsapp{bottom:calc(72px + env(safe-area-inset-bottom))}
	body{scroll-padding-bottom:80px}
}
@media (prefers-reduced-motion:reduce){.ep-sticky-cta{backdrop-filter:none}}

/* ---------- Video consultation process ("So einfach geht's") ---------- */
.vidproc{padding:clamp(3.5rem,8vw,6rem) 0;position:relative}
.vidproc__head{text-align:center;max-width:720px;margin:0 auto clamp(2rem,5vw,3.25rem)}
.vidproc__eyebrow{
	display:inline-block;margin-bottom:.9rem;padding:.45rem 1rem;
	border-radius:var(--ep-radius-pill);
	background:rgba(81,163,86,.12);border:1px solid rgba(81,163,86,.35);
	color:var(--ep-yellow,#51A356);
	font-family:var(--ep-font-display);font-weight:700;font-size:.85rem;letter-spacing:.02em;
}
.vidproc__title{font-family:var(--ep-font-display);font-weight:800;font-size:clamp(1.9rem,4.5vw,2.9rem);line-height:1.1;margin:0 0 .9rem}
.vidproc__lead{color:var(--ep-text-muted);font-size:clamp(1rem,2vw,1.12rem);line-height:1.6;margin:0}

.vidproc__steps{
	list-style:none;margin:0;padding:0;
	display:grid;gap:clamp(1rem,2.5vw,1.5rem);
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.vidproc__step{
	position:relative;padding:clamp(1.5rem,3vw,2rem);
	border-radius:var(--ep-radius-lg,20px);
	background:var(--ep-glass);border:1px solid var(--ep-glass-border);
	backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.vidproc__num{
	position:absolute;top:-14px;left:clamp(1.5rem,3vw,2rem);
	width:34px;height:34px;border-radius:50%;
	display:inline-flex;align-items:center;justify-content:center;
	background:var(--ep-primary-gradient);color:#fff;
	font-family:var(--ep-font-display);font-weight:800;font-size:1rem;
	box-shadow:var(--ep-shadow-glow);
}
.vidproc__icon{width:34px;height:34px;color:var(--ep-yellow,#51A356);margin:.6rem 0 1rem;display:block}
.vidproc__step-title{font-family:var(--ep-font-display);font-weight:700;font-size:1.2rem;margin:0 0 .6rem}
.vidproc__step-text{color:var(--ep-text-muted);font-size:.98rem;line-height:1.6;margin:0}

.vidproc__cta{text-align:center;margin-top:clamp(2rem,5vw,3rem)}
.vidproc__note{margin:.9rem 0 0;color:var(--ep-text-muted);font-size:.92rem}

/* ============================================================
   Section rhythm — varied treatments so the page reads as a
   designed flow rather than one repeated card template.
   All within the same brand palette; structure varies, colour doesn't.
   ============================================================ */

/* Alternating bands: even sections sit on a slightly raised panel with a
   hairline top/bottom rule, creating visual breathing as you scroll. */
.services,.timeline,.why{
	background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
	border-top:1px solid rgba(255,255,255,.05);
	border-bottom:1px solid rgba(255,255,255,.05);
}

/* SOLUTIONS — keep bordered cards but give them a green top-accent bar,
   so this section reads as the primary "choose your path" moment. */
.solutions__grid .solution-card{
	position:relative;overflow:hidden;
}
.solutions__grid .solution-card::before{
	content:"";position:absolute;inset:0 0 auto 0;height:3px;
	background:var(--ep-cta-gradient);
	opacity:.9;
}

/* SERVICES — flatten to borderless tiles separated only by thin dividers:
   a lighter, list-like treatment that contrasts with the bordered cards
   elsewhere. */
.services__grid .service-card{
	background:transparent;
	border:none;
	border-radius:0;
	border-bottom:1px solid rgba(255,255,255,.08);
	padding-left:0;padding-right:0;
}
.services__grid .service-card:hover{
	background:rgba(255,255,255,.02);
	transform:none;
	border-radius:12px;
	padding-left:1rem;padding-right:1rem;
}

/* TRUST -> bold GREEN FEATURE BAND. This is the reassurance moment (funding,
   vetted partners, no obligation), so it breaks the dark rhythm entirely with
   a full green background - the one section that stops the scroll. */
.trust{
	background:var(--ep-green-gradient);
	border-top:none;border-bottom:none;
}
.trust .ep-section__title,.trust .ep-eyebrow,.trust .ep-section__subtitle{color:#fff}
.trust .ep-eyebrow{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:#fff}
.trust__grid .trust-card{
	background:rgba(255,255,255,.10);
	border:1px solid rgba(255,255,255,.18);
}
.trust__grid .trust-card:hover{
	background:rgba(255,255,255,.16);
	border-color:rgba(255,255,255,.35);
	transform:translateY(-2px);
}
.trust__grid .trust-card__title{color:#fff}
.trust__grid .trust-card__text{color:rgba(255,255,255,.85)}
.trust__grid .trust-card__icon{
	background:rgba(255,255,255,.18);
	border:1px solid rgba(255,255,255,.3);
	color:#fff;
}

/* WHY-US — solid raised cards (the heaviest treatment) so the closing
   argument feels substantial. */
.why .stat,.why__grid > *{
	background:var(--ep-glass-strong);
	border:1px solid var(--ep-glass-border);
}