/* =============================================================================
   CAVALLINO V2 · PAGES
   Restaurant, reservation, contact and 404. Loaded after home.css, whose
   chapter frame, booking instrument and oven label these pages reuse as they
   stand; everything here is page-specific composition and the shared request
   form. Photographs and words stay inside the framed gutters.
   ========================================================================== */

/* =============================================================================
   PAGE HEAD — utility pages
   ========================================================================== */

.page-head { padding-block: clamp(var(--s7), 6vw, var(--s9)) clamp(var(--s6), 4vw, var(--s8)); }
.page-head__title { font-size: var(--fs-h1); max-width: 16ch; text-wrap: balance; }
.page-head__lead { margin-top: var(--s4); color: var(--on-ground-muted); }

/* =============================================================================
   RESTAURANT — arrival
   ========================================================================== */

.r-arrival { padding-block: clamp(var(--s7), 6vw, var(--s9)) var(--chapter-pad); }

.r-arrival__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(var(--s6), 4vw, var(--s8));
}
.r-arrival__title {
  margin-top: var(--s3);
  color: var(--ivory);
  /* The title is a name: it never breaks between its two words. */
  white-space: nowrap;
}
.r-arrival__lead { margin-top: var(--s5); color: var(--on-ground-muted); }

.r-arrival__media { aspect-ratio: 4 / 3; }
.r-arrival__media > img { object-position: 52% 60%; }

/* =============================================================================
   RESTAURANT — two dining rooms
   ========================================================================== */

.r-rooms__major { aspect-ratio: 16 / 10; }
.r-rooms__major > img { object-position: 50% 52%; }
.r-rooms__minor { aspect-ratio: 4 / 3; width: 78%; margin-left: auto; }
.r-rooms__minor > img { object-position: 42% 50%; }

/* =============================================================================
   RESTAURANT — kitchen: title centred, five plates of equal size in one row
   ========================================================================== */

.r-kitchen__title { text-align: center; }
.r-kitchen__row {
  list-style: none;
  margin: clamp(var(--s6), 4vw, var(--s8)) 0 0;
  padding: var(--s4) 0 var(--s6);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 64%;
  gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.r-kitchen__row::-webkit-scrollbar { display: none; }
.r-kitchen__item { scroll-snap-align: center; }
.r-kitchen__plate {
  aspect-ratio: 3 / 4;
  margin: 0;
  transform-origin: 50% 60%;
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              opacity var(--dur-2) var(--ease);
}

/* =============================================================================
   RESTAURANT — oven, bar with the horse, round table
   ========================================================================== */

.r-oven__media { margin-top: var(--s4); }

.r-bar__media { aspect-ratio: 16 / 10; }
.r-bar__media > img { object-position: 50% 80%; }

/* The exact artwork at a restrained scale: no crop, filter or motion. */
.r-bar__horse {
  display: grid;
  grid-template-columns: clamp(96px, 26vw, 180px) minmax(0, 1fr);
  align-items: center;
  gap: var(--s5);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: var(--bd-hair) solid var(--rule);
}
.r-bar__horse img { width: 100%; height: auto; }
.r-bar__horse figcaption {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--brass-bright);
}

.r-table__media { aspect-ratio: 3 / 2; }
.r-table__media > img { object-position: 50% 58%; }
.r-table__say { padding-top: var(--s4); border-top: var(--bd-hair) solid var(--rule); }

/* =============================================================================
   REQUEST FORMS — reservation and contact
   ========================================================================== */

.request { padding-bottom: var(--chapter-pad); }

.request__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s8);
}

.request__form { display: grid; gap: var(--s7); min-width: 0; }

.request__set {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.request__legend {
  float: left;
  width: 100%;
  margin: 0 0 var(--s2);
  padding: 0 0 var(--s3);
  border-bottom: var(--bd-hair) solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
}

.label__optional {
  margin-left: var(--s1);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.field > textarea {
  width: 100%;
  min-height: 140px;
  padding: var(--s3) var(--s4);
  border: var(--bd-hair) solid var(--field-bd);
  border-radius: var(--r-ctl);
  background: var(--field-bg);
  color: var(--on-ground);
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
}
.field > textarea:focus-visible { border-color: var(--accent-text); }

.request__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s6);
}
.request__submit { min-height: 56px; font-size: var(--fs-body); }
.request__submit:disabled { opacity: 0.55; cursor: not-allowed; }
.request__assign { margin: 0; font-size: var(--fs-small); color: var(--on-ground-muted); }
.request__noscript { margin: 0; font-size: var(--fs-small); }

