@font-face{font-family:Manrope;src:url(assets/fonts/manrope-latin-ext-wght.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;src:url(assets/fonts/manrope-latin-wght.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#15142a;
  --muted:#5f5e74;
  --faint:#6f6e84;
  --line:#e4e3ec;
  --bg:#fafafb;
  --gray:#f1f1f5;
  --card:#fff;
  --accent:#f39400;
  --accent-text:#9a5c00;
  --accent-light:#ffb33d;
  --navy:#23214f;
  --on-navy:#d5d4e6;
  --radius:14px;
  --shadow:0 1px 2px rgba(35,33,79,.05),0 24px 60px -20px rgba(35,33,79,.16);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,system-ui,sans-serif;font-size:16px;line-height:1.55;font-weight:450;letter-spacing:.01em;word-spacing:.04em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;letter-spacing:inherit;word-spacing:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.045em;line-height:1.02;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul{list-style:none;margin:0;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{width:min(1080px,calc(100% - 48px));margin-inline:auto}
.center{text-align:center}
/* Positioned so a section paints over the hero drone video, which is taller than the photo strip. */
.section{position:relative;padding-block:120px 136px;overflow-x:clip}
.section-light{background:var(--bg)}
.section-gray{background:var(--grain),var(--gray)}
h2{font-size:clamp(32px,4.2vw,52px)}
.sub{margin:18px auto 0;color:var(--ink);font-size:16px}
.sub.narrow{max-width:520px}
.section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:end}
.section-head .sub{max-width:420px;margin:0 0 6px;color:var(--muted);font-size:17px}

.skip{position:fixed;left:16px;top:-60px;z-index:50;padding:10px 16px;background:var(--ink);color:#fff;border-radius:8px}
.skip:focus{top:12px}

/* Header */
.header{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:14px 32px;background:rgba(250,250,250,.85);backdrop-filter:blur(12px)}
.nav-left{display:flex;gap:clamp(16px,2vw,28px);font-size:14px;font-weight:500}
.nav-left a{white-space:nowrap}
.nav-left a:hover{color:var(--muted)}
.nav-left a[aria-current]{position:relative;color:var(--ink)}
.nav-left a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent)}
.nav-mobile-cta{display:none}
.brand img{width:190px}
.nav-right{display:flex;justify-content:flex-end;align-items:center;gap:20px;font-size:14px;font-weight:500}
.pill{display:inline-flex;align-items:center;justify-content:center;padding:9px 18px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}
.pill:hover{background:var(--navy)}
.menu-toggle{display:none;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:14px}

/* Hero */
.hero{text-align:center;background:var(--bg)}
.hero-copy{padding:110px 24px 70px}
.hero h1{max-width:820px;margin-inline:auto;font-size:clamp(46px,7.4vw,92px);letter-spacing:-.055em;line-height:.98}
.hero-copy p{max-width:520px;margin:28px auto 0;font-size:clamp(17px,1.6vw,20px);line-height:1.45}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 28px;margin-top:36px}
.hero-cta{padding:15px 28px;font-size:16px;box-shadow:0 12px 28px -12px rgba(35,33,79,.55)}
.hero-link{display:inline-flex;align-items:center;gap:8px;padding:12px 0;font-size:16px;font-weight:600}
.hero-link::after{content:"";width:7px;height:7px;margin-top:-3px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg);transition:transform .2s cubic-bezier(.23,1,.32,1)}
.hero-link:hover::after{transform:translateY(3px) rotate(45deg)}
.hero-image{position:relative;height:min(46vw,620px);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 42%);mask-image:linear-gradient(to bottom,transparent,#000 42%)}
.hero-image img{width:100%;height:100%;object-fit:cover;object-position:55% 62%}
.hero-video{display:none}
.hero-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;width:min(1080px,calc(100% - 48px));margin:40px auto 0}
.hero-fact{padding:clamp(18px,2.2vw,28px) clamp(20px,2.6vw,34px);background:var(--grain),var(--navy);color:#fff;border-left:6px solid var(--accent);text-align:left}
.hero-fact strong{display:block;font-variant-numeric:tabular-nums;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.04em;line-height:1.1}
.hero-fact span{display:block;margin-top:8px;color:rgba(255,255,255,.78);font-size:clamp(15px,1.3vw,17px)}

/* Cards */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--gray);font-size:12px;font-weight:500;line-height:1.4}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;padding:12px 0;border-radius:var(--radius);color:#fff;text-align:left;background:radial-gradient(120% 140% at 100% 0,rgba(243,148,0,.12),transparent 55%),var(--grain),var(--navy);box-shadow:var(--shadow)}
.stat{padding:28px 36px 32px;display:flex;flex-direction:column}
.stat+.stat{border-left:1px solid rgba(255,255,255,.12)}
.stat .tag{align-self:flex-start;background:rgba(255,255,255,.1);color:var(--on-navy)}
.stat-value{margin-top:40px;font-size:clamp(34px,4vw,52px);font-weight:700;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-label{margin-top:10px;font-size:17px;font-weight:500}
.stat-note{margin-top:14px;color:var(--on-navy);font-size:14px;line-height:1.5}

/* About */
.about-intro{max-width:640px;margin:28px auto 0;font-size:clamp(20px,2.2vw,25px);line-height:1.4;letter-spacing:-.015em}
.about-history{max-width:600px;margin:72px auto 0;text-align:left}
.about-history h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.03em}
.about-history p{margin-top:16px;font-size:17px;line-height:1.65;text-wrap:auto}
.about-history p:first-of-type{margin-top:20px;font-size:19px;line-height:1.55}

