/* =====================================================================
   Wieand Elektrotechnik – Komponenten-CSS
   Nutzt die von theme.json erzeugten CSS-Variablen (--wp--preset--*),
   damit Frontend und Block-Editor dieselben Marken-Tokens verwenden.
   ===================================================================== */

:root{
  --we-ink:var(--wp--preset--color--ink,#0f2e3d);
  --we-ink-soft:var(--wp--preset--color--ink-soft,#415a66);
  --we-blue:var(--wp--preset--color--blue,#0080c0);
  --we-blue-deep:var(--wp--preset--color--blue-deep,#0056a4);
  --we-green:var(--wp--preset--color--green,#80c030);
  --we-green-deep:var(--wp--preset--color--green-deep,#5fa021);
  --we-green-soft:var(--wp--preset--color--green-soft,#eef7df);
  --we-sky:var(--wp--preset--color--sky,#e3f1f8);
  --we-sky-line:var(--wp--preset--color--sky-line,#cfe6f1);
  --we-solar:var(--wp--preset--color--solar,#f4a623);
  --we-solar-soft:var(--wp--preset--color--solar-soft,#fef4e1);
  --we-paper:var(--wp--preset--color--paper,#fbfdfc);
  --we-white:#fff;
  --we-radius:14px;
  --we-shadow:0 1px 2px rgba(15,46,61,.05), 0 12px 32px rgba(15,46,61,.08);
  --we-shadow-sm:0 1px 2px rgba(15,46,61,.05), 0 4px 14px rgba(15,46,61,.06);
}

/* ---------- Basis-Helfer ---------- */
.we-eyebrow{font-family:var(--wp--preset--font-family--montserrat);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--we-blue);display:inline-flex;align-items:center;gap:8px}
.we-eyebrow::before{content:"";width:22px;height:2px;background:var(--we-green);border-radius:2px}
.we-eyebrow.is-centered{justify-content:center}

.we-btn{font-family:var(--wp--preset--font-family--montserrat);font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:11px;cursor:pointer;border:none;text-decoration:none;transition:transform .15s, box-shadow .2s}
.we-btn-primary{background:linear-gradient(135deg,var(--we-blue),var(--we-green-deep));color:#fff;box-shadow:0 6px 18px rgba(0,128,192,.26)}
.we-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,128,192,.34)}
.we-btn-ghost{background:var(--we-white);color:var(--we-blue);border:1px solid var(--we-sky-line);box-shadow:var(--we-shadow-sm)}
.we-btn-ghost:hover{transform:translateY(-2px)}

/* ---------- Header / Footer ---------- */
.we-header{position:sticky;top:0;z-index:50;background:rgba(251,253,252,.85);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--we-sky-line)}
.we-brand-logo img,.we-brand-logo{height:46px;width:auto;display:block}
.we-footer{background:var(--we-ink);color:rgba(255,255,255,.72)}
.we-footer a{color:rgba(255,255,255,.72);text-decoration:none}
.we-footer a:hover{color:var(--we-solar)}
.we-footer .we-brand-logo img{height:40px}
.we-footer-logo{display:inline-block;width:210px;height:56px;background:url('../img/logo-footer.png') left center/contain no-repeat}
.we-footer h4{font-family:var(--wp--preset--font-family--montserrat);color:#fff;font-size:14px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- Hero ---------- */
.we-hero{position:relative;overflow:hidden}
.we-hero::before{content:"";position:absolute;inset:0;z-index:0;background:
  radial-gradient(720px 380px at 82% -8%, var(--we-sky) 0%, transparent 62%),
  radial-gradient(560px 320px at 6% 108%, var(--we-green-soft) 0%, transparent 60%)}
.we-hero > *{position:relative;z-index:1}
.we-hero-accent{color:var(--we-green-deep);position:relative;white-space:nowrap}
.we-hero-accent::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:10px;background:var(--we-green);opacity:.40;border-radius:4px;z-index:-1}

/* ---------- Welle ---------- */
.we-wave{width:100%;height:clamp(50px,8vw,110px);background:url('../img/wave-blue-green.png') center/100% 100% no-repeat;margin:-8px 0}

/* ---------- Karten ---------- */
.we-card{position:relative;background:var(--we-white);border:1px solid var(--we-sky-line);border-radius:var(--we-radius);padding:30px;box-shadow:var(--we-shadow-sm);transition:transform .22s, box-shadow .22s, border-color .22s;overflow:hidden;height:100%}
.we-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--we-accent,var(--we-green));transform:scaleY(0);transform-origin:top;transition:transform .3s}
.we-card:hover{transform:translateY(-5px);box-shadow:var(--we-shadow);border-color:var(--we-sky)}
.we-card:hover::before{transform:scaleY(1)}
.we-card .we-num{font-family:var(--wp--preset--font-family--montserrat);font-weight:600;font-size:13px;color:var(--we-ink-soft);letter-spacing:.1em}
.we-cico{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;margin:14px 0 18px}
.we-cico svg{width:26px;height:26px;color:#fff}
.we-card h3{font-size:21px;margin-bottom:10px}
.we-check{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.we-check li{font-size:14px;display:flex;gap:9px;align-items:flex-start}
.we-check li svg{width:16px;height:16px;color:var(--we-green);flex:none;margin-top:3px}

.we-accent-green{--we-accent:var(--we-green)}
.we-accent-blue{--we-accent:var(--we-blue)}
.we-accent-blue-deep{--we-accent:var(--we-blue-deep)}
.we-bg-green{background:var(--we-green)}
.we-bg-blue{background:var(--we-blue)}
.we-bg-blue-deep{background:var(--we-blue-deep)}

/* ---------- Band (Kennzahlen) ---------- */
.we-band{background:linear-gradient(135deg,var(--we-blue-deep),var(--we-green-deep));color:#fff;border-radius:24px;padding:52px}
.we-band .we-stat .we-v{font-family:var(--wp--preset--font-family--montserrat);font-weight:800;font-size:clamp(30px,4vw,42px)}
.we-band .we-stat .we-v span{color:var(--we-solar)}
.we-band .we-stat .we-k{font-size:14px;color:rgba(255,255,255,.8);margin-top:6px}

/* ---------- Ü20 Repowering ---------- */
.we-repower{background:var(--we-white);border:1px solid var(--we-sky-line);border-radius:24px;padding:48px;box-shadow:var(--we-shadow);position:relative;overflow:hidden}
.we-repower::before{content:"";position:absolute;inset:0;background:radial-gradient(520px 300px at 100% 0%, var(--we-green-soft) 0%, transparent 60%);pointer-events:none}
.we-repower > *{position:relative;z-index:1}

/* ---------- CTA ---------- */
.we-cta{text-align:center;background:var(--we-green-soft);border:1px solid #d8ecc0;border-radius:24px;padding:60px 24px}

/* ---------- Prozess-Schritte ---------- */
.we-steps{counter-reset:s}
.we-step{position:relative;padding-top:30px}
.we-step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--wp--preset--font-family--montserrat);font-weight:700;font-size:15px;color:var(--we-green-deep);position:absolute;top:0;left:0;background:var(--we-green-soft);width:40px;height:40px;border-radius:10px;display:grid;place-items:center}

/* ---------- Scroll-Reveal (optional, progressiv) ---------- */
@media (prefers-reduced-motion:no-preference){
  .we-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
  .we-reveal.is-in{opacity:1;transform:none}
}