/* The status: a fact, never styled as a celebration. */
.form-status:empty { display: none; }
[data-form-message][hidden] { display: none; }
.form-status__msg {
  padding-left: var(--s4);
  border-left: var(--bd-state) solid var(--accent);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.form-status__msg p { margin: 0; }
.form-status__msg p + p { margin-top: var(--s2); }
.form-status__phone { font-weight: 600; }

.request__aside {
  align-self: start;
  padding: var(--s6);
  background: var(--ground-sunken);
  border-radius: var(--r-ctl);
}
.request__aside-title { margin: 0; font-size: var(--fs-small); color: var(--on-ground-muted); }
.request__aside-phone {
  display: inline-block;
  margin-top: var(--s2);
  font-family: var(--font-display);
  /* Eine Telefonnummer wird nie umgebrochen; sie passt sich der Spalte an. */
  white-space: nowrap;
  font-size: min(var(--fs-h2), 6.4vw);
  font-weight: 500;
  line-height: 1.15;
  color: var(--on-ground);
  text-decoration: none;
}
.request__aside-phone:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.request__aside-address { margin-top: var(--s5); font-style: normal; font-size: var(--fs-small); line-height: 1.5; }

/* =============================================================================
   CONTACT
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s8);
  padding-bottom: var(--chapter-pad);
}
.contact__details { display: grid; gap: var(--s6); align-content: start; }
.contact__label { margin: 0 0 var(--s2); }
.contact__phone {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.05;
  color: var(--on-ground);
  text-decoration: none;
}
.contact__phone:hover { text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 1px; }
.contact__address { font-style: normal; font-size: var(--fs-lead); line-height: 1.5; }
.contact__route {
  display: inline-flex;
  margin-top: var(--s3);
  min-height: 44px;
  align-items: center;
  font-weight: 500;
  color: var(--accent-text);
  text-underline-offset: 0.22em;
}
.contact__hotel { display: inline-block; margin-top: var(--s2); }
.contact__family {
  margin: 0;
  padding-top: var(--s5);
  border-top: var(--bd-hair) solid var(--rule);
  font-size: var(--fs-small);
  color: var(--on-ground-muted);
}
.contact__form-title { margin-bottom: var(--s6); }

/* =============================================================================
   404
   ========================================================================== */

.notfound { padding-block: clamp(var(--s8), 9vw, var(--s10)); }
.notfound__title { max-width: 14ch; text-wrap: balance; }
.notfound__title::before {
  content: "";
  display: block;
  width: 64px;
  height: var(--bd-state);
  margin-bottom: var(--s6);
  background: var(--brass);
}
.notfound__text { margin-top: var(--s6); color: var(--on-ground-muted); }
.notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s6);
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
}
.notfound__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--on-ground);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.notfound__reserve { margin-top: var(--s7); }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */

@media (min-width: 760px) {
  .request__set { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); }
  .request__legend, .field--wide { grid-column: 1 / -1; }

  .r-kitchen__row { grid-auto-columns: 38%; gap: var(--s5); }
  .r-bar__horse { grid-template-columns: 180px minmax(0, 1fr); }
}

