/* ============================================================
   DRESDEN 1900 — Sektions-Styles
   ============================================================ */

/* ---------- Bilder ---------- */
.shot { overflow: hidden; border-radius: var(--radius-md); background: var(--surface-media); display: block; }
.shot img, img.cover { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Karten allgemein ---------- */
.card {
  background: var(--surface); border: none;
  border-radius: var(--radius-md); overflow: hidden;
}
.card__body { padding: var(--space-5); }
.card__media { aspect-ratio: 16 / 10; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; color: #F3E7D2; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #241608; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  filter: blur(5px); transform: scale(1.06); }
/* Overlay: links dunkel für Textkontrast, nach rechts etwas offener, damit das
   Hintergrundbild sichtbar bleibt */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(22 12 3 / .96) 0%, rgb(22 12 3 / .86) 38%, rgb(22 12 3 / .66) 70%, rgb(22 12 3 / .58) 100%);
}

/* Hero bewusst breiter als die übrigen Sektionen (Standard --wrap = 1120px),
   damit rechts Platz für das quadratische 1:1-Bild bleibt */
.hero__inner { width: min(100% - 2rem, 1440px);
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); }
/* Zweispaltig: links Inhalt + Buchung, rechts großes Bild */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.hero__content { min-width: 0; }
.hero__media { min-width: 0; margin: 0; }
.hero__media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgb(0 0 0 / .45); }
.hero__head { max-width: 46rem; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { display: none; }
  .hero::after { background: rgb(88 56 38 / .86); }
}
.hero__rating {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: nowrap; white-space: nowrap;
  font-family: var(--font-ui); font-size: var(--fs-micro); color: #fff; margin-bottom: var(--space-4);
}
@media (max-width: 600px) { .hero__rating .sep, .hero__rating-extra { display: none; } }
.hero__stars { color: var(--gold); display: inline-flex; }
.hero__stars .i { width: 15px; height: 15px; }
.hero__rating .sep { opacity: .5; }
.hero h1 { color: #fff; margin-bottom: var(--space-4); }
.hero__sub { font-size: var(--fs-lead); color: #fff; max-width: 48ch; }

/* Buchungs-Widget */
.booking {
  margin-top: var(--space-6); background: rgb(251 244 230 / .98);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--brown-700); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-md); max-width: 46rem;
  border: 1px solid var(--border-strong);
}
.booking__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: end;
}
.field--full { grid-column: 1 / -1; }
.field__opt { color: var(--brown-500); font-weight: 400; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* Zwei-Schritt-Buchung: Schritt 1 = Datum/Uhrzeit/Personen in einer Reihe */
.booking__grid--check { grid-template-columns: 1fr 1fr 1fr auto; }
.booking__grid--check .booking__submit .btn { width: auto; height: 100%; padding-block: .7em; }
.booking__summary { margin: 0 0 var(--space-3); font-size: var(--fs-small); color: var(--brown-700); }
.booking__summary b { color: var(--brick); }
/* Mobil: Kontaktfelder gestapelt (sonst zu schmal) */
@media (max-width: 620px) { .booking__step[data-step="2"] .field { grid-column: 1 / -1; } }
.booking__back { display: inline-block; margin-top: var(--space-3); background: none; border: 0;
  color: var(--brown-500); font-family: var(--font-ui); font-size: var(--fs-micro); cursor: pointer;
  padding: 0; text-decoration: underline; }
.booking__back:hover { color: var(--brick); }
@media (max-width: 620px) {
  .booking__grid--check { grid-template-columns: 1fr 1fr; }
  .booking__grid--check .booking__submit .btn { width: 100%; }
}
.field label {
  display: block; font-family: var(--font-ui); font-size: var(--fs-micro);
  color: var(--brown-500); margin-bottom: .35em; font-weight: 600;
}
.field select, .field input {
  width: 100%; background: #fff; border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: .62em .7em; font-size: var(--fs-small);
  color: var(--brown-800); font-family: var(--font-body);
}
.field select { appearance: none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6142' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .55em center; background-size: 16px; padding-right: 2em; }
/* input[type=date] rendert auf iOS/Android nativ zu breit — Eigengröße abschalten + linksbündig */
.field input[type="date"] { -webkit-appearance: none; appearance: none;
  min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; text-align: left; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; }
.booking__submit { align-self: end; }
.booking__submit .btn { width: 100%; padding-block: .85em; }
.booking__trust {
  display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-4);
  font-family: var(--font-ui); font-size: var(--fs-micro); color: var(--brown-500);
}
.booking__trust span { display: inline-flex; align-items: center; gap: .4em; }
.booking__trust .i-check { color: var(--ok); }
.booking__msg { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--ok);
  font-weight: 600; display: none; }
