/* =====================================================================
   SMOOVY Website, Fassung Forest / Orange / Bone
   Alle Werte stammen aus dem Brandbook vom 19.10.2026.
   Farbe S.25, Kontrast S.26, Typografie S.22-24, Rundungen S.28,
   Raster S.29, Icons S.30, Mobile S.42, UI S.43, Bewegung S.54.
   ===================================================================== */

/* ---------------------------------------------------------- Schriften */
/* Beide Schriften liegen lokal, auf Latin subsettet. Kein CDN, kein
   Aufruf an Dritte. Lizenz: SIL Open Font License 1.1, siehe
   fonts/LIZENZEN.txt. Brandbook S.58. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/BricolageGrotesque-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-400-600.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------- Tokens */
:root {
  /* Farbe, Brandbook S.25 */
  --forest: #29483F;
  --forest-ink: #1F3830;
  --bone: #F2EDE4;
  --ink: #192C24;
  --orange: #F49A58;
  --orange-deep: #E07F38;
  /* Warmer Akzent fuer kleinen Text auf hellem Grund. Orange selbst
     erreicht auf Bone nur 2.2:1 und traegt deshalb keine Schrift.
     Dieser Ton kommt auf 6.0:1 gegen Bone, 5.0:1 gegen Sand und
     7.0:1 gegen Weiss, erfuellt also WCAG AA auf allen hellen Flaechen. */
  --accent-ink: #8F4409;
  --sand: #E7D8C4;
  --mist: #E3E8DF;
  --muted: #53635B;
  --white: #FFFFFF;
  --line: rgba(41, 72, 63, .16);
  --line-strong: rgba(41, 72, 63, .32);
  --line-light: rgba(242, 237, 228, .22);

  /* Schrift, Brandbook S.22-24 */
  --font-display: 'Bricolage Grotesque', 'Arial Black', Arial, sans-serif;
  --font-body: 'DM Sans', Arial, Helvetica, sans-serif;

  /* Raster, Brandbook S.29 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --wrap: 1280px;
  --pad: 48px;
  --gutter: 24px;

  /* Rundungen, Brandbook S.28 */
  --r-flat: 0;
  --r-input: 12px;
  --r-card: 24px;
  --r-pill: 999px;
  --r-arch: 180px;

  /* Bewegung, Brandbook S.54 */
  --t-fast: 160ms;
  --t-mid: 240ms;
  --t-slow: 480ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --header-h: 84px;
}

/* ---------------------------------------------------------- Grundlage */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  font-variation-settings: 'opsz' 14;
  font-optical-sizing: none;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  letter-spacing: -.025em;
  line-height: 1.06;
  margin: 0 0 var(--s5);
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: normal;
}
h1 { font-size: clamp(40px, 5.6vw, 80px); line-height: 1.04; }
h2 { font-size: clamp(30px, 4.1vw, 52px); line-height: 1.08; }
h3 { font-size: clamp(21px, 1.9vw, 28px); line-height: 1.12; letter-spacing: -.018em; }
h4 { font-size: 19px; line-height: 1.2; letter-spacing: -.014em; }

p { margin: 0 0 var(--s5); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--s5); padding-left: 1.25em; }
li { margin-bottom: var(--s2); }

strong, b { font-weight: 600; }
em { font-style: normal; color: var(--muted); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--orange); color: var(--forest); }

/* Fokus, Brandbook S.43: 3 px sichtbar, auf Forest wird er Orange */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-forest :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--orange);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: var(--s3); left: var(--s3); z-index: 200;
  transform: translateY(-200%);
  background: var(--forest); color: var(--bone);
  padding: var(--s3) var(--s5); border-radius: var(--r-pill);
  font-weight: 600; text-decoration: none;
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: none; }

/* ------------------------------------------------------------ Layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wrap-narrow { max-width: 820px; }

.section { padding-block: clamp(56px, 7vw, 96px); }
.section-sm { padding-block: clamp(40px, 5vw, 64px); }
.section-tight { padding-block: clamp(32px, 4vw, 48px); }

.on-forest { background: var(--forest); color: var(--bone); }
.on-forest h1, .on-forest h2, .on-forest h3, .on-forest h4 { color: var(--bone); }
.on-forest em { color: rgba(242, 237, 228, .80); }
.on-sand { background: var(--sand); }
.on-mist { background: var(--mist); }

.stack > * + * { margin-top: var(--s5); }
.lede { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--muted); max-width: 58ch; }
.on-forest .lede { color: rgba(242, 237, 228, .86); }
.small { font-size: 15px; line-height: 1.5; color: var(--muted); }
.on-forest .small { color: rgba(242, 237, 228, .82); }
.tiny { font-size: 13px; line-height: 1.45; color: var(--muted); }
.on-forest .tiny { color: rgba(242, 237, 228, .80); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 var(--s4);
}
.on-forest .eyebrow { color: var(--orange); }
.eyebrow::before {
  content: ''; width: 18px; height: 1px; background: var(--orange); flex: none;
}

.section-head { max-width: 760px; margin-bottom: var(--s7); }
.section-head p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- Schaltflächen */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s3);
  min-height: 48px; padding: var(--s3) var(--s5);
  border: 0; border-radius: var(--r-pill);
  background: var(--orange); color: var(--forest);
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover { background: var(--orange-deep); }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 18px; height: 18px; flex: none; }