@media (min-width: 1024px) {
  /* Arrival: the title on the ground, the window table beside it. */
  .r-arrival__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 40px);
    align-items: end;
  }
  .r-arrival__say { grid-column: 1 / 6; grid-row: 1; padding-bottom: var(--s6); }
  /* Sized to its column, so the one-line title keeps clear of the photograph. */
  .r-arrival__title { font-size: min(var(--fs-display), 5.2vw); }
  .r-arrival__media {
    grid-column: 6 / 13;
    grid-row: 1;
    aspect-ratio: 3 / 2;
    max-height: calc(100svh - 180px);
  }

  /* Rooms: words above a smaller photograph; the larger answers both rows. */
  .r-rooms__say { grid-column: 1 / 5; grid-row: 1; align-self: start; }
  .r-rooms__minor { grid-column: 1 / 6; grid-row: 2; align-self: end; width: 100%; }
  .r-rooms__major {
    grid-column: 6 / 13;
    grid-row: 1 / 3;
    aspect-ratio: 4 / 3;
    max-height: calc(100svh - 160px);
  }

  /* Kitchen: five plates side by side, all the same size. The row stops
     scrolling and leaves room above and below for a plate to grow. */
  .r-kitchen__row {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: clamp(16px, 1.6vw, 28px);
    overflow: visible;
    padding: var(--s6) 0 var(--s7);
  }

  /* Oven: the photograph leads, the words answer from the right. */
  .r-oven__media { grid-column: 1 / 8; grid-row: 1; margin-top: 0; }
  .r-oven__say { grid-column: 9 / 13; grid-row: 1; align-self: center; }

  /* Bar: the photograph, and beside it the words with the small horse. */
  .r-bar__media { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 4 / 3; max-height: calc(100svh - 160px); }
  .r-bar__say { grid-column: 9 / 13; grid-row: 1; align-self: end; }
  .r-bar__horse { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .r-bar__horse img { width: clamp(140px, 13vw, 200px); }

  /* Round table: the photograph right, the words holding the lower left. */
  .r-table__media { grid-column: 5 / 13; grid-row: 1; aspect-ratio: 16 / 10; max-height: calc(100svh - 180px); }
  .r-table__say { grid-column: 1 / 5; grid-row: 1; align-self: end; }

  /* Titles in the narrow word columns stay on one line (German) and are sized
     to the column, so no word is left alone on a line. */
  .r-rooms__say .chapter__title { white-space: nowrap; font-size: min(var(--fs-h1), 3.1vw); }
  /* Longer now: two balanced lines in its narrow column. */
  .r-table__say .chapter__title { text-wrap: balance; font-size: min(var(--fs-h1), 3.1vw); }
  .r-oven__say .chapter__title { font-size: min(var(--fs-h1), 3.4vw); }

  /* Reservation: the form, and the telephone beside it. */
  .request__layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 40px); }
  .request__form { grid-column: 1 / 9; }
  .request__aside { grid-column: 10 / 13; position: sticky; top: calc(var(--masthead-h) + var(--s6)); }

  /* Contact: utility left, the message form right. */
  .contact { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 40px); }
  .contact__details { grid-column: 1 / 5; }
  .contact__form { grid-column: 6 / 13; }
}

/* Kontaktseite: E-Mail im Stil der Telefonnummer, aber umbrechbar und etwas kleiner */
.contact__email { overflow-wrap: anywhere; font-size: 0.72em; }

/* Kitchen hover: only where there is a real mouse. The hovered plate lifts
   and grows above its neighbours; the others step back slightly. */
@media (hover: hover) and (pointer: fine) {
  .r-kitchen__plate:hover {
    transform: translateY(-10px) scale(1.14);
    box-shadow: var(--shadow-lift);
    z-index: 2;
  }
  .r-kitchen__row:hover .r-kitchen__plate:not(:hover) { opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .r-kitchen__plate { transition: none; }
  .r-kitchen__plate:hover { transform: none; }
}

/* =============================================================================
   RESTAURANT — tapas note in the dining-rooms column
   ========================================================================== */

.r-tapas { margin-top: var(--s6); padding-top: var(--s5); border-top: var(--bd-hair) solid var(--rule); max-width: 46ch; }
.r-tapas__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
}
.r-tapas__text { margin: var(--s3) 0 0; color: var(--on-ground-muted); }

.r-arrival__menu { color: var(--brass-bright); }
.r-kitchen__cta { margin: var(--s6) 0 0; text-align: center; }

/* =============================================================================
   TAKE-AWAY
   ========================================================================== */

.ta-arrival__price {
  margin: var(--s4) 0 0;
  padding-left: var(--s4);
  border-left: var(--bd-state) solid var(--brass);
  color: var(--ivory);
  font-weight: 500;
}

.ta-steps__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
  margin: clamp(var(--s6), 4vw, var(--s8)) 0 0;
  padding: 0;
  list-style: none;
}
.ta-step { padding-top: var(--s5); border-top: var(--bd-hair) solid var(--rule); }
.ta-step__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--accent-text);
}
.ta-step__title {
  margin: var(--s3) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
}
.ta-step__text { margin: var(--s3) 0 0; color: var(--on-ground-muted); }
.ta-step__link { color: var(--on-ground); font-weight: 500; text-underline-offset: 0.2em; }

.ta-menu__lead { margin-top: var(--s4); max-width: 60ch; color: var(--on-ground-muted); }
.ta-menu__groups { display: grid; gap: clamp(var(--s7), 5vw, var(--s9)); margin-top: clamp(var(--s6), 4vw, var(--s8)); }
.ta-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.ta-group__media { margin: 0; aspect-ratio: 4 / 3; }
/* Upright food photographs are shown whole instead of cropped close. */
.ta-group__media--upright { aspect-ratio: 3 / 4; width: min(100%, 420px); justify-self: center; }
.ta-group__title { margin: 0; }
.ta-group__text { margin: var(--s3) 0 0; color: var(--on-ground-muted); max-width: 44ch; }
.ta-group__list { margin: var(--s5) 0 0; padding: 0; list-style: none; }
.ta-item {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: var(--bd-hair) dashed var(--rule);
  color: var(--on-ground-muted);
  font-style: italic;
}
.ta-item__price { font-style: normal; white-space: nowrap; }

