/* FILE: assets/css/style.css */
/* ============================================================
   Energiephase · Global Base
   Reset · Typography · Layout · Buttons · Utilities · Motion
   Depends on: variables.css (must be loaded first)
   ============================================================ */

/* ---------- Modern Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px; /* offset for sticky navbar anchor jumps */
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  font-family:var(--ep-font-body);
  font-size:var(--ep-fs-body);
  line-height:var(--ep-lh-body);
  color:var(--ep-text);
  background:var(--ep-navy-900);
  background-image:var(--ep-bg-gradient);
  background-attachment:fixed;
  background-repeat:no-repeat;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg,video,canvas{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ep-yellow);outline-offset:3px;border-radius:4px}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--ep-font-display);
  font-weight:800;
  line-height:var(--ep-lh-tight);
  letter-spacing:var(--ep-tracking-tight);
  color:var(--ep-text);
}
h2{font-size:var(--ep-fs-h2)}
h3{font-size:var(--ep-fs-h3);font-weight:700}
p{color:var(--ep-text-soft)}
strong{color:var(--ep-text);font-weight:600}
::selection{background:var(--ep-green-hi);color:#fff}

/* Gradient text helper (yellow shimmer) */
.ep-text-gradient{
  color:var(--ep-green-hi);   /* solid brand green instead of a gradient */
}

/* ---------- Layout Primitives ---------- */
.ep-container{
  width:100%;
  max-width:var(--ep-container);
  margin-inline:auto;
  padding-inline:var(--ep-container-pad);
}
.ep-container--wide{max-width:var(--ep-container-wide)}

.ep-section{
  position:relative;
  padding-block:var(--ep-section-y);
}

/* Section heading block (reusable) */
.ep-section__head{
  max-width:680px;
  margin-inline:auto;
  margin-bottom:var(--ep-space-8);
  text-align:center;
}
.ep-section__head--left{margin-inline:0;text-align:left}

.ep-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family:var(--ep-font-display);
  font-weight:700;
  font-size:var(--ep-fs-small);
  letter-spacing:var(--ep-tracking-wide);
  text-transform:uppercase;
  color:var(--ep-yellow);
  padding:.45rem 1rem;
  border-radius:var(--ep-radius-pill);
  background:var(--ep-glass);
  border:1px solid var(--ep-glass-border);
  margin-bottom:var(--ep-space-4);
}
.ep-eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--ep-yellow);
  box-shadow:0 0 12px 1px var(--ep-yellow);
}

.ep-section__title{margin-bottom:var(--ep-space-4)}
.ep-section__subtitle{
  font-size:var(--ep-fs-lead);
  color:var(--ep-text-muted);
  max-width:60ch;
  margin-inline:auto;
}
.ep-section__head--left .ep-section__subtitle{margin-inline:0}

/* ---------- Glass surface (reusable) ---------- */
.ep-glass{
  background:var(--ep-glass);
  background-image:var(--ep-glass-gradient);
  border:1px solid var(--ep-glass-border);
  border-radius:var(--ep-radius-lg);
  box-shadow:var(--ep-shadow),var(--ep-shadow-inset);
}

/* ---------- Buttons ---------- */
.ep-btn{
  --_pad-y:.95rem;
  --_pad-x:1.7rem;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  font-family:var(--ep-font-display);
  font-weight:700;
  font-size:1rem;
  line-height:1;
  padding:var(--_pad-y) var(--_pad-x);
  border-radius:var(--ep-radius-pill);
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:transform var(--ep-dur-fast) var(--ep-ease),
             box-shadow var(--ep-dur) var(--ep-ease),
             background var(--ep-dur) var(--ep-ease),
             border-color var(--ep-dur) var(--ep-ease),
             color var(--ep-dur) var(--ep-ease);
  will-change:transform;
}
.ep-btn:active{transform:translateY(1px) scale(.99)}

/* Primary — yellow */
.ep-btn--primary{
  background:linear-gradient(100deg, var(--ep-green-hi), var(--ep-green) 60%, var(--ep-green-deep));
  color:#fff;
  box-shadow:0 16px 44px -18px rgba(42,135,74,.42);
}
.ep-btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 58px -20px rgba(42,135,74,.55);
}

/* Accent CTA — the main "Video-Beratung buchen" action.
   No foreign colour: it stands out from the structural green buttons through a
   BRIGHTER green fill, a soft outer glow, a subtle light ring, and a slightly
   stronger lift on hover. Contrast + depth, not a different hue. */
.ep-btn--video{
  background:var(--ep-cta-gradient);
  color:#fff;
  font-weight:800;
  box-shadow:
    0 0 0 1px rgba(95,191,110,.55),
    0 22px 55px -16px rgba(81,163,86,.62),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.ep-btn--video:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(95,191,110,.75),
    0 30px 70px -18px rgba(81,163,86,.75),
    inset 0 1px 0 rgba(255,255,255,.3);
}

