:root{--blue-700:#005D9D;--blue-800:#00426F;--blue-600:#0072C1;--blue-500:#2B93D6;--navy-900:#00243D;--navy-950:#001B2E;--sky:#A0C7E7;--tint:#F3F7FB;--tint-2:#E5EEF7;--line:#DAE4EE;--ink:#0E2236;--muted:#4B5F72;--danger:#B3261E;--f-head:"Archivo","Helvetica Neue",Arial,sans-serif;--f-body:"IBM Plex Sans",system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1);--max:1590px;--pad:clamp(16px,2vw,28px)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.6 var(--f-body);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--f-head);letter-spacing:-.025em;line-height:1.05;font-weight:500;text-wrap:balance}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--blue-700);color:#fff;padding:10px 16px;border-radius:4px}.skip:focus{top:12px}
.wrap{width:min(100% - 2*var(--pad),var(--max));margin-inline:auto}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Bausteine */
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:#fff;border:1px solid var(--line);border-radius:4px;font:500 12px/1 var(--f-body);color:var(--ink)}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--blue-500)}
.pill{display:inline-flex;align-items:center;gap:14px;padding:5px 5px 5px 20px;border-radius:999px;border:0;background:var(--blue-700);color:#fff;text-decoration:none;font:600 13px/1 var(--f-body);letter-spacing:.01em;box-shadow:0 0 0 4px rgba(0,93,157,.16);cursor:pointer;transition:background .25s,box-shadow .25s}
.pill b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--blue-700);transition:transform .3s var(--ease)}
.pill:hover{background:var(--blue-800);box-shadow:0 0 0 6px rgba(0,93,157,.2)}.pill:hover b{transform:translateX(3px)}
.pill--light{background:#fff;color:var(--blue-700);box-shadow:0 0 0 4px rgba(255,255,255,.25)}.pill--light b{background:var(--blue-700);color:#fff}.pill--light:hover{background:var(--tint-2)}
.tlink{font:600 13px/1 var(--f-body);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}
.tlink:hover{color:var(--blue-700)}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
/* Navigation */
.nav{position:fixed;z-index:100;top:12px;left:12px;right:12px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:64px;background:#fff;border-radius:8px;box-shadow:0 8px 30px rgba(0,36,61,.16)}
.nav .logo{display:grid;place-items:center;height:64px;padding:0 clamp(16px,2vw,28px);border-right:1px solid var(--line)}.nav .logo img{height:32px;width:auto}
.nav ul.m{display:none;gap:2px;padding-left:clamp(8px,1.2vw,18px)}
.nav .m>li{position:relative}.nav .m>li.has{position:static}
.nav .m a,.nav .m button{display:inline-flex;align-items:center;gap:7px;padding:13px clamp(12px,1.2vw,18px);border:0;background:none;border-radius:999px;font:500 15.5px/1 var(--f-body);text-decoration:none;cursor:pointer;transition:background .2s}
.nav .m a:hover,.nav .m button:hover,.nav .m [aria-current=page],.nav .m .open>button{background:var(--tint)}
.nav .m [aria-current=page]{color:var(--blue-700)}
.nav .m .ic{width:14px;height:14px;transition:transform .25s}.nav .m .open .ic{transform:rotate(180deg)}
.dd{position:absolute;top:calc(100% + 10px);left:0;right:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,300px));justify-content:center;gap:12px;padding:16px;background:#fff;border-radius:8px;box-shadow:0 30px 70px rgba(0,36,61,.24);opacity:0;visibility:hidden;translate:0 8px;transition:.28s var(--ease)}
.dd::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.open>.dd,.has.open>.dd{opacity:1;visibility:visible;translate:0 0}
.nav .dd a{display:grid;grid-template-rows:auto 1fr;gap:0;padding:0;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#fff;font:inherit;transition:border-color .25s,box-shadow .25s}
.nav .dd a:hover{background:#fff;border-color:var(--blue-700);box-shadow:0 10px 30px rgba(0,36,61,.12)}
.dd .tm{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--tint)}.dd .tm img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}.nav .dd a:hover img{transform:scale(1.06)}
.dd .tt{display:grid;gap:4px;padding:14px 16px 16px;align-content:start}.dd .tt b{font:600 16px/1.2 var(--f-body)}
.dd small{font:400 13px/1.4 var(--f-body);color:var(--muted)}
.nav .r{display:flex;align-items:center;gap:10px;padding-right:12px;justify-self:end}
.nav .r .de{font:600 12px/1 var(--f-body);padding:0 8px}
.nav .r .pill{display:none}
.burger{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:var(--tint);cursor:pointer}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink);margin:2.5px 0;transition:.3s}
.burger[aria-expanded=true] span:first-child{translate:0 4px;rotate:45deg}.burger[aria-expanded=true] span:last-child{translate:0 -4px;rotate:-45deg}
.mnav{position:fixed;z-index:99;top:86px;left:12px;right:12px;max-height:calc(100dvh - 100px);overflow:auto;padding:8px 20px 22px;background:#fff;border-radius:6px;box-shadow:0 24px 60px rgba(0,36,61,.25)}
.mnav[hidden]{display:none}
.mnav>ul>li{border-bottom:1px solid var(--line)}
.mnav a,.mnav summary{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font:500 20px/1.2 var(--f-head);text-decoration:none;list-style:none;cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav details[open] summary .ic{rotate:180deg}
.mnav .sub{display:grid;padding:0 0 14px 4px}.mnav .sub a{font:500 15px/1.2 var(--f-body);color:var(--muted);padding:10px 0}
.mnav .cta{margin-top:20px}
@media(min-width:1200px){.nav ul.m{display:flex}.nav .r .pill{display:inline-flex}.burger,.mnav{display:none}}
/* Hero mit Portfolio-Ansichten */
.hero{position:relative;display:flex;flex-direction:column;min-height:max(680px,100svh);background:var(--navy-950);color:#fff}
.hero .intro{padding:112px var(--pad) 28px;text-align:center}
.hero h1{font-size:clamp(28px,3.8vw,56px);line-height:1.04}
.hero h1 span{display:block;color:var(--sky)}
.hero .intro p{margin:14px auto 0;max-width:40rem;color:rgba(255,255,255,.78);font-size:clamp(14px,1.2vw,16px)}
.split{flex:1;display:flex;min-height:420px;border-top:1px solid rgba(255,255,255,.2)}
.panel{position:relative;flex:1 1 0;display:flex;align-items:flex-end;overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;border-left:1px solid rgba(255,255,255,.2);transition:flex-grow .8s var(--ease)}
.panel:first-child{border-left:0}
.panel.on{flex-grow:2.4}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.78);transform:scale(1.05);transition:transform 1.2s var(--ease),filter .6s}
.panel.on img{transform:scale(1);filter:brightness(.95)}
.panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,27,46,.1) 20%,rgba(0,27,46,.9));opacity:var(--ov,1)}
.pc{width:100%;padding:0 clamp(18px,2.6vw,40px) clamp(22px,3vw,40px);display:grid;gap:12px;justify-items:start}
.pc .n{font:600 11px/1 var(--f-body);letter-spacing:.16em}
.pc .ico{display:grid;place-items:center;width:48px;height:48px;border-radius:4px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);transition:.4s}
.panel.on .ico{background:#fff;color:var(--blue-700)}
.pc h2{font-size:clamp(26px,2.8vw,42px);white-space:nowrap}
.more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s var(--ease),opacity .4s}
.more>div{overflow:hidden;display:grid;gap:14px;justify-items:start}
.panel.on .more{grid-template-rows:1fr;opacity:1}
.more p{max-width:30ch;color:rgba(255,255,255,.9);font-size:15px}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chips .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.go{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 var(--f-body)}
.go b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--blue-700);transition:transform .3s var(--ease)}
.panel:hover .go b{transform:translateX(4px)}
@media(max-width:899px){.split{flex-direction:column;min-height:0}.panel{min-height:300px;border-left:0;border-top:1px solid rgba(255,255,255,.2);flex-grow:0}.panel.on{flex-grow:0}.panel:first-child{border-top:0}.more{grid-template-rows:1fr;opacity:1}.pc h2{white-space:normal}.hero{min-height:0}.hero .intro{padding-top:104px}}
/* Kennzahlenband */
.kpi{position:relative;background:linear-gradient(115deg,var(--blue-800),var(--blue-700) 60%,#0a76bd);color:#fff;overflow:hidden}
.kpi ul{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr))}
.kpi li{display:grid;gap:clamp(12px,1.4vw,20px);align-content:start;padding:clamp(34px,4.4vw,74px) clamp(18px,2.4vw,44px);border-left:1px solid rgba(255,255,255,.26)}.kpi li:first-child{border-left:0}
.kpi .ki{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.1)}.kpi .ki .ic{width:21px;height:21px}
.kpi .kn{display:flex;align-items:baseline;gap:.14em;font:300 clamp(54px,6.6vw,112px)/.92 var(--f-head);letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi .kn em{align-self:flex-start;margin:.3em .1em 0 0;font:500 .27em/1 var(--f-head);font-style:normal;letter-spacing:0;color:var(--sky)}
.kpi .kn sup{align-self:flex-start;margin-top:.12em;font:400 .32em/1 var(--f-head);letter-spacing:0;color:var(--sky)}
.kpi .kl{font:600 clamp(12px,1vw,14px)/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
@media(max-width:760px){.kpi ul{grid-template-columns:1fr}.kpi li{grid-template-columns:auto 1fr;align-items:center;column-gap:18px;row-gap:4px;border-left:0;border-top:1px solid rgba(255,255,255,.26);padding:26px var(--pad)}.kpi li:first-child{border-top:0}.kpi .ki{grid-row:span 2}.kpi .kn{font-size:clamp(48px,15vw,72px)}}
/* Sektionen */
.sec{padding:clamp(70px,9vw,140px) 0}
.sec--tint{background:var(--tint)}
.sec h2{font-size:clamp(32px,4.2vw,64px)}
.lead{font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--muted);max-width:36rem}
.hd{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,5vw,90px);align-items:end;margin-bottom:clamp(36px,5vw,70px)}
.hd .chip{margin-bottom:22px}
@media(max-width:899px){.hd{grid-template-columns:1fr}}
.intro2{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,5vw,90px);align-items:end}
.intro2 .act{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:28px}
@media(max-width:899px){.intro2{grid-template-columns:1fr}}
.strip{margin-top:clamp(40px,5vw,72px);height:clamp(260px,42vw,620px);overflow:hidden;position:relative;border-radius:4px}
.strip img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover}
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){.strip img{animation:px linear both;animation-timeline:view();animation-range:cover}@keyframes px{from{transform:translateY(-5%)}to{transform:translateY(5%)}}}}
/* Leistungen-Raster */
.cards{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.cards a{position:relative;display:block;text-decoration:none;border-left:1px solid var(--line);overflow:hidden;background:#fff}.cards a:first-child{border-left:0}
.cards .im{position:relative;aspect-ratio:4/3.3;overflow:hidden;background:var(--tint)}
.cards .im img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.cards a:hover img{transform:scale(1.05)}
.cards .im::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,93,157,.9),rgba(0,93,157,0) 70%);opacity:0;transition:opacity .35s}
.cards a:hover .im::after,.cards a:focus-visible .im::after{opacity:var(--ov,1)}
.cards .no{position:absolute;left:0;top:0;z-index:2;background:var(--blue-700);color:#fff;font:700 12px/1 var(--f-body);padding:8px 10px}
.cards .tx{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 22px 26px}
.cards h3{font-size:clamp(20px,1.7vw,26px)}.cards small{display:block;color:var(--muted);font-size:13px;margin-top:6px;line-height:1.4}
.cards .ar{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--line);transition:.3s}
.cards a:hover .ar{background:var(--blue-700);color:#fff;border-color:var(--blue-700)}
@media(max-width:1099px){.cards{grid-template-columns:repeat(2,1fr)}.cards a:nth-child(3){border-left:0}.cards a:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:599px){.cards{grid-template-columns:1fr}.cards a{border-left:0;border-top:1px solid var(--line)}.cards a:first-child{border-top:0}.cards .im{aspect-ratio:16/9}}
/* Eigenes Design */
.dsg{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(115deg,var(--blue-800),var(--blue-700) 60%,var(--blue-500));color:#fff;border-radius:4px}
.dsg .tx{padding:clamp(28px,5vw,80px);display:grid;gap:20px;justify-items:start;align-content:center}
.dsg h2{font-size:clamp(30px,3.8vw,58px)}.dsg h2 span{display:block;color:var(--sky)}
.dsg p{max-width:34rem;color:rgba(255,255,255,.9)}
.dsg ul{display:flex;gap:10px;flex-wrap:wrap}.dsg li{padding:9px 14px;border:1px solid rgba(255,255,255,.4);border-radius:4px;font:600 13px/1 var(--f-body);background:rgba(255,255,255,.1)}
.dsg figure{position:relative;margin:0;min-height:340px}.dsg figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dsg figure::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--blue-700),transparent 55%);opacity:var(--ov,1)}
@media(max-width:899px){.dsg{grid-template-columns:1fr}.dsg figure{order:-1;min-height:220px}.dsg figure::after{background:linear-gradient(0deg,var(--blue-800),transparent 60%)}}
/* Reichweite */
.reach{background:var(--navy-950);color:#fff}
.reach .grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,90px);align-items:center}
.reach .chip{margin-bottom:22px}.reach h2{margin-bottom:18px}.reach .lead{color:rgba(255,255,255,.75);margin-bottom:34px}
.lv{border-top:1px solid rgba(255,255,255,.18)}
.lv button{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:baseline;width:100%;padding:18px 0;border:0;border-bottom:1px solid rgba(255,255,255,.18);background:none;color:#fff;text-align:left;cursor:pointer;opacity:.5;transition:opacity .3s}
.lv button:hover,.lv button[aria-pressed=true]{opacity:1}
.lv .k{font:600 12px/1 var(--f-body);letter-spacing:.1em;color:var(--sky)}
.lv b{font:500 clamp(24px,2.6vw,38px)/1.1 var(--f-head);letter-spacing:-.03em}
.lv small{display:block;font:400 13px/1.4 var(--f-body);color:rgba(255,255,255,.7);max-height:0;opacity:0;overflow:hidden;transition:.45s var(--ease)}
.lv button[aria-pressed=true] small{max-height:3.5em;opacity:1;margin-top:6px}
.lv .tag{font:600 12px/1 var(--f-body);color:var(--sky);opacity:0;transition:.3s}.lv button[aria-pressed=true] .tag{opacity:1}
.reach .vis{position:relative;aspect-ratio:4/3.1;overflow:hidden;border-radius:4px;background:var(--navy-900)}
.reach .vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s,transform 5s var(--ease)}
.reach .vis img.on{opacity:1;transform:none}
.reach .vis figcaption{position:absolute;left:0;bottom:0;background:#fff;color:var(--ink);padding:10px 14px;font:600 12px/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase}
@media(max-width:899px){.reach .grid{grid-template-columns:1fr}.reach .vis{order:-1}}
/* Unternehmen */
.firm{display:grid;grid-template-columns:6fr 6fr;gap:clamp(24px,5vw,90px);align-items:center}
.firm figure{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:4px}.firm figure img{width:100%;height:100%;object-fit:cover}
.firm h2{margin:20px 0 20px}.firm .act{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:28px}
@media(max-width:899px){.firm{grid-template-columns:1fr}}
/* FAQ */
.faq{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,6vw,110px)}
.faq h2{font-size:clamp(30px,3.6vw,54px);margin-top:20px}
.acc{border-top:1px solid var(--ink)}
.acc h3{font:inherit}
.acc button{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;padding:24px 0;border:0;background:none;text-align:left;cursor:pointer;font:500 clamp(18px,1.6vw,23px)/1.25 var(--f-head);letter-spacing:-.015em}
.acc .pm{position:relative;width:18px;height:18px;flex:none}.acc .pm::before,.acc .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}.acc .pm::after{rotate:90deg}
.acc button[aria-expanded=true] .pm::after{rotate:0deg}
.acc .it{border-bottom:1px solid var(--line)}
.acc .pn{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}.acc .pn.open{grid-template-rows:1fr}
.acc .pn>div{overflow:hidden}.acc .pn p{padding:0 0 26px;max-width:46rem;color:var(--muted)}
@media(max-width:899px){.faq{grid-template-columns:1fr}}
/* CTA */
.cta{position:relative;background:linear-gradient(120deg,var(--navy-900),var(--blue-800) 70%,var(--blue-700));color:#fff;text-align:center;overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;right:clamp(16px,4vw,64px);top:50%;translate:0 -50%;width:clamp(200px,22vw,360px);aspect-ratio:2.08;background:url("../img/logo-weiss.svg") no-repeat center/contain;opacity:.07;z-index:-1}
@media(max-width:1000px){.cta::before{display:none}}
.cta h2{font-size:clamp(34px,5.6vw,86px);max-width:14ch;margin:0 auto 38px;font-weight:400}.cta h2 span{color:var(--sky)}
.cta .act{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
/* Footer */
.foot{background:var(--tint);padding:clamp(60px,7vw,100px) 0 30px;border-top:1px solid var(--line)}
.foot .g{display:grid;grid-template-columns:4fr 3fr 2fr 2fr 2fr;gap:clamp(24px,3vw,56px)}
.foot img{height:32px;width:auto;margin-bottom:20px}
.foot p,.foot address{font-style:normal;font-size:14px;color:var(--muted);line-height:1.65}
.foot h4{font:600 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.foot li a{display:inline-block;padding:5px 0;font-size:14px;text-decoration:none}.foot li a:hover{color:var(--blue-700)}
.foot .tel{font:500 22px/1.2 var(--f-head);letter-spacing:-.02em;text-decoration:none}
.foot .bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(40px,5vw,70px);padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.foot .bot a{text-decoration:none;margin-left:16px}.foot .bot a:hover{color:var(--blue-700)}
@media(max-width:1099px){.foot .g{grid-template-columns:1fr 1fr}.foot .g>:first-child{grid-column:1/-1}}
@media(max-width:559px){.foot .g{grid-template-columns:1fr}}
.totop{position:fixed;right:14px;bottom:14px;z-index:90;display:grid;place-items:center;width:38px;height:56px;border:0;border-radius:999px;background:#fff;color:var(--blue-700);box-shadow:0 8px 24px rgba(0,36,61,.2);cursor:pointer;opacity:0;visibility:hidden;translate:0 10px;transition:.3s}
.totop.show{opacity:1;visibility:visible;translate:0 0}
/* Seitenkopf (Unterseiten) */
.ph{padding:clamp(120px,14vw,190px) 0 clamp(40px,5vw,70px)}
.ph h1{font-size:clamp(46px,7vw,112px);line-height:.95;letter-spacing:-.045em}
.ph .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.ph .lead{justify-self:end}
.crumbs{display:flex;gap:8px;font:500 12px/1 var(--f-body);color:var(--muted);margin-bottom:26px}.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--blue-700)}
@media(max-width:899px){.ph .row{grid-template-columns:1fr}.ph .lead{justify-self:start}}
/* Kontakt B */
.kt{display:grid;grid-template-columns:5fr 7fr;border-top:1px solid var(--ink)}
.direct{padding:36px clamp(20px,3vw,48px) 40px 0;border-right:1px solid var(--line)}
.direct h2,.fm h2{font:600 12px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.big{display:block;font:400 clamp(24px,2.7vw,40px)/1.15 var(--f-head);letter-spacing:-.03em;text-decoration:none;padding:16px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere;transition:.25s var(--ease)}
.big:hover{color:var(--blue-700);padding-left:12px}
.big small{display:block;font:500 12px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.team{margin-top:36px}
.team h2{margin-bottom:6px}
.team li{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.team b{display:block;font-weight:600}.team small{color:var(--muted)}.team a{font-weight:600;text-decoration:none;color:var(--blue-700);font-variant-numeric:tabular-nums}.team a:hover{text-decoration:underline}
.fm{padding:36px 0 40px clamp(20px,4vw,64px)}
.fm h3{font-size:clamp(28px,2.6vw,38px);margin-bottom:26px}
.tabs{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:4px;width:max-content;max-width:100%;margin-bottom:30px;overflow:hidden}
.tabs label{position:relative;cursor:pointer}.tabs input{position:absolute;opacity:0;inset:0;cursor:pointer}
.tabs span{display:block;padding:13px 20px;border-right:1px solid var(--line);font:600 13px/1 var(--f-body);transition:.2s}
.tabs label:last-child span{border-right:0}
.tabs input:checked+span{background:var(--ink);color:#fff}
.tabs input:focus-visible+span{outline:2px solid var(--blue-500);outline-offset:-3px}
.tabs-err,.err{display:none;color:var(--danger);font-size:13px;margin:-18px 0 18px;font-weight:500}
.fl.bad .err{display:block}
.line{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.fl{position:relative;margin-bottom:28px}
.fl .box{position:relative;border-bottom:1.5px solid var(--ink)}
.fl input,.fl textarea{width:100%;border:0;background:none;padding:24px 0 10px;font:500 17px/1.3 var(--f-body);outline:none;resize:vertical;border-radius:0}
.fl label{position:absolute;left:0;top:23px;color:var(--muted);font-size:16px;pointer-events:none;transition:.25s var(--ease)}
.fl input:focus+label,.fl input:not(:placeholder-shown)+label,.fl textarea:focus+label,.fl textarea:not(:placeholder-shown)+label{top:0;font:600 11px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-700)}
.fl .box:focus-within{border-color:var(--blue-700)}
.fl.bad .box{border-color:var(--danger)}.fl .err{margin:8px 0 0}
.fl.full{grid-column:1/-1}
.consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:14px;color:var(--muted);margin-bottom:6px}
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--blue-700)}
.consent a{color:var(--blue-700)}
.consent+.err{margin:8px 0 0}
.send{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:24px}
.send small{color:var(--muted);max-width:24rem;font-size:13px}
.ok{display:none;padding:30px 0}
.ok h3{margin:14px 0}
.ok dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:22px 0;padding:18px;background:var(--tint);border-radius:4px;font-size:14px}
.ok dt{color:var(--muted);font-weight:600}.ok dd{margin:0;overflow-wrap:anywhere}
.fm.sent form{display:none}.fm.sent .ok{display:block}
@media(max-width:899px){.kt{grid-template-columns:1fr}.direct{border-right:0;padding-right:0;border-bottom:1px solid var(--line)}.fm{padding-left:0}.line{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ===== Ergänzungen: Bausteine der Unterseiten ===== */
.lbtn{position:relative;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:var(--tint);cursor:pointer;transition:background .2s}
.lbtn:hover{background:var(--tint-2)}
.lcnt{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;border-radius:999px;background:var(--blue-700);color:#fff;border:2px solid #fff;font:700 10px/1 var(--f-body)}
.lcnt[data-n="0"]{display:none}
.lcnt.bump{animation:bump .4s var(--ease)}@keyframes bump{40%{transform:scale(1.4)}}
.act{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:28px}
.note{margin-top:22px;font-size:13.5px;color:var(--muted);max-width:60rem}
.two{display:grid;grid-template-columns:6fr 6fr;gap:clamp(24px,5vw,90px);align-items:center}
.two figure{margin:0;position:relative;overflow:hidden;border-radius:4px}
.two figure img{width:100%;aspect-ratio:4/3.1;object-fit:cover}
.two figcaption{position:absolute;left:0;bottom:0;background:#fff;color:var(--ink);padding:9px 14px;font:600 11.5px/1.2 var(--f-body);letter-spacing:.07em;text-transform:uppercase}
.two.flip>:first-child{order:2}
@media(max-width:899px){.two{grid-template-columns:1fr}.two.flip>:first-child{order:0}}
.specs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(36px,5vw,70px);border:1px solid var(--line)}
.specs li{padding:22px 24px;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.specs li:nth-child(3n+1){border-left:0}.specs li:nth-child(-n+3){border-top:0}
.specs b{display:block;font:500 clamp(18px,1.6vw,24px)/1.2 var(--f-head);letter-spacing:-.02em}.specs span{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
@media(max-width:899px){.specs,.specs[style]{grid-template-columns:1fr 1fr!important}.specs li{border-left:0!important;border-top:1px solid var(--line)!important}.specs li:nth-child(-n+2){border-top:0!important}}
@media(max-width:560px){.specs,.specs[style]{grid-template-columns:1fr!important}.specs li:nth-child(2){border-top:1px solid var(--line)!important}}
/* Sortiment */
.bar{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button,.chip-link{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 16px;background:#fff;border:1px solid var(--line);border-radius:999px;font:500 14px/1 var(--f-body);cursor:pointer;text-decoration:none;color:var(--ink);transition:.2s}
.filters button:hover,.chip-link:hover{border-color:var(--blue-700);color:var(--blue-700)}
.filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.filters i{font:600 11px/1 var(--f-body);font-style:normal;padding:4px 7px;border-radius:999px;background:var(--tint-2);color:var(--blue-700)}
.filters button[aria-pressed=true] i{background:rgba(255,255,255,.2);color:#fff}
.chip-link .ic{rotate:90deg;width:15px;height:15px;transition:translate .25s}.chip-link:hover .ic{translate:0 3px}
.search{position:relative;flex:1 1 240px;max-width:360px}.search .ic{position:absolute;left:14px;top:50%;translate:0 -50%;color:var(--muted)}
.search input{width:100%;min-height:44px;padding:0 16px 0 42px;border:1px solid var(--line);border-radius:4px;font:inherit;background:#fff}
.search input:focus{outline:none;border-color:var(--blue-700);box-shadow:0 0 0 4px rgba(0,93,157,.12)}
.hint{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2vw,28px);align-items:center;margin:clamp(22px,2.6vw,34px) 0 4px;padding:clamp(18px,2.2vw,28px) clamp(20px,2.8vw,40px);border-radius:4px;color:#fff;background:linear-gradient(110deg,var(--blue-800),var(--blue-700) 55%,var(--blue-500))}
.hint .hic{display:grid;place-items:center;width:56px;height:56px;border-radius:4px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4)}.hint .hic .ic{width:26px;height:26px}
.hint p{display:grid;gap:4px}.hint b{font:500 clamp(20px,2vw,28px)/1.15 var(--f-head);letter-spacing:-.02em}.hint p span{color:rgba(255,255,255,.9)}
.hint .pill .ic{rotate:90deg}
@media(max-width:820px){.hint{grid-template-columns:auto 1fr}.hint .pill{grid-column:1/-1;justify-self:start}}
.cat-group{margin-top:clamp(36px,4vw,60px)}.cat-group[hidden]{display:none}
.cat-group>h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:clamp(24px,2.4vw,34px);margin-bottom:6px}
.cat-count{font:500 13px/1 var(--f-body);color:var(--muted);letter-spacing:0}
.cat-intro{color:var(--muted);max-width:44rem}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:1px;margin-top:20px;background:var(--line);border:1px solid var(--line)}
.pcard{position:relative;display:grid;grid-template-rows:auto 1fr auto;background:#fff}.pcard[hidden]{display:none}
.pcard-media{position:relative;display:block;width:100%;aspect-ratio:3/2;margin:0;padding:0;border:0;border-bottom:1px solid var(--line);background:#fff;overflow:hidden;cursor:zoom-in}
.pphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pcard:hover .pphoto{transform:scale(1.05)}
.pcard-media>.pic{width:50%;margin:auto;position:absolute;inset:0;height:100%}
.pcard-tag{position:absolute;left:10px;top:10px;padding:5px 9px;border-radius:3px;background:#fff;border:1px solid var(--line);font:600 11px/1 var(--f-body);color:var(--ink)}
.pcard-photo{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--blue-700);color:#fff;font:600 11px/1 var(--f-body)}.pcard-photo .ic{width:13px;height:13px}
.pcard-body{padding:16px 18px 6px;display:grid;gap:3px;align-content:start}
.pcard-pos{font:600 11px/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-700)}
.pcard-body h4{font:500 18px/1.25 var(--f-head);letter-spacing:-.01em}
.pcard-sub{font-size:14px;color:var(--muted)}.pcard-note{font-size:13px;color:var(--muted)}
.pcard-spec{margin-top:10px;border-top:1px solid var(--line)}.pcard-spec div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.pcard-spec dt{color:var(--muted)}.pcard-spec dd{margin:0;font-weight:600;text-align:right}
.pcard-act{display:flex;justify-content:flex-end;padding:10px 18px 16px}
.add-btn{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:var(--blue-700);color:#fff;font:600 13px/1 var(--f-body);cursor:pointer;transition:background .2s}
.add-btn:hover{background:var(--blue-800)}.add-btn::after{content:"Zur Liste"}
.add-btn .ic-check{display:none}.add-btn.is-added{background:#17794A}.add-btn.is-added::after{content:"In der Liste"}.add-btn.is-added .ic-plus{display:none}.add-btn.is-added .ic-check{display:block}
.add-btn .ic{width:16px;height:16px}
.cat-empty{margin-top:30px;padding:24px;border:1px dashed var(--line);border-radius:4px;color:var(--muted)}
@media(max-width:560px){.pgrid{grid-template-columns:1fr 1fr}.pcard-body h4{font-size:16px}.add-btn::after{display:none}.add-btn{padding:0 12px}}
/* Eigenes Design (dunkel) */
.design{background:linear-gradient(120deg,var(--navy-900),var(--blue-800));color:#fff}
.design .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}.design .lead{color:rgba(255,255,255,.85)}
.design figure img{aspect-ratio:3/3.4;object-position:center}
.design figcaption{background:var(--blue-700)!important;color:#fff!important}
.opts{margin:26px 0 8px;display:grid;gap:12px}
.opts li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:18px 20px;border:1px solid rgba(255,255,255,.25);border-radius:4px;background:rgba(255,255,255,.06)}
.opts li>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--blue-700);font:700 16px/1 var(--f-head)}
.opts h3{font-size:22px;margin-bottom:4px}.opts p{color:rgba(255,255,255,.8);font-size:15px}
/* Mosaik / Lightbox */
.mos{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(150px,21vw,310px);gap:2px}
.gi2{position:relative;display:block;padding:0;border:0;background:var(--navy-900);overflow:hidden;cursor:zoom-in;border-radius:2px;min-height:0}
.gi2.w2{grid-column:span 2}
.gi2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gi2:hover img{transform:scale(1.04)}
.gi2 span{position:absolute;left:0;bottom:0;background:#fff;color:var(--ink);padding:8px 12px;font:600 11px/1.2 var(--f-body);letter-spacing:.07em;text-transform:uppercase;opacity:0;translate:0 8px;transition:.3s}
.gi2:hover span,.gi2:focus-visible span{opacity:1;translate:0 0}
@media(max-width:700px){.mos{grid-template-columns:1fr 1fr}.gi2.w2{grid-column:span 2}.gi2 span{opacity:1;translate:0 0}}
/* Lager, Transport, Unternehmen */
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin:26px 0;border:1px solid var(--line)}
.facts li{padding:16px 18px;border-left:1px solid var(--line)}.facts li:first-child{border-left:0}
.facts b{display:block;font:500 clamp(18px,1.7vw,24px)/1.1 var(--f-head);letter-spacing:-.02em}.facts span{font-size:13px;color:var(--muted)}
.clist{display:grid;gap:10px;margin:0 0 26px}.clist li,.clist a{display:flex;gap:12px;align-items:center;text-decoration:none}.clist .ic{color:var(--blue-700)}
.design .clist .ic{color:var(--sky)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.steps.three{grid-template-columns:repeat(3,1fr)}
.steps li{padding:26px clamp(14px,2vw,30px) 36px;border-left:1px solid var(--line)}.steps li:first-child{border-left:0}
.steps .no{display:block;font:300 clamp(44px,5vw,76px)/1 var(--f-head);letter-spacing:-.04em;color:var(--blue-700);margin-bottom:22px}.steps .no .ic{width:44px;height:44px}
.steps h3{font-size:clamp(20px,1.8vw,26px);margin-bottom:10px}.steps p{color:var(--muted);font-size:15px}
@media(max-width:899px){.steps,.steps.three{grid-template-columns:1fr 1fr}.steps li:nth-child(odd){border-left:0}.steps li{border-top:1px solid var(--line)}}
@media(max-width:560px){.steps,.steps.three{grid-template-columns:1fr}.steps li{border-left:0}}
.veh h3{font-size:clamp(26px,2.8vw,40px);margin-bottom:14px}
.spec{margin-top:22px;border-top:1px solid var(--line)}.spec div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.spec dt{color:var(--muted)}.spec dd{margin:0;font-weight:600;text-align:right}.spec dd.todo{color:var(--blue-700);font-weight:500;font-style:italic}
.ph-fig{display:grid;place-items:center;aspect-ratio:4/3.1;background:var(--tint);border:1px dashed var(--line)}.ph-fig span{display:grid;justify-items:center;gap:10px;color:var(--muted);font-size:14px}.ph-fig .ic{width:34px;height:34px}
.disp{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;padding:clamp(24px,3vw,44px);border:1px solid var(--line);border-radius:4px}.disp h2{font-size:clamp(28px,3vw,44px);margin:18px 0 8px}
.disp .big{border:0;min-width:300px}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#fff}.pillars.three{grid-template-columns:repeat(3,1fr)}
.pillars li{padding:30px 26px 36px;border-left:1px solid var(--line)}.pillars li:first-child{border-left:0}
.pi{display:grid;place-items:center;width:52px;height:52px;border-radius:4px;background:var(--tint);color:var(--blue-700);margin-bottom:22px}
.pillars h3{font-size:22px;margin-bottom:8px}.pillars p{color:var(--muted);font-size:15px}
@media(max-width:899px){.pillars,.pillars.three{grid-template-columns:1fr 1fr}.pillars li:nth-child(odd){border-left:0}.pillars li{border-top:1px solid var(--line)}.pillars li:nth-child(-n+2){border-top:0}}
@media(max-width:560px){.pillars,.pillars.three{grid-template-columns:1fr}.pillars li{border-left:0;border-top:1px solid var(--line)}.pillars li:first-child{border-top:0}}
.eco{background:var(--tint)}
.quote{margin:30px 0 0;padding:6px 0 6px 22px;border-left:3px solid var(--blue-700);font:500 clamp(20px,2vw,28px)/1.3 var(--f-head);letter-spacing:-.02em}
.people{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line)}
.people li{display:grid;gap:3px;align-content:start;padding:24px 20px;border-left:1px solid var(--line)}.people li:first-child{border-left:0}
.av{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--blue-700);color:#fff;font:700 13px/1 var(--f-body);margin-bottom:14px}
.people b{font:500 19px/1.2 var(--f-head)}.people small{color:var(--muted);font-size:13.5px}.people a{margin-top:10px;font-weight:600;font-size:14px;color:var(--blue-700);text-decoration:none;font-variant-numeric:tabular-nums}
@media(max-width:1099px){.people{grid-template-columns:repeat(3,1fr)}.people li:nth-child(3n+1){border-left:0}.people li{border-top:1px solid var(--line)}.people li:nth-child(-n+3){border-top:0}}
@media(max-width:620px){.people{grid-template-columns:1fr 1fr}.people li{border-left:1px solid var(--line)!important;border-top:1px solid var(--line)!important}.people li:nth-child(odd){border-left:0!important}.people li:nth-child(-n+2){border-top:0!important}}
.areas{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.area{display:grid;background:#fff}.area figure{margin:0;aspect-ratio:16/9;overflow:hidden}.area img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}.area:hover img{transform:scale(1.04)}
.area>div{padding:24px 26px 30px}.area .no{font:600 12px/1 var(--f-body);letter-spacing:.14em;color:var(--blue-700)}.area h3{font-size:clamp(22px,2vw,28px);margin:10px 0 8px}.area p{color:var(--muted)}
@media(max-width:760px){.areas{grid-template-columns:1fr}}
.locs{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:30px;background:var(--line);border:1px solid var(--line)}
.locs a{display:grid;gap:8px;padding:26px 28px;background:#fff;text-decoration:none;transition:.25s}.locs a:hover{background:var(--tint)}
.locs small{font:600 11px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.locs b{font:500 clamp(20px,2vw,28px)/1.2 var(--f-head);letter-spacing:-.02em}.locs span{display:inline-flex;gap:8px;align-items:center;color:var(--blue-700);font-weight:600;font-size:14px}
@media(max-width:700px){.locs{grid-template-columns:1fr}}
.legal{max-width:52rem}.legal h2{font-size:clamp(22px,2vw,28px);margin:38px 0 10px}.legal p,.legal li{color:var(--muted);margin-bottom:10px}.legal ul{list-style:disc;padding-left:22px}.legal a{color:var(--blue-700)}.legal b{color:var(--ink)}
/* Anfrageliste, Auswahl, Toast */
.sel{margin-bottom:24px;padding:16px 18px;background:var(--tint);border-radius:4px}.sel[hidden]{display:none}
.sel .sh{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:14px}.sel li{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-top:1px solid var(--line);font-size:14px}
dialog{padding:0;border:0;color:inherit;max-width:none;max-height:none}dialog::backdrop{background:rgba(0,27,46,.62)}
dialog .x{position:absolute;right:14px;top:14px;z-index:5;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:var(--tint);cursor:pointer;color:var(--ink)}dialog .x:hover{background:var(--blue-700);color:#fff}
.drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100%);height:100%;background:#fff;display:grid;grid-template-rows:auto 1fr auto;translate:100% 0;transition:translate .45s var(--ease)}
.drawer:not([open]){display:none}.drawer.is-open{translate:0 0}
.dh{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}.dh h2{font-size:26px}.dh .x{position:static}
.di{overflow:auto;padding:8px 24px}.df{display:grid;gap:14px;padding:20px 24px;border-top:1px solid var(--line);justify-items:start}.df[hidden]{display:none}.df p{font-size:13px;color:var(--muted)}
.dempty{padding:40px 0;color:var(--muted)}.dempty b{display:block;color:var(--ink);margin-bottom:6px}
.ditem{display:grid;gap:10px;padding:18px 0;border-bottom:1px solid var(--line)}.ditem h3{font:500 17px/1.25 var(--f-head)}.ditem small{color:var(--muted)}
.ditem .row{display:flex;justify-content:space-between;align-items:center}.qty{display:flex;border:1px solid var(--line);border-radius:4px}.qty button{width:36px;height:36px;border:0;background:#fff;cursor:pointer;font-size:18px}.qty input{width:52px;border:0;border-inline:1px solid var(--line);text-align:center;font:inherit}
.toast{position:fixed;left:50%;bottom:20px;z-index:300;translate:-50% 20px;display:flex;gap:16px;align-items:center;padding:14px 18px;background:var(--ink);color:#fff;border-radius:6px;font-size:14px;opacity:0;visibility:hidden;transition:.35s var(--ease);max-width:calc(100% - 28px)}
.toast.show{opacity:1;visibility:visible;translate:-50% 0}.toast button{border:0;background:none;color:var(--sky);font-weight:700;cursor:pointer}
/* Galerie-Dialog */
.gal{position:fixed;inset:0;margin:auto;width:min(1180px,calc(100% - 28px));max-height:calc(100dvh - 28px);background:#fff;border-radius:6px;overflow:hidden;opacity:0;transform:translateY(20px);transition:opacity .3s,transform .4s var(--ease)}
.gal:not([open]){display:none}.gal.is-open{opacity:1;transform:none}
.gc{display:grid;grid-template-columns:7fr 5fr;max-height:calc(100dvh - 28px)}
.gm{background:var(--tint);display:grid;grid-template-rows:1fr auto;min-width:0}
.gs{position:relative;aspect-ratio:3/2;background:#fff;min-width:0;min-height:0}.gmain{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.gn{position:absolute;top:50%;translate:0 -50%;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(0,36,61,.14)}.gn:hover{background:var(--blue-700);color:#fff}
.gp{left:14px}.gx{right:14px}.gn[hidden]{display:none}
.gcount{position:absolute;left:14px;bottom:14px;padding:6px 11px;border-radius:999px;background:var(--tint);border:1px solid var(--line);font:600 12px/1 var(--f-body)}.gcount[hidden]{display:none}
.gt{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line)}.gt[hidden]{display:none}
.gt button{width:92px;height:64px;padding:0;border:2px solid var(--line);border-radius:3px;overflow:hidden;background:#fff;cursor:pointer}.gt button.is-on{border-color:var(--blue-700)}.gt img{width:100%;height:100%;object-fit:cover}
.gi{display:grid;gap:12px;align-content:start;padding:clamp(54px,5vw,64px) clamp(22px,3vw,40px) 30px;overflow:auto}
.gtag{font:600 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-700)}.gtitle{font-size:clamp(26px,2.4vw,34px)}.gsub{color:var(--muted)}
.gspec{margin:4px 0 0;border-top:1px solid var(--line)}.gspec div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}.gspec dt{color:var(--muted)}.gspec dd{margin:0;font-weight:600}
.gsub:empty,.gspec:empty,.gnote:empty{display:none}.gact{margin-top:8px}.gact .pill[hidden]{display:none}.gadd.is-added{background:#17794A}.gnote{font-size:12.5px;color:var(--muted)}
@media(max-width:900px){.gal{overflow:auto}.gc{grid-template-columns:1fr;max-height:none}}
.lb{position:fixed;inset:0;margin:0;width:100%;height:100%;background:rgba(0,20,34,.96);color:#fff;display:grid;place-items:center;opacity:0;transition:opacity .3s}.lb:not([open]){display:none}.lb.is-open{opacity:1}
.lb figure{margin:0;display:grid;gap:12px;justify-items:center;padding:60px 70px 20px;max-height:100%}.lb img{max-width:100%;max-height:calc(100dvh - 150px);object-fit:contain;border-radius:3px}.lb figcaption{font-size:14px;opacity:.8}
.lb .x{background:rgba(255,255,255,.12);color:#fff}.lb .gn{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}.lp{left:14px}.lx{right:14px}
@media(max-width:700px){.lb figure{padding:60px 14px 20px}}
/* Karte */
.rgrid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,70px);align-items:center}
.lanes{border-top:1px solid rgba(255,255,255,.18)}
.lane{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:baseline;width:100%;padding:18px 0;border:0;border-bottom:1px solid rgba(255,255,255,.18);background:none;color:#fff;text-align:left;cursor:pointer;opacity:.5;transition:opacity .3s}
.lane:hover,.lane[aria-pressed=true]{opacity:1}.lane .k{font:600 12px/1 var(--f-body);letter-spacing:.1em;color:var(--sky)}
.lt{display:grid;gap:3px}.lt b{font:500 clamp(24px,2.6vw,38px)/1.1 var(--f-head);letter-spacing:-.03em}
.lt span,.lt em{font-style:normal;max-height:0;opacity:0;overflow:hidden;transition:.45s var(--ease);font-size:14px;color:rgba(255,255,255,.75)}.lt em{color:var(--sky);font-size:13px}
.lane[aria-pressed=true] .lt span{max-height:3em;opacity:1}.lane[aria-pressed=true] .lt em{max-height:3em;opacity:1;margin-top:2px}
@media(max-width:899px){.rgrid{grid-template-columns:1fr}}
.rs-map{margin:0;position:relative;aspect-ratio:23/20;overflow:hidden;border-radius:4px;border:1px solid rgba(160,199,231,.22);background:radial-gradient(90% 80% at 30% 15%,#0b4a7a,#00375C 55%,#00243D)}
.rs-map .lm{--z:.233;position:absolute;inset:0;width:100%;height:100%}
.rs-map .label{position:absolute;left:16px;bottom:12px;z-index:2;color:rgba(255,255,255,.6);font-size:12px}
.lm [data-lv]{transition:opacity .6s var(--ease)}
.lm .cty{fill:rgba(160,199,231,.07);stroke:rgba(160,199,231,.32);stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill .7s,stroke .7s}
.lm .cty-de{fill:rgba(43,147,214,.16);stroke:rgba(160,199,231,.8);stroke-width:1.6}.lm .cty-bnl{fill:rgba(160,199,231,.09);stroke:rgba(160,199,231,.5)}
[data-level="3"] .cty-de{fill:rgba(43,147,214,.32);stroke:#fff}[data-level="4"] .cty-de{fill:rgba(43,147,214,.1);stroke:rgba(160,199,231,.5)}[data-level="4"] .cty-bnl{fill:rgba(43,147,214,.45);stroke:#fff;stroke-width:2}
.lm .rg{fill:rgba(43,147,214,.05);stroke:rgba(160,199,231,.5);stroke-width:1.2;stroke-dasharray:4 6;vector-effect:non-scaling-stroke}
.lm .rt{fill:none;stroke:var(--blue-500);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.lm .nd{fill:var(--sky);r:calc(4px*var(--z))}.lm .tk{fill:#fff;opacity:0;r:calc(3.4px*var(--z));filter:drop-shadow(0 0 5px rgba(160,199,231,.9))}
.lm .lb{fill:#fff;font:600 calc(15px*var(--z))/1 var(--f-body);paint-order:stroke;stroke:var(--navy-950);stroke-width:calc(4px*var(--z));stroke-linejoin:round;opacity:0;transform:translate(calc(var(--dx,0)*1px*var(--z)),calc(var(--dy,0)*1px*var(--z)))}
.lm .lb-home{opacity:1;font-weight:700;font-size:calc(16px*var(--z))}
.lm .origin .core{fill:#fff;stroke:var(--blue-500);stroke-width:3.5px;r:calc(7px*var(--z));vector-effect:non-scaling-stroke}
.lm .origin .pulse{fill:none;stroke:var(--sky);stroke-width:2;r:calc(8px*var(--z));transform-box:fill-box;transform-origin:center;animation:opulse 2.6s ease-out infinite}.lm .origin .p2{animation-delay:1.3s}
@keyframes opulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3);opacity:0}}
.lm .cl{pointer-events:none;font-family:var(--f-body);font-weight:600;font-size:calc(13px*var(--z));letter-spacing:.2em;fill:rgba(255,255,255,.6)}.lm .cl-oth{fill:rgba(160,199,231,.42)}.lm .cl-de{font-size:calc(19px*var(--z));fill:rgba(255,255,255,.72)}.lm .cl-bnl{font-size:calc(14px*var(--z));font-weight:700;fill:#fff}.lm .cl-sea{font-style:italic;font-weight:500;fill:rgba(160,199,231,.3)}
.lm .cl-line{fill:none;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.8}
[data-level="1"] [data-lv="2"],[data-level="1"] [data-lv="3"],[data-level="1"] [data-lv="4"],[data-level="2"] [data-lv="3"],[data-level="2"] [data-lv="4"],[data-level="3"] [data-lv="4"]{opacity:0}
[data-level="1"] :is(.lb,.tk)[data-lv="1"],[data-level="2"] :is(.lb,.tk)[data-lv="2"],[data-level="3"] :is(.lb,.tk)[data-lv="3"],[data-level="4"] :is(.lb,.tk)[data-lv="4"]{opacity:1}
[data-level="2"] :is(.rt,.nd,.rg)[data-lv="1"],[data-level="3"] :is(.rt,.nd,.rg)[data-lv="1"],[data-level="3"] :is(.rt,.nd,.rg)[data-lv="2"],[data-level="4"] :is(.rt,.nd,.rg)[data-lv="1"],[data-level="4"] :is(.rt,.nd,.rg)[data-lv="2"],[data-level="4"] :is(.rt,.nd,.rg)[data-lv="3"]{opacity:.16}
[data-level="4"] .cl-de[data-lv="3"]{opacity:0}
@media(max-width:560px){.rs-map{aspect-ratio:1/1}.lm .lb{font-size:calc(26px*var(--z));stroke-width:calc(7px*var(--z))}.lm .lb-home{font-size:calc(27px*var(--z))}.lm .nd{r:calc(6px*var(--z))}.lm .cl{font-size:calc(19px*var(--z))}.lm .cl-de{font-size:calc(27px*var(--z))}.lm .cl-bnl{font-size:calc(20px*var(--z))}.rs-map .label{display:none}}
.crumbs span[aria-current]{color:var(--ink)}
.locs+.x{display:none}
button.tlink{background:none;border:0;border-bottom:1.5px solid currentColor;padding:0 0 3px;border-radius:0;cursor:pointer;color:var(--ink)}
button.tlink:hover{color:var(--blue-700)}
.ditem .tlink{font-size:13px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-err{margin:16px 0 0;padding:12px 14px;border:1px solid var(--danger);border-radius:4px;background:#fff5f4}
.form-err a{color:var(--danger);font-weight:600}
.send .pill[disabled]{opacity:.6;cursor:progress}

/* ===== Video-Hintergründe, Scroll-Seiten, Karte ===== */
.jbg{position:absolute;inset:0;z-index:-1;margin:0;background:var(--navy-800);overflow:hidden}
.jbg video,.jbg>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateZ(0);backface-visibility:hidden}   /* Abdunkelung als Überlagerung statt filter: ein Filter auf Videos kostet in jedem Bild Rechenzeit und ruckelt */
.jbg::after{content:"";position:absolute;inset:0;opacity:var(--ov,1);background:linear-gradient(rgba(0,8,16,.15),rgba(0,8,16,.15)),linear-gradient(90deg,rgba(0,27,46,.9) 0%,rgba(0,27,46,.66) 42%,rgba(0,27,46,.12) 100%),linear-gradient(180deg,rgba(0,27,46,.25) 0%,transparent 30%,rgba(0,27,46,.5) 100%)}
.journey,.fleet{background:var(--tint);padding-bottom:0}
.journey .hd,.fleet .hd{margin-bottom:clamp(20px,3vw,40px)}
.jstack{--jhold:clamp(240px,36svh,380px);position:relative}
.jtail{display:none}
.jchap{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--navy-900);border-radius:8px 8px 0 0;box-shadow:0 -14px 40px rgba(0,36,61,.28);display:grid;align-items:center;min-height:min(86svh,720px)}
.jgrid{display:grid;grid-template-columns:minmax(0,1fr);padding-block:clamp(48px,6vw,96px)}
.jtext{max-width:38rem;display:grid;gap:clamp(12px,1.4vw,20px);justify-items:start}
.jnum{font:300 clamp(54px,6vw,96px)/1 var(--f-head);letter-spacing:-.04em;color:var(--sky)}
.jtext h3{font-size:clamp(34px,4.6vw,72px);color:#fff;font-weight:500}
.jtext p{color:rgba(255,255,255,.9);font-size:clamp(16px,1.3vw,19px)}
.jchips{display:flex;flex-wrap:wrap;gap:8px}
.jchips li{padding:8px 12px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.14);border-radius:4px;font:600 12.5px/1 var(--f-body);color:#fff}
.jchips.dk li{background:var(--tint);border-color:var(--line);color:var(--ink)}
.jlink{display:inline-flex;align-items:center;gap:14px;margin-top:6px;color:#fff;font:600 14px/1 var(--f-body);text-decoration:none}
.jlink b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--blue-700);transition:transform .3s var(--ease)}.jlink:hover b{transform:translateX(5px)}
.jcap{position:absolute;right:clamp(20px,4vw,56px);bottom:clamp(18px,2.6vw,36px);margin:0;font:500 12.5px/1 var(--f-body);color:rgba(255,255,255,.8);letter-spacing:.06em;text-transform:uppercase}.jcap b{color:var(--sky);margin-right:10px}
@media(min-width:1000px){
  .jchap{position:sticky;top:calc(88px + var(--i) * 14px);min-height:calc(100svh - 88px - var(--i) * 14px)}
  .jchap+.jchap{margin-top:var(--jhold)}
  .jtail{display:block;height:var(--jhold)}
}
@media(max-width:999px){.jbg::after{background:linear-gradient(180deg,rgba(0,27,46,.45) 0%,rgba(0,27,46,.82) 55%,rgba(0,27,46,.92) 100%)}.jchap{align-items:end}.jcap{display:none}}
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){.jchap .jbg.parallax>video,.jchap .jbg.parallax>img{animation:none;height:100%;top:0}   /* in den gestapelten Kapiteln kein Scroll-Parallax: die Karten bewegen sich schon, das doppelte Ruckeln entfällt */
.jbg.parallax>video,.jbg.parallax>img{animation:jpx linear both;animation-timeline:view();animation-range:cover;height:116%;top:-8%}@keyframes jpx{from{transform:translateY(-5%)}to{transform:translateY(5%)}}}}
.vband{position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:center;min-height:min(78svh,660px);color:#fff;background:var(--navy-900)}
.vt{max-width:40rem;display:grid;gap:clamp(14px,1.6vw,22px);justify-items:start;padding-block:clamp(60px,8vw,120px)}
.vt .chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.vt h2{font-size:clamp(34px,4.8vw,74px);color:#fff}
.vt p{color:rgba(255,255,255,.9);font-size:clamp(16px,1.3vw,19px)}
.vt .pill{margin-top:8px}
/* Transport-Karte: komplette Reichweite auf einen Blick, dauerhaft animiert (kein Scroll-Effekt) */
.rmap-sec{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(720px,92svh,980px);background:var(--navy-950);color:#fff}
.rmap-sec .wrap{position:static}.rcopy{max-width:32rem}
.rmap-sec h2{margin-bottom:18px}.rmap-sec .lead{color:rgba(255,255,255,.8);margin-bottom:30px}
.rmap{position:absolute;inset:0;z-index:-1;margin:0;overflow:hidden;background:radial-gradient(70% 90% at 72% 45%,#0b4a7a,#00375C 48%,var(--navy-950) 100%)}
.rmap .lm{position:absolute;inset:0;width:100%;height:100%}
.rmap::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--navy-950) 0%,rgba(0,27,46,.9) 24%,rgba(0,27,46,.45) 37%,rgba(0,27,46,0) 50%),linear-gradient(180deg,var(--navy-950) 0%,rgba(0,27,46,0) 14%,rgba(0,27,46,0) 84%,var(--navy-950) 100%)}
.rmap-cap{position:absolute;right:var(--pad);bottom:16px;margin:0;font-size:12px;color:rgba(255,255,255,.55)}
.rlg{border-top:1px solid rgba(255,255,255,.18)}
.rlg li{display:grid;grid-template-columns:42px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.18);transition:opacity .3s}
.rlg .k{font:600 12px/1 var(--f-body);letter-spacing:.1em;color:var(--sky);padding-top:7px}
.rlg .k::before{content:"";display:block;width:24px;height:3px;margin-bottom:9px;border-radius:2px;background:var(--c)}
.rlg b{display:block;font:500 clamp(22px,2.2vw,32px)/1.1 var(--f-head);letter-spacing:-.03em}
.rlg .lt span,.rlg .lt em{display:block;max-height:none;opacity:1;overflow:visible}
.rlg .lt span{margin-top:4px;font-size:14px;color:rgba(255,255,255,.75)}
.rlg .lt em{margin-top:2px;font-style:normal;font-size:13px;color:var(--sky)}
.rlg:hover li{opacity:.45}.rlg li:hover{opacity:1}
.rmap .lm .lb,.rmap .lm .tk{opacity:1}.rmap .lm .lb{display:inline;position:static}
.rmap .lm .cty-de{fill:rgba(43,147,214,.2);stroke:rgba(160,199,231,.85)}
.rmap .lm .cty-bnl{fill:rgba(43,147,214,.3);stroke:#fff;stroke-width:1.6}
.rmap .lm .rt[data-lv="1"]{stroke:#fff}.rmap .lm .rt[data-lv="2"]{stroke:var(--sky)}.rmap .lm .rt[data-lv="4"]{stroke:var(--sky);stroke-dasharray:5 5}
.rmap .lm .nd{stroke:var(--sky);stroke-opacity:0;vector-effect:non-scaling-stroke;animation:ndping 3.2s ease-out infinite}
.rmap .lm .nd:nth-child(4n+2){animation-delay:.8s}.rmap .lm .nd:nth-child(4n+3){animation-delay:1.6s}.rmap .lm .nd:nth-child(4n){animation-delay:2.4s}
@keyframes ndping{0%{stroke-width:0;stroke-opacity:.85}70%,100%{stroke-width:18px;stroke-opacity:0}}
.rmap-sec:has(.rlg li[data-lv="1"]:hover) .lm [data-lv]:not([data-lv="1"]),.rmap-sec:has(.rlg li[data-lv="2"]:hover) .lm [data-lv]:not([data-lv="2"]),.rmap-sec:has(.rlg li[data-lv="3"]:hover) .lm [data-lv]:not([data-lv="3"]),.rmap-sec:has(.rlg li[data-lv="4"]:hover) .lm [data-lv]:not([data-lv="4"]){opacity:.12}
@media(max-width:999px){.rmap-sec{display:block;min-height:0}.rcopy{max-width:none}.rmap-sec .lead{margin-bottom:0}.rmap{position:relative;inset:auto;z-index:auto;aspect-ratio:1/1;max-height:80svh;margin:28px calc(-1 * var(--pad))}.rmap .lm{inset:0 0 auto auto;width:166.7%}.rmap::after{background:linear-gradient(180deg,var(--navy-950) 0%,rgba(0,27,46,0) 12%,rgba(0,27,46,0) 88%,var(--navy-950) 100%)}.rmap-cap{display:none}}
@media(max-width:560px){.rmap .lm .lb[data-lv="4"]{display:none}}
@media(prefers-reduced-motion:reduce){.rmap .lm .nd{animation:none}}

/* Fahrzeugtypen im Grundriss: LKW bauen sich Teil für Teil auf */
.vp{display:grid;gap:clamp(18px,2.4vw,32px)}
.vp-row{display:grid;grid-template-columns:minmax(180px,1fr) 4.2fr;gap:clamp(18px,3vw,48px);align-items:center;padding:clamp(18px,2.6vw,36px);border:1px solid var(--line);border-radius:8px;background:#fff}
.vp-meta{display:grid;gap:8px;justify-items:start}
.vp-k{font:300 clamp(40px,4vw,64px)/1 var(--f-head);letter-spacing:-.04em;color:var(--blue-700)}
.vp-meta h3{font-size:clamp(24px,2.3vw,34px)}
.vp-meta p{color:var(--muted);font-size:15px}
.vp-stage{--px:clamp(8px,1.4vw,20px);position:relative;padding:clamp(6px,1vw,14px) var(--px) clamp(76px,6.4vw,92px);border-radius:6px;background:#E8E9EC}
.vp-ph{position:relative;aspect-ratio:var(--ar)}
.vp-f{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent),linear-gradient(transparent,#000 16%,#000 85%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent),linear-gradient(transparent,#000 16%,#000 85%,transparent);mask-composite:intersect}
html:not(.fx) .vp-p{display:none}
.vp-logo{position:absolute;height:auto;translate:-50% -50%;opacity:.95}
.vp-line{position:absolute;top:calc(100% + clamp(12px,1.4vw,18px));height:1.6px;background:var(--ink);transform-origin:0 50%}
.vp-line::before,.vp-line::after{content:"";position:absolute;top:-6px;width:1.6px;height:13px;background:var(--ink)}
.vp-line::before{left:0}.vp-line::after{right:0}
.vp-dim{position:absolute;left:calc(var(--px) + (100% - 2 * var(--px)) * (var(--x) * (1 + 2 * var(--m,0)) - var(--m,0)));bottom:clamp(8px,1vw,14px);translate:-50% 0;width:max-content;margin:0;display:grid;justify-items:center;gap:2px;text-align:center;white-space:nowrap}
.vp-dim b{font:600 clamp(18px,1.8vw,26px)/1 var(--f-head);color:var(--ink);font-variant-numeric:tabular-nums}
.vp-dim small{font-size:12px;color:var(--muted)}
.vp-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.vp-foot p{color:var(--muted);font-size:15px;max-width:46rem}
.fx .vp-row .a{opacity:0}
.fx .vp-row.vp-on .a{animation:var(--an,vpFade) var(--du,.7s) var(--ease) var(--t,0s) both}
@keyframes vpFade{from{opacity:0}to{opacity:1}}
@keyframes vpGrowX{from{opacity:1;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes vpUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:899px){.vp-row{grid-template-columns:1fr}.vp-meta{grid-template-columns:auto 1fr;align-items:baseline;column-gap:14px}.vp-meta p{grid-column:1/-1}}
@media(max-width:599px){.vp-stage{--m:.08;padding-bottom:62px;overflow:hidden}.vp-ph{margin-inline:calc(var(--m) * -100%)}.vp-dim small{display:none}}
/* Slim-Banner Individuelles Design */
.ibar-sec{padding:clamp(36px,5vw,72px) 0}
.ibar{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,40px);align-items:center;padding:14px clamp(16px,2.4vw,32px) 14px 14px;border-radius:8px;color:#fff;background:linear-gradient(110deg,var(--blue-800),var(--blue-700) 60%,var(--blue-500))}
.ibar figure{margin:0;width:clamp(96px,12vw,170px);aspect-ratio:3/2;overflow:hidden;border-radius:5px}.ibar figure img{width:100%;height:100%;object-fit:cover}
.ibar h2{font-size:clamp(22px,2.2vw,32px);margin-bottom:6px}.ibar p{color:rgba(255,255,255,.9);max-width:44rem;font-size:15px}
.ibar .ia{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.ibar .tlink{color:#fff}.ibar .tlink:hover{color:var(--sky)}
@media(max-width:900px){.ibar{grid-template-columns:auto 1fr}.ibar .ia{grid-column:1/-1}}
@media(max-width:520px){.ibar{grid-template-columns:1fr}.ibar figure{width:100%;aspect-ratio:16/9}}
/* Individuelles Design: Wege */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px)}
.way{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.way figure{margin:0;aspect-ratio:16/10;overflow:hidden}.way img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}.way:hover img{transform:scale(1.04)}
.way>div{position:relative;padding:clamp(24px,3vw,40px);display:grid;gap:14px;justify-items:start}
.wl{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blue-700);color:#fff;font:700 18px/1 var(--f-head)}
.way h3{font-size:clamp(28px,3vw,44px)}.way p{color:var(--muted)}
@media(max-width:820px){.ways{grid-template-columns:1fr}}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:clamp(28px,4vw,56px)}.trio .gi2{aspect-ratio:16/10}.trio{grid-auto-rows:auto}
@media(max-width:600px){.trio{grid-template-columns:1fr 1fr}.trio .gi2:last-child{display:none}}
.area-a{display:grid;height:100%;text-decoration:none;color:inherit}
.more-l{display:inline-flex;gap:8px;align-items:center;margin-top:14px;color:var(--blue-700);font-weight:600;font-size:14px}.more-l .ic{width:16px;height:16px;transition:transform .3s var(--ease)}.area-a:hover .more-l .ic{transform:translateX(5px)}
/* Karriere: Stellen und Bewerbung */
.jm{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.jm i{font-style:normal;padding:5px 9px;border:1px solid var(--line);border-radius:3px;font:500 12px/1 var(--f-body);color:var(--muted);background:#fff}
.jt b{font:500 clamp(19px,1.8vw,26px)/1.2 var(--f-head);letter-spacing:-.02em}
.jc{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);flex:none;transition:.3s}.jc .ic{transition:transform .3s var(--ease)}
.jlist{border-top:1px solid var(--ink)}
.jlist a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .3s var(--ease)}
.jlist a:hover{padding-left:12px}.jlist a:hover .jc{background:var(--blue-700);color:#fff;border-color:var(--blue-700)}
.jobs{display:grid;gap:12px}
.job{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.job summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px clamp(18px,2.4vw,32px);cursor:pointer;list-style:none}.job summary::-webkit-details-marker{display:none}
.job[open] .jc{background:var(--blue-700);color:#fff;border-color:var(--blue-700)}.job[open] .jc .ic{rotate:180deg}
.job:target{border-color:var(--blue-700);box-shadow:0 0 0 3px rgba(0,93,157,.15)}
.jd{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);padding:6px clamp(18px,2.4vw,32px) 22px}
.jd h4{font:600 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-700);margin-bottom:14px}
.jd li{position:relative;padding:0 0 10px 18px;color:var(--muted);font-size:15px}.jd li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--blue-500)}
.ja{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:18px clamp(18px,2.4vw,32px) 26px;border-top:1px solid var(--line);background:var(--tint)}
@media(max-width:860px){.jd{grid-template-columns:1fr}}
.olist{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.olist a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:6px;text-decoration:none;transition:.25s}.olist a:hover{border-color:var(--blue-700)}.olist b{font:500 20px/1.2 var(--f-head)}.olist span{display:block;font-size:13px;color:var(--muted)}.olist .ic{color:var(--blue-700)}
@media(max-width:860px){.olist{grid-template-columns:1fr}}
.apply-kt .direct .bw{font-size:clamp(28px,3vw,44px);margin:0 0 16px}.apply-kt .direct .lead{margin-bottom:24px}
.sel2 select{width:100%;border:0;background:none;padding:26px 30px 10px 0;font:500 17px/1.3 var(--f-body);outline:none;border-radius:0;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230E2236' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center}
.fl.sel2 label{top:0;font:600 11px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-700)}
.filebox{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:4px 0 20px;position:relative}
.filebox input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0}
.fbtn{display:inline-flex;align-items:center;gap:8px;padding:13px 18px;border:1.5px dashed var(--blue-700);border-radius:4px;font:600 13.5px/1 var(--f-body);color:var(--blue-700);cursor:pointer;transition:.2s}.fbtn:hover,.filebox input:focus-visible+small,.filebox input:focus-visible~.fbtn{background:var(--tint)}
.filebox:focus-within .fbtn{outline:2px solid var(--blue-500);outline-offset:2px}
.filebox small{color:var(--muted);font-size:13px;max-width:26rem}
[data-file-err]{margin:-8px 0 14px}
.pill--alt{background:#fff;color:var(--blue-700);box-shadow:inset 0 0 0 1.5px var(--blue-700)}.pill--alt b{background:var(--blue-700);color:#fff}.pill--alt:hover{background:var(--tint)}
.dempty .pill{margin:0 8px 10px 0}
/* Kennzahlenband kompakter */
.kpi li{padding:clamp(22px,2.6vw,38px) clamp(16px,2.2vw,40px);grid-template-columns:auto 1fr;column-gap:clamp(14px,1.6vw,22px);row-gap:2px;align-items:center}
.kpi .ki{grid-row:span 2;width:46px;height:46px}
.kpi .kn{font-size:clamp(34px,3.6vw,56px);line-height:1}
.kpi .kl{font-size:clamp(11px,.9vw,13px)}
@media(max-width:760px){.kpi li{padding:18px var(--pad)}.kpi .kn{font-size:clamp(34px,10vw,46px)}}
/* Anfrageliste: leere Liste, Buttons */
.dempty .pill b{display:grid;margin:0;color:var(--blue-700)}.dempty .pill--alt b{color:#fff}
.dempty .pill{display:inline-flex;margin:0 8px 10px 0}
/* Ansprechpartner */
.pl{display:grid;gap:3px;align-content:start;text-decoration:none;color:inherit;height:100%;margin:-24px -20px;padding:24px 20px;transition:background .25s}.pl:hover{background:var(--tint)}.people .pl .pt{margin-top:10px;font-weight:600;font-size:14px;color:var(--blue-700)}
.pav-wrap{display:grid;place-items:center;aspect-ratio:4/3.1;background:linear-gradient(135deg,var(--blue-800),var(--blue-700) 60%,var(--blue-500));border-radius:4px}
.pav{display:grid;place-items:center;width:clamp(110px,14vw,190px);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.5);color:#fff;font:300 clamp(44px,6vw,80px)/1 var(--f-head);letter-spacing:-.03em}
.person{scroll-margin-top:80px}
.person .big{max-width:28rem}
.fax{margin:12px 0 0;font-size:14px;color:var(--muted)}

/* Hero-Panels: gleichmäßiges Aufklappen, Titel springt nicht */
.panel{transition:flex-grow 1.1s cubic-bezier(.7,0,.2,1)}
.more{transition:grid-template-rows 1.1s cubic-bezier(.7,0,.2,1),opacity .9s ease .2s}
.more>div>*{opacity:0;transform:translateY(10px);transition:transform 1.2s cubic-bezier(.4,0,.2,1),opacity 1s ease}
.panel.on .more>div>*{opacity:1;transform:none}.panel.on .more>div>:nth-child(1){transition-delay:.45s}.panel.on .more>div>:nth-child(2){transition-delay:.55s}.panel.on .more>div>:nth-child(3){transition-delay:.65s}
@media(max-width:899px){.more>div>*{opacity:1;transform:none}}

/* Hero-Texte etwas schneller */
.more{transition:grid-template-rows 1.1s cubic-bezier(.7,0,.2,1),opacity .6s ease .1s}
.more>div>*{transition:transform .8s cubic-bezier(.4,0,.2,1),opacity .6s ease}
.panel.on .more>div>:nth-child(1){transition-delay:.25s}.panel.on .more>div>:nth-child(2){transition-delay:.32s}.panel.on .more>div>:nth-child(3){transition-delay:.4s}

/* Hero-Texte deutlich schneller */
.more{transition:grid-template-rows 1.1s cubic-bezier(.7,0,.2,1),opacity .35s ease}
.more>div>*{transform:translateY(6px);transition:transform .45s cubic-bezier(.3,0,.2,1),opacity .35s ease}
.panel.on .more>div>:nth-child(1){transition-delay:.1s}.panel.on .more>div>:nth-child(2){transition-delay:.15s}.panel.on .more>div>:nth-child(3){transition-delay:.2s}

/* Hero-Panels: schnelleres Aufklappen */
.panel{transition:flex-grow .75s cubic-bezier(.7,0,.2,1)}
.more{transition:grid-template-rows .75s cubic-bezier(.7,0,.2,1),opacity .35s ease}
/* Hero-Panels: mehr Abstand nach unten, nichts wird abgeschnitten */
.pc{padding-bottom:clamp(52px,8vh,96px)}
.more>div{padding-bottom:4px}
.split{min-height:max(520px,60svh)}
@media(max-width:899px){.pc{padding-bottom:36px}.split{min-height:0}}
/* Hero-Panels: Button im Text wird nicht mehr unten abgeschnitten */
.more>div{padding-bottom:20px;margin-bottom:-12px}
.go{min-height:40px}

/* ==========================================================================
   Übernahme aus dem Mockup: Buttons (UIverse-Stil), Hero-Animationen, Route
   (Vorherigen Stand siehe Ordner _backup-vor-fluss)
   ========================================================================== */
/* ---- Buttons ---- */
.pill{position:relative;isolation:isolate;overflow:hidden;box-shadow:0 8px 22px rgba(0,93,157,.26);transition:color .45s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease),background-color .3s}
.pill::before{content:"";position:absolute;z-index:-1;right:5px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:var(--navy-900);transform:scale(0);transition:transform .6s var(--ease)}
.pill:hover{background:var(--blue-700);transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,93,157,.38)}
.pill:hover::before{transform:scale(16)}
.pill:active{transform:translateY(0) scale(.98)}
.pill b{transition:transform .5s cubic-bezier(.45,0,.2,1),background-color .4s ease,color .4s ease}
.pill--light{box-shadow:0 8px 24px rgba(0,27,46,.25)}
.pill--light::before,.pill--alt::before{background:var(--blue-700)}
.pill--light:hover,.pill--alt:hover{background:#fff;color:#fff}
.pill--light:hover b,.pill--alt:hover b{background:#fff;color:var(--blue-700)}
.pill[disabled]{pointer-events:none}
.tlink{position:relative;border:0;padding:4px 0 6px}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform-origin:left}
.tlink:hover::after{animation:ul .65s var(--ease) both}
@keyframes ul{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
button.tlink{border:0}
.jlink b{transition:transform .5s cubic-bezier(.45,0,.2,1),box-shadow .5s ease}.jlink:hover b{box-shadow:0 0 0 7px rgba(255,255,255,.2)}
@media(prefers-reduced-motion:reduce){.pill,.pill::before,.pill b{transition:none}.tlink:hover::after{animation:none}}

/* ---- Hero: Eintritt und Unterteilungen ---- */
.hero .intro h1{animation:hsoft .8s cubic-bezier(.4,0,.2,1) .05s both}
.hero .intro h1 span{animation:hsoft .8s cubic-bezier(.4,0,.2,1) .15s both}
.hero .intro p{animation:hsoft .8s cubic-bezier(.4,0,.2,1) .25s both}
@keyframes hsoft{from{opacity:0;transform:translateY(8px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.split{position:relative;border-top:0}
.split::before{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:rgba(255,255,255,.35);transform-origin:left;animation:sgrow .7s var(--ease) .15s both;z-index:3}
@keyframes sgrow{from{transform:scaleX(0)}}
.panel{border-left:0;animation:pin .7s cubic-bezier(.7,0,.2,1) both;animation-delay:calc(.1s + var(--i,0) * .08s)}
@keyframes pin{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.panel+.panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(255,255,255,.35);z-index:4;transform-origin:top;animation:sgrowy .6s var(--ease) calc(.25s + var(--i,0) * .08s) both}
@keyframes sgrowy{from{transform:scaleY(0)}}
.panel img{filter:brightness(.55) saturate(.8);transform:scale(1.14) translate(var(--px,0),var(--py,0));transition:transform .9s var(--ease),filter .5s}
.panel.on img{filter:brightness(.95) saturate(1.05);transform:scale(1.04) translate(var(--px,0),var(--py,0))}
.panel .bar{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.18);z-index:5;opacity:0;transition:opacity .4s}
.panel .bar i{display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.panel.on .bar{opacity:1}.split.auto .panel.on .bar i{animation:sfill var(--dur,6s) linear forwards}
@keyframes sfill{to{transform:scaleX(1)}}
@media(max-width:899px){.panel{animation-delay:calc(.05s + var(--i,0) * .06s)}.panel+.panel::before{display:none}.panel .bar{display:none}.panel img{filter:brightness(.8)}}
@media(prefers-reduced-motion:reduce){.hero .intro *,.panel,.split::before,.panel+.panel::before{animation:none}}

/* ---- Route durch die Startseite ---- */
.route{position:relative;background:linear-gradient(180deg,#fff 0%,var(--tint) 22%,#fff 50%,var(--tint) 76%,#fff 100%)}
.route>section{position:relative;z-index:1}
.route .sec--tint,.route .journey{background:transparent}
.rline{position:absolute;left:0;top:0;width:100%;z-index:0;pointer-events:none;overflow:visible}
.rline path{fill:none;stroke-linecap:round}.rl-base{stroke:rgba(0,93,157,.25);stroke-width:2;stroke-dasharray:3 9}
.rl-prog{stroke:var(--blue-500);stroke-width:3.5}
.truck{position:absolute;left:0;top:0;z-index:0;pointer-events:none;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--blue-700);color:#fff;box-shadow:0 0 0 6px rgba(0,93,157,.18),0 10px 24px rgba(0,36,61,.3)}
.truck .ic{width:20px;height:20px}
.rnode{position:absolute;z-index:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;border:3px solid var(--blue-500)}
@media(max-width:899px){.rl-prog{stroke-width:3}.truck{width:38px;height:38px;margin:-19px 0 0 -19px}}

.role{font:600 12px/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-700)}
/* Scroll-Stationen: länger verweilen, bevor die nächste Seite kommt */
.jstack{--jhold:clamp(460px,80svh,780px)}

/* ===== "Anfrage senden"-Button: LKW fährt von links vor, wird beladen und fährt nach rechts los ===== */
.tbtn{--h:62px;position:relative;isolation:isolate;overflow:hidden;width:min(100%,262px);height:var(--h);padding:0;border:0;border-radius:999px;background:var(--blue-700);color:#fff;cursor:pointer;font:600 15px/1 var(--f-body);letter-spacing:.01em;box-shadow:0 0 0 4px rgba(0,93,157,.16),0 10px 26px rgba(0,93,157,.28);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .3s;-webkit-tap-highlight-color:transparent}
.tbtn:hover{background:var(--blue-800);transform:translateY(-2px);box-shadow:0 0 0 6px rgba(0,93,157,.2),0 16px 34px rgba(0,93,157,.36)}
.tbtn:active{transform:scale(.97)}
.tbtn[disabled]{cursor:progress}
.tbtn .tb-label,.tbtn .tb-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;transition:opacity .3s ease,transform .4s var(--ease)}
.tbtn .tb-done{opacity:0;transform:translateY(10px)}
.tbtn .tb-done svg{width:16px;height:13px;fill:none;stroke:#7EE2A8;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .45s ease .25s}
/* LKW von oben: Anhänger mit Logo auf dem Dach, Fahrerkabine vorn (rechts) */
.tbtn .tb-truck{position:absolute;top:calc((var(--h) - 30px)/2);left:-92px;z-index:2;display:flex;align-items:stretch;height:30px;transition:transform .5s var(--ease)}
.tbtn:hover:not(.loading) .tb-truck{transform:translateX(36px)}
.tt-trailer{position:relative;width:64px;border-radius:3px 2px 2px 3px;background:#fff url(../img/logo-blau.svg) center/78% auto no-repeat;box-shadow:inset 0 -3px 0 rgba(0,36,61,.1)}
.tt-cab{position:relative;width:22px;margin-left:2px;border-radius:2px 11px 11px 2px;background:var(--navy-900)}
.tt-win{position:absolute;right:2px;top:4px;bottom:4px;width:9px;border-radius:2px 6px 6px 2px;background:var(--sky)}
.tt-beam{position:absolute;right:-20px;top:6px;bottom:6px;width:22px;background:linear-gradient(90deg,rgba(255,226,120,.85),rgba(255,226,120,0));border-radius:0 2px 2px 0;opacity:0;transition:opacity .3s}
.tt-door{position:absolute;left:-1px;width:2px;height:15px;border-radius:1px;background:#fff;z-index:1}
.tt-door.d1{top:0;transform-origin:50% 0}.tt-door.d2{bottom:0;transform-origin:50% 100%}
.tt-lines{position:absolute;right:100%;top:50%;width:8px;height:2px;margin:-1px 8px 0 0;border-radius:2px;background:#fff;opacity:0;box-shadow:-16px -9px 0 #fff,-34px 9px 0 #fff,-52px 0 0 #fff,-72px -9px 0 #fff,-90px 9px 0 #fff}
.tb-box{position:absolute;z-index:1;top:calc((var(--h) - 18px)/2);left:-26px;width:18px;height:18px;border-radius:2px;background:linear-gradient(#E8CE98,#C9A46A);opacity:0}
.tb-box::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1px;background:rgba(0,0,0,.14)}
/* Ablauf: vorfahren, Türen auf, Paket rein, Türen zu, losfahren (nach rechts), "gesendet" */
.tbtn.loading .tb-label{opacity:0;transform:translateY(-10px)}
.tbtn.loading .tb-truck{transform:translateX(177px);transition:transform 1s cubic-bezier(.25,.8,.3,1)}
.tbtn.loading .tt-door.d1{animation:tbD1 1.3s ease 1s forwards}
.tbtn.loading .tt-door.d2{animation:tbD2 1.3s ease 1s forwards}
@keyframes tbD1{0%{transform:rotate(0)}25%,70%{transform:rotate(58deg)}100%{transform:rotate(0)}}
@keyframes tbD2{0%{transform:rotate(0)}25%,70%{transform:rotate(-58deg)}100%{transform:rotate(0)}}
.tbtn.loading .tb-box{animation:tbBox .8s cubic-bezier(.4,0,.2,1) 1.3s forwards}
@keyframes tbBox{0%{opacity:1;transform:translateX(0)}85%{opacity:1;transform:translateX(116px)}100%{opacity:0;transform:translateX(124px)}}
.tbtn.loading .tb-truck .tt-trailer,.tbtn.loading .tb-truck .tt-cab{animation:tbRock .45s ease-in-out infinite alternate}
@keyframes tbRock{to{transform:translateY(.8px)}}
.tbtn.leave .tb-truck{transform:translateX(520px);transition:transform 1.1s cubic-bezier(.6,0,.85,.45)}
.tbtn.leave .tt-beam{opacity:1}
.tbtn.leave .tt-lines{animation:tbLines 1.1s ease-out forwards}
@keyframes tbLines{0%{opacity:0;transform:scaleX(.4)}25%{opacity:.95;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.6)}}
.tbtn.done .tb-done{opacity:1;transform:none;transition-delay:.05s}.tbtn.done .tb-done svg{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.tbtn,.tbtn *{animation:none!important;transition:none!important}.tbtn:hover .tb-truck{transform:none}}
/* Bewegungsebene (motion-fx.js) */
.readbar{position:fixed;z-index:300;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-700),var(--blue-500));transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.hero h1 .ln{display:block}
.pill b{will-change:transform}
.cards a:active .ar{transform:scale(.92)}
.cards .ar{transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease)}
.cards a:hover .ar{transform:translateX(3px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.readbar{display:none}}

/* ===== Mobile-Überarbeitung ===== */
.burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none}
.burger span{margin:0;width:18px;height:2px;border-radius:2px;transform-origin:center;transition:translate .3s var(--ease),rotate .3s var(--ease),opacity .2s}
.burger[aria-expanded=true] span:first-child{translate:0 3.5px;rotate:45deg}
.burger[aria-expanded=true] span:last-child{translate:0 -3.5px;rotate:-45deg}
.mnav .cta a.pill{box-shadow:none;display:flex;justify-content:space-between;align-items:center;width:100%;padding:6px 6px 6px 24px;font:600 16px/1 var(--f-body);color:#fff}
.mnav .cta a.pill b{width:44px;height:44px}
.mnav:not([hidden]){animation:mnavIn .35s var(--ease)}
@keyframes mnavIn{from{opacity:0;transform:translateY(-10px) scale(.98)}}
@media(max-width:1199px){
  .nav{top:8px;left:8px;right:8px;height:60px}
  .nav .logo{height:60px}
  .mnav{top:78px;left:8px;right:8px;max-height:calc(100dvh - 90px);overscroll-behavior:contain}
  .mnav a,.mnav summary{min-height:52px}
  .mnav .sub a{min-height:44px;display:flex;align-items:center}
}
@media(max-width:899px){
  :root{--pad:18px}
  .hero{min-height:0}
  .hero .intro{padding:92px var(--pad) 26px;text-align:left}
  .hero .intro p{margin-left:0}
  .hero h1{font-size:clamp(30px,9vw,40px)}
  .panel{min-height:340px}
  .pc{padding-bottom:28px}
  .pc h2{font-size:30px}
  .more p{max-width:none}
  .pill{min-height:46px}
  .totop{width:46px;height:46px;right:12px;bottom:12px}
  .sec{padding-block:clamp(56px,14vw,84px)}
  .hd{gap:14px}
  .cta .act{flex-direction:column;align-items:stretch}
  .cta .act .pill{justify-content:space-between}
  .foot .g{gap:28px}
  .drawer{width:100%}
  .acc button{min-height:56px}
}
@media(max-width:380px){.nav .r{gap:6px;padding-right:8px}.nav .logo{padding:0 12px}.nav .logo img{height:28px}}
.mnav .cta{background:none;color:inherit;text-align:left;overflow:visible;isolation:auto;position:static}
.mnav .cta::before{content:none}
.mnav .cta a.pill{box-shadow:0 0 0 4px rgba(0,93,157,.14)}
/* Überlauf auf kleinen Displays verhindern */
.pcard,.pgrid>*,.kt>*,.wrap>*{min-width:0}
@media(max-width:560px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:899px){.disp .big{min-width:0}h1,h2,h3{overflow-wrap:break-word;hyphens:auto}}
@media(max-width:899px){.two{grid-template-columns:minmax(0,1fr)}}
.pcard{grid-template-columns:minmax(0,1fr)}
.pcard-body{grid-template-columns:minmax(0,1fr);overflow-wrap:anywhere}
.facts{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:560px){.facts{grid-template-columns:1fr}.facts li{border-left:0;border-top:1px solid var(--line);padding:14px 16px}.facts li:first-child{border-top:0}}

/* Reise-Abschnitt auf dem Handy: Kapitel stapeln sich wie am Desktop (Sticky-Scroll) */
@media(max-width:999px){
  .jstack{--jhold:clamp(220px,42svh,380px)}
  .jchap{position:sticky;top:calc(76px + var(--i) * 10px);min-height:calc(100svh - 76px - var(--i) * 10px);align-items:end;border-radius:14px 14px 0 0}
  .jchap+.jchap{margin-top:var(--jhold)}
  .jtail{display:block;height:var(--jhold)}
  .jgrid{padding-block:28px 34px}
  .jnum{font-size:48px}
  .jtext{gap:12px}
  .jtext h3{font-size:clamp(30px,9vw,40px)}
  .jtext p{font-size:15.5px;line-height:1.5}
  .jchips li{padding:7px 10px;font-size:12px}
}
@media(max-width:999px) and (max-height:680px){.jtext p{font-size:14.5px}.jnum{font-size:38px}}

/* Füll-Animation der Buttons: Kreis immer groß genug, auch bei voller Breite; auf Touch auch beim Antippen */
.pill{--fill:24}
.pill:hover::before,.pill:focus-visible::before{transform:scale(var(--fill))}
@media(hover:none){
  .pill:hover{transform:none;background:var(--blue-700);box-shadow:0 8px 22px rgba(0,93,157,.26)}
  .pill:hover::before{transform:scale(0)}
  .pill:active::before{transform:scale(var(--fill))}
  .pill--light:hover,.pill--alt:hover{background:#fff;color:var(--blue-700)}
  .pill--light:hover b,.pill--alt:hover b{background:var(--blue-700);color:#fff}
  .pill--light:active,.pill--alt:active{color:#fff}
  .pill--light:active b,.pill--alt:active b{background:#fff;color:var(--blue-700)}
}
.pi .ic{width:26px;height:26px;stroke-width:1.6}

/* Ausgangszustände der Motion-Einblendungen: vor dem ersten Malen gesetzt, kein Aufblitzen */
.fx .kpi li,.fx .jchips li,.fx .jchap .jtext>*{opacity:0}
/* Hero-Auftritt: reines CSS, startet sofort mit dem ersten Bild, ohne auf Skripte zu warten */
@keyframes fxUp{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
.fx .hero h1{animation:fxUp .8s var(--ease) both}
.fx .hero h1 span{animation:fxUp .8s .14s var(--ease) both}
.fx .hero .intro p{animation:fxUp .7s .3s var(--ease) both}
@keyframes fxFade{from{opacity:0}to{opacity:1}}
.fx .hero .panel{animation:fxFade .9s .15s ease-out both}

/* LKW der Route: Seitenansicht mit LUDZAY-Logo */
.truck{width:68px;height:32px;margin:-16px 0 0 -34px;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 5px 6px rgba(0,36,61,.28));overflow:visible}
.truck svg{display:block;width:100%;height:100%;overflow:visible}
@media(max-width:899px){
  .truck{width:16px;height:34px;margin:-17px 0 0 -8px}
  .truck svg{position:absolute;left:50%;top:50%;width:34px;height:16px;margin:-8px 0 0 -17px;transform:rotate(90deg)}
}

/* =====================================================================
   UNTERMENÜS (Desktop-Dropdowns): zentriertes Panel, Kopf, Karten mit Index, Fuß mit Kontakt
   ===================================================================== */
.dd{left:50%;right:auto;width:max-content;max-width:calc(100vw - 32px);translate:-50% 12px;scale:.985;transform-origin:50% 0;grid-template-columns:repeat(var(--n,3),minmax(0,296px));justify-content:stretch;gap:14px;padding:22px;border-radius:20px;border:1px solid var(--line);background:#fff;box-shadow:0 2px 0 rgba(255,255,255,.8) inset,0 40px 90px rgba(0,36,61,.28);transition:opacity .3s var(--ease),visibility .3s,translate .45s var(--ease),scale .45s var(--ease)}
.dd[style*="--n:5"]{grid-template-columns:repeat(5,minmax(0,206px))}
.dd[style*="--n:4"]{grid-template-columns:repeat(4,minmax(0,262px))}
.open>.dd,.has.open>.dd{translate:-50% 0;scale:1}
.dd{counter-reset:ddc}

/* Kopfzeile */
.dd .dh{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:2px 4px 8px}
.dd .ey{display:block;font:600 11.5px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-700);margin-bottom:8px}
.dd .dh p{margin:0;max-width:34rem;font:500 clamp(18px,1.5vw,22px)/1.25 var(--f-head);letter-spacing:-.02em;color:var(--ink)}
.nav .dd a.dl{flex:none;display:inline-flex;grid-template-rows:none;align-items:center;gap:12px;padding:5px 5px 5px 18px;border:0;border-radius:999px;background:var(--tint);color:var(--ink);font:600 13px/1 var(--f-body);box-shadow:none;transition:background .25s,color .25s}
.nav .dd a.dl b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue-700);color:#fff;transition:transform .35s var(--ease)}
.nav .dd a.dl:hover{background:var(--blue-700);color:#fff;box-shadow:none}.nav .dd a.dl:hover b{background:#fff;color:var(--blue-700);transform:translateX(3px)}

/* Karten */
.nav .dd a.dc{counter-increment:ddc;position:relative;border-radius:14px;border:1px solid var(--line);background:#fff;transition:transform .45s var(--ease),border-color .3s,box-shadow .4s var(--ease)}
.nav .dd a.dc:hover,.nav .dd a.dc:focus-visible{transform:translateY(-4px);border-color:var(--blue-700);box-shadow:0 18px 40px rgba(0,36,61,.16)}
.dd a.dc .tm{position:relative;aspect-ratio:16/9.4}
.dd a.dc .tm::before{content:counter(ddc,decimal-leading-zero);position:absolute;z-index:2;left:10px;top:10px;padding:6px 8px;border-radius:7px;background:rgba(0,36,61,.78);backdrop-filter:blur(6px);color:#fff;font:700 11px/1 var(--f-body);letter-spacing:.08em}
.dd a.dc .tm::after{content:"";position:absolute;z-index:2;right:10px;top:10px;width:36px;height:36px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005D9D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 8px 20px rgba(0,36,61,.25);opacity:0;transform:translate(-6px,6px) scale(.8);transition:opacity .3s,transform .45s var(--ease)}
.nav .dd a.dc:hover .tm::after,.nav .dd a.dc:focus-visible .tm::after{opacity:1;transform:none}
.dd a.dc .tm img{transition:transform .9s var(--ease),filter .5s}
.nav .dd a.dc:hover img{transform:scale(1.07)}
.dd a.dc .tt{padding:15px 16px 17px;gap:5px}
.dd a.dc .tt b{font:600 16px/1.2 var(--f-body);transition:color .25s}
.nav .dd a.dc:hover .tt b{color:var(--blue-700)}
.dd[style*="--n:5"] a.dc .tt{padding:13px 13px 15px}.dd[style*="--n:5"] a.dc .tt b{font-size:15px}.dd[style*="--n:5"] a.dc small{font-size:12.5px}

/* Fußzeile */
.dd .df{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin-top:2px;padding:13px 18px;border-radius:12px;background:var(--tint);font:500 13.5px/1.3 var(--f-body);color:var(--muted)}
.dd .df>span:last-child{display:flex;flex-wrap:wrap;gap:6px 22px}
.nav .dd a.dt{display:inline;overflow:visible;white-space:nowrap;flex-shrink:0;grid-template-rows:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink);font:600 13.5px/1.3 var(--f-body);text-decoration:none;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
.nav .dd a.dt:hover{color:var(--blue-700);border-color:var(--blue-700);box-shadow:none;background:none}

/* gestaffeltes Einblenden */
@keyframes ddIn{from{opacity:0;transform:translateY(14px)}}
.open>.dd .dh,.has.open>.dd .dh,.open>.dd .df,.has.open>.dd .df{animation:ddIn .5s var(--ease) both}
.open>.dd .dc,.has.open>.dd .dc{animation:ddIn .55s var(--ease) both;animation-delay:calc(var(--k,0) * 55ms + 70ms)}
.open>.dd .df,.has.open>.dd .df{animation-delay:.3s}

/* Seite hinter dem Menü abdunkeln */
@media(min-width:1200px){
  body::before{content:"";position:fixed;inset:0;z-index:98;background:rgba(0,27,46,.34);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s var(--ease),visibility 0s .35s}
  body:has(.nav .has.open)::before,body:has(.nav .has.open)::before{opacity:1;visibility:visible;transition-delay:0s,0s}
}
@media(prefers-reduced-motion:reduce){.open>.dd .dc,.has.open>.dd .dc,.open>.dd .dh,.has.open>.dd .dh,.open>.dd .df,.has.open>.dd .df{animation:none}.dd{transition-duration:.01ms}}

/* Desktop: kein Burger und kein Mobilmenü (die Mobil-Korrektur oben gilt sonst ohne Breitenbegrenzung) */
@media(min-width:1200px){.burger,.mnav{display:none!important}}
.nav .m .open .dd .ic,.nav .m .has.open .dd .ic{transform:none}

/* Hover-Brücke zwischen Link und Untermenü (Öffnen und Schließen steuert jetzt das Skript mit Verzögerung) */
@media(min-width:1200px){.dd::before{top:-26px;height:26px}}

/* =====================================================================
   KARTE "INDIVIDUELLES DESIGN" (Sortiment): Text links, Foto rechts
   ===================================================================== */
.hint{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:0;align-items:stretch;margin:clamp(18px,2.2vw,28px) 0 6px;padding:0;border-radius:10px;color:#fff;background:linear-gradient(115deg,var(--navy-900) 0%,var(--blue-800) 58%,var(--blue-700) 100%);box-shadow:0 26px 50px -26px rgba(0,36,61,.6)}
.hint .htx{position:relative;z-index:2;display:grid;gap:10px;justify-items:start;align-content:center;padding:clamp(16px,2vw,28px) clamp(20px,2.8vw,40px)}
.hint .htop{display:flex;align-items:center;gap:14px}
.hint .hic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:9px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.32)}
.hint .hic .ic{width:20px;height:20px;stroke-width:1.5;color:#fff}
.hint .hey{font:600 12px/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--sky)}
.hint .htx>b{font:500 clamp(19px,1.9vw,27px)/1.12 var(--f-head);letter-spacing:-.02em;text-wrap:balance}
.hint .hd2{max-width:36rem;color:rgba(255,255,255,.88);font-size:clamp(13.5px,1vw,15px);line-height:1.5}
.hint .hch{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 2px}
.hint .hch li{display:flex;align-items:center;gap:8px;font:600 13.5px/1.2 var(--f-body)}
.hint .hch .ic{width:16px;height:16px;stroke-width:2.2;color:var(--sky)}
.hint .htx .pill{margin-top:2px;box-shadow:0 12px 28px rgba(0,20,40,.35)}
.hint .htx .pill .ic{rotate:0deg}
.hint .hph{position:relative;margin:0;min-height:190px;clip-path:polygon(13% 0,100% 0,100% 100%,0 100%);background:var(--navy-950)}
.hint .hph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.hint:hover .hph img{transform:scale(1.045)}
.hint .hph::after{content:"";position:absolute;inset:0;opacity:var(--ov,1);background:linear-gradient(90deg,rgba(0,36,61,.55) 0%,rgba(0,36,61,0) 45%)}
.hint .hph figcaption{position:absolute;z-index:2;left:clamp(40px,7vw,90px);bottom:18px;padding:7px 12px;border-radius:6px;background:rgba(0,27,46,.72);font:600 12px/1 var(--f-body);letter-spacing:.04em;color:#fff}
@media(max-width:820px){
  .hint{grid-template-columns:1fr;border-radius:8px}
  .hint .hph{order:-1;min-height:0;height:190px;clip-path:none}
  .hint .hph::after{background:linear-gradient(0deg,rgba(0,36,61,.55),transparent 55%)}
  .hint .hph figcaption{left:16px}
  .hint .htx{padding:26px 22px 28px}
  .hint .htx .pill{justify-self:stretch;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){.hint .hph img{transition:none}.hint:hover .hph img{transform:none}}
.hint .htop{gap:18px}
.hint .hlogo{display:block;flex:none;height:38px;width:auto;padding-right:18px;border-right:1px solid rgba(255,255,255,.3)}

/* Kapitel "Unsere Verpackungen": Überblendung eigener Fotos (Labelmaschine) mit langsamem Zoom statt Video */
.jslides img{opacity:0;transform:scale(1.02);animation:jslide 14s linear infinite;will-change:opacity,transform}
.jslides img:nth-child(1){animation-delay:-1.3s}
.jslides img:nth-child(2){animation-delay:5.7s}
@keyframes jslide{0%{opacity:0;transform:scale(1.02)}9%{opacity:1}50%{opacity:1}58%{opacity:0;transform:scale(1.13)}100%{opacity:0;transform:scale(1.13)}}
@media(prefers-reduced-motion:reduce){.jslides img{animation:none;opacity:0;transform:none}.jslides img:first-child{opacity:1}}

/* Fotografen-Nachweis in der Fußzeile */
.foot .bot a.credit{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.foot .bot a.credit:hover{color:var(--blue-700)}

/* Mobil-Elemente nur auf kleinen Bildschirmen (Stile stehen in mobile.css) */
.dock{display:none}
@media(max-width:1199px){.dock{display:flex}}
/* Mitarbeiterfotos (Über uns / Ansprechpartner): Foto statt Initialen */
.av{overflow:hidden}
.av img{display:block;width:100%;height:100%;object-fit:cover}
.av.av--lg{width:96px;height:96px;margin-bottom:16px}

/* Download-Button mit Animation (Filterleiste „Zusatz-Button“ bzw. Editor-Button „Download-Animation“) */
.dlbtn{--dlw:176px;position:relative;display:inline-flex;align-items:center;flex:none;width:var(--dlw);max-width:100%;height:46px;padding:3px;border:2px solid var(--blue-700);border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;cursor:pointer;transition:width .4s var(--ease),border-color .3s,background .3s}
.dlbtn:hover{background:var(--tint)}
.dlbtn::before{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:var(--blue-500);opacity:0;visibility:hidden}
.dlc{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:var(--blue-700);color:#fff;overflow:hidden;box-shadow:0 0 0 0 rgba(0,114,193,0);transition:all .4s ease}
.dlc::before{content:"";position:absolute;left:0;top:0;width:100%;height:0;background:var(--navy-900)}
.dlic{position:absolute;left:50%;top:50%;width:22px;height:22px;translate:-50% -50%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:translate .25s,opacity .4s}
.dlbtn:hover .dlic{translate:-50% calc(-50% + 2px)}
.dlsq{position:absolute;left:50%;top:50%;width:12px;height:12px;translate:-50% -50%;border-radius:2px;background:#fff;opacity:0;visibility:hidden}
.dlt{position:absolute;left:50px;right:14px;top:50%;translate:0 -50%;text-align:center;font:500 14px/1.1 var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .4s,visibility .4s}
.dlt2{left:14px;opacity:0;visibility:hidden;color:#1F7A47;font-weight:600}
.dlbtn.is-run{width:46px;animation:dlDone .4s ease 3.5s forwards}
.dlbtn.is-run::before{animation:dlOrbit 3s ease-in-out .4s forwards}
.dlbtn.is-run .dlc{rotate:180deg;animation:dlPulse 1s forwards,dlGone .2s ease 3.5s forwards}
.dlbtn.is-run .dlc::before{animation:dlFill 3s ease-in-out forwards}
.dlbtn.is-run .dlic{opacity:0;visibility:hidden}
.dlbtn.is-run .dlsq{opacity:1;visibility:visible}
.dlbtn.is-run .dlt{opacity:0;visibility:hidden}
.dlbtn.is-run .dlt2{animation:dlMsg .4s ease 3.5s forwards}
@keyframes dlPulse{0%{scale:.95;box-shadow:0 0 0 0 rgba(0,114,193,.45)}70%{scale:1;box-shadow:0 0 0 14px rgba(0,114,193,0)}100%{scale:.95;box-shadow:0 0 0 0 rgba(0,114,193,0)}}
@keyframes dlFill{from{height:0}to{height:100%}}
@keyframes dlOrbit{0%{transform:rotate(-90deg) translate(22px) rotate(0);opacity:1;visibility:visible}99%{transform:rotate(270deg) translate(22px) rotate(270deg);opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes dlDone{100%{width:var(--dlw);border-color:#1F7A47}}
@keyframes dlGone{100%{opacity:0;visibility:hidden}}
@keyframes dlMsg{100%{opacity:1;visibility:visible}}
/* Hero: Bereich "Verpackung" mit Auswahl Eier / Obst & Gemüse */
.panel--pick{cursor:default}
.panel--pick>img.alt{opacity:0;transition:opacity .7s var(--ease),transform .9s var(--ease),filter .5s}
.panel--pick:has(.ch--o:hover)>img.alt,.panel--pick:has(.ch--o:focus-visible)>img.alt{opacity:1}
.pick{display:grid;grid-template-rows:1fr;width:100%}
.pick-in{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:0;overflow:hidden;padding:2px 0 4px}
.ch{display:flex;align-items:center;gap:12px;min-width:0;padding:8px 12px 8px 8px;border:1px solid rgba(255,255,255,.3);border-radius:4px;background:rgba(0,27,46,.38);backdrop-filter:blur(8px);color:#fff;text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.ch .tm{flex:none;width:58px;height:58px;border-radius:3px;background:#1b3a55 center/cover no-repeat}
.ch .tt{display:grid;gap:3px;min-width:0;flex:1}
.ch b{font:600 15px/1.2 var(--f-body)}
.ch small{font:400 12px/1.3 var(--f-body);color:rgba(255,255,255,.78);transition:color .3s}
.ch .ic{flex:none;width:18px;height:18px;transition:transform .3s var(--ease)}
.ch:hover,.ch:focus-visible{background:#fff;color:var(--navy-950);border-color:#fff}
.ch:hover small,.ch:focus-visible small{color:var(--muted)}
.ch:hover .ic,.ch:focus-visible .ic{transform:translateX(4px)}
.pk-go{display:none}
@media(min-width:900px){.panel--pick:not(.on) .ch{pointer-events:none}}
@media(max-width:1199px){.pick-in{grid-template-columns:1fr}}

/* Ausgeblendete Elemente (im Admin per "Ausblenden" gesetzt; bleiben im Quelltext erhalten) */
html:not(.lz-edit-mode) [data-off]{display:none!important}
.route.no-line .rline,.route.no-line .truck{display:none}
.panel .ch .tm{overflow:hidden}
.panel .ch .tm img{position:static;inset:auto;z-index:auto;display:block;width:100%;height:100%;object-fit:cover;filter:none;transform:none;animation:none;transition:none}

/* „Neu“-Marke: im Admin-Editor an beliebiger Stelle setzbar (Fließtext: .neu, Karten/Bilder: .neu--corner) */
.neu{display:inline-flex;align-items:center;margin-left:.55em;padding:.34em .6em .3em;border-radius:3px;background:#FFC83D;color:#1d1500;font:700 max(.62em,11px)/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;vertical-align:.18em;white-space:nowrap;box-shadow:0 1px 0 rgba(0,0,0,.12)}
.neu--corner{position:absolute;top:12px;right:12px;z-index:5;margin:0;font-size:12px;vertical-align:baseline}
:has(>.neu--corner){position:relative}

/* Individuelles Design: Konfigurator im Einstieg */
.cfg{background:var(--tint);padding:clamp(108px,11vw,150px) 0 clamp(36px,5vw,72px)}
.cfg .crumbs{margin-bottom:24px}
.cfg-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(24px,4vw,64px);align-items:center}
.cfg-ey{display:inline-flex;align-items:center;gap:0;font:700 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-700);margin-bottom:16px}
.cfg h1{font-size:clamp(38px,5.2vw,72px);line-height:.98;letter-spacing:-.04em}
.cfg h1 span{display:block;color:var(--blue-700)}
.cfg .lead{margin-top:16px;max-width:46ch}
.cfg-ph{margin:26px 0 0;border-radius:6px;overflow:hidden;aspect-ratio:16/9;background:#fff}
.cfg-ph img{width:100%;height:100%;object-fit:cover}
.cfg-box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:clamp(20px,2.4vw,34px);box-shadow:0 30px 60px -36px rgba(0,36,61,.45)}
.cfg-h{font-size:clamp(21px,1.9vw,28px);margin-bottom:20px}
.cfg-q{margin:0 0 20px}
.cfg-q>b{display:block;font:700 12px/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.cfg-opts{display:flex;flex-wrap:wrap;gap:8px}
.cfg-opts button{cursor:pointer;padding:12px 16px;min-height:46px;border:1.5px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:600 14px/1.2 var(--f-body);transition:border-color .25s,background .25s,color .25s,transform .2s}
.cfg-opts button:hover{border-color:var(--blue-500)}
.cfg-opts button[aria-pressed=true]{border-color:var(--blue-700);background:var(--blue-700);color:#fff}
.cfg-opts button:focus-visible{outline:3px solid var(--blue-500);outline-offset:2px}
.cfg-sum{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line)}
.cfg-sum span{font-size:14px;color:var(--muted)}
.cfg-sum strong{color:var(--ink)}
@media(max-width:899px){.cfg-grid{grid-template-columns:1fr}.cfg-ph{aspect-ratio:2/1;margin-top:20px}.cfg .lead{font-size:16px}.cfg-sum .pill{width:100%;justify-content:space-between}}

/* Fotogalerie (Baustein): Bilder in gleich hohen Reihen, jede Reihe füllt die Breite, nichts wird verzerrt.
   .pgal = Reihen, .pgal--mosaik = Raster mit einem großen Bild */
.pgal{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pgal::after{content:"";display:block;flex-grow:10}
.pgal>li{position:relative;flex-grow:1;height:clamp(150px,30vh,260px);overflow:hidden;border-radius:4px;background:var(--tint)}
.pgal .pg-b{display:block;width:100%;height:100%;padding:0;border:0;margin:0;background:none;cursor:zoom-in;position:relative;font:inherit;color:#fff}
.pgal img{display:block;height:100%;min-width:100%;width:auto;max-width:none;object-fit:cover;transition:transform .8s var(--ease)}
.pgal>li:hover img{transform:scale(1.05)}
/* Produktfoto auf weißem Grund (z. B. Verpackungs-Mockup): ganz zeigen statt zuschneiden, damit kein Schatten hart abgeschnitten wird */
.pgal>li.pgb-fit{background:#fff}.pgal>li.pgb-fit img{object-fit:contain}
.pgal .pg-b[data-caption]:not([data-caption=""])::after{content:attr(data-caption);position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:5px 9px;border-radius:4px;background:rgba(0,27,46,.82);color:#fff;font:600 12px/1.3 var(--f-body);text-align:left;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.pgal>li:hover .pg-b::after,.pgal .pg-b:focus-visible::after{opacity:1;transform:none}
.pgal .pg-b:focus-visible{outline:3px solid var(--blue-500);outline-offset:-3px}
@media(max-aspect-ratio:1/1) and (max-width:480px){.pgal>li{flex-grow:0;width:100%;height:auto}.pgal img{width:100%;height:auto;max-height:75vh;min-width:0}}
@media(hover:none){.pgal .pg-b[data-caption]:not([data-caption=""])::after{opacity:1;transform:none}}
.pgal--mosaik{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(110px,15vw,220px);gap:8px}
.pgal--mosaik::after{display:none}
.pgal--mosaik>li{height:auto;flex-grow:0}
.pgal--mosaik>li:first-child{grid-column:span 2;grid-row:span 2}
.pgal--mosaik img{width:100%;height:100%;min-width:0}
@media(max-width:700px){.pgal--mosaik{grid-template-columns:1fr 1fr}.pgal--mosaik>li:first-child{grid-column:span 2;grid-row:span 1}}
.cfg-opts button:disabled,.cfg-opts button.is-off{opacity:.45;cursor:not-allowed;background:var(--tint);border-style:dashed;color:var(--muted)}
.cfg-opts button:disabled:hover{border-color:var(--line)}
.cfg-note{display:flex;gap:8px;align-items:flex-start;margin:0 0 18px;padding:10px 12px;border-radius:6px;background:#EEF6FC;border:1px solid #cfe3f3;color:var(--ink);font-size:14px;line-height:1.45}
.cfg-note[hidden]{display:none}
.cfg-note::before{content:"i";flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--blue-700);color:#fff;font:700 12px/1 var(--f-body)}

/* Anfrage-Fenster (Individuelles Design) */
.dlg-req{position:fixed;inset:0;margin:auto;width:min(720px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow:auto;background:#fff;border-radius:8px;box-shadow:0 40px 90px -30px rgba(0,27,46,.6);opacity:0;transform:translateY(20px);transition:opacity .3s,transform .4s var(--ease)}
.dlg-req.is-open{opacity:1;transform:none}
.dlg-req:not([open]){display:none}
.dlg-req .fm{padding:clamp(24px,3.2vw,40px)}
.dlg-req .fm h3{font-size:clamp(24px,2.4vw,32px);margin-bottom:12px}
.req-ey{display:block;font:700 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-700);margin-bottom:10px}
.req-sum{margin:0 0 22px;padding:10px 12px;border-radius:6px;background:var(--tint);border:1px solid var(--line);font-size:14px;color:var(--muted)}
.req-sum strong{color:var(--ink)}
.dlg-req .line{grid-template-columns:1fr 1fr}
@media(max-width:700px){.dlg-req{inset:0;width:100%;max-height:100dvh;border-radius:0}.dlg-req .line{grid-template-columns:1fr}}

/* Startseite Variante 2 (index2.html): vier Bereichskarten, die sich zu einem Raster ordnen */
.fanhero{background:var(--tint);padding:clamp(104px,8.4vw,128px) 0 clamp(32px,4vw,56px);overflow:hidden}
.fh-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:end}
.fh-ey{display:block;font:700 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-700);margin-bottom:14px}
.fanhero h1{font-size:clamp(34px,4.2vw,60px);line-height:1;letter-spacing:-.04em}
.fanhero h1 span{display:block;color:var(--blue-700)}
.fh-tx p{margin-top:16px;max-width:46ch;color:var(--muted);font-size:clamp(15px,1.3vw,18px)}
.fh-act{display:flex;gap:20px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.fh-tel{font:600 16px/1 var(--f-body);color:var(--ink);text-decoration:none}
.fh-tel:hover{color:var(--blue-700)}
.fan{margin-top:clamp(22px,2.8vw,38px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,22px)}
.fc{position:relative;display:flex;align-items:flex-end;overflow:hidden;aspect-ratio:5/4.1;border-radius:12px;color:#fff;text-decoration:none;background:var(--navy-950);isolation:isolate;box-shadow:0 26px 46px -30px rgba(0,27,46,.8)}
.fc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease)}
.fc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,27,46,.97) 0%,rgba(0,27,46,.62) 42%,rgba(0,27,46,0) 80%);opacity:var(--ov,1)}
.fc:hover img,.fc:focus-visible img{transform:scale(1.07)}
.fc:focus-visible{outline:3px solid var(--blue-500);outline-offset:3px}
.fc .ft{display:grid;gap:3px;padding:clamp(14px,1.6vw,22px);width:100%}
.fc .fn{font:700 11px/1 var(--f-body);letter-spacing:.14em;opacity:.8}
.fc h2{font-size:clamp(19px,1.9vw,28px);color:#fff}
.fc small{font-size:13.5px;color:rgba(255,255,255,.88)}
.fx .fc{opacity:0;transform:translateX(var(--fx)) rotate(var(--fr)) scale(.92);animation:fanin 1.1s var(--ease) forwards;animation-delay:var(--d)}
@keyframes fanin{from{opacity:0;transform:translateX(var(--fx)) rotate(var(--fr)) scale(.92)}to{opacity:1;transform:none}}
@media(max-width:899px){
  .fh-head{grid-template-columns:1fr}
  .fh-act{justify-content:flex-start}
  .fan{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fc{aspect-ratio:1/1.05}
  .fx .fc{transform:translateX(calc(var(--fx) * .4)) rotate(var(--fr)) scale(.92)}
}
@media(prefers-reduced-motion:reduce){.fx .fc{animation:none;opacity:1;transform:none}}
/* Route: Ebenen - Linie unten, Stationspunkte darueber, dann der LKW. Die Kapitel-Karten liegen ueber allem:
   im Kartenbereich faehrt der LKW verdeckt darunter und taucht erst danach wieder auf. */
.route .rline{z-index:1}.route .rnode{z-index:2}.route .truck{z-index:3}.route .journey{z-index:4}

/* Route: Ankunft im blauen Bereich – LKW hält, Heck öffnet sich, Pakete werden auf eine Palette entladen */
.route .unload{z-index:3}
.unload{position:absolute;width:0;height:0;pointer-events:none}
.unload .upal{position:absolute;left:12px;bottom:0;width:66px;height:5px;border-radius:1px;background:repeating-linear-gradient(90deg,#c9a46f 0 14px,#a8834f 14px 18px);opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity .3s,transform .4s var(--ease)}
.unload .ub{position:absolute;left:0;bottom:5px;width:20px;height:16px;border-radius:2px;background:linear-gradient(180deg,#d9b07a,#c4955c);box-shadow:inset 0 0 0 1px rgba(90,60,20,.25),0 2px 4px rgba(0,0,0,.25);opacity:0;transform:translate(-26px,-6px) scale(.35);transition:transform .55s cubic-bezier(.3,1.45,.5,1),opacity .2s}
.unload .ub::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:rgba(255,255,255,.55)}
.unload .ub1{--x:14px}.unload .ub2{--x:35px}.unload .ub3{--x:56px}.unload .ub4{--x:24px;--y:-16px}
.unload .udone{position:absolute;left:4px;bottom:46px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:99px;background:#fff;color:var(--blue-700);font:600 12px/1 var(--f-body);white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.25);opacity:0;transform:translateY(8px) scale(.9);transition:opacity .3s,transform .4s var(--ease)}
.unload .udone::before{content:"";width:14px;height:14px;border-radius:50%;background:#2fae66 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2L10 5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.unload.flip{transform:scaleX(-1)}.unload.flip .udone{scale:-1 1}
.truck .topen{fill:#12324c;opacity:0;transition:opacity .3s}
.route.arrived .truck .topen{opacity:1;transition-delay:.25s}
.route.arrived .truck svg{animation:tstop .55s var(--ease)}
@keyframes tstop{0%{transform:none}35%{transform:translateX(-3px) rotate(-2deg)}70%{transform:translateX(1px) rotate(.6deg)}100%{transform:none}}
.route.arrived .unload .upal{opacity:1;transform:none;transition-delay:.3s}
.route.arrived .unload .ub{opacity:1;transform:translate(var(--x),var(--y,0)) scale(1)}
.route.arrived .unload .ub1{transition-delay:.55s}.route.arrived .unload .ub2{transition-delay:.85s}.route.arrived .unload .ub3{transition-delay:1.15s}.route.arrived .unload .ub4{transition-delay:1.45s}
.route.arrived .unload .udone{opacity:1;transform:none;transition-delay:1.95s}
@media(max-width:899px){.unload{display:none}}
@media(prefers-reduced-motion:reduce){.unload *,.truck .topen{transition:none!important}.route.arrived .truck svg{animation:none}}