/* ---------- Schriften (selbst gehostet, SIL Open Font License, siehe assets/fonts/) ---------- */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/jost-latin-ext-wght-normal.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: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/jost-latin-wght-normal.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: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/playfair-display-latin-ext-wght-normal.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: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/playfair-display-latin-wght-normal.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: "Playfair Display";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/playfair-display-latin-ext-wght-italic.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: "Playfair Display";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/playfair-display-latin-wght-italic.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 {
  /* Marke (Brand Kit, unverändert) */
  --sand: #EDEBE7;
  --charcoal: #38383A;
  --warm-white: #F7F6F3;
  --clay: #C9A88A;
  --sea: #7C9AA6;

  /* Text — abgeleitet aus den Kit-Farben, Kontrast auf Sand/Warm White geprüft.
     Clay ist nie Textfarbe auf hellem Grund (Kontrast 1,9 : 1). */
  --text: var(--charcoal);                                              /* 9,8 / 10,8 : 1 */
  --text-muted: color-mix(in srgb, var(--charcoal) 80%, var(--sand));   /* #5C5C5D, 5,6 / 6,2 : 1 */
  --sea-text: color-mix(in srgb, var(--sea) 50%, var(--charcoal));      /* #5A6970, 4,8 / 5,3 : 1 */

  /* Linien */
  --line: color-mix(in srgb, var(--charcoal) 18%, transparent);
  --line-strong: color-mix(in srgb, var(--charcoal) 35%, transparent);
  --clay-line: color-mix(in srgb, var(--clay) 40%, transparent);
  --clay-tint: color-mix(in srgb, var(--clay) 16%, transparent);

  /* Verläufe/Schleier auf Fotos (Charcoal statt Fremd-Dunkelgrau) */
  --scrim-s: color-mix(in srgb, var(--charcoal) 40%, transparent);
  --scrim-m: color-mix(in srgb, var(--charcoal) 55%, transparent);
  --scrim-l: color-mix(in srgb, var(--charcoal) 70%, transparent);
  --scrim-xl: color-mix(in srgb, var(--charcoal) 90%, transparent);
  --scrim-chip: color-mix(in srgb, var(--charcoal) 80%, transparent);

  /* Text und Linien auf dunklen Flächen */
  --on-dark-muted: color-mix(in srgb, var(--warm-white) 72%, transparent);  /* 6,5 : 1 auf Charcoal */
  --on-dark-border: color-mix(in srgb, var(--warm-white) 70%, transparent);
  --on-dark-line: color-mix(in srgb, var(--warm-white) 22%, transparent);

  /* Abstände, 8-px-Raster (Anwendung in Phase 3) */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;
  --space-128: 8rem;
  --section-y: clamp(4rem, 9vw, 8rem);
  --gutter: clamp(1rem, 4vw, 3rem);

  /* Schriftgrößen (Anwendung in Phase 2) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: clamp(1.25rem, 1.1rem + 0.6vw, 1.375rem);
  --fs-28: clamp(1.5rem, 1.2rem + 1vw, 1.75rem);
  --fs-36: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem);
  --fs-46: clamp(2.25rem, 1.6rem + 2.4vw, 2.875rem);
  --fs-hero: clamp(2.75rem, 1.8rem + 4vw, 4.5rem);
  --lh-text: 1.65;
  --lh-heading: 1.12;
  --tracking-heading: 0.005em;
  --tracking-caps: 0.12em;

  /* Formen und Bewegung */
  --radius-0: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur: 400ms;
  --dur-slow: 700ms;

  /* Layout */
  --page-width: 78rem;
  --header-h: 5rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--sand); color: var(--text); font-family: "Jost", Arial, sans-serif; font-size: var(--fs-16); line-height: var(--lh-text); }
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 4px; }
.hero :focus-visible, .editorial :focus-visible { outline-color: var(--warm-white); }

