/* =========================================================================
   AMORIA — Restaurant · Events · Catering
   Design system & stylesheet
   Frickenhausen · DE / TR
   ========================================================================= */

/* ---------- 1. Reset ---------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }

ul[class], ol[class] { list-style: none; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

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

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

/* Muss stärker sein als display-Regeln von .btn & Co. */
[hidden] { display: none !important; }

/* ---------- 2. Tokens --------------------------------------------------- */
:root {
  /* Ink & ground */
  --ink:      #0b0908;
  --night:    #100d0c;
  --coal:     #17130f;
  --stone:    #221b15;
  --stone-2:  #2e251d;

  /* Paper (light sections) */
  --paper:    #f4efe6;
  --paper-2:  #ebe3d6;
  --paper-3:  #ded3c2;

  /* Type colours */
  --bone:     #f4efe6;
  --sand:     #bdb0a0;
  --sand-dim: #8e8376;

  /* Accents */
  --brass:    #c8a15a;
  --brass-hi: #e6c78d;
  --brass-lo: #8a6c33;
  --ember:    #bf4526;
  --wine:     #5c1f24;

  /* Lines */
  --hair:        rgba(244, 239, 230, .13);
  --hair-strong: rgba(244, 239, 230, .26);
  --hair-dark:   rgba(23, 19, 15, .14);

  /* Type */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-sans:    "Manrope", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --wrap:  1320px;
  --wrap-narrow: 900px;
  --gut:   clamp(20px, 4.4vw, 56px);
  --sect:  clamp(72px, 11vw, 168px);
  --radius: 2px;

  /* Motion */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur:       .7s;

  --header-h: 82px;
}

/* ---------- 3. Base ----------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--f-sans);
  font-size: 17px;
  font-weight: 350;
  line-height: 1.68;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

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

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Film grain — gives the whole site an analogue, non-templated texture */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 900;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- 4. Typography ---------------------------------------------- */
.display,
h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 380;
  /* WONK 0: die "wonky" Alternativglyphen von Fraunces (u. a. ein g, das wie
     ein q aussieht) sind hübsch, aber schwer zu lesen — daher abgeschaltet. */
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 120;
  line-height: 1.08;
  letter-spacing: -.022em;
  font-optical-sizing: auto;
}

h1, .t-hero {
  font-size: clamp(2.9rem, 8.2vw, 6.6rem);
  line-height: 1.02;
  letter-spacing: -.034em;
}

h2, .t-1 {
  font-size: clamp(2.15rem, 5.1vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -.028em;
}

h3, .t-2 {
  font-size: clamp(1.4rem, 2.5vw, 2.05rem);
  line-height: 1.14;
  letter-spacing: -.018em;
}

.t-3 {
  font-family: var(--f-sans);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
}

em, .it { font-style: italic; font-variation-settings: "SOFT" 60, "WONK" 0; }

.lead {
  font-size: clamp(1.06rem, 1.55vw, 1.32rem);
  line-height: 1.62;
  color: var(--sand);
  font-weight: 350;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--f-sans);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1;
}

.eyebrow::before {
  content: "";
  width: clamp(24px, 4vw, 52px);
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.eyebrow.no-rule::before { display: none; }

.num-tag {
  font-family: var(--f-display);
  font-size: .8rem;
  letter-spacing: .18em;
  color: var(--brass);
  opacity: .8;
}

.muted { color: var(--sand); }
.dim   { color: var(--sand-dim); }

/* Underlined inline link */
.ln {
  position: relative;
  display: inline-block;
  color: var(--brass-hi);
}
.ln::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.ln:hover::after { transform: scaleX(0); }

/* ---------- 5. Layout --------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.wrap-n { max-width: var(--wrap-narrow); }
.wrap-wide { max-width: 1560px; }

.section { padding-block: var(--sect); position: relative; }
.section.tight { padding-block: clamp(52px, 7vw, 104px); }

.paper {
  background: var(--paper);
  color: var(--ink);
}
.paper .lead, .paper .muted { color: #5c5145; }
.paper .dim { color: #7b7063; }
.paper .eyebrow { color: var(--brass-lo); }
.paper .num-tag { color: var(--brass-lo); }

.coal  { background: var(--coal); }
.night { background: var(--night); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}

.hair { height: 1px; background: var(--hair); border: 0; }
.paper .hair { background: var(--hair-dark); }

.stack-sm > * + * { margin-top: .9rem; }
.stack   > * + * { margin-top: 1.4rem; }
.stack-lg > * + * { margin-top: 2.2rem; }

/* Section head: eyebrow + title + intro, editorial split */
.head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 44px);
  align-items: end;
}
.head__t { grid-column: 1 / 8; }
.head__x { grid-column: 8 / 13; padding-bottom: .5rem; }

@media (max-width: 900px) {
  .head__t, .head__x { grid-column: 1 / -1; }
  .head__x { padding-bottom: 0; }
}

/* ---------- 6. Buttons -------------------------------------------------- */
.btn {
  --bg: var(--brass);
  --fg: #17120b;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8em;
  padding: 1.02em 1.9em;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg);
  background: var(--bg);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
  white-space: nowrap;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bone);
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: #17120b; }

.btn .ar { transition: transform .45s var(--ease-out); }
.btn:hover .ar { transform: translateX(4px); }

.btn--ghost {
  --bg: transparent;
  --fg: var(--bone);
  border: 1px solid var(--hair-strong);
}
.btn--ghost:hover { color: var(--ink); border-color: var(--bone); }

