/* ==========================================================================
   Technik-Service Rethwisch — Onepager, Richtung "SCHALTPLAN"
   Fünf Farben. Radius 0. Hairlines. Eine blaue Leiterbahn durch die Seite.
   ========================================================================== */
:root{
  --white:#FFFFFF;          /* Grund */
  --paper:#F4F8FB;          /* kühles Planpapier */
  --ink:#10233A;            /* Tinten-Navy */
  --blue:#1069BE;           /* Leiterbahn, CTA, Maßlinien */
  --hair:#C7D5E2;           /* Hairlines, Raster */
  --muted:rgba(16,35,58,.74);
  --line-ui:rgba(16,35,58,.5);
  --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono","Cascadia Code",Consolas,"Roboto Mono",Menlo,"Liberation Mono",monospace;
  --h1:clamp(2.05rem,1.25rem + 3.2vw,3.45rem);
  --h2:clamp(1.55rem,1.2rem + 1.5vw,2.3rem);
  --h3:clamp(1.0625rem,1.02rem + .2vw,1.1875rem);
  --lead:clamp(1.0625rem,1rem + .3vw,1.1875rem);
  --body:1rem;
  --small:.9375rem;
  --label:.6875rem;
  --wrap:1140px;
  --pad:clamp(24px,2.2vw + 14px,44px);
  --sy:clamp(4rem,2.8rem + 4.5vw,7rem);
  --sy-lg:clamp(4.75rem,3.2rem + 5.5vw,8rem);
  --dur:170ms; --ease:cubic-bezier(.22,.61,.36,1);
  --z-header:100; --z-bar:110;
  --gear:#4D4D4D;            /* Zahnrad-Grau aus dem Logo */
  --rot:0deg;                 /* wird beim Scrollen gesetzt */
  --gear-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.71 3.29 L10.75 0.07 L13.25 0.07 L13.29 3.29 L15.24 3.82 L16.88 1.04 L19.05 2.29 L17.47 5.10 L18.90 6.53 L21.71 4.95 L22.96 7.12 L20.18 8.76 L20.71 10.71 L23.93 10.75 L23.93 13.25 L20.71 13.29 L20.18 15.24 L22.96 16.88 L21.71 19.05 L18.90 17.47 L17.47 18.90 L19.05 21.71 L16.88 22.96 L15.24 20.18 L13.29 20.71 L13.25 23.93 L10.75 23.93 L10.71 20.71 L8.76 20.18 L7.12 22.96 L4.95 21.71 L6.53 18.90 L5.10 17.47 L2.29 19.05 L1.04 16.88 L3.82 15.24 L3.29 13.29 L0.07 13.25 L0.07 10.75 L3.29 10.71 L3.82 8.76 L1.04 7.12 L2.29 4.95 L5.10 6.53 L6.53 5.10 L4.95 2.29 L7.12 1.04 L8.76 3.82ZM17.00 12A5 5 0 1 0 7.00 12A5 5 0 1 0 17.00 12Z'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;position:relative;background:var(--white);color:var(--ink);
  font:400 var(--body)/1.65 var(--font);hyphens:manual;overflow-wrap:break-word;overflow-x:clip;
  -webkit-font-smoothing:antialiased;counter-reset:sec}
img,svg{max-width:100%}
h1,h2,h3{margin:0;color:var(--ink);text-wrap:balance;font-family:var(--font)}
h1{font-size:var(--h1);line-height:1.06;letter-spacing:-.028em;font-weight:700;max-width:20ch}
h2{font-size:var(--h2);line-height:1.14;letter-spacing:-.022em;font-weight:700;max-width:24ch}
h3{font-size:var(--h3);line-height:1.35;letter-spacing:-.008em;font-weight:600}
p{margin:0;max-width:64ch;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
strong{color:var(--ink)}
:where(a,button,summary,input,select,textarea):focus-visible{
  outline:2px solid var(--blue);outline-offset:2px}
.inv :where(a,button,summary):focus-visible{outline-color:var(--white)}
[id]{scroll-margin-top:108px}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Raster / Layout -------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:820px;margin-inline:0}
.sec{padding-block:var(--sy)}
.sec--lg{padding-block:var(--sy-lg)}
.sec--paper{background:var(--paper);border-block:1px solid var(--hair)}
.sec--paper + .sec--paper{border-top:0}
.mono{font-family:var(--mono)}

/* technisches Raster — nur Hero und "Der Betrieb" */
.raster{position:relative}
.raster::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(199,213,226,.55) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(199,213,226,.55) 1px,transparent 1px);
  background-size:52px 52px;background-position:0 0}
.raster > .wrap{position:relative;z-index:2}

/* Sektionskopf */
.shead{max-width:62ch;margin-bottom:clamp(2.25rem,1.6rem + 2vw,3.25rem)}
.shead > p:not(.eyebrow){margin-top:1.1rem;font-size:var(--lead);line-height:1.6;
  max-width:56ch;color:var(--muted)}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 1.1rem;
  font:700 var(--label)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.eyebrow{counter-increment:sec}