.ta-order__panel { text-align: center; }
.ta-order__lead { margin: var(--s4) auto 0; max-width: 46ch; color: var(--on-ground-muted); }
.ta-order__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: var(--s6); }
.ta-order .action--quiet { overflow-wrap: anywhere; }

@media (min-width: 760px) {
  .ta-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ta-group { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(var(--s6), 4vw, var(--s8)); align-items: center; }
  .ta-group:nth-child(even) .ta-group__media { order: 2; }
}

/* =============================================================================
   MENU CARDS — one page per menu, with the way to the other two
   ========================================================================== */

.menu-tabs { background: var(--espresso-900, #17110C); }
.menu-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: 0;
  padding-block: var(--s4);
  list-style: none;
}
.menu-tabs__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: rgba(247, 242, 231, 0.72);
  text-decoration: none;
}
.menu-tabs__link:hover { color: var(--ivory); }
.menu-tabs__link[aria-current="page"] {
  color: var(--brass-bright);
  box-shadow: inset 0 -2px 0 var(--brass-bright);
}
.menu-card__list { margin-top: clamp(var(--s6), 4vw, var(--s8)); }
.menu-card__link { color: inherit; text-underline-offset: 0.18em; }

/* "Bankett / Gruppen" is longer than a two-word name: it may wrap. */
/* An upright food photograph keeps its shape in the arrival grid. */
.r-arrival__media--upright { aspect-ratio: 3 / 4; }
[data-page="gruppen"] .r-arrival__title { white-space: normal; text-wrap: balance; font-size: min(var(--fs-display), 6vw); }

/* =============================================================================
   MENU CARD — the dishes in the page: facts first, then rows with prices
   ========================================================================== */

.card__head { max-width: 62ch; }
.card-facts {
  display: grid;
  gap: var(--s2);
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
}
.card-facts__item {
  padding-left: var(--s5);
  position: relative;
  color: var(--on-ground-muted);
}
.card-facts__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: var(--s3);
  height: var(--bd-state);
  background: var(--brass);
}

.card__body { display: grid; gap: clamp(var(--s6), 4vw, var(--s8)); margin-top: clamp(var(--s6), 4vw, var(--s8)); }
.card-block__title {
  margin: 0 0 var(--s4);
  padding-bottom: var(--s3);
  border-bottom: var(--bd-hair) solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.card-rows { margin: 0; padding: 0; list-style: none; }
.card-row {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3) 0;
}
.card-row + .card-row { border-top: var(--bd-hair) dotted var(--rule); }
.card-row__say { flex: 1 1 auto; min-width: 0; }
.card-row__name { margin: 0; font-weight: 500; }
.card-row__note { margin: var(--s1) 0 0; font-size: var(--fs-small); color: var(--on-ground-muted); }
/* The leader between dish and price, drawn rather than typed. */
.card-row::after {
  content: "";
  order: 1;
  flex: 0 1 clamp(24px, 12vw, 160px);
  align-self: baseline;
  height: 0;
  border-bottom: var(--bd-hair) dotted var(--rule);
  translate: 0 -0.3em;
}
.card-row__price { order: 2; margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }

.card__status {
  margin: clamp(var(--s6), 4vw, var(--s7)) 0 0;
  padding: var(--s4) var(--s5);
  background: var(--ground-sunken);
  border-radius: var(--r-ctl);
  font-size: var(--fs-small);
}
.card__status a { font-weight: 600; }

.card-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 20px);
  margin: clamp(var(--s6), 4vw, var(--s8)) 0 0;
  padding: 0;
  list-style: none;
}
.card-strip__photo { margin: 0; aspect-ratio: 1 / 1; }

.card__label {
  margin: clamp(var(--s6), 4vw, var(--s8)) 0 0;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ground-muted);
}
.card__other { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s7); margin: 0; padding: 0; list-style: none; }
.card__other .route-mark { margin-top: var(--s3); }

@media (min-width: 760px) {
  .card__body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--s6), 3vw, var(--s8)); }
  .card__body > .card-block:only-child { grid-column: 1 / -1; max-width: 46rem; }
}