/* Hellwerk theme styles.
   Colors and fonts come from theme.json presets (editable in the Site Editor → Styles);
   the short aliases below keep the component CSS readable. */

/* ==========================================================
   Tokens → theme.json presets
   ========================================================== */
:root {
  --font-display: var(--wp--preset--font-family--display);
  --font-body: var(--wp--preset--font-family--body);

  --ink: var(--wp--preset--color--ink);
  --ink-soft: var(--wp--preset--color--ink-soft);
  --paper: var(--wp--preset--color--paper);
  --paper-2: var(--wp--preset--color--paper-2);
  --moon: var(--wp--preset--color--moon);
  --moon-soft: var(--wp--preset--color--moon-soft);
  --sun: var(--wp--preset--color--sun);
  --sun-hot: var(--wp--preset--color--sun-hot);
  --ember: var(--wp--preset--color--ember);
  --night: var(--wp--preset--color--night);

  --radius: 18px;
  --radius-sm: 12px;
  --g: clamp(20px, 5vw, 72px);
  --sec: clamp(72px, 10vw, 150px);
  --max: 1240px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--night);
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.02; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--sun); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 16px; }

/* ==========================================================
   Fixed photo scene + light
   ========================================================== */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--night); }
.scene, .scene__push { position: absolute; inset: 0; }
.scene { transform-origin: 72% 60%; will-change: transform; }
.scene__img, .scene__fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene__img { object-fit: cover; object-position: 100% 50%; will-change: opacity; }
/* .001 instead of 0: the GPU uploads these layers at load, not on the first scroll (avoids a 1 s hitch) */
.scene__img--noon, .scene__img--dusk { opacity: .001; }
/* Own layer: the glint/specular repaint must not re-raster the photos */
.scene__fx { will-change: transform; }

/* Readability: darkens the headline side, stronger at dawn and dusk */
/* One layer for shade + film grain (fewer full-screen layers = more FPS on weak GPUs) */
.shade {
  position: absolute; inset: 0; will-change: opacity;
  background:
    var(--grain, none) 0 0 / 160px 160px,
    linear-gradient(90deg, rgba(10, 8, 30, .66) 0%, rgba(10, 8, 30, .34) 34%, rgba(10, 8, 30, 0) 58%),
    linear-gradient(0deg, rgba(10, 8, 30, .35) 0%, rgba(10, 8, 30, 0) 30%);
}

/* Bloom + rays sit on the photo's sun (positioned in JS) */
.bloom, .rays { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform, opacity; }
.bloom::before, .bloom::after, .rays::before { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.bloom::before {
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(255, 214, 160, .55) 0%, rgba(255, 170, 110, .22) 14%, rgba(255, 140, 90, .07) 34%, rgba(255, 130, 90, 0) 60%);
}
.bloom::after {
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255, 252, 238, .9) 0%, rgba(255, 236, 196, .4) 30%, rgba(255, 220, 170, 0) 70%);
  animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: .85; } }
/* Volumetric rays: few, soft, slightly swaying — not a hard fan */
/* Ray texture is baked once in JS (no per-frame mask = cheap rotation on weak GPUs) */
.rays::before {
  width: 1600px; height: 1600px; border-radius: 0;
  background: var(--rays, none) center / 100% 100% no-repeat;
  animation: sway 16s ease-in-out infinite alternate;
}
@keyframes sway { from { transform: translate(-50%, -50%) rotate(-4deg); } to { transform: translate(-50%, -50%) rotate(5deg); } }

.dust { position: absolute; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; will-change: transform; }
/* Lite mode (weak GPU detected): keep the photo day cycle, drop the costly extras */
.lite .dust, .lite .flare__ghost { display: none; }
.lite .rays::before, .lite .bloom::after { animation: none; }
.lite .shade { --grain: linear-gradient(transparent, transparent); }