.skip-link { position: absolute; left: var(--space-16); top: -5rem; z-index: 100; padding: var(--space-12) var(--space-16); border-radius: var(--radius-sm); background: var(--charcoal); color: var(--warm-white); font-size: var(--fs-14); text-decoration: none; }
.skip-link:focus { top: var(--space-16); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--sand); border-bottom: 1px solid transparent; transition: border-color 320ms ease; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner, .footer-inner { width: min(100% - 2 * var(--gutter), var(--page-width)); margin: 0 auto; }
.site-header { --h: 5rem; --logo-h: 3.5rem; }
.header-inner { min-height: var(--h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-32); }
.brand, .footer-brand { display: block; flex: 0 0 auto; }
.brand img { width: auto; height: var(--logo-h); }
.desktop-nav, .mobile-nav, .site-footer nav { display: flex; align-items: center; gap: clamp(var(--space-24), 3vw, var(--space-48)); }
.desktop-nav a, .mobile-nav a, .menu-toggle, .site-footer nav a {
  min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; gap: var(--space-8); border-bottom: 1px solid transparent;
  font-size: var(--fs-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-decoration: none; text-transform: uppercase;
}
.desktop-nav a:hover { border-color: var(--charcoal); color: var(--sea-text); }
.mobile-nav a:hover { border-color: var(--clay); color: var(--sea-text); }
.site-footer nav a:hover, .footer-link-icon:hover { border-color: var(--clay); color: var(--sea-text); }
.mobile-menu { display: none; position: relative; }
.menu-toggle { display: none; }
.menu-toggle-icon { display: flex; flex-direction: column; gap: var(--space-4); }
.menu-toggle-icon span { display: block; width: 1.1rem; height: 1px; background: currentColor; transition: transform 260ms ease, opacity 260ms ease; }
.js-enabled .menu-toggle[aria-expanded="true"] .menu-toggle-icon span:first-child { transform: translateY(0.32rem) rotate(45deg); }
.js-enabled .menu-toggle[aria-expanded="true"] .menu-toggle-icon span:last-child { transform: translateY(-0.32rem) rotate(-45deg); }

.desktop-nav .nav-cta, .mobile-nav .nav-cta {
  padding: 0 var(--space-16); border: 1px solid var(--clay); border-radius: var(--radius-sm); background: transparent; color: var(--text); letter-spacing: var(--tracking-caps);
}
.desktop-nav .nav-cta:hover, .mobile-nav .nav-cta:hover { background: var(--clay); border-color: var(--clay); color: var(--text); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .nav-cta { transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease; }
}
.nav-cta--mobile { justify-content: center; margin-top: var(--space-8); }

/* ---------- Type & shared elements ---------- */
.eyebrow { margin: 0 0 var(--space-16); color: inherit; font-size: var(--fs-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.eyebrow--marked { display: flex; align-items: center; gap: var(--space-12); }
.eyebrow--inverse { color: var(--clay); } /* nur auf einfarbigem Charcoal (5,3 : 1) */
/* Auf Fotos: Warm White auf einem schmalen Charcoal-Streifen (80 %), damit der kleine Text auf jedem Foto trägt (mind. 5,8 : 1, auch auf reinem Weiß) */
.hero .eyebrow--inverse, .editorial .eyebrow--inverse { width: fit-content; padding: var(--space-4) var(--space-12); border-radius: var(--radius-sm); background: var(--scrim-chip); color: var(--warm-white); }
.sunburst-mark { width: 2.75rem; height: auto; flex: none; color: inherit; fill: currentColor; }
h1, h2, h3, p { margin-top: 0; }
p { margin-bottom: var(--space-16); }
h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); }
h1 { max-width: 11ch; margin-bottom: var(--space-32); font-size: var(--fs-hero); }
h2 { max-width: 15ch; margin-bottom: 0; font-size: var(--fs-46); }
.hero-text { max-width: 24rem; margin-bottom: var(--space-32); font-size: var(--fs-18); font-weight: 300; }
.text-link { min-height: 2.9rem; display: inline-flex; align-items: center; padding: 0 var(--space-16); border: 1px solid var(--charcoal); font-size: var(--fs-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-decoration: none; text-transform: uppercase; }
.text-link:hover { border-color: var(--charcoal); background: var(--charcoal); color: var(--warm-white); }
.text-link--inverse { border-color: var(--on-dark-border); color: var(--warm-white); }
.text-link--inverse:hover { border-color: var(--clay); background: var(--clay); color: var(--charcoal); }


/* Content starts visible by default; JS adds this quiet reveal only when motion is welcome. */
.reveal-delay-1 { --reveal-delay: 90ms; }
.reveal-delay-2 { --reveal-delay: 180ms; }
.reveal-delay-3 { --reveal-delay: 270ms; }

@media (prefers-reduced-motion: no-preference) {
  .js-enabled [data-reveal] { opacity: 0; transform: translateY(1.25rem); transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms), transform 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms); }
  .js-enabled [data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
}

.section { width: min(100% - 2 * var(--gutter), var(--page-width)); margin: 0 auto; padding: var(--section-y) 0; scroll-margin-top: var(--header-h); }
.section-heading { position: relative; }
.section-heading::after { content: ""; display: block; width: 4rem; margin-top: var(--space-32); border-bottom: 3px solid var(--charcoal); }

/* ---------- Hero ---------- */
.hero { position: relative; width: 100%; min-height: 88vh; min-height: calc(100svh - var(--header-h)); max-height: 54rem; overflow: hidden; display: flex; align-items: flex-end; color: var(--warm-white); }
.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--charcoal); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--scrim-xl) 0%, var(--scrim-l) 38%, transparent 82%), linear-gradient(to right, var(--scrim-m) 0%, transparent 62%);
}
.hero-inner { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), var(--page-width)); margin: 0 auto; padding-bottom: clamp(var(--space-64), 7vw, var(--space-96)); }
.hero-copy { position: relative; max-width: 36rem; padding: 0; }