.paper .btn--ghost { --fg: var(--ink); border-color: rgba(23,19,15,.28); }
.paper .btn--ghost::before { background: var(--ink); }
.paper .btn--ghost:hover { color: var(--paper); border-color: var(--ink); }

.btn--dark { --bg: var(--ink); --fg: var(--paper); }
.btn--dark::before { background: var(--brass); }
.btn--dark:hover { color: var(--ink); }

.btn--lg { padding: 1.22em 2.4em; font-size: .78rem; }
.btn--sm { padding: .82em 1.4em; font-size: .68rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
}

/* Auf schmalen Displays stehen die Buttons besser untereinander,
   volle Breite und damit sichere Trefferfläche. */
@media (max-width: 520px) {
  .btn-row > .btn { flex: 1 1 100%; }
}

/* Text link with arrow */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .75em;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--brass);
  padding-bottom: .45em;
  border-bottom: 1px solid currentColor;
  transition: gap .4s var(--ease-out), color .3s;
}
.arrow-link:hover { gap: 1.25em; color: var(--brass-hi); }
.paper .arrow-link { color: var(--brass-lo); }
.paper .arrow-link:hover { color: var(--ember); }

/* ---------- 7. Header --------------------------------------------------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 800;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background .5s var(--ease), height .5s var(--ease), border-color .5s;
  border-bottom: 1px solid transparent;
}

.hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11,9,8,.72), rgba(11,9,8,0));
  opacity: 1;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}

.hdr.is-stuck {
  height: 68px;
  background: rgba(12, 10, 9, .82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--hair);
}
.hdr.is-stuck::before { opacity: 0; }

.hdr__in {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  flex: none;
}
.logo__mark { width: 34px; height: 34px; flex: none; }
.logo__mark path, .logo__mark circle { transition: stroke .4s, fill .4s; }
.logo__img { height: 52px; width: auto; flex: none; transition: height .4s var(--ease); display: block; }
.hdr.is-stuck .logo__img { height: 42px; }
.ftr__brand .logo__img { height: 76px; margin-bottom: .2rem; }
.logo__txt {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo__name {
  font-family: var(--f-display);
  font-size: 1.42rem;
  font-weight: 400;
  letter-spacing: .06em;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 40;
}
.logo__sub {
  font-size: .5rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: .34em;
  font-weight: 600;
}

/* Desktop nav */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.3rem);
}

.nav a {
  position: relative;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding-block: .5rem;
  color: rgba(244,239,230,.82);
  transition: color .35s;
}
.nav a:hover { color: var(--bone); }

.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--brass); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.hdr__right {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 1.6vw, 1.4rem);
}

/* Language switch */
.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hair-strong);
  border-radius: 100px;
  padding: 3px;
  flex: none;
}
.lang button {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: .42em .82em;
  border-radius: 100px;
  color: var(--sand);
  transition: color .3s, background .35s var(--ease);
}
.lang button[aria-pressed="true"] {
  background: var(--brass);
  color: #17120b;
}
.lang button:not([aria-pressed="true"]):hover { color: var(--bone); }

/* Burger */
.burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hair-strong);
  border-radius: 100px;
  flex: none;
}
.burger span {
  position: relative;
  display: block;
  width: 17px; height: 1.5px;
  background: var(--bone);
  transition: background .3s;
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%; height: 100%;
  background: var(--bone);
  transition: transform .45s var(--ease-out);
}
.burger span::before { top: -5.5px; }
.burger span::after  { top:  5.5px; }

.burger.is-open span { background: transparent; }
.burger.is-open span::before { transform: translateY(5.5px) rotate(45deg); }
.burger.is-open span::after  { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav, .hdr__right .btn { display: none; }
  .burger { display: inline-flex; }
}

/* ---------- 8. Mobile menu --------------------------------------------- */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 790;
  background: var(--ink);
  display: grid;
  grid-template-rows: var(--header-h) 1fr auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease-out);
  overflow-y: auto;
}
.mmenu.is-open { clip-path: inset(0 0 0 0); }

.mmenu__body {
  padding: clamp(1rem, 5vh, 3rem) var(--gut);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mmenu__nav { display: flex; flex-direction: column; }

.mmenu__nav a {
  font-family: var(--f-display);
  font-size: clamp(2rem, 9vw, 3.4rem);
  font-weight: 380;
  letter-spacing: -.03em;
  line-height: 1.1;
  padding-block: .28em;
  border-bottom: 1px solid var(--hair);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), color .3s;
}
.mmenu.is-open .mmenu__nav a {
  opacity: 1;
  transform: none;
  transition-delay: calc(.18s + var(--i, 0) * .06s);
}
.mmenu__nav a:hover { color: var(--brass); }
.mmenu__nav a span {
  font-family: var(--f-sans);
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brass);
  opacity: .7;
}

.mmenu__foot {
  padding: clamp(1.2rem, 4vw, 2.4rem) var(--gut) clamp(1.8rem, 5vw, 3rem);
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.4rem;
  align-items: center;
  justify-content: space-between;
}