/* Lens flare: anamorphic streak through the sun + faint ghosts on the optical axis */
.flare { position: absolute; inset: 0; }
.is-off { visibility: hidden; }
.flare__streak {
  position: absolute; left: 0; top: 0; width: 44vw; height: 3px; margin: -1.5px 0 0 -22vw;
  background: linear-gradient(90deg, rgba(120, 160, 255, 0), rgba(150, 180, 255, .16) 28%, rgba(255, 236, 210, .7) 50%, rgba(150, 180, 255, .16) 72%, rgba(120, 160, 255, 0));
  border-radius: 50%; will-change: transform;
}
.flare__ghost { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.flare__ghost--a { width: 90px; height: 90px; margin: -45px; background: radial-gradient(circle, rgba(255, 200, 140, .14), rgba(255, 200, 140, .04) 60%, transparent 70%); }
.flare__ghost--b { width: 180px; height: 180px; margin: -90px; background: radial-gradient(circle, transparent 58%, rgba(120, 255, 200, .07) 63%, rgba(255, 160, 120, .08) 68%, transparent 72%); }
.flare__ghost--c { width: 34px; height: 34px; margin: -17px; background: radial-gradient(circle, rgba(170, 190, 255, .28), transparent 70%); }
.flare__ghost--d { width: 300px; height: 300px; margin: -150px; background: radial-gradient(circle, rgba(140, 120, 255, .06), transparent 66%); }


/* ==========================================================
   Nav
   ========================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px var(--g);
  color: var(--moon);
  transition: background-color .4s ease, color .4s ease, padding .4s ease, box-shadow .4s ease;
}
.nav--solid { background: rgba(255, 255, 255, .95); color: var(--ink); padding-block: 12px; box-shadow: 0 1px 0 rgba(20, 18, 58, .08); }
.nav__logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 21px; text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.nav__logo svg { width: 30px; height: 30px; fill: var(--sun); stroke: var(--sun); stroke-width: 2.4; stroke-linecap: round; }
.nav__links { display: none; gap: 34px; font-size: 16px; }
.nav__links a { text-decoration: none; opacity: .88; position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--sun); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { transform: scaleX(1); }
@media (min-width: 900px) { .nav__links { display: flex; } }

/* ==========================================================
   Buttons
   ========================================================== */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 14px 26px; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 17px; line-height: 1.2; text-decoration: none; text-align: center;
  border: 0; cursor: pointer; white-space: nowrap;
  transition: box-shadow .3s ease, background-color .3s ease, color .3s ease;
}
.btn--sm { min-height: 44px; padding: 10px 20px; font-size: 15px; }
.btn--sun {
  background: linear-gradient(180deg, var(--sun-hot), var(--sun));
  color: #1b1440;
  box-shadow: 0 10px 30px -8px rgba(255, 150, 40, .65);
}
.btn--sun::before {
  content: ""; position: absolute; inset: -6px; border-radius: inherit; z-index: -1;
  border: 2px solid rgba(255, 200, 100, .55); opacity: 0;
  animation: pulse 3.2s var(--ease-out) infinite;
}
.btn--sun:hover { box-shadow: 0 0 0 6px rgba(255, 185, 56, .18), 0 14px 40px -8px rgba(255, 150, 40, .85); }
@keyframes pulse { 0% { opacity: .9; transform: scale(.94); } 70%, 100% { opacity: 0; transform: scale(1.14); } }
.btn--line { color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
.btn--line:hover { background: rgba(255, 255, 255, .12); }

/* ==========================================================
   Hero
   ========================================================== */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding: 120px var(--g) 12vh;
  color: var(--moon);
}
.hero__content { position: relative; z-index: 2; max-width: 760px; }
.hero__region { font-size: 16px; color: var(--moon-soft); margin-bottom: 22px; }
.hero__title {
  font-size: clamp(3rem, 7vw, 6.6rem);
  font-weight: 800; font-stretch: 90%; letter-spacing: -.025em; line-height: .96;
  max-width: 12ch;
}
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__title .c {
  display: inline-block;
  background: linear-gradient(100deg, var(--moon) 0 42%, #ffe2a6 48%, #fff 50%, #ffe2a6 52%, var(--moon) 58% 100%);
  background-size: 300% 100%; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes char-rise { from { transform: translateY(115%); } }
@keyframes intro-up { from { opacity: 0; transform: translateY(26px); } }
@keyframes intro-down { from { opacity: 0; transform: translateY(-24px); } }

/* Hero intro, pure CSS (class set by hellwerk.js; nothing animates without JS or with reduced motion) */
.is-intro .hero__title .c {
  animation: char-rise 1.15s var(--ease-out) both, sweep 2.2s var(--ease-out) both;
  animation-delay: calc(.55s + var(--ci) * 22ms), calc(1.4s + var(--ci) * 18ms);
}
.is-intro .hero__region, .is-intro .hero__lead, .is-intro .hero__ctas, .is-intro .hero__trust { animation: intro-up 1.1s var(--ease-out) both; }
.is-intro .hero__region { animation-delay: 1.15s; }
.is-intro .hero__lead { animation-delay: 1.25s; }
.is-intro .hero__ctas { animation-delay: 1.35s; }
.is-intro .hero__trust { animation-delay: 1.45s; }
.is-intro .nav { animation: intro-down 1s var(--ease-out) .3s both; }
.hero__lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--moon-soft); max-width: 44ch; margin-top: 28px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__trust { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; color: var(--moon-soft); }
.stars-rating { color: var(--sun); letter-spacing: 2px; }

/* ==========================================================
   Shared section bits
   ========================================================== */
:where(.landing, .editor-styles-wrapper .is-root-container) > section { position: relative; padding: var(--sec) var(--g); }
.sheet {
  max-width: calc(var(--max) + 120px); margin: 0 auto;
  padding: clamp(36px, 5vw, 72px) clamp(20px, 4vw, 60px);
  background: var(--paper); border-radius: 30px;
  box-shadow: 0 50px 120px -60px rgba(10, 8, 40, .7);
}
.sheet--narrow { max-width: 1000px; }
.head { max-width: 760px; margin: 0 auto clamp(36px, 4.5vw, 64px); text-align: center; display: grid; gap: 18px; justify-items: center; }
.head h2 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); font-weight: 800; font-stretch: 84%; letter-spacing: -.02em; }
.head p { font-size: 19px; color: var(--ink-soft); max-width: 50ch; }

