/* ============================================================
   AVLI Grill Restaurant
   Core stylesheet — tokens, base, components, shared sections
   ============================================================
   Contents
   01  Design tokens
   02  Reset & base
   03  Typography
   04  Layout primitives
   05  Decorative brand elements
   06  Buttons
   07  Header & navigation
   08  Language selector
   09  Mobile menu
   10  Motion / reveal
   11  Home sections
   12  About sections
   13  Contact sections
   14  Instagram
   15  Footer
   16  Utilities
   ============================================================ */


/* ── 01  DESIGN TOKENS ─────────────────────────────────────── */
/*
   Palette derives from the AVLI logo: vivid Mediterranean orange,
   olive-leaf green, warm cream, warm charcoal.

   ONE orange, ONE dark green, ONE olive accent. That is deliberate:
   the site read as inconsistent when text-safe variants of the
   orange crept in. So the rule is now:

     --orange is never used for small text. It is a graphic colour —
     buttons, rules, chips, marks, and large type (the logo, the
     hero name). Where an orange *word* used to sit in body text,
     it is now either an orange chip with dark text, or dark/cream
     text with an orange underline.
     Two exceptions at the owner's request: the name "AVLI" in running
     text (.brand-word) and today's row in the opening hours (.is-today).

   Contrast ratios verified (WCAG 2.1):
     ink     on cream       16.6:1  AAA
     stone   on cream        5.5:1  AA
     olive   on cream        6.1:1  AA
     ink     on orange       4.9:1  AA      ← buttons, chips
     cream   on oliveDeep   11.1:1  AAA
     orange  on cream        3.4:1  AA-large ← logo, rules, outlines
     orange  on oliveDeep    3.3:1  AA-large ← hero name, footer logo
*/
/* ── 0  FONTS (self-hosted) ────────────────────────────────────
   Fraunces (display) and Karla (body), served from assets/fonts/ so
   no visitor data goes to Google. Variable fonts: one file per
   script covers every weight the site uses. Files fetched from
   Google Fonts (OFL licensed); latin-ext covers Polish, Czech,
   Hungarian, Romanian, Croatian, Slovak. Greek and Cyrillic fall
   back to the system stack. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Surfaces */
  --cream:          #F8F7F3;   /* porcelain: barely warm, not yellow  */
  --cream-rgb:      248, 247, 243;
  --cream-deep:     #EEECE5;   /* alternate sections, image backdrops */
  --cream-warm:     #F3F1EB;
  --olive-deep:     #223D1E;
  --olive-deep-rgb: 34, 61, 30;   /* for rgba() overlays on photos */

  /* Brand */
  --orange:         #DE5F16;
  --orange-hover:   #C9520F;
  --orange-soft:    rgba(222, 95, 22, 0.18);   /* a tint of the one orange, never a second hue */
  --olive:          #3B6633;

  /* Text */
  --ink:          #1A1714;
  --ink-soft:     #423C34;
  --stone:        #6B6356;

  /* Lines */
  --line:         rgba(26, 23, 20, 0.13);
  --line-strong:  rgba(26, 23, 20, 0.26);
  --line-light:   rgba(var(--cream-rgb), 0.20);

  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.45rem, 5vw, 4.15rem);
  --fs-h1:      clamp(2.25rem, 5vw, 3.6rem);
  --fs-h2:      clamp(1.9rem, 3.7vw, 2.85rem);
  --fs-h3:      clamp(1.3rem, 2.1vw, 1.6rem);
  --fs-lead:    clamp(1.075rem, 1.55vw, 1.28rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.82rem;

  /* Rhythm */
  --space-section: clamp(4.5rem, 10vw, 9rem);
  --gutter:        clamp(1.25rem, 5vw, 3rem);
  --measure:       62ch;

  /* Shape */
  --radius:      4px;
  --radius-lg:   10px;
  --arch:        50% 50% var(--radius-lg) var(--radius-lg)
               / 30% 30% var(--radius-lg) var(--radius-lg);

  /* Motion */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur:         0.55s;

  --header-h:    88px;
}

@media (max-width: 860px) {
  :root { --header-h: 68px; }
}


/* ── 02  RESET & BASE ──────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Deliberately NOT overflow-x: hidden. It turns the body into a
     scroll container and silently breaks `position: sticky` on the
     header and the menu bar. Horizontal overflow is prevented at
     source instead (min-width:0 on grid children, wrapping headings). */
}

/* Pages hand over to each other: fade in on arrival, fade out on the
   way to the next page. Opacity only — a transform on body would
   re-anchor the fixed header. */
body { animation: pageIn 0.45s var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
html.is-leaving body {
  opacity: 0;
  transition: opacity 0.24s var(--ease);
  animation: none;
}

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

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

a { color: inherit; }

/* Visible, on-brand focus for keyboard users */
:focus-visible {
  outline: 2.5px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

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

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 2000;
  background: var(--ink);
  color: var(--cream);
  padding: 0.85rem 1.5rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }


/* ── 03  TYPOGRAPHY ────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.017em;
  margin: 0 0 0.6em;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  text-wrap: balance;
  /* German compounds (Datenschutzerklärung, Öffnungszeiten) are long
     enough to overflow a phone at heading sizes. Hyphenation uses the
     document's lang, which the translation engine keeps current. */
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.24; letter-spacing: -0.01em; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-soft);
}