/* ---------- 9. Hero ----------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.06) brightness(.62);
  transform: scale(1.06);
  animation: kb 26s var(--ease) infinite alternate;
}

@keyframes kb {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.15) translate3d(-1.5%, -1.2%, 0); }
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 12% 92%, rgba(11,9,8,.94) 0%, rgba(11,9,8,.55) 42%, rgba(11,9,8,.1) 74%),
    linear-gradient(to top, var(--ink) 2%, rgba(11,9,8,.42) 34%, rgba(11,9,8,.55) 100%);
}

.hero__in {
  width: 100%;
  padding-block: clamp(3rem, 9vh, 7rem) clamp(2.6rem, 7vh, 5rem);
  position: relative;
}

.hero h1 { max-width: 15ch; margin-top: .7rem; }

.hero__lead {
  max-width: 46ch;
  margin-top: clamp(1.2rem, 2.4vw, 2rem);
}

.hero__cta { margin-top: clamp(1.8rem, 3.4vw, 2.8rem); }

/* Word-mask reveal */
/* Die Maske muss Unterlängen (g, ğ, y, ş, ç) und türkische Diakritika
   Platz lassen — Padding vergrößert nur den sichtbaren Bereich, der
   negative Margin hält das Layout unverändert. */
.rv-line {
  display: block;
  overflow: hidden;
  padding-top: .08em;
  margin-top: -.08em;
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
.js .rv-word {
  display: inline-block;
  transform: translateY(135%) rotate(3deg);
  opacity: 0;
  transition: transform 1s var(--ease-out), opacity .9s var(--ease-out);
}
/* Nur .in — ein Zustand auf <html> würde hier ALLE Wörter der Seite
   sofort einblenden und die Überschriften-Animation aushebeln.
   Die Hero-Überschrift bekommt ihr .in direkt aus app.js. */
.in .rv-word {
  transform: none;
  opacity: 1;
  transition-delay: calc(var(--w, 0) * .075s + var(--base, 0s));
}

/* Hero facts strip */
.hero__facts {
  margin-top: clamp(2.4rem, 6vh, 4.4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}
.fact__k {
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 700;
}
.fact__v {
  margin-top: .55em;
  font-size: clamp(.9rem, 1.3vw, 1.02rem);
  color: var(--bone);
  line-height: 1.45;
}

@media (max-width: 720px) {
  .hero__facts { grid-template-columns: 1fr; gap: 1rem; }
  .hero__facts .fact + .fact { padding-top: 1rem; border-top: 1px solid var(--hair); }
}

/* Auf dem Handy enger schnüren, damit Headline, Buttons und Eckdaten
   gemeinsam auf den ersten Bildschirm passen. */
@media (max-width: 560px) {
  .hero__in { padding-block: clamp(2.4rem, 7vh, 5rem) 1.9rem; }
  .hero__facts { margin-top: 1.7rem; padding-top: 1.2rem; }
}

/* Scroll cue */
.cue {
  position: absolute;
  right: var(--gut);
  bottom: clamp(2.6rem, 7vh, 5rem);
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--sand);
  writing-mode: vertical-rl;
}
.cue::after {
  content: "";
  width: 1px; height: 58px;
  background: linear-gradient(to bottom, var(--brass), transparent);
  animation: cue 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(58px); opacity: 0; }
}
@media (max-width: 900px) { .cue { display: none; } }

/* Page hero (inner pages) */
.phero {
  position: relative;
  min-height: clamp(62vh, 74vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.phero__media { position: absolute; inset: 0; z-index: -2; }
.phero__media img,
.phero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.7) brightness(.58) contrast(1.05);
  transform: scale(1.05);
  animation: kb 30s var(--ease) infinite alternate;
}
.phero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(110% 80% at 10% 95%, rgba(11,9,8,.93), rgba(11,9,8,.2) 68%),
    linear-gradient(to top, var(--ink), rgba(11,9,8,.35) 45%, rgba(11,9,8,.62));
}
.phero__in {
  width: 100%;
  padding-block: clamp(5rem, 12vh, 8rem) clamp(2.6rem, 6vh, 4.4rem);
}
.phero h1 { max-width: 18ch; }
.phero .lead { max-width: 52ch; margin-top: 1.3rem; }

/* Breadcrumb */
.crumb {
  display: flex;
  align-items: center;
  gap: .7em;
  font-size: .63rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sand-dim);
  margin-bottom: 1.5rem;
}
.crumb a:hover { color: var(--brass); }
.crumb span { color: var(--brass); }

/* ---------- 10. Marquee ------------------------------------------------- */
.marq {
  --speed: 42s;
  overflow: hidden;
  border-block: 1px solid var(--hair);
  padding-block: clamp(.9rem, 2vw, 1.5rem);
  background: var(--night);
}
.paper .marq, .marq.on-paper {
  border-color: var(--hair-dark);
  background: transparent;
}
.marq__t {
  display: flex;
  width: max-content;
  animation: marq var(--speed) linear infinite;
}
.marq:hover .marq__t { animation-play-state: paused; }
.marq__t > span {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  padding-right: clamp(1.2rem, 3vw, 2.6rem);
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3vw, 2.3rem);
  font-weight: 380;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.marq__t i {
  font-style: normal;
  color: var(--brass);
  font-size: .5em;
  opacity: .7;
}
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- 11. Reveal -------------------------------------------------- */
.js .rv {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity .95s var(--ease-out),
    transform 1.05s var(--ease-out),
    clip-path 1.1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.rv.in { opacity: 1; transform: none; }

.js .rv-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.rv-img.in { clip-path: inset(0 0 0 0); }

.js .rv-img > img { transform: scale(1.16); transition: transform 1.6s var(--ease-out); transition-delay: var(--d, 0s); }
.rv-img.in > img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rv, .rv-word { opacity: 1; transform: none; }
  .rv-img { clip-path: none; }
}