/* Statement band */
.statement {
  padding: clamp(110px, 16vh, 200px) var(--g) !important;
  background: linear-gradient(180deg, rgba(15, 13, 36, 0) 0%, rgba(15, 13, 36, .9) 22%, rgba(15, 13, 36, .9) 78%, rgba(15, 13, 36, 0) 100%);
  color: var(--moon);
}
.statement__text {
  max-width: 1100px; margin: 0 auto;
  font-family: var(--font-display); font-weight: 700; font-stretch: 85%;
  font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.12; letter-spacing: -.02em;
  text-align: center;
}
.statement__text .sw { opacity: .16; }

/* Benefits */
.benefits { padding-top: clamp(40px, 6vw, 80px) !important; }
.stats { max-width: var(--max); margin: 0 auto; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .stats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  display: grid; gap: 8px; align-content: start;
  padding: 28px 26px 30px; border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 24px 60px -34px rgba(10, 8, 40, .6);
}
.stat__value { margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: clamp(34px, 3.6vw, 48px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat__label { margin: 0; color: var(--ink-soft); font-size: 16px; }

/* Service cards with cursor spotlight + light border */
.cards { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(4, 1fr); } }
.card, .case {
  --mx: 50%; --my: -20%;
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 190, 90, .22), transparent 45%) padding-box,
    linear-gradient(var(--paper-2), var(--paper-2)) padding-box,
    radial-gradient(260px circle at var(--mx) var(--my), var(--sun), #e7e5ef 60%) border-box;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.card { padding: 30px 28px 32px; display: grid; gap: 12px; align-content: start; }
.card:hover, .case:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(255, 140, 40, .55); }
.card__ico { width: 52px; height: 52px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.card__ico path, .card__ico rect { stroke-dasharray: 160; stroke-dashoffset: 0; }
/* Optional photo on top of each card (removed by JS if the file does not exist) */
.card .card__photo { width: calc(100% + 56px); max-width: none; margin: -30px -28px 8px; overflow: hidden; }
.card__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform .9s var(--ease-out); }
.card--pv { --focus: 50% 40%; } .card--speicher { --focus: 50% 42%; } .card--wallbox { --focus: 62% 62%; } .card--wartung { --focus: 45% 58%; }
.card { overflow: hidden; }
.card .card__photo + .card__ico { width: 44px; height: 44px; margin: -40px 0 0; padding: 9px; border-radius: 50%; background: var(--sun); position: relative; }
.card:hover .card__photo img { transform: scale(1.04); }
.card h3 { font-size: 25px; font-weight: 750; font-stretch: 85%; letter-spacing: -.01em; }
.card p { color: var(--ink-soft); font-size: 16px; }