/* ---------- Über Mahami ---------- */
.about-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--space-32), 6vw, var(--space-96)); align-items: start; }
.about-title h2 { max-width: 12ch; }
.about-letters { display: flex; flex-wrap: wrap; align-items: center; margin: var(--space-32) 0 0; font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-36); font-weight: 400; letter-spacing: 0.02em; }
.about-letters span + span::before { content: ""; display: inline-block; width: var(--space-24); height: 1px; margin: 0 var(--space-16); background: var(--clay); vertical-align: middle; }
.about-text { max-width: 34rem; padding-top: var(--space-32); font-weight: 300; }
.about-lead { font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-22); font-weight: 400; line-height: 1.4; }
.about-photo { margin: clamp(var(--space-48), 6vw, var(--space-64)) 0 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md); background: var(--sand); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }
.about-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-32); margin: clamp(var(--space-48), 6vw, var(--space-64)) 0 0; }
.about-pillars > div { padding-top: var(--space-16); border-top: 1px solid var(--line); }
.about-pillars dt { margin: 0 0 var(--space-8); font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-22); }
.about-pillars dd { margin: 0; font-size: var(--fs-16); font-weight: 300; color: var(--text-muted); }

/* ---------- Editorial full-bleed ---------- */
.editorial { position: relative; width: 100%; min-height: 68vh; overflow: hidden; display: flex; align-items: flex-end; color: var(--warm-white); }
.editorial-media { position: absolute; inset: 0; z-index: 0; background: var(--charcoal); }
.editorial-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.editorial::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--scrim-xl) 0%, var(--scrim-l) 40%, transparent 85%), linear-gradient(to right, var(--scrim-m) 0%, transparent 62%);
}
.editorial-copy { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), 32rem); margin: 0 auto 0 max(var(--gutter), calc((100% - var(--page-width)) / 2)); padding: clamp(var(--space-48), 6vw, var(--space-64)) 0; max-width: 32rem; }
.editorial-copy p:last-of-type { max-width: 24rem; margin-bottom: var(--space-32); font-weight: 300; }

/* Breitbild: Der Lese-Schleier sitzt nur hinter dem Text (am Rand der Inhaltsspalte), nicht quer über das ganze Foto.
   Größe in rem, damit er auf 1440 px und auf 2560 px gleich aussieht. Handy: eigenes Layout (Foto oben, Text darunter). */
@media (min-width: 48.0625rem) {
  .hero::after, .editorial::after {
    background:
      radial-gradient(ellipse 54rem 46rem at calc(max(var(--gutter), (100% - var(--page-width)) / 2) + 14rem) 100%, var(--scrim-xl) 0%, var(--scrim-l) 52%, var(--scrim-m) 78%, transparent 100%),
      linear-gradient(to top, color-mix(in srgb, var(--charcoal) 26%, transparent) 0%, transparent 26%);
  }
}