.booking__msg[data-show="true"] { display: block; }

@media (max-width: 620px) {
  .booking { padding: var(--space-4); }
  .booking__grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .booking__grid .field:first-child { grid-column: 1 / -1; }   /* Datum über volle Breite */
  .booking__submit { grid-column: 1 / -1; }
  .booking__submit .btn { width: 100%; padding-block: .95em; font-size: 1.05rem; }
  .field select, .field input { padding: .78em .8em; font-size: 1rem; }
  .field label { font-size: var(--fs-small); }
  .booking__trust { gap: var(--space-2) var(--space-4); }
}
/* Hero-Bild auf Mobil unter der Überschrift (Desktop: rechtes Bild) */
.hero__mobileimg { display: none; }
@media (max-width: 900px) {
  .hero__mobileimg { display: block; margin: var(--space-4) 0 var(--space-2);
    border-radius: var(--radius-md); overflow: hidden; }
  .hero__mobileimg img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
}

/* ============================================================
   Info-Strip
   ============================================================ */
.factbar { background: var(--cream-100); border-block: 1px solid var(--border); }
.factbar__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
  padding-block: var(--space-5);
}
.factbar__item { display: flex; align-items: center; gap: .6em; font-family: var(--font-ui);
  font-size: var(--fs-small); color: var(--text); }
.factbar__item .i { width: 22px; height: 22px; color: var(--brick); }
@media (max-width: 720px) { .factbar__grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Buffet
   ============================================================ */
.buffet__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4);
  flex-wrap: wrap; margin-bottom: var(--space-5); }
/* Preis als Held: Zahl gross auf eigener Zeile, Zusatz klein darunter (K11/K17) */
.buffet__price { text-align: right; flex: none; }
.buffet__price b { display: block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); line-height: 1.05; color: var(--brick); }
.buffet__price span { display: block; font-family: var(--font-ui); font-size: var(--fs-micro);
  color: var(--text-muted); margin-top: .3em; }
@media (max-width: 640px) {
  .buffet__head { align-items: flex-start; }
  .buffet__price { text-align: left; }
}
/* Preis mit in der Überschrift */
.pricetag { color: var(--brick); font-family: var(--font-display); white-space: nowrap; }
.head__note { display: block; margin-top: var(--space-3); font-family: var(--font-ui);
  font-size: var(--fs-micro); color: var(--text-muted); }

/* Buffet-Sektion: Karten fluchten auf --wrap (1120), der äußere Streifen ist nur
   so breit, dass die Pfeile knapp neben den Karten sitzen */
#buffet > .wrap { width: min(100% - 2rem, 1240px); }
#buffet .head--center { max-width: 54rem; }
#buffet .head--center h2 { text-wrap: balance; }

/* Buffet-Slider: 3 Karten sichtbar, 4. per Pfeil — Endlos-Loop.
   Karten-Spur exakt auf normaler Content-Breite (--wrap, bündig mit den übrigen
   Sektionen); die Pfeile sitzen im äußeren Streifen daneben */
.slider { position: relative; margin-top: var(--space-6); }
.slider__stage { position: relative;
  padding-inline: max(48px, calc((100% - var(--wrap)) / 2)); }