/* Close-up photo with light */
.closeup__frame {
  --mx: 70%; --my: 40%;
  position: relative; max-width: var(--max); margin: 0 auto; overflow: hidden;
  border-radius: 30px; aspect-ratio: 16 / 8; background: var(--night);
  box-shadow: 0 50px 120px -60px rgba(10, 8, 40, .8);
}
.closeup__img { position: absolute; inset: 0; margin: 0; }
.closeup__frame img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--ease-out); }
.closeup__frame:hover img { transform: scale(1.03); }
.closeup__light { position: absolute; inset: 0; mix-blend-mode: screen; background: radial-gradient(440px circle at var(--mx) var(--my), rgba(255, 214, 150, .32), transparent 55%); }
.closeup__glint {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255, 246, 225, .38), transparent);
  transform: translateX(-120%) skewX(-18deg); mix-blend-mode: soft-light;
}
.closeup__caption {
  position: absolute; left: clamp(18px, 3vw, 40px); bottom: clamp(18px, 3vw, 36px); max-width: 34ch;
  padding: 14px 18px; border-radius: 14px; background: rgba(15, 13, 36, .78); color: var(--moon); font-size: 16px;
}

/* Noon */
.noon__card {
  max-width: 1080px; margin: 0 auto; padding: clamp(26px, 4vw, 56px);
  border-radius: 30px; background: var(--paper);
  box-shadow: 0 50px 120px -60px rgba(10, 8, 40, .7);
}
.noon__head { display: grid; gap: 14px; margin-bottom: 26px; }
.noon__head h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 800; font-stretch: 82%; letter-spacing: -.02em; max-width: 18ch; }
.noon__head p { color: var(--ink-soft); max-width: 58ch; }
.curve { width: 100%; height: auto; overflow: visible; }
.curve__grid line { stroke: rgba(20, 18, 58, .12); }
.curve__ticks text { font: 12px var(--font-body); fill: var(--ink-soft); }
.curve__area { fill: rgba(255, 185, 56, .28); }
.curve__prod { fill: none; stroke: var(--sun); stroke-width: 4; stroke-linecap: round; }
.curve__use { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: .6; }
.curve__sun { fill: var(--sun-hot); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 10px rgba(255, 180, 60, .9)); }
.curve__now { font: 700 15px var(--font-body); fill: var(--ink); }
.noon__legend { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 14px; color: var(--ink-soft); margin-top: 10px; }
.lg::before { content: ""; display: inline-block; width: 24px; margin-right: 8px; vertical-align: middle; border-top: 4px solid var(--sun); }
.lg--use::before { border-top: 2px dashed var(--ink); }

.process__photo { position: relative; margin: 0 0 clamp(48px, 6vw, 80px); border-radius: 22px; overflow: hidden; }
.process__photo img { width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; }
.process__photo figcaption { position: absolute; left: 18px; bottom: 18px; padding: 10px 14px; border-radius: 12px; background: rgba(15, 13, 36, .78); color: var(--moon); font-size: 15px; }
.process__photo .wp-element-caption { margin: 0; }

