/* ==========================================================================
   Power2Energy · FG Wilson — Stylesheet J-021 (Neuaufbau, v96)
   Aufbau: 1 Tokens · 2 Flächen · 3 Basis · 4 Typografie · 5 Bausteine
           6 Kopf · 7 Hero · 8 Sektionen (ein Block je Komponente) · 9 Fuß
           10 Bewegung · 11 Druck
   Regeln: Komponenten lesen nur Flächen-Variablen (--bg, --fg, ...), damit
   dieselbe Komponente auf hell und dunkel ohne Überschreibungen funktioniert.
   Fläche wählen: data-surface="stage" (dunkel) | "light" (weiß) | "air" (hellblau)
   ========================================================================== */

/* 1 · Tokens ------------------------------------------------------------- */
:root{
  --navy:#00153B; --blue:#003087; --blue-2:#0042BA; --accent:#7FA0DC;
  --air:#F3F6FB; --white:#FFFFFF; --line:#DDE3EE; --field:#C9D3E6;
  --ink:#0A1630; --ink-2:#3D4A66; --mist:#C3CFE6;
  --hair-dk:rgba(127,160,220,.25);
  --font:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1200px; --gutter:32px; --sec-y:112px; --hdr-h:76px; --util-h:36px;
  --r-btn:4px; --r-card:6px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 1px 2px rgba(0,21,59,.06),0 12px 32px -12px rgba(0,21,59,.18);
  --shadow-lg:0 2px 4px rgba(0,21,59,.08),0 28px 64px -24px rgba(0,21,59,.35);
  --stage-bg:radial-gradient(ellipse 80% 70% at 85% 0%,var(--blue) 0%,rgba(0,48,135,0) 70%),var(--navy);
}
@media (max-width:767px){:root{--gutter:16px;--sec-y:64px;--hdr-h:64px}}

/* 2 · Flächen ------------------------------------------------------------ */
:root,[data-surface="light"]{
  --bg:var(--white); --fg:var(--ink); --fg-h:var(--navy); --fg-2:var(--ink-2);
  --ln:var(--line); --kick:var(--blue-2); --link:var(--blue-2);
  --card:var(--air); --card-ln:#DCE4F2; --tint:var(--air); /* Karten auf Weiß hellblau, auf Hellblau weiß (Christoph 30.09., Punkt 22) */
  --btn-bg:var(--blue-2); --btn-fg:#fff; --btn-bg-h:var(--blue); /* Primär überall #0042BA, weiß (Christoph 30.09., Punkt 26) */
  --btn2-fg:var(--blue); --btn2-ln:var(--blue); --btn2-bg-h:var(--air);
  --focus:var(--blue-2); --mark:var(--blue-2);
}
[data-surface="air"]{
  --bg:var(--air); --card:var(--white); --tint:var(--white); --ln:#D3DBE8; --card-ln:var(--line);
}
[data-surface="stage"]{
  --bg:var(--navy); --fg:#FFFFFF; --fg-h:#FFFFFF; --fg-2:var(--mist);
  --ln:var(--hair-dk); --kick:var(--accent); --link:#FFFFFF;
  --card:rgba(255,255,255,.04); --card-ln:var(--hair-dk); --tint:rgba(255,255,255,.06);
  --btn-bg:var(--blue-2); --btn-fg:#fff; --btn-bg-h:var(--blue);
  --btn2-fg:#FFFFFF; --btn2-ln:rgba(255,255,255,.55); --btn2-bg-h:rgba(255,255,255,.08);
  --focus:var(--accent); --mark:var(--accent);
}
[data-surface]{background:var(--bg);color:var(--fg)}
[data-surface="stage"]{background:var(--stage-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

/* 3 · Basis -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{margin:0;overflow-x:clip;font-family:var(--font);font-size:17px;line-height:1.6;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--link)}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.skip-link{position:fixed;top:8px;left:16px;z-index:2000;padding:12px 18px;background:#fff;color:var(--ink);border:2px solid var(--blue);transform:translateY(-150%);font-weight:700}
.skip-link:focus{transform:none}
main:focus{outline:none}
.fallback-nav{display:flex;flex-wrap:wrap;gap:12px 20px;padding:16px;background:#fff;color:var(--ink);border-bottom:1px solid var(--ln)}
.navigation-ready .fallback-nav{display:none}
html:not(.navigation-ready) .navtog{display:none}
.calc-special{padding:28px;color:var(--fg-h)}
.calc-special h3,.calc-special p{margin-bottom:20px}
#rechner-form{display:none}
.calculator-ready #rechner-form{display:block}
.calculator-ready .calc-fallback{display:none}
/* [hidden] muss gegen display-Regeln der Komponenten gewinnen (Formular-Hinweise, Rechner-Ergebnis) */
[hidden]{display:none!important /* hidden-Attribut muss jede display-Regel schlagen */}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.wrap > *,.wrap [class*="grid"] > *{min-width:0}
.center{text-align:center}
svg path[d^="M5 12h14"]{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}

/* 4 · Typografie --------------------------------------------------------- */
h1,h2,h3,h4{color:var(--fg-h);font-weight:700;margin:0;overflow-wrap:break-word;hyphens:manual;text-wrap:balance} /* keine automatische Trennung in Überschriften, nur an Wortgrenzen (Christoph 30.09.) */
/* Überschriften ohne Silbentrennung (Christoph 30.09.: keine Trennstriche in H1/H2) */
h1{font-size:clamp(34px,2.4vw + 20px,56px);line-height:1.05;letter-spacing:-.02em}
h2{font-size:clamp(28px,1.2vw + 20px,40px);line-height:1.1;letter-spacing:-.015em}
h3{font-size:clamp(19px,.3vw + 17px,22px);line-height:1.25}
h4{font-size:14px;line-height:1.3}
.kicker,.def__kick{display:inline-flex;align-items:center;font-size:12px;line-height:1.2;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kick);margin-bottom:16px}
.kicker::before,.def__kick::before{content:attr(data-n);font-family:inherit;letter-spacing:.04em;padding-right:36px;margin-right:12px;background:linear-gradient(currentColor,currentColor) right center/24px 1px no-repeat}
.kicker[data-n=""]::before,.kicker:not([data-n])::before{padding-right:24px;margin-right:12px}
.sub,.src-note,.hours,.calc__trust,.rc__disc{font-size:14px;color:var(--fg-2)}

/* 5 · Bausteine ---------------------------------------------------------- */
/* Buttons: Primär = Flächenfarbe voll, Sekundär = Kontur. Gleiche Höhe überall. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 24px;border:1.5px solid transparent;border-radius:var(--r-btn);font-size:16px;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;text-align:center;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.btn svg{width:18px;height:18px;flex:none;fill:currentColor;transition:transform .2s var(--ease)}
.btn:hover svg path[d^="M5 12h14"]{transform:translateX(3px)}
.btn--primary,.btn--ondk{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.btn--primary:hover,.btn--ondk:hover{background:var(--btn-bg-h);border-color:var(--btn-bg-h)}
.btn--ghostdk,.btn--ghostlt{background:transparent;color:var(--btn2-fg);border-color:var(--btn2-ln)}
.btn--ghostdk:hover,.btn--ghostlt:hover{background:var(--btn2-bg-h);border-color:var(--btn2-fg)}
.btn--sm{min-height:44px;padding:10px 18px;font-size:15px}
.btn--block{display:flex;width:100%}
.btn__short{display:none}
/* Textlink: zweite Aktion, wenn ein zweiter Button zu laut wäre */
.tlink{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--link);text-decoration:none;border-bottom:1px solid currentColor;padding:2px 0}
.tlink svg{width:16px;height:16px;flex:none}
.tlink:hover{border-bottom-width:2px;padding-bottom:1px}
.tlink:hover svg path[d^="M5 12h14"]{transform:translateX(3px)}
.hero__cta,.bess__cta,.prod__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:32px}
.nea .hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:24px}
.hero__cta .btn,.bess__cta .btn,.prod__cta .btn{min-width:240px}
@media (max-width:599px){.hero__cta .btn,.bess__cta .btn,.prod__cta .btn{width:100%;min-width:0}}

/* Status-LED · einzige Ausnahme von „kein Fremdgrün“ (Christoph 30.09.): --led steht nur für
   „Anlage läuft“ bzw. „erreichbar“. Keine grünen Buttons, Häkchen, Linien oder Flächen. */