.slider__viewport { overflow: hidden; }
.slider__track { display: flex; gap: var(--space-5); }
.slider__track > * { flex: 0 0 calc((100% - 2 * var(--space-5)) / 3); }
.slider__track > .card .card__media { aspect-ratio: 16 / 10; border-radius: 0; }
.slider__track > .card h3 { margin-bottom: .3em; }
.slider__track > .card p { font-size: var(--fs-small); color: var(--text-muted); }
/* Pfeil-Buttons */
.slider__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: rgb(251 244 230 / .96); color: var(--brown-700);
  display: grid; place-items: center; cursor: pointer;
  transition: background .15s, color .15s, transform .12s; }
.slider__btn:hover { background: var(--brick); color: #fff; }
.slider__btn:active { transform: translateY(-50%) scale(.93); }
.slider__btn .i { width: 20px; height: 20px; }
.slider__btn--prev { left: 0; }
.slider__btn--prev .i { transform: rotate(90deg); }
.slider__btn--next { right: 0; }
.slider__btn--next .i { transform: rotate(-90deg); }
@media (max-width: 860px) {
  .slider__track > * { flex: 0 0 calc((100% - var(--space-5)) / 2); }
}
@media (max-width: 600px) {
  /* Karten über volle Content-Breite; Pfeile überlappen die Kartenränder halb */
  .slider__stage { padding-inline: 0; }
  .slider__track > * { flex: 0 0 100%; }
  .slider__btn { width: 40px; height: 40px; }
  .slider__btn--prev { left: 0; transform: translate(-50%, -50%); }
  .slider__btn--next { right: 0; transform: translate(50%, -50%); }
  .slider__btn--prev:active { transform: translate(-50%, -50%) scale(.92); }
  .slider__btn--next:active { transform: translate(50%, -50%) scale(.92); }
}

/* Ernährungshinweise: zentriert, ohne Box */
.diet { margin-top: var(--space-6); display: flex; justify-content: center;
  gap: var(--space-2) var(--space-4); flex-wrap: wrap;
  font-family: var(--font-ui); font-size: var(--fs-small); color: var(--text); }
.diet span { display: inline-flex; align-items: center; gap: .45em; }
.diet .i { width: 18px; height: 18px; color: var(--ok); }

/* ============================================================
   Content-Split (Ambiente / Helene)
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: stretch; }
.split--media-left { grid-template-columns: 1fr 1.05fr; }
.split__media { display: flex; flex-direction: column; gap: var(--space-3); }
.split__media > .ph:first-child,
.split__media > .shot:first-child { flex: 1; aspect-ratio: 16 / 10; }
.split__media-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.split__media-row .ph, .split__media-row .shot { aspect-ratio: 4 / 3; }
.split__body { align-self: center; }
.split__body .lead { margin-bottom: var(--space-5); }
.ticklist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2);
  font-size: 1rem; }
.ticklist li { display: flex; gap: .6em; align-items: flex-start; }
.ticklist .i { width: 20px; height: 20px; color: var(--brick); flex: none; margin-top: .15em; }
@media (max-width: 820px) {
  .split, .split--media-left { grid-template-columns: 1fr; gap: var(--space-6); }
  .split--media-left .split__media { order: 2; }
}

/* ============================================================
   Zwei-Karten (Terrasse / Wagen)
   ============================================================ */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-6); }
.duo .card__media { border-radius: 0; aspect-ratio: 16 / 9; }
.duo h3 { margin-bottom: .3em; }
.duo p { font-size: var(--fs-small); color: var(--text-muted); }
.duo .note { display: block; margin-top: var(--space-3); font-family: var(--font-ui);
  font-size: var(--fs-micro); color: var(--text-muted); font-style: italic; }
@media (max-width: 720px) { .duo { grid-template-columns: 1fr; } }

/* ============================================================
   Akzent-Insel (Brunch / Final-CTA)
   ============================================================ */