.btn-secondary {
  background: transparent; color: var(--forest);
  box-shadow: inset 0 0 0 1px var(--forest);
}
.btn-secondary:hover { background: rgba(41, 72, 63, .07); }

.on-forest .btn { background: var(--orange); color: var(--forest); }
.on-forest .btn-secondary {
  background: transparent; color: var(--bone);
  box-shadow: inset 0 0 0 1px rgba(242, 237, 228, .5);
}
.on-forest .btn-secondary:hover { background: rgba(242, 237, 228, .1); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

.link {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 600; color: var(--forest); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--line-strong);
  padding-bottom: 2px;
  transition: box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.link:hover { box-shadow: inset 0 -1px 0 var(--forest); }
.on-forest .link { color: var(--bone); box-shadow: inset 0 -1px 0 var(--line-light); }
.on-forest .link:hover { color: var(--orange); box-shadow: inset 0 -1px 0 var(--orange); }
.link .ico { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.link:hover .ico { transform: translateX(3px); }

/* -------------------------------------------------------------- Kopf */
.statusbar {
  background: var(--forest); color: var(--bone);
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
}
.statusbar .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s2) var(--s4); min-height: 40px; padding-block: var(--s2);
}
.statusbar > .wrap > span { display: inline-flex; align-items: center; min-height: 24px; }
.statusbar a {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 24px;
}
.statusbar a:hover { color: var(--orange); }
.statusbar .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
  display: inline-block; margin-right: var(--s2); flex: none;
}
.statusbar .sep { opacity: .35; }

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(242, 237, 228, .9);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-mid) var(--ease),
              background var(--t-mid) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }
.site-header .wrap {
  display: flex; align-items: center; gap: var(--s5);
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand img { width: 148px; }

.nav { display: flex; align-items: center; gap: var(--s6); margin-left: auto; }
.nav a {
  font-weight: 500; font-size: 16px; text-decoration: none; color: var(--forest);
  position: relative; padding-block: 4px;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { font-weight: 600; }

.header-cta { flex: none; }

.burger {
  display: none; margin-left: auto;
  width: 48px; height: 48px; padding: 0;
  background: transparent; border: 1px solid var(--forest);
  border-radius: var(--r-pill); cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.burger span {
  display: block; width: 18px; height: 2px; background: var(--forest);
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Brandbook S.42: Navigation öffnet als klarer, fokussierbarer Bereich */
.mobile-nav {
  position: fixed; inset: 0; z-index: 95;
  background: var(--bone);
  padding: calc(var(--header-h) + 24px) var(--pad) var(--s7);
  display: flex; flex-direction: column; gap: var(--s4);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-mid) var(--ease), visibility var(--t-mid);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav a {
  font-family: var(--font-display); font-weight: 600;
  /* bei 320 px passt "Partner werden" sonst nicht in eine Zeile */
  font-size: clamp(22px, 7vw, 30px); letter-spacing: -.025em; line-height: 1.1;
  color: var(--forest); text-decoration: none;
  padding-block: var(--s2); overflow-wrap: break-word;
}
.mobile-nav .mobile-meta {
  margin-top: auto; padding-top: var(--s6); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--s2);
}
.mobile-nav .mobile-meta a { font-family: var(--font-body); font-size: 16px; font-weight: 500; }

/* --------------------------------------------------------------- Hero */
.hero { padding-block: clamp(40px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.hero-grid {
  display: grid; grid-template-columns: 1.08fr 1fr;
  gap: clamp(32px, 4vw, 64px); align-items: center;
}
.hero h1 { margin-bottom: var(--s5); }
.hero .lede { margin-bottom: var(--s6); }
.hero-rotator {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 48px); line-height: 1.08;
  letter-spacing: -.025em; color: var(--muted);
  margin: calc(var(--s2) * -1) 0 var(--s5); min-height: 1.1em;
}
/* Ohne JavaScript steht die erste Zeile, mit JavaScript uebernimmt
   die Klasse is-live und blendet jeweils eine Zeile ein. */
.hero-rotator [data-rotator] > span { display: none; }
.hero-rotator [data-rotator] > span:first-child { display: inline; }
.hero-rotator [data-rotator].is-live > span { display: none; }
.hero-rotator [data-rotator].is-live > span.is-on { display: inline; }

.hero-meta {
  margin-top: var(--s7); padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
}
.hero-meta span { display: inline-flex; align-items: center; gap: var(--s2); }
.hero-meta span + span::before { content: '·'; color: var(--orange); margin-right: var(--s2); }

/* Bildfenster in der Form des oo, Brandbook S.31 */
.arch {
  position: relative; overflow: hidden; background: var(--sand);
  border-radius: var(--r-arch) var(--r-arch) var(--r-card) var(--r-card);
}
.arch > img { width: 100%; height: 100%; object-fit: cover; }
.arch-tall { aspect-ratio: 4 / 5; }
.arch-wide {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-card) var(--r-arch) var(--r-card) var(--r-arch);
}
.arch-badge {
  position: absolute; left: var(--s5); bottom: var(--s5);
  width: 104px; height: 104px; border-radius: 50%;
  background: var(--orange); display: grid; place-items: center;
  padding: 28px;
}
.arch-badge img { width: 100%; }
.arch-caption {
  position: absolute; right: var(--s4); bottom: var(--s4);
  background: rgba(25, 44, 36, .88); color: var(--bone);
  font-size: 12px; letter-spacing: .02em;
  padding: 6px 12px; border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}

/* ----------------------------------------------------------- Becherband
   Die Becher laufen randlos ueber die volle Breite. Kommt die Maus auf
   einem Becher zur Ruhe, haelt das Band an und der Becher wird gemixt:
   kurzes Brummen, dann steigt der Smoothie mit welliger Oberflaeche von
   unten hoch und die Fruechte sinken ab. Alles laeuft ueber Transitions,
   deshalb spult der Vorgang beim Verlassen vom aktuellen Stand zurueck.
   Pausenknopf nach WCAG 2.2.2. */
.cupband {
  --rail-gap: clamp(16px, 2vw, 32px);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 107' preserveAspectRatio='none'%3E%3Cpath d='M0 3.5C8 0 17 0 25 3.5S42 7 50 3.5 67 0 75 3.5 92 7 100 3.5V107H0Z'/%3E%3C/svg%3E");
  background: var(--mist); padding-block: clamp(28px, 3.4vw, 48px);
}
.cupband-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s5);
}
.cupband-head p { margin: 0; }
.cuprail-wrap { overflow: hidden; }
/* Drei gleiche Saetze; das Endstueck so breit wie eine Luecke, damit ein
   Drittel der Breite genau einem Satz entspricht und die Schleife nahtlos ist. */
.cuprail {
  display: flex; gap: var(--rail-gap); width: max-content;
  padding-inline-end: var(--rail-gap);
  animation: cuprail 56s linear infinite;
}
.cupband.is-paused .cuprail { animation-play-state: paused; }
@keyframes cuprail { to { transform: translateX(calc(-100% / 3)); } }

.cupcard {
  flex: none; width: clamp(132px, 13vw, 184px);
  appearance: none; border: 0; background: transparent;
  font: inherit; color: inherit; text-align: center; cursor: pointer;
  border-radius: var(--r-input); padding: var(--s2);
}
.cupshot {
  display: block; position: relative; aspect-ratio: 8 / 13;
  transition: transform var(--t-mid) var(--ease);
}
.cupshot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
}

/* ---- Mixvorgang. Hin: 800 ms, weich anfahrend und oben sanft abbremsend,
   damit man den Saft steigen sieht. Zurueck: 450 ms auf demselben Pfad.
   Ruhezustand = Rueckweg-Timing, Zustand .is-mixed = Hinweg-Timing. */
.cupshot .is-raw {
  transform-origin: 50% 90%;
  transition: transform 450ms cubic-bezier(.45, 0, .55, 1), opacity 150ms ease-out;
}
/* Fenster, in dem der Smoothie hochsteigt. Die Wellenkante ist eine feste
   Maske, bewegt wird nur transform (GPU, kein Repaint pro Frame). Das Bild
   darin faehrt gegenlaeufig und steht dadurch still, waehrend das Fenster
   es von unten freigibt. 7 % Reserve oben fuer die Welle. */
.mixwin {
  position: absolute; left: 0; right: 0; bottom: 0; top: -7%;
  overflow: hidden; pointer-events: none;
  -webkit-mask: var(--wave) 0 0 / 100% 100% no-repeat;
          mask: var(--wave) 0 0 / 100% 100% no-repeat;
  transform: translateY(100%);
  transition: transform 450ms cubic-bezier(.45, 0, .55, 1);
  will-change: transform;
}
.cupshot .mixwin .is-mix {
  inset: auto 0 0 0; height: calc(100% / 1.07);
  transform: translateY(-107%);
  transition: transform 450ms cubic-bezier(.45, 0, .55, 1);
}
.cupcard.is-mixed .mixwin,
.cupcard.is-mixed .cupshot .mixwin .is-mix {
  transform: translateY(0);
  transition: transform 800ms cubic-bezier(.45, .05, .3, 1);
}
/* Die Fruechte sinken waehrend des Steigens leicht ab und verschwinden erst
   im letzten Viertel, damit der Becherrand bis zum Schluss stehen bleibt. */