/* Process: vertical sun path */
.steps { position: relative; max-width: 820px; margin: 0 auto; padding: 0; display: grid; gap: clamp(40px, 6vw, 72px); }
.steps::before, .steps__fill { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; }
.steps::before { background: rgba(20, 18, 58, .12); }
.steps__fill { background: linear-gradient(180deg, var(--sun-hot), var(--ember)); transform-origin: top; box-shadow: 0 0 18px rgba(255, 150, 50, .8); }
.step { position: relative; padding-left: 64px; display: grid; gap: 8px; }
.step::before { content: ""; position: absolute; left: 4px; top: 6px; width: 25px; height: 25px; border-radius: 50%; background: #fff; border: 3px solid rgba(20, 18, 58, .18); transition: background-color .5s, border-color .5s, box-shadow .5s; }
.step.is-on::before { background: var(--sun); border-color: #fff; box-shadow: 0 0 0 6px rgba(255, 185, 56, .25), 0 0 26px rgba(255, 170, 50, .9); }
.step > * { margin: 0; }
.step__n { font-size: 15px; font-weight: 800; color: #b23a0e; }
.step h3 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; font-stretch: 82%; letter-spacing: -.02em; }
.step p { color: var(--ink-soft); max-width: 48ch; }
@media (min-width: 900px) {
  .steps::before, .steps__fill { left: 50%; margin-left: -1.5px; }
  .step { width: 50%; padding-left: 0; padding-right: 64px; text-align: right; justify-items: end; }
  .step:nth-child(even) { margin-left: 50%; padding-left: 64px; padding-right: 0; text-align: left; justify-items: start; }
  .step::before { left: auto; right: -12.5px; }
  .step:nth-child(even)::before { left: -12.5px; right: auto; }
}

/* References */
.refs__grid { display: grid; gap: 20px; }
@media (min-width: 960px) { .refs__grid { grid-template-columns: 1.35fr 1fr 1fr; align-items: stretch; } }
.quote {
  margin: 0; padding: clamp(26px, 3.4vw, 42px); border-radius: var(--radius);
  background: #1b1544; color: var(--moon);
  display: grid; gap: 26px; align-content: start;
}
.quote > * { margin: 0; }
.quote__text { margin: 0; font-family: var(--font-display); font-weight: 600; font-stretch: 88%; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.22; letter-spacing: -.01em; }
.bills { display: grid; gap: 10px; }
.bill { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 14px; font-size: 15px; color: var(--moon-soft); }
.bill strong { font-family: var(--font-display); font-size: 22px; color: var(--moon); font-variant-numeric: tabular-nums; }
.bill__bar { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.bill__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: #8c86b8; transform-origin: left; }
.bill--after .bill__bar i { background: linear-gradient(90deg, var(--sun-hot), var(--sun)); transform: scaleX(.35); box-shadow: 0 0 14px rgba(255, 185, 56, .8); }
.quote__person { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--moon-soft); }
.quote__person strong { color: var(--moon); }
.quote__person p { margin: 0; }
.avatar { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--sun); color: #1b1440; position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person .avatar { width: 64px; height: 64px; margin: 0; background: none; }
.person .avatar img { border-radius: 50%; }
.person p { margin: 0; }
.case { margin: 0; display: grid; align-content: start; }
.case__img { margin: 0; overflow: hidden; }
.case__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s var(--ease-out); }
.case:hover .case__img img { transform: scale(1.05); }
@media (min-width: 960px) {
  .case { grid-template-rows: 1fr auto; }
  .case__img, .case__img img { height: 100%; aspect-ratio: auto; min-height: 240px; }
}
.case__caption { display: grid; gap: 2px; padding: 18px 22px 22px; color: var(--ink-soft); font-size: 15px; background: var(--paper-2); position: relative; }
.case__caption strong { color: var(--ink); font-size: 18px; }
.case__caption p { margin: 0; }
.case figcaption em { font-style: normal; opacity: .7; }

/* Contact at dusk */
.contact { color: var(--moon); padding-bottom: clamp(100px, 16vh, 180px) !important; }
.contact__grid { max-width: var(--max); margin: 0 auto; display: grid; gap: 40px; position: relative; z-index: 2; }
@media (min-width: 980px) { .contact__grid { grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; } }
.contact__intro { display: grid; gap: 22px; align-content: start; text-shadow: 0 2px 24px rgba(10, 8, 30, .5); }
.contact__intro h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 800; font-stretch: 80%; letter-spacing: -.02em; }
.contact__intro p { font-size: 19px; color: var(--moon-soft); max-width: 42ch; }
.person { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 1.45; margin-top: 6px; }
.person a { color: var(--sun-hot); font-weight: 700; text-decoration: none; }
.form {
  display: grid; gap: 16px; grid-template-columns: 1fr;
  padding: clamp(24px, 3.4vw, 40px); border-radius: 26px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 40px 100px -40px rgba(10, 6, 40, .9), 0 0 0 1px rgba(255, 200, 120, .3);
}
@media (min-width: 560px) { .form { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: 1 / -1; } }
.field { display: grid; gap: 7px; font-size: 15px; font-weight: 700; }
.field em { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: inherit; font-weight: 400; font-size: 16px; color: var(--ink);
  background: var(--paper-2); border: 1.5px solid #d9d7e8; border-radius: var(--radius-sm);
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sun); background: #fff; box-shadow: 0 0 0 4px rgba(255, 185, 56, .25); }
.field textarea { resize: vertical; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-soft); }
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--sun); }
.form .btn { white-space: normal; }