/* ---------- 12. Services (expanding panels) ---------------------------- */
.svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.svc__item {
  position: relative;
  min-height: clamp(420px, 62vh, 660px);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.4rem, 2.4vw, 2.4rem);
  border-radius: var(--radius);
  transition: flex-grow .9s var(--ease-out);
  background: var(--stone);
}

.svc__item img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.68) brightness(.56);
  transform: scale(1.04);
  transition: transform 1.4s var(--ease-out), filter .8s var(--ease);
}
.svc__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(11,9,8,.94) 4%, rgba(11,9,8,.42) 45%, rgba(11,9,8,.12) 100%);
  transition: background .7s var(--ease);
}
.svc__item:hover img { transform: scale(1.11); filter: saturate(.85) brightness(.66); }
.svc__item:hover::after {
  background: linear-gradient(to top, rgba(11,9,8,.96) 2%, rgba(60,32,14,.45) 52%, rgba(11,9,8,.14) 100%);
}

.svc__no {
  position: absolute;
  top: clamp(1.2rem, 2.2vw, 2rem);
  left: clamp(1.4rem, 2.4vw, 2.4rem);
  font-family: var(--f-display);
  font-size: .85rem;
  font-weight: 380;
  letter-spacing: .2em;
  color: var(--brass);
}

.svc__item h3 { margin-bottom: .5rem; }

.svc__desc {
  color: var(--sand);
  font-size: .96rem;
  line-height: 1.6;
  max-width: 34ch;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .8s var(--ease-out), opacity .6s var(--ease), margin .8s var(--ease-out);
}
.svc__item:hover .svc__desc,
.svc__item:focus-within .svc__desc {
  max-height: 12rem;
  opacity: 1;
  margin-bottom: 1.3rem;
}

.svc__go {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
  transition: gap .4s var(--ease-out);
}
.svc__item:hover .svc__go { gap: 1.2em; }

.svc__item a.svc__cover { position: absolute; inset: 0; z-index: 3; }

@media (max-width: 1000px) {
  .svc { grid-template-columns: 1fr; }
  .svc__item { min-height: 360px; }
  .svc__desc { max-height: 12rem; opacity: 1; margin-bottom: 1.3rem; }
}

/* ---------- 13. Feature / split blocks --------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
}
.split__media { grid-column: 1 / 7; }
.split__body  { grid-column: 8 / 13; }
.split.rev .split__media { grid-column: 7 / 13; order: 2; }
.split.rev .split__body  { grid-column: 1 / 6; order: 1; }

@media (max-width: 940px) {
  .split__media, .split__body,
  .split.rev .split__media, .split.rev .split__body { grid-column: 1 / -1; order: unset; }
}

.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--tall  { aspect-ratio: 4 / 5; }
.frame--wide  { aspect-ratio: 16 / 10; }
.frame--sq    { aspect-ratio: 1 / 1; }
.frame--port  { aspect-ratio: 3 / 4; }

.frame__cap {
  position: absolute;
  left: 0; bottom: 0;
  padding: .8rem 1.1rem;
  background: rgba(11,9,8,.72);
  backdrop-filter: blur(8px);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bone);
}

/* Offset stacked images */
.duo { position: relative; }
.duo__a { width: 82%; }
.duo__b {
  position: absolute;
  right: 0; bottom: -14%;
  width: 46%;
  border: 8px solid var(--paper);
}
.coal .duo__b, .night .duo__b, body > .section:not(.paper) .duo__b { border-color: var(--coal); }

@media (max-width: 640px) {
  .duo__a { width: 100%; }
  .duo__b { position: static; width: 62%; margin-top: -18%; margin-left: auto; border-width: 6px; }
}

/* ---------- 14. Value list --------------------------------------------- */
.vlist { border-top: 1px solid var(--hair); }
.paper .vlist { border-color: var(--hair-dark); }

.vlist__i {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding-block: clamp(1.5rem, 3vw, 2.3rem);
  border-bottom: 1px solid var(--hair);
  align-items: start;
}
.paper .vlist__i { border-color: var(--hair-dark); }

.vlist__n {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 380;
  color: var(--brass);
  padding-top: .3em;
}
.paper .vlist__n { color: var(--brass-lo); }
.vlist__i h3 { margin-bottom: .55rem; }
.vlist__i p { color: var(--sand); max-width: 60ch; }
.paper .vlist__i p { color: #5c5145; }

@media (max-width: 620px) {
  .vlist__i { grid-template-columns: 1fr; gap: .5rem; }
}

/* Simple checkmark list */
.checks { display: grid; gap: .8rem; }
.checks li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: .8rem;
  align-items: start;
  font-size: .98rem;
  color: var(--sand);
}
.paper .checks li { color: #52483d; }
.checks li::before {
  content: "";
  width: 9px; height: 9px;
  margin-top: .55em;
  border: 1px solid var(--brass);
  transform: rotate(45deg);
}

/* ---------- 15. Menu (dot leaders) ------------------------------------- */
.menu-group + .menu-group { margin-top: clamp(2.6rem, 5vw, 4.4rem); }

.menu-group__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}
.paper .menu-group__h { border-color: var(--hair-dark); }

.dish {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .3rem 1rem;
  padding-block: 1rem;
  align-items: baseline;
}
.dish + .dish { border-top: 1px solid var(--hair); }
.paper .dish + .dish { border-color: var(--hair-dark); }

.dish__n {
  font-family: var(--f-display);
  font-size: clamp(1.12rem, 1.7vw, 1.4rem);
  font-weight: 400;
  letter-spacing: -.014em;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}