.prose p { color: var(--ink-soft); }

/* Section intro block — headline plus optional lead.
   No all-caps eyebrow; the olive rule does the labelling. */
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 54ch; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: 0.45em; }
.section-head .lead { margin-bottom: 0; }


/* ── 04  LAYOUT PRIMITIVES ─────────────────────────────────── */

.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 880px; }
.container--wide   { max-width: 1440px; }

.section { padding-block: var(--space-section); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section--cream-deep { background: var(--cream-deep); }

.section--olive {
  background: var(--olive-deep);
  color: var(--cream);
}
.section--olive h1,
.section--olive h2,
.section--olive h3 { color: var(--cream); }
.section--olive .lead,
.section--olive p { color: rgba(var(--cream-rgb), 0.82); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.split--reverse > *:first-child { order: 2; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .split--reverse > *:first-child { order: 0; }
}


/* ── 05  DECORATIVE BRAND ELEMENTS ─────────────────────────── */

/* Thin olive rule used as a quiet section marker. */
.rule {
  width: 54px;
  height: 2px;
  background: var(--orange);
  border: 0;
  margin: 0 0 1.6rem;
}
.rule--center { margin-inline: auto; }
.section--olive .rule { background: var(--orange); }

/* Arch-topped image — a courtyard doorway, the site's one
   architectural motif. Used sparingly, never on every image. */
.arch {
  border-radius: var(--arch);
  overflow: hidden;
  background: var(--cream-deep);
}
.arch img { width: 100%; height: 100%; object-fit: cover; }

.framed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream-deep);
}
.framed img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder marker — used wherever real data is not yet supplied,
   so nothing on the site pretends to be real information. */
.ph {
  color: var(--stone);
  background: rgba(222, 95, 22, 0.07);
  border-bottom: 1px dashed rgba(222, 95, 22, 0.6);
  padding: 0 0.22em;
  font-style: normal;
  /* Long placeholders must be able to wrap, or they blow out narrow
     phone layouts. */
  overflow-wrap: anywhere;
}
.section--olive .ph {
  color: rgba(var(--cream-rgb), 0.7);
  background: rgba(var(--cream-rgb), 0.08);
  border-bottom-color: rgba(var(--cream-rgb), 0.4);
}

.notice {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: rgba(222, 95, 22, 0.08);
  border-left: 3px solid var(--orange);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  max-width: 68ch;
}
.notice strong { color: var(--ink); }


/* ── 06  BUTTONS ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.85rem;
  min-height: 52px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.28s var(--ease),
              color 0.28s var(--ease),
              border-color 0.28s var(--ease),
              transform 0.28s var(--ease);
}

.btn:active { transform: translateY(1px); }

/* Primary — orange field, dark ink text (5.7:1). */
.btn--primary {
  background: var(--orange);
  color: var(--ink);
  border-color: var(--orange);
}
.btn--primary:hover { background: var(--orange-hover); border-color: var(--orange-hover); }

/* Secondary — outlined, for the quieter of two actions. */
.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--secondary:hover { border-color: var(--ink); background: rgba(26, 23, 20, 0.04); }

/* On dark olive surfaces */
.btn--light {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.btn--light:hover { background: #FFFFFF; border-color: #FFFFFF; }

.btn--outline-light {
  background: transparent;
  color: var(--cream);
  border-color: rgba(var(--cream-rgb), 0.42);
}
.btn--outline-light:hover {
  border-color: var(--cream);
  background: rgba(var(--cream-rgb), 0.09);
}

.btn--sm { padding: 0.65rem 1.25rem; min-height: 42px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}
.btn-row--center { justify-content: center; }

/* Text link: dark text, a thin orange underline that is always there
   and thickens on hover. Orange carries the accent; the text stays
   readable at any size. */
.link {
  display: inline-block;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-size: 100% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s var(--ease);
}
.link:hover { background-size: 100% 3px; }
.section--olive .link,
.site-footer .link { color: var(--cream); }


/* ── 07  HEADER & NAVIGATION ───────────────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height 0.32s var(--ease),
              background-color 0.32s var(--ease),
              box-shadow 0.32s var(--ease);
}

.site-header__inner {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Scrolled state: compact, blurred cream, hairline base. */
.site-header.is-scrolled {
  height: calc(var(--header-h) - 18px);
  background: rgba(var(--cream-rgb), 0.90);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}

/* Over a dark hero the header text flips to cream. */
.site-header.is-over-hero:not(.is-scrolled) { color: var(--cream); }
.site-header.is-over-hero:not(.is-scrolled) .logo__sub  { color: rgba(var(--cream-rgb), 0.8); }
.site-header.is-over-hero:not(.is-scrolled) .lang__btn  { color: rgba(var(--cream-rgb), 0.92);
                                                          border-color: rgba(var(--cream-rgb), 0.32); }
.site-header.is-over-hero:not(.is-scrolled) .logo__mark  { filter: brightness(0) invert(1) opacity(0.92); }

/* Logo lockup: olive mark + wordmark. */
.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: auto;
}
.logo__mark {
  width: 44px;
  height: auto;
  transition: filter 0.32s var(--ease), width 0.32s var(--ease);
}
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__word {
  font-family: var(--font-display);
  font-size: 1.62rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--orange);
  transition: color 0.32s var(--ease);
}
.logo__sub {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.135em;
  color: var(--ink);
  margin-top: 4px;
  transition: color 0.32s var(--ease);
}

