/* BauPioniere website prototype · shared stylesheet
   Layout: 12 cells of 100 px (1200 px content). Dark = statement, light = information,
   neutral field = something to try, blue band = next step (white only).
   Brand mark: the flag/arrow from the wordmark replaces the old square marker.
   One fixed look by choice: the surfaces are part of the brand, so no separate dark theme. */
:root{
  --b:#0055FF; --b100:#E6EFFF; --b200:#B2CDFF; --b300:#7EAAFF; --b400:#4884FF; --b600:#003FC4; --b700:#002A8C;
  --k:#111111; --n900:#262626; --n700:#4D4D4D; --n500:#767676; --n300:#B3B3B3; --n200:#E0E0E0; --n100:#F2F2F2; --w:#FFFFFF;
  --f:"Hanken Grotesk","Helvetica Neue",Arial,system-ui,sans-serif;
  --hd:72px; --cw:1200px;
  --e-out:cubic-bezier(.2,0,0,1); --e-io:cubic-bezier(.4,0,.2,1);
  --flagmask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 73 54%22%3E%3Cpath d=%22M72.9969 0L47.6321 53.4651H18.301L31.0941 26.5001H0L12.774 0.004L72.9969 0Z%22/%3E%3C/svg%3E");
  --flagomask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-4 -4 81 62%22%3E%3Cpath d=%22M72.9969 0L47.6321 53.4651H18.301L31.0941 26.5001H0L12.774 0.004L72.9969 0Z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%227%22 stroke-linejoin=%22miter%22/%3E%3C/svg%3E");
  --dash:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 12%22%3E%3Crect y=%224.8%22 width=%2212%22 height=%222.4%22/%3E%3C/svg%3E");
  --pat-dark:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22220%22 viewBox=%220 0 300 220%22%3E%3Cpath transform=%22translate(70 52) scale(2.2)%22 d=%22M72.9969 0L47.6321 53.4651H18.301L31.0941 26.5001H0L12.774 0.004L72.9969 0Z%22 fill=%22none%22 stroke=%22%230055FF%22 stroke-opacity=%220.24%22 stroke-width=%221.5%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");
  --pat-blue:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22220%22 viewBox=%220 0 300 220%22%3E%3Cpath transform=%22translate(70 52) scale(2.2)%22 d=%22M72.9969 0L47.6321 53.4651H18.301L31.0941 26.5001H0L12.774 0.004L72.9969 0Z%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.14%22 stroke-width=%221.5%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");
  --hdbg:var(--k);
  color-scheme:light;
}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 16px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--w);color:var(--k);font:400 17px/26px var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--hdbg)}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
p,h1,h2,h3,h4,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--b);outline-offset:3px}
.dk :focus-visible,.band :focus-visible{outline-color:var(--w)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
.skip{position:fixed;left:max(16px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 12px);z-index:100;background:var(--b);color:var(--w);padding:10px 16px;font-weight:600;text-decoration:none;transform:translateY(-300%)}
.skip:focus{transform:none}

.c{width:100%;max-width:calc(var(--cw) + 40px);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums}
.mut{color:var(--n700)}
.dk .mut{color:var(--n300)}
.small{font-size:15px;line-height:22px}
.legal{font-size:13px;line-height:18px;color:var(--n500)}

/* ---------- type ---------- */
.t-hero{font-weight:700;font-size:64px;line-height:68px;letter-spacing:-.03em;text-wrap:balance}
.t-h1{font-weight:700;font-size:56px;line-height:62px;letter-spacing:-.03em;text-wrap:balance}
.t-h2{font-weight:600;font-size:48px;line-height:56px;letter-spacing:-.02em;text-wrap:balance}
.t-h3{font-weight:600;font-size:28px;line-height:34px;letter-spacing:-.01em}
.t-lead{font-size:20px;line-height:30px;max-width:640px}
.lab{display:flex;align-items:center;gap:10px;font-weight:500;font-size:13px;line-height:16px;letter-spacing:.08em;text-transform:uppercase}
.lab::before{content:none}
.blue{color:var(--b)}
.dk .blue{color:var(--b)}

/* flag bullets */
.fl li{position:relative;padding-left:24px}
.fl li::before{content:"";position:absolute;left:0;top:8px;width:13px;height:10px;background:var(--b);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat}
.fl.no li::before{background:var(--n500);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat}
.dk .fl li::before{background:var(--b400)}

/* ---------- surfaces ---------- */
.dk{background:linear-gradient(180deg,#121214 0%,#0d0d0f 100%);color:var(--w)}
.pat{background-image:var(--pat-dark),linear-gradient(180deg,#121214 0%,#0d0d0f 100%);background-size:300px 220px,auto;background-position:var(--px,0px) var(--py,0px),0 0}
.fld{background:var(--n100)}
.sec{padding-block:140px;position:relative}
.sec-s{padding-block:90px}
.sh{display:grid;gap:24px;margin-bottom:64px;align-content:start;max-width:920px}
.sh>.lab::after{content:none}
.dk .sh>.lab::after{background:var(--n700)}
.band .sh>.lab::after{background:rgba(255,255,255,.45)}
.sh-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px;max-width:none}
.sh-row>div{display:grid;gap:24px;max-width:860px}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 26px;background:var(--b);color:var(--w);border:0;font-weight:600;font-size:17px;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color .2s}
.btn svg{flex:none;transition:transform .35s var(--e-out)}
.btn:hover{background:var(--b600)}
.btn:hover svg{transform:translateX(5px)}
.btn-s{height:40px;padding:0 18px;font-size:15px}
.btn-k{background:var(--k)}
.btn-k:hover{background:var(--n900)}
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:17px;line-height:26px;text-decoration:none;border:0;background:none;padding:0 0 2px;box-shadow:inset 0 -2px 0 var(--b);transition:color .2s,box-shadow .25s var(--e-out);cursor:pointer;text-align:left}
.tlink:hover{color:var(--b);box-shadow:inset 0 -4px 0 var(--b)}
.tlink svg{transition:transform .35s var(--e-out)}
.tlink:hover svg{transform:translateX(4px)}
.dk .tlink{box-shadow:inset 0 -2px 0 var(--b400)}
.dk .tlink:hover{color:var(--b300);box-shadow:inset 0 -4px 0 var(--b400)}
.band .tlink{color:var(--w);box-shadow:inset 0 -2px 0 rgba(255,255,255,.6)}
.band .tlink:hover{color:var(--w);box-shadow:inset 0 -4px 0 var(--w)}

.ctl{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--n300);background:transparent;font-weight:500;font-size:15px;line-height:1;transition:border-color .2s,background-color .2s,color .2s;text-decoration:none}
.ctl:hover{border-color:var(--k)}
.ctl[aria-pressed="true"]{background:var(--k);border-color:var(--k);color:var(--w)}
.ctl-i{width:40px;padding:0}
.ctl-s{height:32px;padding:0 12px;font-size:13px}
.dk .ctl{border-color:var(--n700)}
.dk .ctl:hover{border-color:var(--w)}

.seg{position:relative;display:inline-flex;background:var(--n100);isolation:isolate;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:3px}
.seg::-webkit-scrollbar{display:none}
.fld .seg{background:var(--w)}
.seg button{position:relative;z-index:1;height:38px;padding:0 16px;border:0;background:none;font-weight:500;font-size:15px;line-height:1;color:var(--n700);white-space:nowrap;transition:color .25s}
.seg button[aria-selected="true"],.seg button[aria-checked="true"]{color:var(--w)}
.seg .seg-ind{position:absolute;z-index:0;top:3px;bottom:3px;left:0;width:0;background:var(--k);pointer-events:none}
.seg.dks{background:var(--n900)}
.seg.dks button{color:var(--n300)}
.seg.dks button[aria-checked="true"]{color:var(--k)}
.seg.dks .seg-ind{background:var(--w)}
.seg:not(.ready) button[aria-selected="true"],.seg:not(.ready) button[aria-checked="true"]{background:var(--k)}
.seg-s{display:none}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--n300);background:transparent;font-weight:500;font-size:15px;line-height:1;color:var(--n900);text-decoration:none;transition:border-color .2s,background-color .2s,color .2s}
.chip:hover{border-color:var(--k)}
.chip[aria-checked="true"],.chip[aria-pressed="true"]{border-color:transparent;background:var(--b100);color:var(--b700)}
.dkc .chip{border-color:var(--n700);color:var(--w)}
.dkc .chip:hover{border-color:var(--w)}
.dkc .chip[aria-checked="true"]{background:var(--b);border-color:transparent;color:var(--w)}

.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;font-weight:600;font-size:11px;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tag.on{background:var(--b100);color:var(--b600)}
.tag.dev{color:var(--n700);box-shadow:inset 0 0 0 1px var(--n500)}
.tag.ex{color:var(--n500);box-shadow:inset 0 0 0 1px var(--n300)}
.tag.k{background:var(--k);color:var(--w)}
.dk .tag.on{background:rgba(0,85,255,.3);color:var(--b200)}
.dk .tag.dev{color:var(--n300);box-shadow:inset 0 0 0 1px var(--n500)}

/* evidence: the flag says how solid a number is */
.ev{justify-self:start;display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 8px;border:1px solid var(--n300);background:transparent;font-weight:600;font-size:11px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--n700);transition:border-color .2s,color .2s}
.ev>i{width:11px;height:8px;flex:none;background:var(--b);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat}
.ev[data-ev="einschaetzung"]>i{background:var(--n500)}
.ev::after{content:"Quelle";font-weight:500;letter-spacing:.04em;color:var(--n500);margin-left:4px;padding-left:8px;border-left:1px solid var(--n300);height:12px;display:flex;align-items:center}
.ev[aria-expanded="true"]::after{content:"Schließen"}
.ev:hover,.ev[aria-expanded="true"]{border-color:var(--k);color:var(--k)}
.dk .ev{border-color:var(--n700);color:var(--n300)}
.dk .ev::after{border-color:var(--n700)}
.dk .ev>i{background:var(--b400)}
.dk .ev:hover,.dk .ev[aria-expanded="true"]{border-color:var(--w);color:var(--w)}
.ev-src{font-size:13px;line-height:18px;color:var(--n700);padding:2px 0 2px 12px;max-width:420px;overflow:hidden;position:relative}
.ev-src::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;background:var(--b)}
.dk .ev-src{color:var(--n300)}

/* odometer */
.odo{display:inline-flex}
.od{display:inline-block;height:1em;overflow:hidden;line-height:1}
.od-c{display:flex;flex-direction:column;will-change:transform}
.od-c>span{display:block;height:1em;line-height:1}
.odo-s{display:inline-block;overflow:hidden;height:1em;line-height:1}
.odo-s>span{display:block;line-height:1}
.fig{display:flex;align-items:baseline;gap:8px;font-weight:600;font-size:64px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fig small{font-size:20px;line-height:1;font-weight:500;letter-spacing:0}
.fig .lt{font-weight:500;margin-right:-6px}
.fig.fig-q{font-size:28px;line-height:34px;letter-spacing:-.01em;white-space:normal;display:block;font-weight:600}

/* ---------- header ---------- */
.hd{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;height:var(--hd);color:var(--w);background:rgba(17,17,17,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .3s,color .3s,box-shadow .3s;--flag:#0055FF}
.hd[data-on="light"]{background:rgba(255,255,255,.96);color:var(--k);box-shadow:0 1px 0 var(--n200)}
.hd.menu{background:var(--k);color:var(--w);box-shadow:none}
.hd.menu .burger{border-color:rgba(255,255,255,.35)}
.hd-in{height:100%;display:flex;align-items:center;gap:40px}
.wm{display:block;flex:none;width:185px;line-height:0}
.wm svg{width:100%;height:auto;display:block}
.nav{display:flex;align-items:center;gap:26px;font-weight:500;font-size:15px}
.nav a{position:relative;text-decoration:none;padding:6px 0;color:inherit;transition:color .2s;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--b);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--e-out)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:14px}
.progress{position:absolute;left:0;right:0;bottom:-2px;height:2px;pointer-events:none}
.progress i{display:block;height:100%;background:var(--b);transform-origin:left;transform:scaleX(0)}
.burger{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.35);background:none;position:relative;padding:0}
.hd[data-on="light"] .burger{border-color:var(--n300)}
.burger span,.burger span::before,.burger span::after{position:absolute;left:12px;right:12px;height:2px;background:currentColor;content:"";transition:transform .3s var(--e-out)}
.burger span{top:21px}
.burger span::before{left:0;right:0;top:-6px}
.burger span::after{left:0;right:0;top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.mnav{position:fixed;z-index:49;top:calc(var(--hd) + env(safe-area-inset-top,0px));left:0;right:0;bottom:0;background:var(--k);color:var(--w);display:grid;align-content:start;padding:24px max(20px,env(safe-area-inset-right,0px)) calc(30px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));overflow:auto}
.mnav a:not(.btn){font-size:24px;line-height:32px;font-weight:600;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--n900);display:flex;align-items:center;gap:12px}
.mnav a[aria-current="page"]::before{content:"";width:15px;height:11px;background:var(--b);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat}
.mnav .btn{margin-top:28px;justify-content:center}
.hd-lp .lp-tel{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.hd-lp .lp-site{font-size:15px}

/* ---------- hero (start) ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(60% 70% at 78% 62%,rgba(0,85,255,.16) 0%,rgba(0,85,255,0) 70%),linear-gradient(180deg,#121214 0%,#0b0b0d 100%);color:var(--w)}
.hero-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:0 80px;align-items:center;min-height:min(940px,max(720px,100svh));padding-block:calc(var(--hd) + 60px) 70px}
.hero-txt{display:grid;gap:30px;align-content:center}
.hero-txt .lab{color:var(--n300)}
.t-hero .ln{display:block;overflow:hidden;padding-bottom:6px;margin-bottom:-6px}
.t-hero .ln>span{display:block}
.hero .t-lead{color:var(--w)}
.hero .mut{color:var(--n300)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px;margin-top:6px}
.hero-ph{position:relative;align-self:stretch;max-height:820px;overflow:hidden;background:var(--n900)}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:30% 40%;will-change:transform}
.hero-cap{position:absolute;left:0;bottom:0;padding:10px 14px;font-size:12px;line-height:16px;color:var(--n300);background:rgba(17,17,17,.85)}

/* photo reveal: a blue flag-edge sweeps across */
.ph{position:relative;overflow:hidden;background:var(--n900)}
.ph img{width:100%;height:100%;object-fit:cover}
.sweep{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--b)}

/* ---------- page heroes ---------- */
.phero{position:relative;padding-block:calc(var(--hd) + 90px) 100px;overflow:hidden}
.phero .c{position:relative}
.phero-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 80px;align-items:end}
.phero-t{display:grid;gap:26px;align-content:start}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;line-height:20px;color:var(--n500)}
.crumb a{text-decoration:none;color:inherit}
.crumb a:hover{color:var(--b)}
.dk .crumb{color:var(--n300)}
.dk .crumb a:hover{color:var(--w)}
.phero.dk{background:radial-gradient(50% 75% at 86% 62%,rgba(0,85,255,.13) 0%,rgba(0,85,255,0) 70%),linear-gradient(180deg,#121214 0%,#0d0d0f 100%)}
.phero.lt{background:var(--w)}
.phero.fldh{background:var(--n100)}
.phero-ph{height:440px}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.jump a{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;font-size:14px;font-weight:500;text-decoration:none;border:1px solid var(--n700);color:var(--n200);transition:border-color .2s,color .2s}
.jump a:hover{border-color:var(--w);color:var(--w)}
.lt .jump a,.fldh .jump a{border-color:var(--n300);color:var(--n900)}
.lt .jump a:hover,.fldh .jump a:hover{border-color:var(--k);color:var(--k)}
.facts-mini{display:grid;gap:0;align-self:end}
.facts-mini div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-top:1px solid var(--n700);font-size:15px;line-height:22px}
.facts-mini div:last-child{border-bottom:1px solid var(--n700)}
.facts-mini span{color:var(--n300)}
.facts-mini b{font-weight:600;text-align:right}

/* ---------- logos ---------- */
.logos{padding-block:36px;border-bottom:1px solid var(--n200)}
.logos .c{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;gap:30px}
.logos .lab{color:var(--n700)}
.lg-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.lg-row li{height:56px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:600;font-size:16px;line-height:20px;color:var(--n500);border-left:1px solid var(--n200);padding:0 10px;transition:color .2s}
.lg-row li:hover{color:var(--k)}

/* ---------- plan (Warum) ---------- */
.plan{border-top:1px solid var(--n300)}
.plan-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 30px;padding:20px 0}
.plan-count{display:flex;align-items:center;gap:12px;font-weight:500;font-size:15px;line-height:22px;color:var(--n700)}
.plan-count .odo-s{font-weight:600;font-size:32px;color:var(--k);min-width:20px}
.plan-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 60px}
.plan-vis{padding:36px;display:grid;place-items:center;background:linear-gradient(160deg,#F5F7FB 0%,#EAF0FB 100%)}
.plan-vis svg{width:100%;max-width:520px;height:auto;display:block;overflow:visible}
.plan-rows{display:grid;align-content:start}
.pr{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid var(--n200)}
.pr:first-child{padding-top:6px}
.pr dt{font-weight:600;font-size:15px;line-height:26px;display:flex;align-items:center;gap:10px}
.pr dt::before{content:"";width:12px;height:9px;flex:none;background:var(--n300);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat;transition:background-color .3s}
.plan[data-s="bp"] .pr dt::before{background:var(--b);-webkit-mask-image:var(--dash);mask-image:var(--dash)}
.pr dd{display:grid;margin:0;color:var(--n700)}
.pr dd>span{grid-area:1/1}
.plan[data-s="heute"] .pr dd>[data-s="bp"],.plan[data-s="bp"] .pr dd>[data-s="heute"]{visibility:hidden;opacity:0}
.plan[data-s="bp"] .pr dd{color:var(--k)}
.pv-grid line{stroke:rgba(0,85,255,.08);stroke-width:1}
.pv-node rect{fill:var(--w)}
.pv-node text{font:600 17px var(--f);fill:var(--k)}
.pv-node .t2{fill:var(--w);font-weight:500;font-size:16px}
.pv-own rect{fill:var(--k)}
.pv-own text{fill:var(--w)}
.pv-line{fill:none;stroke:var(--n500);stroke-width:2}
.pv-main{fill:none;stroke:var(--b);stroke-width:2}
.pv-esc{fill:none;stroke:var(--k);stroke-width:2}
.pv-bp{fill:var(--b)}
.pv-bpt{font:600 17px var(--f);fill:var(--w)}
.pv-lbl{font:500 13px var(--f);fill:var(--n700);letter-spacing:.04em}
.pv-pile rect{fill:var(--n500)}
.pv-msg{fill:var(--n500)}
.pv-msg.b{fill:var(--b)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:80px;border-top:1px solid var(--n300)}
.fact{display:grid;gap:14px;align-content:start;padding:28px 30px 0;border-left:1px solid var(--n200)}
.fact:first-child{border-left:0;padding-left:0}

/* ---------- vergabe tiles ---------- */
.vg-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--n300);border-bottom:1px solid var(--n300)}
.vt{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-rows:auto auto 1fr auto auto;gap:14px;min-height:300px;padding:28px 26px 24px;text-align:left;background:transparent;border:0;border-left:1px solid var(--n300);color:var(--k);transition:color .25s}
.vt:first-child{border-left:0}
.vt>span:not(.vt-fill){position:relative;z-index:2}
.vt-fill{position:absolute;inset:0;z-index:1;background:var(--b);clip-path:polygon(0 0,0 0,0 100%,0 100%);pointer-events:none}
.vt.on .vt-fill{clip-path:polygon(0 0,140% 0,120% 100%,0 100%)}
.vt.on{color:var(--w)}
.vt:hover:not(.on){background:var(--w)}
.vt-top{display:flex;align-items:center;justify-content:space-between}
.vt-top .num{font-size:13px;color:var(--n500);font-weight:500}
.vt.on .vt-top .num{color:var(--b200)}
.vt.on .tag.on{background:rgba(255,255,255,.2);color:var(--w)}
.vt.on .tag.dev{color:var(--w);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.vt-name{font-weight:600;font-size:28px;line-height:34px;letter-spacing:-.01em}
.vt-desc{font-size:15px;line-height:22px;color:var(--n700)}
.vt.on .vt-desc{color:var(--b100)}
.vt-end{display:flex;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--n300);font-size:15px;line-height:22px}
.vt-end span{color:var(--n500)}
.vt.on .vt-end{border-top-color:rgba(255,255,255,.35)}
.vt.on .vt-end span{color:var(--b200)}
.vt-state{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.box{flex:none;width:20px;height:20px;box-shadow:inset 0 0 0 1.5px var(--n500);display:grid;place-items:center;color:transparent;transition:background-color .2s,box-shadow .2s,color .2s}
.vt.on .box{background:var(--w);box-shadow:none;color:var(--b)}
[aria-pressed="true"]>.box{background:var(--b);box-shadow:none;color:var(--w)}
.vt.on[aria-pressed="true"]>.vt-state .box,.vt.on .box{background:var(--w);color:var(--b)}
.steps3{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:36px}
.steps3 li{display:grid;align-content:start;grid-template-columns:40px minmax(0,1fr);gap:4px 0;padding:22px 30px 0 0;font-size:15px;line-height:22px;color:var(--n700)}
.steps3 .num{grid-row:span 2;font-weight:500;color:var(--n500);font-size:13px;line-height:26px}
.steps3 b{font-weight:600;font-size:17px;line-height:26px;color:var(--k)}
.steps3 li.lit .num{color:var(--b)}
.st-track{position:absolute;left:0;right:0;top:36px;height:2px;background:var(--n200)}
.st-track::after{content:"";position:absolute;inset:0;background:var(--b);transform-origin:left;transform:scaleX(var(--t,1))}
.st-flag{position:absolute;top:-10px;left:0;width:22px;height:16px;background:var(--b);-webkit-mask:var(--flagmask) center/contain no-repeat;mask:var(--flagmask) center/contain no-repeat;z-index:1}
.more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 30px;margin-top:56px;padding-top:26px;border-top:1px solid var(--n300)}

/* ---------- praxis teaser + page ---------- */
.px{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:90px}
.px-main{min-width:0}
.px-m{display:grid;border-top:1px solid var(--n700)}
.pm{display:grid;grid-template-columns:200px minmax(0,1fr);gap:30px;padding:28px 0;border-bottom:1px solid var(--n700)}
.pm-r{display:grid;gap:12px;align-content:start}
.px-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--n700)}
.px-row>div{display:grid;gap:10px;padding:26px 26px 0 0;align-content:start}
.px-row>div+div{padding-left:26px;border-left:1px solid var(--n700)}
.px-row .ev::after{display:none}
.px-row p:not(.fig){font-size:15px;line-height:22px;color:var(--n300)}
.cells{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.cells i{width:16px;height:16px;display:block;background:var(--n700)}
.cells[data-kind="new"] i{background:var(--b)}
.cells[data-kind="hire"] i{width:24px;height:24px;background:var(--b)}
.cells i.soft{background:transparent;box-shadow:inset 0 0 0 1.5px var(--n700)}
.cells i.half{width:8px}
.cells .more-c{font-weight:600;font-size:15px;color:var(--n500);margin-left:4px;line-height:16px}
.lt-sec .cells i{background:var(--n300)}
.lt-sec .cells[data-kind="new"] i,.lt-sec .cells[data-kind="hire"] i{background:var(--b)}
.lt-sec .cells i.soft{background:transparent;box-shadow:inset 0 0 0 1.5px var(--n300)}
.cmpcells{display:grid;grid-template-columns:60px minmax(0,1fr);gap:6px 12px;align-items:center;font-size:13px;color:var(--n500)}
.quote{display:grid;gap:28px;align-content:start}
.quote blockquote{font-weight:600;font-size:30px;line-height:38px;letter-spacing:-.01em}
.who{display:flex;align-items:center;gap:16px}
.who .ph{width:72px;height:72px;flex:none}
.who b{display:block;font-weight:500}
.who span{display:block;font-size:15px;line-height:22px;color:var(--n700)}
.dk .who span{color:var(--n300)}
.ref{display:grid;gap:10px;padding:22px;background:rgba(255,255,255,.06);font-size:15px;line-height:22px;color:var(--n300)}
.ref .lab{color:var(--w)}
.jobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--n300)}
.job{display:grid;gap:12px;align-content:start;padding:26px 24px 0 0}
.job+.job{padding-left:24px;border-left:1px solid var(--n300)}
.job .k{font-size:13px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.job h3{font-weight:600;font-size:22px;line-height:28px}
.job p{font-size:15px;line-height:22px;color:var(--n700)}
.job .tag{justify-self:start}
.twocol{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px 90px;align-items:start}
.list{display:grid;border-top:1px solid var(--n300)}
.list>li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 0;padding:20px 0;border-bottom:1px solid var(--n200)}
.list>li>.num{font-size:13px;color:var(--n500);line-height:26px}
.list b{display:block;font-weight:600}
.list p{grid-column:2;color:var(--n700);font-size:15px;line-height:22px;margin-top:2px}
.dk .list{border-color:var(--n700)}
.dk .list>li{border-color:var(--n900)}
.dk .list p{color:var(--n300)}

/* ---------- conditions (start) ---------- */
.cond{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--n300)}
.cond>div{display:grid;gap:16px;align-content:start;padding:28px 30px 0 0}
.cond>div+div{padding-left:30px;border-left:1px solid var(--n200)}
.cond h3{font-weight:600;font-size:20px;line-height:28px}
.cond ul{display:grid;gap:10px;font-size:16px;line-height:24px}
.cond .pricerow{display:flex;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--n200);font-size:15px;line-height:22px}
.cond .pricerow span{color:var(--n500)}
.cond .pricerow b{font-weight:600;text-align:right}

/* ---------- office teaser ---------- */
.office{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px 90px;align-items:center}
.office-t{display:grid;gap:22px;align-content:start}

/* ---------- product stage + mocks ---------- */
.stage{position:relative;min-width:0;background:linear-gradient(160deg,#F5F7FB 0%,#E9EFFA 100%);display:grid;place-items:center;padding:70px 40px 90px;overflow:hidden}
.stage>.tag{position:absolute;top:20px;left:20px;z-index:3;background:var(--w)}
.mk{background:var(--w);width:100%;max-width:420px;text-align:left}
.mk-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--n200);font-weight:500;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.mk-b{padding:18px;display:grid;gap:12px}
.mk-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:10px;border-top:1px solid var(--n200);font-size:15px;line-height:22px}
.mk-row>span:first-child{color:var(--n500)}
.mk-row>span:last-child{text-align:right}
.co{display:flex;align-items:center;gap:14px}
.co b{display:block;font-weight:600;font-size:18px;line-height:24px}
.co .mut{display:block;font-size:14px;line-height:20px}
.co-n{font-weight:600;font-size:15px}
.av{flex:none;width:44px;height:44px;display:grid;place-items:center;background:var(--k);color:var(--w);font-weight:600;font-size:15px;line-height:1}
.av-co{background:var(--b)}
.av-sm{width:32px;height:32px;font-size:12px}
.co.sm .av{width:28px;height:28px;font-size:13px}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.th{aspect-ratio:1;background:var(--n200) center/cover no-repeat;display:grid;place-items:center;font-weight:600;font-size:14px;color:var(--n700)}
.bar{display:inline-grid;grid-template-columns:repeat(5,12px);gap:3px}
.bar i{height:12px;background:var(--n200);display:block}
.bar i.f{background:var(--b)}
.phone{width:280px;max-width:100%;border:10px solid var(--k);background:var(--w);text-align:left}
.ph-s{display:grid;gap:12px;padding:14px;min-height:430px;align-content:start}
.ph-top{display:flex;align-items:center;gap:10px;font-size:14px;line-height:18px}
.ph-top b{display:block;font-weight:600}
.ph-top span:not(.av){display:block;color:var(--n500);font-size:12px}
.ph-top .av{width:34px;height:34px;font-size:14px}
.ph-txt{font-size:15px;line-height:22px}
.ph-img{aspect-ratio:4/3;background:var(--n200) center/cover no-repeat}
.ph-cta{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;background:var(--n100);font-weight:600;font-size:14px}
.ph-cta .go{color:var(--b);white-space:nowrap}
.ph-prog{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.ph-prog i{height:4px;background:var(--n200);display:block}
.ph-prog i.f{background:var(--b)}
.ph-q{font-weight:600;font-size:17px;line-height:24px}
.opt{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;background:var(--n100);font-size:15px;transition:background-color .25s,color .25s}
.opt.sel{background:var(--b100);color:var(--b700);font-weight:600}
.opt .ok{width:16px;height:16px;color:var(--b)}
.ph-note{font-size:12px;color:var(--n500)}
.msg{max-width:320px;padding:12px 14px;background:var(--w);font-size:15px;line-height:22px}
.msg b{display:block;font-size:13px;color:var(--n500);font-weight:600;margin-bottom:2px}
.msg.me{justify-self:end;background:var(--b100);color:var(--b700)}
.msg-btns{display:flex;gap:6px}
.msg-btns span{flex:1;text-align:center;padding:9px 0;background:var(--w);box-shadow:inset 0 0 0 1px var(--n300);font-weight:600;font-size:14px;transition:background-color .2s,color .2s}
.msg-btns span.sel{background:var(--b);box-shadow:none;color:var(--w)}
.dbar{display:grid;grid-template-columns:repeat(10,1fr);gap:2px}
.dbar i{height:10px;background:var(--n200);display:block}
.dbar i.f{background:var(--b)}
.mbtn{height:38px;padding:0 14px;border:1px solid var(--n300);background:var(--w);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.mbtn.pri{background:var(--b);border-color:var(--b);color:var(--w)}
.mbtn.pri:hover{background:var(--b600)}
.mbtn.done{background:var(--k);border-color:var(--k)}
.ib{display:grid}
.ib-i{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--n200);font-size:14px;line-height:20px}
.ib-i:first-child{border-top:0}
.ib-i .ic{width:28px;height:28px;display:grid;place-items:center;background:var(--b100);color:var(--b)}
.ib-i .ic.k{background:var(--k);color:var(--w)}
.ib-i small{display:block;color:var(--n500);font-size:12px}
.ib-i time{font-size:12px;color:var(--n500)}

/* ---------- simulation ---------- */
.sim{border-top:1px solid var(--n300)}
.sim-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.sim-roles{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.sim-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:830px;background:var(--w)}
.sim-side{display:flex;flex-direction:column;min-width:0}
.sim-steps{display:grid}
.ss{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;padding:15px 25px;border:0;border-bottom:1px solid var(--n200);background:var(--w);text-align:left;font-weight:500;font-size:17px;line-height:24px;color:var(--n500);transition:color .2s,background-color .2s}
.ss:hover{color:var(--k)}
.ss .num{font-size:13px}
.ss[aria-selected="true"]{color:var(--k);background:var(--n100)}
.ss[aria-selected="true"] .num,.ss.done .num{color:var(--b)}
.ss .ss-p{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--b);transform-origin:left;transform:scaleX(0)}
.ss .ss-d{width:13px;height:10px;background:var(--n300);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat}
.ss.done .ss-d{background:var(--b);-webkit-mask-image:var(--dash);mask-image:var(--dash)}
.ss[aria-selected="true"] .ss-d{background:var(--b)}
.sim-txt{padding:30px 25px;display:grid;gap:14px;align-content:start}
.sim-txt .t-h3{font-size:24px;line-height:30px}
.sim-txt dl{display:grid;margin-top:6px}
.sim-txt dl div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--n200);font-size:15px;line-height:22px}
.sim-txt dt{color:var(--n500)}
.sim-txt dd{margin:0;text-align:right}
.sim-stage{position:relative;min-width:0;background:linear-gradient(160deg,#F5F7FB 0%,#E9EFFA 100%);display:grid;place-items:center;padding:70px 40px 90px;overflow:hidden}
.sim-stage>.tag{position:absolute;top:20px;left:20px;z-index:3;background:var(--w)}
.sim-view{position:relative;width:100%;display:grid;place-items:center;min-height:440px}
.sv{width:100%;display:grid;place-items:center;gap:20px}
.sv.leaving{position:absolute;inset:0;pointer-events:none}
.sim-fly{position:absolute;inset:0;pointer-events:none;z-index:4}
.sim-nav{position:absolute;left:20px;right:20px;bottom:20px;display:flex;align-items:center;justify-content:flex-end;gap:10px;z-index:3}
.sim-nav .ctl{background:var(--w);border-color:transparent}
.sim-nav .ctl:hover{border-color:var(--k)}
.sim-k{font-size:13px;color:var(--n500);margin-right:auto}
.v2{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:18px}
.notes{background:var(--w);padding:16px;display:grid;gap:10px;align-self:center}
.notes .lab{font-size:11px;color:var(--n500)}
.notes li{position:relative;padding:6px 8px 6px 20px;font-size:14px;line-height:20px;color:var(--n700);transition:background-color .3s,color .3s}
.notes li::before{content:"";position:absolute;left:4px;top:12px;width:10px;height:7px;background:var(--n300);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat;transition:background-color .3s}
.notes li.hit{background:var(--b100);color:var(--b700)}
.notes li.hit::before{background:var(--b)}
.role{font-weight:600;font-size:20px;line-height:26px;display:block}
.v3{grid-template-columns:auto minmax(0,260px);align-items:center;gap:24px}
.camp{background:var(--w);padding:16px;display:grid;gap:10px}
.camp .lab{font-size:11px;color:var(--n500)}
.d14{display:grid;grid-template-columns:repeat(14,1fr);gap:2px}
.d14 i{height:14px;background:var(--n200);display:block}
.d14 i.f{background:var(--b)}
.camp .dd{font-size:13px;color:var(--n500)}
.camp .mk-row{font-size:14px}
.v4{grid-template-columns:auto minmax(0,250px);align-items:center;gap:24px}
.conf{background:var(--w);padding:16px;display:grid;gap:12px;font-size:14px;line-height:20px}
.conf .co b{font-size:15px}
.conf-ch{display:flex;gap:6px;flex-wrap:wrap}
.conf-ch span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;background:var(--b100);color:var(--b700)}
.chat{width:100%;max-width:420px;background:var(--w);text-align:left}
.chat-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--n200);font-size:14px;line-height:18px}
.chat-h b{display:block;font-weight:600}
.chat-h span:not(.av){display:block;color:var(--n500);font-size:12px}
.chat-b{display:grid;gap:12px;padding:16px;background:var(--n100)}
.chat-n{font-size:12px;color:var(--n700)}
.appmini{display:flex;align-items:center;gap:10px;background:var(--w);padding:10px 14px;font-size:14px}
.appmini b{font-weight:600}
.v5{gap:14px}
.dec-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.score{display:grid;justify-items:end;gap:2px}
.score b{font-weight:600;font-size:40px;line-height:1;color:var(--b);letter-spacing:-.02em}
.score span{font-size:12px;color:var(--n500)}
.dim{display:grid;grid-template-columns:minmax(0,1fr) 120px 40px;align-items:center;gap:10px;font-size:14px;line-height:20px}
.dim>span:first-child{color:var(--n700)}
.dim b{font-weight:600;text-align:right}
.dec-q{display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--n200);font-size:14px;line-height:20px}
.dec-q li{padding-left:18px;position:relative}
.dec-q li::before{content:"";position:absolute;left:0;top:6px;width:10px;height:7px;background:var(--b);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat}
.dec-acts{display:flex;gap:8px;flex-wrap:wrap}
.dec-ok{font-size:14px;color:var(--b700);background:var(--b100);padding:8px 10px}

/* ---------- gewerke (leistung) ---------- */
.lv-key{display:flex;gap:24px;margin:-36px 0 20px}
.lv-key span{display:inline-flex;align-items:center;gap:8px}
.k-on,.k-dev{width:13px;height:10px;display:inline-block;flex:none;background:var(--b);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat}
.k-dev{background:var(--n500);-webkit-mask-image:var(--dash);mask-image:var(--dash)}
.gw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--n300);border-bottom:1px solid var(--n300)}
.gwc{position:relative;display:flex;flex-direction:column;gap:22px;padding:30px 25px 25px;border-left:1px solid var(--n300);min-width:0}
.gwc:first-child{border-left:0;padding-left:0}
.gwc::before{content:"";position:absolute;left:-1px;right:0;top:-1px;height:4px;background:var(--b);transform-origin:left;transform:scaleX(0);transition:transform .6s var(--e-out)}
.gwc:first-child::before{left:0}
.gwc.sel::before{transform:scaleX(1)}
.gwc-h{display:grid;gap:14px}
.gwc-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.gwc-top .lab{color:var(--n700)}
.gwc-end{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--n300);border-bottom:1px solid var(--n300);font-size:15px}
.gwc-end span{color:var(--n500)}
.gwc-end b{font-weight:600}
.lvp{display:grid;flex:1;align-content:start}
.lvp li{display:grid;grid-template-columns:36px minmax(0,1fr) 13px;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--n200);font-size:15px;line-height:22px}
.lvp .pos{color:var(--n500);font-size:13px}
.gwc-f{display:grid;gap:8px;font-size:15px;line-height:22px;color:var(--n700)}
.gwc-f .lab{color:var(--k)}
.gwc-t{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;border:1px solid var(--n300);background:transparent;font-weight:600;font-size:15px;text-align:left;transition:background-color .25s,border-color .25s,color .25s}
.gwc-t:hover{border-color:var(--k)}
.gwc-t[aria-pressed="true"]{background:var(--b);border-color:transparent;color:var(--w)}
.gwc-t[aria-pressed="true"] .box{background:var(--w);color:var(--b)}
.gw-sum{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;min-height:72px;padding:18px 0;border-bottom:1px solid var(--n200);font-size:15px;line-height:22px}
.gw-sum .lab{color:var(--k)}
.gw-sum .sel-c{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;background:var(--b100);color:var(--b700);font-weight:600}
.gw-sum .tlink{margin-left:auto}
.gw-not{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 30px;margin-top:26px;font-size:15px;line-height:22px}
.gw-not ul{display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--n700)}
.gw-not li{display:inline-flex;align-items:center;gap:8px}
.gw-not li::before{content:"";width:10px;height:2px;background:var(--n500)}

/* ---------- bauwissen ---------- */
.bw-top{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:60px;align-items:end;margin-bottom:64px}
.bw-top .sh{margin-bottom:0}
.bw-stat{display:grid;gap:14px;align-content:start;padding:24px;background:rgba(255,255,255,.05)}
.bw-stat p:not(.fig){font-size:15px;line-height:22px;color:var(--n300)}
.sys{background:#0d0d0f;border-top:1px solid var(--n700)}
.sys-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;padding:20px 25px;border-bottom:1px solid var(--n900)}
.sys-pick{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.sys-diff{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:15px;color:var(--n300)}
.sys-diff .odo-s{font-weight:600;font-size:28px;color:var(--w)}
.sys-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sg{padding:25px;border-left:1px solid var(--n900);display:grid;gap:12px;align-content:start;min-width:0}
.sg:first-child{border-left:0}
.sg h3{font-weight:500;font-size:13px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--n300)}
.sg ul{display:grid}
.sg li{position:relative;display:flex;gap:10px;align-items:baseline;padding:11px 0;border-top:1px solid var(--n900);font-size:17px;line-height:24px;color:var(--n200)}
.sg li::before{content:"";flex:none;width:11px;height:8px;background:var(--n700);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat;transition:background-color .3s}
.sg li.chg::before{background:var(--b400)}
.sg li.chg{color:var(--w)}
.sg li .fl-x{position:absolute;inset:0 -8px;background:rgba(0,85,255,.35);pointer-events:none}
.sys-q{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:center;padding:20px 25px;border-top:1px solid var(--n900)}
.sys-q .lab{color:var(--n300)}
.sys-q p:not(.lab){font-weight:600;font-size:20px;line-height:28px}
.sys .legal{padding:0 25px 20px}

/* ---------- einordnung ---------- */
.cmp{border-top:1px solid var(--n300)}
.cmp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:20px 0}
.cmp-all{margin-left:auto}
.cmp-t{overflow-x:auto}
.ct{width:100%;border-collapse:collapse;font-size:15px;line-height:22px;min-width:560px}
.ct.two{min-width:0}
.ct th,.ct td{text-align:left;vertical-align:top;padding:16px 20px;border-bottom:1px solid var(--n200)}
.ct th:first-child{padding-left:0}
.ct thead th{font-weight:600;font-size:13px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--n500);padding-block:14px}
.ct tbody th{font-weight:600;width:22%}
.ct .bp{background:var(--b100);color:var(--b700);font-weight:600}
.ct thead .bp{color:var(--b600)}
.ct td.ct-a{color:var(--n700)}
.ct.two td.ct-a{width:36%}
.alts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px;border-top:1px solid var(--n300)}
.alt{display:grid;gap:8px;padding:24px 30px 0 0;font-size:15px;line-height:22px;color:var(--n700)}
.alt b{color:var(--k);font-size:17px}

/* ---------- kosten ---------- */
.yr{border-top:1px solid var(--n300);margin-bottom:64px}
.yr-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 30px;padding:20px 0}
.yr-t{display:grid;gap:2px}
.yr-t b{font-weight:600}
.yr-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.yr-chart{position:relative;padding:30px 25px 22px;background:linear-gradient(160deg,#F7F9FC 0%,#EEF3FB 100%)}
.yr-row{display:grid;gap:8px;margin-bottom:22px}
.yr-row.has-min{margin-bottom:38px}
.yr-row:last-of-type{margin-bottom:0}
.yr-lbl{display:flex;justify-content:space-between;gap:12px;font-size:14px;line-height:20px}
.yr-lbl b{font-weight:600}
.yr-lbl span{color:var(--n500)}
.yr-trk{position:relative;height:30px;background:var(--w)}
.yr-trk::after{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,var(--n200) 1px,transparent 1px);background-size:calc(100% / 12) 100%;pointer-events:none}
.yr-mo{display:grid;grid-template-columns:repeat(12,1fr);font-size:12px;color:var(--n500);margin-bottom:10px}
.yr-mo span{padding-left:6px}
.yr-m{position:absolute;top:4px;bottom:4px;background:var(--b200)}
.yr-min{position:absolute;bottom:-12px;height:7px;border:2px solid var(--k);border-top:0;left:0}
.yr-min span{position:absolute;left:calc(100% + 8px);top:-4px;font-size:12px;line-height:14px;font-weight:600;white-space:nowrap;color:var(--k)}
.yr-c{position:absolute;top:4px;bottom:4px;background:var(--b);transform-origin:left}
.yr-c+.yr-c{box-shadow:inset 2px 0 0 var(--w)}
.yr-h{position:absolute;top:1px;width:28px;height:28px;margin-left:-14px;display:grid;place-items:center;background:var(--k);color:var(--w)}
.yr-h svg{width:16px;height:16px}
.yr-off{position:absolute;top:50%;height:0;border-top:2px dashed var(--n300)}
.yr-z{position:absolute;top:3px;width:24px;height:24px;margin-left:-12px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--n500);font-weight:600;font-size:13px;color:var(--n700);background:var(--w)}
.yr-ph{position:absolute;top:20px;bottom:10px;width:2px;background:var(--k);pointer-events:none;opacity:0}
.yr-sum{display:flex;flex-wrap:wrap;gap:10px 40px;padding:18px 0;border-bottom:1px solid var(--n200);font-size:15px;line-height:22px}
.yr-sum span{display:inline-flex;align-items:baseline;gap:8px;color:var(--n700)}
.yr-sum b{font-weight:600;font-size:20px;color:var(--k)}
.cost{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--n300)}
.cost>div{display:grid;gap:12px;align-content:start;padding:24px 24px 0 0}
.cost .k{font-weight:600;font-size:20px;line-height:28px}
.cost .mut{font-size:15px;line-height:22px}
.cost-note{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:48px;padding-top:24px;border-top:1px solid var(--n200)}

/* ---------- rollen ---------- */
.rl{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--w);min-height:580px;border-top:1px solid var(--n300)}
.rl-side{display:flex;flex-direction:column;min-width:0}
.rl-tabs{display:grid}
.rt{display:flex;align-items:center;gap:12px;padding:16px 25px 16px 0;border:0;border-bottom:1px solid var(--n200);background:var(--w);text-align:left;font-weight:600;font-size:17px;color:var(--n500);transition:color .2s}
.rt::before{content:"";width:14px;height:10px;flex:none;background:var(--n300);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat;transition:background-color .2s}
.rt:hover{color:var(--k)}
.rt[aria-selected="true"]{color:var(--k)}
.rt[aria-selected="true"]::before{background:var(--b);-webkit-mask-image:var(--dash);mask-image:var(--dash)}
.rl-txt{padding:30px 25px 30px 0;display:grid;gap:16px;align-content:start}
.rl-txt .q{font-weight:600;font-size:26px;line-height:34px;letter-spacing:-.01em}
.rl-txt .note{font-size:13px;line-height:18px;color:var(--n500)}
.rl-stage{position:relative;background:linear-gradient(160deg,#F5F7FB 0%,#E9EFFA 100%);display:grid;place-items:center;padding:60px 40px;min-width:0;overflow:hidden}
.rl-stage>.tag{position:absolute;top:20px;left:20px;background:var(--w)}
.ov-j{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--n200)}
.ov-j:first-child{border-top:0;padding-top:0}
.ov-t{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ov-t b{font-weight:600;font-size:15px}
.ov-s{font-size:13px;color:var(--n500)}
.kb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.kb-c{display:grid;gap:6px;align-content:start}
.kb-h{display:flex;justify-content:space-between;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--n500);padding-bottom:4px;border-bottom:2px solid var(--n200)}
.kb-c:last-child .kb-h{border-color:var(--b)}
.kb-i{background:var(--n100);padding:8px;font-size:13px;line-height:16px;font-weight:600}
.kb-i span{display:block;font-weight:400;color:var(--n500);font-size:12px}

/* ---------- office page ---------- */
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--n300)}
.terms>div{display:grid;gap:14px;align-content:start;padding:28px 30px 0 0}
.terms>div+div{padding-left:30px;border-left:1px solid var(--n200)}
.terms h3{font-weight:600;font-size:22px;line-height:28px}
.terms ul{display:grid;gap:10px;font-size:16px;line-height:24px}
.day{position:relative;display:grid;gap:0;max-width:880px}
.day-line{position:absolute;left:94px;top:8px;bottom:8px;width:2px;background:var(--n200)}
.day-line i{position:absolute;inset:0;background:var(--b);transform-origin:top;transform:scaleY(var(--d,1))}
.day-r{position:relative;display:grid;grid-template-columns:72px 44px minmax(0,1fr);gap:0;padding:0 0 38px}
.day-r time{font-weight:600;font-size:17px;line-height:26px;font-variant-numeric:tabular-nums}
.day-r .dot{position:relative;z-index:1;width:15px;height:11px;margin:8px 0 0 15px;background:var(--b);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat}
.day-r b{display:block;font-weight:600;font-size:20px;line-height:28px}
.day-r p{color:var(--n700);margin-top:4px}
.day-r .tag{margin-top:8px}
.fwd{background:var(--w);display:grid;gap:0}
.fwd-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--n200);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.fwd-h .ctl{white-space:nowrap}
.fwd-t{padding:20px 18px;white-space:pre-line;font-size:16px;line-height:25px}

/* ---------- ki ---------- */
.ki{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto repeat(3,auto);grid-auto-flow:column;column-gap:30px;row-gap:10px}
.ki-c,.ki-c ul{display:contents}
.ki-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.ki-lines path{fill:none;stroke:var(--b);stroke-width:2}
.ki-c h3{font-weight:600;font-size:20px;line-height:28px;padding-bottom:14px;border-bottom:1px solid var(--n300);margin-bottom:6px}
.ki-c li{position:relative;padding:16px 18px 16px 40px;background:var(--w);font-size:16px;line-height:24px;transition:background-color .25s,color .25s}
.ki-c li::before{content:"";position:absolute;left:16px;top:24px;width:12px;height:9px;background:var(--n300);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat;transition:background-color .25s}
.ki-c li.hl{background:var(--b100);color:var(--b700)}
.ki-c li.hl::before{background:var(--b);-webkit-mask-image:var(--dash);mask-image:var(--dash)}
.ki-no li{color:var(--n700)}
.ki-no li::before{-webkit-mask:none;mask:none;width:10px;height:2px;top:27px;background:var(--n500)}
.ki-no s{text-decoration:none;background:linear-gradient(var(--n500),var(--n500)) 0 55%/var(--sw,100%) 1.5px no-repeat}
.dpath{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;position:relative}
.dnode{position:relative;display:grid;gap:10px;align-content:start;padding:26px 28px 26px 0}
.dnode+.dnode{padding-left:28px;border-left:1px solid var(--n300)}
.dnode small{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.dnode b{font-weight:600;font-size:20px;line-height:28px}
.dnode .now{font-size:15px;line-height:22px}
.dnode .nx{font-size:14px;line-height:20px;color:var(--n700);padding-top:10px;border-top:1px dashed var(--n300)}
.dnode .nx em{font-style:normal;font-weight:600;color:var(--n900);display:block;margin-bottom:2px}
.todo{background:#FFF4CC;color:#5c4a00;padding:0 4px}
.dpath-wire{position:relative;height:2px;background:var(--n300);margin-bottom:6px}
.dpath-wire i{position:absolute;top:-6px;left:0;width:19px;height:14px;background:var(--b);-webkit-mask:var(--flagmask) center/contain no-repeat;mask:var(--flagmask) center/contain no-repeat}
.inc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 60px;border-top:1px solid var(--n300)}
.inc li{display:grid;grid-template-columns:44px minmax(0,1fr);padding:22px 0;border-bottom:1px solid var(--n200)}
.inc .num{font-size:13px;color:var(--n500);line-height:26px}
.inc b{display:block;font-weight:600}
.inc p{color:var(--n700);font-size:15px;line-height:22px;margin-top:2px}

/* ---------- trust ---------- */
.trust-s{border-top:1px solid var(--n200);border-bottom:1px solid var(--n200)}
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.trust>div{display:flex;gap:20px;align-items:center;padding:32px 30px 32px 0}
.trust>div+div{padding-left:30px;border-left:1px solid var(--n200)}
.trust img{height:56px;width:auto;flex:none}
.trust p{font-size:14px;line-height:20px;color:var(--n700)}
.trust b{display:block;color:var(--k);font-size:15px;margin-bottom:2px}
.trust-yr{flex:none;font-weight:700;font-size:30px;line-height:1;letter-spacing:-.02em;color:var(--b)}
.trust-flag{width:48px;height:35px;flex:none;background:var(--b);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:90px;align-items:start}
.faq-side{display:grid;gap:24px;position:sticky;top:calc(var(--hd) + 40px)}
.faq-side .sh{margin-bottom:0}
.search{display:flex;align-items:center;gap:12px;height:52px;padding:0 16px;border:1px solid var(--n300);background:var(--w);transition:border-color .2s}
.search:focus-within{border-color:var(--k)}
.search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font-size:17px}
.search svg{color:var(--n500);flex:none}
.qa-list{border-top:1px solid var(--n300)}
.qa{border-bottom:1px solid var(--n300)}
.qa-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;border:0;background:none;text-align:left;font-weight:600;font-size:20px;line-height:28px;transition:color .2s}
.qa-q:hover{color:var(--b)}
.qa-q i{position:relative;width:20px;height:20px;flex:none}
.qa-q i::before,.qa-q i::after{content:"";position:absolute;left:3px;right:3px;top:9px;height:2px;background:currentColor;transition:transform .35s var(--e-out)}
.qa-q i::after{transform:rotate(90deg)}
.qa-q[aria-expanded="true"] i::after{transform:rotate(0deg)}
.qa-a{overflow:hidden}
.qa-a p{padding-bottom:24px;max-width:640px;color:var(--n700)}
.qa mark{background:var(--b100);color:var(--b700);padding:0 2px}
.qa-none{padding:22px 0;color:var(--n700)}

/* ---------- wissen / artikel ---------- */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--n300)}
.post{position:relative;display:grid;gap:14px;align-content:start;padding:28px 26px 30px 0;text-decoration:none;min-height:260px}
.post+.post{padding-left:26px;border-left:1px solid var(--n300)}
.posts.p2 .post.c0{padding-left:0;border-left:0}
.posts.p2 .post.c0 .post-bar{left:0}
.posts.p2 .post.rN{border-top:1px solid var(--n300)}
.post h3{font-weight:600;font-size:22px;line-height:30px;transition:color .2s}
.post .mut{font-size:15px;line-height:22px}
.post-m{display:flex;justify-content:space-between;gap:10px;font-size:13px;line-height:16px;color:var(--n500);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.post-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--b)}
.post-go svg{transition:transform .35s var(--e-out)}
a.post:hover h3{color:var(--b)}
a.post:hover .post-go svg{transform:translateX(5px)}
.post.soon h3{color:var(--n700)}
.post-bar{position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--b);transition:width .5s var(--e-out)}
.post+.post .post-bar{left:-1px}
a.post:hover .post-bar{width:calc(100% + 1px)}
.feat2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;border-top:1px solid var(--n300);border-bottom:1px solid var(--n300);margin-bottom:56px}
.feat2>a{display:grid;gap:16px;padding:34px 34px 34px 0;text-decoration:none;align-content:start}
.feat2>a+a{padding-left:34px;border-left:1px solid var(--n300)}
.feat2 h2{font-weight:600;font-size:34px;line-height:40px;letter-spacing:-.02em;transition:color .2s}
.feat2 a:hover h2{color:var(--b)}
.art{display:grid;grid-template-columns:200px minmax(0,640px) minmax(0,1fr);gap:50px;align-items:start}
.toc{position:sticky;top:calc(var(--hd) + 40px);display:grid;gap:10px;font-size:15px;line-height:22px}
.toc p{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
.toc a{text-decoration:none;color:var(--n700);padding-left:22px;position:relative;transition:color .2s}
.toc a::before{content:"";position:absolute;left:0;top:7px;width:12px;height:9px;background:var(--n300);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat}
.toc a.on{color:var(--k);font-weight:600}
.toc a.on::before{background:var(--b);-webkit-mask-image:var(--dash);mask-image:var(--dash)}
.art-b{display:grid;gap:22px;font-size:18px;line-height:30px}
.art-b h2{font-weight:600;font-size:30px;line-height:38px;letter-spacing:-.01em;margin-top:22px;scroll-margin-top:calc(var(--hd) + 30px)}
.art-b ul{display:grid;gap:10px}
.merk{background:var(--b100);padding:22px 24px;display:grid;gap:8px;color:var(--b700)}
.merk b{font-weight:600;color:var(--b700)}
.art-b blockquote{font-weight:600;font-size:24px;line-height:32px;padding-left:22px;position:relative}
.art-b blockquote::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--b)}
.aside-cta{position:sticky;top:calc(var(--hd) + 40px);display:grid;gap:16px;padding:26px;color:var(--w)}
.aside-cta p:not(.lab){font-weight:600;font-size:20px;line-height:28px}
.author{display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--n200);font-size:15px;line-height:22px}
.author b{display:block}

/* ---------- über uns ---------- */
.story{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:36px}
.story-line{position:absolute;left:0;right:0;top:0;height:2px;background:var(--n700)}
.story-line i{position:absolute;inset:0;background:var(--b);transform-origin:left;transform:scaleX(var(--t,1))}
.story>div{position:relative;display:grid;gap:10px;padding-right:30px}
.story>div::before{content:"";position:absolute;top:-44px;left:0;width:19px;height:14px;background:var(--b);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat}
.story .yr{font-weight:600;font-size:15px;color:var(--b400);margin:0;border:0}
.story b{font-weight:600;font-size:22px;line-height:28px}
.story p{color:var(--n300)}
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--n300)}
.tm{display:grid;grid-template-columns:96px minmax(0,1fr);gap:22px;align-items:center;padding:26px 30px 26px 0}
.tm+.tm{padding-left:30px;border-left:1px solid var(--n200)}
.tm .pic{width:96px;height:96px;display:grid;place-items:center;background:var(--k);color:var(--w);font-weight:600;font-size:24px}
.tm b{display:block;font-weight:600;font-size:20px;line-height:28px}
.tm span{display:block;color:var(--n700);font-size:15px;line-height:22px}
.team-more{padding:20px 0;border-top:1px solid var(--n200);font-size:15px;color:var(--n700)}
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--n300)}
.rules>div{display:grid;gap:12px;align-content:start;padding:28px 30px 0 0}
.rules>div+div{padding-left:30px;border-left:1px solid var(--n200)}
.rules .n{font-weight:600;font-size:15px;color:var(--b)}
.rules h3{font-weight:600;font-size:22px;line-height:28px}
.rules p{color:var(--n700);font-size:16px;line-height:24px}
.lv-col{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,100px);gap:0}
.lv-a{grid-column:1/5;grid-row:1/5}
.lv-b{grid-column:5/8;grid-row:1/3}
.lv-c{grid-column:5/8;grid-row:3/5}
.lv-col .ph{box-shadow:inset 0 0 0 1px var(--k)}

/* ---------- forms ---------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 18px}
.form .full{grid-column:1/-1}
.fld-i{display:grid;gap:8px}
.fld-i>span,.fld-g legend{font-weight:600;font-size:15px;line-height:22px;padding:0}
.fld-i em,.fld-g em{font-style:normal;font-weight:400;color:var(--n500);margin-left:4px}
.fld-i input,.fld-i textarea{height:50px;border:1px solid var(--n300);padding:0 14px;background:var(--w);font-size:17px;outline:none;transition:border-color .2s;border-radius:0;-webkit-appearance:none;appearance:none}
.fld-i textarea{height:110px;padding:12px 14px;resize:vertical;line-height:24px}
.fld-i input:focus,.fld-i textarea:focus{border-color:var(--k)}
.fld-i input[aria-invalid="true"]{border-color:var(--k);background:#FFF8F0}
.fld-g{border:0;padding:0;margin:0;display:grid;gap:10px}
.tgl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.rtg{display:flex;align-items:center;gap:10px;height:46px;padding:0 12px;border:1px solid var(--n300);background:transparent;font-weight:600;font-size:15px;text-align:left;transition:border-color .2s,background-color .2s,color .2s}
.rtg:hover{border-color:var(--k)}
.rtg[aria-pressed="true"]{border-color:transparent;background:var(--b100);color:var(--b700)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:20px;color:var(--n700)}
.consent input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--b)}
.form-err{font-size:14px;line-height:20px;color:#8a3b00;background:#FFF1E6;padding:10px 12px}
.form-note{font-size:13px;line-height:18px;color:var(--n500)}
.kontakt-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 80px;align-items:start}
.direct{display:grid;gap:0;border-top:1px solid var(--n300)}
.direct>div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--n200)}
.direct small{display:block;font-size:13px;color:var(--n500)}
.direct b{font-weight:600}
.person{display:flex;align-items:center;gap:16px;padding:22px;background:var(--n100);margin-bottom:24px}
.person .pic{width:64px;height:64px;display:grid;place-items:center;background:var(--k);color:var(--w);font-weight:600;font-size:18px;flex:none}
.person b{display:block;font-weight:600}
.person span{display:block;font-size:15px;line-height:22px;color:var(--n700)}

/* ---------- landing pages ---------- */
.lp-hero{position:relative;padding-block:calc(var(--hd) + 70px) 90px;overflow:hidden}
.lp-g{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px 80px;align-items:start}
.lp-t{display:grid;gap:26px;align-content:start}
.lp-pts{display:grid;gap:12px;font-size:18px;line-height:28px}
.lp-box{background:var(--w);color:var(--k);padding:30px}
.lp-box .form{grid-template-columns:minmax(0,1fr)}
.lp-box h2{font-weight:600;font-size:24px;line-height:30px;margin-bottom:20px}
.trust-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--n300)}
.trust-row>div{display:grid;gap:10px;align-content:start;padding:26px 26px 0 0;font-size:15px;line-height:22px;color:var(--n700)}
.trust-row>div+div{padding-left:26px;border-left:1px solid var(--n200)}
.trust-row q{font-weight:600;font-size:18px;line-height:26px;color:var(--k);quotes:"„" "“"}
.trust-row b{color:var(--k);font-size:17px}
.trust-row img{height:44px;width:auto}
.prev{display:grid;gap:0;background:var(--w)}
.prev-h{display:flex;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--n200);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.prev-b{padding:18px;display:grid;gap:14px}
.prev h4{font-weight:600;font-size:18px;line-height:24px}
.prev table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.prev td{padding:8px 0;border-top:1px solid var(--n200)}
.prev td:last-child{text-align:right;color:var(--n700)}
.bars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end;height:150px;padding-top:16px;border-bottom:1px solid var(--n200)}
.bars div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;font-size:12px;color:var(--n500)}
.bars b{font-weight:600;font-size:13px;color:var(--k)}
.bars i{display:block;align-self:stretch;background:var(--n300)}
.bars i.on{background:var(--b)}
.bars-l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;font-size:12px;color:var(--n500);text-align:center}
.ft-lp{padding:26px 0;border-top:1px solid var(--n200);font-size:14px;color:var(--n500)}
.ft-lp .c{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.ft-lp a{color:inherit}
.proto{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:#FFF4CC;color:#5c4a00;font-size:14px;line-height:20px}
.next{display:grid;border-top:1px solid var(--n700)}
.next li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--n900)}
.next span{font-weight:600;color:var(--b400);font-size:15px}
.next b{display:block;font-weight:600;font-size:18px;line-height:26px}
.next p{color:var(--n300);font-size:15px;line-height:22px;margin-top:2px}
.sumbox{display:grid;gap:0;font-size:15px;line-height:22px}
.sumbox div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--n900)}
.sumbox span{color:var(--n300)}

/* ---------- legal ---------- */
.legal-b{display:grid;gap:26px;max-width:760px}
.legal-b h2{font-weight:600;font-size:22px;line-height:30px}
.legal-b p{color:var(--n700)}

/* ---------- band ---------- */
.band{background:linear-gradient(120deg,#0055FF 0%,#0048DB 100%);color:var(--w);padding-block:130px}
.band-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 90px;align-items:end}
.band-txt{display:grid;gap:26px;align-content:start}
.band-txt .sh{margin-bottom:0}
.band .t-lead{color:var(--w)}
.band-acts{display:grid;gap:22px;justify-items:start}
.band-acts .tlink{font-size:20px;line-height:30px}
.band-note{padding-top:18px;border-top:1px solid rgba(255,255,255,.45);font-size:15px;line-height:22px;max-width:460px}

/* ---------- footer ---------- */
.ft{padding-block:96px 40px}
.ft-top{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr));gap:40px}
.ft-b{display:grid;gap:20px;align-content:start;max-width:360px}
.ft h4,.ft .ft-h{font-weight:500;font-size:13px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--n500);margin:0 0 16px}
.ft ul{display:grid;gap:10px}
.ft ul a{text-decoration:none;color:var(--n300);transition:color .2s}
.ft ul a:hover{color:var(--w)}
.copy{display:inline-flex;align-items:center;gap:12px;font-size:15px}
.ft-bot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:80px;padding-top:24px;border-top:1px solid var(--n900)}
.ft-bot nav{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px}
.ft-bot nav a{text-decoration:none;color:var(--n500)}
.ft-bot nav a:hover{color:var(--w)}

.toast{position:fixed;z-index:95;left:max(20px,env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 40px);display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--k);color:var(--w);font-weight:500;font-size:15px;line-height:20px;transform:translateY(calc(100% + 40px));visibility:hidden;transition:transform .45s var(--e-out),visibility 0s linear .45s;pointer-events:none}
.toast::before{content:none}
.toast.on{transform:none;visibility:visible;transition:transform .45s var(--e-out)}

/* ---------- sub pages ---------- */
.phero.pat::before,.lp-hero.pat::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 80% at 85% 70%,rgba(0,85,255,.14) 0%,rgba(0,85,255,0) 70%),linear-gradient(90deg,#111 0%,rgba(17,17,17,.92) 30%,rgba(17,17,17,.55) 62%,rgba(17,17,17,.2) 100%)}
.lp-hero .c{position:relative}
.phero-s{padding-bottom:56px}
.sec-top0{padding-top:0}
.facts-mini dt{color:var(--n300)}
.facts-mini dd{margin:0}
.phero.lt .facts-mini div{border-color:var(--n300)}
.phero.lt .facts-mini dt{color:var(--n700)}
.prose{display:grid;gap:18px;max-width:620px}
.dk .prose.mut{color:var(--n300)}
.lt-sec .px-m{border-top-color:var(--n300)}
.lt-sec .pm{border-bottom-color:var(--n200)}
.howto{display:grid;gap:16px;align-content:start;padding:26px;background:linear-gradient(160deg,#F5F7FB 0%,#E9EFFA 100%);font-size:15px;line-height:22px;color:var(--n700)}
.howto .lab{color:var(--k)}
.howto dl{display:grid;gap:14px;margin-top:4px}
.howto dl div{display:grid;gap:8px}
.howto dd{margin:0}
.howto .ev{cursor:default;background:var(--w);border-color:transparent}
.howto .ev::after{display:none}
.dk .day-line{background:var(--n700)}
.dk .day-r p{color:var(--n300)}
.dk .day-r .tag.dev{color:var(--n300)}
.dpath-wire{margin-top:6px}
.dpath-wire i{left:auto;right:0}
.dnode{transition:opacity .4s}
.dfoot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 60px;margin-top:40px;border-top:1px solid var(--n300)}
.dfoot>div{display:grid;gap:6px;padding:22px 0;font-size:15px;line-height:22px}
.dfoot b{font-weight:600;font-size:17px}
.dfoot p{color:var(--n700)}
.w-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 30px;margin-bottom:20px}
.w-bar .lab{color:var(--n700)}
.art-head{max-width:860px}
.art-fig{aspect-ratio:3/2;margin-block:10px}
.author .av{width:48px;height:48px}
.author .mut{display:block;font-size:14px;line-height:20px}
.aside-cta .small{display:block}
.kt-head{max-width:820px}
.kt-side{display:grid;gap:18px;align-content:start}
.kt-side .person{margin-bottom:0}
.kt-more{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:6px}
.form-end{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:4px}
.form-end .form-note{max-width:360px}
.fld-g legend{margin-bottom:10px}
.lp-pts{font-size:18px;line-height:28px}
.lp-pts li::before{top:9px}
.lp-box .person{margin-bottom:20px}
.lp-box .form{gap:16px}
.lp-box .btn{justify-content:center}
.lp-prev{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px 70px;align-items:center}
.lp-prev .sh{margin-bottom:0}
.prev-stage{padding:64px 30px 40px}
.prev-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;align-items:start}
.prev-pair .prev:last-child{margin-top:40px}
.danke .lp-t{gap:22px}
.danke .proto{justify-self:start}
.danke-side{display:grid;gap:22px;align-content:start}
.danke-sum{display:grid;gap:12px;padding:22px;background:rgba(255,255,255,.05)}
.danke-sum .sumbox b{font-weight:600;text-align:right}
.danke-side .fwd{color:var(--k)}
.lv-col.ph-gap,.twocol .lv-col{gap:6px}
.twocol .lv-col .ph{box-shadow:none}
.trust-row>div>span{display:block}
.trust-row .fig{font-size:44px}
.team-more{margin-top:0}
.posts.short .post{min-height:0}

/* ---------- header: second audience ---------- */
.hd-alt{font-weight:500;font-size:15px;text-decoration:none;color:inherit;opacity:.72;white-space:nowrap;padding:6px 0;transition:opacity .2s}
.hd-alt:hover,.hd-alt[aria-current="page"]{opacity:1}
.hd-alt[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--b)}
.mnav .mnav-alt{color:var(--n300)}

/* ---------- explainer (start) ---------- */
.xp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 60px;align-items:stretch}
.xp-side{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-width:0}
.xp-steps{display:grid;border-top:1px solid var(--n300)}
.xp-s{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px 0;width:100%;padding:24px 0 26px;border:0;border-bottom:1px solid var(--n200);background:none;text-align:left;color:var(--k);cursor:pointer}
.xp-s .num{grid-row:span 2;font-size:13px;line-height:28px;color:var(--b)}
.xp-s b{font-weight:600;font-size:22px;line-height:28px;transition:color .3s}
.xp-s .xp-t{grid-column:2;font-size:16px;line-height:24px;color:var(--n700)}
.xp-p{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--b);transform-origin:left;transform:scaleX(0)}
.xp.js .xp-s{color:var(--n500)}
.xp.js .xp-s .num{color:var(--n500)}
.xp.js .xp-s .xp-t{max-height:0;opacity:0;overflow:hidden;transition:max-height .55s var(--e-out),opacity .4s}
.xp.js .xp-s[aria-selected="true"]{color:var(--k)}
.xp.js .xp-s[aria-selected="true"] .num{color:var(--b)}
.xp.js .xp-s[aria-selected="true"] .xp-t{max-height:140px;opacity:1}
.xp.js .xp-s:hover b{color:var(--k)}
.xp-replay{align-self:flex-start}
.xp:not(.js) .xp-replay{display:none}
.xp-stage{position:relative;min-height:580px;background:linear-gradient(160deg,#F5F7FB 0%,#E7EEFA 100%);overflow:hidden;min-width:0}
.xp-stage>.tag{position:absolute;top:20px;left:20px;z-index:3;background:var(--w)}
.xp-map{position:absolute;inset:0;width:100%;height:100%;display:block}
.xp-map .ring{fill:none;stroke:#B2CDFF;stroke-width:1.5}
.xp-map .ring-l{font:500 12px var(--f);fill:#4884FF;letter-spacing:.04em}
.xp-map .area{fill:rgba(0,85,255,.07)}
.xp-map .road{fill:none;stroke:#D6DEEC;stroke-width:2;stroke-linecap:round}
.xp-map .river{fill:none;stroke:#C9D9F5;stroke-width:4;stroke-linecap:round}
.xp-map .town{font:500 12px var(--f);fill:var(--n500)}
.xp-map .town-d{fill:var(--n500)}
.xp-map .home-l{font:600 13px var(--f);fill:var(--k)}
.xp-card{position:absolute;z-index:2;background:var(--w);width:236px;font-size:14px;line-height:20px;transition:opacity .45s var(--e-out),transform .45s var(--e-out)}
.xp-ad{left:20px;top:64px;padding:14px;display:grid;gap:10px}
.xp-ad-h{display:flex;align-items:center;gap:10px}
.xp-ad-h b{display:block;font-weight:600;font-size:14px;line-height:18px}
.xp-ad-h small{display:block;font-size:12px;color:var(--n500)}
.xp-ad p b{font-weight:600}
.xp-ad-f{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--n200);font-size:13px}
.xp-ad-f span:first-child{font-weight:600;color:var(--b)}
.xp-ad-f .num{color:var(--n500);font-size:12px}
.xp-ph{left:20px;bottom:20px;padding:14px;display:grid;gap:8px}
.xp-ph small{font-size:12px;color:var(--n500)}
.xp-ph .xp-q{font-weight:600;font-size:15px;line-height:21px}
.xp-ph .opt{padding:8px 10px;font-size:14px}
.xp-ph .msg{max-width:none;background:var(--b100);color:var(--b700);font-size:13px;line-height:19px;padding:10px 12px;margin-top:4px}
.xp-ph .msg b{color:var(--b600)}
.xp-ib{right:20px;top:64px;width:268px}
.xp-ib ul{display:grid;padding:4px 14px 10px}
.xp-ib li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--n200);font-weight:600;font-size:14px;line-height:18px}
.xp-ib li:first-child{border-top:0}
.xp-ib li small{display:block;font-weight:400;font-size:12px;color:var(--n500)}
.xp-ib .av{width:32px;height:32px;font-size:11px}
.st{font-style:normal;font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;background:var(--n100);color:var(--n700)}
.st.g{background:var(--b100);color:var(--b700)}
.xp.js .xp-card{opacity:0;transform:translateY(14px);pointer-events:none}
.xp.js .xp-stage[data-k="0"] .xp-ad,.xp.js .xp-stage[data-k="1"] .xp-ph,.xp.js .xp-stage[data-k="2"] .xp-ib{opacity:1;transform:none;pointer-events:auto}
.xp.js .xp-ib li{opacity:0;transform:translateX(10px);transition:opacity .4s,transform .4s var(--e-out)}
.xp.js .xp-stage[data-k="2"] .xp-ib li{opacity:1;transform:none}
.xp.js .xp-stage[data-k="2"] .xp-ib li:nth-child(2){transition-delay:.12s}
.xp.js .xp-stage[data-k="2"] .xp-ib li:nth-child(3){transition-delay:.24s}
.xp.js .xp-stage[data-k="2"] .xp-ib li:nth-child(4){transition-delay:.36s}
.xp.js .xp-stage[data-k="2"] .xp-ib li:nth-child(5){transition-delay:.48s}

/* ---------- audience router (start) ---------- */
.route{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--n300)}
.route a{position:relative;display:grid;gap:12px;align-content:start;padding:26px 28px 6px 0;text-decoration:none;color:var(--k)}
.route a+a{padding-left:28px;border-left:1px solid var(--n300)}
.route .lab{color:var(--n700)}
.route b{font-weight:600;font-size:22px;line-height:29px;transition:color .2s}
.route-go{display:inline-flex;gap:8px;align-items:center;font-weight:600;color:var(--b);margin-top:4px}
.route-go svg{transition:transform .35s var(--e-out)}
.route a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--b);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e-out)}
.route a+a::before{left:-1px}
.route a:hover::before{transform:scaleX(1)}
.route a:hover b{color:var(--b)}
.route a:hover .route-go svg{transform:translateX(4px)}

/* ---------- before / after (fürs büro) ---------- */
.ba{position:relative;height:470px;margin-top:56px;overflow:hidden;--x:50%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba-l{position:absolute;inset:0}
.ba-before{background:#E9E8E4}
.ba-after{background:linear-gradient(160deg,#F5F7FB 0%,#E3EBFA 100%);clip-path:inset(0 0 0 var(--x))}
.ba-tag{position:absolute;top:18px;z-index:2;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;background:var(--k);color:var(--w)}
.ba-before .ba-tag{left:18px}
.ba-after .ba-tag{right:18px;background:var(--b)}
.ba-h{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--k);z-index:3;pointer-events:none}
.ba-h i{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;background:var(--k);color:var(--w);display:flex;align-items:center;justify-content:center;gap:2px}
.ba-r{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4;-webkit-appearance:none;appearance:none;background:none}
.ba-r:focus-visible+.ba-h i{outline:2px solid var(--b);outline-offset:3px}
.ba-note{margin-top:14px}
.ba-switch,.ba-n-m{display:none}
.ba .mail{position:absolute;left:4%;top:15%;width:min(330px,46%);background:var(--w);font-size:13px;line-height:18px}
.ba .mail p{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-top:1px solid var(--n200)}
.ba .mail p:first-child{border-top:0;background:var(--n100);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.ba .mail b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ba .mail span{color:var(--n500);white-space:nowrap}
.ba .xl{position:absolute;left:20%;top:58%;width:min(300px,44%);background:var(--w);font-size:12px;line-height:16px;transform:rotate(-1.5deg);border:1px solid #CFCFCF}
.ba .xl div{display:grid;grid-template-columns:1.1fr 1fr 1fr}
.ba .xl span{padding:6px 8px;border-left:1px solid #DADADA;border-top:1px solid #DADADA}
.ba .xl span:first-child{border-left:0}
.ba .xl div:first-child span{border-top:0;background:#EEF3EC;font-weight:600}
.ba .paper{position:absolute;width:min(190px,30%);padding:12px 14px;background:#FFE98A;color:#3d3300;font-size:13px;line-height:18px}
.ba .paper b{display:block;font-weight:700;margin-bottom:2px}
.ba .p1{left:39%;top:9%;transform:rotate(3deg)}
.ba .p2{left:64%;top:44%;transform:rotate(-4deg)}
.ba .p3{left:78%;top:12%;transform:rotate(2deg);background:#FFD7C2;color:#4a1f00}
.ba .calls{position:absolute;left:58%;top:74%;background:var(--k);color:var(--w);font-size:13px;line-height:18px;padding:10px 14px}
.ba .calls small{display:block;color:var(--n300);font-size:12px}
.ba .clean{position:absolute;left:54%;top:13%;width:min(400px,42%);background:var(--w)}
.ba .clean ul{display:grid;padding:4px 16px 10px}
.ba .clean li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--n200);font-weight:600;font-size:14px;line-height:18px}
.ba .clean li:first-child{border-top:0}
.ba .clean li small{display:block;font-weight:400;font-size:12px;color:var(--n500)}
.ba .clean .av{width:34px;height:34px;font-size:12px}
.ba .ok{position:absolute;left:54%;top:80%;display:flex;align-items:center;gap:10px;background:var(--w);padding:10px 14px;font-size:13px}
.ba .ok svg{color:var(--b)}

/* ---------- appointment slots ---------- */
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.slot-d{display:grid;gap:6px;align-content:start}
.slot-d b{font-weight:600;font-size:15px;line-height:20px}
.slot-d>span{font-size:13px;line-height:16px;color:var(--n500);margin-top:-4px;margin-bottom:2px}
.slot-d .chip{width:100%;justify-content:center;padding:0 8px}
.slots-n{font-size:13px;line-height:18px;color:var(--n500);margin-top:8px}

/* ---------- für arbeitnehmer ---------- */
.apply{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px 80px;align-items:center}
.apply .stage{padding:56px 30px 40px}
.apply .phone{width:300px}
.apply .ph-s{min-height:470px}
.apply .opt{width:100%;border:0;text-align:left;cursor:pointer;font:inherit;font-size:15px}
.apply .opt:hover:not(.sel){background:var(--n200)}
.apply .ph-body{display:grid;gap:8px;align-content:start}
.apply .ph-done{display:grid;gap:12px}
.apply .ph-done .msg{justify-self:stretch;max-width:none;background:var(--b100);color:var(--b700)}
.apply .ph-done .msg b{color:var(--b600)}
.apply .ph-again{justify-self:start}
.know{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--n300)}
.know>div{display:grid;gap:12px;align-content:start;padding:28px 30px 0 0}
.know>div+div{padding-left:30px;border-left:1px solid var(--n200)}
.know h3{font-weight:600;font-size:22px;line-height:28px}
.know p{color:var(--n700)}
.dk .lv-col .ph{box-shadow:none}
.dk .lv-col{gap:6px}

.ue-ph{aspect-ratio:4/3;align-self:center}
.apply .ph-prog{grid-template-columns:repeat(4,1fr)}

.hd.over{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}

/* ---------- responsive ---------- */
@media (max-width:1239px){
  .pat{background-position:var(--px,0px) var(--py,0px),0 0}
}
@media (max-width:1180px){
  .nav{gap:20px;font-size:14px}
  .hd-in{gap:28px}
  .wm{width:160px}
}
@media (max-width:1100px){
  .t-hero{font-size:54px;line-height:58px}
  .t-h1{font-size:46px;line-height:52px}
  .t-h2{font-size:40px;line-height:48px}
  .nav,.hd-cta{display:none}
  .burger{display:block}
  .px,.faq,.band-in,.twocol,.office,.kontakt-g{gap:50px}
  .sys-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg:nth-child(3){border-left:0}
  .sg:nth-child(n+3){border-top:1px solid var(--n900)}
  .art{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;border-top:1px solid var(--n300);padding-top:20px}
  .aside-cta{position:static}
}
@media (max-width:960px){
  .hero-in{grid-template-columns:minmax(0,1fr);min-height:0;gap:44px;padding-block:calc(var(--hd) + 44px) 60px}
  .hero-ph{max-height:none;aspect-ratio:4/5;width:100%;max-width:520px}
  .phero-g,.lp-g{grid-template-columns:minmax(0,1fr)}
  .phero-ph{height:auto;aspect-ratio:3/2}
  .plan-body{grid-template-columns:minmax(0,1fr);gap:24px}
  .plan-vis{padding:24px 12px}
  .sim-body{display:flex;flex-direction:column}
  .sim-side{display:contents}
  .sim-steps{order:1;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid var(--n200)}
  .ss{grid-template-columns:minmax(0,1fr);justify-items:center;padding:14px 4px;border-bottom:0;border-left:1px solid var(--n200)}
  .ss:first-child{border-left:0}
  .ss .ss-t,.ss .ss-d{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ss .num{font-size:15px}
  .sim-stage{order:2;padding:60px 20px 80px}
  .sim-txt{order:3;border-top:1px solid var(--n200);padding-inline:0}
  .px,.twocol,.office,.band-in,.kontakt-g{grid-template-columns:minmax(0,1fr)}
  .gw{grid-template-columns:minmax(0,1fr)}
  .gwc,.gwc:first-child{border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--n300)}
  .gwc:first-child{border-top:0}
  .bw-top{grid-template-columns:minmax(0,1fr);gap:40px}
  .rl{grid-template-columns:minmax(0,1fr)}
  .rl-side{display:contents}
  .rl-tabs{order:1;grid-template-columns:repeat(2,minmax(0,1fr))}
  .rt{padding:14px 12px 14px 0}
  .rl-stage{order:2;padding:56px 16px 36px}
  .rl-txt{order:3;border-top:1px solid var(--n200);padding-right:0}
  .faq{grid-template-columns:minmax(0,1fr)}
  .faq-side{position:static}
  .cost,.jobs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .job:nth-child(3){padding-left:0;border-left:0}
  .job:nth-child(n+3){border-top:1px solid var(--n300);margin-top:24px}
  .cost>div{padding-bottom:24px}
  .ft-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft-b{grid-column:1/-1}
  .logos .c{grid-template-columns:minmax(0,1fr);gap:14px}
  .lg-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg-row li{border-left:0;border-top:1px solid var(--n200);justify-content:flex-start;padding:0 10px 0 0}
  .ki{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .ki-c:not(:first-of-type) h3{margin-top:30px}
  .ki-lines{display:none}
  .posts{grid-template-columns:minmax(0,1fr)}
  .post+.post,.posts.p2 .post:nth-child(3n+1){padding-left:0;border-left:0;border-top:1px solid var(--n300)}
  .post{min-height:0}
  .feat2{grid-template-columns:minmax(0,1fr)}
  .feat2>a+a{padding-left:0;border-left:0;border-top:1px solid var(--n300)}
  .cmp-all{display:none}
  .lv-col{grid-template-rows:repeat(4,70px)}
  .team{grid-template-columns:minmax(0,1fr)}
  .tm+.tm{padding-left:0;border-left:0;border-top:1px solid var(--n200)}
}
@media (max-width:760px){
  .vg-tiles{grid-template-columns:minmax(0,1fr)}
  .vt{min-height:0;gap:10px;padding:22px 0;border-left:0;border-top:1px solid var(--n300)}
  .vt:first-child{border-top:0}
  .vt.on{padding-inline:18px}
  .vt-name{font-size:24px;line-height:30px}
  .steps3,.story{grid-template-columns:minmax(0,1fr)}
  .st-track,.story-line{display:none}
  .story>div{padding:0 0 26px 0}
  .story>div::before{position:static;display:block;margin-bottom:6px}
  .steps3 li{padding:16px 0 0}
  .facts,.alts,.cond,.terms,.rules,.trust,.px-row,.trust-row,.dpath,.inc{grid-template-columns:minmax(0,1fr)}
  .fact,.cond>div+div,.terms>div+div,.rules>div+div,.px-row>div+div,.trust-row>div+div,.dnode+.dnode{border-left:0;padding-left:0}
  .fact{padding:26px 0;border-bottom:1px solid var(--n200)}
  .cond>div+div,.terms>div+div,.rules>div+div,.trust-row>div+div{border-top:1px solid var(--n200);margin-top:24px}
  .px-row>div+div{border-top:1px solid var(--n700);margin-top:22px}
  .dnode+.dnode{border-top:1px solid var(--n300)}
  .trust>div,.trust>div+div{padding:24px 0;border-left:0}
  .trust>div+div{border-top:1px solid var(--n200)}
  .v2,.v3,.v4{grid-template-columns:minmax(0,1fr)}
  .v3 .camp,.v4 .conf{max-width:280px;justify-self:center;width:100%}
  .form{grid-template-columns:minmax(0,1fr)}
  .tgl{grid-template-columns:minmax(0,1fr)}
  .day-line{left:84px}
  .day-r{grid-template-columns:62px 44px minmax(0,1fr)}
}
@media (max-width:640px){
  .sec{padding-block:96px}
  .sec-s{padding-block:64px}
  .band{padding-block:96px}
  .t-hero{font-size:42px;line-height:46px}
  .t-h1{font-size:36px;line-height:42px}
  .t-h2{font-size:32px;line-height:38px}
  .t-h3{font-size:24px;line-height:30px}
  .t-lead{font-size:18px;line-height:28px}
  .phero{padding-block:calc(var(--hd) + 50px) 64px}
  .wm{width:150px}
  .sh{margin-bottom:48px}
  .fig{font-size:52px}
  .pm{grid-template-columns:minmax(0,1fr);gap:16px}
  .quote blockquote{font-size:24px;line-height:32px}
  .pr{grid-template-columns:minmax(0,1fr);gap:4px}
  .sys-bar{padding:16px}
  .seg button{padding:0 11px;font-size:14px}
  .seg-l{display:none}
  .seg-s{display:inline}
  .sys-grid{grid-template-columns:minmax(0,1fr)}
  .sg{border-left:0;border-top:1px solid var(--n900);padding:20px 16px}
  .sg:first-child{border-top:0}
  .sys-q{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px 16px}
  .sys-diff{margin-left:0}
  .pv-node text{font-size:22px}
  .pv-node .t2{font-size:19px}
  .pv-bpt{font-size:21px}
  .pv-lbl{font-size:16px}
  .cost,.jobs{grid-template-columns:minmax(0,1fr)}
  .job+.job{padding-left:0;border-left:0;border-top:1px solid var(--n300);margin-top:24px}
  .yr-chart{padding:24px 14px 16px}
  .yr-mo{font-size:10px}
  .yr-mo span{padding-left:2px}
  .yr-h{width:22px;height:22px;margin-left:-11px;top:4px}
  .yr-z{width:20px;height:20px;margin-left:-10px;top:5px;font-size:11px}
  .qa-q{font-size:18px;line-height:26px}
  .ft-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dim{grid-template-columns:minmax(0,1fr) 90px 34px}
  .sim-stage{padding:56px 12px 76px}
  .mk-b{padding:14px}
  .kb{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct{font-size:14px;line-height:20px}
  .ct th,.ct td{padding:12px 10px}
  .rt{font-size:15px}
  .lp-box{padding:20px}
  .next li{grid-template-columns:minmax(0,1fr);gap:4px}
  .feat2 h2{font-size:28px;line-height:34px}
  .art-b{font-size:17px;line-height:28px}
  .hd-lp .lp-tel span{display:none}
}
@media (max-width:400px){
  .seg button{padding:0 9px;font-size:13px}
}
@media (max-width:960px){
  .lp-prev,.dfoot{grid-template-columns:minmax(0,1fr)}
  .posts.p2 .post,.posts.p2 .post.c0{padding-left:0;border-left:0;border-top:1px solid var(--n300)}
  .posts.p2 .post.f0{border-top:0}
  .phero.pat::before,.lp-hero.pat::before{background:radial-gradient(70% 50% at 80% 90%,rgba(0,85,255,.14) 0%,rgba(0,85,255,0) 70%),linear-gradient(180deg,rgba(17,17,17,.9) 0%,rgba(17,17,17,.75) 60%,rgba(17,17,17,.5) 100%)}
}
@media (max-width:640px){
  .prev-pair{grid-template-columns:minmax(0,1fr)}
  .prev-pair .prev:last-child{margin-top:0}
  .prev-stage{padding:56px 14px 24px}
  .howto{padding:20px}
  .form-end .btn{width:100%;justify-content:center}
}
@media (max-width:1100px){
  .hd-alt{display:none}
  .xp{grid-template-columns:minmax(0,1fr)}
  .xp-side{order:2}
  .xp-stage{order:1}
  .apply{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .route,.know{grid-template-columns:minmax(0,1fr)}
  .route a,.route a+a{padding:22px 0 14px;border-left:0}
  .route a+a{border-top:1px solid var(--n300)}
  .route a+a::before{left:0}
  .know>div+div{padding-left:0;border-left:0;border-top:1px solid var(--n200);margin-top:24px}
  .ba{height:520px}
  .ba .mail{left:4%;top:12%;width:64%}
  .ba .xl{left:6%;top:58%;width:70%}
  .ba .p1{left:30%;top:36%;width:48%}
  .ba .p2{left:46%;top:76%;width:46%}
  .ba .p3,.ba .calls{display:none}
  .ba .clean{left:18%;top:12%;width:76%}
  .ba .ok{left:18%;top:82%}
}
@media (max-width:640px){
  .xp-stage{display:flex;flex-direction:column;min-height:0}
  .xp-map{position:relative;height:360px;flex:none}
  .xp-card{position:static;width:auto;margin:0 14px 14px}
  .xp.js .xp-card{display:none}
  .xp.js .xp-stage[data-k="0"] .xp-ad,.xp.js .xp-stage[data-k="1"] .xp-ph,.xp.js .xp-stage[data-k="2"] .xp-ib{display:grid}
  .xp.js .xp-stage[data-k="2"] .xp-ib{display:block}
  .xp-s b{font-size:19px;line-height:25px}
  .slots{gap:6px}
  .slot-d .chip{font-size:14px}
  .apply .stage{padding:48px 12px 24px}
  .apply .phone{width:280px}
}
@media (max-width:640px){
  .ba-switch{display:inline-flex;margin-top:40px}
  .ba{margin-top:12px}
  .ba-r,.ba-h{display:none}
  .ba-n-d{display:none}
  .ba-n-m{display:inline}
}
/* =====================================================================
   v7 · lean start page: purpose sentence, documentary photos, hairlines
   ===================================================================== */
.h7{padding-top:calc(var(--hd) + env(safe-area-inset-top,0px) + 96px);background:var(--w)}
.h7-t{font-weight:700;font-size:76px;line-height:80px;letter-spacing:-.04em;max-width:1160px;text-wrap:balance}
.h7-t .ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.h7-t .ln>span{display:block}
.h7-t .q{color:#8a8a8a}
.h7-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 80px;align-items:end;margin-top:44px;padding-top:28px;border-top:1px solid var(--n200)}
.h7-row .t-lead{max-width:620px}
.h7-act{display:grid;gap:16px;justify-items:start}
.h7 .acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.h7-terms{font-size:14px;line-height:20px;color:var(--n700)}
.h7-fig{margin-top:64px}
.h7-ph{aspect-ratio:12/5;max-width:100%}
.h7-ph img{object-position:50% 40%}
.cap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 24px;padding-top:12px;font-size:13px;line-height:18px;color:var(--n500)}

.nm{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:90px;align-items:center}
.nm-txt .sh{margin-bottom:44px}
.rows{border-top:1px solid var(--k)}
.rows>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:24px;padding:18px 0;border-bottom:1px solid var(--n200)}
.rows dt{font-weight:600}
.rows dd{margin:0;color:var(--n700)}
.nm-fig{min-width:0}
.nm-ph{aspect-ratio:2/3;max-width:100%}
.cl{position:absolute;left:55.9%;top:62.3%;width:0;height:0;pointer-events:none;--len:clamp(56px,7.5vw,104px)}
.cl-dot{position:absolute;left:-8px;top:-8px;width:16px;height:16px;background:var(--w)}
.cl-dot::after{content:"";position:absolute;inset:4px;background:var(--b)}
.cl-ln{position:absolute;left:-.75px;top:8px;width:1.5px;height:var(--len);background:var(--w);transform-origin:top}
.cl-lb{position:absolute;left:0;top:calc(var(--len) + 8px);transform:translateX(-50%);display:grid;gap:2px;padding:10px 14px;background:var(--w);color:var(--k);white-space:nowrap;text-align:center}
.cl-lb b{font-weight:600;font-size:15px;line-height:18px}
.cl-lb small{font-size:12px;line-height:16px;color:var(--n700)}

.xp-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-top:32px;max-width:860px;font-size:15px;line-height:22px;color:var(--n700)}
.xp-note .tlink{font-size:15px;line-height:22px}

.cw3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--k)}
.cw3>div{display:grid;gap:18px;align-content:start;padding:28px 32px 0 0}
.cw3>div+div{padding-left:32px;border-left:1px solid var(--n200)}
.cw3 h3{font-weight:600;font-size:20px;line-height:28px}
.cw3 ul{display:grid;gap:12px;font-size:16px;line-height:24px}
.money>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--n200);font-size:15px;line-height:22px}
.money dt{color:var(--n500)}
.money dd{margin:0;font-weight:600}

.rf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:90px;align-items:start}
.rf-main{min-width:0}
.rf-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--k)}
.rf-row>div{display:grid;gap:10px;padding:26px 24px 0 0;align-content:start}
.rf-row>div+div{padding-left:24px;border-left:1px solid var(--n300)}
.rf-row .ev::after{display:none}
.rf-row p:not(.fig){font-size:15px;line-height:22px;color:var(--n700)}
.rf-q{display:grid;gap:28px;align-content:start;padding-top:6px}
.rf-q blockquote{font-weight:600;font-size:32px;line-height:40px;letter-spacing:-.015em;text-wrap:balance}

.hk{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:32px 90px;align-items:end;margin-bottom:56px}
.hk .sh{margin-bottom:0}
.hk-txt{display:grid;gap:18px;justify-items:start}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.strip li{min-width:0}
.strip li:nth-child(even){margin-top:56px}
.strip .ph{aspect-ratio:3/4;max-width:100%}
.strip figcaption{padding-top:10px;font-size:13px;line-height:18px;color:var(--n500)}
.gk{display:grid;gap:24px;justify-items:start;margin-top:96px}
.gk-h{font-weight:600;font-size:20px;line-height:28px}
.gk-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;border-top:1px solid var(--k)}
.gk-row li{display:grid;gap:10px;align-content:start;padding:24px 28px 0 0}
.gk-row li+li{padding-left:28px;border-left:1px solid var(--n200)}
.gk-row .tag{justify-self:start}
.gk-row b{font-weight:600;font-size:22px;line-height:28px}
.gk-row span:not(.tag){font-size:15px;line-height:22px;color:var(--n700)}

.band-who{display:flex;align-items:center;gap:14px}
.band-who img{width:56px;height:56px;object-fit:cover;flex:none}
.band-who b{display:block;font-weight:600}
.band-who span{font-size:15px;line-height:22px}
.band-note a{color:var(--w);font-weight:600}

/* v7 · über uns */
.ue-fig{margin-top:72px}
.ue-prose{padding-top:44px}
.fld .story{grid-template-columns:repeat(4,minmax(0,1fr))}
.fld .story-line{background:var(--n300)}
.fld .story .yr{color:var(--b)}
.fld .story p{color:var(--n700)}
.ue-name{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:40px 90px;align-items:start}
.ue-flag{width:100%;max-width:220px;height:auto;fill:var(--b);margin-top:8px}
.ue-name .sh{margin-bottom:28px}
.tm-ph{width:96px;height:96px;object-fit:cover}
@media (max-width:1180px){
  .h7-t{font-size:64px;line-height:68px}
}
@media (max-width:960px){
  .cw3{grid-template-columns:minmax(0,1fr)}
  .cw3>div+div{padding-left:0;border-left:0;border-top:1px solid var(--n200);margin-top:24px}
  .h7-row{grid-template-columns:minmax(0,1fr)}
  .h7-ph{aspect-ratio:16/10}
  .nm,.rf,.hk{grid-template-columns:minmax(0,1fr);gap:48px}
  .nm-fig{max-width:520px}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .strip li:nth-child(even){margin-top:36px}
}
@media (max-width:1100px) and (min-width:761px){
  .fld .story{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:72px}
  .fld .story-line{display:none}
  .fld .story>div::before{position:static;display:block;margin-bottom:6px}
}
@media (max-width:760px){
  .fld .story{grid-template-columns:minmax(0,1fr);gap:40px}
  .ue-name{grid-template-columns:minmax(0,1fr)}
  .ue-flag{max-width:96px}
  .ue-prose{padding-top:0}
  .cw3,.gk-row,.rf-row{grid-template-columns:minmax(0,1fr)}
  .cw3>div+div,.gk-row li+li,.rf-row>div+div{padding-left:0;border-left:0;border-top:1px solid var(--n200);margin-top:24px}
  .rows>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .gk{margin-top:64px}
}
@media (max-width:640px){
  .h7{padding-top:calc(var(--hd) + env(safe-area-inset-top,0px) + 44px)}
  .h7-t{font-size:40px;line-height:44px;letter-spacing:-.035em}
  .h7-row{margin-top:26px;padding-top:20px}
  .h7 .acts .btn{width:100%;justify-content:center}
  .h7-fig{margin-top:40px}
  .h7-ph{aspect-ratio:4/5}
  .h7-ph img{object-position:52% 50%}
  .rf-q blockquote{font-size:24px;line-height:32px}
  .cl-lb{padding:8px 10px}
  .cl-lb small{display:none}
}
/* =====================================================================
   v8 · dark first. .nt flips the neutral tokens, so every light component
   reads on dark; .onlight restores light tokens for cards that stay white.
   ===================================================================== */
.nt{--k:#F4F4F5;--w:#0E0E10;--n900:#E4E4E7;--n700:#A9A9B2;--n500:#8B8B94;--n300:rgba(255,255,255,.22);--n200:rgba(255,255,255,.11);--n100:#19191C;background:#0E0E10;color:var(--k)}
.nt.nt2{--w:#141417;--n100:#1E1E22;background:#141417}
.onlight{--k:#111111;--w:#FFFFFF;--n900:#262626;--n700:#4D4D4D;--n500:#767676;--n300:#B3B3B3;--n200:#E0E0E0;--n100:#F2F2F2;color:var(--k)}
.nt .btn{color:#fff}
.nt .blue{color:var(--b400)}
.nt .tlink:hover{color:var(--b300)}
.nt .tag.on{background:rgba(0,85,255,.26);color:var(--b200)}
.nt .ph{background:#1b1b1f}
.nt :focus-visible{outline-color:var(--b400)}
.nt .qa-q:hover{color:var(--b300)}
.nt .qa mark{background:rgba(0,85,255,.32);color:#fff}
.nt .fl li::before,.nt .ev-src::before,.nt .ev>i{background:var(--b400)}
.nt .xp-s .num,.nt .xp.js .xp-s[aria-selected="true"] .num,.nt .rules .n{color:var(--b400)}
.nt .onlight .ev>i,.nt .onlight .fl li::before{background:var(--b)}

/* hero: the purpose sentence on dark */
.hero .t-hero{font-size:62px;line-height:66px;letter-spacing:-.035em}
.hero .t-hero .q{color:#7E7E87}
.hero .t-lead{max-width:600px;color:#E4E4E7}
.hero-ph img{object-position:40% 40%}
.hero-cap{right:0;padding:12px 16px;background:linear-gradient(0deg,rgba(13,13,15,.86) 0%,rgba(13,13,15,0) 100%);padding-top:40px;color:#C9C9CF}

/* explainer on dark: a night map, the cards stay paper */
.nt .xp-stage{background:radial-gradient(70% 60% at 62% 52%,rgba(0,85,255,.16) 0%,rgba(0,85,255,0) 70%),#121215;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.nt .xp-stage>.tag{background:#121215}
.nt .xp-map .ring{stroke:rgba(72,132,255,.45)}
.nt .xp-map .ring-l{fill:var(--b300)}
.nt .xp-map .area{fill:rgba(0,85,255,.13)}
.nt .xp-map .road{stroke:rgba(255,255,255,.09)}
.nt .xp-map .river{stroke:rgba(72,132,255,.2)}
.nt .xp-map .town,.nt .xp-map .town-d{fill:#8B8B94}
.nt .xp-map .home-l{fill:#fff}
.nt .yr-chart{background:#17171A}
.nt .yr-m{background:rgba(72,132,255,.42)}
img.pic{object-fit:cover;padding:0}
.cl-lb{background:#fff;color:#111}
.cl-dot,.cl-ln{background:#fff}
.cl{left:57.5%;top:58.5%}
.cl-lb b{color:#111}
.cl-lb small{color:#4D4D4D}

@media (max-width:1180px){
  .hero .t-hero{font-size:54px;line-height:58px}
}
@media (max-width:640px){
  .hero .t-hero{font-size:38px;line-height:42px;letter-spacing:-.03em}
}
/* V9 · Hero: Ergebnis vorne, Anzeigetafel aus der Referenz */
.hero .t-hero .q2{color:var(--b400)}
.hero-vis{position:relative;align-self:stretch;display:grid;min-width:0}
.hero-vis .hero-ph{align-self:stretch;max-height:820px}
.bd{position:absolute;left:-72px;bottom:64px;width:424px;max-width:calc(100% + 72px);z-index:3;padding:16px 18px 14px;background:#0B0B0D;color:#F4F4F5;transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.bd.pre{opacity:0;transform:translateY(14px)}
.bd-top{display:flex;justify-content:space-between;gap:12px;margin:0 0 10px;font-size:11px;line-height:14px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#8B8B94}
.bd-top #bdSrc{color:#C9C9CF}
.bd.mine .bd-top #bdSrc{color:var(--b300)}
.bd-flap{display:grid;grid-template-columns:repeat(17,minmax(0,1fr));gap:2px}
.bd-t{position:relative;height:36px;display:grid;place-items:center;overflow:hidden;background:#1D1D21;font-weight:700;font-size:17px;line-height:1;color:#F4F4F5;font-variant-numeric:tabular-nums}
.bd-t::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:rgba(255,255,255,.035);pointer-events:none}
.bd-t::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.38);pointer-events:none}
.bd-t i{display:block;font-style:normal;transform-origin:50% 50%}
.bd-t.f i{animation:bdFlip .11s linear}
@keyframes bdFlip{0%{transform:scaleY(1)}45%{transform:scaleY(.08)}100%{transform:scaleY(1)}}
.bd.mine .bd-t i{color:var(--b300)}
.bd-co{display:grid;gap:1px;margin-top:12px;font-size:12px;line-height:16px;color:#8B8B94}
.bd-co b{font-weight:600;font-size:16px;line-height:22px;color:#F4F4F5}
.bd-bar{position:relative;height:3px;margin-top:12px;background:rgba(255,255,255,.12)}
.bd-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--b)}
.bd-foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:9px;font-size:13px;line-height:18px;color:#A9A9B2}
.bd-foot a{color:#F4F4F5;text-decoration:none;box-shadow:inset 0 -1px 0 var(--b400);white-space:nowrap}
.bd-foot a:hover{color:var(--b300)}
.bd-stamp{position:absolute;left:50%;top:76px;padding:7px 18px 8px;background:var(--b);color:#fff;font-weight:700;font-size:22px;line-height:1;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translate(-50%,-50%) rotate(-6deg);pointer-events:none}
.bd-stamp.st{opacity:1}
.bd-stamp.on{animation:bdSlam .3s cubic-bezier(.3,1.6,.5,1) forwards}
.bd-stamp.out{animation:bdOut .28s ease forwards}
@keyframes bdSlam{0%{opacity:0;transform:translate(-50%,-50%) rotate(-6deg) scale(1.9)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1)}}
@keyframes bdOut{0%{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1)}100%{opacity:0;transform:translate(-50%,-62%) rotate(-6deg) scale(.96)}}
.bd.hit{animation:bdHit .26s ease}
@keyframes bdHit{0%,100%{transform:none}30%{transform:translate(1px,2px)}65%{transform:translate(-1px,-1px)}}
.art-f{margin-block:10px}.art-f .art-fig{margin:0}
@media (max-width:1180px){.bd{left:-48px;width:396px;max-width:calc(100% + 48px)}.bd-t{font-size:16px}}
@media (max-width:960px){
  .hero-vis{max-width:520px;width:100%}
  .hero-vis .hero-ph{max-height:none}
  .bd{position:relative;left:auto;bottom:auto;width:auto;max-width:none;margin:-56px 0 0 16px}
  .hero-cap{top:0;bottom:auto;padding:12px 16px 40px;background:linear-gradient(180deg,rgba(13,13,15,.8) 0%,rgba(13,13,15,0) 100%)}
}
@media (max-width:640px){
  .bd{margin:-48px 0 0 12px;padding:14px 12px 12px}
  .bd-t{height:30px;font-size:14px}
  .bd-flap{gap:1.5px}
  .bd-stamp{top:66px;font-size:19px;padding:6px 14px 7px}
  .bd-co b{font-size:15px}
}

/* V10 · hero video, calm */
.hero-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 40%;z-index:1;opacity:0;transition:opacity .9s ease;will-change:transform}
.hero-vid.playing video{opacity:1}
.hero-vid .hero-cap{z-index:2}
.vid-ctl{position:absolute;right:14px;top:14px;z-index:3;width:34px;height:34px;display:grid;grid-auto-flow:column;place-content:center;gap:4px;background:rgba(13,13,15,.55);border:0;cursor:pointer;opacity:.75;transition:opacity .2s}
.vid-ctl:hover,.vid-ctl:focus-visible{opacity:1}
.vid-ctl i{display:block;width:3px;height:12px;background:#fff}
.vid-ctl.off{gap:0}.vid-ctl.off i:first-child{width:0;height:0;background:none;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.vid-ctl.off i:last-child{display:none}
.hero .t-hero .q2{color:var(--b400)}
/* V10 · Arbeit am Bau: language, preview, three points, sign-up */
.ob-hero{padding-bottom:96px}
.ob{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px 80px;align-items:center}
.ob-t{display:grid;gap:26px;align-content:start}
.ob-t .t-h1{max-width:640px}
.ob-t .t-lead{max-width:600px;color:#E4E4E7}
.ob-lang{border:0;padding:0;margin:8px 0 0;display:grid;gap:12px}
.ob-lang legend{padding:0;margin-bottom:12px;font-size:13px;line-height:16px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--n500)}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px}
.ob-chips .chip{height:40px;padding:0 14px;font-size:15px;cursor:pointer;color:#E4E4E7;border-color:rgba(255,255,255,.24)}
.ob-chips .chip:hover{border-color:#fff}
.ob-chips .chip[aria-pressed="true"]{background:var(--b);border-color:transparent;color:#fff}
.ob-go{margin:0}
.ob-prev{display:grid;justify-items:center;gap:14px;padding:40px 24px 28px;background:radial-gradient(70% 60% at 50% 40%,rgba(0,85,255,.22) 0%,rgba(0,85,255,0) 70%),#121215;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.ob-cap{margin:0;font-size:13px;line-height:16px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#C9C9CF;text-align:center}
.ob-ex{margin:0;font-size:12px;line-height:16px;color:#8B8B94;text-align:center}
.ob-prev .phone{width:300px;--k:#111111;--w:#FFFFFF;--n900:#262626;--n700:#4D4D4D;--n500:#767676;--n300:#B3B3B3;--n200:#E0E0E0;--n100:#F2F2F2;color:#111;border-color:#000}
.ob-prev .ph-s{min-height:440px}
.ob-prev .ph-prog{grid-template-columns:repeat(3,1fr)}
.ob-prev .ph-body{display:grid;gap:8px;align-content:start}
.ob-prev .opt{width:100%;border:0;text-align:left;cursor:pointer;font:inherit;font-size:15px}
.ob-prev .opt:hover:not(.sel){background:var(--n200)}
.ob-prev .ph-done{display:grid;gap:12px}
.ob-prev .ph-done .msg{justify-self:stretch;max-width:none;background:var(--b100);color:var(--b700)}
.ob-prev .ph-again{justify-self:start;color:#111;border-color:#B3B3B3}
.ob-pts-w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 80px;align-items:start}
.ob-pts-w .sh{grid-column:1/-1;margin-bottom:-8px}
.ob-pts{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--n300)}
.ob-pts li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px 16px;padding:26px 0;border-bottom:1px solid var(--n200)}
.ob-pts .num{grid-row:span 2;font-size:14px;line-height:30px;color:var(--b400);font-variant-numeric:tabular-nums}
.ob-pts h2{font-weight:600;font-size:26px;line-height:32px;letter-spacing:-.01em}
.ob-pts p{color:var(--n700);font-size:17px;line-height:26px;max-width:46ch}
.ob-fig{margin:0;min-width:0}
.ob-fig .ph{aspect-ratio:4/3}
.ob-form-w{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px 80px;align-items:start}
.ob-form{display:grid;gap:18px;padding:32px;background:#fff;color:#111}
.ob-form .consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:20px;color:#4D4D4D}
.ob-form .consent a{color:#111}
.ob-form .btn{justify-self:start}
.ob-done{padding:16px 18px;background:var(--b100);color:var(--b700);display:grid;gap:4px;outline:none}
.ob-done b{font-weight:600;font-size:17px}
.ob-form .form-err{margin:0;color:#7a3a00;font-size:14px}
@media (max-width:960px){
  .ob,.ob-pts-w,.ob-form-w{grid-template-columns:minmax(0,1fr)}
  .ob-prev{padding:32px 12px 22px}
}
@media (max-width:640px){
  .ob-chips .chip{height:38px;padding:0 12px;font-size:14px}
  .ob-form{padding:22px 18px}
  .ob-pts h2{font-size:22px;line-height:28px}
  .vid-ctl{top:auto;bottom:14px}
}
.tag-l{display:grid;gap:36px;align-content:start}
.tag-fig,.lp-fig{margin:0;min-width:0}
.tag-fig .ph,.lp-fig .ph{aspect-ratio:3/2}
.lp-fig{margin-top:24px}
.pilot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;gap:20px 48px;align-items:center;padding:30px 32px;margin-bottom:56px;background:linear-gradient(120deg,rgba(0,85,255,.24) 0%,rgba(0,85,255,.06) 100%);outline:1px solid rgba(72,132,255,.35);outline-offset:-1px}
.pilot .lab{color:var(--b300)}
.pilot-k{font-weight:600;font-size:30px;line-height:36px;letter-spacing:-.015em;margin-top:8px}
.pilot .fl{margin:0}
.pilot-l{display:grid;gap:4px;margin-top:14px;padding:14px 16px;background:var(--b100);color:var(--b700);font-size:15px;line-height:22px}
.pilot-l b{font-weight:700;color:var(--b600)}
@media (max-width:960px){.pilot{grid-template-columns:minmax(0,1fr);padding:24px 20px}.pilot-k{font-size:24px;line-height:30px}}
.feed{gap:10px;background:#F4F5F7}
.fp{display:grid;gap:6px;padding:12px;background:#fff;font-size:14px;line-height:20px;color:#111}
.fp p{margin:0;font-weight:600}
.fp-t{font-size:11px;line-height:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0047D6}
.fp-story img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:45% 35%;margin-bottom:4px}
.fp-job{box-shadow:inset 3px 0 0 #0055FF}
.fp-q p{font-weight:500}
.ens figcaption{display:grid;gap:2px}
.ens figcaption b{font-weight:600;color:#F4F4F5;font-size:15px}
.ens figcaption span{color:var(--n500);font-size:13px}
/* V8 · Feinschliff */
.nt .howto{background:#18181B;align-self:start;color:var(--n700)}
.nt .howto .ev{background:#0E0E10}
.nt .story .yr,.nt .rules .n{color:var(--b400)}
.story>div{align-content:start}
.nw{white-space:nowrap}
@media (min-width:961px){.lg-row li{font-size:15px;padding:0 6px;white-space:nowrap}}
.art-sec{padding-top:88px}
@media (max-width:640px){
  .art-sec{padding-top:56px}
  .lg-row{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .lg-row li{height:48px;font-size:15px}
  .ft-top>div:last-child{grid-column:1/-1}
  .yr-lbl{display:grid;gap:0}
  .yr-lbl span{font-size:13px}
}
.nt .chip[aria-checked="true"],.nt .chip[aria-pressed="true"]{background:var(--b);border-color:transparent;color:#fff}
.nt .onlight .chip[aria-checked="true"],.nt .onlight .chip[aria-pressed="true"]{background:var(--b100);color:var(--b700)}
.nt .gw-sum .sel-c{background:rgba(0,85,255,.26);color:var(--b200)}
.nt .rtg[aria-pressed="true"]{background:var(--b);color:#fff}
.nt .ki-c li.hl{background:rgba(0,85,255,.22);color:#fff}
.nt .ki-c li.hl::before{background:var(--b400)}
.nt .rtg[aria-pressed="true"] .box{background:#fff;border-color:#fff;color:var(--b)}
.nt .post-go,.nt a.post:hover h3,.nt .feat2 a:hover h2,.nt .qa-q:hover,.dk .qa-q:hover,.nt .steps3 li.lit .num,.nt .ss[aria-selected="true"] .num,.nt .ss.done .num,.nt .xp-s .num,.nt .xp.js .xp-s[aria-selected="true"] .num,.nt .route-go,.nt .route a:hover b,.nt .crumb a:hover,.dk .crumb a:hover,.nt .trust-yr,.nt .score b{color:var(--b400)}
@media (min-width:961px){.nt .howto{position:sticky;top:104px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* V13 · Referenzen und echte Logos */
.lg-logos{display:flex;flex-wrap:wrap;align-items:center;gap:24px 64px;margin:0;padding:0;list-style:none}
.lg-logos a{display:block;opacity:.8;transition:opacity .2s}
.lg-logos a:hover,.lg-logos a:focus-visible{opacity:1}
.lg-logos img,.ref-idx img,.ref img,.ref-logo{height:var(--h,44px);width:auto;max-width:100%}
.lg-more{grid-column:2;margin:0;font-size:14px;line-height:21px;color:var(--n500)}
.lg-more a{color:var(--k);text-decoration:underline;text-underline-offset:3px}
.ref-idx{display:grid;align-self:end;margin:0;padding:0;list-style:none}
.ref-idx a{display:grid;grid-template-columns:112px minmax(0,1fr);gap:22px;align-items:center;padding:18px 0;border-top:1px solid rgba(255,255,255,.14);color:inherit;text-decoration:none;transition:background .2s}
.ref-idx li:last-child a{border-bottom:1px solid rgba(255,255,255,.14)}
.ref-idx img{justify-self:start;opacity:.85}
.ref-idx b{display:block;font-weight:600;font-size:16px;line-height:22px;color:#F4F4F5}
.ref-idx span span{display:block;font-size:14px;line-height:20px;color:#8B8B94}
.ref-idx li.on b::after{content:"Im Detail";margin-left:10px;padding:2px 7px;font-size:11px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:2px;background:rgba(0,85,255,.26);color:#BFD3FF}
.ref-idx a:hover b{color:#8FB1FF}
.ref-logo{display:block;margin-bottom:28px}
.refs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ref{display:grid;gap:18px;align-content:start;padding:32px;background:#16161A;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;scroll-margin-top:90px}
.ref h3{margin:0;font-weight:600;font-size:22px;line-height:28px}
.ref-f{display:grid;margin:0}
.ref-f div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid rgba(255,255,255,.12);font-size:14px;line-height:20px}
.ref-f div:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.ref-f dt{color:#8B8B94}
.ref-f dd{margin:0;text-align:right;color:#E4E4E7}
.ref p{margin:0}
#schwinger{scroll-margin-top:70px}
#weitere .todo{margin-top:28px}
@media (max-width:960px){
  .lg-more{grid-column:1}
  .lg-logos{gap:22px 40px}
  .lg-logos img{height:calc(var(--h) * .8)}
  .refs{grid-template-columns:minmax(0,1fr)}
  .ref{padding:24px 20px}
  .ref-idx a{grid-template-columns:84px minmax(0,1fr);gap:16px}
  .ref-idx img{height:calc(var(--h) * .8)}
  .ref-logo{height:56px}
}
.ref-head{display:grid;gap:22px;justify-items:start}
.ref-head .ref-logo{margin-bottom:10px}
.ref h3{color:#F4F4F5}
#schwinger .facts-mini dt{color:#9A9AA3}
#schwinger .facts-mini div{border-color:rgba(255,255,255,.14)}

/* V15 · calm build. Raster-Aufbau for hero and end band, once */
@property --r{syntax:'<percentage>';inherits:false;initial-value:0%}
.bp-grid{position:relative;isolation:isolate}
.bp-grid::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--gl,rgba(0,85,255,.26)) 2px,transparent 2px),linear-gradient(90deg,var(--gl,rgba(0,85,255,.26)) 2px,transparent 2px);
  background-size:100px 100px;background-position:calc(50% - 1px) -1px;
  -webkit-mask-image:radial-gradient(circle at 50% 46%,#000 var(--r),transparent calc(var(--r) + 14%));
  mask-image:radial-gradient(circle at 50% 46%,#000 var(--r),transparent calc(var(--r) + 14%));
  opacity:.5;transition:--r 1.6s cubic-bezier(.2,0,0,1)}
.bp-grid.is-in::before{--r:160%}
.bp-grid>*{position:relative;z-index:1}
.band.bp-grid{--gl:rgba(255,255,255,.12);overflow:hidden}
.band.bp-grid::before{opacity:1}
@media (max-width:640px){.bp-grid::before{background-size:50px 50px}}
@media (prefers-reduced-motion:reduce){.bp-grid::before{transition:none;--r:160%}}

/* V15 · Start: drei Bausteine */
.bs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;counter-reset:none}
.bs-i{display:grid;grid-template-rows:subgrid;grid-row:span 5;gap:16px;padding-top:22px;border-top:1px solid var(--k);min-width:0}
.bs-i .num{font-weight:600;font-size:14px;line-height:20px;letter-spacing:.06em;color:var(--b400)}
.bs-i h3{font-weight:600;font-size:28px;line-height:34px;letter-spacing:-.01em}
.bs-i>p:not(.bs-bel){font-size:16px;line-height:25px;color:var(--n700);max-width:36ch}
.bs-bel{position:relative;padding-left:22px;font-size:14px;line-height:20px;color:var(--n900);align-self:start}
.bs-bel::before{content:"";position:absolute;left:0;top:6px;width:12px;height:9px;background:var(--b400);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat}
.bs-note{margin-top:48px;padding-top:18px;border-top:1px solid var(--n200);font-size:14px;line-height:21px;color:var(--n500);max-width:760px}
.bs-note .tlink{font-size:14px}
.mini{display:grid;gap:12px;align-content:start;padding:16px;margin-top:6px;background:#1A1A1E;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;font-size:14px;line-height:20px;color:#D4D4D8}
.mini b{font-weight:600;color:#F4F4F5}
.mini small{display:block;font-size:12px;line-height:16px;color:#8B8B94}
.mini-h{display:flex;align-items:center;gap:10px}
.mini-f{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#8B8B94}
.mini-f span:first-child{padding:5px 10px;background:var(--b);color:#fff;font-weight:600}
.mini-t{display:flex;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08)}
.mini-t span{font-size:12px;color:#8B8B94}
.mini-l{display:grid;gap:8px}
.mini-l li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:center}
.mini-l .av,.mini-h .av{background:#2A2A30;color:#E4E4E7}
.mini-l .av{width:34px;height:34px;font-size:12px}
.mini-h .av-co{background:var(--b);color:#fff}
.mini-k{display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px;font-size:13px;line-height:19px}
.mini-k span{font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8FB1FF;padding-top:1px}
.mini-k.o span{color:#A9A9B2}
.mini-b{display:flex;gap:8px;padding-top:4px}
.mini-b span{padding:6px 12px;font-size:12px;font-weight:600;outline:1px solid rgba(255,255,255,.18);outline-offset:-1px}
.mini-b span.on{background:var(--b);outline-color:var(--b);color:#fff}

/* V15 · Start: Schwinger, quote first */
.sw{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"q ph" "v v" "go go";gap:56px 80px;align-items:center}
.sw-q{grid-area:q;display:grid;gap:30px;align-content:center}
.sw-q blockquote{font-weight:600;font-size:36px;line-height:44px;letter-spacing:-.02em;text-wrap:balance}
.sw-q .who{align-items:flex-start}
.sw-q .who img{width:64px;height:64px;object-fit:cover;flex:none}
.sw-q .who span{font-size:15px;line-height:22px}
.sw-q .who small{display:block;margin-top:4px;font-size:13px;line-height:18px;color:var(--n500)}
.sw-ph{grid-area:ph;min-width:0}
.sw-ph .ph{aspect-ratio:3/2;max-width:100%;overflow:hidden}
.sw-ph .ph img{width:100%;height:100%;object-fit:cover}
.sw-v{grid-area:v;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--k)}
.sw-v>div{display:grid;gap:10px;padding:26px 24px 0 0;align-content:start}
.sw-v>div+div{padding-left:24px;border-left:1px solid var(--n300)}
.sw-v p:not(.fig){font-size:15px;line-height:22px;color:var(--n700)}
.sw-v .ev::after{display:none}
.sw-go{grid-area:go}

/* V15 · Start: Herkunft, real shoots and two voices */
.strip.real figcaption{display:grid;gap:1px}
.strip.real figcaption b{font-weight:600;color:var(--n900)}
.vc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:72px}
.vc-i{display:grid;gap:24px;align-content:space-between;padding:30px 32px;background:var(--n100)}
.vc-i blockquote{font-weight:500;font-size:22px;line-height:31px;letter-spacing:-.01em;text-wrap:pretty}
.vc-i figcaption{display:flex;align-items:center;gap:14px}
.vc-i figcaption img{width:56px;height:56px;object-fit:cover;flex:none;filter:saturate(.86)}
.vc-i figcaption b{display:block;font-weight:600}
.vc-i figcaption span{font-size:14px;line-height:20px;color:var(--n700)}

/* V15 · Start: pilot card beside the questions */
.pc{display:grid;gap:16px;padding:26px 28px;background:var(--n100);outline:1px solid var(--n200);outline-offset:-1px}
.pc-l{font-weight:600;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
.pc-k{font-weight:600;font-size:26px;line-height:32px;letter-spacing:-.01em}
.pc .fl{display:grid;gap:8px;font-size:15px;line-height:22px}
.pc .fl.no{padding-top:14px;border-top:1px solid var(--n200);color:var(--n700)}

@media (max-width:960px){
  .bs{grid-template-columns:minmax(0,1fr);gap:48px}
  .bs-i{grid-row:auto;grid-template-rows:none}
  .sw{grid-template-columns:minmax(0,1fr);grid-template-areas:"q" "ph" "v" "go";gap:36px}
  .sw-q blockquote{font-size:28px;line-height:35px}
  .vc{grid-template-columns:minmax(0,1fr);margin-top:48px}
}
@media (max-width:640px){
  .sw-v{grid-template-columns:minmax(0,1fr)}
  .sw-v>div,.sw-v>div+div{padding:20px 0;border-left:0}
  .sw-v>div+div{border-top:1px solid var(--n300)}
  .vc-i{padding:24px 20px}
  .vc-i blockquote{font-size:19px;line-height:27px}
}

/* V15 · Leistung: Bauzeitenplan für den Pilot. Bars grow once. */
.bzp{--days:45;display:grid;gap:0}
.bzp-head,.bzp-r{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:0 32px;align-items:center}
.bzp-head{padding-bottom:12px;border-bottom:1px solid var(--k)}
.bzp-hl{font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
.bzp-scale{position:relative;height:18px}
.bzp-scale>span{position:absolute;left:calc((var(--d) - 1) / var(--days) * 100%);top:0;font-size:12px;line-height:18px;font-weight:600;letter-spacing:.04em;color:var(--n700);white-space:nowrap;padding-left:6px}
.bzp-scale>span:last-child{left:auto;right:0}
.bzp-rows{display:grid}
.bzp-r{padding:14px 0;border-bottom:1px solid var(--n200)}
.bzp-l b{display:block;font-weight:600;font-size:16px;line-height:22px}
.bzp-l span{display:block;font-size:13px;line-height:18px;color:var(--n500)}
.bzp-t{position:relative;height:26px;background-image:linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:calc(100% * 7 / var(--days)) 100%}
.bzp-b{position:absolute;top:3px;bottom:3px;left:calc((var(--s) - 1) / var(--days) * 100%);width:calc((var(--e) - var(--s) + 1) / var(--days) * 100%);background:var(--b);transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,0,0,1) calc(var(--i) * .12s)}
.bzp-r[data-k="b"] .bzp-b{background:#D4D4D8}
.bzp-r[data-k="g"] .bzp-b{background:repeating-linear-gradient(135deg,var(--b) 0 6px,#D4D4D8 6px 12px)}
.bzp-r[data-k="n"] .bzp-b{background:transparent;outline:1.5px dashed var(--b400);outline-offset:-1.5px}
.bzp-m{position:absolute;top:50%;left:calc((var(--days) - .5) / var(--days) * 100%);width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--b);transform:rotate(45deg) scale(0);transition:transform .5s cubic-bezier(.2,0,0,1) .9s}
.bzp-ms .bzp-l b{color:var(--b300)}
.bzp.is-in .bzp-b{transform:none}
.bzp.is-in .bzp-m{transform:rotate(45deg)}
.bzp-key{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:16px}
.bzp-key span{display:inline-flex;align-items:center;gap:8px}
.bzp-key i{width:18px;height:10px;background:var(--b)}
.bzp-key i[data-k="b"]{background:#D4D4D8}
.bzp-key i[data-k="g"]{background:repeating-linear-gradient(135deg,var(--b) 0 4px,#D4D4D8 4px 8px)}
.bzp-key i[data-k="n"]{background:transparent;outline:1.5px dashed var(--b400);outline-offset:-1.5px}
.bzp-key i[data-k="m"]{width:10px;height:10px;transform:rotate(45deg)}
.bzp-note{margin-top:20px}
.cost.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){
  .bzp-head{grid-template-columns:minmax(0,1fr)}
  .bzp-hl{display:none}
  .bzp-r{grid-template-columns:minmax(0,1fr);gap:10px}
  .bzp-scale>span{font-size:11px;padding-left:3px}
  .bzp-scale .wk{display:none}
  .cost.c3{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.bzp-b,.bzp-m{transition:none}}

/* V15 · Über uns: der Weg in drei Stationen, echte Fotos */
.ue-team img{object-position:50% 40%}
.weg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;counter-reset:none}
.weg li{display:grid;gap:12px;align-content:start;min-width:0}
.weg .ph{aspect-ratio:4/3;max-width:100%;overflow:hidden;margin-bottom:10px}
.weg .ph img{width:100%;height:100%;object-fit:cover}
.weg-y{font-weight:600;font-size:14px;line-height:20px;letter-spacing:.06em;color:var(--b400);padding-top:12px;border-top:1px solid var(--k)}
.weg h3{font-weight:600;font-size:24px;line-height:30px;letter-spacing:-.01em}
.weg li>p:not(.weg-y):not(.weg-c){font-size:16px;line-height:25px;color:var(--n700)}
.weg-c{font-size:12px;line-height:17px;color:var(--n500)}
@media (max-width:960px){.weg{grid-template-columns:minmax(0,1fr);gap:48px}}

/* V15 · Lagebild: Aufmaß, ein Beispielblatt mit Straßenkarte */
.auf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:start}
.sheet{background:#fff;color:#111;padding:28px 28px 20px;display:grid;gap:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);max-width:100%}
.sheet-h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;line-height:16px;color:#767676;padding-bottom:12px;border-bottom:1px solid #E0E0E0}
.sheet-h b{color:#111;font-weight:800;letter-spacing:.02em}
.sheet-k{margin-top:6px;font-size:12px;line-height:16px;font-weight:600;color:#0055FF}
.sheet-t{font-weight:700;font-size:26px;line-height:30px;letter-spacing:-.015em}
.sheet-map{margin:6px 0 4px;outline:1px solid #E6E1D6}
.sheet-map svg{display:block;width:100%;height:auto}
.sheet-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-top:8px}
.sheet-s{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:700;font-size:13px;line-height:18px;padding-bottom:6px;border-bottom:1.5px solid #111}
.sheet-tb{width:100%;border-collapse:collapse;font-size:13px;line-height:18px}
.sheet-tb td{padding:5px 0;border-bottom:1px solid #ECECEC}
.sheet-tb td:last-child{text-align:right;font-weight:600;white-space:nowrap}
.sheet-n{margin-top:6px;font-size:11px;line-height:15px;color:#767676}
.sheet-f{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin-top:8px;padding-top:10px;border-top:1px solid #E0E0E0;font-size:10.5px;line-height:15px;color:#767676}
.tg{display:inline-block;padding:2px 6px;font-size:9.5px;line-height:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tg.k{background:#111;color:#fff}
.tg.b{background:#0055FF;color:#fff}
.tg.e{outline:1px dashed currentColor;outline-offset:-1px;color:inherit}
.tg.n{background:#B3B3B3;color:#111}
.auf-side{display:grid;gap:18px;align-content:start}
.btoc{display:grid;margin-bottom:22px;border-top:1px solid var(--k)}
.btoc li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:8px;padding:11px 0;border-bottom:1px solid var(--n200);font-size:14px;line-height:20px;color:var(--n700)}
.btoc li span{grid-row:span 2;font-weight:600;color:var(--n500);font-variant-numeric:tabular-nums}
.btoc li b{font-weight:600;color:var(--k);font-size:16px;line-height:22px}
.btoc li.on span,.btoc li.on b{color:var(--b300)}
.hkl{display:grid;gap:10px;font-size:14px;line-height:20px;color:var(--n700)}
.hkl li{display:grid;grid-template-columns:108px minmax(0,1fr);align-items:center;gap:10px}
.hkl .tg{justify-self:start;color:#F4F4F5}
.hkl .tg.n{color:#111}
.lp-after{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.lp-after .ph{aspect-ratio:3/2;overflow:hidden;max-width:100%}
.lp-after .ph img{width:100%;height:100%;object-fit:cover}
.lp-after-t{display:grid;gap:26px}
.lp-after-t .sh{margin-bottom:0}
@media (max-width:960px){
  .auf,.lp-after{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:640px){
  .sheet{padding:18px 14px 14px}
  .sheet-g{grid-template-columns:minmax(0,1fr);gap:18px}
  .sheet-t{font-size:21px;line-height:26px}
}

/* V15 · Referenzen: Schwinger in Bildern, Chronik, Medienzeit */
.sgal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;gap:16px;margin-top:72px}
.sgal li{min-width:0}
.sgal .ph{overflow:hidden;max-width:100%}
.sgal .ph img{width:100%;height:100%;object-fit:cover}
.sgal .g1{grid-column:1/3;grid-row:1/3}.sgal .g1 .ph{aspect-ratio:auto;height:calc(100% - 26px)}
.sgal .g2{grid-column:3;grid-row:1}.sgal .g3{grid-column:4;grid-row:1}.sgal .g4{grid-column:3;grid-row:2}.sgal .g5{grid-column:4;grid-row:2}
.sgal .g2 .ph,.sgal .g3 .ph,.sgal .g4 .ph,.sgal .g5 .ph{aspect-ratio:3/2}
.sgal figure{height:100%}
.sgal figcaption{padding-top:8px;font-size:13px;line-height:18px;color:var(--n500)}
.chron{margin-top:56px;display:grid;gap:18px}
.chron ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--k)}
.chron li{display:grid;gap:6px;align-content:start;padding:16px 18px 0 0;font-size:14px;line-height:20px;color:var(--n700);position:relative}
.chron li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--n500)}
.chron li b{font-weight:600;font-size:22px;line-height:28px;color:var(--k);font-variant-numeric:tabular-nums}
.chron li.us::before{background:var(--b400)}
.chron li.us b{color:var(--b300)}
.mgal{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.mgal li{min-width:0}
.mgal .ph{aspect-ratio:auto;height:360px;overflow:hidden}
.mgal .ph img{width:100%;height:100%;object-fit:cover}
.mgal figcaption{display:grid;gap:1px;padding-top:10px;font-size:13px;line-height:18px;color:var(--n500)}
.mgal figcaption b{font-weight:600;color:var(--n900);font-size:15px}
#medien .vc{margin-top:48px}
#medien .todo{margin-top:24px}
@media (max-width:960px){
  .sgal{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:48px}
  .sgal .g1{grid-column:1/3;grid-row:auto}.sgal .g1 .ph{height:auto;aspect-ratio:3/2}
  .sgal .g2,.sgal .g3,.sgal .g4,.sgal .g5{grid-column:auto;grid-row:auto}
  .chron ol{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .mgal{grid-template-columns:minmax(0,1fr)}
  .mgal .ph{height:auto;aspect-ratio:3/2}
}

/* V15 · Leute vom Bau im Stil des Andi-Spots. Tokens from the spot doc. */
.lvb-hero,.lvb-weg,.lvb-end,#reise,#mitmachen,#fragen{--ease-in:cubic-bezier(.2,0,0,1);--ease-move:cubic-bezier(.4,0,.2,1)}
.lvb-hero{background:#111;color:#fff;padding-top:calc(var(--hd) + 64px);overflow:hidden}
.lvb-hero.bp-grid::before{opacity:1}
.lvb-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px 72px;align-items:end;padding-bottom:56px}
.lvb-t{display:grid;gap:26px;align-content:start}
.lvb-t .lab{color:#C9C9CF}
.lvb-t .t-lead{max-width:600px;color:#E4E4E7}
.disp{font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:-.01em;font-size:clamp(52px,8.4vw,128px);text-wrap:balance;hyphens:auto;overflow-wrap:break-word}
.disp-m{font-size:clamp(40px,5.6vw,84px)}
[data-fx="reveal"]{overflow:hidden;padding-top:.08em}
[data-fx="reveal"] .disp-i{display:block;transform:translateY(110%);transition:transform .2s var(--ease-in)}
[data-fx="reveal"].is-in .disp-i{transform:none}
.lvb-ph{min-width:0;align-self:stretch;display:grid;align-content:end;gap:0}
.lvb-img{overflow:hidden;max-width:100%}
.lvb-ph .lvb-img{aspect-ratio:4/5;max-height:640px}
.lvb-img img{width:100%;height:100%;object-fit:cover}
[data-fx="image"] img{transform:scale(1.08)}
[data-fx="image"].is-in img{animation:bp-img 6.4s linear both}
@keyframes bp-img{0%{transform:scale(1.08);animation-timing-function:cubic-bezier(.2,0,0,1)}5%{transform:scale(1);animation-timing-function:linear}100%{transform:scale(1.04)}}
.lvb-ph .cap{color:#8B8B94}
/* Schon dabei: names run left to right */
.tick{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.12);background:rgba(17,17,17,.88);padding-block:16px 14px}
.tick-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center}
.tick-l{display:flex;align-items:center;gap:10px;margin:0;font-weight:700;font-size:14px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:#fff;white-space:nowrap}
.tick-dot{width:8px;height:8px;background:var(--b)}
.tick-m{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tick-r{display:flex;width:max-content;animation:tick 60s linear infinite;transform:translateX(-50%)}
.tick-r span{padding:0 18px;font-weight:700;font-size:18px;line-height:24px;color:#E4E4E7;white-space:nowrap;position:relative}
.tick-r span::after{content:"";position:absolute;right:-2px;top:50%;width:4px;height:4px;margin-top:-2px;background:rgba(255,255,255,.3)}
.tick:hover .tick-r{animation-play-state:paused}
@keyframes tick{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.tick-n{margin:8px auto 0;font-size:12px;line-height:16px;color:#8B8B94}
/* Pfeil-Wischer */
.bp-section{position:relative;overflow:hidden}
.bp-wipe{position:absolute;left:50%;top:50%;width:420%;z-index:3;fill:var(--b);pointer-events:none;transform:translate(-50%,-50%) translate(-55%,110%);visibility:hidden}
.bp-section.is-in .bp-wipe{visibility:visible;animation:bp-wipe .32s var(--ease-move,cubic-bezier(.4,0,.2,1)) forwards}
@keyframes bp-wipe{to{transform:translate(-50%,-50%) translate(55%,-140%);visibility:hidden}}
.js-fx .bp-section[data-fx="wipe"]>:not(.bp-wipe){opacity:0}
.js-fx .bp-section.is-in>:not(.bp-wipe){opacity:1;transition:opacity 1ms .15s}
/* Karrierewege */
.lvb-weg{background:#111;color:#fff}
.weg2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 80px;align-items:start}
.weg2-side{position:sticky;top:calc(var(--hd) + 48px);display:grid;gap:28px}
.weg2-side .lab{color:#C9C9CF}
.bp-steps{display:flex;align-items:flex-end;gap:8px;height:64px}
.bp-steps svg{width:34px;fill:#fff;opacity:.22;transition:opacity .2s var(--ease-in),fill .2s var(--ease-in)}
.bp-steps svg:nth-child(2){transform:translateY(-10px)}.bp-steps svg:nth-child(3){transform:translateY(-20px)}.bp-steps svg:nth-child(4){transform:translateY(-30px)}
.bp-steps[data-step="2"] svg:nth-child(-n+1),.bp-steps[data-step="3"] svg:nth-child(-n+2),.bp-steps[data-step="4"] svg:nth-child(-n+3){opacity:1}
.bp-steps[data-step="1"] svg:nth-child(1),.bp-steps[data-step="2"] svg:nth-child(2),.bp-steps[data-step="3"] svg:nth-child(3),.bp-steps[data-step="4"] svg:nth-child(4){opacity:1;fill:var(--b)}
.bp-steps-l{margin-left:14px;font-weight:700;font-size:15px;line-height:18px;letter-spacing:.06em;color:#fff;font-variant-numeric:tabular-nums}
.weg2-list{display:grid;gap:96px}
.stp{display:grid;gap:12px;max-width:560px}
.stp-ph{aspect-ratio:4/3;overflow:hidden;margin-bottom:10px;max-width:100%}
.stp-ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.stp-n{font-weight:700;font-size:14px;letter-spacing:.06em;color:#8B8B94}
.stp-w{font-weight:900;text-transform:uppercase;font-size:clamp(34px,4.2vw,56px);line-height:.95;letter-spacing:-.01em}
.stp>p:last-child{font-size:18px;line-height:27px;color:#D4D4D8;max-width:44ch}
.lvb-crew{margin-top:8px}
.lvb-crew .lvb-img{aspect-ratio:1400/788}
/* Blaue Kernaussage */
.lvb-core{background:#111;color:#fff;transition:background-color 1ms .15s}
.lvb-core.is-in,html:not(.js-fx) .lvb-core{background:var(--b)}
.lvb-core::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.1) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.1) 2px,transparent 2px);background-size:100px 100px;background-position:calc(50% - 1px) -1px}
.core-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px 80px;align-items:center}
.core-t{display:grid;gap:26px}
.core-t .lab{color:#fff}
.core-t .t-lead{color:#fff;max-width:560px}
.lvb-core .ob-pts{margin-top:12px;border-color:rgba(255,255,255,.45)}
.lvb-core .ob-pts .num{color:#fff;opacity:.7}
.lvb-core .ob-pts p{color:rgba(255,255,255,.86)}
.lvb-core .ob-pts li{border-color:rgba(255,255,255,.35)}
.lvb-core .ob-prev{background:rgba(0,0,0,.18);outline-color:rgba(255,255,255,.18)}
.lvb-core .ob-cap,.lvb-core .ob-ex{color:#fff}
/* Abschluss mit Logo-Aufbau */
.lvb-end{background:#111;color:#fff;padding-block:120px 110px;overflow:hidden}
.end-in{display:grid;gap:30px;justify-items:start}
.lb{width:min(720px,100%);height:auto;color:#fff;overflow:visible}
.lb-f{fill:var(--b);transform-box:view-box;transform-origin:36.5px 26.7px;transform:translate(763px,62px) scale(5);transition:transform .34s cubic-bezier(.4,0,.2,1)}
.lb-l{clip-path:inset(0 100% 0 0);transition:clip-path .6s cubic-bezier(.2,0,0,1) .3s}
.lb.is-in .lb-f{transform:none}
.lb.is-in .lb-l{clip-path:inset(0 0 0 0)}
.end-b{font-size:15px;line-height:22px;color:#A9A9B2}
.end-b a{color:#fff;font-weight:600}
@media (max-width:960px){
  .lvb-in,.weg2,.core-in{grid-template-columns:minmax(0,1fr)}
  .weg2-side{position:static}
  .weg2-list{gap:64px}
  .lvb-ph .lvb-img{aspect-ratio:4/3}
}
@media (max-width:640px){
  .lvb-hero.bp-grid::before{background-size:50px 50px;background-image:linear-gradient(rgba(0,85,255,.26) 1px,transparent 1px),linear-gradient(90deg,rgba(0,85,255,.26) 1px,transparent 1px)}
  .tick-in{grid-template-columns:minmax(0,1fr);gap:10px}
  .tick-r span{font-size:16px;padding:0 14px}
  .lvb-core::before{background-size:50px 50px}
  .lvb-end{padding-block:88px}
}
@media (prefers-reduced-motion:reduce){
  [data-fx] img,[data-fx] .disp-i{animation:none!important;transform:none!important}
  .bp-wipe{display:none}
  .tick-r{animation:none;transform:none;flex-wrap:wrap;width:auto}
  .js-fx .bp-section[data-fx="wipe"]>:not(.bp-wipe){opacity:1}
  .lvb-core{background:var(--b)}
  .lb-f{transform:none}.lb-l{clip-path:none}
}

/* V17 · Gefördert und vernetzt: large, on white, because the funding mark needs a white ground */
.tb{background:#F4F4F2;color:#111}
.tb .sh{margin-bottom:48px}
.tb .lab{color:#4D4D4D}
.tb-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tb-c{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start;padding:36px;background:#fff;outline:1px solid #E4E4E0;outline-offset:-1px}
.tb-logo{display:grid;place-items:center;aspect-ratio:1/1;background:#fff;outline:1px solid #EDEDEA;outline-offset:-1px;padding:18px}
.tb-bmwe img{height:150px;width:auto}
.tb-bdb img{width:150px;height:auto}
.tb-t{display:grid;gap:14px;align-content:start}
.tb-k{font-weight:600;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:#0047D6}
.tb-t h3{font-weight:600;font-size:26px;line-height:32px;letter-spacing:-.01em}
.tb-t p{font-size:16px;line-height:25px;color:#4D4D4D}
.tb-t .tb-n{padding-top:14px;border-top:1px solid #E4E4E0;font-size:14px;line-height:21px;color:#262626}
@media (max-width:1100px){.tb-g{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.tb-c{grid-template-columns:minmax(0,1fr);padding:24px 20px;gap:20px}.tb-logo{width:150px}.tb-bmwe img{height:120px}.tb-bdb img{width:120px}}

/* V17 · Footer: seals and the giant wordmark */
.ft-seal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:72px;padding-top:32px;border-top:1px solid var(--n900)}
.ft-si{display:flex;align-items:center;gap:18px}
.ft-si p{font-size:14px;line-height:20px;color:var(--n300);max-width:280px}
.ft-lg{flex:none;display:grid;place-items:center;width:84px;height:84px;background:#fff;padding:8px}
.ft-lg img{max-height:68px;width:auto;max-width:70px}
.ft-yr{flex:none;display:grid;place-items:center;width:84px;height:84px;outline:1px solid var(--n900);outline-offset:-1px;font-weight:700;font-size:22px;color:#fff;font-variant-numeric:tabular-nums}
.ft-giant{display:block;margin-top:72px;color:#fff;opacity:.96}
.ft-giant svg{display:block;width:100%;height:auto}
.ft-giant:hover{opacity:1}
@media (max-width:960px){.ft-seal{grid-template-columns:minmax(0,1fr);gap:18px}}

/* V17 · Testimonials: one card design everywhere */
.tm2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:64px}
.tm2.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.tm2 li{min-width:0;display:flex}
.tm2-c{display:grid;grid-template-rows:1fr auto;gap:28px;padding:32px 30px 28px;background:#19191C;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;width:100%;position:relative}
.tm2-c::before{content:"";position:absolute;left:30px;top:-1px;width:40px;height:3px;background:var(--b)}
.tm2-c blockquote{font-weight:500;font-size:19px;line-height:28px;letter-spacing:-.005em;color:#F4F4F5;text-wrap:pretty}
.tm2-c figcaption{display:flex;align-items:center;gap:16px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.tm2-c img{width:64px;height:64px;object-fit:cover;flex:none}
.tm2-c b{display:block;font-weight:600;color:#fff;font-size:16px;line-height:22px}
.tm2-c span{font-size:14px;line-height:20px;color:#A9A9B2}
@media (max-width:1100px){.tm2{grid-template-columns:minmax(0,1fr)}.tm2.two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.tm2-c{padding:26px 20px 22px}.tm2-c blockquote{font-size:17px;line-height:25px}}

/* V17 · Co-brand: Schwinger green next to BauPioniere */
.cob{display:flex;align-items:center;gap:18px;margin:0}
.cob img{height:44px;width:auto}
.cob span{font-size:20px;color:#8B8B94}
.cob svg{height:16px;width:auto;color:#fff}
.sw-cob{grid-area:cob}
.sw{grid-template-areas:"q ph" "cob cob" "v v" "go go"}
@media (max-width:960px){.sw{grid-template-areas:"q" "ph" "cob" "v" "go"}}

/* V17 · Über uns: Mission und Vision, Zusagen */
.mv-why{font-weight:600;font-size:22px;line-height:30px;color:#A9A9B2;max-width:760px;padding-bottom:40px;margin-bottom:56px;border-bottom:1px solid var(--n300)}
.mv-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 80px}
.mv-i{display:grid;gap:22px;align-content:start}
.mv-h{font-weight:600;font-size:clamp(28px,3.2vw,42px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.mv-i:first-child .mv-h{color:#fff}
.mv-i:last-child .mv-h{color:var(--b300)}
.mv-p{font-size:18px;line-height:28px;color:var(--n700);max-width:520px}
.zs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--k)}
.zs li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 20px;padding:32px 32px 32px 0;border-bottom:1px solid var(--n300)}
.zs li:nth-child(even){padding-left:32px;border-left:1px solid var(--n300)}
.zs-n{grid-row:span 2;font-weight:700;font-size:40px;line-height:40px;color:var(--b400);font-variant-numeric:tabular-nums}
.zs h3{font-weight:600;font-size:24px;line-height:30px;letter-spacing:-.01em}
.zs p{font-size:16px;line-height:25px;color:var(--n700);max-width:46ch}
@media (max-width:960px){.mv-g{grid-template-columns:minmax(0,1fr)}.zs{grid-template-columns:minmax(0,1fr)}.zs li:nth-child(even){padding-left:0;border-left:0}.zs li{padding-right:0}}
@media (max-width:640px){.zs li{grid-template-columns:52px minmax(0,1fr)}.zs-n{font-size:30px}}

/* V17 · Leistung: header with the one thing that explains it, five steps, nine parts */
.lh{padding-bottom:110px}
.lh.bp-grid::before{opacity:.45}
.lh-g{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,7fr);gap:48px 64px;align-items:center}
.lh-v{position:relative;display:grid;grid-template-columns:minmax(0,5fr) 56px minmax(0,7fr);align-items:center;gap:0}
.note{background:#F3EFD9;color:#262626;padding:18px 18px 20px;transform:rotate(-2deg);box-shadow:0 20px 40px -20px rgba(0,0,0,.6);font-size:14px;line-height:22px}
.note-h{font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8A7E55;margin-bottom:6px}
.lh-arr{justify-self:center;width:30px;fill:var(--b)}
.lh-arr svg{display:block;width:100%}
.lh-out{margin-top:0}
.lh-ti{font-weight:700;font-size:18px;line-height:24px;color:#fff}
.lh-ch{display:flex;flex-wrap:wrap;gap:6px}
.lh-ch span{padding:3px 8px;font-size:11px;font-weight:600;background:#26262B;color:#D4D4D8}
.lh-ul{display:grid;gap:6px;font-size:13px;line-height:19px;color:#C9C9CF}
.lh-ul li{position:relative;padding-left:14px}
.lh-ul li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:2px;background:var(--b400)}
.lh-cap{grid-column:1/-1;margin-top:14px;font-size:12px;color:#8B8B94;text-align:right}
.lsteps{display:grid}
.ls{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px 80px;align-items:center;padding:40px 0;border-bottom:1px solid var(--n300)}
.ls-t{display:grid;gap:12px;align-content:start}
.ls-n{display:flex;align-items:center;gap:12px;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
.ls-n span{font-size:15px;color:var(--b400);font-variant-numeric:tabular-nums}
.ls h3{font-weight:600;font-size:28px;line-height:34px;letter-spacing:-.01em}
.ls-t>p:last-child{font-size:17px;line-height:27px;color:var(--n700);max-width:48ch}
.ls-v{display:grid;gap:12px;max-width:440px;width:100%;justify-self:end}
.ls-v .mini{margin-top:0}
.ls-tags{display:flex;flex-wrap:wrap;gap:8px}
.ls-tags span{padding:4px 10px;font-size:12px;font-weight:600;outline:1px solid rgba(255,255,255,.18);outline-offset:-1px;color:#D4D4D8}
.mini-raw{padding:10px 12px;background:#26262B;font-size:13px;line-height:19px;color:#C9C9CF}
.mini-o{display:grid;gap:6px}
.mini-o li{padding:7px 10px;font-size:13px;outline:1px solid rgba(255,255,255,.14);outline-offset:-1px}
.mini-o li.on{background:var(--b);outline-color:var(--b);color:#fff;font-weight:600}
.mini-wa{justify-self:end;max-width:86%;padding:8px 10px;background:#1F3A2E;color:#E4F5EC;font-size:13px;line-height:18px}
.mini-wa small{display:block;margin-top:2px;font-size:11px;color:#9FC9B4}
.mini-n{font-size:12px;line-height:17px;color:#8B8B94}
.ft2-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--k);border-left:1px solid var(--n300)}
.ft2{display:grid;gap:10px;align-content:start;padding:26px 26px 28px;border-right:1px solid var(--n300);border-bottom:1px solid var(--n300)}
.ft2-s{justify-self:start;padding:2px 8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(0,85,255,.22);color:#BFD3FF}
.ft2 h3{font-weight:600;font-size:20px;line-height:26px}
.ft2 p{font-size:15px;line-height:23px;color:var(--n700)}
.ft2 .ft2-f{margin-top:auto;padding-top:10px;font-size:13px;color:var(--n500)}
.ft2-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 80px;margin-top:64px}
.ft2-two .lab{margin-bottom:18px}
.ft2-l{display:grid;border-top:1px solid var(--n300)}
.ft2-l li{display:grid;gap:2px;padding:14px 0 14px 26px;border-bottom:1px solid var(--n200);font-size:15px;line-height:22px;color:var(--n700);position:relative}
.ft2-l li::before{content:"";position:absolute;left:0;top:21px;width:12px;height:2px;background:#8B8B94}
.ft2-l:not(.no) li::before{background:repeating-linear-gradient(90deg,#8B8B94 0 3px,transparent 3px 5px)}
.ft2-l b{font-weight:600;color:var(--k)}
@media (max-width:1100px){.ft2-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){
  .lh-g{grid-template-columns:minmax(0,1fr)}
  .ls{grid-template-columns:minmax(0,1fr);gap:24px}
  .ls-v{justify-self:start}
  .ft2-two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .lh-v{grid-template-columns:minmax(0,1fr);gap:14px}
  .lh-arr{transform:rotate(90deg)}
  .note{transform:rotate(-1deg)}
  .ft2-g{grid-template-columns:minmax(0,1fr)}
  .lh-cap{text-align:left}
}

/* V17 · Fürs Büro: two roles, relief in numbers */
.fw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.fw-c{display:grid;gap:16px;align-content:start;padding:32px;background:#18181B;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.fw-k{font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--b300)}
.fw-c h3{font-weight:600;font-size:26px;line-height:32px;letter-spacing:-.01em}
.fw-c .fl{display:grid;gap:10px;font-size:16px;line-height:24px;color:var(--n900)}
.kp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--k)}
.kp-i{display:grid;gap:10px;align-content:start;padding:26px 24px 0 0}
.kp-i+.kp-i{padding-left:24px;border-left:1px solid var(--n300)}
.kp-i p:not(.fig):not(.ev-src){font-size:15px;line-height:22px;color:var(--n700)}
.kp-i .ev::after{display:none}
.kp-q{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 28px;align-items:start;margin-top:56px;padding-top:32px;border-top:1px solid var(--n300);max-width:900px}
.kp-q img{grid-row:span 2;width:96px;height:96px;object-fit:cover}
.kp-q blockquote{font-weight:600;font-size:26px;line-height:34px;letter-spacing:-.01em;text-wrap:balance}
.kp-q figcaption{font-size:14px;line-height:21px;color:var(--n700)}
.kp-q figcaption b{display:block;color:var(--k);font-weight:600;font-size:15px}
.kp-q a{color:var(--b300)}
@media (max-width:960px){.fw{grid-template-columns:minmax(0,1fr)}.kp{grid-template-columns:repeat(2,minmax(0,1fr))}.kp-i:nth-child(3){padding-left:0;border-left:0}.kp-i{padding-bottom:22px}}
@media (max-width:640px){.kp{grid-template-columns:minmax(0,1fr)}.kp-i,.kp-i+.kp-i{padding:20px 0;border-left:0;border-bottom:1px solid var(--n300)}.kp-q{grid-template-columns:72px minmax(0,1fr)}.kp-q img{width:72px;height:72px}.kp-q blockquote{font-size:21px;line-height:28px}.fw-c{padding:24px 20px}}

/* V17 · Referenzen: three firms as blocks of different height, contacts, chronicle, the voice */
.rh-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 72px;align-items:end}
.bk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end;height:400px;border-bottom:2px solid #F4F4F5}
.bk li{height:100%;display:flex;align-items:flex-end;min-width:0}
.bk a{display:grid;grid-template-rows:1fr auto;width:100%;height:100%;text-decoration:none;color:inherit}
.bk-col{align-self:end;display:grid;justify-items:center;align-content:start;gap:10px;height:calc(var(--hh) * .72);min-height:84px;padding:18px 12px;background:#1C1C20;border-top:3px solid #3A3A40;position:relative;transition:background .2s}
.bk li.on .bk-col{border-top-color:var(--b);background:#1E2433}
.bk a:hover .bk-col{background:#24242A}
.bk-col img{height:34px;width:auto;max-width:90%;opacity:.92}
.bk li.on .bk-col img{height:44px}
.bk-col em{font-style:normal;padding:2px 7px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(0,85,255,.3);color:#BFD3FF}
.bk-t{display:grid;gap:2px;padding-top:12px;font-size:13px;line-height:18px;color:#A9A9B2;order:2}
.bk-t b{font-weight:600;font-size:14px;color:#F4F4F5}
.bk-k{color:#8B8B94}
.bk a{grid-template-rows:auto}
.bk li a{display:flex;flex-direction:column;justify-content:flex-end}
.ap{margin-top:64px;display:grid;gap:18px}
.ap-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:900px}
.ap-c{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px;align-items:center;padding:18px;background:#19191C;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.ap-c img,.ap-ph{width:112px;height:112px;object-fit:cover}
.ap-ph{display:grid;place-items:center;align-content:center;background:#26262B;color:#C9C9CF;font-weight:700;font-size:28px}
.ap-ph small{font-size:11px;font-weight:500;color:#8B8B94}
.ap-c figcaption{display:grid;gap:2px;font-size:14px;line-height:20px;color:#A9A9B2}
.ap-c b{font-weight:600;font-size:17px;color:#fff}
.ap-c figcaption span{margin-top:6px;font-size:13px;color:#8B8B94}
.sgal .g4{grid-column:3/5;grid-row:2}
.sgal .g4 .ph{aspect-ratio:auto;height:calc(100% - 26px)}
.sgal .g2,.sgal .g3{grid-row:1}
.chron2{margin-top:96px}
.chron2 .sh{margin-bottom:40px}
.chron2 ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px;border-top:1px solid var(--k);padding-top:28px}
.chron2 li{display:grid;gap:8px;align-content:start;min-width:0}
.chron2 figure{display:grid;gap:6px;margin-bottom:6px}
.chron2 figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.2) contrast(1.02)}
.chron2 figcaption{font-size:11.5px;line-height:16px;color:var(--n500)}
.chron2 li b{font-weight:700;font-size:26px;line-height:30px;color:var(--k);font-variant-numeric:tabular-nums}
.chron2 li p{font-size:15px;line-height:22px;color:var(--n700)}
.chron2 .cy-big{align-content:end;padding:22px;background:#19191C;min-height:240px}
.chron2 .cy-big b{font-size:56px;line-height:56px}
.chron2 .us{align-content:end;padding:22px;background:rgba(0,85,255,.16);min-height:240px}
.chron2 .us b{font-size:40px;line-height:44px;color:var(--b300)}
.chron2 .legal{margin-top:24px}
.rf-cob{margin:-24px 0 32px}
.cob em{font-style:normal;margin-left:6px;font-size:13px;color:#8B8B94}
.qs{background:#0B0B0D;color:#fff}
.qs-g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px 88px;align-items:center}
.qs-ph{position:relative;max-width:420px}
.qs-p{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;filter:saturate(.86)}
.qs-psa{position:absolute;right:-28px;bottom:-28px;width:132px;height:132px;object-fit:cover;outline:6px solid #0B0B0D}
.qs-t{display:grid;gap:18px;position:relative}
.qs-t .lab{color:#A9A9B2}
.qs-m{font-weight:700;font-size:150px;line-height:.6;height:56px;color:#46BE96;font-family:Georgia,serif}
.qs-1{font-weight:600;font-size:clamp(30px,3.6vw,48px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.qs-2{margin-top:18px;font-size:20px;line-height:30px;color:#C9C9CF;max-width:640px}
.qs-who{display:flex;align-items:center;gap:18px;margin-top:14px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.qs-who img{height:46px;width:auto}
.qs-who span{font-size:14px;line-height:21px;color:#A9A9B2}
.qs-who b{display:block;font-weight:600;font-size:16px;color:#fff}
@media (max-width:1100px){.chron2 ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){
  .rh-g,.qs-g{grid-template-columns:minmax(0,1fr)}
  .bk{height:300px}
  .ap-g{grid-template-columns:minmax(0,1fr)}
  .sgal .g4{grid-column:1/3;grid-row:auto}.sgal .g4 .ph{height:auto;aspect-ratio:3/1.4}
  .qs-ph{max-width:300px}
}
@media (max-width:640px){
  .bk{height:260px;gap:8px}
  .bk-col{padding:12px 6px}
  .bk-col img{height:22px}.bk li.on .bk-col img{height:28px}
  .bk-t{font-size:11.5px;line-height:15px}.bk-t b{font-size:12px}
  .chron2 ol{grid-template-columns:minmax(0,1fr)}
  .chron2 .cy-big,.chron2 .us{min-height:0}
  .ap-c{grid-template-columns:84px minmax(0,1fr)}.ap-c img,.ap-ph{width:84px;height:84px}
  .qs-psa{width:96px;height:96px;right:-12px;bottom:-16px}
  .qs-2{font-size:17px;line-height:26px}
}

/* V17 · KI: four stations, a plain table of tasks */
#datenweg .dpath{grid-template-columns:repeat(4,minmax(0,1fr))}
.kt{display:grid;border-top:1px solid var(--k)}
.kt-r{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr) minmax(0,4fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--n300);font-size:16px;line-height:25px;color:var(--n900)}
.kt-r b{font-weight:600;font-size:20px;line-height:26px;color:var(--k)}
.kt-r span:last-child{color:var(--n700)}
.kt-h{padding:12px 0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
.kt-h span:last-child{color:var(--n500)}
.kn{display:grid;gap:16px;margin-top:48px;max-width:760px}
.kn .fl{display:grid;gap:10px;font-size:16px;line-height:24px}
@media (max-width:960px){#datenweg .dpath{grid-template-columns:repeat(2,minmax(0,1fr))}#datenweg .dnode:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:640px){.kt-r{grid-template-columns:minmax(0,1fr);gap:6px}.kt-h{display:none}#datenweg .dpath{grid-template-columns:minmax(0,1fr)}#datenweg .dnode{padding-left:0;border-left:0}}

.qs-t blockquote{padding-left:28px;border-left:4px solid #46BE96}
.qs-p{height:auto}
.sw-q blockquote{padding-left:24px;border-left:4px solid #46BE96}
.zs.z3{grid-template-columns:repeat(3,minmax(0,1fr))}
.zs.z3 li{grid-template-columns:minmax(0,1fr);padding:28px 28px 28px 0}
.zs.z3 li+li{padding-left:28px;border-left:1px solid var(--n300)}
.zs.z3 .zs-n{grid-row:auto}
@media (max-width:960px){.zs.z3{grid-template-columns:minmax(0,1fr)}.zs.z3 li+li{padding-left:0;border-left:0}}

/* ===== V18 · Feinschliff: Spot-Bildlook, Pfeil-Marker, Passermarken, Typo-Details ===== */
::selection{background:var(--b);color:#fff}

/* Pfeil aus der Wortmarke als Marker vor Sektions-Labels (laut Spot-Doku: „Marker vor Labels“) */
.sh>.lab::before,.sh>div>.lab::before,.phero-t>.lab::before,.hero-txt>.lab::before,.ref-head>.lab::before,.sw-q>.lab::before,.qs-t>.lab::before,.lp-t>.lab::before,.lvb-t>.lab::before,.weg2-side>.lab::before,.core-t>.lab::before{
  content:"";flex:none;align-self:flex-start;margin-top:3.5px;width:12px;height:9px;background:var(--b);
  -webkit-mask:var(--flagmask) center/contain no-repeat;mask:var(--flagmask) center/contain no-repeat;
  transform-origin:0 100%;transform:scale(var(--ms,1))}
[data-surface="dark"] .sh>.lab::before,[data-surface="dark"] .sh>div>.lab::before,[data-surface="dark"] .phero-t>.lab::before,[data-surface="dark"] .hero-txt>.lab::before,[data-surface="dark"] .ref-head>.lab::before,[data-surface="dark"] .sw-q>.lab::before,[data-surface="dark"] .qs-t>.lab::before,[data-surface="dark"] .lp-t>.lab::before,[data-surface="dark"] .lvb-t>.lab::before,[data-surface="dark"] .weg2-side>.lab::before{background:var(--b400)}
[data-surface="blue"] .sh>.lab::before,.band .sh>.lab::before,.lvb-core .sh>.lab::before,.core-t>.lab::before{background:#fff}

/* Maßkette: blauer Anriss auf der Linie über nummerierten Spalten, wie der Reiter der Stimmen-Karten */
.bs-i{position:relative}
.bs-i::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:3px;background:var(--b400)}
.weg-y{position:relative}
.weg-y::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:3px;background:var(--b400)}

/* Passermarken: Bauplan-Ebene über Bühnenbildern */
.regm{position:relative}
.regm::after{content:"";position:absolute;inset:10px;z-index:4;pointer-events:none;--c:rgba(255,255,255,.66);--l:12px;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/1px var(--l) no-repeat}
/* Hero-Video: Text im unteren Drittel auf Verlauf zu 75 % Schwarz, Bedienung oben rechts innerhalb der Marke */
.hero-vid .hero-cap{top:auto;bottom:0;left:0;right:0;padding:56px 26px 20px;background:linear-gradient(0deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,0) 100%);color:#E4E4E7;letter-spacing:.01em}
.hero-vid .vid-ctl{top:20px;right:20px;bottom:auto;width:32px;height:32px;background:rgba(13,13,15,.55);outline:1px solid rgba(255,255,255,.28);outline-offset:-1px}
@media (max-width:960px){.hero-vid .hero-cap{top:auto;bottom:0;padding:48px 24px 18px;background:linear-gradient(0deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,0) 100%)}}
@media (max-width:640px){.hero-vid .vid-ctl{top:20px;bottom:auto}}

/* Hängende Anführungszeichen: „ steht vor der Satzkante, die Buchstaben stehen bündig */
.sw-q blockquote,.tm2-c blockquote,.kp-q blockquote,.qs-1,.vc-i blockquote,.rf-q blockquote{text-indent:-.4em}

/* Zahlen: gleiche Ziffernbreite überall, wo verglichen wird */
dd,td,.num,.zs-n,.cy-big b,.bzp,.kt,.facts-mini,.chron2,.kp{font-variant-numeric:tabular-nums lining-nums}
.fig .lt{font-size:.56em;font-weight:600;align-self:center;margin-right:-2px;transform:translateY(-.02em)}

/* Text: keine Hurenkinder in Fließtext, ausgewogene Zwischenüberschriften */
p,li,dd,figcaption{text-wrap:pretty}
h3,.t-h3{text-wrap:balance}

/* Bewegung: Hover 120 ms auf der Rein-Kurve des Spots */
.btn{transition:background-color .12s var(--e-out)}
.btn svg,.tlink svg{transition:transform .12s var(--e-out)}
.btn:hover svg,.tlink:hover svg{transform:translateX(3px)}

/* Referenzen-Hero: Balken stehen auf einer gemeinsamen Geländelinie, Texte starten auf einer Höhe */
.bk{--bkh:300px;height:auto;align-items:start;border-bottom:0;position:relative}
.bk::after{content:"";position:absolute;left:0;right:0;top:var(--bkh);height:2px;background:#F4F4F5;pointer-events:none}
.bk li{height:auto;display:block}
.bk li a{display:grid;grid-template-rows:var(--bkh) auto;grid-template-columns:minmax(0,1fr);justify-content:stretch;height:auto}
.bk-col{align-self:end;height:var(--hh)}
.bk-t{padding-top:16px;align-self:start}
@media (max-width:960px){.bk{--bkh:220px}}
@media (max-width:640px){.bk{--bkh:170px}.bk-t{padding-top:12px}}
/* Quadrat-Motiv ist durch den Pfeil ersetzt: auch am Namens-Ticker */
.tick-dot{width:12px;height:9px;background:var(--b400);-webkit-mask:var(--flagmask) center/contain no-repeat;mask:var(--flagmask) center/contain no-repeat}


/* =====================================================================
   Kopf mit Umkreis-Karte (aus v2 übernommen). Variablen aus v2 auf das v3-System gemappt.
   ===================================================================== */
.hero-map { --night: #111111; --white: var(--w); --plan-hi: var(--b200); --plan-line: var(--b400); --blue: var(--b); --signal: var(--b); --ink: var(--k); --ink-2: var(--n700); --mute: var(--n500); --rule: var(--n200); --blue-t: var(--b100); --f-mono: var(--f); }
.hero-map .hero-in { grid-template-columns: minmax(0, 1fr); }
.hero-map .hero-txt { max-width: 640px; }
.hero-map .umap { z-index: 0; }
.hero-map .hero-in { z-index: 1; }
.hero-map .mcard { z-index: 3; font-family: var(--f); }
.hero-map .m-sc small, .hero-map .m-q b, .hero-map .dim em { letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.hero-map .um-km { letter-spacing: .08em; text-transform: uppercase; font-weight: 500; font-size: 11px; }
.hero-map .um-credit { z-index: 2; font-size: 11px; }
.mcard { position: absolute; left: 0; top: 0; z-index: 3; width: 360px; background: var(--white); color: var(--ink); padding: 18px; opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity; }
.mcard::before { content: ""; position: absolute; left: -1px; top: 34px; width: 52px; height: 1px; background: var(--white); transform: translateX(-100%); }
.mcard.left::before { left: auto; right: -1px; transform: translateX(100%); }
.m-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.m-who { display: flex; gap: 12px; align-items: center; }
.av { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: var(--blue-t); color: var(--blue); font-weight: 700; font-size: 14px; }
.m-n { font-weight: 600; font-size: 17px; letter-spacing: -.01em; line-height: 1.2; }
.m-s { font-size: 13px; color: var(--mute); }
.m-sc { text-align: right; font-size: 38px; font-weight: 500; letter-spacing: -.05em; line-height: 1; color: var(--blue); }
.m-sc small { display: block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .08em; color: var(--mute); margin-top: 4px; font-weight: 400; }
.dims { display: grid; gap: 8px; margin-top: 16px; }
.dim { display: grid; grid-template-columns: 112px minmax(0, 1fr) 34px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.dim em { font-style: normal; font-family: var(--f-mono); font-size: 10.5px; text-align: right; }
.segs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
.segs i { height: 6px; background: var(--blue-t); }
.segs i.on { background: var(--blue); }
.m-q { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13px; }
.m-q b { display: block; font-family: var(--f-mono); font-weight: 400; font-size: 9.5px; letter-spacing: .08em; color: var(--mute); margin-bottom: 4px; }
.m-tag { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--blue); }
.m-tag .ic { width: 16px; height: 16px; }
/* Kopf: Ihr Umkreis als vertraute Karte statt 3D, wie die Karten-App am Handy im Nachtmodus.
   --s = Pixel pro Kilometer, --cx/--cy = Ihr Betrieb auf dem Bildschirm; Orte tragen --e/--n in km. */
.umap { position: absolute; inset: 0; --s: 8; --cx: 0; --cy: 0; pointer-events: none; overflow: hidden; perspective: 1100px; perspective-origin: calc(var(--cx) * 1px) calc(var(--cy) * 1px); }
/* Leicht geneigt wie eine Karten-App, die man mit zwei Fingern kippt; dreht sich kaum merklich hin und her */
@property --tilt { syntax: '<angle>'; inherits: true; initial-value: 32deg; }
@property --rz { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
/* Maus: kleine Zusatzneigung zur Maus hin, von app.js weich nachgeführt */
@property --mx { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --my { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.um-plane { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: calc(var(--cx) * 1px) calc(var(--cy) * 1px); transform: rotateX(calc(var(--tilt, 32deg) + var(--my, 0deg))) rotateY(var(--mx, 0deg)) rotateZ(var(--rz, 0deg)); animation: um-drift 36s ease-in-out infinite alternate; }
@keyframes um-drift { from { --rz: -2.2deg; } to { --rz: 2.2deg; } }
@media (prefers-reduced-motion: reduce) { .um-plane { animation: none; } }
.um-world { position: absolute; inset: 0; opacity: var(--dim, 1); -webkit-mask-image: radial-gradient(circle calc(var(--s) * 76px) at calc(var(--cx) * 1px) calc(var(--cy) * 1px), #000 58%, transparent 100%); mask-image: radial-gradient(circle calc(var(--s) * 76px) at calc(var(--cx) * 1px) calc(var(--cy) * 1px), #000 58%, transparent 100%); }
.um-map, .um-fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.um-map path, .um-links line { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.um-riv { stroke: #2a5fe0; stroke-width: 1; opacity: .75; }
.um-riv.maj { stroke: #3d74ff; stroke-width: 2.6; opacity: .85; }
.um-rd.sec { stroke: rgba(178, 205, 255, .13); stroke-width: .8; }
.um-rd.pri { stroke: rgba(178, 205, 255, .26); stroke-width: 1.2; }
.um-rd.tru { stroke: rgba(178, 205, 255, .36); stroke-width: 1.6; }
.um-rd.mot { stroke: rgba(214, 228, 255, .55); stroke-width: 2.2; }
.um-dots circle { fill: rgba(178, 205, 255, .5); }
.um-area { fill: rgba(72, 132, 255, .1); stroke: var(--plan-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.um-links line { stroke: rgba(178, 205, 255, .5); stroke-width: 1; }
.um-links line.hi { stroke: var(--white); stroke-width: 1.8; }
.um-l, .um-pin, .um-home, .um-km { position: absolute; left: calc(var(--cx) * 1px + var(--e) * var(--s) * 1px); top: calc(var(--cy) * 1px - var(--n) * var(--s) * 1px); }
.um-l { transform: translate(7px, -50%); white-space: nowrap; font-size: 12px; line-height: 1; color: rgba(178, 205, 255, .8); text-shadow: 0 0 3px var(--night), 0 0 8px var(--night); }
.um-l.t1 { font-size: 14px; font-weight: 500; color: #dfe8ff; }
.um-l.b { transform: translate(-50%, 9px); }
.um-l.off { display: none; }
/* Desktop: Karte hinter der Überschrift etwas zurücknehmen */
@media (min-width: 901px) { .umap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 17, 17, .85) 0%, rgba(17, 17, 17, .55) 30%, rgba(17, 17, 17, 0) 52%); } }
.um-km { transform-origin: 0 0; transform: rotateZ(calc(var(--rz, 0deg) * -1)) rotateY(calc(var(--mx, 0deg) * -1)) rotateX(calc((var(--tilt, 32deg) + var(--my, 0deg)) * -1)) translate(10px, -50%); white-space: nowrap; padding: 3px 7px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--plan-hi); background: rgba(17, 17, 17, .75); border: 1px solid rgba(72, 132, 255, .5); opacity: 0; }
/* Bewerbungen stehen als kleine Pfosten auf der Karte: Schatten liegt auf der Karte, Pfosten und Kopf stehen aufrecht */
.um-pin, .um-home { width: 0; height: 0; transform-style: preserve-3d; }
.um-pin .sh, .um-home .sh { position: absolute; border-radius: 50%; background: rgba(2, 8, 30, .55); filter: blur(1.5px); }
.um-pin .sh { left: -6px; top: -3px; width: 12px; height: 6px; opacity: var(--o, 0); }
.um-pin .up, .um-home .up { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: rotateZ(calc(var(--rz, 0deg) * -1)) rotateY(calc(var(--mx, 0deg) * -1)) rotateX(calc((var(--tilt, 32deg) + var(--my, 0deg)) * -1)); }
.um-pin .up { opacity: var(--o, 0); transform: rotateZ(calc(var(--rz, 0deg) * -1)) rotateY(calc(var(--mx, 0deg) * -1)) rotateX(calc((var(--tilt, 32deg) + var(--my, 0deg)) * -1)) scale(calc(.4 + .6 * var(--o, 0))); }
.um-pin .up::before { content: ""; position: absolute; left: -.5px; bottom: 0; width: 1px; height: 14px; background: rgba(223, 232, 255, .7); }
.um-pin em { position: absolute; left: -5.5px; bottom: 13px; width: 11px; height: 11px; border-radius: 50%; background: #4884ff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); transition: background .3s, box-shadow .3s, transform .3s; }
.umap.sorted .um-pin em { background: #24408c; box-shadow: 0 0 0 2px rgba(178, 205, 255, .35); }
.umap.sorted .um-pin.hi em { background: var(--white); box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); transform: scale(1.3); }
.umap.sorted .um-pin.hi .up::before { background: var(--white); }
.um-home { z-index: 2; }
.um-home .sh { left: -11px; top: -4px; width: 22px; height: 8px; opacity: var(--home, 1); }
.um-home .up { opacity: var(--home, 1); }
.um-home svg { position: absolute; left: -13px; top: -34px; width: 26px; height: 35px; max-width: none; overflow: visible; }
.um-home path { fill: var(--signal); stroke: var(--night); stroke-width: 1.5; }
.um-home circle { fill: var(--night); }
.um-tag { position: absolute; left: 18px; top: -38px; white-space: nowrap; padding: 5px 9px; font-size: 13px; font-weight: 600; background: var(--signal); color: var(--white); }
.um-credit { position: absolute; right: max(20px, 4vw); bottom: calc(4px + env(safe-area-inset-bottom, 0px)); font-size: 10px; color: rgba(178, 205, 255, .55); text-decoration: none; pointer-events: auto; }
.um-credit:hover { color: var(--plan-hi); }
/* Markus-Karte über oder unter seinem Ort: Verbindungsstrich senkrecht zum Ort */
.mcard.above::before { left: var(--px, 60px); top: auto; bottom: 0; width: 1px; height: 28px; transform: translateY(100%); }
.mcard.below::before { left: var(--px, 60px); top: 0; width: 1px; height: var(--pl, 28px); transform: translateY(-100%); }
/* Telefon: nur große Orte beschriften, Umkreis-Hinweis unter den Kreis */
@media (max-width: 900px) { .umap { opacity: .28; } .um-km { display: none !important; } .um-l.t2 { display: none; } .um-km { --e: 0 !important; --n: -50 !important; transform: rotateZ(calc(var(--rz, 0deg) * -1)) rotateY(calc(var(--mx, 0deg) * -1)) rotateX(calc((var(--tilt, 32deg) + var(--my, 0deg)) * -1)) translate(-50%, 6px); font-size: 9.5px; } }

/* Honigtopf gegen Spam-Roboter: für Menschen unsichtbar */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---------- phone pass (4 Nov): tap sizes, small labels, sticky bar ---------- */
@media (pointer:coarse){
  .hd .wm,.ft-b .wm{padding:12px 0;margin:-12px 0}
  .tlink{position:relative}
  .tlink::before{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}
  .crumb a{display:inline-block;padding:8px 0;margin:-8px 0}
  .ctl-s{height:36px}
  .ev{height:32px;padding:0 10px;font-size:12px}
  .ev::after{height:14px}
  .ft ul{gap:0}
  .ft ul a{display:inline-block;padding:7px 0}
  .ft-bot nav{gap:0 24px}
  .ft-bot nav a{display:inline-block;padding:8px 0}
  .ft-lp a{display:inline-block;padding:8px 0;margin:-8px 0}
}
@media (max-width:640px){
  .tg{font-size:10.5px;line-height:14px}
  .sheet-n{font-size:12px;line-height:16px}
  .fp-t{font-size:12px;line-height:16px}
  .ft2-s{font-size:12px}
  .ens figcaption span{font-size:13px}
}
.mbar{display:none}
@media (max-width:760px){
  .mbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 18px;background:var(--b);color:var(--w);font-weight:600;font-size:16px;text-decoration:none;transform:translateY(calc(100% + 24px));transition:transform .35s var(--e-out)}
  .mbar.on{transform:none}
  .mbar[hidden]{display:none}
  .mbar svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
}

/* ---------- Startseite nach 10 · Website · Seiten und Texte (4 Nov) ---------- */
.sh-lead{margin:-28px 0 48px;max-width:64ch;font-size:18px;line-height:28px;color:var(--n700)}
.nt .sh-lead{color:var(--n700)}
.hk.solo{margin-bottom:0}
.haken{max-width:52ch}
.fw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--k)}
.fw a{position:relative;display:grid;gap:12px;align-content:start;padding:26px 28px 28px 0;border-bottom:1px solid var(--n300);text-decoration:none;color:var(--k)}
.fw a:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--n300)}
.fw .lab{color:var(--n700)}
.fw b{font-weight:600;font-size:21px;line-height:28px;transition:color .2s}
.fw-go{display:inline-flex;gap:8px;align-items:center;margin-top:4px;font-weight:600;color:var(--b)}
.fw-go svg{transition:transform .35s var(--e-out)}
.fw a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--b);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e-out)}
.fw a:hover::before{transform:scaleX(1)}
.fw a:hover b{color:var(--b)}
.fw a:hover .fw-go svg{transform:translateX(4px)}
.lvd-h{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--k);border-bottom:1px solid var(--n300);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
.lvd{margin:0;padding:0;list-style:none}
.lvd li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:8px 24px;padding:22px 0;border-bottom:1px solid var(--n300)}
.lvd .pos{font-weight:600;font-size:15px;line-height:26px;color:var(--b);font-variant-numeric:tabular-nums}
.lvd h3{font-weight:600;font-size:20px;line-height:26px}
.lvd h3+p{margin-top:6px;max-width:62ch;font-size:16px;line-height:24px;color:var(--n700)}
.lvd .st{align-self:start;white-space:nowrap;padding:4px 10px;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:var(--k);color:var(--w)}
.lvd .st.part{background:var(--n200);color:var(--n700)}
.lvd-go,.six-go{margin-top:28px}
.six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--k)}
.six article{display:grid;gap:10px;align-content:start;padding:26px 28px 30px 0;border-bottom:1px solid var(--n300)}
.six article:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--n300)}
.six-k{font-weight:500;font-size:13px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
.six h3{font-weight:600;font-size:20px;line-height:26px}
.six h3+p{font-size:15px;line-height:23px;color:var(--n700)}
.bel-lines{display:grid;gap:10px;margin-top:40px;max-width:72ch;font-size:15px;line-height:23px;color:var(--n700)}
.bel-lines b{font-weight:600;color:var(--k)}
.bel-lines a{color:var(--k)}
.sw-note{display:block;margin-bottom:14px;max-width:60ch;font-size:14px;line-height:21px;color:var(--n500)}
.nx{display:grid;gap:20px}
.nx-r{display:block;margin-bottom:6px;font-weight:500;font-size:13px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
@media (max-width:960px){
  .fw,.six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fw a:not(:nth-child(3n+1)),.six article:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .fw a:nth-child(2n),.six article:nth-child(2n){padding-left:28px;border-left:1px solid var(--n300)}
}
@media (max-width:640px){
  .fw,.six{grid-template-columns:minmax(0,1fr)}
  .fw a,.fw a:nth-child(2n),.six article,.six article:nth-child(2n){padding-left:0;border-left:0}
  .fw b{font-size:19px;line-height:26px}
  .lvd li{grid-template-columns:40px minmax(0,1fr)}
  .lvd .st{grid-column:2;justify-self:start}
  .sh-lead{margin:-20px 0 36px;font-size:16px;line-height:25px}
}
/* kurze Startseite (4 Nov): Mock-ups nur am Rechner, Nummer bei Oliver */
.band-who small{display:block;margin-top:4px;font-size:14px}
.band-who small a{color:var(--w);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){
  .bs .mini{display:none}
  .bel-lines{margin-top:32px}
}
/* hell zuerst (4 Nov): dunkel nur Kopf und Fuß, blau einmal, dazwischen weiß und off-white */
.sec.ow{background:var(--n100)}
.sec.pb{background:var(--b100)}
.sec.pb .sh-lead,.sec.pb .t-lead{color:var(--n900)}
.sec:not(.nt) .mini{background:var(--w);outline:1px solid var(--n200);color:var(--n700)}
.sec:not(.nt) .mini b{color:var(--k)}
.sec:not(.nt) .mini small,.sec:not(.nt) .mini-t span,.sec:not(.nt) .mini-f{color:var(--n500)}
.sec:not(.nt) .mini-f,.sec:not(.nt) .mini-t{border-color:var(--n200)}
.sec:not(.nt) .mini-l .av,.sec:not(.nt) .mini-h .av{background:var(--n100);color:var(--k)}
.sec:not(.nt) .mini-h .av-co{background:var(--b);color:#fff}
.sec:not(.nt) .mini-k span{color:var(--b)}
.sec:not(.nt) .mini-k.o span{color:var(--n500)}
.sec:not(.nt) .mini-b span{outline-color:var(--n300);color:var(--k)}
.sec:not(.nt) .mini-b span.on{background:var(--b);outline-color:var(--b);color:#fff}
.sec:not(.nt) .mini-l li,.sec:not(.nt) .mini-l .st{border-color:var(--n200)}
.logos:not(.nt) .lg-logos img{filter:invert(1)}
.sec:not(.nt) .cob svg{color:var(--k)}
/* Laufband der Referenzen (aus v2, 4 Nov) */
.mq{background:var(--w);overflow:hidden;padding-block:56px 48px}
.mq-in{display:flex;align-items:center;gap:36px}
.mq-l{flex:none;max-width:200px;font-size:14px;line-height:20px;color:var(--n500)}
.mq-v{flex:1;min-width:0;overflow:hidden;position:relative}
.mq-v::before,.mq-v::after{content:"";position:absolute;top:0;bottom:0;width:9%;z-index:1;pointer-events:none}
.mq-v::before{left:0;background:linear-gradient(90deg,var(--w),transparent)}
.mq-v::after{right:0;background:linear-gradient(270deg,var(--w),transparent)}
.mq-t{display:flex;width:max-content;animation:mq 50s linear infinite;will-change:transform}
.mq-t.mq-logos span{display:inline-flex;align-items:center;padding-right:clamp(48px,5vw,84px)}
.mq-t.mq-logos img{display:block;height:40px;width:auto;max-width:170px;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s}
.mq-t.mq-logos img.mid{height:46px}
.mq-t.mq-logos img.tall{height:58px}
.mq-t.mq-logos img.inv{filter:invert(1) grayscale(1)}
.mq:hover .mq-t{animation-play-state:paused}
.mq-t.mq-logos img:hover{filter:none;opacity:1}
.mq-t.mq-logos img.inv:hover{filter:invert(1)}
.mq-more{margin-top:20px;max-width:900px;font-size:14px;line-height:21px;color:var(--n500)}
.mq-more a{color:var(--k);text-decoration:underline;text-underline-offset:3px}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-t{animation:none}}
@media (max-width:720px){.mq-in{flex-direction:column;align-items:flex-start;gap:16px}.mq-v{width:100%}.mq-t.mq-logos img{height:34px}.mq-t.mq-logos img.mid{height:38px}.mq-t.mq-logos img.tall{height:48px}}

/* Karte: Drift ruht, wenn der Kopf aus dem Bild ist. Kein will-change: damit frisst Chrome Speicher ohne Ende. */
.umap.off .um-plane{animation-play-state:paused}
/* Kopf wie in v2 (4 Nov): zwei Knöpfe, darunter Oliver mit Nummer */
.btn-g{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn-g:hover{background:rgba(255,255,255,.12)}
.hero .acts{gap:12px}
.hero-who{display:flex;align-items:center;gap:14px;margin-top:-8px;font-size:15px;line-height:22px;color:var(--n300)}
.hero-who img{width:44px;height:44px;object-fit:cover;flex:none;box-sizing:border-box;padding:2px;border:1px dashed rgba(178,205,255,.5)}
.hero-who b{display:block;font-weight:600;color:var(--w)}
.hero-who a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(178,205,255,.6)}
.hero-who a:hover{text-decoration-color:currentColor}
@media (pointer:coarse){.hero-who a{display:inline-block;padding-block:11px;margin-block:-11px}}
.hero-map .hero-in{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.hero-map .hero-txt{max-width:720px}
@media (max-width:1100px){.hero-map .hero-in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.hero .acts .btn{width:100%;justify-content:center}}
/* Drei Säulen als Bau-Dokument (4 Nov): Position, Säule, Bedeutung, Beleg */
.sl-h,.sl li{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:8px 32px;align-items:start}
.sl-h{padding:14px 0;border-top:1px solid var(--k);border-bottom:1px solid var(--n300);font-weight:500;font-size:13px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
.sl{margin:0;padding:0;list-style:none}
.sl li{padding:28px 0;border-bottom:1px solid var(--n300)}
.sl .pos{font-weight:600;font-size:15px;line-height:28px;color:var(--b);font-variant-numeric:tabular-nums}
.sl h3{font-weight:600;font-size:22px;line-height:28px;letter-spacing:-.01em}
.sl p{font-size:16px;line-height:24px;color:var(--n700)}
.sl .sl-b{position:relative;padding-left:22px;font-size:15px;line-height:22px}
.sl .sl-b::before{content:"";position:absolute;left:0;top:10px;width:12px;height:2px;background:var(--b)}
@media (max-width:960px){
  .sl-h{display:none}
  .sl{border-top:1px solid var(--k)}
  .sl li{grid-template-columns:40px minmax(0,1fr);gap:10px 16px}
  .sl li p{grid-column:2}
}
/* Drei Säulen schlicht (4 Nov): drei Spalten ohne Mock-ups */
.bs-plain .bs-i{grid-row:span 4}
.sec:not(.nt) .bs-i .num{color:var(--b)}
.sec:not(.nt) .bs-bel::before{background:var(--b)}
.sec:not(.nt) .bs-bel{color:var(--n700)}
/* Drei Säulen geteilt (4 Nov): links bleibt der Kopf stehen, rechts die Liste mit großen Nummern */
.sp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 80px;align-items:start}
.sp-l{position:sticky;top:calc(var(--hd) + 36px)}
.sp-l .sh{margin-bottom:0}
.sp-l .sh-lead{margin:24px 0 0}
.sp-go{margin-top:28px}
.sp-r{margin:0;padding:0;list-style:none;display:grid}
.sp-r li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px 24px;padding:34px 0;border-top:1px solid var(--n300)}
.sp-r li:last-child{border-bottom:1px solid var(--n300)}
.sp-n{font-weight:600;font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--b);font-variant-numeric:tabular-nums}
.sp-r h3{font-weight:600;font-size:26px;line-height:32px;letter-spacing:-.01em;margin-bottom:10px}
.sp-r p{font-size:17px;line-height:26px;color:var(--n700);max-width:52ch}
.sp-r .bs-bel{margin-top:14px;font-size:14px;line-height:20px}
@media (max-width:960px){.sp{grid-template-columns:minmax(0,1fr);gap:32px}.sp-l{position:static}}
@media (max-width:640px){.sp-r li{grid-template-columns:minmax(0,1fr);gap:6px;padding:26px 0}.sp-n{font-size:30px}.sp-r h3{font-size:22px;line-height:28px}.sp-r p{font-size:16px;line-height:24px}}
/* Beleg Schwinger, ruhig (4 Nov): Zitat links, Foto und Werte rechts */
.rf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 80px;align-items:start}
.rf-l{display:grid;gap:26px;align-content:start}
.rf-q{margin:0;font-weight:600;font-size:34px;line-height:42px;letter-spacing:-.02em;text-wrap:balance}
.rf-l .who img{width:56px;height:56px;object-fit:cover;flex:none}
.rf-ctx{max-width:44ch;font-size:16px;line-height:25px;color:var(--n700)}
.rf-r{display:grid;gap:28px}
.rf-ph .ph{aspect-ratio:3/2}
.rf-ph .ph img{width:100%;height:100%;object-fit:cover}
.rf-v{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;margin:0;border-top:1px solid var(--k)}
.rf-v>div{padding-top:18px}
.rf-v dt{display:flex;align-items:baseline;gap:6px;font-weight:600;font-size:44px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rf-v dt span,.rf-v dt small{font-weight:500;font-size:18px;letter-spacing:0}
.rf-v dd{margin:10px 0 0;font-size:15px;line-height:22px;color:var(--n700)}
.rf-v dd small{display:block;margin-top:8px;font-weight:500;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.rf-note{font-size:13px;line-height:19px;color:var(--n500)}
@media (max-width:960px){.rf{grid-template-columns:minmax(0,1fr);gap:36px}}
@media (max-width:640px){.rf-q{font-size:26px;line-height:32px}.rf-v{grid-template-columns:minmax(0,1fr);gap:0}.rf-v>div{padding:16px 0;border-bottom:1px solid var(--n300)}.rf-v dt{font-size:36px}}
/* Beleg Schwinger: Kennzahlen zuerst, dann das Zitat (4 Nov) */
.kz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin:0}
.kz>div{padding-top:22px;border-top:1px solid var(--k)}
.kz dt{display:flex;align-items:baseline;gap:8px;height:64px;font-weight:600;font-size:64px;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.kz dt span{font-weight:500;font-size:20px;letter-spacing:-.01em;color:var(--n700)}
.kz dd{margin:16px 0 0;max-width:30ch;font-size:17px;line-height:26px;color:var(--n700)}
.kz dd.kz-s{margin-top:10px;font-weight:500;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.kz-q{margin:72px 0 0;display:grid;gap:24px;max-width:860px}
.kz-q blockquote{margin:0;font-weight:600;font-size:32px;line-height:40px;letter-spacing:-.02em;text-wrap:balance}
.kz-q figcaption{display:flex;align-items:center;gap:16px;font-size:15px;line-height:22px;color:var(--n700);max-width:60ch}
.kz-q figcaption img{width:56px;height:56px;object-fit:cover;flex:none}
.kz-q figcaption b{display:block;font-weight:600;color:var(--k)}
.kz-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;margin-top:48px;padding-top:18px;border-top:1px solid var(--n300);font-size:13px;line-height:19px;color:var(--n500)}
@media (max-width:960px){.kz{gap:0 28px}.kz dt{height:52px;font-size:52px}}
@media (max-width:640px){.kz{grid-template-columns:minmax(0,1fr)}.kz>div{padding:18px 0 22px;border-top:1px solid var(--n300)}.kz>div:first-child{border-top-color:var(--k)}.kz dt{height:44px;font-size:44px}.kz dd{margin-top:8px;font-size:16px;line-height:24px}.kz-q{margin-top:48px}.kz-q blockquote{font-size:24px;line-height:31px}}
/* Beleg als zwei Karten (4 Nov): Zitat links, Kennzahlen rechts */
.tc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:20px;margin-top:28px;align-items:stretch}
.tc-q,.tc-n{margin:0;padding:40px;background:var(--w);outline:1px solid var(--n200);outline-offset:-1px}
.tc-q{display:grid;gap:26px;align-content:start}
.tc-mark{display:block;height:34px;font-weight:700;font-size:72px;line-height:1;color:var(--b);transform:translateY(-22px)}
.tc-q blockquote{margin:0;max-width:24ch;font-weight:600;font-size:30px;line-height:38px;letter-spacing:-.02em;text-wrap:balance}
.tc-q figcaption{display:flex;align-items:center;gap:16px;font-size:15px;line-height:22px;color:var(--n700)}
.tc-q figcaption img{width:56px;height:56px;object-fit:cover;flex:none}
.tc-q figcaption b{display:block;font-weight:600;color:var(--k)}
.tc-ctx{margin-top:auto;max-width:52ch;font-size:14px;line-height:21px;color:var(--n500)}
.tc-ctx a{color:var(--k);text-decoration:underline;text-underline-offset:3px}
.tc-n{display:grid;align-content:start}
.tc-n>div{padding:22px 0;border-top:1px solid var(--n200)}
.tc-n>div:first-child{padding-top:0;border-top:0}
.tc-n dt{display:flex;align-items:baseline;gap:8px;font-weight:600;font-size:44px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tc-n dt span{font-weight:500;font-size:17px;letter-spacing:0;color:var(--n700)}
.tc-f{width:18px;height:13px;flex:none;fill:var(--b);align-self:center;margin-right:4px}
.tc-n dd{margin:10px 0 0;font-size:15px;line-height:22px;color:var(--n700)}
.tc-n dd small{display:block;margin-top:6px;font-weight:500;font-size:11px;line-height:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.tc-src{margin-top:auto;padding-top:18px;font-size:12px;line-height:17px;color:var(--n500)}
@media (max-width:960px){.tc{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.tc-q,.tc-n{padding:26px 22px}.tc-q blockquote{font-size:24px;line-height:31px}.tc-n dt{font-size:36px}.tc-mark{font-size:60px;height:28px;transform:translateY(-18px)}}
/* Kundenstimme Schwinger als schräg geteilte Karte (4 Nov) */
.ks{position:relative;display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);min-height:480px;overflow:hidden;background:#111;color:var(--k)}
.ks-ph{position:absolute;inset:0}
.ks-ph img{width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.ks-l{position:relative;z-index:1;display:grid;gap:24px;align-content:start;padding:44px 110px 44px 44px;background:var(--w);border-right:12px solid var(--b);clip-path:polygon(0 0,100% 0,calc(100% - 88px) 100%,0 100%)}
.ks-lab{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ks-lab .ks-sub{font-weight:500;color:var(--n500)}
.ks-sep{width:1px;height:14px;background:var(--n300)}
.ks-q{margin:0;max-width:22ch;font-weight:700;font-size:34px;line-height:40px;letter-spacing:-.025em}
.ks-m{color:var(--b)}
.ks-who{display:flex;align-items:center;gap:16px;font-size:15px;line-height:22px;color:var(--n700)}
.ks-who img{width:64px;height:64px;object-fit:cover;flex:none}
.ks-who b{display:block;font-weight:600;color:var(--k)}
.ks-who small{display:block;margin-top:4px;font-size:13px;line-height:18px;color:var(--n500)}
.ks-logos{display:flex;align-items:center;gap:18px;margin:4px 0 0}
.ks-logos img{height:48px;width:auto}
.ks-logos span{color:var(--n500)}
.ks-logos svg{height:18px;width:auto;color:var(--k)}
.ks-r{position:relative;z-index:1;display:flex;align-items:flex-end;padding:28px}
.ks-n{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;width:100%;background:rgba(17,17,17,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff}
.ks-n>div{padding:18px 20px;border-left:1px solid rgba(255,255,255,.22)}
.ks-n>div:first-child{border-left:0}
.ks-n svg{display:block;width:22px;height:22px;margin-bottom:8px;fill:none;stroke:var(--b400);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ks-n dt{display:flex;align-items:baseline;gap:6px;font-weight:600;font-size:34px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ks-n dt span{font-weight:500;font-size:17px;letter-spacing:0;color:#D4D4D8}
.ks-n dd{margin:8px 0 0;font-size:14px;line-height:19px;color:#D4D4D8}
.ks-foot{margin-top:18px;font-size:13px;line-height:19px;color:var(--n500)}
.ks-foot a{color:var(--k);text-decoration:underline;text-underline-offset:3px}
@media (max-width:1100px){.ks-l{padding-right:80px}.ks-q{font-size:28px;line-height:34px}}
@media (max-width:960px){
  .ks{grid-template-columns:minmax(0,1fr);min-height:0}
  .ks-l{order:1;padding:32px 28px;border-right:0;border-bottom:8px solid var(--b);clip-path:none}
  .ks-ph{order:2;position:relative;aspect-ratio:16/9}
  .ks-r{order:3;padding:0}
  .ks-n{background:#111;-webkit-backdrop-filter:none;backdrop-filter:none}
  .ks-n>div{padding:16px}
}
@media (max-width:640px){.ks-n{grid-template-columns:minmax(0,1fr)}.ks-n>div{border-left:0;border-top:1px solid rgba(255,255,255,.18)}.ks-n>div:first-child{border-top:0}.ks-q{font-size:25px;line-height:31px}.ks-l{padding:26px 22px}}
/* Kundenstimme ohne Kasten (4 Nov): links Text im Raster, rechts Foto bis zum Rand, eine blaue Schräge */
.ks2{position:relative;overflow:hidden;background:var(--w);color:var(--k)}
.ks2-in{display:grid;grid-template-columns:minmax(20px,1fr) minmax(0,calc(var(--cw) * .46)) minmax(0,calc(var(--cw) * .54)) minmax(20px,1fr);min-height:620px}
.ks2-l{grid-column:2/3;position:relative;z-index:2;display:grid;gap:26px;align-content:center;padding:96px 48px 96px 0;background:var(--w)}
.ks2-l::before,.ks2-l::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:120px;clip-path:polygon(0 0,100% 0,0 100%);pointer-events:none}
.ks2-l::before{background:var(--b);transform:translateX(12px)}
.ks2-l::after{background:var(--w)}
.ks2-q{margin:0;max-width:20ch;font-weight:700;font-size:38px;line-height:44px;letter-spacing:-.025em}
.ks2-foot{max-width:52ch;font-size:13px;line-height:19px;color:var(--n500)}
.ks2-foot a{color:var(--k);text-decoration:underline;text-underline-offset:3px}
.ks2-r{grid-column:3/5;position:relative;min-height:420px}
.ks2-r>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.ks2-n{position:absolute;left:0;right:0;bottom:0;z-index:1;padding-left:40px;background:rgba(17,17,17,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ks2-n>div{padding:22px 24px}
@media (max-width:1100px){.ks2-q{font-size:30px;line-height:36px}.ks2-l{padding:72px 40px 72px 0}}
@media (max-width:960px){
  .ks2-in{grid-template-columns:minmax(20px,1fr) minmax(0,var(--cw)) minmax(20px,1fr);min-height:0}
  .ks2-l{grid-column:2/3;padding:64px 0 40px}
  .ks2-l::before,.ks2-l::after{display:none}
  .ks2-r{grid-column:1/4;min-height:0;aspect-ratio:16/9}
  .ks2-n{position:static;padding-left:20px;padding-right:20px;background:#111;-webkit-backdrop-filter:none;backdrop-filter:none}
  .ks2-r>img{position:static;aspect-ratio:16/9}
  .ks2-n>div{padding:18px 16px}
}
@media (max-width:640px){.ks2-q{font-size:26px;line-height:32px}.ks2-l{padding:48px 0 32px}}
/* Beleg kompakt (4 Nov): Zitat und Foto, darunter eine Zeile Kennzahlen */
.bg2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 80px;align-items:center}
.bg2-l{display:grid;gap:28px;align-content:center}
.bg2-q{margin:0;font-weight:600;font-size:34px;line-height:42px;letter-spacing:-.02em;text-wrap:balance}
.bg2-l .who img{width:64px;height:64px;object-fit:cover;flex:none}
.bg2-l .who b{font-weight:600}
.bg2-l .who small{display:block;margin-top:4px;font-size:13px;line-height:18px;color:var(--n500)}
.bg2-ph{margin:0}
.bg2-ph .ph{aspect-ratio:3/2}
.bg2-ph .ph img{width:100%;height:100%;object-fit:cover}
.bg2-n{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin:56px 0 0;border-top:1px solid var(--k)}
.bg2-n>div{padding-top:20px}
.bg2-n dt{display:flex;align-items:baseline;gap:8px;height:52px;font-weight:600;font-size:52px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bg2-n dt span{font-weight:500;font-size:18px;letter-spacing:0;color:var(--n700)}
.bg2-n dd{margin:12px 0 0;max-width:30ch;font-size:16px;line-height:24px;color:var(--n700)}
.bg2-n dd.bg2-s{margin-top:6px;font-size:13px;line-height:18px;color:var(--n500)}
@media (max-width:960px){.bg2{grid-template-columns:minmax(0,1fr);gap:28px}.bg2-q{font-size:28px;line-height:35px}}
@media (max-width:640px){.bg2-n{grid-template-columns:minmax(0,1fr);margin-top:40px}.bg2-n>div{padding:16px 0;border-bottom:1px solid var(--n300)}.bg2-n dt{height:44px;font-size:44px}.bg2-q{font-size:24px;line-height:31px}}

/* Eyebrow im Beleg-Block mit Pfeil wie überall */
.bg2-l>.lab::before{content:"";flex:none;align-self:flex-start;margin-top:3.5px;width:12px;height:9px;background:var(--b);
  -webkit-mask:var(--flagmask) center/contain no-repeat;mask:var(--flagmask) center/contain no-repeat;
  transform-origin:0 100%;transform:scale(var(--ms,1))}
/* Beleg kompakt: Logo-Paar, Kennzahlen mit Trennlinien und Link wie im Original (4 Nov) */
.bg2-cob{margin:8px 0 0}
.bg2-cob svg{color:var(--k)}
.bg2-v>div{padding-bottom:4px}
.bg2-go{margin-top:40px}
@media (max-width:640px){.bg2-cob{margin:4px 0 0}.bg2-v{grid-template-columns:minmax(0,1fr)}.bg2-v>div+div{padding-left:0;border-left:0;border-top:1px solid var(--n300);padding-top:20px}}
.bg2-v{margin-top:56px}
.bg2-cob img{height:68px}
.bg2-cob svg{height:17px}
.sec:not(.nt) .ev>i,.sec:not(.nt) .ev[data-ev="einschaetzung"]>i{background:var(--b)}
.bg2-v{border-top:0}
/* Nächster Schritt: Flaggen-Raster aus der Branding-Datei statt Quadratraster (5 Nov) */
.band-flag{position:relative;isolation:isolate;overflow:hidden}
.band-flag::before{content:"";position:absolute;inset:-100px;z-index:0;pointer-events:none;background:url(/img/flag-grid.svg) 60px 40px/1800px auto repeat;opacity:.34;animation:bandDrift 14s ease-in-out infinite alternate}
.band-flag>*{position:relative;z-index:1}
@media (max-width:640px){.band-flag::before{background-size:1000px auto;background-position:40px 140px}}
/* Leistung hell (5 Nov): Bausteine, Listen und Mock-ups auf hellem Grund */
.sec:not(.nt) .ft2-s{background:var(--b100);color:var(--b700)}
.sec:not(.nt) .ls-tags span{outline-color:var(--n300);color:var(--n700)}
.sec:not(.nt) .mini-raw{background:var(--n100);color:var(--n700)}
.sec:not(.nt) .mini-o li{outline-color:var(--n300)}
.sec:not(.nt) .ls-n span{color:var(--b)}
.sec:not(.nt) .ft2-l li::before{background:var(--n500)}
.sec:not(.nt) .ft2-l:not(.no) li::before{background:repeating-linear-gradient(90deg,var(--n500) 0 3px,transparent 3px 5px)}
.ft2-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 48px;margin-top:64px}
.ft2-three .lab{margin-bottom:6px}
.ft2-three .lab+.small{margin-bottom:16px}
.start-steps{margin-bottom:64px}
.sec:not(.nt) .start-steps .bs-bel{color:var(--b);font-weight:600}
.sec:not(.nt) .start-steps .bs-bel::before{background:var(--b)}
.lh .acts{gap:16px}
@media (max-width:640px){.lh .acts .btn{width:100%;justify-content:center}}
@media (max-width:960px){.ft2-three{grid-template-columns:minmax(0,1fr);gap:32px}}
/* Leistung · Ablauf: Mock-ups wieder dunkel (wie im Kopf), mit mehr Innenabstand */
.sec:not(.nt) .ls-v .mini{background:#1A1A1E;outline:1px solid rgba(255,255,255,.08);color:#D4D4D8;padding:22px 24px 24px;gap:14px}
.sec:not(.nt) .ls-v .mini b{color:#F4F4F5}
.sec:not(.nt) .ls-v .mini small,.sec:not(.nt) .ls-v .mini-t span,.sec:not(.nt) .ls-v .mini-f{color:#8B8B94}
.sec:not(.nt) .ls-v .mini-f,.sec:not(.nt) .ls-v .mini-t{border-color:rgba(255,255,255,.08)}
.sec:not(.nt) .ls-v .mini-l .av,.sec:not(.nt) .ls-v .mini-h .av{background:#2A2A30;color:#E4E4E7}
.sec:not(.nt) .ls-v .mini-h .av-co{background:var(--b);color:#fff}
.sec:not(.nt) .ls-v .mini-k span{color:#8FB1FF}
.sec:not(.nt) .ls-v .mini-k.o span{color:#A9A9B2}
.sec:not(.nt) .ls-v .mini-b span{outline-color:rgba(255,255,255,.18);color:#E4E4E7}
.sec:not(.nt) .ls-v .mini-b span.on{background:var(--b);outline-color:var(--b);color:#fff}
.sec:not(.nt) .ls-v .mini-l li,.sec:not(.nt) .ls-v .mini-l .st{border-color:rgba(255,255,255,.08)}
.sec:not(.nt) .ls-v .mini-raw{background:#26262B;color:#C9C9CF}
.sec:not(.nt) .ls-v .mini-o li{outline-color:rgba(255,255,255,.14);color:#D4D4D8}
.sec:not(.nt) .ls-v .mini-o li.on{background:var(--b);outline-color:var(--b);color:#fff}
/* Leistung · Kosten auf Weiß: Pilot-Block wie im Entwurf, nur hell */
.sec:not(.nt) .pilot{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(120deg,rgba(0,85,255,.09) 0%,rgba(0,85,255,.03) 100%);outline:0}
.sec:not(.nt) .pilot>*{position:relative;z-index:1}
/* ein weicher Lichtschein wandert langsam über den Block, hin und zurück */
.sec:not(.nt) .pilot::before{content:"";position:absolute;z-index:0;top:-60%;bottom:-60%;left:-30%;width:60%;pointer-events:none;background:radial-gradient(closest-side,rgba(0,85,255,.17) 0%,rgba(0,85,255,.07) 45%,rgba(0,85,255,0) 100%);animation:pilotGlow 11s ease-in-out infinite alternate}
@keyframes pilotGlow{0%{transform:translateX(0)}100%{transform:translateX(167%)}}
@media (prefers-reduced-motion:reduce){.sec:not(.nt) .pilot::before{animation:none;left:35%}}
.sec:not(.nt) .pilot .lab{color:var(--b)}
.sec:not(.nt) .pilot-k{color:var(--k)}
.sec:not(.nt) .pilot .fl li{color:var(--k)}
.sec:not(.nt) .cost .lab{color:var(--n700)}
.sec:not(.nt) .cost-note{border-top-color:var(--n200)}
/* Bauzeitenplan · Zeitlinie läuft von links nach rechts, Balken wachsen ab ihrem Starttag */
.bzp{--bzp-t:2.6s;--bzp-off:#A1A1AA}
.bzp-b{transition:transform calc((var(--e) - var(--s) + 1) / var(--days) * var(--bzp-t)) linear calc((var(--s) - 1) / var(--days) * var(--bzp-t))}
.bzp-r[data-k="b"] .bzp-b,.bzp-key i[data-k="b"]{background:var(--bzp-off)}
.bzp-r[data-k="g"] .bzp-b{background:repeating-linear-gradient(135deg,var(--b) 0 3px,var(--bzp-off) 3px 6px)}
.bzp-key i[data-k="g"]{background:repeating-linear-gradient(135deg,var(--b) 0 2px,var(--bzp-off) 2px 4px)}
.bzp-r[data-k="n"] .bzp-b{background:transparent;outline:0;border:1.5px dashed var(--b400);transform:none;clip-path:inset(0 100% 0 0);transition:clip-path calc((var(--e) - var(--s) + 1) / var(--days) * var(--bzp-t)) linear calc((var(--s) - 1) / var(--days) * var(--bzp-t))}
.bzp.is-in .bzp-r[data-k="n"] .bzp-b{clip-path:inset(0 0 0 0)}
.bzp-cur{position:absolute;left:0;top:100%;width:1px;height:var(--bh,0px);margin-top:12px;background:var(--b300);box-shadow:0 0 6px rgba(0,85,255,.55);opacity:0;pointer-events:none}
.bzp.is-in .bzp-cur{animation:bzpSweep var(--bzp-t) linear forwards}
@keyframes bzpSweep{0%{left:0;opacity:1}94%{opacity:1}100%{left:100%;opacity:0}}
.bzp-m{transition:transform .45s cubic-bezier(.2,0,0,1) var(--bzp-t)}
.bzp-m::after{content:"";position:absolute;inset:-2px;border:1.5px solid var(--b300);opacity:0;pointer-events:none}
.bzp.is-in .bzp-m::after{animation:bzpPulse 3.4s ease-out calc(var(--bzp-t) + .35s) infinite}
@keyframes bzpPulse{0%{transform:scale(1);opacity:.9}38%{transform:scale(2.8);opacity:0}100%{transform:scale(2.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.bzp-cur,.bzp-m::after{animation:none!important}.bzp-r[data-k="n"] .bzp-b{transition:none;clip-path:none}}
/* Leistung · Kopf: der blaue Schein wandert langsam */
.phero.dk.lh{background:linear-gradient(180deg,#121214 0%,#0d0d0f 100%)}
.lh .c{position:relative;z-index:1}
.lh::before{content:"";position:absolute;z-index:0;inset:-20%;pointer-events:none;background:radial-gradient(38% 50% at 68% 62%,rgba(0,85,255,.17) 0%,rgba(0,85,255,.05) 45%,rgba(0,85,255,0) 72%);animation:heroGlow 14s ease-in-out infinite alternate}
@keyframes heroGlow{0%{transform:translate(-4%,3%) scale(1)}100%{transform:translate(4%,-3%) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.lh::before{animation:none}}
/* Leistung · Bausteine: beim Überfahren wird der Baustein blau */
@media (hover:hover){
  .sec:not(.nt) .ft2,.sec:not(.nt) .ft2 h3,.sec:not(.nt) .ft2 p,.sec:not(.nt) .ft2-s{transition:background-color .22s ease,color .22s ease}
  .sec:not(.nt) .ft2:hover{background:var(--b100)}
  .sec:not(.nt) .ft2:hover h3{color:var(--b700)}
  .sec:not(.nt) .ft2:hover .ft2-s{background:var(--b);color:#fff}
}
/* Fürs Büro auf hell: Spalten statt Kästen, Zahlen ohne schwarze Linie, zwei Texte zum Kopieren */
.fw.fw2{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;border-top:0}
.sec:not(.nt) .fw-c{background:var(--w);outline:1px solid var(--n200);outline-offset:-1px;padding:32px}
.sec:not(.nt) .fw-k{color:var(--b)}
.sec:not(.nt) .fw-c .fl{color:var(--n700)}
.sec:not(.nt) .fw-c .fl.no li::before{background:var(--n500)}
.sec:not(.nt) .kp{border-top:0}
.sec:not(.nt) .kp-q figcaption a{margin-left:10px}
.terms .fl li b{font-weight:600;color:var(--k)}
.fwd-stack{display:grid;gap:20px}
.qa-a .tlink{margin:-6px 0 24px;font-size:15px}
.phero-s .acts{margin:18px 0 36px}
@media (max-width:760px){.fw.fw2{grid-template-columns:minmax(0,1fr);gap:16px}}
@media (max-width:640px){.phero-s .acts .btn{width:100%;justify-content:center}}
/* Leistung · Kopf: die Notizzeilen leuchten nacheinander auf, während der Entwurf entsteht */
.note .nl{display:block;position:relative;isolation:isolate}
.note .nl::before{content:"";position:absolute;z-index:-1;left:-6px;right:-6px;top:1px;bottom:1px;background:rgba(0,85,255,.16);opacity:var(--hl,0)}
.lh-arr{transform-origin:center}
/* Leistung · Ablauf: unter dem letzten Schritt keine Linien mehr */
.lsteps .ls:last-child{border-bottom:0}
.lsteps+.bs-note{border-top:0;padding-top:0;margin-top:8px}
/* Startseite · Säulen: der Pilot in einer Zeile unter dem Vorspann */
.sp-fact{margin:18px 0 0;font-size:15px;line-height:22px;max-width:40ch}
/* Leistung · Bausteine in einer Zeile, ohne Kategorie-Marken */
.ft2-short .ft2{gap:8px;padding:22px 24px 24px}
.ft2-short .ft2 h3{font-size:19px;line-height:25px}
/* Leistung · Einordnung als ruhige Tabelle, auf dem Handy seitlich scrollbar */
.ct-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--n300)}
.ct-static{min-width:860px}
.ct-static thead th{padding-top:18px}
.ct-static tbody th{width:18%;color:var(--k)}
.ct-static td.ct-a{color:var(--n700)}
.ct-static .bp{box-shadow:inset 2px 0 0 var(--b)}
.ct-static thead .bp{box-shadow:inset 2px 0 0 var(--b)}
.ct-static tbody tr:last-child th,.ct-static tbody tr:last-child td{border-bottom:0}
@media (max-width:760px){
  .ct-static{min-width:760px}
  .ct-static tbody th,.ct-static thead th:first-child{position:sticky;left:0;background:var(--w);z-index:1}
}
/* Leistung · die drei Spalten unter den Bausteinen klappen auf dem Handy, Grenzen offen */
@media (max-width:640px){
  .ft2-three{gap:0;margin-top:36px;border-top:1px solid var(--n300)}
  .ft2-three>div{border-bottom:1px solid var(--n300)}
  .ft2-three .lab{margin:0;padding:16px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
  .ft2-three .lab::after{content:"";width:18px;height:18px;flex:none;background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat}
  .ft2-three>div.open .lab::after{background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat}
  .ft2-three>div:not(.open) .small,.ft2-three>div:not(.open) .ft2-l{display:none}
  .ft2-three .lab+.small{margin:0 0 10px}
  .ft2-three .ft2-l{border-top:0;margin-bottom:8px}
  .ft2-three .ft2-l li:last-child{border-bottom:0}
}
/* Weniger Luft auf dem Handy: Abschnitte, Kopfzeilen und Band enger */
@media (max-width:640px){
  .sec{padding-block:64px}
  .band{padding-block:72px}
  .sh{margin-bottom:36px}
  .phero{padding-block:calc(var(--hd) + 36px) 48px}
  .lsteps .ls{padding:28px 0}
  .cost-note{margin-top:28px}
}
/* Leistung · Bausteine als nummerierte Liste neben dem festen Kopf, wie die Säulen auf der Startseite */
.sp-r.bs9 li{grid-template-columns:64px minmax(0,1fr) auto;gap:4px 24px;padding:22px 0;align-items:start;border-top:1px solid var(--n200)}
.sp-r.bs9 li:first-child{border-top:0}
.sp-r.bs9 li:last-child{border-bottom:0}
.sp-r.bs9 .sp-n{font-size:28px;line-height:30px;padding-top:1px}
.sp-r.bs9 h3{font-size:20px;line-height:28px;margin-bottom:4px}
.sp-r.bs9 p{font-size:15px;line-height:23px;max-width:46ch}
.bs9-f{font-size:13px;line-height:20px;color:var(--n500);padding-top:5px;white-space:nowrap;justify-self:end}
@media (hover:hover){.sp-r.bs9 li{transition:background-color .22s,box-shadow .22s}.sp-r.bs9 li:hover{background:var(--b100);box-shadow:-20px 0 0 var(--b100),20px 0 0 var(--b100)}.sp-r.bs9 li:hover h3{color:var(--b700)}}
#dabei .ft2-three{margin-top:72px}
@media (max-width:960px){.sp-r.bs9 li{grid-template-columns:64px minmax(0,1fr)}.bs9-f{grid-column:2;justify-self:start;padding-top:0;white-space:normal}}
@media (max-width:640px){.sp-r.bs9 li{grid-template-columns:minmax(0,1fr);gap:2px;padding:18px 0}.sp-r.bs9 .sp-n{font-size:24px;line-height:26px}.bs9-f{grid-column:auto}#dabei .ft2-three{margin-top:40px}}
#dabei .sp{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px 64px}
/* Leistung · Bausteine: neun Zeilen ohne Kasten, ein Schalter 'Zeigen für', die passenden leuchten auf */
.wb-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:44px}
.wb-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 48px}
.wb-g li{position:relative;padding-left:28px;transition:opacity .5s ease}
.wb-g li::before{content:"";position:absolute;left:0;top:12px;width:14px;height:3px;background:var(--b);transform-origin:left;transition:transform .45s var(--e-out)}
.wb-g h3{font-weight:600;font-size:20px;line-height:28px;margin:0 0 4px;transition:color .35s}
.wb-g p{font-size:15px;line-height:23px;color:var(--n700);margin:0;max-width:40ch}
.wb-f{display:block;margin-top:8px;font-size:13px;line-height:18px;color:var(--n500);transition:opacity .35s}
.wb:not([data-role="alle"]) .wb-f{opacity:0}
.wb:not([data-role="alle"]) li.off{opacity:.26}
.wb:not([data-role="alle"]) li.off::before{transform:scaleX(0)}
.wb:not([data-role="alle"]) li.on h3{color:var(--k)}
@media (max-width:960px){.wb-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}}
@media (max-width:640px){.wb-g{grid-template-columns:minmax(0,1fr);gap:26px}.wb-bar{margin-bottom:32px}.wb .seg{max-width:100%}}
/* Leistung · die drei Spalten: nur noch kurze Zeilen */
.ft2-l.ft2-k li{padding:11px 0 11px 24px;font-size:15px;line-height:22px;color:var(--k)}
.ft2-l.ft2-k li::before{top:19px}
.ft2-l.ft2-k li:last-child{border-bottom:0}
/* Leistung · die drei Spalten klappen auch am Schreibtisch: Label und Zeile stehen, die Punkte auf Klick */
.ft2-more{display:inline-flex;align-items:center;gap:9px;margin-top:2px;padding:0;border:0;background:none;font:inherit;font-weight:500;font-size:14px;line-height:20px;color:var(--n700);cursor:pointer;transition:color .2s}
.ft2-more::before{content:"";width:12px;height:12px;flex:none;background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat}
.ft2-three>div.open .ft2-more::before{background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat}
@media (hover:hover){.ft2-more:hover{color:var(--k)}}
.ft2-three.js-fold>div:not(.open) .ft2-l{display:none}
.ft2-three.js-fold .ft2-l{border-top:0;margin-top:12px;overflow:hidden}
.ft2-three.js-fold .lab+.small{margin-bottom:10px}
@media (max-width:640px){.ft2-more{display:none}}
/* Startseite · Beleg: das Foto ist die Bühne, Zitat und Schwinger-Logo darauf, die Zahlen darunter */
.rfx-h{margin-bottom:28px}
.rfx{margin:0}
.rfx-stage{position:relative}
.rfx-ph{aspect-ratio:21/9;max-height:620px}
.rfx-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06)}
.rfx-ph img:first-child{position:relative;opacity:1}
/* drei Fotos, jedes acht Sekunden, weiche Überblendung, dazu der langsame Zoom */
.rfx.is-in .rfx-ph img{animation:rfxFade 24s linear infinite}
.rfx.is-in .rfx-ph .rfx-p2{animation-delay:8s}
.rfx.is-in .rfx-ph .rfx-p3{animation-delay:16s}
.rfx.is-in .rfx-ph img:first-child{animation-delay:-24s}
@keyframes rfxFade{0%{opacity:0;transform:scale(1.06)}6%{opacity:1}33.3%{opacity:1;transform:scale(1)}39.3%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.rfx.is-in .rfx-ph img{animation:none}.rfx-ph img:first-child{opacity:1;transform:none}}
.rfx-ov{position:absolute;left:0;right:0;top:0;bottom:0;display:grid;align-content:end;gap:22px;padding:40px 44px;color:#fff;background:linear-gradient(90deg,rgba(10,10,12,.78) 0%,rgba(10,10,12,.5) 45%,rgba(10,10,12,.1) 100%),linear-gradient(0deg,rgba(10,10,12,.55) 0%,rgba(10,10,12,0) 55%)}
.rfx-logo{position:absolute;top:36px;left:44px;height:60px;width:auto}
.rfx-q{margin:0;font-weight:600;font-size:40px;line-height:48px;letter-spacing:-.015em;color:#fff}
.rfx-l{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.rfx-l>span{display:block;transform:translateY(110%);transition:transform .9s var(--e-out)}
.rfx.is-in .rfx-l>span{transform:none}
.rfx.is-in .rfx-l:nth-child(2)>span{transition-delay:.12s}
.rfx.is-in .rfx-l:nth-child(3)>span{transition-delay:.24s}
.rfx-who{display:flex;align-items:center;gap:14px;font-size:14px;line-height:20px;color:rgba(255,255,255,.86);opacity:0;transform:translateY(8px);transition:opacity .7s ease .5s,transform .7s var(--e-out) .5s}
.rfx.is-in .rfx-who{opacity:1;transform:none}
.rfx-who img{width:56px;height:56px;object-fit:cover;flex:none}
.rfx-who b{display:block;font-size:16px;line-height:22px;color:#fff}
.rfx-who small{display:block;font-size:13px;line-height:18px;color:rgba(255,255,255,.7);margin-top:2px}
.rfx-cap{position:static;margin-top:10px}
.rfx+.sw-v{margin-top:56px}
@media (max-width:960px){.rfx-ph{aspect-ratio:4/3;max-height:none}.rfx-ov{padding:28px 24px;gap:18px}.rfx-q{font-size:30px;line-height:36px}.rfx-logo{top:22px;left:24px;height:46px}}
@media (max-width:640px){.rfx-ph{aspect-ratio:auto;height:520px}.rfx-ov{padding:22px 18px}.rfx-q{font-size:25px;line-height:31px}.rfx-who small{display:none}.rfx-logo{height:40px;top:18px;left:18px}}
@media (prefers-reduced-motion:reduce){.rfx-l>span{transform:none;transition:none}.rfx-who{opacity:1;transform:none;transition:none}}
/* Ein Rhythmus für alle Abschnitte: 120 px oben und unten; treffen zwei gleich helle Flächen aufeinander, zählt der Abstand nur einmal */
.sec{padding-block:120px}
.mq+.sec{padding-top:88px}
.sec:not(.nt):not(.dk):not(.pb)+.sec:not(.nt):not(.dk):not(.pb){padding-top:40px}
.sec.nt+.sec.nt{padding-top:40px}
@media (max-width:640px){.sec{padding-block:64px}.mq+.sec{padding-top:40px}}
.band{padding-block:120px}
@media (max-width:640px){.band{padding-block:72px}}
/* Band: die Pfeile gleiten unmerklich in ihre Richtung, 40 s hin, 40 s zurück */
@keyframes bandDrift{0%{transform:translate(-64px,48px)}100%{transform:translate(64px,-48px)}}
@media (prefers-reduced-motion:reduce){.band-flag::before{animation:none;transform:none}}
/* Startseite · Säulen: Belege mit Gewicht, keine Linien am Rand, die Nummer als Lesezeiger */
#saeulen .sp-r li:first-child{border-top:0;padding-top:8px}
#saeulen .sp-r li:last-child{border-bottom:0}
#saeulen .sp-r .bs-bel{color:var(--k);font-size:15px;line-height:22px}
#saeulen .sp-r .bs-bel b{font-weight:600}
#saeulen .sp-cursor .sp-n{color:var(--n300);transition:color .35s ease}
#saeulen .sp-cursor li.cur .sp-n{color:var(--b)}
/* Band · Nächster Schritt: ein Button für die Geschäftsführung, zwei leise Zeilen für die anderen Rollen */
.btn-w{background:var(--w);color:var(--b)}
.btn-w:hover{background:#E6EFFF}
.band-acts.nx2{gap:28px;align-content:end}
.nx2-l{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.nx2-l li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:16px;line-height:24px}
.nx2-l span{font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.75;min-width:150px}
.nx2-l a{display:inline-flex;align-items:center;gap:8px;color:var(--w);font-weight:600;text-decoration:none;box-shadow:inset 0 -1px 0 rgba(255,255,255,.55);transition:box-shadow .2s}
.nx2-l a:hover{box-shadow:inset 0 -2px 0 var(--w)}
.nx2-l a svg{transition:transform .35s var(--e-out)}
.nx2-l a:hover svg{transform:translateX(4px)}
.nx2 .band-note{margin-top:4px;padding-top:20px;border-top:1px solid rgba(255,255,255,.35)}
@media (max-width:640px){.nx2 .btn{width:100%;justify-content:center}.nx2-l span{min-width:0;flex-basis:100%}}
.band-txt .btn{justify-self:start}
.band-acts.nx2{align-content:end;gap:20px}

/* Referenzen hell (6 Nov): Schwinger, Ergebnis, Stellen und die weiteren Betriebe auf Weiß, die Stimme bleibt dunkel */
#schwinger .facts-mini dt{color:var(--n500)}
#schwinger .facts-mini div{border-color:var(--n200)}
#schwinger .facts-mini div:first-child{border-top:0}
#schwinger .facts-mini div:last-child{border-bottom:0}
.rf-sub{margin:96px 0 36px;max-width:720px}
.rf-sub .t-lead{margin:0}
#schwinger .sgal{margin-top:0}
#schwinger .chron2{margin-top:96px}
#schwinger .chron2 ol{border-top:0;padding-top:0}
#schwinger .chron2 figcaption{color:var(--n500)}
#schwinger .chron2 .legal{margin-top:28px}
#schwinger .chron2 .cy-big{background:var(--b100)}
#schwinger .chron2 .us{background:var(--b)}
#schwinger .chron2 .us b{color:var(--w)}
#schwinger .chron2 .us p{color:rgba(255,255,255,.86)}
.sec:not(.nt) .howto{background:var(--w);outline:1px solid var(--n200);outline-offset:-1px}
#stellen .jobs{border-top:0}
.rf-sum{margin-top:44px;font-size:17px;line-height:26px;color:var(--n700)}
.rf-sum b{font-weight:600;color:var(--k)}
.sec:not(.nt) .ref{background:var(--w);outline:1px solid var(--n200);color:var(--n700)}
.sec:not(.nt) .ref h3{color:var(--k)}
.sec:not(.nt) .ref>img{filter:brightness(0)}
.sec:not(.nt) .ref-f div{border-color:var(--n200)}
.sec:not(.nt) .ref-f div:first-child{border-top:0}
.sec:not(.nt) .ref-f div:last-child{border-bottom:0}
.sec:not(.nt) .ref-f dt{color:var(--n500)}
.sec:not(.nt) .ref-f dd{color:var(--k)}
.sec:not(.nt) .tm2-c{background:var(--w);outline:1px solid var(--n200)}
.sec:not(.nt) .tm2-c blockquote{color:var(--k)}
.sec:not(.nt) .tm2-c figcaption{border-top-color:var(--n200)}
.sec:not(.nt) .tm2-c b{color:var(--k)}
.sec:not(.nt) .tm2-c span{color:var(--n700)}
@media (max-width:640px){.rf-sub{margin:56px 0 24px}#schwinger .chron2{margin-top:56px}.rf-sum{margin-top:32px}}
/* Referenzen · Ergebnis (6 Nov): gleiche Kästchen in allen Zeilen, die Zahl bleibt oben, keine Linie über der ersten und unter der letzten Zeile, der Kasten rechts hängt nicht durch */
#ergebnis .cells i,#ergebnis .cells[data-kind="hire"] i{width:20px;height:20px}
#ergebnis .cells i.half{width:10px}
#ergebnis .cells .more-c{line-height:20px}
#ergebnis .pm>.fig{align-self:start}
#ergebnis .px-m{border-top:0}
#ergebnis .pm:first-child{padding-top:0}
#ergebnis .pm:last-child{border-bottom:0;padding-bottom:0}
#ergebnis .howto{align-self:start}
@media (min-width:961px){#ergebnis .howto{position:sticky;top:104px}}
@media (max-width:640px){#ergebnis .cells i,#ergebnis .cells[data-kind="hire"] i{width:16px;height:16px}#ergebnis .cells i.half{width:8px}#ergebnis .cells .more-c{line-height:16px}}
/* Bauzeitenplan (6 Nov): zwei Farben. Blau für uns, Weiß für Ihr Büro; Gemeinsam ruhiger gestreift, Nachlauf als dünne Linie */
.bzp{--bzp-off:#F4F4F5}
.bzp-r[data-k="b"] .bzp-b,.bzp-key i[data-k="b"]{background:var(--bzp-off)}
.bzp-r[data-k="g"] .bzp-b{background:repeating-linear-gradient(135deg,var(--b) 0 10px,#BFD3FF 10px 15px)}
.bzp-key i[data-k="g"]{background:repeating-linear-gradient(135deg,var(--b) 0 5px,#BFD3FF 5px 8px)}
.bzp-r[data-k="n"] .bzp-b,.bzp-key i[data-k="n"]{border:1px solid var(--b400);outline:0}
/* Leistung · Bausteine (6 Nov): Raster mit feinen Linien wie im Entwurf, Läuft-Marke und Für-Zeile je Karte, hell */
.wb-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--n200);border-left:1px solid var(--n200)}
.wb-grid li{display:grid;gap:12px;align-content:start;padding:26px 26px 28px;border-right:1px solid var(--n200);border-bottom:1px solid var(--n200);min-width:0}
.wb-ic{width:44px;height:44px;display:grid;place-items:center;background:var(--b100);color:var(--b600);margin-bottom:6px}
.wb-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wb-grid h3{margin:0;font-weight:600;font-size:20px;line-height:28px}
.wb-grid p{margin:0;font-size:15px;line-height:23px;color:var(--n700)}
.wb-grid .wb-f{display:block;margin-top:10px;font-size:13px;line-height:18px;color:var(--n500)}
@media (max-width:960px){.wb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.wb-grid{grid-template-columns:minmax(0,1fr)}.wb-grid li{padding:20px 18px 22px}}
/* Leistung · Mock-ups (6 Nov): eine Stufe größer und heller, damit die Karten auf Dunkel gut lesbar sind */
.sec:not(.nt) .ls-v .mini,.lh .mini{gap:14px;font-size:15px;line-height:22px;color:#E4E4E7}
.sec:not(.nt) .ls-v .mini b,.lh .mini b{color:#fff}
.sec:not(.nt) .ls-v .mini small,.sec:not(.nt) .ls-v .mini-t span,.sec:not(.nt) .ls-v .mini-f,.sec:not(.nt) .ls-v .mini-n,.lh .mini small,.lh .mini-t span,.lh .mini-f,.lh .mini-n{font-size:13px;line-height:18px;color:#B4B4BC}
.sec:not(.nt) .ls-v .mini-raw,.lh .mini-raw{padding:12px 14px;font-size:14px;line-height:21px;color:#E4E4E7}
.sec:not(.nt) .ls-v .mini-k,.lh .mini-k{font-size:14px;line-height:21px;grid-template-columns:64px minmax(0,1fr)}
.sec:not(.nt) .ls-v .mini-k span,.lh .mini-k span{font-size:12px;color:#9DBBFF}
.sec:not(.nt) .ls-v .mini-k.o span,.lh .mini-k.o span{color:#B4B4BC}
.sec:not(.nt) .ls-v .mini-b span,.lh .mini-b span{padding:7px 13px;font-size:13px}
.sec:not(.nt) .ls-v .mini-o li,.lh .mini-o li{padding:9px 12px;font-size:14px;line-height:20px}
.sec:not(.nt) .ls-v .mini-wa,.lh .mini-wa{font-size:14px;line-height:20px;padding:10px 12px}
.sec:not(.nt) .ls-v .mini-wa small,.lh .mini-wa small{font-size:12px}
.sec:not(.nt) .ls-v .mini-f span:first-child,.lh .mini-f span:first-child{padding:6px 12px;font-size:13px}
.sec:not(.nt) .ls-v .mini-l li,.lh .mini-l li{font-size:14px}
.sec:not(.nt) .ls-v .ls-tags span{font-size:13px;padding:5px 11px}
/* Leistung · Einordnung (6 Nov): keine Linie über der Tabelle, die BauPioniere-Spalte in unserem Blau */
#einordnung .ct-wrap{border-top:0}
.ct-static .bp,.ct-static thead .bp{background:var(--b);color:#fff;box-shadow:none;border-bottom-color:rgba(255,255,255,.28)}
.ct-static thead .bp{color:#fff}
/* Leistung · Pilot (6 Nov): Button unter der Überschrift, zwei Spalten */
#kosten .pilot{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;padding:48px 40px}
#kosten .pilot .btn{margin-top:24px}
@media (max-width:960px){#kosten .pilot{grid-template-columns:minmax(0,1fr);padding:32px 24px}}
/* Fürs Büro · Was drin ist (6 Nov): links Hellblau für das, was läuft; rechts eine Notiz für das, was noch kommt */
#drin .fw-c:first-child{background:var(--b100);outline:0}
#drin .fw-c:first-child .fw-k{color:var(--b600)}
#drin .fw-c:first-child .fl{color:var(--n900)}
#drin .fw-c:last-child{background:#F3EFD9;outline:0;color:#262626;transform:rotate(-.6deg);box-shadow:0 26px 40px -30px rgba(0,0,0,.4)}
#drin .fw-c:last-child .fw-k{color:#8A7E55}
#drin .fw-c:last-child h3{color:#262626}
#drin .fw-c:last-child .fl{color:#4A4535}
#drin .fw-c:last-child .fl li::before,#drin .fw-c:last-child .fl.no li::before{background:#8A7E55}
@media (max-width:760px){#drin .fw-c:last-child{transform:none}}
/* Fürs Büro · die Notiz (6 Nov): Linien wie im Notizbuch, ein Klebestreifen oben */
#drin .fw-c:last-child{position:relative;overflow:hidden;padding-top:40px;grid-template-rows:auto auto 1fr}
#drin .fw-c:last-child::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;background:rgba(0,0,0,.05)}
#drin .fw-c:last-child .fl{gap:0;margin:0 -32px -32px;padding:0 32px 32px;align-content:start;line-height:24px;background:repeating-linear-gradient(to bottom,transparent 0 23px,rgba(138,126,85,.34) 23px 24px)}
#drin .fw-c:last-child .fl li{line-height:24px;padding-top:0;padding-bottom:0}
@media (max-width:640px){#drin .fw-c:last-child .fl{margin:0 -20px -24px;padding:0 20px 24px}}
/* Fürs Büro · die Notiz, zweite Fassung (6 Nov): ein Blatt vom Block in Papierweiß, zwei Blätter dahinter, Linien in Grau */
#drin .fw-c:last-child{background:#FBF9F3;color:#262626;transform:none;overflow:visible;isolation:isolate;padding-top:32px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 24px 44px -28px rgba(0,0,0,.35)}
#drin .fw-c:last-child::before,#drin .fw-c:last-child::after{content:"";position:absolute;inset:0;height:auto;z-index:-1;background:#F2EFE6;box-shadow:0 1px 2px rgba(0,0,0,.05)}
#drin .fw-c:last-child::before{transform:rotate(-1.6deg) translateY(6px)}
#drin .fw-c:last-child::after{transform:rotate(1.1deg) translateY(12px);background:#ECE8DD}
#drin .fw-c:last-child .fw-k{color:var(--n500)}
#drin .fw-c:last-child h3{color:var(--k)}
#drin .fw-c:last-child .fl{color:var(--n700);background:repeating-linear-gradient(to bottom,transparent 0 23px,rgba(0,0,0,.1) 23px 24px)}
#drin .fw-c:last-child .fl li::before,#drin .fw-c:last-child .fl.no li::before{background:var(--n500)}
/* Fürs Büro · die Notiz, dritte Fassung (6 Nov): gelber Haftzettel, Linien weiter auseinander */
#drin .fw-c:last-child{background:#FFF1A6;color:#262626;transform:none;box-shadow:0 26px 40px -30px rgba(0,0,0,.45);isolation:auto;overflow:hidden;padding-top:40px;grid-template-rows:auto auto 1fr}
#drin .fw-c:last-child::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;inset:0 0 auto 0;transform:none;z-index:0;background:rgba(0,0,0,.06);box-shadow:none}
#drin .fw-c:last-child::after{content:none}
#drin .fw-c:last-child .fw-k{color:#8A7A2A}
#drin .fw-c:last-child .fl{color:#3D3A2A;line-height:40px;background:repeating-linear-gradient(to bottom,transparent 0 39px,rgba(0,0,0,.14) 39px 40px)}
#drin .fw-c:last-child .fl li{line-height:40px}
#drin .fw-c:last-child .fl li::before,#drin .fw-c:last-child .fl.no li::before{background:#8A7A2A;top:16px}
@media (max-width:760px){#drin .fw-c:last-child{transform:none}}
/* Fürs Büro · Entlastung (6 Nov): das Zitat trägt, rechts drei Zahlen mit Vorher und Nachher */
.pf{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 96px;align-items:start}
.pf-q{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px 28px;align-items:start;margin:0}
.pf-q img{grid-row:span 2;width:120px;height:120px;object-fit:cover}
.pf-q blockquote{margin:0;font-weight:600;font-size:30px;line-height:38px;letter-spacing:-.015em;text-wrap:balance;text-indent:-.4em;color:var(--k)}
.pf-q figcaption{font-size:14px;line-height:21px;color:var(--n700)}
.pf-q figcaption b{display:block;color:var(--k);font-weight:600;font-size:15px}
.pf-q figcaption a{display:inline-block;margin-left:10px;color:var(--b)}
.pf-n{list-style:none;margin:0;padding:0;display:grid}
.pf-n li{display:grid;gap:6px;align-content:start;padding:22px 0;border-top:1px solid rgba(0,0,0,.12)}
.pf-n li:first-child{border-top:0;padding-top:0}
.pf-n li:last-child{padding-bottom:0}
.pf-n .fig{font-size:52px;color:var(--k)}
.pf-n p:not(.fig){margin:0;font-size:16px;line-height:24px;color:var(--n900)}
.pf-src{font-size:13px;line-height:18px;color:var(--n500)}
@media (max-width:960px){.pf{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:640px){.pf-q{grid-template-columns:72px minmax(0,1fr);gap:6px 16px}.pf-q img{width:72px;height:72px}.pf-q blockquote{font-size:22px;line-height:30px}.pf-n .fig{font-size:44px}.pf-n li{padding:18px 0}}
/* Fürs Büro · Entlastung (6 Nov, zweite Fassung): Kopf und Zitat links, die Zahlen rechts ab oben */
.pf-wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 96px;align-items:start}
.pf-l{display:grid;gap:56px;align-content:start}
.pf-l .sh{margin-bottom:0}
.pf-wrap .pf-n{padding-top:6px}
@media (max-width:960px){.pf-wrap{grid-template-columns:minmax(0,1fr);gap:40px}.pf-l{gap:40px}}
/* Fürs Büro · Vorher und nachher (6 Nov): links wird durchgestrichen, rechts abgehakt; darunter die drei Stufen als Leiter */
.ba2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 64px}
.ba2 h3{font-weight:600;font-size:22px;line-height:28px;margin:0 0 16px}
.ba2-l{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:17px;line-height:26px;color:var(--k)}
.ba2-l li{position:relative;padding-left:32px}
.ba2-off li::before{content:"";position:absolute;left:0;top:11px;width:13px;height:10px;background:var(--n500);-webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat}
.ba2-off .ba2-t{display:inline;transition:color .45s ease}
.ba2.is-in .ba2-off .ba2-t{color:var(--n500)}
.ba2-off li::before{transition:opacity .25s ease}
.ba2.is-in .ba2-off li::before{opacity:0}
.ba2-x{position:absolute;left:-2px;top:4px;width:18px;height:18px;fill:none;stroke:var(--n500);stroke-width:2.2;stroke-linecap:round}
.ba2-x path{stroke-dasharray:18;stroke-dashoffset:18;transition:stroke-dashoffset .35s var(--e-out)}
.ba2.is-in .ba2-x path{stroke-dashoffset:0}
.ba2.is-in .ba2-off li:nth-child(1) .ba2-x path:nth-child(2){transition-delay:.55s}
.ba2.is-in .ba2-off li:nth-child(2) .ba2-x path:nth-child(2){transition-delay:1.15s}
.ba2.is-in .ba2-off li:nth-child(3) .ba2-x path:nth-child(2){transition-delay:1.75s}
.ba2.is-in .ba2-off li:nth-child(1) .ba2-t,.ba2.is-in .ba2-off li:nth-child(1)::before,.ba2.is-in .ba2-off li:nth-child(1) .ba2-x path:nth-child(1){transition-delay:.3s}
.ba2.is-in .ba2-off li:nth-child(2) .ba2-t,.ba2.is-in .ba2-off li:nth-child(2)::before,.ba2.is-in .ba2-off li:nth-child(2) .ba2-x path:nth-child(1){transition-delay:.9s}
.ba2.is-in .ba2-off li:nth-child(3) .ba2-t,.ba2.is-in .ba2-off li:nth-child(3)::before,.ba2.is-in .ba2-off li:nth-child(3) .ba2-x path:nth-child(1){transition-delay:1.5s}
.ba2-ck{position:absolute;left:0;top:4px;width:18px;height:18px;fill:none;stroke:var(--b);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s var(--e-out)}
.ba2.is-in .ba2-ck{stroke-dashoffset:0}
.ba2.is-in .ba2-on li:nth-child(1) .ba2-ck{transition-delay:2.5s}
.ba2.is-in .ba2-on li:nth-child(2) .ba2-ck{transition-delay:3s}
.ba2.is-in .ba2-on li:nth-child(3) .ba2-ck{transition-delay:3.5s}
.stp3-h{font-weight:600;font-size:22px;line-height:28px;margin:72px 0 28px}
.stp3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;position:relative}
.stp3::before,.stp3::after{content:"";position:absolute;left:22px;top:21px;height:2px;width:calc(100% - 44px);background:var(--n200);pointer-events:none}
.stp3::after{background:var(--b);transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--e-out) .2s}
.stp3.is-in::after{transform:scaleX(1)}
.stp3 li{position:relative;display:grid;gap:8px;align-content:start}
.stp3 .wb-ic{position:relative;z-index:1;margin:0;box-shadow:0 0 0 6px var(--w);transition:background .4s ease 1.8s,color .4s ease 1.8s}
.stp3-k{margin:10px 0 0;font-weight:600;font-size:17px;line-height:24px;color:var(--k)}
.stp3 p:not(.stp3-k){margin:0;font-size:15px;line-height:23px;color:var(--n700);max-width:36ch}
.stp3-you .wb-ic::after{content:"";position:absolute;inset:-2px;border:1.5px solid var(--b);opacity:0;pointer-events:none}
.stp3.is-in .stp3-you .wb-ic{background:var(--b);color:#fff}
.stp3.is-in .stp3-you .wb-ic::after{animation:bzpPulse 3.4s ease-out 2.3s infinite}
@media (max-width:760px){
  .ba2{grid-template-columns:minmax(0,1fr);gap:32px}
  .stp3{grid-template-columns:minmax(0,1fr);gap:28px}
  .stp3::before,.stp3::after{left:21px;top:22px;width:2px;height:calc(100% - 44px)}
  .stp3::after{transform:scaleY(0);transform-origin:top}
  .stp3.is-in::after{transform:scaleY(1)}
  .stp3 li{grid-template-columns:44px minmax(0,1fr);column-gap:18px}
  .stp3 .wb-ic{grid-row:span 2}
  .stp3-k{margin-top:10px}
  .stp3-h{margin:48px 0 20px}
}
@media (prefers-reduced-motion:reduce){.ba2-off .ba2-t,.ba2-ck,.ba2-x path,.ba2-off li::before,.stp3::after,.stp3 .wb-ic{transition:none}.ba2-off .ba2-t{color:var(--n500)}.ba2-off li::before{opacity:0}.ba2-x path,.ba2-ck{stroke-dashoffset:0}.stp3::after{transform:none}.stp3.is-in .stp3-you .wb-ic::after{animation:none}}
/* Fürs Büro · Ein Dienstag (6 Nov): der Tag füllt die Höhe des Fotos, mit Kaffee, Mittag und Feierabend als leise Stationen */
#tag .twocol{align-items:stretch}
#tag .day{display:flex;flex-direction:column;justify-content:space-between;height:100%;max-width:none;padding:6px 0}
#tag .day-r{padding:0}
.day-q time{font-weight:500;color:var(--n500)}
.day-q .dot{width:9px;height:9px;margin:9px 0 0 18px;border-radius:50%;background:var(--n500);-webkit-mask:none;mask:none}
.day-q b{font-weight:500;font-size:17px;line-height:26px;color:var(--n500)}
.day-q p{font-size:15px;line-height:22px;margin-top:2px}
.dk .day-q time,.dk .day-q b{color:var(--n500)}
.dk .day-q p{color:var(--n500)}
@media (max-width:960px){#tag .twocol{align-items:start}#tag .day{display:grid;height:auto;padding:0}#tag .day-r{padding:0 0 30px}#tag .day-r:last-child{padding-bottom:0}}
/* Fürs Büro · die leisen Stationen (6 Nov, zweite Fassung): größere Icons, drei kleine Szenen */
.day-q b{display:flex;align-items:center;gap:12px}
.day-ic{flex:none;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .35s ease,transform .55s cubic-bezier(.2,1.4,.4,1)}
.day-ic *{transform-box:fill-box}
.day-r.on .day-ic{opacity:1;transform:none}
/* Kaffee: der Dampf steigt in drei Fahnen, die Tasse wackelt beim Ankommen kurz */
.ic-coffee .st{opacity:0;transform-origin:50% 100%}
.day-r.on .ic-coffee .st{animation:daySteam 2.8s ease-in-out infinite}
.day-r.on .ic-coffee .s2{animation-delay:.9s}
.day-r.on .ic-coffee .s3{animation-delay:1.8s}
@keyframes daySteam{0%{transform:translateY(2.5px) scaleY(.7);opacity:0}30%{opacity:.95}70%{opacity:.6}100%{transform:translateY(-4.5px) scaleY(1.15) translateX(.6px);opacity:0}}
.ic-coffee .cup{transform-origin:50% 100%}
.day-r.on .ic-coffee .cup{animation:dayCup .9s ease-out .25s 1}
@keyframes dayCup{0%{transform:rotate(0)}30%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}100%{transform:rotate(0)}}
/* Mittag: Gabel und Messer rutschen an den Teller, dann stoßen sie sich alle paar Sekunden leise an */
.ic-lunch .fork,.ic-lunch .knife{transform-origin:50% 100%;transition:transform .6s cubic-bezier(.2,1.2,.4,1) .2s}
.ic-lunch .fork{transform:translateX(-5px) rotate(-12deg)}
.ic-lunch .knife{transform:translateX(5px) rotate(12deg)}
.ic-lunch .plate{opacity:0;transition:opacity .4s ease .1s}
.day-r.on .ic-lunch .plate{opacity:1}
.day-r.on .ic-lunch .fork{transform:none;animation:dayForkClink 4s ease-in-out 1.2s infinite}
.day-r.on .ic-lunch .knife{transform:none;animation:dayKnifeClink 4s ease-in-out 1.2s infinite}
@keyframes dayForkClink{0%,72%,100%{transform:rotate(0)}80%{transform:rotate(9deg) translateX(1px)}88%{transform:rotate(-3deg)}}
@keyframes dayKnifeClink{0%,72%,100%{transform:rotate(0)}80%{transform:rotate(-9deg) translateX(-1px)}88%{transform:rotate(3deg)}}
/* Feierabend: die Tür schwingt auf, der Pfeil geht raus */
.ic-door .leaf{transform-origin:0 50%;transform:scaleX(1);transition:transform .9s cubic-bezier(.3,0,.1,1) .3s}
.day-r.on .ic-door .leaf{transform:scaleX(.42)}
.ic-door .arr{opacity:0}
.day-r.on .ic-door .arr{animation:dayOut 3s ease-in-out 1.1s infinite}
@keyframes dayOut{0%{transform:translateX(-3px);opacity:0}20%{opacity:1}60%{transform:translateX(2px);opacity:1}85%{transform:translateX(5px);opacity:0}100%{transform:translateX(5px);opacity:0}}
@media (prefers-reduced-motion:reduce){.day-ic{opacity:1;transform:none;transition:none}.day-ic *{animation:none!important;transition:none!important}.ic-coffee .st{opacity:.8}.ic-lunch .fork,.ic-lunch .knife{transform:none}.ic-lunch .plate{opacity:1}.ic-door .leaf{transform:scaleX(.42)}.ic-door .arr{opacity:1}}
/* Leistung · die Klappen (6 Nov): als kleine Schaltfläche erkennbar, blau mit Rahmen, beim Überfahren hellblau */
.ft2-more{margin-top:6px;padding:7px 13px 7px 11px;outline:1px solid var(--b);outline-offset:-1px;color:var(--b);font-weight:600;transition:background .2s,color .2s,outline-color .2s}
.ft2-more::before{width:11px;height:11px}
@media (hover:hover){.ft2-more:hover{background:var(--b100);color:var(--b600);outline-color:var(--b600)}}
.ft2-more:focus-visible{outline:2px solid var(--b);outline-offset:2px}
.ft2-three>div.open .ft2-more{color:var(--n700);outline-color:var(--n300)}
/* Fürs Büro · Fürs Vorzimmer (6 Nov): die zwei Texte unter dem Kopf, nebeneinander */
#weiterleiten .sh{max-width:760px}
#weiterleiten .fwd-stack{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
@media (max-width:760px){#weiterleiten .fwd-stack{grid-template-columns:minmax(0,1fr);gap:16px}}
/* Leistung · Zeigen für (6 Nov): der Schalter über dem Raster blendet die Karten aus, die nicht zur Rolle gehören */
#dabei .wb-bar{margin-bottom:32px}
.wb-grid li.off{display:none}
/* Startseite · Band (6 Nov): Oliver rechts über den Rollenzeilen */
.band-acts .band-who{margin-bottom:8px}
.band-acts{align-content:end}
/* Dr. Daub (9 Nov): überall das freigestellte Foto mit Helm und Warnweste */
.rfx-who img{object-fit:cover;object-position:50% 0;background:var(--b100)}
.pf-q img{object-fit:cover;object-position:50% 0;background:var(--b100)}
.qs-p{aspect-ratio:auto;width:min(100%,280px);height:auto;object-fit:contain;object-position:50% 100%;filter:none}
.qs-ph{max-width:280px}
@media (max-width:960px){.qs-ph{max-width:220px}.qs-p{width:min(100%,220px)}}

/* 09.11.2026 · Förderhinweis BauPi (BPI-19) auf der Startseite: Text links, offizielles Logo rechts auf Weiß.
   Das Logo bleibt unverändert: kein Filter, kein Beschnitt, keine Deckkraft. */
.fund{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px 96px;align-items:center}
.fund .sh{margin-bottom:12px}
.fund-txt{display:grid;gap:20px;max-width:720px}
.fund-txt>p{color:var(--n700)}
.fund-txt>.fund-note{color:var(--k);font-weight:600}
.fund-logo{display:flex;justify-content:center}
.fund-logo img{display:block;width:100%;max-width:300px;height:auto}
@media (max-width:860px){
  .fund{grid-template-columns:1fr}
  .fund-logo{justify-content:flex-start}
  .fund-logo img{max-width:250px}
}

/* 09.11.2026 · Rechtstexte, von der bisherigen Website übernommen: lange Texte brauchen engere Abstände innerhalb eines Abschnitts */
.legal-b section{display:grid;gap:12px}
.legal-b h2{margin-bottom:4px;overflow-wrap:anywhere}
.legal-b h3,.legal-b h4{font-weight:600;font-size:18px;line-height:26px;margin-top:8px}
.legal-b ul,.legal-b ol{display:grid;gap:8px;padding-left:20px;color:var(--n700)}
.legal-b ul{list-style:disc}
.legal-b ol{list-style:decimal}
.legal-b a{color:var(--b600);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.legal-b strong{color:var(--k);font-weight:600}

/* 09.11.2026 · Seite "Im Aufbau": Ziel für alle Adressen, die in der Live-Version noch nicht freigegeben sind.
   Der Balken ist der schraffierte "läuft gerade"-Balken aus dem Bauzeitenplan. */
.wip{min-height:min(78vh,760px);display:grid;align-items:center}
.wip .phero-t{display:grid;gap:22px;justify-items:start}
.wip-bar{width:min(100%,520px);height:12px;margin:10px 0 14px;background:rgba(255,255,255,.1);overflow:hidden}
.wip-bar i{display:block;height:100%;width:64%;background:repeating-linear-gradient(135deg,var(--b) 0 10px,#BFD3FF 10px 15px);animation:wipGrow 1.8s cubic-bezier(.2,.7,.2,1) both,wipMove .9s linear infinite}
@keyframes wipGrow{from{width:0}to{width:64%}}
@keyframes wipMove{to{background-position:21.21px 0}}
@media (prefers-reduced-motion:reduce){.wip-bar i{animation:none}}

/* 09.11.2026 · Kopfzeile am Desktop: mehr Luft über und unter dem Inhalt (72 → 88 px).
   Solange das Menü nur wenige Punkte hat (Live-Version zum Start), stehen sie weiter auseinander und weiter weg vom Logo.
   Mit vier oder mehr Punkten gilt wieder der engere Abstand, sonst passt das Menü bei 1200 px nicht mehr in eine Zeile. */
@media (min-width:1101px){
  :root{--hd:88px}
  .nav:not(:has(a:nth-child(4))){gap:44px;margin-left:24px}
}

/* 09.11.2026 · Kopfzeile ohne Menüpunkte (Live-Version, solange nur die Startseite live ist):
   Es gibt nichts aufzuklappen, also kein Burger. Der Button bleibt auf Tablets sichtbar; bis 760 px trägt die Leiste unten den Button. */
.hd-in:not(:has(.nav)) .burger{display:none}
@media (min-width:761px) and (max-width:1100px){
  .hd-in:not(:has(.nav)) .hd-cta{display:inline-flex}
}


/* =====================================================================
   09.11.2026 · KOPF V4 der Startseite (aus dem Entwurf "Startseite · Redesign V4")
   Schematische Karte, 50-km-Umkreis, drei Beispiel-Bewerbungen im Wechsel. Alle Klassen beginnen mit h4-.
   Ablauf: hero4() in app.js setzt h4-anim (alles wartet) und danach h4-go (alles baut sich auf).
   ===================================================================== */
.h4-hero{--night:#0B0C0E;--ink:#111111;--line:#E2E4E8;--mute2:#6A6F77;--b6:#0046D9;--b7:#0033A0;--b4:#3D7DFF;--b1:#E8EFFF;--ease:cubic-bezier(.2,.7,.1,1);--eio:cubic-bezier(.7,0,.2,1);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.h4-hero a{text-decoration:none}
.h4-hero img{display:block;max-width:100%}
.h4-eb{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.h4-eb svg{width:15px;height:11px;fill:var(--b);flex:none}
.h4-btn{position:relative;display:inline-flex;align-items:center;gap:14px;height:58px;padding:0 26px;background:var(--b);color:#fff;font-size:17px;font-weight:600;letter-spacing:-.005em;overflow:hidden;isolation:isolate;white-space:nowrap}
.h4-btn::before{content:"";position:absolute;inset:0;background:var(--b7);transform:translateX(-101%);transition:transform .5s var(--eio);z-index:-1}
.h4-btn:hover::before{transform:none}
.h4-btn:hover{color:#fff}
.h4-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;flex:none;transition:transform .35s var(--ease)}
.h4-btn:hover .h4-ico{transform:translateX(4px)}
.h4-btn-ghost{background:rgba(11,12,14,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42)}
.h4-btn-ghost::before{background:#fff}
.h4-btn-ghost:hover{color:var(--ink)}

/* ---------- HERO ---------- */
.h4-hero{position:relative;background:var(--night);color:#fff;min-height:900px;overflow:hidden}
.h4-hero-vis{position:absolute;inset:0;pointer-events:none}
.h4-hero-map{position:absolute;width:1040px;height:1040px;left:calc(50% + 140px - 503px);top:-99px}
.h4-hero-map svg{width:100%;height:100%;display:block;overflow:visible}
.h4-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--night) 0%,var(--night) 33%,rgba(11,12,14,.9) 43%,rgba(11,12,14,0) 63%),linear-gradient(0deg,var(--night) 0%,rgba(11,12,14,0) 20%),linear-gradient(180deg,var(--night) 0%,rgba(11,12,14,0) 16%)}
.h4-hero-in{position:relative;z-index:2;padding-top:calc(var(--hd) + 124px);padding-bottom:120px}
.h4-hero-copy{max-width:690px}
.h4-hero .h4-eb{color:rgba(255,255,255,.82)}
.h4-h1{font-size:94px;line-height:.96;font-weight:700;letter-spacing:-.038em;margin-top:30px}
.h4-ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.h4-ln>span{display:block}
.h4-ln-b{color:var(--b4)}
.h4-lead{font-size:21px;line-height:1.52;color:rgba(255,255,255,.76);max-width:545px;margin-top:34px}
.h4-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:42px}
.h4-person{display:flex;align-items:center;gap:14px;margin-top:38px;font-size:15px;line-height:1.45}
.h4-person img{width:48px;height:48px;object-fit:cover;filter:grayscale(1) contrast(1.05);box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.h4-person b{display:block;font-weight:600;color:#fff}
.h4-person span{color:rgba(255,255,255,.62)}
.h4-person a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4);transition:text-decoration-color .3s}
.h4-person a:hover{text-decoration-color:var(--b4)}
.h4-hero-foot{position:absolute;right:max(32px,calc(50% - 600px));bottom:26px;z-index:2;display:flex;align-items:center;gap:22px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.38);font-weight:600}
.h4-hl-n{display:flex;flex-direction:column;align-items:center;gap:2px;color:rgba(255,255,255,.55);font-size:10px}
.h4-hl-n svg{width:11px;height:20px;fill:rgba(255,255,255,.55)}
.h4-hl-sb{position:relative;display:grid;grid-template-columns:72px 72px;height:24px}
.h4-hl-sb i{height:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.h4-hl-sb i:first-child{background:rgba(255,255,255,.6)}
.h4-hl-sb em{position:absolute;top:10px;font-style:normal;transform:translateX(-50%);letter-spacing:.04em;white-space:nowrap}
.h4-hl-sb em:nth-of-type(1){left:0}.h4-hl-sb em:nth-of-type(2){left:72px}.h4-hl-sb em:nth-of-type(3){left:144px;transform:none;margin-left:-6px}
.h4-hl-sep{width:1px;height:28px;background:rgba(255,255,255,.18)}

/* map */
.h4-map text{font-family:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif}
.h4-m-grat line{stroke:rgba(255,255,255,.055);stroke-width:1}
.h4-m-coord text{fill:rgba(255,255,255,.3);font-size:10px;letter-spacing:.06em}
.h4-rd{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1.1}
.h4-rd-a{stroke:rgba(255,255,255,.15);stroke-width:1.6}
.h4-riv{fill:none;stroke:#2B62E8;stroke-opacity:.5;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.h4-riv-major{stroke:#3D7DFF;stroke-opacity:.72;stroke-width:2.4}
.h4-riv-donau{stroke-width:3.2}
.h4-ring-k{fill:none;stroke:rgba(61,125,255,.24);stroke-width:1;stroke-dasharray:2 6}
.h4-ring-lab{fill:rgba(110,155,255,.6);font-size:10px;font-weight:600}
.h4-ring-fill{fill:rgba(0,85,255,.07)}
.h4-ring-main{fill:none;stroke:var(--b);stroke-width:2;transform-box:view-box;transform-origin:483.46px 547.07px;transform:rotate(-90deg)}
.h4-arm{transform-box:view-box;transform-origin:483.46px 547.07px;opacity:0}
.h4-arm line{stroke:var(--b4);stroke-width:1.2}
.h4-arm rect{fill:var(--b4)}
.h4-dim line{stroke:rgba(255,255,255,.55);stroke-width:1}
.h4-dim text{fill:#fff;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-anchor:middle}
.h4-spoke{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1}
.h4-spoke-p{fill:none;stroke:#7FA7FF;stroke-width:1.6;stroke-dasharray:.07 .93;stroke-dashoffset:1;opacity:0}
.h4-cl{fill:none;stroke:#fff;stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--ease)}
.h4-cl-dot{fill:#fff;opacity:0;transition:opacity .3s}
.h4-cl-pulse{fill:none;stroke:#fff;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.h4-cand-line g{opacity:0;transition:opacity .3s}
.h4-cl-tag{fill:var(--night);stroke:rgba(255,255,255,.45);stroke-width:1}
.h4-cl-km{fill:#fff;font-size:11.5px;font-weight:600;text-anchor:middle}
.h4-cand-line.h4-is-on .h4-cl{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease)}
.h4-cand-line.h4-is-on .h4-cl-dot{opacity:1}
.h4-cand-line.h4-is-on g{opacity:1;transition:opacity .4s .7s}
.h4-cand-line.h4-is-on .h4-cl-pulse{animation:h4SqPulse 2s var(--ease) .2s infinite}
.h4-town rect{fill:rgba(255,255,255,.4)}
.h4-town.h4-in rect{fill:rgba(255,255,255,.78)}
.h4-town text{fill:rgba(255,255,255,.4);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:500}
.h4-town.h4-in text{fill:rgba(255,255,255,.58)}
.h4-town.h4-t1 text{font-size:12.5px;fill:rgba(255,255,255,.55);font-weight:600}
.h4-ta-end{text-anchor:end}
.h4-home-sq{fill:var(--b)}
.h4-home-in{fill:#fff}
.h4-home-pulse{fill:none;stroke:var(--b4);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:h4SqPulse 2.6s var(--ease) infinite}
.h4-home-tag{fill:var(--b)}
.h4-home-t{fill:#fff;font-size:13px;font-weight:600;text-anchor:middle}
.h4-home-lead{stroke:var(--b);stroke-width:1.5}
.h4-home-name{fill:#fff;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-anchor:middle}
.h4-sb-a{fill:rgba(255,255,255,.7)}.h4-sb-b{fill:none}.h4-sb-o{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1}
.h4-m-scale text{fill:rgba(255,255,255,.45);font-size:10px;font-weight:600}
.h4-m-north path{fill:rgba(255,255,255,.55)}
.h4-m-north text{fill:rgba(255,255,255,.55);font-size:11px;font-weight:700;text-anchor:middle}
@keyframes h4SqPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
@keyframes h4SpokeFlow{0%{stroke-dashoffset:1;opacity:0}10%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:.07;opacity:0}}
.h4-spoke-p{animation:h4SpokeFlow 3.4s linear infinite}
.h4-m-spokes path.h4-spoke-p:nth-of-type(2){animation-delay:.3s}

/* candidate card */
.h4-cand-wrap{position:absolute;left:min(calc(50% + 318px),calc(100% - 388px));top:432px;width:364px;pointer-events:auto;z-index:3}
.h4-cand-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:12px;font-weight:600}
.h4-cand-dots{display:flex;gap:6px}
.h4-cand-dots i{width:18px;height:3px;background:rgba(255,255,255,.22);transition:background .4s}
.h4-cand-dots i.h4-is-on{background:var(--b4)}
.h4-cands{position:relative;height:302px}
.h4-cand{position:absolute;inset:0;background:#fff;color:var(--ink);padding:22px 22px 18px;box-shadow:0 40px 80px -24px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.04);opacity:0;transform:translateY(16px);transition:opacity .45s,transform .7s var(--ease);font-size:14px;line-height:1.4}
.h4-cand.h4-is-on{opacity:1;transform:none}
.h4-cand::before,.h4-cand::after{content:"";position:absolute;width:14px;height:14px;border:solid var(--b4);pointer-events:none}
.h4-cand::before{left:-7px;top:-7px;border-width:2px 0 0 2px}
.h4-cand::after{right:-7px;bottom:-7px;border-width:0 2px 2px 0}
.h4-c-head{display:grid;grid-template-columns:46px 1fr auto;gap:13px;align-items:center}
.h4-c-av{width:46px;height:46px;display:grid;place-items:center;background:var(--b1);color:var(--b7);font-weight:700;font-size:15px;letter-spacing:.02em}
.h4-c-who b{display:block;font-size:18px;font-weight:700;letter-spacing:-.01em}
.h4-c-who span{display:block;font-size:13px;color:var(--mute2);margin-top:2px}
.h4-c-score{text-align:right;line-height:1}
.h4-c-score .h4-num{display:block;font-size:42px;font-weight:700;letter-spacing:-.04em;color:var(--b);font-variant-numeric:tabular-nums}
.h4-c-score small{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute2);margin-top:6px;font-weight:600}
.h4-meters{margin-top:18px;display:grid;gap:9px}
.h4-mt{display:grid;grid-template-columns:118px 1fr 40px;gap:10px;align-items:center;font-size:13px;color:#2A2D33}
.h4-mt b{font-weight:600;font-size:12px;text-align:right;color:var(--mute2);font-variant-numeric:tabular-nums}
.h4-segs{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px;height:7px}
.h4-segs i{background:#E3E7EE;transition:background .01s}
.h4-c-q{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.h4-c-q small{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute2);font-weight:600}
.h4-c-q p{margin-top:6px;font-size:14px;font-weight:500}
.h4-c-ok{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--b);font-weight:600;opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .5s var(--ease)}
.h4-cand.h4-is-on .h4-c-ok{opacity:1;transform:none;transition-delay:1.5s}
.h4-c-ok svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}

/* hero entrance */
.h4-hero.h4-anim .h4-ln>span{transform:translateY(105%)}
.h4-hero.h4-anim .h4-eb,.h4-hero.h4-anim .h4-lead,.h4-hero.h4-anim .h4-ctas,.h4-hero.h4-anim .h4-person{opacity:0;transform:translateY(16px)}
.h4-hero.h4-anim.h4-go .h4-ln>span{transform:none;transition:transform 1.1s var(--ease) .2s}
.h4-hero.h4-anim.h4-go .h4-ln:nth-child(2)>span{transition-delay:.32s}
.h4-hero.h4-anim.h4-go .h4-eb,.h4-hero.h4-anim.h4-go .h4-lead,.h4-hero.h4-anim.h4-go .h4-ctas,.h4-hero.h4-anim.h4-go .h4-person{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1s var(--ease)}
.h4-hero.h4-anim.h4-go .h4-eb{transition-delay:.05s}.h4-hero.h4-anim.h4-go .h4-lead{transition-delay:.55s}.h4-hero.h4-anim.h4-go .h4-ctas{transition-delay:.7s}.h4-hero.h4-anim.h4-go .h4-person{transition-delay:.85s}
.h4-hero.h4-anim .h4-m-grat,.h4-hero.h4-anim .h4-m-coord,.h4-hero.h4-anim .h4-m-roads,.h4-hero.h4-anim .h4-m-rings,.h4-hero.h4-anim .h4-ring-fill,.h4-hero.h4-anim .h4-dim,.h4-hero.h4-anim .h4-m-scale,.h4-hero.h4-anim .h4-m-north,.h4-hero.h4-anim .h4-spoke,.h4-hero.h4-anim .h4-town,.h4-hero.h4-anim .h4-home,.h4-hero.h4-anim .h4-cand-meta,.h4-hero.h4-anim .h4-hero-foot{opacity:0}
.h4-hero.h4-anim .h4-riv{stroke-dasharray:1;stroke-dashoffset:1}
.h4-hero.h4-anim .h4-ring-main{stroke-dasharray:1;stroke-dashoffset:1}
.h4-hero.h4-anim .h4-spoke{stroke-dasharray:1;stroke-dashoffset:1}
.h4-hero.h4-anim .h4-spoke-p{animation-play-state:paused}
.h4-hero.h4-anim.h4-go .h4-m-grat{opacity:1;transition:opacity 1.6s ease .1s}
.h4-hero.h4-anim.h4-go .h4-m-coord{opacity:1;transition:opacity 1s ease 1s}
.h4-hero.h4-anim.h4-go .h4-riv{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.45,0,.2,1) .3s}
.h4-hero.h4-anim.h4-go .h4-m-roads{opacity:1;transition:opacity 1.4s ease .7s}
.h4-hero.h4-anim.h4-go .h4-town{opacity:1;transition:opacity .5s ease 1.1s}
.h4-hero.h4-anim.h4-go .h4-home{opacity:1;transition:opacity .4s ease 1.5s}
.h4-hero.h4-anim.h4-go .h4-m-rings{opacity:1;transition:opacity 1s ease 2.4s}
.h4-hero.h4-anim.h4-go .h4-ring-main{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.6,0,.3,1) 1.7s}
.h4-hero.h4-anim.h4-go .h4-arm{animation:h4ArmSweep 1.5s cubic-bezier(.6,0,.3,1) 1.7s both}
.h4-hero.h4-anim.h4-go .h4-ring-fill{opacity:1;transition:opacity 1s ease 2.9s}
.h4-hero.h4-anim.h4-go .h4-dim{opacity:1;transition:opacity .8s ease 3s}
.h4-hero.h4-anim.h4-go .h4-spoke{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease) 2.7s,opacity .2s 2.7s}
.h4-hero.h4-anim.h4-go .h4-spoke-p{animation-play-state:running}
.h4-hero.h4-anim.h4-go .h4-hero-foot{opacity:1;transition:opacity 1s ease 2.2s}
.h4-hero.h4-anim.h4-go .h4-cand-meta{opacity:1;transition:opacity .6s ease 3s}
@keyframes h4ArmSweep{0%{transform:rotate(0);opacity:1}88%{opacity:1}100%{transform:rotate(360deg);opacity:0}}


.h4-cand.h4-is-on .h4-mt:nth-child(1) .h4-segs i.h4-f:nth-child(1){background:var(--b);transition-delay:0.450s}
.h4-cand.h4-is-on .h4-mt:nth-child(1) .h4-segs i.h4-f:nth-child(2){background:var(--b);transition-delay:0.495s}
.h4-cand.h4-is-on .h4-mt:nth-child(1) .h4-segs i.h4-f:nth-child(3){background:var(--b);transition-delay:0.540s}
.h4-cand.h4-is-on .h4-mt:nth-child(1) .h4-segs i.h4-f:nth-child(4){background:var(--b);transition-delay:0.585s}
.h4-cand.h4-is-on .h4-mt:nth-child(1) .h4-segs i.h4-f:nth-child(5){background:var(--b);transition-delay:0.630s}
.h4-cand.h4-is-on .h4-mt:nth-child(1) .h4-segs i.h4-f:nth-child(6){background:var(--b);transition-delay:0.675s}
.h4-cand.h4-is-on .h4-mt:nth-child(1) .h4-segs i.h4-f:nth-child(7){background:var(--b);transition-delay:0.720s}
.h4-cand.h4-is-on .h4-mt:nth-child(1) .h4-segs i.h4-f:nth-child(8){background:var(--b);transition-delay:0.765s}
.h4-cand.h4-is-on .h4-mt:nth-child(1) .h4-segs i.h4-f:nth-child(9){background:var(--b);transition-delay:0.810s}
.h4-cand.h4-is-on .h4-mt:nth-child(1) .h4-segs i.h4-f:nth-child(10){background:var(--b);transition-delay:0.855s}
.h4-cand.h4-is-on .h4-mt:nth-child(2) .h4-segs i.h4-f:nth-child(1){background:var(--b);transition-delay:0.630s}
.h4-cand.h4-is-on .h4-mt:nth-child(2) .h4-segs i.h4-f:nth-child(2){background:var(--b);transition-delay:0.675s}
.h4-cand.h4-is-on .h4-mt:nth-child(2) .h4-segs i.h4-f:nth-child(3){background:var(--b);transition-delay:0.720s}
.h4-cand.h4-is-on .h4-mt:nth-child(2) .h4-segs i.h4-f:nth-child(4){background:var(--b);transition-delay:0.765s}
.h4-cand.h4-is-on .h4-mt:nth-child(2) .h4-segs i.h4-f:nth-child(5){background:var(--b);transition-delay:0.810s}
.h4-cand.h4-is-on .h4-mt:nth-child(2) .h4-segs i.h4-f:nth-child(6){background:var(--b);transition-delay:0.855s}
.h4-cand.h4-is-on .h4-mt:nth-child(2) .h4-segs i.h4-f:nth-child(7){background:var(--b);transition-delay:0.900s}
.h4-cand.h4-is-on .h4-mt:nth-child(2) .h4-segs i.h4-f:nth-child(8){background:var(--b);transition-delay:0.945s}
.h4-cand.h4-is-on .h4-mt:nth-child(2) .h4-segs i.h4-f:nth-child(9){background:var(--b);transition-delay:0.990s}
.h4-cand.h4-is-on .h4-mt:nth-child(2) .h4-segs i.h4-f:nth-child(10){background:var(--b);transition-delay:1.035s}
.h4-cand.h4-is-on .h4-mt:nth-child(3) .h4-segs i.h4-f:nth-child(1){background:var(--b);transition-delay:0.810s}
.h4-cand.h4-is-on .h4-mt:nth-child(3) .h4-segs i.h4-f:nth-child(2){background:var(--b);transition-delay:0.855s}
.h4-cand.h4-is-on .h4-mt:nth-child(3) .h4-segs i.h4-f:nth-child(3){background:var(--b);transition-delay:0.900s}
.h4-cand.h4-is-on .h4-mt:nth-child(3) .h4-segs i.h4-f:nth-child(4){background:var(--b);transition-delay:0.945s}
.h4-cand.h4-is-on .h4-mt:nth-child(3) .h4-segs i.h4-f:nth-child(5){background:var(--b);transition-delay:0.990s}
.h4-cand.h4-is-on .h4-mt:nth-child(3) .h4-segs i.h4-f:nth-child(6){background:var(--b);transition-delay:1.035s}
.h4-cand.h4-is-on .h4-mt:nth-child(3) .h4-segs i.h4-f:nth-child(7){background:var(--b);transition-delay:1.080s}
.h4-cand.h4-is-on .h4-mt:nth-child(3) .h4-segs i.h4-f:nth-child(8){background:var(--b);transition-delay:1.125s}
.h4-cand.h4-is-on .h4-mt:nth-child(3) .h4-segs i.h4-f:nth-child(9){background:var(--b);transition-delay:1.170s}
.h4-cand.h4-is-on .h4-mt:nth-child(3) .h4-segs i.h4-f:nth-child(10){background:var(--b);transition-delay:1.215s}

/* Breite Bildschirme: Die Karte ist ein Quadrat von 1040 px und hörte rechts mit einer harten Kante auf.
   Jetzt läuft ihr Gitternetz über die ganze Breite weiter (als Fläche hinter der Karte, passgenau zu den Linien der Zeichnung),
   und Flüsse, Straßen und Orte blenden zum rechten Kartenrand hin weich aus. Maßstab und Ring bleiben wie im Entwurf. */
.h4-hero-map{--m:1040px}
.h4-hero-map::before{content:"";position:absolute;top:0;bottom:0;left:-100vw;right:-100vw;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px) calc(100vw + .0254 * var(--m)) 0 / calc(.12695 * var(--m)) 100% repeat-x,
    linear-gradient(180deg,rgba(255,255,255,.055) 0 1px,transparent 1px) 0 0 / 100% calc(.19183 * var(--m)) repeat-y}
.h4-m-grat{display:none}
.h4-hero-map svg{position:relative;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent 100%)}
.h4-hero.h4-anim .h4-hero-map::before{opacity:0}
.h4-hero.h4-anim.h4-go .h4-hero-map::before{opacity:1;transition:opacity 1.6s ease .1s}

/* schmaler: Menü ist dann schon der Burger, die Karte rückt nach rechts */
@media (max-width:1180px){
  .h4-h1{font-size:80px}
  .h4-hero-map{left:calc(50% + 180px - 503px)}
  .h4-cand-wrap{left:auto;right:24px}
}
/* Tablet und Handy (bis 1100 px): erst der Text, darunter Karte und Bewerbung.
   Der Entwurf kennt nur 1440 und 390 px; dazwischen läge die Karte der Bewerbung sonst über dem Text. */
@media (max-width:1100px){
  .h4-hero{min-height:0;display:flex;flex-direction:column}
  .h4-hero-in{order:1;padding-top:calc(var(--hd) + 64px);padding-bottom:0}
  .h4-hero-vis{order:2;position:relative;inset:auto;height:670px;margin-top:20px;overflow:hidden}
  .h4-hero-foot{order:3;position:relative;right:auto;bottom:auto;padding:0 20px 30px;gap:16px;flex-wrap:wrap;justify-content:center}
  .h4-hero-map{--m:960px;width:960px;height:960px;left:calc(50% - 464px);top:-313px}
  .h4-hero-map svg{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
  .h4-hero-shade{background:linear-gradient(180deg,var(--night) 0%,rgba(11,12,14,0) 18%),linear-gradient(0deg,var(--night) 0%,rgba(11,12,14,0) 30%)}
  .h4-cand-wrap{left:20px;right:20px;width:auto;max-width:400px;margin-inline:auto;top:292px}
  .h4-cands{height:322px}
}
/* Handy: kleinere Schrift, Buttons untereinander */
@media (max-width:760px){
  .h4-hero-in{padding-top:calc(var(--hd) + 46px)}
  .h4-hero-foot{justify-content:flex-start}
  .h4-h1{font-size:54px;letter-spacing:-.035em;margin-top:24px}
  .h4-lead{font-size:17.5px;margin-top:24px}
  .h4-ctas{flex-direction:column;margin-top:30px}
  .h4-ctas .h4-btn{width:100%;justify-content:space-between;height:56px;padding:0 20px;font-size:16px}
  .h4-person{margin-top:28px}
  .h4-hero-map{--m:780px;width:780px;height:780px;left:calc(50% - 377px);top:-215px}
  .h4-hl-sb{grid-template-columns:54px 54px}
  .h4-hl-sb em:nth-of-type(2){left:54px}
  .h4-hl-sb em:nth-of-type(3){left:108px}
  .h4-hl-sep{display:none}
}
@media (prefers-reduced-motion:reduce){
  .h4-hero *,.h4-hero *::before,.h4-hero *::after{animation:none!important;transition:none!important}
}

/* =====================================================================
   09.11.2026 · STARTSEITE: Abschnitte lesbar ordnen, heller Grund
   1) Jeder Abschnitt beginnt mit einer Kopfzeile: Fähnchen und Name des Abschnitts.
      Haarlinie und Zählung "03 / 08" aus dem Entwurf V4 sind seit dem 09.11.2026 weg (Wunsch des Nutzers);
      die Kopfzeile allein trennt die Abschnitte, deshalb brauchen sie keine eigenen Hintergrundfarben mehr.
   2) Farbige Flächen gibt es nur noch drei: dunkler Kopf, blaues Band, dunkle Fußzeile. Alles dazwischen ist weiß.
   3) Blaues Band: der große Pfeil aus dem Grafiksystem (Branding 6.2, "on blue") statt des kleinen Pfeilmusters.
      Regel aus dem Branding: Muster oder großer Pfeil, nie beides auf einer Fläche.
   ===================================================================== */
.chap{--ms:1;grid-column:1/-1;display:flex;align-items:center;gap:20px;margin:0 0 44px;font-weight:500;font-size:13px;line-height:16px;letter-spacing:.08em;text-transform:uppercase}
.chap-l{display:flex;align-items:center;gap:10px;flex:none}
.chap-l::before{content:"";flex:none;width:12px;height:9px;background:var(--b);-webkit-mask:var(--flagmask) center/contain no-repeat;mask:var(--flagmask) center/contain no-repeat;transform-origin:0 100%;transform:scale(var(--ms))}
[data-surface="blue"] .chap-l::before{background:#fff}
/* in zweispaltigen Abschnitten liegt die Kopfzeile über beiden Spalten; der Zeilenabstand des Rasters ersetzt ihren Außenabstand */
.sp>.chap,.faq>.chap,.band-in>.chap{margin-bottom:0}
.faq:has(>.chap){row-gap:44px}
.sp:has(>.chap){row-gap:44px}
.band-in:has(>.chap){row-gap:44px}
@media (max-width:760px){
  .chap{gap:14px;margin-bottom:32px}
  .faq:has(>.chap),.sp:has(>.chap),.band-in:has(>.chap){row-gap:32px}
}
/* "Gefördert und vernetzt" auf Weiß (nur Startseite; auf Über uns und KI bleibt der graue Grund) */
.tb.tb-w{background:var(--w)}
/* großer Pfeil im blauen Band: so hoch wie die Fläche (der Pfeil selbst ragt ein Viertel darüber hinaus), rechts angeschnitten */
.band-arrow{position:relative;isolation:isolate;overflow:hidden}
.band-arrow::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url(/img/arrow-large-on-blue.svg) right center/auto 100% no-repeat}
.band-arrow>*{position:relative;z-index:1}

/* =====================================================================
   09.11.2026 · BÜRO-GEWERKE: vier Kästen, einer je Gewerk (löst das "Haus" mit Detailspalte ab)
   Ein Raster aus Haarlinien wie bei den Bausteinen weiter unten: vier Spalten, darunter 2 x 2, am Handy eine Spalte.
   Der Balken an der Oberkante zeigt, wie viel vom Gewerk heute läuft: blau = läuft, schraffiert = im Aufbau.
   Dieselbe Sprache in der Liste: blauer Strich = läuft, grauer Strich mit dem Wort "im Aufbau" = kommt.
   Oben in jedem Kasten: ein Zeichen wie bei den Bausteinen (.wb-ic), darunter der Stand als kleine Zeile direkt über dem Namen.
   Status, Name, Satz und Liste der vier Kästen stehen auf gemeinsamen Zeilen (subgrid), damit alles fluchtet.
   Bewegung: der erste Kasten steht. Die drei anderen warten blass und werden nacheinander eingeschaltet, sobald sie gut im Bild sind:
   der Balken füllt sich, das Zeichen zeichnet sich, der Text wird kräftig. Die Schraffur wandert langsam.
   ===================================================================== */
#gewerke .t-lead{text-wrap:balance}
.gw4{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid var(--n200);border-bottom:1px solid var(--n200)}
.gw4-c{--gw-p:1;position:relative;display:grid;align-content:start;min-width:0;padding:38px 28px 36px;border-right:1px solid var(--n200)}
.gw4-c[data-st="teil"]{--gw-p:.6667}
.gw4-c[data-st="aufbau"]{--gw-p:.3333}
@supports (grid-template-rows:subgrid){
  .gw4-c{grid-row:span 3;grid-template-rows:subgrid} /* Zeichen+Status, Titel, Punkte (die Beschreibungszeile ist seit dem 10.11.2026 weg) */
}
@supports not (grid-template-rows:subgrid){
  @media (min-width:1181px){.gw4-t{min-height:125px}}
}
/* der Balken: graue Spur, darauf blau der Teil, der läuft, dahinter schraffiert der Teil, an dem gebaut wird */
.gw4-bar{position:absolute;left:-1px;right:2px;top:0;height:4px;overflow:hidden;background:var(--n200)}
.gw4-c:nth-child(4n) .gw4-bar{right:-1px}
.gw4-bar::before,.gw4-bar::after{content:"";position:absolute;top:0;bottom:0;right:0}
.gw4-bar::before{left:0;z-index:1;background:var(--b);transform-origin:0 50%;transform:scaleX(var(--gw-p))}
.gw4-bar::after{left:-8px;background:repeating-linear-gradient(135deg,var(--b) 0 2px,var(--b100) 2px 5px);animation:gw4Hatch 1.8s linear infinite}
.gw4-c[data-st="laeuft"] .gw4-bar::after{content:none}
@keyframes gw4Hatch{to{transform:translateX(7.071px)}}
.gw4-h{display:grid;gap:20px;justify-items:start}
.gw4-h .wb-ic{margin:0}
.gw4-s{margin:0;font-weight:500;font-size:13px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--b)}
.gw4-c h3{--gw-r:1;margin:8px 0 0;font-weight:600;font-size:28px;line-height:34px;letter-spacing:-.01em;-webkit-hyphens:auto;hyphens:auto}
.gw4-t{--gw-r:2;margin:14px 0 0;font-size:16px;line-height:25px;color:var(--n700)}
.gw4-l{--gw-r:2;margin:24px 0 0;display:grid;gap:14px;align-content:start;font-size:15px;line-height:22px;color:var(--k)}
.gw4-l li{position:relative;padding-left:24px}
.gw4-l li::before{content:"";position:absolute;left:0;top:10px;width:12px;height:2px;background:var(--b)}
.gw4-l li.gw4-w{color:var(--n700)}
.gw4-l li.gw4-w::before{background:var(--n300)}
.gw4-n{display:block;margin-top:2px;font-weight:500;font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
.gw4-more{display:flex;align-items:center;gap:12px;margin:24px 0 0;font-size:15px;line-height:22px;color:var(--n500)}
.gw4-more i{flex:none;width:40px;height:4px;background:repeating-linear-gradient(135deg,var(--n300) 0 2px,transparent 2px 5px)}
/* Auftritt (die Klassen setzt das Skript; ohne Skript und bei "weniger Bewegung" steht alles fertig da).
   .gw4-arm = der Kasten wartet blass: leerer Balken, graues Feld ohne Zeichen, blasser Text.
   .is-in   = er wird eingeschaltet; --gw-d ist sein Platz in der Reihe derer, die zugleich ins Bild kommen. */
.gw4-arm .gw4-bar::before{transform:scaleX(0)}
.gw4-arm .gw4-bar::after{opacity:0}
.gw4-arm .wb-ic{background:var(--n100)}
.gw4-arm .wb-ic svg{opacity:0}
.gw4-arm .gw4-s,.gw4-arm>h3,.gw4-arm>.gw4-t,.gw4-arm>.gw4-l{opacity:.26}
.gw4-arm.is-in .gw4-bar::before{transform:scaleX(var(--gw-p));transition:transform .9s cubic-bezier(.65,0,.25,1) calc(var(--gw-d,0) * 380ms)}
.gw4-arm.is-in .gw4-bar::after{opacity:1;transition:opacity .5s ease calc(var(--gw-d,0) * 380ms + .75s)}
.gw4-arm.is-in .wb-ic{background:var(--b100);transition:background .5s ease calc(var(--gw-d,0) * 380ms + .1s)}
.gw4-arm.is-in .wb-ic svg{opacity:1;transition:opacity .3s ease calc(var(--gw-d,0) * 380ms + .12s)}
.gw4-arm.is-in .gw4-s,.gw4-arm.is-in>h3,.gw4-arm.is-in>.gw4-t,.gw4-arm.is-in>.gw4-l{opacity:1;transition:opacity .7s ease calc(var(--gw-d,0) * 380ms + var(--gw-r,0) * 70ms + .12s)}
/* das Zeichen zeichnet sich dabei selbst; danach gilt wieder der durchgezogene Strich */
@keyframes gw4Draw{from{stroke-dasharray:1 2;stroke-dashoffset:1.02}to{stroke-dasharray:1 2;stroke-dashoffset:0}}
.gw4-arm.is-in .wb-ic path{animation:gw4Draw .9s cubic-bezier(.6,0,.2,1) calc(var(--gw-d,0) * 380ms + .12s) backwards}
@media (max-width:1180px){
  .gw4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gw4-c{padding:36px 32px 38px}
  .gw4-c:nth-child(2n) .gw4-bar{right:-1px}
}
@media (max-width:640px){
  .gw4{grid-template-columns:minmax(0,1fr)}
  .gw4-c{padding:30px 22px 32px}
  .gw4-bar{right:-1px}
  .gw4-c h3{font-size:26px;line-height:32px}
  .gw4-l{margin-top:22px}
}
@media (prefers-reduced-motion:reduce){
  .gw4-bar::after,.gw4-arm.is-in .wb-ic path{animation:none}
}

/* =====================================================================
   10.11.2026 · STARTSEITE: Ergebnis bei Schwinger, neu gesetzt (eine Fassung mit 120-px-Zahlen in einer Reihe war dem Nutzer zu groß und "meh";
   eine mit dem großen Pfeil "on light" hinter den Werten verwarf ich selbst, die Linien liefen durch den Text)
   Links die drei Werte untereinander (56 px), je mit Satz und Zählwerk (blaue Felder = jetzt, Umrisse = vorher), gleichmäßig über die
   Höhe der rechten Spalte verteilt. Rechts ein Foto aus dem Steinbruch, darunter das Zitat von Herrn Daub mit seinem Freisteller,
   Name und Bildzeile. Auftritt (app.js, ergebnis()): Zahlen rollen ein, Umrisse erscheinen, blaue Felder füllen sich nacheinander.
   Die Sätze der Werte sind dieselben wie auf der Seite Referenzen.
   ===================================================================== */
.erg .sh{margin-bottom:72px}
.erg-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 72px;align-items:stretch}
.erg-stats{list-style:none;margin:0;padding:0;display:grid;align-content:space-between;gap:36px}
.erg-s{--fz:56px;min-width:0;display:grid;justify-items:start}
.erg-s .fig{font-size:var(--fz);line-height:.9;letter-spacing:-.035em;gap:.16em;align-items:flex-end}
/* Einheit auf der Grundlinie der Ziffer: die Ziffer steht in einem 1em-Kasten, ihre Grundlinie liegt bei dieser Schrift 0,15em über dessen Unterkante */
.erg-s .fig small{font-size:.34em;font-weight:500;letter-spacing:-.01em;line-height:1;color:var(--k);padding-bottom:calc(var(--fz) * .121)}
.erg-s .fig .lt{font-size:.5em;font-weight:500;line-height:1;color:var(--n500);align-self:center;margin:0 .04em 0 0;transform:translateY(-.08em)}
.erg-s .odo .od{height:1em}
.erg-t{margin:12px 0 0;max-width:34ch;font-size:17px;line-height:26px;color:var(--k)}
.tly{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:14px;min-height:14px}
.tly i{display:block;width:14px;height:14px;background:var(--b)}
.tly i.off{background:transparent;box-shadow:inset 0 0 0 1.5px var(--n300)}
.tly-more{font-weight:600;font-size:14px;line-height:14px;color:var(--n500);margin-left:2px}
/* Bühne rechts: Fotos überblenden wie im früheren Beleg (acht Sekunden je Foto, langsamer Zoom), unten das Zitat auf dunklem Verlauf */
.erg-stage{margin:0;position:relative;overflow:hidden;background:var(--n900);aspect-ratio:5/4;isolation:isolate}
.erg-pics{position:absolute;inset:0}
.erg-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);filter:saturate(.85) contrast(1.02)}
.erg-pics img:first-child{opacity:1;transform:none}
.erg-stage.is-in .erg-pics img{animation:rfxFade 24s linear infinite}
.erg-stage.is-in .erg-pics .erg-p2{animation-delay:8s}
.erg-stage.is-in .erg-pics .erg-p3{animation-delay:16s}
.erg-stage.is-in .erg-pics img:first-child{animation-delay:-24s}
.erg-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:74%;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(8,8,10,.97) 0%,rgba(8,8,10,.9) 22%,rgba(8,8,10,.62) 48%,rgba(8,8,10,.22) 75%,rgba(8,8,10,0) 100%)}
.erg-q{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 22px;align-items:end;padding:0 32px 0 24px;color:#fff}
.erg-qp{grid-row:1/3;align-self:end;display:block;height:168px;width:auto;filter:saturate(.9)}
.erg-qt{margin:0;align-self:end}
.erg-qt p{margin:0;font-weight:600;font-size:24px;line-height:32px;letter-spacing:-.015em;text-indent:-.42em;text-wrap:balance;color:#fff}
.erg-qw{padding:0 0 42px;font-size:14px;line-height:21px;color:rgba(255,255,255,.72)} /* unten Platz für die Zeile mit den drei Strichen */
.erg-qw b{font-weight:600;color:#fff}
/* Fototakt: drei Striche unten rechts, weiß gedämpft; der laufende füllt sich in Blau über seine acht Sekunden */
.erg-dots{position:absolute;right:32px;bottom:26px;z-index:2;display:flex;gap:6px}
.erg-dots i{position:relative;display:block;width:28px;height:2px;background:rgba(255,255,255,.32);overflow:hidden}
.erg-dots i::after{content:"";position:absolute;inset:0;background:var(--b);transform-origin:0 50%;transform:scaleX(0)}
.erg-stage.is-in .erg-dots i::after{animation:ergFill 24s linear infinite}
.erg-stage.is-in .erg-dots i:nth-child(1)::after{animation-delay:-24s}
.erg-stage.is-in .erg-dots i:nth-child(2)::after{animation-delay:8s}
.erg-stage.is-in .erg-dots i:nth-child(3)::after{animation-delay:16s}
@keyframes ergFill{0%{transform:scaleX(0)}33.3%{transform:scaleX(1)}33.4%{transform:scaleX(0)}100%{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.erg-stage.is-in .erg-pics img{animation:none}.erg-pics img:first-child{opacity:1;transform:none}.erg-stage.is-in .erg-dots i::after{animation:none}.erg-dots i:first-child::after{transform:none}}
.erg .erg-go{margin-top:56px}
@media (max-width:1180px){
  .erg-body{gap:0 48px}
  .erg-s{--fz:52px}
  .erg-t{font-size:16px;line-height:25px}
  .erg-qt p{font-size:22px;line-height:30px}
  .erg-qp{height:150px}
}
@media (max-width:960px){
  .erg .sh{margin-bottom:56px}
  .erg-body{grid-template-columns:minmax(0,1fr);gap:56px 0}
  .erg-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;align-content:start}
  @supports (grid-template-rows:subgrid){.erg-s{grid-row:span 3;grid-template-rows:subgrid}} /* Zahl, Satz, Zählwerk auf gleicher Höhe */
  .erg-s{--fz:48px}
  .erg-t{margin-top:10px}
  .tly{gap:3px;margin-top:12px}
  .tly i{width:12px;height:12px}
  .tly-more{font-size:13px;line-height:12px}
  .erg-stage{aspect-ratio:16/10}
  .erg-q{padding:0 28px 0 22px}
  .erg-qw{padding-bottom:36px}
  .erg-dots{right:28px;bottom:22px}
}
@media (max-width:640px){
  .erg .sh{margin-bottom:44px}
  .erg-body{gap:48px 0}
  .erg-stats{grid-template-columns:minmax(0,1fr);gap:36px 0}
  .erg-s{--fz:52px;grid-row:auto;grid-template-rows:none}
  .erg-t{max-width:none}
  .erg-stage{aspect-ratio:4/5}
  .erg-stage::after{height:78%}
  .erg-q{grid-template-columns:auto minmax(0,1fr);gap:6px 14px;padding:0 20px 0 14px}
  .erg-qp{height:104px}
  .erg-qt p{font-size:18px;line-height:25px}
  .erg-qw{padding:0 0 18px;font-size:12px;line-height:17px}
  .erg-dots{display:none} /* auf dem Telefon kein Platz neben dem Text */
  .erg-cap{display:none} /* die Bildzeile passt auf dem Telefon nicht mehr auf das Bild */
}

/* =====================================================================
   10.11.2026 · STARTSEITE: Rhythmus statt durchgehend Weiß (Nutzer: "plain, white and boring, introduce some life")
   Flächen von oben: dunkler Kopf · weiß (Logos, Büro-Gewerke) · NACHT (Ergebnis bei Schwinger) · weiß (Einordnung)
   · hellblau getönt (Heute verfügbar, weiße Karten) · weiß (Fragen, Team, Förderung) · blaues Band · dunkler Fuß.
   Das Ergebnis läuft über die Nacht-Palette (.nt kehrt die Farbwerte um); hinter der rechten Hälfte der große Pfeil
   aus dem Grafiksystem in der Variante "on dark" (Branding 6.2), die Bühne verläuft unten in den Grund des Abschnitts,
   so steht Herr Daub auf dem Boden des Abschnitts.
   ===================================================================== */
.erg.nt{position:relative;isolation:isolate;overflow:hidden;background:#0E0E10;padding-block:140px}
/* der Pfeil in zwei Lagen mit derselben Geometrie: Fläche (ruhig) und Kontur mit Schein (pulsiert langsam, kaum merklich) */
.erg.nt::before,.erg.nt::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-repeat:no-repeat;background-position:right center;background-size:auto 100%}
.erg.nt::before{background-image:url(/img/arrow-large-on-dark-fill.svg)}
.erg.nt::after{background-image:url(/img/arrow-large-on-dark-stroke.svg);opacity:.4;animation:ergPulse 7s ease-in-out infinite}
@keyframes ergPulse{0%,100%{opacity:.28}50%{opacity:.7}}
@media (prefers-reduced-motion:reduce){.erg.nt::after{animation:none;opacity:.45}}
.erg.nt>.c{position:relative;z-index:1}
.erg.nt .erg-stage{background:#0E0E10}
.erg.nt .erg-stage::after{background:linear-gradient(to top,#0E0E10 0%,rgba(14,14,16,.92) 22%,rgba(14,14,16,.62) 48%,rgba(14,14,16,.22) 75%,rgba(14,14,16,0) 100%)}
.erg.nt .erg-dots i{background:rgba(255,255,255,.22)}
.sec.tint{background:#EDF3FF}
.tint .wb-grid li{background:var(--w)}
.tint .seg{background:var(--w)}
@media (max-width:960px){.erg.nt{padding-block:110px}}

/* =====================================================================
   10.11.2026 · STARTSEITE: Wer dahintersteht, Fassung B: zwei Kästen (Nutzer: "separate boxes", "animation on hover")
   Kästen mit Haarlinie wie die Büro-Gewerke. Links Rollenwort mit Fähnchen, Name, Text; rechts steht der Freisteller auf der
   Unterkante und ragt über die Oberkante hinaus. Überfahren: Kasten füllt sich hellblau, blaue Standlinie zieht sich von links,
   der Kopf hebt sich ein wenig. Auftritt über data-rise. Fassung A (gemeinsame Bühne) in der Versionsgeschichte.
   ===================================================================== */
.tmb-grid{--tmb-p:176px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tmb{position:relative;min-height:calc(var(--tmb-p) + 36px);padding-right:calc(var(--tmb-p) * .95 + 16px);border:1px solid var(--n200);background:var(--w);transition:background .5s var(--e-out),border-color .5s var(--e-out)}
.tmb:hover{background:var(--b100);border-color:var(--b100)}
/* der große Pfeil "on light" (Branding 6.2) im Kasten, von der rechten Kante angeschnitten; der Kopf steht davor */
.tmb{overflow:hidden;isolation:isolate}
.tmb::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url(/img/arrow-large-on-light.svg) right center/auto 100% no-repeat;transition:opacity .5s var(--e-out)}
.tmb:hover::before{opacity:0} /* auf der hellblauen Fläche beim Überfahren tritt der Pfeil zurück */
.tmb-t,.tmb-p,.tmb-ground{position:relative;z-index:1}
.tmb-p{position:absolute}
.tmb-t{padding:34px 8px 34px 32px}
.tmb-k{margin:0;display:flex;align-items:center;gap:10px;font-weight:500;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
.tmb-k::before{content:"";flex:none;width:12px;height:9px;background:var(--b);-webkit-mask:var(--flagmask) center/contain no-repeat;mask:var(--flagmask) center/contain no-repeat}
.tmb-n{margin:14px 0 0;font-weight:600;font-size:26px;line-height:34px;letter-spacing:-.01em}
.tmb-x{margin:8px 0 0;font-size:16px;line-height:25px;color:var(--n700)}
.tmb-p{position:absolute;right:20px;bottom:0;display:block;line-height:0} /* steht auf der Unterkante, bleibt im Kasten */
.tmb-p img{display:block;height:var(--tmb-p);width:auto;transform-origin:50% 100%;transition:transform .6s var(--e-out)}
.tmb:hover .tmb-p img{transform:translateY(-3px)} /* hebt sich kaum merklich */
.tmb-ground{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--b);transform-origin:0 50%;transform:scaleX(0);transition:transform .7s var(--e-out)}
.tmb:hover .tmb-ground{transform:scaleX(1)}
@media (hover:none){.tmb-ground{transform:scaleX(1)}} /* ohne Maus steht die Standlinie */
@media (max-width:1180px){
  .tmb-grid{--tmb-p:160px}
  .tmb-n{font-size:23px;line-height:30px}
  .tmb-x{font-size:15px;line-height:23px}
}
@media (max-width:960px){
  .tmb-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .tmb-grid{--tmb-p:170px}
}
@media (max-width:640px){
  .tmb-grid{--tmb-p:124px;gap:32px}
  .tmb-t{padding:24px 4px 24px 20px}
  .tmb-n{font-size:20px;line-height:27px;margin-top:10px}
  .tmb-x{font-size:14px;line-height:21px}
  .tmb-k{font-size:11px}
  .tmb-p{right:10px}
  .tmb{padding-right:calc(var(--tmb-p) * .92 + 8px);min-height:calc(var(--tmb-p) + 24px)}
}

/* =====================================================================
   10.11.2026 · STARTSEITE: Durchsicht der ganzen Seite
   1) "Gefördert und vernetzt" hellblau getönt wie "Heute verfügbar": bricht die weiße Strecke Fragen · Team · Förderung und
      führt zum blauen Band hin (hell → blau). Die beiden Karten bleiben weiß.
   2) (zurückgenommen) Die Logos behalten ihren Rahmen in der Karte, so sah es der Nutzer lieber.
   ===================================================================== */
.tb.tint{background:#EDF3FF}
.tb.tint .tb-c{outline-color:var(--n200)}

/* =====================================================================
   10.11.2026 · FARBSYSTEM DER STARTSEITE (Entscheidung des Designers, Nutzerauftrag: "2, maximal 3 Farben, clean, modern, leicht zu folgen")
   Drei Farben, sonst nichts:
   · Weiß   #FFFFFF   Grund. Die meisten Abschnitte, der Lesefluss.
   · Nacht  #0B0C0E   Rahmen und Beweis: Kopf, der Schwinger-Block, Fuß. Genau drei Mal, nie dazwischen.
   · Blau   #0055FF   Handlung und Markierung: Knöpfe, Fähnchen, Balken, Zählwerk, Tabellenkopf, das eine blaue Band vor dem Fuß.
     Die BauPioniere-Spalte der Vergleichstabelle ist ebenfalls voll blau (Wunsch des Nutzers).
     Blau mit 7 % auf Weiß (#EDF3FF) ist die leise Fläche unter Kartenreihen ("Heute verfügbar", "Gefördert und vernetzt");
     mit 10 % (#E6EFFF) die Quadrate hinter Symbolen. Beides ist dieselbe Farbe, nur leiser.
   Grau gibt es nur als Text und Haarlinie, nie als Fläche. Keine zweite Blau-Nuance, keine zweite Nacht.
   Praxis: 60-30-10 (Weiß · Nacht/Tönung · Blau), ein Akzent, Kontraste nach WCAG AA.
   ===================================================================== */
/* eine Nacht für Kopf, Schwinger-Block und Fuß */
.nt,.erg.nt,.erg.nt .erg-stage{background:#0B0C0E}
.erg.nt .erg-stage::after{background:linear-gradient(to top,#0B0C0E 0%,rgba(11,12,14,.92) 22%,rgba(11,12,14,.62) 48%,rgba(11,12,14,.22) 75%,rgba(11,12,14,0) 100%)}
.ft.dk{background:#0B0C0E}
/* Vergleichstabelle: die BauPioniere-Spalte bleibt voll blau (so stand sie vorher, dem Nutzer gefiel das besser); die zweite volle blaue Fläche ist die bewusste Ausnahme im System */
/* Förder-Karten: Beschriftung bleibt wie vorher (#0047D6), der Nutzer wollte den alten Look der Karten zurück */

/* =====================================================================
   10.11.2026 · STARTSEITE: Band "Nächster Schritt", rechte Spalte als Fähnchenspalten
   Blau mit dem großen Pfeil "on blue" wie zuvor. Rechts untereinander: "Ihr Ansprechpartner" mit kleinem Porträt, Name und
   Telefon; "Verbände" mit dem Link. Die Fassungen mit großem Freisteller (blau und Nacht) sind verworfen: der Fuß ist dunkel,
   das Bild war zu groß.
   ===================================================================== */
.band-ct{grid-column:2;display:grid;gap:26px;align-self:end;justify-items:start}
.band-ct>div{min-width:0}
.band-k{margin:0;display:flex;align-items:center;gap:10px;font-weight:500;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.band-k::before{content:"";flex:none;width:12px;height:9px;background:#fff;-webkit-mask:var(--flagmask) center/contain no-repeat;mask:var(--flagmask) center/contain no-repeat}
.band-who2{display:flex;align-items:center;gap:14px;margin-top:12px}
.band-who2 img{width:56px;height:56px;object-fit:cover;flex:none}
.band-n{margin:0;font-weight:600;font-size:17px;line-height:24px;color:#fff}
.band-v{margin:2px 0 0;font-size:16px;line-height:24px;color:#fff}
.band-v a{color:#fff}
.band-v a:not(.tlink){font-weight:600;text-decoration:underline;text-underline-offset:3px}
.band-k+.band-v{margin-top:12px}
.band-v .tlink{font-size:17px;line-height:26px}
.band-note.band-note-ct{margin:0;max-width:460px}
@media (max-width:960px){
  .band-ct{grid-column:1;align-self:start}
}

/* =====================================================================
   10.11.2026 · STARTSEITE: Kopf, Karte mit drei Bildschirmen (Nutzer: "another 2 screens, one showing the product and one analytics,
   2nd card should be a funnel, how users are collected via different social media")
   1) die Bewerbung wie bisher, 2) der Trichter: Kanäle mit Anteil, darunter drei Stufen bis zur Bewerbung, 3) der Überblick mit Zahlen.
   Gleiche Grammatik wie die Bewerbungskarte: Kopfzeile mit Zahl rechts, Messbalken aus zehn Feldern, Zeile mit kleiner Überschrift.
   Die Zeile über der Karte wechselt mit (data-label), die Kartenlinie gehört nur zur Bewerbung (app.js, hero4()).
   ===================================================================== */
.h4-c-head2{grid-template-columns:1fr auto}
.h4-kpis{margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.h4-kpis div{padding:8px 12px;background:#F4F6FA}
.h4-kpis .h4-num{display:block;font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.h4-kpis small{display:block;margin-top:4px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute2);font-weight:600}
.h4-week{margin-top:10px;padding-top:10px}
.h4-bars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;height:22px;align-items:end;margin-top:6px}
.h4-bars i{display:block;height:var(--h);background:#DCE4F3;transform-origin:50% 100%;transform:scaleY(0);transition:transform .8s var(--ease)}
.h4-bars i:last-child{background:var(--b)}
.h4-cand.h4-is-on .h4-bars i{transform:scaleY(1)}
.h4-cand.h4-is-on .h4-bars i:nth-child(1){transition-delay:.5s}
.h4-cand.h4-is-on .h4-bars i:nth-child(2){transition-delay:.6s}
.h4-cand.h4-is-on .h4-bars i:nth-child(3){transition-delay:.7s}
.h4-cand.h4-is-on .h4-bars i:nth-child(4){transition-delay:.8s}
/* vierte Messzeile (Trichter: Empfehlung) füllt sich wie die ersten drei */
.h4-cand.h4-is-on .h4-mt:nth-child(4) .h4-segs i.h4-f:nth-child(1){background:var(--b);transition-delay:0.720s}
.h4-cand.h4-is-on .h4-mt:nth-child(4) .h4-segs i.h4-f:nth-child(2){background:var(--b);transition-delay:0.765s}
.h4-cand.h4-is-on .h4-mt:nth-child(4) .h4-segs i.h4-f:nth-child(3){background:var(--b);transition-delay:0.810s}
.h4-cand.h4-is-on .h4-mt:nth-child(4) .h4-segs i.h4-f:nth-child(4){background:var(--b);transition-delay:0.855s}
.h4-cand.h4-is-on .h4-mt:nth-child(4) .h4-segs i.h4-f:nth-child(5){background:var(--b);transition-delay:0.900s}
.h4-cand.h4-is-on .h4-mt:nth-child(4) .h4-segs i.h4-f:nth-child(6){background:var(--b);transition-delay:0.945s}
.h4-cand.h4-is-on .h4-mt:nth-child(4) .h4-segs i.h4-f:nth-child(7){background:var(--b);transition-delay:0.990s}
.h4-cand.h4-is-on .h4-mt:nth-child(4) .h4-segs i.h4-f:nth-child(8){background:var(--b);transition-delay:1.035s}
.h4-cand.h4-is-on .h4-mt:nth-child(4) .h4-segs i.h4-f:nth-child(9){background:var(--b);transition-delay:1.080s}
.h4-cand.h4-is-on .h4-mt:nth-child(4) .h4-segs i.h4-f:nth-child(10){background:var(--b);transition-delay:1.125s}
@media (max-width:640px){.h4-kpis div{padding:7px 10px}}

/* =====================================================================
   10.11.2026 · STARTSEITE: Kopf, Bildschirm 1 "So kommen Bewerbungen an" (Nutzer: funnel first, simpler and nicer, animated)
   Vier Kanäle als Chips gleicher Breite, von jedem eine kurze Linie auf eine Schiene, von der Schiene eine Linie zu BauPioniere,
   von dort eine Linie zu den Bewerbungen. Beim Erscheinen zeichnet sich der Weg von oben nach unten.
   ===================================================================== */
.h4-fun{display:flex;flex-direction:column}
.h4-fun-t{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute2);font-weight:600}
.h4-src{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.h4-src li{position:relative;text-align:center;font-size:11px;font-weight:600;line-height:1;padding:8px 4px;border:1px solid var(--line);color:#2A2D33;white-space:nowrap;opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .5s var(--ease)}
.h4-src li::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:18px;background:#C9D2E2;transform-origin:50% 0;transform:scaleY(0);transition:transform .45s var(--ease)}
.h4-rail{position:relative;height:1px;margin:18px 12.5% 0;background:#C9D2E2;transform-origin:50% 50%;transform:scaleX(0);transition:transform .6s var(--ease)}
.h4-rail i{position:absolute;top:-3px;width:7px;height:7px;background:var(--b);transform:translateX(-50%) scale(0);transition:transform .35s var(--ease)}
.h4-rail i:first-child{left:33.333%}
.h4-rail i:last-child{left:66.667%}
.h4-drop{flex:1;min-height:18px;width:1px;margin:0 auto;background:#C9D2E2;transform-origin:50% 0;transform:scaleY(0);transition:transform .45s var(--ease)}
.h4-node{display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin:0 auto;padding:10px 14px;background:var(--b1);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ease)}
.h4-node .h4-flag{width:12px;height:9px;background:var(--b);-webkit-mask:var(--flagmask) center/contain no-repeat;mask:var(--flagmask) center/contain no-repeat}
.h4-node b{font-size:14px;font-weight:700;color:var(--ink)}
.h4-node span{font-size:11.5px;color:var(--mute2)}
.h4-res{display:flex;align-items:center;justify-content:center;gap:12px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ease)}
.h4-res .h4-num{font-size:36px;font-weight:700;letter-spacing:-.04em;color:var(--b);font-variant-numeric:tabular-nums;line-height:1}
.h4-res b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.h4-res div span{display:block;font-size:11.5px;color:var(--mute2);margin-top:2px}
/* der Weg zeichnet sich von oben nach unten */
.h4-cand.h4-is-on .h4-src li{opacity:1;transform:none}
.h4-cand.h4-is-on .h4-src li:nth-child(1){transition-delay:.25s}
.h4-cand.h4-is-on .h4-src li:nth-child(2){transition-delay:.33s}
.h4-cand.h4-is-on .h4-src li:nth-child(3){transition-delay:.41s}
.h4-cand.h4-is-on .h4-src li:nth-child(4){transition-delay:.49s}
.h4-cand.h4-is-on .h4-src li::after{transform:scaleY(1);transition-delay:.75s}
.h4-cand.h4-is-on .h4-rail{transform:scaleX(1);transition-delay:1.05s}
.h4-cand.h4-is-on .h4-rail i{transform:translateX(-50%) scale(1);transition-delay:1.5s}
.h4-cand.h4-is-on .h4-drop{transform:scaleY(1);transition-delay:1.6s}
.h4-cand.h4-is-on .h4-node{opacity:1;transform:none;transition-delay:1.95s}
.h4-cand.h4-is-on .h4-drop2{transition-delay:2.3s}
.h4-cand.h4-is-on .h4-res{opacity:1;transform:none;transition-delay:2.65s}
@media (max-width:640px){.h4-src li{font-size:10.5px;padding:7px 2px}}

/* =====================================================================
   10.11.2026 · Laptops: die Seite skaliert zwischen 1024 und 1440 px (Nutzer: "on laptop sizes everything looks a bit larger,
   the page should always scale to different screen sizes")
   Überschriften, Vorspann, Abschnittsabstände und die großen Zahlen des Schwinger-Blocks wachsen mit der Bildschirmbreite;
   ab 1440 px gelten die bisherigen Werte, unter 1024 px die vorhandenen Regeln für Tablet und Telefon. Der Kopf passt sich
   ohnehin der Bildschirmhöhe an (min-height aus 100svh).
   ===================================================================== */
@media (min-width:1024px) and (max-width:1439px){
  .t-h2{font-size:clamp(38px,1.9vw + 20.6px,48px);line-height:1.17}
  .t-lead{font-size:clamp(18px,.48vw + 13.1px,20px);line-height:1.5}
  .sec{padding-block:clamp(96px,5.8vw + 36px,120px)}
  .erg.nt{padding-block:clamp(110px,7.2vw + 36px,140px)}
  .sh{margin-bottom:clamp(52px,2.9vw + 22px,64px)}
  .erg-s{--fz:clamp(48px,1.9vw + 20.6px,56px)}
  .gw4-c h3{font-size:clamp(24px,.95vw + 14.3px,28px);line-height:1.2}
}

/* =====================================================================
   10.11.2026 · KOPF (Straßenkarte): Text etwas größer, Karte und Umkreis leiser, Markus-Karte näher an der Mitte (Nutzer)
   ===================================================================== */
.hero-map .t-hero{font-size:clamp(56px,4.4vw + 4px,76px);line-height:1.04}
.hero-map .t-lead{font-size:clamp(19px,.5vw + 13px,22px);line-height:1.5;max-width:640px}
.hero-map .umap{opacity:.78}
.hero-map .um-riv{opacity:.5}
.hero-map .um-riv.maj{opacity:.6;stroke-width:2}
.hero-map .um-rd.mot{stroke:rgba(214,228,255,.4);stroke-width:1.8}
.hero-map .um-rd.tru{stroke:rgba(178,205,255,.26)}
.hero-map .um-rd.pri{stroke:rgba(178,205,255,.18)}
.hero-map .um-area{fill:rgba(72,132,255,.06);stroke:rgba(72,132,255,.55);stroke-width:1.2}
.hero-map .um-links line{stroke:rgba(178,205,255,.32)}

/* =====================================================================
   10.11.2026 · Startseite, Menü mit Sprungmarken (Nutzer: "anchor links in the nav because now it looks quite empty")
   Solange nur die Startseite live ist, stehen im Menü die Abschnitte der Seite. In der Arbeitsfassung (alle Seiten, 4176/Vorschau)
   sind sie ausgeblendet, damit das Menü nicht doppelt voll ist; der Build der Startversion nimmt die Seitenlinks heraus und lässt
   die Sprungmarken stehen (data-anchor-nav). Die Abschnitte bekommen Luft nach oben für die feste Kopfleiste.
   ===================================================================== */
.nav-anchor{display:none}
html[data-anchors] .nav-anchor{display:inline-flex}
.mnav .nav-anchor{display:none}
html[data-anchors] .mnav .nav-anchor{display:flex}
/* kein eigener scroll-margin: html hat bereits scroll-padding-top für die feste Kopfleiste */
/* Sprungmarken im Menü: mehr Luft zwischen den Punkten und zur Wortmarke (Nutzer: "space out the links so they look clean") */
@media (min-width:1101px){
  html[data-anchors] .nav{gap:36px;margin-left:32px;font-size:15px}
}
@media (min-width:1281px){
  html[data-anchors] .nav{gap:44px;margin-left:48px}
}

/* =====================================================================
   10.11.2026 · STARTSEITE: Nutzen, "Was Ihr Betrieb davon hat" (Vorlage des Nutzers; hier auf Weiß statt Blau)
   Vier Spalten, getrennt durch Haarlinien, je ein Pfeil schräg nach oben rechts (zeichnet sich), Titel, ein Satz.
   Auftritt (app.js, nutzen()): die Linien wachsen von oben, dann Spalte für Spalte Pfeil und Text. Überfahren: der Pfeil rückt
   einen Schritt nach oben rechts. Zwei Spalten bis 960 px, eine bis 640 px.
   ===================================================================== */
.nz .sh{margin-bottom:56px}
.nz-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--n200)}
.nz-c{position:relative;min-width:0;padding:30px 28px 10px 0;display:grid;align-content:start;gap:0}
.nz-c+.nz-c{padding-left:28px}
.nz-c+.nz-c::before{content:"";position:absolute;left:0;top:30px;bottom:10px;width:1px;background:var(--n200);transform-origin:50% 0;transform:scaleY(var(--nz-l,1))}
.nz-a{width:26px;height:26px;fill:none;stroke:var(--b);stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;overflow:visible;transition:transform .5s var(--e-out)}
.nz-c:hover .nz-a{transform:translate(3px,-3px)}
.nz-c h3{margin:22px 0 0;font-weight:600;font-size:22px;line-height:29px;letter-spacing:-.01em;text-wrap:balance}
.nz-c p{margin:10px 0 0;font-size:15px;line-height:23px;color:var(--n700)}
/* Auftritt: .nz-arm = wartet, .is-in = da */
.nz-arm .nz-c h3,.nz-arm .nz-c p{opacity:0;transform:translateY(10px)}
.nz-arm .nz-c .nz-a path{stroke-dasharray:1 2;stroke-dashoffset:1.02}
.nz-arm .nz-c+.nz-c::before{--nz-l:0}
.nz-arm.is-in .nz-c h3,.nz-arm.is-in .nz-c p{opacity:1;transform:none;transition:opacity .6s ease,transform .7s var(--e-out)}
.nz-arm.is-in .nz-c h3{transition-delay:calc(var(--nz-d) * 160ms + .25s)}
.nz-arm.is-in .nz-c p{transition-delay:calc(var(--nz-d) * 160ms + .34s)}
.nz-arm.is-in .nz-c .nz-a path{stroke-dashoffset:0;transition:stroke-dashoffset .7s cubic-bezier(.6,0,.2,1) calc(var(--nz-d) * 160ms + .1s)}
.nz-arm.is-in .nz-c+.nz-c::before{--nz-l:1;transition:transform .6s var(--e-out) calc(var(--nz-d) * 160ms)}
.nz-c:nth-child(1){--nz-d:0}.nz-c:nth-child(2){--nz-d:1}.nz-c:nth-child(3){--nz-d:2}.nz-c:nth-child(4){--nz-d:3}
@media (min-width:1024px) and (max-width:1439px){.nz-c h3{font-size:clamp(19px,.95vw + 9.3px,22px);line-height:1.32}}
@media (max-width:960px){
  .nz-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nz-c{padding:26px 24px 26px 0}
  .nz-c+.nz-c{padding-left:24px}
  .nz-c:nth-child(3){padding-left:0;border-top:1px solid var(--n200)}
  .nz-c:nth-child(4){border-top:1px solid var(--n200)}
  .nz-c:nth-child(3)::before{content:none}
  .nz-c+.nz-c::before{top:26px;bottom:26px}
  .nz-c:nth-child(3),.nz-c:nth-child(4){--nz-row:1}
}
@media (max-width:640px){
  .nz .sh{margin-bottom:40px}
  .nz-g{grid-template-columns:minmax(0,1fr)}
  .nz-c,.nz-c+.nz-c{padding:22px 0}
  .nz-c+.nz-c{border-top:1px solid var(--n200)}
  .nz-c+.nz-c::before{content:none}
  .nz-c h3{font-size:20px;line-height:27px;margin-top:16px}
}
@media (prefers-reduced-motion:reduce){.nz-arm .nz-c h3,.nz-arm .nz-c p{opacity:1;transform:none}.nz-arm .nz-c .nz-a path{stroke-dashoffset:0}.nz-arm .nz-c+.nz-c::before{--nz-l:1}}

/* =====================================================================
   10.11.2026 · Startprüfung (BPI-38): Kontrast im dunklen Fuß. Das kleine Grau #767676 kam auf 4,3:1 gegen #0B0C0E,
   verlangt sind 4,5:1. Ein etwas helleres Grau für Beschriftung, Rechtszeile und Rechtslinks im Fuß.
   ===================================================================== */
.ft.dk .ft-h,.ft.dk h4,.ft.dk .legal,.ft.dk .ft-bot a,.ft.dk .ft-bot p{color:#9A9AA3}

/* =====================================================================
   10.11.2026 · Telefon (Nutzer): Kopf ohne Straßenkarte, stattdessen der große Pfeil aus dem Grafiksystem, klein und ruhig;
   Förder-Karten mit dem Logo unter dem Text.
   ===================================================================== */
@media (max-width:900px){
  .hero-map .umap,.hero-map .um-credit,.hero-map .mcard{display:none}
  .hero-map{isolation:isolate}
  .hero-map::before,.hero-map::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-repeat:no-repeat;background-position:right center;background-size:auto 100%} /* über die ganze Höhe, damit keine Schnittkante im Bild steht; die Grafik ist von Haus aus oben und unten angeschnitten */
  .hero-map::before{background-image:url(/img/arrow-large-on-dark-fill.svg)}
  .hero-map::before{opacity:.7}
  .hero-map::after{background-image:url(/img/arrow-large-on-dark-stroke.svg);opacity:.4;animation:ergPulse 7s ease-in-out infinite}
  .hero-map .hero-in{position:relative;z-index:1}
  .tb-c .tb-t{order:1}
  .tb-c .tb-logo{order:2;margin-top:8px}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.hero-map::after{animation:none;opacity:.45}}

/* =====================================================================
   10.11.2026 · KOPF aus dem Onepager-Entwurf, auf Nacht: links der Text mit vier Haken, rechts das Foto aus der
   Kabine mit der Marken-Ecke oben links (das Fähnchen sitzt in einer Aussparung), die Bewerbungs-Karte steht über
   der linken Kante des Fotos, darunter die Bildzeile. Grund wie bei den früheren Köpfen: der dunkle Verlauf, dazu der
   langsam wandernde blaue Schein. Schalter: Klasse hero-cab am Kopf. Der alte Karten-Kopf steht im Commit ce2133d.
   ===================================================================== */
.hero.hero-cab{background:linear-gradient(180deg,#121214 0%,#0b0b0d 100%);color:var(--w)}
.hero-cab::before{content:"";position:absolute;z-index:0;inset:-20%;pointer-events:none;background:radial-gradient(42% 54% at 56% 58%,rgba(0,85,255,.24) 0%,rgba(0,85,255,.07) 45%,rgba(0,85,255,0) 72%);animation:heroGlow 14s ease-in-out infinite alternate}
.hero-cab .hero-in{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;min-height:0;padding-block:calc(var(--hd) + 64px) 120px}
.hero-cab .hero-txt{grid-column:1/7;display:block;padding-top:72px}
.hero-cab .hero-txt .lab{color:var(--n300)}
.hero.hero-cab .t-hero{margin-top:30px;font-size:clamp(52px,7vw,100px);line-height:.93;letter-spacing:-.048em;font-weight:700;color:var(--w)}
.hero.hero-cab .t-hero .ln{padding-bottom:.14em;margin-bottom:-.14em}
.hero.hero-cab .t-lead{margin-top:34px;max-width:30em;font-size:21px;line-height:1.48;color:#D4D4D8;letter-spacing:-.006em;text-wrap:pretty}
.hero.hero-cab .acts{margin-top:42px;gap:18px 30px}
.hero-cab .btn{height:56px}
.lk{display:inline-flex;align-items:center;gap:8px;font-weight:600;letter-spacing:-.006em;padding-bottom:4px;color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .35s var(--e-out)}
.lk:hover{background-size:0 1px;background-position:100% 100%}
.hero-cab .checks{display:flex;flex-wrap:wrap;gap:10px 24px;max-width:560px;margin:48px 0 0;padding:22px 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.18);font-size:14.5px;line-height:20px;color:#C9C9CF;animation:hcFade .8s var(--e-out) .9s both}
.hero-cab .checks li{display:flex;align-items:center;gap:8px}
.hero-cab .checks svg{flex:none;color:var(--b400)}
@keyframes hcFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* the photo with the corner of the B */
.hero-cab .hero-f{grid-column:8/13;position:relative;margin:0;min-width:0}
.bc{position:relative;--u:7px}
.bc img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 34%;clip-path:polygon(calc(var(--u)*8.83) 0,100% 0,100% 100%,0 100%,0 calc(var(--u)*8.04),calc(var(--u)*4.99) calc(var(--u)*8.04))}
.bc>.bca{position:absolute;left:calc(var(--u)*-2.01);top:calc(var(--u)*-.54);width:calc(var(--u)*8.44);height:calc(var(--u)*6.19);fill:var(--b);z-index:2;animation:bcIn 1.1s var(--e-out) .25s both}
@keyframes bcIn{from{transform:translate(-34%,-34%)}to{transform:none}}
/* the card: an application, as the office sees it */
.hc{position:absolute;left:calc(-1 * ((100% - 96px) / 5 + 48px));bottom:34px;width:344px;background:var(--w);color:var(--k);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);z-index:3;animation:hcIn 1s var(--e-out) .45s backwards;transition:transform .5s var(--e-out),box-shadow .5s var(--e-out)}
@media (hover:hover) and (min-width:901px){.hc:hover{transform:translateY(-4px);box-shadow:0 40px 70px -22px rgba(0,0,0,.75)}}
@keyframes hcIn{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}} /* fades in too, so the card never shows its final values before the build-up starts */
.hc p{margin:0}
.hc-top{display:flex;justify-content:space-between;align-items:center;height:44px;padding:0 18px;box-shadow:inset 0 -1px 0 var(--n200);font-size:12px;line-height:16px}
.hc-new{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--b)}
.hc-new i{display:block;width:7px;height:7px;background:var(--b);animation:hcPing 2.4s var(--e-out) infinite}
@keyframes hcPing{0%{box-shadow:0 0 0 0 rgba(0,85,255,.5)}70%{box-shadow:0 0 0 7px rgba(0,85,255,0)}100%{box-shadow:0 0 0 0 rgba(0,85,255,0)}}
.hc-time{color:var(--n500);font-variant-numeric:tabular-nums}
.hc-b{padding:16px 18px 18px}
.hc-role{font-size:11.5px;line-height:16px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--n500)}
.hc-name{margin-top:6px;font-size:20px;line-height:24px;font-weight:600;letter-spacing:-.014em}
.hc-meta{margin-top:3px;font-size:13px;line-height:18px;color:var(--n700)}
.hc-dims{display:grid;gap:8px;margin-top:16px;padding-top:16px;box-shadow:inset 0 1px 0 var(--n100)}
.hc-dim{display:grid;grid-template-columns:116px minmax(0,1fr) 18px;align-items:center;gap:10px;font-size:12.5px;line-height:16px;color:var(--n700)}
.hc-seg{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px;height:6px}
.hc-seg i{display:block;background:var(--n200)}
.hc-seg i.on{background:var(--b)}
.hc-dim b{text-align:right;font-weight:600;color:var(--k);font-variant-numeric:tabular-nums}
.hc-q{margin-top:16px;padding:11px 14px 12px;background:var(--n100);font-size:14px;line-height:19px;font-weight:500}
.hc-q span{display:block;margin-bottom:3px;font-size:11px;line-height:14px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--n500)}
.hc-ok{display:flex;align-items:center;gap:8px;margin-top:13px;font-size:12.5px;line-height:16px;color:var(--n700)}
.hc-ok svg{flex:none;color:var(--b)}
.hc-tag{margin-top:12px;padding-top:10px;box-shadow:inset 0 1px 0 var(--n100);font-size:11.5px;line-height:16px;color:var(--n500)}
@media (max-width:1240px){
  .hc{left:calc(-1 * ((100% - 96px) / 5 + 24px))}
}
@media (max-width:1080px){
  .hero-cab .hero-txt{grid-column:1/8}
  .hero-cab .hero-f{grid-column:8/13}
  .hc{left:-64px;width:316px}
}
@media (max-width:900px){
  .hero-cab .hero-in{padding-top:calc(var(--hd) + 40px)}
  .hero-cab .hero-txt{grid-column:1/13;padding-top:24px}
  .hero-cab .hero-f{display:none} /* bis 900 px kein Foto und keine Karte im Kopf (user 10.11.), der Pfeil trägt den Kopf */
}
@media (max-width:760px){
  .hero-cab .hero-in{padding-block:calc(var(--hd) + 28px) 72px}
  .hero-cab .hero-txt{padding-top:16px}
  .hero.hero-cab .t-hero{margin-top:22px;font-size:54px;letter-spacing:-.046em}
  .hero.hero-cab .t-lead{margin-top:24px;font-size:18px;line-height:1.5}
  .hero.hero-cab .acts{flex-direction:column;align-items:stretch;gap:14px;margin-top:30px}
  .hero.hero-cab .acts .btn{width:100%;justify-content:space-between}
  .hero-cab .acts .lk{align-self:flex-start}
  .hero-cab .checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-top:34px;font-size:13.5px;line-height:18px}
  .hero-cab .checks li{align-items:flex-start}
  .hero-cab .checks svg{margin-top:2px}
}
@media (prefers-reduced-motion:reduce){
  .bc>.bca,.hc,.hero-cab .checks,.hc-new i,.hero-cab::before{animation:none}
}

/* =====================================================================
   10.11.2026 · KOPF auf dem Telefon (user): der Pfeil-Kopf kommt zurück. Hinter dem Textblock läuft wieder der große
   Pfeil (Fläche ruhig, Kontur pulsiert leise), von der Oberkante bis zur Unterkante des Kopfes, also ohne Schnittkante
   im Bild; die Linie und die vier Haken unter dem Knopf entfallen. Foto und Karte gibt es erst ab 901 px.
   ===================================================================== */
@media (max-width:900px){
  .hero-cab::before{content:none} /* kein blauer Schein auf dem Telefon, der Pfeil übernimmt */
  .hero-cab .hero-txt{position:relative;isolation:isolate}
  .hero-cab .hero-txt::before,.hero-cab .hero-txt::after{content:"";position:absolute;z-index:-1;left:-20px;right:-20px;top:calc(-1 * (var(--hd) + 40px + 24px));bottom:-120px;pointer-events:none;background-repeat:no-repeat;background-position:right center;background-size:auto 100%}
  .hero-cab .hero-txt::before{background-image:url(/img/arrow-large-on-dark-fill.svg);opacity:.7}
  .hero-cab .hero-txt::after{background-image:url(/img/arrow-large-on-dark-stroke.svg);opacity:.4;animation:ergPulse 7s ease-in-out infinite}
  .hero-cab .checks{display:none}
}
@media (max-width:760px){
  .hero-cab .hero-txt::before,.hero-cab .hero-txt::after{top:calc(-1 * (var(--hd) + 28px + 16px));bottom:-72px}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.hero-cab .hero-txt::after{animation:none;opacity:.45}}