/* === RESET === */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
/* Fluid root size. Everything in this stylesheet is sized in rem (or in
   vw-clamps capped in rem), so the root font-size is the one dial for the
   whole layout: up to a ~1550px window it is the user's default (16px) and
   the page looks as designed; wider than that it grows with the viewport
   (16px / 1550px = 1.03226vw), so headlines, copy and the content column keep
   the same share of the screen instead of shrinking into a fixed strip in the
   middle. Capped at 150% for very large monitors. Percent bounds keep the
   reader's own browser font-size preference in play. */
html { font-size: clamp(100%, 1.03226vw, 150%); }
body { line-height: 1.5; }
img, picture, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* === TOKENS (V2 candy-kingdom) === */
:root {
  --lav: #E7E3F1;        /* page background */
  --ink: #141414;        /* near-black headings/text */
  --ink-soft: #3a3a3a;   /* body */
  --lime: #c8e7e3;       /* sticker seals / accents */
  --pink: #fe4686;       /* pink kräftig — edge line + accents */
  --card-pink: #fea8c3;  /* pink pastell */
  --card-lime: #c8e7e3;
  --card-lav: #ffd9e4;   /* rosé — third card tone (was lila pastell; the
                            client keeps to turquoise + pink and their shades) */
  --turq: #00BDAB;       /* türkis kräftig — eyebrow labels, hero eyebrow */
  --lime-deep: #a9d6d0;  /* türkis, one step darker than --lime */
  --hover-rose: #fff2ef; /* the one hover tint shared by all tiles/buttons */

  /* legacy aliases so untouched sections below still resolve */
  --teal: var(--turq);
  --teal-deep: var(--turq);
  --blob-pink: var(--card-pink);
  --blob-mint: var(--card-lime);
  --blob-cream: var(--card-lav);
  --muted: #5b5670;
  --bg: var(--lav);
  --card: #FFFFFF;

  --disp: 'Montserrat', system-ui, sans-serif;
  --body: 'Montserrat', system-ui, -apple-system, sans-serif;
  --shadow-card: 0 1.25rem 2.75rem -1.625rem rgba(40, 28, 70, .35);
  --shadow-soft: 0 1rem 2.25rem -1.25rem rgba(40, 28, 70, .30);
}

/* === BASE === */
/* decorative blobs and floaters deliberately hang past the viewport edge, and
   .section keeps overflow visible so its wave dividers are not cut. Clip the
   page horizontally instead — `clip` (unlike hidden) creates no scroll
   container, so sticky elements and Lenis smooth-scroll are unaffected. */
html, body { overflow-x: clip; }
body {
  font-family: var(--body);
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--lav);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--disp);
  font-weight: 800;
  line-height: 1.05;
  color: var(--ink);
}

/* === UTILITIES === */
.container {
  width: 100%;
  max-width: 77.5rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.pink { color: var(--pink); }
.teal { color: var(--teal); }
.italic { font-style: italic; }

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .85rem 1.6rem;
  border-radius: 62.4375rem;
  font-family: var(--disp);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn--fill {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 .875rem 1.875rem -1rem rgba(20, 20, 20, .6);
}
.btn--fill:hover { background: #000; transform: translateY(-2px); }
.btn--outline {
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.btn--outline:hover { background: var(--hover-rose); }

/* === NAV (V2 chrome) === */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: clamp(1rem, 2.4vw, 1.6rem) 0;
  transition: padding .4s ease, background-color .4s ease, box-shadow .4s ease;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* header spans wider than the 1240px content container so the full inline nav
   (brand + 6 menu items + CTA) has room and the B2B CTA never overflows */
.site-header .container.nav { max-width: 90rem; }
.nav__brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
/* the PNG is trimmed to the artwork (no transparent padding), so the whole
   display height goes to the logo; sized to lead the header, not just sit in it */
.nav__brand img {
  display: block;
  width: auto;
  height: clamp(2.5rem, 4.2vw, 3.625rem);
}

/* center menu pill (carries .nav__burger so JS still opens the overlay).
   Absolutely centered in the header so it sits mid-screen, not on the edge —
   it is only ever shown in burger/mobile mode (hidden in full nav mode). */
.menu-pill {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  width: 4.125rem;
  height: 2.875rem;
  border-radius: 1rem;
  background: var(--lime);
  border: 1px solid rgba(40, 28, 70, .12);
  box-shadow: 0 .5rem 1.125rem -.625rem rgba(40, 28, 70, .4),
              inset 0 1px 0 rgba(255, 255, 255, .8);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, box-shadow .25s ease;
}
.menu-pill:hover { transform: translate(-50%, -50%) translateY(-2px); }
.menu-pill span {
  display: block;
  width: 1.375rem;
  height: 3px;
  border-radius: 3px;
  background: var(--ink);
}
.menu-pill span:nth-child(2) { width: 1rem; }

/* === FULL INLINE MEGA-NAV (footer links surfaced as dropdowns) === */
.nav__full { display: flex; }
.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(.1rem, .9vw, .6rem);
}
.nav-item { position: relative; }
.nav-item__trigger {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  padding: .5rem .7rem;
  border-radius: 62.4375rem;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.nav-item__trigger::after {
  content: '';
  width: .4375rem;
  height: .4375rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s ease;
  opacity: .65;
}
/* plain item (no children): drop the dropdown chevron */
.nav-item--plain .nav-item__trigger::after { content: none; }

.nav-item:hover .nav-item__trigger,
.nav-item:focus-within .nav-item__trigger {
  background: var(--lime);
}
/* the stuck header is itself --lime, so the hover pill steps one shade deeper */
.site-header.is-stuck .nav-item:hover .nav-item__trigger,
.site-header.is-stuck .nav-item:focus-within .nav-item__trigger {
  background: var(--lime-deep);
}
.nav-item:hover .nav-item__trigger::after,
.nav-item:focus-within .nav-item__trigger::after {
  transform: translateY(1px) rotate(225deg);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + .55rem);
  left: 50%;
  transform: translateX(-50%) translateY(.5rem);
  min-width: 13.75rem;
  padding: .6rem;
  background: #fff;
  border-radius: 1.25rem;
  border: 1px solid rgba(40, 28, 70, .08);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: .1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
/* invisible bridge so the pointer can cross the gap without closing */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -.65rem;
  left: 0;
  right: 0;
  height: .65rem;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  font-family: var(--disp);
  font-weight: 600;
  font-size: .98rem;
  color: var(--ink-soft);
  padding: .55rem .85rem;
  border-radius: .75rem;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.nav-dropdown a:hover { background: var(--lime); color: var(--ink); }

/* right cluster */
.nav__actions {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.nav__cta.btn--fill {
  min-height: 2.75rem;
  padding: .7rem 1.5rem;
  font-size: .95rem;
  background: var(--pink);
  box-shadow: 0 .875rem 1.875rem -1rem rgba(254, 70, 134, .7);
}
.nav__cta.btn--fill:hover { background: #e7396f; transform: translateY(-2px); }

/* === NAV MODE TOGGLING === */
/* full mode: inline nav visible, hamburger hidden */
body.nav--full .menu-pill { display: none !important; }
body.nav--full .nav__full { display: flex; }
/* menu mode: inline nav hidden, hamburger visible */
body.nav--burger .nav__full { display: none; }
body.nav--burger .menu-pill { display: flex !important; }

/* laptop widths: tighten the inline nav so all six labels + the B2B CTA keep
   fitting instead of collapsing into the burger */
@media (max-width: 1360px) {
  .site-header .container.nav { padding-inline: 1.5rem; }
  .nav__menu { gap: .1rem; }
  .nav-item__trigger { font-size: .95rem; padding: .5rem .5rem; }
}
@media (max-width: 1180px) {
  .site-header .container.nav { padding-inline: 1.1rem; }
  .nav-item__trigger { font-size: .88rem; padding: .45rem .34rem; gap: .28rem; }
  .nav__cta.btn--fill { padding: .7rem 1.1rem; font-size: .88rem; }
}

/* only genuinely narrow screens (tablet and below) fall back to the hamburger —
   1080px is the narrowest width where all six labels + the CTA still fit */
@media (max-width: 1079px) {
  .nav__full { display: none !important; }
  body.nav--full .menu-pill,
  body.nav--burger .menu-pill { display: flex !important; }
}

/* subtle stuck state */
/* frosted bar once the page scrolls, so nav + logo stay readable over content */
.site-header.is-stuck {
  padding-top: .7rem;
  padding-bottom: .7rem;
  background: rgba(200, 231, 227, .92); /* --lime, the site's turquoise, near-opaque */
  -webkit-backdrop-filter: blur(1rem) saturate(1.15);
  backdrop-filter: blur(1rem) saturate(1.15);
  border-bottom: 1px solid rgba(126, 190, 183, .5);
  box-shadow: 0 .75rem 1.875rem -1rem rgba(40, 28, 70, .4);
}

/* keep generic .nav__burger name working as the pill */
.nav__burger { background: none; border: 0; cursor: pointer; }

/* === MOBILE MENU === */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--lav);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.75rem);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mobile-menu__close {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  width: 3rem;
  height: 3rem;
  border-radius: 62.4375rem;
}
.mobile-menu__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.375rem;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.mobile-menu__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-menu__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  width: 100%;
}
.mobile-menu__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8rem 2.4rem;
  width: 100%;
  max-width: 45rem;
  text-align: left;
}
.mm-col h4 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: .7rem;
}
.mm-col a {
  display: block;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--ink);
  transition: color .2s ease, transform .2s ease;
}
.mm-col a:hover { color: var(--pink); transform: translateX(3px); }
.mobile-menu__cta {
  color: #fff !important;
  background: var(--pink);
  padding: .85rem 2.6rem;
  border-radius: 62.4375rem;
  font-size: 1.15rem !important;
}
.mobile-menu__cta:hover { background: #e7396f; transform: translateY(-2px); }
.mobile-menu__close span { background: var(--ink); }

/* phones: one group per white card, stacked — a small pink label on top and
   full-width link rows with hairlines and a chevron, so headings, links and
   groups read as clearly different things */
@media (max-width: 560px) {
  .mobile-menu { justify-content: flex-start; padding: 5rem 1.25rem 2rem; }
  .mobile-menu__nav { gap: 1.6rem; }
  .mobile-menu__cols { grid-template-columns: 1fr; gap: .75rem; }
  .mm-col {
    background: #fff;
    border-radius: 1.125rem;
    padding: 1rem 1.2rem .35rem;
    box-shadow: 0 .75rem 1.75rem -1.25rem rgba(20, 14, 40, .35);
  }
  .mm-col h4 { font-size: .72rem; letter-spacing: .14em; margin-bottom: .35rem; }
  .mm-col a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .68rem 0;
    font-size: 1.05rem;
    border-top: 1px solid rgba(20, 14, 40, .08);
  }
  .mm-col h4 + a { border-top: 0; }
  .mm-col a::after {
    content: '';
    flex: none;
    width: .45rem; height: .45rem;
    border-top: 2px solid var(--pink);
    border-right: 2px solid var(--pink);
    transform: rotate(45deg);
  }
  .mm-col a:hover { transform: none; }
  .mobile-menu__cta { align-self: stretch; text-align: center; }
}

/* === HERO (V2 candy-kingdom) === */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(8rem, 18vh, 13rem) 0 clamp(4rem, 9vh, 7rem);
  background: var(--lav);
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(231, 227, 241, 0.42) 0%, rgba(231, 227, 241, 0.14) 32%, rgba(231, 227, 241, 0.3) 100%),
    radial-gradient(60% 30% at 50% -4%, rgba(255,255,255,.68), transparent 70%);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.02) contrast(1.02) brightness(.96);
  transform: scale(1.02);
}


/* clouds */
/* clouds */
.hero__clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.cloud--tl  { width: 17.5rem; height: 9.375rem; top: 16%;  left: -3%;  opacity: .8; }
.cloud--tl2 { width: 12.5rem; height: 6.875rem; top: 26%;  left: 9%;   opacity: .55; filter: blur(.875rem); }
.cloud--band  { width: 60vw;  height: 20rem; bottom: -16%; left: -6%;  filter: blur(.625rem); }
.cloud--band2 { width: 55vw;  height: 18.75rem; bottom: -18%; right: -8%; filter: blur(.625rem); }
.cloud--band3 { width: 40vw;  height: 15rem; bottom: -14%; left: 32%;  filter: blur(.875rem); opacity: .9; }

.hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 62.5rem;
}
.hero__title {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(2.8rem, 9vw, 6.5rem);
  line-height: .9;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.6rem;
}
.hero__line { display: block; }
.hero__lead {
  max-width: 40rem;
  font-family: var(--body);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--ink-soft);
  margin-inline: auto;
}

