/* ==========================================================================
   MOTO PIZZA — Original brochure fonts (local files, assets/fonts/)
   AdelleSansARA is one family across 8 weights — font-weight in each rule
   below (already 400/600/700 throughout the sheet) picks the matching cut
   automatically. "AdelleSansARA Display" is a second alias pointing at the
   same Extrabold/Heavy files but registered under their own family name so
   --font-display gets the brochure's "very bold headline" weight by default
   without having to add font-weight to every headline rule individually.
   Good Times (the brochure's angular MOTO display face) drives --font-display
   and --font-head — all headlines, nav, buttons, labels, tags, prices, the
   marquee. It's a single-weight, unicase face (lowercase renders as caps;
   full umlaut/ß coverage), so it's unsuited for running body copy — --font-body
   stays AdelleSansARA, which keeps its full weight range for descriptions,
   ingredients and other multi-line text that needs real lowercase and
   legibility at small sizes. The two Arabic-script fonts that were supplied
   alongside these (AraHamahAlislam, AraHamahAlFidaa) are not wired in — there
   is no Arabic-script content anywhere on this Latin-text site for them to
   serve.
   ========================================================================== */
@font-face {
  font-family: "AdelleSansARA";
  src: url("../assets/fonts/AdelleSansARA-Ultrathin.otf") format("opentype");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "AdelleSansARA";
  src: url("../assets/fonts/AdelleSansARA-Thin.otf") format("opentype");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "AdelleSansARA";
  src: url("../assets/fonts/AdelleSansARA-Light.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "AdelleSansARA";
  src: url("../assets/fonts/AdelleSansARA-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "AdelleSansARA";
  src: url("../assets/fonts/AdelleSansARA-Semibold.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "AdelleSansARA";
  src: url("../assets/fonts/AdelleSansARA-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "AdelleSansARA";
  src: url("../assets/fonts/AdelleSansARA-Extrabold.otf") format("opentype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "AdelleSansARA";
  src: url("../assets/fonts/AdelleSansARA-Heavy.otf") format("opentype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "AdelleSansARA Display";
  src: url("../assets/fonts/AdelleSansARA-Heavy.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Good Times";
  src: url("../assets/fonts/good-times-rg.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
/* Archivo Black — the site's pre-MOTO-brochure headline font (Google Font,
   self-hosted here instead of the old <link> to fonts.googleapis.com so it
   doesn't reintroduce an external request). Scoped to only the four
   headline lines that were originally set in this font and are meant to
   stay that way (see the --outline rules below); everything else still
   uses the brochure fonts above. */
@font-face {
  font-family: "Archivo Black";
  src: url("../assets/fonts/ArchivoBlack-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ==========================================================================
   MOTO PIZZA — Design tokens
   Change colors / type / spacing here to restyle the whole site at once.
   ========================================================================== */
:root {
  /* brand colors, sampled from the MOTO PIZZA logo */
  --pink: #ec1e8d;
  --pink-dim: #b8156c;
  --blue: #16a3e6;
  --crust: #e8912c;
  --crust-dark: #b5641a;

  /* base */
  --ink: #141116;
  --ink-soft: #211b22;
  --cream: #fbf4ec;
  --cream-dim: #f0e6da;
  --white: #ffffff;

  /* natural food-illustration colors — used ONLY for the decorative hero
     toppings, never for UI/branding. Pink/blue stay the site's brand
     colors; these exist so a tomato reads as red, a carrot as orange, etc. */
  --tomato-red: #e5432c;
  --tomato-dark: #b82f1c;
  --carrot-orange: #f2932e;
  --carrot-dark: #c96f16;
  --leaf-green: #4f9d3d;
  --leaf-dark: #356b28;
  --pepper-yellow: #f5c518;
  --pepper-yellow-dark: #d9a20f;
  --onion-cream: #f7ecd9;
  --onion-purple: #9a6b9e;
  --mush-beige: #ecdcc0;
  --mush-dark: #cbb083;
  --olive-dark: #3a3f2e;
  --cucumber-flesh: #eaf6df;
  --lettuce-green: #8fce5c;

  --font-display: "Good Times", "AdelleSansARA Display", "AdelleSansARA", sans-serif;
  --font-head: "Good Times", "AdelleSansARA", sans-serif;
  --font-body: "AdelleSansARA", sans-serif;
  --font-ticker: "Good Times", "AdelleSansARA Display", sans-serif;

  --container: 1240px;
  --pad: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bam: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot — the hero entrance's "pop" */
  --radius: 22px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body, h1, h2, h3, p, figure { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
/* despite the name, this section is now white — "light" here means "the
   variant used on the Detroit/About/Gallery block", which used to be a dark
   section and is now white, so it needs dark (not cream) text for contrast */
.section-title--light { color: var(--ink); }

.hl { position: relative; white-space: nowrap; }
.hl--pink { color: var(--pink); }
.hl--blue { color: var(--blue); }

/* ==========================================================================
   MOTO wordmark inline in copy
   Instances of the <symbol id="moto-wordmark"> defined at the top of
   index.html. Everything is expressed in em so a single rule serves every
   context — a 0.85rem footer line and a clamp(2.6rem, 8vw, 5.6rem) headline
   both get a mark scaled to their own text, with no per-breakpoint values to
   maintain: it is responsive for free. 0.737em is the measured cap height of
   both site faces (Good Times and AdelleSansARA share it), so the mark's box
   is exactly as tall as the capital letters beside it; 4.22 is the wordmark's
   own aspect ratio (422:100 viewBox), so width is always derived from height
   and the letterforms can never stretch or distort. vertical-align: baseline
   puts the box's bottom edge on the text baseline, which is where a
   cap-height glyph sits. Proportions and stroke weight live in the <symbol>
   in index.html and are identical at every occurrence — size is the only
   thing that varies.
   ========================================================================== */
.moto-mark {
  display: inline-block;
  vertical-align: baseline;
  height: 0.737em;
  width: calc(0.737em * 4.22);
  /* the mark is the word, so it must never be split from punctuation or a
     hyphenated suffix ("MOTO-Käsemischung") the way an image would be */
  flex: none;
}

/* ==========================================================================
   Scroll reveal (see js/main.js IntersectionObserver)
   Default (bare data-reveal or data-reveal="up") slides up + fades in.
   Opt into a variant by setting the attribute value:
     data-reveal="left"  / "right"  — slide in horizontally
     data-reveal="scale"            — scale up from 0.9 + fade
   Plays once: js/main.js unobserves the element after it reveals.
   NOTE: clip-path-based mask reveals must NOT be driven by data-reveal —
   an element clipped to 0 area can never self-report as intersecting.
   (see .hero__img below: on-load masks use a plain CSS @keyframes
   animation instead, so they don't depend on JS/IntersectionObserver
   timing at all.)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(0.9); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible,
[data-reveal="scale"].is-visible { transform: translateX(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 100px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform 0.35s var(--ease), background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}
.btn--solid { background: var(--pink); color: var(--white); box-shadow: 0 8px 24px -8px rgba(236, 30, 141, 0.55); }
.btn--solid:hover { background: var(--ink); box-shadow: 0 8px 24px -8px rgba(20, 17, 22, 0.5); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--big { padding: 19px 34px; font-size: 1.05rem; }
.btn--pill { padding: 11px 22px; font-size: 0.85rem; }
.btn:active { transform: scale(0.96); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), padding 0.4s var(--ease);
  padding: 18px 0;
}
.nav.is-scrolled {
  background: rgba(251, 244, 236, 0.85);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(20, 17, 22, 0.08);
  padding: 10px 0;
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__links { display: none; align-items: center; gap: 32px; font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; }
@media (min-width: 900px) { .nav__links { display: flex; } }
/* nowrap keeps the bar on one row now that there is a fifth item: at 900px —
   the width where this bar replaces the burger — flexbox would otherwise
   shrink the items and break "Detroit Style" and "Über uns" onto two lines.
   With four items there was always room, so this changes nothing that was
   there before. */
.nav__links a { position: relative; padding: 4px 0; white-space: nowrap; }

/* ---- nav colour follows the bar's own background ----
   At rest the bar is transparent and sits on the pink hero, so the links are
   pure white. Once .is-scrolled fades in the cream background (see above),
   white would be invisible, so the links go back to ink there. Same for the
   hover underline: white on the hero (pink-on-pink would not show at all),
   pink on the cream bar. Only colour changes here — face, size, position and
   spacing are untouched. */
.nav__links a { color: #ffffff; transition: color 0.4s var(--ease); }
.nav.is-scrolled .nav__links a { color: var(--ink); }

.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: #ffffff; transition: right 0.35s var(--ease), background 0.4s var(--ease);
}
.nav.is-scrolled .nav__links a::after { background: var(--pink); }
.nav__links a:hover::after { right: 0; }

.nav__cta { display: none; }
@media (min-width: 900px) { .nav__cta { display: inline-flex; } }

.nav__burger {
  display: flex; flex-direction: column; gap: 5px; padding: 6px;
  margin-left: auto; /* keeps it pinned to the right edge now that .nav__brand is gone —
                         it's the sole visible flex item on mobile, where space-between
                         alone would otherwise leave it stuck at the left */
}
/* the burger is the only piece of the top nav visible on mobile, so it follows
   the same rule as the links: white on the pink hero, ink once the cream bar
   fades in */
.nav__burger span { width: 22px; height: 2px; background: #ffffff; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), background 0.4s var(--ease); }
.nav.is-scrolled .nav__burger span { background: var(--ink); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 900px) { .nav__burger { display: none; } }

.nav__mobile {
  max-height: 0; overflow: hidden;
  background: var(--cream);
  transition: max-height 0.4s var(--ease);
  display: flex; flex-direction: column;
  padding: 0 var(--pad);
}
.nav__mobile.is-open { max-height: 320px; padding: 16px var(--pad) 24px; }
.nav__mobile a { padding: 12px 0; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; border-bottom: 1px solid rgba(20,17,22,0.08); }
.nav__mobile .btn { margin-top: 16px; align-self: flex-start; }
@media (min-width: 900px) { .nav__mobile { display: none; } }

/* ==========================================================================
   HERO
   ========================================================================== */
/* solid brand-pink hero — no photo background, no gradient, no pattern.
   Single centered column on every breakpoint: logo, slogan, full product
   pizza, then the CTAs — same reading order on mobile and desktop, just
   scaled up on larger screens rather than reflowed into two columns. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-start; /* top-anchored, not vertically centered — keeps the
                               (now much bigger) logo pinned high, controlled via
                               padding-top rather than via the viewport midpoint */
  overflow: hidden;
  background: var(--pink);
  padding: 52px var(--pad) 60px; /* sits right at header height, per spec */
}
@media (min-width: 900px) { .hero { padding: 60px var(--pad) 72px; } }

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--white);
}
@media (min-width: 1200px) { .hero__inner { max-width: 1120px; } }

.hero__logo {
  height: 100px; width: auto; /* height-only + width:auto preserves aspect ratio, never stretched */
  /* logo-hero.png is a pre-colored variant (assets/images/logo.png is pink/blue
     on white, made for the light footer) — white MOTO/PIZZA/shapes, blue bars,
     baked in ahead of time since a CSS filter can only recolor the whole image
     uniformly and can't pick out just the two bars. */
  margin-bottom: 44px; /* clear gap down to the slogan, now that the logo sits up near the header */
}
@media (min-width: 900px) { .hero__logo { height: 156px; margin-bottom: 58px; } }

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 9.75vw, 3.75rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 100%;
}
@media (min-width: 900px) { .hero__title { font-size: clamp(2.25rem, 4.8vw, 5.1rem); gap: 8px; max-width: 900px; } }
@media (min-width: 1200px) { .hero__title { max-width: 1080px; } }
.hero__title span { display: block; }
.hero__title--outline {
  /* the site's original pre-brochure-font headline face (kept for this
     outline line only — the plain "CHEESE TO THE EDGE." span above still
     uses --font-display's current Good Times) */
  font-family: "Archivo Black", sans-serif;
  -webkit-text-stroke: 2px var(--blue);
  color: transparent;
}

.hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
@media (min-width: 900px) { .hero__actions { margin-top: 40px; } }
/* hero sits on solid pink — the shared .btn colours would vanish here, so
   the hero's own CTAs get an inverted (white-first) treatment, scoped to
   this section only */
.hero__actions .btn--solid { background: var(--white); color: var(--pink); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.28); }
.hero__actions .btn--solid:hover { background: var(--ink); color: var(--white); }
.hero__actions .btn--ghost { color: var(--white); box-shadow: inset 0 0 0 2px var(--white); }
.hero__actions .btn--ghost:hover { background: var(--white); color: var(--pink); }

/* ---------- Opening deal --------------------------------------------------
   Typography on the pink, not a card: no surface, no border, no shadow box.
   It borrows the hero headline's own devices so it reads as part of the
   original design rather than an insert — Good Times throughout, white as
   the primary, MOTO blue as the accent, and the same blue offset the
   outline headline line above it already uses.
   Compact by construction: two short lines beside the number instead of a
   stacked block, so the headline keeps the stage and the pizza gets its
   room back. Stays a flow element, so it can never cover anything. */
.hero__promo {
  position: relative; z-index: 2;
  margin: clamp(10px, 1.6vw, 18px) auto 0;
  display: inline-flex; align-items: center;
  gap: clamp(9px, 1.5vw, 15px);
  color: var(--white);
}
.hero__promo-value {
  display: inline-flex; align-items: center; gap: 0.16em;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.4vw, 3.9rem);
  line-height: 0.82;
  letter-spacing: -0.035em;
  color: var(--white);
  flex: none;
  /* the same blue that outlines "CRUNCH IN EVERY BITE." directly above,
     here as a hard offset — a decal edge, not a drop shadow */
  text-shadow: 0.045em 0.05em 0 var(--blue);
}
.hero__promo-pct { font-size: 0.58em; align-self: flex-start; margin-top: 0.12em; }
.hero__promo-bolt {
  width: 0.42em; height: 0.62em; flex: none;
  fill: var(--blue);
  transform: translateY(-0.02em);
  filter: drop-shadow(0 0 6px rgba(22, 163, 230, 0.55));
}
/* hairline instead of a rule: white at low alpha reads as a fold in the
   layout rather than a divider drawn on top of it */
.hero__promo-copy {
  display: flex; flex-direction: column; gap: 1px;
  padding-left: clamp(9px, 1.5vw, 15px);
  border-left: 1px solid rgba(255, 255, 255, 0.38);
  text-align: left;
}
.hero__promo-head {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.45vw, 0.9rem);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.hero__promo-sub {
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 1.25vw, 0.78rem);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  white-space: nowrap;
}
@media (max-width: 380px) {
  .hero__promo { gap: 8px; margin-top: 8px; }
  .hero__promo-copy { padding-left: 8px; }
}

.hero__product {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 14px;
  display: flex; align-items: center; justify-content: center;
}
@media (min-width: 900px) { .hero__product { margin-top: 18px; } }
.hero__product-img {
  width: 100%; height: auto;
  max-height: 46vh;
  object-fit: contain; /* full pizza, all four edges, never cropped or zoomed */
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.22));
}
@media (min-width: 900px) { .hero__product-img { max-height: 64vh; } }

.hero__scroll {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 2; width: 26px; height: 42px; border-radius: 100px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  display: flex; justify-content: center; padding-top: 8px;
}
.hero__scroll span { width: 4px; height: 8px; border-radius: 4px; background: var(--white); animation: scrollDot 1.6s ease infinite; }
@keyframes scrollDot { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 0; transform: translateY(14px); } 100% { opacity: 0; } }

/* extra-tight rhythm on short mobile screens so the complete pizza plus
   both buttons still land inside the first view without scrolling */
@media (max-width: 600px) {
  .hero { padding: 40px var(--pad) 40px; }
  .hero__logo { height: 76px; margin-bottom: 30px; }
  .hero__title { font-size: clamp(1.65rem, 8.1vw, 2.3rem); gap: 3px; }
  .hero__actions { margin-top: 20px; gap: 10px; }
  .hero__product { margin-top: 10px; }
  .hero__product-img { max-height: 42vh; }
}

/* ---- floating topping/parallax decorations ----
   Purely decorative, white line-art MOTO/mechanic icons (piston,
   speedometer, bearing, connecting rod, gear — see the <g id="icon-...">
   defs at the top of the hero section), styled after the brand's
   pink-background/white-icon pattern sheet. Kept white/cream only, not the
   pink/blue brand palette, which is reserved for UI.
   Sit behind .hero__inner (z-index 2) so they can never cover the
   logo/headline/pizza. Absolutely positioned (not fixed) inside the hero,
   so they scroll away with the section like everything else; js/main.js
   (initHeroToppingsParallax) layers an extra scroll-linked transform on
   top of each one — different speed/drift/rotation/scale per element —
   for the floating depth effect, taking over right where each one's
   entrance animation (below) lands. */
.hero__toppings {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__topping {
  position: absolute;
  aspect-ratio: 1 / 1;
  will-change: transform;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.2));
}
.hero__topping svg { display: block; width: 100%; height: 100%; }

/* size tiers: medium (the common/reference size), small — the mixed sizing
   is what gives the frame its depth instead of a flat ring of same-size
   icons. The former "large" corner tier (piston-4/1/6, speedo-3) matched
   the medium tier's width exactly on request, since it read as visibly
   oversized next to everything else. */
.hero__topping--piston-4        { top: 3%;     left: 2%;   width: clamp(54px, 7.2vw, 98px); --rest-rot: -8deg; }
.hero__topping--piston-1      { top: 4%;     right: 2%;  width: clamp(54px, 7.2vw, 98px); --rest-rot: 10deg; }
.hero__topping--piston-7     { top: 13%;    left: 3%;   width: clamp(54px, 7.2vw, 98px); --rest-rot: -14deg; }
.hero__topping--speedo-1      { top: 9%;     right: 15%; width: clamp(54px, 7.2vw, 98px); --rest-rot: 16deg; }
.hero__topping--pleuel-1      { top: 58%;    left: 32%;  width: clamp(32px, 4.5vw, 56px); --rest-rot: 20deg; }
.hero__topping--turbo-1       { top: 60%;    right: 33%; width: clamp(32px, 4.5vw, 56px); --rest-rot: -18deg; }
.hero__topping--speedo-3        { top: 19%;    right: 1%;  width: clamp(54px, 7.2vw, 98px); --rest-rot: -6deg; }
.hero__topping--piston-2      { top: 33%;    left: 2%;   width: clamp(54px, 7.2vw, 98px); --rest-rot: 9deg; }
.hero__topping--brakedisc-1   { top: 44%;    left: 15%;  width: clamp(32px, 4.5vw, 56px); --rest-rot: -12deg; }
.hero__topping--pleuel-2      { top: 46%;    right: 16%; width: clamp(32px, 4.5vw, 56px); --rest-rot: 15deg; }
.hero__topping--piston-5       { top: 39%;    right: 4%;  width: clamp(54px, 7.2vw, 98px); --rest-rot: -20deg; }
.hero__topping--speedo-4        { top: 41%;    left: 4%;   width: clamp(54px, 7.2vw, 98px); --rest-rot: 7deg; }
.hero__topping--speedo-2      { bottom: 26%; right: 3%;  width: clamp(54px, 7.2vw, 98px); --rest-rot: 11deg; }
.hero__topping--bearing-2     { bottom: 24%; left: 3%;   width: clamp(54px, 7.2vw, 98px); --rest-rot: -9deg; }
.hero__topping--piston-3      { bottom: 32%; right: 15%; width: clamp(54px, 7.2vw, 98px); --rest-rot: 13deg; }
.hero__topping--turbo-2       { bottom: 34%; left: 16%;  width: clamp(32px, 4.5vw, 56px); --rest-rot: -17deg; }
.hero__topping--piston-6        { bottom: 4%;  right: 5%;  width: clamp(54px, 7.2vw, 98px); --rest-rot: -10deg; }
.hero__topping--speedo-5       { bottom: 8%;  left: 5%;   width: clamp(54px, 7.2vw, 98px); --rest-rot: 14deg; }
.hero__topping--brakedisc-2   { top: 21%;    right: 27%; width: clamp(20px, 3vw, 36px);   --rest-rot: 25deg; }
.hero__topping--pleuel-3      { top: 55%;    left: 25%;  width: clamp(20px, 3vw, 36px);   --rest-rot: -22deg; }

/* tablet: drop the two exact-duplicate pieces first */
@media (max-width: 899px) {
  .hero__topping--speedo-3,
  .hero__topping--speedo-4 { display: none; }
}
/* phone: thin out a few more of the smallest/least central ones, but stay
   dense on purpose — the brief is explicit that mobile should NOT collapse
   back down to just 5-6 toppings */
@media (max-width: 599px) {
  .hero__topping--speedo-2,
  .hero__topping--bearing-2,
  .hero__topping--turbo-2,
  .hero__topping--brakedisc-2 { display: none; }
}

/* ---- hero entrance choreography (page-load only, not scroll-reveal) ----
   Runs automatically via CSS animation-delay, independent of JS. Fixed,
   deliberately sequential order (each stage mostly finishes before the
   next starts, so it reads as clear steps, not one simultaneous blob):
     1. headline (text first — line by line, punchy "bam" overshoot)
     2. pizza slides up from below, ease-out
     3. all 20 mechanic-icon toppings fall/fly in one at a time (most from
        above, several from the left/right for variety)
     4. buttons fade + slide up last
   The logo rides in quickly right at the very start (barely its own
   "beat") so it's present without competing with the headline as step 1.
   ~2.8s total. Each element's own "from" state (opacity 0 + offset) is
   set inside this same media query so nothing needs hiding via JS and
   there's no flash of the final state before the animation starts.
   Toppings hand off to js/main.js's scroll-parallax the moment their
   entrance ends (see initHeroToppingsParallax's "animationend" listener) —
   the keyframe's 100% state uses each element's own --rest-rot custom
   property so that handoff lands exactly where the JS-driven parallax
   would already have it, with no visible snap. */
@media (prefers-reduced-motion: no-preference) {
  .hero__logo { opacity: 0; animation: heroLogoIn 0.45s var(--ease) 0.05s both; }

  .hero__title span { opacity: 0; }
  .hero__title span:nth-child(1) { animation: heroLineIn 0.5s var(--ease-bam) 0.15s both; }
  .hero__title span:nth-child(2) { animation: heroLineIn 0.5s var(--ease-bam) 0.26s both; }

  /* slots into the existing beat between the headline (0.15/0.26s) and the
     pizza (0.78s), so the hero still reads strictly top to bottom */
  .hero__promo { opacity: 0; animation: heroPromoIn 0.5s var(--ease-bam) 0.45s both; }

  .hero__product { opacity: 0; animation: heroPizzaIn 0.62s var(--ease) 0.78s both; }

  /* toppings fall/fly in one at a time, only once the pizza has landed —
     most from above (heroToppingIn), several from the side for variety */
  .hero__topping { opacity: 0; animation: heroToppingIn 0.4s var(--ease) both; }
  .hero__topping--piston-4        { animation-delay: 1.40s; }
  .hero__topping--piston-1      { animation-delay: 1.44s; }
  .hero__topping--piston-7     { animation-delay: 1.48s; }
  .hero__topping--speedo-1      { animation-delay: 1.52s; animation-name: heroToppingInRight; }
  .hero__topping--pleuel-1      { animation-delay: 1.56s; }
  .hero__topping--turbo-1       { animation-delay: 1.60s; }
  .hero__topping--speedo-3        { animation-delay: 1.64s; }
  .hero__topping--piston-2      { animation-delay: 1.68s; animation-name: heroToppingInLeft; }
  .hero__topping--brakedisc-1   { animation-delay: 1.72s; }
  .hero__topping--pleuel-2      { animation-delay: 1.76s; }
  .hero__topping--piston-5       { animation-delay: 1.80s; }
  .hero__topping--speedo-4        { animation-delay: 1.84s; }
  .hero__topping--speedo-2      { animation-delay: 1.88s; }
  .hero__topping--bearing-2     { animation-delay: 1.92s; }
  .hero__topping--piston-3      { animation-delay: 1.96s; }
  .hero__topping--turbo-2       { animation-delay: 2.00s; }
  .hero__topping--piston-6        { animation-delay: 2.04s; animation-name: heroToppingInRight; }
  .hero__topping--speedo-5       { animation-delay: 2.08s; animation-name: heroToppingInLeft; }
  .hero__topping--brakedisc-2   { animation-delay: 2.12s; }
  .hero__topping--pleuel-3      { animation-delay: 2.16s; }

  .hero__actions { opacity: 0; animation: heroActionsIn 0.45s var(--ease) 2.4s both; }
}

@keyframes heroLogoIn {
  from { opacity: 0; transform: translateY(-22px) scale(0.86); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroLineIn {
  from { opacity: 0; transform: translateY(30px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroPizzaIn {
  from { opacity: 0; transform: translateY(64px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* one quiet arrival, then it stays put — deliberately no loop, no pulse,
   no blink: the card earns attention through contrast, not motion */
@keyframes heroPromoIn {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroActionsIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* falls in from clearly above its resting spot — a controlled drop, not a
   chaotic tumble, so no extra spin beyond settling into --rest-rot */
@keyframes heroToppingIn {
  from { opacity: 0; transform: translateY(-100px) scale(0.6) rotate(calc(var(--rest-rot) - 8deg)); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(var(--rest-rot)); }
}
/* the handful of toppings that fly in from the side instead of above */
@keyframes heroToppingInLeft {
  from { opacity: 0; transform: translateX(-90px) scale(0.6) rotate(calc(var(--rest-rot) - 8deg)); }
  to   { opacity: 1; transform: translateX(0) scale(1) rotate(var(--rest-rot)); }
}
@keyframes heroToppingInRight {
  from { opacity: 0; transform: translateX(90px) scale(0.6) rotate(calc(var(--rest-rot) - 8deg)); }
  to   { opacity: 1; transform: translateX(0) scale(1) rotate(var(--rest-rot)); }
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee {
  background: var(--pink);
  color: var(--white);
  overflow: hidden;
  padding: 16px 0;
  transform: rotate(-1.2deg) scale(1.02);
}
.marquee__track {
  display: flex; width: max-content; gap: 28px; white-space: nowrap;
  font-family: var(--font-ticker);
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  text-transform: uppercase;
  animation: marquee 26s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { display: inline-flex; align-items: center; gap: 28px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   STATEMENT
   ========================================================================== */
.statement { padding: min(14vw, 160px) var(--pad) min(12vw, 130px); }
.statement__text {
  max-width: 980px; margin: 0 auto; text-align: center;
  font-family: var(--font-head); font-weight: 500;
  font-size: clamp(1.5rem, 4.2vw, 2.8rem);
  line-height: 1.25;
}
/* Good Times is wider per-glyph than AdelleSansARA — on narrow phones the
   nowrap highlighted phrases (.hl) can now overrun the viewport. Only this
   statement's phrases are long enough to hit that; let them wrap here
   instead of loosening .hl's nowrap everywhere (which exists for the
   shorter brand phrases like "MOTOR CITY" that should stay on one line). */
@media (max-width: 420px) {
  .statement__text .hl { white-space: normal; }
}

/* ==========================================================================
   MENU
   ========================================================================== */
/* clean white MOTO background with two flat, crisp brand-colour accents —
   no blur/glow, no dark fields, no dot pattern. Rounded top corners echo
   the same "lift over the section above" trick used elsewhere (e.g.
   .detroit); content stays constrained via .menu__inner */
.menu {
  position: relative;
  overflow: hidden;
  border-radius: 40px 40px 0 0;
  padding: 90px 0 100px;
  background: var(--white);
}

.menu__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.menu__block { position: absolute; border-radius: 50%; }
.menu__block--pink {
  top: -16%; left: -12%; width: 46vw; height: 46vw; max-width: 560px; max-height: 560px;
  background: var(--pink); opacity: 0.08;
}
.menu__block--blue {
  bottom: -18%; right: -10%; width: 50vw; height: 50vw; max-width: 600px; max-height: 600px;
  background: var(--blue); opacity: 0.08;
}

.menu__inner { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }

.menu__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 56px;
}
.menu__note { max-width: 320px; color: rgba(20, 17, 22, 0.6); font-size: 1rem; }

/* ---- interactive pizza selector ---- */
/* every pizza sits on a full, flat brand-colour card that alternates
   pink/blue with the active slide — no dark background, no glow blobs,
   no dot pattern */
.selector {
  /* pizza should be the section's clear visual centerpiece. Sized up twice:
     first from the original 66/56/40%, then again to today's values so the
     active pizza reads as the immediate focal point of the whole section.
     The frame's height/width ratio (js/main.js measure()) matches the pizza
     photos' own landscape ratio, so a width increase here translates
     directly into a bigger pizza, not just a bigger empty card.
     Ceiling: the source PNGs are 1100x665, so on a 2x display the rendered
     width should stay near/below 550px per 1x to remain pixel-sharp — the
     desktop value deliberately trades a little of that for presence. */
  --slide-w: 110%;
  --tone-accent: var(--pink);
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 56px 0 44px;
  transition: background 0.5s ease, box-shadow 0.5s ease;
  box-shadow: 0 30px 70px -34px color-mix(in srgb, var(--tone-accent) 50%, transparent);
}
@media (min-width: 700px)  { .selector { --slide-w: 90%; } }
@media (min-width: 1000px) { .selector { --slide-w: 73%; padding: 72px 0 56px; } }

.selector[data-tone="pink"] { --tone-accent: var(--pink); background: var(--pink); }
.selector[data-tone="blue"] { --tone-accent: var(--blue); background: var(--blue); }

.selector__stage {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end;
  padding: 0 var(--pad);
  outline: none;
}

/* the arc's viewport: slides are absolutely positioned, anchored to the
   bottom (the circle's lowest/frontmost point, where the active pizza
   sits), and placed/rotated/scaled entirely by js/main.js (per-frame,
   driven by drag position) using plain 2D transforms only — no perspective
   or 3D, deliberately. No CSS transition here either: the JS rAF loop *is*
   the animation, for both live dragging and the momentum/snap settle.
   Height and each slide's height are set inline by measure() in js/main.js. */
.selector__track {
  position: relative;
  width: 100%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.selector__track.is-dragging { cursor: grabbing; }

.selector__slide {
  position: absolute; left: 50%; bottom: 0;
  width: var(--slide-w);
  margin-left: calc(var(--slide-w) / -2);
  will-change: transform, opacity;
  pointer-events: none;
}

.selector__frame {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.selector__ring {
  position: absolute; inset: 6%;
  border: 2px dashed rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  animation: selectorSpin 34s linear infinite;
}
@keyframes selectorSpin { to { transform: rotate(360deg); } }
.selector__frame img {
  /* fill almost the whole frame — object-fit:contain guarantees the full
     pizza (all four corners, full crust) stays visible with no crop, no
     stretch, just a small safety margin against the card edge. 98% rather
     than the old 92%: the margin only has to keep the drop-shadow off the
     card edge, and the reclaimed 6% goes straight into pizza size. */
  max-width: 98%; max-height: 98%;
  width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.25));
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.selector__arrow {
  position: absolute; top: 50%; z-index: 2;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  transition: background 0.3s var(--ease), transform 0.2s var(--ease), color 0.3s var(--ease);
}
.selector__arrow--prev { left: 4px; }
.selector__arrow--next { right: 4px; }
.selector__arrow:hover { background: var(--white); color: var(--tone-accent); }
.selector__arrow:active { transform: translateY(-50%) scale(0.88); }
@media (min-width: 640px) {
  .selector__arrow--prev { left: 14px; }
  .selector__arrow--next { right: 14px; }
}
@media (max-width: 640px) { .selector__arrow { width: 34px; height: 34px; } }

.selector__panel {
  position: relative; z-index: 1;
  /* the enlarged pizza sits flush at the track's bottom edge, so the old
     36px left the index/category lines crowding it — a bigger pizza needs
     a proportionally bigger gap to keep reading as a separate block */
  max-width: 640px; margin: 44px auto 0; padding: 0 var(--pad);
  text-align: center; color: var(--white);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
@media (min-width: 1000px) { .selector__panel { margin-top: 60px; } }
.selector__panel.is-changing { opacity: 0; transform: translateY(8px); }

.selector__index {
  font-family: var(--font-head); font-weight: 600; letter-spacing: 0.1em;
  font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 14px;
}
.selector__category {
  font-family: var(--font-head); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; font-size: 0.85rem; color: var(--white);
  margin-bottom: 10px;
}
.selector__name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1; letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.selector__short {
  font-size: 1.02rem; line-height: 1.6; color: rgba(255, 255, 255, 0.88);
  margin-bottom: 18px;
}
.selector__ingredients {
  font-size: 0.9rem; line-height: 1.6; color: rgba(255, 255, 255, 0.72);
  margin-bottom: 22px;
}
.selector__ingredients span:first-child {
  display: block; font-family: var(--font-head); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.58); margin-bottom: 6px;
}
.selector__price {
  font-family: var(--font-display); font-size: 1.6rem; color: var(--white);
}

/* ==========================================================================
   SNACKS / GETRÄNKE — shared product-grid card component
   Two lightweight, non-carousel sections between the pizza selector and the
   Detroit-style story. Same light/white design language, own section per
   category (kept visually and structurally separate from the 10 pizzas).
   ========================================================================== */
.snacks, .drinks {
  padding: 70px 0;
  background: var(--white);
}
.drinks { background: var(--cream-dim); }

.snacks__inner, .drinks__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--pad);
}

.products__head { margin-bottom: 40px; }
.products__note { max-width: 420px; margin-top: 12px; color: rgba(20, 17, 22, 0.6); font-size: 1rem; }

/* Misu is a second, separate concept surfaced inside the Snacks section —
   its logo rides right next to the section title, sized a step below the
   headline's own cap-height so it reads as a guest badge, not a rebrand. */
/* nowrap, not wrap: the badge must stay on the headline's line at every
   width — dropping to its own line reads as a second heading. To make that
   safe on narrow phones both items get a lower floor than their shared
   defaults (title 2.6rem, logo 53px); the upper ends are unchanged, so
   DESSERT still matches PIZZEN and GETRÄNKE on desktop. */
.snacks__title-row { display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(10px, 2.5vw, 20px); }
.snacks__title-row .section-title { flex: none; white-space: nowrap; font-size: clamp(1.85rem, 7vw, 5.2rem); }
.snacks__misu-logo { flex: none; height: clamp(32px, 9.6vw, 95px); width: auto; display: block; }

.product-card__price.product-card__price--soon { color: rgba(20, 17, 22, 0.45); font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; }

/* Horizontal swipe row — native scroll-snap, no JS. Works the same way on
   touch (drag/momentum/snap all handled by the browser) and on desktop
   (trackpad/shift+wheel/click-drag scroll). One single row always, at every
   viewport width — never wraps to a second row. The next card always peeks
   in slightly at the edge so it's obvious there's more to swipe to. */
.product-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.product-grid::-webkit-scrollbar { display: none; }

.product-card {
  background: var(--cream-dim);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 260px;
}
.product-grid--drinks .product-card { width: 172px; }
.drinks .product-card { background: var(--white); }
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -22px rgba(20, 17, 22, 0.25);
}

.product-card__media {
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  /* without this, the flex item's automatic min-height (based on the img's
     intrinsic size) wins over aspect-ratio, so taller source photos made
     their card's media box taller than shorter ones — the root cause of
     the drinks row looking uneven. Pinning min to 0 lets aspect-ratio
     alone decide the box size for every card, uniformly. */
  min-width: 0;
  min-height: 0;
}
.product-grid--drinks .product-card__media { aspect-ratio: 1 / 1; padding: 16px; }
.product-card__media img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 14px 20px rgba(20, 17, 22, 0.16));
}

/* flex column + the price's margin-top:auto below is what pins price to
   the same baseline on every card — .product-card is stretched to the
   tallest card's height by .product-grid's row layout, so this column
   always has the same amount of vertical room to distribute regardless
   of how long an individual name/tag/desc happens to be. */
.product-card__body { padding: 4px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.product-card__name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.3rem; line-height: 1.1; margin-bottom: 4px;
}
.product-card__tag {
  font-family: var(--font-head); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; font-size: 0.72rem; color: var(--blue);
  margin-bottom: 10px;
}
.product-card__desc {
  font-size: 0.92rem; line-height: 1.55; color: rgba(20, 17, 22, 0.68);
  margin-bottom: 14px;
}
.product-card__price {
  font-family: var(--font-display); font-size: 1.2rem; color: var(--pink);
  margin-top: auto;
}
/* deposit sits under the price as a quiet footnote — body face, not the
   display face, and the same muted ink as the description, so it reads as
   fine print rather than a second price. `margin-top: auto` above already
   pinned the price to the card's bottom; this line rides along with it. */
.product-card__deposit {
  font-family: var(--font-body); font-size: 0.72rem; line-height: 1.3;
  color: rgba(20, 17, 22, 0.55);
  margin-top: 3px;
}

/* mobile: viewport-relative card widths — always ~1.3–2.3 cards visible
   with a clear peek of the next one, regardless of exact phone width */
@media (max-width: 640px) {
  .product-grid { gap: 12px; }
  .product-card { width: 68vw; max-width: 260px; border-radius: 16px; }
  .product-grid--drinks .product-card { width: 56vw; max-width: 210px; }
  .product-card__media,
  .product-grid--drinks .product-card__media {
    aspect-ratio: 1 / 1;
    padding: 10px;
  }
  .product-card__body { padding: 2px 10px 14px; }
  .product-card__name { font-size: 0.92rem; line-height: 1.15; margin-bottom: 2px; }
  .product-card__tag { font-size: 0.58rem; letter-spacing: 0.06em; margin-bottom: 6px; }
  .product-card__desc {
    font-size: 0.74rem; line-height: 1.35; margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .product-card__price { font-size: 0.92rem; }
  .product-card__deposit { font-size: 0.6rem; margin-top: 2px; }
}

/* ==========================================================================
   DETROIT STYLE FEATURE
   ========================================================================== */
.detroit {
  background: var(--white);
  color: var(--ink);
  padding: 120px 0 0;
  border-radius: 40px 40px 0 0;
  overflow: hidden;
}

.detroit__head { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
.detroit__kicker {
  font-family: var(--font-head); font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; font-size: 0.8rem; color: var(--blue);
  margin-bottom: 22px;
}
.detroit__kicker span { color: var(--pink); margin-right: 10px; }
.detroit .section-title { margin: 0 0 20px; }

/* ---- feature rows ---- */
.feature-list {
  max-width: var(--container); margin: 56px auto 0; padding: 0 var(--pad);
}

.feature {
  --accent: var(--pink);
  --accent2: var(--blue);
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
  padding: 56px 0;
}
.feature + .feature { border-top: 1px solid rgba(20, 17, 22, 0.12); }
.feature--blue { --accent: var(--blue); --accent2: var(--pink); }

/* direction-aware reveal: slide in from the side instead of the default translateY */
.feature[data-reveal] { transform: translateX(-36px); }
.feature--reverse[data-reveal] { transform: translateX(36px); }
.feature[data-reveal].is-visible { transform: translateX(0); }

@media (min-width: 860px) {
  .feature { grid-template-columns: 1fr 1fr; gap: 80px; padding: 100px 0; }
  .feature--reverse .feature__media { order: 2; }
  .feature--reverse .feature__content { order: 1; }
}

.feature__media {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cream-dim);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
@media (min-width: 860px) { .feature__media { aspect-ratio: 4 / 5; } }
/* object-fit: contain (not cover) + padding, so the full pizza — all four
   corners — is always visible here, never cropped into a close-up. */
.feature__media img {
  width: 100%; height: 100%; object-fit: contain; padding: 28px; box-sizing: border-box;
  transition: transform 0.8s var(--ease);
}
.feature:hover .feature__media img { transform: scale(1.03); }
.feature:hover .feature__media {
  box-shadow: 0 30px 70px -24px color-mix(in srgb, var(--accent) 45%, transparent);
}

.feature__corner { position: absolute; width: 32px; height: 32px; pointer-events: none; }
.feature__corner--tl { top: 14px; left: 14px; border-top: 3px solid var(--accent); border-left: 3px solid var(--accent); border-radius: 6px 0 0 0; }
.feature__corner--br { bottom: 14px; right: 14px; border-bottom: 3px solid var(--accent2); border-right: 3px solid var(--accent2); border-radius: 0 0 6px 0; }

.feature__content { max-width: 480px; }
.feature__num {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(3.6rem, 9vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 2px var(--accent);
  color: transparent;
  margin-bottom: 4px;
}
.feature__eyebrow {
  font-family: var(--font-head); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; font-size: 0.85rem; color: var(--accent);
  margin-bottom: 16px;
}
.feature__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.08;
  margin-bottom: 20px;
}
.feature__text { font-size: 1rem; line-height: 1.75; color: rgba(20, 17, 22, 0.68); }

/* ---- closing statement ---- */
.detroit__statement {
  max-width: var(--container); margin: 0 auto; padding: 90px var(--pad) 130px;
  text-align: center;
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.2rem, 8vw, 5.6rem);
  line-height: 1.04;
  border-top: 1px solid rgba(20, 17, 22, 0.12);
}
.detroit__statement-line { display: block; }
.detroit__statement-line [data-reveal] { display: inline-block; }
/* original pre-brochure-font headline face, kept for these two outline
   lines only — the fill line below ("100% DETROIT STYLE.") still uses
   --font-display's current Good Times */
.detroit__statement-line--outline-blue { font-family: "Archivo Black", sans-serif; -webkit-text-stroke: 2px var(--blue); color: transparent; }
.detroit__statement-line--outline-pink { font-family: "Archivo Black", sans-serif; -webkit-text-stroke: 2px var(--pink); color: transparent; }
.detroit__statement-line--fill { color: var(--ink); margin-top: 8px; }

/* ==========================================================================
   ABOUT / BRAND STORY
   ========================================================================== */
.about {
  background: var(--cream-dim);
  color: var(--ink);
  padding: min(20vw, 160px) var(--pad) min(16vw, 130px);
  position: relative;
  overflow: hidden;
}
.about__inner { max-width: 900px; margin: 0 auto; text-align: center; }

.about__kicker {
  font-family: var(--font-head); font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; font-size: 0.8rem; color: var(--blue);
  margin-bottom: 22px;
}
.about__kicker span { color: var(--pink); margin-right: 10px; }

.about__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 52px;
}

.about__lede {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.25rem, 2.8vw, 1.7rem);
  line-height: 1.45;
  max-width: 680px;
  margin: 0 auto 28px;
}

.about__body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(20, 17, 22, 0.68);
  max-width: 620px;
  margin: 0 auto;
}
.about__body--center { margin-top: 72px; }

.about__bridge {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.6rem, 8vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 88px 0 60px;
}

.about__rule {
  width: 110px; height: 3px; margin: 0 auto 88px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pink), var(--blue), var(--pink));
  background-size: 220% 100%;
  animation: aboutRuleShift 5s linear infinite;
}
@keyframes aboutRuleShift { to { background-position: -220% 0; } }

.about__standalone {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  line-height: 1.3;
  max-width: 640px;
  margin: 40px auto 28px;
}

.about__marks {
  list-style: none; margin: 80px auto 0; padding: 0;
  max-width: 760px;
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid rgba(20, 17, 22, 0.14);
  text-align: left;
}
@media (min-width: 640px) { .about__marks { grid-template-columns: 1fr 1fr; } }
.about__marks li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 22px 6px;
  border-bottom: 1px solid rgba(20, 17, 22, 0.14);
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
}
.about__marks li span { color: var(--blue); font-size: 0.82rem; font-weight: 700; }

.about__finale {
  margin-top: 100px;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.6rem, 9vw, 6.8rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.about__finale-line { display: block; }
.about__finale-line [data-reveal] { display: inline-block; }
/* original pre-brochure-font headline face, kept for this outline line
   only — the plain "DETROIT GEBAUT." and fill "MOTO GEMACHT." lines still
   use --font-display's current Good Times */
.about__finale-line--outline { font-family: "Archivo Black", sans-serif; -webkit-text-stroke: 2px var(--pink); color: transparent; }
.about__finale-line--fill { color: var(--blue); }

/* ==========================================================================
   ALLERGEN LINE (per product) + ALLERGENE & ZUSATZSTOFFE key
   The per-product line is deliberately quiet — it is reference information,
   not a selling point, so it sits below the description at the smallest size
   on the card and never competes with name, tag or price. The "noch zu
   bestätigen" half is set apart (lighter, italic) so it reads as a caveat on
   the codes rather than as another code.
   ========================================================================== */
.allergen {
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(20, 17, 22, 0.5);
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}
/* one row per category ("Allergene: …", "Zusatzstoffe: …"), each on its own
   line and always in this order, so the block starts at the same place on
   every card no matter how many codes an item carries */
.allergen__row { display: block; }
.allergen__label { font-weight: 400; }
.allergen__codes { font-weight: 700; color: rgba(20, 17, 22, 0.62); letter-spacing: 0.03em; }
.allergen__pending { font-style: italic; color: rgba(20, 17, 22, 0.42); }

/* on the pink/blue pizza card the same line has to invert to stay legible */
.selector__allergens .allergen { color: rgba(255, 255, 255, 0.6); margin-bottom: 18px; font-size: 0.78rem; }
.selector__allergens .allergen__codes { color: rgba(255, 255, 255, 0.82); }
.selector__allergens .allergen__pending { color: rgba(255, 255, 255, 0.55); }

/* mobile product cards clamp the description to two lines and shrink every
   other element — the allergen line follows suit so cards keep their height */
@media (max-width: 640px) {
  .product-card .allergen { font-size: 0.62rem; line-height: 1.35; margin-bottom: 8px; }
}

/* ---- the standalone Allergene & Zusatzstoffe page (allergene.html) ----
   A separate document rather than a hidden section: the menu page stays short,
   the key gets its own URL, and the browser's back button just works. It
   reuses this stylesheet wholesale, so there is no second set of brand values
   to keep in sync — only the few page-chrome rules below are its own. */
.page-allergens,
.page-subpage { background: var(--white); }

.subpage__nav {
  border-bottom: 1px solid rgba(20, 17, 22, 0.08);
  background: var(--cream);
}
.subpage__nav-inner {
  max-width: var(--container); margin: 0 auto; padding: 16px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.subpage__logo { height: 38px; width: auto; display: block; }
.subpage__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: 0.9rem;
  color: var(--pink);
}
.subpage__back:hover { color: var(--pink-dim); }
.subpage__back svg { flex: none; }

.subpage__footer {
  padding: 30px var(--pad) 40px; text-align: center;
  font-size: 0.75rem; color: rgba(20, 17, 22, 0.4);
}

/* shared page head for the FAQ and Karriere subpages — same rhythm as the
   Allergene page so all three read as one family */
.subpage__kicker {
  font-family: var(--font-head); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 0.72rem; color: var(--pink); margin-bottom: 14px;
}
.subpage__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.05; letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.subpage__lede {
  max-width: 560px; margin-bottom: 44px;
  font-size: 1rem; line-height: 1.6; color: rgba(20, 17, 22, 0.6);
}
.subpage__back-cta { margin-top: 48px; }

/* ==========================================================================
   FAQ (faq.html)
   Native <details>/<summary> accordion — the marker is replaced by a drawn
   plus/minus so it can pick up the brand pink and rotate on open.
   ========================================================================== */
.faq { padding: 70px 0 90px; }
.faq__inner { max-width: 820px; margin: 0 auto; padding: 0 var(--pad); }

.faq__list { border-top: 1px solid rgba(20, 17, 22, 0.12); }
.faq__item { border-bottom: 1px solid rgba(20, 17, 22, 0.12); }

.faq__q {
  list-style: none;                 /* kills the default triangle (Firefox) */
  cursor: pointer;
  display: flex; align-items: flex-start; gap: 18px;
  padding: 20px 0;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(0.95rem, 2.2vw, 1.08rem);
  line-height: 1.4;
  transition: color 0.25s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }   /* …and in Safari/Chrome */
.faq__q:hover { color: var(--pink); }

/* the +/− sign: one bar always, a second one that hides when open */
.faq__q::after {
  content: "";
  flex: none; margin-left: auto;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--pink), var(--pink)) center/14px 2px no-repeat,
    linear-gradient(var(--pink), var(--pink)) center/2px 14px no-repeat;
  transition: transform 0.3s var(--ease);
  margin-top: 4px;
}
.faq__item[open] .faq__q::after {
  background: linear-gradient(var(--pink), var(--pink)) center/14px 2px no-repeat;
  transform: rotate(180deg);
}
.faq__item[open] .faq__q { color: var(--pink); }

.faq__a {
  padding: 0 32px 22px 0;
  font-size: 0.95rem; line-height: 1.65; color: rgba(20, 17, 22, 0.68);
  max-width: 620px;
}
.faq__a a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.faq__a a:hover { color: var(--pink); }

@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__a { animation: faqOpen 0.3s var(--ease); }
  @keyframes faqOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* ==========================================================================
   KARRIERE (karriere.html) — intro + application form
   ========================================================================== */
.career { padding: 70px 0 40px; }
.career__inner { max-width: 820px; margin: 0 auto; padding: 0 var(--pad); }
.career__title { font-size: clamp(2.2rem, 7vw, 4.2rem); line-height: 1; }
.career__lede {
  max-width: 620px; margin: 22px 0 0;
  font-size: clamp(1rem, 2.2vw, 1.15rem); line-height: 1.6; color: rgba(20, 17, 22, 0.7);
}
.career__cta { margin-top: 34px; }

.career-form { padding: 40px 0 100px; background: var(--white); }
.career-form__inner { max-width: 820px; margin: 0 auto; padding: 0 var(--pad); }
.career-form__title {
  font-family: var(--font-display); text-transform: uppercase;
  /* "BEWERBUNGSFORMULAR" is one long unbreakable word in a wide display face;
     sized so it clears a 375px viewport, with hyphenation as the safety net
     for anything narrower */
  font-size: clamp(1.25rem, 5.2vw, 2.1rem); line-height: 1.1;
  hyphens: auto;
  margin-bottom: 10px;
}
.career-form__note { font-size: 0.88rem; color: rgba(20, 17, 22, 0.55); margin-bottom: 26px; }
.req { color: var(--pink); font-weight: 700; }

/* the "not wired up yet" banner, and the same styling for the post-submit
   message — both are statements of fact, so they get the loud blue rail */
.career-form__status {
  border-left: 3px solid var(--blue);
  background: var(--cream-dim);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  font-size: 0.9rem; line-height: 1.55; color: rgba(20, 17, 22, 0.75);
}
.career-form__status--setup { margin-bottom: 36px; }
.career-form__status--result { margin-top: 24px; border-left-color: var(--pink); }

/* Submit outcomes. Three states, all drawn from the existing token set — no
   new colours introduced: blue for a clean success, the crust orange for
   "record saved but the CV did not make it", pink for an outright failure.
   The rail colour is the only thing that differs, so the box keeps the same
   shape and weight it already had. */
.career-form__status--success { border-left-color: var(--blue); }
.career-form__status--partial { border-left-color: var(--crust); }
.career-form__status--error   { border-left-color: var(--pink); }
.career-form__status strong   { color: var(--ink); }

.cform__hint--error { color: var(--pink-dim); font-weight: 600; }

.cform__group { border: 0; padding: 0; margin: 0 0 38px; }
.cform__legend {
  font-family: var(--font-head); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 0.78rem; color: var(--blue);
  padding: 0; margin-bottom: 16px;
}

.cform__field { margin-bottom: 18px; }
.cform__field label {
  display: block; margin-bottom: 7px;
  font-size: 0.9rem; font-weight: 600; color: rgba(20, 17, 22, 0.8);
}
.cform__optional { font-weight: 400; color: rgba(20, 17, 22, 0.45); }

.cform__field input,
.cform__field select,
.cform__field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid rgba(20, 17, 22, 0.14);
  border-radius: 14px;
  padding: 13px 16px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.cform__field textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.cform__field select { appearance: none; cursor: pointer;
  /* chevron drawn in CSS so no extra asset is needed */
  background-image: linear-gradient(45deg, transparent 50%, rgba(20,17,22,0.5) 50%), linear-gradient(135deg, rgba(20,17,22,0.5) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.cform__field input:focus,
.cform__field select:focus,
.cform__field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(236, 30, 141, 0.14);
}
/* :user-invalid, not :invalid — the latter would paint every required field
   red the moment the page loads, before anyone has typed anything */
.cform__field input:user-invalid,
.cform__field select:user-invalid { border-color: var(--pink-dim); }

.cform__field input[type="file"] {
  padding: 11px 14px; cursor: pointer; background: var(--cream);
}
.cform__hint { margin-top: 7px; font-size: 0.8rem; color: rgba(20, 17, 22, 0.5); }
.cform__hint--picked { color: var(--blue); font-weight: 600; }

/* single column on phones, two where there is room — the pairs are short
   fields (phone/e-mail, hours/shift) that read better side by side */
.cform__row { display: grid; gap: 0 18px; }
@media (min-width: 620px) { .cform__row { grid-template-columns: 1fr 1fr; } }

.cform__checks { margin: 30px 0 34px; display: grid; gap: 14px; }
.cform__check {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.92rem; line-height: 1.5; color: rgba(20, 17, 22, 0.75);
  cursor: pointer;
}
.cform__check input {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  accent-color: var(--pink); cursor: pointer;
}
.cform__submit { width: 100%; }
@media (min-width: 620px) { .cform__submit { width: auto; } }

.allergens {
  background: var(--white);
  padding: 70px 0 90px;
}
.allergens__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
.allergens__kicker {
  font-family: var(--font-head); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 0.72rem; color: var(--pink); margin-bottom: 14px;
}
.allergens__lede {
  max-width: 560px; margin-bottom: 40px;
  font-size: 1rem; line-height: 1.6; color: rgba(20, 17, 22, 0.6);
}
.allergens__back-cta { margin-top: 44px; }
.allergens__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}
.allergens__subtitle {
  font-family: var(--font-head); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 0.85rem; color: var(--blue);
  margin: 34px 0 14px;
}
/* two balanced columns on wide screens, one on phones — plain grid, so the
   list keeps its reading order either way */
.allergens__cols { display: grid; gap: 0 48px; }
@media (min-width: 800px) { .allergens__cols { grid-template-columns: 1fr 1fr; } }

.allergens__list { display: grid; gap: 10px; }
.allergens__list > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: baseline;
  gap: 12px;
}
.allergens__list dt {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--pink);
  line-height: 1.4;
}
.allergens__list dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(20, 17, 22, 0.72);
}
.allergens__list--additives dt { color: var(--blue); }

.allergens__note {
  margin-top: 30px;
  max-width: 720px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(20, 17, 22, 0.55);
}
.allergens__note em { font-style: italic; }

/* ==========================================================================
   GALLERY STRIP
   ========================================================================== */
.gallery { background: var(--cream-dim); padding: 4px 0 110px; overflow: hidden; }
.gallery__track { display: flex; width: max-content; gap: 18px; animation: galleryScroll 40s linear infinite; }
.gallery:hover .gallery__track { animation-play-state: paused; }
/* landscape 3:2 cards, was 260x320 portrait: the campaign photographs are
   1536x1024 (four) and 1448x1086 (two), so a portrait frame would have
   cover-cropped roughly 46% of their width — exactly where the MOTO car,
   the pink box and the shopfront sign sit. At 3:2 the four wide frames fit
   with no crop at all and the two 4:3 ones lose ~11% top and bottom, where
   nothing brand-relevant is. No white card and no padding any more: each
   photo already brings its own background and fills the frame edge to edge.
   object-position is set per image inline by renderGallery(). */
.gallery__item { width: 420px; height: 280px; border-radius: 18px; overflow: hidden; flex: none; box-shadow: 0 4px 20px -8px rgba(20, 17, 22, 0.15); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes galleryScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* phones: same 3:2 shape, scaled to the viewport so the motif stays fully
   readable instead of shrinking into a stamp */
@media (max-width: 640px) {
  .gallery__track { gap: 12px; }
  .gallery__item { width: 78vw; max-width: 330px; height: calc(78vw / 1.5); max-height: 220px; border-radius: 14px; }
}

/* ==========================================================================
   ORDER / LOCATION
   ========================================================================== */
.order { padding: 130px var(--pad) 140px; }
.order__inner { max-width: var(--container); margin: 0 auto; }
.order__grid {
  margin-top: 56px;
  display: grid; grid-template-columns: 1fr; gap: 40px;
}
@media (min-width: 760px) { .order__grid { grid-template-columns: 1fr 1fr; align-items: center; } }

.order__row {
  display: flex; gap: 20px; padding: 18px 0;
  border-bottom: 1px solid rgba(20,17,22,0.12);
  font-family: var(--font-head); font-size: 1.05rem;
}
.order__row span { flex: 0 0 130px; color: rgba(20,17,22,0.5); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 3px; }

.order__actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
@media (min-width: 500px) { .order__actions { flex-direction: row; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--white); color: var(--ink);
  padding: 56px var(--pad) 40px;
  text-align: center;
  border-top: 1px solid rgba(20, 17, 22, 0.08);
}
/* on the old dark footer this was forced white via brightness(0) invert(1);
   on the new white footer the logo shows in its own natural color instead */
.footer__logo { height: 40px; margin: 0 auto 20px; opacity: 0.9; }
.footer__meta { font-size: 0.85rem; color: rgba(20,17,22,0.6); }
.footer__demo { margin-top: 6px; font-size: 0.75rem; color: rgba(20,17,22,0.4); }

/* ==========================================================================
   Magnetic buttons (JS adds inline transform on mousemove)
   ========================================================================== */
.magnetic { will-change: transform; }

/* ==========================================================================
   DEIN STORE / Franchise — tighter, denser variant of the shared form
   Every rule here is scoped to .page-franchise on <body>. The careers form
   uses the same .cform classes and must keep its existing rhythm, so nothing
   above is modified — this only adds an override layer for the one page.
   ========================================================================== */

/* sections closer together, but still clearly separated */
.page-franchise .cform__group { margin-bottom: 26px; }
.page-franchise .cform__field { margin-bottom: 14px; }
.page-franchise .cform__row { gap: 0 16px; }

/* section headings carry more weight: larger, with a short pink rule that
   picks up the brand accent without introducing a new colour */
.page-franchise .cform__legend {
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(20, 17, 22, 0.1);
  position: relative;
  width: 100%;
}
.page-franchise .cform__legend::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 42px; height: 2px;
  background: var(--pink);
}

/* one uniform control height across inputs, selects and the file field, so a
   two-column row never looks ragged */
.page-franchise .cform__field input,
.page-franchise .cform__field select {
  height: 48px;
  padding-top: 0;
  padding-bottom: 0;
}
.page-franchise .cform__field input[type="file"] {
  padding-top: 11px;
  line-height: 24px;
}
/* a native date input carries its own intrinsic height (spinner/calendar
   affordances) and sits ~2px taller than the rest, which shows immediately
   when it shares a row with a text field — strip the native appearance so it
   honours the height above */
.page-franchise .cform__field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 0;
}
/* textareas keep the full column width and a common minimum */
.page-franchise .cform__field textarea {
  width: 100%;
  min-height: 96px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.page-franchise .cform__field label { margin-bottom: 6px; }
/* labels in a two-column row wrap to different line counts; pinning the field
   to a grid row bottom keeps both inputs on the same baseline */
@media (min-width: 620px) {
  .page-franchise .cform__row { align-items: end; }
}

.page-franchise .cform__hint--muted {
  margin-top: 4px;
  font-size: 0.76rem;
  color: rgba(20, 17, 22, 0.45);
  line-height: 1.45;
}

.page-franchise .cform__checks { margin: 24px 0 28px; }

/* the submit is the one thing that should not shrink — give it more presence */
.page-franchise .cform__submit {
  width: 100%;
  margin-top: 4px;
  box-shadow: 0 14px 30px -12px rgba(236, 30, 141, 0.6);
}
@media (min-width: 620px) {
  .page-franchise .cform__submit { width: auto; min-width: 320px; }
}

/* ---- Dein Store: step chrome ----
   Progress line + step navigation. Uses only existing tokens; the bar is the
   brand pink on the same cream-dim the cards already use. Scoped to
   .page-franchise like the rest of this block. */
.page-franchise .fsteps__head { margin: 4px 0 22px; }
.page-franchise .fsteps__count {
  font-family: var(--font-head); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 0.72rem; color: var(--pink);
  margin-bottom: 10px;
}
.page-franchise .fsteps__bar {
  height: 4px; border-radius: 999px;
  background: var(--cream-dim);
  overflow: hidden;
}
.page-franchise .fsteps__fill {
  display: block; height: 100%; width: 14.28%;
  background: var(--pink);
  border-radius: 999px;
  transition: width 0.45s var(--ease);
}

/* one step is on screen at a time, so it gets room to breathe again — the
   cramped 26px only made sense when all seven were stacked */
.page-franchise .fstep { margin-bottom: 30px; }
.page-franchise .fstep[hidden] { display: none; }

.page-franchise .fsteps__nav {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center;
  margin-top: 4px;
}
/* .btn sets display:inline-flex, which outranks the UA default for [hidden]
   and would leave "Zurück"/"Absenden" visible on the wrong steps — this rule
   is specific enough to win */
.page-franchise .fsteps__nav [hidden] { display: none; }
/* forward action first on mobile (thumb reach), Zurück stays secondary */
.page-franchise .fsteps__back { order: 2; }
.page-franchise .fsteps__next,
.page-franchise .cform__submit { order: 1; flex: 1 1 100%; }
@media (min-width: 620px) {
  .page-franchise .fsteps__back { order: 1; flex: 0 0 auto; }
  .page-franchise .fsteps__next,
  .page-franchise .cform__submit { order: 2; flex: 0 0 auto; margin-left: auto; }
  .page-franchise .fsteps__next { min-width: 200px; }
}

@media (prefers-reduced-motion: no-preference) {
  .page-franchise .fstep:not([hidden]) { animation: fstepIn 0.32s var(--ease); }
  @keyframes fstepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}