.dish__p {
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  font-weight: 380;
  color: var(--brass);
  white-space: nowrap;
}
.paper .dish__p { color: var(--brass-lo); }
.dish__d {
  grid-column: 1 / 2;
  font-size: .92rem;
  color: var(--sand);
  line-height: 1.55;
  max-width: 62ch;
}
.paper .dish__d { color: #6a6053; }

.tag {
  font-family: var(--f-sans);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .34em .62em;
  border: 1px solid var(--hair-strong);
  color: var(--sand);
  border-radius: 100px;
  line-height: 1;
  white-space: nowrap;
}
.paper .tag { border-color: rgba(23,19,15,.22); color: #6a6053; }
.tag--v { color: #9dbf7e; border-color: rgba(157,191,126,.4); }
.tag--hot { color: #e08464; border-color: rgba(224,132,100,.4); }
.tag--star { color: var(--brass); border-color: rgba(200,161,90,.45); }

/* Menu tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.tabs button {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .82em 1.3em;
  border: 1px solid var(--hair-strong);
  border-radius: 100px;
  color: var(--sand);
  transition: all .4s var(--ease);
}
.tabs button:hover { color: var(--bone); border-color: var(--bone); }
.tabs button[aria-selected="true"] {
  background: var(--brass);
  border-color: var(--brass);
  color: #17120b;
}
.paper .tabs button { border-color: rgba(23,19,15,.2); color: #6a6053; }
.paper .tabs button:hover { color: var(--ink); border-color: var(--ink); }
.paper .tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.tabpanel[hidden] { display: none; }

/* ---------- 16. Bar / alcohol ------------------------------------------ */
.bar-band {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(92,31,36,.55), rgba(11,9,8,.9) 62%),
    var(--night);
}
.bar-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 100% at 82% 20%, rgba(200,161,90,.16), transparent 70%);
  pointer-events: none;
}

.pours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.pour {
  background: var(--night);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  transition: background .5s var(--ease);
}
.pour:hover { background: var(--stone); }
.pour__k {
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 700;
}
.pour h4 {
  font-family: var(--f-display);
  font-size: 1.28rem;
  font-weight: 400;
  margin-block: .7rem .5rem;
  letter-spacing: -.015em;
}
.pour p { font-size: .9rem; color: var(--sand); line-height: 1.55; }

/* ---------- 17. Stats --------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.6rem, 3vw, 3rem);
}
.stat { border-top: 1px solid var(--hair); padding-top: 1.3rem; }
.paper .stat { border-color: var(--hair-dark); }
.stat__v {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 5.4vw, 4.2rem);
  font-weight: 380;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--brass);
}
.paper .stat__v { color: var(--brass-lo); }
.stat__k {
  margin-top: .7rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 600;
}
.paper .stat__k { color: #6a6053; }

/* ---------- 18. Gallery ------------------------------------------------- */
.gal {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
}
.gal > * { overflow: hidden; border-radius: var(--radius); }
.gal img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--ease-out), filter .7s;
  filter: saturate(.82);
}
.gal > *:hover img { transform: scale(1.07); filter: saturate(1); }

.gal .g1 { grid-column: span 5; aspect-ratio: 4/5; }
.gal .g2 { grid-column: span 4; aspect-ratio: 3/4; align-self: end; }
.gal .g3 { grid-column: span 3; aspect-ratio: 3/4; }
.gal .g4 { grid-column: span 4; aspect-ratio: 4/3; }
.gal .g5 { grid-column: span 5; aspect-ratio: 16/10; }
.gal .g6 { grid-column: span 3; aspect-ratio: 1/1; align-self: start; }

@media (max-width: 820px) {
  .gal { grid-template-columns: repeat(2, 1fr); }
  .gal > * { grid-column: span 1 !important; aspect-ratio: 1/1 !important; align-self: auto !important; }
  .gal .g1 { grid-column: span 2 !important; aspect-ratio: 4/3 !important; }
}

/* ---------- 19. Testimonials ------------------------------------------- */
.quotes {
  display: flex;
  gap: clamp(16px, 2.4vw, 32px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .5rem;
}
.quotes::-webkit-scrollbar { display: none; }

.quote {
  flex: 0 0 min(430px, 84vw);
  scroll-snap-align: start;
  border: 1px solid var(--hair);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(255,255,255,.028), transparent);
}
.paper .quote { border-color: var(--hair-dark); background: linear-gradient(160deg, rgba(255,255,255,.6), transparent); }

.quote__stars { color: var(--brass); letter-spacing: .22em; font-size: .82rem; }
.quote p {
  font-family: var(--f-display);
  font-size: clamp(1.06rem, 1.55vw, 1.28rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.012em;
  margin-block: 1.2rem auto;
}
.quote__who {
  margin-top: 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hair);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 600;
}
.paper .quote__who { border-color: var(--hair-dark); color: #6a6053; }

.q-nav { display: flex; gap: .6rem; margin-top: 1.8rem; }
.q-nav button {
  width: 46px; height: 46px;
  border: 1px solid var(--hair-strong);
  border-radius: 100px;
  display: grid;
  place-items: center;
  color: var(--sand);
  transition: all .4s var(--ease);
}
.q-nav button:hover { background: var(--brass); border-color: var(--brass); color: #17120b; }
.paper .q-nav button { border-color: rgba(23,19,15,.22); color: #6a6053; }

/* ---------- 20. Accordion / FAQ ---------------------------------------- */
.acc { border-top: 1px solid var(--hair); }
.paper .acc { border-color: var(--hair-dark); }

.acc__i { border-bottom: 1px solid var(--hair); }
.paper .acc__i { border-color: var(--hair-dark); }

.acc__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  text-align: left;
  padding-block: clamp(1.2rem, 2.2vw, 1.7rem);
  font-family: var(--f-display);
  font-size: clamp(1.08rem, 1.7vw, 1.35rem);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.3;
  transition: color .35s;
}
.acc__q:hover { color: var(--brass); }
.paper .acc__q:hover { color: var(--brass-lo); }

.acc__ic {
  flex: none;
  width: 20px; height: 20px;
  position: relative;
}
.acc__ic::before, .acc__ic::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--brass);
  transition: transform .5s var(--ease-out);
}
.acc__ic::after { transform: rotate(90deg); }
.acc__i.is-open .acc__ic::after { transform: rotate(0deg); }