.cupcard.is-mixed .cupshot .is-raw {
  transform: translateY(3%) scale(.96);
  opacity: 0;
  transition: transform 800ms cubic-bezier(.45, .05, .3, 1), opacity 220ms 560ms ease-in;
}
/* Kurzes Brummen wie beim Mixer. Ueber die Einzeleigenschaften translate
   und rotate, damit es sich mit dem Hover-Versatz addiert statt ihn zu ersetzen. */
.cupcard.is-mixed .cupshot { animation: cupBuzz 280ms linear; }
@keyframes cupBuzz {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  20% { translate: -1.5px 0; rotate: -.6deg; }
  40% { translate: 1.5px 0; rotate: .6deg; }
  60% { translate: -1px 0; rotate: -.4deg; }
  80% { translate: 1px 0; rotate: .3deg; }
}

/* Hinweis fuer Tastaturnutzer, dass die Karte etwas tut */
.cuphint {
  position: absolute; left: 50%; bottom: 2%; transform: translate(-50%, 6px);
  padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--forest); color: var(--bone);
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cupcard:focus-visible .cuphint { opacity: 1; transform: translate(-50%, 0); }
.cupcard.is-mixed .cuphint { opacity: 0; }

.cupcard:hover .cupshot, .cupcard:focus-visible .cupshot { transform: translateY(-6px); }

/* Ein feiner oranger Strich laeuft waehrend des Mixens unter der Karte
   durch, wie eine Fortschrittsanzeige am Geraet. */
.cupcard .cupmeta { position: relative; display: block; }
.cupcard .cupmeta::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -8px;
  height: 2px; border-radius: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
}
.cupcard.is-mixed .cupmeta::after { animation: cupProgress 850ms cubic-bezier(.45, .05, .3, 1); }
@keyframes cupProgress {
  0% { transform: scaleX(0); opacity: 1; }
  85% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

.cupcard .cupmeta > b {
  display: block; font-weight: 600; font-size: 15px;
  letter-spacing: -.01em; line-height: 1.25;
}
/* Beide Woerter liegen uebereinander und blenden ineinander; visibility
   sorgt dafuer, dass Screenreader nur das sichtbare lesen. */
.cupcard .ing {
  display: grid; justify-items: center; font-size: 13px; font-weight: 400;
  color: var(--muted); margin-top: 2px; min-height: 2.6em;
}
.cupcard .ing > span { grid-area: 1 / 1; transition: opacity 150ms ease-in, visibility 0s 150ms; }
.cupcard .ing .mixword { opacity: 0; visibility: hidden; color: var(--accent-ink); font-weight: 600; }
.cupcard.is-mixed .ing .rawword {
  opacity: 0; visibility: hidden;
  transition: opacity 150ms 560ms ease-out, visibility 0s 710ms;
}
.cupcard.is-mixed .ing .mixword {
  opacity: 1; visibility: visible;
  transition: opacity 220ms 640ms ease-out, visibility 0s 640ms;
}

.cupband-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s4); margin-top: var(--s6);
  padding-top: var(--s4); border-top: 1px solid var(--line);
  font-size: 15px; color: var(--muted);
}
.rail-toggle {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 40px; padding: 6px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: transparent; color: var(--forest);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.rail-toggle:hover { background: rgba(41, 72, 63, .07); }
.rail-toggle .ico { width: 16px; height: 16px; }
.rail-toggle .lbl-pause { display: inline; }
.rail-toggle .lbl-play { display: none; }
.rail-toggle[aria-pressed="true"] .lbl-pause { display: none; }
.rail-toggle[aria-pressed="true"] .lbl-play { display: inline; }

@media (prefers-reduced-motion: reduce) {
  .cuprail { animation: none; width: auto; overflow-x: auto;
             padding: 0 var(--rail-gap) var(--s3); }
  .cuprail-wrap { overflow-x: auto; }
  .cupcard[aria-hidden="true"] { display: none; }
  .rail-toggle { display: none; }
  /* Kein Brummen, kein Steigen: nur eine kurze Ueberblendung. */
  .mixwin, .cupshot .mixwin .is-mix,
  .cupcard.is-mixed .mixwin, .cupcard.is-mixed .cupshot .mixwin .is-mix { transform: none; }
  .mixwin { opacity: 0; transition: opacity 150ms linear; }
  .cupcard.is-mixed .mixwin { opacity: 1; transition: opacity 150ms linear; }
  .cupshot .is-raw, .cupcard.is-mixed .cupshot .is-raw { transform: none; transition: opacity 150ms linear; }
  .cupcard.is-mixed .cupshot, .cupcard.is-mixed .cupmeta::after { animation: none; }
}

/* ------------------------------------------------------------ Laufband */
.marquee {
  overflow: hidden; border-block: 1px solid var(--line);
  padding-block: var(--s4); -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.on-forest .marquee { border-color: var(--line-light); }
.marquee-track {
  display: flex; align-items: center; gap: var(--s5);
  width: max-content; animation: marquee 42s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2.4vw, 32px); letter-spacing: -.02em;
  color: var(--forest); white-space: nowrap;
}
.on-forest .marquee-track span { color: var(--bone); }
.marquee-track i { color: var(--orange); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* -------------------------------------------------------------- Karten */
.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--white); border-radius: var(--r-card);
  padding: var(--s6); display: flex; flex-direction: column; gap: var(--s3);
}
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.on-forest .card { background: rgba(242, 237, 228, .07); }
.on-forest .card p { color: rgba(242, 237, 228, .84); }

