/* calocake.de, site.css. Tokens nach design/DIRECTION.md Abschnitt 2. */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light; /* Chako 26.09.2026: Seite immer weiss, kein Dark Scheme */

  --canvas: #ffffff;
  --canvas: light-dark(oklch(100% 0 0), oklch(15% 0.005 280));
  --parchment: #f4f5f7;
  --parchment: light-dark(oklch(96.9% 0.003 264), oklch(19.5% 0.005 280));
  --tile-dark: #1c1d20;
  --tile-dark: light-dark(oklch(23% 0.006 280), oklch(10% 0.004 280));
  --ink: #1a1a1d;
  --ink: light-dark(oklch(22% 0.006 280), oklch(96% 0.004 280));
  --ink-muted: #5c5d63;
  --ink-muted: light-dark(oklch(48% 0.010 280), oklch(74% 0.008 280));
  --on-dark: #f5f5f7;
  --on-dark: oklch(97% 0.003 280);
  --on-dark-muted: #b6b7bb;
  --on-dark-muted: oklch(78% 0.006 280);
  --hairline: rgba(26, 26, 29, 0.12);
  --hairline: color-mix(in oklch, var(--ink) 12%, transparent);
  --hairline-on-dark: rgba(245, 245, 247, 0.16);
  --hairline-on-dark: color-mix(in oklch, var(--on-dark) 16%, transparent);
  --accent: #00ab92;
  --accent: light-dark(oklch(66.3% 0.123 177.3), oklch(72% 0.12 177));
  --accent-strong: #008673;
  --accent-strong: oklch(55.5% 0.102 178.1);
  /* Teal als Text, Rand und Fokusring: Light 4,5:1 auf canvas, Dark-Wert 72 % L (Ghost-Pills, Links, Fokus). Fuellung der Pill bleibt --accent-strong. */
  --link: #008673;
  --link: light-dark(oklch(55.5% 0.102 178.1), oklch(72% 0.12 177));
  --accent-deep: #006b59; /* Ghost-Pill-Text im Hover auf --accent-tint: 5,9:1 */
  --accent-deep: light-dark(oklch(48% 0.1 178), oklch(80% 0.12 177));
  --accent-tint: #eaf8f5;
  --accent-tint: light-dark(oklch(96.8% 0.015 181.8), oklch(24% 0.03 180));
  --brand-brown: #724c27;
  --brand-brown: light-dark(oklch(45.1% 0.073 63.3), oklch(78% 0.06 70));
  --flavor-cookies: #f7e9d6;
  --flavor-cookies: light-dark(oklch(94% 0.03 75), oklch(30% 0.035 72));
  --flavor-schokolade: #f5e4d8;
  --flavor-schokolade: light-dark(oklch(93% 0.025 60), oklch(27% 0.03 58));
  --flavor-apfelstrudel: #ffe4e2;
  --flavor-apfelstrudel: light-dark(oklch(94% 0.03 22), oklch(29% 0.045 22));
  --flavor-haferkraft: #f8eed5;
  --flavor-haferkraft: light-dark(oklch(95% 0.035 90), oklch(32% 0.05 88));
  --flavor-cookies-accent: #a67839;
  --flavor-schokolade-accent: #865c34;
  --flavor-apfelstrudel-accent: #ea5b61;
  --flavor-haferkraft-accent: #e9bc47;
  --gold-light: rgba(243, 196, 67, 0.36);
  --gold-light: oklch(84% 0.15 88 / 0.36);
  --error: #be2323;
  --error: light-dark(oklch(52% 0.19 27), oklch(78% 0.16 27));
  --shadow-product: drop-shadow(0 18px 24px rgba(74, 56, 36, 0.22));
  --shadow-product: drop-shadow(0 18px 24px light-dark(oklch(25% 0.03 65 / 0.22), oklch(0% 0 0 / 0.55)));

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 80px; --s-10: 96px;
  --gutter: 32px;
  --tile-pad: 80px;
  --nav-h: 52px;

  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 120ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  --fs-h1: 56px; --fs-h2: 40px; --fs-h3: 24px; --fs-lead: 24px; --fs-lead-airy: 22px;
  --stage-h: 440px;
  --stage-crop: 1;
}

@property --r {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 130%;
}

@media (max-width: 1023px) {
  :root { --fs-h1: 44px; --fs-h2: 36px; --fs-h3: 22px; --fs-lead: 22px; --fs-lead-airy: 20px; }
}
@media (max-width: 749px) {
  :root {
    --gutter: 16px; --tile-pad: 48px;
    --fs-h1: 32px; --fs-h2: 30px; --fs-h3: 21px; --fs-lead: 19px; --fs-lead-airy: 18px;
    --stage-h: 320px;
  }
}

/* ---------- 2. Basis ---------- */
*, ::before, ::after { box-sizing: border-box; }
html {
  font-family: "Geist", "Geist Fallback", system-ui, sans-serif;
  font-optical-sizing: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
  -webkit-text-size-adjust: 100%;
  background: var(--canvas);
  caret-color: var(--accent);
  accent-color: var(--accent);
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  overflow-x: clip;
}
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
picture img { width: 100%; }
h1, h2, h3, p, dl, dd, dt, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 600; }
::selection { background: var(--accent-tint); color: var(--ink); }
/* Fokusring in --link (WCAG 1.4.11, 3:1): canvas 4,5, parchment 4,1, Cookies-Flaeche 3,8; auf dunklen Tiles der 72-%-Teal. */
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.tile--dark :focus-visible { outline-color: oklch(72% 0.12 177); }
.num, .price, table, .monument, .pzn__num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
time { font-variant-numeric: tabular-nums; }