.acc__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--ease-out);
}
.acc__i.is-open .acc__a { grid-template-rows: 1fr; }
.acc__a > div { overflow: hidden; }
.acc__a p {
  color: var(--sand);
  max-width: 72ch;
  padding-bottom: clamp(1.2rem, 2.2vw, 1.7rem);
}
.paper .acc__a p { color: #5c5145; }

/* ---------- 21. Forms & Booking ---------------------------------------- */
.field { display: block; }
.field + .field { margin-top: 1.3rem; }

.field__l {
  display: block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: .6rem;
}
.paper .field__l { color: var(--brass-lo); }

.inp {
  width: 100%;
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  color: var(--bone);
  font-size: 1rem;
  transition: border-color .35s, background .35s;
  min-height: 54px;
}
.inp::placeholder { color: var(--sand-dim); }
.inp:hover { border-color: rgba(244,239,230,.4); }
.inp:focus {
  outline: none;
  border-color: var(--brass);
  background: rgba(255,255,255,.06);
}
textarea.inp { min-height: 130px; resize: vertical; line-height: 1.6; }

select.inp {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c8a15a' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  padding-right: 2.6rem;
}
select.inp option { background: var(--coal); color: var(--bone); }

input[type="date"].inp,
input[type="time"].inp { color-scheme: dark; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3rem;
}
.grid-2 .field + .field { margin-top: 0; }
@media (max-width: 620px) { .grid-2 { grid-template-columns: 1fr; } .grid-2 .field + .field { margin-top: 1.3rem; } }

.err {
  display: block;
  font-size: .78rem;
  color: #e08464;
  margin-top: .5rem;
  min-height: 0;
}

/* Kapazitätshinweis unter Zahlenfeldern */
.hint {
  display: block;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--sand-dim);
  margin-top: .5rem;
}
.inp[aria-invalid="true"] { border-color: #e08464; }

/* Service choice cards */
.choice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 860px) { .choice { grid-template-columns: 1fr; } }

.choice__i { position: relative; }
.choice__i input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.choice__i label {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .45s var(--ease);
  background: rgba(255,255,255,.02);
  position: relative;
  overflow: hidden;
}
.choice__i label::after {
  content: "";
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  width: 16px; height: 16px;
  border: 1px solid var(--hair-strong);
  border-radius: 100px;
  transition: all .4s var(--ease);
}
.choice__i label:hover { border-color: rgba(244,239,230,.42); background: rgba(255,255,255,.045); }
.choice__i input:checked + label {
  border-color: var(--brass);
  background: linear-gradient(150deg, rgba(200,161,90,.16), rgba(200,161,90,.04));
}
.choice__i input:checked + label::after {
  border-color: var(--brass);
  background: var(--brass);
  box-shadow: inset 0 0 0 3px var(--coal);
}
.choice__i input:focus-visible + label { outline: 2px solid var(--brass); outline-offset: 3px; }

.choice__n {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -.015em;
  padding-right: 2rem;
}
.choice__d { font-size: .88rem; color: var(--sand); line-height: 1.5; }
.choice__k {
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 700;
}

/* Chip radios */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip label {
  display: inline-block;
  padding: .74em 1.15em;
  border: 1px solid var(--hair-strong);
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--sand);
  cursor: pointer;
  transition: all .35s var(--ease);
  white-space: nowrap;
}
.chip label:hover { color: var(--bone); border-color: var(--bone); }
.chip input:checked + label {
  background: var(--brass);
  border-color: var(--brass);
  color: #17120b;
  font-weight: 700;
}
.chip input:focus-visible + label { outline: 2px solid var(--brass); outline-offset: 3px; }

/* Stepper */
.steps {
  display: flex;
  gap: clamp(.5rem, 2vw, 1.6rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.step {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sand-dim);
  font-weight: 700;
  transition: color .4s;
}
.step__n {
  width: 30px; height: 30px;
  border: 1px solid var(--hair-strong);
  border-radius: 100px;
  display: grid;
  place-items: center;
  font-size: .68rem;
  flex: none;
  transition: all .45s var(--ease);
}
.step.is-active { color: var(--brass); }
.step.is-active .step__n { border-color: var(--brass); background: var(--brass); color: #17120b; }
.step.is-done { color: var(--sand); }
.step.is-done .step__n { border-color: var(--brass); color: var(--brass); }

.step-panel[hidden] { display: none; }

.step-nav {
  display: flex;
  gap: .8rem;
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--hair);
  flex-wrap: wrap;
}

.bk-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.bk-form { grid-column: 1 / 8; }
.bk-side { grid-column: 8 / 13; position: sticky; top: calc(var(--header-h) + 20px); }
@media (max-width: 1000px) {
  .bk-form, .bk-side { grid-column: 1 / -1; }
  .bk-side { position: static; }
}

.summary {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: linear-gradient(165deg, rgba(200,161,90,.07), rgba(255,255,255,.015));
}
.summary dl { display: grid; gap: .1rem; }
.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding-block: .78rem;
  border-bottom: 1px solid var(--hair);
  font-size: .92rem;
}
.summary__row:last-child { border-bottom: 0; }
.summary__row dt { color: var(--sand-dim); font-size: .78rem; letter-spacing: .06em; }
.summary__row dd { text-align: right; font-weight: 600; }