.card-icon {
  width: 48px; height: 48px; border-radius: var(--r-pill);
  background: var(--mist); color: var(--forest);
  display: grid; place-items: center; margin-bottom: var(--s3);
}
.on-forest .card-icon { background: rgba(242, 237, 228, .1); color: var(--orange); }
.card-icon svg { width: 24px; height: 24px; }

.stat-card {
  background: var(--white); border-radius: var(--r-card); padding: var(--s6);
  display: flex; flex-direction: column; gap: var(--s2);
}
.stat-card .stat {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 3.1vw, 40px); letter-spacing: -.03em;
  line-height: 1; color: var(--forest);
}
.on-forest .stat-card { background: rgba(242, 237, 228, .07); }
.on-forest .stat-card .stat { color: var(--orange); }
.stat-card .stat-label {
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.on-forest .stat-card .stat-label { color: rgba(242, 237, 228, .80); }
.stat-card p { font-size: 16px; color: var(--muted); margin: var(--s2) 0 0; }
.on-forest .stat-card p { color: rgba(242, 237, 228, .84); }

/* Icons, Brandbook S.30: 24 px Raster, 1.7 px Strich */
.ico {
  width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

/* ---------------------------------------------------------- Preiskarten
   Aufbau wie auf der alten Seite: Pille, grosse Zahl mit Zusatz,
   Zwischentitel, Beschreibung, Hakenliste. Erste Karte gefuellt. */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); align-items: stretch; }
.price-card {
  background: var(--white); border-radius: var(--r-card);
  padding: var(--s6); display: flex; flex-direction: column; gap: var(--s3);
  transition: transform var(--t-mid) var(--ease);
}
.price-card:hover { transform: translateY(-4px); }
.price-card.is-featured { background: var(--forest); color: var(--bone); }
.price-tag {
  align-self: flex-start;
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--mist); color: var(--forest);
  padding: 6px 14px; border-radius: var(--r-pill);
}
.is-featured .price-tag { background: var(--orange); color: var(--forest); }
.price-card .price-value {
  margin: 0 0 var(--s2);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 3.2vw, 42px); letter-spacing: -.03em; line-height: 1;
  color: var(--forest); margin-top: var(--s2);
}
.price-card.is-featured .price-value { color: var(--bone); }
.price-card .price-value small {
  display: block; margin-top: 4px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  letter-spacing: .02em; color: var(--muted);
}
.price-card.is-featured .price-value small { color: rgba(242, 237, 228, .76); }
.price-card h3 { margin: 0; }
.is-featured h3 { color: var(--bone); }
.price-card > p:not(.price-value):not(.foot) { margin: 0; font-size: 16px; color: var(--muted); }
.is-featured > p:not(.price-value):not(.foot) { color: rgba(242, 237, 228, .86); }
.price-card ul { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s3); }
.price-card li {
  position: relative; padding-left: 30px; margin: 0;
  font-size: 15px; line-height: 1.45; color: var(--muted);
}
.is-featured li { color: rgba(242, 237, 228, .9); }
.price-card li .ico {
  position: absolute; left: 0; top: 1px; width: 20px; height: 20px;
  color: var(--accent-ink);
}
.is-featured li .ico { color: var(--orange); }
.price-card p.foot {
  margin: auto 0 0; padding-top: var(--s4);
  border-top: 1px solid var(--line); font-size: 14px; color: var(--muted);
}
.price-card.is-featured p.foot { border-top-color: rgba(242, 237, 228, .22); color: rgba(242, 237, 228, .82); }

