/* Cafe Romeo Romeo - stylesheet
   Design tokens and layout rules translated from the design handoff.
   One file, no build step. */

/* ---------- tokens ---------- */

:root {
  --color-bg: #0E0E0D;
  --color-fg: #F7F5F1;
  --color-accent: #7BA05B;
  /* Darker variant of the accent, used where light text sits on the colour.
     Contrast against --color-fg is about 7:1 (WCAG AA and AAA for body text). */
  --color-accent-deep: #3F5A2C;

  --line-faint: rgba(247, 245, 241, .14);
  --line-soft: rgba(247, 245, 241, .16);
  --line: rgba(247, 245, 241, .2);
  --line-mid: rgba(247, 245, 241, .22);
  --line-strong: rgba(247, 245, 241, .25);
  --line-bright: rgba(247, 245, 241, .3);
  --rule-underline: rgba(247, 245, 241, .4);
  --border-outline: rgba(247, 245, 241, .5);
  --fg-disabled: rgba(247, 245, 241, .4);
  --fg-disabled-soft: rgba(247, 245, 241, .35);

  --pad-x: clamp(18px, 4vw, 64px);
  --pad-x-header: clamp(14px, 3vw, 40px);
  --section-pad-top: clamp(88px, 13vh, 168px);
  --section-pad-bottom: clamp(76px, 11vh, 148px);
  --section-pad-top-full: clamp(104px, 13vh, 168px);

  --width-wide: 1440px;
  --width-mid: 1240px;
  --width-narrow: 1080px;
  --width-text: 680px;

  --header-height: 88px;

  /* Archivo is used when it is installed on the device or self-hosted under
     assets/fonts/ (see README). It is deliberately NOT loaded from Google
     Fonts: that would send every visitor's IP address to Google without
     consent. Everything after it is the local fallback chain. */
  --font-sans: Archivo, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --ease-reveal: cubic-bezier(.2, .85, .2, 1);
  --ease-unfold: cubic-bezier(.3, .8, .2, 1);
  --ease-intro: cubic-bezier(.6, 0, .2, 1);
}

/* ---------- Online-Reservierung ----------

   Bis zum 2026-08-11 stand hier ein Schalter aus zwei Klassen
   (`.nur-vor-freischaltung` / `.nur-nach-freischaltung`), mit dem sich die
   Online-Buchung aus- und die Telefonnummer wieder einblenden liess. Er ist
   ERSATZLOS ENTFALLEN, auf Anweisung des Eigentuemers: "Blende bitte die
   Reservierung per Telefon aus. Weil wir jetzt ein Reservierungssystem haben,
   benoetigen wir das Telefonische erst einmal nicht."

   Damit fuehren alle Reservieren-Knoepfe auf romeo.koeln/reservierung. Die
   Telefonnummer steht weiterhin auf der Seite - unter "Anrufen", im Impressum
   und beim Kontakt -, nur eben nicht mehr als Weg, einen Tisch zu reservieren.

   Die Texte in AGB und Datenschutzerklaerung sind im selben Zug nachgezogen:
   Dort stand woertlich, es gebe keine Online-Reservierung. Ein Schalter, der
   die Knoepfe umlegt, aber die Rechtstexte stehen laesst, ist gefaehrlicher
   als kein Schalter. */

/* ---------- base ---------- */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