/* ---------- Gallery ---------- */
.gallery .section-heading { margin-bottom: clamp(var(--space-48), 6vw, var(--space-96)); }
.gallery-intro { max-width: 34rem; margin: var(--space-24) 0 0; font-weight: 300; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(11rem, 19vw, 16rem); gap: clamp(var(--space-12), 2vw, var(--space-24)); }
.gallery-card { margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--sand); }
.gallery-card--a { grid-row: span 2; }
.gallery-card--b, .gallery-card--e { grid-column: span 2; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-card--a img { object-position: 50% 60%; }
.gallery-card--b img { object-position: 40% 40%; }
.gallery-card--e img { object-position: 38% 55%; }
.gallery-card--f img { object-position: 50% 52%; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gallery-card img { transition: transform 900ms var(--ease); }
  .gallery-card:hover img { transform: scale(1.03); }
}

/* ---------- Menu / Karte ---------- */
.menu { background: var(--warm-white); }
.menu.section { width: 100%; padding-inline: max(var(--gutter), calc((100% - var(--page-width)) / 2)); }
.menu-intro { max-width: 36rem; margin: var(--space-24) 0 0; font-size: var(--fs-18); line-height: 1.75; font-weight: 300; }
.menu .section-heading::after { border-bottom-color: var(--clay); }

.menu-section-heading { display: flex; flex-direction: column; align-items: center; text-align: center; }
.menu-section-heading::after { margin-left: auto; margin-right: auto; }
.menu-section-mark { width: 3.5rem; margin-bottom: var(--space-24); color: var(--charcoal); }
.menu-section-heading .menu-intro { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Karte: Kategorie-Karten und Popup ---------- */
.menu-cards { display: none; list-style: none; margin: var(--space-64) 0 0; padding: 0; gap: var(--space-24); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.menu-modal-ready .menu-cards { display: grid; }
.menu-cards li { display: flex; }
.menu-cards li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.menu-card {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); min-height: 12rem; padding: var(--space-24);
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--sand); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) { .menu-card { transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease; } }
.menu-card:hover { border-color: var(--charcoal); background: var(--warm-white); }
.menu-card-num { font-size: var(--fs-12); font-weight: 500; letter-spacing: var(--tracking-caps); color: var(--text-muted); }
.menu-card-title { font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-28); font-weight: 400; line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); color: var(--sea-text); }
.menu-card-teaser { font-size: var(--fs-14); font-weight: 300; line-height: 1.6; color: var(--text-muted); }
.menu-card-cta { margin-top: auto; padding-bottom: var(--space-4); border-bottom: 1px solid var(--clay-line); font-size: var(--fs-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.menu-card:hover .menu-card-cta { border-bottom-color: var(--charcoal); }

/* Kategorien: ohne JavaScript stehen sie untereinander, mit JavaScript nur im Popup */
.menu-cats { display: grid; gap: var(--space-64); margin-top: var(--space-64); }
.menu-modal-ready .menu-cats > .menu-cat { display: none; }
.menu-modal-ready .menu-cats { margin-top: 0; }
.menu-cat-title { margin: 0 0 var(--space-24); padding-bottom: var(--space-12); border-bottom: 1px solid var(--clay-line); font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-36); font-weight: 400; color: var(--sea-text); }
.menu-sub-title { margin: var(--space-32) 0 var(--space-16); padding-bottom: var(--space-8); border-bottom: 1px solid var(--clay-line); font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-22); font-weight: 400; color: var(--sea-text); }
.menu-cat-body > .menu-sub-title:first-child { margin-top: 0; }
.menu-cat-photo { margin: 0 0 var(--space-24); aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--radius-md); background: var(--sand); }
.menu-cat-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 55%; display: block; }
.menu-mezze-lead { margin: 0 0 var(--space-12); font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-22); }
.menu-note { margin: 0; font-size: var(--fs-14); font-weight: 300; color: var(--text-muted); }
.menu-items + .menu-note, .menu-addons + .menu-note { margin-top: var(--space-16); }
.menu-note + .menu-items { margin-top: var(--space-16); }
.menu-mezze-lead + .menu-note { margin-bottom: var(--space-24); }
.menu-photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); margin-top: var(--space-24); }
.menu-photo-pair figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-md); background: var(--sand); }
.menu-photo-pair img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-allergens { margin: var(--space-48) 0 0; text-align: center; font-size: var(--fs-14); font-weight: 300; color: var(--text-muted); }
.menu-pdf { margin: var(--space-24) 0 0; }