/* ------------------------------------------------------------ Linien
   Das Sortiment als Linien statt als Becherbilder. Die Balkenlaenge
   zeigt, wie viele Rezepturen auf eine Linie entfallen. */
.lines { border-top: 1px solid var(--line); }
.line-row {
  display: grid; grid-template-columns: 56px 1fr 1.1fr;
  gap: var(--s4) var(--s6); align-items: start;
  padding: var(--s6) 0; border-bottom: 1px solid var(--line);
  transition: background var(--t-mid) var(--ease);
}
.line-row:hover { background: rgba(255, 255, 255, .55); }
.line-row .idx {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  color: var(--accent-ink); padding-top: 6px;
}
.line-row h3 { margin: 0 0 var(--s3); }
.line-row .char { margin: 0; color: var(--muted); font-size: 16px; max-width: 42ch; }
.line-bar {
  position: relative; height: 10px; border-radius: var(--r-pill);
  background: rgba(41, 72, 63, .10); margin-bottom: var(--s4); overflow: hidden;
}
.line-bar span {
  position: absolute; inset: 0 auto 0 0; width: var(--fill, 50%);
  background: var(--forest); border-radius: var(--r-pill);
  transform-origin: left; transform: scaleX(0);
  transition: transform 900ms var(--ease);
}
.line-row.is-in .line-bar span, html:not(.js) .line-bar span { transform: scaleX(1); }
.line-row:nth-child(2) .line-bar span { background: var(--accent-ink); }
.line-row:nth-child(3) .line-bar span { background: var(--orange-deep); }
.line-meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3);
}
.line-sorten { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.line-sorten a {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: 4px 14px; border-radius: var(--r-pill);
  background: var(--white); font-size: 15px; font-weight: 500;
  text-decoration: none; color: var(--forest);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.line-sorten a:hover { background: var(--forest); color: var(--bone); }
.line-zutaten { margin: var(--s3) 0 0; font-size: 15px; color: var(--muted); }

/* -------------------------------------------------------------- Schritte */
.steps { counter-reset: step; display: grid; gap: var(--gutter); }
.step {
  position: relative; background: var(--white); border-radius: var(--r-card);
  padding: var(--s6); padding-top: var(--s7);
}
.on-forest .step { background: rgba(242, 237, 228, .07); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: var(--s5); left: var(--s6);
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  color: var(--accent-ink);
}
.on-forest .step::before { color: var(--orange); }
.step h3 { margin: 0 0 var(--s2); }
.step p { margin: 0; color: var(--muted); font-size: 16px; }
.on-forest .step p { color: rgba(242, 237, 228, .84); }

/* ------------------------------------------------------------ Akkordeon */
.accordion { border-top: 1px solid var(--line); }
.on-forest .accordion { border-color: var(--line-light); }
.accordion details { border-bottom: 1px solid var(--line); }
.on-forest .accordion details { border-color: var(--line-light); }
.accordion summary {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(18px, 1.7vw, 22px); letter-spacing: -.018em;
  min-height: 48px;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .num {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; color: var(--accent-ink); flex: none; width: 24px;
}
.on-forest .accordion summary .num { color: var(--orange); }
.accordion summary .plus {
  margin-left: auto; width: 24px; height: 24px; flex: none;
  position: relative; color: var(--forest);
}
.on-forest .accordion summary .plus { color: var(--bone); }
.accordion summary .plus::before,
.accordion summary .plus::after {
  content: ''; position: absolute; inset: 50% 2px auto 2px; height: 1.7px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
}
.accordion summary .plus::after { transform: rotate(90deg); }
.accordion details[open] summary .plus::after { transform: rotate(0); opacity: 0; }
.accordion .body { padding: 0 0 var(--s5) calc(24px + var(--s4)); max-width: 68ch; }
.accordion .body p { color: var(--muted); margin: 0; }
.on-forest .accordion .body p { color: rgba(242, 237, 228, .78); }

/* --------------------------------------------------------------- Split */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 72px); align-items: center;
}
.split-wide { grid-template-columns: 1.15fr 1fr; }

/* --------------------------------------------------------------- Sorten */
.flavor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.flavor {
  background: var(--white); border-radius: var(--r-card);
  padding: var(--s6) var(--s5) var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  position: relative; overflow: hidden;
  transition: transform var(--t-mid) var(--ease);
}
.flavor:hover { transform: translateY(-4px); }
.flavor .num {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  color: var(--accent-ink);
}
.flavor .shot {
  aspect-ratio: 1 / 1.3; display: grid; place-items: center;
  background: var(--mist); border-radius: var(--r-input); overflow: hidden;
}
.flavor .shot img { width: 78%; height: auto; }
.flavor h3 { margin: 0; }
.flavor .ingredients { font-size: 15px; color: var(--muted); margin: 0; }
.flavor .line {
  margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--forest);
}

