/* =====================================================================
   LUDZAY: Mobil-Design (eigenständig, nicht nur verkleinerter Desktop)
   Wird nur bis 1199 px Breite geladen. Navigation: bis 1199 px, Seiteninhalt: bis 899 px.
   ===================================================================== */
:root{--dockH:74px;--safeT:env(safe-area-inset-top,0px);--safeB:env(safe-area-inset-bottom,0px)}
html{-webkit-tap-highlight-color:transparent;scroll-padding-top:90px}
body{padding-bottom:calc(var(--dockH) + var(--safeB) + 10px);overscroll-behavior-y:none}
a,button,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ---------- Navigation: Glas-Leiste oben ---------- */
.nav{top:calc(8px + var(--safeT));left:8px;right:8px;height:56px;border-radius:18px;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);border:1px solid rgba(255,255,255,.85);box-shadow:0 10px 30px -8px rgba(0,36,61,.28);transition:transform .55s var(--ease),background-color .3s,border-color .3s}
.nav.nav-hide{transform:translateY(calc(-100% - 18px - var(--safeT)))}
.nav .logo{height:54px;border-right:0;padding:0 16px 0 18px}
.nav .logo img{height:28px}
.nav .r{gap:6px;padding-right:8px}
.nav .r .pill{display:none}
.nav .lbtn,.burger{width:42px;height:42px;border-radius:13px;background:rgba(0,36,61,.07);transition:background .3s,transform .25s var(--ease)}
.burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.burger span{width:18px;height:2px;margin:0;border-radius:2px;background:var(--ink);transition:translate .35s var(--ease),rotate .35s var(--ease),background .3s}
.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}
html.menu-open .nav{background:rgba(6,36,60,.97);border-color:rgba(255,255,255,.2);box-shadow:none;transform:none}
html.menu-open .nav .logo img{filter:brightness(0) invert(1)}
html.menu-open .nav .lbtn,html.menu-open .nav .burger{background:rgba(255,255,255,.14);color:#fff}
html.menu-open .nav .burger span{background:#fff}
html.menu-open .nav .lcnt{border-color:#0b3556}

/* ---------- Vollbild-Menü ---------- */
.mnav{inset:0;max-height:none;height:auto;padding:calc(88px + var(--safeT)) 22px max(22px,var(--safeB));border-radius:0;background:linear-gradient(165deg,var(--navy-900) 0%,var(--navy-950) 100%);color:#fff;box-shadow:none;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;animation:none;transition:transform .62s cubic-bezier(.32,.72,0,1),visibility 0s;z-index:99;will-change:transform;contain:layout paint}
.mnav,.mnav:not([hidden]){animation:none!important}
.mnav[hidden]{display:flex;visibility:hidden;transform:translate3d(0,-104%,0);transition:transform .5s cubic-bezier(.32,.72,0,1),visibility 0s .5s}
.mnav>ul>li{border-bottom:1px solid rgba(255,255,255,.13);opacity:0;transform:translate3d(0,16px,0);transition:opacity .45s ease-out,transform .55s cubic-bezier(.22,1,.36,1)}
.mnav:not([hidden])>ul>li{opacity:1;transform:none}
.mnav:not([hidden])>ul>li:nth-child(1){transition-delay:.18s}.mnav:not([hidden])>ul>li:nth-child(2){transition-delay:.22s}.mnav:not([hidden])>ul>li:nth-child(3){transition-delay:.26s}.mnav:not([hidden])>ul>li:nth-child(4){transition-delay:.30s}.mnav:not([hidden])>ul>li:nth-child(5){transition-delay:.34s}.mnav:not([hidden])>ul>li:nth-child(6){transition-delay:.38s}
.mnav a,.mnav summary{min-height:62px;padding:0;font:500 clamp(27px,7.6vw,34px)/1.1 var(--f-head);letter-spacing:-.02em;color:#fff;transition:padding .3s var(--ease),color .2s}
.mnav a:active,.mnav summary:active{padding-left:10px;color:var(--sky)}
.mnav summary .ic{stroke:var(--sky);transition:rotate .4s var(--ease)}
.mnav details[open] summary .ic{rotate:180deg}
.mnav .sub{display:grid;padding:0 0 14px 2px;animation:subIn .45s var(--ease)}
@keyframes subIn{from{opacity:0;transform:translateY(-8px)}}
.mnav .sub a{min-height:48px;display:flex;align-items:center;padding-left:18px;border-left:2px solid rgba(160,199,231,.35);font:500 18px/1.2 var(--f-body);letter-spacing:0;color:var(--sky)}
.mnav .sub a:active{border-left-color:#fff;color:#fff;padding-left:26px}
.mnav .cta{display:grid;gap:12px;margin-top:auto;padding-top:26px;background:none;text-align:left;overflow:visible}
.mnav .cta::before{content:none}
.mnav a.mtel{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:0;padding:2px 0;font:500 16px/1.2 var(--f-body);letter-spacing:0;color:var(--sky)}
.mnav .cta a.pill{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:58px;padding:6px 6px 6px 24px;background:#fff;color:var(--blue-700);font:600 16px/1 var(--f-body);box-shadow:0 0 0 4px rgba(255,255,255,.14)}
.mnav .cta a.pill b{width:46px;height:46px;background:var(--blue-700);color:#fff}
.mnav .cta a.pill::before{display:none}

html.menu-open .panel img{animation-play-state:paused}
html.menu-open .nav,html.menu-anim .nav,html.menu-anim .dock{-webkit-backdrop-filter:none;backdrop-filter:none}
html.menu-anim:not(.menu-open) .nav{background:rgba(255,255,255,.95)}
html.menu-open .mroute,html.menu-open .totop{opacity:0!important;pointer-events:none}

/* ---------- Dock unten ---------- */
.dock{display:flex;position:fixed;z-index:95;left:10px;right:10px;bottom:max(10px,var(--safeB));gap:2px;padding:6px;border-radius:26px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);border:1px solid rgba(255,255,255,.85);box-shadow:0 16px 40px -10px rgba(0,36,61,.4);transition:transform .55s var(--ease),opacity .3s}
.dock a{position:relative;flex:1;display:grid;justify-items:center;gap:4px;padding:10px 0 9px;border-radius:20px;color:var(--muted);text-decoration:none;font:600 10.5px/1 var(--f-body);transition:background .3s,color .3s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.dock a .ic{width:21px;height:21px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.dock a.is-pressed{transform:scale(.9)}.dock a.is-pressed .ic{transform:translateY(-3px) scale(1.12)}
.dock a[aria-current=page]{background:var(--navy-900);color:#fff}
.dock a.dk-cta{background:var(--blue-700);color:#fff;flex:1.25}
html.menu-open .dock{transform:translateY(160%);opacity:0;pointer-events:none}
body:has(input:focus,textarea:focus,select:focus) .dock{transform:translateY(160%);opacity:0}
.totop{bottom:calc(var(--dockH) + var(--safeB) + 18px);right:14px;width:46px;height:46px}
.toast{bottom:calc(var(--dockH) + var(--safeB) + 18px)}

/* ---------- Touch statt Hover: kein "klebender" Hover, dafür Eindrücken beim Antippen ---------- */
@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--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}
  .cards a:hover img,.dd a:hover img,.panel:hover .go b{transform:none}
  .cards a:hover .ar{background:none;color:inherit;border-color:var(--line)}
  .cards a:hover .im::after{opacity:0}
  .tlink:hover::after{animation:none}
}
.is-pressed{transition:transform .18s ease-out,filter .18s!important}
.pill.is-pressed,.jlink.is-pressed,.add-btn.is-pressed,.filters button.is-pressed,.cards a.is-pressed,.panel.is-pressed,.acc button.is-pressed,.chip-link.is-pressed{transform:scale(.965);filter:brightness(.96)}
.panel.is-pressed{transform:scale(.985)}
.tbtn.is-pressed{transform:none;filter:none}
.rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.4);transform:scale(0);animation:rip .65s ease-out forwards}
.cards a .rip,.acc button .rip,.filters button .rip{background:rgba(0,93,157,.16)}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* ---------- Inhalte: nur bis 899 px ---------- */
@media(max-width:899px){
  :root{--pad:20px}
  body{font-size:16px}
  .wrap{width:calc(100% - 2*var(--pad))}
  .sec{padding-block:clamp(52px,14vw,76px)}
  .hd{gap:12px;margin-bottom:26px}
  h2{font-size:clamp(30px,8.4vw,40px)}
  .lead{font-size:16.5px}

  /* Hero: eigener Aufbau, drei tippbare Bildbänder füllen einen Bildschirm */
  .hero{min-height:0;display:flex;flex-direction:column;background:var(--navy-950)}
  .hero .intro{padding:calc(80px + var(--safeT)) 22px 18px;text-align:left}
  .hero h1{font-size:clamp(31px,8.8vw,40px);line-height:1.04}
  .hero h1 span{display:block}
  .hero .intro p{margin:12px 0 0;max-width:none;font-size:15px;line-height:1.5;color:rgba(255,255,255,.78)}
  .split{flex:none;display:flex;flex-direction:column;gap:3px;margin:0;border:0;background:var(--navy-950)}
  .panel{flex:0 0 auto;height:clamp(104px,13svh,128px);min-height:0;display:flex;align-items:center;border:0;border-radius:0;transition:none;animation:bandIn .9s var(--ease) both;animation-delay:calc(.15s + var(--i,0) * .12s)}
  .panel img{filter:brightness(.7);transform:scale(1.12);animation:kb 16s ease-in-out infinite alternate;transition:none}
  .panel.on img{filter:brightness(.7);transform:scale(1.12)}
  .panel::after{background:linear-gradient(90deg,rgba(0,27,46,.88) 0%,rgba(0,27,46,.5) 58%,rgba(0,27,46,.12) 100%)}
  .pc{display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"t g" "d g";column-gap:14px;row-gap:3px;align-items:center;width:100%;padding:0 18px;justify-items:stretch}
  .pc .n{position:absolute;top:9px;right:18px;font-size:10px;letter-spacing:.16em;opacity:.7}
  .pc .ico{grid-area:ic;width:48px;height:48px;border-radius:13px;background:rgba(255,255,255,.14)}
  .panel.on .ico{background:rgba(255,255,255,.14);color:#fff}
  .pc h2{grid-area:t;font-size:27px;white-space:normal;align-self:end}
  .more,.more>div{display:contents}
  .more p{grid-area:d;align-self:start;max-width:none;font-size:13.5px;line-height:1.35;color:rgba(255,255,255,.86);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .more .chips{display:none}
  .go{grid-area:g;font-size:0;gap:0;justify-self:end}
  .go b{width:44px;height:44px}
  /* Bereich "Verpackung": Tipp klappt die Auswahl Eier / Obst & Gemüse auf */
  .panel--pick{height:auto;min-height:clamp(104px,13svh,128px);cursor:pointer}
  .panel--pick>img.alt{display:none}
  .panel--pick::after{background:linear-gradient(90deg,rgba(0,27,46,.92) 0%,rgba(0,27,46,.7) 62%,rgba(0,27,46,.42) 100%)}
  .panel--pick .pc{grid-template-areas:"t g" "d g" "p p";padding:14px 18px}
  .panel--pick .more p{-webkit-line-clamp:2}
  .panel--pick .pick{grid-area:p;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
  .panel--pick.open .pick{grid-template-rows:1fr}
  .pick-in{grid-template-columns:1fr;gap:8px;padding:0}
  .panel--pick .pick-in::before{content:"";display:block;height:6px}
  .panel--pick .ch{background:rgba(255,255,255,.14);padding:8px 14px 8px 8px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease),background .3s}
  .panel--pick.open .ch{opacity:1;transform:none;transition-delay:.12s}
  .panel--pick.open .ch+.ch{transition-delay:.2s}
  .ch .tm{width:48px;height:48px}
  .pk-go{display:grid;place-items:center;grid-area:g;justify-self:end;align-self:center;width:44px;height:44px;border-radius:50%;border:0;padding:0;background:#fff;color:var(--blue-700);cursor:pointer}
  .pk-go .ic{width:20px;height:20px;transition:transform .45s var(--ease)}
  .panel--pick.open .pk-go .ic{transform:rotate(180deg)}
  @keyframes bandIn{from{opacity:0;transform:translateX(34px)}}
  @keyframes kb{to{transform:scale(1.22) translateX(-2%)}}

  /* Kennzahlen: drei Spalten, Symbol oben, Zahl mittig */
  .kpi ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpi li{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;text-align:center;gap:6px;row-gap:6px;column-gap:0;padding:26px 4px 24px;border-top:0;border-left:0}
  .kpi li+li{border-left:1px solid rgba(255,255,255,.22)}
  .kpi .ki{display:none}
  .kpi .kn{justify-content:center;font-size:clamp(25px,7.2vw,31px)}
  .kpi .kn sup{font-size:.4em}.kpi .kn em{position:static;margin:2px 4px 0 0;transform:none;font-size:10px;align-self:flex-start}
  .kpi .kl{font-size:9.5px;letter-spacing:.1em;line-height:1.3}

  /* Sortiment-Karten: wischbares Karussell */
  .cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;border:0;margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:var(--pad)}
  .cards::-webkit-scrollbar{display:none}
  .cards a{flex:0 0 76%;scroll-snap-align:start;border:1px solid var(--line)!important;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 18px 34px -24px rgba(0,36,61,.4);transform:scale(var(--s,1));transform-origin:center;transition:transform .12s linear}
  .cards .im{aspect-ratio:4/3.4}
  .cards .tx{padding:16px 16px 18px}
  .cards h3{font-size:22px}
  .dots{display:flex;justify-content:center;gap:7px;margin-top:2px}
  .dots i{width:7px;height:7px;border-radius:99px;background:var(--line);transition:width .35s var(--ease),background .3s}
  .dots i.on{width:22px;background:var(--blue-700)}

  /* Design-Block, Firmenfotos, FAQ, Abschluss */
  .dsg{border-radius:18px}
  .dsg .tx{padding:26px 22px 28px}
  .firm{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 6px;scrollbar-width:none}
  .firm::-webkit-scrollbar{display:none}
  .firm figure{flex:0 0 84%;scroll-snap-align:center;border-radius:16px}
  .jgrid{padding-bottom:calc(var(--dockH) + var(--safeB) + 30px)}
  .acc button{min-height:60px;padding:18px 0}
  .cta h2{font-size:clamp(34px,10vw,46px)}

  /* Fußzeile: Akkordeon */
  .foot{padding:44px 0 calc(var(--dockH) + var(--safeB) + 24px)}
  .foot .g{gap:0}
  .foot .g>div>h4{display:flex;justify-content:space-between;align-items:center;min-height:56px;margin:0;border-top:1px solid var(--line);cursor:pointer;font-size:12px;letter-spacing:.16em}
  .foot .g>div:first-child>h4,.foot .g>div:first-child{border-top:0}
  .foot .g>div.fa>h4::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;margin-right:4px;transition:rotate .35s var(--ease)}
  .foot .g>div.fa.open>h4::after{rotate:-135deg}
  .foot .g>div.fa>:not(h4){display:none}
  .foot .g>div.fa.open>:not(h4){display:block;animation:subIn .4s var(--ease)}
  .foot .g>div.fa.open{padding-bottom:12px}
  .foot ul a,.foot address a{display:inline-block;padding:9px 0}

  /* Eingabefelder: 16 px, damit iOS nicht zoomt */
  input,select,textarea{font-size:16px!important}

  /* Einblenden beim Scrollen (Klasse kommt aus mobile.js) */
  .fx .mfx{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .fx .mfx.in{opacity:1;transform:none}
}

@media(max-width:899px){
  /* LKW-Fahrt über die ganze Bildschirmbreite (ersetzt die Linie am Rand) */
  [data-route] .rline,[data-route] .truck,[data-route] .rnode{display:none!important}
  .mroute{position:fixed;z-index:90;left:18px;right:18px;top:calc(72px + var(--safeT));height:26px;pointer-events:none;opacity:0;transform:translateY(-10px);transition:opacity .4s,transform .55s var(--ease),top .55s var(--ease)}
  .mroute.show{opacity:1;transform:none}
  html.nav-away .mroute{top:calc(12px + var(--safeT))}
  .mroute::before{content:"";position:absolute;left:-10px;right:-10px;top:-3px;bottom:-3px;border-radius:99px;background:rgba(255,255,255,.92);box-shadow:0 8px 22px -10px rgba(0,36,61,.4)}
  .mroute .trk{position:absolute;left:0;right:0;top:50%;border-top:2px dashed rgba(0,93,157,.38)}
  .mroute .fill{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:var(--blue-500);transform-origin:0 50%;transform:scaleX(0)}
  .mroute .tk{position:absolute;left:0;top:0;width:46px;height:26px;will-change:transform}
  .mroute .tk svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 3px rgba(0,36,61,.3))}
}

@media(max-width:899px){
  /* Sortiment: Reihenfolge Titel, Design-Banner, Filter (kleben oben), Produkte */
  [data-catalog]>.wrap{display:flex;flex-direction:column}
  [data-catalog]>.wrap>*{min-width:0}
  [data-catalog] .hd{order:-4}
  [data-catalog] .hint{order:-3;margin:4px 0 22px}
  /* Filterleiste klebt unter der oberen Leiste (die bleibt auf Sortiment-Seiten fest sichtbar): keine Höhen- oder Positionswechsel, kein Zittern */
  [data-catalog] .bar{display:contents}
  [data-catalog] .search{order:-2;margin:0 0 12px}
  [data-catalog] .fwrap{order:-1;position:sticky;top:calc(70px + var(--safeT));z-index:40;margin:0 calc(var(--pad) * -1) 8px;background:#F3F7FB;border-bottom:1px solid var(--line);box-shadow:0 10px 18px -16px rgba(0,36,61,.5)}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:0;padding:9px var(--pad) 9px;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);-webkit-overflow-scrolling:touch;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--ml,0px),#000 calc(100% - var(--mr,0px)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--ml,0px),#000 calc(100% - var(--mr,0px)),transparent 100%)}
  .fhint{position:absolute;right:10px;top:50%;margin-top:-16px;z-index:2;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--blue-700);box-shadow:0 6px 16px -4px rgba(0,36,61,.4);pointer-events:none;animation:fnudge 1.6s ease-in-out infinite;transition:opacity .3s}
  .fhint::before{content:"";width:8px;height:8px;border-right:2.5px solid currentColor;border-top:2.5px solid currentColor;rotate:45deg;margin-right:3px}
  .fhint.off{opacity:0;animation:none}
  @keyframes fnudge{50%{transform:translateX(5px)}}
  .filters::-webkit-scrollbar{display:none}
  .filters button,.chip-link{flex:none;scroll-snap-align:start;min-height:44px}
  .search{flex:1 1 100%;max-width:none}
  .search input{min-height:46px;border-radius:14px}

  /* Produktkarten: zwei Spalten, Foto oben, Details zum Aufklappen */
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px;background:none;border:0;margin-top:16px}
  .pcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 14px 28px -24px rgba(0,36,61,.5)}
  .pcard-media{aspect-ratio:1/1;height:auto;width:100%;border:0;background:var(--tint-2);flex:none}
  .pcard-media .pphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9%;mix-blend-mode:multiply;transform:none}
  .pcard-photo{right:8px;bottom:8px;width:32px;height:32px;padding:0;justify-content:center}
  .pcard-photo span{display:none}
  .pcard-tag{left:8px;top:8px;padding:5px 8px;font-size:11.5px;z-index:2}
  .pcard-body{padding:12px 12px 2px;display:flex;flex-direction:column;gap:2px;flex:1 1 auto}
  .pcard-pos{font-size:11.5px}
  .pcard-body h4{font-size:15px;line-height:1.25;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pcard-sub{font-size:12.5px;line-height:1.35;min-height:4.05em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .pcard-det{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:auto;padding:10px 0;border:0;border-top:1px solid var(--line);background:none;border-radius:0;font:600 12.5px/1 var(--f-body);color:var(--blue-700);text-align:left}
  .pcard-det::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;margin-right:3px;transition:rotate .35s var(--ease)}
  .pcard.open .pcard-det::after{rotate:-135deg}
  .pcard-spec{display:none;margin-top:0;border-top:0}
  .pcard.open .pcard-spec{display:block;animation:subIn .4s var(--ease)}
  .pcard-spec div{padding:6px 0;font-size:12px;gap:8px}
  .pcard-act{display:block;padding:8px 12px 12px}
  .add-btn{width:100%;justify-content:center;min-height:46px;font-size:13px}
  .add-btn::after{display:inline}
  .pcard-media.is-pressed,.pcard-media:active{filter:brightness(.95)}
}

@media(max-width:899px){
  /* Lesbarkeit: keine Schrift unter 11,5 px */
  .pcard-spec dt{font-size:11.5px}.pcard-tag{font-size:12px}.pcard-pos{font-size:12px}.filters i{font-size:12px}figcaption{font-size:12px}.kpi .kl{font-size:10.5px}
  /* Kontaktformular: Anliegen als 2x2-Auswahl, jeder Button mit vollständiger, einheitlicher Kontur */
  fieldset.tabs{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;width:100%!important;max-width:none!important;border:0!important;border-radius:0!important;overflow:visible!important;margin-bottom:26px!important}
  fieldset.tabs label{display:block;min-width:0}
  fieldset.tabs label span,fieldset.tabs label:last-child span{display:flex;align-items:center;justify-content:center;min-height:54px;padding:0 10px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);text-align:center;font-weight:600;transition:background .2s,border-color .2s,color .2s,transform .18s}
  fieldset.tabs label input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
  fieldset.tabs label input:focus-visible+span{outline:3px solid var(--blue-500);outline-offset:2px}
  fieldset.tabs label:active span{transform:scale(.97)}
}
}

@media(max-width:899px){
  /* Ansprechpartner als Zeilen statt enger Kästchen */
  .people{grid-template-columns:1fr!important;gap:10px;border:0}
  .people li{border:1px solid var(--line)!important;border-radius:14px;overflow:hidden;padding:0}
  .people .pl{grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"av b pt" "av s pt";align-items:center;column-gap:14px;row-gap:1px;margin:0;padding:14px 16px}
  .people .pl .av{grid-area:av;width:52px;height:52px;font-size:15px}
  .people .pl b{grid-area:b;font-size:17px}.people .pl small{grid-area:s}
  .people .pl .pt{grid-area:pt;margin:0;font-size:12.5px;text-align:right;line-height:1.3;max-width:7.5em}
  .people .pl.is-pressed{background:var(--tint)}
}
@media(prefers-reduced-motion:reduce){.panel,.panel img{animation:none}.nav,.dock a,.mnav>ul>li{transition:none}.fx .mfx{opacity:1;transform:none;transition:none}}
@media(max-width:899px){.foot .bot a.credit{display:inline-block;padding:8px 2px}.foot .bot{gap:4px 20px}}

/* Mobil: angeheftete LKW-Leiste ausblenden – sie lag ueber Ueberschriften und kostet Platz unter der Navigation */
@media(max-width:899px){.mroute{display:none!important}}

/* Mobil: Karte "01 Unsere Verpackungen" zeigt nur das Verpackungsfoto - die Diashow schnitt im Hochformat nur den Schaltschrank der Labelmaschine aus */
@media(max-width:899px){.jslides img{animation:none;opacity:0}.jslides img:first-child{opacity:1;object-position:52% 62%}}