/* Footer */
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding: 26px var(--g) 30px; background: var(--night); color: #b9add0; font-size: 14px; }
.footer__links { display: flex; gap: 22px; }
.footer a { text-decoration: none; }
.footer a:hover { color: #fff; }

/* HUD */
.hud {
  position: fixed; left: 20px; bottom: 20px; z-index: 40;
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center;
  padding: 12px 18px 12px 14px; border-radius: 16px;
  background: rgba(14, 10, 42, .74); color: #fff4e4;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 200, 120, .18);
  font-size: 13px;
  transition: opacity .5s ease, transform .5s var(--ease-out);
}
.hud.is-hidden { opacity: 0; transform: translateY(16px); }
.hud svg { grid-row: span 2; width: 26px; height: 26px; fill: var(--sun); stroke: var(--sun); stroke-width: 1.8; stroke-linecap: round; }
.hud__time { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hud__kwh { color: #d8cbe6; font-variant-numeric: tabular-nums; }
.hud__bar { grid-column: 1 / -1; height: 3px; margin-top: 8px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.hud__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sun-hot), var(--ember)); transform-origin: left; transform: scaleX(0); }

.mobile-cta { display: none; }
@media (max-width: 760px) {
  .hud { display: none; }
  .mobile-cta .wp-block-button, .mobile-cta .wp-block-button__link { width: 100%; }
  .mobile-cta { display: flex; margin: 0; position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 45; transform: translateY(140%); transition: transform .5s var(--ease-out); }
  .mobile-cta.is-shown { transform: none; }
  .hero { align-items: flex-end; padding-top: 110px; padding-bottom: 56px; }
  .shade { background: linear-gradient(0deg, rgba(10, 8, 30, .82) 0%, rgba(10, 8, 30, .5) 45%, rgba(10, 8, 30, .1) 75%), linear-gradient(180deg, rgba(10, 8, 30, .45), transparent 22%); }
  .nav { padding-block: 14px; }
  .nav__logo { font-size: 18px; }
  .nav__logo svg { width: 26px; height: 26px; }
  .nav .btn--sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .btn { white-space: normal; }
  .closeup__frame { aspect-ratio: 4 / 5; }
}

/* Reduced motion: calm, final states */
@media (prefers-reduced-motion: reduce) {
  .rays::before, .bloom::after, .btn--sun::before { animation: none; }
  .is-intro .hero__title .c, .is-intro .hero__region, .is-intro .hero__lead, .is-intro .hero__ctas, .is-intro .hero__trust, .is-intro .nav { animation: none; }
}

/* ==========================================================
   WordPress block markup adaptations
   ========================================================== */
.wp-site-blocks > * { margin-block: 0; }
.landing > *, .site-main > * { margin-block: 0; }
.wp-block-hellwerk-day-scene { margin: 0; }

/* Header (template part "header") */
.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .nav { top: 46px; } }
.nav { gap: 20px; }
.nav__logo { margin: 0; line-height: 1; }
.nav__logo a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; }
.nav__logo a::before {
  content: ""; width: 30px; height: 30px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23ffb938' stroke='%23ffb938' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3Cpath d='M16 3v4M16 25v4M3 16h4M25 16h4M6.8 6.8l2.8 2.8M22.4 22.4l2.8 2.8M6.8 25.2l2.8-2.8M22.4 9.6l2.8-2.8'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.nav__links { display: none; gap: 34px; font-size: 16px; }
.nav__links .wp-block-navigation-item__content { text-decoration: none; opacity: .88; position: relative; color: inherit; }
.nav__links .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--sun); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.nav__links .wp-block-navigation-item__content:hover { opacity: 1; }
.nav__links .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }
@media (min-width: 900px) { .nav__links { display: flex; } }
.nav__cta { margin: 0; }
.nav__cta .wp-block-button__link { min-height: 44px; padding: 10px 20px; font-size: 15px; }
.site-header.is-solid .nav { background: rgba(255, 255, 255, .95); color: var(--ink); padding-block: 12px; box-shadow: 0 1px 0 rgba(20, 18, 58, .08); }