.site-header.is-scrolled .logo__mark { width: 36px; }

@media (max-width: 860px) {
  .logo__mark { width: 34px; }
  .logo__word { font-size: 1.3rem; }
  .logo__sub  { font-size: 0.56rem; }
}

/* On phones the reserve button lives in the mobile menu, where it is
   full width and easier to hit, so it comes out of the cramped bar. */
@media (max-width: 700px) {
  .header__reserve { display: none; }
}

/* Very narrow phones: shrink the lockup so the bar never overflows. */
@media (max-width: 400px) {
  .logo { gap: 0.5rem; }
  .logo__mark { width: 27px; }
  .logo__word { font-size: 1.1rem; letter-spacing: 0.07em; }
  .logo__sub  { font-size: 0.48rem; letter-spacing: 0.1em; }
  .header__actions { gap: 0.4rem; }
  .lang__btn { padding-inline: 0.5rem; }
}

.header__actions { display: flex; align-items: center; gap: 0.75rem; }

/* ── Morphing menu ────────────────────────────────────────────
   Closed: a 150×48 orange pill, "Menü" + two bars. Open: it grows to
   a 280×260 card while a dark circle sweeps down through it, the
   bars form an ×, and the links fade in one by one. The wrapper keeps
   its closed size so nothing in the header moves. */

.morph {
  position: relative;
  width: 150px;
  height: 48px;
  flex-shrink: 0;
  z-index: 5;
}

.morph__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 48px;
  border-radius: 72px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: width 0.8s var(--ease-out),
              height 0.15s var(--ease-out),
              border-radius 0.8s var(--ease-out),
              transform 0.25s var(--ease-out);
}
.morph__panel:not(.is-open):hover { transform: scale(1.05); }
.morph__panel.is-open {
  width: 280px;
  height: 260px;
  border-radius: 32px;
  cursor: default;
  transition: width 0.8s var(--ease-out),
              height 0.8s var(--ease-out),
              border-radius 0.8s var(--ease-out);
}

.morph__bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--orange);
  border: 1px solid #C9520F;
}

/* The dark circle: parked above the pill, drops in to fill the card.
   Moved with transform (not top) so the sweep runs on the compositor
   and stays smooth while width and height are also changing. */
.morph__ink {
  position: absolute;
  left: 50%;
  top: -20%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: var(--olive-deep);
  transform: translate(-50%, -90%);
  transition: transform 0.8s var(--ease-out);
  will-change: transform;
}
.morph__panel.is-open .morph__ink { transform: translate(-50%, 0); transition-delay: 0.1s; }

.morph__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  flex-shrink: 0;
  padding: 0 20px;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.3s var(--ease-out), padding 0.8s var(--ease-out);
}
.morph__panel.is-open .morph__bar { color: var(--cream); padding: 0 24px; }
.morph__label { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }

.morph__burger { position: relative; width: 24px; height: 24px; }
.morph__burger i {
  position: absolute;
  left: 3px;
  top: 11px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.4s var(--ease-out);
}
.morph__burger i:first-child { transform: translateY(-3px); }
.morph__burger i:last-child  { transform: translateY(3px); }
.morph__panel.is-open .morph__burger i:first-child { transform: rotate(45deg); }
.morph__panel.is-open .morph__burger i:last-child  { transform: rotate(-45deg); }

.morph__items {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 0 24px 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), visibility 0s 0.3s;
}
.morph__panel.is-open .morph__items {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s var(--ease-out), visibility 0s;
}

