/* =====================================================================
   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:76px;--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 D+: Top-Leiste (wird beim Scrollen zur schwebenden Insel) ---------- */
:root{--bx:calc(100% - 43px);--by:calc(var(--safeT) + 33px);--spr:cubic-bezier(.3,1.25,.4,1)}
.nav{top:0;left:0;right:0;height:calc(var(--safeT) + 66px);padding:var(--safeT) 0 0;border:0;border-radius:0;background:none;box-shadow:none;transition:transform .55s cubic-bezier(.3,1.2,.4,1)}
.nav.nav-hide{transform:translateY(-140%)}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;clip-path:inset(0 0 0 0 round 0);transition:clip-path .65s var(--spr),background-color .15s .34s}
.nav::after{content:"";position:absolute;z-index:-2;left:12px;right:12px;top:calc(var(--safeT) + 2px);bottom:4px;border-radius:30px;box-shadow:0 14px 30px -12px rgba(0,36,61,.5);opacity:0;transition:opacity .35s;pointer-events:none}
.nav.is-float::before{clip-path:inset(calc(var(--safeT) + 2px) 12px 4px 12px round 30px)}
.nav.is-float::after{opacity:1}
.nav .logo,.nav .r{transition:transform .65s var(--spr)}
.nav.is-float .logo{transform:translate(6px,-2px) scale(.94);transform-origin:0 50%}
.nav.is-float .r{transform:translate(-8px,-2px)}
.nav .logo{height:60px;border-right:0;padding:0 16px 0 22px}
.nav .logo img{height:30px;transition:filter .15s .36s}
.nav .r{gap:8px;padding-right:20px}
.nav .r .pill{display:none}
.nav .lbtn,.burger{position:relative;width:46px;height:46px;border-radius:50%;background:var(--tint);color:var(--navy-900);transition:background-color .15s .2s,color .15s .2s,transform .35s cubic-bezier(.34,1.6,.5,1)}
.nav .lbtn:active,.burger:active{transform:scale(.88)}
.burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;background:var(--navy-900);color:#fff;transition:background-color .15s,color .15s,transform .35s cubic-bezier(.34,1.6,.5,1)}
.burger span{width:18px;height:2px;margin:0;border-radius:2px;background:currentColor;transition:translate .5s cubic-bezier(.34,1.7,.5,1),rotate .5s cubic-bezier(.34,1.7,.5,1),width .3s}
.burger span:last-child{width:12px}
.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;width:18px}
.burger::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--sky);opacity:0;pointer-events:none}
html.menu-open .burger::after{animation:bring .8s cubic-bezier(.22,1,.36,1)}
@keyframes bring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}
/* Farbwechsel erst, wenn der Menü-Kreis die Stelle erreicht hat (in beide Richtungen), sonst blitzt das Logo weiß auf weiß */
html.menu-open .nav::before{background-color:rgba(255,255,255,0)}
html.menu-open .nav.is-float::before{clip-path:inset(0 0 0 0 round 0)}
html.menu-open .nav::after{opacity:0}
html.menu-open .nav{transform:none}
html.menu-open .nav .logo img{filter:brightness(0) invert(1)}
html.menu-open .nav .lbtn{background:rgba(255,255,255,.12);color:#fff}
html.menu-open .nav .burger{background:#fff;color:var(--navy-900)}
html.menu-open .nav .lcnt{border-color:var(--navy-900)}

/* ---------- Vollbild-Menü: zwei Schichten wischen kreisförmig vom Burger aus ---------- */
html::after{content:"";position:fixed;inset:0;z-index:98;pointer-events:none;background:var(--blue-700);clip-path:circle(0px at var(--bx) var(--by));visibility:hidden;transition:clip-path .6s cubic-bezier(.65,0,.2,1),visibility 0s .8s}
html.menu-open::after{visibility:visible;clip-path:circle(160% at var(--bx) var(--by));transition:clip-path .65s cubic-bezier(.65,0,.2,1),visibility 0s}
.mnav{inset:0;max-height:none;height:auto;padding:calc(84px + var(--safeT)) 24px max(22px,var(--safeB));border-radius:0;background:var(--navy-900);color:#fff;box-shadow:none;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;animation:none;z-index:99;clip-path:circle(160% at var(--bx) var(--by));transition:clip-path .75s cubic-bezier(.65,0,.2,1) .07s,visibility 0s}
.mnav,.mnav:not([hidden]){animation:none!important}
.mnav[hidden]{display:flex;visibility:hidden;transform:none;clip-path:circle(0px at var(--bx) var(--by));transition:clip-path .7s cubic-bezier(.65,0,.2,1),visibility 0s .8s}
.mnav>ul{list-style:none;margin:0;padding:0}
.mnav>ul>li{position:relative;border-bottom:0}
.mnav>ul>li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(160,199,231,.4);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.mnav:not([hidden])>ul>li::after{transform:scaleX(1)}
.mnav a,.mnav summary{display:flex;align-items:center;justify-content:space-between;min-height:62px;padding:0;font:600 clamp(26px,7.4vw,32px)/1.1 var(--f-head);letter-spacing:-.02em;color:#fff;list-style:none}
.mnav summary::-webkit-details-marker{display:none}
.mnav .ln{display:block;overflow:hidden;padding:4px 0}
.mnav .ln .t{display:inline-block;transform:translateY(115%) rotate(5deg);transform-origin:0 100%;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.mnav:not([hidden]) .ln .t{transform:none}
.mnav:not([hidden])>ul>li:nth-child(1) .t{transition-delay:.22s}.mnav:not([hidden])>ul>li:nth-child(2) .t{transition-delay:.27s}.mnav:not([hidden])>ul>li:nth-child(3) .t{transition-delay:.32s}.mnav:not([hidden])>ul>li:nth-child(4) .t{transition-delay:.37s}.mnav:not([hidden])>ul>li:nth-child(5) .t{transition-delay:.42s}.mnav:not([hidden])>ul>li:nth-child(6) .t{transition-delay:.47s}
.mnav:not([hidden]) a:active .t,.mnav:not([hidden]) summary:active .t{transform:translateX(8px);transition-delay:0s}
.mnav summary .ic{stroke:var(--sky);transition:rotate .45s cubic-bezier(.34,1.6,.5,1)}
.mnav details[open] summary .ic{rotate:180deg}
.mnav .sub{display:grid;padding:0 0 14px 2px}
.mnav .sub a{min-height:48px;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);animation:subIn .5s var(--ease) both}
.mnav .sub a:nth-child(2){animation-delay:.05s}.mnav .sub a:nth-child(3){animation-delay:.1s}.mnav .sub a:nth-child(4){animation-delay:.15s}
@keyframes subIn{from{opacity:0;transform:translateX(-14px)}}
.mnav .sub a:active{border-left-color:#fff;color:#fff}
.mnav .cta{display:grid;gap:12px;margin-top:auto;padding-top:26px;background:none;text-align:left;overflow:visible;opacity:0;transform:translateY(40px);transition:opacity .4s .5s,transform .7s var(--spr) .5s}
.mnav:not([hidden]) .cta{opacity:1;transform:none}
.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 .mroute,html.menu-open .totop{opacity:0!important;pointer-events:none}

/* ---------- Dock unten: Blase springt zum aktiven Ziel, Mulde in der Leiste folgt ---------- */
.dock{display:block;position:fixed;z-index:95;left:0;right:0;bottom:0;padding-bottom:max(var(--safeB),10px);filter:drop-shadow(0 -4px 14px rgba(0,36,61,.16));transition:transform .55s var(--ease),opacity .3s}
/* Übergang, bis die Leiste aufgebaut ist (und Notlösung ohne JavaScript): einfache Links nebeneinander */
.dock>a{display:inline-grid;vertical-align:top;width:20%;justify-items:center;gap:5px;padding:10px 0 9px;color:var(--muted);text-decoration:none;font:600 11px/1 var(--f-body)}
.dock:not(:has(.dk-items)){background:#fff;border-radius:24px 24px 0 0;text-align:center}
.dk-bg{position:absolute;inset:0;background:#fff;border-radius:24px 24px 0 0;-webkit-mask:radial-gradient(circle 37px at var(--x,-200px) 4px,#0000 35.5px,#000 37px);mask:radial-gradient(circle 37px at var(--x,-200px) 4px,#0000 35.5px,#000 37px)}
.dk-items{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:66px;padding:0 6px}
.dk-items>a,.dk-items>button{display:grid;justify-items:center;align-content:end;gap:5px;padding:0 0 9px;border:0;background:none;color:var(--muted);text-decoration:none;font:600 11px/1 var(--f-body);letter-spacing:-.01em;cursor:pointer;transition:color .3s}
.dk-items .ic{width:22px;height:22px;transition:opacity .2s,transform .45s cubic-bezier(.34,1.5,.5,1)}
.dk-items>*:active .ic{transform:scale(.86)}
.dk-items>.on{color:var(--navy-900);font-weight:700}
.dk-items>.on .ic{opacity:0;transform:translateY(-16px)}
.dk-bub{position:absolute;top:-24px;left:0;width:56px;height:56px;margin-left:-28px;border-radius:50%;background:var(--navy-900);color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px -6px rgba(0,36,61,.55);z-index:3;pointer-events:none;will-change:transform;transition:background-color .3s,opacity .25s}
.dk-bub.is-cta{background:var(--blue-700)}
.dock.no-cur .dk-bub{opacity:0}
.dk-bub .ic{width:24px;height:24px;stroke-width:1.9}
.dk-bub .pop{animation:dkpop .45s cubic-bezier(.34,1.6,.5,1)}
@keyframes dkpop{0%{transform:scale(.55);opacity:0}60%{opacity:1}}
.dk-sheet{position:absolute;left:14px;right:14px;bottom:calc(100% + 22px);display:grid;gap:2px;padding:8px;border-radius:24px;background:#fff;box-shadow:0 18px 44px -10px rgba(0,36,61,.45);opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);transform-origin:50% 100%;transition:opacity .2s,transform .4s var(--ease),visibility 0s .4s}
.dock.sheet-open .dk-sheet{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dk-sheet a{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;min-height:58px;padding:9px 14px;border-radius:16px;color:var(--navy-900);text-decoration:none}
.dk-sheet a b{font:600 15.5px/1.2 var(--f-body)}
.dk-sheet a small{grid-column:1;font:400 12.5px/1.3 var(--f-body);color:var(--muted)}
.dk-sheet a .ic{grid-column:2;grid-row:1/3;width:18px;height:18px;color:var(--blue-700)}
.dk-sheet a:active,.dk-sheet a[aria-current=page]{background:rgba(0,93,157,.09)}
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) + 34px);right:14px;width:46px;height:46px}
.toast{left:14px;right:14px;width:max-content;max-width:calc(100% - 28px);margin-inline:auto;translate:0 20px;bottom:calc(var(--dockH) + var(--safeB) + 34px)}
.toast.show{translate:0 0}
.toast .tn{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.toast>span{min-width:0}

/* ---------- 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{transform:scale(1.12);animation:kb 16s ease-in-out infinite alternate;transition:none;will-change:transform;backface-visibility:hidden}
  .panel.on img{transform:scale(1.12)}
  .panel::after{background:linear-gradient(90deg,rgba(0,27,46,.9) 0%,rgba(0,27,46,.62) 58%,rgba(0,27,46,.34) 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,.nav::before,.mnav,.mnav .t,.mnav .cta,html::after{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%}}

/* ---------- Größere Tippflächen (Optik und Abstände bleiben gleich) ---------- */
.crumbs a,.tlink,.foot .bot a.credit{position:relative}
.crumbs a::before,.tlink::before,.foot .bot a.credit::before{content:"";position:absolute;inset:-16px -8px}
.pcard-det{min-height:44px}
.clist a,ul a[href^="tel:"],ul a[href^="mailto:"]{padding-block:10px}

/* ---------- Kleine Schrift etwas größer ---------- */
.pc .n{font-size:11.5px}
.kpi .kn em{font-size:11.5px}
.kpi .kn sup{font-size:11.5px}
.kpi .kl{font-size:11.5px;letter-spacing:.08em}
.gi2 span{font-size:12px}
.fl.sel2 label,.fl input:focus+label,.fl input:not(:placeholder-shown)+label,.fl textarea:focus+label,.fl textarea:not(:placeholder-shown)+label{font-size:12px}
.lcnt{font-size:11px}
.locs a small{font-size:12px}

/* ---------- Bildergalerie: keine Lücke neben einem einzelnen Bild ---------- */
.mos{grid-auto-flow:dense}

/* ---------- Querformat am Handy: Leisten kompakter, damit mehr Inhalt sichtbar bleibt ---------- */
@media (max-height:500px) and (orientation:landscape){
  :root{--dockH:58px}
  .dk-items{height:48px}
  .dk-items>a>span,.dk-items>button>span{display:none}
  .dk-items>a,.dk-items>button{align-content:center;padding:0}
  .dk-bg{-webkit-mask:radial-gradient(circle 30px at var(--x,-200px) 4px,#0000 28.5px,#000 30px);mask:radial-gradient(circle 30px at var(--x,-200px) 4px,#0000 28.5px,#000 30px)}
  .dk-bub{top:-18px;width:46px;height:46px;margin-left:-23px}
  .dk-bub .ic{width:21px;height:21px}
  .dock{padding-bottom:max(var(--safeB),6px)}
  .dk-sheet{bottom:calc(100% + 14px)}
  .nav{height:calc(var(--safeT) + 52px)}
  .nav .logo{height:48px}
  .nav .logo img{height:26px}
  .nav .lbtn,.burger{width:40px;height:40px}
  .mnav{padding-top:calc(60px + var(--safeT))}
  :root{--by:calc(var(--safeT) + 26px)}
  .totop{bottom:calc(var(--dockH) + var(--safeB) + 28px)}
}

/* ---------- Tablet: Dock und Auswahl nicht über die ganze Breite ziehen ---------- */
@media (min-width:600px){
  .dk-items{max-width:560px;margin-inline:auto}
  .dk-sheet{left:0;right:0;width:min(440px,calc(100% - 28px));margin-inline:auto}
}

/* ---------- Einstellungen aus dem Admin ("Handy-Ansicht") ---------- */
.mnav [data-mhide]{display:none!important}
@media(max-width:899px){
  #main [data-mhide]{display:none!important}
  html[data-mspace=tight] .sec{padding-block:clamp(34px,9vw,52px)}
  html[data-mspace=airy] .sec{padding-block:clamp(72px,18vw,108px)}
}
/* Bewegung: "ruhig" = weicher ohne Überschwingen, "aus" = keine Übergänge */
html[data-manim=calm]{--spr:cubic-bezier(.22,1,.36,1);--ease:cubic-bezier(.22,1,.36,1)}
html[data-manim=calm] .panel img{animation:none}
html[data-manim=calm] .burger::after{display:none}
html[data-manim=off] *,html[data-manim=off] *::before,html[data-manim=off] *::after{transition-duration:.01s!important;transition-delay:0s!important;animation:none!important}
/* Untere Leiste ohne Beschriftung */
html[data-mdock=icons] .dk-items>a>span,html[data-mdock=icons] .dk-items>button>span{display:none}
html[data-mdock=icons] .dk-items{height:56px}
html[data-mdock=icons] .dk-items>a,html[data-mdock=icons] .dk-items>button{align-content:center;padding:0}