/* Buttons: core/button block styles "Sonne" + "Kontur" */
.wp-block-button__link {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; text-decoration: none; text-align: center; white-space: nowrap;
  transition: box-shadow .3s ease, background-color .3s ease, color .3s ease;
}
.is-style-sun .wp-block-button__link {
  background: linear-gradient(180deg, var(--sun-hot), var(--sun));
  color: #1b1440;
  box-shadow: 0 10px 30px -8px rgba(255, 150, 40, .65);
}
.is-style-sun .wp-block-button__link::before {
  content: ""; position: absolute; inset: -6px; border-radius: inherit; z-index: -1;
  border: 2px solid rgba(255, 200, 100, .55); opacity: 0;
  animation: pulse 3.2s var(--ease-out) infinite;
}
.is-style-sun .wp-block-button__link:hover { box-shadow: 0 0 0 6px rgba(255, 185, 56, .18), 0 14px 40px -8px rgba(255, 150, 40, .85); }
.is-style-line .wp-block-button__link { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
.is-style-line .wp-block-button__link:hover { background: rgba(255, 255, 255, .12); }
.hero__ctas { gap: 14px; margin-top: 34px; }
.hero__trust li { margin: 0; }
.hero__trust mark { letter-spacing: 2px; }

/* Plain pages (Impressum, Datenschutz …) */
.site-main.plain { background: var(--paper); color: var(--ink); min-height: 70vh; padding: 140px var(--g) 100px; }
.site-main.plain > * + *, .site-main.plain .wp-block-post-content > * + * { margin-block-start: 1.2rem; }
/* Landing spacing comes from the component CSS, not from the global block gap (set to 0 in theme.json) */
.head > *, .noon__head > *, .contact__intro > *, .card > :not(.card__photo) { margin: 0; }
.site-footer { margin: 0; }
.footer p { margin: 0; }
.footer__links a + a { margin-left: 22px; }

/* Editor canvas: keep fixed/animated elements in the flow so they stay editable */
.editor-styles-wrapper .nav { position: relative; }
.editor-styles-wrapper .hero { min-height: 70vh; background: linear-gradient(90deg, rgba(10, 8, 30, .9), rgba(10, 8, 30, .5)), var(--night); }
.editor-styles-wrapper .is-style-sun .wp-block-button__link::before { animation: none; }
@media (max-width: 760px) {
  .wp-block-button__link { white-space: normal; }
  .nav__logo a { font-size: 18px; }
  .nav__logo a::before { width: 26px; height: 26px; }
  .nav__cta .wp-block-button__link { min-height: 40px; padding: 8px 14px; font-size: 14px; white-space: nowrap; }
}

/* Step label beats '.step p'; dots sit above the glowing path */
.step .step__n { color: #b23a0e; }
.step::before { z-index: 1; }
/* Page editor: full-width sections like on the frontend */
.editor-styles-wrapper .is-root-container > .wp-block-group { max-width: none; margin-left: 0; margin-right: 0; }
/* Editor: animated blocks get a small label (set in the "Animation" panel) */
.editor-styles-wrapper .has-hellwerk-anim { position: relative; outline: 1px dashed rgba(255, 185, 56, .6); outline-offset: 4px; }
/* ::before, not ::after: WordPress draws the selection outline with ::after on block wrappers */
.editor-styles-wrapper .has-hellwerk-anim::before {
  content: "Animation: " attr(data-anim-label);
  position: absolute; inset: 8px 8px auto auto; width: auto; height: auto; z-index: 20; pointer-events: none;
  font: 700 11px/1 var(--font-body); padding: 5px 9px; border-radius: 99px;
  background: var(--sun); color: #1b1440; box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
/* ==========================================================
   Contact Form 7 inside .form (template: tools/setup-contact-form.php)
   ========================================================== */
.form .hidden-fields-container { display: none; }
.form .wpcf7-form-control-wrap { display: block; }
.form .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.form .wpcf7-acceptance label { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; font-weight: 400; color: var(--ink-soft); cursor: pointer; }
.form .wpcf7-acceptance input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--sun); }
.form .wpcf7-acceptance a { color: var(--ink); }
.form__submit { position: relative; }
.form__submit .wpcf7-submit { width: 100%; font: inherit; font-weight: 700; font-size: 17px; }
.form__submit .wpcf7-submit:disabled { opacity: .55; cursor: not-allowed; }
.form__submit .wpcf7-spinner { position: absolute; right: 18px; top: 50%; margin: -12px 0 0; background-color: #1b1440; }
.form .wpcf7-not-valid { border-color: #d92d20 !important; background: #fff6f5 !important; }
.form .wpcf7-not-valid-tip { display: block; margin-top: 6px; color: #b42318; font-size: 13px; font-weight: 600; }
.form .wpcf7-response-output { grid-column: 1 / -1; margin: 0 !important; padding: 12px 14px !important; border-radius: 12px; border-width: 1.5px !important; font-size: 15px; }
.form.invalid .wpcf7-response-output, .form.unaccepted .wpcf7-response-output { border-color: #f5a524 !important; background: #fff8eb; color: var(--ink); }
.form.sent .wpcf7-response-output { border-color: #2e9e5b !important; background: #edfaf2; color: #155c34; }
/* Plain pages: Danke, Impressum, Datenschutz */
.site-main.plain h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-stretch: 84%; margin-bottom: .4em; }
.site-main.plain h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); font-stretch: 88%; margin-top: 2.4rem; }
.site-main.plain .lead { font-size: clamp(18px, 1.8vw, 21px); color: var(--ink-soft); }
.site-main.plain .notice { padding: 14px 18px; border-radius: 12px; background: #fff8eb; border: 1.5px solid #f5d38a; font-size: 15px; }
.site-main.plain .meta { color: var(--ink-soft); font-size: 14px; margin-top: 2.4rem; }
.site-main.plain a { color: #b23a0e; }
.site-main.plain .wp-block-button__link { color: #1b1440; }
.next-steps { padding-left: 1.4em; }
.next-steps li + li { margin-top: .5em; }
.next-steps li::marker { font-weight: 800; color: #b23a0e; }
/* Phase 6: ray texture lives in a canvas (see makeRays) */
.rays::before { display: none; }
.rays__tex { position: absolute; left: 50%; top: 50%; width: 1600px; height: 1600px; transform: translate(-50%, -50%); animation: sway 16s ease-in-out infinite alternate; }
.lite .rays__tex { animation: none; }
@media (prefers-reduced-motion: reduce) { .rays__tex { animation: none; } }

/* Hero: content anchored at the top, so a late font swap cannot shift it (CLS) */
.hero { align-items: flex-start; padding-top: clamp(130px, 19vh, 210px); }
@media (max-width: 760px) { .hero { align-items: flex-start; padding-top: max(110px, 30vh); } }
/* Phase 6: slide-in animations must not widen the page before they play */
.wp-site-blocks { overflow-x: clip; }
/* Touch targets ≥ 24px (WCAG 2.2, 2.5.8) */
.footer__links a { display: inline-block; padding-block: 6px; }
.form .wpcf7-acceptance input, .check input { width: 24px; height: 24px; }