.eyebrow::before{content:counter(sec,decimal-leading-zero)}
.eyebrow::after{content:"";width:34px;height:1px;background:var(--blue);flex:none}
.inv .eyebrow{color:var(--white)}
.inv .eyebrow::after{background:var(--white)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.icon{flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:square;stroke-linejoin:miter}

/* --- Buttons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;
  min-height:48px;padding:0 24px;border:0;border-radius:0;cursor:pointer;
  font:600 var(--body)/1.2 var(--font);text-decoration:none;text-align:center;
  transition:background-color var(--dur),border-color var(--dur),color var(--dur)}
.btn .icon{width:19px;height:19px}
.btn--pri{background:var(--blue);color:var(--white)}
.btn--pri:hover{background:var(--ink);color:var(--white)}
.btn--sec{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--sec:hover{background:var(--ink);color:var(--white)}
.inv .btn--sec{color:var(--white);border-color:var(--white)}
.inv .btn--sec:hover{background:var(--white);color:var(--ink)}
.btn--block{width:100%}

/* --- Kopfzeile --------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:var(--z-header);background:var(--white);
  border-bottom:1px solid var(--hair);height:72px}
.hdr[data-scrolled="true"]{border-bottom-color:var(--line-ui)}
.hdr__in{display:flex;align-items:center;gap:1rem;height:100%;min-width:0}
.brand{display:flex;align-items:center;flex:none}
.brand img{display:block;height:56px;width:auto}
@media (min-width:1100px){.hdr{height:88px}.brand img{height:68px}
  .hdr .wrap{max-width:calc(1240px + 2*var(--pad))}}
@media (max-width:359px){.brand img{height:48px}}
.nav{display:none;margin-left:1.25rem}
.nav ul{display:flex;align-items:center;gap:1.05rem}
@media (min-width:1360px){.nav{margin-left:1.75rem}.nav ul{gap:1.5rem}}
.nav a{position:relative;display:block;padding:6px 0;font-size:14.5px;font-weight:600;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.nav a:hover{color:var(--blue)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.hdr__tel{display:none;align-items:center;gap:9px;margin-left:auto;
  font:600 .875rem/1 var(--mono);letter-spacing:.02em;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.hdr__tel:hover{color:var(--blue)}
.hdr__tel .icon{width:17px;height:17px;color:var(--blue)}
.hdr__cta{display:none;flex:none;min-height:42px;padding-inline:18px;font-size:.9375rem}
.lang{display:flex;align-items:center;gap:1px;margin-left:auto;flex:none}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:32px;padding:0 2px;font:600 .75rem/1 var(--mono);
  letter-spacing:.08em;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;transition:color var(--dur),border-color var(--dur)}
.lang a:hover{color:var(--blue)}
.lang a[aria-current]{color:var(--ink);border-bottom-color:var(--blue)}
@media (min-width:1100px){.lang{margin-left:.25rem}}
.burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  margin-left:6px;background:transparent;border:1px solid var(--line-ui);
  border-radius:0;color:var(--ink);cursor:pointer}
.burger:hover{border-color:var(--ink)}
@media (min-width:1100px){
  .nav{display:block}.burger{display:none}
  .hdr__cta{display:inline-flex;margin-left:.75rem}
}
@media (min-width:1280px){.hdr__tel{display:inline-flex}}
@media (max-width:1279px) and (min-width:1100px){.hdr__cta{margin-left:auto}}
.panel{position:fixed;inset:72px 0 auto 0;z-index:90;background:var(--white);
  border-bottom:1px solid var(--hair);padding:.5rem 0 1.5rem}
.panel[hidden]{display:none}
.panel a{display:block;padding:14px 0;font-size:17px;font-weight:600;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--hair)}
.panel a:hover{color:var(--blue)}
.panel .btn{margin-top:1.25rem;width:100%}
@media (min-width:1100px){.panel{display:none}}

/* --- Leiterbahn (Overlay) ---------------------------------------------- */
#trace{position:absolute;top:0;left:0;z-index:3;pointer-events:none;display:block}
#trace .spine,#trace .br{fill:none;stroke:var(--blue);stroke-width:2}
#trace .br{transition:stroke-dashoffset 420ms var(--ease)}
#trace .gear{fill:var(--white);stroke:var(--line-ui);stroke-width:1;fill-rule:evenodd;
  transition:fill 300ms var(--ease),stroke 300ms var(--ease)}
#trace .on > .gear{fill:var(--gear);stroke:var(--gear)}
#trace .dark.on > .gear{fill:var(--hair);stroke:var(--hair)}
#trace .runner .gear{fill:var(--gear);stroke:none}
#trace .runner .ring{fill:none;stroke:var(--gear);stroke-width:2.2}
#trace .runner.dark .gear{fill:var(--hair)}
#trace .runner.dark .ring{stroke:var(--hair)}
#trace .runner{transition:opacity 300ms}
#trace .hub{fill:var(--blue);opacity:0;transition:opacity 300ms}
#trace .on > .hub,#trace .runner .hub{opacity:1}
/* Werkzeuge */
#trace .tool{color:var(--ink);opacity:0;transition:opacity 350ms var(--ease)}
#trace .tool.on{opacity:1}
#trace .tool.dark{color:var(--white)}
#trace .tool *{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#trace .tool .ac{stroke:var(--blue)}
#trace .tool.dark .ac{stroke:#9CC4EC}
#trace .tool .fl{fill:currentColor;stroke:none}
#trace .tool .led{fill:var(--blue);stroke:none}
#trace .tool.dark .led{fill:#9CC4EC}
#trace .tool .an{transform-box:view-box}
#trace .tool.on .an{animation:var(--anim) 5s var(--ease) infinite}
@keyframes t-wrench{0%,32%,100%{transform:rotate(0)}8%{transform:rotate(-38deg)}17%{transform:rotate(12deg)}25%{transform:rotate(-24deg)}}
@keyframes t-needle{0%,40%,100%{transform:rotate(-40deg)}12%{transform:rotate(38deg)}20%{transform:rotate(18deg)}28%{transform:rotate(30deg)}}
@keyframes t-wave{0%,40%,100%{opacity:.15}8%,30%{opacity:1}}
@keyframes t-flash{0%,30%,100%{opacity:1}5%,15%{opacity:.15}10%,20%{opacity:1}}
@keyframes t-spin{0%{transform:rotate(0)}30%,100%{transform:rotate(90deg)}}
@keyframes t-plug{0%,45%,100%{transform:translateX(-5px)}15%,35%{transform:translateX(0)}}
@keyframes t-scan{0%,40%,100%{transform:translate(0,0)}10%{transform:translate(-3px,-2px)}20%{transform:translate(2px,-3px)}30%{transform:translate(1px,2px)}}
@keyframes t-bob{0%,30%,100%{transform:translateY(0)}10%{transform:translateY(-3px)}20%{transform:translateY(0)}}
@keyframes t-dig{0%,40%,100%{transform:rotate(0)}12%{transform:rotate(18deg)}24%{transform:rotate(-12deg)}}
#trace .pulse{fill:none;stroke:var(--blue);stroke-width:1.5;opacity:0;
  transform-box:fill-box;transform-origin:center}
#trace .pulse.go{animation:tpulse 750ms ease-out 1}
@keyframes tpulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
#trace .term{fill:var(--white);stroke:var(--blue);stroke-width:2}
#trace .termdot{fill:var(--blue);stroke:none}
#trace text{font:700 10px var(--mono);fill:var(--blue);letter-spacing:.12em}

/* --- Hero --------------------------------------------------------------- */
.hero{position:relative;background:var(--white);border-bottom:1px solid var(--hair);overflow:clip}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--white) 0%,rgba(255,255,255,.72) 42%,rgba(255,255,255,0) 72%)}
.hero > .wrap{position:relative;z-index:2;
  padding-block:clamp(3rem,2rem + 3.5vw,5.5rem) clamp(3rem,2.2rem + 3vw,5rem)}
