/* ==========================================================================
   Altes Kelterhaus – Designsystem
   Aufbau: 1 Fonts · 2 Tokens · 3 Basis · 4 Layout · 5 Typografie · 6 Buttons
           7 Header/Navigation · 8 Sektionen · 9 Formulare · 10 Footer
           11 Hilfsklassen & Animation
   ========================================================================== */

/* 1 · Fonts (lokal eingebunden, keine Verbindung zu Google) ------------------ */
@font-face {
  font-family: 'Jost';
  src: url('../assets/fonts/jost-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/cormorant-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/cormorant-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/cormorant-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/cormorant-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/cormorant-500-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* 2 · Tokens --------------------------------------------------------------- */
:root {
  /* Farben – Betonoptik: Sichtbeton-Grautöne, Anthrazit und das Ocker der bestehenden Marke */
  --paper: #e9e8e5;          /* heller Sichtbeton – Grundfläche */
  --sand: #dcdbd7;           /* mittlerer Beton – abgesetzte Sektionen */
  --sand-deep: #cbc9c4;
  --surface: #f4f4f2;        /* Karten & Formularfelder */
  --ink: #1d1f1f;
  --text: #3d4041;
  --muted: #5b5e60;
  --line: #c3c1bc;
  --slate: #2c2e2e;          /* Anthrazit */
  --slate-2: #373a3a;
  --on-slate: #e8e7e4;
  --on-slate-muted: #adaeab;
  --on-slate-rgb: 232 231 228;
  --accent: #74571f;
  --accent-hover: #5e4618;
  --accent-light: #c8a96b;
  --white: #fff;
  --error: #9b2c1f;
  --error-bg: #f6ebe7;

  /* Beton-Struktur: feine Körnung + wolkige Schattierung (inline-SVG, keine Bilddatei).
     Zum Abschalten: --texture: none; */
  --texture:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.07'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='.09'/%3E%3C/svg%3E");

  /* Typografie */
  --font-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --fs-xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-2xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --fs-hero: clamp(2.75rem, 1.6rem + 4.6vw, 5.75rem);

  /* Abstände & Maße */
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --section: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --maxw: 82rem;
  --header-h: 4.5rem;
  --radius: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 1100px) {
  :root { --header-h: 5.5rem; }
}

/* 3 · Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--texture);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 380;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

[hidden] { display: none !important; }

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.section--slate :focus-visible { outline-color: var(--accent-light); }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

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

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }

/* 4 · Layout --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(48rem + 2 * var(--gutter)); }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--sand { background-color: var(--sand); background-image: var(--texture); }
.section--slate { background-color: var(--slate); background-image: var(--texture); color: var(--on-slate-muted); }
.section--slate :is(h1, h2, h3, h4, .display) { color: var(--on-slate); }

.section-head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 44rem;
}
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head--split {
  max-width: none;
  align-items: end;
}
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.1fr 1fr; gap: 4rem; }
}

.stack > * + * { margin-top: var(--stack, 1.25rem); }

/* 5 · Typografie ----------------------------------------------------------- */
h1, h2, h3, h4, .display {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1, .display-hero { font-size: var(--fs-hero); line-height: 1; }
/* Sehr schmale Displays (≤ 380 px): lange deutsche Wörter in Überschriften trennen statt überlaufen */
@media (max-width: 380px) { h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; } }
h2, .display { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); line-height: 1.15; }
h4 { font-size: var(--fs-md); line-height: 1.25; }
p { margin: 0; text-wrap: pretty; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: currentColor;
}
.section-head--center .eyebrow::before { display: none; }
.section--slate .eyebrow { color: var(--accent-light); }

.lead {
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.6;
  color: var(--text);
}
.section--slate .lead { color: var(--on-slate-muted); }

.serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); line-height: 1.55; }

.quote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}

/* 6 · Buttons & Links ------------------------------------------------------ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 500 var(--fs-sm) / 1.2 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn .icon { width: 1.1em; height: 1.1em; }
/* Schmale Displays: längere französische/niederländische Beschriftungen brechen um statt überzulaufen (DE/EN unverändert) */
@media (max-width: 559px) { :is(:lang(fr), :lang(nl)) .btn { white-space: normal; text-align: center; } }
.btn:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); }

.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--white); --btn-border: var(--accent); }
.btn--primary:hover { --btn-bg: var(--accent-hover); --btn-border: var(--accent-hover); --btn-fg: var(--white); }

.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-border: var(--ink); }
.btn--dark:hover { --btn-bg: var(--accent); --btn-border: var(--accent); }

.btn--light { --btn-fg: var(--on-slate); --btn-border: rgb(var(--on-slate-rgb) / 0.45); }
.btn--light:hover { --btn-bg: var(--on-slate); --btn-fg: var(--slate); --btn-border: var(--on-slate); }

.btn--small { min-height: 2.75rem; padding: 0.6rem 1.1rem; letter-spacing: 0.1em; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 559px) { .btn-row > .btn { flex: 1 1 100%; } }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.35rem;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.link-arrow .icon { transition: transform 0.3s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }
.section--slate .link-arrow { color: var(--on-slate); }

/* 7 · Header & Navigation -------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--paper);
  background-image: var(--texture);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
}

.brand {
  display: block;
  flex: none;
  margin-right: auto;
}
.brand img { width: auto; height: calc(var(--header-h) - 0.5rem); mix-blend-mode: multiply; }

.nav { display: none; }
.nav__list {
  display: flex;
  gap: clamp(1rem, 1.55vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  position: relative;
  padding-block: 0.5rem;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 420;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.header-actions .btn { display: none; }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 450;
  text-decoration: none;
  white-space: nowrap;
}
.header-phone span { display: none; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.icon-btn .icon { width: 1.2rem; height: 1.2rem; }

.menu-toggle { border-color: var(--ink); }

/* Breakpoints: 640 Tisch reservieren · 900 beide Buchungsaktionen (mobile Leiste entfällt)
   · 1200 Hauptnavigation (DESKTOP_NAV in main.js) · 1440 Telefonnummer ausgeschrieben */
@media (min-width: 640px) {
  .header-actions .btn--primary { display: inline-flex; }
}
@media (min-width: 900px) {
  .header-actions .btn { display: inline-flex; }
}
@media (min-width: 1200px) {
  .site-header__inner { gap: clamp(1rem, 1.6vw, 1.5rem); }
  .nav { display: block; }
  .menu-toggle { display: none; }
  .header-phone { display: inline-flex; border: 0; width: auto; height: auto; border-radius: 0; margin-right: 0.25rem; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .nav__link { font-size: 0.875rem; }
}
@media (min-width: 1440px) {
  .header-phone span { display: inline; }
}

/* Sprachschalter: Desktop im Header (ab Hauptnavigation), mobil im Menü. Nur mit mehr als einer Sprache im HTML. */
.lang-switch { display: none; align-items: center; gap: 0.6rem; margin-right: 0.35rem; }
.lang-switch__link {
  position: relative;
  padding-block: 0.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 450;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.lang-switch__link:hover { color: var(--ink); }
.lang-switch__link[aria-current='true'] { color: var(--ink); }
.lang-switch__link[aria-current='true']::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.2rem;
  height: 1px;
  background: currentColor;
}
.lang-switch__sep { width: 1px; height: 0.85rem; background: var(--line); }
@media (min-width: 1200px) {
  .lang-switch { display: inline-flex; }
}
.mobile-menu__lang { display: flex; flex-wrap: wrap; gap: 0 1.5rem; font-size: var(--fs-sm); letter-spacing: 0.04em; } /* vier Sprachen: umbrechen statt überlaufen */
.mobile-menu__lang a { padding-block: 0.4rem; color: var(--muted); text-decoration: none; }
.mobile-menu__lang a[aria-current='true'] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.35em; }