a {
  color: var(--color-fg);
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* keep <picture> out of the layout box tree so the sizing rules written for
   the images themselves (height: 100%, flex item, object-fit) keep working */
picture {
  display: contents;
}

address {
  font-style: normal;
}

::selection {
  background: var(--color-fg);
  color: var(--color-bg);
}

:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 300;
  padding: 12px 16px;
  background: var(--color-fg);
  color: var(--color-bg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.skip-link:focus {
  top: 12px;
}

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

/* ---------- keyframes ---------- */

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 1.05em, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes introOut {
  to { opacity: 0; visibility: hidden; }
}

@keyframes introLogo {
  from { transform: none; }
  to { transform: translate3d(calc(-50vw + 46px), calc(-50svh + 40px), 0) scale(.34); }
}

@keyframes breathe {
  0%, 100% { opacity: .22; transform: scale(1); }
  50% { opacity: .7; transform: scale(1.07); }
}

@keyframes unfold {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes film {
  0% { opacity: 0; transform: scale(1.03); }
  5% { opacity: 1; }
  28% { opacity: 1; }
  35%, 100% { opacity: 0; transform: scale(1.13); }
}

/* ---------- shared building blocks ---------- */

.cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Auf dem Handy ist das Startbild-Feld sehr hoch und sehr schmal (etwa 1:4).
   Von einem Querformat-Foto bleibt darin nur ein schmaler senkrechter
   Streifen stehen - mittig beschnitten waere das nichtssagende Fensterfront.
   Beide Fassadenfotos haben ihr eindeutigstes Motiv, die rote Leuchtschrift,
   bei rund 62 % der Breite; darauf wird der Ausschnitt ausgerichtet.
   Ab 900 px ist das Feld breit genug, dort gilt wieder die Bildmitte. */
.cover-img--sign { object-position: 62% 42%; }

.media {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.media--4x5 { aspect-ratio: 4 / 5; }
.media--4x3 { aspect-ratio: 4 / 3; }

.backdrop {
  position: absolute;
  inset: -14% 0;
  will-change: transform;
}

.backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kicker {
  font-size: 11px;
  letter-spacing: .38em;
  text-transform: uppercase;
  opacity: .6;
}

.label {
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .6;
}

.rule-top {
  border-top: 1px solid var(--line-strong);
}

.link-underline {
  border-bottom: 1px solid var(--rule-underline);
}

.link-underline:hover {
  border-bottom-color: var(--color-fg);
}

/* buttons */

.btn {
  display: block;
  text-align: center;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
}

.btn--solid {
  background: var(--color-fg);
  color: var(--color-bg);
  transition: opacity .3s;
}

.btn--solid:hover { opacity: .82; }

.btn--outline {
  border: 1px solid var(--color-fg);
  background-image: linear-gradient(var(--color-fg), var(--color-fg));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0;
  transition: background-size .4s var(--ease-unfold), color .4s;
}

.btn--outline:hover {
  background-size: 100% 100%;
  color: var(--color-bg);
}

/* ---------- intro overlay ---------- */

.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-bg);
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: introOut .4s ease 1s both;
}

/* The overlay starts out hidden in the markup and is only shown by the script.
   Without this rule the display above would beat the browser default for
   [hidden] and cover the whole page in black whenever the fade-out animation
   cannot run - for example with "reduce motion" switched on. */
.intro[hidden] { display: none; }

.intro__logo {
  width: 150px;
  height: 150px;
  animation: introLogo .95s var(--ease-intro) .35s both;
}

/* ---------- header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px var(--pad-x-header);
  /* Ganz oben genuegt der weiche Verlauf: dort liegt die Leiste auf dem
     dunklen Startbild. */
  background: linear-gradient(180deg, rgba(14, 14, 13, .72), rgba(14, 14, 13, 0));
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
}

/* Sobald gescrollt wird, laeuft die Leiste ueber helle Fotos und der Verlauf
   reicht nicht mehr - dann bekommt sie eine durchscheinende Flaeche. Die
   Farbe allein traegt die Lesbarkeit; die Unschaerfe ist Zugabe fuer Browser,
   die sie koennen. Wird von initHeader() in main.js gesetzt. */
.site-header.is-stuck {
  background: rgba(14, 14, 13, .85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line-faint);
}

.site-header__logo {
  display: block;
  flex: 0 0 auto;
}

.site-header__logo img {
  display: block;
  width: clamp(64px, 7vw, 92px);
  height: auto;
}

.site-nav {
  display: none;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.site-nav a {
  opacity: .82;
  transition: opacity .3s;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  opacity: 1;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.site-header__reserve {
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  border: 1px solid var(--border-outline);
  padding: 11px 15px;
  transition: background .3s, color .3s;
}

.site-header__reserve:hover {
  background: var(--color-fg);
  color: var(--color-bg);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  padding-top: var(--header-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.hero .backdrop { transform-origin: 50% 60%; }

.hero__slides {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  animation: film 27s linear infinite;
}

.hero__slide:nth-child(1) { animation-delay: 0s; }
.hero__slide:nth-child(2) { animation-delay: 9s; }
.hero__slide:nth-child(3) { animation-delay: 18s; }

.hero__scrim {
  background: linear-gradient(180deg, rgba(14, 14, 13, .66) 0%, rgba(14, 14, 13, .14) 32%, rgba(14, 14, 13, .92) 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--width-wide);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  gap: clamp(24px, 3vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items: end;
}

.hero__logo {
  display: block;
  width: clamp(108px, 13vw, 196px);
  height: auto;
  margin-bottom: clamp(18px, 2vw, 30px);
}

.hero__title {
  margin: 0;
  font-size: clamp(38px, 9.4vw, 118px);
  line-height: .86;
  font-weight: 700;
  font-variation-settings: 'wdth' 125;
  letter-spacing: -.02em;
}

.hero__since {
  margin-top: clamp(14px, 1.6vw, 22px);
  font-size: 11px;
  letter-spacing: .44em;
  text-transform: uppercase;
  opacity: .8;
}

.hero__right {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
}

.hero__claim {
  font-size: clamp(24px, 4.2vw, 46px);
  line-height: 1.08;
  font-weight: 600;
  font-variation-settings: 'wdth' 112;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero__actions .btn {
  flex: 1 1 220px;
  padding: 18px 24px;
  font-size: 13px;
}

.hero__rating {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .85;
}

/* hero entry animations (only with JS and without reduced motion) */
.js .hero__anim {
  animation: rise .85s var(--ease-reveal) both;
  animation-delay: var(--delay, 0s);
}

.js .hero__logo.hero__anim { animation-duration: .9s; }

/* ---------- status bar ---------- */

.status {
  position: relative;
  margin-top: clamp(26px, 4vh, 54px);
  border-top: 1px solid var(--line-mid);
  background: rgba(14, 14, 13, .6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.status__cell {
  padding: 14px 14px 18px;
}

.status__cell + .status__cell {
  border-left: 1px solid var(--line-mid);
}

.status__value {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.status__text {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--fg-disabled);
}

.status__dot.is-open { background: var(--color-accent); }

.status__order {
  margin-top: 11px;
  display: inline-block;
  padding: 9px 12px;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: opacity .3s;
}

.status__order:hover { opacity: .82; }

.status__order[aria-disabled="true"] {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--fg-disabled);
  cursor: not-allowed;
}

/* ---------- story ---------- */

.story {
  position: relative;
  padding: var(--section-pad-top) var(--pad-x) var(--section-pad-bottom);
  scroll-margin-top: var(--header-height);
}

.story__grid {
  width: 100%;
  max-width: var(--width-wide);
  margin: 0 auto;
  display: grid;
  gap: clamp(32px, 4vw, 76px);
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  align-items: start;
}

.story__title {
  margin: 16px 0 0;
  font-size: clamp(34px, 6.4vw, 82px);
  line-height: .95;
  font-weight: 700;
  font-variation-settings: 'wdth' 122;
  text-wrap: pretty;
}

.story__lead {
  margin: 26px 0 0;
  max-width: 56ch;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.62;
  text-wrap: pretty;
}

.story__text {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.62;
  text-wrap: pretty;
  opacity: .82;
}

.placeholder-note {
  margin: 30px 0 0;
  max-width: 56ch;
  border-left: 1px solid var(--line-bright);
  padding: 4px 0 4px 18px;
  font-size: 15px;
  line-height: 1.6;
  opacity: .62;
}

.story__caption {
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .55;
}

.daytimes {
  width: 100%;
  max-width: var(--width-wide);
  margin: clamp(46px, 7vh, 96px) auto 0;
  border-top: 1px solid var(--line-mid);
  padding-top: clamp(26px, 3vw, 44px);
  display: grid;
  gap: clamp(26px, 3vw, 52px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.daytimes__label {
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .6;
}

.daytimes h3 {
  margin: 12px 0 0;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.06;
  font-weight: 700;
  font-variation-settings: 'wdth' 116;
}

.daytimes p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  opacity: .8;
  text-wrap: pretty;
}

/* ---------- full-bleed sections ---------- */

.panel {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--section-pad-top-full) var(--pad-x) 80px;
  scroll-margin-top: var(--header-height);
}

.panel--center { justify-content: center; }
.panel--bottom { justify-content: flex-end; }

.panel__inner {
  position: relative;
  width: 100%;
  max-width: var(--width-mid);
  margin: 0 auto;
}

.panel__title {
  margin: 0;
  font-size: clamp(36px, 10.5vw, 88px);
  line-height: .94;
  font-weight: 700;
  font-variation-settings: 'wdth' 122;
  text-wrap: pretty;
}

.panel__lead {
  margin: 20px 0 0;
  max-width: 52ch;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.5;
  text-wrap: pretty;
}

.panel__text {
  margin: 16px 0 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.62;
  text-wrap: pretty;
  opacity: .78;
}

/* year 1984 */

.year {
  padding-bottom: 80px;
}

.year__scrim { background: rgba(14, 14, 13, .6); }

.year__number {
  font-size: clamp(92px, 29vw, 300px);
  line-height: .82;
  font-weight: 700;
  font-variation-settings: 'wdth' 125;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.year__lead {
  margin: 28px 0 0;
  max-width: 34ch;
  font-size: clamp(18px, 4.8vw, 27px);
  line-height: 1.42;
  text-wrap: pretty;
}

.year__text {
  margin: 16px 0 0;
  max-width: 44ch;
  font-size: clamp(18px, 2vw, 27px);
  line-height: 1.42;
  text-wrap: pretty;
  opacity: .76;
}

.facts {
  margin-top: clamp(30px, 4vh, 56px);
  display: grid;
  gap: clamp(18px, 2vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--line-strong);
  padding-top: 20px;
}

.facts__value {
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 700;
  font-variation-settings: 'wdth' 118;
  line-height: 1;
}

.facts__label {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .68;
}

/* oven */

.oven {
  padding-bottom: 44px;
}

.oven .backdrop { transform-origin: 50% 40%; }

.oven__glow {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -35%;
  height: 115%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 146, 54, .6), rgba(255, 92, 18, .2) 42%, rgba(14, 14, 13, 0) 70%);
  animation: breathe 7s ease-in-out infinite;
  will-change: opacity, transform;
}

.oven__scrim {
  background: linear-gradient(180deg, rgba(14, 14, 13, .55), rgba(14, 14, 13, .1) 38%, rgba(14, 14, 13, .9));
}

.oven__facts {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border-top: 1px solid var(--line-strong);
  padding-top: 18px;
}

.oven__facts .facts__value {
  font-size: clamp(26px, 7vw, 46px);
}

.oven__facts .facts__label {
  font-size: 9px;
}

/* coffee */

.coffee {
  padding-bottom: 48px;
}

.coffee__scrim {
  background: linear-gradient(180deg, rgba(14, 14, 13, .5), rgba(14, 14, 13, .08) 34%, rgba(14, 14, 13, .9));
}

.coffee__cols {
  margin-top: clamp(26px, 3vw, 44px);
  display: grid;
  gap: clamp(18px, 2vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 1px solid var(--line-strong);
  padding-top: 20px;
}

.coffee__cols h3 {
  margin: 0;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .6;
  font-weight: 400;
}

.coffee__cols p {
  margin: 9px 0 0;
  font-size: 15px;
  line-height: 1.55;
  opacity: .84;
}

/* ---------- menu ---------- */

.menu {
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 12vh, 150px) 0 clamp(80px, 11vh, 130px);
  scroll-margin-top: var(--header-height);
}

.menu__scrim { background: rgba(14, 14, 13, .88); }

.menu__inner {
  position: relative;
  padding: 0 var(--pad-x);
  max-width: var(--width-narrow);
  margin: 0 auto;
}

.menu__title {
  margin: 0 0 22px;
  font-size: clamp(36px, 10.5vw, 76px);
  line-height: .94;
  font-weight: 700;
  font-variation-settings: 'wdth' 122;
}

.menu__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.menu__tab {
  padding: 14px 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--color-fg);
  background: transparent;
  color: var(--color-fg);
  transition: opacity .3s;
}

.menu__tab:hover { opacity: .82; }

.menu__tab[aria-selected="true"] {
  background: var(--color-fg);
  color: var(--color-bg);
}

.menu__group {
  border-bottom: 1px solid var(--line);
}

.menu__summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 2px;
  cursor: pointer;
  list-style: none;
}

.menu__summary::-webkit-details-marker { display: none; }

.menu__thumb {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  object-fit: cover;
}

.menu__group-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: clamp(21px, 5.8vw, 30px);
  line-height: 1.04;
  font-weight: 600;
  font-variation-settings: 'wdth' 114;
}

.menu__group-count {
  display: block;
  margin-top: 5px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .58;
  font-variation-settings: 'wdth' 100;
}

.menu__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  position: relative;
  transition: transform .4s var(--ease-unfold);
}

.menu__icon span {
  position: absolute;
  background: var(--color-fg);
}

.menu__icon span:first-child {
  top: 12px;
  left: 1px;
  right: 1px;
  height: 1.5px;
}

.menu__icon span:last-child {
  left: 12px;
  top: 1px;
  bottom: 1px;
  width: 1.5px;
}

.menu__group[open] .menu__icon {
  transform: rotate(135deg);
}

.menu__items {
  animation: unfold .4s var(--ease-unfold) both;
  padding: 2px 2px 24px;
  display: grid;
  gap: 16px clamp(24px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.menu__item {
  display: flex;
  gap: 16px;
  align-items: baseline;
}

.menu__item-body { flex: 1 1 auto; }

.menu__item-name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}

.menu__item-desc {
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.42;
  opacity: .66;
  text-wrap: pretty;
}

.menu__item-price {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.menu__allergens {
  grid-column: 1 / -1;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .48;
  line-height: 1.7;
}

.menu__pdfs {
  margin-top: 26px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.menu__pdfs .btn {
  padding: 16px;
  font-size: 11px;
}

/* ---------- salad bar ---------- */

.salad {
  padding-bottom: 88px;
}

.salad__scrim { background: rgba(14, 14, 13, .58); }

/* The deep accent is used here, not the bright one: the section prints light
   text directly on this surface, and the bright green only reaches about
   2.7:1 against it. */
.salad__flood {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--color-accent-deep);
  opacity: .95;
  transform-origin: 0% 50%;
  transform: scaleX(0);
  will-change: transform;
}

.salad__kicker {
  font-size: 11px;
  letter-spacing: .38em;
  text-transform: uppercase;
}

.salad__title {
  margin: 14px 0 0;
  font-size: clamp(44px, 14vw, 120px);
  line-height: .88;
  font-weight: 700;
  font-variation-settings: 'wdth' 125;
  text-wrap: pretty;
}

.salad__lead {
  margin: 20px 0 0;
  max-width: 50ch;
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1.42;
  text-wrap: pretty;
}

.salad__text {
  margin: 16px 0 0;
  max-width: 50ch;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.62;
  text-wrap: pretty;
  opacity: .88;
}

.salad__steps {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.salad__steps li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 16px;
  line-height: 1.4;
}

.salad__step-no {
  font-size: 11px;
  letter-spacing: .2em;
  min-width: 24px;
  opacity: .75;
}

.salad__cta {
  margin-top: 34px;
  max-width: 420px;
}

.salad__cta .btn {
  padding: 21px;
  font-size: 14px;
  font-weight: 700;
}

.salad__cta .btn--solid:hover { opacity: .85; }

/* ---------- reviews ---------- */

.reviews {
  padding-bottom: 88px;
}

.reviews__scrim { background: rgba(14, 14, 13, .8); }

.reviews__head {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}

.reviews__score {
  font-size: clamp(80px, 25vw, 210px);
  line-height: .8;
  font-weight: 700;
  font-variation-settings: 'wdth' 125;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.reviews__meta { padding-bottom: 12px; }

.reviews__stars {
  font-size: 19px;
  letter-spacing: .14em;
}

.reviews__count {
  margin-top: 7px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75;
}

.reviews__note {
  margin-top: 7px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
}

.reviews__kicker {
  margin-top: clamp(28px, 4vh, 48px);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .6;
}

.reviews__grid {
  margin-top: clamp(18px, 2.5vh, 28px);
  display: grid;
  gap: clamp(18px, 2vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.review {
  margin: 0;
  display: grid;
  gap: 14px;
  align-content: start;
  border-top: 1px solid rgba(247, 245, 241, .28);
  padding-top: 16px;
}

.review__stars {
  font-size: 13px;
  letter-spacing: .16em;
}

.review p {
  margin: 0;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.42;
  font-weight: 600;
  text-wrap: pretty;
}

.review footer {
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .55;
}

.reviews__actions {
  margin-top: 32px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.reviews__actions .btn {
  padding: 16px;
  font-size: 11px;
}

/* ---------- gallery ---------- */

.gallery {
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 12vh, 150px) 0 clamp(80px, 11vh, 130px);
}

.gallery__head {
  padding: 0 var(--pad-x) 22px;
}

.gallery__title {
  margin: 0;
  font-size: clamp(36px, 10.5vw, 76px);
  line-height: .94;
  font-weight: 700;
  font-variation-settings: 'wdth' 122;
}

.gallery__viewport { overflow: hidden; }

.gallery__rail {
  display: flex;
  gap: clamp(10px, 1.2vw, 20px);
  padding: 0 var(--pad-x);
  will-change: transform;
}

.gallery__item {
  flex: 0 0 auto;
  width: clamp(260px, 72vw, 540px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.gallery__cta {
  padding: 26px var(--pad-x) 0;
  max-width: 520px;
}

.gallery__cta .btn {
  padding: 16px;
  font-size: 11px;
}

/* ---------- contact ---------- */

.contact {
  padding-bottom: 48px;
}

.contact__scrim {
  background: linear-gradient(180deg, rgba(14, 14, 13, .55), rgba(14, 14, 13, .2) 30%, rgba(14, 14, 13, .94));
}

.contact__title {
  margin: 0;
  font-size: clamp(34px, 9.5vw, 76px);
  line-height: .94;
  font-weight: 700;
  font-variation-settings: 'wdth' 122;
  text-wrap: pretty;
}

.contact__lines {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
}

.contact__hours {
  margin-top: 30px;
  display: grid;
  gap: 22px clamp(22px, 4vw, 60px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.contact__hours h3 {
  margin: 0 0 9px;
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .6;
  font-weight: 400;
}

.contact__hours-times {
  font-size: 16px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.contact__cta {
  margin-top: 28px;
  max-width: 420px;
}

.contact__cta .btn {
  padding: 17px;
  font-size: 12px;
}

.contact__jobs {
  margin-top: 30px;
  border-top: 1px solid rgba(247, 245, 241, .24);
  padding-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  opacity: .85;
}

/* ---------- footer ---------- */

/* On a phone the four footer columns sit under each other. Centred they read as
   one block instead of a ragged column of left edges; the 900px switch puts the
   left alignment back once the columns stand side by side. */
.site-footer {
  position: relative;
  padding: clamp(64px, 9vh, 110px) var(--pad-x) 40px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}

.site-footer__grid {
  width: 100%;
  max-width: var(--width-wide);
  margin: 0 auto;
  display: grid;
  gap: clamp(30px, 4vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}

.site-footer__logo {
  display: block;
  width: clamp(120px, 12vw, 180px);
  height: auto;
  margin: 0 auto;
}

.site-footer__claim {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.6;
  opacity: .8;
}

.site-footer h2 {
  margin: 0;
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .55;
  font-weight: 400;
}

.site-footer__block {
  margin-top: 11px;
  font-size: 15px;
  line-height: 1.7;
}

.site-footer__block--times { font-variant-numeric: tabular-nums; }

.site-footer__col--links {
  display: grid;
  gap: 16px;
  justify-items: center;
}

.site-footer__social {
  margin-top: 11px;
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.site-footer__legal {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .75;
}

.site-footer__bottom {
  width: 100%;
  max-width: var(--width-wide);
  margin: clamp(34px, 5vh, 64px) auto 0;
  border-top: 1px solid var(--line-faint);
  padding-top: 20px;
  font-size: 9px;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .5;
}

/* ---------- mobile action bar ---------- */

.mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(14, 14, 13, .94);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bar a,
.mobile-bar span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 19px 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mobile-bar a + a,
.mobile-bar a + span,
.mobile-bar span + a {
  border-left: 1px solid var(--line);
}

.mobile-bar__order { color: var(--color-accent); }

.mobile-bar__order[aria-disabled="true"] { color: var(--fg-disabled-soft); }

.mobile-bar-spacer { height: 78px; }

/* ---------- reveal on scroll ---------- */

.js .reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .7s var(--ease-reveal), transform .7s var(--ease-reveal);
  transition-delay: calc(var(--i, 0) * .08s);
  will-change: transform, opacity;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- legal pages ---------- */

.legal {
  max-width: var(--width-text);
  margin: 0 auto;
  padding: 28px 18px 90px;
}

.legal a {
  border-bottom: 1px solid var(--rule-underline);
}

.legal a:hover { border-bottom-color: var(--color-fg); }

.legal__back {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  padding-bottom: 3px;
}

.legal h1 {
  margin: 44px 0 32px;
  font-size: clamp(34px, 10vw, 60px);
  line-height: .96;
  font-weight: 700;
  font-variation-settings: 'wdth' 122;
}

.legal__intro {
  margin: 0 0 30px;
  font-size: 15px;
  line-height: 1.6;
}

.legal__body {
  display: grid;
  gap: 28px;
  font-size: 17px;
  line-height: 1.65;
}

.legal__body h2 {
  margin: 0 0 8px;
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .6;
  font-weight: 400;
}

.legal__body p { margin: 0; }

.legal__hint {
  margin-top: 8px;
}

.legal__footer {
  margin-top: 56px;
  font-size: 9px;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .5;
}

/* Open placeholders must never be mistaken for finished copy, so they are
   marked loudly. Every one of them still has to be filled in or removed
   before the site goes live - see README. */
.todo {
  font-weight: 600;
  background: #FFD400;
  color: #0E0E0D;
  padding: 1px 5px;
  border-radius: 2px;
}

.legal__nav {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.legal__nav [aria-current="page"] { opacity: .5; }

/* ---------- zurueck nach oben ---------- */

/* Schmal und durchscheinend, damit die Schaltflaeche ueber den Fotos nicht
   wie ein Fremdkoerper wirkt. Erst ab ein paar Bildschirmhoehen sichtbar
   (is-visible wird von initToTop() gesetzt) - ganz oben waere sie sinnlos.
   Ohne JavaScript bleibt sie unsichtbar, weil sie dann auch nichts tut. */
.to-top {
  position: fixed;
  right: var(--pad-x-header);
  /* Ueber der festen Leiste am unteren Rand des Handys, nicht dahinter. */
  bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 95;
  width: 34px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--color-fg);
  background: rgba(14, 14, 13, .55);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s, visibility .3s, background .3s, border-color .3s;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: rgba(14, 14, 13, .8);
  border-color: var(--border-outline);
}

.to-top svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ---------- order page (salat.html) ---------- */

.order {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 28px var(--pad-x) 90px;
}

.order__kicker {
  margin: 44px 0 10px;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .65;
}

.order__title {
  margin: 0 0 20px;
  font-size: clamp(34px, 10vw, 60px);
  line-height: .96;
  font-weight: 700;
  font-variation-settings: 'wdth' 122;
}

.order__lead {
  max-width: var(--width-text);
  margin: 0 0 36px;
  font-size: 17px;
  line-height: 1.65;
}

/* The embed is the desktop path and needs JavaScript to load the frame, so it
   stays hidden until both conditions hold (see the 900px block below). */
.order__embed { display: none; }

.order__consent {
  border: 1px solid var(--line);
  padding: clamp(24px, 4vw, 44px);
  max-width: var(--width-text);
}

.order__consent-title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
}

.order__consent-text {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.65;
  opacity: .82;
}

.order__consent-text a,
.order__consent-alt a,
.order__aside a {
  border-bottom: 1px solid var(--rule-underline);
}

.order__consent-text a:hover,
.order__consent-alt a:hover,
.order__aside a:hover { border-bottom-color: var(--color-fg); }

.order__consent-btn {
  padding: 16px 28px;
  font-size: 11px;
  max-width: 320px;
}

.order__consent-alt {
  margin: 16px 0 0;
  font-size: 13px;
  opacity: .7;
}

/* Cross-origin means the frame cannot report its own height, so it gets a fixed
   viewport-relative box and the shop scrolls inside it.

   The shop arranges its products by the width it is handed: inside the 1080px
   page column it falls back to one item per row. The frame therefore breaks out
   of the column and spans the viewport - three items fit side by side on a
   normal desktop. Only the frame breaks out; the text above it keeps the column.
   Side borders would sit on the screen edges, so only top and bottom remain. */
.order__frame {
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: calc(100vh - 220px);
  min-height: 620px;
  border: 1px solid var(--line);
  border-left: 0;
  border-right: 0;
  background: var(--color-fg);
}

/* Once the shop is loaded it is what the page is for: kicker and lead fold away
   and the heading shrinks to a single line, so the frame keeps the screen
   instead of starting below a fixed block of text. is-shop-open is set by
   takeaway.js at the moment the frame is created. */
.order.is-shop-open {
  padding-top: 16px;
}

.order.is-shop-open .order__kicker,
.order.is-shop-open .order__lead {
  display: none;
}

.order.is-shop-open .order__title {
  font-size: 22px;
  line-height: 1.2;
  font-variation-settings: 'wdth' 114;
  margin-bottom: 14px;
}

/* What is left above the frame once the intro is folded: the back link, the
   small heading and the top padding - together about 77px. The rest of the
   screen belongs to the shop, minus a little air at the bottom. */
.order.is-shop-open .order__frame {
  height: calc(100vh - 90px);
}

.order__direct-btn {
  padding: 18px 28px;
  font-size: 11px;
}

.order__direct-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: .7;
}

.order__aside {
  display: grid;
  gap: 24px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.65;
}

.order__aside h2 {
  margin: 0 0 6px;
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .6;
  font-weight: 400;
}

.order__aside p { margin: 0; }

/* ---------- breakpoint: the single layout switch at 900px ---------- */

@media (min-width: 900px) {
  .site-nav { display: flex; }
  .mobile-bar { display: none; }
  .mobile-bar-spacer { display: none; }

  .cover-img--sign { object-position: 50% 50%; }

  /* Ohne die feste Leiste am unteren Rand darf die Schaltflaeche tiefer. */
  .to-top { bottom: 28px; }

  .js .order__embed { display: block; }
  .js .order__direct { display: none; }

  .order__aside { grid-template-columns: 1fr 1fr; gap: 40px; }

  /* The footer columns stand side by side here, so they keep their left edge. */
  .site-footer { text-align: left; }
  .site-footer__logo { margin-left: 0; }
  .site-footer__col--links { justify-items: start; }

  .site-footer__social,
  .site-footer__legal { justify-content: flex-start; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .001s !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .salad__flood { transform: scaleX(1); }
}