.hero__grid{display:grid;gap:clamp(2.5rem,1.5rem + 3vw,4rem)}
@media (min-width:1000px){
  .hero__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center}
}
.hero__meta{display:flex;align-items:center;gap:12px;margin:0 0 1.4rem;
  font:700 var(--label)/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.hero__meta::before{content:"";width:16px;height:16px;flex:none;background:var(--gear);
  -webkit-mask:var(--gear-mask) center/contain no-repeat;mask:var(--gear-mask) center/contain no-repeat;
  transform:rotate(var(--rot))}
.uline{background:linear-gradient(var(--blue),var(--blue)) 0 96%/100% 3px no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:2px}
.hero__lead{margin-top:1.35rem;font-size:var(--lead);line-height:1.6;max-width:50ch;color:var(--muted)}
.hero__voice{margin-top:1.1rem;padding-left:14px;border-left:2px solid var(--blue);
  font-size:var(--body);font-style:italic;color:var(--ink);max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
.hero__cta .btn{flex:1 1 100%}
@media (min-width:560px){.hero__cta .btn{flex:0 1 auto}}
.hero__cta .btn--sec{font-family:var(--mono);font-size:.9375rem;letter-spacing:.02em}
.facts{display:grid;grid-template-columns:1fr;gap:.65rem 2rem;margin-top:2rem;padding-top:1.4rem;
  border-top:1px solid var(--hair);font-size:var(--small);color:var(--muted)}
.facts li{display:flex;align-items:flex-start;gap:10px;min-width:0}
.facts .icon{width:18px;height:18px;color:var(--blue);margin-top:3px}
@media (min-width:440px){.facts{grid-template-columns:1fr 1fr;gap:.65rem 1.5rem}}
.hero__note{margin-top:.9rem;font:400 .75rem/1.5 var(--mono);letter-spacing:.03em;color:var(--muted)}

/* --- Plandetail: gerahmtes Bild mit Maßlinien --------------------------- */
.plate{margin:0;position:relative}
.anno{display:flex;align-items:center;margin:0 0 16px;color:var(--blue);
  font:700 var(--label)/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase}
.anno::before{content:"";flex:none;width:16px;height:16px;background:var(--gear);
  -webkit-mask:var(--gear-mask) center/contain no-repeat;mask:var(--gear-mask) center/contain no-repeat;
  transform:rotate(var(--rot))}
.anno .ln{flex:none;width:26px;height:1px;background:var(--blue);margin-right:12px}
.plate__box{position:relative;border:1px solid var(--hair);background:var(--white);padding:10px}
.plate__box img{display:block;width:100%;height:auto;aspect-ratio:var(--ar,16/9);
  object-fit:cover;object-position:var(--pos,50% 50%);background:var(--paper)}
.dim{position:absolute;background:var(--blue)}
.dim--t{left:0;top:-14px;height:1px;width:100%}
.dim::before,.dim::after{content:"";position:absolute;width:13px;height:13px;background:var(--gear);
  -webkit-mask:var(--gear-mask) center/contain no-repeat;mask:var(--gear-mask) center/contain no-repeat;
  transform:rotate(var(--rot))}
.dim::after{transform:rotate(calc(var(--rot) * -1))}
.dim--t::before,.dim--t::after{top:-6px}
.dim--t::before{left:-6px}.dim--t::after{right:-6px}
.dim--r{top:0;right:-14px;width:1px;height:100%}
.dim--r::before,.dim--r::after{left:-6px}
.dim--r::before{top:-6px}.dim--r::after{bottom:-6px}
.dim--l{top:0;left:-14px;width:1px;height:100%}
.dim--l::before,.dim--l::after{left:-6px}
.dim--l::before{top:-6px}.dim--l::after{bottom:-6px}
.plate figcaption{margin-top:.9rem;font-size:.875rem;color:var(--muted);max-width:52ch}

/* --- Karten (Leistungen) ------------------------------------------------ */
.grid{display:grid;gap:clamp(1.25rem,.9rem + 1.4vw,2rem)}
.grid--3{grid-template-columns:minmax(0,1fr)}
.grid--2{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:880px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid--4{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.grid--4 .card{padding:1.6rem 1.4rem 1.4rem}
.grid--4 .card h3{padding-right:1.25rem;font-size:1.0625rem}

.card{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--hair);padding:1.9rem 1.75rem 1.6rem;
  transition:border-color var(--dur)}
.card__no{position:absolute;top:1.3rem;right:1.5rem;
  font:700 var(--label)/1 var(--mono);letter-spacing:.14em;color:var(--muted)}
.card__ico{width:30px;height:30px;color:var(--blue);margin-bottom:1.15rem}
.card h3{margin-bottom:.55rem;padding-right:2.5rem}
.card > p{font-size:var(--small);color:var(--muted)}
.card--link:hover{border-color:var(--blue)}
.card--link:has(a:focus-visible){outline:2px solid var(--blue);outline-offset:3px}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card h3 a:focus-visible{outline:none}
.card__more{margin-top:auto;padding-top:1.4rem;display:inline-flex;align-items:center;gap:8px;
  font:700 .8125rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.card__more .icon{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.card--link:hover .card__more .icon{transform:translateX(4px)}

/* --- Team --------------------------------------------------------------- */
.team{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1.2rem + 3vw,3.5rem);
  max-width:960px;margin-top:2.75rem}
.tphoto{position:relative;aspect-ratio:4/5;max-width:330px;display:grid;place-items:center;
  background:var(--paper);border:1px dashed var(--line-ui);color:var(--muted);
  background-image:
    linear-gradient(var(--hair),var(--hair)),linear-gradient(var(--hair),var(--hair));
  background-size:1px 44px,44px 1px;background-position:center center;background-repeat:no-repeat}
.tphoto{font:700 clamp(2rem,3.4vw,2.75rem)/1 var(--mono);letter-spacing:.1em}
.tphoto__note{position:absolute;bottom:.9rem;left:0;right:0;text-align:center;
  font:700 var(--label)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tname{margin-top:1.25rem}
.tmeta{font-size:var(--small);color:var(--muted);line-height:1.6;margin-top:.3rem}
.tquote{margin-top:.9rem;padding-left:14px;border-left:2px solid var(--blue);
  font-style:italic;font-size:var(--body);color:var(--ink);max-width:40ch}
.team__close{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--hair);
  font-size:var(--lead);max-width:none}
@media (max-width:719px){
  .tphoto{max-width:280px}
}

/* --- Zweispalter Privat/Gewerbe ----------------------------------------- */
.duo{display:grid;gap:2.5rem;margin-top:clamp(2.5rem,1.8rem + 2vw,3.5rem)}
.duo__col{padding-top:1.4rem;border-top:2px solid var(--ink);display:flex;flex-direction:column}
.duo__col > .pic{margin-top:auto;border-top:1.4rem solid transparent}
.duo .pic figcaption{min-height:3em}
.duo__col h3{margin-bottom:.75rem}
.duo__col > p{margin-bottom:1rem;font-size:var(--small);color:var(--muted)}
@media (min-width:880px){.duo{grid-template-columns:1fr 1fr;gap:3.5rem}}
.checks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;
  align-items:start;padding-block:.5rem;font-size:var(--small)}
.checks .icon{width:18px;height:18px;color:var(--blue);margin-top:4px}
.checks strong{color:var(--ink)}

.duo--3{grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.duo--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}}
.band p.eyebrow,.band p.band__note{font-size:var(--label);line-height:1.4}
.band p.eyebrow{margin-top:0}
.band .checks li{color:rgba(255,255,255,.9)}
.band .checks .icon{color:#9CC4EC}
.band .checks strong{color:#fff}
.band .checks + .btn{margin-top:1.5rem}

/* Miniaturfilme (Figurenstil .fs gilt für alle Filme und das Easter Egg) */
.plate.has-film .anno{margin-bottom:58px}
.plate.has-film .anno::before,.plate.has-film .dim--t::before,.plate.has-film .dim--l::before{display:none}
.film{position:absolute;left:0;bottom:calc(100% + 13.5px);height:40px;overflow:visible;pointer-events:none;z-index:2}
.film--eyebrow{bottom:0}
.film--top{bottom:calc(100% + 1px)}
.film--card,.film--strip,.film--faq{bottom:2px}
.ftrack{position:relative;flex:1 1 auto;min-width:120px;max-width:460px;height:1px;background:currentColor}
.eyebrow.has-track::after{display:none}
.has-film-top{position:relative}
.meas > article.has-film-top::before{display:none}
.meas{row-gap:3.5rem}
.fstrip{position:relative;height:46px;margin:0 0 .9rem}
.has-film-card .card__ico{display:none}
.rowlist .fstrip{grid-column:2;max-width:380px;margin:.5rem 0 0}
@media (min-width:840px){.rowlist .fstrip{grid-column:3}}
.faq .fstrip{max-width:380px;margin:-.4rem 0 1.4rem}
.duo{gap:3.25rem}
.ref__meta{margin:-.2rem 0 .6rem;font:600 .75rem/1.5 var(--mono);letter-spacing:.04em;color:var(--blue)}
.partners{margin-top:clamp(2.75rem,2.2rem + 2vw,3.75rem);padding-top:1.4rem;border-top:2px solid var(--ink);position:relative}
.partners h3{margin-bottom:1rem}
.partners__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:560px){.partners__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.partners__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.partners__list li{display:flex;background:var(--white);border:1px solid var(--hair)}
.partners__list a{display:flex;flex-direction:column;justify-content:center;gap:4px;width:100%;min-height:96px;padding:16px 20px;
  color:var(--ink);text-decoration:none}
.partners__list strong{font-size:1rem;line-height:1.3}
.partners__list span{font-size:var(--small);line-height:1.45;color:var(--muted)}
.partners__list a::after{content:"\2197";position:absolute;top:12px;right:16px;font:600 .875rem/1 var(--mono);color:var(--blue)}
.partners__list li:hover{--cell-line:var(--blue)}
.partners__list a:hover strong{color:var(--blue)}
.partners__note{margin-top:1rem;font-size:var(--small);color:var(--muted)}
.fs .st{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fs .thin{stroke-width:1}
.fs .thick{stroke-width:2}
.fs .ac{fill:none;stroke:var(--blue);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fs .flow{stroke-dasharray:2 5}
.fs .pvp{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:butt}
.fs .gear{fill:var(--gear);fill-rule:evenodd}
.fs .hub,.fs .fillb,.fs .win,.fs .boltc,.fs .pinb,.fs .sealg{fill:var(--blue);stroke:none}
.fs .fl{fill:var(--ink);stroke:none}
.fs .pinh{fill:var(--white);stroke:none}
.fs .wheel{fill:var(--white);stroke:var(--ink);stroke-width:1.4}
.fs .body{fill:var(--white);stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.fs .cover{fill:none;stroke:var(--white);stroke-width:2}
.fs .cone{fill:var(--blue);fill-opacity:.14;stroke:none}
.fs .ring{fill:none;stroke:var(--blue);stroke-width:1;stroke-dasharray:3 3}
.fs .ground{fill:none;stroke:var(--hair);stroke-width:1}
.fs .ghost .body,.fs .ghost .wheel,.fs .ghost .st{stroke:var(--line-ui);stroke-dasharray:2 2}
.fs text{font:700 9px var(--mono);fill:var(--blue);letter-spacing:.06em;text-transform:none}
.fs text.sm{font-size:6px;letter-spacing:0}
.fs text.smw{fill:var(--white);font-size:5.5px;letter-spacing:0}
.fs .sw{transition:opacity 250ms var(--ease)}
.inv .fs .st,.inv .fs .body,.inv .fs .wheel{stroke:var(--white)}
.inv .fs .body,.inv .fs .wheel{fill:var(--ink)}
.inv .fs .ac{stroke:#9CC4EC}
.inv .fs .fillb,.inv .fs .hub{fill:#9CC4EC}
.inv .fs .gear{fill:var(--hair)}
.inv .fs text{fill:#9CC4EC}
.fs .soil{fill:var(--ink);fill-opacity:.16;stroke:var(--ink);stroke-width:1;stroke-linejoin:round}
.fs .trin{fill:var(--ink);fill-opacity:.07;stroke:none}
.fs .cut{fill:var(--film-bg,var(--white));stroke:none}
.fs .cable{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round}
.fs .bur{fill:none;stroke:var(--blue);stroke-width:1.4;stroke-dasharray:2 3;stroke-linecap:round}
.sec--paper{--film-bg:var(--paper)}
.card{--film-bg:var(--white)}
.inv{--film-bg:var(--ink)}
/* Easter Egg */
.egg{position:fixed;left:0;right:0;bottom:8px;height:130px;z-index:300;pointer-events:none}
.egg-toast{position:fixed;left:50%;top:100px;transform:translateX(-50%);z-index:301;max-width:calc(100% - 32px);
  background:var(--ink);color:var(--white);border-left:3px solid var(--blue);padding:12px 18px;font-size:.9375rem;
  box-shadow:0 10px 28px -12px rgba(16,35,58,.5);transition:opacity 400ms var(--ease)}
.egg-toast strong{color:var(--white)}
.egg-toast.out{opacity:0}

/* Fotos */
.pic{position:relative;margin:1.4rem 0 0}
.pic img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--hair);background:var(--paper)}
.pic::before{content:"";position:absolute;top:-6px;left:-6px;width:13px;height:13px;z-index:1;background:var(--gear);
  -webkit-mask:var(--gear-mask) center/contain no-repeat;mask:var(--gear-mask) center/contain no-repeat;transform:rotate(var(--rot))}
.pic figcaption{margin-top:.55rem;font:400 .75rem/1.5 var(--mono);letter-spacing:.03em;color:var(--muted)}
.split{display:grid;gap:2.5rem;margin-bottom:clamp(2.25rem,1.6rem + 2vw,3.25rem)}
.split > .shead{margin-bottom:0}
.split .plate{max-width:420px}
@media (min-width:960px){.split{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:3.5rem;align-items:start}.split .plate{margin-top:2.6rem}}
.has-bg{position:relative}
.sec-bg{position:absolute;inset:0;pointer-events:none;background:var(--bg) center/cover no-repeat;opacity:.13;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 35%,#000 75%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 35%,#000 75%)}
.has-bg > .wrap{position:relative;z-index:1}
.raster .sec-bg{opacity:.055}
.tphoto--img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--hair);background:var(--paper);padding:0}
.team{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1040px}
@media (max-width:899px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:559px){.team{grid-template-columns:1fr}}

/* PV-Zubau-Suche */
.zb{max-width:960px}
.zb__form{display:flex;flex-wrap:wrap;gap:.75rem}
.zb__form input{flex:1 1 260px;min-height:52px;padding:12px 16px;font:400 17px/1.4 var(--font);color:var(--ink);
  background:var(--white);border:1px solid var(--ink);border-radius:0}
.zb__form input:hover{border-color:var(--blue)}
.zb__form .btn{min-height:52px;flex:0 0 auto}
@media (max-width:479px){.zb__form .btn{flex:1 1 100%}}
.zb__out{margin-top:1.75rem}
.zb__out:empty{display:none}
.zb__msg{padding:1rem 1.25rem;border:1px solid var(--hair);border-left:3px solid var(--blue);font-size:var(--small);color:var(--muted)}
.zb__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;margin-bottom:1.1rem}
.zb__head h3{font-size:var(--h2);letter-spacing:-.02em}
.zb__head span{font:700 var(--label)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.zb__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media (min-width:880px){.zb__stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.zb__stats div{background:var(--white);padding:1.1rem 1.2rem 1.2rem}
.zb__stats b{display:block;font:700 clamp(1.35rem,1.1rem + 1vw,1.9rem)/1.15 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.zb__stats small{display:block;margin-top:.35rem;font:700 var(--label)/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.zb__stats em{display:block;margin-top:.3rem;font-style:normal;font-size:.875rem;color:var(--muted)}
.zb__kreis{margin-top:.9rem;font-size:var(--small);color:var(--muted)}
.zb__more{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.zb__more button{min-height:40px;padding:6px 14px;background:var(--white);border:1px solid var(--line-ui);border-radius:0;
  font:600 .875rem/1.2 var(--font);color:var(--ink);cursor:pointer}
.zb__more button:hover,.zb__more button[aria-pressed="true"]{border-color:var(--blue);color:var(--blue)}
.zb__cta{margin-top:1.25rem;font-size:var(--small)}
.zb__src{margin-top:1.5rem;font-size:.8125rem;line-height:1.55;color:var(--muted);max-width:none}

/* Kosten-Callout */
.callout{margin-top:clamp(2.5rem,2rem + 1.5vw,3.25rem);max-width:760px;
  background:var(--white);border:1px solid var(--hair);border-left:3px solid var(--blue);
  padding:1.4rem 1.6rem}
.callout p{max-width:62ch}

/* --- Chips --------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem}
.chips li{background:var(--white);border:1px solid var(--hair);border-radius:0;
  padding:9px 15px;font-size:var(--small);color:var(--ink);transition:border-color var(--dur)}
.chips li:hover{border-color:var(--blue)}

/* --- Bildband ------------------------------------------------------------ */
.band{position:relative;overflow:clip;color:var(--white);
  border-block:1px solid var(--hair);
  padding-block:clamp(5.5rem,4rem + 5vw,8.5rem)}
.band__bg{position:absolute;inset:0;background-image:var(--img);background-size:cover;
  background-position:62% 50%}
.band__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(16,35,58,.9) 0%,rgba(16,35,58,.86) 100%)}
@media (min-width:880px){.band__scrim{background:
  linear-gradient(90deg,rgba(16,35,58,.95) 0%,rgba(16,35,58,.88) 45%,rgba(16,35,58,.5) 100%)}}
.band__in{position:relative;z-index:2;max-width:35rem}
.band h2{color:var(--white)}
.band p{margin-top:1.1rem;font-size:var(--lead);line-height:1.6;color:rgba(255,255,255,.85)}
.band .btn{margin-top:1.75rem}
.band__note{margin-top:2.75rem;font:700 var(--label)/1.4 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.75)}

/* --- Ablauf --------------------------------------------------------------- */
.rowlist{position:relative;max-width:920px}
.rowlist::before{content:"";position:absolute;left:21px;top:14px;bottom:14px;width:2px;
  background:var(--hair)}
.rowlist > li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);
  gap:.15rem 1.5rem;padding-block:1.35rem}
.rowlist .step{position:relative;z-index:1;width:44px;height:44px;display:grid;place-items:center;
  background:var(--white);border:1px solid var(--blue);color:var(--blue);
  font:700 .9375rem/1 var(--mono)}
.rowlist h3{grid-column:2;align-self:center}
.rowlist p{grid-column:2;font-size:var(--small);color:var(--muted)}
@media (min-width:840px){
  .rowlist > li{grid-template-columns:44px minmax(0,21ch) minmax(0,1fr);gap:0 2.25rem}
  .rowlist h3{grid-column:2;align-self:start;padding-top:.55rem}
  .rowlist p{grid-column:3;padding-top:.55rem}
}

/* --- Kennzahlen "Prüfprotokoll" ------------------------------------------ */
.meas{display:grid;grid-template-columns:minmax(0,1fr);gap:2.75rem 2.75rem;margin-top:.5rem}
@media (min-width:560px){.meas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.meas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.meas > article{position:relative;border-top:2px solid var(--blue);padding-top:1.4rem;
  background:transparent}
.meas > article::before{content:"";position:absolute;top:-8px;left:-2px;width:16px;height:16px;
  background:var(--gear);-webkit-mask:var(--gear-mask) center/contain no-repeat;mask:var(--gear-mask) center/contain no-repeat;
  transform:rotate(var(--rot))}
.meas > article:nth-child(even)::before{transform:rotate(calc(var(--rot) * -1))}
.meas .num{display:block;font:700 clamp(1.3rem,1.1rem + .8vw,1.7rem)/1.25 var(--mono);
  letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.meas .cap{display:block;margin-top:.4rem;font:700 var(--label)/1.4 var(--mono);
  letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
.meas p{margin-top:.7rem;font-size:var(--small);color:var(--muted)}
.who{margin-top:clamp(3rem,2.4rem + 2vw,4rem);padding-top:2rem;border-top:1px solid var(--hair)}
.who p{margin-top:1rem;max-width:66ch;color:var(--muted)}

/* --- FAQ ------------------------------------------------------------------ */
.faq{margin-top:2.5rem;max-width:820px}
.faq details{border-bottom:1px solid var(--hair)}
.faq details:first-of-type{border-top:1px solid var(--hair)}
.faq summary{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;
  gap:1.25rem;min-height:60px;padding:1.15rem .125rem;cursor:pointer;
  font:600 1.0625rem/1.45 var(--font);color:var(--ink);transition:color var(--dur)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover,.faq details[open] summary{color:var(--blue)}
.faq summary .icon{width:20px;height:20px;margin-top:3px;color:var(--blue);stroke-width:2;
  transition:transform 240ms var(--ease)}
.faq details[open] summary .icon{transform:rotate(45deg)}
.faq__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 220ms var(--ease)}
.faq details[open] .faq__body{grid-template-rows:1fr}
.faq__body > div{overflow:hidden;min-height:0}
.faq__body p{padding:0 .125rem 1.4rem;max-width:62ch;font-size:var(--small);color:var(--muted)}
.faq__body strong{color:var(--ink)}

/* --- Kontakt --------------------------------------------------------------- */
.contact{display:grid;gap:clamp(1.5rem,1rem + 2vw,2.5rem)}
@media (min-width:1000px){
  .contact{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:3.5rem;align-items:start}
  .contact__aside{position:sticky;top:100px}
}
.formcard{position:relative;background:var(--white);border:1px solid var(--hair);
  padding:clamp(1.5rem,1rem + 2vw,2.5rem);
  box-shadow:0 10px 28px -20px rgba(16,35,58,.28)}
.formcard__tag{display:flex;align-items:center;gap:10px;margin:0 0 1.5rem;
  font:700 var(--label)/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.formcard__tag::before{content:"";width:16px;height:16px;flex:none;background:var(--gear);
  -webkit-mask:var(--gear-mask) center/contain no-repeat;mask:var(--gear-mask) center/contain no-repeat;
  transform:rotate(calc(var(--rot) * -1))}
.f{margin-bottom:1.25rem;min-width:0}
.f--row{display:grid;gap:1.25rem}
@media (min-width:600px){.f--row{grid-template-columns:1fr 1fr}}
.f label,.f legend{display:block;margin-bottom:8px;font:700 var(--label)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.f .req{color:var(--blue)}
.f input,.f select,.f textarea{width:100%;min-height:48px;padding:12px 14px;
  font:400 16px/1.4 var(--font);color:var(--ink);background:var(--white);
  border:1px solid var(--ink);border-radius:0;transition:border-color var(--dur)}
.f textarea{min-height:124px;resize:vertical}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--blue)}
.f .hint{margin-top:6px;font-size:.875rem;color:var(--muted)}
.err{display:none;align-items:flex-start;gap:8px;margin-top:7px;
  font-size:.875rem;font-weight:600;color:var(--ink)}
.err .icon{width:15px;height:15px;margin-top:4px;color:var(--ink)}
.f[data-invalid="true"] .err{display:flex}
.f[data-invalid="true"] input,.f[data-invalid="true"] select,.f[data-invalid="true"] textarea{
  border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
fieldset.f{border:0;padding:0;margin:0 0 1.25rem}
fieldset.f legend{padding:0}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg label{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;
  margin:0;padding:8px 12px;border:1px solid var(--line-ui);border-radius:0;
  font:600 var(--small)/1.3 var(--font);letter-spacing:0;text-transform:none;cursor:pointer;
  transition:background-color var(--dur),border-color var(--dur),color var(--dur)}
.seg label:hover{border-color:var(--ink)}
.seg input:checked + label{background:var(--blue);border-color:var(--blue);color:var(--white)}
.seg input:focus-visible + label{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width:479px){.seg{grid-template-columns:1fr}}
.seg.seg--4{grid-template-columns:1fr 1fr}
@media (min-width:1200px){.seg--4{grid-template-columns:repeat(4,1fr)}}
.thema-hint{margin:10px 0 0;font:400 .75rem/1.5 var(--mono);letter-spacing:.04em;color:var(--muted);min-height:1.2em}
.check{display:flex;align-items:flex-start;gap:12px;margin:1.5rem 0}
.check input{width:22px;height:22px;min-height:0;margin:2px 0 0;flex:none;accent-color:var(--blue)}
.check label{margin:0;font-size:var(--small);font-weight:400;color:var(--muted)}
.note{display:none;align-items:flex-start;gap:12px;padding:1.25rem;border:1px solid var(--hair);
  margin-bottom:1.5rem}
.note[data-show="true"]{display:flex}
.note .icon{width:21px;height:21px;margin-top:2px}
.note--ok{border-left:3px solid var(--blue)}
.note--ok .icon{color:var(--blue)}
.note--bad{border-left:3px solid var(--ink)}
.note--bad .icon{color:var(--ink)}
.note p{margin-top:4px;font-size:var(--small);color:var(--muted)}
.contact__aside dl{margin:0}
.contact__aside dt{margin-top:1.5rem;font:700 var(--label)/1.4 var(--mono);
  letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
.contact__aside dd{margin:6px 0 0;color:var(--ink)}
.contact__aside dd a{font-weight:600}
.contact__aside .btn{margin-bottom:.5rem;font-family:var(--mono);font-size:.9375rem}
.contact__aside > h3{margin-bottom:.75rem}
.contact__aside > .aside-lead{font-size:var(--small);color:var(--muted);margin-bottom:1.25rem}
.contact__note{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--hair);
  font-size:.875rem;color:var(--muted)}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Fußzeile ---------------------------------------------------------------- */
.ftr{background:var(--ink);color:var(--hair);padding-top:var(--sy);padding-bottom:2rem}
.ftr__grid{display:grid;gap:2.5rem}
@media (min-width:640px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.ftr__grid{grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:2rem}}
.ftr h2{font:700 var(--label)/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--white);margin-bottom:1rem;max-width:none}
.ftr a{color:var(--white);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding-block:6px}
.ftr a:hover{color:var(--hair)}
.ftr__logo{display:inline-block;background:var(--white);padding:12px 16px;margin-bottom:1.25rem}
.ftr__logo img{display:block;height:84px;width:auto}
.ftr__bottom{margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid rgba(199,213,226,.3);
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;font-size:.875rem}
.ftr small{font-size:var(--small)}
.ftr p{color:var(--hair)}

/* --- Mobile Kontaktleiste ------------------------------------------------------ */
.bar{position:fixed;inset:auto 0 0 0;z-index:var(--z-bar);display:grid;grid-template-columns:auto auto minmax(0,1fr);
  gap:10px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:var(--white);border-top:1px solid var(--hair);
  transition:transform 200ms var(--ease),visibility 200ms}
.bar[data-hidden="true"]{transform:translateY(110%);visibility:hidden}
.bar .btn{min-height:48px;padding-inline:8px;font-size:.9375rem;gap:6px}
.bar .btn .icon{width:17px;height:17px}
@media (min-width:768px){.bar{display:none}}
@media (max-width:767px){
  .ftr{padding-bottom:calc(2rem + 68px + env(safe-area-inset-bottom))}
  :where(a,button,summary,input,select,textarea){scroll-margin-bottom:84px}
}

/* --- Skip-Link ------------------------------------------------------------------ */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--white);
  padding:12px 20px;font-weight:600;text-decoration:none}
.skip:focus{left:0;color:var(--white)}

/* Triage-Fixes (Detektor): Panel-CTA, Hover auf Dunkel */
.panel .btn--pri,.panel .btn--pri:hover{color:#fff}
.ftr a:hover,.band a:hover,.inv a:hover{color:#9CC4EC}
.ftr .btn--pri:hover,.band .btn--pri:hover{color:#fff}

/* --- Einblendung ---------------------------------------------------------------- */
.js .rv{opacity:0;transform:translateY(10px);
  transition:opacity 300ms var(--ease),transform 300ms var(--ease);
  transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .js .rv{opacity:1!important;transform:none!important}
  #trace .pulse{display:none}
  #trace .tool .an{animation:none!important}
  .bar[data-hidden="true"]{display:none;transform:none}
}
/* Keine Silbentrennung in Headlines und Stimme */
h1,h2,h3,.hero__voice,.tquote,.team__close{hyphens:none;-webkit-hyphens:none}
p,li,figcaption,dd{text-wrap:pretty}

/* ===== PV-Zellen-Look ======================================================
   Bilder und Kästen haben abgeschrägte Ecken wie eine monokristalline Zelle,
   dahinter liegt ein weicher Schatten. --cc = Größe der Ecke.               */
.card,.formcard,.plate__box,.cta-box{--cc:16px}
.partners__list li{--cc:10px}
.pic{--cc:12px}
.tcard{--cc:14px}
.zb__stats{--cc:12px}
.plate__box img{--cc:10px}
.card,.formcard,.cta-box,.plate__box,.partners__list li,.plate__box img,.pic img,.tphoto--img,.zb__stats,.rowlist .step{
  --cut:polygon(var(--cc) 0,calc(100% - var(--cc)) 0,100% var(--cc),100% calc(100% - var(--cc)),calc(100% - var(--cc)) 100%,var(--cc) 100%,0 calc(100% - var(--cc)),0 var(--cc))}
/* Kästen: Fläche (::before) und Schatten (::after) liegen hinter dem Inhalt */
.card,.formcard,.cta-box,.plate__box,.partners__list li,.rowlist .step{background:transparent;border-color:transparent;box-shadow:none;isolation:isolate}
.rowlist .step{--cc:8px;--cell-line:var(--blue)}
.partners__list li{position:relative}
.card--link:hover{border-color:transparent;--cell-line:var(--blue)}
.card::before,.formcard::before,.cta-box::before,.plate__box::before,.partners__list li::before,.rowlist .step::before{
  content:"";position:absolute;inset:-1px;z-index:-1;pointer-events:none;clip-path:var(--cut);
  border:1px solid var(--cell-line,var(--hair));background-color:var(--cell-bg,var(--white));
  background-image:linear-gradient(to bottom right,transparent calc(50% - 2px),var(--cell-line,var(--hair)) calc(50% - 2px) calc(50% + 1px),transparent calc(50% + 1.6px)),linear-gradient(to bottom left,transparent calc(50% - 2px),var(--cell-line,var(--hair)) calc(50% - 2px) calc(50% + 1px),transparent calc(50% + 1.6px)),linear-gradient(to top left,transparent calc(50% - 2px),var(--cell-line,var(--hair)) calc(50% - 2px) calc(50% + 1px),transparent calc(50% + 1.6px)),linear-gradient(to top right,transparent calc(50% - 2px),var(--cell-line,var(--hair)) calc(50% - 2px) calc(50% + 1px),transparent calc(50% + 1.6px));
  background-position:left top,right top,right bottom,left bottom;background-size:var(--cc) var(--cc);
  background-repeat:no-repeat;background-origin:border-box}
.card::after,.formcard::after,.cta-box::after,.plate__box::after,.partners__list li::after,.pic::after,.tcard::after,.rowlist .step::after{
  content:"";position:absolute;inset:-1px;z-index:-2;pointer-events:none;
  background:linear-gradient(135deg,transparent calc(var(--cc) * .7071),var(--ink) 0) left top/50.5% 50.5% no-repeat,linear-gradient(225deg,transparent calc(var(--cc) * .7071),var(--ink) 0) right top/50.5% 50.5% no-repeat,linear-gradient(315deg,transparent calc(var(--cc) * .7071),var(--ink) 0) right bottom/50.5% 50.5% no-repeat,linear-gradient(45deg,transparent calc(var(--cc) * .7071),var(--ink) 0) left bottom/50.5% 50.5% no-repeat;
  opacity:.2;filter:blur(9px);transform:translate(7px,11px)}
.partners__list li::after{opacity:.14;filter:blur(6px);transform:translate(4px,6px)}
.rowlist .step::after{opacity:.16;filter:blur(3px);transform:translate(3px,4px)}
/* Bilder: Ecken direkt am Bild abschneiden, Schatten über den Rahmen (.pic, .tcard) */
.plate__box img,.pic img,.tphoto--img{clip-path:var(--cut);border:0}
.pic,.tcard{position:relative;isolation:isolate}
.pic::after{inset:auto;top:0;left:0;width:100%;aspect-ratio:3/2}
.tcard::after{inset:auto;top:0;left:0;width:100%;max-width:330px;aspect-ratio:4/5}
.zb__stats{clip-path:var(--cut)}
.zb__cell{filter:drop-shadow(7px 11px 9px rgba(16,35,58,.2))}
.ftr__logo{clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.egg-toast{clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%,0 10px)}

/* ===== Halbzellen: Buttons und kleine Kästen ================================
   Wie eine halbierte Zelle: nur die beiden oberen Ecken sind abgeschrägt,
   die Schnittkante unten ist gerade. Dahinter ein kleiner Schatten.
   Ausgenommen: Eingabefelder und Auswahlknöpfe im Formular.                */
.btn,.burger,.zb__more button,.note,.zb__msg{
  --hc:9px;--hb-bg:var(--white);--hb-line:var(--hair);
  --half:polygon(var(--hc) 0,calc(100% - var(--hc)) 0,100% var(--hc),100% 100%,0 100%,0 var(--hc));
  position:relative;isolation:isolate;background:transparent;border-color:transparent}
.burger,.zb__more button{--hc:7px}
.note,.zb__msg{--hc:11px}
.btn--pri{--hb-bg:var(--blue);--hb-line:var(--blue)}
.btn--pri:hover{--hb-bg:var(--ink);--hb-line:var(--ink);background:transparent}
.btn--sec{--hb-bg:var(--white);--hb-line:var(--ink)}
.btn--sec:hover{--hb-bg:var(--ink);background:transparent}
.inv .btn--sec{--hb-bg:transparent;--hb-line:var(--white);border-color:transparent}
.inv .btn--sec:hover{--hb-bg:var(--white);background:transparent}
.btn--sec::before{inset:-1px}
.burger{--hb-line:var(--line-ui)}
.burger:hover{--hb-line:var(--ink);border-color:transparent}
.zb__more button{--hb-line:var(--line-ui)}
.zb__more button:hover,.zb__more button[aria-pressed="true"]{--hb-line:var(--blue);border-color:transparent}
.note--ok,.zb__msg{--hb-accent:var(--blue)}
.note--bad{--hb-accent:var(--ink)}
.note--ok,.note--bad,.zb__msg{border-left-color:transparent}
.btn::before,.burger::before,.zb__more button::before,.note::before,.zb__msg::before{
  content:"";position:absolute;inset:-1px;z-index:-1;pointer-events:none;clip-path:var(--half);
  border:1px solid var(--hb-line);background-color:var(--hb-bg);box-shadow:inset 3px 0 0 var(--hb-accent,transparent);
  background-image:linear-gradient(to bottom right,transparent calc(50% - 2px),var(--hb-line) calc(50% - 2px) calc(50% + 1px),transparent calc(50% + 1.6px)),linear-gradient(to bottom left,transparent calc(50% - 2px),var(--hb-line) calc(50% - 2px) calc(50% + 1px),transparent calc(50% + 1.6px));
  background-position:left top,right top;background-size:var(--hc) var(--hc);background-repeat:no-repeat;
  background-origin:border-box;transition:background-color var(--dur),border-color var(--dur)}
.btn::before{inset:0}
.btn::after,.burger::after,.zb__more button::after,.note::after,.zb__msg::after{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(135deg,transparent calc(var(--hc) * .7071),var(--ink) 0) left top/50.5% 50.5% no-repeat,
    linear-gradient(225deg,transparent calc(var(--hc) * .7071),var(--ink) 0) right top/50.5% 50.5% no-repeat,
    linear-gradient(var(--ink),var(--ink)) left bottom/100% 50.5% no-repeat;
  opacity:.2;filter:blur(5px);transform:translate(4px,6px)}
.inv .btn::after{opacity:.35}

/* ===== Überarbeitung nach Gutachten (Oktober 2026) ===================================== */
/* Navigation: aktuelle Seite */
.nav a[aria-current="page"]{color:var(--blue)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.bar .btn{white-space:normal;line-height:1.15}
/* Hero */
.hero__area{display:flex;align-items:flex-start;gap:10px;margin-top:1.1rem;font-size:var(--small);color:var(--muted);max-width:52ch}
.hero__area .icon{width:18px;height:18px;color:var(--blue);margin-top:3px}
.hero__cta + .hero__voice{margin-top:1.6rem}
.hero--sub > .wrap{padding-block:clamp(1.75rem,1.2rem + 2vw,3rem) clamp(2.75rem,2rem + 3vw,4.5rem)}
.hero--sub h1{font-size:clamp(1.9rem,1.25rem + 2.5vw,3rem);max-width:22ch}
.hero__grid--solo{grid-template-columns:minmax(0,1fr)!important}
.hero__grid--solo .hero__lead{max-width:62ch}
/* Brotkrumen */
.crumbs{margin:0 0 1.75rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.25rem .5rem;font:600 .75rem/1.5 var(--mono);letter-spacing:.05em;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:.5rem}
.crumbs li + li::before{content:"\203A";color:var(--blue);font-weight:700}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--blue);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}
/* Leistungskarten mit zwei Aktionen */
.card--svc h3 a::after{content:none}
.card--svc h3 a:hover{color:var(--blue)}
.card--svc .checks{margin:.5rem 0 .25rem}
.card--svc > p + p{margin-top:.5rem}
.card__acts{margin-top:auto;padding-top:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem}
.card__acts .card__more{margin:0;padding:0;text-decoration:none}
.card__acts .card__more:hover .icon{transform:translateX(4px)}
.btn--sm{min-height:42px;padding:0 16px;font-size:.9375rem}
/* Hinweis mit Knopf */
.callout--cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;max-width:none}
.callout--cta p{flex:1 1 360px}
.sec__cta{margin-top:2rem}
.more-link{margin-top:2.25rem}
.more-link a{display:inline-flex;align-items:center;gap:8px;font:700 .8125rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.more-link .icon{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.more-link a:hover .icon{transform:translateX(4px)}
/* Team-Fakten */
.meas--4{margin-top:clamp(3rem,2.4rem + 2vw,4rem)}
@media (min-width:960px){.meas--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.meas--4 .num{font-size:clamp(1.15rem,1rem + .55vw,1.45rem)}
/* Kontakt-Kasten auf den Unterseiten */
.cta-box{position:relative;display:grid;gap:1.5rem;padding:clamp(1.6rem,1.2rem + 2vw,2.6rem)}
@media (min-width:880px){.cta-box{grid-template-columns:minmax(0,1.4fr) auto;align-items:center;gap:2.5rem}}
.cta-box h2{max-width:26ch}
.cta-box p{margin-top:.8rem;color:var(--muted);font-size:var(--lead)}
.cta-box__acts{display:flex;flex-wrap:wrap;gap:.75rem}
.cta-box__acts .btn--sec{font-family:var(--mono);font-size:.9375rem}
@media (max-width:559px){.cta-box__acts .btn{flex:1 1 100%}}
/* PV-Zubau im Seitenkopf */
.zb--hero{margin-top:2.25rem;max-width:960px}
.plate--follow{margin-top:clamp(1.75rem,1.4rem + 1.2vw,2.25rem)}
.grid--plates{align-items:end}
.sec-note{margin-top:clamp(2.25rem,1.8rem + 1.2vw,3rem);max-width:74ch;color:var(--muted)}
.tlang{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-top:.6rem;font-size:var(--small);color:var(--ink)}
.tlang .tl{display:inline-flex;align-items:center;gap:.45rem}
.flag{width:21px;height:14px;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(16,35,58,.22)}
.tcontact{font-size:var(--small);line-height:1.6;margin-top:.5rem}
.ftr__person{margin-top:.6rem}
.sec-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.grid--plates .plate figcaption{min-height:3.3em}
/* Formular: Themen als 2×2 */
.seg.seg--2{grid-template-columns:1fr 1fr}
@media (max-width:479px){.seg.seg--2{grid-template-columns:1fr}}
fieldset.f[data-invalid="true"] .seg label{border-color:var(--ink)}
fieldset.f .err{margin-top:8px}