.morph__item {
  display: block;
  height: 1em;
  overflow: hidden;
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.morph__panel.is-open .morph__item {
  opacity: 1;
  transition-delay: calc(0.4s + var(--n) * 0.08s);
}
.morph__item[aria-current="page"] { color: var(--orange); }

/* Letters roll over one after another on hover. Each letter is a
   1em window with two copies stacked; the column slides up half. */
.flip { display: flex; }
.flip__ch { display: inline-block; height: 1em; overflow: hidden; }
.flip__col { display: flex; flex-direction: column; transition: transform 0ms; }
.flip__col > span { display: block; height: 1em; line-height: 1em; }
.morph__item:hover .flip__col,
.morph__item:focus-visible .flip__col {
  transform: translateY(-50%);
  transition: transform 0.8s var(--ease-out) calc(var(--i) * 30ms);
}

@media (max-width: 480px) {
  .morph, .morph__panel { width: 118px; }
  .morph__panel.is-open { width: min(280px, calc(100vw - 2rem)); }
  .morph__bar { padding: 0 16px; }
}


/* ── 08  LANGUAGE SELECTOR ─────────────────────────────────── */

.lang { position: relative; }

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  min-height: 42px;
  background: transparent;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.24s var(--ease), color 0.24s var(--ease);
}
.lang__btn:hover { border-color: currentColor; }
.lang__btn svg { width: 10px; height: 10px; transition: transform 0.24s var(--ease); }
.lang__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 34px rgba(26, 23, 20, 0.14);
  padding: 0.4rem;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--ease),
              transform 0.22s var(--ease),
              visibility 0.22s;
}
.lang__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.lang__option {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: none;
  border: 0;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s var(--ease);
}
.lang__option:hover { background: var(--cream-deep); }
.lang__option[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.lang__code {
  font-size: var(--fs-xs);
  color: var(--stone);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
/* Languages not yet translated fall back to German — say so plainly. */
.lang__option[data-partial="true"] .lang__code::after {
  content: ' · DE';
  color: var(--stone);
}


/* ── 10  MOTION / REVEAL ───────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Hero runs one orchestrated entrance rather than scattered effects. */
.hero__stagger > * {
  opacity: 0;
  transform: translateY(18px);
  animation: riseIn 0.95s var(--ease) forwards;
}
.hero__stagger > *:nth-child(1) { animation-delay: 0.15s; }
.hero__stagger > *:nth-child(2) { animation-delay: 0.30s; }
.hero__stagger > *:nth-child(3) { animation-delay: 0.45s; }
.hero__stagger > *:nth-child(4) { animation-delay: 0.60s; }

@keyframes riseIn { to { opacity: 1; transform: none; } }

/* Reduced motion: remove the decorative and scroll-linked motion —
   reveals, entrance sequences, image drift, looping nudges. Short
   feedback transitions (a menu opening, a button hover, the header
   settling) are kept: they are brief, user-initiated and functional,
   and cutting them makes the interface feel broken rather than calm.
   Video and the intro are handled in JS and fall back to stills. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__stagger > * { opacity: 1; transform: none; animation: none; }
  .intro__hint svg { animation: none; }
  .diptych__panel:hover .diptych__media img,
  .dish-card:hover .dish-card__media img,
  .ig-item:hover img { transform: none; }
  .hero__video { transition: none; }
}


/* ── 11  HOME SECTIONS ─────────────────────────────────────── */

/* Hero */
.hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 1.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  background: var(--olive-deep);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* The clip sits over the photo and fades in only once it can play,
   so the first paint is always the photo and nothing ever flashes. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  pointer-events: none;
}
.hero__video.is-ready { opacity: 1; }

/* Video pause and music buttons, grouped quietly in the corner. */
.hero__controls {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}
.hero__ctrl {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 23, 20, 0.45);
  border: 1.5px solid rgba(var(--cream-rgb), 0.35);
  border-radius: 50%;
  color: var(--cream);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.hero__ctrl:hover { background: rgba(26, 23, 20, 0.7); border-color: var(--cream); }
.hero__ctrl svg { width: 14px; height: 14px; fill: currentColor; }
.hero__ctrl[hidden] { display: none; }
/* Music on: the button picks up the brand orange so the state is obvious. */
.hero__ctrl--sound[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--ink); }

.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to top, rgba(var(--olive-deep-rgb), 0.90) 0%,
                            rgba(var(--olive-deep-rgb), 0.55) 42%,
                            rgba(var(--olive-deep-rgb), 0.34) 100%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; }
/* The measure is set on the text itself, so the button row stays
   free to sit on one line. */
.hero__content { max-width: 640px; color: var(--cream); }

.hero__title {
  font-size: var(--fs-display);
  color: var(--cream);
  margin-bottom: 0.32em;
  letter-spacing: -0.024em;
  line-height: 1.02;
  max-width: 15ch;
}
.hero__sub {
  font-size: var(--fs-lead);
  color: rgba(var(--cream-rgb), 0.86);
  margin-bottom: 0;
  max-width: 34ch;
}
.hero__kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(var(--cream-rgb), 0.9);
}
.hero__kicker::before {
  content: '';
  width: 36px;
  height: 2px;
  background: var(--orange);
  flex-shrink: 0;
}

/* ── Brand hero ───────────────────────────────────────────────
   The name, enormous and tracked, centred over a dark smoky image.
   The image is darkened by a vignette rather than a bottom-left
   gradient, because the type now sits in the middle. */

.hero--brand {
  align-items: center;
  text-align: center;
  min-height: min(100vh, 920px);
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
/* Kept light enough that the video reads as a room, not a shadow.
   Darkness gathers only where the type sits and at the very bottom. */
.hero--brand .hero__media::after {
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%,
      rgba(var(--olive-deep-rgb), 0.30) 0%,
      rgba(var(--olive-deep-rgb), 0.18) 60%,
      rgba(var(--olive-deep-rgb), 0.10) 100%),
    linear-gradient(to bottom,
      rgba(var(--olive-deep-rgb), 0.38) 0%,
      rgba(var(--olive-deep-rgb), 0.08) 35%,
      rgba(var(--olive-deep-rgb), 0.14) 70%,
      rgba(var(--olive-deep-rgb), 0.62) 100%);
}
.hero--brand .hero__content {
  max-width: none;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.72);
}
.hero__eyebrow::before,
.hero__eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--orange);
  flex-shrink: 0;
}

.hero__wordmark {
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  line-height: 1;
  hyphens: none;
  letter-spacing: 0;
}
.hero__brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4.75rem, 17vw, 13rem);
  line-height: 0.9;
  letter-spacing: 0.16em;
  margin-right: -0.16em;   /* tracking adds trailing space; recentre */
  color: var(--cream);
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  text-shadow: 0 2px 44px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.35);
}
.hero__eyebrow,
.hero__brand-sub,
.hero__tagline { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.4); }
.hero__brand-sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.95rem, 2.2vw, 1.5rem);
  letter-spacing: 0.34em;
  margin-right: -0.34em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.86);
}

.hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  color: rgba(var(--cream-rgb), 0.82);
  max-width: 40ch;
  margin: 0 auto;
  font-variation-settings: 'SOFT' 50, 'WONK' 1;
}

.hero--brand .btn-row { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* ── Scroll-to-expand intro ───────────────────────────────────
   One custom property, --p (0 → 1), drives everything. JS sets it
   from the scroll gesture; CSS does the rest:
     card    300×400 → 1550×800 (desktop), 300×400 → 950×600 (phone)
     name    slides off left and right
     bg      fades out
   While --p < 1 the page cannot scroll (html.intro-locked). */

html.has-intro { scrollbar-gutter: stable; }
html.intro-locked { overflow: hidden; }

.intro {
  --p: 0;
  --card-w: min(95vw, calc(300px + var(--p) * 1250px));
  --card-h: min(85vh, calc(400px + var(--p) * 400px));
  position: relative;
  background: var(--olive-deep);
  color: var(--cream);
}
@media (max-width: 767px) {
  .intro {
    --card-w: min(95vw, calc(300px + var(--p) * 650px));
    --card-h: min(85vh, calc(400px + var(--p) * 200px));
  }
}

.intro__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: calc(1 - var(--p));
}
.intro__bg img { width: 100%; height: 100%; object-fit: cover; }
.intro__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--olive-deep-rgb), 0.48);
}

.intro__stage {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.intro__card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 18px;
  overflow: hidden;
  background: var(--olive-deep);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.38);
  cursor: pointer;
}
.intro__video { width: 100%; height: 100%; object-fit: cover; }
.intro__card-shade {
  position: absolute;
  inset: 0;
  background: rgba(var(--olive-deep-rgb), 1);
  opacity: calc(0.5 - var(--p) * 0.3);
  pointer-events: none;
}
.intro__controls { right: 1rem; bottom: 1rem; }

/* The name sits over the card, centred in the viewport, and parts. */
.intro__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.8);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
  transform: translateX(calc(var(--p) * -150vw));
}
.intro__eyebrow::before,
.intro__eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--orange); }
.intro__wordmark { margin: 0; }
.intro__word--l { transform: translateX(calc(var(--p) * -150vw)); }
.intro__word--r { transform: translateX(calc(var(--p) * 150vw)); }

.intro__hint {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--card-h) / 2 + 1.25rem);
  z-index: 2;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.75);
  white-space: nowrap;
  transform: translate(calc(-50% + var(--p) * 150vw), 0);
  opacity: calc(1 - var(--p) * 2);
  pointer-events: none;
}
.intro__hint svg { width: 14px; height: 14px; animation: introNudge 1.6s var(--ease) infinite; }
@keyframes introNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Tagline and buttons, shown once the card has filled the screen. */
.intro__after {
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.intro.is-expanded .intro__after { opacity: 1; }
.intro__after .hero__tagline { margin-inline: auto; }

/* Reduced motion, or arriving mid-page: fully open, no gesture. */
.intro.is-static .intro__card { transition: none; }

/* Over the dark hero the reserve button steps back to an outline, so
   the only solid orange on screen is the main call to action. */
.site-header.is-over-hero:not(.is-scrolled) .header__reserve {
  background: transparent;
  border-color: rgba(var(--cream-rgb), 0.45);
  color: var(--cream);
}
.site-header.is-over-hero:not(.is-scrolled) .header__reserve:hover {
  border-color: var(--cream);
  background: rgba(var(--cream-rgb), 0.1);
}

/* ── Photo slots without a photo yet ──────────────────────────
   Every image position on the site is a slot. While a slot has no
   photo it renders in deep olive with the olive-branch mark as a
   faint watermark, so the page still looks finished. Add an <img>
   and remove the --no-photo class to fill it. */

.hero--no-photo,
.page-hero--no-photo { background: var(--olive-deep); }

.hero--no-photo .hero__media,
.page-hero--no-photo .page-hero__media { display: none; }

.hero--no-photo::before,
.page-hero--no-photo::before {
  content: '';
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(72vw, 760px);
  aspect-ratio: 240 / 152;
  background: url('../img/olive-branch.svg') center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.075;
  pointer-events: none;
}

/* Without an image the home hero needs less height to feel complete. */
.hero--no-photo { min-height: min(74vh, 700px); }

/* Page headers shrink to their text when there is nothing to show. */
.page-hero--no-photo {
  min-height: 0;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 6rem));
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

/* Welcome */
.welcome__media { position: relative; }
.welcome__media .arch { aspect-ratio: 4 / 5; }

/* Two-cuisine diptych — Greek on olive, German on cream,
   meeting at a single seam. Structure carries the idea. */
.diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.diptych__panel {
  padding: clamp(2.75rem, 5.5vw, 5rem) clamp(1.75rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
}
.diptych__panel--greek  { background: var(--olive-deep); color: var(--cream); }
.diptych__panel--german { background: var(--cream-deep); color: var(--ink); }
.diptych__panel--greek h3  { color: var(--cream); }
.diptych__panel--greek p   { color: rgba(var(--cream-rgb), 0.8); }
.diptych__panel--german p  { color: var(--ink-soft); }

.diptych__media {
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.diptych__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.diptych__panel:hover .diptych__media img { transform: scale(1.035); }

.diptych__title { font-size: var(--fs-h3); margin-bottom: 0.5em; }
.diptych__panel p { max-width: 40ch; }

/* The seam label sits across the join: two cuisines, one place. */
.diptych__seam {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--olive-deep);
  color: rgba(var(--cream-rgb), 0.92);
  padding: 1.15rem 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.25rem);
  text-align: center;
}
.diptych__seam img { width: 30px; opacity: 0.9; filter: brightness(0) invert(1); }

@media (max-width: 820px) {
  .diptych { grid-template-columns: 1fr; }
}

/* Signature dishes */
.dish-grid {
  display: grid;
  /* min(268px, 100%) — a bare 268px floor overflows screens narrower
     than the track, which is the usual auto-fill trap. */
  grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.dish-card { display: flex; flex-direction: column; }
.dish-card__media {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.15rem;
  background: var(--cream-deep);
}
.dish-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.dish-card:hover .dish-card__media img { transform: scale(1.045); }

/* A dish card with no photo yet: the rule takes over the job of
   giving the card a top edge. */
.dish-card--text {
  border-top: 2px solid var(--orange);
  padding-top: 1.1rem;
}

.dish-card__head {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 0.4rem;
}
.dish-card__name {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.008em;
}
.dish-card__price {
  margin-left: auto;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.dish-card__desc {
  font-size: var(--fs-sm);
  color: var(--stone);
  margin: 0;
  max-width: 38ch;
}

/* Atmosphere — full-bleed image with text over a dark scrim */
.atmosphere {
  position: relative;
  min-height: min(72vh, 660px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--olive-deep);
}
.atmosphere__media { position: absolute; inset: 0; }
.atmosphere__media img { width: 100%; height: 100%; object-fit: cover; }
.atmosphere__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(var(--olive-deep-rgb), 0.90) 0%,
                                      rgba(var(--olive-deep-rgb), 0.66) 48%,
                                      rgba(var(--olive-deep-rgb), 0.28) 100%);
}
.atmosphere__inner { position: relative; z-index: 1; }
.atmosphere__content { max-width: 46ch; color: var(--cream); }
.atmosphere__content h2 { color: var(--cream); }
.atmosphere__content p  { color: rgba(var(--cream-rgb), 0.85); }

/* Final CTA — the closing invitation on every page. Same green as the
   footer, so it earns its own presence with a big olive-branch watermark,
   a larger display heading and generous air. A hairline on the footer
   keeps the two apart. */
.section--cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(5.5rem, 12vw, 9.5rem);
}
.section--cta::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -6%;
  top: 50%;
  width: clamp(360px, 46vw, 640px);
  aspect-ratio: 1;
  transform: translateY(-50%) rotate(-18deg);
  background: url('../img/olive-branch.svg') center / contain no-repeat;
  opacity: 0.16;
  pointer-events: none;
}
.section--cta::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 70% 90% at 50% 100%, rgba(0, 0, 0, 0.22), transparent 70%);
  pointer-events: none;
}
.final-cta { text-align: center; max-width: 46rem; margin-inline: auto; }
.final-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  color: rgba(var(--cream-rgb), 0.78);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.final-cta__eyebrow::before,
.final-cta__eyebrow::after {
  content: '';
  width: 2rem;
  height: 1.5px;
  background: var(--orange);
}
.final-cta h2 {
  font-size: clamp(2.4rem, 6vw, 4.25rem);
  line-height: 1.02;
  margin-bottom: 0.55em;
  color: var(--cream);
}
.final-cta > p { margin-inline: auto; margin-bottom: 2.25rem; color: rgba(var(--cream-rgb), 0.82); font-size: var(--fs-lg); }
.final-cta .btn-row { justify-content: center; }
@media (max-width: 620px) {
  .section--cta::before { right: -30%; width: 380px; opacity: 0.12; }
}


/* The restaurant's name is orange wherever it appears in text — the
   owner's call, matching the logo. Applied by AVLI.ui.markBrand(). */
.brand-word { color: var(--orange); font-weight: inherit; }

/* ── 12  ABOUT SECTIONS ────────────────────────────────────── */

.page-hero {
  position: relative;
  min-height: min(62vh, 560px);
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
  overflow: hidden;
  background: var(--olive-deep);
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* On a narrow, near-square hero box a landscape photo would crop to
     its middle. Biasing upward keeps the building and sign in frame. */
  object-position: center 38%;
}
.page-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Dark where the heading sits, clearing toward the top so the photo
     is actually visible. */
  background: linear-gradient(to top,
    rgba(var(--olive-deep-rgb), 0.86) 0%,
    rgba(var(--olive-deep-rgb), 0.56) 45%,
    rgba(var(--olive-deep-rgb), 0.20) 100%);
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { color: var(--cream); margin-bottom: 0.3em; }
.page-hero p  { color: rgba(var(--cream-rgb), 0.86); max-width: 48ch; font-size: var(--fs-lead); }