/* floating product packshots */
.packets { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.packet {
  position: absolute;
  margin: 0;
  width: 7.5rem; /* fallback; per-product rules below override */
  will-change: transform;
  filter: drop-shadow(0 1rem 1.375rem rgba(40,28,70,.22));
}
.packet img {
  display: block;
  width: 100%;
  height: auto;
}
.packet--yupo    { width: 8.875rem; top: 15%; left: 8%;   transform: rotate(-8deg); }
.packet--halley  { width: 11.75rem; top: 11%; left: 27%;  transform: rotate(4deg); }
.packet--redbull { width: 3.75rem;  top: 12%; right: 12%; transform: rotate(10deg); }
.packet--biskrem { width: 8.25rem; top: 46%; left: 5%;   transform: rotate(-6deg); }
.packet--mis     { width: 5.625rem;  top: 42%; right: 7%;  transform: rotate(7deg); }
.packet--cizi    { width: 9.875rem; top: 64%; right: 21%; transform: rotate(-4deg); }

/* rosé stand-up pouch rising from the clouds */
.pouch {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 11.25rem;
  height: 15rem;
  z-index: 2;
  pointer-events: none;
}
.pouch__body {
  position: absolute;
  inset: 1.75rem 0 0;
  background: linear-gradient(160deg, #ffd9e4, #ffd9e4);
  border-radius: 1.625rem 1.625rem 1.875rem 1.875rem;
  box-shadow: var(--shadow-card), inset 0 .5rem 1.125rem rgba(255,255,255,.7),
              inset 0 -1rem 1.625rem rgba(254,70,134,.28);
}
.pouch__body::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 1.125rem;
  background: #ffd9e4;
  border-radius: .75rem .75rem 0 0;
  box-shadow: inset 0 -3px .3125rem rgba(254,70,134,.4);
}
.pouch__seam {
  position: absolute;
  top: 4rem; left: 50%;
  transform: translateX(-50%);
  width: 64%;
  height: 3.5rem;
  background: rgba(255,255,255,.45);
  border-radius: .625rem;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.6);
}
.pouch__peek {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  width: 3.625rem;
  height: 4.625rem;
  background: linear-gradient(150deg, #fea8c3, var(--pink));
  border-radius: .75rem;
  box-shadow: var(--shadow-soft);
  z-index: -1;
}

/* lime sticker seal */
.seal {
  position: absolute;
  z-index: 4;
  right: clamp(1.5rem, 6vw, 6rem);
  bottom: clamp(2rem, 9vh, 6rem);
  width: 10.5rem;
  height: 10.5rem;
  display: grid;
  place-items: center;
  transform: rotate(-10deg);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 .875rem 1.5rem rgba(40,28,70,.3));
}
.seal__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal__bg path { fill: var(--lime); }
.seal__text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-family: var(--disp);
  color: var(--ink);
  line-height: .9;
}
.seal__text small { font-size: .78rem; font-weight: 600; letter-spacing: .14em; }
.seal__text strong { font-size: 1.5rem; font-weight: 800; }
.seal:hover { transform: rotate(2deg) scale(1.05); }

@media (max-width: 860px) {
  .site-header.is-stuck { padding-top: .6rem; padding-bottom: .6rem; }
  .packet--redbull, .packet--mis { display: none; }
  .seal { width: 8.125rem; height: 8.125rem; }
  .seal__text strong { font-size: 1.2rem; }
}
@media (max-width: 480px) {
  .packets { transform: scale(.82); transform-origin: top center; }
  /* keep packshots out of the headline band on small screens */
  .packet--biskrem { top: 72%; left: 3%; }
  .packet--cizi    { top: 80%; right: 2%; }
  .pouch { width: 8.75rem; height: 11.875rem; }
}

/* === FIXED PINK EDGE LINE === */
.edge-line {
  position: fixed;
  top: 50%;
  right: 1.125rem;
  transform: translateY(-50%);
  width: .25rem;
  height: 8.75rem;
  border-radius: .25rem;
  background: var(--pink);
  z-index: 90;
  pointer-events: none;
}
/* phones: the line sits on top of the content at this width — hide it */
@media (max-width: 767px) { .edge-line { display: none; } }

/* hidden beats any layout display value — the nav, footer and the sections
   that are not live yet are toggled with the attribute alone */
[hidden] { display: none !important; }

/* === SHARED SECTION PRIMITIVES (candy-kingdom) === */
.section { position: relative; padding: clamp(4.5rem, 10vh, 8rem) 0; }

/* soft white cloud atmosphere reusable across sections */
.section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(38% 30% at 12% 8%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(34% 26% at 88% 92%, rgba(255,255,255,.45), transparent 72%);
}
.section > .container { position: relative; z-index: 1; }

.eyebrow {
  display: inline-block;
  font-family: var(--disp);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--turq);
  margin-bottom: 1.1rem;
}
.h2 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(2.1rem, 5vw, 3.7rem);
  line-height: 1.02; /* mixed-case needs a touch more leading than the old all-caps */
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 1.2rem;
}
.lead {
  max-width: 34rem;
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  color: var(--ink-soft);
  margin-bottom: 1.4rem;
}
.lead--center { margin-inline: auto; }
.section-head { max-width: 52rem; margin: 0 auto clamp(2.5rem, 5vw, 3.8rem); text-align: center; }
.section-head--left { margin-inline: 0; text-align: left; max-width: 42rem; }

/* the lavender/pink/lime accents (override legacy color helpers) */
.teal { color: var(--pink); }
.pink { color: var(--pink); }