/* ------------------------------------------------------------- Standorte */
.places { border-top: 1px solid var(--line); }
.place {
  display: grid; grid-template-columns: 56px 1fr 1fr 32px;
  align-items: center; gap: var(--s4);
  padding: var(--s5) 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: padding-inline var(--t-mid) var(--ease);
}
.place:hover { padding-inline: var(--s3); background: rgba(255, 255, 255, .5); }
.place .idx { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--accent-ink); }
.place .name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 2.3vw, 32px); letter-spacing: -.022em; line-height: 1.1;
}
.place .note { font-size: 16px; color: var(--muted); }
.place .arrow { color: var(--forest); justify-self: end; }
.place:hover .arrow { color: var(--orange-deep); }

/* -------------------------------------------------------------- Rechner */
.calc {
  background: var(--white); border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 48px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px);
}
.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-content: start; }
.calc-box {
  background: var(--mist); border-radius: var(--r-input); padding: var(--s5);
}
.calc-box .v {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.03em; line-height: 1;
  color: var(--forest); display: block;
}
.calc-box .k {
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); display: block; margin-top: var(--s2);
}
.calc-box.accent { background: var(--forest); }
.calc-box.accent .v { color: var(--orange); }
.calc-box.accent .k { color: rgba(242, 237, 228, .82); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 48px; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--orange) var(--calc-pos, 40%),
              var(--mist) var(--calc-pos, 40%));
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--orange) var(--calc-pos, 40%),
              var(--mist) var(--calc-pos, 40%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -11px; border-radius: 50%;
  background: var(--forest); border: 4px solid var(--white);
  box-shadow: 0 1px 6px rgba(25, 44, 36, .28);
}
input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--forest); border: 4px solid var(--white);
}
.calc-hint {
  font-size: 15px; color: var(--muted); min-height: 3em;
  transition: opacity var(--t-fast) var(--ease);
}
.calc-hint.is-swapping { opacity: 0; }

/* --------------------------------------------------------- Rundgang */
.spin {
  background: var(--mist); border-radius: var(--r-card);
  padding: var(--s5); display: grid; gap: var(--s5);
  grid-template-columns: 1.3fr 1fr; align-items: center;
}
.spin-stage {
  position: relative; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
}
.spin-stage img { width: 100%; user-select: none; -webkit-user-drag: none; }
.spin-areas { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.spin-areas button {
  min-height: 40px; padding: var(--s2) var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: transparent; font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.spin-areas button:hover { background: rgba(41, 72, 63, .07); }
.spin-areas button[aria-pressed="true"] {
  background: var(--forest); color: var(--bone); border-color: var(--forest);
}
.spin-info { font-size: 16px; color: var(--muted); min-height: 7em; }
/* Rundgang aus festen Ansichten: alle Bilder liegen uebereinander,
   die aktive blendet weich ein. */
.view-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 320ms var(--ease);
}
.view-stage img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .view-stage img { transition: none; } }

/* ------------------------------------------------------------ Formular */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field.full { grid-column: 1 / -1; }
/* Honigtopf gegen Formular-Spam, fuer Menschen und Screenreader unsichtbar */
.field.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field label { font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.field .req { color: var(--accent-ink); }
.field input, .field select, .field textarea {
  min-height: 48px; padding: var(--s3) var(--s4);
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-input);
  font-size: 16px; width: 100%;
  transition: border-color var(--t-fast) var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; padding-top: var(--s3); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--forest); }
.field .help { font-size: 13px; color: var(--muted); }
/* Fehler als Text plus Status, nie nur rote Umrandung, Brandbook S.43 */
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: #B23A2E; border-width: 2px;
}
.field .error {
  display: none; font-size: 14px; font-weight: 600; color: #8E2C22;
  align-items: center; gap: var(--s2);
}
.field.has-error .error { display: flex; }
.form-status {
  border-radius: var(--r-input); padding: var(--s4) var(--s5);
  font-weight: 500; display: none;
}
.form-status.ok { display: block; background: var(--mist); color: var(--ink); box-shadow: inset 3px 0 0 var(--forest); }
.form-status.err { display: block; background: #F7E2DE; color: #6E231B; box-shadow: inset 3px 0 0 #B23A2E; }

/* -------------------------------------------------------------- Zitat */
.quote { max-width: 900px; margin-inline: auto; text-align: center; }
.quote blockquote {
  margin: 0 0 var(--s5);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px, 3vw, 40px); line-height: 1.14; letter-spacing: -.025em;
}
.quote figcaption { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s6); }
.quote .who {
  font-size: 15px; display: flex; align-items: center; gap: var(--s3); text-align: left;
}
.quote .who img {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none;
}
.quote .who strong { display: block; }
.quote .who span { color: var(--muted); }
.on-forest .quote .who span { color: rgba(242, 237, 228, .80); }