[hidden] { display: none !important; }
html.has-bar { scroll-padding-bottom: 80px; }
html.has-bar body { padding-bottom: 80px; background: var(--parchment); }
@media (max-width: 480px) {
  html.has-bar { scroll-padding-bottom: 96px; }
  html.has-bar body { padding-bottom: 96px; }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.is-hidden { display: none !important; }
.nowrap { white-space: nowrap; }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  padding: 12px 22px; border-radius: 9999px;
  background: var(--accent-strong); color: #fff; font-weight: 600; text-decoration: none;
}
.skip:focus-visible { top: 8px; }

/* ---------- 3. Typo ---------- */
.h1 { font-size: var(--fs-h1); font-weight: 600; line-height: 1.07; letter-spacing: -0.02em; text-wrap: balance; }
.h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; margin-bottom: var(--s-4); }
.h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.lead { font-size: var(--fs-lead); font-weight: 400; line-height: 1.3; letter-spacing: 0; text-wrap: pretty; }
.lead-airy { font-size: var(--fs-lead-airy); font-weight: 300; line-height: 1.4; letter-spacing: 0; }
.body { font-size: 17px; line-height: 1.47; max-width: 68ch; }
.caption { font-size: 14px; line-height: 1.43; letter-spacing: 0; }
.fine { font-size: 12px; line-height: 1.4; letter-spacing: 0; }
.muted { color: var(--ink-muted); }
.tile--dark .muted { color: var(--on-dark-muted); }
.stack > * + * { margin-top: var(--s-4); }
.stack > .h2 + * { margin-top: 0; }
.stack > * + .h2 { margin-top: var(--s-6); }