/* Popup (natives <dialog>: Esc schließt, Fokus bleibt im Popup, Hintergrund ist gesperrt) */
.menu-dialog { width: min(100% - 2 * var(--gutter), 46rem); max-height: calc(100dvh - 2 * var(--space-24)); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--warm-white); color: var(--text); overflow: hidden; }
.menu-dialog[open] { display: flex; flex-direction: column; }
.menu-dialog::backdrop { background: var(--scrim-m); }
.menu-dialog-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-8) var(--space-24); border-bottom: 1px solid var(--line); }
.menu-dialog-eyebrow { margin: 0; font-size: var(--fs-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.menu-dialog-close { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; gap: var(--space-8); padding: 0 var(--space-16); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; cursor: pointer; }
.menu-dialog-close:hover { border-color: var(--charcoal); }
.menu-dialog-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-32) var(--space-24) var(--space-48); }
.menu-dialog .menu-cat { display: block; }
html:has(.menu-dialog[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .menu-dialog[open] { animation: menu-dialog-in 240ms var(--ease); }
  @keyframes menu-dialog-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
}

.menu-items { list-style: none; margin: 0; padding: 0; }
.menu-item { padding: var(--space-16) 0; }
.menu-item:first-child { padding-top: 0; }
.menu-item-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-16); }
/* Name · Punkt-Linie · Preis: Der Preis bricht nie um, die Linie füllt den Rest der Zeile */
.menu-item-name { display: flex; flex: 1 1 auto; align-items: baseline; min-width: 0; margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-18); font-weight: 400; }
.menu-item-name::after { content: ""; flex: 1 1 var(--space-24); min-width: var(--space-24); margin: 0 var(--space-12); border-bottom: 1px dotted var(--line-strong); transform: translateY(-0.3em); }
.menu-item-price { flex: none; margin: 0; text-align: right; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-18); color: var(--text); }
.menu-item-title { flex: 0 1 auto; min-width: 0; }
.menu-item-unit { margin-right: var(--space-4); font-family: "Jost", Arial, sans-serif; font-size: var(--fs-12); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.menu-item-origin { margin-left: var(--space-8); font-family: "Jost", Arial, sans-serif; font-size: var(--fs-14); font-weight: 300; color: var(--text-muted); white-space: nowrap; }
/* Signature (mahami …): kursiv mit kleinem Clay-Punkt */
.menu-item--signature .menu-item-name { font-style: italic; }
.menu-item--signature .menu-item-name::before { content: ""; flex: none; align-self: center; width: 0.4rem; height: 0.4rem; margin-right: var(--space-12); border-radius: 50%; background: var(--clay); }
.menu-item-desc { max-width: 90%; margin: var(--space-4) 0 0; font-size: var(--fs-12); font-weight: 400; line-height: 1.7; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }

.menu-addons-title { margin: var(--space-24) 0 var(--space-8); font-size: var(--fs-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.menu-addons { list-style: none; margin: 0; padding: 0; font-size: var(--fs-14); color: var(--text-muted); }
.menu-addons li { display: flex; justify-content: space-between; gap: var(--space-16); padding: var(--space-4) 0; }
.menu-addons li span:last-child { white-space: nowrap; }
/* ---------- Menu / Karte — closing brand moment ---------- */
.menu-closing {
  margin-top: clamp(var(--space-32), 4vw, var(--space-48)); padding: clamp(var(--space-32), 3.5vw, var(--space-48)) var(--space-24); border-radius: var(--radius-md);
  background: var(--clay-tint); display: flex; flex-direction: column; align-items: center; gap: var(--space-12); text-align: center;
}
.menu-closing-text { margin: 0; max-width: 26rem; font-size: var(--fs-16); font-weight: 300; }



/* ---------- Besuch & Kontakt (Abschnitt ist per hidden ausgeblendet, bis echte Daten da sind) ---------- */
.visit[hidden] { display: none; }
/* Menüpunkte, die auf #besuch zeigen, verschwinden mit dem Abschnitt */
body:not(:has(#besuch:not([hidden]))) [data-needs-visit] { display: none; }
.visit-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--space-32), 5vw, var(--space-64)); margin-top: clamp(var(--space-48), 5vw, var(--space-64)); align-items: start; }
.visit-info { margin: 0; }
.visit-info-row { padding: var(--space-24) 0; border-top: 1px solid var(--line); }
.visit-info-row:first-child { border-top: 0; padding-top: 0; }
.visit-info-row dt { margin: 0 0 var(--space-8); font-size: var(--fs-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--sea-text); }
.visit-info-row dd { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-22); }
.visit-hours { list-style: none; margin: 0; padding: 0; font-family: "Jost", Arial, sans-serif; font-size: var(--fs-18); font-weight: 300; }
.visit-hours li { display: flex; justify-content: space-between; gap: var(--space-24); padding: var(--space-8) 0; border-top: 1px solid var(--line); }
.visit-hours li:first-child { border-top: 0; padding-top: 0; }
.visit-hours span:last-child { text-align: right; font-weight: 400; white-space: nowrap; }
.visit-contact-lead { margin: 0 0 var(--space-24); font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-22); }
.visit-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-16); }
.visit-contact-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); }
.visit-contact-list .text-link { min-width: 8rem; justify-content: center; }
.visit-contact-detail { font-size: var(--fs-14); color: var(--text-muted); }

