/* Shared navigation offsets and reflow rules for the home page and menu. */
:root {
  --site-header-height: 5rem;
  --menu-nav-height: 5rem;
}
main[id], main section[id] {
  scroll-margin-top: calc(var(--site-header-height) + 1rem);
}
.menu-category-shell {
  top: var(--site-header-height);
}
main section.menu-anchor[id] {
  scroll-margin-top: calc(var(--site-header-height) + var(--menu-nav-height) + 1rem);
}
header > div, header nav[aria-label="Hauptnavigation"], footer > div > div {
  flex-wrap: wrap;
}
header > div > a {
  flex: 1 1 0%;
  min-width: 0;
}
header > div > a img, [data-menu-toggle] {
  flex-shrink: 0;
}
header .truncate {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}
[data-menu] {
  max-height: calc(100dvh - var(--site-header-height) - 1rem);
  overflow-y: auto;
}
main .grid > *, main .flex > * {
  min-width: 0;
}
main h1, main h2, main h3, main h4, main p, main address,
#kontakt a, #kontakt dd, #nachricht a, #nachricht label {
  overflow-wrap: anywhere;
}
#nachricht input:not([type="checkbox"]), #nachricht textarea {
  min-width: 0;
  max-width: 100%;
}
#nachricht input[type="checkbox"] {
  flex-shrink: 0;
}
.menu-category-nav {
  /* Keep the first category reachable even when the row overflows. */
  justify-content: safe center;
}
@media (max-width: 30rem) {
  .menu-item, .menu-panel .menu-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .menu-item .menu-item__name {
    grid-column: 1 / -1;
  }
  .menu-item .menu-item__size {
    grid-column: 1;
    grid-row: 2;
    white-space: normal;
  }
  .menu-item .menu-item__price {
    grid-column: 2;
    grid-row: 2;
  }
  #kontakt dl > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Visit details and the message form have separate, balanced layouts. */
.contact-visit {
  padding: 4rem 1rem 2.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(236,226,211,.45));
}
.contact-container { max-width: 76rem; margin-inline: auto; }
.contact-heading { text-align: center; margin-bottom: 2rem; }
.contact-info-grid { display: grid; gap: 1.25rem; }
.contact-info-card {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(182,122,79,.15);
  border-radius: 1.75rem;
  background: rgba(255,255,255,.85);
  box-shadow: 0 20px 55px -32px rgba(63,46,34,.28);
  color: #6b6764;
}
.contact-info-card h3 { margin-bottom: 1.25rem; font-size: 1.65rem; line-height: 1.3; color: #373332; }
.contact-info-card address { line-height: 1.8; }
.contact-details { display: grid; gap: 1rem; }
.contact-details dt { font-size: .85rem; color: #99613c; margin-bottom: .25rem; }
.contact-details dd { margin: 0; line-height: 1.6; }
.contact-action {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.5rem; padding: .65rem 1.25rem;
  border-radius: 999px;
}
.contact-text-link { color: #99613c; text-decoration: underline; text-underline-offset: .25em; }
.contact-info-card > .contact-text-link { display: inline-block; margin-top: 1.25rem; }
.contact-details a:hover, .contact-text-link:hover { color: #373332; }
.contact-hours dl { margin-top: 0; gap: .35rem; font-size: .95rem; line-height: 1.6; }
.contact-hours dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding-bottom: .35rem; }
.contact-hours dd { margin: 0; }
.contact-message { padding: 1.5rem 1rem 4rem; background: rgba(236,226,211,.45); }
.contact-form-card {
  max-width: 48rem; min-width: 0; margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid rgba(182,122,79,.15); border-radius: 2.2rem;
  background: rgba(255,255,255,.85); box-shadow: 0 24px 70px -32px rgba(153,97,60,.35);
}
.contact-form-heading { margin-bottom: 1.75rem; }
.contact-form-heading p { margin-top: 1rem; line-height: 1.8; color: #6b6764; }
.contact-form-heading .contact-reservation-note { font-size: .9rem; }
.contact-form-card [data-form-status]:not(.hidden) { margin-bottom: 1.25rem; }
@media (min-width: 64rem) {
  .contact-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-visit { padding: 5rem 2rem 2.5rem; }
  .contact-message { padding-bottom: 5rem; }
}

/* Reflow long German words without changing the editorial copy. */
main h1, main h2, main h3, main h4, main p, main li {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: anywhere;
}
main a, footer a { overflow-wrap: anywhere; }
main img { max-width: 100%; }
.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 100;
  padding: .75rem 1.25rem;
  border-radius: .75rem;
  background: #fff;
  color: #373332;
  transform: translateY(calc(-100% - 1rem));
}
.skip-link:focus { transform: translateY(0); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #99613c;
  outline-offset: 3px;
}
[data-menu-toggle], .menu-category-nav a, footer a,
.contact-action, .contact-info-card > .contact-text-link, .contact-details a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* Preserve the Tailwind desktop-only/menu-only visibility switch. */
@media (min-width: 64rem) { [data-menu-toggle] { display: none; } }
.menu-category-nav { overscroll-behavior-x: contain; }
[data-menu] { overscroll-behavior-y: contain; }
#nachricht input, #nachricht textarea {
  scroll-margin-top: calc(var(--site-header-height) + 1rem);
}
@media (max-width: 30rem) {
  .ornate-card--featured, .ornate-card--concept, .ornate-card--offer {
    --ornate-pad-left: 2rem;
    --ornate-pad-right: 2rem;
  }
  header > div { column-gap: .5rem; }
  main > section > p:first-child { letter-spacing: .2em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Shared button colors preserve the café palette with readable contrast. */
.site-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.5rem;
  border: 1px solid rgba(182, 122, 79, .5);
  text-align: center;
  transition: background-color .15s, border-color .15s, color .15s;
}
.site-button--primary {
  background-color: #99613c;
  color: #fff;
}
.site-button--secondary {
  background-color: rgba(255, 255, 255, .8);
  color: #99613c;
}
@media (hover: hover) {
  .site-button--primary:hover {
    background-color: color-mix(in srgb, #99613c 88%, #373332);
  }
  .site-button--secondary:hover {
    background-color: #f7f2eb;
    border-color: #99613c;
  }
}
.site-button:focus-visible {
  outline: 2px solid #99613c;
  outline-offset: 3px;
}
/* Keep the mobile navigation toggle hidden on desktop. */
@media (min-width: 64rem) {
  [data-menu-toggle].site-button { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-button { transition: none; }
}

.contact-form-status { border: 1px solid; border-radius: 1.4rem; padding: .75rem 1rem; line-height: 1.75; }
.contact-form-status--success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.contact-form-status--error { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }
.contact-field-error { margin-top: .5rem; color: #9f1239; }
#nachricht [aria-invalid="true"] { border-color: #9f1239; outline: 2px solid #9f1239; outline-offset: 2px; }
.site-button:disabled { cursor: wait; opacity: .7; }