/* Services */
.service-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px;margin-top:56px;text-align:left}
@media(min-width:901px){
  .service-grid>.service-feature{grid-area:1/1/3/2}
  .service-grid>article:nth-of-type(2){grid-area:1/2/2/3}
  .service-grid>article:nth-of-type(3){grid-area:1/3/2/4}
  .service-grid>.service-wide{grid-area:2/2/3/4}
}
.service{min-height:220px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;gap:36px}
.service h3{font-size:20px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.service p{margin-top:10px;max-width:34ch;color:var(--muted);font-size:15.5px;line-height:1.5}
.service-wide{grid-column:span 2;min-height:160px;flex-direction:row;align-items:flex-end;justify-content:space-between}
.service-wide>div{order:-1}
.service:not(.service-feature) .service-more-toggle{background:var(--gray)}
.service:not(.service-feature) .service-more-toggle:hover{background:var(--line)}
.service-wide p{max-width:56ch}
/* Small cards share a row: titles start under the icon and buttons sit on the bottom edge, whatever the text length. */
.service:not(.service-feature,.service-wide){justify-content:flex-start}
.service:not(.service-feature,.service-wide)>div:not(.service-peek){flex:1;display:flex;flex-direction:column;align-items:flex-start}
.service:not(.service-feature,.service-wide) h3+p{flex:1}
.service-feature{position:relative;grid-row:span 2;min-height:460px;overflow:hidden;color:#fff;background:var(--navy)}
.service-feature>*{position:relative}
.service-feature picture{position:absolute;inset:0}
.service-feature .service-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right}
.service-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(35,33,79,.95),rgba(35,33,79,.75) 38%,rgba(35,33,79,0) 72%)}
.service-feature>.icon,.service-feature>div{z-index:1}
.service-feature .icon{background:rgba(255,255,255,.9)}
.service-feature p{color:var(--on-navy)}
.service-more-toggle{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:9px 16px;border:0;border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,transform .16s ease-out}
.service-more-toggle:active{transform:scale(.97)}
.service-more-toggle::after{content:"";width:6px;height:6px;margin-top:-3px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.service-more-toggle[aria-expanded="true"]::after{margin-top:3px;transform:rotate(-135deg)}
.service-more-toggle:hover{background:var(--gray)}
.service-more-toggle[hidden]{display:none}
.service-more{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:20px 48px;padding:36px;transition:opacity .25s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1),display .25s allow-discrete}
.service-more[hidden]{display:none;opacity:0;transform:translateY(8px);transition-duration:.15s;transition-timing-function:ease-out}
@starting-style{.service-more:not([hidden]){opacity:0;transform:translateY(8px)}}
.service-more[data-instant]{transition:none}
.service-more-title{grid-column:1/-1;font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.2}
/* The photo fills the third column at the height of the text; contain:size keeps its own height out of the row sizing. It loads eagerly so it is ready when the panel opens. */
.service-more:has(.service-more-photo){grid-template-columns:1fr 1fr minmax(0,.7fr)}
.service-more:has(.service-more-photo)>.service-more-title{grid-column:1/3}
.service-more-photo{grid-column:3;grid-row:1/3;contain:size;width:100%;height:100%;object-fit:cover;border-radius:12px}
/* The card whose details are open keeps an orange ring, so the panel below the grid reads as its own. */
.service:has([aria-expanded="true"]){outline:2px solid var(--accent);outline-offset:3px}
.service:has(.service-more-toggle:not([hidden])){cursor:pointer}
.service-more>div>p+p{margin-top:16px}
.service-more>div>p{max-width:60ch;font-size:15.5px;line-height:1.6}
.service-more-label{font-size:13px;font-weight:600}
/* Hover preview: a few key services fade in over the card without changing its size; the full list stays behind the button. */
.service-peek{display:none}
@media(hover:hover) and (pointer:fine){
  .service:has(.service-peek){position:relative;overflow:hidden}
  .service:has(.service-peek)>div:not(.service-peek){position:relative;z-index:2}
  .service-peek{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;padding:26px 26px 92px;background:var(--card);opacity:0;pointer-events:none;transition:opacity .15s ease-out}
  .service-feature .service-peek{background:rgba(35,33,79,.88);color:#fff}
  .service-wide .service-peek .check-list{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
  .service .service-peek-title{margin:0;max-width:none;color:inherit;font-size:20px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
  .service-peek .check-list{margin-top:14px;border-top-color:var(--line)}
  .service-peek .check-list li{padding-block:9px;font-size:14px}
  .service-feature .service-peek .check-list,.service-feature .service-peek .check-list li{border-color:rgba(255,255,255,.14);color:var(--on-navy)}
  .service-feature .service-peek .check-list li:before{border-color:var(--accent)}
  .service-peek>*{transform:translateY(6px);filter:blur(2px);transition:transform .15s ease-out,filter .15s ease-out}
  .service:has(.service-peek)>.icon,.service:has(.service-peek) h3,.service:has(.service-peek) h3+p{transition:opacity .15s ease-out,filter .15s ease-out}
  .service:not(.peek-dismissed,.peek-too-small):is(:hover,:has(.service-more-toggle:focus-visible)):not(:has([aria-expanded="true"])) .service-peek{opacity:1;transition:opacity .25s cubic-bezier(.22,1,.36,1)}
  .service:not(.peek-dismissed,.peek-too-small):is(:hover,:has(.service-more-toggle:focus-visible)):not(:has([aria-expanded="true"])) .service-peek>*{transform:none;filter:none;transition:transform .3s cubic-bezier(.22,1,.36,1),filter .3s cubic-bezier(.22,1,.36,1)}
  .service:not(.peek-dismissed,.peek-too-small):is(:hover,:has(.service-more-toggle:focus-visible)):not(:has([aria-expanded="true"])) .service-peek>ul{transition-delay:.05s}
  .service:not(.peek-dismissed,.peek-too-small):is(:hover,:has(.service-more-toggle:focus-visible)):not(:has([aria-expanded="true"])):has(.service-peek)>.icon,
  .service:not(.peek-dismissed,.peek-too-small):is(:hover,:has(.service-more-toggle:focus-visible)):not(:has([aria-expanded="true"])) h3,
  .service:not(.peek-dismissed,.peek-too-small):is(:hover,:has(.service-more-toggle:focus-visible)):not(:has([aria-expanded="true"])) h3+p{opacity:0;filter:blur(2px)}
}
/* Each card is tinted in its material: copper docks, moss green, warehouse graphite. On desktop the text covers the small
   cards, so a light tint plus a soft text shadow keep the photo visible; the wide card keeps its text on the left. */
.service-werkverkehre{--tint:74,36,18;--photo:url("assets/leistungen/werkverkehre-mobile.jpg")}
.service-ultrafrisch{--tint:34,48,28;--photo:url("assets/leistungen/ultrafrisch-mobile.jpg")}
.service-wide.service-mobile-photo{--tint:42,38,34;--photo:url("assets/leistungen/warehouse-mobile.jpg")}
.service.service-mobile-photo{position:relative;overflow:hidden;color:#fff;background:rgb(var(--tint))}
.service-mobile-photo::before{content:"";position:absolute;inset:0;background:var(--photo) center/cover}
.service-wide.service-mobile-photo::before{background-position:center 28%}
.service-mobile-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(var(--tint),.78),rgba(var(--tint),.6) 55%,rgba(var(--tint),.3));pointer-events:none}
.service-mobile-photo :is(h3,p){text-shadow:0 1px 14px rgba(var(--tint),.9),0 0 2px rgba(var(--tint),.6)}
.service-wide.service-mobile-photo::after{background:linear-gradient(to right,rgba(var(--tint),.95),rgba(var(--tint),.88) 60%,rgba(var(--tint),.15))}
.service-mobile-photo>.icon,.service-mobile-photo>div:not(.service-peek){position:relative;z-index:2}
.service-mobile-photo .icon{background:rgba(255,255,255,.9)}
.service-mobile-photo p{color:rgba(255,255,255,.82)}
.service.service-mobile-photo .service-more-toggle{background:#fff}
.service.service-mobile-photo .service-more-toggle:hover{background:var(--gray)}
.service-mobile-photo .service-peek{background:rgba(var(--tint),.94);color:#fff}
.service-mobile-photo .service-peek .check-list,.service-mobile-photo .service-peek .check-list li{border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.82)}
@media(max-width:600px){.service-mobile-photo .service-peek .check-list{display:block}}
.service-more .check-list{margin-top:12px}
.icon{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--gray)}
.icon svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Split layouts */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.feature-list{margin-top:48px;display:grid;gap:30px}
.feature-list li{display:grid;grid-template-columns:auto 1fr;gap:14px}
.feature-list .icon{width:28px;height:28px;background:none}
.feature-list h3{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.feature-list p{margin-top:6px;max-width:400px;color:var(--muted);font-size:15.5px;line-height:1.55}
.photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5}
.photo img{width:100%;height:100%;object-fit:cover}
.fleet-feature{position:relative;padding:12px;border-left:3px solid transparent;border-radius:0 10px 10px 0;transition:background .4s,border-color .4s}
.fleet{margin-top:96px;text-align:left}
#fuhrpark .feature-list{margin-top:0;gap:8px}
.fleet-feature.is-active{background:#fdf1dc;border-left-color:var(--accent)}
.fleet-feature.is-active h3{color:var(--accent-text)}
.fleet-select{padding:0;border:0;background:none;text-align:left;font:inherit;letter-spacing:inherit;cursor:pointer}
.fleet-select::after{content:"";position:absolute;inset:0}
.fleet-media{min-width:0}
.fleet-photo{position:relative;background:var(--gray)}
.fleet-photo .fleet-slide{position:absolute;inset:0;opacity:0;transition:opacity .65s ease;transform:none}
.fleet-photo .fleet-slide.is-active{opacity:1}
.fleet-photo:hover .fleet-slide{transform:none}
.fleet-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;font-size:12px;color:var(--muted)}
.fleet-controls[hidden]{display:none}
.fleet-counter{font-variant-numeric:tabular-nums;letter-spacing:.12em}
.fleet-pause{border:1px solid var(--line);border-radius:999px;background:var(--card);padding:8px 14px;cursor:pointer;font-size:12px}
.fleet-pause:hover{border-color:var(--ink)}
@media(prefers-reduced-motion:reduce){.fleet-photo .fleet-slide,.fleet-feature{transition:none}}

/* Contract */
.contract{margin-top:56px;overflow:hidden}
.contract-media>*{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.contract-media>.is-active{opacity:1}
.contract-media>video{transform-origin:4.5% 100%}
.contract-media>video.is-close{transform:scale(1.8);transition:opacity .6s ease,transform 2.4s cubic-bezier(.45,0,.2,1)}
@media(prefers-reduced-motion:reduce){.contract-media>video.is-close{transition:opacity .6s ease}}
/* The route under the drone shot: four stops from first call to daily operation, joined by a road line. */
.route{margin:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding:30px 32px 34px;text-align:left}
.route-stop{--fill:100%;position:relative}
.route-select{padding:0;border:0;background:none;text-align:left;font:inherit;letter-spacing:inherit;cursor:pointer}
.route-select::after{content:"";position:absolute;inset:-8px}
.route-stop.is-active h3{color:var(--accent-text)}
.route-stop::before{content:"";display:block;width:12px;height:12px;margin-bottom:18px;border:2px solid var(--line);border-radius:50%;background:var(--card);transition:background-color .3s,border-color .3s}
.route:not(.is-live) .route-stop::before,.route-stop.is-reached::before{border-color:var(--accent);background:var(--accent)}
.route-stop.is-active::before{box-shadow:0 0 0 5px #fdf1dc}
.route-stop:not(:last-child)::after{content:"";position:absolute;top:5px;left:12px;width:calc(100% + 16px);height:2px;background:linear-gradient(to right,var(--accent) var(--fill),var(--line) var(--fill))}
.route h3{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.route-num{margin-right:2px;color:var(--accent-text);font-variant-numeric:tabular-nums}
.route p{margin-top:8px;max-width:30ch;color:var(--muted);font-size:15.5px;line-height:1.5}
.check-list{margin-top:22px;border-top:1px solid var(--line)}
.check-list li{position:relative;padding:11px 0 11px 26px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.check-list li:before{content:"";position:absolute;left:2px;top:17px;width:10px;height:5px;border-left:1.6px solid var(--accent-text);border-bottom:1.6px solid var(--accent-text);transform:rotate(-45deg)}

/* Team */
.team-layout{max-width:1020px;margin:32px auto 0;text-align:left}
.team-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.member{min-width:0;padding:20px;display:flex;flex-direction:column;align-items:flex-start}
.team-head{display:flex;justify-content:center;align-items:center;gap:clamp(12px,1.6vw,20px)}
.team-truck{position:relative;display:block;width:clamp(64px,7vw,92px);flex:none;margin-bottom:-.06em}
.team-truck img{width:100%}
.team-truck::before,.team-truck::after{content:"";position:absolute;top:79%;width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fffbe6 0 16%,rgba(255,190,60,.85) 34%,rgba(255,190,60,0) 70%);transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.team-truck::before{left:25%}
.team-truck::after{left:69%}
@media(prefers-reduced-motion:no-preference){.team-truck.is-lit::before,.team-truck.is-lit::after{animation:headlights 1.2s .1s ease-out}}
@keyframes headlights{0%{opacity:0}10%{opacity:1}22%{opacity:.1}34%{opacity:1}100%{opacity:0}}
.member-avatar{display:grid;place-items:center;width:56px;height:56px;margin-bottom:16px;border-radius:50%;background:var(--av-bg,var(--navy));color:var(--av-fg,#fff);font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1}
.member:nth-child(2){--av-bg:#fbeedb;--av-fg:#8a5300}
.member:nth-child(3){--av-bg:#e9e8f3;--av-fg:var(--navy)}
.member:nth-child(4){--av-bg:#4b4878}
.member:nth-child(5){--av-bg:#f1e7dc;--av-fg:#6b4a2a}
.member:nth-child(6){--av-bg:#dcdbe8;--av-fg:var(--navy)}
.member:nth-child(7){--av-bg:#6b6990}
.member:nth-child(8){--av-bg:#f7dcb8;--av-fg:#7a4a00}
.member-details>summary{display:flex;flex-direction:column;align-items:flex-start;list-style:none;cursor:default}
.member-details>summary::-webkit-details-marker{display:none}
.member h4{font-size:18px;letter-spacing:-.03em}
.member-role{display:block;margin-top:4px;color:var(--muted);font-size:14px}
.member-mail{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.member-mail:hover{color:var(--accent-text)}

/* Career */
.career-photo{display:block;max-width:900px;margin:40px auto 0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.career-photo img{width:100%;aspect-ratio:900/420;object-fit:cover;object-position:50% 28%}
@media(max-width:600px){.career-photo img{aspect-ratio:4/3;object-position:50% 20%}}
.job-list{display:grid;gap:12px;max-width:900px;margin:16px auto 0;text-align:left}
.job-summary{display:grid;grid-template-columns:44px minmax(0,1fr) auto 16px;column-gap:16px;align-items:center;padding:18px 22px;list-style:none;cursor:pointer}
.job-summary::-webkit-details-marker{display:none}
.job-summary .icon{width:44px;height:44px;border-radius:12px}
.job-summary .icon svg{width:24px;height:24px}
.job h3{font-size:19px;letter-spacing:-.025em;line-height:1.2}
.job-meta{display:block;margin-top:3px;color:var(--muted);font-size:13.5px}
.job-chevron{width:8px;height:8px;margin:-4px auto 0;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .2s cubic-bezier(.23,1,.32,1)}
.job[open] .job-chevron{margin-top:4px;transform:rotate(-135deg)}
.job-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;padding:4px 22px 26px 82px}
.job-facts{grid-column:1/-1;display:grid;gap:6px;margin:0;font-size:13px}
.job-facts div{display:grid;grid-template-columns:150px 1fr;gap:12px}
.job-facts dt{color:var(--muted)}
.job-facts dd{margin:0;font-weight:600}
.job-label{margin-top:22px;font-size:13px;font-weight:600}
.job .check-list{margin-top:8px}
.job-apply{grid-column:1/-1;justify-self:start;margin-top:24px}
.job-note,.team-note{margin-top:28px;color:var(--muted);font-size:14px}
.team-note{margin-top:24px}
.job-note a,.team-note a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* Contact */
#kontakt{background:radial-gradient(90% 120% at 0 100%,rgba(243,148,0,.1),transparent 60%),var(--grain),var(--navy)}
#kontakt h2{color:var(--accent)}
#kontakt .contact-text,#kontakt .contact-mail{color:#fff}
#kontakt address{color:var(--on-navy)}
#kontakt .contact-mail:hover{color:var(--accent-light)}
.contact{align-items:start}
.contact-text{margin-top:28px;max-width:420px;font-size:15px}
.contact-mail{display:block;width:fit-content;margin-top:32px;font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.03em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.contact-mail:hover{color:var(--accent-text)}
.contact-phone{margin-top:10px}
address{margin-top:22px;font-style:normal;color:var(--muted);font-size:14px;line-height:1.7}
.form{padding:28px}
.form label{display:block;margin:18px 0 6px;font-size:13px;font-weight:600}
.form label span{font-weight:450;color:var(--muted)}
input,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);transition:border-color .2s}
input:focus,textarea:focus{outline:0;border-color:var(--ink)}
textarea{resize:vertical;min-height:120px}
.pill-large{width:100%;margin-top:22px;padding:14px 18px;font-size:15px}
.form-note{margin-top:12px;color:var(--faint);font-size:13px;text-align:center}
#form-status{margin-top:12px;font-size:13px}
#form-status:empty{display:none}

/* Footer */
.footer{border-top:1px solid var(--line);padding-block:28px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px;color:var(--muted)}
.footer .brand img{width:120px}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.footer-links a:hover{color:var(--ink)}

/* Legal pages */
.header-simple{grid-template-columns:auto 1fr}
.header-simple .nav-right .pill{display:inline-flex}
.legal{min-height:60vh}
.legal h1{font-size:clamp(40px,5vw,64px)}
.legal .sub{margin-left:0}
.legal-body{max-width:640px;margin-top:40px}
.legal-body h2{margin-top:32px;font-size:18px;letter-spacing:-.02em}
.legal-body p{margin-top:8px;line-height:1.7}
.legal-body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

@media(max-width:900px){
  .route{grid-template-columns:minmax(0,1fr);gap:22px;padding:24px}
  .route-stop{padding-left:28px}
  .route-stop::before{position:absolute;top:4px;left:0;margin:0}
  .route-stop:not(:last-child)::after{top:16px;left:5px;width:2px;height:calc(100% + 10px);background:linear-gradient(to bottom,var(--accent) var(--fill),var(--line) var(--fill))}
  .section{padding-block:88px}
  .header{grid-template-columns:auto 1fr;padding:12px 20px}
  .brand{grid-row:1;grid-column:1}
  .nav-right{grid-row:1;grid-column:2}
  .nav-right .pill{display:none}
  .menu-toggle:not([hidden]){display:block}
  .nav-left{grid-column:1/-1;flex-direction:column;gap:0;font-size:16px}
  .nav-left a{padding:12px 0;border-top:1px solid var(--line)}
  .nav-left a[aria-current]{color:var(--accent-text);font-weight:700}
  .nav-left a[aria-current]::after{content:none}
  .nav-mobile-cta{display:block}
  .js .nav-left{display:none}
  .js .nav-left.open{display:flex}
  .section-head{grid-template-columns:1fr;gap:18px}
  .service-grid{grid-template-columns:minmax(0,1fr)}
  .service-feature{grid-row:auto;min-height:380px}
  .service-wide{grid-column:auto}
  .service-more,.service-more:has(.service-more-photo){grid-template-columns:1fr;gap:20px}
  .service-more:has(.service-more-photo)>.service-more-title{grid-column:auto}
  .service-more-photo{grid-column:auto;grid-row:auto;contain:none;height:auto;aspect-ratio:4/3;object-position:50% 40%}
  .stat-grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){grid-column:span 2;border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .job-body{grid-template-columns:minmax(0,1fr);padding:4px 22px 24px}
  .team-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr;gap:48px}
  .photo{aspect-ratio:4/3}
}
@media(max-width:600px){
  .wrap{width:calc(100% - 32px)}
  .section{padding-block:72px}
  .hero-copy{padding:64px 20px 40px}
  .stat-grid,.service-grid,.hero-facts{grid-template-columns:1fr}
  .service-feature,.service-wide,.stat:nth-child(3){grid-column:auto}
  /* Right under the hero truck a second truck photo would only repeat it, so phones get the empty Autobahn instead. */
  .service-feature{min-height:320px}
  .service-feature .service-photo{object-position:50% 20%}
  /* Phones: the text sits at the foot of a taller card, so only the lower part is tinted and the photo shows above it. */
  .service.service-mobile-photo{min-height:440px;justify-content:space-between}
  .service-mobile-photo::before,.service-wide.service-mobile-photo::before{background-position:center top}
  .service.service-mobile-photo>div:not(.service-peek){flex:0 0 auto}
  .service-mobile-photo::after,.service-wide.service-mobile-photo::after{background:linear-gradient(to top,rgba(var(--tint),.96),rgba(var(--tint),.8) 45%,rgba(var(--tint),0) 75%)}
  .service-wide{flex-direction:column;align-items:flex-start}
  .service-wide>div{order:0}
  /* Nine centred lines are hard to follow; the intro lines up with the history below instead. */
  .about-intro{font-size:19px;text-align:left}
  .stat{padding:24px 24px 28px}
  .stat+.stat{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .form,.service-more{padding:22px}
  .job-summary{grid-template-columns:40px minmax(0,1fr) 16px;row-gap:8px;padding:16px}
  .job-summary .icon{grid-row:1/span 2;width:40px;height:40px}
  .job-summary .tag{grid-column:2;grid-row:2;justify-self:start}
  .job-chevron{grid-column:3;grid-row:1/span 2}
  .job-body{padding:0 16px 20px}
  /* Phones: an accordion – name and role per row, the email opens on tap. */
  .team-list{grid-template-columns:minmax(0,1fr);gap:8px}
  .member{display:block;padding:0;box-shadow:none}
  .member-details>summary{display:grid;grid-template-columns:44px minmax(0,1fr) 16px;column-gap:14px;align-items:center;padding:14px 16px;cursor:pointer}
  .member-details>summary::after{content:"";grid-column:3;grid-row:1/span 2;width:7px;height:7px;margin:-4px auto 0;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .2s cubic-bezier(.23,1,.32,1)}
  .member-details[open]>summary::after{margin-top:4px;transform:rotate(-135deg)}
  .member-avatar{grid-row:1/span 2;width:44px;height:44px;margin:0;font-size:16px}
  .member h4{font-size:17px}
  .member-role{margin-top:1px;font-size:14px}
  .member-mail{margin:0 16px 16px 74px;font-size:14px}
  .job-facts div{grid-template-columns:1fr;gap:0}
  .footer-inner{flex-direction:column;text-align:center}
  .footer-note{text-align:center}
}
/* Motion: transform/opacity only, and only when the user has not asked for less motion. */
.contract-media{position:relative;overflow:hidden;min-width:0;aspect-ratio:16/9}
/* AI Act Art. 50(4): AI media showing our branding or a real place carries a visible label (EU "AI generated" icon) while it shows. */
.ai-label{position:absolute;z-index:2;display:block;pointer-events:none;filter:drop-shadow(0 1px 4px rgba(21,20,42,.35));transition:opacity .6s ease,visibility .6s}
.ai-label img{width:auto;height:22px}
.fleet-photo .ai-label,.contract-media>.ai-label{inset:12px 12px auto auto;width:auto;height:auto;opacity:1}
:is(.fleet-photo,.contract-media):has(> .is-active:not([data-ai])) .ai-label{opacity:0;visibility:hidden}
.footer-note{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--faint)}
.footer-note a{text-decoration:underline}
@keyframes hero-copy-in{from{transform:translateY(8px)}to{transform:none}}
@keyframes member-in{from{opacity:0;transform:translateY(40px)}}
@keyframes mail-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes drop-in{from{opacity:0;transform:translateY(-8px)}}
@keyframes underline-in{from{transform:scaleX(0)}}
@keyframes rise-in{from{opacity:0;transform:translateY(12px)}}
/* Phones: while a photo card crosses the screen, its photo zooms in: the Autobahn into its vanishing point, as if driving
   down it, the others towards their light (the end of the docks, the sun, the open door).
   Browsers without scroll timelines (Firefox) get the same zoom from script.js through --zoom. */
@media(max-width:600px) and (prefers-reduced-motion:no-preference){
  .service-feature .service-photo,.service-mobile-photo::before{transform:scale(var(--zoom,1))}
  .service-feature .service-photo{transform-origin:61% 28%}
  .service-werkverkehre::before{transform-origin:8% 32%}
  .service-ultrafrisch::before{transform-origin:30% 8%}
  .service-wide.service-mobile-photo::before{transform-origin:30% 24%}
  @supports(animation-timeline:view()){
    /* The card clips with overflow:hidden, which makes it the photo's scroller, so the timeline is taken from the card itself. */
    .service-feature,.service-mobile-photo{view-timeline:--photo-card}
    .service-feature .service-photo,.service-mobile-photo::before{animation:road-rush linear both;animation-timeline:--photo-card}
  }
}
@keyframes road-rush{from{transform:scale(1)}to{transform:scale(1.4)}}
@media(prefers-reduced-motion:no-preference){
  .hero-copy{animation:hero-copy-in .65s cubic-bezier(.22,1,.36,1)}
  .js .reveal{transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
  .js .reveal.is-pending{opacity:0;transform:translateY(14px)}
  .js .reveal:focus-within{opacity:1;transform:none;transition:none}
  .js .service-grid.reveal.is-pending{pointer-events:none}
  /* Each team card fades up as it enters the view, one after another in reading order; script.js sets the delays. */
  .js .member.reveal{transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .js .member.reveal.is-pending{opacity:0;transform:none}
  /* A whole row enters at once here, so the cards take longer than on phones. */
  .js .member.reveal:not(.is-pending){animation:member-in 1.1s cubic-bezier(.33,1,.68,1) backwards}
  @media(max-width:600px){
    .js .member.reveal:not(.is-pending){animation-duration:.9s;animation-timing-function:cubic-bezier(.23,1,.32,1)}
    .member-details[open]>.member-mail{animation:mail-in .2s cubic-bezier(.23,1,.32,1)}
  }
  .nav-left a[aria-current]::after{animation:underline-in .3s cubic-bezier(.23,1,.32,1)}
  .pill,.menu-toggle{transition:background .2s,transform .16s ease-out}
  .pill:active,.menu-toggle:active{transform:scale(.985)}
  /* Things that used to pop in: the phone menu drops in from the header, opened job ads and the form message fade up. */
  @media(max-width:900px){.js .nav-left.open{animation:drop-in .2s cubic-bezier(.23,1,.32,1)}}
  .job[open] .job-body{animation:rise-in .25s cubic-bezier(.23,1,.32,1)}
  #form-status:not(:empty){animation:rise-in .2s cubic-bezier(.23,1,.32,1)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .service,.stat{transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .service:hover,.stat:hover{transform:translateY(-3px)}
  .photo img{transition:transform .7s cubic-bezier(.22,1,.36,1)}
  .photo:hover img{transform:scale(1.025)}
  .pill:hover,.menu-toggle:hover{transform:translateY(-1px)}
  .pill:active,.menu-toggle:active{transform:translateY(0) scale(.985)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .reveal.is-pending{opacity:1;transform:none}
}


/* Slower hero text entrance and slideshow duration indicator. */
.hero-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-line>span{display:block}
.fleet-progress{height:2px;background:var(--line);overflow:hidden;margin-top:18px;border-radius:2px}
.fleet-progress span{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
@keyframes line-enter{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes soft-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fleet-time{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:no-preference){
  .hero-copy{animation:none}
  .hero-line>span{animation:line-enter 1.3s cubic-bezier(.22,1,.36,1) both}
  .hero-line:nth-child(2)>span{animation-delay:.22s}
  .hero-copy p{animation:soft-enter 1.1s .5s both}
  .hero-actions{animation:soft-enter 1.1s .7s both}
  .is-running .fleet-progress span{animation:fleet-time 5s linear both}
}
@media(prefers-reduced-motion:reduce){
  .fleet-progress{display:none}
}
/* Hero photo pins mid-screen: two fact panels slide in from opposite edges, then leave for the drone video; script.js sets data-step
   and starts the video once the pin has run --video-at of its way. */
@media(prefers-reduced-motion:no-preference){
  .js .hero-track{--stage-h:min(46vw,620px);--video-h:max(var(--stage-h),min(56.25vw,100svh - 96px));--overlap:clamp(28px,5.5vw,80px);--video-at:.68;overflow-x:clip}
  .js .hero-track::after{content:"";display:block;height:220vh;height:220svh}
  /* The 16:9 drone shot outgrows the panoramic photo strip: it sits centred on the photo and its clip opens from the strip to the full frame. */
  .js .hero-video{display:block;position:absolute;left:0;top:calc(var(--stage-h) / 2);width:100%;height:var(--video-h);object-fit:cover;transform:translateY(-50%);clip-path:inset(calc((var(--video-h) - var(--stage-h)) / 2) 0);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%);mask-image:linear-gradient(to bottom,transparent,#000 12%);opacity:0;transition:opacity .8s ease,clip-path 1s cubic-bezier(.22,1,.36,1)}
  .js .hero-track.is-playing .hero-video{opacity:1;clip-path:inset(0)}
  /* The video's faded top is see-through, so the photo underneath would ghost through it. The photo goes once the video
     is fully in, and comes back at once when it ends, before the video fades out over it. */
  .js .hero-track.is-playing .hero-image img{opacity:0;transition:opacity 0s .8s}
  .js .hero-stage{position:sticky;top:calc((100vh - var(--stage-h)) / 2 + 32px);top:calc((100svh - var(--stage-h)) / 2 + 32px)}
  .js .hero-facts{display:block;width:auto;margin:0}
  .js .hero-fact{width:min(500px,88vw);transition:transform .9s cubic-bezier(.22,1,.36,1)}
  .js .hero-fact:first-child{position:absolute;left:0;top:var(--overlap);transform:translate(-101%,-100%)}
  .js .hero-fact:last-child{position:relative;margin:calc(var(--overlap) * -1) 0 0 auto;transform:translateX(101%);border-left:0;border-right:6px solid var(--accent)}
  .js .hero-track:is([data-step="1"],[data-step="2"]) .hero-fact:first-child{transform:translateY(-100%)}
  .js .hero-track[data-step="2"] .hero-fact:last-child{transform:none}
}
/* Phones: no pin, since a pinned strip left a whole screen of scrolling where nothing moved. The panels slide in under the
   strip on arrival and stay; script.js then plays the drone video inside the strip, and Dienstleistungen follows right below. */
@media(prefers-reduced-motion:no-preference) and (max-width:600px){
  .js .hero-track{--video-h:var(--stage-h)}
  .js .hero-track::after{content:none}
  .js .hero-stage{position:relative;top:auto}
  .js .hero-video{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 42%);mask-image:linear-gradient(to bottom,transparent,#000 42%)}
  .js .hero-facts{display:grid;gap:12px;margin-top:16px}
  /* Firefox lays the page out at desktop width first, where the panels sit off screen; with a transition they would
     glide back from there before the slide-in and arrive twice. */
  .js .hero-fact{transition:none}
  .js .hero-fact:first-child{position:relative;top:auto;transform:none;animation:hero-fact-left .9s .9s cubic-bezier(.22,1,.36,1) backwards}
  .js .hero-fact:last-child{margin:0 0 0 auto;transform:none;animation:hero-fact-right .9s 1.05s cubic-bezier(.22,1,.36,1) backwards}
}
@keyframes hero-fact-left{from{transform:translateX(-101%)}}
@keyframes hero-fact-right{from{transform:translateX(101%)}}