/* Mobile-Menü */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  background-color: var(--paper);
  background-image: var(--texture);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s 0.3s;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.mobile-menu__list { margin: 0; padding: 0; list-style: none; }
.mobile-menu__list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}
.mobile-menu__list .icon { color: var(--accent); }
.mobile-menu__contact { display: grid; gap: 0.35rem; margin-top: auto; font-size: var(--fs-sm); }
.mobile-menu__contact a { color: var(--ink); }
@media (min-width: 1200px) { .mobile-menu { display: none; } }

/* Mobile Aktionsleiste */
.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom));
  background: rgb(233 232 229 / 0.96);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
  transform: translateY(110%);
  transition: transform 0.35s var(--ease);
}
.action-bar.is-visible { transform: none; }
.action-bar .btn { min-height: 3rem; padding-inline: 0.4rem; letter-spacing: 0.05em; font-size: 0.75rem; white-space: normal; text-align: center; }
.action-bar .icon-btn { width: 3rem; height: 3rem; border-radius: var(--radius); border-color: var(--ink); }
@media (min-width: 900px) { .action-bar { display: none; } }

/* 8 · Sektionen ------------------------------------------------------------ */

/* Hero */
.hero { position: relative; }
.hero__grid { display: grid; }
.hero__media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3.4;
  max-height: 58svh;
  background: var(--sand);
}

/* Slideshow: Slides liegen übereinander und blenden weich über */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide picture { width: 100%; height: 100%; }
.hero__slide :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
.hero__slide.is-active :is(img, video) { animation: hero-drift 16s var(--ease) both; }
@keyframes hero-drift { from { transform: scale(1.04); } to { transform: none; } }

.hero__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem clamp(0.75rem, 2vw, 1.5rem) clamp(0.5rem, 1.5vw, 1.25rem);
  background: linear-gradient(to top, rgb(24 26 26 / 0.32), transparent);
}
.hero__dots { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.hero__dot {
  position: relative;
  width: 2rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hero__dot::before {
  content: '';
  position: absolute;
  left: 0.3rem;
  right: 0.3rem;
  top: 50%;
  height: 2px;
  background: rgb(255 255 255 / 0.45);
  transition: background 0.4s;
}
.hero__dot:hover::before { background: rgb(255 255 255 / 0.8); }
.hero__dot[aria-current='true']::before { background: var(--white); }
.hero__pause {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgb(255 255 255 / 0.55);
  border-radius: 50%;
  background: rgb(24 26 26 / 0.25);
  color: var(--white);
  cursor: pointer;
}
.hero__pause:hover { background: rgb(24 26 26 / 0.45); }
.hero__pause .icon { width: 0.95rem; height: 0.95rem; }
.hero__controls :focus-visible { outline-color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero__slide.is-active :is(img, video) { animation: none; }
}
.hero__content {
  display: grid;
  align-content: center;
  gap: 1.5rem;
  padding: 2.25rem var(--gutter) 3rem;
}
.hero__title { font-size: var(--fs-hero); }
.hero__title em {
  display: block;
  margin-top: 0.35em;
  font-size: 0.42em;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--text);
}
.hero__lead { max-width: 30rem; }
/* Vertrauenselemente: vier ruhige Textzeilen im 2×2-Raster, keine Siegel */
.hero__awards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.hero__award { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.hero__award:nth-child(odd) { padding-right: 1rem; border-right: 1px solid var(--line); }
.hero__award:nth-child(even) { padding-left: 1rem; }
.hero__award:nth-last-child(-n + 2) { border-bottom: 0; }
.hero__award a { display: block; color: inherit; text-decoration: none; }
.hero__award strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.hero__award span { display: block; margin-top: 0.15rem; color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }
.hero__award a strong::after { content: '\2197'; content: '\2197' / ''; margin-left: 0.35em; color: var(--accent); font-weight: 400; letter-spacing: 0; }
.hero__award a:hover strong { color: var(--accent); }

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    min-height: min(calc(100svh - var(--header-h)), 58rem);
  }
  .hero__media { order: 2; aspect-ratio: auto; max-height: none; }
  .hero__content {
    padding-block: 4rem;
    padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
    padding-right: clamp(2rem, 4vw, 5rem);
  }
}

/* Haltung / Intro */
.intro {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.intro__media { position: relative; }
.intro__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.intro__media figcaption { margin-top: 0.75rem; }
@media (min-width: 900px) {
  .intro { grid-template-columns: 1fr 1fr; }
}

.pillars {
  display: grid;
  gap: 0;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.pillars li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.pillars .icon { width: 1.75rem; height: 1.75rem; color: var(--accent); margin-top: 0.15rem; }
.pillars h3 { font-size: 1.375rem; margin-bottom: 0.2rem; }
.pillars p { font-size: var(--fs-sm); color: var(--muted); }

/* Restaurant */
.restaurant {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}
.restaurant__gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.5rem, 1.2vw, 1rem);
}
.restaurant__gallery figure { margin: 0; overflow: hidden; }
.restaurant__gallery img { width: 100%; height: 100%; object-fit: cover; }
.restaurant__gallery .g1 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.restaurant__gallery .g2 { grid-column: 1 / 4; aspect-ratio: 1; }
.restaurant__gallery .g3 { grid-column: 4 / -1; aspect-ratio: 1; }
@media (min-width: 900px) {
  .restaurant { grid-template-columns: 7fr 5fr; align-items: start; }
  .restaurant__gallery { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.offers { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.offer {
  display: grid;
  gap: 0.25rem 1rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.offer__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.offer h3 { font-size: 1.625rem; }
.offer__time { color: var(--accent); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; }
.offer p { font-size: var(--fs-sm); color: var(--muted); max-width: 34rem; }
.offer__time-label { margin-right: 0.3em; color: var(--muted); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; }
/* Direktbuchervorteile (partials/direct-benefits.html) – bewusst auffällig (Simon 08.10.2026): dunkle Fläche wie die
   Menü-Sektion, große Überschrift; auf Startseite und Suiten-Seite */
.direct {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.75rem, 4.5vw, 3.25rem);
  background-color: var(--slate);
  background-image: var(--texture);
  color: var(--on-slate-muted);
}
.direct .eyebrow { color: var(--accent-light); }
.direct__head { display: grid; gap: 0.75rem; max-width: 44rem; }
.direct__title { font-size: var(--fs-xl); color: var(--on-slate); }
.direct__list { display: grid; gap: 1.4rem 2.25rem; margin: 0; padding: 0; list-style: none; }
.direct__list li { display: flex; gap: 1rem; align-items: flex-start; }
.direct__list .icon { flex: none; width: 2.9rem; height: 2.9rem; padding: 0.7rem; border: 1px solid rgb(var(--on-slate-rgb) / 0.22); border-radius: 50%; color: var(--accent-light); }
.direct__list div { display: grid; gap: 0.2rem; padding-top: 0.2rem; }
.direct__list strong { font-family: var(--font-serif); font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem); font-weight: 500; color: var(--on-slate); }
.direct__list span { font-size: var(--fs-sm); }
.direct__foot { margin: 0; }
.direct__foot .link-arrow { color: var(--accent-light); }
.direct :focus-visible { outline-color: var(--accent-light); }
@media (min-width: 560px) { .direct__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .direct__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.offers-note {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border-left: 2px solid var(--accent);
  background: rgb(244 244 242 / 0.6);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.offers-note .icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; color: var(--accent); }
.offers-note strong { color: var(--ink); font-weight: 500; }

/* Speisekarte */
.menu {
  display: grid;
  gap: clamp(3rem, 6vw, 6rem);
}
@media (min-width: 1000px) {
  .menu { grid-template-columns: 7fr 5fr; }
}

.tabs { display: flex; gap: 0.25rem; margin-bottom: 2.5rem; border-bottom: 1px solid rgb(var(--on-slate-rgb) / 0.18); }
.tab {
  position: relative;
  padding: 0.9rem 0.25rem;
  margin-right: 1.5rem;
  border: 0;
  background: none;
  color: var(--on-slate-muted);
  font: 450 var(--fs-sm) / 1.2 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.tab[aria-selected='true'] { color: var(--on-slate); }
.tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent-light);
}
/* Gleichwertige Reiter (Speisekarten-Reiter auf Startseite und Seite „Speisekarte“) */
.tabs--equal { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 0; } /* gleich breite Reiter, beliebige Anzahl */
.tabs--equal .tab { margin-right: 0; padding-inline: 0.35rem; text-align: center; }
@media (max-width: 559px) {
  .tabs--equal .tab { font-size: clamp(0.625rem, 2.9vw, 0.8125rem); letter-spacing: 0.06em; padding-inline: 0.15rem; }
}
.section:not(.section--slate) .tabs { border-bottom-color: var(--line); }
.section:not(.section--slate) .tab { color: var(--muted); }
.section:not(.section--slate) .tab[aria-selected='true'] { color: var(--ink); }
.section:not(.section--slate) .tab[aria-selected='true']::after { background: var(--accent); }

.courses { margin: 0; padding: 0; list-style: none; counter-reset: course; }
.course {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid rgb(var(--on-slate-rgb) / 0.12);
  counter-increment: course;
}
.course::before {
  content: counter(course, decimal-leading-zero);
  padding-top: 0.45rem;
  color: var(--accent-light);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
}
.course h3 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); color: var(--on-slate); }
.course p { font-size: var(--fs-sm); color: var(--on-slate-muted); }
.section:not(.section--slate) .course { border-bottom-color: var(--line); }
.section:not(.section--slate) .course::before { color: var(--accent); }
.section:not(.section--slate) .course h3 { color: var(--ink); }
.section:not(.section--slate) .course p { color: var(--muted); }

