/* FILE: assets/css/hero.css */
/* ============================================================
   Energiephase · Hero
   Dark navy hero with headline + trust, and the Solar-Check
   quiz card as the primary conversion element on the right.
   ============================================================ */

.hero{
  position:relative;
  padding-top:clamp(3rem,7vw,5.5rem);
  padding-bottom:var(--ep-section-y);
  overflow:hidden;
}

/* decorative glows */
.hero__glow-1{width:520px;height:520px;top:-140px;right:-120px}
.hero__glow-2{width:460px;height:460px;bottom:-160px;left:-160px}

.hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}

/* ---------- Left column ---------- */
.hero__content{max-width:600px}

.hero__rating{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:var(--ep-space-5);
}
.hero__stars{display:inline-flex;gap:2px;color:var(--ep-yellow)}
.hero__stars svg{width:16px;height:16px}
.hero__rating span{font-size:var(--ep-fs-small);color:var(--ep-text-soft)}

.hero__title{
  font-size:var(--ep-fs-hero);
  margin-bottom:var(--ep-space-5);
  text-wrap:balance;
}
.hero__title .ep-text-gradient{display:inline-block}

.hero__subtitle{
  font-size:var(--ep-fs-lead);
  color:var(--ep-text-soft);
  max-width:52ch;
  margin-bottom:var(--ep-space-6);
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ep-space-4);
  margin-bottom:var(--ep-space-6);
}

/* trust badges row */
.hero__badges{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ep-space-3) var(--ep-space-5);
}
.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:var(--ep-fs-small);
  color:var(--ep-text-muted);
}
.hero__badge svg{width:18px;height:18px;color:var(--ep-yellow);flex:0 0 auto}

/* ---------- Right column: quiz mount wrapper ---------- */
.hero__quiz{
  position:relative;
  z-index:1;
}
/* subtle floating glow behind the (light) quiz card so it pops as the CTA */
.hero__quiz::before{
  content:"";
  position:absolute;
  inset:-14% -8% -18% -8%;
  background:radial-gradient(closest-side,rgba(81,163,86,.30),transparent 78%);
  filter:blur(30px);
  z-index:-1;
  pointer-events:none;
}

/* Ensure the injected quiz card centers nicely within the column */
.hero__quiz .sc-card{margin-inline:auto}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero__inner{grid-template-columns:1fr;gap:clamp(2.2rem,7vw,3.2rem)}
  .hero__content{max-width:none;text-align:center;margin-inline:auto}
  .hero__subtitle{margin-inline:auto}
  .hero__actions,.hero__badges{justify-content:center}
  .hero__rating{justify-content:center}
}

/* ---------- Quiz loading skeleton ----------
   Sits inside the quiz container until quiz.js replaces it via innerHTML.
   Without this the visitor sees a blank white card while the script loads,
   which reads as "broken" rather than "loading". */
.ep-skel{padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:1rem}
.ep-skel__row,.ep-skel__bar,.ep-skel__grid span{
	background:linear-gradient(90deg,#eef1f6 25%,#e2e7ef 37%,#eef1f6 63%);
	background-size:400% 100%;
	border-radius:10px;
	animation:ep-skel-shimmer 1.4s ease-in-out infinite;
}
.ep-skel__row--head{height:22px;width:45%}
.ep-skel__bar{height:8px;width:100%;border-radius:99px}
.ep-skel__row--title{height:26px;width:65%}
.ep-skel__grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.ep-skel__grid span{height:78px;border-radius:14px}
@keyframes ep-skel-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){
	.ep-skel__row,.ep-skel__bar,.ep-skel__grid span{animation:none}
}

/* Small reassurance line under the hero CTAs - keeps "kostenlos" visible
   without making the button label long enough to wrap on phones. */
.hero__cta-note{
	margin:.9rem 0 0;
	color:var(--ep-text-muted);
	font-size:.92rem;
	line-height:1.4;
}
@media (max-width:560px){
	.hero__cta-note{text-align:center}
}

/* ---------- Mobile hero centring ----------
   On phones the hero text is centred, but .hero__rating is a flex row: the
   shield icon stayed pinned to the left of the block while the label wrapped
   and centred beside it, so the icon looked detached. Treating the whole
   line as centred inline content keeps the icon attached to its text. */
@media (max-width:768px){
	.hero__content{text-align:center}
	.hero__rating{
		display:block;
		text-align:center;
		max-width:34ch;
		margin-left:auto;
		margin-right:auto;
	}
	.hero__stars{
		display:inline-flex;
		vertical-align:-3px;
		margin-right:.4rem;
	}
	.hero__badges{justify-content:center}
	.hero__actions{align-items:stretch}
}

/* ============================================================
   Hero v2.9 · premium refinements (green-pure, restrained)
   - Solid green headline highlight (no text-gradient AI tell)
   - "Energy conduit" signature: a green pulse flows up the
     left rail of the hero copy (desktop only, reduced-motion safe)
   - Pulsing ring on the primary Video-Beratung CTA
   ============================================================ */

/* Headline highlight — solid brighter logo green, no gradient */
.hero__hl{
  color:var(--ep-green-hi);
  font-weight:inherit;
}

/* Energy-conduit signature (desktop only) */
@media (min-width:961px){
  .hero__content{position:relative;padding-left:1.75rem}
  .hero__content::before{
    content:"";
    position:absolute;
    left:0;top:.35rem;bottom:.35rem;
    width:2px;border-radius:2px;
    background:linear-gradient(180deg,
      rgba(81,163,86,.05),
      rgba(81,163,86,.28) 20%,
      rgba(81,163,86,.28) 80%,
      rgba(81,163,86,.05));
  }
  .hero__pulse{
    position:absolute;
    left:-4px;top:0;
    width:10px;height:10px;border-radius:50%;
    background:var(--ep-green-hi);
    box-shadow:0 0 14px 2px var(--ep-green-bright);
    opacity:0;
    animation:hero-flow 3.6s var(--ep-ease) infinite;
    pointer-events:none;
  }
}
@keyframes hero-flow{
  0%{top:0;opacity:0}
  10%{opacity:1}
  85%{opacity:1}
  100%{top:100%;opacity:0}
}

/* Pulsing ring on the primary CTA — uses ::after (video btn has none),
   so it never touches the button's own layered box-shadow. */
.ep-btn--pulse::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  box-shadow:0 0 0 0 rgba(81,163,86,.55);
  animation:hero-cta-pulse 2.6s var(--ep-ease) infinite;
  pointer-events:none;
}
@keyframes hero-cta-pulse{
  0%{box-shadow:0 0 0 0 rgba(81,163,86,.5)}
  70%{box-shadow:0 0 0 16px rgba(81,163,86,0)}
  100%{box-shadow:0 0 0 0 rgba(81,163,86,0)}
}

/* Hide the mobile-only pulse dot when the conduit isn't drawn */
@media (max-width:960px){ .hero__pulse{display:none} }

/* Accessibility: honour reduced-motion */
@media (prefers-reduced-motion:reduce){
  .hero__pulse{animation:none;display:none}
  .ep-btn--pulse::after{animation:none}
}