/* ==========================================================================
   ONE Energy Solutions – Theme-Stylesheet
   Tokens (CI), Basis, Navigation, Hero mit Achse, Sektionen, Formulare, Funnel
   ========================================================================== */

/* Schrift: Aptos (wenn auf dem Gerät vorhanden), sonst Roboto (selbst gehostet, variable) */
@font-face{
  font-family:"Roboto";
  src:url("../fonts/Roboto-Variable.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --green:#17ac6c; --green-soft:#4fd39a; --green-dark:#149a60;
  --night:#1a1e23; --night-deep:#111417;
  --paper:#f4f4f1; --pale:#ecece7; --line:#d9d9d9; --ink:#272727; --ink-soft:#5d6c7b;
  --ochre:#826e50; --gold:#c9a66b; --white:#fff; --error:#de1800;

  --bg:var(--paper); --bg-alt:var(--white); --tile:var(--white); --fg:var(--ink); --fg-soft:var(--ink-soft);
  --rule:var(--line); --nav-bg:rgba(255,255,255,.96);
  --font:"Aptos","Roboto","Segoe UI",system-ui,-apple-system,sans-serif;
  --radius:14px;

  /* 3D-Bühne */
  --n:8; --W:262px; --H:162px; --R:282px; --stepY:120px; --stepA:45deg; --tilt:-8deg; --rot:0deg; --ty:0px;
  --helixY:47%; --mt1:20%; --mt2:29%; --mb1:66%; --mb2:80%;
}
@media (max-width:1023px){ :root{ --W:224px; --H:138px; --R:232px; --stepY:100px; --helixY:44%; --mt1:16%; --mt2:26%; --mb1:60%; --mb2:74%; } }
@media (max-width:480px){ :root{ --W:176px; --H:110px; --R:168px; --stepY:80px; --helixY:42%; --mt1:16%; --mt2:26%; --mb1:58%; --mb2:72%; } }

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4,h5,h6{margin:0; font-weight:600; letter-spacing:-.012em; line-height:1.15; color:inherit}
p{margin:0}
p + p{margin-top:.9rem}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:2px}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}

.wrap{width:min(1180px, calc(100% - 3rem)); margin-inline:auto}
@media (max-width:640px){ .wrap{width:calc(100% - 2.5rem)} }