.menu__note { margin-top: 1.75rem; font-family: var(--font-serif); font-size: 1.25rem; font-style: italic; color: var(--on-slate); }
/* Karte ohne feste Gerichte (Amuse-Gueule): Einleitung groß statt Gangliste */
.menu__text { display: grid; align-content: start; max-width: 34rem; }
.menu__lead { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-style: italic; line-height: 1.3; color: var(--on-slate); }
.section:not(.section--slate) .menu__lead { color: var(--ink); }

.price-card {
  align-self: start;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid rgb(var(--on-slate-rgb) / 0.18);
}
.section:not(.section--slate) .price-card { border-color: var(--line); background: var(--paper); }
.price-card h3 { margin-bottom: 1.25rem; }
.price-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.price-table th, .price-table td { padding: 0.85rem 0; border-bottom: 1px solid rgb(var(--on-slate-rgb) / 0.12); text-align: left; font-weight: 400; }
.price-table thead th { color: var(--on-slate-muted); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.price-table td { text-align: right; color: var(--on-slate); font-variant-numeric: tabular-nums; }
.price-table tbody th { color: var(--on-slate); }
.section:not(.section--slate) .price-table :is(th, td) { border-bottom-color: var(--line); }
.section:not(.section--slate) .price-table :is(td, tbody th) { color: var(--ink); }
.section:not(.section--slate) .price-table thead th { color: var(--muted); }

/* Markus Plein */
.chef {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.chef__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 30%; }
.chef__stations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
}
.chef__stations li:not(:last-child)::after { content: '·'; margin-left: 0.9rem; color: var(--accent); }
.chef__stations li:last-child { color: var(--ink); font-weight: 500; }
@media (min-width: 900px) {
  .chef { grid-template-columns: 5fr 6fr; }
}