.island {
  background: linear-gradient(160deg, var(--brown-700), var(--brown-900));
  border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px solid rgb(255 255 255 / .1);
}
.island .pill {
  display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-ui);
  font-size: var(--fs-micro); background: rgb(255 255 255 / .12); color: #fff;
  padding: .35em .85em; border-radius: var(--radius-pill); border: 1px solid rgb(255 255 255 / .2);
}
.island__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4); }
.island__next { font-family: var(--font-ui); font-size: var(--fs-micro); color: var(--gold-soft); }
.island h2, .island h3 { color: #fff; }
.island .lead { color: #EFE1C8; }
.island__cta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-6); }
.island__cta .small { font-family: var(--font-ui); font-size: var(--fs-micro); color: #E0CDA9; }

.island--split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: stretch; }
.island--split .island__body { align-self: center; }
.island__media { border-radius: var(--radius-md); overflow: hidden; min-height: 240px; }
.island__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .island--split { grid-template-columns: 1fr; }
  .island--split .island__media { order: -1; aspect-ratio: 16 / 9; min-height: 0; }
}

/* ---------- Final CTA (zentriert, ohne Box) ---------- */
.finalcta { text-align: center; }
.finalcta h2 { margin-bottom: var(--space-3); }
.finalcta p { margin-inline: auto; color: var(--text); margin-bottom: var(--space-6); }
.finalcta .island__cta { justify-content: center; margin-top: 0; }

/* ============================================================
   Bewertungen
   ============================================================ */
#bewertungen > .wrap { width: min(100% - 2rem, 1240px); }
.reviews__head { margin-bottom: var(--space-6); }
.reviews__src { font-family: var(--font-ui); font-size: var(--fs-small); color: var(--text-muted);
  margin-inline: auto; margin-top: var(--space-3); }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.review { background: var(--surface); border: none; border-radius: var(--radius-md);
  padding: var(--space-5); }
.review__stars { color: var(--gold); display: flex; gap: 1px; margin-bottom: var(--space-3); }
.review__stars .i { width: 17px; height: 17px; }
.review p { font-size: var(--fs-small); color: var(--text); margin-bottom: var(--space-4); font-style: italic; }
.review__who { font-family: var(--font-ui); font-size: var(--fs-micro); color: var(--text-muted); }
@media (max-width: 820px) { .reviews__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Anfahrt & Öffnungszeiten
   ============================================================ */
.info-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: stretch; }
.info-split > * { min-width: 0; }
.anfahrt__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.hours { width: 100%; border-collapse: collapse; margin-bottom: var(--space-5); font-size: var(--fs-small); }
.hours th, .hours td { text-align: left; padding: .55em 0; border-bottom: 1px solid var(--border); }
.hours th { font-family: var(--font-body); color: var(--heading); font-weight: 600; }
.hours td { text-align: right; color: var(--text-muted); font-family: var(--font-ui); }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: none; }
.travel { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3);
  font-size: var(--fs-small); font-family: var(--font-ui); color: var(--text); }
.travel li { display: flex; gap: .6em; align-items: flex-start; }
.travel .i { width: 20px; height: 20px; color: var(--brick); flex: none; margin-top: .1em; }
/* Karte füllt die Höhe des linken Inhalts (Spalten gleich hoch) */
.map { border-radius: var(--radius-md); overflow: hidden; height: 100%; min-height: 280px;
  border: 1px solid var(--border); }