/* WordPress-Basisblöcke im Fluss */
.wp-block-group > * + *{margin-top:var(--flow, 1rem)}
.wp-block-group.wrap{margin-inline:auto}
.wp-block-heading + p, .wp-block-heading + .wp-block-paragraph{margin-top:.8rem}
.one-section{padding:clamp(3.5rem, 7vw, 6rem) 0}
.one-section > .wrap > * + *{margin-top:1rem}
.one-section--white{background:var(--bg-alt)}
.one-section--dark{background:var(--night); color:#fff}
.one-section h2{font-size:clamp(1.75rem, 2.9vw, 2.4rem); max-width:30rem; text-wrap:balance}
.one-section h2.is-wide{max-width:none}
.one-lede{font-size:1.12rem; color:var(--fg-soft); max-width:38rem; margin-top:1rem}
.one-section--dark .one-lede{color:rgba(255,255,255,.75)}
.has-text-align-center{text-align:center}
.one-center{text-align:center; margin-inline:auto}
.one-center h2{margin-inline:auto}

/* Spalten (Basis, falls Block-Styles fehlen) */
.wp-block-columns{display:flex; gap:2rem; flex-wrap:wrap}
.wp-block-column{flex:1 1 0; min-width:0}
.wp-block-column > * + *{margin-top:1rem}
@media (max-width:781px){ .wp-block-columns:not(.is-not-stacked-on-mobile){flex-direction:column} .wp-block-column{flex-basis:100%!important} }

/* Buttons */
.wp-block-buttons{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center}
.wp-block-buttons.is-content-justification-center{justify-content:center}
.wp-block-button{margin:0}
.btn, .wp-block-button__link{
  display:inline-flex; align-items:center; gap:.65rem; padding:.85rem 1.35rem; border:1.5px solid var(--green); border-radius:4px;
  text-decoration:none; font-weight:600; font-size:1rem; line-height:1; background:var(--green); color:#fff; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover, .wp-block-button__link:hover{background:var(--green-dark); border-color:var(--green-dark); color:#fff}
.btn-ghost, .is-style-outline .wp-block-button__link{background:transparent; border-color:currentColor; color:inherit}
.btn-ghost:hover, .is-style-outline .wp-block-button__link:hover{background:rgba(0,0,0,.05); border-color:currentColor; color:inherit}
.one-section--dark .is-style-outline .wp-block-button__link:hover, .one-dark .btn-ghost:hover{background:rgba(255,255,255,.08)}
.has-arrow .wp-block-button__link::after, .btn.has-arrow::after{
  content:""; width:18px; height:18px; background:currentColor; flex:none;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
  transition:transform .25s;
}
.has-arrow .wp-block-button__link:hover::after, .btn.has-arrow:hover::after{transform:translateX(3px)}
.is-style-outline.has-arrow .wp-block-button__link::after{background:var(--green)}
.textlink{font-weight:600; text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--green); text-decoration-thickness:1.5px}

/* ---------- Kopfzeile ---------- */
.one-topbar{background:var(--night-deep); color:#fff; font-size:.92rem; text-align:center; padding:.55rem 1rem; margin:0}
.one-topbar a{color:var(--green-soft); font-weight:600}
.one-nav{position:sticky; top:0; z-index:50; height:72px; display:flex; align-items:center; background:var(--nav-bg); color:var(--fg); box-shadow:inset 0 -1px 0 var(--rule); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.one-nav > .wrap{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-top:0; width:min(1360px, calc(100% - 3rem))}
.one-nav > .wrap > * {margin-top:0}
.one-nav .one-logo img, .one-nav .wp-block-site-logo img{height:26px; width:auto}
.one-nav .wp-block-navigation{font-weight:500; font-size:.97rem}
.one-nav .wp-block-navigation a{text-decoration:none; white-space:nowrap}
.one-nav .wp-block-navigation a:hover{text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--green)}
.one-nav .wp-block-navigation__container{gap:1.6rem}
.one-nav .wp-block-navigation__responsive-container.is-menu-open{background:var(--nav-bg); color:var(--fg); padding:6rem 1.5rem 2rem}
.one-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{gap:.2rem}
.one-nav .wp-block-navigation__responsive-container.is-menu-open a{display:block; padding:.9rem 0; font-size:1.15rem; border-bottom:1px solid var(--rule)}
.one-nav .wp-block-navigation__responsive-container-open, .one-nav .wp-block-navigation__responsive-container-close{color:inherit}
.one-nav-right{display:flex; align-items:center; gap:1.25rem}
.one-nav-right > *{margin-top:0}
.one-nav-phone{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-weight:600; font-size:.97rem; white-space:nowrap}
.one-nav-phone::before{content:""; width:17px; height:17px; background:var(--green);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/></svg>") center/contain no-repeat}
.one-nav .wp-block-button__link{padding:.6rem 1.05rem; font-size:.95rem; white-space:nowrap}
.one-nav .wp-block-navigation__container{gap:1.4rem}
@media (max-width:1560px){ .one-nav-phone{display:none} }
@media (max-width:1240px){ .one-nav .wp-block-navigation__container{gap:1.05rem} .one-nav .wp-block-navigation{font-size:.92rem} }
@media (max-width:1023px){ .one-nav .one-nav-right .wp-block-buttons{display:none} }

/* Kopfbereich: Hinweisleiste scrollt weg, Navigation bleibt oben */
.skip-link{position:absolute; left:-999px; top:8px; z-index:100; background:var(--green); color:#fff; padding:.6rem 1rem; border-radius:6px; font-weight:600}
.skip-link:focus{left:8px}

/* ---------- Foto-Hero (Startseite) ---------- */
.one-photo-hero{position:relative; min-height:min(88vh, 860px); display:flex; align-items:flex-end; color:#fff; margin:0; overflow:hidden; background:var(--night)}
.one-photo-hero > * + *{margin-top:0}
.one-photo-hero .hero-media{position:absolute; inset:0; margin:0; z-index:0}
.one-photo-hero .hero-media img{width:100%; height:100%; object-fit:cover; object-position:center}
.one-photo-hero::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(17,20,23,.82) 0%, rgba(17,20,23,.55) 45%, rgba(17,20,23,.15) 100%), linear-gradient(180deg, rgba(17,20,23,.15) 0%, rgba(17,20,23,0) 40%, rgba(17,20,23,.7) 100%)}
.one-photo-hero > .wrap{position:relative; z-index:2; width:min(1180px, calc(100% - 3rem)); padding:clamp(4.5rem, 9vh, 7rem) 0 clamp(4.5rem, 9vh, 6.5rem); display:grid; grid-template-columns:minmax(0, 40rem) 1fr; align-items:end; gap:2rem}
.one-photo-hero .hero-copy > * + *{margin-top:0}
.one-photo-hero .hero-tag{color:var(--green-soft); font-weight:600; font-size:1.02rem; letter-spacing:.01em}
.one-photo-hero h1{font-size:clamp(2.2rem, 4.6vw, 3.7rem); line-height:1.05; letter-spacing:-.02em; margin-top:.6rem; text-wrap:balance}
.one-photo-hero .hero-sub{margin-top:1rem; max-width:36rem; font-size:1.1rem; color:rgba(255,255,255,.82); line-height:1.5}
.one-photo-hero ul.hero-checks{list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.55rem; font-size:1.05rem; font-weight:500}
.one-photo-hero ul.hero-checks li{display:flex; gap:.7rem; align-items:flex-start}
.one-photo-hero ul.hero-checks li::before{content:""; flex:none; width:22px; height:22px; margin-top:.1rem; border-radius:50%; background:var(--green);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='black'/><path d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='black'/><path d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
.one-photo-hero .wp-block-buttons{margin-top:1.8rem}
.one-photo-hero .is-style-outline .wp-block-button__link{color:#fff; border-color:rgba(255,255,255,.7)}
.one-photo-hero .is-style-outline .wp-block-button__link:hover{background:rgba(255,255,255,.1); color:#fff}
.one-photo-hero .hero-side{justify-self:end; display:grid; gap:.75rem; align-items:end}
.one-photo-hero .rating-badge{position:static; grid-column:auto}
.hero-trust{display:flex; flex-wrap:wrap; gap:.6rem}
.hero-trust span{display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .8rem; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); font-size:.9rem; font-weight:500; backdrop-filter:blur(6px)}
.hero-trust span::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--green-soft)}
@media (max-width:1023px){
  .one-photo-hero > .wrap{grid-template-columns:1fr; padding:3.5rem 0 3.5rem}
  .one-photo-hero .hero-side{justify-self:start}
  .one-photo-hero .rating-badge{justify-self:start}
  .one-photo-hero::before{background:linear-gradient(180deg, rgba(17,20,23,.55) 0%, rgba(17,20,23,.5) 45%, rgba(17,20,23,.86) 100%)}
}
@media (max-width:640px){
  .one-photo-hero{min-height:0}
  .one-photo-hero > .wrap{padding:3rem 0 2.5rem}
  .one-photo-hero h1{font-size:clamp(1.9rem, 8vw, 2.4rem)}
  .one-photo-hero .hero-sub{display:none}
  .one-photo-hero ul.hero-checks{font-size:.98rem}
  .one-photo-hero .rating-badge{padding:.7rem .9rem}
}

/* ---------- Achse: Alles dreht sich um Ihr Zuhause (Spine-Sektion) ---------- */
.one-spine-intro{padding-bottom:clamp(2rem, 4vw, 3rem)}
.one-spine-intro .wrap{text-align:center}
.one-spine-intro h2{margin-inline:auto; max-width:36rem}
.one-spine-intro .one-lede{margin-inline:auto}
.one-spine{position:relative; background:var(--night); color:#fff; height:calc(100vh + (var(--n) - 1) * 55vh); margin:0}
.one-spine > * + *{margin-top:0}
.one-spine__sticky{
  position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden; margin:0;
  background:radial-gradient(ellipse 58% 52% at 50% 46%, rgba(23,172,108,.16), transparent 70%), linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%);
}
.one-spine__sticky > * + *{margin-top:0}
.one-spine__sticky::after{content:""; position:absolute; right:-6%; bottom:-4%; width:min(70vw, 960px); aspect-ratio:1276/655; background:url("../img/dots.webp") no-repeat center/contain; opacity:.32; pointer-events:none}
.one-spine .spine-head{position:absolute; left:0; right:0; top:0; z-index:2; padding:calc(72px + 2vh) 1.5rem 0; text-align:center; pointer-events:none}
.one-spine .spine-head p{color:var(--green-soft); font-weight:600; font-size:.98rem}
.one-spine .spine-head h2{color:#fff; margin:.3rem auto 0; max-width:34rem; font-size:clamp(1.5rem, 2.6vw, 2.1rem)}

.stage{position:absolute; inset:0; -webkit-mask-image:linear-gradient(180deg, transparent var(--mt1), #000 var(--mt2), #000 var(--mb1), transparent var(--mb2)); mask-image:linear-gradient(180deg, transparent var(--mt1), #000 var(--mt2), #000 var(--mb1), transparent var(--mb2))}
.scene{position:absolute; inset:0; perspective:1500px; perspective-origin:50% var(--helixY)}
.helix{position:absolute; left:50%; top:var(--helixY); width:0; height:0; transform-style:preserve-3d; transform:translate3d(0, var(--ty), 0) rotateX(var(--tilt)) rotateY(var(--rot)); will-change:transform}
.axis{position:absolute; left:-1px; width:2px; top:calc(var(--stepY) * -3); height:calc(var(--stepY) * (var(--n) + 5));
  background:linear-gradient(180deg, transparent 0%, var(--green) 12%, var(--green-soft) 50%, var(--green) 88%, transparent 100%);
  box-shadow:0 0 18px 2px rgba(23,172,108,.55), 0 0 60px 6px rgba(23,172,108,.25); transform:rotateY(calc(-1 * var(--rot)))}
.arm{position:absolute; left:0; top:0; width:0; height:0; transform-style:preserve-3d; transform:translate3d(0, calc(var(--i) * var(--stepY)), 0) rotateY(calc(var(--i) * var(--stepA)))}
.arm-line{position:absolute; left:-1px; top:0; width:2px; height:var(--R); transform-origin:50% 0; transform:rotateX(90deg); background:linear-gradient(180deg, rgba(79,211,154,.95), rgba(23,172,108,.12)); opacity:var(--o,1)}
.node{position:absolute; left:-6px; top:-6px; width:12px; height:12px; border-radius:50%; background:var(--night); border:2px solid var(--green-soft); box-shadow:0 0 12px rgba(79,211,154,.8); transform:rotateY(calc(-1 * (var(--i) * var(--stepA) + var(--rot))))}
.card{position:absolute; left:calc(var(--W) / -2); top:calc(var(--H) / -2); width:var(--W); height:var(--H); transform:translateZ(var(--z, var(--R))); backface-visibility:hidden; opacity:var(--o,1);
  border-radius:var(--radius); padding:1.1rem 1.2rem; display:flex; flex-direction:column; justify-content:space-between; color:#fff; margin:0;
  background:linear-gradient(160deg, rgba(52,60,70,.97), rgba(30,35,41,.95)); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14)}
.card::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,.10) 0%, transparent 40%, transparent 65%, rgba(23,172,108,.14) 100%)}
.card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem}
.card-stage{font-size:.86rem; color:var(--green-soft); font-weight:500}
.card svg{width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.9}
.card h3{font-size:1.25rem; line-height:1.15; margin:0}
.card .card-text{display:none}
.card.is-front{border-color:rgba(79,211,154,.55); box-shadow:0 30px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(79,211,154,.15), inset 0 1px 0 rgba(255,255,255,.22)}
/* Ohne JS / für Suchmaschinen: Liste normal darstellen */
.no-js .one-spine{height:auto}
.no-js .one-spine__sticky{position:static; height:auto; padding:4rem 1.5rem}
.no-js .stage{position:static; -webkit-mask-image:none; mask-image:none}
.no-js .helix{position:static; transform:none; display:grid; gap:1rem; max-width:1100px; margin:0 auto; grid-template-columns:repeat(auto-fit, minmax(240px,1fr))}
.no-js .arm{position:static; transform:none}
.no-js .card{position:static; transform:none; height:auto; width:auto; opacity:1}
.no-js .card .card-text{display:block; color:rgba(255,255,255,.75); margin-top:.6rem; font-size:.95rem}
.no-js .axis, .no-js .arm-line, .no-js .node, .no-js .readout .ro-pos, .no-js .spine-head{display:none}

.hero-bottom{position:absolute; left:0; right:0; bottom:0; z-index:2; display:grid; grid-template-columns:1fr minmax(20rem, 34rem) 1fr; align-items:end; gap:2rem; padding:0 3rem 2.2rem; margin:0}
.hero-bottom > *{margin-top:0}
.readout{text-align:center; grid-column:2}
.ro-pos{display:flex; align-items:center; justify-content:center; gap:.8rem; color:rgba(255,255,255,.62); font-size:.92rem}
.ro-pos .track{width:7rem; height:1.5px; background:rgba(255,255,255,.16); position:relative; overflow:hidden}
.ro-pos .track i{position:absolute; left:0; top:0; bottom:0; width:12.5%; background:var(--green); transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ro-pos button{width:40px; height:40px; border-radius:50%; border:1.5px solid rgba(255,255,255,.28); background:transparent; color:#fff; display:grid; place-items:center; cursor:pointer; transition:border-color .2s, background .2s; padding:0}
.ro-pos button:hover{border-color:var(--green); background:rgba(23,172,108,.12)}
.ro-pos button:disabled{opacity:.3; cursor:default; background:transparent; border-color:rgba(255,255,255,.28)}
.ro-pos svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ro-body{margin-top:.7rem; min-height:7.4rem; transition:opacity .22s, transform .22s}
.ro-body.is-switching{opacity:0; transform:translateY(6px)}
.ro-stage{color:var(--green-soft); font-weight:500; font-size:.95rem}
.ro-title{font-size:1.6rem; line-height:1.1; margin-top:.15rem; font-weight:600}
.ro-text{margin:.45rem auto 0; color:rgba(255,255,255,.78); line-height:1.5; font-size:.98rem; max-width:30rem}
.ro-link{display:inline-block; margin-top:.5rem; font-size:.95rem; color:#fff}
.spine-hint{position:absolute; left:50%; bottom:.9rem; transform:translateX(-50%); color:rgba(255,255,255,.45); font-size:.8rem; white-space:nowrap; transition:opacity .4s}
.spine-hint.is-hidden{opacity:0}

.rating-badge{justify-self:end; grid-column:3; display:grid; row-gap:.25rem; text-decoration:none; padding:.85rem 1rem; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:rgba(255,255,255,.05); white-space:nowrap; color:#fff}
.rating-badge .stars{display:flex; gap:.15rem; color:var(--gold)}
.rating-badge strong{font-size:1.05rem; font-weight:600; line-height:1.2}
.rating-badge > span:last-child{font-size:.86rem; color:rgba(255,255,255,.62); line-height:1.3}
.rating-badge:hover{border-color:rgba(255,255,255,.3)}
.star{width:18px; height:18px; fill:currentColor}
.stars{display:inline-flex; gap:.15rem; color:var(--gold)}
.rating-inline{display:inline-flex; align-items:center; gap:.5rem; font-size:.92rem; text-decoration:none}
.rating-inline .star{width:14px; height:14px}

@media (prefers-reduced-motion: reduce){ .card,.ro-body,.ro-pos .track i{transition:none} }
@media (min-width:1024px) and (max-height:820px){
  :root{ --W:226px; --H:140px; --R:250px; --stepY:98px; --helixY:46%; --mt1:20%; --mt2:28%; --mb1:66%; --mb2:80%; }
  .one-spine .spine-head{padding-top:calc(72px + .5vh)}
  .one-spine .spine-head h2{font-size:1.4rem}
  .ro-body{min-height:5.4rem}
  .ro-text{display:none}
  .ro-title{font-size:1.35rem}
  .hero-bottom{padding-bottom:1.6rem}
  .spine-hint{display:none}
}
@media (max-width:1023px){
  .one-spine{height:calc(100vh + (var(--n) - 1) * 50vh)}
  .one-spine .spine-head{padding:calc(72px + 1vh) 1.25rem 0; text-align:left}
  .one-spine .spine-head h2{margin-left:0; font-size:1.35rem}
  .hero-bottom{grid-template-columns:1fr; padding:0 1.25rem 1.6rem}
  .readout{text-align:left; grid-column:1}
  .ro-pos{justify-content:flex-start}
  .ro-pos .track{flex:1; width:auto}
  .ro-body{min-height:7rem}
  .ro-title{font-size:1.4rem}
  .ro-text{margin-left:0; font-size:.95rem}
  .spine-hint{display:none}
}
@media (max-width:480px){ .card h3{font-size:1.05rem} .card{padding:.9rem 1rem} }

/* ---------- Seiten-Hero (Unterseiten) ---------- */
.one-page-hero{position:relative; overflow:hidden; background:linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%); color:#fff; padding:clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); margin:0}
.one-page-hero::after{content:""; position:absolute; right:-8%; bottom:-30%; width:min(60vw, 820px); aspect-ratio:1276/655; background:url("../img/dots.webp") no-repeat center/contain; opacity:.3; pointer-events:none}
.one-page-hero > .wrap{position:relative; z-index:1}
.one-page-hero .eyebrow{color:var(--green-soft); font-weight:500; font-size:1rem}
.one-page-hero h1{font-size:clamp(2.1rem, 4vw, 3.3rem); line-height:1.08; max-width:42rem; margin-top:.5rem; text-wrap:balance}
.one-page-hero p.one-lede{color:rgba(255,255,255,.78); margin-top:1rem}
.one-page-hero .wp-block-buttons{margin-top:1.6rem}
.one-page-hero .is-style-outline .wp-block-button__link{color:#fff}
.one-page-hero .is-style-outline .wp-block-button__link:hover{background:rgba(255,255,255,.08); color:#fff}
.one-page-hero--compact{padding-top:2.5rem; padding-bottom:2.5rem}
.eyebrow{color:var(--green); font-weight:500}

/* ---------- Dreifacher Meisterbetrieb ---------- */
.meister{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:3rem; align-items:center; margin-top:0}
.meister > *{margin-top:0}
.meister .eyebrow{margin-bottom:.4rem}
.meister h2{max-width:none}
.meister p{color:var(--fg-soft); margin-top:.9rem}
.meister ul{list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.6rem}
.meister li{display:flex; gap:.7rem; align-items:flex-start; font-weight:500}
.meister li::before{content:""; flex:none; width:20px; height:20px; margin-top:.15rem; border-radius:50%; background:var(--green);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='black'/><path d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='black'/><path d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
.meister-graphic{background:var(--night); border-radius:20px; padding:clamp(1.5rem, 3vw, 2.5rem); color:#fff; position:relative; overflow:hidden}
.meister-graphic::after{content:""; position:absolute; right:-15%; bottom:-35%; width:70%; aspect-ratio:1276/655; background:url("../img/dots.webp") no-repeat center/contain; opacity:.3; pointer-events:none}
.meister-graphic > *{position:relative; z-index:1}
.meister-graphic .mg-title{display:flex; align-items:center; gap:.9rem; justify-content:center}
.meister-graphic .mg-title strong{font-size:clamp(3rem, 6vw, 4.5rem); line-height:.9; letter-spacing:-.04em; color:var(--green-soft)}
.meister-graphic .mg-title span{font-size:1.5rem; font-weight:600; line-height:1.1}
.meister-graphic svg.mg-seals{width:100%; height:auto; display:block; margin-top:1.25rem}
.meister-graphic .mg-note{text-align:center; color:rgba(255,255,255,.7); font-size:.92rem; margin-top:1rem}
.meister-graphic .mg-list{display:none; list-style:none; margin:1rem 0 0; padding:0; gap:.5rem}
.meister-graphic .mg-list li{display:grid; padding:.6rem .8rem; border:1px solid rgba(255,255,255,.14); border-radius:10px; font-size:.95rem}
.meister-graphic .mg-list span{color:rgba(255,255,255,.7); font-size:.85rem}
@media (max-width:640px){
  .meister-graphic .mg-seals text{display:none}
  .meister-graphic .mg-seals{margin-top:.5rem}
  .meister-graphic .mg-list{display:grid}
}
@media (max-width:860px){ .meister{grid-template-columns:1fr; gap:2rem} }

/* ---------- Lösungen (allgemein) ---------- */
.solutions{display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; margin-top:2.5rem}
.solutions > *{margin-top:0}
.solution{position:relative; display:flex; flex-direction:column; gap:.6rem; padding:1.6rem 1.7rem; min-height:14rem; border-radius:var(--radius); background:var(--tile); border:1px solid var(--rule); text-decoration:none; color:inherit; transition:border-color .2s, transform .2s, box-shadow .2s; margin:0; overflow:hidden}
.solution:hover{border-color:var(--green); transform:translateY(-3px); box-shadow:0 24px 40px -30px rgba(0,0,0,.35)}
.solution .ico{width:48px; height:48px; border-radius:12px; background:var(--pale); display:grid; place-items:center; color:var(--green)}
.solution .ico svg{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.solution h3{font-size:1.25rem; margin-top:.4rem}
.solution p{color:var(--fg-soft); font-size:.98rem}
.solution .more{margin-top:auto; padding-top:.6rem; font-weight:600; color:var(--green); display:inline-flex; align-items:center; gap:.4rem}
.solution .more::after{content:"→"; transition:transform .2s}
.solution:hover .more::after{transform:translateX(3px)}
.solution.is-dark{background:var(--night); color:#fff; border-color:var(--night)}
.solution.is-dark p{color:rgba(255,255,255,.72)}
.solution.is-dark .ico{background:rgba(255,255,255,.08); color:var(--green-soft)}
.solution.is-dark .more{color:var(--green-soft)}
@media (max-width:1023px){ .solutions{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:640px){ .solutions{grid-template-columns:1fr} .solution{min-height:0} }

/* ---------- Sanftes Einblenden ---------- */
@media (prefers-reduced-motion: no-preference){
  .has-io .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
  .has-io .reveal.is-in{opacity:1; transform:none}
}

/* ---------- Bento ---------- */
.bento{position:relative; z-index:3; margin-top:-56px; padding-bottom:clamp(3.5rem, 7vw, 6rem)}
.bento-grid{display:grid; grid-template-columns:repeat(12, 1fr); gap:1rem; margin-top:0}
.bento-grid > *{margin-top:0}
.tile{background:var(--tile); border:1px solid var(--rule); border-radius:16px; padding:1.6rem 1.7rem; display:flex; flex-direction:column; justify-content:space-between; gap:1.2rem; min-height:14rem; margin:0; box-shadow:0 30px 60px -45px rgba(0,0,0,.4)}
.tile > * + *{margin-top:0}
.tile h3{font-size:1.35rem; line-height:1.2; text-wrap:balance}
.tile p{color:var(--fg-soft); font-size:1rem}
.tile .big{font-size:clamp(2.6rem, 4vw, 3.6rem); line-height:1; font-weight:600; letter-spacing:-.03em; color:var(--green); margin:0}
.tile .big small{font-size:1.15rem; font-weight:600; letter-spacing:0; color:var(--fg); margin-left:.4rem}
.t-a{grid-column:span 5} .t-b{grid-column:span 3} .t-c{grid-column:span 4} .t-d{grid-column:span 7} .t-e{grid-column:span 5}
.tile-dark{background:var(--night); color:#fff; border-color:var(--night)}
.tile-dark p{color:rgba(255,255,255,.72)}
.tile-dark .textlink, .tile-dark a{color:#fff}
.icon-row{display:flex; flex-wrap:wrap; gap:.6rem}
.icon-row span{width:44px; height:44px; border-radius:10px; background:var(--pale); display:grid; place-items:center; color:var(--green)}
.icon-row svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:1023px){ .t-a,.t-d{grid-column:span 12} .t-b,.t-c{grid-column:span 6} .t-e{grid-column:span 12} }
@media (max-width:640px){ .bento{margin-top:-28px} .bento-grid{gap:.75rem} .t-b,.t-c{grid-column:span 12} .tile{min-height:0; padding:1.3rem 1.35rem} }

/* ---------- Schritte / Prozess ---------- */
.steps-list{list-style:none; margin:3rem 0 0; padding:0; display:grid; grid-template-columns:repeat(5, 1fr); gap:1.5rem; position:relative; counter-reset:step}
.steps-list.is-4{grid-template-columns:repeat(4,1fr)}
.steps-list::before{content:""; position:absolute; left:1.25rem; right:1.25rem; top:1.25rem; height:1.5px; background:var(--rule)}
.steps-list li{position:relative; padding-top:3.4rem; margin:0}
.steps-list li::before{counter-increment:step; content:counter(step); position:absolute; left:0; top:0; width:2.5rem; height:2.5rem; border-radius:50%; background:var(--green); color:#fff; font-weight:600; display:grid; place-items:center; box-shadow:0 0 0 6px var(--bg-alt)}
.one-section:not(.one-section--white) .steps-list li::before{box-shadow:0 0 0 6px var(--bg)}
.steps-list h3, .steps-list strong{font-size:1.1rem; font-weight:600; line-height:1.3; display:block}
.steps-list p, .steps-list span{color:var(--fg-soft); font-size:.95rem; margin-top:.35rem; display:block}
.steps-cta{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:2.5rem}
.steps-cta small{color:var(--fg-soft); font-size:.95rem}
@media (max-width:860px){
  .steps-list, .steps-list.is-4{grid-template-columns:1fr; gap:1.5rem; margin-top:2rem}
  .steps-list::before{left:1.2rem; right:auto; top:1.25rem; bottom:1.25rem; width:1.5px; height:auto}
  .steps-list li{padding:0 0 0 4rem; min-height:2.5rem}
}

/* ---------- Zahlen & Partner ---------- */
.num-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:2.5rem 0; margin-top:0}
.num-grid > *{margin-top:0}
.num-grid strong{display:block; font-size:clamp(2.4rem, 4vw, 3.4rem); line-height:1; font-weight:600; letter-spacing:-.03em}
.num-grid span, .num-grid p{display:block; margin-top:.6rem; color:var(--fg-soft)}
.one-section--dark .num-grid{border-color:rgba(255,255,255,.14)}
.one-section--dark .num-grid span, .one-section--dark .num-grid p{color:rgba(255,255,255,.7)}
@media (max-width:860px){ .num-grid{grid-template-columns:1fr; gap:1.5rem} .num-grid > div + div{border-top:1px solid var(--rule); padding-top:1.5rem} }
.partner-strip{margin-top:2.5rem}
.partner-strip p{color:var(--fg-soft); font-weight:600}
.partner-logos{display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 2.5rem; margin-top:1.25rem}
.partner-logos img{height:34px; width:auto; max-width:140px; object-fit:contain; filter:grayscale(1); opacity:.7; transition:filter .2s, opacity .2s}
.partner-logos img:hover{filter:none; opacity:1}

/* ---------- Kacheln (Produktübersicht, Vorteile, Anleitungen) ---------- */
.one-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; margin-top:2.5rem}
.one-cards > *{margin-top:0}
.one-card{display:flex; flex-direction:column; gap:.75rem; padding:1.4rem 1.5rem; background:var(--tile); border:1px solid var(--rule); border-radius:var(--radius); text-decoration:none; color:inherit; transition:border-color .2s, transform .2s; margin:0}
.one-card > * + *{margin-top:0}
a.one-card:hover{border-color:var(--green); transform:translateY(-2px)}
.one-card .ico{width:44px; height:44px; border-radius:10px; background:var(--pale); display:grid; place-items:center; color:var(--green)}
.one-card .ico svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.one-card h3{font-size:1.15rem; line-height:1.25}
.one-card p{color:var(--fg-soft); font-size:.97rem}
.one-card .more{margin-top:auto; padding-top:.5rem; font-weight:600; font-size:.95rem; color:var(--green)}
.one-card img{border-radius:10px; aspect-ratio:16/10; object-fit:cover; width:100%}
.one-card-mark{width:34px; height:2px; background:var(--green)}

/* Drei-Spalten-Vorteile */
.why-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:2.5rem; margin-top:3rem; border-top:1px solid var(--rule); padding-top:2.5rem}
.why-grid > *{margin-top:0}
.why-grid h3{font-size:1.2rem; line-height:1.3}
.why-grid p{margin-top:.6rem; color:var(--fg-soft); font-size:1rem}
.why-grid .mark{width:34px; height:2px; background:var(--green); margin-bottom:1.1rem}
.one-section--dark .why-grid{border-color:rgba(255,255,255,.14)}
.one-section--dark .why-grid p{color:rgba(255,255,255,.72)}
@media (max-width:860px){ .why-grid{grid-template-columns:1fr; gap:2rem; margin-top:2.5rem} .why-grid > div + div{border-top:1px solid var(--rule); padding-top:2rem} }

/* ---------- Text/Bild-Reihen ---------- */
.one-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3rem; align-items:center; margin-top:2.5rem}
.one-split > *{margin-top:0}
.one-split.is-reverse > :first-child{order:2}
.one-split img{border-radius:var(--radius); width:100%; aspect-ratio:4/3; object-fit:cover}
.one-split h3{font-size:1.5rem}
.one-split p{color:var(--fg-soft); margin-top:.8rem}
@media (max-width:860px){ .one-split{grid-template-columns:1fr; gap:1.5rem} .one-split.is-reverse > :first-child{order:0} }

/* ---------- Timeline (Über uns) ---------- */
.one-timeline{list-style:none; margin:3rem 0 0; padding:0; position:relative}
.one-timeline::before{content:""; position:absolute; left:11px; top:0; bottom:0; width:2px; background:linear-gradient(180deg, var(--green), var(--rule))}
.one-timeline li{position:relative; padding:0 0 2.5rem 3rem; margin:0; display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:1.5rem; align-items:start}
.one-timeline li::before{content:""; position:absolute; left:4px; top:.35rem; width:16px; height:16px; border-radius:50%; background:var(--night); border:3px solid var(--green)}
.one-timeline .year{font-size:.95rem; font-weight:600; color:var(--green)}
.one-timeline h3{font-size:1.35rem; margin-top:.2rem}
.one-timeline p{color:var(--fg-soft); margin-top:.5rem}
.one-timeline img{border-radius:10px; aspect-ratio:4/3; object-fit:cover; width:100%}
@media (max-width:640px){ .one-timeline li{grid-template-columns:1fr} }

/* ---------- Services-Liste ---------- */
.svc-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; align-items:end}
.svc-head > *{margin-top:0}
.svc-list{list-style:none; margin:2.75rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; column-gap:3rem}
.svc-list li{display:grid; grid-template-columns:13rem 1fr; gap:1rem; padding:1.15rem 0; border-top:1px solid var(--rule); margin:0}
.svc-list li:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}
.svc-list strong{font-weight:600; hyphens:auto; overflow-wrap:anywhere}
.svc-list span{color:var(--fg-soft); font-size:.98rem}
@media (max-width:860px){ .svc-head{grid-template-columns:1fr} .svc-list{grid-template-columns:1fr; margin-top:2rem} .svc-list li{grid-template-columns:1fr; gap:.2rem} .svc-list li:nth-last-child(-n+2){border-bottom:0} .svc-list li:last-child{border-bottom:1px solid var(--rule)} }

/* ---------- Bewertungen ---------- */
.proof-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1.5rem}
.proof-head > *{margin-top:0}
.rating-line{display:flex; align-items:center; gap:.75rem; color:rgba(255,255,255,.75)}
.rating-line strong{color:#fff; font-size:1.6rem; font-weight:600; letter-spacing:-.02em}
.one-section:not(.one-section--dark) .rating-line{color:var(--fg-soft)} .one-section:not(.one-section--dark) .rating-line strong{color:var(--fg)}
.reviews{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; margin-top:2.5rem}
.review{border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); padding:1.5rem 1.6rem; background:rgba(255,255,255,.04); display:flex; flex-direction:column; gap:1rem; margin:0}
.review p{line-height:1.55; font-size:1rem}
.review footer{color:rgba(255,255,255,.6); font-size:.95rem; margin-top:auto; display:flex; align-items:center; gap:.7rem}
.review .avatar{width:38px; height:38px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-weight:600; font-size:.9rem; flex:none}
.one-section:not(.one-section--dark) .review{background:var(--tile); border-color:var(--rule)} .one-section:not(.one-section--dark) .review footer{color:var(--fg-soft)}
.proof-cta{margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid rgba(255,255,255,.14); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem; align-items:center}
.proof-cta > *{margin-top:0}
.proof-cta p{color:rgba(255,255,255,.75); margin-top:.6rem; max-width:32rem}
.proof-cta .is-style-outline .wp-block-button__link{color:#fff}
@media (max-width:860px){ .proof-cta{grid-template-columns:1fr} }

/* ---------- CTA-Band ---------- */
.one-cta-band{background:var(--night); color:#fff; border-radius:20px; padding:clamp(2rem, 4vw, 3.5rem); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem; align-items:center; position:relative; overflow:hidden; margin-top:0}
.one-cta-band > *{margin-top:0}
.one-cta-band::after{content:""; position:absolute; right:-10%; bottom:-40%; width:60%; aspect-ratio:1276/655; background:url("../img/dots.webp") no-repeat center/contain; opacity:.35; pointer-events:none}
.one-cta-band > *{position:relative; z-index:1}
.one-cta-band h2{color:#fff; font-size:clamp(1.6rem, 2.6vw, 2.2rem); max-width:26rem}
.one-cta-band p{color:rgba(255,255,255,.75); margin-top:.6rem; max-width:32rem}
.one-cta-band .is-style-outline .wp-block-button__link{color:#fff}
.one-cta-band .is-style-outline .wp-block-button__link:hover{background:rgba(255,255,255,.08); color:#fff}
@media (max-width:860px){ .one-cta-band{grid-template-columns:1fr} }

/* ---------- Team ---------- */
.team-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; margin-top:2.5rem}
@media (max-width:1023px){ .team-grid{grid-template-columns:repeat(2, 1fr); gap:1.25rem} }
@media (max-width:560px){ .team-grid{grid-template-columns:1fr} }
.team-card{margin:0; background:var(--tile); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden}
.team-card img{aspect-ratio:4/5; object-fit:cover; object-position:center top; width:100%; background:var(--pale)}
.team-card .team-body{padding:1.25rem 1.4rem 1.4rem}
.team-card .role{font-size:.95rem; color:var(--green); font-weight:500}
.team-card h3{font-size:1.35rem; margin-top:.2rem}
.team-card.is-open{display:flex; flex-direction:column; justify-content:flex-end; background:var(--night); color:#fff; border-color:var(--night); text-decoration:none}
.team-card.is-open .team-body{padding:1.4rem}
.team-card.is-open p{color:rgba(255,255,255,.72); font-size:.95rem; margin-top:.5rem}

/* ---------- Produkte ---------- */
.product-cat{padding:clamp(3rem, 6vw, 5rem) 0; border-top:1px solid var(--rule)}
.product-cat:first-of-type{border-top:0}
.product-cat .cat-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:2rem; align-items:start}
.product-cat .cat-head h2{font-size:clamp(1.6rem, 2.6vw, 2.2rem)}
.product-cat .cat-head p{color:var(--fg-soft)}
.product-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1rem; margin-top:2.25rem}
.product{background:var(--tile); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; margin:0}
.product .pimg{position:relative; background:var(--pale); aspect-ratio:4/3; overflow:hidden}
.product .pimg img{position:absolute; inset:1.25rem; width:calc(100% - 2.5rem); height:calc(100% - 2.5rem); object-fit:contain; mix-blend-mode:multiply}
.product h3{min-height:2.5em}
.product .pbody{padding:1.15rem 1.25rem 1.25rem; display:flex; flex-direction:column; gap:.6rem}
.product .brand{font-size:.86rem; color:var(--green); font-weight:500}
.product h3{font-size:1.15rem; line-height:1.25; margin-top:.1rem}
.product dl{margin:.5rem 0 0; display:grid; gap:.55rem}
.product dl div{border-top:1px solid var(--rule); padding-top:.5rem}
.product dt{font-size:.85rem; color:var(--fg-soft)}
.product dd{margin:0; font-size:.95rem; font-weight:500}
@media (max-width:860px){ .product-cat .cat-head{grid-template-columns:1fr} .product h3{min-height:0} }

/* ---------- Anleitungen ---------- */
.an-cat{padding:clamp(2.5rem, 5vw, 4rem) 0; border-top:1px solid var(--rule)}
.an-cat h2{font-size:clamp(1.5rem, 2.4vw, 2rem)}
.an-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1rem; margin-top:1.75rem}
.an-item{background:var(--tile); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; margin:0}
.an-item .pimg{position:relative; background:var(--pale); aspect-ratio:16/10; overflow:hidden}
.an-item .pimg img{position:absolute; inset:1rem; width:calc(100% - 2rem); height:calc(100% - 2rem); object-fit:contain; mix-blend-mode:multiply}
.an-item .abody{padding:1.05rem 1.15rem 1.15rem; display:flex; flex-direction:column; gap:.35rem; flex:1}
.an-item h3{font-size:1.08rem; line-height:1.25}
.an-item .sub{color:var(--fg-soft); font-size:.92rem}
.an-links{list-style:none; margin:.75rem 0 0; padding:0; display:grid; gap:.35rem}
.an-links a{display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.55rem .75rem; border:1px solid var(--rule); border-radius:8px; text-decoration:none; font-size:.92rem; font-weight:500; transition:border-color .2s, background .2s}
.an-links a:hover{border-color:var(--green); background:var(--pale)}
.an-links a::after{content:""; width:14px; height:14px; background:var(--green); flex:none;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11M7 10l5 5 5-5M4 20h16'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11M7 10l5 5 5-5M4 20h16'/></svg>") center/contain no-repeat}
.an-links a.is-ext::after{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M9 7h8v8'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M9 7h8v8'/></svg>")}

/* ---------- Referenzen ---------- */
.ref-list{display:grid; gap:1.25rem; margin-top:2.5rem}
.ref-item{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:0; background:var(--tile); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; margin:0}
.ref-item:nth-child(even) .ref-img{order:2}
.ref-item .ref-img img{width:100%; height:100%; object-fit:cover; min-height:280px}
.ref-item .ref-body{padding:clamp(1.5rem, 3vw, 2.5rem)}
.ref-item .place{color:var(--green); font-weight:500; font-size:.95rem}
.ref-item h3{font-size:1.5rem; margin-top:.3rem}
.ref-item p{color:var(--fg-soft); margin-top:.8rem}
@media (max-width:860px){ .ref-item{grid-template-columns:1fr} .ref-item:nth-child(even) .ref-img{order:0} }

/* ---------- Stellenanzeigen ---------- */
.job-list{list-style:none; margin:2.5rem 0 0; padding:0; border-top:1px solid var(--rule)}
.job-list li{margin:0; border-bottom:1px solid var(--rule)}
.job-list a{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.2rem 0; text-decoration:none; font-weight:600; font-size:1.15rem}
.job-list a::after{content:""; width:20px; height:20px; background:var(--green); flex:none; transition:transform .2s;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat}
.job-list a:hover::after{transform:translateX(4px)}
.job-list small{font-weight:400; color:var(--fg-soft); font-size:.95rem}

/* ---------- Prosa (Blog, Stellen, Rechtliches) ---------- */
.one-prose{max-width:46rem; overflow-wrap:anywhere}
.one-prose > * + *{margin-top:1.1rem}
.one-prose h2{font-size:1.65rem; margin-top:2.4rem; max-width:none}
.one-prose h3{font-size:1.3rem; margin-top:2rem}
.one-prose h4{font-size:1.1rem; margin-top:1.6rem}
.one-prose ul, .one-prose ol{padding-left:1.35rem}
.one-prose li + li{margin-top:.35rem}
.one-prose a{text-decoration-color:var(--green); text-underline-offset:3px}
.one-prose img{border-radius:var(--radius)}
.one-prose blockquote{border-left:3px solid var(--green); padding-left:1.2rem; color:var(--fg-soft); margin:1.5rem 0}
.one-legal .one-prose{max-width:52rem}
.one-legal .one-prose h1{font-size:2rem}
.one-legal .one-prose h2{font-size:1.4rem}
.one-legal .one-prose h3{font-size:1.15rem}

/* Blog */
.post-hero .meta{color:var(--green); font-weight:500}
.post-hero h1{font-size:clamp(1.9rem, 3.4vw, 2.8rem); max-width:44rem; margin-top:.4rem; text-wrap:balance}
.post-hero .wp-block-post-featured-image img, .post-hero img{border-radius:var(--radius); margin-top:2rem; max-height:520px; object-fit:cover; width:100%}
.post-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.25rem; margin-top:2.5rem}
.post-card{margin:0; background:var(--tile); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column}
.post-card img{aspect-ratio:16/9; object-fit:cover; width:100%}
.post-card .pc-body{padding:1.2rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1}
.post-card .date{font-size:.88rem; color:var(--green); font-weight:500}
.post-card h3{font-size:1.15rem; line-height:1.3}
.post-card h3 a{text-decoration:none}
.post-card h3 a:hover{text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--green)}
.post-card p{color:var(--fg-soft); font-size:.95rem}
.post-card .more{margin-top:auto; padding-top:.5rem}
.wp-block-query .wp-block-post-template{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.25rem; list-style:none; padding:0; margin:2.5rem 0 0}
.wp-block-query .wp-block-post-template > li{margin:0; background:var(--tile); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column}
.wp-block-query .wp-block-post-featured-image img{aspect-ratio:16/9; object-fit:cover; width:100%}
.wp-block-query .wp-block-post-featured-image{margin:0}
.wp-block-query .wp-block-post-date{font-size:.88rem; color:var(--green); font-weight:500; padding:1.1rem 1.3rem 0}
.wp-block-query .wp-block-post-title{font-size:1.15rem; line-height:1.3; padding:.3rem 1.3rem 0; margin:0}
.wp-block-query .wp-block-post-title a{text-decoration:none}
.wp-block-query .wp-block-post-excerpt{padding:.5rem 1.3rem 1.3rem; color:var(--fg-soft); font-size:.95rem}
.wp-block-query .wp-block-post-excerpt__more-link{font-weight:600; color:var(--green)}
.wp-block-query-pagination{display:flex; gap:1rem; margin-top:2rem; font-weight:600}

/* ---------- FAQ ---------- */
.faq-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:3rem; align-items:start; margin-top:0}
.faq-grid > *{margin-top:0}
.faq-list{margin-top:1.5rem}
.faq-list > * + *{margin-top:0}
.wp-block-details, .faq details{border-top:1px solid var(--rule); margin:0}
.wp-block-details:last-of-type, .faq details:last-of-type{border-bottom:1px solid var(--rule)}
.wp-block-details summary, .faq summary{cursor:pointer; list-style:none; padding:1.1rem 2.5rem 1.1rem 0; font-weight:600; position:relative}
.wp-block-details summary::-webkit-details-marker, .faq summary::-webkit-details-marker{display:none}
.wp-block-details summary::after, .faq summary::after{content:""; position:absolute; right:.6rem; top:50%; width:10px; height:10px; border-right:1.8px solid var(--green); border-bottom:1.8px solid var(--green); transform:translateY(-70%) rotate(45deg); transition:transform .25s}
.wp-block-details[open] summary::after, .faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.wp-block-details > *:not(summary), .faq details p{padding:0 0 1.2rem; color:var(--fg-soft); max-width:40rem; margin:0}
.one-section--dark .wp-block-details{border-color:rgba(255,255,255,.14)} .one-section--dark .wp-block-details > *:not(summary){color:rgba(255,255,255,.72)}
.brochure{background:var(--tile); border:1px solid var(--rule); border-radius:16px; padding:1.7rem; display:grid; gap:1rem; margin:0}
.brochure > *{margin-top:0}
.brochure .doc{width:64px; height:80px; border-radius:6px; background:var(--night); position:relative; overflow:hidden}
.brochure .doc::before{content:""; position:absolute; left:10px; right:10px; top:14px; height:3px; background:var(--green)}
.brochure .doc::after{content:""; position:absolute; left:10px; right:22px; top:24px; height:34px; background:repeating-linear-gradient(180deg, rgba(255,255,255,.35) 0 2px, transparent 2px 7px)}
.brochure h3{font-size:1.25rem; line-height:1.25}
.brochure p{color:var(--fg-soft)}
@media (max-width:860px){ .faq-grid{grid-template-columns:1fr; gap:2rem} }

/* ---------- Formulare ---------- */
.one-form{display:grid; gap:1rem; max-width:44rem}
.one-form .row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.one-form label{display:grid; gap:.35rem; font-weight:500; font-size:.95rem}
.one-form input:not([type=checkbox]):not([type=radio]), .one-form select, .one-form textarea{
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--rule); border-radius:8px; background:var(--tile); color:var(--fg); font-size:1rem; transition:border-color .2s;
}
.one-form input:focus, .one-form select:focus, .one-form textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(23,172,108,.15)}
.one-form textarea{min-height:140px; resize:vertical}
.one-form .hint{font-size:.88rem; color:var(--fg-soft)}
.one-form .hint a{text-decoration-color:var(--green)}
.one-form .error{color:var(--error); font-size:.9rem; min-height:1.2em}
.one-form .is-invalid{border-color:var(--error)!important}
.one-form .hp{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden}
.one-form .actions{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.one-form .btn[disabled]{opacity:.6; cursor:wait}
.one-form-success{background:var(--tile); border:1px solid var(--green); border-radius:var(--radius); padding:2rem; max-width:44rem}
.one-form-success h3{font-size:1.5rem}
.one-form-success p{color:var(--fg-soft); margin-top:.7rem}
.one-form-success .wp-block-buttons{margin-top:1.4rem}
.one-section--dark .one-form input, .one-section--dark .one-form select, .one-section--dark .one-form textarea{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#fff}
.one-section--dark .one-form .hint{color:rgba(255,255,255,.65)}
@media (max-width:640px){ .one-form .row{grid-template-columns:1fr} }

/* ---------- Funnel / Konfigurator ---------- */
.one-funnel{background:var(--tile); border:1px solid var(--rule); border-radius:20px; overflow:hidden; margin-top:2.5rem; box-shadow:0 30px 60px -40px rgba(0,0,0,.35)}
.one-funnel .f-steps{display:flex; gap:0; border-bottom:1px solid var(--rule); background:var(--pale); padding:0 .5rem; overflow-x:auto}
.one-funnel .f-steps li{list-style:none; flex:1; min-width:5.5rem; display:flex; align-items:center; gap:.5rem; padding:.9rem .75rem; font-size:.88rem; color:var(--fg-soft); white-space:nowrap; position:relative}
.one-funnel .f-steps .f-label{font-style:normal}
@media (max-width:640px){
  .one-funnel .f-steps{overflow:hidden; padding:0 .25rem}
  .one-funnel .f-steps li{min-width:0; flex:0 0 auto; padding:.8rem .35rem; gap:.4rem}
  .one-funnel .f-steps li.is-active{flex:1 1 auto}
  .one-funnel .f-steps li:not(.is-active) .f-label{display:none}
}
.one-funnel .f-steps li i{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-style:normal; font-size:.75rem; font-weight:600; flex:none; background:var(--tile)}
.one-funnel .f-steps li.is-active{color:var(--fg); font-weight:600}
.one-funnel .f-steps li.is-active i{border-color:var(--green); background:var(--green); color:#fff}
.one-funnel .f-steps li.is-done i{border-color:var(--green); color:var(--green)}
.one-funnel .f-steps li.is-done i::before{content:"✓"}
.one-funnel .f-steps li.is-done i span{display:none}
.one-funnel .f-body{padding:clamp(1.5rem, 4vw, 3rem)}
.one-funnel .f-step{display:none}
.one-funnel .f-step.is-active{display:block; animation:fadein .3s ease}
@keyframes fadein{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.one-funnel h2, .one-funnel h3{font-size:clamp(1.4rem, 2.4vw, 1.9rem); max-width:none}
.one-funnel .f-intro{color:var(--fg-soft); margin-top:.5rem}
.one-funnel .f-options{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:.75rem; margin-top:1.5rem}
.one-funnel .f-opt{position:relative}
.one-funnel .f-opt input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.one-funnel .f-opt span{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; min-height:6.5rem; padding:1rem; border:1.5px solid var(--rule); border-radius:12px; text-align:center; font-weight:600; transition:border-color .2s, background .2s; background:var(--bg)}
.one-funnel .f-opt svg{width:36px; height:36px; stroke:var(--green); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.one-funnel .f-opt input:checked + span{border-color:var(--green); background:rgba(23,172,108,.08); box-shadow:0 0 0 3px rgba(23,172,108,.15)}
.one-funnel .f-opt input:focus-visible + span{outline:2px solid var(--green); outline-offset:2px}
.one-funnel .f-nav{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:2rem; flex-wrap:wrap}
.one-funnel .f-nav .btn-back{background:transparent; border-color:transparent; color:var(--fg-soft); padding-left:0}
.one-funnel .f-nav .btn-back:hover{color:var(--fg); background:transparent; border-color:transparent}
.one-funnel .f-nav .btn-back[hidden]{display:none}
.one-funnel .one-form{margin-top:1.5rem; max-width:none}
.one-funnel [tabindex="-1"]:focus{outline:none}
.one-funnel .f-error{color:var(--error); font-size:.92rem; margin-top:.75rem; min-height:1.2em}
.one-funnel .f-result{text-align:left}
.one-funnel .f-result h2{font-size:clamp(1.5rem, 2.6vw, 2.1rem)}
.one-funnel .f-result p{color:var(--fg-soft); margin-top:.8rem; max-width:44rem}
.one-funnel .f-result .wp-block-buttons, .one-funnel .f-result .actions{margin-top:1.4rem; display:flex; gap:.75rem; flex-wrap:wrap}
.one-section--dark .one-funnel{color:var(--fg)}

/* ---------- Consent-Embed (Partner-Tools) ---------- */
.one-embed{background:var(--tile); border:1px solid var(--rule); border-radius:var(--radius); padding:clamp(1.5rem, 3vw, 2.5rem); margin-top:2rem}
.one-embed h3{font-size:1.35rem}
.one-embed p{color:var(--fg-soft); margin-top:.7rem; max-width:48rem}
.one-embed .btn{margin-top:1.25rem}
.one-embed iframe{width:100%; border:0; border-radius:10px; margin-top:1.5rem; display:none}
.one-embed.is-loaded iframe{display:block}
.one-embed.is-loaded .embed-consent{display:none}

/* ---------- Footer ---------- */
.one-footer{background:var(--bg-alt); padding:3.5rem 0 2rem; font-size:.95rem; color:var(--fg-soft); border-top:1px solid var(--rule); margin:0}
.one-footer > .wrap > * + *{margin-top:0}
.foot-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:2rem}
.foot-grid > *{margin-top:0}
.foot-grid .wp-block-column > * + *{margin-top:.6rem}
.foot-grid img{height:24px; width:auto; margin-bottom:1rem}
.foot-grid h3, .foot-grid h4{font-size:.95rem; font-weight:600; color:var(--fg); margin-bottom:.4rem}
.foot-grid ul{list-style:none; margin:0; padding:0}
.foot-grid li{margin:.3rem 0}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--green)}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1.25rem; border-top:1px solid var(--rule); font-size:.88rem}
.foot-bottom > *{margin-top:0}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }

/* ---------- Kleinkram ---------- */
.mt-0{margin-top:0!important} .mt-2{margin-top:2rem!important} .mt-3{margin-top:3rem!important}
.one-404{padding:clamp(5rem, 12vw, 9rem) 0; text-align:center}
.one-404 h1{font-size:clamp(2rem, 4vw, 3rem)}
.one-404 p{color:var(--fg-soft); margin-top:1rem}
.one-search-form{display:flex; gap:.5rem; max-width:32rem}
.one-search-form input{flex:1; padding:.85rem 1rem; border:1.5px solid var(--rule); border-radius:8px}
.alignwide{max-width:none}
.one-section--tight{padding-top:clamp(2rem, 4vw, 3rem)}
.one-section h2.is-center{margin-inline:auto; text-align:center}