/* ------------------------------------------------------------- Tabelle */
.table-wrap { overflow-x: auto; border-radius: var(--r-card); background: var(--white); }
.table-wrap:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { text-align: left; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
th { font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- Band */
.band {
  background: var(--forest); color: var(--bone); border-radius: var(--r-card);
  padding: clamp(28px, 4vw, 56px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s6);
}
.band h2 { margin: 0 0 var(--s3); }
.band p { margin: 0; color: rgba(242, 237, 228, .86); max-width: 48ch; }

.pill-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--mist); font-size: 14px; font-weight: 500;
}
.on-forest .pill { background: rgba(242, 237, 228, .1); }

/* -------------------------------------------------------------- Siegel */
.seals { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 4vw, 56px); }
.seals img { width: clamp(64px, 8vw, 96px); }

/* --------------------------------------------------------------- Fuss */
.footer { background: var(--forest); color: var(--bone); padding-block: var(--s9) var(--s6); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s7) var(--gutter); padding-bottom: var(--s7);
  border-bottom: 1px solid var(--line-light);
}
.footer-brand img { width: 168px; margin-bottom: var(--s4); }
.footer-col p {
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(242, 237, 228, .78);
  margin: 0 0 var(--s4);
}
.footer-col a {
  display: block; text-decoration: none; font-size: 16px;
  padding-block: 6px; color: var(--bone);
}
.footer-col a:hover { color: var(--orange); }
.footer-news {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5);
  padding: var(--s6) 0; border-bottom: 1px solid var(--line-light);
}
.footer-news .intro { flex: 1 1 260px; }
.footer-news .intro strong {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -.02em;
  display: block; margin-bottom: 4px;
}
.footer-news .intro span { font-size: 15px; color: rgba(242, 237, 228, .84); }
.news-form { display: flex; gap: var(--s2); flex: 1 1 340px; max-width: 460px; }
.news-form input {
  flex: 1; min-height: 48px; padding: var(--s3) var(--s4);
  border: 1px solid rgba(242, 237, 228, .42); border-radius: var(--r-pill);
  background: transparent; color: var(--bone); font-size: 16px;
}
.news-form input::placeholder { color: rgba(242, 237, 228, .6); }
.news-form input:hover { border-color: var(--bone); }
.footer-news .form-status { flex: 1 1 100%; margin: 0; }
.footer-news .form-status.ok { background: rgba(242, 237, 228, .12); color: var(--bone); box-shadow: inset 3px 0 0 var(--orange); }
.footer-news .form-status.err { background: rgba(242, 237, 228, .12); color: var(--bone); box-shadow: inset 3px 0 0 #E8927F; }
.footer-news .field.has-error input { border-color: #E8927F; border-width: 2px; }
.footer-news .error { color: #F3B5A7; }

.footer-note {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--s4); padding-top: var(--s5); font-size: 14px;
  color: rgba(242, 237, 228, .80);
}
.footer-note a {
  color: inherit; display: inline-flex; align-items: center; min-height: 24px;
}

/* ------------------------------------------------------- Scrollfortschritt */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--orange); z-index: 120;
}

/* ------------------------------------------------- Eintritt von Inhalt */
.reveal { opacity: 0; transform: translateY(14px); }
.js .reveal {
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal.is-in, html:not(.js) .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------- Mobil */
@media (max-width: 1080px) {
  .price-grid { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flavor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spin { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --pad: 20px; --gutter: 16px; --header-h: 72px; }
  body { font-size: 17px; }
  .nav, .header-cta { display: none; }
  .burger { display: inline-flex; }
  .hero-grid, .split, .split-wide, .calc { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .line-row { grid-template-columns: 40px 1fr; }
  .line-row > div:last-child { grid-column: 2 / 3; }
  .flavor-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .place { grid-template-columns: 40px 1fr 24px; }
  .place .note { grid-column: 2 / 3; }
  .arch-tall { aspect-ratio: 1 / 1; }
  :root { --r-arch: 120px; }
  .brand img { width: 128px; }
  .band { flex-direction: column; align-items: flex-start; }
  .calc-out { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .calc-out { grid-template-columns: 1fr; }
  .statusbar .hide-s { display: none; }
  th, td { padding: var(--s3) var(--s3); }
}

/* Brandbook S.54: Reduced Motion deaktiviert dekorative Bewegung */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none; }
}

@media print {
  .site-header, .statusbar, .mobile-nav, .footer, .progress, .marquee { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .arch { border-radius: 0; }
}