:root{--led:#2BB673;--led-glow:rgba(43,182,115,.45)}
.lamp,.hero__badge-dot{display:inline-block;width:9px;height:9px;flex:none;border-radius:50%;background:var(--led);box-shadow:0 0 0 2px rgba(43,182,115,.18),0 0 10px 1px var(--led-glow)}
@media (prefers-reduced-motion:no-preference){.lamp,.hero__badge-dot,.qcall__call::after,.mcta__lbl::after{animation:led 2.4s ease-in-out infinite}}
@keyframes led{0%,100%{opacity:1;box-shadow:0 0 0 2px rgba(43,182,115,.18),0 0 10px 1px var(--led-glow)}50%{opacity:.7;box-shadow:0 0 0 2px rgba(43,182,115,.08),0 0 4px 0 rgba(43,182,115,.2)}}
/* Szenario-Schema: Netzausfall = LED aus (grau), Aggregat übernimmt = wieder an. Kein Rot. */
@media (prefers-reduced-motion:no-preference){.schema.in .schema__switch .lamp{animation:led-sc 8s var(--ease) infinite}}
@keyframes led-sc{0%,20%{background:var(--led);box-shadow:0 0 10px 1px var(--led-glow)}24%,40%{background:#8A94A8;box-shadow:none}44%,100%{background:var(--led);box-shadow:0 0 10px 1px var(--led-glow)}}

/* Kartenrahmen */
.card,.tier,.ind,.lp-case,.lp-tier,.bess__card,.prow,.svc{min-width:0}

/* Abschnittskopf */
.sec{padding:var(--sec-y) 0;position:relative}
.sec__head{max-width:760px;margin-bottom:48px}
.sec__head h2{margin-bottom:16px}
.sec__head p{font-size:18px;line-height:1.55;color:var(--fg-2);margin:0;max-width:72ch;text-wrap:pretty} /* Lead höchstens 2 Zeilen am Desktop (Christoph 30.09.) */
.sec__head p + p{margin-top:12px}
.sec__head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec__head.center p{margin-left:auto;margin-right:auto}
.sec__head a{color:var(--link);font-weight:700}

/* Häkchen-Liste */
.checklist{list-style:none;display:grid;gap:10px}
.checklist li{position:relative;padding-left:28px;color:var(--fg)}
.checklist li::before{content:"";position:absolute;left:0;top:.3em;width:16px;height:16px;background:var(--mark);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat}

/* Linien-Icon im Quadrat (Branchen, Einsatzfälle, Service) */
.ind__ic,.lp-case__ico,.svc__ic,.stat__ico{display:grid;place-items:center;width:48px;height:48px;flex:none;background:var(--blue-2);color:#fff;border-radius:2px}
[data-surface="stage"] .ind__ic,[data-surface="stage"] .lp-case__ico,[data-surface="stage"] .svc__ic,[data-surface="stage"] .stat__ico{background:rgba(127,160,220,.14);color:var(--accent);box-shadow:inset 0 0 0 1px var(--hair-dk)}
.ind__ic svg,.lp-case__ico svg,.svc__ic svg,.stat__ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.ind__ic img,.svc__ic img{width:28px;height:28px;object-fit:contain}

/* 6 · Kopf --------------------------------------------------------------- */
.utility{background:var(--navy);color:var(--mist);font-size:13px;position:relative;z-index:91}
.utility__in{max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter);height:var(--util-h);display:flex;align-items:center;gap:24px}
.utility__tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.utility__spacer{flex:1}
.utility a{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;white-space:nowrap}
.utility a:hover{color:var(--accent)}
.utility svg{width:14px;height:14px;fill:currentColor}
@media (max-width:767px){.utility__tag,.utility__hideSm{display:none}.utility__in{justify-content:flex-end}}
@media (min-width:768px) and (max-width:1079px){.utility__tag{display:none} /* J-035: Claim passt erst ab ~1041 px, vorher nur E-Mail und Telefon rechts */}

/* Kopfzeile: auf der Bühne transparent, nach dem Scrollen weiß mit Haarlinie */
.hdr{position:sticky;top:0;z-index:90;height:var(--hdr-h);color:#fff;background:transparent;transition:background-color .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease)}
.hdr.scrolled,.hdr--solid,.hdr:has(.mnav.open){background:#fff;color:var(--ink);box-shadow:0 1px 0 var(--line),0 8px 24px -16px rgba(0,21,59,.25)}
.hdr__in{max-width:calc(var(--wrap) + 2*var(--gutter));height:100%;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:16px}
.brand{display:block;flex:none}
.brand__logo{height:44px;width:auto;filter:brightness(0) invert(1);transition:filter .25s var(--ease)}
.hdr.scrolled .brand__logo,.hdr--solid .brand__logo,.hdr:has(.mnav.open) .brand__logo{filter:none}
.nav{display:flex;align-items:stretch;height:100%;margin-left:auto}
.nav__item{position:relative;display:flex}
.nav__top{display:flex;align-items:center;padding:0 12px;color:inherit;text-decoration:none;font-size:15px;font-weight:700;white-space:nowrap;position:relative}
.nav__top::after{content:"";position:absolute;left:12px;right:12px;bottom:18px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav__item:hover .nav__top::after,.nav__top:focus-visible::after,.nav__top[aria-current]::after{transform:scaleX(1)}
.nav__drop{position:absolute;top:100%;left:0;min-width:280px;padding:16px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--blue-2);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:5}
.nav__item:last-child .nav__drop{left:auto;right:0}
.nav__item:hover .nav__drop,.nav__item:focus-within .nav__drop{opacity:1;visibility:visible;transform:none}
.nav__ttl{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2);padding:4px 10px 10px}
.nav__drop a{display:block;padding:8px 10px;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.35;white-space:nowrap}
.nav__drop a:hover{background:var(--air);color:var(--blue)}
.hdr__cta{display:flex;align-items:center;gap:8px;flex:none}
.hdr__cta .btn{--btn-bg:var(--blue-2);--btn-fg:#fff;--btn-bg-h:var(--blue)}
.hdr.scrolled .hdr__cta .btn,.hdr--solid .hdr__cta .btn,.hdr:has(.mnav.open) .hdr__cta .btn{--btn-bg:var(--blue-2);--btn-fg:#fff;--btn-bg-h:var(--blue)}
.navtog{display:none;align-items:center;justify-content:center;width:48px;height:48px;background:none;border:0;color:inherit;cursor:pointer;padding:0}
.navtog svg{width:26px;height:26px;fill:currentColor}
.navtog .navtog__x,.navtog[aria-expanded="true"] .navtog__bars{display:none}
.navtog[aria-expanded="true"] .navtog__x{display:block}
.mnav{display:none;background:#fff;color:var(--ink);border-top:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--shadow-lg)}
.mnav.open{display:block}
/* J-035: offenes Menü füllt den Bereich zwischen Kopfzeile und Anruf-Leiste (Werte setzt app.js), Seite dahinter steht still */
@media (max-width:1080px){.mnav.open{position:fixed;left:0;right:0;top:var(--mn-top,calc(var(--util-h) + var(--hdr-h)));bottom:var(--mn-bot,0);z-index:1}html.mnav-lock{overflow:hidden /* nur html: overflow am body machte ihn zum Scroll-Container und löste die Sticky-Kopfzeile */}}
.mnav a{display:block;padding:12px var(--gutter) 12px calc(var(--gutter) + 12px);color:var(--ink);text-decoration:none;font-size:16px}
.mnav a:hover{background:var(--air)}
.mnav a.mnav__home{font-weight:700;border-bottom:1px solid var(--line);padding-left:var(--gutter)}
.mnav__grp{border-bottom:1px solid var(--line)}
.mnav__grp summary{display:flex;justify-content:space-between;align-items:center;padding:14px var(--gutter);font-weight:700;cursor:pointer;list-style:none}
.mnav__grp summary::-webkit-details-marker{display:none}
.mnav__grp summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--blue-2);border-bottom:2px solid var(--blue-2);transform:rotate(45deg) translateY(-3px);transition:transform .2s var(--ease)}
.mnav__grp[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.mnav__grp[open]{padding-bottom:8px}
@media (min-width:1081px) and (max-width:1200px){.hdr__cta .btn{display:none}.nav__top{padding:0 8px;font-size:14px}.nav__top::after{left:8px;right:8px}}
@media (min-width:1201px) and (max-width:1399px){.btn__full{display:none}.btn__short{display:inline}}
@media (max-width:1080px){.nav,.hdr__cta .btn{display:none}.navtog{display:inline-flex}.hdr__cta{margin-left:auto}}
@media (max-width:767px){.brand__logo{height:36px}}

/* 7 · Hero --------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;margin-top:calc(-1 * var(--hdr-h));padding:calc(var(--hdr-h) + 56px) 0 0;color:#fff}
.hero__grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--hair-dk) 1px,transparent 1px),linear-gradient(90deg,var(--hair-dk) 1px,transparent 1px);background-size:64px 64px;opacity:.35;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000 10%,transparent 70%)}
.hero__scan{display:none}
/* Textspalte 7/12, Bildspalte 5/12; beide vertikal zentriert, nichts ragt hinüber */
.hero__in{position:relative;max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:48px;align-items:center}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hero__status{display:inline-block;align-self:flex-start;max-width:100%;padding:7px 14px;border:1px solid var(--hair-dk);background:rgba(255,255,255,.04);font-size:13px;line-height:1.3;color:var(--mist);margin-bottom:24px}
.hero__status b{color:#fff}
.hero__status .lamp{margin-right:10px;vertical-align:1px}
.hero h1{max-width:100%;margin-bottom:24px}
.hero h1 .l2{display:block;color:var(--accent)}
@media (max-width:599px){.hero h1 .l2{display:inline}} /* mobil fließt die zweite Zeile mit, H1 bleibt bei höchstens 4 Zeilen (Christoph 30.09.) */
.hero__sub{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.hero__lead{font-size:19px;line-height:1.5;color:var(--mist);max-width:34em;margin:0}
.hero__lead b{color:#fff}
.hero__trust{list-style:none;display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;margin-top:28px;font-size:14px;color:var(--mist)}
.hero__trust li{display:inline-flex;align-items:center}
/* Trust-Zeile: Icon je Punkt, kein Trenner am Zeilenanfang (Christoph 30.09., Punkt 26) */
.hero__trust{column-gap:24px}
.hero__trust li{gap:8px;white-space:nowrap}
.hero__trust svg{display:block;width:16px;height:16px;flex:none;fill:var(--accent)}
@media (max-width:599px){.hero__trust{flex-direction:column;align-items:flex-start}.hero__trust li{white-space:normal}}
/* Freistellung füllt die Bühne und blutet mit Bodenschatten nach unten aus */
.hero__media{position:relative;min-width:0;display:flex;align-items:flex-end;justify-content:center;margin-bottom:-24px}
.hero__media img{position:relative;z-index:1;width:112%;max-width:none;margin-right:-12%;max-height:520px;object-fit:contain}
/* Hero-Fotos (Christoph 30.09.): volle Farbe, kein Glow/keine Tönung, Tiefe über Schatten + feine helle Kante, 6/12 Spalten */
.hero__in:has(> .hero__media:not(.hero__media--product)){grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.hero__media:not(.hero__media--product) img{width:100%;margin-right:0;border:0;border-radius:2px;outline:1px solid rgba(255,255,255,.22);outline-offset:-1px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.25)}
.hero__media:not(.hero__media--product) .hero__glow{display:none}
.hero__glow{position:absolute;z-index:0;left:4%;right:-8%;bottom:0;height:16%;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),rgba(0,21,59,0) 70%);filter:blur(6px)}
.hero__badge{position:absolute;z-index:2;left:0;bottom:12%;display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(0,21,59,.82);border:1px solid var(--hair-dk);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.hero__badge b{display:block;font-size:14px;color:#fff}
.hero__badge small{display:block;font-size:13px;font-variant-numeric:tabular-nums;color:var(--mist)}
.hero__media:not(.hero__media--product) .hero__badge{left:-24px;bottom:-20px;box-shadow:0 18px 40px -16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)} /* überlappt die untere Bildecke (Christoph 30.09.) */
.hero__specs{position:relative;max-width:calc(var(--wrap) + 2*var(--gutter));margin:48px auto 0;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.hero__specs::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:1px;background:var(--hair-dk)}
.spec{padding:28px 24px 36px;border-left:1px solid var(--hair-dk)}
.spec:first-child{border-left:0;padding-left:0}
.spec__n{font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-size:24px;line-height:1.2;font-weight:700;color:#fff;margin-bottom:6px}
.spec__unit{color:var(--accent)}
.spec__l{font-size:14px;line-height:1.45;color:var(--mist)}
.hero:not(:has(.hero__specs)){padding-bottom:64px}
@media (max-width:1023px){
  .hero__in,.hero__in:has(> .hero__media:not(.hero__media--product)){grid-template-columns:minmax(0,1fr)} /* :has-Regel oben ist spezifischer, daher hier mitgenannt */
  .hero__media{margin:32px auto 0;max-width:560px;width:100%}
  .hero__media img,.hero__media:not(.hero__media--product) img{width:100%;margin-right:0;max-height:340px}
  .hero__specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec:nth-child(3){border-left:0;padding-left:0}
  .spec:nth-child(n+3){border-top:1px solid var(--hair-dk)}
}
@media (max-width:767px){
  .hero{padding-top:calc(var(--hdr-h) + 32px)}
  .hero__lead{font-size:17px}
  .hero__status{margin-bottom:18px}
  .hero__media{margin-top:24px}
  .hero__media img,.hero__media:not(.hero__media--product) img{max-height:230px}
  .hero__badge{display:none}
  .spec{padding:20px 12px 24px}
  .spec__n{font-size:19px}
}

/* Unterseiten-Kopf ohne Bild */
.phero{position:relative;margin-top:calc(-1 * var(--hdr-h));padding:calc(var(--hdr-h) + 64px) 0 72px}
.phero h1{max-width:20ch;margin-bottom:20px}
.phero .crumb + .kicker{margin-top:14px}
.phero p:not(.crumb){font-size:20px;line-height:1.5;color:var(--fg-2);max-width:40em;margin:0}
.crumb{font-size:13px;color:var(--fg-2);margin:0 0 20px}
.crumb a{color:var(--fg);text-decoration:none}
.crumb a:hover{text-decoration:underline}
@media (max-width:767px){.phero{padding:calc(var(--hdr-h) + 32px) 0 48px}.phero p:not(.crumb){font-size:18px}}

/* 8 · Sektionen ---------------------------------------------------------- */

/* Vertrauensleiste */
/* Leistungs-Leiste unter dem Hero (Christoph 30.09.): 4 Spalten, Haarlinien, Linien-Icons */
.proof{background:var(--bg);border-bottom:1px solid var(--ln)}
.proof__in{max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.proof__i{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 18px;align-items:center;gap:16px;padding:32px 24px;border-left:1px solid var(--ln);color:var(--fg);text-decoration:none}
.proof__i:first-child{border-left:0;padding-left:0}
.proof__i::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:transparent;transition:background .2s var(--ease)}
.proof__i:first-child::before{left:0}
.proof__ic svg{display:block;width:40px;height:40px;fill:none;stroke:var(--blue-2);stroke-width:1.3;stroke-linecap:square;stroke-linejoin:miter}
.proof__t b{display:block;font-size:17px;line-height:1.3;font-weight:700;color:var(--fg-h)}
.proof__t span{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:var(--fg-2)}
.proof__arr{width:18px;height:18px;fill:none;stroke:var(--fg-2);stroke-width:1.8;opacity:.6;transition:transform .2s var(--ease),stroke .2s,opacity .2s}
.proof__i:hover::before{background:var(--blue-2)}
.proof__i:hover b{color:var(--blue-2)}
.proof__i:hover .proof__arr{stroke:var(--blue-2);opacity:1;transform:translateX(4px)}
.proof__i:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
@media (max-width:1023px){.proof__in{grid-template-columns:repeat(2,minmax(0,1fr))}.proof__i{padding:24px 16px}.proof__i:nth-child(odd){border-left:0;padding-left:0}.proof__i:nth-child(n+3){border-top:1px solid var(--ln)}}
@media (max-width:599px){.proof__i{grid-template-columns:minmax(0,1fr);align-content:start;gap:10px;padding:20px 12px}.proof__ic svg{width:28px;height:28px}.proof__arr{display:none}.proof__t b{font-size:16px}}

/* Definition / Positionierung */
.lp-def{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;align-items:start}
.lp-def .def__kick{grid-column:1 / -1}
.lp-def .def__h2{grid-column:1;margin:0}
.lp-def > p{grid-column:2;grid-row:2;font-size:18px;line-height:1.6;color:var(--fg-2);margin:0;max-width:64ch}
.lp-def:not(:has(.def__h2)) > *{grid-column:1 / -1;grid-row:auto}
.lp-def:not(:has(.def__h2)) > p{font-size:clamp(18px,.4vw + 15px,21px);max-width:none;color:var(--fg)} /* volle Breite wie die Faktenlinie darunter (Christoph 09.10.) */
.lp-def__facts{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:48px 0 0;border-top:2px solid var(--fg-h)}
.lp-def__facts > div{padding:20px 20px 0 0;min-width:0}
.lp-def__facts > div + div{padding-left:20px;border-left:1px solid var(--ln)}
.lp-def__facts dt{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kick);margin-bottom:8px}
.lp-def__facts dd{margin:0;font-size:17px;line-height:1.4;font-weight:700;color:var(--fg-h)}
.lp-def__norms{list-style:none;display:grid;gap:6px;font-size:15px;line-height:1.35} /* je Norm eine Zeile (J-030 A16) */
@media (max-width:1023px){.lp-def{grid-template-columns:minmax(0,1fr)}.lp-def .def__h2{margin-bottom:20px}.lp-def > p{grid-column:1;grid-row:auto}.lp-def__facts{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-def__facts > div:nth-child(3){padding-left:0;border-left:0}.lp-def__facts > div:nth-child(n+3){padding-top:20px;margin-top:20px;border-top:1px solid var(--ln)}}
@media (max-width:479px){.lp-def__facts{grid-template-columns:minmax(0,1fr)}.lp-def__facts > div + div{padding-left:0;border-left:0;margin-top:16px;padding-top:16px;border-top:1px solid var(--ln)}}

/* Produkt-Bauformen (Karten mit Bild; ohne Bild als Zeile) */
.prod{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.prow{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--card-ln);border-radius:var(--r-card);color:var(--fg);text-decoration:none;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
a.prow:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--blue-2)}
.prow__media{order:-1;aspect-ratio:4 / 3;background:var(--air);overflow:hidden;border-bottom:1px solid var(--card-ln)}
.prow__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
a.prow:hover .prow__media img{transform:scale(1.03)}
.prow__idx{position:absolute;top:12px;left:12px;z-index:1;font-family:inherit;font-size:12px;font-weight:700;color:var(--navy);background:#fff;padding:4px 8px;border:1px solid var(--line)}
.prow__main{padding:20px 20px 0}
.prow__main h3{margin-bottom:8px}
.kva{display:inline-block;font-variant-numeric:tabular-nums; /* Arial statt Monospace: Leistungsbereich ist kein Messwert (Christoph 30.09.) */font-size:14px;font-weight:700;color:var(--blue-2);background:var(--tint);padding:3px 8px;border:1px solid var(--card-ln)}
.prow__desc{padding:12px 20px 0;margin:0;font-size:15px;line-height:1.5;color:var(--fg-2);flex:1}
a.prow::after{content:"Mehr erfahren";display:block;margin:16px 20px 20px;padding-top:14px;border-top:1px solid var(--card-ln);font-size:14px;font-weight:700;color:var(--link)}
.prow ul{list-style:none;padding:12px 20px 0;display:grid;gap:6px;font-size:15px;color:var(--fg-2)}
.prow ul li{position:relative;padding-left:16px}
.prow ul li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;background:var(--mark)}
.prow:not(:has(.prow__media)){display:grid;grid-template-columns:64px minmax(0,4fr) minmax(0,6fr);align-items:start;gap:0 24px;padding:24px;border-radius:0;border-width:0 0 1px;background:transparent}
.prod:has(> .prow:not(:has(.prow__media))){grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--card-ln)}
.prow:not(:has(.prow__media)) .prow__idx{position:static;background:none;border:0;padding:0;font-size:14px;color:var(--kick)}
.prow:not(:has(.prow__media)) .prow__main,.prow:not(:has(.prow__media)) .prow__desc{padding:0}
@media (max-width:1023px){.prod{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.prod{grid-template-columns:minmax(0,1fr)}.prow:not(:has(.prow__media)){grid-template-columns:40px minmax(0,1fr);row-gap:8px;padding:20px 0}.prow:not(:has(.prow__media)) .prow__desc{grid-column:2}}

/* Leistungsklassen / Karten-Spalten */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tier{position:relative;background:var(--card);border:1px solid var(--card-ln);padding:32px;display:flex;flex-direction:column}
.tier::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--mark);transform:scaleX(.18);transform-origin:left;transition:transform .35s var(--ease)}
.tier:hover::before{transform:scaleX(1)}
/* Karten-Spalten einheitlich (Christoph 30.09.): Icon 48 px, Titel einzeilig Arial 700, Kicker/Titel/Liste auf gleicher Höhe (subgrid) */
.tiers{grid-auto-rows:auto}
.tier{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
.tier__ic svg{display:block;width:48px;height:48px;margin-bottom:24px;fill:none;stroke:var(--kick);stroke-width:1.2;stroke-linecap:square;stroke-linejoin:miter}
.tier__kva{font-family:var(--font);font-variant-numeric:tabular-nums;font-size:28px;line-height:1.2;font-weight:700;color:var(--fg-h);margin-bottom:24px;text-wrap:balance}
.tier__kva small{display:block;font-family:var(--font);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--kick);margin-bottom:8px}
.tier h3{margin-bottom:12px}
.tier p{color:var(--fg-2);font-size:16px}
.tier ul{list-style:none;display:grid;align-content:start;gap:10px;font-size:16px;color:var(--fg-2)}
.tier ul li{padding-top:10px;border-top:1px solid var(--ln)}
.tier .btn{margin-top:24px;align-self:flex-start}
/* kVA-Band je Klasse (log-Skala 6,8 → 2.500 kVA): I bis 100, II 100–500, III 500–2.500 */
#leistung .tiers > .tier .tier__kva::after{content:"";display:block;height:6px;margin-top:16px;background:linear-gradient(90deg,transparent var(--a),var(--mark) var(--a),var(--mark) var(--b),transparent var(--b)),var(--tint);box-shadow:inset 0 0 0 1px var(--card-ln)}
#leistung .tiers > .tier:nth-child(1){--a:0%;--b:45.5%}
#leistung .tiers > .tier:nth-child(2){--a:45.5%;--b:72.8%}
#leistung .tiers > .tier:nth-child(3){--a:72.8%;--b:100%}
.tiers + .center,.center.cta-row{margin-top:40px}
@media (max-width:1023px){.tiers{grid-template-columns:minmax(0,1fr);gap:16px}.tier{padding:24px}}

/* NEA-Schema mit Ablauf-Szenario */
.nea{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"kick kick" "h2 h2" "copy schema";column-gap:56px;align-items:center}
.nea__copy{display:contents}
.nea__copy > .kicker{grid-area:kick;justify-self:start}
.nea__copy > h2{grid-area:h2;max-width:30em;margin-bottom:40px}
.nea__body{grid-area:copy;min-width:0}
.nea__body > p{color:var(--fg-2);font-size:18px;line-height:1.55;margin:0}
.nea .schema{grid-area:schema;padding:36px}
.nea__list{list-style:none;display:grid;gap:0;margin-top:24px;border-top:1px solid var(--ln)}
.nea__list li{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--ln);font-size:15px;color:var(--fg-2)}
.nea__list li::before{content:"";flex:none;width:8px;height:8px;background:var(--mark);transform:translateY(-1px)}
.nea__list strong{color:var(--fg-h);font-size:16px}
.nea__more{display:inline-flex;align-items:center;gap:8px;min-height:52px;font-weight:700;color:var(--link);text-decoration:none}
.nea__more svg{width:18px;height:18px}
.nea__more:hover{text-decoration:underline}
.nea__more:focus-visible,.cpair__line a:focus-visible,.split__link:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.schema{position:relative;border:1px solid var(--card-ln);background:var(--card);padding:32px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.schema__clock{display:flex;justify-content:space-between;gap:16px;margin:0 0 28px;padding-bottom:16px;border-bottom:1px solid var(--ln);font-family:inherit;font-size:13px;color:var(--fg-2)}
.schema__clock b{color:var(--fg-h);font-weight:700}
.schema__flow{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr);align-items:center}
.node{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:20px 16px;border:1px solid var(--card-ln);background:var(--tint);min-width:0;transition:opacity .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.node__ic{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--card-ln);color:var(--mark);margin-bottom:10px}
.node__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square}
.node strong{font-size:15px;line-height:1.25;color:var(--fg-h);hyphens:manual}
.node small{font-family:inherit;font-size:12px;color:var(--fg-2)}
.arrow{position:relative;height:2px;margin:0 6px;background:repeating-linear-gradient(90deg,var(--ln) 0 6px,transparent 6px 10px)}
.arrow::after{content:"";position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left-color:var(--ln);border-right:0}
.schema__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:24px;font-size:14px;color:var(--fg-2)}
.schema__switch{display:inline-flex;align-items:center;gap:10px;color:var(--fg-h);font-weight:700}
/* Endzustand (auch ohne Bewegung): Netz aus, NEA übernimmt */
.node--grid.off{opacity:.45;border-style:dashed}
.node--nea.on{border-color:var(--mark);box-shadow:0 0 0 1px var(--mark),0 0 32px -8px var(--mark)}
.arrow.live{background:repeating-linear-gradient(90deg,var(--mark) 0 6px,transparent 6px 10px);background-size:10px 2px}
.arrow.live::after{border-left-color:var(--mark)}
@media (prefers-reduced-motion:no-preference){
  .schema.in .node--grid{animation:sc-grid 8s var(--ease) infinite}
  .schema.in .node--ats{animation:sc-ats 8s var(--ease) infinite}
  .schema.in .node--nea{animation:sc-nea 8s var(--ease) infinite}
  .schema.in .arrow.live{animation:sc-flow .6s linear infinite,sc-live 8s var(--ease) infinite}
  .schema.in .schema__clock b{animation:sc-clock 8s steps(1) infinite}
}
@keyframes sc-grid{0%,18%{opacity:1;border-style:solid}24%,88%{opacity:.4;border-style:dashed}96%,100%{opacity:1;border-style:solid}}
@keyframes sc-ats{0%,22%{box-shadow:none}28%,40%{box-shadow:0 0 0 1px var(--mark),0 0 28px -6px var(--mark)}48%,100%{box-shadow:none}}
@keyframes sc-nea{0%,36%{box-shadow:none;border-color:var(--card-ln)}44%,88%{box-shadow:0 0 0 1px var(--mark),0 0 32px -8px var(--mark);border-color:var(--mark)}96%,100%{box-shadow:none;border-color:var(--card-ln)}}
@keyframes sc-live{0%,34%{opacity:.15}40%,88%{opacity:1}96%,100%{opacity:.15}}
@keyframes sc-flow{to{background-position:10px 0}}
@keyframes sc-clock{0%{opacity:.35}22%{opacity:1}90%{opacity:.35}}
/* Mobil: Schema direkt nach der H2 */
@media (max-width:1023px){.nea{grid-template-columns:minmax(0,1fr);grid-template-areas:"kick" "h2" "schema" "copy";row-gap:0}.nea__copy > h2{margin-bottom:28px}.nea__body{margin-top:32px}.nea .schema{padding:24px 20px}}
@media (max-width:599px){.schema{padding:20px}.schema__flow{grid-template-columns:minmax(0,1fr);gap:0}.arrow{width:2px;height:28px;margin:6px 0 6px 24px;background:repeating-linear-gradient(180deg,var(--ln) 0 6px,transparent 6px 10px)}.arrow.live{background:repeating-linear-gradient(180deg,var(--mark) 0 6px,transparent 6px 10px)}.arrow::after{right:auto;left:-4px;top:auto;bottom:-4px;border:5px solid transparent;border-top-color:inherit;border-bottom:0}.arrow::after{border-top-color:var(--ln)}.arrow.live::after{border-top-color:var(--mark)}@media (prefers-reduced-motion:no-preference){.schema.in .arrow.live{animation:sc-live 8s var(--ease) infinite}}}

/* Kacheln (Branchen, Auswahlhilfe, Anwendungen) */
.inds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.inds--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.inds--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ind{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 24px 24px;background:var(--card);border:1px solid var(--card-ln);border-radius:var(--r-card);color:var(--fg);text-decoration:none;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.ind::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--mark);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
a.ind:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--card-ln)}
a.ind:hover::before{transform:scaleX(1)}
.ind h3{font-size:19px}
.ind p{margin:0;font-size:15px;line-height:1.5;color:var(--fg-2)}
.ind__pain{flex:1}
.ind p.ind__gain{padding-top:12px;border-top:1px solid var(--ln);color:var(--fg)}
.ind__go{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding-top:4px;font-size:14px;font-weight:700;color:var(--link)}
.ind__go::after{content:"";width:14px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s var(--ease)}
a.ind:hover .ind__go::after{transform:translateX(3px)}
.ind__media{margin:-28px -24px 8px;aspect-ratio:3 / 2;overflow:hidden;background:var(--air)}
.ind__media img{width:100%;height:100%;object-fit:cover}
@media (max-width:1100px){.inds,.inds--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.inds,.inds--2,.inds--3{grid-template-columns:minmax(0,1fr)}.ind{padding:22px 20px 20px}.ind__media{margin:-22px -20px 6px}}

/* Bedarfs-Rechner */
.calc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.calc__intro h2{margin-bottom:16px}
.calc__intro > p{font-size:18px;line-height:1.55;color:var(--fg-2)}
.calc__props,.calc__steps{list-style:none;display:grid;gap:18px;margin-top:28px}
.calc__props li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px}
.calc__props svg{width:22px;height:22px;fill:var(--mark);margin-top:2px}
.calc__props b{display:block;color:var(--fg-h)}
.calc__props span{display:block;font-size:15px;color:var(--fg-2)}
.calc__steps{counter-reset:st}
.calc__steps li{counter-increment:st;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:baseline;color:var(--fg-2);font-size:16px}
.calc__steps li::before{content:counter(st,decimal-leading-zero);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;color:var(--kick);border-top:1px solid var(--mark);padding-top:4px}
.calc__steps b{color:var(--fg-h)}
.calc__note{margin-top:24px;font-size:14px;color:var(--fg-2)}
.panel{padding:40px;border-radius:var(--r-card);box-shadow:var(--shadow-lg);border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.panel h3{font-size:24px;margin-bottom:6px}
.panel .sub{margin-bottom:24px}
.panel form{display:grid;gap:18px}
.calc__submit{margin-top:32px} /* #rechner-form ist block, kein Grid-Gap: 32px Abstand zu den Feldern (Christoph 09.10.) */
.calc__trust{text-align:center;margin:12px 0 0;font-size:13px}
.emailbox{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px;padding:16px;background:var(--air);border:1px solid var(--line)}
.emailbox p{margin:0;flex:1 1 100%;font-size:14px;font-weight:700;color:var(--ink)}
.emailbox input{flex:1 1 200px;min-width:0}
.result{margin-top:24px}
/* Rechner-Ergebnis groß auf dunkel, mit Status-LED (Christoph 30.09.) */
.result{border-radius:var(--r-card)}
.rc{display:grid;grid-template-columns:140px minmax(0,1fr);gap:24px;padding:28px;background:var(--stage-bg);color:var(--fg);border-radius:var(--r-card);animation:rise .4s var(--ease)}
.rc .kicker{color:var(--kick)}
.rc .kicker::before{content:"";display:inline-block;width:9px;height:9px;margin-right:10px;border-radius:50%;background:var(--led);box-shadow:0 0 10px 1px var(--led-glow)}
.rc__media{position:relative;align-self:start}
.rc__media img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px}
.rc__tag{position:absolute;left:6px;bottom:6px;font-size:11px;font-weight:700;background:var(--navy);color:#fff;padding:3px 6px}
.rc__body h3{margin:4px 0 4px;color:#fff}
.rc__hint{font-size:14px;color:var(--fg-2);margin-bottom:16px}
.rc__figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);margin-bottom:16px}
.rc__figs > div{padding:14px 12px 14px 0;min-width:0}
.rc__figs > div + div{padding-left:12px;border-left:1px solid var(--ln)}
.rc__figs .n{display:block;font-variant-numeric:tabular-nums;font-size:26px;line-height:1.15;font-weight:700;color:#fff}
.rc__figs > div:first-child .n{font-size:32px}
.rc__figs .l{display:block;margin-top:4px;font-size:12px;line-height:1.35;color:var(--fg-2)}
.rc__notes{list-style:none;display:grid;gap:8px;font-size:14px;color:var(--fg);margin-bottom:16px}
.rc__notes li{padding-left:14px;border-left:2px solid var(--accent)}
.rc__cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.rc__cta svg{width:16px!important;height:16px!important /* überschreibt Inline-Maße aus app.js render() */}
.rc__disc{font-size:12px;margin:0}
@media (max-width:1023px){.calc{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:599px){.panel{padding:24px 20px}.rc{grid-template-columns:minmax(0,1fr);padding:20px}.rc__media{max-width:160px}.rc__figs{grid-template-columns:minmax(0,1fr)}.rc__figs > div + div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

/* Rechner-Vorschau (Teaser) */
.lp-teaser{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:center}
.lp-teaser h2{margin-bottom:16px}
.lp-teaser p{color:var(--fg-2);font-size:18px;line-height:1.55}
.lp-teaser__panel{padding:28px;border-radius:var(--r-card);box-shadow:var(--shadow-lg);border:1px solid var(--line);font-size:15px}
.lp-teaser__head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;padding-bottom:14px;border-bottom:2px solid var(--navy)}
.lp-teaser__head b{font-size:16px;color:var(--navy)}
.lp-teaser__head span{font-family:inherit;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:var(--blue-2);padding:3px 8px}
.lp-teaser__row--hot b{font-size:18px}
.lp-teaser__panel .btn{margin-top:20px}
.lp-teaser__micro{margin:10px 0 0;font-size:13px;color:var(--ink-2);text-align:center}
.lp-teaser.in .lp-teaser__row{animation:rise .4s var(--ease) both}
.lp-teaser.in .lp-teaser__row:nth-of-type(2){animation-delay:.15s}.lp-teaser.in .lp-teaser__row:nth-of-type(3){animation-delay:.3s}.lp-teaser.in .lp-teaser__row:nth-of-type(4){animation-delay:.45s}.lp-teaser.in .lp-teaser__row:nth-of-type(5){animation-delay:.6s}.lp-teaser.in .lp-teaser__row--hot{animation-delay:.9s}
.lp-teaser__row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.lp-teaser__row span{color:var(--ink-2)}
.lp-teaser__row b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--navy);text-align:right}
.lp-teaser__sep{height:12px}
.lp-teaser__row--hot{border:0;padding:16px;background:var(--navy);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.lp-teaser__row--hot span{color:var(--mist)}
.lp-teaser__row--hot b{color:#fff}
@media (max-width:1023px){.lp-teaser{grid-template-columns:minmax(0,1fr);gap:40px}}

/* Batteriespeicher */
.bess__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.bess__card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--card-ln);border-radius:var(--r-card);padding:32px;scroll-margin-top:calc(var(--hdr-h) + 16px)}
.bess__foto--projekt img{object-position:52% 50%}
.bess__foto--ibb img{object-position:50% 70%} /* J-032: Speicher Ibbenbüren, Sockel bleibt im Bild */
.bess__card header{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.bess__tag{align-self:flex-start;font-family:inherit;font-size:13px;font-weight:700;color:#fff;background:var(--navy);padding:4px 10px}
.bess__card h3{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:26px;letter-spacing:-.01em}
.bess__card > p{color:var(--fg-2);font-size:16px}
.bess__specs{margin:0 0 20px;border-top:1px solid var(--ln)}
.bess__specs > div{display:flex;justify-content:space-between;gap:16px;padding:10px 12px;border-bottom:1px solid var(--ln)}
.bess__specs > div:nth-child(odd){background:var(--tint)}
.bess__specs dt{font-size:14px;color:var(--fg-2)}
.bess__specs dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;font-weight:700;color:var(--fg-h);text-align:right}
.bess__link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--link);text-decoration:none}
.bess__link:hover{text-decoration:underline}
.bess__usecases{margin-top:32px;padding:32px;border:1px solid var(--card-ln);background:var(--card);border-radius:var(--r-card)}
.bess__usecases h3,.bess__usecases-h{margin-bottom:16px}
/* Cluster-Beispiele als 5 Kacheln (Christoph 30.09.) */
.clus{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ln);margin-top:8px}
.clus__i{display:flex;flex-direction:column;gap:4px;padding:24px 20px 4px;border-left:1px solid var(--ln)}
.clus__i:first-child{border-left:0;padding-left:0}
.clus__blocks{display:grid;grid-template-columns:repeat(10,8px);gap:3px;align-content:end;min-height:19px;margin-bottom:16px}
.clus__blocks i{width:8px;height:8px;background:var(--blue-2)}
.clus__cap{font-size:32px;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg-h)}
.clus__mod{margin-top:6px;font-size:15px;font-weight:700;color:var(--fg)}
.clus__kw{font-size:14px;font-variant-numeric:tabular-nums;color:var(--fg-2)}
.clus__det{margin-top:8px;padding-top:8px;border-top:1px solid var(--ln);font-size:13px;line-height:1.45;font-variant-numeric:tabular-nums;color:var(--fg-2)}
@media (max-width:1023px){.clus{grid-template-columns:repeat(2,minmax(0,1fr))}.clus__i{padding:20px 16px;border-top:1px solid var(--ln)}.clus__i:nth-child(odd){border-left:0;padding-left:0}.clus__i:nth-child(-n+2){border-top:0}}
@media (max-width:599px){.clus{grid-template-columns:minmax(0,1fr)}.clus__i{border-left:0;padding:20px 0}.clus__i:nth-child(2){border-top:1px solid var(--ln)}}
.bess__usecases img{margin-top:20px;width:100%;height:auto}
@media (max-width:767px){.bess__grid{grid-template-columns:minmax(0,1fr)}.bess__card,.bess__usecases{padding:24px 20px}}
/* J-024: echte Fotos neben den BESS-Karten und in der Technik, Galerie mit 5 Bildern, Peakshaving-Prinzipgrafik */
.bess__grid--foto{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,5fr)}
.bess__foto{position:relative;margin:0;min-height:300px;overflow:hidden;background:var(--air);border:1px solid var(--card-ln);border-radius:var(--r-card)}
.bess__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bess__foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:rgba(0,21,59,.82);color:#FFFFFF;font-size:13px;line-height:1.4;font-weight:700}
.tech{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:stretch}
.tiers--stack{grid-template-columns:minmax(0,1fr);gap:16px}
.tech__foto{position:sticky;top:calc(var(--hdr-h) + 24px);align-self:start;min-height:0;aspect-ratio:767 / 740}
@media (max-width:1023px){
  .bess__grid--foto{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bess__grid--foto > .bess__foto{grid-column:1 / -1;min-height:0;aspect-ratio:3 / 2}
  .bess__grid--foto > .bess__foto--hoch{aspect-ratio:4 / 5;width:100%;max-width:440px;justify-self:center}
  .tech{grid-template-columns:minmax(0,1fr);gap:16px}
  .tech__foto{position:relative;top:auto;aspect-ratio:4 / 3}
}
@media (max-width:767px){.bess__grid--foto{grid-template-columns:minmax(0,1fr)}}
/* Produktwelten: eigener Abschnitt unter dem Hero auf Hellblau, zwei weiße Karten, Bild oben über die volle Breite (J-031, Christoph 07.10.) */
.welten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:stretch}
.welt{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--card);color:var(--fg);border:1px solid var(--card-ln);border-top:0;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.welt::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--blue-2);z-index:2}
.welt:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.welt__media{position:relative;aspect-ratio:4 / 3;overflow:hidden;background:var(--air)} /* J-032: 4:3, beide Bilder zeigen das ganze Gerät (Hendrik 07.10.) */
.welt__media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .8s var(--ease)}
.welt:hover .welt__media img{transform:scale(1.03)}
.welt__num{position:absolute;left:0;top:4px;z-index:1;display:flex;align-items:center;gap:12px;padding:14px 22px 14px 32px;background:var(--navy);color:#fff;font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.12em}
.welt__num::after{content:"";width:24px;height:1px;background:var(--accent)}
.welt__body{display:flex;flex-direction:column;flex:1;padding:36px 40px 40px}
.welt__tag{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--fg-2);margin-bottom:12px}
.welt h3{font-size:clamp(24px,.8vw + 17px,30px);line-height:1.15;letter-spacing:-.01em;color:var(--fg-h);margin-bottom:24px}
.welt__list{list-style:none;display:grid;gap:0;margin:0 0 32px;border-top:1px solid var(--ln)}
.welt__list li{position:relative;padding:13px 0 13px 24px;border-bottom:1px solid var(--ln);font-size:16px;line-height:1.4;color:var(--fg-2)}
.welt__list li::before{content:"";position:absolute;left:0;top:calc(13px + .5em - 3px);width:7px;height:7px;background:var(--blue-2)}
.welt .btn{margin-top:auto;align-self:flex-start;min-width:280px}
/* Zweispaltig: Titel, Liste und Button beider Karten auf gleicher Höhe per Subgrid (Christoph 09.10.) */
@media (min-width:768px){@supports (grid-template-rows:subgrid){
  .welt{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
  .welt__body{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
  .welt__tag,.welt h3{align-self:start}
  .welt__list{align-self:start}
  .welt .btn{margin-top:0;align-self:end;justify-self:start}
}}
@media (max-width:1023px){
  .welten{gap:20px}
  .welt__body{padding:28px 24px 28px}
  .welt .btn{align-self:stretch;min-width:0}
  .welt__num{padding:12px 18px 12px 24px}
}
@media (max-width:767px){
  #produktwelten .sec__head p{font-size:16px;line-height:1.5}
  .welten{grid-template-columns:minmax(0,1fr);gap:20px}
  .welt__body{padding:24px 20px 24px}
  .welt__list{margin-bottom:24px}
  .welt__list li{font-size:15px;padding-top:11px;padding-bottom:11px}
  .welt__list li::before{top:calc(11px + .5em - 3px)}
  .welt__num{padding:10px 16px 10px 20px;font-size:13px}
}
@media (max-width:359px){#produktwelten .sec__head p{font-size:14px;line-height:1.45}}
.bess__foto--front img{object-position:50% 35%}
.inds--5{grid-template-columns:repeat(6,minmax(0,1fr))}
.inds--5 > *{grid-column:span 2}
.inds--5 > :nth-child(-n+2){grid-column:span 3}
@media (max-width:1100px){.inds--5{grid-template-columns:repeat(2,minmax(0,1fr))}.inds--5 > *,.inds--5 > :nth-child(-n+2){grid-column:auto}.inds--5 > :first-child{grid-column:1 / -1}}
@media (max-width:599px){.inds--5{grid-template-columns:minmax(0,1fr)}}
.peak{margin:0 0 48px;padding:28px 28px 22px;background:#FFFFFF;border:1px solid var(--card-ln);border-radius:var(--r-card)}
.peak__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:20px}
.peak__h{margin:0;color:var(--navy)}
.peak__tag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2)}
.peak__svg{display:block;width:100%;height:auto}
.peak__svg--compact{display:none;max-width:440px;margin:0 auto}
.peak__key{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;line-height:1.3;color:var(--ink)}
.peak__key li{display:flex;align-items:center;gap:8px}
.peak__sw{flex:none;display:block;width:22px;height:14px}
.peak__sw--netz{background:#003087}
.peak__sw--spei{background:repeating-linear-gradient(45deg,#0042BA 0 2px,#B4C6E8 2px 6px)}
.peak__sw--lade{background:#C9D3E6;box-shadow:inset 0 0 0 1px #7FA0DC}
.peak__sw--last{height:0;border-top:2px solid #00153B}
.peak__sw--grenze{height:0;border-top:3px dashed #00153B}
.peak figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ink-2)}
@media (max-width:1023px){.peak__svg--wide{display:none}.peak__svg--compact{display:block}}
@media (max-width:599px){.peak{padding:20px 14px 16px;margin-bottom:32px}.peak__key{gap:8px 16px;font-size:13px}}

/* Zweispalter (Ansprechpartner, Service) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.split__body h2{margin-bottom:16px}
.split__body > p{color:var(--fg-2);font-size:18px;line-height:1.55;max-width:56ch}
.split__media{min-width:0}
.split__media > img,.split__media > video{width:100%;height:auto;border-radius:var(--r-card);box-shadow:var(--shadow)}
.split__media > video{background:var(--ink);display:block}
/* Großer Play-Knopf mittig auf dem Imagefilm, verschwindet beim Abspielen (Christoph 09.10.) */
.split__media--video{position:relative}
.vplay{position:absolute;left:50%;top:50%;z-index:2;width:72px;height:72px;margin:-36px 0 0 -36px;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(0,21,59,.42);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:transform .2s var(--ease),background .2s var(--ease)}
.vplay svg{width:28px;height:28px;margin-left:4px;fill:currentColor}
.vplay:hover{transform:scale(1.05);background:rgba(0,66,186,.7)}
.vplay:focus-visible{outline:3px solid #fff;outline-offset:4px}
.vplay[hidden]{display:none}
@media (max-width:599px){.vplay{width:60px;height:60px;margin:-30px 0 0 -30px}.vplay svg{width:24px;height:24px;margin-left:3px}}
/* Kontakt-Band: helle Fläche, links Text, rechts Buttonpaar. Kommt ein Teamfoto,
   in .split__media einsetzen und die Klasse split--band entfernen. */
.split__media:empty{display:none}
.split--band{grid-template-columns:minmax(0,1fr)}
.split--band .split__body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:center}
.split--band .split__body > :not(.cpair){grid-column:1}
.split--band .split__body > .kicker{justify-self:start}
.split--band .split__body > p{margin:0}
.split--band .cpair{grid-column:2;grid-row:1 / span 3;align-self:center;padding-left:56px;border-left:1px solid var(--ln)}
.sec:has(> .wrap > .split--band){padding:80px 0}
@media (max-width:1080px){.split{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:899px){.split--band .split__body{grid-template-columns:minmax(0,1fr)}.split--band .cpair{grid-column:1;grid-row:auto;margin-top:28px;padding:28px 0 0;border-left:0;border-top:1px solid var(--ln)}.sec:has(> .wrap > .split--band){padding:64px 0}}

/* Kontakt-Buttonpaar: ein Baustein für alle Kontaktstellen.
   Zwei gleich breite, gleich hohe Knöpfe mit je einem Label; Nummer und Adresse als ruhige Zeile darunter. */
.cpair{display:grid;gap:12px;min-width:0}
.cpair__btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,196px),1fr));gap:12px}
.cpair__btns .btn{width:100%;padding:14px 16px;white-space:nowrap}
.btn--call{background:var(--blue-2);border-color:var(--blue-2);color:#fff}
.btn--call:hover{background:#1A55C4;border-color:#1A55C4 /* leichte Aufhellung des FG-Blaus nur im Hover */}
[data-surface="stage"] .btn--call{border-color:var(--accent)}
.btn--mail{background:transparent;color:var(--btn2-fg);border:1px solid var(--btn2-ln)}
.btn--mail:hover{background:var(--btn2-bg-h)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.btn svg.ic-l{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
/* Kontaktzeile ist nur Information: Arial 14/400, Textfarbe, Haarlinien-Trenner (Christoph 30.09.) */
.cpair__line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:0;font-size:14px;line-height:1.5;color:var(--fg-2)}
.cpair__line a{color:var(--fg-2);font-weight:400;text-decoration:none}
.cpair__line a:hover{text-decoration:underline}
.cpair__line a[href^="tel:"]{font-variant-numeric:tabular-nums}
.cpair__line a + a::before{content:"";display:inline-block;width:1px;height:14px;margin:0 12px;background:var(--ln);vertical-align:-2px}
@media (max-width:599px){.cpair__line{flex-direction:column;align-items:flex-start}.cpair__line a + a::before{display:none}}

/* Service-Bausteine */
.svcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:32px 0}
.svc{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start}
.svc h3{font-size:17px;margin-bottom:4px}
.svc p{margin:0;font-size:15px;line-height:1.5;color:var(--fg-2)}
@media (max-width:599px){.svcs{grid-template-columns:minmax(0,1fr)}}

/* Kennzahlen */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.stat{padding:32px 24px;min-width:0}
.stat + .stat{border-left:1px solid var(--ln)}
.stat__ico{margin-bottom:20px}
.stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sec--band{padding:64px 0}
@media (max-width:767px){.sec--band{padding:48px 0}}
.stat .n,.stat__n{font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-size:clamp(26px,1.2vw + 16px,36px);line-height:1.1;font-weight:700;color:var(--fg-h);white-space:nowrap}
.stat__unit{font-size:14px;font-weight:700;color:var(--kick);margin:6px 0 10px}
.stat .l,.stat__l{font-size:15px;line-height:1.45;color:var(--fg-2)}
.stat__l{margin-top:8px}
.tech-badges{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:6px;margin-top:32px;font-size:14px;color:var(--fg-2)}
.tbadge{display:inline-flex;align-items:center}
.tbadge + .tbadge::before{content:"";width:1px;height:14px;background:var(--ln);margin:0 16px}
@media (max-width:1023px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--ln)}.stats--3{grid-template-columns:minmax(0,1fr)}.stats--3 .stat + .stat{border-left:0;border-top:1px solid var(--ln)}}
@media (max-width:479px){.stat{padding:24px 12px}.stat .n,.stat__n{white-space:normal}}

/* Häufige Fragen: links Kopf, rechts Akkordeon */
.wrap:has(> .faq),.wrap:has(> .lp-faq){display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
.wrap:has(> .faq) > .sec__head,.wrap:has(> .lp-faq) > .sec__head{position:sticky;top:calc(var(--hdr-h) + 24px);margin:0;text-align:left}
.wrap:has(> .faq) > .sec__head .kicker,.wrap:has(> .lp-faq) > .sec__head .kicker{justify-content:flex-start}
.faq,.lp-faq{border-top:1px solid var(--ln)}
.faq__i,.lp-faq__i{border-bottom:1px solid var(--ln)}
.faq__q,.lp-faq__i > summary{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:22px 0;background:none;border:0;text-align:left;cursor:pointer;font-size:18px;line-height:1.4;font-weight:700;color:var(--fg-h);list-style:none}
.lp-faq__i > summary::-webkit-details-marker{display:none}
.lp-faq__i > summary{list-style:none} /* nur ein Symbol je Frage: das CSS-Plus (J-030 A18) */
.faq__q:hover,.lp-faq__i > summary:hover{color:var(--link)}
.faq__q .ic,.lp-faq__plus{flex:none;width:22px;height:22px;margin-top:2px;color:var(--mark);transition:transform .3s var(--ease)}
.lp-faq__plus{position:relative}
.lp-faq__plus::before,.lp-faq__plus::after{content:"";position:absolute;left:3px;right:3px;top:10px;height:2px;background:currentColor}
.lp-faq__plus::after{transform:rotate(90deg)}
.faq__i.open .ic,.lp-faq__i[open] .lp-faq__plus{transform:rotate(45deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.faq__a > *{overflow:hidden;min-height:0;margin:0}
.faq__i.open .faq__a{grid-template-rows:1fr}
.faq__a p,.lp-faq__i > p{color:var(--fg-2);font-size:16px;line-height:1.6;max-width:64ch}
.faq__i.open .faq__a p{padding-bottom:22px}
.lp-faq__i > p{margin:0;padding:0 46px 22px 0}
@media (max-width:1023px){.wrap:has(> .faq),.wrap:has(> .lp-faq){grid-template-columns:minmax(0,1fr);gap:32px}.wrap:has(> .faq) > .sec__head,.wrap:has(> .lp-faq) > .sec__head{position:static}}
@media (max-width:599px){.faq__q,.lp-faq__i > summary{font-size:17px;padding:18px 0}}

/* Kontakt: Formular + Seitenleiste */
.contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:stretch}
.card{background:var(--card);border:1px solid var(--card-ln);border-radius:var(--r-card);padding:40px}
.contact > .card{box-shadow:var(--shadow)}
.aside{display:flex;flex-direction:column}
.aside > .card{flex:1;padding:32px;box-shadow:var(--shadow)}
/* Kontakt-Karte: drei Stufen (Titel 20/700, Text 16/400, Klein 14), zwei Textfarben, 24 px zwischen Blöcken, 12 px innerhalb (Christoph 30.09.) */
.aside h3,.lp-final__card h3{font-size:20px;line-height:1.3;margin:0 0 12px}
.aside .card > p,.lp-final__card > p{color:var(--fg-2);font-size:16px;line-height:1.5}
.aside .cpair,.lp-final__card .cpair{margin-top:24px}
.aside__k{margin:24px 0 12px;padding-top:24px;border-top:1px solid var(--ln);font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kick)}
.aside .card > .aside__k,.lp-final__card > .aside__k{color:var(--kick);font-size:12px}
.hours{margin:12px 0 0}
.aside .card > .hours,.lp-final__card > .hours{font-size:14px}
/* Schritte als ruhige Mini-Timeline: 24-px-Kreis mit Ziffer, 1-px-Linie, Label + kurzer Zusatz */
.next{list-style:none;counter-reset:nx;display:grid;margin:0}
.next li{counter-increment:nx;position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;padding-bottom:16px;font-size:14px;line-height:1.45;color:var(--fg-2)}
.next li:last-child{padding-bottom:0}
.next li::before{content:counter(nx);grid-row:1 / span 2;position:relative;z-index:1;width:24px;height:24px;border-radius:50%;background:var(--blue-2);color:#fff;font-size:13px;font-weight:700;line-height:24px;text-align:center}
.next li:not(:last-child)::after{content:"";position:absolute;left:11.5px;top:24px;bottom:0;width:1px;background:var(--ln)}
.next b{color:var(--fg-h);font-size:16px;font-weight:600;line-height:24px}
.next span{grid-column:2}
.aside .checklist,.lp-final__card .checklist{margin-top:24px;padding-top:24px;border-top:1px solid var(--ln);font-size:16px;gap:12px}
.aside .checklist li,.lp-final__card .checklist li{color:var(--fg-2)}
@media (max-width:1023px){.contact{grid-template-columns:minmax(0,1fr)}}
@media (max-width:599px){.card{padding:24px 20px}.aside > .card,.lp-final__card{padding:24px 20px}}

/* Formularfelder */
.form{display:grid;gap:18px}
.f-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:grid;gap:6px;min-width:0}
.field label,.qf > span{font-size:14px;font-weight:700;color:var(--ink)}
.field input,.field select,.field textarea,.emailbox input,.qf input,.qf select,.qf textarea,.unit input,.unit select{width:100%;min-height:52px;padding:12px 14px;background:#fff;color:var(--ink);border:1px solid var(--field);border-radius:var(--r-btn);font-size:16px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea,.qf textarea{min-height:120px;resize:vertical}
.field select,.qf select,.unit select{appearance:none;-webkit-appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230042BA' stroke-width='1.8'/%3E%3C/svg%3E") right 14px center/12px 8px no-repeat}
.field input:focus,.field select:focus,.field textarea:focus,.emailbox input:focus,.qf input:focus,.qf select:focus,.qf textarea:focus,.unit input:focus,.unit select:focus{outline:0;border-color:var(--blue-2);box-shadow:0 0 0 3px rgba(0,66,186,.18)}
.field ::placeholder,.qf ::placeholder,.emailbox ::placeholder{color:#6B7690}
.unit{display:grid;grid-template-columns:minmax(0,1fr) 96px}
.unit input{border-radius:var(--r-btn) 0 0 var(--r-btn)}
.unit select{border-radius:0 var(--r-btn) var(--r-btn) 0;border-left:0}
.consent,.qf--check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:14px;line-height:1.5;color:var(--ink-2)}
.consent input,.qf--check input{width:20px;height:20px;min-height:0;margin:2px 0 0;accent-color:var(--blue)}
.consent a,.qf--check a{color:var(--blue-2)}
.form__note,.form-ok,.qform__ok{padding:14px 16px;background:var(--air);border-left:3px solid var(--blue-2);font-size:14px;line-height:1.5;color:var(--ink)}
.form__note{margin:0}
.form-ok a,.qform__ok a{color:var(--blue-2);font-weight:700}
@media (max-width:599px){.f-row{grid-template-columns:minmax(0,1fr)}}

/* Schlussanfrage mit Kurzformular (Landingpages) */
.lp-final{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start}
.lp-final h2{margin-bottom:16px}
.lp-final > div > p{color:var(--fg-2);font-size:18px;line-height:1.55}
.lp-final{align-items:stretch}
.lp-final > div{display:flex;flex-direction:column}
.lp-final > div > p{margin:0}
.lp-final__card{flex:1;margin-top:32px;padding:32px;box-shadow:var(--shadow)}
.qform{border-top:3px solid var(--blue)}
.qform{position:relative;padding:36px;border-radius:var(--r-card);box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.qform__badge{position:absolute;top:-1px;right:24px;font-family:inherit;font-size:12px;font-weight:700;color:#fff;background:var(--blue);padding:6px 10px}
.qform__h{margin-bottom:20px;padding-right:96px}
.qform__form{display:grid;gap:16px}
.qform__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.qf{display:grid;gap:6px;min-width:0}
.qf--full,.qf--check{grid-column:1 / -1}
.qform__ok-ico{display:inline-block;width:10px;height:10px;background:var(--blue-2);margin-right:8px}
@media (max-width:1023px){.lp-final{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:599px){.qform{padding:28px 20px}.qform__grid{grid-template-columns:minmax(0,1fr)}}

/* Einsatzfälle */
.lp-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--ln);border:1px solid var(--ln)}
.lp-case{display:flex;flex-direction:column;gap:14px;padding:32px 28px;background:var(--bg)}
.lp-case p{margin:0;font-size:15px;line-height:1.5;color:var(--fg-2)}
.lp-case__ico svg *{stroke-width:1.5}
@media (max-width:1023px){.lp-cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.lp-cases{grid-template-columns:minmax(0,1fr)}.lp-case{padding:24px 20px}}

/* Ablauf-Schritte als Zeitleiste: Linie lädt sich, Schritte leuchten nacheinander, Schritt 4 = Ziel */
.lp-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;position:relative}
.lp-steps::before,.lp-steps::after{content:"";position:absolute;left:0;right:0;top:24px;height:2px;background:var(--ln)}
.lp-steps::after{background:var(--mark);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease) .2s}
.lp-steps.in::after{transform:scaleX(1)}
.lp-steps li{position:relative;min-width:0}
.lp-steps__n{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;margin-bottom:24px;font-variant-numeric:tabular-nums; /* Arial: Schrittnummer ist kein Messwert */font-weight:700;font-size:18px;color:var(--fg-h);background:var(--navy);border:1px solid var(--ln);transition:border-color .4s var(--ease),box-shadow .4s var(--ease),background-color .4s var(--ease)}
.lp-steps.in .lp-steps__n{border-color:var(--mark);box-shadow:0 0 24px -6px var(--mark)}
.lp-steps.in li:nth-child(2) .lp-steps__n{transition-delay:.5s}.lp-steps.in li:nth-child(3) .lp-steps__n{transition-delay:.9s}.lp-steps.in li:nth-child(4) .lp-steps__n{transition-delay:1.3s}
.lp-steps li:last-child .lp-steps__n{background:var(--accent);color:var(--navy);border-color:var(--accent)}
.lp-steps__ic{position:absolute;top:12px;right:0;color:var(--mark)}
.lp-steps__ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square}
[data-surface="light"] .lp-steps__n,[data-surface="air"] .lp-steps__n{background:#fff}
.lp-steps h3{margin-bottom:8px}
.lp-steps p{margin:0;font-size:15px;line-height:1.5;color:var(--fg-2)}
/* Zeitleiste mit Punkt-Knoten (24 px, Icon), z. B. Lebenszyklus (Christoph 30.09.) */
.lp-steps--dots{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.lp-steps--dots::before,.lp-steps--dots::after{top:11px}
.lp-steps--dots .lp-steps__n{width:24px;height:24px;border-radius:50%;margin-bottom:20px;background:var(--blue-2);border:0;color:#fff;box-shadow:0 0 0 4px var(--bg)}
.lp-steps--dots.in .lp-steps__n{box-shadow:0 0 0 4px var(--bg)}
.lp-steps--dots .lp-steps__n svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square}
.lp-steps--dots li:last-child .lp-steps__n{background:var(--navy);color:#fff}
.lp-steps--dots h3{margin-bottom:4px}
.lp-steps__tag{display:block;margin-bottom:10px;font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kick)}
.lp-steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1023px){.lp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-steps::before,.lp-steps::after{display:none}}
@media (max-width:1023px){.lp-steps--dots{grid-template-columns:minmax(0,1fr);gap:24px}.lp-steps--dots::before,.lp-steps--dots::after{display:block;left:11px;right:auto;top:0;bottom:0;width:2px;height:auto}.lp-steps--dots::after{transform:scaleY(0);transform-origin:top}.lp-steps--dots.in::after{transform:scaleY(1)}.lp-steps--dots li{padding-left:44px;min-height:24px}.lp-steps--dots .lp-steps__n{position:absolute;left:0;top:0;margin:0}}
@media (max-width:599px){.lp-steps{grid-template-columns:minmax(0,1fr);gap:28px}.lp-steps::before,.lp-steps::after{display:block;left:23px;right:auto;top:0;bottom:0;width:2px;height:auto}.lp-steps::after{transform:scaleY(0);transform-origin:top}.lp-steps.in::after{transform:scaleY(1)}.lp-steps li{padding-left:72px;min-height:48px}.lp-steps--dots::before,.lp-steps--dots::after{left:11px}.lp-steps--dots li{padding-left:44px;min-height:24px}.lp-steps__n{position:absolute;left:0;top:0;margin:0}.lp-steps__ic{top:0}}

/* Leistungsklassen-Karten (Landingpage) */
.lp-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.lp-tier{position:relative;display:flex;flex-direction:column;gap:16px;padding:32px;background:var(--card);border:1px solid var(--card-ln);border-radius:var(--r-card)}
.lp-tier--hot{border-top:3px solid var(--blue)}
.lp-tier__head{display:grid;gap:8px}
.lp-tier__tag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kick)}
.lp-tier h3{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:28px}
.lp-tier p{margin:0;font-size:15px;line-height:1.5;color:var(--fg-2)}
.lp-tier__list{list-style:none;display:grid;gap:8px;font-size:15px;color:var(--fg);flex:1}
.lp-tier__list li{padding-top:8px;border-top:1px solid var(--ln)}
@media (max-width:1023px){.lp-tiers{grid-template-columns:minmax(0,1fr)}}

/* Datentabelle */
.dtable-wrap{margin-top:64px}
.dtable-wrap h2{margin-bottom:12px}
.dtable-wrap > p{color:var(--fg-2)}
/* Datentabelle hell mit Zebrastreifen (Christoph 30.09.): Kopf links, Zeilenköpfe wie Zellen, Zahlen rechtsbündig Arial tabular */
.dtable__scroll{overflow-x:auto;margin-top:24px;border:1px solid var(--line);background:#fff;border-radius:var(--r-card)}
.dtable{width:100%;border-collapse:collapse;font-size:15px;color:var(--ink)}
.dtable caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* sichtbare Überschrift ist die H2 */
.dtable thead th{padding:14px 20px;text-align:left;vertical-align:bottom;font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2);background:#fff;border-bottom:2px solid var(--navy);white-space:nowrap}
.dtable tbody th,.dtable td{padding:12px 20px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left;font-weight:400}
.dtable tbody th{font-weight:700;color:var(--navy)}
.dtable td,.dtable thead th + th{text-align:right;font-variant-numeric:tabular-nums}
.dtable tbody tr:nth-child(even){background:var(--air)}
.dtable td.dtable__doc,.dtable thead th:nth-child(4){text-align:left}
.dtable__doc a{color:var(--blue-2);font-weight:700;font-size:14px}
.dtable tbody tr:last-child > *{border-bottom:0}
.dtable tbody tr:hover{background:#E6EDF8}
.dtable .bar{display:block;height:4px;margin:6px 0 0 auto;width:var(--p);min-width:4px;background:var(--blue-2)}
.dtable td:has(.bar){width:220px}
.dtable__hint{display:none;font-size:13px;color:var(--fg-2);margin:8px 0 0}
@media (max-width:767px){.dtable__hint{display:block}}
.src-note{margin-top:12px}

/* Data-Centre-Rating */
/* DCC als 4 Kennzahl-Kacheln (Christoph 30.09.) */
.dcc{margin-top:48px}
.dcc h3{margin-bottom:12px}
.dcc > p{color:var(--fg-2);max-width:72ch}
.dcc-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.dcc-list li{display:flex;flex-direction:column;gap:16px;padding:24px;background:var(--card);border:1px solid var(--card-ln);border-radius:var(--r-card);font-size:15px;line-height:1.45;color:var(--fg)}
.dcc__ic svg{display:block;width:40px;height:40px;fill:none;stroke:var(--kick);stroke-width:1.3;stroke-linecap:square}
.dcc .src-note{margin-top:16px}
@media (max-width:1023px){.dcc-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.dcc-list{grid-template-columns:minmax(0,1fr)}.dcc-list li{flex-direction:row;align-items:center;padding:16px}.dcc__ic svg{width:32px;height:32px}}

/* Rechtstexte */
.legal__body{max-width:72ch}
.legal__body h2{font-size:24px;margin:40px 0 12px}
.legal__body h3{font-size:19px;margin:28px 0 8px}
.legal__body p,.legal__body li{color:var(--fg-2);font-size:16px}
.legal__body ul{padding-left:20px;margin-bottom:1em}
/* Hendrik 07.10.: Luft zwischen Schrittliste und Folgetext auf der Anfrage-Bestätigung */
.legal__body .next{margin:0 0 28px}
.legal__body a{color:var(--link)}
/* J-035: 404-Seite, Einstiegsliste mit Trefferflächen ≥ 48 px */
.legal__body .nf-links{list-style:none;padding:0;margin:8px 0 32px;border-top:1px solid var(--ln)}
.legal__body .nf-links li{margin:0}
.legal__body .nf-links a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;padding:12px 0;border-bottom:1px solid var(--ln);color:var(--fg-h);font-weight:700;text-decoration:none}
.legal__body .nf-links a:hover{color:var(--blue-2)}
.legal__body .nf-links svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--blue-2);stroke-width:2}

/* Seitenübersicht */
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:32px;font-size:14px;color:var(--fg-2)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.d{display:inline-block;width:10px;height:10px;background:var(--ln)}
.d--live{background:var(--blue)}
.d--tool{background:var(--blue-2)}
.troot{margin-bottom:24px}
.tnode{display:inline-flex;flex-direction:column;gap:2px;padding:16px 20px;border:1px solid var(--card-ln);border-left:3px solid var(--blue);background:var(--card);color:var(--fg-h);text-decoration:none;font-weight:700}
.tnode small{font-weight:400;font-size:13px;color:var(--fg-2)}
.tbranches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tbranch{border-top:2px solid var(--fg-h);padding-top:16px;min-width:0}
.tbranch__h{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kick);margin-bottom:12px}
.leaf{display:block;padding:10px 0;border-bottom:1px solid var(--ln);color:var(--fg-h);text-decoration:none;font-weight:700}
.leaf small,.leaf .kw{display:block;font-weight:400;font-size:13px;color:var(--fg-2)}
a.leaf:hover{color:var(--link)}
@media (max-width:1023px){.tbranches{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.tbranches{grid-template-columns:minmax(0,1fr)}}

/* 9 · Fuß ---------------------------------------------------------------- */
.foot{padding:80px 0 32px;font-size:15px}
.foot__grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:48px}
.foot__plate{display:inline-block;margin-bottom:20px}
.foot__plate img{height:40px;width:auto;filter:brightness(0) invert(1)}
.foot__brand p{color:var(--fg-2);max-width:40ch;font-size:15px}
.foot h4{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kick);margin-bottom:16px}
.foot__grid > div > a{display:block;padding:5px 0;color:var(--fg);text-decoration:none}
.foot__grid > div > a:hover{color:var(--accent)}
.foot__bottom{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--ln);font-size:13px;color:var(--fg-2)}
.foot__bottom a{color:var(--fg);text-decoration:none}
.foot__bottom a:hover{text-decoration:underline}
.foot__bottom .sep{color:var(--ln)}
.foot__stub{color:var(--fg-2)}
@media (max-width:1023px){.foot__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot__brand{grid-column:1 / -1}}
@media (max-width:599px){.foot{padding:56px 0 40px}.foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}}