/* Suiten */
.suites {
  display: grid;
  gap: clamp(2.5rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2.5rem);
}
@media (min-width: 760px) { .suites { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .suites { grid-template-columns: repeat(3, 1fr); } }

.suite { display: grid; align-content: start; gap: 1rem; }
.suite__media { overflow: hidden; }
.suite__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease); }
.suite:hover .suite__media img { transform: scale(1.03); }
.suite__tags { color: var(--accent); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.suite h3 { font-size: 1.875rem; }
.suite p { font-size: var(--fs-sm); }
.suite__themes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}
.suite__themes li {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--text);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.amenities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-block: 1px solid var(--line);
  list-style: none;
}
.amenities li { display: flex; gap: 0.75rem; align-items: center; font-size: var(--fs-sm); color: var(--ink); }
.amenities .icon { width: 1.5rem; height: 1.5rem; color: var(--accent); }
@media (min-width: 760px) { .amenities { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .amenities { grid-template-columns: repeat(6, 1fr); } .amenities li { flex-direction: column; align-items: flex-start; } }

.rates {
  display: grid;
  gap: 1px;
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--line);
  border: 1px solid var(--line);
}
.rate { display: grid; align-content: start; gap: 0.75rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--paper); }
.section--sand .rate { background: var(--sand); }
.rate__label { color: var(--accent); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.rate h3 { font-size: 1.75rem; }
.rate p { font-size: var(--fs-sm); }
.rate ul { margin: 0.25rem 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.rate li { display: flex; gap: 0.6rem; padding-block: 0.3rem; }
.rate li .icon { width: 1rem; height: 1rem; margin-top: 0.3rem; color: var(--accent); }
@media (min-width: 900px) { .rates { grid-template-columns: repeat(3, 1fr); } }

/* Arrangements */
.arrangements {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(80%, 22rem);
  gap: 1.25rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-bottom: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.arrangement { display: flex; flex-direction: column; gap: 0.85rem; scroll-snap-align: start; }
.arrangement__media { position: relative; overflow: hidden; background: var(--sand-deep); }
.arrangement__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.arrangement h3 { font-size: 1.5rem; }
.arrangement__price { display: flex; gap: 0.6rem; align-items: baseline; font-size: var(--fs-sm); }
.arrangement__price strong { color: var(--ink); font-size: 1.125rem; font-weight: 500; }
.arrangement__price s { color: var(--muted); }
.arrangement p { font-size: var(--fs-sm); color: var(--muted); }
/* Optionale Angaben aus Sanity (erscheinen nur, wenn im Studio gepflegt) */
.arrangement__media--empty { aspect-ratio: 4 / 5; }
.arrangements--page .arrangement__media--empty { aspect-ratio: 4 / 3; }
.arrangement__status {
  position: absolute; top: 0.75rem; left: 0.75rem;
  padding: 0.3rem 0.65rem;
  background: var(--paper); color: var(--ink);
  font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase;
}
.arrangement__text { display: grid; gap: 0.6rem; font-size: var(--fs-sm); color: var(--muted); }
.arrangement__text :is(h4, ul) { margin: 0; }
.arrangement__text ul { padding-left: 1.1rem; }
.arrangement__list { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.arrangement__list li { display: flex; gap: 0.6rem; padding-block: 0.3rem; }
.arrangement__list .icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.3rem; color: var(--accent); }
.arrangement__cta { display: grid; justify-items: start; gap: 0.6rem; margin-top: auto; padding-top: 0.25rem; } /* Aktionen einer Reihe auf gleicher Höhe */
a.arrangement__media { display: block; }
.arrangement__title { color: inherit; text-decoration: none; }
.arrangement__title:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.arrangement__note { margin-top: -0.4rem; }
@media (min-width: 1100px) {
  .arrangements {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

.meeting {
  display: grid;
  gap: 1.5rem 3rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  background: var(--paper);
  border: 1px solid var(--line);
}
@media (min-width: 900px) { .meeting { grid-template-columns: 1fr 1.4fr auto; align-items: center; } }

/* Arrangement-Detailseite (scripts/cms/arrangements.mjs → arrangement-<slug>.html) */
.arr-detail-hero .breadcrumb { flex-wrap: wrap; }
.arr-detail { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
.arr-detail__image { position: relative; overflow: hidden; background: var(--sand-deep); }
.arr-detail__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.arr-detail__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 0.75rem; }
.arr-detail__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.arr-detail__panel { display: grid; gap: 1.1rem; align-content: start; }
.arr-detail__title { font-size: var(--fs-xl); }
.arr-detail__price { display: grid; gap: 0.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.arr-detail__amount { font-size: 1rem; }
.arr-detail__amount strong { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-family: var(--font-serif); font-weight: 500; }
.arr-detail__price-note { color: var(--muted); font-size: var(--fs-sm); }
.arr-facts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.arr-facts > div { display: grid; grid-template-columns: 10.5rem 1fr; gap: 1rem; padding-block: 0.7rem; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.arr-facts dt { color: var(--muted); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; padding-top: 0.15rem; }
.arr-facts dd { margin: 0; color: var(--ink); }
.arr-facts abbr { text-decoration: none; }
@media (max-width: 479px) { .arr-facts > div { grid-template-columns: 7.5rem 1fr; gap: 0.75rem; } }
.arr-facts__hint { color: var(--muted); }
.arr-detail-body__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.arr-detail-body__title { font-size: var(--fs-lg); }
.arr-detail-body__text p { max-width: 42rem; }
.arr-box { display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); background: var(--surface); }
.arr-notes { display: grid; gap: 0.6rem; margin: 0; padding-left: 1.1rem; font-size: var(--fs-sm); }
.arr-notes li::marker { color: var(--accent); }
@media (min-width: 1000px) {
  .arr-detail { grid-template-columns: 1.25fr 1fr; align-items: start; }
  .arr-detail__panel { position: sticky; top: calc(var(--header-h, 5rem) + 1.5rem); }
  .arr-detail-body__grid { grid-template-columns: 1.25fr 1fr; align-items: start; }
}

/* Veranstaltungen (scripts/cms/aktuelles.mjs): Startseite unter dem Einstiegsbild (aktuelle + „Demnächst“), eigene Seite aktuelles-<slug>.html.
   Bilder jedes Formats: festes Seitenverhältnis 4:3, object-fit: cover, Fokuspunkt aus Sanity als object-position */
.aktuelles__list { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); }
.event { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.event__media { overflow: hidden; background: rgb(var(--on-slate-rgb) / 0.06); }
.event__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.event__body { display: grid; gap: 1rem; align-content: start; max-width: 36rem; }
.event__when { color: var(--on-slate); font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; }
.event__title { font-size: var(--fs-xl); color: var(--on-slate); }
.event__subtitle { margin-top: -0.35rem; font-family: var(--font-serif); font-size: var(--fs-md); font-style: italic; color: var(--accent-light); }
.event__text { max-width: 34rem; }
.section--slate .event__highlights .icon { color: var(--accent-light); }
.event__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.event__price strong { font-family: var(--font-serif); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 500; color: var(--on-slate); }
.event__price span { font-size: var(--fs-sm); }
.event__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding-top: 1rem; border-top: 1px solid rgb(var(--on-slate-rgb) / 0.18); font-size: var(--fs-sm); }
.event__contact span { color: var(--accent-light); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.event__contact a { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--on-slate); text-decoration: none; }
.event__contact a:hover { color: var(--accent-light); }
.event__contact .icon { width: 1rem; height: 1rem; }
/* Heller Hintergrund (eigene Seite) */
.section:not(.section--slate) :is(.event__title, .event__price strong) { color: var(--ink); }
.page-hero .event__price strong { color: var(--ink); }
.event-reservation { display: grid; gap: 0.85rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.event-reservation__text { font-family: var(--font-serif); font-size: var(--fs-md); font-style: italic; }
.event__courses { margin-top: 0.5rem; }
/* Aktuelle Veranstaltung ohne Bild: gestaltete Datumsfläche statt Bild – kein Ersatzbild, kein leerer Rahmen */
.event__datebox {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.4rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid rgb(var(--on-slate-rgb) / 0.18);
  background: rgb(var(--on-slate-rgb) / 0.04);
}
.event__datebox-weekday { color: var(--accent-light); font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; }
.event__datebox-day { font-family: var(--font-serif); font-size: clamp(4rem, 2.5rem + 6vw, 7.5rem); font-weight: 400; line-height: 0.9; color: var(--on-slate); }
.event__datebox-month { font-family: var(--font-serif); font-size: var(--fs-lg); font-style: italic; color: var(--on-slate); }
/* „Demnächst“: zwei weitere Termine, nur Datum und Name */
.aktuelles__next { display: grid; gap: 1.1rem; padding-top: clamp(1.75rem, 4vw, 2.5rem); border-top: 1px solid rgb(var(--on-slate-rgb) / 0.18); }
.aktuelles__next-title { color: var(--accent-light); font-family: inherit; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.aktuelles__next-list { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.aktuelles__next-item { display: grid; gap: 0.3rem; padding-left: 1.1rem; border-left: 1px solid var(--accent-light); }
.aktuelles__next-date { color: rgb(var(--on-slate-rgb) / 0.78); font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; }
.aktuelles__next-name { font-family: var(--font-serif); font-size: var(--fs-lg); line-height: 1.2; color: var(--on-slate); }
/* Ohne gewählte aktuelle Veranstaltung: nur „Demnächst“, ohne Trennlinie oben */
.aktuelles__next--allein { padding-top: 0; border-top: 0; }
/* Eigene Seite: vergangene Veranstaltung, Stornohinweise */
.event-past { padding: 0.7rem 1rem; border-left: 2px solid var(--accent); background: var(--sand); font-size: var(--fs-sm); }
/* Startseite (dunkles Band): aktuelle Veranstaltung liegt zurück */
.section--slate .event-past { border-left-color: var(--accent-light); background: rgb(var(--on-slate-rgb) / 0.08); color: var(--on-slate); }
.event-storno p + p { margin-top: 0.75rem; }
@media (min-width: 700px) {
  .aktuelles__next-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}
@media (min-width: 900px) {
  .event { grid-template-columns: 1.1fr 1fr; }
  .event--ohne-bild { grid-template-columns: minmax(15rem, 0.75fr) 1fr; }
  .event__datebox { aspect-ratio: 4 / 3; }
}

/* Arrangements auf der Unterseite: Raster statt Karussell */
.arrangements--page {
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  gap: 2.5rem 1.25rem;
  margin-inline: 0;
  padding-inline: 0;
  overflow: visible;
}
@media (min-width: 640px) { .arrangements--page { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .arrangements--page { grid-template-columns: repeat(3, 1fr); } }
.arrangements--page .arrangement__media img { aspect-ratio: 4 / 3; }

/* Galerie: Collage aus drei versetzten Spalten unterschiedlicher Breite ----
   Kein geschlossenes Rechteck – Anfang und Ende der Spalten sind bewusst ungleich. */
.gallery {
  columns: 2;
  column-gap: clamp(0.5rem, 2vw, 0.875rem);
}
.gallery__col { display: contents; }
.gallery__item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 clamp(0.5rem, 2vw, 0.875rem);
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--sand);
  break-inside: avoid;
  cursor: zoom-in;
}
.gallery__item img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, 3 / 2);
  object-fit: cover;
  transition: transform 1.2s var(--ease), opacity 0.4s;
}
.gallery__item:hover img { transform: scale(1.04); }
/* Mit JavaScript mobil: zwei feste Spalten (Verteilung in initGalleryLayout), rechts leicht versetzt */
@media (max-width: 699px) {
  .gallery--js {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(0.5rem, 2vw, 0.875rem);
    columns: auto;
  }
  .gallery--js .gallery__col { display: grid; gap: inherit; }
  .gallery--js .gallery__col--2 { padding-top: 1.75rem; }
  .gallery--js .gallery__item { margin: 0; }
}
@media (min-width: 700px) {
  .gallery {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr 1fr;
    align-items: start;
    gap: clamp(0.75rem, 1.4vw, 1.25rem);
    columns: auto;
  }
  .gallery__col { display: grid; gap: inherit; }
  .gallery__col--2 { padding-top: clamp(2.5rem, 6vw, 5rem); }
  .gallery__col--3 { padding-top: clamp(1rem, 2.5vw, 2rem); }
  .gallery__item { margin: 0; }
}

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(24 26 26 / 0.96);
  color: var(--on-slate);
}
.lightbox::backdrop { background: rgb(24 26 26 / 0.9); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--gutter); font-size: var(--fs-sm); }
.lightbox__stage { display: grid; place-items: center; min-height: 0; padding: 0 var(--gutter); }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__caption { padding: 1rem var(--gutter) 1.5rem; text-align: center; font-family: var(--font-serif); font-size: 1.25rem; font-style: italic; }
.lightbox .icon-btn { border-color: rgb(var(--on-slate-rgb) / 0.35); color: var(--on-slate); }
.lightbox__nav { display: flex; gap: 0.5rem; }

/* Auszeichnungen: vier gleich große Felder direkt auf dem Sektionshintergrund.
   Weiße Flächen der Logo-Dateien werden per multiply mit dem Hintergrund verrechnet (Dateien unverändert). */
.awards {
  display: grid;
  margin: 0;
  padding: 0;
  border-block: 1px solid var(--line);
  list-style: none;
}
.awards > li + li { border-top: 1px solid var(--line); }
.award {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  height: 100%;
  padding: 1.5rem 0;
  color: inherit;
  text-decoration: none;
}
.award__logo { display: flex; align-items: center; justify-content: center; height: 5rem; }
.award__logo img { width: auto; max-width: 100%; max-height: 100%; mix-blend-mode: multiply; }
.award__logo--crop { width: 4.6rem; justify-self: center; overflow: hidden; align-items: flex-start; }
.award__logo--crop picture { width: 100%; }
.award__logo--crop img { width: 118%; max-width: none; max-height: none; margin: -1.5% 0 0 -9%; }
.award__logo--text {
  flex-direction: column;
  gap: 0.1rem;
  align-self: center;
  width: 6rem;
  height: 3.6rem;
  justify-self: center;
  border: 1px solid rgb(29 31 31 / 0.55);
  color: var(--ink);
  line-height: 1;
}
.award__logo--text span:first-child { font-family: var(--font-serif); font-size: 1.05rem; font-style: italic; }
.award__logo--text span:last-child { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; }
/* Offizielles rotes Quadrat-Logo: vollständig zeigen, ohne Multiply (sonst würde die weiße Schrift sandfarben) */
.award__logo--michelin { width: 5rem; justify-self: center; }
.award__logo--michelin img { mix-blend-mode: normal; }
.award__text { display: grid; gap: 0.25rem; }
.award h3 { font-size: 1.375rem; }
.award p { font-size: var(--fs-sm); color: var(--muted); }
.award__more { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.35rem; color: var(--accent); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.award__more .icon { width: 0.9rem; height: 0.9rem; }
a.award:hover h3 { color: var(--accent); }
@media (min-width: 700px) {
  .awards { grid-template-columns: repeat(2, 1fr); }
  .awards > li + li { border-top: 0; }
  .awards > li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .awards > li:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 1.5rem; }
  .awards > li:nth-child(even) { padding-left: 1.5rem; }
}
@media (min-width: 1100px) {
  .awards { grid-template-columns: repeat(4, 1fr); }
  .awards > li { padding-inline: 1.5rem; }
  .awards > li:first-child { padding-left: 0; }
  .awards > li:last-child { padding-right: 0; }
  .awards > li:nth-child(n + 3) { border-top: 0; }
  .awards > li:not(:last-child) { border-right: 1px solid var(--line); }
  .award { grid-template-columns: 1fr; grid-template-rows: 5rem auto; align-items: start; gap: 1.5rem; padding-block: 2rem; }
  .award__logo { justify-content: flex-start; }
  .award__logo--crop { justify-self: start; }
  .award__logo--text { justify-self: start; }
  .award__logo--michelin { justify-self: start; }
}

/* Reservieren & Buchen */
.booking {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 900px) { .booking { grid-template-columns: 1fr 1fr; } }

.booking-card {
  display: grid;
  align-content: start;
  gap: 1.5rem;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  background: var(--paper);
  border: 1px solid var(--line);
}
.booking-card--dark { background: var(--slate); border-color: var(--slate); color: var(--on-slate-muted); }
.booking-card--dark :is(h3, label, legend) { color: var(--on-slate); }
.booking-card h3 { font-size: var(--fs-xl); }
.booking-card__notes { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); display: grid; gap: 0.5rem; }
.booking-card__notes li { display: flex; gap: 0.6rem; }
.booking-card__notes .icon { width: 1rem; height: 1rem; margin-top: 0.3rem; color: var(--accent); }
.booking-card--dark .booking-card__notes .icon { color: var(--accent-light); }
.booking-card__alt { font-size: var(--fs-sm); }
.booking-card__alt a { color: inherit; font-weight: 500; }
.booking-card--dark .booking-card__alt a { color: var(--on-slate); }

/* Band (vollflächiges Bild) */
.band { position: relative; display: grid; min-height: clamp(22rem, 60vw, 40rem); color: var(--white); }
.band > picture { position: absolute; inset: 0; }
.band > picture img { width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ''; position: absolute; inset: 0; background: rgb(24 26 26 / 0.42); }
@media (min-width: 900px) { .band::after { background: rgb(24 26 26 / 0.34); } }
.band__content { position: relative; z-index: 1; align-self: end; padding-block: clamp(2rem, 5vw, 4rem); }
.band__content h2 { color: var(--white); max-width: 20ch; }
.band__content p { max-width: 36rem; margin-top: 1rem; color: rgb(255 255 255 / 0.9); }
.band .eyebrow { color: var(--white); }

/* Info (Zeiten / Kontakt / Anfahrt) */
.info {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 760px) { .info { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .info { grid-template-columns: 1.2fr 1fr 1.2fr; } }

.info h3 { font-size: 1.75rem; margin-bottom: 1.25rem; }
.info h4 { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; }

.hours { margin: 0; display: grid; }
.hours__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.hours__row:first-child { border-top: 1px solid var(--line); }
.hours dt { color: var(--ink); font-weight: 450; }
.hours dd { margin: 0; text-align: right; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.hours .hours__days { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); }
.hours__row.is-today dt::before {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.12em;
}
.hours__row.is-today dt { font-weight: 500; }
.hours-today { margin-bottom: 1.25rem; padding: 0.9rem 1rem; background: var(--sand); font-size: var(--fs-sm); color: var(--ink); }
.hours-note { margin-top: 1rem; font-size: var(--fs-sm); color: var(--muted); }
.hours-note strong { color: var(--ink); font-weight: 500; }
.hours-title { font-size: 1.75rem; margin-bottom: 1.25rem; }

.contact-list { display: grid; gap: 1.75rem; }
.contact-list a { color: var(--ink); text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
.contact-line { display: flex; gap: 0.75rem; align-items: center; padding-block: 0.2rem; }
.contact-line .icon { color: var(--accent); width: 1.1rem; height: 1.1rem; }

.map {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-top: 1.25rem;
  overflow: hidden;
  background: var(--sand);
}
.map picture, .map img { width: 100%; height: 100%; object-fit: cover; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__consent {
  position: absolute;
  inset: auto 0.75rem 0.75rem 0.75rem;
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  background: rgb(233 232 229 / 0.96);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Rechtstexte (src/pages/datenschutz.html) */
.legal h2 { font-size: var(--fs-xl); }
.legal-list { display: grid; gap: 0.5rem; padding-left: 1.25rem; list-style: disc; }
/* Entwurf: offene Angaben gelb markiert – nur in der Vorschau; ein Produktions-Build mit Markierungen bricht ab */
.legal-draft { padding: 1rem 1.25rem; border-left: 3px solid #b8860b; background: #fff6d6; color: #4a3a00; font-size: var(--fs-sm); }
mark.legal-open { padding: 0.05em 0.3em; border-radius: 2px; background: #ffe58a; color: #4a3a00; }

/* Seitenkopf der Unterseiten */
.page-hero { padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-hero__grid { display: grid; gap: 1.5rem; }
.page-hero__media { margin-top: clamp(2rem, 5vw, 4rem); }
.page-hero__media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 699px) { .page-hero__media img { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) { .page-hero__grid { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 4rem; } }

.breadcrumb { display: flex; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb li + li::before { content: '/'; margin-right: 0.5rem; }

.two-col { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } .two-col--wide-left { grid-template-columns: 7fr 5fr; } }

.facts { margin: 0; display: grid; }
.facts > div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.facts > div:first-child { border-top: 1px solid var(--line); }
.facts dt { color: var(--ink); font-weight: 450; }
.facts dd { margin: 0; font-size: var(--fs-sm); }

.carte-list { margin: 0; padding: 0; list-style: none; }
.carte-item { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1.5rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.carte-item h3 { font-size: 1.5rem; }
.carte-item p { grid-column: 1; font-size: var(--fs-sm); color: var(--muted); }
.carte-item__price { grid-row: 1; grid-column: 2; color: var(--ink); font-variant-numeric: tabular-nums; }
.section--slate .carte-item { border-bottom-color: rgb(var(--on-slate-rgb) / 0.14); }
.section--slate .carte-item p { color: var(--on-slate-muted); }
.section--slate .carte-item__price { color: var(--on-slate); }
.carte-pending { display: grid; align-content: start; gap: 1.25rem; max-width: 34rem; }
.carte-pending .menu__note { margin-top: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.25; }
.section--slate .carte-pending .small { color: var(--on-slate-muted); }
.carte-facts { display: grid; gap: 0.35rem; margin: 0; font-size: var(--fs-sm); }
.carte-facts dt { color: var(--accent-light); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.carte-facts dd { margin: 0; color: var(--on-slate); }
/* Karten aus Sanity: Abschnitte, Gerichtlisten, Hinweise (Speisekarten-Reiter) */
.carte { display: grid; gap: clamp(2rem, 4vw, 2.75rem); align-content: start; }
.carte__subtitle { font-family: var(--font-serif); font-size: 1.25rem; font-style: italic; color: var(--on-slate); }
.carte__intro, .carte__hint { max-width: 38rem; font-size: var(--fs-sm); }
.carte-section__title {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgb(var(--on-slate-rgb) / 0.18);
  font: 450 var(--fs-xs) / 1.2 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.section--slate .carte-section__title { color: var(--accent-light); }
.carte .carte-item h4 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.carte .carte-item:last-child { border-bottom: 0; }
.carte-item__tags { font-family: var(--font-serif); font-style: italic; }
.section--slate .carte-item .carte-item__tags { color: var(--accent-light); }
/* Heller Hintergrund (Seite „Speisekarte“) */
.section:not(.section--slate) :is(.carte__subtitle, .carte-pending .menu__note) { color: var(--ink); }
.section:not(.section--slate) .carte-section__title { border-bottom-color: var(--line); color: var(--accent); }
.section:not(.section--slate) .carte-item__tags { color: var(--accent); }
.section:not(.section--slate) .carte-facts dt { color: var(--accent); }
.section:not(.section--slate) .carte-facts dd { color: var(--ink); }

.prototype-note {
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--accent);
  background: var(--sand);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.booking-card--dark .prototype-note { background: var(--slate-2); color: var(--on-slate); border-left-color: var(--accent-light); }

/* 9 · Formulare ------------------------------------------------------------ */
.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 520px) { .form__row { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } }

.field { display: grid; gap: 0.4rem; }
.field label {
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.field :is(input, select, textarea) {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4041' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.1rem;
  padding-right: 2.5rem;
}
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.booking-card--dark .field :is(input, select) {
  border-color: rgb(var(--on-slate-rgb) / 0.2);
  background-color: var(--slate-2);
  color: var(--on-slate);
  color-scheme: dark;
}
.booking-card--dark .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8e7e4' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.booking-card--dark .field :is(input, select):focus-visible { outline-color: var(--accent-light); border-color: var(--accent-light); }
.booking-card--dark .field label { color: var(--on-slate); }

/* Formular-Ergänzungen (Arrangement-Anfrage) */
.field__optional { color: var(--muted); font-weight: 400; letter-spacing: 0.04em; text-transform: none; }
.field__hint { color: var(--muted); font-size: var(--fs-sm); }
.field__error { color: var(--error); font-size: var(--fs-sm); line-height: 1.4; }
.field textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.field [aria-invalid='true'] { border-color: var(--error); background-color: var(--error-bg); }
.field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: 0.75rem; }
.field--check input { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0.15rem 0 0; padding: 0; accent-color: var(--accent); appearance: auto; }
.field--check label { color: var(--ink); font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0; line-height: 1.5; text-transform: none; }
.field--check .field__error { grid-column: 2; }

/* Arrangement-Anfrage: Dialog + Formular (partials/inquiry-dialog.html, inquiry-form.html) */
.inquiry {
  width: min(46rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1.5rem 4rem rgb(24 26 26 / 0.25);
  overflow: auto;
  overscroll-behavior: contain;
}
.inquiry::backdrop { background: rgb(24 26 26 / 0.6); }
html:has(.inquiry[open]) { overflow: hidden; }
.inquiry__inner { display: grid; gap: 1.5rem; padding: clamp(1.25rem, 4vw, 2.5rem); }
.inquiry__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.inquiry__title { font-size: var(--fs-xl); }
.inquiry-form__intro { color: var(--muted); font-size: var(--fs-sm); }
.inquiry-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inquiry-form__alert {
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--error);
  background: var(--error-bg);
  font-size: var(--fs-sm);
}
.inquiry-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.inquiry-form__actions .btn[disabled] { opacity: 0.6; cursor: progress; }
.inquiry-success { display: grid; gap: 1rem; justify-items: start; }
.inquiry-success:focus { outline: none; }
.inquiry-success__icon { width: 2.25rem; height: 2.25rem; padding: 0.4rem; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); }
.inquiry-success__preview { width: 100%; font-size: var(--fs-sm); }
.inquiry-success__preview summary { cursor: pointer; color: var(--muted); }
.inquiry-success__preview pre {
  margin: 0.75rem 0 0;
  padding: 1rem;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.inquiry-page { padding-bottom: 1rem; }

/* Gutscheine (pages/gutscheine.html, partials/voucher-form.html) – Anfrage statt Shop, ruhig und typografisch */
.voucher-types { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.voucher-type {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 2px solid var(--accent);
  background: var(--sand);
}
.voucher-type__label { color: var(--accent); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.voucher-type h3 { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.85rem); }
.voucher-type p:not(.voucher-type__label) { font-size: var(--fs-sm); }
.voucher-type .link-arrow { margin-top: 0.5rem; align-self: end; }
@media (min-width: 640px) { .voucher-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .voucher-types { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Schiefertafel als Alleinstellungsmerkmal – typografisch, bis ein Foto der echten Tafel vorliegt */
.voucher-slate-intro { align-items: center; }
.voucher-slate {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.6rem;
  aspect-ratio: 4 / 3;
  width: min(100%, 30rem);
  justify-self: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid rgb(var(--on-slate-rgb) / 0.18);
  border-radius: 6px;
  background:
    radial-gradient(120% 90% at 30% 20%, rgb(255 255 255 / 0.06), transparent 60%),
    repeating-linear-gradient(172deg, rgb(255 255 255 / 0.018) 0 2px, transparent 2px 7px),
    #2a2d2e;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6), inset 0 0 0 10px rgb(0 0 0 / 0.12);
  color: rgb(var(--on-slate-rgb) / 0.92);
  text-align: center;
}
.voucher-slate__brand { font-family: var(--font-serif); font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); letter-spacing: 0.04em; }
.voucher-slate__by { margin-top: -0.4rem; font-family: var(--font-serif); font-style: italic; opacity: 0.75; }
.voucher-slate__rule { width: 3rem; height: 1px; margin-block: 0.5rem; background: var(--accent-light); }
.voucher-slate__title { color: var(--accent-light); font-size: var(--fs-xs); letter-spacing: 0.35em; text-transform: uppercase; }
.voucher-slate__for { font-family: var(--font-serif); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-style: italic; line-height: 1.2; }

/* Ablauf */
.voucher-steps { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.voucher-steps li { display: grid; gap: 0.6rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.voucher-steps__nr { color: var(--accent); font-size: var(--fs-xs); letter-spacing: 0.14em; }
.voucher-steps h3 { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); }
.voucher-steps p { font-size: var(--fs-sm); color: var(--muted); }
@media (min-width: 800px) { .voucher-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.voucher-note { margin-top: clamp(2rem, 4vw, 3rem); }

/* Anfrage */
.voucher-request { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
.voucher-request__form { padding: clamp(1.5rem, 4vw, 3rem); background: var(--paper); }
/* Überschrift neben dem Formular eine Stufe kleiner – „Gutscheinanfrage“ ist sonst breiter als die Spalte */
.voucher-request__intro h2 { font-size: clamp(2rem, 1rem + 2.4vw, 3.25rem); overflow-wrap: break-word; }
@media (min-width: 1000px) {
  .voucher-request { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
  .voucher-request__intro { position: sticky; top: calc(var(--header-h, 5rem) + 2rem); }
}
.voucher-form { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
@media (max-width: 479px) { .voucher-form .inquiry-form__actions .btn { width: 100%; white-space: normal; text-align: center; } }
.voucher-form__group { display: grid; gap: 1rem; min-width: 0; margin: 0; padding: 0 0 1.75rem; border: 0; border-bottom: 1px solid var(--line); }
.voucher-form__legend { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.25rem; padding: 0; font-family: var(--font-serif); font-size: var(--fs-lg); color: var(--ink); }
.voucher-form__legend > span:first-child { color: var(--accent); font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: 0.14em; }
.voucher-form__legend .field__optional { font-family: var(--font-sans); font-size: var(--fs-sm); }
.voucher-form__note { margin-top: -0.25rem; }
.voucher-form__amount { position: relative; max-width: 14rem; }
.voucher-form__amount input { width: 100%; padding-right: 2.5rem; }
.voucher-form__amount span { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
@media (min-width: 560px) { .voucher-form__city { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

.voucher-choice { display: grid; gap: 0.6rem; }
.voucher-choice__label { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.voucher-choice__option {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding: 1rem 1.1rem 1rem 3rem;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.voucher-choice__option input { position: absolute; left: 1.1rem; top: 1.15rem; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--accent); }
.voucher-choice__option:hover { border-color: var(--accent); }
.voucher-choice__option:has(input:checked) { border-color: var(--accent); background: var(--sand); box-shadow: inset 3px 0 0 var(--accent); }
.voucher-choice__option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.voucher-choice__title { font-family: var(--font-serif); font-size: 1.25rem; color: var(--ink); }
.voucher-choice__text { font-size: var(--fs-sm); color: var(--muted); }
@media (min-width: 640px) { .voucher-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); } .voucher-choice__label, .voucher-choice .field__error { grid-column: 1 / -1; } }
@media (max-width: 639px) {
  .inquiry { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; }
  .inquiry__inner { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
}



/* Reservieren & Buchen: Tischreservierung breiter, Zimmerkarte läuft auf dem Desktop mit */
@media (min-width: 900px) {
  .booking { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
  .booking > #buchen { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

/* Tischreservierung über OpenTable -----------------------------------------
   Nur der Rahmen ist unser Design; das offizielle Widget (Typ „Tall“ mit Kalender: iFrame 288 × 490 px,
   Farbschema laut OpenTable-Code) bleibt unverändert und wird nie gestaucht. Der Platz ist fest reserviert (kein Springen beim Laden). */
/* Helle Karte in Betonoptik; die Zimmerkarte daneben ist dunkel. */
.ot-card {
  --ot-w: 288px;      /* feste Größe des OpenTable-Widgets „Tall“ (iFrame 288 × 490 px) */
  --ot-h: 490px;
  --ot-visible-h: 457px; /* sichtbare Widget-Fläche; darunter ist der iFrame transparent (gemessen 29.09.2026) */
  --ot-frame: 0px;    /* optionaler Rahmen um das Widget (aktuell keiner) */
  --ot-outer: calc(var(--ot-w) + 2 * var(--ot-frame));
  padding-inline: clamp(1rem, 4vw, 3.25rem);
}
.ot-card__lead { max-width: 34rem; font-size: var(--fs-sm); }
.ot-widget {
  justify-self: center;
  width: var(--ot-outer);
  /* Endet mit der sichtbaren Widget-Fläche; der leere, transparente Rest des iFrames wird ausgeblendet,
     damit der Abstand darunter nicht unnötig groß ist. Ändert OpenTable das Layout, --ot-visible-h anpassen. */
  height: calc(var(--ot-visible-h) + 2 * var(--ot-frame));
  padding: var(--ot-frame);
  overflow: hidden;
}
.ot-widget iframe { display: block; border-radius: 4px; }
/* Zwei-Klick-Platzhalter (Datenschutz): gleiche Fläche wie das Widget – nach dem Klick springt nichts */
.ot-consent {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgb(255 255 255 / 0.55);
  font-size: var(--fs-sm);
  line-height: 1.55;
  text-align: center;
}
.ot-consent__icon { width: 2rem; height: 2rem; color: var(--accent); }
.ot-consent__more { color: var(--muted); font-size: 0.8125rem; }
.ot-card__foot { padding-top: 1.25rem; border-top: 1px solid var(--line); }
/* Sehr schmale Handys: Ist in der Karte weniger Platz als Widget + Rahmen, ragt beides gleichmäßig
   links und rechts in den Kartenrand, statt abgeschnitten oder gestaucht zu werden. */
@media (max-width: 389px) {
  .ot-card { padding-inline: 0.75rem; }
  .ot-widget { margin-inline: min(0px, calc((100% - var(--ot-outer)) / 2)); }
}
/* Volle Kartenbreite (Tablet, 640–899 px): Text links, Widget rechts daneben.
   Ab 900 px steht die Karte neben „Zimmer buchen“ – dort Widget unter dem Text, linksbündig. */
@media (min-width: 640px) and (max-width: 899px) {
  .ot-card { grid-template-columns: minmax(0, 1fr) var(--ot-outer); column-gap: clamp(1.5rem, 4vw, 3rem); }
  .ot-card__intro { grid-column: 1; grid-row: 1; }
  .ot-widget { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  .ot-card__foot { grid-column: 1; grid-row: 2; align-self: end; }
}
/* Desktop: Karte mittig ausgerichtet – Text zentriert über dem Widget */
@media (min-width: 900px) {
  .ot-card { justify-items: center; text-align: center; }
  .ot-card .eyebrow::before { display: none; }
  .ot-card__lead { margin-inline: auto; max-width: 30rem; }
  .ot-card__foot { justify-self: stretch; }
}

/* 10 · Footer -------------------------------------------------------------- */
.site-footer {
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: calc(2rem + 4.5rem);
  background-color: var(--sand);
  background-image: var(--texture);
  font-size: var(--fs-sm);
}
@media (min-width: 900px) { .site-footer { padding-bottom: 2rem; } }

.footer-top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
}
.footer-brand img { width: 9.5rem; height: auto; mix-blend-mode: multiply; }
.footer-brand p { max-width: 22rem; margin-top: 1.25rem; }
.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.footer-col h2 {
  margin-bottom: 1rem;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.footer-col a { color: var(--ink); text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-col address { font-style: normal; }
@media (min-width: 900px) {
  .footer-top { grid-template-columns: 1fr 2.4fr; gap: 4rem; }
  .footer-cols { grid-template-columns: repeat(4, 1fr); }
}

.footer-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.footer-cta p { font-family: var(--font-serif); font-size: var(--fs-lg); color: var(--ink); line-height: 1.2; }

.social { display: flex; gap: 0.5rem; }
.social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); }
.social a:hover { border-color: var(--ink); }
.social .icon { width: 1.1rem; height: 1.1rem; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.footer-bottom a { color: var(--muted); }

/* 11 · Hilfsklassen & Animation -------------------------------------------- */
.mt-s { margin-top: 1rem; }
.mt-m { margin-top: 2rem; }
.mt-l { margin-top: clamp(2.5rem, 5vw, 4rem); }
.center { text-align: center; }

.reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay='1'] { transition-delay: 0.1s; }
.reveal[data-delay='2'] { transition-delay: 0.2s; }
.reveal[data-delay='3'] { transition-delay: 0.3s; }

.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .action-bar, .mobile-menu, .map, .lightbox { display: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* E-Bike & Radfahren ------------------------------------------------------ */
.features {
  display: grid;
  gap: 2rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature { display: grid; align-content: start; gap: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.feature .icon { width: 1.75rem; height: 1.75rem; margin-bottom: 0.5rem; color: var(--accent); }
.feature h3 { font-size: 1.375rem; }
.feature p { font-size: var(--fs-sm); color: var(--muted); }
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .features { grid-template-columns: repeat(4, 1fr); } }
.features-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

/* Prototyp-Hinweis auf Platzhalterseiten ---------------------------------- */
.proto-note { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--muted); font-size: var(--fs-sm); }
.proto-note .icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; color: var(--accent); }

/* WhatsApp: runder Floating-Button unten rechts, dezente Ringe nach außen -----
   Weicht mobilen Leisten aus (Aktionsleiste, Buchungsleiste) und verschwindet bei offenem Menü. */
.wa-float {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 45;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  text-decoration: none;
  box-shadow: 0 6px 20px rgb(24 26 26 / 0.2);
  transition: bottom 0.35s var(--ease), opacity 0.35s var(--ease), visibility 0s, background-color 0.2s, transform 0.2s var(--ease);
}
.wa-float:hover { background: var(--accent-hover); transform: scale(1.05); }
/* Am Desktop/Laptop ausgeblendet (Simon 08.10.2026) – auf Smartphone und Tablet bleibt der Button */
@media (hover: hover) and (pointer: fine) { .wa-float { display: none !important; } }
/* Bei geöffneter SiteMinder-Buchung ausgeblendet: der Button lag am Handy über Feldern und dem Cookie-Hinweis der Engine */
body:has(.bk-engine__frame) .wa-float { display: none !important; }
/* Zwei Ringe, die zeitversetzt langsam nach außen laufen und verblassen */
.wa-float::before,
.wa-float::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: wa-ripple 3.6s var(--ease) infinite;
}
.wa-float::after { animation-delay: 1.8s; }
@keyframes wa-ripple {
  0% { transform: scale(1); opacity: 0.45; }
  70%, 100% { transform: scale(1.75); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float::before, .wa-float::after { animation: none; display: none; }
}
.wa-float .icon { width: 1.75rem; height: 1.75rem; }
.wa-float__dot {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: #e5322d;
}
.wa-float.is-preview { cursor: default; }
.wa-float.is-preview:hover { transform: none; }
body.is-locked .wa-float { display: none; }
@media (max-width: 899px) {
  .wa-float { width: 3.25rem; height: 3.25rem; }
  .wa-float .icon { width: 1.6rem; height: 1.6rem; }
  /* Startseite: erst zusammen mit der Aktionsleiste einblenden (vorher liegen die Hero-Buttons im Bild), dann darüber */
  body:not(.page-booking):has(.action-bar:not(.is-visible)) .wa-float { opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0.35s, 0s, 0s; }
  body:not(.page-booking):has(.action-bar.is-visible) .wa-float { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 999px) {
  .page-booking:has(.bk-bar:not([hidden])) .wa-float { bottom: calc(6.25rem + env(safe-area-inset-bottom)); }
}
@media print { .wa-float { display: none !important; } }