/* EAT HAPPY HANA GROUP - presentation one-pager, v3
   Palette from EHHG_Brand_Guideline_DE: Coral #FF646E (accent only, never large
   backgrounds), Light Coral #FFE9E9, Black #000, Dark Gray #3C3C3C,
   Light Gray #DAD9D9, White #FFF. Page background: light grey as in the manual.
   Type: Moderat (client webfont, drop-in at go-live) with Hanken Grotesk fallback.
   Straight lines only. Theme: light lock. */

:root {
  --coral: #FF646E;
  --coral-deep: #F04A57;
  --light-coral: #FFE9E9;
  --ink: #000000;
  --gray-dark: #3C3C3C;
  --gray-light: #DAD9D9;
  --bg: #F4F4F4;
  --white: #FFFFFF;
  --radius: 14px;
  /* radius system: interactive = pill, media/cards = 14px */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { color-scheme: light; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Moderat', 'Hanken Grotesk', 'Avenir Next', system-ui, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background-color: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hanken-grotesk-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

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

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--coral-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

/* ---------- Header ---------- */

.topbar { padding: clamp(20px, 3vh, 32px) 0; }
.topbar__logo { height: clamp(40px, 5vw, 52px); width: auto; }

/* ---------- Hero ---------- */

.hero-wrap { position: relative; overflow: hidden; }

.hero {
  padding: clamp(48px, 9vh, 120px) 0 clamp(56px, 10vh, 128px);
}

/* Bild-Element watermark: white mark on light grey, at the original large size,
   anchored to the very top of the page (continues past the top edge, so the only
   cuts coincide with the page edges - no floating flat cut). */
.hero-wrap::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  /* raised by 22% of its own height: the mark's top fifth carries no dots, so
     lifting it brings the dense dot field into view. ~63% of the mark stays
     visible, above the guideline's 50% minimum. */
  top: calc(min(58vw, 880px) * -0.217);
  right: max(-360px, calc(50% - 62rem));
  width: min(58vw, 880px);
  aspect-ratio: 1200 / 1185;
  background: url('../img/watermark-mark.webp') no-repeat top center / contain;
}

.topbar, .hero { position: relative; z-index: 1; }
.hero .container { position: relative; z-index: 1; }

.hero h1 {
  font-size: clamp(2.7rem, 6.8vw, 5.2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
  max-width: 14ch;
}

/* --coral-deep, not --coral: #FF646E on the page grey measures 2.62:1, under the
   3.0 WCAG AA floor for large text. #F04A57 is already in the palette and measures
   3.28:1 on grey / 3.61:1 on white. Same family, reads identically, passes. */
.hero h1 .accent { color: var(--coral-deep); }

.hero__sub {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--gray-dark);
  max-width: 52ch;
  margin: 24px 0 0;
}

/* entrance: respects reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .topbar__logo, .hero h1, .hero__sub {
    opacity: 0;
    transform: translateY(18px);
    animation: rise 0.7s var(--ease) forwards;
  }
  .hero h1 { animation-delay: 0.1s; }
  .hero__sub { animation-delay: 0.2s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ---------- Stats band ---------- */

/* No hairlines between sections: the grey/white contrast is the separator. */
.stats {
  background: var(--white);
  padding: clamp(48px, 8vh, 88px) 0;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 64px);
  text-align: center;
}

.stat__number {
  display: block;
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--coral-deep);   /* see the .accent note above — contrast, same hue family */
}

.stat__label {
  display: block;
  margin-top: 10px;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 600;
  color: var(--gray-dark);
  max-width: 24ch;
  margin-inline: auto;
}

/* ---------- Sections ---------- */

.section { padding: clamp(72px, 12vh, 136px) 0; }
.section--white { background: var(--white); }

.section h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 24px;
  text-wrap: balance;
}

.section p {
  color: var(--gray-dark);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 58ch;
  margin: 0 0 16px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.photo-card {
  border: 8px solid var(--white);
  border-radius: var(--radius);
  box-shadow: 0 20px 44px -28px rgba(60, 60, 60, 0.5);
}
.photo-card img { border-radius: calc(var(--radius) - 8px); }

.map-figure { margin: 0; }
.map-figure img { width: 100%; }

/* ---------- Retailers ---------- */

.retailers { text-align: center; }

/* 20 cells: 5x4 desktop, 3-col tablet, 2-col mobile - even rows everywhere */
.retailers__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 2vw, 24px);
  margin: clamp(28px, 4vh, 44px) 0 0;
  padding: 0;
  list-style: none;
}

.retailers__grid li {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius);
  overflow: hidden;
}

.retailers__grid img { width: 100%; height: auto; }