/* Secondary — glass */
.ep-btn--ghost{
  background:var(--ep-glass);
  border-color:var(--ep-glass-border);
  color:var(--ep-text);
}
.ep-btn--ghost:hover{
  border-color:var(--ep-glass-border-hi);
  background:var(--ep-glass-strong);
  transform:translateY(-2px);
}

/* Sizes */
.ep-btn--lg{--_pad-y:1.15rem;--_pad-x:2.2rem;font-size:1.08rem}
.ep-btn--sm{--_pad-y:.65rem;--_pad-x:1.2rem;font-size:.9rem}
.ep-btn--block{display:flex;width:100%}

/* Shine sweep on primary hover */
.ep-btn--primary::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform var(--ep-dur-slow) var(--ep-ease);
  pointer-events:none;
}
.ep-btn--primary:hover::after{transform:translateX(120%)}

/* ---------- Chips / small pills ---------- */
.ep-chip{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-size:var(--ep-fs-small);
  font-weight:500;
  color:var(--ep-text-soft);
  padding:.5rem .9rem;
  border-radius:var(--ep-radius-pill);
  background:var(--ep-glass);
  border:1px solid var(--ep-glass-border);
}

/* ---------- Utilities ---------- */
.ep-visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}
.ep-no-scroll{overflow:hidden}
.ep-text-center{text-align:center}
.ep-mt-auto{margin-top:auto}

/* Decorative background glow blob (reusable in sections) */
.ep-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.5;
  pointer-events:none;
  z-index:0;
}
.ep-glow--yellow{background:radial-gradient(circle,rgba(81,163,86,.5),transparent 65%)}
.ep-glow--blue{background:radial-gradient(circle,rgba(28,86,168,.55),transparent 65%)}

/* ---------- Scroll reveal (progressive enhancement via app.js) ----------
   Flash-free pattern: elements are VISIBLE by default (best for SEO, no-JS,
   and no flicker). app.js "arms" only below-the-fold elements (adds .is-armed
   to hide them off-screen), then reveals them on scroll. Above-the-fold
   content is never hidden, so there is no visible->hidden flash. */
.ep-reveal{
  transition:opacity var(--ep-dur-slow) var(--ep-ease-out),
             transform var(--ep-dur-slow) var(--ep-ease-out);
  will-change:opacity,transform;
}
.ep-reveal.is-armed{opacity:0;transform:translateY(28px)}
.ep-reveal.is-visible{opacity:1;transform:none}
/* Staggering helper */
.ep-reveal--d1{transition-delay:.08s}
.ep-reveal--d2{transition-delay:.16s}
.ep-reveal--d3{transition-delay:.24s}
.ep-reveal--d4{transition-delay:.32s}

/* Reduced motion: never hide, never animate */
@media (prefers-reduced-motion:reduce){
  .ep-reveal.is-armed{opacity:1;transform:none}
}

/* Explicit focus rings for custom-styled controls (a11y) */
.faq-item__summary:focus-visible,
.calc__seg-btn:focus-visible,
.calc__range:focus-visible,
.ep-nav__burger:focus-visible{
  outline:2px solid var(--ep-yellow);
  outline-offset:3px;
  border-radius:8px;
}

/* ---------- Keyframes (shared) ---------- */
@keyframes ep-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
@keyframes ep-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.92)}
}
@keyframes ep-spin-slow{to{transform:rotate(360deg)}}
@keyframes ep-fade-up{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

/* ---------- SVG sprite + icon helper ---------- */
/* The sprite lives once in the DOM (.ep-sprite). Icons are referenced via
   <svg class="ep-icon"><use href="#i-name"/></svg>. Each <symbol> carries its
   own fill/stroke using currentColor, so this helper only handles sizing —
   colour is inherited from the parent via `color`. Section CSS may override
   width/height on `svg` for specific contexts. */
.ep-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ep-icon{width:1em;height:1em;flex:0 0 auto}

/* ============================================================
   Content pages (blog, single, archive, 404, comments)
   Reuses the dark-glass design system for editorial content.
   ============================================================ */
.ep-prose{max-width:100%;color:var(--ep-text-soft);font-size:1.05rem;line-height:var(--ep-lh-body)}
.ep-prose > *+*{margin-top:1.1em}
.ep-prose h2,.ep-prose h3,.ep-prose h4{color:var(--ep-text);margin-top:1.6em}
.ep-prose a{color:var(--ep-yellow);text-decoration:underline;text-underline-offset:3px}
.ep-prose img{border-radius:var(--ep-radius)}
.ep-prose blockquote{
	margin:1.5em 0;padding:1rem 1.4rem;border-left:3px solid var(--ep-yellow);
	background:var(--ep-glass);border-radius:0 var(--ep-radius) var(--ep-radius) 0;
}
.ep-prose code{background:rgba(255,255,255,.08);padding:.15em .4em;border-radius:6px;font-size:.9em}

.ep-article{max-width:820px;margin-inline:auto}
.ep-article__media{margin:0 0 2rem;border-radius:var(--ep-radius-lg);overflow:hidden;box-shadow:var(--ep-shadow)}

.ep-archive-grid{
	display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem);
}
.ep-card{
	display:flex;flex-direction:column;overflow:hidden;
	border-radius:var(--ep-radius-lg);background:var(--ep-glass);
	background-image:var(--ep-glass-gradient);border:1px solid var(--ep-glass-border);
	box-shadow:var(--ep-shadow-sm);transition:transform var(--ep-dur) var(--ep-ease),border-color var(--ep-dur) var(--ep-ease);
}
.ep-card:hover{transform:translateY(-5px);border-color:var(--ep-glass-border-hi)}
.ep-card__media img{width:100%;height:200px;object-fit:cover}
.ep-card__body{padding:clamp(1.2rem,2vw,1.6rem);display:flex;flex-direction:column;gap:.6rem}
.ep-card__date{font-size:.8rem;color:var(--ep-text-muted)}
.ep-card__title{font-size:1.2rem}
.ep-card__title a{color:var(--ep-text)}
.ep-card__title a:hover{color:var(--ep-yellow)}
.ep-card__excerpt{color:var(--ep-text-muted);font-size:.95rem}
.ep-card .service-card__link{margin-top:auto}