.notice {
  display: flex;
  gap: .9rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(200,161,90,.28);
  background: rgba(200,161,90,.07);
  border-radius: var(--radius);
  font-size: .88rem;
  color: var(--sand);
  line-height: 1.55;
}
.notice svg { flex: none; color: var(--brass); margin-top: .15em; }

.done {
  text-align: center;
  padding: clamp(2.4rem, 6vw, 4.4rem) clamp(1.2rem, 3vw, 2.4rem);
  border: 1px solid rgba(200,161,90,.34);
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(200,161,90,.12), transparent);
}
.done__ic {
  width: 66px; height: 66px;
  margin: 0 auto 1.6rem;
  border: 1px solid var(--brass);
  border-radius: 100px;
  display: grid;
  place-items: center;
  color: var(--brass);
}

/* ---------- 22. Info cards --------------------------------------------- */
.icards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.paper .icards { background: var(--hair-dark); border-color: var(--hair-dark); }

.icard {
  background: var(--coal);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  transition: background .5s var(--ease);
}
.paper .icard { background: var(--paper); }
.icard:hover { background: var(--stone); }
.paper .icard:hover { background: var(--paper-2); }

.icard h4 {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -.015em;
  margin-bottom: .6rem;
}
.icard p { font-size: .92rem; color: var(--sand); line-height: 1.6; }
.paper .icard p { color: #5c5145; }
.icard__ic { color: var(--brass); margin-bottom: 1.1rem; }
.paper .icard__ic { color: var(--brass-lo); }

/* Hours table */
.hours { width: 100%; border-collapse: collapse; }
.hours tr { border-bottom: 1px solid var(--hair); }
.paper .hours tr { border-color: var(--hair-dark); }
.hours tr:last-child { border-bottom: 0; }
.hours td { padding-block: .82rem; font-size: .94rem; }
.hours td:first-child { color: var(--sand); }
.paper .hours td:first-child { color: #6a6053; }
.hours td:last-child { text-align: right; font-weight: 600; }
.hours tr.is-closed td:last-child { color: var(--sand-dim); font-weight: 400; }
.hours tr.is-today { background: rgba(200,161,90,.07); }
.hours tr.is-today td:first-child { color: var(--brass); font-weight: 700; }

/* ---------- 23. CTA band ------------------------------------------------ */
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding-block: clamp(70px, 12vw, 150px);
}
.cta img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.34) saturate(.6);
}
.cta::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 100% at 50% 100%, rgba(92,31,36,.42), transparent 70%),
    linear-gradient(to bottom, rgba(11,9,8,.82), rgba(11,9,8,.9));
}
.cta h2 { max-width: 18ch; margin-inline: auto; }
.cta .lead { max-width: 56ch; margin-inline: auto; }
.cta .btn-row { justify-content: center; }

/* ---------- 24. Footer -------------------------------------------------- */
.ftr {
  background: var(--ink);
  border-top: 1px solid var(--hair);
  padding-top: clamp(3.4rem, 7vw, 6rem);
}
.ftr__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.4rem);
}
.ftr__brand { grid-column: 1 / 5; }
.ftr__col   { grid-column: span 2; }
.ftr__col:nth-of-type(3) { grid-column: span 3; }

@media (max-width: 980px) {
  .ftr__brand { grid-column: 1 / -1; }
  .ftr__col   { grid-column: span 6; }
  .ftr__col:nth-of-type(3) { grid-column: span 6; }
}
@media (max-width: 560px) {
  /* Zwölf Spalten plus elf Abstände passen hier nicht mehr hinein —
     deshalb wird das Footer-Raster einspaltig. */
  .ftr__grid { grid-template-columns: 1fr; }
  .ftr__brand,
  .ftr__col,
  .ftr__col:nth-of-type(3) { grid-column: auto; }
}