/* floating candy blobs */
.blob {
  position: absolute;
  border-radius: 44% 56% 52% 48% / 56% 48% 52% 44%;
  filter: blur(.5px);
  box-shadow: var(--shadow-soft), inset 0 .5rem 1.125rem rgba(255,255,255,.55);
}
.blob--pink { background: linear-gradient(150deg, #fea8c3, var(--pink)); }
.blob--mint { background: linear-gradient(150deg, #dff0ee, var(--lime)); }
.blob--cream { background: linear-gradient(150deg, #ffd9e4, #ffd9e4); }
.float-shape { position: absolute; z-index: 0; pointer-events: none; }
.float-shape { top: 8%; right: -4%; width: 22vw; height: 22vw; max-width: 20rem; max-height: 20rem; opacity: .85; }
.float-shape--2 { top: auto; bottom: -4%; left: -6%; right: auto; }
.float-shape--3 { top: auto; bottom: 10%; left: 8%; right: auto; width: 16vw; height: 16vw; }

/* section-level lime seal sticker (smaller, decorative) */
.seal--inline {
  position: absolute;
  inset: auto;
  width: 7.5rem;
  height: 7.5rem;
  z-index: 3;
}
/* CTA seal: picks up the pink of the B2B Shop button in the header */
.seal--cta .seal__bg path { fill: var(--pink); }
.seal--cta .seal__text { color: #fff; }
.seal--cta .seal__text strong { font-size: 1.1rem; letter-spacing: .01em; }
.seal--top-right { top: clamp(1rem, 4vw, 2.5rem); right: clamp(1rem, 4vw, 3rem); bottom: auto; transform: rotate(8deg); }
.seal--top-right:hover { transform: rotate(-3deg) scale(1.06); }
@media (max-width: 720px) {
  .seal--inline { width: 5.5rem; height: 5.5rem; }
  .seal--inline .seal__text strong { font-size: 1rem; }
  /* "B2B Shop" is a longer word than the other seals carry — keep it inside the star */
  .seal--cta .seal__text strong { font-size: .72rem; }
  .seal--cta .seal__text small { font-size: .6rem; }
}

/* === PHOTO-BLOB → puffy tinted panel === */
.photo-blob {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 2.375rem;
  background: linear-gradient(150deg, var(--card-lav), #ffd9e4 60%, #ffd9e4);
  box-shadow: var(--shadow-card), inset 0 .625rem 1.5rem rgba(255,255,255,.6);
  overflow: hidden;
}
.photo-blob__pattern { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.photo-blob--a { background: linear-gradient(150deg, #fea8c3, var(--pink) 55%, #fe4686); }
.photo-blob--b { background: linear-gradient(150deg, #dff0ee, var(--card-lime) 55%, #a9d6d0); border-radius: 2.375rem; }

/* === CARD → boxless value block (icon tile + text) === */
.card {
  position: relative;
  background: transparent;
  padding: .5rem .6rem;
  transition: transform .3s cubic-bezier(.34,1.4,.64,1);
}
.card:hover { transform: translateY(-.375rem); }
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.875rem;
  height: 3.875rem;
  border-radius: 1.25rem;
  margin-bottom: 1.2rem;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 .5rem 1rem -.625rem rgba(40,28,70,.5);
}
.card__icon svg { width: 1.875rem; height: 1.875rem; stroke-width: 2; }
/* photo instead of an icon tile (Über AKAR "Was uns auszeichnet") */
.card__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1.25rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow-soft);
}
.card__icon--teal { background: var(--lime); color: var(--ink); }
.card__icon--pink { background: var(--pink); color: #fff; }
.card__title { font-family: var(--disp); font-size: 1.22rem; font-weight: 800; color: var(--ink); margin-bottom: .5rem; }
.card__text { color: var(--ink-soft); font-size: .96rem; }

/* === chip (tag pill) === */
.chip {
  display: inline-block;
  font-family: var(--disp);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .08em;
  padding: .32rem .8rem;
  border-radius: 62.4375rem;
  background: var(--lime);
  color: var(--ink);
}

/* === A) STORY === */
.story, .culture { overflow: hidden; }
.story__inner {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.story__copy { align-self: center; }
.story__media { position: relative; width: 100%; max-width: none; margin: 0; }
/* distance from the container's content edge to the viewport edge —
   (viewport − container)/2 centering gap plus the container's inline padding */
.story__inner { --edge-bleed: calc((100vw - min(100vw, 77.5rem)) / 2 + clamp(1.25rem, 5vw, 3rem)); }

/* script accent word inside a headline — matches "Best" in the hero, so it
   keeps its mixed case even inside an uppercase heading.
   Pacifico's x-height is 0.46em against Montserrat's 0.52em, so at a shared
   font-size the script word reads noticeably smaller than the words around
   it; 1.1em puts the two x-heights back on the same line. */
.script-accent {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-size: 1.1em;
  color: var(--pink);
  text-transform: none;
  letter-spacing: 0;
}

/* pink squiggle underline beneath the heading */
.squiggle { display: block; margin: -.4rem 0 1.4rem; }

/* right-hand photo that dissolves into the section on its left edge, so the
   transition to the text reads as seamless (no visible box). The soft
   gradient is a graceful fallback while the SVG loads. */
.story__photo {
  /* oversized: the photo grows past its column and reaches under the copy,
     where the left fade dissolves it into the headline and text — and past the
     container's right edge so it bleeds flush to the viewport edge */
  width: calc(118% + var(--edge-bleed, 0px));
  margin-left: -18%;
  /* as tall as the copy column beside it — the row height is set by whichever
     side is taller, with a floor so a short copy block can't squash the photo.
     The negative top margin reaches back up through the section's padding so
     the photo starts flush at the section's top edge (full-bleed). */
  --section-pad: clamp(4.5rem, 10vh, 8rem);
  margin-top: calc(-1 * var(--section-pad));
  height: calc(100% + var(--section-pad));
  min-height: clamp(26.25rem, 38vw, 38.75rem);
  background-image: url("../img/chocolate-woman.svg"), linear-gradient(150deg, #f7d9e4, #f0c3d5 55%, #ecb7cd);
  background-size: cover, cover;
  background-position: center right, center;
  background-repeat: no-repeat, no-repeat;
  position: relative;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 100%);
}
/* desktop: the photo reaches up under the section's top wave and is cut to the
   same curve, so the wave itself is the photo's upper edge — no strip of plain
   section colour between the wave and the picture. Three mask layers: the left
   fade, intersected with (wave on top + solid rectangle below). The section's
   own wave (::after) drops beneath the copy container so the photo covers it. */
@media (min-width: 861px) {
  .story::after { z-index: 0; }
  .story__photo {
    margin-top: calc(-1 * (var(--section-pad) + var(--wave-height)));
    height: calc(100% + var(--section-pad) + var(--wave-height));
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 112C162 92 268 58 444 58c180 0 250 42 416 42 186 0 252-46 418-46 78 0 122 10 162 18v88H0Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 112C162 92 268 58 444 58c180 0 250 42 416 42 186 0 252-46 418-46 78 0 122 10 162 18v88H0Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% 100%, 100% calc(var(--wave-height) + 3px), 100% calc(100% - var(--wave-height));
            mask-size: 100% 100%, 100% calc(var(--wave-height) + 3px), 100% calc(100% - var(--wave-height));
    -webkit-mask-position: 0 0, 0 0, 0 var(--wave-height);
            mask-position: 0 0, 0 0, 0 var(--wave-height);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-composite: source-in, source-over;
            mask-composite: intersect, add;
  }
}
/* soft bottom dissolve into the section colour — an overlay (not a second mask
   layer) so the left fade keeps working in browsers without mask-composite */
.story__photo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(3.75rem, 9vw, 8.125rem);
  background: linear-gradient(to top, var(--section-bg, #f5f1fb), transparent);
}

/* pill CTA: uppercase, pink outline, arrow */
.btn--pill {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--pink);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .82rem;
  padding: .95rem 1.9rem;
}
.btn--pill svg { width: 1.125rem; height: 1.125rem; }
.btn--pill:hover { background: var(--pink); color: #fff; transform: translateY(-2px); }

/* === FLOATERS: unpackaged snacks drifting across every section ===
   outer .floater gets the GSAP data-parallax scroll transform; the inner img
   runs the ambient bob so the two transforms never fight. Size (width) and
   position (top + left/right) are set inline per floater; the shared motion
   and responsive thinning live here. */
.floater {
  position: absolute;
  z-index: 0; /* below .section > .container so snacks never cover copy or headlines */
  pointer-events: none;
  transition: opacity .3s ease;
}
/* set by initFloaters() while the snack would sit on a headline or copy —
   clears out quickly, drifts back in gently */
.floater.is-blocked { opacity: 0; transition-duration: .12s; }
.floater img {
  display: block;
  width: 100%;
  height: auto;
  animation: floater-drift var(--dur, 9s) ease-in-out var(--delay, 0s) infinite;
  filter: drop-shadow(0 1rem 1.125rem rgba(40, 28, 70, .22));
  will-change: transform;
}
.floater.is-paused img { animation-play-state: paused; }

/* give each floater a different horizontal-drift range so neighbours don't
   sway in lockstep (nth-child spans all section children — that's fine, it
   just spreads the values pseudo-randomly across the floaters) */
.floater:nth-child(3n)   { --dx: 1.5rem; }
.floater:nth-child(3n+1) { --dx: .9375rem; }
.floater:nth-child(3n+2) { --dx: -1.25rem; }

/* organic float + fly: wander through X and Y with a lively tilt, looping
   seamlessly. Amplitudes scale off the per-floater --bob / --tilt / --dx. */
@keyframes floater-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(calc(var(--dx, 1.125rem) *  .55), calc(var(--bob, .625rem) * -1.5)) rotate(calc(var(--tilt, 7deg) *  1.1)); }
  40%  { transform: translate(var(--dx, 1.125rem),               calc(var(--bob, .625rem) *  -.4)) rotate(calc(var(--tilt, 7deg) *   .2)); }
  60%  { transform: translate(calc(var(--dx, 1.125rem) *  .35), calc(var(--bob, .625rem) *  1.3)) rotate(calc(var(--tilt, 7deg) *  -.9)); }
  80%  { transform: translate(calc(var(--dx, 1.125rem) * -.70), calc(var(--bob, .625rem) *   .5)) rotate(calc(var(--tilt, 7deg) * -1.2)); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* alternate cohort traces a mirrored path for extra variety */
.floater:nth-child(even) img { animation-name: floater-drift-alt; }
@keyframes floater-drift-alt {
  0%   { transform: translate(0, 0) rotate(0deg); }
  22%  { transform: translate(calc(var(--dx, 1.125rem) * -.65), var(--bob, .625rem))             rotate(calc(var(--tilt, 7deg) * -1.1)); }
  45%  { transform: translate(calc(var(--dx, 1.125rem) * -1),   calc(var(--bob, .625rem) *  -.7)) rotate(calc(var(--tilt, 7deg) *  -.2)); }
  65%  { transform: translate(calc(var(--dx, 1.125rem) *  .45), calc(var(--bob, .625rem) * -1.4)) rotate(calc(var(--tilt, 7deg) *  1.1)); }
  85%  { transform: translate(calc(var(--dx, 1.125rem) *  .80), calc(var(--bob, .625rem) *  .55)) rotate(calc(var(--tilt, 7deg) *   .7)); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .floater img { animation: none; }
}

/* thin the field out on smaller screens so it stays light and legible
   (scaling the outer .floater would fight GSAP's parallax transform, so we
   just drop the denser ones and shrink the survivors via their img) */
@media (max-width: 1000px) {
  .floater--md { display: none; }
  .floater img { max-width: 6.375rem; }
}
@media (max-width: 680px) {
  .floater--sm { display: none; }
  .floater img { max-width: 4.875rem; }
}
.values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}

/* === B) BRANDS === */
.brands { overflow: hidden; }
.brands .container { position: relative; z-index: 1; }
.brand-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: .85rem 1.5rem;
  background: var(--card-lime);
  border-radius: 62.4375rem;
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.8);
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--ink);
  text-align: center;
  transition: transform .3s cubic-bezier(.34,1.4,.64,1);
}
.brand-grid .wordmark:nth-child(3n+1) { background: var(--card-lime); }
.brand-grid .wordmark:nth-child(3n+2) { background: var(--card-pink); }
.brand-grid .wordmark:nth-child(3n+3) { background: var(--card-lav); }
.wordmark:hover { transform: translateY(-.25rem) rotate(-2deg); }
/* keep per-brand type flavor, recolored to candy palette */
.wm-ulker { font-weight: 800; letter-spacing: -.02em; }
.wm-uludag { font-style: italic; }
.wm-torku { letter-spacing: .1em; text-transform: uppercase; font-size: 1.15rem; }
.wm-halley { letter-spacing: -.02em; }
.wm-bebeto { font-style: italic; }
.wm-redbull { letter-spacing: -.01em; }
.wm-pinar { letter-spacing: .12em; }
.wm-cola { font-style: italic; font-size: 1.25rem; }
.wm-komili { letter-spacing: .16em; text-transform: uppercase; font-size: 1.1rem; }
.wm-tat { letter-spacing: .04em; font-size: 1.5rem; }
.wm-superfresh { letter-spacing: -.02em; font-size: 1.2rem; }
.wm-godiva { letter-spacing: .2em; text-transform: uppercase; font-size: 1.05rem; }

.marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  padding: 1.1rem 0;
  background: var(--card-lav);
  border-block: 2px solid rgba(40,28,70,.08);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--ink);
}
.marquee__sep { color: var(--pink); font-size: 1.4rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* === A2) CUSTOMERS / KUNDEN === */
.customers { overflow: hidden; }
.customers .container { position: relative; z-index: 1; }

/* no box: the copy sits straight on the section background, the shelf photo
   fills the right-hand side and dissolves into that background through a
   mask on its left edge, so there is no hard seam */
.cust-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(18rem, 50%) 1fr;
  min-height: clamp(24rem, 38vw, 32rem);
  isolation: isolate;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}
.cust-card__copy {
  position: relative;
  z-index: 2;
  padding: clamp(1.2rem, 2.4vw, 2rem) clamp(1.2rem, 2.2vw, 2rem) clamp(1.2rem, 2.4vw, 2rem) 0;
  align-self: center;
}
.cust-card__eyebrow {
  font-family: var(--disp);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--turq); /* matches the other section eyebrows */
  margin-bottom: 1rem;
}
/* a notch under the page's 3.7rem section headings so the long
   "FMCG-Einzelhandel." (wrapped in .nowrap) keeps to one line beside the photo */
.nowrap { white-space: nowrap; }
.cust-card__title {
  font-size: clamp(2rem, 4vw, 3.1rem);
  margin-bottom: 1.2rem;
}
.cust-card__lead {
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 34rem;
  margin-bottom: 1.8rem;
}
/* the photo sits under the whole card; the white panel fades in from the
   left edge of the photo area so the copy stays readable */
.cust-card__photo {
  position: absolute;
  inset: 0 0 0 33%;
  z-index: 1;
  border-radius: 1.75rem;
  background-image: url("../img/kunden-supermarkt-regal.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 18%, #000 40%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 18%, #000 40%);
}
/* three stat cards float over the photo, a touch below its centre */
.cust-card__stats {
  position: absolute;
  z-index: 3;
  left: 70%;
  top: 56%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: .55rem;
}
.cust-stat {
  flex: 1 1 0;
  min-width: 7.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .3rem;
  padding: 1rem .9rem .95rem;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(.375rem);
  border-radius: .875rem;
  box-shadow: 0 1.125rem 2.25rem -1.125rem rgba(20, 14, 40, .45), inset 0 1px 0 rgba(255,255,255,.9);
}
.cust-stat__icon { display: inline-flex; color: var(--pink); }
.cust-stat__icon svg { width: 1.5rem; height: 1.5rem; }
.cust-stat__num {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
  margin-top: .2rem;
}
.cust-stat__label { font-family: var(--disp); font-weight: 600; font-size: .74rem; color: var(--ink-soft); }

/* partner logos: a paged row with an arrow at each end. The track scrolls
   with scroll-snap; js/kunden.js pages it and loops back at the end. */
.logo-carousel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(.6rem, 1.5vw, 1.2rem);
}
.logo-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 2px solid var(--pink);
  background: #fff;
  color: var(--pink);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.logo-carousel__arrow svg { width: 1.125rem; height: 1.125rem; }
.logo-carousel__arrow:hover,
.logo-carousel__arrow:focus-visible { background: var(--pink); color: #fff; transform: scale(1.06); }
.logo-carousel__arrow:focus-visible { outline: 3px solid var(--pink); outline-offset: .25rem; }
.logo-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.logo-carousel__viewport::-webkit-scrollbar { display: none; }
.logo-carousel__track {
  --per-view: 5;
  display: flex;
  list-style: none;
  margin: 0;
  padding: .4rem 0;
}
.logo-carousel__item {
  flex: 0 0 calc(100% / var(--per-view));
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  padding-inline: clamp(.8rem, 1.8vw, 1.6rem);
  border-left: 1px solid rgba(40, 28, 70, .12);
  overflow: hidden;
}
.logo-carousel__item:first-child { border-left: 0; }
.logo-carousel__item img {
  height: 5rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* some source files bury a wide wordmark inside a square canvas with heavy
   built-in whitespace (Netto, Bartels-Langness, V-Markt) — render those larger
   and crop the empty border with negative margins so their small text is
   readable and the artwork visually matches its neighbours */
.logo-carousel__item--crop-sm img { height: 6.5rem; margin-block: -.75rem; }  /* light padding (Globus) */
.logo-carousel__item--crop img    { height: 9.25rem; margin-block: -2.125rem; } /* mild padding */
.logo-carousel__item--crop-xl img { height: 15.75rem; margin-block: -5.375rem; } /* mostly padding */
.logo-marquee__note {
  margin: 1.4rem auto 0;
  text-align: center;
  font-family: var(--disp);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* desktop: the shelf photo is a large full-bleed panel — it starts a clear
   gap right of the copy, runs out to the viewport's right edge (square there,
   no card corners) and the stat cards sit in its centre */
@media (min-width: 861px) {
  .cust-card {
    --edge-bleed: calc((100vw - min(100vw, 77.5rem)) / 2 + clamp(1.25rem, 5vw, 3rem));
    grid-template-columns: minmax(18rem, 46%) 1fr;
    min-height: clamp(28rem, 42vw, 38rem);
  }
  .cust-card__photo {
    inset: 0 calc(-1 * var(--edge-bleed)) 0 50%;
    border-radius: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.45) 14%, #000 32%);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.45) 14%, #000 32%);
  }
  /* centred on the photo: vertically it fills the card; horizontally it spans
     50% of the card out to the bleed, so its midpoint is 75% plus half the bleed */
  .cust-card__stats {
    left: calc(75% + var(--edge-bleed) / 2);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 1100px) {
  .logo-carousel__track { --per-view: 4; }
  .cust-stat { min-width: 6.4rem; padding: .85rem .6rem; }
}
@media (max-width: 860px) {
  /* stacked: copy, then the photo with the stats inside its lower edge */
  .cust-card { grid-template-columns: 1fr; min-height: 0; }
  .cust-card__copy { padding: 0 0 1.6rem; }
  .cust-card__title { max-width: none; }
  /* no photo beside it any more, and on ~360px phones the unbreakable
     "FMCG-Einzelhandel." is wider than the card and gets clipped */
  .cust-card__title .nowrap { white-space: normal; }
  /* full-width band like the chocolate photo above; the stat cards sit
     wholly inside its lower edge (see .cust-card__stats below) */
  .cust-card__photo {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 10;
    margin: 0 calc(-1 * clamp(1.25rem, 5vw, 3rem));
    border-radius: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .cust-card__stats {
    left: 50%;
    top: auto;
    bottom: 1rem;
    transform: translateX(-50%);
    width: calc(100% - 1.2rem);
    justify-content: center;
  }
  .cust-stat { min-width: 0; }
  .logo-carousel__track { --per-view: 3; }
}
@media (max-width: 520px) {
  .cust-card__stats { gap: .4rem; }
  .cust-stat { padding: .7rem .35rem; }
  .cust-stat__num { font-size: 1.15rem; }
  .cust-stat__label { font-size: .64rem; }
  .logo-carousel__arrow { width: 2.375rem; height: 2.375rem; }
  .logo-carousel__track { --per-view: 2; }
}

/* === C) CATEGORIES === */
.categories { overflow: hidden; } /* decorative floaters live outside the container */
.categories .container { position: relative; }
/* the sortiment intro is long — run it wider so it reads as a short block
   under the heading instead of a narrow column */
.categories .section-head { max-width: 68rem; }
.categories .section-head .lead { max-width: 64rem; }
.realms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.realm {
  position: relative;
  overflow: hidden;
  min-height: 14.375rem;
  border-radius: 2.125rem;
  padding: 1.6rem;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow-card), inset 0 2px 0 rgba(255,255,255,.6);
  transition: transform .35s cubic-bezier(.34,1.4,.64,1), box-shadow .35s ease;
}
.realm:hover { transform: translateY(-.5rem) scale(1.02); box-shadow: 0 2.5rem 3.75rem -1.875rem rgba(40,28,70,.45); }
.realm::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 1.375rem, transparent 1.375rem 2.75rem);
}
.realm--pink { background: linear-gradient(150deg, #fea8c3, var(--pink)); }
.realm--lime { background: linear-gradient(150deg, #dff0ee, var(--lime)); }
.realm--lav  { background: linear-gradient(150deg, #ffd9e4, #fea8c3); }
.realm__word {
  position: relative;
  z-index: 1;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 3px #fff;
  text-shadow: .25rem .3125rem 0 rgba(20,20,20,.12);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.realm--lime .realm__word { -webkit-text-stroke-color: var(--ink); }
.realm__tag {
  position: absolute;
  top: 1.4rem;
  left: 1.6rem;
  z-index: 1;
  font-family: var(--disp);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20,20,20,.22);
  padding: .3rem .8rem;
  border-radius: 62.4375rem;
}
.realm--lime .realm__tag { color: var(--ink); background: rgba(255,255,255,.55); }

/* 6 per row, wrapping — the short final row centres itself */
.cat-grid {
  --cgap: clamp(.8rem, 1.6vw, 1.6rem);
  list-style: none;
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--cgap);
  row-gap: clamp(1.8rem, 3.2vw, 2.8rem);
}
.cat-card {
  flex: 0 0 calc((100% - 4 * var(--cgap)) / 5);
  max-width: calc((100% - 4 * var(--cgap)) / 5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .8rem;
  text-align: center;
  transition: transform .3s cubic-bezier(.34,1.4,.64,1);
}
.cat-card:hover { transform: translateY(-.375rem); }
/* each card links to the Produkte page, pre-filtered (see index.html) */
.cat-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  width: 100%;
  border-radius: 1.5rem;
}
.cat-card__link:focus-visible { outline: 3px solid var(--pink); outline-offset: .375rem; }
/* the category photos are transparent product-cutout collages with their own
   soft glow — they float free on the section background, no masking shape. */
.cat-card__cutout {
  display: block;
  width: 100%;
  max-width: 13.125rem;
  aspect-ratio: 4 / 5; /* matches the 640×800 renders so cards stay uniform */
}
.cat-card__cutout img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .45s ease;
  /* some renders' sparkle wash fills the whole canvas and reads as a faint
     rectangle — an elliptical fade melts it into an organic glow instead. */
  -webkit-mask-image: radial-gradient(85% 78% at 50% 50%, #000 58%, transparent 98%);
  mask-image: radial-gradient(85% 78% at 50% 50%, #000 58%, transparent 98%);
}
.cat-card:hover .cat-card__cutout img { transform: scale(1.06); }
.cat-card__name {
  margin: 0;
  max-width: 100%;
  font-family: var(--disp);
  font-weight: 800;
  font-size: .98rem;
  letter-spacing: .02em;
  line-height: 1.15;
  color: var(--ink);
  hyphens: auto; /* Grundnahrungsmittel & Co. on narrow columns */
}
.cat-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }

/* floating candy confetti — glossy CSS gumballs & chocolate balls */
.cat-candy {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  box-shadow: inset -.25rem -.3125rem .5rem rgba(0,0,0,.18), inset 3px 3px .375rem rgba(255,255,255,.55), 0 .625rem 1.125rem -.5rem rgba(40,28,70,.4);
}
.cat-candy::after {
  content: '';
  position: absolute;
  top: 16%; left: 20%;
  width: 30%; height: 24%;
  border-radius: 50%;
  background: rgba(255,255,255,.75);
  filter: blur(1px);
}
.cat-candy--gum1 { width: 1.875rem; height: 1.875rem; top: 4%;  left: 2.5%;  background: radial-gradient(circle at 34% 30%, #ff8fb3, #e8437f 78%); }
.cat-candy--gum2 { width: 1.375rem; height: 1.375rem; top: 30%; right: 2%;   left: auto; background: radial-gradient(circle at 34% 30%, #7fd6ff, #2f9fe0 78%); }
.cat-candy--gum3 { width: 1.625rem; height: 1.625rem; bottom: 12%; left: 4%; background: radial-gradient(circle at 34% 30%, #ffe07a, #f5b21f 78%); }
.cat-candy--choc1 { width: 2.125rem; height: 2.125rem; top: 40%; right: 3.5%; left: auto; background: radial-gradient(circle at 34% 30%, #a9713f, #5c3410 78%); }
.cat-candy--choc2 { width: 1.25rem; height: 1.25rem; bottom: 8%; right: 8%;  left: auto; background: radial-gradient(circle at 34% 30%, #c98a52, #6b3f18 78%); }
@media (max-width: 640px) { .cat-candy { display: none; } }

/* === D) EUROPE FOOTPRINT ===
   centered map card on top, country columns + KPIs below it */
/* headline/copy + Standorte-Akkordeon links, Karte rechts daneben — die
   Karte fuellt so die volle Spaltenhoehe und wirkt nicht mehr verloren */
/* heading + lead span the row; underneath, the country accordion takes one
   narrow column so the uncut Europe artwork gets the rest of the width.
   .footprint__intro dissolves into the grid (display: contents) so its two
   children can be placed independently of the markup nesting. */
.footprint__grid {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.2rem, 2.5vw, 2rem) clamp(2rem, 4vw, 3.5rem);
}
.footprint__intro { display: contents; }
.footprint__intro .section-head--left { grid-column: 1 / -1; margin-bottom: clamp(.6rem, 1.5vw, 1.2rem); max-width: 46rem; }
.footprint__intro .section-head--left .lead { max-width: 42rem; }
/* the list is shorter than the map, whose visual mass sits mid-height, so it
   centres vertically against it (top-aligned again once the grid stacks) */
.footprint__intro .standorte { grid-column: 1; align-self: center; min-width: 0; margin-bottom: 0; }
.footprint__grid .footprint__map { grid-column: 2; }
.footprint__map {
  position: relative;
  width: 100%;
  margin-inline: 0;
  padding: 1.2rem;
  background: #2d2d2d; /* sea — matches the original amCharts artwork */
  border-radius: 2.375rem;
  box-shadow: var(--shadow-card);
}
.europe { width: 100%; height: auto; }

/* real Europe map (Robinson-projected amCharts base, cropped to the network) */
.eumap { display: block; width: 100%; height: auto; }
/* rest state mirrors the original artwork: teal land on #2d2d2d sea; AKAR
   countries keep the full original teal, the rest sit darker — pink appears
   only while a location/country is highlighted */
.eumap__land { fill: #47747c; stroke: #2d2d2d; stroke-width: .5; }
.eumap__land--akar { fill: #68acb1; transition: fill .25s ease; }
.eumap__land--akar:hover,
.eumap__land--akar.is-hot { fill: var(--pink); }

/* Variante B: unveraendertes helles iStock-Artwork (img/eumap-istock.webp) —
   kein Panel, das Bild steht frei auf dem Sektionsgrund */
.footprint__map--istock {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
/* the artwork carries its own alpha ramp on the bottom and right edges, where
   the crop cuts through Iberia, Italy and Poland — no mask needed here */
.eumap-istock { display: block; width: 100%; height: auto; }
.footprint__map--istock .footprint__pins { inset: 0; }

.footprint__pins { position: absolute; inset: 1.2rem; }
.pin { position: absolute; transform: translate(-50%, -50%); }
.pin b {
  display: block;
  width: .75rem; height: .75rem;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 3px rgba(254,70,134,.22);
  transition: transform .2s ease, width .2s ease, height .2s ease, border-width .2s ease;
}
.pin:nth-child(even) b { background: var(--lime); box-shadow: 0 0 0 3px rgba(200,231,227,.4); }
/* headquarters pin: bigger, always pink (specificity beats the nth-child(even)
   alternation above). Its white ring is the selection ring — the HQ is the
   selected location on load and loses the ring once another one is clicked.
   The border stays in place but transparent, so the pin keeps its 20px size
   and the pink simply fills out to the edge. */
.pin.pin--hq { z-index: 2; }
.pin.pin--hq b {
  width: 1.25rem; height: 1.25rem;
  background: var(--pink);
  border: 3px solid transparent;
  box-shadow: 0 0 0 3px rgba(254,70,134,.3);
  transition: transform .2s ease, border-color .2s ease;
}
.pin.pin--hq.is-selected b { border-color: #fff; }
.pin.pin--hq b::after { border-color: var(--pink); }
/* the selected location (.is-selected, set by js/standorte.js on its pin and
   its chip) wears the white ring — hovering alone does not. A regular pin
   grows to 16px so the pink core keeps its size inside the 3px ring; the HQ
   stays the biggest. */
.pin:not(.pin--hq).is-selected b {
  width: 1rem; height: 1rem;
  border: 3px solid #fff;
}
.pin.is-selected { z-index: 2; }
/* phones: the map is only ~330px wide, so full-size pins clump into blobs */
@media (max-width: 640px) {
  .pin b { width: .5rem; height: .5rem; box-shadow: 0 0 0 2px rgba(254,70,134,.22); }
  .footprint__pins .pin b { box-shadow: 0 0 0 2px rgba(254,70,134,.28); }
  .pin.pin--hq b { width: .85rem; height: .85rem; border-width: 2px; box-shadow: 0 0 0 2px rgba(254,70,134,.3); }
  .pin:not(.pin--hq).is-selected b { width: .7rem; height: .7rem; border-width: 2px; }
}
.pin { cursor: pointer; }
.pin:hover, .pin.is-hot, .pin:focus-visible { z-index: 3; }
.pin:hover b, .pin.is-hot b, .pin:focus-visible b { transform: scale(1.3); }
.pin.is-hot i, .pin:focus-visible i { opacity: 1; }
.pin:focus-visible { outline: none; }
/* on the teal map every pin stays pink — the lime alternation would drown
   (overrides the nth-child(even) recolor above by coming later at equal
   specificity) */
.footprint__pins .pin b { background: var(--pink); box-shadow: 0 0 0 3px rgba(254,70,134,.28); }
.footprint__pins .pin b::after { border-color: var(--pink); }
.pin b::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--pink);
  animation: pin-pulse 2.4s ease-out infinite;
}
.pin:nth-child(even) b::after { border-color: var(--lime); }
.pin i {
  position: absolute;
  left: 50%;
  bottom: 130%;
  transform: translateX(-50%);
  font-style: normal;
  font-family: var(--disp);
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  padding: .15rem .5rem;
  border-radius: .5rem;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.pin:hover i { opacity: 1; }
/* contact popup (js/standorte.js): one shared card inside .footprint__map,
   anchored to the clicked pin. The pin's hover label steps aside while its
   popup is open. */
.pin.is-open i { opacity: 0; }
/* while a popup is open the map outranks its grid siblings, so a card that
   reaches past the map (mobile: over the location list) stays on top */
.footprint__map.has-pop { z-index: 5; }
.pin-pop {
  position: absolute;
  z-index: 5;
  top: 0; left: 0;
  width: max-content;
  max-width: min(16.5rem, calc(100vw - 2rem));
  padding: .85rem 1rem .9rem;
  border-radius: 1.1rem;
  background: #fff;
  box-shadow: 0 1.1rem 2.4rem -1rem rgba(40, 28, 70, .45), 0 0 0 1px rgba(20,20,20,.05);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: left;
  visibility: hidden;
  opacity: 0;
  transform: translateY(.4rem);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.pin-pop--below { transform: translateY(-.4rem); }
.pin-pop.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
.pin-pop:focus { outline: none; }
/* little pointer towards the pin; --arrow-x is set by the script */
.pin-pop::after {
  content: '';
  position: absolute;
  left: var(--arrow-x, 50%);
  bottom: -.35rem;
  width: .8rem; height: .8rem;
  background: #fff;
  border-radius: .15rem;
  transform: translateX(-50%) rotate(45deg);
}
.pin-pop--below::after { bottom: auto; top: -.35rem; }
.pin-pop__close {
  position: absolute;
  top: .35rem; right: .4rem;
  width: 1.6rem; height: 1.6rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.pin-pop__close:hover, .pin-pop__close:focus-visible { background: rgba(254,70,134,.12); color: var(--pink); outline: none; }
.pin-pop__city {
  margin: 0 1.6rem .35rem 0;
  font-family: var(--disp);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pink);
}
.pin-pop__entry + .pin-pop__entry { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid rgba(20,20,20,.08); }
.pin-pop__name {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: .9rem;
  line-height: 1.25;
  color: var(--ink);
}
.pin-pop__name small { font-size: .68rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.pin-pop__addr { font-style: normal; margin-top: .15rem; }
.pin-pop__hint { margin: 0; }
.pin-pop__links { display: flex; flex-direction: column; gap: .1rem; margin-top: .35rem; }
.pin-pop__links a, .pin-pop__fax { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.pin-pop__links a:hover { color: var(--pink); }
.pin-pop__links > * > span:first-child {
  display: inline-block;
  min-width: 2.9rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
@keyframes pin-pulse {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.6); opacity: 0; }
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .7rem;
  margin-bottom: 2rem;
}
.legend li {
  font-family: var(--disp);
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink);
  background: var(--card-pink);
  padding: .35rem .85rem;
  border-radius: 62.4375rem;
}
.legend li:nth-child(even) { background: var(--card-lime); }

/* interactive Standort list — chips linked to their map pins, laid out in
   country columns beneath the full-width map */
.standorte {
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.standorte__group { border-bottom: 1px solid rgba(20,20,20,.09); }
.standorte__group:first-child { border-top: 1px solid rgba(20,20,20,.09); }
.standorte__head { margin: 0; }
.standorte__toggle {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: .85rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.standorte__flag {
  flex: none;
  width: 1.625rem; height: 1.625rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(20,20,20,.12), 0 2px .3125rem rgba(20,20,20,.14);
}
.standorte__country {
  font-family: var(--disp);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s ease;
}
.standorte__chevron {
  width: 1rem; height: 1rem;
  margin-left: auto;
  color: var(--muted);
  transition: transform .25s ease, color .2s ease;
}
.standorte__toggle:hover .standorte__country,
.standorte__toggle:focus-visible .standorte__country,
.standorte__group[data-open] .standorte__country { color: var(--ink); }
.standorte__toggle:hover .standorte__chevron { color: var(--ink); }
.standorte__group[data-open] .standorte__chevron { transform: rotate(180deg); color: var(--pink); }

/* panel opens via a 0fr -> 1fr grid row so the height animates without JS
   measuring; visibility keeps the closed chips out of the tab order */
.standorte__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .3s ease, visibility 0s linear .3s;
}
.standorte__group[data-open] .standorte__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .3s ease, visibility 0s;
}
.standorte__list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .45rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  min-height: 0;
}
.standorte__group[data-open] .standorte__list { padding: .1rem 0 1rem; }
.loc-chip {
  font-family: var(--disp);
  font-weight: 600;
  font-size: .8rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--ink);
  padding: .34rem .8rem;
  border-radius: 62.4375rem;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.loc-chip small {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(20,20,20,.55);
  margin-left: .25rem;
}
.standorte .loc-chip:hover, .standorte .loc-chip.is-hot, .standorte .loc-chip.is-selected, .standorte .loc-chip:focus-visible {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  transform: translateY(-2px);
}
.standorte .loc-chip:hover small, .standorte .loc-chip.is-hot small, .standorte .loc-chip.is-selected small, .standorte .loc-chip:focus-visible small { color: rgba(255,255,255,.85); }
.loc-chip--hq { font-weight: 800; }
/* the next section's wave rises into this one's bottom padding — keep the
   KPI row clear of it */
.footprint { padding-bottom: clamp(7rem, 15vh, 11rem); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem 1.4rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.kpi__num {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.02em;
}
.kpi__label { font-family: var(--disp); font-weight: 600; font-size: .95rem; color: var(--ink-soft); }

/* === E) TRUST BAR (rebuilt from scratch) ===
   One painted layer: the section box itself carries the top wave via a single
   two-part mask — the wave image over the top band and a solid rect below,
   unioned with a 2px overlap INSIDE the same mask. No pseudo-element wave, no
   second composited layer, so no joint that DPR/zoom rounding can open into a
   hairline, and nothing that can stack above the floaters. The box starts one
   wave-height above the hero's bottom edge (negative margin); everything above
   the curve is masked away so the hero shows through. */
.trustbar {
  --tb-wave: clamp(3.5rem, 6vw, 6rem);
  --section-bg: var(--section-surface-a);
  position: relative;
  z-index: 1; /* paints over the hero band it overlaps; the story wave still overlays its bottom */
  overflow: hidden;
  margin-top: calc(-1 * var(--tb-wave));
  background: var(--section-bg);
  padding-top: calc(clamp(4.5rem, 10vh, 8rem) + var(--tb-wave) * .5);
  padding-bottom: calc(clamp(4.5rem, 10vh, 8rem) + var(--tb-wave) * .5);
  pointer-events: none; /* the masked-away band must not steal clicks from the hero */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 112C162 92 268 58 444 58c180 0 250 42 416 42 186 0 252-46 418-46 78 0 122 10 162 18v88H0Z'/%3E%3C/svg%3E")
      center top / 100% calc(var(--tb-wave) + 2px) no-repeat,
    linear-gradient(#000, #000) left 0 top var(--tb-wave) / 100% calc(100% - var(--tb-wave)) no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 112C162 92 268 58 444 58c180 0 250 42 416 42 186 0 252-46 418-46 78 0 122 10 162 18v88H0Z'/%3E%3C/svg%3E")
      center top / 100% calc(var(--tb-wave) + 2px) no-repeat,
    linear-gradient(#000, #000) left 0 top var(--tb-wave) / 100% calc(100% - var(--tb-wave)) no-repeat;
}
.trustbar .container { pointer-events: auto; }
.trustbar .container { position: relative; z-index: 2; }
.stats__blob { top: -30%; left: 30%; opacity: .35; }
.stats__lead {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.4;
  color: var(--ink);
  text-align: center;
  max-width: 60ch;
  margin: 0 auto clamp(2.2rem, 4vw, 3.2rem);
}
.stats__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; text-align: center; }
.stat__num {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.02em;
}
.stat:nth-child(even) .stat__num { color: var(--pink); }
.stat__label { font-family: var(--disp); font-weight: 600; font-size: 1rem; color: var(--ink); margin-top: .4rem; display: block; }

/* === F) CULTURE === */
.story__inner--mirror { margin-bottom: clamp(3rem, 6vw, 4.5rem); }

/* === G) NEWS === */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.news-card {
  background: #fff;
  border-radius: 1.75rem;
  overflow: hidden;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s ease;
}
.news-card:hover { transform: translateY(-.5rem); box-shadow: 0 2.5rem 3.75rem -1.875rem rgba(40,28,70,.42); }
.news-card__media { overflow: hidden; }
.news-card__media .photo-blob {
  border-radius: 0;
  aspect-ratio: 16 / 10;
  box-shadow: none;
  transition: transform .4s ease;
}
.news-card:hover .news-card__media .photo-blob { transform: scale(1.06); }
.photo-blob--news1 { background: linear-gradient(150deg, #fea8c3, var(--pink)); }
.photo-blob--news2 { background: linear-gradient(150deg, #ffd9e4, #fea8c3); }
.photo-blob--news3 { background: linear-gradient(150deg, #dff0ee, var(--lime)); }
.news-card__body { padding: 1.6rem; }
.news-card__tag { margin-bottom: 1rem; }
.news-card:nth-child(3n+2) .news-card__tag { background: var(--pink); color: #fff; }
.news-card:nth-child(3n+3) .news-card__tag { background: var(--card-lav); color: var(--ink); }
.news-card__title { font-family: var(--disp); font-size: 1.22rem; font-weight: 800; line-height: 1.15; color: var(--ink); margin-bottom: .6rem; }
.news-card__text { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1rem; }
.news-card__link { font-family: var(--disp); font-weight: 600; color: var(--pink); font-size: .95rem; }
.news-card__link:hover { color: var(--ink); }

/* === H) FINAL CTA === */
.cta { overflow: hidden; text-align: center; }
/* The blob used to start above the section edge, where the top wave paints
   over it and sliced its top off along the wave curve. Anchoring it to both
   the top and the bottom of the section keeps it inside the section at any
   viewport height — including its parallax drift, which lifts it by up to
   16% of its own height (data-parallax="0.16"). */
.cta__blob {
  top: 16%;
  bottom: 8%;
  left: 25%;
  width: min(46vw, 32.5rem);
  height: auto;
  opacity: .55;
}
.cta__inner { position: relative; z-index: 1; max-width: 46rem; }
.cta__title { font-size: clamp(2.4rem, 6.5vw, 4.6rem); line-height: .92; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: 1.6rem; }

/* === I) FOOTER === */
.footer {
  position: relative;
  overflow: hidden;
  background: #c8e7e3; /* mint — client pick 2026-09-29 */
  padding: clamp(3.5rem, 7vw, 5rem) 0 2rem;
}
.footer__map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .5; }
.footer__map path { fill: rgba(254,70,134,.06); }
.footer__inner { position: relative; z-index: 1; }
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 3fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
  border-bottom: 2px solid rgba(40,28,70,.1);
}
.footer__logo {
  display: block;
  width: auto;
  height: 3.25rem;
  margin-bottom: 1rem;
}
.footer__tag { font-family: var(--disp); font-weight: 600; color: var(--ink); margin-bottom: .5rem; }
.footer__desc { color: var(--ink-soft); font-size: .95rem; max-width: 22rem; }
.footer__cols {
  display: grid;
  /* auto-fit so the row stays even while some columns are hidden until their
     pages exist */
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem;
}
.footer__col h4 { font-family: var(--disp); font-size: 1.05rem; font-weight: 800; color: var(--ink); margin-bottom: .9rem; }
.footer__col a {
  display: block;
  color: var(--ink-soft);
  font-size: .92rem;
  padding: .25rem 0;
  transition: color .2s ease;
}
.footer__col a:hover { color: var(--pink); }
.footer__bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding-top: 1.6rem;
}
.footer__social { display: flex; gap: .7rem; }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem; height: 2.625rem;
  border-radius: .875rem;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.footer__social a:hover { background: var(--pink); color: #fff; transform: translateY(-2px); }
.footer__social svg { width: 1.25rem; height: 1.25rem; }
.footer__copy { color: var(--ink-soft); font-size: .9rem; }
.footer__legal { color: var(--ink-soft); font-size: .9rem; margin-left: auto; }
.footer__legal a:hover { color: var(--pink); }

/* === RESPONSIVE (sections) === */
@media (max-width: 980px) {
  .values { grid-template-columns: repeat(2, 1fr); }
  .footprint__grid { grid-template-columns: 1fr; }
  /* stacked order: heading + lead, then the map, then the country accordion */
  .footprint__intro .section-head { order: 1; }
  .footprint__grid .footprint__map { order: 2; grid-column: auto; max-width: 38.75rem; width: 100%; margin-inline: auto; }
  .footprint__intro .standorte { order: 3; grid-column: auto; align-self: auto; }
  .cat-card { flex: 0 0 calc((100% - 3 * var(--cgap)) / 4); max-width: calc((100% - 3 * var(--cgap)) / 4); }
  .stats__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
  .realms { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .story__inner { grid-template-columns: 1fr; }
  .story__inner--mirror .story__copy { order: 2; }
  .story__inner--mirror .story__media { order: 1; }
  .story__media { max-width: 28.75rem; margin-inline: auto; }
  /* centred on mobile — drop the left fade and round the photo into a card */
  .story__photo {
    width: 100%; margin-left: 0; margin-top: 0;
    height: auto; min-height: 0; aspect-ratio: 1152 / 767;
    -webkit-mask-image: none; mask-image: none; border-radius: 1.75rem;
  }
  /* the card look keeps its crisp bottom edge — no dissolve on mobile */
  .story__photo::after { content: none; }
  /* the chocolate photo runs edge to edge as a band between the copy and
     the next block: pull it out through the container's inline padding */
  .story__media--bleed {
    max-width: none;
    margin-inline: calc(-1 * clamp(1.25rem, 5vw, 3rem));
    width: auto;
  }
  /* the Canva export carries a pale strip along its edges that reads as a
     frame once the photo is full width — zoom in just enough to crop it */
  .story__media--bleed .story__photo {
    border-radius: 0;
    background-size: 106% auto, cover;
    background-position: center, center;
  }
  .footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .values { grid-template-columns: 1fr; gap: 1rem; }
  .cat-card { flex: 0 0 calc((100% - var(--cgap)) / 2); max-width: calc((100% - var(--cgap)) / 2); }
  .news-grid { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  /* phones: drop the odd figures so the two-column grid comes out even */
  .stat--desktop { display: none; }
  /* "Vertriebsniederlassungen" is wider than a column on ~360px phones */
  .stat__label { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  /* with the 3rd figure gone the homepage's even/odd colouring would turn into
     a checkerboard — keep ink on the left, pink on the right */
  .trustbar .stat:nth-child(4) .stat__num { color: var(--ink); }
  .trustbar .stat:nth-child(5) .stat__num { color: var(--pink); }
  /* the story's value cards repeat what the copy above already says */
  .values--story { display: none; }
  .story__inner:has(.story__media--bleed) { margin-bottom: 0; }
  /* with the cards gone the photo ends the section: drop the bottom padding
     so the next section's wave rises just over the photo's bottom edge. The
     wave's lowest point (left edge) sits .3 wave-heights above the seam. */
  .story:has(.story__media--bleed) { padding-bottom: calc(var(--wave-height) * .3 - .5rem); }
  .kpis { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .footer__legal { margin-left: 0; }
  .realm { min-height: 11.25rem; }
}

/* === MOTION PREFERENCES === */
@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .logo-marquee__track { animation: none !important; }
  .pin b::after { animation: none !important; }
  .pin-pop { transition: none; transform: none; }
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === SHARED SECTION PRIMITIVES (candy-kingdom) === */
:root {
  --wave-height: clamp(3.5rem, 6vw, 6rem);
  --section-surface-a: #f5f1fb;
  --section-surface-b: #fcfbff;
}

/* hafif renk farkı: dalga görünür olsun ama sert görünmesin */
.story,
.categories,
.news {
  --section-bg: var(--section-surface-a);
}

.brands,
.footprint,
.culture,
.cta {
  --section-bg: var(--section-surface-b);
}

/* customers sits on the lavender page background, so its top wave must be
   lavender too — otherwise it falls back to #fff and leaves a white band. */
.customers {
  --section-bg: var(--lav);
}

/* client-picked homepage surfaces (2026-09-29): rosa and white alternate
   down the page. Comes after the defaults above (and the trustbar's own
   declaration) so these win; each page's CTA is scoped by what precedes it
   because the pages picked different colours for it. */
:root {
  --surface-rosa: #fff2ef;
  --surface-white: #ffffff;
}
.trustbar,
.customers,
.categories,
#kontakt.cta,
.about-expertise + .cta { --section-bg: var(--surface-rosa); }
.story,
.brands,
.footprint { --section-bg: var(--surface-white); }

.section {
  position: relative;
  padding: clamp(4.5rem, 10vh, 8rem) 0;
  /* the next section's wave rises ~.65 wave-heights into this bottom padding;
     on short windows it reached the copy, so the padding carries it extra */
  padding-bottom: calc(clamp(4.5rem, 10vh, 8rem) + var(--wave-height) * .65);
  background: var(--section-bg, transparent);
  overflow: visible;
  z-index: 1;
}

/* soft white cloud atmosphere reusable across sections */
.section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(38% 30% at 12% 8%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(34% 26% at 88% 92%, rgba(255,255,255,.45), transparent 72%);
  /* the radials are still opaque where they hit the section edges; without a
     fade they cut off in a hard line exactly at the wave seam. */
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 var(--wave-height), #000 calc(100% - var(--wave-height)), transparent 100%);
  mask: linear-gradient(180deg, transparent 0, #000 var(--wave-height), #000 calc(100% - var(--wave-height)), transparent 100%);
}

/* decorative top wave only — içerik overlap yapmaz */
.section::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--wave-height);
  /* 2px overlap: the wave is a separately-rasterized masked layer, and with a
     fractional 6vw height + subpixel compositing (retina/zoom) its antialiased
     bottom row can fall outside a 1px overlap and let the page show through
     as a hairline. Two px survive the worst-case rounding. */
  transform: translateY(calc(-100% + 2px));
  background: var(--section-bg, #fff);
  pointer-events: none;
  z-index: 1;

  /* mask is 3px taller than the box so its antialiased bottom edge lands
     outside the painted area — the wave's bottom rows stay fully opaque */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 112C162 92 268 58 444 58c180 0 250 42 416 42 186 0 252-46 418-46 78 0 122 10 162 18v88H0Z'/%3E%3C/svg%3E")
    center top / 100% calc(100% + 3px) no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 112C162 92 268 58 444 58c180 0 250 42 416 42 186 0 252-46 418-46 78 0 122 10 162 18v88H0Z'/%3E%3C/svg%3E")
    center top / 100% calc(100% + 3px) no-repeat;
}

.section > .container {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  :root {
    --wave-height: clamp(2.625rem, 8vw, 4.5rem);
  }
}

/* === B) BRANDS — logo & product marquee (Starke Marken) ===
   Copy sits in a normal .container like every other section; below it the
   brand logos and product cutouts scroll edge to edge in a continuous
   marquee (same mechanics as .logo-marquee: duplicated set + -50% loop),
   while each image keeps its gentle floater bob. */
/* the left-aligned brands intro read smaller than the centered section heads
   (e.g. Unsere Kunden) — give its headline and lead more presence */
.brands .section-head--left { max-width: 52rem; }
.brands .section-head--left .h2 { font-size: clamp(2.5rem, 5.8vw, 4.3rem); }
.brands .section-head--left .lead { font-size: clamp(1.08rem, 1.5vw, 1.3rem); max-width: 42rem; }

.brands .bh-arrow { color: var(--pink); transition: transform .25s ease; }
.brands .btn:hover .bh-arrow { transform: translateX(.25rem); }

.brands-marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.brands-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 1.4rem 0; /* headroom for the bob + drop shadows */
  animation: logo-marquee 163s linear infinite; /* 17 brands per set, same px/s as the 13-brand 125s */
}
.brands-marquee:hover .brands-marquee__track { animation-play-state: paused; }
/* one full set is exactly half the track width → shift by 50% and repeat */
@keyframes logo-marquee { to { transform: translateX(-50%); } }

/* each cell is one brand: logo on top, its product cutout below (same
   pairing as the old collage). The cell carries its trailing gap via margin
   (not flex `gap`) so the duplicated second set loops seamlessly. Sizes come
   from inline --lw/--pw per pair (--crop trims the square logo canvases'
   built-in transparent padding); --s scales everything down on mobile. */
.bm-pair {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin-right: clamp(2.5rem, 5vw, 4.5rem);
}
.bm-pair img {
  display: block;
  height: auto;
  --dx: .5rem;
  --bob: .375rem;
  --tilt: 2deg;
  animation: floater-drift var(--dur, 9s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform;
}
.bm-logo img {
  width: calc(var(--lw, 9.375rem) * var(--s, 1));
  margin-block: calc(var(--crop, 0px) * var(--s, 1));
  filter: drop-shadow(0 .625rem 1rem rgba(40, 28, 70, .16));
}
.bm-prod img {
  width: calc(var(--pw, 5.625rem) * var(--s, 1));
  animation-name: floater-drift-alt; /* product sways opposite its logo */
  filter: drop-shadow(0 .875rem 1.25rem rgba(40, 28, 70, .2));
}

@media (prefers-reduced-motion: reduce) {
  .bm-pair img { animation: none; }
  .brands-marquee__track { animation: none !important; }
}

@media (max-width: 680px) {
  .bm-pair { --s: .68; margin-right: 1.6rem; }
}

/* === LEGAL PAGES (impressum.html, datenschutz.html) === */
/* same lavender canvas as the Marken subpage: page head clears the fixed
   header, the text sits in one white card so long legal copy stays readable */
.legal-hero {
  --section-bg: #fff2ef;
  padding-top: clamp(9rem, 18vh, 12rem);
  padding-bottom: clamp(2rem, 4vh, 3rem);
  overflow: hidden;
}
.legal-hero .section-head { max-width: 56rem; }
.legal-section {
  --section-bg: #ffffff;
  padding-top: 0;
}
.legal {
  max-width: 50rem;
  margin-inline: auto;
  padding: clamp(1.8rem, 5vw, 3.6rem);
  background: var(--card);
  border-radius: 2.375rem;
  box-shadow: var(--shadow-card);
}
.legal h2 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 2.6rem 0 .9rem;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 1.7rem 0 .55rem;
}
.legal p, .legal li, .legal address { font-size: .97rem; line-height: 1.68; color: var(--ink-soft); }
.legal p { margin: 0 0 .9rem; }
.legal ul { margin: 0 0 .9rem; padding-left: 1.25rem; }
.legal li { margin-bottom: .3rem; }
.legal address { font-style: normal; margin: 0 0 .9rem; }
.legal a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal a:hover { color: var(--pink); }
.legal .legal__note {
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  border-radius: 1.125rem;
  background: var(--section-surface-a, #f5f1fb);
  font-size: .88rem;
}
@media (max-width: 620px) {
  .legal { border-radius: 1.5rem; }
}

/* === KONTAKT SUBPAGE (kontakt.html) === */
/* same lavender canvas and page-head recipe as the legal pages; form and
   Hauptsitz card sit side by side, the Handelspartner accordion below reuses
   the Standorte accordion from the home page with address cards instead of
   city chips. */
.kontakt-hero {
  --section-bg: #ffffff;
  padding-top: clamp(9rem, 18vh, 12rem);
  padding-bottom: clamp(2rem, 4vh, 3rem);
  overflow: hidden;
}
.kontakt-hero .section-head { max-width: 56rem; }
.kontakt-section {
  --section-bg: #ddeae7;
  padding-top: 0;
}
.kontakt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}
.kontakt-card,
.kontakt-info {
  background: var(--card);
  border-radius: 2.375rem;
  box-shadow: var(--shadow-card);
  padding: clamp(1.8rem, 4.5vw, 3.2rem);
}
.kontakt-card__title,
.kontakt-info__title {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 .5rem;
}
.kontakt-card__text { font-size: .95rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.kontakt-card abbr, .form abbr { color: var(--pink); text-decoration: none; font-weight: 700; }

/* form grid: two columns, long fields span both */
.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.05rem 1.1rem;
  margin-top: 1.6rem;
}
.form__field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.form__field--full, .form__status, .form__actions { grid-column: 1 / -1; }
.form__label {
  font-family: var(--disp);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.form__input {
  width: 100%;
  padding: .85rem 1.1rem;
  border-radius: 1.125rem;
  border: 1.5px solid rgba(20,20,20,.14);
  background: #fbfaff;
  font-size: .97rem;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form__input::placeholder { color: rgba(20,20,20,.4); }
.form__input:hover { border-color: rgba(20,20,20,.3); }
.form__input:focus {
  outline: none;
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 .25rem rgba(254,70,134,.16);
}
.form__input.is-invalid { border-color: var(--pink); }
textarea.form__input { min-height: 9.5rem; resize: vertical; line-height: 1.55; }
select.form__input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.8rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.05rem center;
  background-size: 1rem 1rem;
}
select.form__input:invalid { color: rgba(20,20,20,.5); }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-soft);
  cursor: pointer;
}
.form__check input {
  flex: none;
  width: 1.25rem; height: 1.25rem;
  margin-top: .15rem;
  accent-color: var(--pink);
  cursor: pointer;
}
.form__check input.is-invalid { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: .25rem; }
.form__check a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; }
.form__check a:hover { color: var(--pink); }
.form__status {
  margin: 0;
  padding: .9rem 1.15rem;
  border-radius: 1.125rem;
  background: var(--card-lime);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink);
}
.form__status[data-kind="error"] { background: var(--card-pink); }
.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: .3rem;
}
.form__actions .btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.form__hint { margin: 0; font-size: .84rem; color: var(--muted); }
.form__hint a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; }
.form__hint a:hover { color: var(--pink); }

/* Hauptsitz card */
.kontakt-info { position: sticky; top: 6.5rem; }
.kontakt-info .eyebrow { margin-bottom: .9rem; }
.kontakt-info__list { margin: 1.3rem 0 0; display: grid; gap: 1rem; }
.kontakt-info__row { display: grid; gap: .25rem; padding-top: 1rem; border-top: 1px solid rgba(20,20,20,.09); }
.kontakt-info__row:first-child { padding-top: 0; border-top: 0; }
.kontakt-info__row dt {
  font-family: var(--disp);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.kontakt-info__row dd { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--ink-soft); }
.kontakt-info__row address { font-style: normal; }
.kontakt-info__row a { color: var(--ink); font-weight: 600; text-decoration: none; }
.kontakt-info__row a:hover { color: var(--pink); }
.kontakt-info__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

/* Handelspartner accordion */
.partner-section {
  --section-bg: var(--section-surface-b);
  overflow: hidden;
}
.partner-section .standorte { max-width: 64rem; margin-bottom: 0; }
.standorte__count {
  flex: none;
  min-width: 1.6rem;
  padding: .15rem .5rem;
  border-radius: 62.4375rem;
  background: var(--card-lime);
  font-family: var(--disp);
  font-weight: 700;
  font-size: .72rem;
  text-align: center;
  color: var(--ink);
}
.standorte--partners .standorte__toggle { padding: 1.05rem 0; }
.standorte--partners .standorte__country { font-size: .9rem; }
.standorte__partners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr));
  gap: .9rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  min-height: 0;
}
.standorte__group[data-open] .standorte__partners { padding: .3rem 0 1.5rem; }
.partner {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.15rem 1.3rem 1.25rem;
  border-radius: 1.5rem;
  background: var(--card);
  box-shadow: var(--shadow-soft);
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.partner:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.partner__name {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--ink);
}
.partner__addr { font-style: normal; }
.partner__links { display: flex; flex-direction: column; gap: .2rem; margin-top: auto; padding-top: .4rem; border-top: 1px solid rgba(20,20,20,.08); }
.partner__links a, .partner__fax { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.partner__links a:hover { color: var(--pink); }
.partner__links > * > span:first-child {
  display: inline-block;
  min-width: 3.2rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 860px) {
  .kontakt-grid { grid-template-columns: 1fr; }
  .kontakt-info { position: static; }
}
@media (max-width: 620px) {
  .kontakt-card, .kontakt-info { border-radius: 1.5rem; }
  .form { grid-template-columns: 1fr; }
}

/* === MARKEN SUBPAGE (marken.html) === */
/* no hero here, so the page head clears the fixed header itself. Head and grid
   share one lavender surface so their section waves vanish and the two read
   as a single flowing canvas — no visible seam between them. */
.marken-hero {
  --section-bg: #ffffff;
  padding-top: clamp(9rem, 18vh, 12rem);
  padding-bottom: clamp(2.5rem, 5vh, 4rem);
  overflow: hidden;
}
.marken-hero .section-head { max-width: 56rem; }

/* three-column brand directory: pastel logo tile, name underneath.
   No overflow clip here — it would truncate the section's own top wave to a
   hard 2px hairline (nothing inside the grid overflows anyway). */
.marken-grid-section {
  --section-bg: #ddeae7;
  padding-top: 0;
}
/* client pick 2026-09-29 */
.marken-grid-section + .cta { --section-bg: #ffffff; }
.marken-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
}
.marken-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  text-align: center;
  padding: 0;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.34, 1.4, .64, 1);
}
.marken-tile:hover,
.marken-tile:focus-visible { transform: translateY(-.375rem) rotate(-1.2deg); }
.marken-tile:focus-visible { outline: 3px solid var(--pink); outline-offset: .375rem; border-radius: 1.875rem; }
.marken-tile__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #fff;
  border-radius: 1.75rem;
  box-shadow: var(--shadow-card), inset 0 2px 0 rgba(255, 255, 255, .8);
  transition: background-color .3s ease;
}
.marken-tile__logo img {
  max-width: 62%;
  max-height: 58%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 .625rem 1rem rgba(40, 28, 70, .14));
  transform: scale(var(--logo-scale, 1));
}
/* Many logo files sit in a square canvas whose artwork fills only a fraction
   of it (Ülker: 24% of the height, Kızılay 47%, Almarai 50% …), so the shared
   cap renders them far smaller than the wide wordmarks. --logo-scale enlarges
   each from the centre until its visible artwork spans roughly the same width
   as the wide logos (~62% of the tile), without touching the shared files,
   which the homepage marquee positions with its own hand-tuned offsets. */
:is(.marken-tile, .brand-modal__card)[data-brand="ulker"]     img { --logo-scale: 1.9; }
:is(.marken-tile, .brand-modal__card)[data-brand="kizilay"]   img { --logo-scale: 1.8; }
:is(.marken-tile, .brand-modal__card)[data-brand="yupo"]      img { --logo-scale: 1.8; }
:is(.marken-tile, .brand-modal__card)[data-brand="colaturka"] img { --logo-scale: 1.5; }
:is(.marken-tile, .brand-modal__card)[data-brand="dogadan"]   img { --logo-scale: 1.2; }
:is(.marken-tile, .brand-modal__card)[data-brand="mis"]       img { --logo-scale: 1.8; }
:is(.marken-tile, .brand-modal__card)[data-brand="celebi"]    img { --logo-scale: 1.35; }
:is(.marken-tile, .brand-modal__card)[data-brand="saka"]      img { --logo-scale: 1.5; }
:is(.marken-tile, .brand-modal__card)[data-brand="almarai"]   img { --logo-scale: 2.1; }
:is(.marken-tile, .brand-modal__card)[data-brand="softline"]  img { --logo-scale: 1.1; }
:is(.marken-tile, .brand-modal__card)[data-brand="beyti"]     img { --logo-scale: 1.1; }
:is(.marken-tile, .brand-modal__card)[data-brand="bizim"]     img { --logo-scale: 1.8; }
:is(.marken-tile, .brand-modal__card)[data-brand="nawras"]    img { --logo-scale: 1.1; }
/* the 09/2026 logo files (Halk … Piyale, new Çamlıca) were trimmed to their
   artwork on import, so they need no scale; İçim is the one tall mark. */
:is(.marken-tile, .brand-modal__card)[data-brand="icim"]      img { --logo-scale: 1.1; }

/* pastel wash on hover rotates through the candy palette like .brand-grid */
.marken-tile:hover .marken-tile__logo,
.marken-tile:focus-visible .marken-tile__logo { background: var(--hover-rose); }
.marken-tile__name {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--ink);
  line-height: 1.15;
}
.marken-tile__cat {
  display: block;
  font-family: var(--disp);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .25rem;
}

/* --- brand info pop-up --- */
.brand-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.brand-modal.is-open { opacity: 1; visibility: visible; }
.brand-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, .45);
  -webkit-backdrop-filter: blur(.375rem);
  backdrop-filter: blur(.375rem);
}
.brand-modal__card {
  position: relative;
  z-index: 1;
  width: min(42.5rem, 100%);
  max-height: min(86vh, 46rem);
  overflow-y: auto;
  background: #fff;
  border-radius: 2rem;
  box-shadow: var(--shadow-card);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  transform: translateY(1.125rem) scale(.96);
  transition: transform .35s cubic-bezier(.34, 1.4, .64, 1);
}
.brand-modal.is-open .brand-modal__card { transform: translateY(0) scale(1); }
.brand-modal__close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 62.4375rem;
  background: var(--lav);
  transition: background-color .25s ease, transform .25s ease;
}
.brand-modal__close:hover { background: var(--card-pink); transform: rotate(90deg); }
.brand-modal__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.125rem;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.brand-modal__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.brand-modal__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
.brand-modal__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(10rem, 30vw, 14rem);
  background: var(--card-lav);
  border-radius: 1.5rem;
  margin-bottom: 1.4rem;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7);
}
.brand-modal__logo img {
  max-width: 62%;
  max-height: 72%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: .875rem; /* softens square-canvas logos (e.g. Nawras) */
  filter: drop-shadow(0 .625rem 1rem rgba(40, 28, 70, .16));
  /* same per-brand --logo-scale as the tiles (the card carries data-brand) */
  transform: scale(var(--logo-scale, 1));
}
.brand-modal__title {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  color: var(--ink);
  margin: .65rem 0 .35rem;
}
.brand-modal__meta {
  font-family: var(--disp);
  font-weight: 600;
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.brand-modal__text { color: var(--ink-soft); font-size: 1rem; }
.brand-modal__text p + p { margin-top: .8rem; }
/* sub-brand list inside the pop-up (e.g. Ülker's Untermarken) */
.brand-modal__list-head {
  margin-top: 1.2rem !important;
  font-family: var(--disp);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.brand-modal__list {
  columns: 3;
  column-gap: 1.2rem;
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  font-size: .93rem;
  line-height: 1.5;
}
.brand-modal__list li {
  break-inside: avoid;
  padding: .12rem 0 .12rem .95rem;
  position: relative;
}
.brand-modal__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: .375rem; height: .375rem;
  border-radius: 50%;
  background: var(--pink);
}
@media (max-width: 620px) {
  .brand-modal__list { columns: 2; }
}

@media (max-width: 980px) {
  .marken-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .marken-grid { gap: 1.1rem 1rem; }
  .marken-tile__logo { border-radius: 1.25rem; }
  .marken-tile__name { font-size: .98rem; }
  .marken-tile__cat { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .marken-tile, .brand-modal, .brand-modal__card { transition: none; }
}

/* === ÜBER AKAR SUBPAGE (ueber-akar.html) === */
/* same page-head recipe as the Marken/Kontakt subpages. Surfaces step
   lavender → a → b → lavender … so every section wave stays visible but soft.
   No overflow clip below the head: it would cut each section's own top wave,
   so blobs and floaters are placed fully inside their sections instead. */
.about-hero {
  --section-bg: var(--lav);
  /* the building photo is the hero's background: tall enough to read as a
     full-width image, heading on the sky with a soft lavender fade behind it */
  min-height: clamp(34rem, 88vh, 54rem);
  /* the photo scales with the viewport width, so the heading's offset does
     too: it starts just below the Akar sign on the facade, keeping the logo
     clear of the heading's glow */
  padding-top: calc(10rem + 15vw);
  padding-bottom: clamp(3.5rem, 7vh, 5.5rem);
  overflow: hidden;
}
.about-hero .section-head { max-width: 58rem; margin-bottom: 0; }
.about-hero__media { position: absolute; inset: 0; z-index: 0; margin: 0; }
.about-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* a light wash under the fixed header — the heading's own glow is on
     .section-head below, so the rest of the building stays at full strength */
  background: linear-gradient(180deg, color-mix(in srgb, var(--lav) 80%, transparent) 0%, transparent 20%);
}
/* the heading sits on the facade and its dark windows, not on sky: a lavender
   cloud attached to the text block itself (so it follows it at every width),
   near-solid under the letters and dissolving well before its edges, plus a
   tight halo that lifts each glyph off whatever window is behind it */
.about-hero .section-head { position: relative; isolation: isolate; }
.about-hero .section-head::before {
  content: '';
  position: absolute;
  inset: -3.5rem -6rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--lav) 90%, transparent) 55%, color-mix(in srgb, var(--lav) 55%, transparent) 78%, transparent 100%);
  filter: blur(8px);
}
.about-hero .section-head .h2 {
  text-shadow: 0 0 .5em color-mix(in srgb, var(--lav) 85%, transparent), 0 0 .15em color-mix(in srgb, var(--lav) 90%, transparent);
}
.about-hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* anchored near the top: the whole building (roof sits ~21% down the
     image) stays in frame and the crop eats the empty road below instead */
  object-position: center 25%;
}
/* "SEIT 1992" seal on the photo's lower right, clear of the next section's wave */
.about-hero__seal {
  z-index: 1;
  top: auto;
  bottom: calc(var(--wave-height, 4rem) + clamp(1.5rem, 4vw, 3rem));
  right: clamp(1.25rem, 6vw, 5rem);
  width: 8.25rem;
  height: 8.25rem;
  transform: rotate(9deg);
}
.about-hero__seal:hover { transform: rotate(9deg); }
.about-hero__seal .seal__text strong { font-size: 1.7rem; }
/* narrower desktops: the lowered heading runs nearly full width and would
   hit the seal on the lower right — lift it onto the tree, above the heading */
@media (min-width: 861px) and (max-width: 1280px) {
  .about-hero__seal { top: 6.5rem; bottom: auto; width: 7rem; height: 7rem; }
  .about-hero__seal .seal__text strong { font-size: 1.45rem; }
}

.about-story   { --section-bg: var(--surface-white); } /* client pick 2026-09-29 */
.about-usp     { --section-bg: #ffffff; }
.about-stats   { --section-bg: #fff2ef; }
.about-vm      { --section-bg: #ffffff; }
.about-werte   { --section-bg: #ddeae7; }
.about-expertise { --section-bg: #ffffff; }
.about-timeline  { --section-bg: #ddeae7; }

/* --- story: copy beside a photo card, second row mirrored --- */
.about-row {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: clamp(2rem, 5.5vw, 5rem);
}
.about-row + .about-row { margin-top: clamp(3.5rem, 8vw, 6.5rem); }
.about-row--mirror { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.about-row__copy .lead { max-width: 38rem; }
.about-row__copy .lead:last-child { margin-bottom: 0; }
/* opening statement of a copy block — same voice as .stats__lead */
.about-intro {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.3vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--ink);
  max-width: 34rem;
  margin-bottom: 1.4rem;
}
/* photo card with a candy blob peeking out behind it */
.about-photo { position: relative; margin: 0; isolation: isolate; }
.about-photo::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 44% 56% 52% 48% / 56% 48% 52% 44%;
  box-shadow: var(--shadow-soft), inset 0 .5rem 1.125rem rgba(255,255,255,.55);
}
.about-photo--pink::before { right: -7%; bottom: -7%; background: linear-gradient(150deg, #fea8c3, var(--pink)); }
.about-photo--lav::before  { left: -7%; top: -8%; background: linear-gradient(150deg, #ffd9e4, #fea8c3); }
.about-photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 2.375rem;
  box-shadow: var(--shadow-card);
}
.about-photo--portrait img { aspect-ratio: 4 / 5; object-position: center 60%; }
.about-photo--landscape img { aspect-ratio: 4 / 3; }
/* desktop: the portrait photo beside the opening story runs exactly as tall
   as the copy, so its top and bottom edges line up with the text block */
@media (min-width: 861px) {
  .about-row:not(.about-row--mirror) { align-items: stretch; }
  .about-row:not(.about-row--mirror) .about-photo--portrait img { height: 100%; aspect-ratio: auto; }
}

/* then → now panels: the story's three closing sentences */
.then-now {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
  margin-top: clamp(3.5rem, 8vw, 6.5rem);
}
.then-now__item {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.8vw, 2.2rem);
  border-radius: 1.875rem;
  box-shadow: var(--shadow-soft), inset 0 .5rem 1.125rem rgba(255,255,255,.55);
}
.then-now__item--mint { background: linear-gradient(150deg, #dff0ee, var(--card-lime)); }
.then-now__item--pink { background: linear-gradient(150deg, #ffd3e0, var(--card-pink)); }
.then-now__item--rose { background: linear-gradient(150deg, #fff2ef, var(--card-lav)); }
.then-now__from {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.12;
  letter-spacing: -.01em;
}
.then-now__arrow {
  width: 2.5rem;
  height: 2.5rem;
  padding: .5625rem;
  margin: 1.1rem 0;
  border-radius: 50%;
  background: #fff;
  color: var(--pink);
  box-shadow: 0 .5rem 1rem -.625rem rgba(40,28,70,.5);
}
.then-now__to {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.45;
  color: var(--ink);
}

.about-passion { text-align: center; margin-top: clamp(3rem, 7vw, 5.5rem); }
.about-passion__lead {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: var(--ink);
  margin-bottom: .7rem;
}
.about-passion__claim {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* --- numbers: the homepage trust-bar stats, eight of them in two rows --- */
.about-stats__blob { top: 12%; left: 34%; right: auto; opacity: .35; }
.stats__grid--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2.2rem, 4.5vw, 3.6rem) 1.5rem; }
/* long compounds (Vertriebsniederlassungen, Außendienstmitarbeiter) must break
   inside a narrow column instead of pushing it wider than the screen */
.stats__grid--8 .stat__label { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.about-claim {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--ink);
  text-align: center;
  max-width: 24ch;
  margin: clamp(3rem, 6vw, 4.8rem) auto 0;
}

/* --- vision & mission: two puffy tinted panels --- */
.vm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2rem);
}
.vm-card {
  padding: clamp(1.9rem, 4.2vw, 3.4rem);
  border-radius: 2.375rem;
  box-shadow: var(--shadow-card), inset 0 .625rem 1.5rem rgba(255,255,255,.6);
}
.vm-card--vision  { background: linear-gradient(150deg, #dff0ee, var(--card-lime) 55%, #b5dcd7); }
.vm-card--mission { background: linear-gradient(150deg, #ffd9e4, var(--card-pink) 70%, #fd98b8); }
.vm-card__title {
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  letter-spacing: -.01em;
  margin-bottom: 1.3rem;
}
.vm-card__lead {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.38;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.vm-card__text { font-size: clamp(.98rem, 1.2vw, 1.08rem); line-height: 1.6; color: var(--ink); }

/* --- values: heading stays in view while the five values scroll past --- */
.about-werte__blob { top: auto; bottom: 8%; right: -4%; opacity: .7; }
.werte {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5.5vw, 5rem);
  align-items: start;
}
.werte__head { position: sticky; top: clamp(6.5rem, 14vh, 9rem); }
.werte__list { display: grid; gap: clamp(.9rem, 1.6vw, 1.2rem); }
.wert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  background: var(--card);
  border-radius: 1.75rem;
  box-shadow: var(--shadow-soft);
}
.wert .card__icon { margin-bottom: 0; }

/* --- expertise: six departments, tiles wash pastel on hover like the brand tiles --- */
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.expertise-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: clamp(10.5rem, 15vw, 13rem);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  background: var(--card);
  border-radius: 1.75rem;
  box-shadow: var(--shadow-card), inset 0 2px 0 rgba(255,255,255,.8);
  transition: transform .3s cubic-bezier(.34, 1.4, .64, 1), background-color .3s ease;
}
.expertise-tile:hover { transform: translateY(-.375rem) rotate(-1.2deg); }
.expertise-tile:hover { background: var(--hover-rose); }
.expertise-tile .card__icon { margin-bottom: 1.4rem; }
.expertise-tile__name {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.12;
  letter-spacing: -.005em;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* --- timeline: milestones alternate around a centre line that fills pink
       with the scroll position (js/ueber-akar.js) --- */
.timeline { position: relative; max-width: 62rem; margin-inline: auto; }
.timeline__line {
  position: absolute;
  top: 2.75rem; /* starts at the first dot (.timeline__dot top) */
  bottom: 0;
  left: 50%;
  width: .25rem;
  margin-left: -2px;
  border-radius: .25rem;
  background: rgba(40, 28, 70, .1);
  overflow: hidden;
}
.timeline__progress {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: .25rem;
  background: var(--pink);
  transform-origin: top center;
}
.timeline__list { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
/* cards sit on alternating sides, so neighbours may interleave vertically.
   This small overlap is the no-JS fallback — js/ueber-akar.js sets the real
   margins so each card tucks in beside its neighbour on the other side. */
@media (min-width: 761px) {
  .timeline__item + .timeline__item { margin-top: -2.2rem; }
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(3.2rem, 7vw, 5.5rem);
  align-items: start;
}
/* cards carry a title and a full paragraph, so both sides read left-aligned */
.timeline__item:nth-child(odd)  .timeline__card { grid-column: 1; justify-self: end; }
.timeline__item:nth-child(even) .timeline__card { grid-column: 2; justify-self: start; }
.timeline__dot {
  position: absolute;
  left: 50%;
  /* near the card's top edge rather than its centre: the cards differ a lot in
     height, and a fixed offset keeps the dots in chronological order */
  top: 2.75rem;
  width: 1.5rem;
  height: 1.5rem;
  margin: -.75rem 0 0 -.75rem;
  border-radius: 50%;
  background: #fff;
  border: .25rem solid var(--pink);
  box-shadow: 0 .375rem .875rem -.5rem rgba(40,28,70,.5);
  transition: background-color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.timeline__item.is-passed .timeline__dot {
  background: var(--pink);
  border-color: #fff;
  transform: scale(1.15);
}
.timeline__card {
  width: 100%;
  max-width: 27rem;
  padding: clamp(1.2rem, 2.2vw, 1.7rem) clamp(1.3rem, 2.4vw, 1.9rem);
  background: var(--card);
  border-radius: 1.75rem;
  box-shadow: var(--shadow-soft);
}
.timeline__year {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--pink);
  margin-bottom: .45rem;
}
.timeline__title {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 .5rem;
}
.timeline__text {
  font-size: clamp(.9rem, 1.05vw, .96rem);
  line-height: 1.6;
  color: var(--ink-soft);
}
.timeline__card--photo { padding: .7rem .7rem clamp(1.2rem, 2.2vw, 1.7rem); }
.timeline__card--photo .timeline__year,
.timeline__card--photo .timeline__title,
.timeline__card--photo .timeline__text { padding-inline: clamp(.6rem, 1.6vw, 1.2rem); }
/* one photo fills the card width; with several, the first stays full width
   and the rest share a two-column row (a lone second photo spans it too).
   --ar / --pos on an <img> override its crop ratio and focus point. */
.timeline__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-bottom: 1.1rem;
}
.timeline__photo {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, 16 / 10);
  object-fit: cover;
  object-position: var(--pos, center);
  border-radius: 1.25rem;
}
.timeline__photos .timeline__photo:first-child,
.timeline__photos .timeline__photo:nth-child(2):last-child { grid-column: 1 / -1; }
.timeline__photos .timeline__photo:not(:first-child):not(:nth-child(2):last-child) { border-radius: .9rem; }

@media (max-width: 980px) {
  .werte { grid-template-columns: 1fr; }
  .werte__head { position: static; }
}
@media (max-width: 860px) {
  .about-row,
  .about-row--mirror { grid-template-columns: 1fr; }
  /* stacked: copy first, photo second — in both rows */
  .about-row--mirror .about-photo { order: 2; }
  .about-photo { max-width: 32.5rem; width: 100%; margin-inline: auto; }
  .about-photo--portrait img { aspect-ratio: 1 / 1; }
  .then-now { grid-template-columns: 1fr; }
  .vm-grid { grid-template-columns: 1fr; }
  /* phones/tablets: a portrait screen crops the wide photo down to the road,
     so stack instead — heading first, then the photo as a full-width band
     that runs into the next section's wave */
  .about-hero { display: flex; flex-direction: column; min-height: 0; padding-top: clamp(9rem, 18vh, 12rem); padding-bottom: 0; }
  .about-hero > .container { order: 1; margin-bottom: 2rem; }
  .about-hero__media { order: 2; position: relative; inset: auto; }
  .about-hero__media::after { content: none; }
  .about-hero__photo { height: auto; aspect-ratio: 4 / 3; object-position: center; }
  .about-hero__seal { width: 6rem; height: 6rem; bottom: calc(var(--wave-height, 3rem) + 1rem); }
  .about-hero__seal .seal__text strong { font-size: 1.2rem; }
  .about-hero__seal .seal__text small { font-size: .62rem; }
}
@media (max-width: 760px) {
  .stats__grid--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .stats__grid--8 .stat__label { font-size: .82rem; }
  .expertise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* single column: line on the left, every card to its right */
  .timeline__line { left: .75rem; }
  .timeline__list { gap: 2rem; }
  .timeline__item { grid-template-columns: 1fr; padding-left: 2.9rem; }
  .timeline__item:nth-child(odd)  .timeline__card,
  .timeline__item:nth-child(even) .timeline__card { grid-column: 1; justify-self: start; text-align: left; max-width: none; }
  .timeline__dot { left: .75rem; }
}
@media (max-width: 520px) {
  .wert { grid-template-columns: 1fr; }
  /* phones: one department per row, icon beside the name — the long
     "Qualitätsmanagement und Kundenservice" no longer breaks mid-word */
  .expertise-grid { grid-template-columns: 1fr; gap: .8rem; }
  .expertise-tile { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; min-height: 0; padding: 1rem 1.2rem; }
  .expertise-tile .card__icon { margin-bottom: 0; flex: none; }
  .expertise-tile__name { font-size: 1.1rem; }
}

/* === COOKIE CONSENT (js/consent.js) ===
   A floating card on the site's lavender/ink/pink palette with the same pill
   buttons. "Nur notwendige" and "Alle akzeptieren" share size and weight —
   refusing must be as easy as agreeing. */
.cc-banner {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 900;
  width: min(46rem, calc(100% - 2rem));
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--card-lav) 70%, transparent);
  border-radius: 1.75rem;
  box-shadow: 0 1.75rem 3.5rem -1.5rem rgba(40, 28, 70, .45);
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.55;
  opacity: 0;
  transform: translate(-50%, 1.5rem);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.cc-banner.is-visible { opacity: 1; transform: translate(-50%, 0); }
/* pink edge accent, like the site's section lines */
.cc-banner::before {
  content: '';
  position: absolute;
  left: 1.75rem; right: 1.75rem; top: -1px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--pink), var(--teal));
}
.cc-banner__text { flex: 1 1 auto; min-width: 0; }
.cc-banner p { margin: 0; }
.cc-title {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: .3rem !important;
}
.cc-banner a,
.cc-dialog a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; }
.cc-banner a:hover,
.cc-dialog a:hover { color: var(--pink); }

.cc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; }
.cc-banner .cc-actions .cc-btn--ink,
.cc-banner .cc-actions .cc-btn--pink { flex: 1 1 11rem; }
.cc-banner .cc-btn--settings { margin-right: auto; }
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: .8rem 1.4rem;
  border-radius: 62.4375rem;
  border: 2px solid transparent;
  font-family: var(--disp);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.cc-btn:hover { transform: translateY(-2px); }
.cc-btn:focus-visible,
.cc-switch:focus-visible,
.cc-close:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.cc-btn--ink  { background: var(--ink); color: #fff; }
.cc-btn--ink:hover { background: #000; }
.cc-btn--pink { background: var(--pink); color: #fff; }
.cc-btn--pink:hover { background: #e8306f; }
.cc-btn--settings { background: transparent; color: var(--ink); border-color: var(--card-lav); }
.cc-btn--settings:hover { border-color: var(--pink); }

/* settings dialog */
.cc-dialog {
  width: min(40rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto; /* the global reset zeroes it — restore native centring */
  padding: 0;
  border: 0;
  border-radius: 1.75rem;
  background: #fff;
  color: var(--ink-soft);
  box-shadow: 0 2rem 4rem -1.5rem rgba(40, 28, 70, .5);
  overflow: auto;
}
.cc-dialog::backdrop { background: rgba(40, 28, 70, .35); backdrop-filter: blur(3px); }
.cc-dialog__inner { position: relative; padding: clamp(1.5rem, 4vw, 2.25rem); font-size: .92rem; line-height: 1.55; }
.cc-dialog .eyebrow { margin-bottom: .35rem; }
.cc-dialog__title { font-family: var(--disp); font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.75rem); color: var(--ink); margin: 0 0 .6rem; }
.cc-dialog__lead { margin: 0 0 1.25rem; }
.cc-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--lav);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .25s ease;
}
.cc-close:hover { background: var(--hover-rose); }
.cc-close svg { width: 1.1rem; height: 1.1rem; }

.cc-cat {
  padding: 1rem 1.15rem;
  margin-bottom: .625rem;
  border-radius: 1.125rem;
  background: var(--lav);
}
.cc-cat p { margin: .35rem 0 0; font-size: .85rem; }
.cc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cc-cat__title { font-family: var(--disp); font-weight: 700; color: var(--ink); }
.cc-cat__always { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* toggle switch */
.cc-switch {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 2.875rem; height: 1.625rem;
  margin: 0;
  border-radius: 62.4375rem;
  background: #cfc9dd;
  cursor: pointer;
  transition: background-color .25s ease;
}
.cc-switch::after {
  content: '';
  position: absolute;
  top: .1875rem; left: .1875rem;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform .25s ease;
}
.cc-switch:checked { background: var(--pink); }
.cc-switch:checked::after { transform: translateX(1.25rem); }

.cc-actions--dialog { margin-top: 1.25rem; }
.cc-actions--dialog .cc-btn { flex: 1 1 auto; }

/* footer trigger — looks like the Impressum/Datenschutz links next to it */
.footer__cookie { font: inherit; color: inherit; padding: 0; cursor: pointer; }
.footer__cookie:hover { color: var(--pink); }

@media (max-width: 600px) {
  .cc-banner .cc-btn--settings { order: 3; flex: 1 1 100%; margin-right: 0; }
}
@media (max-width: 480px) {
  .cc-banner { font-size: .84rem; }
  .cc-actions--dialog .cc-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-banner, .cc-btn, .cc-switch, .cc-switch::after { transition: none; }
}

/* === PRODUKTE SUBPAGE (produkte.html) === */
/* head reuses .marken-hero; catalogue sits on the same mint surface as the
   Marken grid. Product photos are low-res feed images (max 320px), so they are
   kept small inside a white tile instead of filling it. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.produkte { --section-bg: #ddeae7; padding-top: 0; }
.produkte + .cta { --section-bg: #ffffff; }

.produkte-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.4rem;
}
.produkte-search {
  position: relative;
  width: min(100%, 32rem);
}
.produkte-search svg {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  width: 1.15rem;
  height: 1.15rem;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.produkte-search input {
  width: 100%;
  padding: .9rem 1.2rem .9rem 2.9rem;
  border: 2px solid transparent;
  border-radius: 62.4375rem;
  background: #fff;
  box-shadow: var(--shadow-soft);
  font-weight: 600;
  color: var(--ink);
}
.produkte-search input::placeholder { color: var(--muted); font-weight: 500; }
.produkte-search input:focus { outline: none; border-color: var(--turq); }

.produkte-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.produkte-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .95rem;
  border-radius: 62.4375rem;
  background: #fff;
  font-family: var(--disp);
  font-weight: 600;
  font-size: .82rem;
  color: var(--ink);
  transition: background-color .2s ease, color .2s ease;
}
.produkte-chip:hover { background: var(--hover-rose); }
.produkte-chip:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.produkte-chip[aria-pressed="true"] { background: var(--pink); color: #fff; }
.produkte-chip__n { font-size: .72rem; opacity: .6; }

.produkte-count {
  text-align: center;
  font-family: var(--disp);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.6rem;
}

.produkte-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.produkt {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.34, 1.4, .64, 1);
}
.produkt:hover { transform: translateY(-.25rem); }
.produkt__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10rem;
  padding: 1.1rem;
}
.produkt__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply; /* white JPEG backgrounds melt into the tile */
}
.produkt__pfand {
  position: absolute;
  top: .7rem;
  right: .7rem;
  padding: .15rem .55rem;
  border-radius: 62.4375rem;
  background: var(--lime);
  font-family: var(--disp);
  font-weight: 700;
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.produkt__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: .9rem 1.1rem 1.1rem;
  border-top: 1px solid #efedf4;
}
.produkt__brand {
  font-family: var(--disp);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--turq);
  margin-bottom: .3rem;
}
.produkt__title {
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: .3rem;
}
.produkt__sub {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.35;
}
.produkt__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: auto;
  padding-top: .8rem;
}
.produkt__sizes li {
  padding: .18rem .55rem;
  border-radius: 62.4375rem;
  background: #f1eff6;
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.produkte-empty { text-align: center; color: var(--muted); padding: 2rem 0; }
.produkte-empty a { color: var(--pink); text-decoration: underline; }
.produkte-more { display: flex; justify-content: center; margin-top: 2.2rem; }
.produkte-more .btn[hidden] { display: none; }

@media (max-width: 560px) {
  .produkte-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .produkt { border-radius: 1.1rem; }
  .produkt__media { height: 7.5rem; padding: .8rem; }
  .produkt__body { padding: .75rem .8rem .9rem; }
  .produkt__title { font-size: .86rem; }
  /* chips scroll sideways instead of stacking five rows above the grid */
  .produkte-filter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: calc(100% + 2 * clamp(1.25rem, 5vw, 3rem));
    margin-inline: calc(-1 * clamp(1.25rem, 5vw, 3rem));
    padding-inline: clamp(1.25rem, 5vw, 3rem);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .produkte-filter::-webkit-scrollbar { display: none; }
  .produkte-chip { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .produkt { transition: none; }
}