/* 121 – Packung · Die Reise als Faltschachtel im Supermarktregal */
:root {
  --card: #cdc8be;
  --card-2: #bfb9ad;
  --ink: #16161b;
  --mute: #4a4a52;
  --paper: #fffdf6;
  --Y: #ffd23f;
  --Y-2: #ffe27a;
  --B: #1b3ccf;
  --B-2: #132c9e;
  --R: #f2361f;
  --R-2: #b8220f;
  --G: #12985a;
  --P: #ef3f7a;
  --O: #ff7a12;
  --N: #0f3b70;
  --cut: #e6007e;
  --crease: #009fe3;
  --display: 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  --sans: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --wrap: 1240px;
  --pad: clamp(16px, 4vw, 48px);
  --burst: polygon(50.0% 0.0%, 55.8% 9.4%, 64.1% 2.0%, 67.0% 12.7%, 77.0% 7.9%, 76.8% 19.0%, 87.8% 17.3%, 84.5% 27.8%, 95.5% 29.2%, 89.3% 38.4%, 99.5% 42.9%, 91.0% 50.0%, 99.5% 57.1%, 89.3% 61.6%, 95.5% 70.8%, 84.5% 72.2%, 87.8% 82.7%, 76.8% 81.0%, 77.0% 92.1%, 67.0% 87.3%, 64.1% 98.0%, 55.8% 90.6%, 50.0% 100.0%, 44.2% 90.6%, 35.9% 98.0%, 33.0% 87.3%, 23.0% 92.1%, 23.2% 81.0%, 12.2% 82.7%, 15.5% 72.2%, 4.5% 70.8%, 10.7% 61.6%, 0.5% 57.1%, 9.0% 50.0%, 0.5% 42.9%, 10.7% 38.4%, 4.5% 29.2%, 15.5% 27.8%, 12.2% 17.3%, 23.2% 19.0%, 23.0% 7.9%, 33.0% 12.7%, 35.9% 2.0%, 44.2% 9.4%);
  /* Karton-Fasern (data:-URI, file://-sicher) */
  --fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.27 0 0 0 0 0.22 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; color: var(--ink); font: 400 17px/1.55 var(--sans); background: var(--fiber), var(--card); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--B); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--Y); color: var(--ink); padding: 10px 16px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.label { font: 800 14px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--R-2); margin-bottom: 10px; }