/* ---------- 4. Layout ---------- */
.container {
  width: 100%;
  max-width: calc(1280px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.tile { padding-block: var(--tile-pad); }
.tile--canvas { background: var(--canvas); color: var(--ink); }
.tile--parchment { background: var(--parchment); color: var(--ink); }
.tile--dark { background: var(--tile-dark); color: var(--on-dark); }
/* Dunkle Tiles sind in beiden Schemas dunkel: Fehlerfarbe immer der helle Wert (7,4:1 auf tile-dark). */
.tile--dark { --error: #ff8b7e; --error: oklch(78% 0.16 27); }
.tile--dark a { color: var(--accent); }
.tile--parchment a:not(.pill), .sorten a:not(.pill) { color: var(--ink); }
.col-text { max-width: 68ch; }
.grid { display: grid; gap: var(--s-6); }

/* ---------- 5. Komponenten: Pill, Ghost, Chip ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: 9999px; border: 1px solid var(--accent-strong);
  background: var(--accent-strong); color: #fff;
  font-size: 17px; font-weight: 600; line-height: 1; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur);
}
.pill:hover { background: color-mix(in oklch, var(--accent-strong), black 8%); border-color: color-mix(in oklch, var(--accent-strong), black 8%); text-decoration: none; }
.pill:active { transform: scale(.96); }
.pill[aria-busy="true"] { pointer-events: none; }
.pill--ghost { background: transparent; color: var(--link); border-color: var(--link); }
.pill--ghost:hover { background: var(--accent-tint); color: var(--accent-deep); border-color: var(--accent-deep); }
.tile--dark .pill--ghost { color: var(--on-dark); border-color: var(--on-dark); }
.tile--dark .pill--ghost:hover { background: color-mix(in oklch, var(--on-dark) 10%, transparent); }
.pill--sm { height: 40px; font-size: 15px; padding: 0 16px; }
.pill--block { width: 100%; height: 48px; }

.chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-block: 4px; /* Platz fuer die 48-px-Trefferflaeche der Chips (::after), sonst clippt overflow-x */
  scrollbar-width: thin; scrollbar-color: var(--hairline) transparent;
}
.chip {
  position: relative;
  flex: none; height: 40px; padding: 0 16px; border-radius: 9999px;
  border: 2px solid transparent; background: var(--parchment); color: var(--ink);
  font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  scroll-snap-align: start;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
/* Trefferflaeche 48 px hoch ohne Optikaenderung (Padding-Box 36 + 2 x 6; Ziel >= 44). */
.chip::after { content: ""; position: absolute; inset: -6px 0; }
.tile--parchment .chip { background: color-mix(in oklch, var(--ink) 6%, transparent); }
/* Dark: inaktive Chips loesen sich vom Konfigurator-Grund (oklch 15 %) ab. */
.konf .chip { background: light-dark(var(--parchment), color-mix(in oklch, var(--ink) 10%, transparent)); }
.chip:hover { background: var(--canvas); }
.chip[aria-selected="true"] { background: var(--canvas); border-color: var(--chip-ring, var(--accent)); }
.chip[data-flavor="cookies"] { --chip-ring: var(--flavor-cookies-accent); }
.chip[data-flavor="schokolade"] { --chip-ring: var(--flavor-schokolade-accent); }
/* Ring-Tokens Apfel/Hafer dunkler als die Sortenakzente (aktiver Chip auf weiss: 4,4:1 / 3,4:1); Flaechen-Tokens unveraendert. */
.chip[data-flavor="apfelstrudel"] { --chip-ring: #d0343f; --chip-ring: oklch(58% 0.19 22); }
.chip[data-flavor="haferkraft"] { --chip-ring: #a37f00; --chip-ring: oklch(60% 0.13 88); }
.chip[aria-disabled="true"] { opacity: .5; cursor: default; }
@media (max-width: 749px) {
  .chips {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding-bottom: 6px; margin-bottom: -6px;
  }
}
/* Rechter Fade als Scroll-Affordanz; verschwindet am Reihenende (Maske wandert mit dem Scroll, kein JS). */
@supports (animation-timeline: scroll()) {
  @media (max-width: 749px) {
    .chips {
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
      mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
      -webkit-mask-size: calc(100% + 24px) 100%; mask-size: calc(100% + 24px) 100%;
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      animation: chips-fade linear both; animation-timeline: scroll(self inline);
    }
    @keyframes chips-fade { from { -webkit-mask-position: -24px 0; mask-position: -24px 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
  }
}

/* ---------- 6. Sub-Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: var(--parchment);
  background: color-mix(in oklch, var(--parchment) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
@supports not (backdrop-filter: blur(1px)) { .nav { background: var(--parchment); } }
@media (prefers-reduced-transparency: reduce) { .nav, .tray { background: var(--parchment); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav__inner { display: flex; align-items: center; height: var(--nav-h); gap: var(--s-7); }
.nav__logo { display: block; flex: none; }
.nav__logo img { width: 157px; height: 22px; }
.nav__links { display: none; }
.nav__menu { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; margin-left: calc(-1 * var(--s-5)); color: var(--ink); }
.nav__menu svg { width: 24px; height: 24px; }
.nav__menu .ico-x, .nav__menu[aria-expanded="true"] .ico-list { display: none; }
.nav__menu[aria-expanded="true"] .ico-x { display: block; }
.nav__cta { margin-left: auto; transition: opacity 200ms var(--ease-out), visibility 200ms; }
.nav__cta.is-off { visibility: hidden; opacity: 0; }
.tray {
  position: absolute; left: 0; right: 0; top: 100%; width: 100%;
  background: var(--parchment);
  background: color-mix(in oklch, var(--parchment) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.tray a { display: flex; align-items: center; height: 48px; padding-inline: var(--gutter); font-size: 17px; color: var(--ink); text-decoration: none; }
.tray a:hover { text-decoration: underline; }
@media (min-width: 1024px) {
  .nav__menu, .tray { display: none !important; }
  .nav__links { display: flex; gap: var(--s-5); margin-inline: auto; }
  .nav__links a { font-size: 14px; line-height: 1; letter-spacing: 0; color: var(--ink); text-decoration: none; padding: 4px 0; }
  .nav__links a:hover { text-decoration: underline; }
  .nav__links a.is-active { font-weight: 600; }
}
@media (max-width: 1023px) {
  .nav__inner { gap: var(--s-4); }
  .nav__logo img { width: 143px; height: 20px; }
}
/* < 400 px: Wortmarke 129 + Gap 8 + Menue (44 - 16 Margin) + Gap 8 + Pill 152 = 325 <= 328 (360er Inhaltsbreite);
   Menue-Button bleibt 44 x 44, das 24-px-Icon beginnt 2 px rechts der Wortmarke. */
@media (max-width: 399px) {
  .nav__inner { gap: var(--s-2); }
  .nav__logo img { width: 129px; height: 18px; }
  .nav__menu { margin-left: calc(-1 * var(--s-4)); }
}

/* ---------- 7. Kaufleiste ---------- */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  min-height: 64px; padding-block: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
  background: var(--parchment); color: var(--ink); border-top: 1px solid var(--hairline);
  transform: translateY(100%); opacity: 0; visibility: hidden;
  transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out), visibility 320ms;
}
.bar.is-on { transform: none; opacity: 1; visibility: visible; }
/* Hoehe waechst mit dem Text (Versandhinweis, Font-Fallback), nie unter 64/72 px; Ein-/Ausblenden bleibt reines Transform. */
.bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 52px; }
.bar__state { display: none; min-width: 0; }
:root[data-flavor="cookies"] .bar__state[data-state="cookies"],
:root[data-flavor="apfelstrudel"] .bar__state[data-state="apfelstrudel"],
:root[data-flavor="schokolade"] .bar__state[data-state="schokolade"],
:root[data-flavor="haferkraft"] .bar__state[data-state="haferkraft"] { display: block; }
.bar__l1 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.bar__l2 { font-size: 14px; line-height: 1.3; }
.bar__m { display: none; }
.bar .pill { flex: none; }
/* Kaufleisten-Pill: Trefferflaeche 48 px (Padding-Box 38 + 2 x 5), Optik bleibt 40 px. */
.bar .pill--sm { position: relative; }
.bar .pill--sm::after { content: ""; position: absolute; inset: -5px 0; }
@media (max-width: 599px) {
  .bar__gp { display: none; } /* das Wort "Grundpreis" entfaellt nur mobil, die Einheit €/kg bleibt (DIRECTION 3.2) */
}
@media (max-width: 480px) {
  .bar { min-height: 72px; }
  .bar__inner { min-height: 60px; }
  .bar__l1, .bar__l2 { display: none; }
  .bar__m { display: block; font-size: 14px; line-height: 18px; }
  .bar__m1 { font-weight: 600; }
  .bar .pill--sm { padding: 0 14px; }
}

/* ---------- 8. S1 Hero ---------- */
.hero { min-height: min(calc(100dvh - var(--nav-h)), 720px); display: grid; align-items: center; padding-block: var(--s-6) var(--s-9); }
.hero__grid { display: grid; gap: var(--s-6); align-items: center; }
.hero__text { display: grid; }
.hero__text .h1 { margin-bottom: var(--s-4); }
.hero__text .lead { margin-bottom: var(--s-6); }
.hero__cta { justify-self: start; margin-bottom: var(--s-3); }
.hero__media { aspect-ratio: 16 / 9; overflow: hidden; display: grid; }
.hero__media picture { height: 100%; min-height: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 1024px) {
  /* Zentrierung bleibt, die Leere ueber der H1 waechst aber nicht mit dem Monitor (Deckel 800 px). */
  .hero { min-height: min(calc(100dvh - var(--nav-h)), 800px); padding-top: var(--s-10); container-type: inline-size; }
  .hero__grid { grid-template-columns: 5fr 7fr; gap: var(--s-6); }
  /* Bild darf bis 80 px in den rechten Rand laufen, nie ueber den Viewport (cqw = Breite ohne Scrollbar). */
  .hero__media { margin-right: calc(-1 * clamp(0px, (100cqw - 1280px) / 2, 80px)); }
  .hero__text .caption { max-width: 511px; }
}
@media (max-width: 1023px) {
  .hero { min-height: 0; padding-top: var(--s-4); }
  .hero__media { order: -1; }
  .hero__text .h1 { margin-top: var(--s-5); }
  .hero__text .lead { margin-bottom: var(--s-5); }
  .hero__cta { width: 100%; height: 48px; margin-bottom: 10px; }
  .hero__text .h1 { margin-bottom: var(--s-3); }
}

/* ---------- 9. S3 Monument ---------- */
.monu { text-align: center; }
.monu__inner { max-width: 60ch; margin-inline: auto; }
.monument { display: inline-flex; align-items: baseline; gap: .12em; font-size: clamp(96px, 12vw, 160px); font-weight: 600; line-height: .95; letter-spacing: -0.04em; }
.monument__unit { font-size: 24px; font-weight: 300; line-height: 1; letter-spacing: 0; }
.monu__caption { margin-top: var(--s-3); color: var(--on-dark-muted); }
.monu .h2 { margin-top: var(--s-6); }
.monu__foot { margin-top: var(--s-5); color: var(--on-dark-muted); }
.monu .body { margin-inline: auto; }
@media (max-width: 749px) {
  .monu { text-align: left; }
  .monument { font-size: 104px; }
  .monu .body { margin-inline: 0; }
}

/* ---------- 10. S4 Sorten ---------- */
.sorten { background: var(--flavor-cookies); color: var(--ink); padding-bottom: 0; transition: background-color var(--dur-slow) var(--ease-out); }
:root[data-flavor="schokolade"] .sorten { background: var(--flavor-schokolade); }
:root[data-flavor="apfelstrudel"] .sorten { background: var(--flavor-apfelstrudel); }
:root[data-flavor="haferkraft"] .sorten { background: var(--flavor-haferkraft); }
.sorten__head { margin-bottom: var(--s-6); }
.stage { position: relative; height: var(--stage-h); overflow: hidden; }
.stage__status { position: absolute; left: 0; right: 0; top: var(--s-6); z-index: 2; }
.stage__kcal { display: none; font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; }
/* Mischung in oklab (nicht oklch): oklch nimmt den kuerzeren Hue-Bogen 280 -> 70 ueber 360 und kippt ins Mauve. */
.stage__cap { color: color-mix(in oklab, var(--ink) 70%, var(--flavor-cookies-accent)); }
:root[data-flavor="schokolade"] .stage__cap { color: color-mix(in oklab, var(--ink) 70%, var(--flavor-schokolade-accent)); }
:root[data-flavor="apfelstrudel"] .stage__cap { color: color-mix(in oklab, var(--ink) 70%, var(--flavor-apfelstrudel-accent)); }
:root[data-flavor="haferkraft"] .stage__cap { color: color-mix(in oklab, var(--ink) 70%, var(--flavor-haferkraft-accent)); }
:root[data-flavor="cookies"] .stage__kcal[data-for="cookies"],
:root[data-flavor="schokolade"] .stage__kcal[data-for="schokolade"],
:root[data-flavor="apfelstrudel"] .stage__kcal[data-for="apfelstrudel"],
:root[data-flavor="haferkraft"] .stage__kcal[data-for="haferkraft"] { display: block; }
.stage__cap[data-for="haferkraft"] { display: none; }
:root[data-flavor="haferkraft"] .stage__cap[data-for="sorte"] { display: none; }
:root[data-flavor="haferkraft"] .stage__cap[data-for="haferkraft"] { display: block; }
.stage__frame {
  position: absolute; left: 50%; bottom: 0; width: 1000px; max-width: 82%;
  transform: translateX(-50%); display: grid; align-items: end;
}
.stage__frame picture { grid-area: 1 / 1; opacity: 0; transition: opacity 300ms var(--ease-out); }
.stage__frame picture.is-active { opacity: 1; view-transition-name: flavor-stage; }
::view-transition-old(flavor-stage), ::view-transition-new(flavor-stage) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }
/* Nur der Stage-Frame blendet ueber; die Seite selbst wechselt sofort (Tile-Farbe laeuft als CSS-Transition). */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.is-vt .stage__frame picture { transition: none; }
@media (max-width: 749px) {
  /* 125 % Breite, mittig: sichtbar ist x 0,1 bis 0,9 des Ausschnitts (Icon, Wortmarke, Sortenname, Motivanfang). */
  .stage__frame { width: 125%; max-width: none; transform: translateX(-50%); }
}
.konf { background: var(--canvas); color: var(--ink); padding-block: var(--s-7); }
.konf .chips { margin-bottom: var(--s-6); }
.konf__panel { display: none; gap: var(--s-6); }
:root[data-flavor="cookies"] .konf__panel[data-panel="cookies"],
:root[data-flavor="schokolade"] .konf__panel[data-panel="schokolade"],
:root[data-flavor="apfelstrudel"] .konf__panel[data-panel="apfelstrudel"],
:root[data-flavor="haferkraft"] .konf__panel[data-panel="haferkraft"] { display: grid; }
@media (min-width: 1024px) { .konf__panel { grid-template-columns: 1fr 1fr; } }
.konf__data .h3 { margin-bottom: var(--s-4); }
.dl > div { display: grid; grid-template-columns: 11ch 1fr; gap: var(--s-2) var(--s-4); padding: 6px 0; }
.dl dt { font-weight: 600; }
.dl dd { max-width: 52ch; }
.konf__data .link { display: inline-block; margin-top: var(--s-4); }
.konf__price { display: grid; align-content: start; gap: var(--s-2); }
.price { font-size: 17px; font-weight: 600; }
.price .caption { font-weight: 400; }
.konf__price .pill { justify-self: start; margin-top: var(--s-3); }
.konf__single { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-2); }
.konf__single .caption { flex: 1 1 200px; max-width: 34ch; }
.konf__soldout { font-weight: 600; margin-top: var(--s-3); }
.konf__price .fine { margin-top: var(--s-2); }
.konf__panel > * { min-width: 0; }
@media (max-width: 1023px) {
  .konf__price .pill, .konf__single .pill { width: 100%; height: 48px; }
  .konf__single { display: grid; }
  .konf__single .caption { max-width: none; }
  .dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- 11. S5 Box ---------- */
.box { text-align: center; }
.box .body { margin-inline: auto; max-width: 60ch; margin-bottom: var(--s-7); }
.anat { position: relative; max-width: 1000px; margin-inline: auto; overflow: clip; }
.anat__img { width: 640px; max-width: 100%; margin-inline: auto; }
.anat__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
/* Bei non-scaling-stroke rechnet Chromium die Dash-Laenge in Bildschirm-Pixeln (pathLength greift nicht):
   600 px deckt jede Linie (max. ca. 300 px bei 1440), Ergebnis ist eine durchgezogene Haarlinie. */
.anat__lines line { stroke: var(--ink); stroke-opacity: .55; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 600; stroke-dashoffset: 0; }
.callouts { display: grid; gap: var(--s-3); margin-top: var(--s-5); text-align: left; max-width: 320px; margin-inline: auto; }
.callout b { font-size: 17px; font-weight: 600; }
.callout span { font-size: 14px; letter-spacing: 0; color: var(--ink-muted); }
.callout b, .callout span { display: block; }
@media (min-width: 768px) {
  .anat__lines { display: block; }
  .callouts { display: contents; }
  .callout { position: absolute; width: 180px; }
  .callout--preis { left: 0; top: 8%; }
  .callout--riegel { right: 0; top: 40%; text-align: right; }
  .callout--grundpreis { left: 0; top: 66%; }
}
.box__caption { margin-top: var(--s-4); }
/* Ausverkauft-Hinweis im Schokolade-Zustand direkt unter H2 und Body (Call-outs zeigen weiter die Box). */
.box .box__note { margin: calc(-1 * var(--s-5)) auto var(--s-7); max-width: 60ch; font-weight: 600; }
.box__cta { display: grid; justify-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.box__cta .pill { display: none; }
:root[data-flavor="cookies"] .box__cta .pill[data-for="cookies"],
:root[data-flavor="apfelstrudel"] .box__cta .pill[data-for="apfelstrudel"],
:root[data-flavor="schokolade"] .box__cta .pill[data-for="schokolade"],
:root[data-flavor="haferkraft"] .box__cta .pill[data-for="haferkraft"] { display: inline-flex; }
.box [data-only] { display: none; }
:root[data-flavor="schokolade"] .box [data-only="schokolade"] { display: block; }
:root:not([data-flavor="schokolade"]):not([data-flavor="haferkraft"]) .box [data-only="std"] { display: block; }
:root[data-flavor="haferkraft"] .box [data-only="haferkraft"] { display: block; }
@media (max-width: 767px) {
  .box__cta .pill { width: 100%; height: 48px; }
  /* Mobil stehen die Call-outs linksbuendig: die Bildunterschrift folgt derselben Kante. */
  .box__caption { text-align: left; max-width: 320px; margin-inline: auto; }
}

/* ---------- 12. S6 Apotheke ---------- */
.apo__grid { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .apo__grid { grid-template-columns: 7fr 5fr; align-items: start; } }
.apo .body { margin-bottom: var(--s-6); }
.pzn { border-top: 1px solid var(--hairline); margin-bottom: var(--s-6); }
.pzn__row { display: flex; align-items: center; gap: var(--s-4); min-height: 56px; border-bottom: 1px solid var(--hairline); flex-wrap: nowrap; }
.pzn__name { flex: 1 1 auto; min-width: 0; }
.pzn__num { flex: none; font-weight: 600; }
.pzn__row .pill { flex: none; height: 44px; padding: 0 16px 0 12px; font-size: 15px; }
.pzn__row .pill svg { width: 20px; height: 20px; }
@media (max-width: 1023px) {
  /* Sorte und PZN untereinander, Copy-Button rechts ueber beide Zeilen. */
  .pzn__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name btn" "num btn"; column-gap: var(--s-4); row-gap: 2px; padding-block: 10px; }
  .pzn__name { grid-area: name; }
  .pzn__num { grid-area: num; }
  .pzn__row .pill { grid-area: btn; align-self: center; }
}
@media (max-width: 749px) {
  .pzn__row .pill { padding: 0 12px; }
}
.apo__abgr { margin-bottom: var(--s-5); }
.apo__media { aspect-ratio: 3 / 2; max-width: 640px; display: grid; overflow: hidden; }
.apo__media picture { height: 100%; min-height: 0; }
.apo__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .apo__media { max-width: none; } .apo .pill--ghost { width: 100%; height: 48px; } }

/* ---------- 13. S7 Haferkraft ---------- */
.hafer { position: relative; overflow: hidden; padding-bottom: 0; }
.hafer__inner { max-width: 60ch; margin-inline: auto; text-align: center; }
.hafer .h2 { margin-bottom: var(--s-4); }
.hafer__pflicht { margin-top: var(--s-4); }
.hafer__stage { position: relative; width: 720px; max-width: 100%; margin: var(--s-7) auto 0; }
.hafer__light {
  position: absolute; left: 50%; top: 60%; width: 130%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--gold-light) 0%, transparent 70%);
  opacity: .85; pointer-events: none;
}
.hafer__pic {
  position: relative; display: block;
  -webkit-mask-image: radial-gradient(circle at 42% 60%, #000 var(--r), transparent calc(var(--r) + 18%));
  mask-image: radial-gradient(circle at 42% 60%, #000 var(--r), transparent calc(var(--r) + 18%));
}
@media (max-width: 749px) {
  .hafer__inner { text-align: left; }
  .hafer__stage { width: 110%; max-width: none; transform: translateX(-5%); }
}

/* Formular */
.notify { max-width: 480px; margin: var(--s-6) auto 0; text-align: left; }
[data-form-state="preview"] .notify, .notify[data-form-state="preview"] { text-align: center; }
.notify__label { display: block; font-size: 14px; letter-spacing: 0; color: var(--on-dark-muted); margin-bottom: 8px; }
.notify__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; }
.notify__row > * { min-width: 0; }
.notify input[type="email"] {
  width: 100%; height: 48px; padding: 0 20px; border-radius: 9999px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22);
  color: var(--on-dark); font: inherit; font-size: 17px; min-width: 0;
  transition: border-color var(--dur-fast);
}
.notify input[type="email"]:hover { border-color: rgba(255, 255, 255, .4); }
.notify input[type="email"]:focus-visible { outline-color: oklch(72% 0.12 177); }
.notify input[type="email"]:user-invalid, .notify input[aria-invalid="true"] { border-color: var(--error); }
.notify .pill { height: 48px; }
.notify__consent { margin-top: var(--s-3); color: var(--on-dark-muted); }
.notify__consent a { color: var(--accent); }
/* Live-Regionen bleiben im Rendering-Baum (display: block, leer = 0 px), nur der Text wechselt: so sagen NVDA/JAWS sie zuverlaessig an. */
.notify__msg { display: block; margin-top: 0; }
.notify__msg:not(:empty) { margin-top: var(--s-3); }
.notify__msg[role="alert"] { color: var(--error); }
.notify__msg[role="alert"] a { color: var(--error); }
.notify__ok { display: block; padding: 0; color: var(--ink); border-radius: 0; }
.notify.is-done .notify__row, .notify.is-done .notify__consent, .notify.is-done .notify__label { display: none; }
.notify.is-done .notify__ok { padding: 14px 16px; background: var(--accent-tint); }
.notify__preview { display: none; }
.notify[data-form-state="preview"] .notify__row,
.notify[data-form-state="preview"] .notify__label,
.notify[data-form-state="preview"] .notify__consent { display: none; }
.notify[data-form-state="preview"] .notify__preview { display: block; }
.notify .hp { display: none; }
@media (max-width: 749px) {
  .notify { margin-inline: 0; }
  .notify__row { grid-template-columns: 1fr; }
  .notify .pill { width: 100%; }
  .notify__consent { font-size: 14px; }
}

/* ---------- 14. S8 LMIV ---------- */
.spec__head, .spec .chips, .spec__panel { max-width: 880px; }
.spec__head .body { margin-bottom: var(--s-3); }
.spec__head .caption { margin-bottom: var(--s-5); }
.spec .chips { margin-bottom: var(--s-6); }
.spec__panel { display: none; min-height: 1000px; }
:root[data-lmiv="cookies"] .spec__panel[data-panel="cookies"],
:root[data-lmiv="schokolade"] .spec__panel[data-panel="schokolade"],
:root[data-lmiv="apfelstrudel"] .spec__panel[data-panel="apfelstrudel"] { display: block; }
@supports (transition-behavior: allow-discrete) {
  .spec__panel { transition: opacity 220ms var(--ease-out), display 220ms allow-discrete; opacity: 1; }
  @starting-style { .spec__panel { opacity: 0; } }
}
.spec__panel .h3 { margin-bottom: var(--s-4); }
.spec__zutaten { overflow-wrap: anywhere; max-width: 68ch; }
.spec__zutaten p + p { margin-top: var(--s-2); }
.spec__hint { margin-top: var(--s-2); }
.tbl-wrap { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; margin-top: var(--s-6); }
table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; text-align: left; }
caption { text-align: left; font-weight: 600; padding-bottom: 12px; caption-side: top; }
th, td { padding: 8px 12px 8px 0; vertical-align: top; font-weight: 400; }
thead th { font-weight: 600; padding-bottom: 12px; }
th[scope="col"]:not(:first-child), td { text-align: right; min-width: 120px; padding-right: 0; padding-left: 12px; }
tbody th { position: sticky; left: 0; background: var(--parchment); }
thead th:first-child { position: sticky; left: 0; background: var(--parchment); }
tr.grp > * { border-top: 1px solid var(--hairline); }
tbody tr:last-child > * { border-bottom: 1px solid var(--hairline); }
tr.sub th { padding-left: 16px; }
@media (max-width: 749px) {
  /* Unter 750 px wird jede Tabellenzeile zur Karte: Naehrwert, darunter beide Werte mit Spaltenlabel. Kein Scrollen. */
  .tbl-wrap { overflow: visible; }
  .tbl-wrap table, .tbl-wrap tbody, .tbl-wrap tr, .tbl-wrap th, .tbl-wrap td, .tbl-wrap caption { display: block; }
  /* thead ganz weg (nicht nur visuell): die Spaltenlabel kommen unten ueber data-th, sonst liest der Screenreader sie doppelt. */
  .tbl-wrap thead { display: none; }
  .tbl-wrap tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-3); row-gap: 4px; padding: 10px 0; }
  .tbl-wrap tbody tr.grp { border-top: 1px solid var(--hairline); }
  .tbl-wrap tbody tr.sub { padding-top: 0; }
  .tbl-wrap tbody tr:last-child { border-bottom: 1px solid var(--hairline); }
  .tbl-wrap tbody th, .tbl-wrap tbody td { position: static; padding: 0; border: 0; background: none; min-width: 0; text-align: left; }
  .tbl-wrap tbody th { grid-column: 1 / -1; font-weight: 600; }
  .tbl-wrap tr.sub th { font-weight: 400; padding-left: var(--s-3); }
  .tbl-wrap tr.sub td { padding-left: var(--s-3); }
  .tbl-wrap tbody td::before { content: attr(data-th); display: block; font-size: 12px; line-height: 1.4; color: var(--ink-muted); }
  /* Spaltenlabel nur einmal je Gruppe (Energie, Fett, Kohlenhydrate, Ballaststoffe, Salz), nicht in jeder Unterzeile. */
  .tbl-wrap tbody tr:not(.grp) td::before { display: none; }
}
.spec__foot { margin-top: var(--s-3); }
.spec__common { margin-top: var(--s-6); display: grid; gap: var(--s-2); }
.spec__common .link { justify-self: start; margin-top: var(--s-2); }