/* Story blocks alternate side without becoming a card grid. */
.story { display: grid; gap: clamp(3.5rem, 7vw, 6rem); }
.story__block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.story__block:nth-child(even) .story__media { order: -1; }
.story__media { aspect-ratio: 4 / 3; }
.story__title { margin-bottom: 0.45em; }

/* A story block with no photo yet becomes a single readable column. */
.story__block--text { grid-template-columns: minmax(0, 1fr); max-width: 62ch; }

@media (max-width: 900px) {
  .story__block { grid-template-columns: 1fr; gap: 2rem; }
  .story__block:nth-child(even) .story__media { order: 0; }
}

/* Values — plain list with olive rules, not a card kit. */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.value { border-top: 2px solid var(--orange); padding-top: 1.35rem; }
.value h3 { font-size: 1.22rem; margin-bottom: 0.45em; }
.value p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }
.section--olive .value { border-top-color: var(--orange); }
.section--olive .value p { color: rgba(var(--cream-rgb), 0.78); }


/* ── 13  CONTACT SECTIONS ──────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; } }

.info-list { margin: 0; padding: 0; }
.info-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 0 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.info-item:first-child { border-top: 1px solid var(--line); }
.info-item__icon { color: var(--olive); margin-top: 3px; }
.info-item__icon svg { width: 20px; height: 20px; }
.info-item__label {
  font-size: var(--fs-xs);
  color: var(--stone);
  margin-bottom: 0.2rem;
}
.info-item__value { font-size: var(--fs-body); color: var(--ink); text-decoration: none; }
a.info-item__value:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }

.hours { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hours th, .hours td { text-align: left; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.hours th { color: var(--ink); font-weight: 500; }
.hours td { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
/* A Ruhetag reads as plain text; the day that matters is today. */
.hours td.is-closed { color: var(--ink-soft); }

/* Today is orange — day name and hours — and carries a "Heute" label
   too, so it still reads for anyone who cannot distinguish the orange. */
.hours tr.is-today th,
.hours tr.is-today td { color: var(--orange); font-weight: 700; }
.hours__today {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  background: var(--orange);
  color: var(--ink);
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}

.hours__note {
  margin-top: 0.9rem;
  font-size: var(--fs-sm);
  color: var(--stone);
}
.hours__note[hidden] { display: none; }

.map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream-deep);
  border: 1px solid var(--line);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Click-to-load panel. Nothing reaches Google until it is used. */
.map__consent {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 2rem 1.5rem;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink-soft);
  background:
    repeating-linear-gradient(45deg,
      transparent 0 14px,
      rgba(59, 102, 51, 0.045) 14px 28px),
    var(--cream-deep);
  transition: background-color 0.24s var(--ease);
}
.map__consent:hover { background-color: var(--cream-warm); }
.map__consent svg { width: 38px; height: 38px; color: var(--olive); opacity: 0.6; }
.map__consent-title {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.map__consent-note {
  font-size: var(--fs-xs);
  color: var(--stone);
  max-width: 32ch;
}

@media (max-width: 920px) { .map { aspect-ratio: 3 / 2; } }


/* ── 13b  GOOGLE RATING ────────────────────────────────────
   The score is the one loud element; everything around it stays
   quiet. No invented review cards — the real reviews live on
   Google and the button goes there. */

.rating-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-top: 2px solid var(--orange);
  border-bottom: 1px solid var(--line);
}
.rating-block[hidden] { display: none; }

.rating { display: flex; align-items: center; gap: 1.25rem; }

.rating__score {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 8vw, 5rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.rating__detail { display: flex; flex-direction: column; gap: 0.4rem; }
.rating__count { font-size: var(--fs-sm); color: var(--stone); }

/* Two star rows stacked; the top one is clipped to the score. */
.stars { position: relative; display: inline-block; line-height: 0; }
.stars__base, .stars__fill { display: flex; gap: 2px; }
.stars svg { width: 19px; height: 19px; flex-shrink: 0; }
.stars__base svg { fill: rgba(26, 23, 20, 0.16); }
.stars__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
}
.stars__fill svg { fill: var(--orange); }

.rating__aside {
  flex: 1 1 22rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.rating__lead { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; max-width: 46ch; }
.rating__source { font-size: var(--fs-xs); color: var(--stone); margin: 0; }

@media (max-width: 560px) {
  .rating-block { gap: 1.75rem; }
  .rating__aside { flex-basis: 100%; }
}


/* ── 14  INSTAGRAM — 3D photo ring ─────────────────────────── */

.ig-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.ig-head h2 { margin-bottom: 0.25em; }
.ig-handle { font-size: var(--fs-sm); color: var(--stone); margin: 0; }

/* A ring of small photos tilted back like a fan, the front one shown
   large in the middle. Rotation is one accumulating rotateY() value,
   so the CSS transition carries the "spring" — no JS animation loop.
   --thumb / --face are the two photo sizes, --ring-ease the overshoot. */
.ring {
  --thumb: clamp(48px, 11vw, 96px);
  --face:  clamp(176px, 40vw, 320px);
  --ring-ease: cubic-bezier(0.3, 1.25, 0.5, 1);
  --ring-time: 0.95s;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;              /* side thumbs never widen the page */
  padding-block: 1.5rem 0.5rem;
  user-select: none;
  -webkit-user-select: none;
}
.ring__stage {
  position: relative;
  width: 92%;
  max-width: 600px;
  aspect-ratio: 5 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ring__scene { position: relative; width: 100%; height: 100%; }
.ring__slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transition: transform var(--ring-time) var(--ring-ease);
  will-change: transform;
}
.ring__thumb {
  position: relative;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream-deep);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transition: transform var(--ring-time) var(--ring-ease);
  will-change: transform;
}
.ring__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