.map .ph { height: 100%; align-items: center; justify-content: center; border-radius: 0; }
.map iframe { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; }
@media (max-width: 820px) { .info-split { grid-template-columns: 1fr; gap: var(--space-6); }
  .map { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .map iframe { min-height: 0; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--border); }
.faq details:first-of-type { border-top: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--space-4) 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  font-family: var(--font-body); font-size: 1.08rem; color: var(--heading); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { width: 22px; height: 22px; color: var(--text-muted); transition: transform var(--dur) var(--ease); flex: none; }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq__a { padding: 0 var(--space-6) var(--space-5) 0; font-size: var(--fs-small); color: var(--text-muted);
  max-width: 66ch; }

/* ============================================================
   Seiten-Hero (Rechtsseiten)
   ============================================================ */
.page-hero { background: var(--brown-700); color: #F3E7D2; padding-block: var(--space-8) var(--space-7); }
.page-hero h1 { color: #fff; }
.page-hero .eyebrow { color: var(--gold-soft); }
.page-hero .eyebrow::before { background: var(--gold); }

/* ============================================================
   Legal-Content
   ============================================================ */
.legal { max-width: 760px; }
.legal h2 { font-size: var(--fs-h3); margin-top: var(--space-7); margin-bottom: var(--space-3); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal ul { font-size: var(--fs-small); color: var(--text); margin-bottom: var(--space-4); }
.legal ul { padding-left: 1.2em; }
.legal .note { font-family: var(--font-ui); font-size: var(--fs-micro); color: var(--text-muted);
  background: var(--surface-inset); border-radius: var(--radius); padding: var(--space-4); }

/* Utility */
.spaced { margin-top: var(--space-6); }
.center { text-align: center; }

/* ============================================================
   Familienbrunch — braunes Band mit Zierlinien
   ============================================================ */
.brunch-band { background: rgba(110, 74, 55, 1); color: #fff; }
.brunch-band__inner { max-width: 46rem; margin-inline: auto; text-align: center; }
.brunch-band .ornament { display: block; width: min(260px, 62%); height: auto;
  margin-inline: auto; opacity: .9; }
.brunch-band h2 { color: #fff; margin-block: var(--space-4); }
.brunch-band .ornament--flip { transform: rotate(180deg); }
.brunch-band .lead { color: rgb(255 255 255 / .9); margin-top: var(--space-5); margin-inline: auto; }
.brunch-band__cta { margin-top: var(--space-6); display: flex; flex-direction: column;
  align-items: center; gap: var(--space-3); }
.brunch-band__cta .small { font-family: var(--font-ui); font-size: var(--fs-micro);
  color: rgb(255 255 255 / .78); }
.brunch-band__media { max-width: 440px; margin: var(--space-5) auto var(--space-6); aspect-ratio: 16 / 9; }

/* FAQ auf braunem Band (brunch-band) lesbar machen */
.brunch-band .faq details,
.brunch-band .faq details:first-of-type { border-color: rgb(255 255 255 / .22); }
.brunch-band .faq summary { color: #fff; }
.brunch-band .faq summary .i { color: rgb(255 255 255 / .7); }
.brunch-band .faq__a { color: rgb(255 255 255 / .82); }

/* FAQ-Überschrift auf dem braunen Band einzeilig */
.brunch-band .head--center { max-width: 44rem; }

/* Buttons auf den dunklen Bändern (Familienbrunch/FAQ) immer weiß */
.brunch-band .btn--primary { background: #fff; color: rgb(110 74 55); border-color: #fff; box-shadow: none; }
.brunch-band .btn--primary:hover { background: var(--cream-100); color: rgb(90 60 44); }

/* Duo „Draußen oder drinnen": ohne dünne Rahmen um die Karten */
.duo .card { border: none; }

/* Duo-Überschrift „Draußen oder drinnen" einzeilig */
.duo__head { max-width: 46rem; }

/* Slider-Dots (Position + klickbar) */
.slider__dots { display: flex; justify-content: center; gap: .5em; margin-top: var(--space-4); }
.slider__dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
  background: rgb(110 74 55 / .28); cursor: pointer; transition: background .2s, transform .2s; }
.slider__dot[aria-current="true"] { background: rgb(110 74 55); transform: scale(1.2); }

/* Mobil: Hero-Überschrift (2 Zeilen, etwas größer) */
@media (max-width: 600px) { .hero h1 { font-size: 2rem; } }
/* Mobil: Buchungsfelder dürfen schrumpfen (Datum-Feld lief über den Container) */
@media (max-width: 620px) {
  .booking__grid .field { min-width: 0; }
  .field input, .field select { max-width: 100%; box-sizing: border-box; }
}

/* Mobil: 20px Seitenrand für alle Sektionen/Bereiche */
@media (max-width: 600px) {
  .wrap, .hero__inner, #buffet > .wrap, #bewertungen > .wrap,
  .site-header .wrap, .site-footer .wrap { width: calc(100% - 40px); }
  /* Datum-Feld darf nicht breiter als sein Feld werden */
  .booking .field { min-width: 0; }
}

/* ============================================================
   Lightbox — Bilder in „Frühstück neben einem Stück…" vergrößern
   ============================================================ */
.split__media .shot { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem); background: rgb(18 10 3 / .9);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.lightbox[data-open="true"] { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(100%, 1400px); max-height: 90vh; width: auto; height: auto;
  border-radius: var(--radius-md); box-shadow: 0 24px 70px rgb(0 0 0 / .55); cursor: zoom-out; }
.lightbox__close { position: absolute; top: 1rem; right: 1rem; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .3); background: rgb(255 255 255 / .12); color: #fff; cursor: pointer;
  display: grid; place-items: center; font-size: 26px; line-height: 1; }
.lightbox__close:hover { background: rgb(255 255 255 / .22); }

/* Scroll-Reveal: sanftes Einblenden der Sektionen (JS ergänzt .reveal / .is-visible) */
.reveal { opacity: 0; transform: translateY(20px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   Reservierungs-Popup
   ============================================================ */
.resmodal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem); }
.resmodal[hidden] { display: none; }
.resmodal__backdrop { position: absolute; inset: 0; background: rgb(18 10 3 / .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: resfade .2s ease; }
.resmodal__dialog { position: relative; z-index: 1; width: min(100%, 470px);
  background: var(--cream-100); border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgb(0 0 0 / .4);
  padding: clamp(1.5rem, 4vw, 2.25rem); overflow: visible;
  animation: respop .28s cubic-bezier(.2, .8, .2, 1); }
.resmodal__close { position: absolute; top: -14px; right: -14px; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: #fff; color: var(--brown-700); cursor: pointer;
  display: grid; place-items: center; z-index: 3; box-shadow: 0 4px 14px rgb(0 0 0 / .25); }
.resmodal__close:hover { background: #960000; color: #fff; border-color: #960000; }
.resmodal__close .i { width: 20px; height: 20px; }
.resmodal__loading { display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  padding: var(--space-7) var(--space-4); text-align: center; color: var(--brown-700); font-family: var(--font-ui); }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgb(150 0 0 / .18);
  border-top-color: #960000; animation: resspin .8s linear infinite; }
.resmodal__content h3 { margin: 0 0 var(--space-3); color: var(--heading); }
.resmodal__summary { margin: 0 0 var(--space-5); font-size: var(--fs-small); color: var(--brown-700);
  background: var(--surface-inset); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.resmodal__summary b { color: var(--brick); }
.resmodal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: end; }
.resmodal__note { margin-top: var(--space-3); font-family: var(--font-ui); font-size: var(--fs-micro);
  color: var(--brown-500); text-align: center; }
.resmodal__msg { margin-top: var(--space-3); font-size: var(--fs-small); font-weight: 600; color: var(--ok); display: none; }
.resmodal__msg[data-show="true"] { display: block; }
#res-success { text-align: center; padding: var(--space-4) 0; }
.resmodal__check { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto var(--space-4);
  background: rgb(24 128 56 / .12); color: var(--ok); display: grid; place-items: center; }
.resmodal__check .i { width: 32px; height: 32px; stroke-width: 2.4; }
#res-success p { margin: 0 auto var(--space-5); color: var(--brown-700); max-width: 34ch; }
@media (max-width: 520px) { .resmodal__grid { grid-template-columns: 1fr; } }
@keyframes resspin { to { transform: rotate(360deg); } }
@keyframes respop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes resfade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .resmodal__dialog, .resmodal__backdrop { animation: none; }
}

/* Pflicht-Checkbox Datenschutz im Popup */
.resmodal__consent { display: flex; align-items: flex-start; gap: .55em; cursor: pointer;
  font-family: var(--font-ui); font-size: var(--fs-micro); color: var(--brown-700); line-height: 1.4; }
.resmodal__consent input { width: 18px; height: 18px; margin-top: .1em; flex: none; accent-color: #960000; }
.resmodal__consent a { color: var(--brick); }

/* Vertikaler KI-Credit am rechten Rand (von unten nach oben) */
.ai-credit { position: fixed; right: 3px; top: 50%; transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl; color: #fff; opacity: .75; pointer-events: none; z-index: 30;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: .04em; white-space: nowrap;
  text-shadow: 0 0 3px rgb(0 0 0 / .4); }