/* ---------- 15. S9 FAQ ---------- */
.faq__list { max-width: 720px; }
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 44px; padding: 14px 0; font-size: 17px; font-weight: 600; line-height: 1.47;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--link); }
.faq summary svg { flex: none; width: 24px; height: 24px; color: var(--link); transition: rotate var(--dur) var(--ease-out); }
.faq details[open] summary svg { rotate: 180deg; }
.faq__panel { padding: 0 40px 20px 0; max-width: 68ch; }
@supports (transition-behavior: allow-discrete) {
  .faq__panel { transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out); }
  @starting-style { .faq details[open] .faq__panel { opacity: 0; translate: 0 8px; } }
}

/* ---------- 16. S10 Recht + Footer ---------- */
.recht__grid { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .recht__grid { grid-template-columns: repeat(3, 1fr); } }
.recht .h3 { margin-bottom: var(--s-4); }
.recht p + p, .recht address + p, .recht p + address { margin-top: var(--s-3); }
.recht address { font-style: normal; }
.recht__label { font-weight: 600; display: block; }
.ds details { border-top: 1px solid var(--hairline); }
.ds details:last-of-type { border-bottom: 1px solid var(--hairline); }
.ds summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 44px; padding: 10px 0; font-weight: 600; cursor: pointer; list-style: none; }
.ds summary::-webkit-details-marker { display: none; }
.ds summary svg { flex: none; width: 20px; height: 20px; color: var(--link); transition: rotate var(--dur) var(--ease-out); }
.ds details[open] summary svg { rotate: 180deg; }
.ds .ds__body { padding-bottom: 14px; }
@media (min-width: 1024px) {
  .ds details, .ds details:last-of-type { border: 0; }
  .ds summary { pointer-events: none; padding: 0; min-height: 0; margin-bottom: 4px; }
  .ds summary svg { display: none; }
  .ds details + details { margin-top: var(--s-3); }
  .ds .ds__body { padding-bottom: 0; }
}
.recht__stand { margin-top: var(--s-4); }
.footnote { padding-top: var(--s-4); }
.footer { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--hairline); display: grid; gap: var(--s-5); }
.footer__logo img { width: 143px; height: 20px; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.footer__links a { color: var(--ink); font-size: 14px; letter-spacing: 0; }
@media (max-width: 749px) {
  .footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); }
  .footer__links a { display: flex; align-items: center; min-height: 48px; }
}
/* Tablets (Touch): Footer-Links als 44-px-Tap-Ziele. */
@media (min-width: 750px) and (max-width: 1023px) {
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- 16b. Lange Pill-Labels duerfen unter 750 px umbrechen (nie ueber den Viewport) ---------- */
@media (max-width: 749px) {
  .pill { white-space: normal; text-align: center; line-height: 1.2; height: auto; min-height: 44px; padding-block: 8px; }
  .hero__cta, .konf__price .pill, .konf__single .pill, .box__cta .pill, .notify .pill, .apo .pill--ghost { height: auto; min-height: 48px; }
  .nav .pill--sm, .bar .pill--sm { height: 40px; min-height: 0; padding-block: 0; white-space: nowrap; }
  .pzn__row .pill { height: 44px; padding-block: 0; white-space: nowrap; }
}

/* ---------- 17. Motion (CSS, scroll-driven) ---------- */
.reveal { opacity: 1; }
.hero__media { transform: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* entry 0 % bis 25 %: Bloecke, die beim Laden schon zu einem Viertel im Viewport stehen, sind voll deckend. */
    .reveal { animation: fade-in linear; animation-fill-mode: none; animation-timeline: view(); animation-range: entry 0% entry 25%; }
    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
    .hero__media { animation: hero-exit linear forwards; animation-timeline: view(); animation-range: exit 0% exit 60%; }
    @keyframes hero-exit { from { transform: scale(1) translateY(0); } to { transform: scale(.96) translateY(-16px); } }
    .chips--stagger .chip { animation: fade-in linear; animation-fill-mode: none; animation-timeline: view(); animation-range: entry 0% entry calc(40% + var(--i, 0) * 6%); }
    .anat__lines line { animation: draw linear; animation-fill-mode: none; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes draw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
    .callout { animation: fade-in linear; animation-fill-mode: none; animation-timeline: view(); animation-range: entry 0% entry 68%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 18. Print ---------- */
@media print {
  /* Formularteile nicht drucken; der Vorschau-Satz (Mail-Hinweis) bleibt. */
  .nav, .bar, .tray, .skip, .notify__label, .notify__row, .notify__consent, .notify__msg, .notify__ok, .hafer__light { display: none !important; }
  .tile, .sorten, .konf { background: #fff !important; color: #000 !important; padding-block: 16px; }
  .konf__panel, .spec__panel, .bar__state { display: block !important; }
  .stage { height: auto; }
  .stage__frame { position: static; transform: none; width: 100%; max-width: 100%; }
  .stage__frame picture { opacity: 1; position: static; }
  /* Scroll-getriebene Reveals (Abschnitt 17) stehen beim PDF-Rendern auf Opacity 0, Chromium malt den Text dann nicht: im Druck aus. */
  .reveal, .chips--stagger .chip, .callout, .anat__lines line, .hero__media { animation: none !important; opacity: 1 !important; }
  /* GSAP setzt die From-Werte als Inline-Styles (site.js 8.2); im Druck schlaegt !important sie. */
  .hafer__h2, .hafer__body, .hafer__pflicht, #notify { opacity: 1 !important; transform: none !important; }
  .hafer__pic { filter: none !important; transform: none !important; mask-image: none !important; -webkit-mask-image: none !important; }
  /* Sorten-Stage: nur der aktive Ausschnitt, kcal-Zeile im Fluss statt absolut. */
  .stage__frame picture:not(.is-active) { display: none; }
  .stage__status { position: static; padding-top: 0; }
  /* Geschlossene <details> (Datenschutz < 1024 px, FAQ 2 bis 8) drucken ihren Inhalt; Fallback: beforeprint in site.js 6b. */
  .ds details::details-content, .faq details::details-content { content-visibility: visible; display: block; }
  .konf__panel + .konf__panel, .spec__panel + .spec__panel { margin-top: 48px; }
  .faq details { break-inside: avoid; }
  a { color: #000; }
}