.ep-pagination{display:flex;gap:.5rem;justify-content:center;margin-top:var(--ep-space-7);flex-wrap:wrap}
.ep-pagination .page-numbers{
	display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
	padding:0 .8rem;border-radius:var(--ep-radius-sm);background:var(--ep-glass);
	border:1px solid var(--ep-glass-border);color:var(--ep-text-soft);font-family:var(--ep-font-display);font-weight:600;
	transition:background var(--ep-dur) var(--ep-ease),color var(--ep-dur) var(--ep-ease);
}
.ep-pagination .page-numbers.current,
.ep-pagination .page-numbers:hover{background:var(--ep-primary-gradient);color:#fff}

.ep-comments{max-width:820px;margin:var(--ep-space-8) auto 0}
.ep-comments__title{font-size:1.4rem;margin-bottom:1.2rem}
.ep-comments__list{list-style:none;display:flex;flex-direction:column;gap:1rem}
.ep-comments .comment-body{padding:1.2rem;border-radius:var(--ep-radius);background:var(--ep-glass);border:1px solid var(--ep-glass-border)}
.ep-comments input:not([type=submit]),.ep-comments textarea{
	width:100%;padding:.85rem 1rem;margin-top:.4rem;border-radius:var(--ep-radius-sm);
	background:rgba(255,255,255,.06);border:1px solid var(--ep-glass-border);color:var(--ep-text);
}
.ep-comments .comment-form-comment,.ep-comments .comment-form-author,.ep-comments .comment-form-email,.ep-comments .comment-form-url{margin-bottom:1rem}

@media (max-width:960px){.ep-archive-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ep-archive-grid{grid-template-columns:1fr}}

/* Skip link — visually hidden until keyboard focus (a11y) */
.ep-skip-link{
	position:absolute;left:-9999px;top:0;z-index:var(--ep-z-modal);
	padding:.8rem 1.2rem;border-radius:0 0 var(--ep-radius-sm) 0;
	background:var(--ep-yellow);color:var(--ep-text-ink);
	font-family:var(--ep-font-display);font-weight:700;text-decoration:none;
}
.ep-skip-link:focus{left:0;outline:2px solid var(--ep-navy-900);outline-offset:2px}

/* ---------- Mobile overflow guard ----------
   Long button labels (e.g. "Kostenlose Video-Beratung buchen") have no spaces
   short enough to break on narrow phones, so the button stayed wider than the
   viewport and dragged the whole page sideways - cutting the headline and body
   text off at the right edge. Allowing the label to wrap, and clamping the
   document width, keeps everything inside the screen. */
html,body{max-width:100%;overflow-x:hidden}

@media (max-width:560px){
	.ep-btn{
		--_pad-x:1.15rem;
		max-width:100%;
		white-space:normal;        /* let long labels wrap */
		line-height:1.25;          /* readable once wrapped */
		text-align:center;
		hyphens:manual;           /* never break words like "bu-chen" */
		overflow-wrap:normal;
	}
	.ep-btn--lg{font-size:.98rem}
	.hero__actions{width:100%}
	.hero__actions .ep-btn{width:100%}

	/* Nothing inside the hero may exceed the viewport. */
	.hero,.hero__inner,.hero__content{max-width:100%;min-width:0}
	.hero__title,.hero__subtitle,.hero__rating{overflow-wrap:break-word;word-break:normal}
}

/* ---------- Solid card polish ----------
   With surfaces now solid, a clean green edge + slight lift on hover reads as a
   deliberate interactive state rather than generic frosted glass. */
.ep-card,.ep-glass-card{transition:border-color var(--ep-dur) var(--ep-ease),transform var(--ep-dur) var(--ep-ease),background var(--ep-dur) var(--ep-ease)}
.ep-card:hover,.ep-glass-card:hover{border-color:var(--ep-glass-border-hi);background:var(--ep-glass-strong);transform:translateY(-2px)}