/* needs to outrank `.section p` (max-width 58ch + zero auto margins) */
.section p.retailers__more {
  margin: clamp(24px, 3vh, 36px) auto 0;
  max-width: none;
  font-weight: 700;
  color: var(--gray-dark);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

@media (max-width: 900px) {
  .retailers__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .retailers__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Concepts marquee ----------
   Intentionally keeps animating under reduced-motion (operator decision
   2026-07-22): slow decorative drift. Everything else honors the preference. */

.concepts { text-align: center; overflow: hidden; }
.concepts .section-intro { margin-inline: auto; }

.marquee {
  display: flex;
  overflow: hidden;
  gap: 14px;
  margin-top: clamp(32px, 5vh, 56px);
  padding-block: 8px;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
  min-width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: marquee-scroll 60s linear infinite;
}

@keyframes marquee-scroll {
  to { transform: translateX(calc(-100% - 14px)); }
}

.chip {
  display: inline-block;
  padding: 10px 22px;
  background: var(--white);
  border: 1.5px solid var(--gray-light);
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(0.9rem, 1.25vw, 1.05rem);
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}

a.chip:hover { border-color: var(--coral); color: var(--coral-deep); background: var(--light-coral); }
span.chip { color: var(--gray-dark); }

/* ---------- CTA band (links to the two groups, below concepts) ---------- */

/* Same light grey as the hero at the top of the page (client request), not the
   light-coral tint. Sits between the white concepts section and the photo band,
   so the grey/white alternation still separates it without a hairline. */
.cta-band {
  background: var(--bg);
  padding: clamp(56px, 9vh, 104px) 0;
  text-align: center;
}

.cta-band h2 { margin-bottom: 12px; }
.cta-band p { margin-inline: auto; }

.cta-band__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 32px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }

/* Both group buttons use the SAME neutral outline treatment on purpose: a coral
   fill on one of them read as "EAT HAPPY is the more important brand" (client
   feedback). Equal weight = merger of equals. */
.btn--ghost { border: 2px solid var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: rgba(0, 0, 0, 0.05); }

/* ---------- Closing photo band ---------- */

/* Two crops of the same photo, not one. The band ranges from ~4.9:1 on a wide
   desktop down to roughly square on a phone, so a single file would either be
   cropped to nonsense on mobile or ship desktop weight to phones. Both crops are
   centred on the big round sushi platter, which is why the position can stay
   plain "center" — no magic percentage to re-tune when the photo changes. */
.photo-band {
  height: clamp(260px, 46vh, 520px);
  background-image: url('../img/table-spread-wide.webp');
  background-size: cover;
  background-position: center;
}

/* Same breakpoint as the .split stack below, so the layout and the photo switch
   together instead of at two different widths. */
@media (max-width: 860px) {
  .photo-band { background-image: url('../img/table-spread-narrow.webp'); }
}

/* ---------- Footer (same light grey as the hero, no website links) ---------- */

.footer {
  background: var(--bg);
  color: var(--ink);
  padding: clamp(48px, 8vh, 80px) 0 36px;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.footer__name {
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer__links { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }

.footer__links a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--coral);
  padding-bottom: 2px;
}
.footer__links a:hover { color: var(--coral-deep); }

.footer__legal { font-size: 0.9rem; color: var(--gray-dark); margin-top: 6px; }

/* ---------- Imprint / privacy pages ---------- */

.page-simple { min-height: 70dvh; padding: clamp(56px, 10vh, 120px) 0; }
.page-simple .back { display: inline-block; margin-bottom: 32px; font-weight: 600; }
.page-simple h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: -0.02em; }
.page-simple h2 { font-size: 1.3rem; font-weight: 700; margin: 40px 0 12px; }
.page-simple p { color: var(--gray-dark); max-width: 62ch; }
.placeholder-block {
  background: var(--white);
  border: 2px dashed var(--gray-light);
  border-radius: var(--radius);
  padding: 24px 28px;
  max-width: 560px;
}
.placeholder-block p { margin: 4px 0; }

.page-simple ul { color: var(--gray-dark); max-width: 62ch; padding-left: 20px; }
.page-simple li { margin-bottom: 6px; }
.page-simple a { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--coral); text-decoration: none; padding-bottom: 1px; }
.page-simple a:hover { color: var(--coral-deep); }
.page-simple .back { border-bottom: 0; }

/* ---------- Cookie notice ----------
   The site sets no cookies and contacts no third-party host, so this bar is not
   a legal requirement — it is here because the client asked for one. Kept as a
   non-modal bar on purpose: it must not trap focus or block reading the page. */

.cookie-bar {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: clamp(12px, 3vh, 28px);
  transform: translateX(-50%);
  width: min(760px, calc(100% - 28px));
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  padding: 18px clamp(18px, 3vw, 26px);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 26px 50px -26px rgba(0, 0, 0, 0.5);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; font-size: 0.94rem; line-height: 1.5; color: var(--gray-dark); }
.cookie-bar__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-bar .btn { padding: 10px 20px; font-size: 0.9rem; }

@media (max-width: 640px) {
  .cookie-bar { flex-direction: column; align-items: stretch; text-align: left; }
  .cookie-bar__actions { justify-content: flex-end; }
}

/* ---------- Reveal on scroll ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 0.1s; }
.js .reveal[data-delay="2"] { transition-delay: 0.2s; }

/* ---------- Mobile ---------- */

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--media-first .split__media { order: -1; }
  .stats__grid { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding-top: 24px; }
  /* mobile: the mark sits in the empty space below the copy, showing its dense
     lower half, so it never runs behind the headline */
  .hero-wrap::after {
    width: 92vw;
    right: -30vw;
    top: auto;
    bottom: 0;
    height: 34%;
    aspect-ratio: auto;
    background-position: bottom center;
    background-size: cover;
  }
  .js .globe.globe--on { height: clamp(380px, 118vw, 480px); }
}

/* ---------- Reduced motion ----------
   Globe and its slow rotation intentionally keep running (operator decision
   2026-07-22, same policy as the former marquee): decorative, slow, linear.
   Everything else honors the preference. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn:hover, .btn:active { transform: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}