.ftr__h {
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.ftr__l { display: grid; gap: .68rem; }
.ftr__l a, .ftr__l li {
  font-size: .94rem;
  color: var(--sand);
  transition: color .3s;
  overflow-wrap: break-word;   /* lange E-Mail-Adressen dürfen umbrechen */
}
.ftr__l a:hover { color: var(--bone); }

.ftr__bot {
  margin-top: clamp(2.6rem, 5vw, 4.4rem);
  padding-block: 1.6rem;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: .76rem;
  color: var(--sand-dim);
}
.ftr__bot a:hover { color: var(--brass); }

.socials { display: flex; gap: .55rem; }
.socials a {
  width: 42px; height: 42px;
  border: 1px solid var(--hair);
  border-radius: 100px;
  display: grid;
  place-items: center;
  color: var(--sand);
  transition: all .42s var(--ease);
}
.socials a:hover { background: var(--brass); border-color: var(--brass); color: #17120b; }

/* ---------- 25. Mobile action bar --------------------------------------- */
.mbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 780;
  display: none;
  background: rgba(12,10,9,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--hair);
  padding: .6rem calc(var(--gut) * .5) calc(.6rem + env(safe-area-inset-bottom));
  gap: .5rem;
  transform: translateY(110%);
  transition: transform .6s var(--ease-out);
}
.mbar.is-on { transform: none; }
.mbar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .95em .6em;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid var(--hair-strong);
  color: var(--bone);
  min-height: 48px;
}
.mbar a.pri { background: var(--brass); border-color: var(--brass); color: #17120b; }

@media (max-width: 780px) {
  .mbar { display: flex; }
  body { padding-bottom: 0; }
  .ftr__bot { padding-bottom: 5.4rem; }
}

/* ---------- 26. Map ----------------------------------------------------- */
.map {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  filter: grayscale(1) invert(.9) contrast(.88) sepia(.24) hue-rotate(180deg);
  transition: filter .6s var(--ease);
}
.map:hover { filter: grayscale(.5) invert(.9) contrast(.9) sepia(.16) hue-rotate(180deg); }
@media (max-width: 620px) { .map { aspect-ratio: 4 / 3; } }

/* ---------- 27. Misc ---------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .5em .95em;
  border: 1px solid var(--hair-strong);
  border-radius: 100px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sand);
}
.pill .dot {
  width: 6px; height: 6px;
  border-radius: 100px;
  background: var(--brass);
  box-shadow: 0 0 0 3px rgba(200,161,90,.2);
}
.pill--live .dot { background: #7dbb72; box-shadow: 0 0 0 3px rgba(125,187,114,.22); animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(125,187,114,0); } }

.big-mark {
  font-family: var(--f-display);
  font-size: clamp(6rem, 17vw, 15rem);
  line-height: .8;
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200,161,90,.28);
  letter-spacing: -.04em;
  pointer-events: none;
  user-select: none;
}

.rule-label {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--sand-dim);
}
.rule-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hair);
}
.paper .rule-label::after { background: var(--hair-dark); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 1rem 1.4rem;
  background: var(--brass);
  color: var(--ink);
  font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

.center { text-align: center; }
.mt-s { margin-top: 1rem; }
.mt-m { margin-top: 2rem; }
.mt-l { margin-top: clamp(2.4rem, 5vw, 4rem); }
.mb-l { margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.mb-m { margin-bottom: 2rem; }
.nowrap { white-space: nowrap; }

/* ---------- 28. Spaltenhelfer ------------------------------------------
   Bewusst als Klassen statt inline, damit Media Queries greifen. Stehen am
   Ende der Datei, damit sie die Standardspalten von .split überschreiben. */
.c-a { grid-column: 1 / 6; }
.c-b { grid-column: 7 / 13; }
.c-c { grid-column: 1 / 7; }
.c-d { grid-column: 8 / 13; }
.c-4 { grid-column: span 4; }
.c-6 { grid-column: span 6; }

@media (max-width: 940px) {
  .c-a, .c-b, .c-c, .c-d { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .c-4 { grid-column: span 6; }
}
@media (max-width: 860px) {
  .c-6 { grid-column: 1 / -1; }
}
@media (max-width: 660px) {
  .c-4 { grid-column: 1 / -1; }
}

/* ---------- 29. Açılışa Özel — büyük yazı ------------------------------- */
#acilis .eyebrow {
  font-size: clamp(1.1rem, 2.2vw, 1.55rem);
  gap: 1em;
}
#acilis .eyebrow::before {
  width: clamp(32px, 5vw, 64px);
}
#acilis .menu-group__h h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
}
#acilis .menu-group__h .dim {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}
#acilis .dish__n {
  font-size: clamp(1.32rem, 2vw, 1.65rem);
}
#acilis .dish__p {
  font-size: clamp(1.2rem, 1.75vw, 1.45rem);
}
@media (max-width: 480px) {
  /* Açılışa Özel fiyat metinleri ("19,00 € - inkl. 1 Getränk nach Wahl")
     normal .dish__p'den (kısa "32,90 €" gibi) çok daha uzun — nowrap'te
     ekranın dışına taşıp kesik görünüyordu. Burada tek sütuna düşür + sar. */
  #acilis .dish {
    grid-template-columns: 1fr;
    row-gap: .25rem;
  }
  #acilis .dish__p {
    white-space: normal;
  }
}

/* ---------- 30. Reservierung — Hinweis für geschlossene Tage ----------- */
.closed-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}
.closed-modal[hidden] { display: none; }
.closed-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 9, 8, .74);
  backdrop-filter: blur(2px);
}
.closed-modal__panel {
  position: relative;
  width: 100%;
  max-width: 30rem;
  background: var(--coal);
  border: 1px solid rgba(200, 161, 90, .34);
  border-radius: var(--radius);
  padding: clamp(1.9rem, 4vw, 2.6rem);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  animation: closedModalIn .32s var(--ease-out);
}
@keyframes closedModalIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.closed-modal__ic {
  width: 52px;
  height: 52px;
  margin: 0 auto 1.15rem;
  border: 1px solid var(--ember);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ember);
}
.closed-modal__panel h3 {
  font-family: var(--f-display);
  font-weight: 420;
  font-size: 1.28rem;
  color: var(--bone);
  margin-bottom: .65rem;
}
.closed-modal__panel p {
  color: var(--sand);
  font-size: .92rem;
  line-height: 1.62;
}
.closed-modal__x {
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--sand);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.closed-modal__x:hover { color: var(--bone); border-color: var(--hair-strong); }