.intro { margin-top: 18px; max-width: 60ch; font-size: 18px; color: #2c2c33; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px; border-radius: 999px; text-decoration: none; font: 800 14.5px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; transition: transform .15s, box-shadow .15s; }
.btn--red { background: var(--R); color: #fff; box-shadow: 0 5px 0 var(--R-2); }
.btn--white { background: #fff; color: var(--ink); box-shadow: 0 5px 0 #b7a64f; }
.btn:hover { transform: translateY(-2px); }
.btn--red:hover { box-shadow: 0 7px 0 var(--R-2); }
.btn--white:hover { box-shadow: 0 7px 0 #b7a64f; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--R-2); }

/* ---------- Kopf ---------- */
.top { position: relative; z-index: 20; background: #fff; box-shadow: 0 5px 0 var(--R), 0 6px 0 rgba(0, 0, 0, .1); }
.top__in { display: flex; align-items: center; gap: 28px; min-height: 80px; }
.logo { flex: none; }
.logo img { height: 56px; width: auto; }
.nav { flex: 1; display: flex; align-items: center; gap: 26px; }
.nav__list { display: flex; gap: 6px; margin-left: auto; }
.nav__list a { display: block; padding: 10px 14px; border-radius: 999px; text-decoration: none; font: 700 16.5px/1 var(--sans); }
.nav__list a:hover { background: var(--Y); }
.nav__end { display: flex; align-items: center; gap: 14px; }
.tel { text-decoration: none; font: 400 20px/1 var(--display); color: var(--B); white-space: nowrap; }
.tel:hover { color: var(--R); }
.lang { display: inline-grid; place-items: center; min-width: 46px; height: 34px; padding: 0 10px; border-radius: 6px; text-decoration: none; font: 400 17px/1 var(--display); color: #fff; background: var(--B); transform: rotate(-4deg); box-shadow: 0 3px 0 var(--B-2); }
.lang:hover { background: var(--R); box-shadow: 0 3px 0 var(--R-2); }
.menu { display: none; }

/* ---------- Hero: Schachtel im Regal ---------- */
.hero { padding-top: clamp(84px, 9vw, 104px); background: radial-gradient(ellipse 70% 60% at 40% 30%, rgba(255, 255, 255, .45), transparent 70%); }
.aisle { position: relative; display: flex; align-items: flex-end; gap: 36px; }
.box { position: relative; display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; filter: drop-shadow(18px 18px 22px rgba(40, 30, 10, .28)); }
.box__front { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--Y); border-radius: 3px 0 0 3px; }
.box__top {
  position: absolute; left: 0; bottom: 100%; height: 70px; width: calc(100% - 121px);
  transform-origin: 0 100%; transform: skewX(-60deg);
  background: linear-gradient(180deg, var(--Y-2), #ffe58f); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08);
}
.box__top span { position: absolute; left: 50%; top: 50%; translate: -50% -50%; transform: skewX(60deg); padding: 0 12px; font: 800 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--B); white-space: nowrap; }
.box__top::before { content: ''; position: absolute; left: 12%; right: 12%; top: 50%; border-top: 2px dashed rgba(27, 60, 207, .45); }
.box__side {
  position: relative; flex: none; width: 121px; display: flex; flex-direction: column; gap: 10px; padding: 22px 14px 18px;
  transform-origin: 0 0; transform: skewY(-30deg); background: linear-gradient(90deg, var(--B-2), #0f2580); color: #fff;
}
.side__h { font: 400 20px/1 var(--display); }
.side__t { font: 600 13.5px/1.35 var(--sans); }
.side__s { margin-top: auto; font: 600 11.5px/1.3 var(--sans); color: #c9d2ff; }
.side__bar { display: block; padding: 8px 8px 6px; background: #fff; color: #000; border-radius: 2px; }
.side__bar .barcode { display: block; width: 100%; height: 44px; }
.box__band { display: flex; align-items: center; gap: 18px; padding: 14px 30px; background: var(--B); color: #fff; border-radius: 3px 0 0 0; }
.box__logo { flex: none; display: grid; place-items: center; width: 108px; height: 66px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--Y); }
.box__logo img { height: 50px; width: auto; }
.kicker { font: 800 14.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.box__main {
  position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 26px clamp(20px, 2.6vw, 34px); padding: 28px clamp(22px, 3vw, 36px) 26px;
  background: repeating-conic-gradient(from 0deg at 85% 95%, rgba(255, 255, 255, .26) 0 6deg, transparent 6deg 12deg), var(--Y);
}
.product { font-size: clamp(40px, 4.4vw, 64px); line-height: .98; color: var(--B); letter-spacing: .005em; text-shadow: 3px 3px 0 #fff, 6px 6px 0 var(--R); text-wrap: balance; }
.lead { margin-top: 20px; max-width: 46ch; font-size: 16.5px; line-height: 1.55; font-weight: 500; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.window { position: relative; align-self: stretch; min-height: 280px; border-radius: 46px; overflow: hidden; box-shadow: 0 0 0 7px #fff, 0 0 0 9px rgba(27, 60, 207, .25), inset 0 0 0 1px rgba(0, 0, 0, .2); }
.window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.window::after { content: ''; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .08) 26%, transparent 40%, transparent 75%, rgba(255, 255, 255, .2)); pointer-events: none; }
.window figcaption { position: absolute; z-index: 1; left: 16px; bottom: 14px; padding: 5px 10px; border-radius: 999px; background: rgba(22, 22, 27, .7); color: #fff; font: italic 600 12.5px/1 var(--sans); }
.seal { position: absolute; right: -34px; top: -40px; display: grid; place-content: center; text-align: center; width: 140px; height: 140px; clip-path: var(--burst); background: var(--R); color: #fff; rotate: 12deg; }
.seal b { font: 400 46px/.9 var(--display); }
.seal span { font: 800 14px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; }
.net { display: flex; align-items: center; gap: 10px; padding: 11px 30px; background: #fff; font: 700 14.5px/1.3 var(--sans); border-radius: 0 0 0 3px; }
.net__e { font: 400 22px/1 var(--display); color: var(--B); }
.ghost { position: relative; flex: none; width: 160px; height: 360px; margin-right: 59px; display: flex; flex-direction: column; background: var(--R); border-radius: 3px 0 0 3px; filter: drop-shadow(12px 14px 18px rgba(40, 30, 10, .25)); }
.ghost::before { content: ''; position: absolute; left: 0; bottom: 100%; width: 100%; height: 34px; transform-origin: 0 100%; transform: skewX(-60deg); background: #ff6a55; }
.ghost::after { content: ''; position: absolute; left: 100%; top: 0; width: 59px; height: 100%; transform-origin: 0 0; transform: skewY(-30deg); background: linear-gradient(90deg, var(--R-2), #8f190b); }
.ghost__band { padding: 12px; background: #fff; text-align: center; font: 400 22px/1 var(--display); color: var(--R); }
.ghost__name { padding: 16px 14px 0; font: 400 24px/1.05 var(--display); color: #fff; hyphens: auto; }
.ghost__wave { margin: auto 0 0; height: 150px; background: radial-gradient(circle at 50% 42%, #fff 0 38px, transparent 39px), linear-gradient(180deg, transparent 0 60%, var(--N) 60%) , repeating-linear-gradient(180deg, transparent 0 10px, rgba(255, 255, 255, .25) 10px 13px) 0 60% / 100% 40% no-repeat, var(--Y); }
.shelf { position: relative; margin-top: 0; height: 58px; border-radius: 3px; background: linear-gradient(180deg, #f5f5f2, #c9cac5 70%, #a9aaa4); box-shadow: 0 -3px 0 #8f908b, 0 18px 30px -12px rgba(0, 0, 0, .4); }
.shelf__label { position: absolute; left: clamp(20px, 4vw, 60px); top: 9px; display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: #fff; border-radius: 3px; font: 700 14.5px/1 var(--sans); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 1px 0 #fff; }
.shelf__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--G); box-shadow: 0 0 0 3px rgba(18, 152, 90, .2); }

/* ---------- Rückseite als Stanzbogen ---------- */
section { padding-block: clamp(76px, 9vw, 130px); }
.focus { padding-top: clamp(70px, 8vw, 110px); }
.sheet-cap { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 12px; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cut); }
.sheet-cap span + span { color: var(--crease); }
.net-sheet { position: relative; padding: 76px 64px 96px 112px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.reg { position: absolute; width: 30px; height: 30px; background: radial-gradient(circle, transparent 0 7px, #1d1d1d 7.5px 9px, transparent 9.5px), linear-gradient(#1d1d1d, #1d1d1d) center / 1.5px 100% no-repeat, linear-gradient(#1d1d1d, #1d1d1d) center / 100% 1.5px no-repeat; }
.reg--tl { left: 16px; top: 16px; } .reg--tr { right: 16px; top: 16px; } .reg--bl { left: 16px; bottom: 16px; } .reg--br { right: 16px; bottom: 16px; }
.flap { position: absolute; background: #f6f1e6; }
.flap--tuck { left: 152px; right: 104px; top: 22px; height: 54px; border: 1.5px solid var(--cut); border-bottom: 0; border-radius: 46px 46px 0 0; }
.flap--glue { left: 64px; width: 48px; top: 110px; bottom: 130px; clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 94%); background: repeating-linear-gradient(45deg, #e9e1d1 0 6px, #d8cfbd 6px 8px); }
.flap--glue i { position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -90deg; white-space: nowrap; font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #7d735f; }
.back {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(30px, 4vw, 60px);
  padding: clamp(32px, 4vw, 56px); background: var(--paper);
  border: 1.5px solid var(--cut); border-left: 2px dashed var(--crease); border-top: 2px dashed var(--crease);
}
.back h2 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1; color: var(--B); text-wrap: balance; }
.stickers { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 34px; }
.sticker { display: grid; place-content: center; text-align: center; width: 136px; height: 136px; padding: 14px; border-radius: 50%; rotate: -6deg; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .4); }
.sticker:nth-child(2) { rotate: 5deg; margin-top: 18px; }
.sticker:nth-child(3) { rotate: -2deg; }
.sticker b { font: 400 40px/1 var(--display); }
.sticker span { margin-top: 4px; font: 700 12.5px/1.2 var(--sans); }
.sticker--r { background: var(--R); color: #fff; }
.sticker--y { background: var(--Y); color: var(--ink); box-shadow: inset 0 0 0 3px #fff, 0 6px 12px -6px rgba(0, 0, 0, .4); }
.sticker--g { background: var(--G); color: #fff; }
.sticker--g b { font-size: 30px; }
.facts { align-self: start; padding: 6px 14px 10px; border: 3px solid var(--ink); background: #fff; }
.facts__h { font: 800 25px/1.2 var(--sans); padding-bottom: 6px; border-bottom: 9px solid var(--ink); }
.facts__sub { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 3px solid var(--ink); font: 800 13px/1.2 var(--sans); }
.facts__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ink); }
.facts__rows li:last-child { border-bottom: 6px solid var(--ink); }
.facts h3 { font: 800 16.5px/1.25 var(--sans); }
.facts p { font-size: 14.5px; line-height: 1.45; color: #34343b; }
.facts__v { font: 800 19px/1.2 var(--sans); color: var(--G); }
.serve { grid-column: 1 / -1; padding-top: 30px; border-top: 2px dashed rgba(0, 0, 0, .2); }
.serve__h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font: 800 14px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.serve__tag { padding: 7px 12px; border-radius: 999px; background: var(--R); color: #fff; letter-spacing: .06em; font-style: italic; }
.serve__route { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 0; margin-top: 22px; }
.stop { display: grid; place-items: center; min-width: 74px; height: 52px; padding: 0 12px; border-radius: 12px; background: var(--B); color: #fff; font: 400 25px/1 var(--display); box-shadow: 0 4px 0 var(--B-2); }
.hop { position: relative; flex: 1; min-width: 70px; height: 52px; display: grid; place-items: end center; padding-bottom: 32px; font: 700 12.5px/1 var(--sans); color: var(--mute); }
.hop::before { content: ''; position: absolute; left: 8px; right: 12px; top: 50%; border-top: 3px solid var(--ink); }
.hop::after { content: ''; position: absolute; right: 6px; top: calc(50% - 6.5px); border: 7.5px solid transparent; border-left: 11px solid var(--ink); border-right: 0; }
.hop--car::before { border-top-style: dashed; }
.serve__text { margin-top: 18px; font-size: 17px; font-weight: 500; }
.serve__note { margin-top: 4px; font-size: 14.5px; font-style: italic; color: var(--mute); }
.colorbar { position: absolute; left: 112px; bottom: 30px; display: flex; align-items: center; gap: 0; }
.colorbar i { width: 22px; height: 22px; }
.colorbar i:nth-child(1) { background: #00a0e3; } .colorbar i:nth-child(2) { background: #e6007e; } .colorbar i:nth-child(3) { background: #ffed00; } .colorbar i:nth-child(4) { background: #1d1d1b; }
.colorbar i:nth-child(5) { background: var(--Y); } .colorbar i:nth-child(6) { background: var(--B); } .colorbar i:nth-child(7) { background: var(--R); } .colorbar i:nth-child(8) { background: var(--G); }
.colorbar span { margin-left: 14px; font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }

/* ---------- Leistungen: das Sortiment im Regal ---------- */
.services { background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%); }
.sec-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 60px); }
.sec-head h2, .about h2, .contact h2, .prep h2 { font-size: clamp(36px, 4.2vw, 58px); line-height: 1; color: var(--B); text-wrap: balance; }
.range { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; row-gap: 40px; }
.pack { position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 0 clamp(12px, 1.8vw, 26px) 58px; height: 100%; }
.pack::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 58px; background: linear-gradient(180deg, #f5f5f2, #c9cac5 70%, #a9aaa4); box-shadow: 0 -3px 0 #8f908b, 0 16px 24px -12px rgba(0, 0, 0, .4); }
.pack__tag { position: absolute; z-index: 1; left: clamp(20px, 3vw, 40px); bottom: 16px; padding: 6px 10px; background: #fff; border-radius: 2px; font: 700 12.5px/1 var(--sans); letter-spacing: .1em; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.pack__face {
  position: relative; display: flex; flex-direction: column; width: 100%; min-height: 410px; padding: 22px 30px 20px 20px; color: #fff; border-radius: 4px 4px 2px 2px;
  box-shadow: inset -14px 0 0 rgba(0, 0, 0, .17), inset 0 8px 0 rgba(255, 255, 255, .2), 0 18px 18px -14px rgba(0, 0, 0, .45);
  transition: transform .25s ease;
}
.pack:hover .pack__face { transform: translateY(-8px) rotate(-1.2deg); }
@media (prefers-reduced-motion: reduce) { .pack:hover .pack__face { transform: none; } }
.pack__kind { font: 800 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .92; }
.pack h3 { margin: 10px 0 18px; font-size: clamp(27px, 2.5vw, 34px); line-height: 1; text-shadow: 2px 2px 0 rgba(0, 0, 0, .2); hyphens: auto; }
.pack__txt { margin-top: auto; padding: 14px 16px; border-radius: 12px; background: #fff; color: var(--ink); font-size: 15px; line-height: 1.45; font-weight: 500; }
.pack--1 .pack__face { background: radial-gradient(ellipse 26px 14px at 30% 40%, rgba(255, 255, 255, .5) 98%, transparent) 0 0 / 120px 90px, #1f7fe0; min-height: 430px; }
.pack--2 .pack__face { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 14px, transparent 14px 28px), var(--G); width: 88%; min-height: 380px; }
.pack--3 .pack__face { background: repeating-conic-gradient(from 0deg at 80% 14%, rgba(255, 240, 120, .45) 0 8deg, transparent 8deg 16deg), var(--O); min-height: 450px; }
.pack--4 .pack__face { background: radial-gradient(circle at 50% 0, transparent 14px, rgba(255, 255, 255, .14) 15px 17px, transparent 18px) 0 0 / 34px 22px, var(--N); width: 92%; min-height: 400px; }
.pack--5 .pack__face { background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 210, 63, .5) 22px 24px), #2d3140; min-height: 420px; }
.pack--6 .pack__face { background: radial-gradient(circle, rgba(255, 255, 255, .28) 0 7px, transparent 8px) 0 0 / 30px 30px, var(--P); width: 90%; min-height: 390px; }

/* ---------- Zubereitung ---------- */
.process { padding-top: clamp(30px, 4vw, 60px); }
.prep { padding: clamp(28px, 4vw, 52px); border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 6px var(--B), 0 24px 40px -24px rgba(0, 0, 0, .5); }
.prep__head { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 30px; margin-bottom: 40px; }
.prep__badge { padding: 12px 22px 10px; border-radius: 12px; background: var(--B); color: #fff; font: 400 clamp(26px, 2.6vw, 34px)/1 var(--display); rotate: -3deg; }
.prep__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; counter-reset: s; }
.prep__steps li { position: relative; }
.prep__ico { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 18px; border-radius: 50%; background: var(--Y); }
.prep__ico svg { width: 50px; height: 50px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.prep__ico b { position: absolute; right: -6px; top: -4px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--R); color: #fff; font: 400 19px/1 var(--display); box-shadow: 0 0 0 3px #fff; }
.prep__steps li:not(:last-child)::after { content: ''; position: absolute; left: 104px; right: 10px; top: 44px; border-top: 3px dotted var(--B); }
.prep h3 { font-size: 26px; line-height: 1; color: var(--B); margin-bottom: 8px; }
.prep p { font-size: 16px; }

/* ---------- Hersteller (Über uns) ---------- */
.about { margin-top: clamp(40px, 5vw, 70px); background: var(--B); color: #fff; }
.about__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.maker { position: relative; }
.maker img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50% 50% 46px 46px / 40% 40% 46px 46px; box-shadow: 0 0 0 8px #fff, 0 0 0 10px rgba(255, 255, 255, .3); }
.maker figcaption { position: absolute; left: 50%; bottom: -18px; translate: -50% 0; padding: 9px 16px; border-radius: 999px; background: var(--Y); color: var(--ink); font: 800 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.about .label { color: var(--Y); }
.about h2 { color: #fff; text-shadow: 3px 3px 0 var(--B-2); }
.about__p { margin-top: 20px; font-size: 18px; max-width: 56ch; color: #e8ecff; }
.claims { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.claim { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px 11px 12px; border-radius: 999px; font: 700 16px/1.2 var(--sans); }
.claim::before { content: '✓'; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); font-size: 14px; }
.claim--1 { background: var(--Y); color: var(--ink); } .claim--2 { background: var(--R); } .claim--3 { background: var(--G); } .claim--4 { background: #fff; color: var(--ink); }
.claim--4::before { background: var(--B); color: #fff; }

/* ---------- Verbraucherservice (Kontakt) ---------- */
.contact { background: repeating-conic-gradient(from 0deg at 80% 100%, rgba(255, 255, 255, .25) 0 5deg, transparent 5deg 10deg), var(--Y); }
.contact__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(30px, 5vw, 80px); align-items: center; }
.contact .label { color: var(--R-2); }
.contact .intro { color: var(--ink); }
.hotline { position: relative; padding: 34px 36px 30px; border-radius: 30px; background: #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, .12), 0 30px 40px -24px rgba(0, 0, 0, .5); rotate: -1.5deg; }
.hotline::after { content: ''; position: absolute; left: 60px; bottom: -30px; border: 16px solid transparent; border-top: 22px solid #fff; border-left: 22px solid #fff; }
.hotline__k { font: 800 14px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--R-2); }
.hotline__n { display: inline-block; margin-top: 12px; font: 400 clamp(40px, 4.8vw, 64px)/1 var(--display); color: var(--R); text-decoration: none; }
.hotline__n:hover { color: var(--B); }
.hotline__h { margin-top: 12px; font-weight: 600; }
.small-print { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 18px 0 0; border-top: 3px solid var(--ink); font-size: 15px; }
.small-print > div { padding-right: 20px; }
.small-print dt { font: 800 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.small-print a { text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- Fuß: Bodenlasche ---------- */
.foot { background: var(--ink); color: #d7d7de; }
.foot__in { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 44px; align-items: center; padding-block: 46px 34px; }
.foot__logo { display: grid; place-items: center; width: 116px; height: 86px; border-radius: 50%; background: #fff; }
.foot__logo img { height: 58px; width: auto; }
.foot__brand { font: 400 20px/1.2 var(--display); color: #fff; }
.foot__addr { font-size: 15px; }
.foot__addr a { color: #fff; }
.foot__code { display: grid; justify-items: center; gap: 4px; padding: 10px 14px 8px; background: #fff; color: #000; border-radius: 3px; }
.foot__code .barcode { width: 150px; height: 54px; }
.foot__code span { font: 700 11px/1 var(--sans); letter-spacing: .2em; }
.foot__nav { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot__nav a { font-weight: 700; color: #fff; text-decoration-color: var(--Y); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.foot__nav a:hover { color: var(--Y); }
.foot__best { justify-self: end; font-size: 14px; color: #b9b9c2; }
.foot__best b { color: #fff; }
.foot__copy { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; color: #a6a6ae; }
.foot :focus-visible { outline-color: var(--Y); }

/* ---------- Rechtsseiten: Packungsbeilage ---------- */
.legal { padding-block: clamp(40px, 5vw, 70px) clamp(80px, 9vw, 130px); }
.legal__in { max-width: calc(920px + 2 * var(--pad)); }
.back-link { display: inline-block; margin-bottom: 26px; padding: 10px 16px; border-radius: 999px; background: #fff; text-decoration: none; font-weight: 700; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.back-link:hover { background: var(--Y); }
.leaflet {
  position: relative; padding: clamp(40px, 6vw, 76px) clamp(22px, 6vw, 80px);
  background:
    linear-gradient(90deg, transparent calc(33.3% - 1px), rgba(0, 0, 0, .06) calc(33.3% - 1px) calc(33.3% + 1px), transparent calc(33.3% + 1px) calc(66.6% - 1px), rgba(0, 0, 0, .06) calc(66.6% - 1px) calc(66.6% + 1px), transparent calc(66.6% + 1px)),
    linear-gradient(180deg, transparent 0 calc(50% - 1px), rgba(0, 0, 0, .05) calc(50% - 1px) calc(50% + 1px), transparent 0),
    #fffef9;
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .6), 0 2px 0 rgba(0, 0, 0, .08);
}
.leaflet__head { padding-bottom: 24px; margin-bottom: 30px; border-bottom: 6px solid var(--B); }
.leaflet__k { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font: 800 13px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--R-2); }
.leaflet__k span { padding: 5px 10px; border-radius: 999px; background: var(--B); color: #fff; }
.leaflet h1 { margin-top: 14px; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.02; color: var(--B); overflow-wrap: break-word; hyphens: auto; }
.legal-body { max-width: 70ch; font-size: 16.5px; line-height: 1.65; }
.legal-body h2 { font: 800 21px/1.25 var(--sans); margin: 36px 0 10px; padding-top: 14px; border-top: 3px solid var(--ink); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body ul { margin: 0 0 14px; }
.legal-body li { position: relative; padding-left: 24px; margin-bottom: 6px; }
.legal-body li::before { content: ''; position: absolute; left: 3px; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--R); }
.legal-body a { color: var(--B); text-decoration-thickness: 1.5px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-body .legal-note { padding: 14px 18px; border-radius: 12px; background: var(--Y-2); font-weight: 600; }
.legal-body .legal-address { padding: 14px 18px; border-left: 6px solid var(--B); background: #f2f4ff; }

/* ---------- Responsiv ---------- */
@media (max-width: 1240px) {
  .ghost { display: none; }
}
@media (max-width: 1080px) {
  .top__in { flex-wrap: wrap; min-height: 72px; }
  .menu { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; background: var(--Y); font: 800 15px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; box-shadow: 0 4px 0 #c9a312; }
  .menu__ico { display: grid; gap: 4px; width: 20px; }
  .menu__ico i { height: 3px; border-radius: 2px; background: var(--ink); }
  .nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0 20px; }
  .top.open .nav, html:not(.js) .nav { display: flex; }
  .nav__list { flex-direction: column; margin: 0; gap: 0; }
  .nav__list a { padding: 15px 8px; border-radius: 0; font-size: 21px; border-bottom: 2px dashed rgba(0, 0, 0, .15); }
  .nav__end { padding-top: 16px; justify-content: space-between; }
  .box__main { grid-template-columns: 1fr; }
  .window { min-height: 0; aspect-ratio: 16 / 8; }
  .seal { top: auto; bottom: 34%; right: -20px; }
  .back { grid-template-columns: 1fr; }
  .range { grid-template-columns: 1fr 1fr; }
  .prep__steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .prep__steps li::after { display: none; }
  .small-print { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .foot__in { grid-template-columns: auto 1fr; }
  .foot__code { grid-row: 1; grid-column: 2; justify-self: end; }
  .foot__nav { grid-column: 1 / -1; }
  .foot__best { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 760px) {
  .hero { padding-top: 40px; }
  .box { filter: drop-shadow(8px 10px 14px rgba(40, 30, 10, .28)); }
  .box__top, .box__side { display: none; }
  .box__front { border-radius: 3px; }
  .about__in, .contact__in { grid-template-columns: 1fr; }
  .maker { max-width: 420px; }
  .net-sheet { padding: 56px 18px 76px 18px; }
  .flap--glue { display: none; }
  .flap--tuck { left: 50px; right: 50px; top: 14px; height: 42px; }
  .reg { width: 22px; height: 22px; }
  .reg--tl, .reg--bl { left: 6px; } .reg--tr, .reg--br { right: 6px; }
  .reg--tl, .reg--tr { top: 6px; } .reg--bl, .reg--br { bottom: 6px; }
  .colorbar { left: 18px; bottom: 24px; }
  .colorbar i { width: 16px; height: 16px; }
  .serve__route { flex-direction: column; align-items: flex-start; }
  .hop { flex: none; height: 46px; min-width: 0; width: 74px; padding: 0 0 0 52px; place-items: center start; white-space: nowrap; }
  .hop::before { left: 35px; right: auto; top: 4px; bottom: 4px; border-top: 0; border-left: 3px solid var(--ink); }
  .hop--car::before { border-left-style: dashed; }
  .hop::after { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .logo img { height: 48px; }
  .box__band { padding: 12px 16px; gap: 12px; }
  .box__logo { width: 84px; height: 54px; }
  .box__logo img { height: 40px; }
  .kicker { font-size: 12px; }
  .box__main { padding: 22px 18px 24px; }
  .product { font-size: clamp(36px, 10.6vw, 44px); text-shadow: 2px 2px 0 #fff, 4px 4px 0 var(--R); }
  .btn { width: 100%; }
  .seal { width: 96px; height: 96px; right: -6px; bottom: 150px; }
  .seal b { font-size: 34px; }
  .seal span { font-size: 11px; }
  .net { padding: 10px 16px; font-size: 13.5px; }
  .shelf { height: auto; padding: 10px 12px; }
  .shelf__label { position: static; font-size: 13px; line-height: 1.3; }
  .back { padding: 26px 18px; }
  .stickers { justify-content: center; }
  .sticker { width: 132px; height: 132px; }
  .range { grid-template-columns: 1fr; }
  .pack .pack__face { width: 100%; min-height: 0; }
  .pack h3 { margin-bottom: 28px; }
  .prep__steps { grid-template-columns: 1fr; }
  .small-print { grid-template-columns: 1fr; }
  .hotline { padding: 26px 22px; }
  .foot__in { grid-template-columns: 1fr; }
  .foot__code { grid-row: auto; grid-column: 1; justify-self: start; }
}