/* Mobile Leiste (volle Breite) und Desktop-Pill. Sichtbar erst nach dem Hero-CTA,
   ausgeblendet über Kontakt/Anfrage und Fuß (app.js setzt .on). */
.mcta{display:none}
@media (max-width:819px){
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .mcta{position:fixed;left:0;right:0;bottom:0;z-index:95;display:grid;grid-template-columns:1fr 1fr;padding-bottom:env(safe-area-inset-bottom);background:var(--navy);box-shadow:0 -1px 0 var(--accent)}
  .mcta a{display:flex;align-items:center;justify-content:center;gap:8px;height:56px;font-size:16px;font-weight:700;text-decoration:none}
  .mcta__call{position:relative;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
  .mcta__lbl{position:relative}
  .mcta .mcta__lbl::after{top:-5px;right:-13px;box-shadow:0 0 0 2px var(--navy),0 0 8px 1px var(--led-glow) /* J-035: am Wortende statt an der Feldmitte */}
  .mcta__req{background:var(--blue-2);color:#fff}
  .mcta a:focus-visible{outline:2px solid #fff;outline-offset:-4px}
  .mcta svg{width:18px;height:18px}
  .mcta svg.ic-l{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
}
.qcall{position:fixed;right:24px;bottom:24px;z-index:80;display:flex;align-items:center;gap:6px;padding:5px;background:var(--blue-2);border:1px solid var(--accent);border-radius:var(--r-card);box-shadow:0 18px 40px -12px rgba(0,21,59,.55),0 2px 6px rgba(0,21,59,.25);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.qcall.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s}
.qcall a{display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-weight:700}
.qcall__req{gap:10px;min-height:44px;padding:0 16px;font-size:16px;border-radius:var(--r-btn)}
.qcall__req:hover{background:#1A55C4 /* Hover-Aufhellung wie .btn--call */}
.qcall__req svg{width:18px;height:18px}
.qcall__call{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.6)}
.qcall__call::after,.mcta__lbl::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--led);box-shadow:0 0 0 2px var(--blue-2),0 0 8px 1px var(--led-glow)} /* „erreichbar“ (Christoph 30.09.) */
.qcall__call::after{top:1px;right:1px}
.qcall__call:hover{background:rgba(255,255,255,.14)}
.qcall__call svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.qcall a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.qcall.pulse .qcall__call{animation:qpulse 1.4s var(--ease) .35s 1}
@keyframes qpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
@media (max-width:819px){.qcall{display:none}}

/* 10 · Bewegung ---------------------------------------------------------- */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.reveal-ready .rv{opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.rv.in{opacity:1;transform:none}
.reveal-ready .inds.rv > *,.reveal-ready .tiers.rv > *,.reveal-ready .prod.rv > *,.reveal-ready .stats.rv > *,.reveal-ready .lp-cases.rv > *,.reveal-ready .lp-steps.rv > *,.reveal-ready .lp-tiers.rv > *,.reveal-ready .bess__grid.rv > *,.reveal-ready .welten.rv > *{opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .4s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.reveal-ready .rv.in > *{opacity:1;transform:none}
.rv.in > :nth-child(2){transition-delay:60ms}.rv.in > :nth-child(3){transition-delay:120ms}.rv.in > :nth-child(4){transition-delay:180ms}
.rv.in > :nth-child(5){transition-delay:240ms}.rv.in > :nth-child(6){transition-delay:300ms}.rv.in > :nth-child(7){transition-delay:360ms}.rv.in > :nth-child(8){transition-delay:420ms}
.inds.rv.in > a.ind:hover,.prod.rv.in > a.prow:hover{transform:translateY(-2px);transition-delay:0s}
.reveal-ready .welten.rv.in > .welt:hover,.welten > .welt:hover{transform:translateY(-3px);transition-delay:0s}
.hero__status,.hero h1,.hero__sub,.hero__lead,.hero__cta,.hero__trust,.hero__media,.phero .wrap > *{animation:rise .5s var(--ease) both}
.hero h1,.phero h1{animation-delay:60ms}.hero__sub,.hero__lead{animation-delay:120ms}.hero__cta{animation-delay:180ms}.hero__trust{animation-delay:240ms}.hero__media{animation-delay:120ms}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important /* Nutzerwunsch „weniger Bewegung“ hat Vorrang vor allen Komponenten */}
  .rv,.rv > *{opacity:1!important;transform:none!important /* Inhalte sofort sichtbar */}
}

/* 11 · Druck ------------------------------------------------------------- */
@media print{.utility,.hdr,.mcta,.qcall,.hero__grid{display:none}.rv,.rv > *{opacity:1;transform:none}[data-surface]{background:#fff;color:#000}}

.foot__bottom--solo{border-top:0;padding-top:0}

/* Hero-CTA: beide Buttons auf einer Zeile ab 1024px, 52px hoch, 12px Abstand (Christoph 30.09., Punkt 26) */
@media (min-width:1024px){
  .hero__cta{flex-wrap:nowrap;gap:12px}
  .hero__cta .btn{min-width:0;white-space:nowrap;height:52px;flex:none}
}
@media (min-width:1024px) and (max-width:1279px){
  .hero__in,.hero__in:has(> .hero__media:not(.hero__media--product)){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}
/* Freigestelltes Aggregat im Hero: neutrale Farben, Kontaktschatten per CSS (Christoph 30.09., Punkt 25) */
.hero__media--cut{align-items:flex-end}
.hero__media--cut img{width:108%;margin-right:-8%;max-height:none;filter:none}
.hero__floor{position:absolute;z-index:0;left:0;right:-10%;bottom:-3%;height:14%;background:radial-gradient(ellipse at center,rgba(0,0,0,.5) 0%,rgba(0,0,0,.28) 38%,rgba(0,0,0,0) 70%);pointer-events:none}
.hero__media--cut .hero__badge{left:-8px;bottom:-22px;box-shadow:0 18px 40px -16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}
@media (max-width:1023px){.hero__media--cut img{width:100%;margin-right:0}.hero__floor{right:0}}
/* /rechner: helle, kompakte .phero, Rechner schließt auf hellem Grund an, dunkel nur das Ergebnis (Christoph 30.09., Punkt 27) */
.phero--compact{padding:calc(var(--hdr-h) + 40px) 0 8px}
.phero--compact h1{margin-bottom:12px}
.phero--compact p:not(.crumb){font-size:18px}
#rechner.sec--tight{padding-top:40px}
/* Kontakt-Aside auf weißem Grund hellblau, damit keine reine Weißfläche entsteht (Christoph 30.09., Punkt 22/27) */
[data-surface="light"] .aside > .card,[data-surface="light"] .lp-final__card{background:var(--air);border-color:#DCE4F2}
/* Rechner-Teaser: 5/7, oben bündig, Mini-Schritte links, Werte in Arial, Ergebnis auf Stage mit LED (Christoph 30.09., Punkt 32) */
#rechner:has(.lp-teaser){padding:72px 0}
.lp-teaser{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.lp-teaser__steps{list-style:none;display:flex;flex-wrap:nowrap;gap:14px;margin:28px 0 24px;padding:0} /* alle drei in einer Zeile (Christoph 09.10.) */
.lp-teaser__steps li{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--fg-h);white-space:nowrap}
.lp-teaser__steps li + li::before{content:"→";color:var(--kick);margin-right:6px}
.lp-teaser__ic svg{display:block;width:28px;height:28px;fill:none;stroke:var(--kick);stroke-width:1.4;stroke-linecap:square;stroke-linejoin:miter}
@media (max-width:419px){
  .lp-teaser__steps{gap:8px}
  .lp-teaser__steps li{gap:6px;font-size:14px}
  .lp-teaser__ic svg{width:24px;height:24px}
}
.lp-teaser__head span{display:none}
.lp-teaser__dots{display:flex;gap:8px}
.lp-teaser__dots button{width:10px;height:10px;padding:0;border:1.5px solid var(--blue-2);border-radius:50%;background:transparent;cursor:pointer}
.lp-teaser__dots button[aria-selected="true"]{background:var(--blue-2)}
.lp-teaser__dots button:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px}
/* J-035: unter 1080 px und auf Touch-Geräten Trefferfläche 32 × 44 px (WCAG 2.5.8 ≥ 24 px), sichtbarer Punkt bleibt 10 px, Punkte bleiben dicht gruppiert; negative Ränder halten die Kopfzeile so hoch wie bisher */
@media (max-width:1079px),(pointer:coarse){
  .lp-teaser__head{flex-wrap:wrap;gap:14px 8px /* passen Text und Punkte nicht in eine Zeile (320 px), rutschen die Punkte darunter */}
  .lp-teaser__dots{gap:0;margin:-17px -11px}
  .lp-teaser__dots button,.lp-teaser__dots button[aria-selected="true"]{display:grid;place-items:center;width:32px;height:44px;border:0;border-radius:0;background:transparent}
  .lp-teaser__dots button::before{content:"";width:10px;height:10px;border:1.5px solid var(--blue-2);border-radius:50%;background:transparent}
  .lp-teaser__dots button[aria-selected="true"]::before{background:var(--blue-2)}
  .lp-teaser__dots button:focus-visible{outline:0}
  .lp-teaser__dots button:focus-visible::before{outline:2px solid var(--blue-2);outline-offset:3px}
}
.lp-teaser__row b{font-family:var(--font);font-weight:700} /* keine Monospace für Beispielwerte */
.lp-teaser__vals{transition:opacity .22s var(--ease)}
.lp-teaser__vals.swap{opacity:0}
.lp-teaser__row--hot{background:var(--stage-bg);align-items:center}
.lp-teaser__row--hot > span{display:inline-flex;align-items:center;gap:10px;color:var(--mist)}
.lp-teaser__micro{font-size:14px;text-align:center}
@media (prefers-reduced-motion:reduce){.lp-teaser__vals{transition:none}}
/* Stats im Stil der Proof-Leiste: Linien-Icons, große Zahl, 1 Zeile Text (Christoph 30.09., Punkt 30) */
.stat{padding:48px 32px}
.stat__ico,[data-surface="stage"] .stat__ico{width:auto;height:auto;display:block;background:none;box-shadow:none;color:var(--kick);margin-bottom:20px}
.stat__ico svg{width:48px;height:48px;stroke-width:1.2}
.stat .n{font-size:clamp(40px,2vw + 20px,52px);line-height:1}
.stat__unit{margin:10px 0 8px;color:var(--kick)}
.stats{border-color:var(--ln)}
@media (max-width:479px){.stat{padding:32px 16px}.stat__ico svg{width:36px;height:36px}}
/* Formular-Badge: blau mit LED, bündiger Tab an der Kartenoberkante, Arial (Christoph 30.09., Punkt 33) */
.qform__badge{display:inline-flex;align-items:center;gap:8px;top:-1px;right:24px;transform:none;font-family:var(--font);font-size:12px;line-height:1;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--blue-2);padding:8px 12px;border-radius:0 0 2px 2px}
/* .ind-Kacheln: Trennlinie, Gain-Text und Link je Reihe auf einer Höhe (Christoph 30.09., Punkt 36) */
.ind p.ind__gain{min-height:calc(2 * 1.5em + 13px)}
/* Produktfoto in einer Szenen-Reihe: bewusst als Studioaufnahme gesetzt */
.ind__media--studio{background:#E9EDF3}
.ind__media--studio img{object-fit:contain;padding:16px}
/* Stats-Band als Fläche wie die Proof-Leiste (Christoph 30.09., Punkt 30) */
[data-surface="light"] .stats,[data-surface="air"] .stats{background:var(--card);border:1px solid var(--card-ln)}
[data-surface="light"] .stat + .stat,[data-surface="air"] .stat + .stat{border-left-color:var(--card-ln)}
/* Trust-Zeile höchstens 1 Zeile auf Desktop: bei schmaler Hero-Spalte nur die ersten 2 Punkte (Christoph 30.09., Punkt 26) */
@media (min-width:1024px) and (max-width:1279px){.hero__trust li:nth-child(n+3){display:none}}
/* Teaser unter 1024 einspaltig (die 5/7-Regel oben steht später als die alte Mobil-Regel) */
@media (max-width:1023px){.lp-teaser{grid-template-columns:minmax(0,1fr);gap:40px}#rechner:has(.lp-teaser){padding:56px 0}.lp-teaser__panel{padding:20px}}
/* Hero-Badge rechts unten, wo das Motiv links unten das Hersteller-Logo trägt (Designkritik 30.09., Punkt 5) */
.hero__media.hero__media--badge-r .hero__badge{left:auto;right:-16px}
/* H1 mobil: längstes Wort (Diesel-Stromaggregate, per .nobr ohne Umbruch) passt in die Zeile (Designkritik 30.09., Punkt 6) */
@media (max-width:399px){.hero h1{font-size:min(30px,7.6vw)}}
/* Header 1201–1320 px: Navigation enger, damit der Anfrage-Button bündig an der Containerkante endet (Designkritik 30.09., Punkt 1) */
@media (min-width:1201px) and (max-width:1320px){.nav__top{padding:0 8px;font-size:14px}.nav__top::after{left:8px;right:8px}}
/* Kein Umbruch am Bindestrich, Keyword bleibt mit normalem Bindestrich lesbar (Designkritik 30.09., Punkt 6) */
.nobr{white-space:nowrap}

/* J-026: technische Downloads im Stil der BESS-Datenblatt-Links */
.downloads{list-style:none;padding:0;margin:0;display:grid;gap:0}
.downloads li{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;padding:18px 0;border-bottom:1px solid var(--ln);flex-wrap:wrap}
.downloads li span{font-size:14px;color:var(--fg-2)}

/* J-026: Versandstatus und Schutz vor Doppelversand */
.form-status{padding:16px;background:var(--air);border-left:3px solid var(--blue-2);font-size:14px;line-height:1.5;color:var(--ink);margin-top:16px}
.form-status:focus{outline:2px solid var(--blue-2);outline-offset:3px}
form[aria-busy="true"] button[type="submit"]{opacity:.7;cursor:wait}

.legal__body a.btn--primary{color:var(--btn-fg)}

/* J-032 · Aus der Praxis: 4:3, damit die Speicher am Standort Ibbenbüren komplett im Bild sind */
.inds--praxis .ind__media{aspect-ratio:4 / 3}
/* J-032 · FAQ-Antworten mit Liste (Garantie) */
.faq__a ul{list-style:none;margin:0 0 12px;padding:0;max-width:64ch}
.faq__a li{position:relative;padding:4px 0 4px 20px;color:var(--fg-2);font-size:16px;line-height:1.5}
.faq__a li::before{content:"";position:absolute;left:0;top:calc(4px + .75em - 3px);width:6px;height:6px;background:var(--blue-2)}
.faq__a .faq__body > p{color:var(--fg-2);font-size:16px;line-height:1.6;max-width:64ch;margin:0 0 10px}
.faq__i.open .faq__a .faq__body{padding-bottom:22px}
.faq__i.open .faq__a .faq__body > p{padding-bottom:0}
/* Hendrik 08.10.: Social- und Business-Kanäle im Footer */
.foot__social{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px}
.foot__social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--fg);text-decoration:none;font-size:14px}
.foot__social a:hover{color:var(--accent)}
.foot__social svg{flex:none}