/* ---------- Footer (hell) ---------- */
.site-footer { background: var(--warm-white); color: var(--text); border-top: 1px solid var(--line); }
.footer-inner { padding: var(--space-64) 0; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--space-48); }
.footer-brand img { width: auto; height: 4.5rem; }
.footer-claim { margin: var(--space-16) 0 0; font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-22); }
.site-footer nav.footer-col, .footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.footer-col-title { margin: 0 0 var(--space-8); font-size: var(--fs-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.site-footer nav a, .footer-link-icon { color: var(--text); }
.footer-link-icon { min-height: 2.75rem; display: inline-flex; align-items: center; gap: var(--space-8); border-bottom: 1px solid transparent; font-size: var(--fs-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-decoration: none; text-transform: uppercase; }
.site-footer a[aria-current="page"] { border-color: var(--charcoal); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .text-link, .desktop-nav a, .mobile-nav a, .site-footer nav a, .footer-link-icon { transition: transform 240ms ease, color 200ms ease, border-color 200ms ease, background-color 200ms ease; }
}

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */
.legal-nav { display: flex; align-items: center; }
.legal-nav a { min-height: 2.75rem; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; font-size: var(--fs-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-decoration: none; text-transform: uppercase; }
.legal-nav a:hover { border-color: var(--clay); color: var(--sea-text); }
.legal { width: min(100% - 2 * var(--gutter), 46rem); margin: 0 auto; padding: var(--section-y) 0; }
.legal h1 { max-width: none; margin-bottom: var(--space-32); font-size: var(--fs-46); }
.legal h2 { max-width: none; margin: var(--space-48) 0 var(--space-12); font-size: var(--fs-28); }
.legal p { font-weight: 300; }
.legal strong { font-weight: 500; }
.legal-lead { font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-22); font-weight: 400; line-height: 1.4; }
.legal-back { margin-top: var(--space-48); }
.legal-stand { margin-top: var(--space-48); color: var(--text-muted); }
.legal a { text-underline-offset: 0.2em; }
.todo { background: var(--clay-tint); color: var(--text); padding: 0 var(--space-4); border-radius: var(--radius-sm); font-weight: 400; }
.legal-draft { margin: 0 0 var(--space-48); padding: var(--space-24); border: 2px solid var(--charcoal); border-radius: var(--radius-md); background: var(--clay-tint); }
.legal-draft p { margin: 0; font-weight: 400; }
.legal-draft .legal-draft-title { margin-bottom: var(--space-8); font-size: var(--fs-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; }

/* Druck / PDF: alles sichtbar, ohne Einblend-Animation */
@media print {
  .js-enabled [data-reveal] { opacity: 1; transform: none; }
  .site-header { position: static; }
  .skip-link { display: none; }
}

/* hidden gewinnt auch gegen display: grid/flex der Komponenten */
[hidden] { display: none !important; }

/* ---------- Tablet ---------- */
@media (max-width: 64rem) {
  .footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand-block { grid-column: 1 / -1; }
  .about-head { grid-template-columns: 1fr; gap: var(--space-16); }
  .about-text { padding-top: 0; }
  .about-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .menu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-cards li:last-child:nth-child(3n + 1) { grid-column: auto; }
  .menu-cards li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Mobile ---------- */
@media (max-width: 48rem) {
  .site-header { --h: 4.5rem; --logo-h: 3.25rem; }
    .desktop-nav { display: none; }
  .mobile-menu { display: block; }
  .js-enabled .menu-toggle { min-width: 5.5rem; display: inline-flex; justify-content: center; border: 1px solid var(--line); background: transparent; color: var(--charcoal); cursor: pointer; padding: 0 var(--space-16); }
  .js-enabled .mobile-nav { position: absolute; top: calc(100% + 0.6rem); right: 0; z-index: 2; width: 12rem; padding: var(--space-8) var(--space-16); border: 1px solid var(--line); background: var(--warm-white); }
  .js-enabled .mobile-nav[hidden] { display: none; }
  .mobile-nav { padding-top: var(--space-8); flex-direction: column; align-items: stretch; gap: 0; }
  .mobile-nav a { justify-content: center; }

  /* Handy: Foto oben, Text darunter auf Sand — der Mensch im Bild bleibt frei, der Text immer lesbar */
  .hero { display: block; min-height: 0; max-height: none; overflow: visible; color: var(--text); }
  .hero::after { display: none; }
  .hero-media { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 5; max-height: 34rem; }
  .hero-media img { object-position: 52% 50%; }
  .hero-inner { padding: var(--space-32) 0 var(--space-48); }
  .hero-copy { max-width: none; padding: 0; }
  .hero .eyebrow--inverse { padding: 0; background: none; color: inherit; }
  .hero .text-link--inverse { border-color: var(--charcoal); color: var(--text); }
  .hero :focus-visible { outline-color: var(--charcoal); }

  .about-photo { aspect-ratio: 4 / 3; }
  .about-letters { font-size: var(--fs-28); }
  .about-letters span + span::before { width: var(--space-12); margin: 0 var(--space-8); }
  .about-pillars { grid-template-columns: 1fr; gap: var(--space-24); }

  .editorial { display: block; min-height: 0; overflow: visible; color: var(--text); }
  .editorial::after { display: none; }
  .editorial-media { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; }
  .editorial-media img { object-position: 48% 30%; }
  .editorial-copy { padding: var(--space-32) 0 var(--space-48); max-width: none; }
  .editorial .eyebrow--inverse { padding: 0; background: none; color: inherit; }
  .editorial .text-link--inverse { border-color: var(--charcoal); color: var(--text); }
  .editorial :focus-visible { outline-color: var(--charcoal); }


  .menu-closing { padding: var(--space-48) var(--space-24); }

  .visit-layout { grid-template-columns: 1fr; }

  .footer-inner { padding: var(--space-48) 0; grid-template-columns: 1fr 1fr; gap: var(--space-32); }
  .footer-brand-block { grid-column: 1 / -1; }
}

/* ---------- Kleines Handy: Galerie 2 Spalten ---------- */
@media (max-width: 36rem) {
  .menu-cards { grid-template-columns: 1fr; }
  .menu-card { min-height: 0; }
  .menu-dialog-body { padding-inline: var(--space-16); }
  .menu-dialog-bar { padding-inline: var(--space-16); }
  .menu-item-name::after { display: none; }
  .menu-item-row { gap: var(--space-12); }
  .visit-hours { font-size: var(--fs-16); }
  .visit-hours li { gap: var(--space-12); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .gallery-card--a, .gallery-card--b, .gallery-card--e, .gallery-card--f { grid-column: span 2; grid-row: auto; }
  .gallery-card--a { aspect-ratio: 4 / 5; }
  .gallery-card--b, .gallery-card--e, .gallery-card--f { aspect-ratio: 3 / 2; }
  .gallery-card--c, .gallery-card--d { aspect-ratio: 4 / 5; }
}

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

/* Spielecke */
.play-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--space-32), 6vw, var(--space-96)); align-items: end; margin-bottom: clamp(var(--space-48), 6vw, var(--space-96)); }
.play-text { max-width: 34rem; margin: 0; font-weight: 300; }
.play-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(10rem, 17vw, 14.5rem)); gap: clamp(var(--space-12), 2vw, var(--space-24)); }
.play-photo { margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--sand); }
.play-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.play-photo--a { grid-column: span 2; grid-row: span 2; }
.play-photo--a img { object-position: 55% 60%; }
.play-photo--b img { object-position: 60% 50%; }
.play-photo--c img { object-position: 45% 50%; }
@media (max-width: 48rem) {
  .play-head { grid-template-columns: 1fr; gap: var(--space-24); }
  .play-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .play-photo--a { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
  .play-photo--b, .play-photo--c { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; }
}