/* Centre photo: two stacked faces cross-fade so a change never flashes. */
.ring__center {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ring__frame {
  position: relative;
  display: block;
  width: var(--face);
  height: var(--face);
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream-deep);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
  outline-offset: 4px;
}
.ring__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.ring__face.is-in { opacity: 1; transform: none; }
a.ring__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--olive-deep-rgb), 0);
  transition: background-color 0.3s var(--ease);
}
a.ring__frame:hover::after { background: rgba(var(--olive-deep-rgb), 0.12); }

/* Frosted round arrows — glass on cream, the one orange on hover. */
.ring__nav { position: relative; z-index: 30; display: flex; gap: 0.75rem; margin-top: 1.75rem; }
.ring__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.3));
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08),
              inset 0 1px 1px rgba(255, 255, 255, 0.6),
              inset 0 -1px 2px rgba(0, 0, 0, 0.06);
  color: var(--ink-soft);
  cursor: pointer;
  transition: transform 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.ring__btn svg { width: 14px; height: 14px; }
.ring__btn:hover { color: var(--orange); border-color: var(--orange); }
.ring__btn:active { transform: scale(0.9); }
@media (max-width: 640px) { .ring__btn { width: 36px; height: 36px; } }


/* ── 15  FOOTER ────────────────────────────────────────────── */

.site-footer {
  background: var(--olive-deep);
  border-top: 1px solid rgba(var(--cream-rgb), 0.14);
  color: rgba(var(--cream-rgb), 0.76);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  font-size: var(--fs-sm);
}
.site-footer a { color: rgba(var(--cream-rgb), 0.76); text-decoration: none; }
.site-footer a:hover { color: var(--cream); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }

/* Desktop: brand | navigation + contact (one unit) | hours.
   Tablet:  brand | navigation + contact, then hours underneath.
   Phone:   stacked. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 2.2fr 1.2fr;
  grid-template-areas: "brand pair hours";
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line-light);
}
.footer-brand     { grid-area: brand; }
.footer-pair      { grid-area: pair; display: grid; grid-template-columns: 1fr 1.2fr; gap: inherit; }
.footer-hours-col { grid-area: hours; }

@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: 1fr 1.3fr;
    grid-template-areas:
      "brand pair"
      "hours hours";
  }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "pair" "hours";
    gap: 2.25rem;
  }
}
@media (max-width: 400px) {
  .footer-pair { grid-template-columns: 1fr; gap: 2.25rem; }
}

.footer-brand .logo__word { color: var(--orange); }
.footer-brand .logo__sub  { color: rgba(var(--cream-rgb), 0.8); }
.footer-brand .logo__mark { filter: brightness(0) invert(1) opacity(0.9); }
/* The logo link must be only as wide as the logo. As a block-level
   flex box it spanned the whole column, so empty space beside it
   was silently clickable. */
.footer-brand .logo { display: inline-flex; margin-right: 0; }
.footer-brand__lead {
  margin: 1.25rem 0 1.5rem;
  max-width: 30ch;
  color: rgba(var(--cream-rgb), 0.68);
}

.footer-call { gap: 0.55rem; }
.footer-call svg { width: 16px; height: 16px; }
.site-footer .footer-call { color: var(--ink); }
.site-footer .footer-call:hover { color: var(--ink); }

/* Round outlined social buttons, with a small tooltip above. */
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.social {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--cream-rgb), 0.28);
  color: rgba(var(--cream-rgb), 0.85);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
              color 0.2s var(--ease), transform 0.2s var(--ease);
}
.social svg { width: 17px; height: 17px; }
.social:hover,
.social:focus-visible {
  border-color: var(--orange);
  background: rgba(222, 95, 22, 0.14);
  color: var(--orange);
  transform: translateY(-1px);
}
.social::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.social:hover::after,
.social:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

.footer-address { font-style: normal; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.9rem; }
.footer-address p { margin: 0; max-width: none; }

/* Footer column titles are h2 for a correct heading order; they are
   styled down to a small label rather than marked up as one. */
.footer-col h2 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--cream);
  margin-bottom: 1.1rem;
  hyphens: none;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }

.footer-hours { display: flex; flex-direction: column; gap: 0.45rem; max-width: 22rem; }
.footer-hours__row { display: flex; justify-content: space-between; gap: 1rem; }
.footer-hours__day { color: rgba(var(--cream-rgb), 0.6); }
/* Same rule in the footer: today is orange, a Ruhetag is plain. */
.footer-hours__row.is-today,
.footer-hours__row.is-today .footer-hours__day { color: var(--orange); font-weight: 700; }
.footer-hours__note {
  margin: 1rem 0 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--cream);
}

.footer-bottom {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: rgba(var(--cream-rgb), 0.55);
}
.footer-bottom nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }


/* ── 16  UTILITIES ─────────────────────────────────────────── */

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

[hidden] { display: none !important; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.center-x { margin-inline: auto; }